:root {
    --bg: #f2f3f7;
    --card-bg: #ffffff;
    --border: #e2e4ea;
    --text: #1b1f2a;
    --text-muted: #5b6472;
    --primary: #2e4374;
    --primary-dark: #202f52;
    --primary-soft: #eaeefb;
    --green: #16a34a;
    --green-bg: #dcfce7;
    --green-text: #166534;
    --orange: #b7791f;
    --orange-bg: #fdf1dc;
    --orange-text: #8a5b12;
    --red: #c0392b;
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(20, 24, 38, 0.06);
    --shadow-md: 0 6px 20px rgba(20, 24, 38, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", "Inter", Roboto, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.topbar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: var(--shadow-sm);
}

.brand {
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: 0.1px;
}

.topbar nav { display: flex; align-items: center; gap: 0.35rem; }
.topbar nav a {
    color: var(--text-muted);
    text-decoration: none;
    margin-left: 0.15rem;
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.topbar nav a:hover { background: var(--primary-soft); color: var(--primary); }
.topbar nav a.active { background: var(--primary-soft); color: var(--primary); }

.user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 0.75rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--border);
}
.user-chip-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.user-chip-name { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.user-chip form { margin: 0; }
.user-chip button {
    background: none; border: none; color: var(--text-muted);
    font-size: 0.82rem; cursor: pointer; text-decoration: underline;
    padding: 0;
}
.user-chip button:hover { color: var(--red); }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Break the wide editable Per-Client Link Details table out of the narrow
   .container so users don't have to scroll sideways to reach the Save
   button. Falls back gracefully to full viewport width (minus the same
   side padding) on narrow screens. */
.wide-break {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    box-sizing: border-box;
    padding-left: max(1.5rem, calc((100vw - 1500px) / 2 + 1.5rem));
    padding-right: max(1.5rem, calc((100vw - 1500px) / 2 + 1.5rem));
}

.flash-container { max-width: 1100px; margin: 1rem auto 0; padding: 0 1.5rem; }
.flash {
    background: var(--orange-bg);
    color: var(--orange-text);
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 { margin: 0 0 0.25rem 0; font-size: 1.6rem; }
.page-header h2 { margin: 0; font-size: 1.2rem; }
.btn-sm-export { padding: 0.4rem 0.9rem; font-size: 0.82rem; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius);
    border: none;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.88; }

.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: #e5e7eb; color: var(--text); }
.btn-text { background: transparent; color: var(--text-muted); }
.btn-start { background: var(--green); color: white; width: 100%; padding: 0.75rem; font-size: 1rem; margin-top: 0.5rem; }
.btn-stop { background: var(--red); color: white; padding: 0.65rem 1.4rem; }
.btn-save-progress { background: var(--green); color: white; padding: 0.65rem 1.4rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn-save-progress:hover { opacity: 0.88; }
.btn-danger-outline { background: transparent; border: 1px solid var(--red); color: var(--red); padding: 0.65rem 1.1rem; }
.btn-link-small { background: none; border: none; color: var(--primary); text-decoration: underline; cursor: pointer; font-size: 0.85rem; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.card h2 { margin-top: 0; font-size: 1.1rem; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.client-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.4rem;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.client-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.client-card-name { font-weight: 700; font-size: 1.15rem; }
.client-card-meta { color: var(--primary); margin-top: 0.5rem; font-size: 0.88rem; }

.empty-state { color: var(--text-muted); padding: 1rem 0; }
.empty-state-inline { color: var(--text-muted); font-size: 0.88rem; }

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.form-field { display: flex; flex-direction: column; gap: 0.3rem; }
.form-field.flex-grow { flex-grow: 1; }
.form-field label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.form-field input[type=text], .form-field input[type=url], .form-field input[type=number], .form-field input[type=file], .form-field input[type=date] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.92rem;
    min-width: 140px;
}
.entry-form .form-field { margin-bottom: 0.9rem; }

.operator-checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.op-chip {
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.op-chip input { margin: 0; }

.section-title { margin-top: 2rem; margin-bottom: 0.8rem; font-size: 1.15rem; }

.entry-list { display: flex; flex-direction: column; gap: 1rem; }
.entry-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius);
    padding: 1.2rem;
}
.entry-card.entry-card-done { border-left-color: var(--green, #2e7d32); }
.entry-card-header { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.entry-page { font-weight: 700; font-size: 1.05rem; }
.entry-time { color: var(--text-muted); font-size: 0.85rem; }
.entry-link { margin-bottom: 0.5rem; word-break: break-all; }
.entry-link a { color: var(--primary); text-decoration: none; font-size: 0.9rem; }
.entry-operators { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.7rem; }

.entry-before-preview { margin-bottom: 0.9rem; }
.thumb-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.3rem; }
.entry-before-preview img { max-width: 220px; border-radius: 8px; border: 1px solid var(--border); }

.complete-form { border-top: 1px dashed var(--border); padding-top: 1rem; margin-top: 0.5rem; }
.entry-actions { display: flex; gap: 0.6rem; margin-top: 0.8rem; }

.badge { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 14px; font-size: 0.78rem; font-weight: 700; }
.badge-pending { background: var(--orange-bg); color: var(--orange-text); }
.badge-done { background: var(--green-bg); color: var(--green-text); }

.summary-table-wrap { overflow-x: auto; }
.summary-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: var(--radius); overflow: hidden; }
.summary-table th, .summary-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.88rem; }
.summary-table th { background: #eef2f7; font-size: 0.78rem; text-transform: uppercase; color: var(--text-muted); }
.summary-table .total-row td { font-weight: 700; background: #f8fafc; }

.detail-table .caption-link {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--primary);
}
.detail-table th, .detail-table td { white-space: nowrap; }

/* Editable Per-Client Link Details table (Dashboard) */
.editable-table td { padding: 0.4rem 0.5rem; }
.inline-edit-input {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--card-bg);
    color: var(--text);
    width: 120px;
}
.inline-edit-input:focus { outline: none; border-color: var(--primary); }
.editable-table input[name="page"] { width: 130px; }
.editable-table input[name="operators"] { width: 150px; }
.inline-edit-time { width: 128px; }
.inline-edit-num { width: 60px; text-align: center; }
.inline-edit-reacts { width: 92px; }
.inline-edit-select { width: 105px; font-weight: 700; cursor: pointer; }
.status-select-pending { background: var(--orange-bg); color: var(--orange-text); border-color: var(--orange-text); }
.status-select-done { background: var(--green-bg); color: var(--green-text); border-color: var(--green-text); }
.inline-edit-link { width: 220px; margin-right: 0.4rem; }

/* PAGE / OPERATOR / TIME are now display-only in the Per-Client Link
   Details table (edit these via the 🛠 Manage modal instead). */
.readonly-field {
    display: inline-block;
    padding: 0.35rem 0.1rem;
    font-size: 0.87rem;
    color: var(--text);
}

/* SHARE / REACTS / COMMENTS stay editable inline on desktop, but show as
   plain read-only text on mobile (see media query below) to avoid
   accidental edits/drops while scrolling a long list of links on a phone. */
.mobile-readonly-value { display: none; }
/* ---------------------------------------------------------------
   MOBILE CARD LAYOUT — Per-Client Link Details table
   Below 780px (phones, mostly portrait), the wide 8-9 column table
   becomes a stack of cards: one card per link, each field shown as
   a label/value row. No more sideways swiping to reach a column.
   Relies on data-label="..." attributes set on each <td> in
   dashboard.html and magic_dashboard.html.
---------------------------------------------------------------- */
@media (max-width: 780px) {
    .detail-table thead { display: none; }

    .detail-table,
    .detail-table tbody,
    .detail-table tfoot,
    .detail-table tr,
    .detail-table td {
        display: block;
        width: 100%;
    }

    .summary-table-wrap { overflow-x: visible; }

    .detail-table tr {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 0.75rem;
        padding: 0.35rem 0.9rem;
        box-shadow: var(--shadow-sm);
    }

    .detail-table tr.total-row {
        background: #f8fafc;
        border-color: var(--primary);
    }

    .detail-table td {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
        padding: 0.55rem 0;
        border-bottom: 1px dashed var(--border);
        white-space: normal;
        text-align: left;
    }

    .detail-table tr td:last-child { border-bottom: none; }

    .detail-table td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--text-muted);
    }

    /* Trailing blank colspan placeholder cell — nothing to show on mobile */
    .detail-table td.detail-empty-cell { display: none; }

    /* "TOTAL" label cell already says what it is — skip the ::before label */
    .detail-table td.detail-total-label::before { content: none; }
    .detail-table td.detail-total-label {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.85rem;
    }

    /* Let inputs/selects/links fill the full card width */
    .detail-table .inline-edit-input,
    .detail-table select.inline-edit-input,
    .detail-table input.inline-edit-link {
        width: 100%;
        max-width: none;
    }

    /* SHARE / REACTS / COMMENTS: show plain text instead of number inputs
       on mobile — still editable via the 🛠 Manage button, just not
       inline here, to prevent accidental taps/edits while scrolling a
       long list of links. */
    .detail-table .desktop-only-input { display: none; }
    .detail-table .mobile-readonly-value {
        display: block;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--text);
    }
    .detail-table .readonly-field { font-size: 0.95rem; padding: 0; }

    .detail-table .caption-link {
        max-width: 100%;
        display: block;
    }

    .detail-table .inline-edit-link { margin-right: 0; margin-bottom: 0.4rem; }

    /* Actions cell (Save/Manage buttons) — no label, buttons full width */
    .detail-table td.detail-actions-cell {
        flex-direction: row;
        justify-content: center;
        gap: 0.6rem;
        padding-top: 0.7rem;
    }
    .detail-table td.detail-actions-cell::before { content: none; }
    .detail-table .btn-save-inline,
    .detail-table .btn-manage-inline {
        flex: 1;
        padding: 0.65rem 0.5rem;
        font-size: 0.95rem;
        min-height: 44px;
    }

    /* Bigger tap targets generally on touch screens */
    .detail-table .inline-edit-input,
    .detail-table select.inline-edit-input {
        padding: 0.55rem 0.6rem;
        font-size: 0.92rem;
        min-height: 40px;
    }

    .detail-card-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .detail-card-header-actions { width: 100%; }
    .detail-card-header-actions a,
    .detail-card-header-actions button {
        flex: 1 1 auto;
        text-align: center;
    }
}

.caption-link-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}
.caption-link-btn:hover { opacity: 0.85; }
.proof-badge {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.72rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 10px;
    padding: 0.1rem 0.4rem;
    white-space: nowrap;
}
.btn-save-inline {
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-save-inline:hover { opacity: 0.85; }

.pending-banner {
    background: var(--orange-bg);
    color: var(--orange-text);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}
.pending-list { margin: 0.5rem 0 0 1.2rem; padding: 0; }
.pending-list li { margin-bottom: 0.2rem; font-size: 0.9rem; }
.pending-list a { color: var(--orange-text); font-weight: 700; text-decoration: underline; }

.date-picker-row { margin-top: 0.3rem; }
.date-picker-row label { font-size: 0.85rem; color: var(--text-muted); margin-right: 0.4rem; }
.date-picker-row input { padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid var(--border); }

.past-reports { margin-bottom: 1.2rem; font-size: 0.88rem; }
.past-reports a { margin-left: 0.6rem; color: var(--primary); text-decoration: none; }
.past-reports a.active-date { font-weight: 700; text-decoration: underline; }

.operator-manage { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; }
.inline-form { display: flex; gap: 0.6rem; }
.inline-form input { padding: 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; flex-grow: 1; max-width: 280px; }
.hint-text { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.7rem; margin-bottom: 0; }

.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); align-items: center; justify-content: center; z-index: 200; }
.modal.open { display: flex; }
.modal-box { background: white; border-radius: var(--radius); padding: 1.5rem; width: 320px; }
.modal-box h3 { margin-top: 0; }
.modal-box input { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; margin-top: 0.5rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1rem; }

/* Wide modal used for the dashboard's Add Link / Manage Link popups —
   reuses the exact same form/card markup as the client detail page. */
.modal-box-wide {
    width: min(92vw, 760px);
    max-height: 88vh;
    overflow-y: auto;
    position: relative;
    padding: 1.6rem 1.6rem 1.4rem;
}
.modal-x-close {
    position: sticky;
    top: 0;
    float: right;
    margin-left: 1rem;
    background: var(--bg-alt, #f1f5f9);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-muted);
    z-index: 1;
}
.modal-x-close:hover { background: #e2e8f0; }
.modal-title { margin: 0 0 1rem; padding-right: 2.2rem; font-size: 1.15rem; }
.modal-title-client { font-weight: 400; color: var(--text-muted); font-size: 0.85rem; }

.detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0 0 0.8rem;
    flex-wrap: wrap;
}
.detail-card-title { margin: 0; }
.btn-add-link {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.btn-add-link:hover { filter: brightness(1.1); }
.btn-add-link-icon { font-size: 1rem; line-height: 1; }

.btn-manage-inline {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    margin-left: 0.3rem;
}
.btn-manage-inline:hover { background: #e0e7ff; }

/* ---- Multi-upload zone ---- */
.multi-upload-zone {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    cursor: pointer;
    background: #f8fafc;
    transition: border-color 0.15s;
    min-height: 60px;
}
.multi-upload-zone:hover { border-color: var(--primary); background: #eff6ff; }
.multi-upload-zone.zone-active,
.multi-upload-zone:focus {
    border-color: var(--primary);
    background: #eff6ff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.paste-hint { color: var(--text-muted); font-size: 0.82rem; user-select: none; }
.browse-link { color: var(--primary); text-decoration: underline; cursor: pointer; }
.preview-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.upload-thumb-wrap { position: relative; display: inline-block; }
.upload-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.thumb-remove {
    position: absolute; top: -6px; right: -6px;
    background: var(--red); color: white; border: none; border-radius: 50%;
    width: 18px; height: 18px; font-size: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.file-input-hidden { display: none; }

/* ---- Screenshot gallery ---- */
.screenshot-gallery { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.gallery-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
img.thumb { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.thumb-wrap { position: relative; display: inline-block; }
.thumb-wrap form { position: absolute; top: 4px; right: 4px; margin: 0; z-index: 5; }
.thumb-delete-btn {
    background: var(--red); color: white; border: none; border-radius: 50%;
    width: 20px; height: 20px; font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ---- Move to date form ---- */
.move-form { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.hint-label { font-size: 0.8rem; color: var(--text-muted); }
.date-input-small { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem; }
.btn-text-sm { background: none; border: 1px solid var(--primary); color: var(--primary); border-radius: 6px; padding: 0.25rem 0.7rem; font-size: 0.82rem; cursor: pointer; font-weight: 600; }
.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.82rem; margin-top: 0.5rem; }

/* ---- Hint inline ---- */
.hint-inline { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }

/* ---- Reporter tag ---- */
.reporter-tag {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #7c3aed;
    background: #f3e8ff;
    border-radius: 6px;
    padding: 1px 8px;
}

/* ---- Export all card on dashboard ---- */
#exportDate { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; }

/* ---- Client card with edit/delete actions ---- */
.client-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}
.client-card-wrap .client-card {
    flex: 1;
}
.client-card-actions {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    justify-content: flex-end;
}
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.15s;
}
.btn-icon:hover { background: #f1f5f9; }
.btn-icon-danger:hover { background: #fee2e2; }

/* ---- Export card on dashboard ---- */
.export-card { padding: 1.2rem 1.4rem; }
.export-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.export-label { font-weight: 600; font-size: 0.88rem; color: var(--text-muted); min-width: 90px; }
.export-date-input { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; }
.export-range-inputs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ---- Operator manage list on dashboard ---- */
.operator-list-manage { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.operator-manage-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.3rem 0.7rem;
}
.operator-name-tag { font-size: 0.88rem; font-weight: 600; }

/* ---- Pending entry operators editable ---- */
.pending-operators-section {
    margin-bottom: 0.7rem;
}
.operators-edit-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.7rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.op-edit-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}
.operator-checkboxes-inline { flex-wrap: wrap; }
.op-chip-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}
.btn-save-ops {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-save-ops:hover { opacity: 0.88; }

/* ---- Separate Comments/Share upload sections ---- */
.media-upload-section {
    margin-top: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.media-upload-form { display: flex; flex-direction: column; gap: 0.5rem; }
.media-upload-label { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.btn-save-media {
    align-self: flex-start;
    background: var(--green);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.35rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.2rem;
}
.btn-save-media:hover { opacity: 0.88; }

.bot-task-form { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.btn-bot-request {
    background: #0088cc;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-bot-request:hover { opacity: 0.88; }
.btn-bot-request:disabled { background: #cbd5e1; cursor: not-allowed; }
.bot-task-status { font-size: 0.78rem; color: var(--text-muted); }

/* ---- Zone flash feedback on paste ---- */
.multi-upload-zone.zone-flash {
    border-color: var(--green) !important;
    background: #f0fdf4 !important;
}

/* ---- Comments screenshot grid (better stacking) ---- */
.comments-screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
    margin-top: 0.4rem;
}
.comments-screenshot-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: block;
    object-fit: contain;
    background: #f8fafc;
}

/* =========================================================
   MAGIC DASHBOARD — internal reporter-only quota-padding view
   ========================================================= */
.nav-magic-link { color: #9c27b0 !important; font-weight: 700; }

.magic-banner {
    background: linear-gradient(135deg, #f3e5f5, #ede7f6);
    border: 1px solid #ce93d8;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    font-size: 0.85rem;
    color: #4a148c;
    margin-top: 1rem;
}
.magic-back-link {
    display: inline-block;
    margin-top: 0.4rem;
    color: #6a1b9a;
    font-weight: 600;
    text-decoration: none;
}
.magic-back-link:hover { text-decoration: underline; }

.magic-tag-inline {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6a1b9a;
    background: #f3e5f5;
    border: 1px solid #ce93d8;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.btn-add-magic-link { background: #9c27b0; }
.btn-add-magic-link:hover { filter: brightness(1.1); }

tr.magic-row { background: #faf5fc; }
tr.magic-row td { border-left: 3px solid #9c27b0; }
.magic-dot { margin-left: 0.3rem; }

.badge-magic {
    background: #f3e5f5;
    color: #6a1b9a;
    border: 1px solid #ce93d8;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.entry-card.magic-card { border-left-color: #9c27b0; background: #fdfbff; }

.magic-reference-shots {
    background: #f8f9fb;
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin: 0.6rem 0;
}
.magic-reference-label { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.magic-reference-thumbs { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.ref-thumb-wrap label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.2rem; }
.ref-thumb { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

.op-chip-locked { opacity: 0.75; background: #f3e5f5 !important; border-color: #ce93d8 !important; }

.btn-magic-start, .btn-magic-save {
    background: #9c27b0;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.5rem;
}
.btn-magic-start:hover, .btn-magic-save:hover { filter: brightness(1.1); }

.magic-existing-shots {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--border);
}
.magic-existing-shots .thumb-wrap { position: relative; }
.thumb-kind-tag {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
}

.detail-card-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.btn-per-client-export {
    background: #ede7f6;
    color: #4527a0;
    border: 1px solid #d1c4e9;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
}
.btn-per-client-export:hover { background: #d1c4e9; }
.btn-per-client-view {
    background: #eef2f7;
    color: #334155;
    border-color: #cbd5e1;
}
.btn-per-client-view:hover { background: #e2e8f0; }

.btn-magic-audit {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}
.btn-magic-audit:hover { background: #ffe0b2; }

/* ---- Single date / Date range toggle for monitoring summaries ---- */
.summary-mode-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.summary-mode-tab {
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-muted);
    background: #f1f5f9;
    border: 1px solid var(--border);
}
.summary-mode-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.summary-mode-tab:hover:not(.active) { background: #e2e8f0; }

/* ---------------------------------------------------------------
   LOGIN PAGE
   --------------------------------------------------------------- */
.login-wrap {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.login-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 2.2rem 2rem;
    width: 100%;
    max-width: 360px;
}
.login-card h1 { margin: 0 0 0.15rem; font-size: 1.35rem; color: var(--primary-dark); }
.login-sub { margin: 0 0 1.4rem; color: var(--text-muted); font-size: 0.9rem; }
.login-card label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin: 0.9rem 0 0.3rem; }
.login-card input[type="text"], .login-card input[type="password"] {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
}
.login-card input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Generic label/input styling for simple forms (Settings > Accounts, etc.)
   that don't use the .form-field wrapper */
.card > form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin: 0.9rem 0 0.3rem; }
.card > form input[type="text"], .card > form input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.92rem;
}
.card > form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Keep in-page anchor jumps (Clients grid -> Per-Client Link Details)
   from being hidden under the sticky topbar */
[id^="client-detail-"] { scroll-margin-top: 90px; }

/* ---------------------------------------------------------------
   Manage modal — operator checkboxes on mobile
   Fix: plain flex-wrap let pill widths vary with content length,
   so rows didn't line up and long names visually collided with the
   next pill. A fixed 2-column grid keeps every row's checkboxes
   aligned to the same left edges regardless of name length.
   --------------------------------------------------------------- */
@media (max-width: 780px) {
    .operator-checkboxes,
    .operator-checkboxes-inline {
        display: grid;
        /* minmax(0, 1fr), NOT plain 1fr — plain 1fr lets a track's
           min-content size (which can blow up huge with long unbroken
           text) force the grid wider than the container. minmax(0, ...)
           caps that, so wrapping happens inside the cell instead. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem 0.6rem;
    }
    .op-chip,
    .op-chip-sm {
        align-items: flex-start;   /* keep checkbox pinned top-left even if label wraps to 2 lines */
        width: 100%;
        min-width: 0;              /* let this flex item actually shrink to fit its grid cell */
        min-height: 40px;          /* comfortable tap target */
    }
    .op-chip input,
    .op-chip-sm input {
        margin-top: 0.15rem;       /* re-align checkbox with the first line of wrapped text */
        flex-shrink: 0;
    }
    .op-chip-label {
        flex: 1 1 auto;
        min-width: 0;              /* required for wrapping to kick in instead of overflowing */
        line-height: 1.25;
        overflow-wrap: break-word; /* wrap at spaces first; only break a single very long word if it truly has to */
        word-break: normal;
    }
}