/* =====================================================
   Target Groups — Admin view & Cashier "My Targets" view
   Visual Overhaul v2
   ===================================================== */

/* ─── CUSTOM DIALOG ─────────────────────────────────── */
.tg-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.tg-dialog-overlay.tg-dialog-open {
    opacity: 1;
    pointer-events: all;
}
.tg-dialog {
    background: #fff;
    border-radius: 20px;
    padding: 2rem 2rem 1.75rem;
    max-width: 440px;
    width: 92%;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    transform: scale(0.94) translateY(10px);
    transition: transform 0.22s ease;
    text-align: center;
}
.tg-dialog-overlay.tg-dialog-open .tg-dialog {
    transform: scale(1) translateY(0);
}
.tg-dialog-icon {
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}
.tg-dialog-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}
.tg-dialog-message {
    font-size: 0.925rem;
    color: var(--text-medium);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.tg-dialog-input {
    width: 100%;
    border: 2px solid var(--border-medium);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
    background: var(--bg-gray);
    color: var(--text-dark);
    font-family: inherit;
}
.tg-dialog-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
}
.tg-dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.tg-dialog-cancel {
    flex: 1;
    padding: 0.65rem 1rem;
    border: 2px solid var(--border-medium);
    border-radius: 10px;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-medium);
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.tg-dialog-cancel:hover {
    background: var(--bg-gray);
    border-color: #bbb;
}
.tg-dialog-confirm {
    flex: 1;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: var(--primary-color);
    transition: opacity 0.15s, transform 0.1s;
    font-family: inherit;
}
.tg-dialog-confirm:hover { opacity: 0.88; transform: translateY(-1px); }
.tg-dialog-confirm:active { transform: translateY(0); }
.tg-dialog-confirm.tg-dialog-danger  { background: #ef4444; }
.tg-dialog-confirm.tg-dialog-success { background: #059669; }
.tg-dialog-confirm.tg-dialog-warning { background: #d97706; }

/* ─── ADMIN: overall container ───────────────────────── */
.tg-admin-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem 2rem;
}

/* ─── ACTION BAR ─────────────────────────────────────── */
.tg-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, #00c9ad 100%);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 168, 143, 0.28);
}
.tg-action-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.4rem;
    background: #fff;
    color: var(--primary-color);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s, transform 0.15s;
    font-family: inherit;
}
.tg-action-bar-btn:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

/* ─── STATS ──────────────────────────────────────────── */
.tg-stats-inline {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.tg-stats-inline span {
    padding: 0.4rem 1rem;
    background: rgba(255,255,255,0.22);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    white-space: nowrap;
}

/* ─── TABLE WRAPPER ──────────────────────────────────── */
.tg-table-wrapper {
    overflow-x: auto;
    background: var(--bg-white);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    border: 1px solid var(--border-light);
}
/* Inside a modal the wrapper should not add a second scrollbar */
.modal .tg-table-wrapper {
    overflow-x: visible;
    box-shadow: none;
    border-radius: 0;
    border: none;
}

/* ─── TABLE ──────────────────────────────────────────── */
.tg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.tg-table thead {
    background: #f4faf9;
}
.tg-table th {
    text-align: left;
    padding: 1rem;
    font-weight: 800;
    font-size: 0.75rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--border-medium);
    white-space: nowrap;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tg-table td {
    padding: 0.9rem 1rem;
    border-bottom: none;
    vertical-align: middle;
    color: var(--text-dark);
}
.tg-table tbody tr {
    border-bottom: 2px solid #d4e8e5;
    transition: background 0.12s;
}
.tg-table tbody tr:last-child { border-bottom: none; }
.tg-table tbody tr:hover { background: #f0fffe; }
.tg-row-overdue { background: #fff8f0 !important; }
.tg-center { text-align: center; }
.tg-sub { color: var(--text-light); font-size: 0.8rem; margin-top: 0.15rem; display: block; }
.tg-group-name { font-weight: 700; font-size: 0.9rem; }
.tg-empty-state td {
    text-align: center;
    padding: 4rem;
    color: var(--text-light);
    font-style: italic;
}

/* ─── DEADLINE CELL ──────────────────────────────────── */
.tg-deadline-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    white-space: nowrap;
}
.tg-deadline-date { font-weight: 600; font-size: 0.875rem; }
.tg-deadline-time { font-size: 0.78rem; color: var(--text-light); }
.tg-overdue-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 0.15rem;
    width: fit-content;
}

/* ─── ACHIEVED CELL ──────────────────────────────────── */
.tg-achieved-cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 70px;
}
.tg-achieved-fraction { font-weight: 700; font-size: 0.875rem; }
.tg-achieved-total { font-weight: 400; color: var(--text-light); }
.tg-mini-bar {
    width: 100%;
    height: 5px;
    background: var(--border-medium);
    border-radius: 3px;
    overflow: hidden;
}
.tg-mini-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #00c9ad);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* ─── STATUS BADGES ──────────────────────────────────── */
.tg-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.tg-badge-active    { background: #d1fae5; color: #065f46; }
.tg-badge-completed { background: #dbeafe; color: #1e40af; }
.tg-badge-cancelled { background: #fee2e2; color: #991b1b; }
.tg-badge-pending   { background: #fef3c7; color: #92400e; }

/* ─── ACTION BUTTONS (table row) ─────────────────────── */
.tg-actions-cell { vertical-align: middle; }
.tg-main-btns {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-medium);
}
.tg-status-btns {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
}
/* Legacy alias — keep for any old references */
.tg-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: nowrap;
}
.btn-tg-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
    font-family: inherit;
}
.btn-tg-sm:hover { opacity: 0.82; transform: translateY(-1px); }
.btn-tg-sm:active { transform: translateY(0); }
.btn-tg-view       { background: #eff6ff; color: #2563eb; }
.btn-tg-edit       { background: #fef3c7; color: #92400e; }
.btn-tg-delete     { background: #fee2e2; color: #991b1b; }
.btn-tg-mark       { background: #d1fae5; color: #065f46; }
.btn-tg-unmark     { background: #f3f4f6; color: #374151; }
.btn-tg-approve    { background: #d1fae5; color: #065f46; }
.btn-tg-reject     { background: #fee2e2; color: #991b1b; }
.btn-tg-complete   { background: #d1fae5; color: #065f46; }
.btn-tg-cancel-grp { background: #fee2e2; color: #991b1b; }

/* Outcome label shown in the actions cell after completion/cancellation */
.tg-outcome-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    white-space: nowrap;
}
.tg-outcome-completed { background: #dbeafe; color: #1e40af; }
.tg-outcome-cancelled { background: #f3f4f6; color: #374151; }

/* ─── MODAL SHARED ───────────────────────────────────── */
.tg-modal-content {
    max-width: 900px;
    width: 96%;
    max-height: 94vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 20px;
}
.tg-view-modal { max-width: 1080px; }

/* ─── STEP INDICATOR ─────────────────────────────────── */
.tg-steps {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-light);
}
.tg-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 90px;
    position: relative;
    z-index: 1;
}
.tg-step-bubble {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    background: var(--bg-gray);
    color: var(--text-light);
    border: 2px solid var(--border-medium);
    transition: all 0.25s;
}
.tg-step-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
    transition: color 0.25s;
}
.tg-step.active .tg-step-bubble {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 168, 143, 0.35);
}
.tg-step.active .tg-step-label { color: var(--primary-color); font-weight: 700; }
.tg-step-line {
    flex: 1;
    height: 2px;
    background: var(--border-medium);
    margin: 17px 0.5rem 0;
}

/* ─── TEST DATA BAR ──────────────────────────────────── */
.tg-test-data-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}
.tg-test-data-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border: 1.5px dashed #a78bfa;
    border-radius: 8px;
    background: #faf5ff;
    color: #7c3aed;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.tg-test-data-btn:hover { background: #f3e8ff; border-color: #7c3aed; }
.tg-test-data-btn:disabled { opacity: 0.55; cursor: default; }

/* ─── INLINE FIELD VALIDATION ───────────────────────── */
.tg-input-error {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    animation: tgErrorPulse 0.3s ease;
}
@keyframes tgErrorPulse {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-5px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
.tg-field-error-msg {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.35rem;
    animation: tgSlideDown 0.2s ease;
}
.tg-field-error-msg::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
}
@keyframes tgSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tg-members-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1.5px solid #ef4444;
    background: #fef2f2;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    animation: tgSlideDown 0.2s ease;
}
.tg-members-error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
}

/* ─── FIELDSET (reward section) ──────────────────────── */
.tg-fieldset {
    border: 1.5px solid var(--border-medium);
    border-radius: 12px;
    padding: 1.1rem 1.25rem 0.9rem;
    margin: 1rem 0;
    background: #fafffe;
}
.tg-fieldset legend {
    padding: 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tg-step-content { }
.tg-step1-actions,
.tg-step2-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-light);
}

/* ─────────────────────────────────────────────────────
   Member search / filter bar (step 2)
───────────────────────────────────────────────────── */
.tg-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    align-items: center;
}
.tg-filter-input  { flex: 1; min-width: 140px; }
.tg-filter-select { flex: 0 0 auto; min-width: 140px; max-width: 180px; }

/* Legacy alias kept for any old references */
.tg-member-search-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.tg-member-search-bar .form-input { flex: 1; }

/* Results header (count + select-all) */
.tg-results-header {
    padding: 0.4rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0.25rem;
}
.tg-select-all-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-medium);
    cursor: pointer;
    user-select: none;
}
.tg-select-all-row input[type="checkbox"] { cursor: pointer; }

/* Selected-summary header */
.tg-selected-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.tg-selected-header h4 { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--text-dark); }

.tg-member-hint, .tg-hint-text {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}
.tg-search-input-wrap {
    position: relative;
    flex: 1;
}
.tg-search-field {
    border-color: var(--border-medium) !important;
    background: white !important;
    color: var(--text-dark);
}
.tg-search-field::placeholder { color: var(--text-light); }
.tg-search-field:focus {
    border-color: var(--primary-color) !important;
    background: white !important;
    transform: none !important;
}
.tg-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 1rem;
    height: 46px;
    border: 1.5px solid var(--border-medium);
    border-radius: 10px;
    background: white;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    font-family: inherit;
}
.tg-filter-toggle-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #f0fffe;
}
.tg-filter-toggle-active {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background: #e6faf7 !important;
}
.tg-filter-icon { font-size: 1rem; }
.tg-search-btn { white-space: nowrap; }

/* ─── FILTER PANEL ───────────────────────────────────── */
.tg-filter-panel {
    margin-top: 0.6rem;
    padding: 0.9rem 1rem;
    background: #f7fffe;
    border: 1.5px solid #c8f0ea;
    border-radius: 10px;
    animation: tgSlideDown 0.18s ease;
}
.tg-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
}
.tg-filter-field { display: flex; flex-direction: column; gap: 0.3rem; }
.tg-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tg-filter-input {
    border-color: var(--border-medium) !important;
    background: white !important;
    color: var(--text-dark);
    padding: 0.6rem 0.85rem !important;
    font-size: 0.875rem !important;
    transform: none !important;
}
.tg-filter-input:focus { border-color: var(--primary-color) !important; transform: none !important; }
.tg-filter-input::placeholder { color: var(--text-light); }
.tg-filter-note {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-light);
}
.tg-member-hint, .tg-hint-text {
    font-size: 0.84rem;
    color: var(--text-light);
    margin-bottom: 0.6rem;
}
.tg-cashier-results {
    max-height: 480px;
    overflow-y: auto;
    border: 1.5px solid var(--border-medium);
    border-radius: 10px;
    padding: 0.5rem 0.5rem 0.25rem;
    background: var(--bg-gray);
    margin-bottom: 1rem;
}

/* ─── GROUPED RESULTS ────────────────────────────────── */
.tg-grouped-results { display: flex; flex-direction: column; gap: 0.5rem; }
.tg-province-group {
    border: 1.5px solid #d1f5ef;
    border-radius: 10px;
    overflow: hidden;
    background: white;
}
.tg-province-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, #e6faf7, #f0fff9);
    border-bottom: 1px solid #d1f5ef;
}
.tg-province-label {
    font-weight: 800;
    font-size: 0.82rem;
    color: #00796b;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.tg-group-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #00796b;
    background: rgba(0,168,143,0.12);
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
}
.tg-store-group { border-bottom: 1px solid var(--border-light); }
.tg-store-group:last-child { border-bottom: none; }
.tg-store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.85rem;
    background: #fafffe;
    border-bottom: 1px solid var(--border-light);
}
.tg-store-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-medium);
}
.tg-store-group .tg-group-count {
    color: var(--text-light);
    background: var(--bg-gray);
    font-size: 0.72rem;
}
.tg-results-list { display: flex; flex-direction: column; gap: 0; }
.tg-cashier-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.12s;
    border: none;
    border-bottom: 1px solid var(--border-light);
}
.tg-cashier-row:last-child { border-bottom: none; }
.tg-cashier-row:hover { background: #f0fffe; }
.tg-cashier-row.tg-cashier-selected { background: #ecfdf5; }
.tg-cashier-check { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary-color); }
.tg-cashier-info { display: flex; flex-direction: column; gap: 0.1rem; }
.tg-cashier-name { font-weight: 700; font-size: 0.88rem; color: var(--text-dark); }
.tg-cashier-meta { font-size: 0.78rem; color: var(--text-light); }
.tg-error { color: #ef4444 !important; }

/* ─── SELECTED TAGS ──────────────────────────────────── */
.tg-selected-summary {
    background: var(--bg-white);
    border: 1.5px solid var(--border-medium);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
}
.tg-selected-summary h4 {
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
    color: var(--text-dark);
}
.tg-selected-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tg-member-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #ecfdf5;
    color: #065f46;
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid #a7f3d0;
}
.tg-tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #065f46;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    margin-left: 0.1rem;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.tg-tag-remove:hover { opacity: 1; }
.tg-no-members { font-size: 0.84rem; color: var(--text-light); }

/* ─── VIEW MODAL — group info bar ───────────────────── */
.tg-view-group-info {
    background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
    border: 1.5px solid #a7f3d0;
    border-radius: 12px;
    padding: 1.1rem 1.4rem;
    margin-bottom: 1.5rem;
}
.tg-view-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 2rem;
    font-size: 0.88rem;
}
.tg-info-label { font-weight: 800; color: var(--primary-color); margin-right: 0.3rem; }

/* ─── EVIDENCE COLUMN ────────────────────────────────── */
.tg-evidence-col { min-width: 100px; max-width: 220px; }

/* ─── EVIDENCE (admin view) ──────────────────────────── */
.tg-evidence-grid {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
.tg-evidence-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid var(--border-medium);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.tg-evidence-thumb:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.tg-evidence-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-evidence-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 1.5px solid var(--border-medium);
    text-decoration: none;
    color: var(--text-medium);
    background: var(--bg-gray);
    font-size: 0.7rem;
    text-align: center;
    padding: 0.4rem;
    gap: 0.25rem;
    transition: background 0.15s;
    box-sizing: border-box;
    overflow: hidden;
}
.tg-evidence-file:hover { background: #f0fffe; color: var(--primary-color); }
.tg-evidence-file-icon { font-size: 1.75rem; }
.tg-evidence-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; text-align: center; }
.tg-evidence-label { font-weight: 700; font-size: 0.8rem; color: var(--text-dark); margin-top: 0.5rem; }
.tg-cashier-note { font-size: 0.82rem; color: var(--text-medium); margin-top: 0.35rem; font-style: italic; }

/* ─── TOAST ──────────────────────────────────────────── */
.tg-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a1a1a;
    color: #fff;
    padding: 0.75rem 1.75rem;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    white-space: nowrap;
}
.tg-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── CASHIER: My Targets container ─────────────────── */
.mt-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1rem;
}
.mt-loading, .mt-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-light);
}
.mt-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.mt-empty h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--text-dark); }

/* ─── CASHIER: cards grid ────────────────────────────── */
.mt-targets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1.5rem;
}
.mt-card {
    background: var(--bg-white);
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-light);
    transition: box-shadow 0.2s, transform 0.2s;
}
.mt-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.12); transform: translateY(-2px); }
.mt-card-stripe {
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), #00c9ad);
    flex-shrink: 0;
    opacity: 1;
}
.mt-card-achieved .mt-card-stripe { background: linear-gradient(90deg, var(--primary-color), #667eea); }
.mt-card-expired .mt-card-stripe  { background: linear-gradient(90deg, #d97706, #fbbf24); }

/* Achieved cards — gradient outline matches the achieved stripe exactly.
   The background shorthand is used intentionally so background-color defaults
   to transparent, which is required for the gradient-border technique to work. */
.mt-card-achieved {
    border: 2px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(90deg, var(--primary-color), #667eea) border-box;
}
.mt-card-body {
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1;
}
.mt-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mt-card-title { font-size: 1.35rem; font-weight: 800; color: var(--text-dark); margin: 0; line-height: 1.3; }

/* Status badges (cashier) */
.mt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.mt-badge .mt-icon { width: 0.85rem; height: 0.85rem; }
.mt-badge-active    { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.mt-badge-urgent    { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.mt-badge-expired   { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.mt-badge-completed { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.mt-badge-cancelled { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }

.mt-achieved-banner {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    color: #065f46;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    border: 1px solid #a7f3d0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.mt-achieved-banner .mt-icon { width: 1.1rem; height: 1.1rem; }
.mt-card-desc { font-size: 0.85rem; color: var(--text-medium); line-height: 1.5; margin: 0; }

/* Generic section label — primary-tinted uppercase */
.mt-label {
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--primary-color);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Generic SVG icon sizing — inherits colour via currentColor */
.mt-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    stroke-width: 2;
}

/* Info grid — each row is a separated card with icon | label / value */
.mt-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.mt-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    background: var(--bg-light, #f8fafc);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}
.mt-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    background: rgba(0, 168, 143, 0.12);
    color: var(--primary-color);
    flex-shrink: 0;
}
.mt-info-icon .mt-icon { width: 1.15rem; height: 1.15rem; }
.mt-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}
.mt-info-value {
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
}
.mt-info-value-strong {
    font-size: 1.05rem;
    font-weight: 800;
}

/* Group progress — own bordered section so it visually separates */
.mt-progress-section {
    padding: 0.75rem 0.9rem;
    background: var(--bg-light, #f8fafc);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mt-progress-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-medium);
}
.mt-progress-icon {
    display: flex;
    align-items: center;
    color: var(--primary-color);
}
.mt-progress-icon .mt-icon { width: 1rem; height: 1rem; }
.mt-progress-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mt-progress-count {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dark);
}
.mt-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border-medium);
    border-radius: 4px;
    overflow: hidden;
}
.mt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #00c9ad);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Notes block (manager / cashier) */
.mt-admin-notes {
    font-size: 0.85rem;
    color: var(--text-dark);
    background: var(--bg-light, #f8fafc);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mt-note-body {
    color: var(--text-medium);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Shared "icon + uppercase label" header used by evidence + notes sections */
.mt-section-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.mt-section-icon {
    display: flex;
    align-items: center;
    color: var(--primary-color);
}
.mt-section-icon .mt-icon { width: 1rem; height: 1rem; }

/* ─────────────────────────────────────────────────────
   Dark mode overrides
───────────────────────────────────────────────────── */
.dark-mode .tg-results-header { border-color: #333; }
.dark-mode .tg-select-all-row { color: #aaa; }

.dark-mode .tg-action-bar,
.dark-mode .tg-table-wrapper,
.dark-mode .tg-cashier-row,
.dark-mode .tg-selected-summary,
.dark-mode .mt-card {
    background: #1e1e1e;
    color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.dark-mode .tg-table thead { background: #252525; }
.dark-mode .tg-table th,
.dark-mode .tg-table td { border-color: #333; color: #d0d0d0; }
.dark-mode .tg-table tbody tr:hover { background: #252525; }
.dark-mode .tg-view-group-info { background: #252525; }
.dark-mode .tg-cashier-results { background: #252525; border-color: #444; }
.dark-mode .tg-cashier-row { background: #1e1e1e; }
.dark-mode .tg-cashier-row:hover { background: #2a2a2a; }
.dark-mode .tg-cashier-row.tg-cashier-selected { background: #1a332a; }
/* achieved/expired card backgrounds handled in the consolidated block below */
.dark-mode .tg-toast { background: #e0e0e0; color: #1a1a1a; }

/* ─────────────────────────────────────────────────────
   Cashier: Complete target & Evidence
───────────────────────────────────────────────────── */
.mt-complete-section {
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}
.btn-mt-complete {
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, var(--primary-color), #00c9ad);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}
.btn-mt-complete .mt-icon { width: 1.1rem; height: 1.1rem; }
.btn-mt-complete:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 168, 143, 0.3); }
.btn-mt-complete:disabled { background: #ccc; cursor: not-allowed; transform: none; opacity: 1; }

.mt-status-banner {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.mt-status-banner .mt-icon { width: 1.05rem; height: 1.05rem; }
.mt-status-pending  { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.mt-status-rejected { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ─── CASHIER: Evidence ──────────────────────────────── */
.mt-evidence-section {
    background: var(--bg-light, #f8fafc);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mt-evidence-list { display: flex; flex-direction: column; gap: 0.4rem; }
.mt-evidence-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.85rem;
}
.mt-evidence-filename {
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.4;
    width: 100%;
}
.mt-evidence-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 0.25rem;
}
.mt-evidence-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
    background: #ecfdf5;
    font-size: 0.8rem;
    transition: background 0.15s;
}
.mt-evidence-link:hover { background: #d1fae5; }

/* ─── DARK MODE ──────────────────────────────────────── */
.dark-mode .tg-dialog { background: #1e1e1e; }
.dark-mode .tg-dialog-title { color: #e0e0e0; }
.dark-mode .tg-dialog-message { color: #b0b0b0; }
.dark-mode .tg-dialog-input { background: #252525; color: #e0e0e0; border-color: #444; }
.dark-mode .tg-dialog-input:focus { background: #2a2a2a; border-color: var(--primary-color); }
.dark-mode .tg-dialog-cancel { background: #252525; border-color: #444; color: #d0d0d0; }
.dark-mode .tg-dialog-cancel:hover { background: #333; }

.dark-mode .tg-action-bar { box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.dark-mode .tg-table-wrapper { background: #1e1e1e; border-color: #333; box-shadow: 0 2px 16px rgba(0,0,0,0.3); }
.dark-mode .tg-table thead { background: #252525; }
.dark-mode .tg-table th { color: #00c9ad; border-color: #333; }
.dark-mode .tg-table td { border-color: #2d2d2d; color: #d0d0d0; }
.dark-mode .tg-table tbody tr:hover { background: #252525; }
.dark-mode .tg-row-overdue { background: #2a1e0a !important; }
.dark-mode .tg-view-group-info { background: #1a2e26; border-color: #2d5a45; }
.dark-mode .tg-cashier-results { background: #252525; border-color: #444; }
.dark-mode .tg-cashier-row { background: #1e1e1e; }
.dark-mode .tg-cashier-row:hover { background: #2a2a2a; border-color: #444; }
.dark-mode .tg-cashier-row.tg-cashier-selected { background: #1a332a; border-color: #2d5a45; }
.dark-mode .tg-selected-summary { background: #1e1e1e; border-color: #333; }
.dark-mode .tg-fieldset { background: #1a2420; border-color: #333; }
.dark-mode .tg-mini-bar { background: #333; }
.dark-mode .tg-overdue-pill { background: #3d2e0a; color: #fbbf24; }

/* Status badges (used in dashboard list and inside view-modal steps) */
.dark-mode .tg-badge-active    { background: #064e3b; color: #6ee7b7; }
.dark-mode .tg-badge-completed { background: #1e3a8a; color: #93c5fd; }
.dark-mode .tg-badge-cancelled { background: #3d1010; color: #fca5a5; }
.dark-mode .tg-badge-pending   { background: #422006; color: #fcd34d; }

/* Row-action mini-buttons (visually function as badges) */
.dark-mode .btn-tg-view       { background: #0c2649; color: #93c5fd; }
.dark-mode .btn-tg-edit       { background: #422006; color: #fcd34d; }
.dark-mode .btn-tg-delete     { background: #3d1010; color: #fca5a5; }
.dark-mode .btn-tg-mark       { background: #064e3b; color: #6ee7b7; }
.dark-mode .btn-tg-unmark     { background: #1f2937; color: #d1d5db; }
.dark-mode .btn-tg-approve    { background: #064e3b; color: #6ee7b7; }
.dark-mode .btn-tg-reject     { background: #3d1010; color: #fca5a5; }
.dark-mode .btn-tg-complete   { background: #064e3b; color: #6ee7b7; }
.dark-mode .btn-tg-cancel-grp { background: #3d1010; color: #fca5a5; }
.dark-mode .tg-outcome-completed { background: #1e3a8a; color: #93c5fd; }
.dark-mode .tg-outcome-cancelled { background: #1f2937; color: #d1d5db; }
.dark-mode .tg-table tbody tr { border-bottom-color: #2d3748; }
.dark-mode .tg-main-btns { border-bottom-color: #374151; }

/* My Targets statuses (cashier-facing) */
.dark-mode .mt-status-approved  { background: #064e3b; color: #6ee7b7; border-color: #065f46; }
.dark-mode .mt-status-completed { background: #1e3a8a; color: #93c5fd; border-color: #1e40af; }
.dark-mode .mt-status-cancelled { background: #3d1010; color: #fca5a5; border-color: #5c1a1a; }

/* Step bubbles in the create/edit wizard */
.dark-mode .tg-steps { border-bottom-color: #333; }
.dark-mode .tg-step-bubble {
    background: #1f2937;
    color: #9ca3af;
    border-color: #374151;
}
.dark-mode .tg-step-label { color: #9ca3af; }
.dark-mode .tg-step-line  { background: #374151; }
.dark-mode .tg-step.active .tg-step-bubble {
    background: var(--primary-color);
    color: #0b0b0b;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 168, 143, 0.45);
}
.dark-mode .tg-step.active .tg-step-label { color: var(--primary-color); }

/* Selected member tags (step 2) */
.dark-mode .tg-member-tag {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #065f46;
}
.dark-mode .tg-tag-remove { color: #6ee7b7; }
.dark-mode .tg-no-members { color: #9ca3af; }
.dark-mode .tg-toast { background: #e0e0e0; color: #1a1a1a; }
.dark-mode .tg-evidence-thumb { border-color: #444; }
.dark-mode .tg-evidence-file { background: #252525; color: #b0b0b0; border-color: #444; }
.dark-mode .tg-evidence-file:hover { background: #2a2a2a; }

.dark-mode .mt-card { background: #1e1e1e; border-color: #2d2d2d; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.dark-mode .mt-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
.dark-mode .mt-card-title { color: #e0e0e0; }
.dark-mode .mt-achieved-banner { background: #1a332a; border-color: #2d5a45; color: #6ee7b7; }
.dark-mode .mt-admin-notes { background: #252525; color: #b0b0b0; }
.dark-mode .mt-complete-section { border-top-color: #333; background: #1f2937 !important; }
.dark-mode .mt-status-pending { background: #3d3310; color: #fcd34d; border-color: #5c4f1a; }
.dark-mode .mt-status-rejected { background: #3d1010; color: #fca5a5; border-color: #5c1a1a; }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
    /* Wizard step bubbles wrap on a single row but at smaller scale. */
    .tg-steps  { gap: 0.25rem; }
    .tg-step   { min-width: 60px; }
    .tg-step-bubble { width: 30px; height: 30px; font-size: 0.78rem; }
    .tg-step-label  { font-size: 0.7rem; }
    .tg-step-line   { margin: 14px 0.3rem 0; }

    /* Action bar buttons stack so they don't push off-screen. */
    .tg-action-bar { flex-wrap: wrap; gap: 0.5rem; }

    /* Tables become horizontally scrollable rather than overflowing. */
    .tg-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tg-table { font-size: 0.82rem; }
    .tg-table th,
    .tg-table td { padding: 0.6rem 0.5rem; }
    .tg-actions { gap: 0.25rem; }
    .btn-tg-sm  { padding: 0.3rem 0.5rem; font-size: 0.72rem; }
}

@media (max-width: 768px) {
    .tg-view-info-grid { grid-template-columns: 1fr; }
    .tg-action-bar { flex-direction: column; align-items: stretch; }
    .tg-action-bar > * { width: 100%; }
    .mt-targets-grid { grid-template-columns: 1fr; }
    .tg-modal-content { max-height: 100vh; border-radius: 0; }
    .tg-dialog { max-width: 95%; border-radius: 16px; }
    .tg-dialog-actions { flex-direction: column-reverse; }
    .tg-dialog-cancel, .tg-dialog-confirm { width: 100%; flex: unset; }
}

/* ─────────────────────────────────────────────────────
   My Targets — dark-mode coverage for new card layout
───────────────────────────────────────────────────── */
.dark-mode .mt-card {
    background: #1f2937;
    border-color: #374151;
}
.dark-mode .mt-card-title { color: #f9fafb; }
.dark-mode .mt-card-desc  { color: #9ca3af; }

/* Badges — readable on dark surfaces */
.dark-mode .mt-badge-active    { background: #064e3b; color: #6ee7b7; border-color: #065f46; }
.dark-mode .mt-badge-urgent    { background: #422006; color: #fcd34d; border-color: #92400e; }
.dark-mode .mt-badge-expired   { background: #3d1010; color: #fca5a5; border-color: #7f1d1d; }
.dark-mode .mt-badge-completed { background: #1e3a8a; color: #93c5fd; border-color: #1e40af; }
.dark-mode .mt-badge-cancelled { background: #374151; color: #d1d5db; border-color: #4b5563; }

/* Achieved + status banners */
.dark-mode .mt-achieved-banner {
    background: linear-gradient(135deg, #064e3b, #065f46);
    color: #6ee7b7;
    border-color: #047857;
}
.dark-mode .mt-status-pending  { background: #422006; color: #fcd34d; border-color: #92400e; }
.dark-mode .mt-status-rejected { background: #3d1010; color: #fca5a5; border-color: #7f1d1d; }

/* Info grid rows */
.dark-mode .mt-info-row {
    background: #111827;
    border-color: #374151;
}
.dark-mode .mt-info-icon {
    background: rgba(0, 168, 143, 0.18);
    color: #34d399;
}
.dark-mode .mt-info-value         { color: #f3f4f6; }
.dark-mode .mt-info-value-strong  { color: #ffffff; }
.dark-mode .mt-label              { color: #34d399; }
.dark-mode .mt-section-icon,
.dark-mode .mt-progress-icon      { color: #34d399; }

/* Progress block */
.dark-mode .mt-progress-section {
    background: #111827;
    border-color: #374151;
}
.dark-mode .mt-progress-bar  { background: #374151; }
.dark-mode .mt-progress-count { color: #f3f4f6; }
.dark-mode .mt-progress-header { color: #d1d5db; }

/* Notes block */
.dark-mode .mt-admin-notes {
    background: #111827;
    border-color: #374151;
    color: #e5e7eb;
}
.dark-mode .mt-note-body { color: #d1d5db; }

/* Evidence block */
.dark-mode .mt-evidence-section {
    background: #111827;
    border-color: #374151;
}
.dark-mode .mt-evidence-item {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}
.dark-mode .mt-evidence-actions { border-top: 1px solid #374151; padding-top: 0.5rem; }
.dark-mode .mt-evidence-link {
    background: #064e3b;
    color: #6ee7b7;
}
.dark-mode .mt-evidence-link:hover { background: #047857; color: #d1fae5; }

/* Bottom button divider */
.dark-mode .mt-complete-section { border-top-color: #374151; background: #1f2937 !important; }

/* Achieved / expired card tints — refresh against new base */
/* achieved/expired card backgrounds handled in the consolidated block below */

/* mt-container is a layout wrapper — ensure it never shows a white box in dark mode */
body.dark-mode .mt-container {
    background: transparent !important;
}

/* ─────────────────────────────────────────────────────
   My Targets — filter / sort toolbar
───────────────────────────────────────────────────── */
.mt-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.mt-filter-group {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex: 1;
}
.mt-filter-btn {
    padding: 0.4rem 1rem;
    border: 1.5px solid var(--border-medium);
    border-radius: 20px;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-medium);
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    white-space: nowrap;
}
.mt-filter-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(0,168,143,0.06);
}
.mt-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.mt-sort-group { display: flex; align-items: center; }
.mt-sort-select {
    padding: 0.4rem 0.85rem;
    border: 1.5px solid var(--border-medium);
    border-radius: 20px;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-medium);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.18s;
    appearance: auto;
}
.mt-sort-select:focus { outline: none; border-color: var(--primary-color); }

/* Dark mode — stripe (force explicit gradient so nothing can override it) */
body.dark-mode .mt-card-stripe {
    height: 6px;
    opacity: 1;
    background: linear-gradient(90deg, var(--primary-color), #00c9ad) !important;
}
body.dark-mode .mt-card-achieved .mt-card-stripe {
    background: linear-gradient(90deg, var(--primary-color), #667eea) !important;
}
body.dark-mode .mt-card-expired .mt-card-stripe {
    background: linear-gradient(90deg, #d97706, #fbbf24) !important;
}

/* Achieved card — gradient outline matching the stripe, dark inner fill.
   background shorthand used so background-color is transparent (required). */
body.dark-mode .mt-card-achieved {
    border: 2px solid transparent !important;
    background:
        linear-gradient(#1f2937, #1f2937) padding-box,
        linear-gradient(90deg, var(--primary-color), #667eea) border-box !important;
}

/* Expired card — tinted background only, no special outline */
body.dark-mode .mt-card-expired {
    background: #2a1e0a !important;
    border-color: #374151 !important;
}
body.dark-mode .mt-toolbar {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.dark-mode .mt-filter-btn {
    border-color: #374151;
    color: #9ca3af;
}
body.dark-mode .mt-filter-btn:hover {
    border-color: var(--primary-color);
    color: #34d399;
    background: rgba(0,168,143,0.12);
}
body.dark-mode .mt-filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
body.dark-mode .mt-sort-select {
    border-color: #374151;
    color: #d1d5db;
    background: #111827;
}
body.dark-mode .mt-sort-select:focus { border-color: var(--primary-color); }

/* tg-admin-container is a layout wrapper — transparent in dark mode */
body.dark-mode .tg-admin-container {
    background: transparent !important;
}

/* Province / channel filter selects and search input inside the modal */
body.dark-mode .tg-filter-select,
body.dark-mode .tg-filter-input,
body.dark-mode .modal .form-input,
body.dark-mode .modal .form-select {
    background: #111827 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
body.dark-mode .tg-filter-select:focus,
body.dark-mode .tg-filter-input:focus,
body.dark-mode .modal .form-input:focus {
    border-color: var(--primary-color) !important;
    outline: none;
}
body.dark-mode .tg-filter-select option,
body.dark-mode .tg-filter-input::placeholder {
    background: #111827;
    color: #9ca3af;
}

/* Fieldset (Reward section) inside modal */
body.dark-mode .tg-fieldset {
    background: #111827 !important;
    border-color: #374151 !important;
}
body.dark-mode .tg-fieldset legend {
    color: var(--primary-color);
}

/* Step 1/2 action dividers */
body.dark-mode .tg-step1-actions,
body.dark-mode .tg-step2-actions {
    border-top-color: #374151;
}

/* Member hint text */
body.dark-mode .tg-member-hint,
body.dark-mode .tg-hint-text {
    color: #9ca3af;
}

/* ─────────────────────────────────────────────────────
   Create Target Group modal — grouped results dark mode
───────────────────────────────────────────────────── */
body.dark-mode .tg-province-group {
    background: #1f2937 !important;
    border-color: #374151 !important;
}
body.dark-mode .tg-province-header {
    background: linear-gradient(135deg, #0d2e28, #0f3530) !important;
    border-bottom-color: #1a4a42 !important;
}
body.dark-mode .tg-province-label {
    color: #34d399 !important;
}
body.dark-mode .tg-group-count {
    color: #34d399 !important;
    background: rgba(0, 168, 143, 0.18) !important;
}
body.dark-mode .tg-store-group {
    border-bottom-color: #374151 !important;
}
body.dark-mode .tg-store-header {
    background: #111827 !important;
    border-bottom-color: #374151 !important;
}
body.dark-mode .tg-store-label {
    color: #9ca3af !important;
}
body.dark-mode .tg-store-group .tg-group-count {
    color: #6b7280 !important;
    background: #1f2937 !important;
}
body.dark-mode .tg-cashier-row {
    background: #1f2937 !important;
    border-bottom-color: #374151 !important;
}
body.dark-mode .tg-cashier-row:hover {
    background: #263548 !important;
}
body.dark-mode .tg-cashier-row.tg-cashier-selected {
    background: #0f2a1a !important;
}
body.dark-mode .tg-cashier-name { color: #f3f4f6 !important; }
body.dark-mode .tg-cashier-meta { color: #9ca3af !important; }

/* Results header / select-all row */
body.dark-mode .tg-results-header {
    background: #1f2937 !important;
    border-bottom-color: #374151 !important;
}
body.dark-mode .tg-select-all-row { color: #9ca3af !important; }

/* Selected members summary + tags */
body.dark-mode .tg-selected-summary {
    background: #1f2937 !important;
    border-color: #374151 !important;
}
body.dark-mode .tg-selected-summary h4 { color: #f3f4f6 !important; }
body.dark-mode .tg-no-members { color: #6b7280 !important; }
body.dark-mode .tg-member-tag {
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border-color: #065f46 !important;
}
body.dark-mode .tg-tag-remove { color: #6ee7b7 !important; }

/* ─── EVIDENCE PREVIEW PANEL ─────────────────────────────── */
#evidencePreview { margin-top: 10px; }
.ep-label {
    margin: 10px 0 5px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
}
.ep-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 6px 10px;
    background: var(--bg-gray, #f3f4f6);
    margin: 4px 0;
    border-radius: 8px;
    font-size: 0.85rem;
    border: 1px solid var(--border-light, #e5e7eb);
}
.ep-clip { flex-shrink: 0; }
.ep-name {
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-all;
    color: var(--text-dark);
}
.ep-size {
    flex-shrink: 0;
    color: var(--text-light);
    font-size: 0.78rem;
}
.ep-warning {
    margin: 6px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 5px 10px;
}
.ep-total {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--text-light);
    text-align: right;
}

/* Dark mode */
body.dark-mode .ep-label { color: #e5e7eb; }
body.dark-mode .ep-item {
    background: #1f2937;
    border-color: #374151;
}
body.dark-mode .ep-name { color: #e5e7eb; }
body.dark-mode .ep-size { color: #9ca3af; }
body.dark-mode .ep-warning {
    background: #451a03;
    border-color: #92400e;
    color: #fbbf24;
}
body.dark-mode .ep-total { color: #9ca3af; }

/* Complete section — force card bg colour so it doesn't stand out */
body.dark-mode .mt-complete-section,
body.dark-mode .mt-card .mt-complete-section {
    background: #1f2937 !important;
    border-top-color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE — Target Groups admin view (≤ 640px)
   Table rows convert to stacked cards for readability.
════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Admin container ── */
    .tg-admin-container {
        padding: 0 0.5rem 1.5rem;
    }

    /* ── Action bar — stack vertically, stretch buttons ── */
    .tg-action-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.75rem;
    }
    .tg-action-bar-btn {
        width: 100%;
        justify-content: center;
    }
    .tg-stats-inline {
        justify-content: center;
    }

    /* ── Table → card list ── */
    .tg-table-wrapper {
        border-radius: 12px;
        overflow: hidden;
    }
    .tg-table thead { display: none; }
    .tg-table,
    .tg-table tbody,
    .tg-table tr,
    .tg-table td { display: block; width: 100%; box-sizing: border-box; }

    .tg-table tr {
        border-bottom: 1px solid var(--border-light);
        padding: 0.85rem 1rem;
    }
    .tg-table tr:last-child { border-bottom: none; }
    .tg-row-overdue { background: #fff8f0 !important; }

    .tg-table td {
        padding: 0.3rem 0;
        border-bottom: none;
        text-align: left;
    }
    /* Label before each cell value */
    .tg-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 800;
        color: var(--primary-color);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.15rem;
        opacity: 0.8;
    }
    /* Hide less-critical columns to keep cards compact */
    .tg-table td[data-label="Criteria"],
    .tg-table td[data-label="Members"] { display: none; }

    /* Group name stands out as card title */
    .tg-group-name { font-size: 1rem; }

    /* Actions cell — stack main/status rows, wrap buttons */
    .tg-table td[data-label="Actions"] { padding-top: 0.6rem; }
    .tg-main-btns, .tg-status-btns, .tg-actions { flex-wrap: wrap; gap: 0.4rem; }
    .btn-tg-sm { flex: 1; justify-content: center; padding: 0.45rem 0.6rem; font-size: 0.8rem; }

    /* ── Create/Edit modal ── */
    .tg-modal-content {
        width: 100%;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
    }

    /* Step indicator — shrink labels */
    .tg-steps { margin-bottom: 1.25rem; padding-bottom: 1rem; gap: 0.15rem; }
    .tg-step { min-width: 50px; }
    .tg-step-bubble { width: 28px; height: 28px; font-size: 0.75rem; }
    .tg-step-label { font-size: 0.65rem; white-space: normal; text-align: center; }
    .tg-step-line { margin: 13px 0.25rem 0; }

    /* Form rows always stack on mobile */
    .tg-modal-content .form-row,
    .tg-fieldset .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* Fieldset reward section */
    .tg-fieldset { padding: 0.85rem 0.9rem; }

    /* Step actions — stack buttons */
    .tg-step1-actions,
    .tg-step2-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    .tg-step1-actions .btn,
    .tg-step2-actions .btn { width: 100%; justify-content: center; }

    /* ── Cashier search / filter bar (step 2) ── */
    .tg-filter-bar {
        flex-direction: column;
        gap: 0.5rem;
    }
    .tg-filter-input,
    .tg-filter-select {
        max-width: 100%;
        width: 100%;
    }
    .tg-filter-bar .btn { width: 100%; }

    /* Filter panel row — single column */
    .tg-filter-row { grid-template-columns: 1fr; }

    /* Cashier results — slightly shorter so buttons stay visible */
    .tg-cashier-results { max-height: 320px; }

    /* ── View modal members table → cards ── */
    #tgMembersTable thead { display: none; }
    #tgMembersTable,
    #tgMembersTable tbody,
    #tgMembersTable tr,
    #tgMembersTable td { display: block; width: 100%; box-sizing: border-box; }
    #tgMembersTable tr {
        border-bottom: 1px solid var(--border-light);
        padding: 0.8rem 0.9rem;
    }
    #tgMembersTable tr:last-child { border-bottom: none; }
    #tgMembersTable td {
        padding: 0.25rem 0;
        border-bottom: none;
    }
    #tgMembersTable td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 800;
        color: var(--primary-color);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.15rem;
        opacity: 0.8;
    }
    /* Show Store and Achieved? on mobile */
    #tgMembersTable td[data-label="Store"]    { display: block; }
    #tgMembersTable td[data-label="Achieved?"]{ display: block; }
    #tgMembersTable td[data-label="Actions"] {
        padding-top: 0.5rem;
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    #tgMembersTable .btn-tg-sm { flex: 1; justify-content: center; }

    /* Evidence column — thumbnails wrap and shrink for mobile */
    #tgMembersTable td[data-label="Evidence"] .tg-evidence-grid {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    #tgMembersTable td[data-label="Evidence"] .tg-evidence-thumb,
    #tgMembersTable td[data-label="Evidence"] .tg-evidence-file {
        width: 56px;
        height: 56px;
    }

    /* View-modal info grid → single column */
    .tg-view-info-grid { grid-template-columns: 1fr; gap: 0.4rem; }

    /* Evidence thumbs — smaller on mobile */
    .tg-evidence-thumb { width: 64px; height: 64px; }
    .tg-evidence-file  { width: 64px; height: 64px; }
}

/* Dark mode overrides for the mobile card layout */
@media (max-width: 640px) {
    body.dark-mode .tg-table tr,
    body.dark-mode #tgMembersTable tr {
        border-bottom-color: #374151;
        background: #1f2937;
    }
    body.dark-mode .tg-row-overdue { background: #2a1e0a !important; }
    body.dark-mode .tg-table td[data-label]::before,
    body.dark-mode #tgMembersTable td[data-label]::before {
        color: #34d399;
    }
}