:root {
    --brand: #2f6bff;
    --brand-dark: #1d4ed8;
    --brand-soft: #e8f0ff;
    --brand-grad: linear-gradient(135deg, #3b82f6, #2f6bff 55%, #4f46e5);
    --ink: #1e2a44;
    --muted: #7b8aa6;
    --bg: #eef3fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e7ecf6;
    --shadow: 0 10px 30px rgba(31,42,68,.08);
    --card-radius: 16px;
}

* { font-family: 'Vazirmatn', Tahoma, sans-serif; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    background-image:
        radial-gradient(1200px 360px at 100% -5%, #fff3e6 0%, rgba(255,243,230,0) 60%),
        radial-gradient(1100px 360px at 0% -5%, #e9f1ff 0%, rgba(233,241,255,0) 60%),
        linear-gradient(180deg, #f7faff 0%, var(--bg) 240px);
    background-attachment: fixed;
}

/* ---- Auth pages ---- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    padding: 24px;
}
.auth-card {
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
}
.auth-card h1 { font-size: 1.35rem; font-weight: 700; margin-bottom: 4px; }
.auth-card .sub { color: var(--muted); font-size: .9rem; margin-bottom: 24px; }

/* ---- App shell (light, top navigation) ---- */
.app-light { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 26px 6px;
    max-width: 1560px; width: 100%;
    margin: 0 auto;
}
.topbar .brand {
    display: flex; align-items: center; gap: 9px;
    color: var(--brand-dark); font-weight: 800; font-size: 1.12rem;
    text-decoration: none;
}
.topbar .brand i { font-size: 1.25rem; }
.topbar-search { width: 320px; }
.topbar-search .input-group {
    background: #fff; border-radius: 999px; padding: 2px 6px;
    box-shadow: 0 2px 10px rgba(31,42,68,.06); border: 1px solid #e7ecf6;
}
.topbar-search .form-control { border: 0; box-shadow: none; background: transparent; }
.topbar-search .form-control:focus { box-shadow: none; }

.btn-icon {
    background: #fff; border: 1px solid #e7ecf6; color: #51607c;
    border-radius: 999px; padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(31,42,68,.05);
}
.btn-icon:hover { background: var(--brand-soft); color: var(--brand-dark); }
.avatar-chip {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--brand); color: #fff; font-weight: 700; font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Floating pill navigation ---- */
.pillnav {
    display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: nowrap;
    max-width: 1560px; width: 100%; margin: 6px auto 0;
    position: sticky; top: 8px; z-index: 50;
    background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
    border: 1px solid #eaeefb;
    border-radius: 20px; padding: 6px 8px;
    box-shadow: 0 10px 30px rgba(31,42,68,.10);
}
.pillnav .pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
    color: #51607c; text-decoration: none; font-size: .85rem; font-weight: 600; line-height: 1;
    height: 38px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent;
    cursor: pointer; transition: background .15s, color .15s;
}
.pillnav .pill i { font-size: .98rem; }
.pillnav .pill:hover { background: var(--brand-soft); color: var(--brand-dark); }
.pillnav .pill.active { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 18px rgba(47,107,255,.40); }
.pillnav .pill.active i { color: #fff; }

/* On narrow screens, allow the bar to wrap instead of overflowing */
@media (max-width: 1200px) {
    .pillnav { flex-wrap: wrap; }
}

.content { padding: 22px 26px 40px; flex: 1; max-width: 1560px; width: 100%; margin: 0 auto; }

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.page-head h1 {
    font-size: 1.4rem; font-weight: 800; margin: 0;
    padding-inline-start: 12px; border-inline-start: 4px solid var(--brand);
    border-radius: 2px; line-height: 1.2;
}

.card { border: 0; border-radius: var(--card-radius); box-shadow: 0 8px 26px rgba(31,42,68,.06); transition: box-shadow .18s, transform .18s; }
.card-header { background: #fff; border-bottom: 1px solid #eef2f7; font-weight: 600; border-radius: var(--card-radius) var(--card-radius) 0 0 !important; }

.stat-card { padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.08); transition: box-shadow .18s, transform .18s; }
.stat-card:hover { box-shadow: 0 10px 26px rgba(31,42,68,.10); transform: translateY(-2px); }
.stat-card .label { color: var(--muted); font-size: .85rem; }
.stat-card .value { font-size: 1.5rem; font-weight: 700; margin-top: 2px; line-height: 1.15; }
.stat-card .icon { font-size: 1.6rem; opacity: .85; }
.stat-ic {
    width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
html[data-theme="dark"] .stat-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.5); }

.table { background: #fff; }
.table thead th { background: #f8fafc; color: var(--muted); font-weight: 600; font-size: .85rem; border-bottom: 1px solid #e2e8f0; }
.table td { vertical-align: middle; font-size: .92rem; }

/* Per-column filter row (auto-generated under the header). */
.table thead tr.colf th { background: #f3f7ff; padding: 5px 7px; border-bottom: 1px solid #e2e8f0; }
.table thead tr.colf input {
    width: 100%; font-size: .78rem; padding: 4px 26px 4px 9px; border-radius: 8px;
    border: 1px solid var(--border); background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E")
        no-repeat; background-position: right 8px center;
}
.table thead tr.colf input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(47,107,255,.14); }
html[data-theme="dark"] .table thead tr.colf th { background: var(--surface-2); }
html[data-theme="dark"] .table thead tr.colf input { background-color: var(--surface); border-color: var(--border); color: var(--ink); }

.btn-primary { background: var(--brand-grad); border-color: var(--brand); box-shadow: 0 6px 14px rgba(47,107,255,.30); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn { border-radius: 11px; font-weight: 600; }
.btn-sm { border-radius: 9px; }

.form-label { font-size: .88rem; font-weight: 600; color: #334155; }
.required::after { content: " *"; color: #dc2626; }

.badge-soft { padding: .35em .7em; border-radius: 999px; font-weight: 600; font-size: .75rem; }
.bg-soft-blue { background: #dbeafe; color: #1d4ed8; }
.bg-soft-green { background: #dcfce7; color: #15803d; }
.bg-soft-amber { background: #fef3c7; color: #b45309; }
.bg-soft-red { background: #fee2e2; color: #b91c1c; }
.bg-soft-gray { background: #e2e8f0; color: #475569; }

.empty {
    text-align: center; color: var(--muted); padding: 50px 20px;
}
.empty i { font-size: 2.4rem; opacity: .4; display: block; margin-bottom: 10px; }

/* ---- Notification bell + center ---- */
.notif-badge {
    position: absolute; top: -4px; inset-inline-end: -4px;
    background: #ef4444; color: #fff; font-size: .62rem; font-weight: 700;
    min-width: 16px; height: 16px; line-height: 16px; text-align: center;
    border-radius: 999px; padding: 0 4px;
}
.notif-menu { width: 340px; max-width: 92vw; padding: 0; overflow: hidden; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--border); }
.notif-item:hover { background: var(--brand-soft); }
.notif-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #fef3c7; color: #b45309; }
.notif-ic.ov { background: #fee2e2; color: #b91c1c; }
.notif-body { flex: 1 1 auto; min-width: 0; }
.notif-title { display: block; font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-sub { display: block; font-size: .74rem; color: var(--muted); }
.notif-when { font-size: .72rem; white-space: nowrap; }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: .85rem; }
.notif-all { display: block; padding: 10px 14px; text-align: center; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--brand-dark); background: var(--surface-2); }
.notif-all:hover { background: var(--brand-soft); }
html[data-theme="dark"] .notif-ic { background: #2a230f; color: #fcd34d; }
html[data-theme="dark"] .notif-ic.ov { background: #2a1015; color: #fca5a5; }
html[data-theme="dark"] .notif-item { color: var(--ink); }
html[data-theme="dark"] .notif-item:hover, html[data-theme="dark"] .notif-all:hover { background: #1d2b4d; }

/* ---- Sortable table headers ---- */
.table thead th .sort-link, .table thead th a.sort-link {
    color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px;
    cursor: pointer;
}
.table thead th a.sort-link:hover { color: var(--brand); }
.table thead th a.sort-link.active { color: var(--brand); font-weight: 700; }
.sort-ar { font-size: .85em; }

/* ---- Searchable select (customer / operator pickers) ---- */
.ss-wrap { position: relative; }
.ss-input { cursor: text; }
.ss-list {
    position: absolute; z-index: 1060; inset-inline: 0; top: calc(100% + 2px);
    max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(31,42,68,.16); padding: 4px;
}
.ss-item {
    padding: 7px 12px; border-radius: 8px; font-size: .9rem; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-item:hover { background: var(--brand-soft); color: var(--brand-dark); }
.ss-item.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.ss-empty { padding: 10px 12px; color: var(--muted); font-size: .85rem; text-align: center; }
html[data-theme="dark"] .ss-list { background: var(--surface); border-color: var(--border); box-shadow: 0 14px 34px rgba(0,0,0,.55); }
html[data-theme="dark"] .ss-item:hover, html[data-theme="dark"] .ss-item.active { background: #1d2b4d; color: #fff; }

/* ---- Mobile navigation toggle (hamburger) ---- */
.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 38px; flex: 0 0 auto;
    background: #fff; border: 1px solid #e7ecf6; color: #51607c;
    border-radius: 11px; font-size: 1.25rem; cursor: pointer;
    box-shadow: 0 2px 8px rgba(31,42,68,.05);
}
.nav-toggle:hover { background: var(--brand-soft); color: var(--brand-dark); }
.nav-mobile-search { display: none; }
html[data-theme="dark"] .nav-toggle { background: var(--surface); border-color: var(--border); color: #cbd5e1; }
html[data-theme="dark"] .nav-toggle:hover { background: #1d2b4d; color: #fff; }

@media (max-width: 768px) {
    .topbar { flex-wrap: wrap; padding: 10px 14px 4px; gap: 10px; }
    .topbar .brand { font-size: 1rem; }
    .topbar .ms-auto { gap: 6px !important; }

    /* Hamburger reveals the navigation as a vertical menu */
    .nav-toggle { display: inline-flex; }
    .pillnav {
        display: none; position: static; flex-wrap: nowrap;
        flex-direction: column; align-items: stretch; gap: 4px;
        margin: 6px 12px 0; padding: 10px; border-radius: 16px;
        max-height: calc(100vh - 90px); overflow-y: auto;
    }
    .pillnav.open { display: flex; }
    .pillnav .pill {
        height: 46px; width: 100%; justify-content: flex-start;
        font-size: .95rem; padding: 0 16px; gap: 12px;
    }
    .pillnav .pill i { font-size: 1.15rem; width: 22px; text-align: center; }
    .nav-mobile-search { display: block; margin-bottom: 6px; }
    .nav-mobile-search .input-group {
        background: var(--surface-2); border: 1px solid var(--border);
        border-radius: 999px; padding: 2px 6px;
    }
    .nav-mobile-search .form-control { border: 0; background: transparent; box-shadow: none; }

    .content { padding: 14px 12px 30px; }
    .page-head { margin-bottom: 16px; }
    .page-head h1 { font-size: 1.2rem; }
    /* Action button groups wrap instead of overflowing */
    .page-head .d-flex { flex-wrap: wrap; }
    .btn { padding: .45rem .7rem; }

    /* Wide tables scroll horizontally (wrapper added by JS) */
    .table-responsive { border-radius: 12px; }
    .table th, .table td { white-space: nowrap; }

    /* Invoice & call-popup fit narrow screens */
    .invoice-sheet { padding: 20px 16px; }
    .inv-top, .inv-parties, .inv-summary, .inv-dates { gap: 12px; }
    .inv-totals { flex-basis: 100%; }
    .voip-pop { inset-inline: 12px; inset-block-end: 12px; }
    .voip-pop-card { min-width: 0; width: 100%; }
}

/* ---- Didar-style pipeline board ---- */
.pipe-wrap { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.pipe-col { min-width: 250px; flex: 1; display: flex; flex-direction: column; }
.pipe-head {
    background: #fff; border: 1px solid #e2e8f0; color: #334155;
    font-weight: 700; font-size: .85rem; padding: 12px 16px 12px 26px;
    /* RTL: the chevron points LEFT (direction of flow), with the notch on the right. */
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 14px 100%, 0 50%);
    display: flex; justify-content: space-between; align-items: center;
}
.pipe-head.first { clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.pipe-head .c { background: #eef2f7; color: #475569; border-radius: 999px; padding: 1px 9px; font-size: .72rem; }
.pipe-sum { color: var(--muted); font-size: .78rem; padding: 6px 4px 8px; }
.pipe-quick-btn {
    width: 100%; border: 1.5px dashed #86efac; background: #f0fdf4; color: #16a34a;
    border-radius: 10px; padding: 9px; font-size: .82rem; font-weight: 600;
    cursor: pointer; margin-bottom: 8px;
}
.pipe-quick-btn:hover { background: #dcfce7; }
.pipe-quick { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.pipe-list { min-height: 80px; display: flex; flex-direction: column; gap: 8px; }
.pipe-card {
    background: #fff; border: 1px solid #e6e9ef; border-radius: 12px;
    padding: 12px; cursor: grab; box-shadow: 0 1px 2px rgba(15,23,42,.05);
    border-inline-start: 3px solid var(--brand); transition: box-shadow .15s, transform .15s;
}
.pipe-card:hover { box-shadow: 0 8px 20px rgba(31,42,68,.12); transform: translateY(-2px); }
.pipe-card:active { cursor: grabbing; }
.pipe-card.pipe-ghost { opacity: .35; }
.pipe-card.pipe-chosen { box-shadow: 0 8px 22px rgba(37,99,235,.30); }
.pipe-card .pc-title { font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.pipe-card .pc-sub { color: var(--muted); font-size: .76rem; margin-bottom: 4px; }
.pipe-card .pc-amount { color: #0f766e; font-size: .8rem; font-weight: 600; }
.pipe-card .pc-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; border-top: 1px solid #f1f5f9; padding-top: 7px;
}
.pc-dot {
    width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: .7rem; color: #fff;
}
.pc-dot.dot-win { background: #16a34a; }
.pc-dot.dot-lost { background: #dc2626; }
.pc-dot.dot-mid { background: #cbd5e1; }
.pc-time { color: var(--muted); font-size: .72rem; }
.pipe-add-placeholder {
    border: 1.5px dashed #cbd5e1; background: transparent; color: #94a3b8;
    border-radius: 12px; padding: 14px; cursor: pointer;
}
.pipe-add-placeholder:hover { border-color: #2563eb; color: #2563eb; }

html[data-theme="dark"] .pipe-head { background: var(--surface); border-color: var(--border); color: #cbd5e1; }
html[data-theme="dark"] .pipe-head .c { background: #1e293b; color: #cbd5e1; }
html[data-theme="dark"] .pipe-card,
html[data-theme="dark"] .pipe-quick { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .pipe-card .pc-foot { border-color: var(--border); }
html[data-theme="dark"] .pipe-quick-btn { background: #0f2a1d; border-color: #14532d; color: #86efac; }

.pipe-head.col-over { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pipe-head.col-today { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.pipe-head.col-up { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pipe-head.col-done { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.pipe-head.col-new { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.pipe-head.col-review { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pipe-head.col-reviewed { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.pipe-card.card-overdue { border-color: #fca5a5; background: #fff5f5; }
html[data-theme="dark"] .pipe-card.card-overdue { background: #3a1620; border-color: #7f1d1d; }

/* ---- Ticket board cards ---- */
.ticket-card {
    background: #fff; border: 1px solid #e9eef9; border-radius: 14px;
    padding: 13px 14px; box-shadow: 0 2px 8px rgba(31,42,68,.05);
}
.ticket-card .tc-title { font-weight: 700; font-size: .9rem; margin-bottom: 6px; line-height: 1.5; }
.ticket-card .tc-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: .8rem; color: #51607c; margin-top: 5px;
}
.ticket-card .tc-label { color: var(--muted); }
.ticket-card .tc-avatar {
    width: 22px; height: 22px; border-radius: 50%; background: var(--brand-soft);
    color: var(--brand-dark); font-weight: 700; font-size: .7rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.ticket-card .tc-desc {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid #f1f5f9;
    font-size: .8rem; color: #51607c; line-height: 1.7;
}
html[data-theme="dark"] .ticket-card { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .ticket-card .tc-desc { border-color: var(--border); }
html[data-theme="dark"] .pipe-head.col-reviewed { background: #1d1640; color: #c4b5fd; border-color: #4c1d95; }

/* ---- Telefonchy incoming-call screen-pop ---- */
.voip-pop { position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 1080; }
.voip-pop-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-inline-start: 4px solid #16a34a;
    border-radius: 14px; padding: 14px 16px; min-width: 280px;
    box-shadow: 0 16px 40px rgba(0,0,0,.22); animation: voip-in .25s ease;
}
@keyframes voip-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.voip-pop-ic {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    background: #16a34a; color: #fff; display: inline-flex; align-items: center;
    justify-content: center; font-size: 1.2rem; animation: voip-ring 1s ease-in-out infinite;
}
@keyframes voip-ring { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.voip-pop-t { font-size: .76rem; color: var(--muted); }
.voip-pop-s { font-weight: 700; }
.voip-pop-link { font-size: .8rem; }
.voip-pop-x { background: transparent; border: 0; font-size: 1.3rem; color: var(--muted); margin-inline-start: auto; cursor: pointer; align-self: flex-start; }

/* ---- Auth page top toggles ---- */
.auth-top {
    position: fixed; top: 16px; inset-inline-end: 16px;
    display: flex; gap: 8px; z-index: 10;
}

/* ---- Dark mode ---- */
html[data-theme="dark"] {
    --brand: #5b8cff;
    --brand-dark: #3b6fe0;
    --brand-soft: #1b2a4d;
    --brand-grad: linear-gradient(135deg, #4f8bff, #5b8cff 50%, #7c6cff);
    --ink: #e7ecf6;
    --muted: #93a3c0;
    --bg: #0a0f1e;
    --surface: #131d34;
    --surface-2: #0f1830;
    --border: #283655;
    --shadow: 0 12px 34px rgba(0,0,0,.55);
    --sidebar-bg: #060b16;
    --sidebar-fg: #cbd5e1;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .table,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .bg-white { background: var(--surface) !important; color: var(--ink); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card { box-shadow: 0 10px 28px rgba(0,0,0,.45); }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .border,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th { border-color: var(--border) !important; }
html[data-theme="dark"] .table thead th { background: var(--surface-2); color: var(--muted); }
html[data-theme="dark"] .table { --bs-table-bg: var(--surface); --bs-table-color: var(--ink); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: var(--surface-2); color: var(--ink); border-color: var(--border);
}
html[data-theme="dark"] .form-control::placeholder { color: #64748b; }
html[data-theme="dark"] .form-label { color: #cbd5e1; }
html[data-theme="dark"] .btn-light {
    background: #1e293b; border-color: #334155; color: #e2e8f0;
}
html[data-theme="dark"] .btn-light:hover { background: #334155; }
html[data-theme="dark"] .text-muted { color: #94a3b8 !important; }
html[data-theme="dark"] .auth-card { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] a { color: #60a5fa; }
html[data-theme="dark"] .table-danger,
html[data-theme="dark"] .table-danger > td {
    background: #3a1620 !important; color: #fecaca !important;
}
html[data-theme="dark"] .alert-success { background:#0f2a1d; color:#86efac; border-color:#14532d; }
html[data-theme="dark"] .alert-danger { background:#2a1015; color:#fca5a5; border-color:#7f1d1d; }
html[data-theme="dark"] .alert-warning { background:#2a230f; color:#fde68a; border-color:#854d0e; }
html[data-theme="dark"] .alert-info { background:#0f2230; color:#7dd3fc; border-color:#155e75; }
html[data-theme="dark"] .modal-content { background:var(--surface); color:var(--ink); }

/* ---- Dark mode: top navigation chrome ---- */
html[data-theme="dark"] body {
    background-image:
        radial-gradient(900px 380px at 100% -8%, rgba(124,108,255,.22) 0%, rgba(124,108,255,0) 60%),
        radial-gradient(900px 380px at 0% -8%, rgba(79,139,255,.20) 0%, rgba(79,139,255,0) 60%),
        radial-gradient(700px 500px at 50% 120%, rgba(45,212,191,.10) 0%, rgba(45,212,191,0) 55%),
        linear-gradient(180deg, #0c1224 0%, var(--bg) 320px);
}
html[data-theme="dark"] .topbar { background: transparent !important; }
html[data-theme="dark"] .topbar .brand { color: #9db8ff; }
html[data-theme="dark"] .pillnav { background: rgba(19,29,52,.78); backdrop-filter: blur(12px); border-color: var(--border); box-shadow: 0 12px 34px rgba(0,0,0,.55); }
html[data-theme="dark"] .pillnav .pill { color: #aebbd6; }
html[data-theme="dark"] .pillnav .pill:hover { background: #1d2b4d; color: #fff; }
html[data-theme="dark"] .pillnav .pill.active { background: var(--brand-grad); color: #fff; box-shadow: 0 8px 20px rgba(91,140,255,.45); }
html[data-theme="dark"] .btn-icon { background: var(--surface); border-color: var(--border); color: #cbd5e1; }
html[data-theme="dark"] .btn-icon:hover { background: #1d2b4d; color: #fff; }
html[data-theme="dark"] .topbar-search .input-group { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .btn-light { background: var(--surface-2); border-color: var(--border); color: #e2e8f0; }
html[data-theme="dark"] .btn-light:hover { background: #24314f; }
html[data-theme="dark"] .card-header { background: var(--surface); }
html[data-theme="dark"] .table thead th { background: var(--surface-2); }
html[data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .dropdown-item { color: #cbd5e1; }
html[data-theme="dark"] .dropdown-item:hover { background: #1d2b4d; color: #fff; }
html[data-theme="dark"] .dropdown-item.active { background: var(--brand); }
html[data-theme="dark"] .badge-soft.bg-soft-blue { background: #16294d; color: #93b4ff; }
html[data-theme="dark"] .badge-soft.bg-soft-green { background: #0f2a1d; color: #86efac; }
html[data-theme="dark"] .badge-soft.bg-soft-amber { background: #2a230f; color: #fcd34d; }
html[data-theme="dark"] .badge-soft.bg-soft-red { background: #2a1015; color: #fca5a5; }
html[data-theme="dark"] .badge-soft.bg-soft-gray { background: #1e293b; color: #cbd5e1; }
html[data-theme="dark"] .pipe-sum { color: #93a3c0; }

/* ---- Dark mode: calendar ---- */
html[data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--border); }
html[data-theme="dark"] .table .bg-light,
html[data-theme="dark"] td.bg-light { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .table-danger,
html[data-theme="dark"] .table-danger > * { background-color: #3a1620 !important; color: #fca5a5 !important; }
html[data-theme="dark"] .list-group-item { background: var(--surface); color: var(--ink); border-color: var(--border); }

/* ===================================================================
   Invoice document (screen + print)
   =================================================================== */
.invoice-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.invoice-sheet {
    background: #fff; color: #1e2a44;
    max-width: 920px; margin: 0 auto;
    border: 1px solid #eef2fb; border-radius: 18px;
    box-shadow: 0 18px 50px rgba(31,42,68,.10);
    padding: 34px 36px; position: relative; overflow: hidden;
}
.invoice-sheet::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; height: 6px; width: 100%;
    background: var(--brand-grad);
}
.inv-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 18px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 22px;
    border-bottom: 2px dashed #e6ecf7;
}
.inv-org { display: flex; align-items: center; gap: 14px; }
.inv-org-logo {
    width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto;
    background: var(--brand-grad); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800;
    box-shadow: 0 8px 18px rgba(47,107,255,.35);
}
.inv-org-name { font-size: 1.3rem; font-weight: 800; }
.inv-org-meta { color: #7b8aa6; font-size: .82rem; margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.inv-org-meta i { color: var(--brand); }
.inv-headbox { text-align: center; }
.inv-doctitle { font-size: 1.5rem; font-weight: 800; color: var(--brand-dark); }
.inv-number { color: #7b8aa6; font-size: .9rem; margin: 4px 0 8px; }
.inv-parties {
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.inv-party-label, .inv-party-line { color: #7b8aa6; font-size: .82rem; }
.inv-party-name { font-size: 1.1rem; font-weight: 700; margin: 3px 0; }
.inv-party-line i { color: var(--brand); margin-inline-end: 3px; }
.inv-dates { display: flex; gap: 10px; }
.inv-dates > div {
    background: #f6f9ff; border: 1px solid #e6ecf7; border-radius: 12px;
    padding: 10px 16px; min-width: 120px; text-align: center;
}
.inv-dates span { display: block; color: #7b8aa6; font-size: .76rem; margin-bottom: 3px; }
.inv-dates b { font-size: .95rem; }
.inv-table-wrap { border: 1px solid #e6ecf7; border-radius: 14px; overflow: hidden; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table thead th {
    background: #f3f7ff; color: #51607c; font-weight: 700; font-size: .82rem;
    padding: 12px 14px; text-align: start; white-space: nowrap;
}
.inv-table tbody td { padding: 12px 14px; font-size: .9rem; border-top: 1px solid #eef2fb; }
.inv-table tbody tr:nth-child(even) td { background: #fafcff; }
.inv-table .c-n { text-align: center; white-space: nowrap; }
.inv-table .c-num { width: 38px; text-align: center; color: #94a3b8; }
.inv-table-sm thead th, .inv-table-sm tbody td { padding: 9px 12px; font-size: .84rem; }
.inv-summary { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.inv-notes { flex: 1 1 240px; color: #51607c; font-size: .88rem; line-height: 1.9; }
.inv-notes-label { color: #7b8aa6; font-size: .8rem; font-weight: 700; margin-bottom: 4px; }
.inv-totals {
    flex: 0 0 320px; max-width: 100%;
    background: #f6f9ff; border: 1px solid #e6ecf7; border-radius: 14px; padding: 16px 18px;
}
.inv-totals .row-t { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .92rem; }
.inv-totals .row-t.grand {
    margin-top: 6px; padding-top: 12px; border-top: 1px solid #dbe5f7;
    font-size: 1.15rem; font-weight: 800; color: var(--brand-dark);
}
.inv-totals .row-t.paid b { color: #15803d; }
.inv-totals .row-t.due b { color: #b91c1c; }
.inv-payments { margin-top: 24px; }
.inv-payments-title { font-weight: 700; margin-bottom: 10px; }
.inv-payments-title i { color: var(--brand); }
.inv-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 26px; padding-top: 16px; border-top: 1px solid #eef2fb;
    color: #94a3b8; font-size: .8rem;
}

html[data-theme="dark"] .invoice-sheet { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow); }
html[data-theme="dark"] .inv-top { border-bottom-color: var(--border); }
html[data-theme="dark"] .inv-doctitle { color: #9db8ff; }
html[data-theme="dark"] .inv-org-meta, html[data-theme="dark"] .inv-party-label,
html[data-theme="dark"] .inv-party-line, html[data-theme="dark"] .inv-notes,
html[data-theme="dark"] .inv-foot { color: #93a3c0; }
html[data-theme="dark"] .inv-dates > div,
html[data-theme="dark"] .inv-totals { background: var(--surface-2); border-color: var(--border); }
html[data-theme="dark"] .inv-table-wrap { border-color: var(--border); }
html[data-theme="dark"] .inv-table thead th { background: var(--surface-2); color: #aebbd6; }
html[data-theme="dark"] .inv-table tbody td { border-top-color: var(--border); }
html[data-theme="dark"] .inv-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }
html[data-theme="dark"] .inv-totals .row-t.grand { color: #9db8ff; border-top-color: var(--border); }
html[data-theme="dark"] .inv-foot { border-top-color: var(--border); }

/* ---- Print: clean, customer-facing invoice only ---- */
@media print {
    @page { margin: 14mm; }
    body { background: #fff !important; }
    .topbar, .pillnav, .invoice-toolbar, .no-print, .alert { display: none !important; }
    .content { padding: 0 !important; max-width: 100% !important; }
    .app-light { display: block !important; }
    .invoice-sheet {
        box-shadow: none !important; border: none !important;
        max-width: 100% !important; padding: 0 !important; border-radius: 0 !important;
        color: #000 !important; background: #fff !important;
    }
    .invoice-sheet::before { position: static; height: 5px; }
    .inv-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Inline call-recording audio player (replaces the play button in call rows) */
.crm-rec-audio { height: 34px; max-width: 240px; vertical-align: middle; }