/* =====================================================================
   InternalSign application shell — Al Jameel brand theme.
   Palette extracted from the corporate guidelines PDF:
     maroon  #3d0505 (deep) / #6d101e (primary) / #87062e (crimson)
     gold    #d9ad20 / #d39e1a / #ffc916
     creams  #fdf6dd / #faebcf / #fefbf0
   Light & dark, LTR & RTL aware. Built on Bootstrap 5.3 CSS variables.
   ===================================================================== */

:root {
    /* Brand tokens */
    --aj-maroon: #6d101e;
    --aj-maroon-deep: #3d0505;
    --aj-maroon-hover: #570c17;
    --aj-maroon-active: #4a0a13;
    --aj-crimson: #87062e;
    --aj-gold: #d9ad20;
    --aj-gold-deep: #b8901a;
    --aj-gold-bright: #ffc916;

    --is-sidebar-width: 248px;
}

/* ---------- Light theme (warm cream, like the brand document) ---------- */
[data-bs-theme="light"] {
    --is-accent: var(--aj-maroon);
    --is-accent-soft: #f6ead2;
    --is-heading: var(--aj-maroon-deep);

    --bs-body-bg: #fbf4e4;
    --bs-body-color: #2b211c;
    --bs-secondary-bg: #f4ead3;
    --bs-tertiary-bg: #f8f0dd;
    --bs-border-color: #e5d6b4;

    --bs-primary: var(--aj-maroon);
    --bs-primary-rgb: 109, 16, 30;
    --bs-link-color: var(--aj-maroon);
    --bs-link-color-rgb: 109, 16, 30;
    --bs-link-hover-color: var(--aj-maroon-hover);
    --bs-link-hover-color-rgb: 87, 12, 23;

    --is-surface: #fffdf6;   /* cards */
}

/* ---------- Dark theme ----------
   Neutral near-black console styling, matched to the Al Jameel
   Salla ↔ Kinza-SAP operations console so the internal tools read as
   one family. Colours sampled from that UI:
     page #0d0d0f · surface #141417 · raised #1e1e24 · field #26262c
     text #e5e3df · muted #8a8890 · accent #ff902c
   Light mode keeps the maroon/cream corporate document look.
   ------------------------------------------------------------------ */
[data-bs-theme="dark"] {
    --is-accent: #ff902c;            /* amber carries the brand at night */
    --is-accent-soft: #26190f;
    --is-heading: #f0eeea;

    --bs-body-bg: #0d0d0f;
    --bs-body-color: #e5e3df;
    --bs-secondary-bg: #1e1e24;
    --bs-tertiary-bg: #17171b;
    --bs-border-color: #26262c;

    --bs-secondary-color: #8a8890;
    --bs-emphasis-color: #f5f4f1;
    --bs-heading-color: #f0eeea;

    --bs-primary: #ff902c;
    --bs-primary-rgb: 255, 144, 44;
    --bs-link-color: #ff902c;
    --bs-link-color-rgb: 255, 144, 44;
    --bs-link-hover-color: #ffab47;
    --bs-link-hover-color-rgb: 255, 171, 71;

    --bs-success-rgb: 46, 224, 135;
    --bs-danger-rgb: 244, 63, 63;
    --bs-warning-rgb: 250, 195, 67;
    --bs-info-rgb: 88, 155, 250;

    --is-surface: #141417;
}

body {
    background: var(--bs-body-bg);
    min-height: 100vh;
}

h1, h2, h3, .h1, .h2, .h3 { color: var(--is-heading); }

/* ---------- Bootstrap component re-branding ---------- */
.btn-primary {
    --bs-btn-bg: var(--aj-maroon);
    --bs-btn-border-color: var(--aj-maroon);
    --bs-btn-hover-bg: var(--aj-maroon-hover);
    --bs-btn-hover-border-color: var(--aj-maroon-hover);
    --bs-btn-active-bg: var(--aj-maroon-active);
    --bs-btn-active-border-color: var(--aj-maroon-active);
    --bs-btn-disabled-bg: var(--aj-maroon);
    --bs-btn-disabled-border-color: var(--aj-maroon);
    --bs-btn-focus-shadow-rgb: 217, 173, 32;
}

/* Amber primary action on dark, exactly like the console's Export button:
   solid accent with near-black label. */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #17120b;
    --bs-btn-bg: #ff902c;
    --bs-btn-border-color: #ff902c;
    --bs-btn-hover-color: #17120b;
    --bs-btn-hover-bg: #ffab47;
    --bs-btn-hover-border-color: #ffab47;
    --bs-btn-active-color: #17120b;
    --bs-btn-active-bg: #e87d1d;
    --bs-btn-active-border-color: #e87d1d;
    --bs-btn-disabled-color: #17120b;
    --bs-btn-disabled-bg: #ff902c;
    --bs-btn-disabled-border-color: #ff902c;
    --bs-btn-focus-shadow-rgb: 255, 144, 44;
}

.btn-outline-primary {
    --bs-btn-color: var(--is-accent);
    --bs-btn-border-color: var(--is-accent);
    --bs-btn-hover-bg: var(--is-accent);
    --bs-btn-hover-border-color: var(--is-accent);
    --bs-btn-active-bg: var(--is-accent);
    --bs-btn-active-border-color: var(--is-accent);
    --bs-btn-focus-shadow-rgb: 217, 173, 32;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--aj-maroon);
}
[data-bs-theme="dark"] .nav-pills {
    --bs-nav-pills-link-active-bg: #ff902c;
    --bs-nav-pills-link-active-color: #17120b;
}

.text-bg-primary { background-color: rgba(var(--bs-primary-rgb), 1) !important; }
.text-bg-info { background-color: var(--aj-gold) !important; color: #2c2104 !important; }
.text-primary { color: rgba(var(--bs-primary-rgb), 1) !important; }
.text-info { color: var(--aj-gold-deep) !important; }
[data-bs-theme="dark"] .text-info { color: var(--aj-gold) !important; }

.form-check-input:checked {
    background-color: var(--aj-maroon);
    border-color: var(--aj-maroon);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--aj-gold);
    box-shadow: 0 0 0 .25rem rgba(217, 173, 32, .25);
}

.dropdown-item:active { background-color: var(--aj-maroon); }

.progress { background-color: var(--bs-secondary-bg); }

.card {
    border-radius: .75rem;
    --bs-card-bg: var(--is-surface);
}

.modal {
    --bs-modal-bg: var(--is-surface);
    --bs-modal-color: var(--bs-body-color);
}
/* Belt-and-braces: never let a modal panel render transparent, whatever
   the surrounding markup does. */
.modal-content {
    background-color: var(--is-surface);
    color: var(--bs-body-color);
}
/* Small screens: use the full width and keep the panel inside the viewport. */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: .5rem;
    }
    .modal-footer .btn {
        flex: 1 1 auto; /* thumb-friendly action buttons */
    }
}
.dropdown-menu { --bs-dropdown-bg: var(--is-surface); }

/* ---------- Shell ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--is-sidebar-width);
    flex-shrink: 0;
    background: var(--is-surface);
    border-inline-end: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1rem .75rem;
    z-index: 1030;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--is-heading);
    padding: .25rem .5rem .9rem;
    border-bottom: 2px solid var(--aj-gold);   /* the brand document's gold rule */
    margin-bottom: .75rem;
}

.app-brand i { color: var(--is-accent); font-size: 1.35rem; }
.app-brand strong { color: var(--is-accent); }

.app-nav { display: flex; flex-direction: column; gap: .15rem; flex-grow: 1; }

.app-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: .5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .925rem;
}

.app-nav-link i { font-size: 1.05rem; opacity: .8; }

.app-nav-link:hover { background: var(--is-accent-soft); color: var(--is-accent); }

.app-nav-section {
    margin: .9rem .65rem .25rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--aj-gold-deep);
}
[data-bs-theme="dark"] .app-nav-section { color: var(--aj-gold); }

.app-sidebar-footer { padding: .5rem .65rem; }

.app-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    display: flex;
    align-items: center;
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--is-surface);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-content { padding: 1.4rem 1.5rem 3rem; max-width: 1320px; width: 100%; margin-inline: auto; }

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        inset-inline-start: 0;
        transform: translateX(calc(-100% * var(--is-dir, 1)));
        transition: transform .2s ease;
        box-shadow: var(--bs-box-shadow-lg);
    }
    [dir="rtl"] .app-sidebar { --is-dir: -1; }
    .app-sidebar.open { transform: translateX(0); }
}

/* ---------- Theme toggle ---------- */
[data-bs-theme="light"] .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: none; }

/* ---------- Dashboard stat cards ---------- */
.stat-card {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    padding: 1rem 1.15rem;
    background: var(--is-surface);
    border-top: 3px solid var(--aj-gold);
    height: 100%;
}

.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: var(--bs-secondary-color); font-size: .85rem; }
.stat-card i { font-size: 1.5rem; opacity: .55; color: var(--is-accent); }

/* ---------- PDF viewer & editor ---------- */
.pdf-stage {
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    overflow: auto;
    max-height: calc(100vh - 220px);
    padding: 1rem;
}

.pdf-page-wrap {
    position: relative;
    margin: 0 auto 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    background: #fff;
    width: fit-content;
}

.pdf-page-wrap canvas.pdf-render { display: block; }

.pdf-overlay { position: absolute; inset: 0; }

/* Placed-field chips in the editor palette */
.field-palette .palette-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: .45rem .6rem;
    cursor: grab;
    user-select: none;
    font-size: .875rem;
    background: var(--is-surface);
}

.field-palette .palette-item:hover { border-color: var(--is-accent); color: var(--is-accent); }
.field-palette .palette-item.border-primary { border-color: var(--is-accent) !important; color: var(--is-accent); }

/* Signing-page field boxes drawn over the PDF (kept high-contrast on white paper) */
.sign-field {
    position: absolute;
    border: 2px solid rgba(135, 6, 46, .85);      /* brand crimson */
    background: rgba(217, 173, 32, .16);          /* gold wash */
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 11px;
    color: #6d101e;
    transition: box-shadow .15s ease;
}

.sign-field:hover { box-shadow: 0 0 0 3px rgba(217, 173, 32, .45); }
.sign-field.filled { border-color: #1a7f37; background: rgba(46, 160, 67, .12); color: #1a7f37; }
.sign-field.required::after {
    content: "*";
    position: absolute;
    top: 0;
    inset-inline-end: 3px;
    color: #d33;
    font-weight: 700;
}
.sign-field img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sign-field.active-target { box-shadow: 0 0 0 4px rgba(255, 201, 22, .65); }

/* Signature pad */
.signature-pad-canvas {
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    background: #fff;
    touch-action: none;
    width: 100%;
    height: 180px;
}

.typed-signature-preview {
    font-family: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive;
    font-size: 2rem;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    background: #fff;
    color: #111;
}

/* Timeline (audit trail) */
.timeline { list-style: none; padding-inline-start: 0; margin: 0; }
.timeline li {
    position: relative;
    padding-inline-start: 1.75rem;
    padding-bottom: 1rem;
    border-inline-start: 2px solid var(--bs-border-color);
    margin-inline-start: .5rem;
}
.timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: -7px;
    top: .2rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--aj-gold);
    border: 2px solid var(--aj-maroon);
}
[data-bs-theme="dark"] .timeline li::before { border-color: var(--aj-gold-deep); background: var(--aj-gold); }
.timeline li:last-child { border-inline-start-color: transparent; }

/* ---------- Tables: gold title row + striped rows (brand standard) ---------- */
[data-bs-theme="light"] {
    --is-table-head-bg: #ebd391;      /* sampled from the corporate reference */
    --is-table-head-color: #3e0607;
    --is-table-stripe: #faf1d6;
    --is-table-hover: #f3e3ae;
}

/* Dark mode drops the gold fill for the console's flat header:
   muted uppercase labels on the panel surface. */
[data-bs-theme="dark"] {
    --is-table-head-bg: #17171b;
    --is-table-head-color: #8a8890;
    --is-table-stripe: rgba(255, 255, 255, .022);
    --is-table-hover: #1e1e24;
}

.table {
    --bs-table-bg: transparent;               /* let the card surface show through */
    --bs-table-striped-bg: var(--is-table-stripe);
    --bs-table-hover-bg: var(--is-table-hover);
}

.table > :not(caption) > * > * { vertical-align: middle; }

.table > thead > tr > th {
    background-color: var(--is-table-head-bg);
    color: var(--is-table-head-color);
    font-weight: 600;
    border-bottom: 2px solid var(--aj-gold);
}

[data-bs-theme="dark"] .table > thead > tr > th {
    border-bottom: 1px solid #26262c;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
    font-weight: 500;
}

/* Striped rows everywhere — uses Bootstrap 5.3's layered table variables,
   so row hover (--bs-table-bg-state) still paints above the stripe. */
.table > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

/* ---------- Modals: same treatment as table title rows ---------- */
.modal-header {
    background-color: var(--is-table-head-bg);
    color: var(--is-table-head-color);
    border-bottom: 2px solid var(--aj-gold);
}

.modal-header .modal-title { font-weight: 600; color: inherit; }

.modal-footer {
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* Dark: flat panel header/footer with hairline separators, like the console's
   document dialog — the title keeps full-contrast text, not the muted grey. */
[data-bs-theme="dark"] .modal-header {
    background-color: var(--is-surface);
    color: var(--bs-body-color);
    border-bottom: 1px solid #26262c;
}
[data-bs-theme="dark"] .modal-header .modal-title { color: var(--is-heading); }
[data-bs-theme="dark"] .modal-footer {
    background-color: #17171b;
    border-top: 1px solid #26262c;
}
[data-bs-theme="dark"] .modal-content {
    border: 1px solid #26262c;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
}
/* Section captions inside dark panels pick up the accent, as in the reference */
[data-bs-theme="dark"] .modal-body .card-header,
[data-bs-theme="dark"] .card-header {
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .78rem;
}

/* Keep the gold header inside the card's rounded corners (RTL-safe logical props) */
.card > .table-responsive { overflow: hidden; }
.card > .table-responsive:first-child {
    border-start-start-radius: calc(.75rem - 1px);
    border-start-end-radius: calc(.75rem - 1px);
}
.card > .table-responsive:last-child {
    border-end-start-radius: calc(.75rem - 1px);
    border-end-end-radius: calc(.75rem - 1px);
}

/* Misc */
.dropzone {
    border: 2px dashed var(--bs-border-color);
    border-radius: .75rem;
    padding: 2.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
    cursor: pointer;
}
.dropzone.dragover { border-color: var(--aj-gold); color: var(--is-accent); }
.chromeless .app-content { max-width: none; }

/* ============================================================
   Corporate watermark — the Al Jameel seal behind every page.
   A fixed, negative z-index pseudo-element paints above the page
   background but below ALL content, so cards, tables and modals
   (z-index 1055) always sit in front. pointer-events keeps it
   completely non-interactive.
   ============================================================ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("../img/aljameel-watermark.png") no-repeat center 44%;
    background-size: min(60vmin, 540px);
    opacity: .06;
    pointer-events: none;
}
[data-bs-theme="dark"] body::before {
    opacity: .07;
    filter: brightness(1.35); /* lift the maroon so it stays visible on dark surfaces */
}

/* ============================================================
   Profile photo avatars
   ============================================================ */
.avatar-sm {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--aj-gold);
}
.avatar-lg {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--aj-gold);
    box-shadow: 0 2px 8px rgba(61, 5, 5, .15);
}
.avatar-placeholder {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border: 3px dashed var(--bs-border-color);
    font-size: 3rem;
}

/* Avatar cropper (register + profile pages) */
.avatar-crop-stage { text-align: center; }
.avatar-crop-canvas {
    width: 220px;
    height: 220px;
    max-width: 100%;
    border-radius: 50%;
    border: 3px solid var(--aj-gold);
    background: #fff;
    cursor: grab;
    touch-action: none; /* let pointer events handle dragging on touch screens */
    display: block;
    margin: 0 auto .5rem;
}
.avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop-stage .form-range { max-width: 220px; }

/* Round thumbnails in lists (admin Users, pickers) */
.avatar-md {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--aj-gold);
    flex-shrink: 0;
}
.avatar-fallback-md {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border: 1px dashed var(--bs-border-color);
    flex-shrink: 0;
}

/* Row actions appear on hover (and on keyboard focus, and always on touch,
   where there is no hover state to reveal them). */
.row-actions {
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}
tr:hover .row-actions,
tr:focus-within .row-actions {
    visibility: visible;
    opacity: 1;
}
@media (hover: none) {
    .row-actions { visibility: visible; opacity: 1; }
}

/* Sortable column headers */
.th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
/* Glyphs are the bundled bootstrap-icons codepoints: caret-down-fill (f229)
   as the idle hint, caret-up-fill (f235) when sorted ascending. */
.th-sortable::after {
    content: "\f229";
    font-family: bootstrap-icons;
    font-size: .75em;
    opacity: .3;
    margin-inline-start: .35rem;
    vertical-align: -.05em;
}
.th-sortable:hover::after { opacity: .65; }
.th-sortable[aria-sort="ascending"]::after {
    content: "\f235";
    opacity: 1;
}
.th-sortable[aria-sort="descending"]::after {
    content: "\f229";
    opacity: 1;
}
/* Server-sorted lists put the link inside the header cell, so the active state
   is read from the <th> (which correctly carries aria-sort) while the caret
   stays on the link. */
th[aria-sort="ascending"] > .th-sortable::after {
    content: "\f235";
    opacity: 1;
}
th[aria-sort="descending"] > .th-sortable::after {
    content: "\f229";
    opacity: 1;
}

/* Avatar shown inside the admin edit modal */
.avatar-edit,
.avatar-fallback-edit {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-edit { border: 2px solid var(--aj-gold); }
.avatar-fallback-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border: 2px dashed var(--bs-border-color);
    font-size: 1.75rem;
}

/* The cropper canvas is smaller inside a modal than on a full page */
.modal .avatar-crop-canvas {
    width: 160px;
    height: 160px;
}

/* Scrollable list with a sticky (gold) header row.
   Needs its own scroll container — the generic .card > .table-responsive rule
   uses overflow:hidden for the rounded corners, which would defeat sticky. */
.table-sticky,
.card > .table-sticky {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
}
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--is-table-head-bg);
    box-shadow: 0 1px 0 var(--bs-border-color);
}

/* ============================================================
   Dark theme — console components
   Matches the Al Jameel Salla ↔ Kinza-SAP operations console:
   flat near-black panels, hairline separators, muted uppercase
   captions, amber accent, soft status pills.
   These rules apply ONLY in dark mode; light mode is untouched.
   ============================================================ */
[data-bs-theme="dark"] .card {
    --bs-card-border-color: #1e1e24;
}

/* Metric tiles: plain bordered panels with muted captions (no gold cap) */
[data-bs-theme="dark"] .stat-card {
    border: 1px solid #1e1e24;
    border-top: 1px solid #1e1e24;
}
[data-bs-theme="dark"] .stat-card .stat-label {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .72rem;
}

/* Shell chrome */
[data-bs-theme="dark"] .app-sidebar,
[data-bs-theme="dark"] .app-topbar {
    border-color: #1e1e24;
}

/* Form fields: raised a step above the page so inputs read as controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1a1a1f;
    border-color: #2d2d35;
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .form-control::placeholder { color: #6f6d75; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #1a1a1f;
    border-color: var(--is-accent);
    box-shadow: 0 0 0 .2rem rgba(255, 144, 44, .2);
}
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--is-accent);
    border-color: var(--is-accent);
}
[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--is-accent);
    box-shadow: 0 0 0 .2rem rgba(255, 144, 44, .2);
}
[data-bs-theme="dark"] .form-range { accent-color: var(--is-accent); }

/* Status pills: tinted background + coloured label, as on the console */
[data-bs-theme="dark"] .badge.text-bg-success {
    background-color: rgba(46, 224, 135, .14) !important;
    color: #2ee087 !important;
}
[data-bs-theme="dark"] .badge.text-bg-warning {
    background-color: rgba(250, 195, 67, .14) !important;
    color: #fac343 !important;
}
[data-bs-theme="dark"] .badge.text-bg-danger {
    background-color: rgba(244, 63, 63, .14) !important;
    color: #ff6b6b !important;
}
[data-bs-theme="dark"] .badge.text-bg-info {
    background-color: rgba(88, 155, 250, .14) !important;
    color: #589bfa !important;
}
[data-bs-theme="dark"] .badge.text-bg-primary {
    background-color: rgba(255, 144, 44, .16) !important;
    color: #ffab47 !important;
}
[data-bs-theme="dark"] .badge.text-bg-light,
[data-bs-theme="dark"] .badge.text-bg-secondary,
[data-bs-theme="dark"] .badge.text-bg-dark {
    background-color: #1e1e24 !important;
    color: #b9b7b6 !important;
    border-color: #2d2d35 !important;
}

/* Accents that were gold in the maroon night theme */
[data-bs-theme="dark"] .avatar-sm,
[data-bs-theme="dark"] .avatar-md,
[data-bs-theme="dark"] .avatar-lg,
[data-bs-theme="dark"] .avatar-edit,
[data-bs-theme="dark"] .avatar-crop-canvas {
    border-color: var(--is-accent);
}
[data-bs-theme="dark"] .app-brand i,
[data-bs-theme="dark"] .app-brand strong { color: var(--is-accent); }
[data-bs-theme="dark"] code { color: #ffab47; }
[data-bs-theme="dark"] .timeline li::before {
    background: var(--is-accent);
    border-color: #26262c;
}
[data-bs-theme="dark"] .dropzone.dragover { border-color: var(--is-accent); }
[data-bs-theme="dark"] .text-info { color: #589bfa !important; }
[data-bs-theme="dark"] .text-bg-info {
    background-color: rgba(88, 155, 250, .14) !important;
    color: #589bfa !important;
}

/* On a near-black page the seal reads much stronger than on cream, so it is
   dialled right back to a faint texture that never competes with content. */
[data-bs-theme="dark"] body::before {
    opacity: .028;
    filter: none;
}

/* ============================================================
   My Contacts — group tree + drag & drop
   ============================================================ */
.contact-tree { max-height: calc(100vh - 320px); overflow-y: auto; }

.contact-tree-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    border-radius: .4rem;
    padding: .3rem .5rem;
    margin-bottom: .1rem;
    transition: background-color .12s ease-in-out;
}
.contact-tree-item:hover { background: var(--bs-secondary-bg); }
.contact-tree-item.active { background: var(--is-accent-soft); }
.contact-tree-item.active .contact-tree-link { color: var(--is-accent); font-weight: 600; }

.contact-tree-link {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1 1 auto;
    min-width: 0;                 /* lets long names truncate instead of pushing the badge out */
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .92rem;
}
.contact-tree-link i { opacity: .75; }

.contact-tree-menu {
    opacity: 0;
    transition: opacity .12s ease-in-out;
    line-height: 1;
}
.contact-tree-item:hover .contact-tree-menu,
.contact-tree-item:focus-within .contact-tree-menu { opacity: .8; }
@media (hover: none) { .contact-tree-menu { opacity: .8; } }

/* Drop feedback */
.contact-drop.drop-over {
    background: var(--is-accent-soft);
    outline: 2px dashed var(--is-accent);
    outline-offset: -2px;
}

/* Drag feedback on the contact row */
tr[draggable="true"] { cursor: grab; }
tr.contact-dragging { opacity: .45; }
tr.contact-moved > td { animation: is-flash 0.9s ease-out; }
@keyframes is-flash {
    from { background-color: var(--is-accent-soft); }
    to { background-color: transparent; }
}