/* ───────────────────────────────────────────────────────────────────────────
   Blue Ocean — Sistema de Design (oficial)

   Brand colors (do logotipo oficial em SVG):
     Navy   #182453   (deep navy ligeiramente roxo)
     Bronze #a38050   (bronze quente, não amarelo)
     Cream  #e2c5a1   (areia/champanhe, terceira cor)

   Tipografia:
     Display: Instrument Serif  (títulos, identidade)
     Body:    Inter             (UI, texto, números)
     Mono:    JetBrains Mono    (refs, códigos)
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    /* Brand */
    --navy:        #182453;
    --navy-900:    #0d1638;
    --navy-700:    #1f2e6b;
    --navy-500:    #344491;
    --navy-100:    #e8eaf2;
    --navy-50:     #f5f6fa;

    --bronze:      #a38050;
    --bronze-700:  #7d6038;
    --bronze-500:  #c4a275;
    --bronze-200:  #ddc7a4;
    --bronze-100:  #f0e3cc;
    --bronze-50:   #faf3e6;

    --cream:       #e2c5a1;
    --cream-light: #f5e9d4;
    --cream-bg:    #faf6ee;

    /* Neutrals */
    --ink:         #14181f;
    --ink-soft:    #2a3140;
    --muted:       #6b7280;
    --muted-soft:  #9aa3b2;
    --line:        #e5e7ec;
    --line-soft:   #eef0f4;
    --bg:          #f7f8fa;
    --bg-warm:     #fbfaf6;
    --white:       #ffffff;

    /* Status */
    --success:     #1a7f4d;
    --success-bg:  #d8f1e3;
    --warning:     #b87b00;
    --warning-bg:  #fff4dd;
    --danger:      #b3261e;
    --danger-bg:   #f9dfdc;
    --info:        var(--navy-500);
    --info-bg:     var(--navy-100);

    /* Elevation */
    --shadow-xs:   0 1px 2px rgba(20, 24, 31, .04);
    --shadow-sm:   0 2px 6px rgba(20, 24, 31, .05);
    --shadow:      0 6px 20px rgba(24, 36, 83, .08);
    --shadow-lg:   0 18px 48px rgba(24, 36, 83, .12);

    /* Geometry */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;
    --r-xl: 24px;

    /* Typography scale */
    --fs-xs:  .75rem;   /* 12 */
    --fs-sm:  .82rem;   /* 13 */
    --fs-base:.9375rem; /* 15 */
    --fs-md:  1.0625rem;/* 17 */
    --fs-lg:  1.25rem;  /* 20 */
    --fs-xl:  1.625rem; /* 26 */
    --fs-2xl: 2.125rem; /* 34 */
    --fs-3xl: 2.75rem;  /* 44 */
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The native [hidden] attribute is overridden when an element also has
   `display: flex/grid` set. Force-hide globally so JS that toggles
   el.hidden = true actually hides .doc-modal, drawers, forms, etc. */
[hidden] { display: none !important; }

/* ── Smooth scroll & slim brand-aligned scrollbars ───────────────────────
   Philosophy: a single page-level scrollbar (the body) handles vertical
   navigation. Nested scroll containers exist only where the UX requires
   them (chat thread, modal, kanban horizontal). Where they DO exist,
   scrollbars are slim, transparent-on-idle, and pick up the bronze tone
   on hover so they feel like part of the brand instead of OS chrome.
*/
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;        /* keeps anchor targets clear of the topbar */
    overscroll-behavior-y: none;     /* no rubber-band bounce on the page */
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(163, 128, 80, .35) transparent; }
/* Chromium / Safari / Edge */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(163, 128, 80, .28);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color .2s;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(163, 128, 80, .55);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(226, 197, 161, .25); background-clip: padding-box; }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(226, 197, 161, .5); background-clip: padding-box; }
[data-theme="dark"] * { scrollbar-color: rgba(226, 197, 161, .25) transparent; }
body {
    /* Body font: 'Basic Sans' is Blue Ocean's official typeface (Adobe Fonts).
       Manrope is a close geometric-humanist fallback from Google Fonts that
       activates when the Adobe Fonts kit isn't configured. */
    font-family: 'basic-sans', 'Basic Sans', 'Manrope',
                 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: var(--fs-base);
    line-height: 1.6;
    font-feature-settings: "ss01", "cv11";
    text-rendering: optimizeLegibility;
    /* No horizontal page-scroll — single vertical viewport-level scroll. */
    overflow-x: hidden;
}

/* CSS containment for major layout regions: scoping reflows + paint to
   each region keeps the page snappy when chat / kanban update. */
.main { contain: paint; }
.sidebar { contain: paint; }

h1, h2, h3, h4, h5 {
    /* Headings use the same Basic Sans family as body — Blue Ocean's
       identity is all sans-serif. Instrument Serif is reserved for
       the auth tagline only (purely decorative). */
    font-family: inherit;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.015em;
    margin: 0 0 .4em;
    line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); letter-spacing: -0.025em; font-weight: 600; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 2.125rem); font-weight: 600; }
h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.625rem); font-weight: 600; }
h4 { font-size: clamp(1rem, .95rem + .25vw, 1.25rem); font-weight: 600; }

p { margin: 0 0 1em; }
a  { color: var(--navy-700); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--bronze-700); }

::selection { background: var(--bronze-100); color: var(--navy); }

/* ── App shell ─────────────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
    color: rgba(255, 255, 255, .85);
    padding: 1.75rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar .brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 .25rem;
}
.sidebar .brand-mark {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid; place-items: center;
}
.sidebar .brand-mark svg { width: 100%; height: 100%; display: block; }
.sidebar .brand-text {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--white);
    letter-spacing: .01em;
    line-height: 1.1;
}
.sidebar .brand-meta {
    font-size: var(--fs-xs);
    color: rgba(226, 197, 161, .65);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: .15rem;
}
.sidebar nav { display: flex; flex-direction: column; gap: 1px; margin-top: .35rem; }
.sidebar nav a {
    color: rgba(255, 255, 255, .72);
    padding: .58rem .85rem;
    border-radius: var(--r);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .005em;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
    position: relative;
    display: flex;
    align-items: center;
}
.sidebar nav a:hover {
    background: rgba(255, 255, 255, .045);
    color: var(--white);
    text-decoration: none;
}
.sidebar nav a.active {
    background: rgba(226, 197, 161, .12);
    color: var(--cream);
    padding-left: 1.1rem;
}
.sidebar nav a.active::before {
    content: '';
    position: absolute;
    left: 0; top: 18%;
    height: 64%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--cream);
}
.sidebar .section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(226, 197, 161, .5);
    font-weight: 500;
    margin: 1.4rem .85rem .4rem;
}
.sidebar .footer {
    margin-top: auto;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .35);
    padding: .8rem .85rem 0;
    border-top: 1px solid rgba(255,255,255,.06);
    letter-spacing: .04em;
}

/* Main + topbar */
.main {
    /* Fluid padding: scales between 1rem (small screens) and 2.75rem (desktop)
       so content breathes on every viewport without media queries. */
    padding: clamp(1rem, 2.5vw, 2.25rem) clamp(1rem, 3vw, 2.75rem) clamp(2rem, 4vw, 3rem);
    max-width: 1400px;
    width: 100%;
    /* No internal scrollbar on the main column — the body owns the scroll. */
}
.topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
    padding-bottom: clamp(.85rem, 2vw, 1.4rem);
    border-bottom: 1px solid var(--line);
    gap: 1rem;
    flex-wrap: wrap;        /* avoids horizontal overflow on narrow screens */
}
.topbar .title h1 { margin: 0; font-size: var(--fs-2xl); }
.topbar .title .crumb {
    color: var(--muted);
    font-size: var(--fs-sm);
    margin-top: .25rem;
    letter-spacing: .02em;
}
.user-pill {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .35rem .9rem .35rem .35rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 99px;
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-xs);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.user-pill:hover { box-shadow: var(--shadow-sm); border-color: var(--bronze-200); }
.user-pill .avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
    color: var(--cream);
    display: grid; place-items: center;
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .02em;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.6rem 1.75rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow .2s ease;
}
.card + .card { margin-top: 1.25rem; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* Stats */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.3rem 1.4rem;
    position: relative;
    overflow: hidden;
}
.stat::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 3px; height: 32px;
    background: linear-gradient(180deg, var(--bronze) 0%, var(--cream) 100%);
    border-radius: 0 3px 3px 0;
    opacity: .85;
}
.stat .label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: .55rem;
}
.stat .value {
    font-family: inherit;
    font-size: 2rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.stat .delta { font-size: var(--fs-xs); color: var(--success); margin-top: .45rem; }

/* ── Tables ────────────────────────────────────────────────────────────── */
table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
}
table.data th {
    text-align: left;
    font-weight: 600;
    padding: .8rem 1rem;
    background: var(--navy-50);
    color: var(--navy);
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
table.data th:first-child { border-top-left-radius: var(--r); }
table.data th:last-child  { border-top-right-radius: var(--r); }
table.data td {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    color: var(--ink-soft);
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr {
    transition: background .12s ease;
}
table.data tbody tr:hover { background: var(--bg-warm); }
table.data .ref {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 12px;
    color: var(--bronze-700);
    letter-spacing: .02em;
}
table.data strong { color: var(--ink); font-weight: 600; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .65rem;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--navy-100);
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 1px solid transparent;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-muted   { background: var(--line-soft);  color: var(--muted); }

/* Category accents (warmer palette) */
.cat-identificacao { background: #e0e9f5; color: #1f4480; }
.cat-ar_aima       { background: #fbeada; color: #8c4f1c; }
.cat-nacionalidade { background: #dff0e1; color: #1f6b3b; }
.cat-certificacoes { background: var(--bronze-100); color: var(--bronze-700); }
.cat-judicial      { background: #f3dceb; color: #7a1f55; }
.cat-empresarial   { background: #e4dff5; color: #3e2980; }
.cat-courier       { background: #dfeaf3; color: #1f5882; }
.cat-vistos        { background: #f9ebbf; color: #6b4814; }
.cat-golden_visa   { background: var(--cream-light); color: var(--bronze-700); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none !important;
    transition: all .18s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
}
.btn-primary {
    background: var(--navy);
    color: var(--white);
    box-shadow: 0 1px 2px rgba(24, 36, 83, .25);
}
.btn-primary:hover {
    background: var(--navy-700);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 36, 83, .25);
    color: var(--white);
}
.btn-gold {
    background: linear-gradient(135deg, var(--bronze) 0%, var(--bronze-700) 100%);
    color: var(--white);
    box-shadow: 0 1px 2px rgba(163, 128, 80, .3);
}
.btn-gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(163, 128, 80, .35);
    color: var(--white);
}
.btn-ghost {
    background: var(--white);
    color: var(--navy);
    border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-warm); border-color: var(--bronze-200); color: var(--navy); }

/* ── Auth (split-screen) ───────────────────────────────────────────────── */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--cream-bg);
}
.auth-brand {
    background: linear-gradient(155deg, var(--navy) 0%, var(--navy-900) 60%, #0a0f24 100%);
    color: var(--cream);
    padding: 3.5rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.auth-brand::before {
    content: '';
    position: absolute;
    inset: -50% -30% auto auto;
    width: 70%; height: 70%;
    background: radial-gradient(ellipse at center, rgba(226, 197, 161, .12) 0%, transparent 70%);
    pointer-events: none;
}
.auth-brand .brand-logo {
    width: 220px;
    max-width: 50%;
}
.auth-brand .brand-logo svg { width: 100%; height: auto; display: block; }
.auth-brand .tagline {
    /* Tagline keeps Instrument Serif as the only decorative serif use —
       evokes the brand's editorial / luxury law firm tone. */
    font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    font-size: 2.4rem;
    line-height: 1.15;
    color: var(--white);
    margin: 0;
    max-width: 480px;
    letter-spacing: -0.015em;
    font-weight: 400;
}
.auth-brand .tagline em {
    color: var(--cream);
    font-style: italic;
    font-weight: 400;
}
.auth-brand .legal {
    font-size: var(--fs-xs);
    color: rgba(226, 197, 161, .55);
    letter-spacing: .04em;
    line-height: 1.7;
    max-width: 380px;
}
.auth-form {
    padding: 4rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--cream-bg);
}
.auth-form .auth-inner { max-width: 420px; }
.auth-form h1 { font-size: var(--fs-2xl); margin: 0 0 .25rem; font-weight: 600; }
.auth-form .lede { color: var(--muted); margin: 0 0 2rem; font-size: var(--fs-md); }
.auth-form .switch-link {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

@media (max-width: 980px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { padding: 2rem; min-height: 220px; }
    .auth-brand .tagline { font-size: 1.6rem; }
    .auth-form { padding: 2rem; }
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--navy-700);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .7rem .95rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    font-family: inherit;
    background: var(--white);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 3px var(--bronze-100);
}
.form-group input:disabled { background: var(--bg-warm); color: var(--muted); cursor: not-allowed; }
.form-group small.help { color: var(--muted); font-size: var(--fs-xs); margin-top: .3rem; display: block; }

/* Form sections */
.form-section {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.4rem 1.6rem .5rem;
    margin: 0 0 1.4rem;
    background: var(--white);
}
.form-section legend {
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--navy);
    padding: 0 .6rem;
    letter-spacing: -0.005em;
}

/* Flash */
.flash {
    padding: .9rem 1.1rem;
    border-radius: var(--r);
    margin-bottom: 1.25rem;
    font-size: var(--fs-sm);
    border: 1px solid transparent;
}
.flash-info    { background: var(--info-bg);    color: var(--info);    border-color: var(--navy-100); }
.flash-error   { background: var(--danger-bg);  color: var(--danger);  border-color: #f5c4c0; }
.flash-success { background: var(--success-bg); color: var(--success); border-color: #b8e0c9; }

/* ── Service catalog grid ──────────────────────────────────────────────── */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}
.service-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.4rem;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    color: var(--ink);
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--bronze) 50%, transparent 100%);
    opacity: 0;
    transition: opacity .2s ease;
}
.service-card:hover {
    border-color: var(--bronze-200);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    color: var(--ink);
}
.service-card:hover::before { opacity: 1; }
.service-card .name {
    font-family: inherit;
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--navy);
    margin: 0 0 .55rem;
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.service-card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}
.service-card .price {
    font-weight: 600;
    color: var(--bronze-700);
    font-size: var(--fs-base);
}

/* ── Read-only display lists ───────────────────────────────────────────── */
.ro-list {
    display: grid;
    grid-template-columns: minmax(180px, 26%) 1fr;
    gap: .35rem 1.5rem;
    margin: 0 0 1rem;
    font-size: var(--fs-sm);
}
.ro-list dt {
    color: var(--muted);
    font-weight: 500;
    padding: .35rem 0;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ro-list dd { margin: 0; padding: .35rem 0; color: var(--ink); }
.ro-section + .ro-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--line);
}
.ro-section h3 {
    font-family: inherit;
    font-weight: 600;
    color: var(--navy-700);
    font-size: var(--fs-md);
}

/* ── Audit timeline ────────────────────────────────────────────────────── */
.audit-list {
    list-style: none;
    margin: 0; padding: 0;
}
.audit-list li {
    padding: .7rem 0 .7rem 1.4rem;
    border-left: 2px solid var(--line);
    margin-left: .5rem;
    font-size: var(--fs-sm);
    position: relative;
}
.audit-list li::before {
    content: '';
    position: absolute;
    left: -6px; top: 1rem;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--bronze);
    border: 2px solid var(--white);
    box-shadow: 0 0 0 1px var(--bronze-200);
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.right { text-align: right; }
.flex  { display: flex; align-items: center; gap: .8rem; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gap-sm { gap: .5rem; }
.mt-1  { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1  { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

details summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }

/* Ensure buttons inside details summaries get pill treatment */
details > summary.btn { display: inline-flex; }

/* ── Hero card (page header) ───────────────────────────────────────────── */
.hero-card {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%);
    color: var(--cream);
    border-radius: var(--r-lg);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(24, 36, 83, .12);
}
.hero-card::before {
    content: '';
    position: absolute;
    inset: -50% -10% auto auto;
    width: 50%; height: 80%;
    background: radial-gradient(ellipse, rgba(226, 197, 161, .08) 0%, transparent 65%);
    pointer-events: none;
}
.hero-card .hero-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: var(--fs-xs);
    color: var(--cream);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    opacity: .85;
    margin-bottom: .6rem;
}
.hero-card h1 {
    color: var(--white);
    margin: 0 0 .5rem;
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
}
.hero-card .hero-meta {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    color: rgba(255,255,255,.75);
    font-size: var(--fs-sm);
    margin-top: .4rem;
}
.hero-card .ref {
    font-family: 'JetBrains Mono', monospace;
    color: var(--cream);
    font-size: var(--fs-sm);
    letter-spacing: .03em;
}
.hero-card .badge {
    background: rgba(255,255,255,.1);
    color: var(--cream);
    border-color: rgba(226, 197, 161, .25);
}
.hero-card .badge-success { background: rgba(216, 241, 227, .9); color: var(--success); border-color: transparent; }
.hero-card .badge-warning { background: rgba(255, 244, 221, .9); color: var(--warning); border-color: transparent; }
.hero-card .badge-info    { background: rgba(255,255,255,.92); color: var(--navy); border-color: transparent; }
.hero-card .hero-actions { margin-top: 1.2rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.hero-card .hero-actions .btn-ghost {
    background: rgba(255,255,255,.06);
    color: var(--cream);
    border-color: rgba(226, 197, 161, .25);
}
.hero-card .hero-actions .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: var(--cream); color: var(--white); }
.hero-card .hero-actions .btn-gold { box-shadow: 0 2px 12px rgba(0,0,0,.25); }

/* ── Two-column detail layout ──────────────────────────────────────────── */
.layout-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.layout-detail .col-side { position: sticky; top: 1.5rem; }
@media (max-width: 1100px) {
    .layout-detail { grid-template-columns: 1fr; }
    .layout-detail .col-side { position: static; }
}

/* ── Sticky save bar (admin edits) ─────────────────────────────────────── */
.sticky-bar {
    position: sticky;
    bottom: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--bronze);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: 1rem 1.5rem;
    margin: -1px 0 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 -8px 24px rgba(24, 36, 83, .08);
    z-index: 5;
}
.sticky-bar .label { color: var(--muted); font-size: var(--fs-sm); }

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--muted);
}
.empty .empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    display: grid; place-items: center;
    background: var(--bronze-50);
    color: var(--bronze-700);
    border-radius: 50%;
}
.empty .empty-icon svg { width: 30px; height: 30px; }
.empty h3 {
    font-family: inherit;
    font-weight: 600;
    color: var(--navy);
    font-size: var(--fs-md);
    margin: 0 0 .35rem;
}
.empty p { margin: 0 0 1.2rem; font-size: var(--fs-sm); max-width: 340px; margin-inline: auto; }

/* ── Toast notifications ───────────────────────────────────────────────── */
#toast-stack {
    position: fixed;
    top: 1.5rem; right: 1.5rem;
    display: flex; flex-direction: column; gap: .6rem;
    z-index: 1000;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    min-width: 280px; max-width: 420px;
    padding: .85rem 1.1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--navy);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    font-size: var(--fs-sm);
    color: var(--ink);
    animation: toast-in .25s cubic-bezier(.4,0,.2,1);
    display: flex; align-items: flex-start; gap: .7rem;
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast .toast-close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 16px; line-height: 1; margin-left: auto; }
.toast.leaving { animation: toast-out .2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(20px); } }

/* ── Animations ────────────────────────────────────────────────────────── */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card, .stat, .hero-card, .service-card {
    animation: fade-in-up .35s cubic-bezier(.4,0,.2,1) backwards;
}
.stat-grid > .stat:nth-child(1) { animation-delay: 0ms; }
.stat-grid > .stat:nth-child(2) { animation-delay: 60ms; }
.stat-grid > .stat:nth-child(3) { animation-delay: 120ms; }
.stat-grid > .stat:nth-child(4) { animation-delay: 180ms; }

/* Count-up: number is rendered in JS */
.stat .value[data-count] { font-variant-numeric: tabular-nums; }

/* ── Mobile drawer ─────────────────────────────────────────────────────── */
.drawer-toggle {
    display: none;
    position: fixed;
    top: 1rem; left: 1rem;
    z-index: 100;
    background: var(--navy);
    color: var(--cream);
    border: none;
    border-radius: var(--r);
    padding: .55rem .8rem;
    font-size: 16px;
    cursor: pointer;
    box-shadow: var(--shadow);
}
.drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 24, 31, .5);
    z-index: 90;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }

/* ───────────────────────────────────────────────────────────────────────────
   Dark mode — palette stays brand-aligned (deep navy + cream + bronze).
   Activated by [data-theme="dark"] on <html>; persisted in localStorage.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --navy:        #0a0f24;
    --navy-900:    #050818;
    --navy-700:    #182453;
    --navy-500:    #344491;
    --navy-100:    rgba(255,255,255,.08);
    --navy-50:     rgba(255,255,255,.04);

    --bronze:      #c4a275;
    --bronze-700:  #a38050;
    --bronze-500:  #ddc7a4;
    --bronze-200:  rgba(226, 197, 161, .25);
    --bronze-100:  rgba(226, 197, 161, .15);
    --bronze-50:   rgba(226, 197, 161, .08);

    --cream:       #f5e9d4;
    --cream-light: #faf3e6;
    --cream-bg:    #0a0f24;

    --ink:         #f0e8d5;
    --ink-soft:    #d8cfb9;
    --muted:       #8a93a3;
    --muted-soft:  #6b7280;
    --line:        rgba(226, 197, 161, .12);
    --line-soft:   rgba(226, 197, 161, .06);
    --bg:          #0a0f24;
    --bg-warm:     #131a35;
    --white:       #182453;

    --success-bg: rgba(26, 127, 77, .2);
    --warning-bg: rgba(184, 123, 0, .2);
    --danger-bg:  rgba(179, 38, 30, .2);
    --info-bg:    rgba(52, 68, 145, .25);

    --shadow-xs:   0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm:   0 2px 6px rgba(0, 0, 0, .35);
    --shadow:      0 6px 20px rgba(0, 0, 0, .45);
    --shadow-lg:   0 18px 48px rgba(0, 0, 0, .55);
}
[data-theme="dark"] body { color: var(--ink); }
[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #182453 0%, #0a0f24 100%); }
[data-theme="dark"] .auth-form { background: var(--bg); color: var(--ink); }
[data-theme="dark"] .auth-form h1 { color: var(--cream); }
[data-theme="dark"] .auth-form .lede,
[data-theme="dark"] .auth-form .switch-link { color: var(--muted); }
[data-theme="dark"] table.data tbody tr:hover { background: rgba(255,255,255,.03); }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: var(--bg-warm);
    color: var(--ink);
    border-color: var(--line);
}
[data-theme="dark"] .form-group input::placeholder { color: var(--muted-soft); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--cream); }
[data-theme="dark"] .btn-ghost { background: var(--bg-warm); color: var(--cream); border-color: var(--line); }
[data-theme="dark"] .btn-ghost:hover { background: var(--white); border-color: var(--bronze-200); color: var(--cream); }
[data-theme="dark"] .stat .value,
[data-theme="dark"] .ro-section h3 { color: var(--cream); }
[data-theme="dark"] .service-card .name,
[data-theme="dark"] .service-card .price { color: var(--cream); }
[data-theme="dark"] .empty .empty-icon { background: var(--bronze-50); color: var(--bronze); }
[data-theme="dark"] .empty h3 { color: var(--cream); }
[data-theme="dark"] .toast { background: var(--white); color: var(--ink); }

/* Theme toggle button (sits in topbar near user-pill) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    color: var(--navy);
    transition: all .15s ease;
    margin-right: .5rem;
}
.theme-toggle:hover { border-color: var(--bronze-200); color: var(--bronze-700); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; color: var(--cream); }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle { background: var(--bg-warm); color: var(--cream); }

/* ───────────────────────────────────────────────────────────────────────────
   Skeleton loaders — for table rows / cards during async loads
   ─────────────────────────────────────────────────────────────────────────── */
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 50%, var(--line-soft) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-shine 1.4s ease-in-out infinite;
    color: transparent;
    user-select: none;
    pointer-events: none;
}
.skeleton-text { width: 80%; height: .9em; }
.skeleton-pill { width: 72px; height: 1.4em; border-radius: 99px; }
.skeleton-cell { width: 100%; height: 1em; }
@keyframes skeleton-shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Appointment card (Calendly link + status + scheduled details)
   ─────────────────────────────────────────────────────────────────────────── */
.appointment-card { padding: 0; }
.apt-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 1.1rem;
}
.apt-title {
    display: flex; align-items: center; gap: .55rem;
    font-weight: 600;
    color: var(--navy);
    font-size: var(--fs-md);
}
.apt-title svg { color: var(--bronze); }
.apt-when {
    display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
    padding: .8rem 1rem;
    background: var(--bronze-50);
    border-left: 3px solid var(--bronze);
    border-radius: 0 var(--r) var(--r) 0;
    margin-bottom: 1rem;
}
.apt-when-date { font-weight: 600; color: var(--navy); font-size: var(--fs-md); text-transform: capitalize; }
.apt-when-time { font-weight: 600; color: var(--bronze-700); font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: .35rem; }
.apt-when-arrow { color: var(--bronze-200); font-weight: 400; }
.apt-when-duration {
    font-size: var(--fs-xs);
    color: var(--bronze-700);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    background: var(--white);
    padding: .25rem .55rem;
    border-radius: 99px;
    border: 1px solid var(--bronze-200);
    display: inline-block;
    align-self: center;
}
.apt-when-loc {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--muted); font-size: var(--fs-sm);
    width: 100%;
    margin-top: .3rem;
}
.apt-duration-hint {
    background: var(--bronze-50);
    border: 1px solid var(--bronze-200);
    border-radius: var(--r);
    padding: .65rem .9rem;
    font-size: var(--fs-sm);
    color: var(--bronze-700);
    margin-bottom: 1rem;
}

/* ── Appointment tabs (Reservar agora vs Enviar link) ─────────────────── */
.apt-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
}
.apt-tab {
    background: transparent;
    border: none;
    padding: .65rem 1.1rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    position: relative;
    transition: color .15s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.apt-tab:hover { color: var(--navy); }
.apt-tab.active {
    color: var(--navy);
    font-weight: 600;
    border-bottom-color: var(--bronze);
}
.apt-tab-panel { display: none; }
.apt-tab-panel.active { display: block; animation: fade-in .2s ease; }
.apt-prefill-note {
    background: var(--info-bg);
    border: 1px solid var(--navy-100);
    border-radius: var(--r-sm);
    padding: .5rem .8rem;
    font-size: var(--fs-xs);
    color: var(--navy-700);
    margin-bottom: .8rem;
}
.calendly-inline-widget {
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--white);
}
[data-theme="dark"] .calendly-inline-widget {
    background: #fff; /* Calendly widget is white internally — keep contrast */
    border-color: var(--bronze-200);
}
.apt-row-time { display: flex; flex-direction: column; gap: .15rem; }
.apt-row-time-end { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.apt-row-time-dur {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bronze-700);
    font-weight: 600;
    background: var(--bronze-50);
    padding: 1px 6px;
    border-radius: 4px;
    align-self: flex-start;
    margin-top: .15rem;
}
.apt-help { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 .8rem; }
.apt-link-row {
    display: flex; gap: .4rem; align-items: stretch;
    background: var(--bg-warm);
    padding: .4rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.apt-link-field {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: var(--fs-sm) !important;
    color: var(--bronze-700) !important;
    padding: .55rem .7rem !important;
    box-shadow: none !important;
    min-width: 0;
}
.apt-link-field:focus { outline: 1px solid var(--bronze-200) !important; }
.apt-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: .4rem; }

/* ───────────────────────────────────────────────────────────────────────────
   Appointment timeline (admin/calendario.php)
   ─────────────────────────────────────────────────────────────────────────── */
.appointment-timeline { margin-top: 1rem; }
.apt-day-header {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    font-weight: 600;
    padding: 1.1rem 0 .55rem;
    border-bottom: 1px solid var(--line);
    margin: 0 0 .4rem;
}
.apt-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
}
.apt-row:last-child { border-bottom: none; }
.apt-row-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.apt-row-title { font-size: var(--fs-base); margin-bottom: .15rem; }
.apt-row-meta {
    font-size: var(--fs-sm);
    color: var(--muted);
    display: flex; flex-wrap: wrap; gap: .3rem;
}
.apt-row-meta span { white-space: nowrap; }

/* ───────────────────────────────────────────────────────────────────────────
   AIMA map embed — used in appointment confirmation
   ─────────────────────────────────────────────────────────────────────────── */
.aima-map {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bg-warm);
}
.aima-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ───────────────────────────────────────────────────────────────────────────
   Onboarding tour overlay
   ─────────────────────────────────────────────────────────────────────────── */
.tour-backdrop {
    position: fixed; inset: 0;
    background: rgba(10, 15, 36, .65);
    backdrop-filter: blur(2px);
    z-index: 200;
    animation: fade-in .25s ease;
}
.tour-card {
    position: fixed;
    z-index: 201;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem 1.6rem;
    box-shadow: var(--shadow-lg);
    max-width: 380px;
    animation: tour-pop .3s cubic-bezier(.4,0,.2,1);
}
.tour-card h3 { margin: 0 0 .4rem; font-family: inherit; font-weight: 600; color: var(--navy); font-size: var(--fs-md); }
.tour-card p { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 1.2rem; line-height: 1.55; }
.tour-card .tour-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tour-card .tour-step { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.tour-spotlight {
    position: fixed;
    z-index: 200;
    border-radius: var(--r);
    box-shadow: 0 0 0 9999px rgba(10, 15, 36, .65), 0 0 0 3px var(--bronze);
    pointer-events: none;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
@keyframes fade-in { from {opacity:0} to {opacity:1} }
@keyframes tour-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Document name link (filename in documents table is a real link)
   ─────────────────────────────────────────────────────────────────────────── */
.doc-name-link {
    color: var(--ink) !important;
    text-decoration: none;
    transition: color .12s ease;
}
.doc-name-link:hover { color: var(--bronze-700) !important; text-decoration: underline; }
.doc-name-link strong { font-weight: 600; }
[data-theme="dark"] .doc-name-link { color: var(--cream) !important; }
[data-theme="dark"] .doc-name-link:hover { color: var(--bronze-200) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   Document upload form (collapsed, revealed via [data-toggle])
   ─────────────────────────────────────────────────────────────────────────── */
.doc-upload-form {
    background: var(--bg-warm);
    border: 1px dashed var(--bronze-200);
    border-radius: var(--r);
    padding: 1.1rem 1.25rem;
    margin: 1rem 0 1.25rem;
}
.doc-upload-form input[type="file"] {
    background: var(--white);
    cursor: pointer;
}
body.modal-open { overflow: hidden; }

/* ───────────────────────────────────────────────────────────────────────────
   Document preview modal (fullscreen iframe / image overlay)
   ─────────────────────────────────────────────────────────────────────────── */
.doc-modal { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.doc-modal-backdrop { position: absolute; inset: 0; background: rgba(10,15,36,.7); backdrop-filter: blur(3px); animation: fade-in .2s ease; }
.doc-modal-card {
    position: relative;
    background: var(--white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    width: min(1400px, 100%);
    max-height: calc(100vh - 3rem);
    height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: tour-pop .25s cubic-bezier(.4,0,.2,1);
}
.doc-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.25rem;
    background: var(--navy);
    color: var(--cream);
    border-bottom: 1px solid var(--line);
}
.doc-modal-title { font-weight: 600; font-size: var(--fs-md); color: var(--white); }
.doc-modal-actions { display: flex; gap: .5rem; align-items: center; }
.doc-modal-actions .btn-ghost {
    background: rgba(255,255,255,.08);
    color: var(--cream);
    border-color: rgba(226, 197, 161, .25);
}
.doc-modal-actions .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: var(--cream); color: var(--white); }
.doc-modal-body {
    flex: 1;
    overflow: auto;
    background: #f0f1f4;
    display: flex; align-items: center; justify-content: center;
}
.doc-modal-body iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.doc-modal-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
[data-theme="dark"] .doc-modal-card { background: var(--white); }
[data-theme="dark"] .doc-modal-body { background: #050818; }

@media (max-width: 768px) {
    .doc-modal { padding: 0; }
    .doc-modal-card { max-height: 100vh; border-radius: 0; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Internal chat (per-request thread)
   ─────────────────────────────────────────────────────────────────────────── */
.messages-panel {
    display: flex; flex-direction: column;
    /* Standalone chat widget (used in pedido detail) — fluid height keeps it
       comfortable on small laptops and full on tall monitors. Inside the
       /conversas inbox this is overridden to flex:1 (already further below). */
    height: clamp(420px, 55vh, 720px);
    background: var(--white);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.msg-head {
    padding: .85rem 1.1rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
    color: var(--cream);
    border-bottom: 1px solid var(--line);
    display: flex; flex-direction: column; gap: .15rem;
}
.msg-head .msg-title {
    display: flex; align-items: center; gap: .55rem;
    font-weight: 600;
    color: var(--white);
    font-size: var(--fs-base);
}
.msg-head .msg-title svg { color: var(--cream); }
.msg-head .muted { color: rgba(226,197,161,.65) !important; }
.msg-unread-pill {
    background: var(--bronze);
    color: var(--white);
    padding: .15rem .55rem;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: auto;
}

.msg-thread {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    background: var(--bg-warm);
    display: flex; flex-direction: column;
    gap: .55rem;
}
.msg-empty {
    margin: auto;
    text-align: center;
    color: var(--muted);
}
.msg-empty svg { color: var(--bronze-200); margin-bottom: .5rem; }
.msg-empty p { margin: 0; font-size: var(--fs-sm); }

.msg-date-sep {
    align-self: center;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    padding: .15rem .65rem;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin: .25rem 0;
}

.msg-bubble {
    max-width: 78%;
    padding: .55rem .85rem .45rem;
    border-radius: 14px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    box-shadow: var(--shadow-xs);
}
.msg-bubble.own {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
    color: var(--white);
    border-bottom-right-radius: 4px;
}
.msg-bubble.own .msg-sender { color: var(--cream); }
.msg-bubble.other {
    align-self: flex-start;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
}
.msg-sender {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .85;
    margin-bottom: .15rem;
}
.msg-bubble.other .msg-sender { color: var(--bronze-700); }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg-meta { font-size: 10px; opacity: .65; margin-top: .25rem; text-align: right; }

/* ── Reply / quote ─────────────────────────────────────────────────────── */
.msg-reply-quote {
    display: block;
    background: rgba(255,255,255,.15);
    border-left: 3px solid var(--cream);
    padding: .35rem .55rem;
    border-radius: 4px;
    margin-bottom: .35rem;
    font-size: var(--fs-xs);
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    line-height: 1.35;
}
.msg-bubble.other .msg-reply-quote { background: var(--bronze-50); border-left-color: var(--bronze); }
.msg-reply-author { font-weight: 600; opacity: .9; display: block; }
.msg-reply-preview { opacity: .75; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Internal note badge ───────────────────────────────────────────────── */
.msg-internal-badge {
    display: inline-block;
    background: var(--bronze);
    color: var(--white);
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 99px;
    letter-spacing: .08em;
    font-weight: 700;
    margin-left: .35rem;
    vertical-align: middle;
}
.msg-bubble.internal {
    background: linear-gradient(135deg, #f5e9d4 0%, var(--bronze-100) 100%) !important;
    color: var(--ink) !important;
    border: 1px dashed var(--bronze) !important;
}
.msg-bubble.internal.own { color: var(--ink) !important; }
.msg-bubble.internal .msg-sender { color: var(--bronze-700) !important; }
.msg-bubble.internal .msg-meta   { color: var(--bronze-700) !important; opacity: .8; }

/* ── Attachments inside bubble ─────────────────────────────────────────── */
.msg-attachments {
    display: flex; flex-direction: column; gap: .4rem;
    margin-bottom: .35rem;
}
.msg-attach-image {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    max-width: 280px;
    background: var(--bg-warm);
    line-height: 0;
}
.msg-attach-image img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.msg-attach-file {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .7rem;
    background: rgba(255,255,255,.12);
    border-radius: 8px;
    text-decoration: none !important;
    color: inherit;
    transition: background .12s;
}
.msg-attach-file:hover { background: rgba(255,255,255,.2); }
.msg-bubble.other .msg-attach-file { background: var(--bg-warm); border: 1px solid var(--line); }
.msg-bubble.other .msg-attach-file:hover { background: var(--white); border-color: var(--bronze-200); }
.msg-attach-meta { min-width: 0; flex: 1; }
.msg-attach-name { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-attach-size { font-size: 11px; opacity: .7; }
.msg-attach-file svg { flex-shrink: 0; opacity: .85; }

/* ── Read receipts ─────────────────────────────────────────────────────── */
.msg-receipt { font-size: 11px; opacity: .55; letter-spacing: -1px; }
.msg-receipt.read { color: #6dd5ff; opacity: 1; }
.msg-bubble.other .msg-receipt { display: none; }

/* ── Hover actions on bubble ───────────────────────────────────────────── */
.msg-bubble { position: relative; }
.msg-actions {
    position: absolute;
    top: -10px; right: 8px;
    display: none;
    gap: 2px;
    padding: 2px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 99px;
    box-shadow: var(--shadow-sm);
}
.msg-bubble.own .msg-actions { right: auto; left: 8px; }
.msg-bubble:hover .msg-actions { display: flex; }
.msg-action {
    background: transparent;
    border: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    display: grid; place-items: center;
    transition: background .12s, color .12s;
}
.msg-action:hover { background: var(--bronze-50); color: var(--bronze-700); }

/* Deleted bubble */
.msg-bubble.deleted .msg-body em { font-style: italic; }
.msg-bubble.deleted .msg-attachments { display: none; }

/* ── Reply context above compose ───────────────────────────────────────── */
.msg-reply-context {
    border-top: 1px solid var(--line);
    background: var(--bg-warm);
    padding: .5rem .85rem;
}
.msg-reply-context-inner {
    display: flex; align-items: flex-start; gap: .6rem;
    border-left: 3px solid var(--bronze);
    padding-left: .65rem;
}
.msg-reply-context-text { flex: 1; min-width: 0; font-size: var(--fs-xs); }
.msg-reply-context-author { font-weight: 600; color: var(--bronze-700); }
.msg-reply-context-preview { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-reply-cancel {
    background: transparent; border: none; color: var(--muted);
    font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.msg-reply-cancel:hover { color: var(--danger); }

/* ── Pending attachments preview (chips) ───────────────────────────────── */
.msg-attach-pending {
    display: flex; flex-wrap: wrap; gap: .35rem;
    padding: .5rem .85rem;
    border-top: 1px solid var(--line);
    background: var(--bg-warm);
}
.msg-attach-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: .25rem .65rem .25rem .35rem;
    font-size: var(--fs-xs);
    max-width: 280px;
}
.msg-attach-chip-thumb {
    width: 22px; height: 22px;
    background: var(--bronze-50);
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--bronze-700);
    overflow: hidden;
    flex-shrink: 0;
}
.msg-attach-chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.msg-attach-chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-attach-chip-remove {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1;
}
.msg-attach-chip-remove:hover { color: var(--danger); }
.msg-attach-chip.uploading { opacity: .6; }

/* ── Drag-drop overlay ─────────────────────────────────────────────────── */
.msg-drop-overlay {
    position: absolute; inset: 0;
    background: rgba(24, 36, 83, .75);
    color: var(--cream);
    z-index: 5;
    display: none;
    align-items: center; justify-content: center;
    pointer-events: none;
    text-align: center;
    border-radius: var(--r-lg);
}
.messages-panel.drag-over .msg-drop-overlay { display: flex; }
.msg-drop-overlay-inner { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.msg-drop-overlay-inner svg { color: var(--cream); }
.messages-panel { position: relative; }

/* ── Compose extras: attach button + internal toggle ───────────────────── */
.msg-attach-btn {
    background: transparent;
    border: 1px solid var(--line);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--muted);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: border-color .12s, color .12s;
}
.msg-attach-btn:hover { border-color: var(--bronze); color: var(--bronze-700); }

.msg-internal-toggle {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: var(--fs-xs);
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    padding: .35rem .55rem;
    border-radius: var(--r);
    transition: background .12s, color .12s;
    flex-shrink: 0;
    white-space: nowrap;
}
.msg-internal-toggle input { margin: 0; }
.msg-internal-toggle:has(input:checked) { background: var(--bronze-100); color: var(--bronze-700); font-weight: 600; }

.msg-compose {
    display: flex; gap: .5rem;
    padding: .7rem .85rem;
    border-top: 1px solid var(--line);
    background: var(--white);
    align-items: flex-end;
}
.msg-compose textarea {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .6rem .85rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    resize: none;
    background: var(--bg-warm);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.msg-compose textarea:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 3px var(--bronze-100);
    background: var(--white);
}
.msg-send {
    padding: .6rem .85rem;
    border-radius: var(--r);
    flex-shrink: 0;
}
.msg-send svg { display: block; }

/* ── Conversations inbox (split pane) ──────────────────────────────────── */
.conversations-shell {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 1.25rem;
    /* Fluid height: never shorter than 540 px (chat needs breathing room),
       grows with the viewport but capped at 900 px so monitors don't feel empty. */
    min-height: clamp(540px, 75vh, 900px);
    height: clamp(540px, 75vh, 900px);
}
.conv-list {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xs);
}
.conv-list-head {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-warm);
}
.conv-filter, .conv-toggle {
    flex: 1; min-width: 0;
    font-size: var(--fs-xs);
}
.conv-filter {
    padding: .4rem .55rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--ink);
    font-family: inherit;
}
.conv-toggle {
    display: flex; align-items: center; gap: .35rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    padding: .4rem .55rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.conv-toggle:has(input:checked) { background: var(--bronze-50); border-color: var(--bronze-200); color: var(--bronze-700); font-weight: 600; }
.conv-toggle input { margin: 0; }

.conv-items {
    overflow-y: auto;
    flex: 1;
}
.conv-item {
    display: block;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none !important;
    color: inherit;
    transition: background .12s, padding-left .12s;
    border-left: 3px solid transparent;
}
.conv-item:hover { background: var(--bg-warm); }
.conv-item.active {
    background: var(--bronze-50);
    border-left-color: var(--bronze);
}
.conv-name-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    margin-bottom: .15rem;
}
.conv-name {
    font-weight: 600;
    color: var(--navy);
    font-size: var(--fs-base);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.conv-time {
    font-size: var(--fs-xs);
    color: var(--muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.conv-service {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-bottom: .35rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-service .ref { font-family: 'JetBrains Mono', monospace; color: var(--bronze-700); font-size: 11px; }
.conv-preview-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
}
.conv-preview {
    font-size: var(--fs-sm);
    color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}

.conv-thread {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.conv-thread-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem;
    flex-shrink: 0;
}
.conv-thread-head .ref { font-family: 'JetBrains Mono', monospace; color: var(--bronze-700); font-size: 11px; }
.conv-thread .messages-panel {
    flex: 1;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.conv-empty {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}

[data-theme="dark"] .conv-list, [data-theme="dark"] .conv-thread {
    background: var(--white);
}
[data-theme="dark"] .conv-list-head { background: var(--bg-warm); }
[data-theme="dark"] .conv-item.active { background: var(--bronze-50); }

@media (max-width: 980px) {
    .conversations-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
    .conv-list { max-height: 360px; }
    .conv-thread { min-height: 500px; }
}

/* Bubble flash highlight (when scroll-to from reply quote) */
.msg-bubble-flash { animation: bubble-flash 1.2s ease; }
@keyframes bubble-flash {
    0%, 100% { box-shadow: var(--shadow-xs); }
    20%, 70% { box-shadow: 0 0 0 4px var(--bronze); }
}

/* Conversation kind tabs (top of inbox) */
.conv-kind-tabs {
    display: inline-flex;
    gap: .25rem;
    background: var(--bg-warm);
    padding: .3rem;
    border-radius: 10px;
    border: 1px solid var(--line);
}
.conv-kind-tab {
    padding: .42rem .85rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--muted);
    border-radius: 7px;
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1;
}
.conv-kind-tab:hover { color: var(--navy); background: rgba(255,255,255,.6); }
.conv-kind-tab.active {
    background: var(--white);
    color: var(--navy);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}
[data-theme="dark"] .conv-kind-tab.active { background: var(--navy); color: var(--cream); }
[data-theme="dark"] .conv-kind-tab:hover { background: rgba(255,255,255,.05); color: var(--cream); }

/* Tiny icon prefix for each conversation kind (📋 / 👥 / 💬) */
.conv-kind-icon { display: inline-block; font-size: .9em; margin-right: .15rem; opacity: .85; }

/* New conversation modal — tabs */
.conv-modal-tabs {
    display: flex;
    gap: .25rem;
    background: var(--bg-warm);
    padding: .3rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    margin-bottom: 1.2rem;
}
.conv-modal-tab {
    flex: 1;
    padding: .55rem .9rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    border-radius: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.conv-modal-tab:hover { color: var(--navy); }
.conv-modal-tab.active {
    background: var(--white);
    color: var(--navy);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}
[data-theme="dark"] .conv-modal-tab.active { background: var(--navy); color: var(--cream); }
.conv-modal-pane { display: none; }
.conv-modal-pane.active { display: block; }

/* Bank transfer details panel (faturas) */
.bank-details {
    background: var(--bg-warm);
    border: 1px solid var(--bronze-200);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: .5rem 0;
}
.bank-details h4 { font-size: .95rem; font-weight: 600; }
.bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem 1.5rem;
}
.bank-grid > div { display: flex; flex-direction: column; gap: .15rem; line-height: 1.4; }
.bank-grid .muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.bank-grid strong { font-size: .92rem; color: var(--navy); }
[data-theme="dark"] .bank-grid strong { color: var(--cream); }

/* Mark-paid form row */
.bank-mark-paid {
    background: var(--bg-warm);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: .25rem 0;
}

/* ───────────────── Autosave indicator ──────────────── */
.autosave-indicator {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 500;
    padding: .25rem .65rem;
    border-radius: 999px;
    transition: background .2s, color .2s;
    line-height: 1.2;
}
.autosave-indicator.is-idle    { background: var(--bg-warm); color: var(--muted); }
.autosave-indicator.is-saving  { background: rgba(99,102,241,.1); color: #6366f1; }
.autosave-indicator.is-saved   { background: rgba(34,197,94,.12); color: #16a34a; }
.autosave-indicator.is-error   { background: rgba(239,68,68,.12); color: #dc2626; }

/* ───────────────── Channel-card radios (criar-pedido) ──────────────── */
.channel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .85rem .5rem;
    border: 2px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
    text-align: center;
}
.channel-card:hover { border-color: var(--bronze-200); background: var(--bg-warm); }
.channel-card input { position: absolute; opacity: 0; pointer-events: none; }
.channel-card:has(input:checked) {
    border-color: var(--bronze);
    background: var(--bronze-50);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
.channel-icon { font-size: 1.5rem; line-height: 1; }
.channel-label { font-size: .82rem; font-weight: 500; color: var(--navy); }
[data-theme="dark"] .channel-card:has(input:checked) { background: rgba(163,128,80,.18); color: var(--cream); }

/* ───────────────── Dashboard ──────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kpi-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: transform .2s, box-shadow .2s;
}
.kpi-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.kpi-card.kpi-accent {
    background: linear-gradient(135deg, var(--navy), #2a3a7a);
    color: var(--white);
    border-color: transparent;
}
.kpi-card.kpi-accent .kpi-meta { color: rgba(255,255,255,.7); }
.kpi-label { font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kpi-card.kpi-accent .kpi-label { color: rgba(255,255,255,.65); }
.kpi-value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; margin: .25rem 0 .35rem; color: var(--navy); }
.kpi-card.kpi-accent .kpi-value { color: var(--white); }
.kpi-meta { font-size: .78rem; color: var(--muted); }
[data-theme="dark"] .kpi-card { background: var(--navy); }
[data-theme="dark"] .kpi-value { color: var(--cream); }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-chart { width: 100%; height: 200px; color: var(--muted); }

/* age buckets (open requests) */
.age-bars { display: flex; flex-direction: column; gap: .55rem; }
.age-row { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: .8rem; font-size: .82rem; }
.age-row-bar { height: 8px; background: var(--bg-warm); border-radius: 999px; overflow: hidden; }
.age-row-bar > div { height: 100%; border-radius: inherit; transition: width .4s; }
.age-row-count { text-align: right; font-weight: 600; color: var(--navy); }
[data-theme="dark"] .age-row-count { color: var(--cream); }

/* channel breakdown */
.channel-stats { display: flex; flex-direction: column; gap: .7rem; }
.channel-stat { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: .75rem; }
.channel-stat-icon { font-size: 1.2rem; text-align: center; }
.channel-stat-label { font-size: .82rem; font-weight: 500; margin-bottom: .2rem; }
.channel-stat-bar { height: 6px; background: var(--bg-warm); border-radius: 999px; overflow: hidden; }
.channel-stat-bar > div { height: 100%; background: var(--bronze); border-radius: inherit; transition: width .4s; }
.channel-stat-count { font-size: .82rem; }
.channel-stat-count strong { font-weight: 600; }
.channel-stat-count .muted { font-size: .72rem; margin-left: .25rem; }

/* top services bar list */
.topsvc-list { display: flex; flex-direction: column; gap: .5rem; }
.topsvc-row { display: grid; grid-template-columns: 1fr 100px 30px; align-items: center; gap: .75rem; font-size: .82rem; }
.topsvc-name { color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .topsvc-name { color: var(--cream); }
.topsvc-bar { height: 6px; background: var(--bg-warm); border-radius: 999px; overflow: hidden; }
.topsvc-bar > div { height: 100%; background: linear-gradient(90deg, var(--bronze), #d4a574); border-radius: inherit; }
.topsvc-count { text-align: right; }

/* status list (donut substitute) */
.status-list { display: flex; flex-direction: column; gap: .55rem; }
.status-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: .75rem; font-size: .85rem; }
.status-row-lbl { color: var(--navy); }
[data-theme="dark"] .status-row-lbl { color: var(--cream); }

/* ───────────────── Kanban ──────────────── */
.kanban-myday {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--navy), #2a3a7a);
    color: var(--white);
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.myday-eyebrow { font-size: .82rem; opacity: .75; display: block; margin-bottom: .15rem; }
.myday-greet h2 { color: var(--white); font-size: 1.4rem; margin: 0; }
.myday-stats { display: flex; gap: .6rem; flex-wrap: wrap; }
.myday-stat {
    background: rgba(255,255,255,.1);
    border-radius: 10px;
    padding: .6rem 1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: background .15s, transform .15s;
    min-width: 90px;
}
.myday-stat:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.myday-stat.active { background: var(--bronze); }
.myday-stat.attention { background: rgba(245,158,11,.25); }
.myday-stat.danger { background: rgba(239,68,68,.3); }
.myday-stat-num { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.myday-stat-lbl { display: block; font-size: .7rem; opacity: .8; margin-top: .25rem; letter-spacing: .02em; }

.kanban-toolbar { margin-bottom: 1rem; }
.kanban-filters {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .55rem .7rem;
    box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .kanban-filters { background: var(--navy); }
.kanban-tabs {
    display: inline-flex;
    gap: .15rem;
    background: var(--bg-warm);
    padding: .2rem;
    border-radius: 8px;
}
.kanban-tab {
    padding: .35rem .75rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.kanban-tab:hover { color: var(--navy); }
.kanban-tab.active {
    background: var(--white);
    color: var(--navy);
    box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .kanban-tab.active { background: var(--navy); color: var(--cream); }
.kanban-search,
.kanban-select {
    padding: .4rem .6rem;
    font-size: .82rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--white);
    color: var(--navy);
}
[data-theme="dark"] .kanban-search,
[data-theme="dark"] .kanban-select { background: var(--navy); color: var(--cream); border-color: rgba(255,255,255,.1); }
.kanban-search { min-width: 180px; }
.kanban-search:focus, .kanban-select:focus { outline: none; border-color: var(--bronze); }

.kanban-board {
    display: grid;
    /* Default fluid columns — used to be 6 status columns. Now we use the
       .kanban-board-3 modifier for the simplified three-group layout, but
       this base is kept for backward compat / future modes. */
    grid-template-columns: repeat(6, clamp(240px, 17vw, 320px));
    gap: clamp(.5rem, 1vw, 1rem);
    overflow-x: auto;
    padding-bottom: 1rem;
    align-items: flex-start;
    scroll-snap-type: x proximity;
    scroll-padding: 0 .5rem;
    overscroll-behavior-x: contain;
}
/* Three-column simplified layout — Pendente / Em revisão / Submetido.
   Columns expand to fill the viewport: no horizontal scroll on any
   reasonable screen, much more breathing room per card. */
.kanban-board.kanban-board-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
}
.kanban-col { scroll-snap-align: start; }

/* Sub-status tag inside each card (AT / AIMA / IRN / Aguarda docs) */
.kanban-card-sub {
    display: inline-flex;
    align-items: center;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    flex-shrink: 0;
}

.kanban-col {
    background: var(--bg-warm);
    border-radius: 12px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}
.kanban-col-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .9rem;
    border-radius: 12px 12px 0 0;
    background: var(--white);
}
[data-theme="dark"] .kanban-col-head { background: var(--navy); }
.kanban-col-icon { font-size: 1.05rem; }
.kanban-col-title { font-size: .82rem; font-weight: 600; color: var(--navy); flex: 1; }
[data-theme="dark"] .kanban-col-title { color: var(--cream); }
.kanban-col-count {
    background: var(--bronze-50);
    color: var(--bronze-700);
    border-radius: 999px;
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}
[data-theme="dark"] .kanban-col-count { background: rgba(163,128,80,.2); }

.kanban-col-body {
    flex: 1;
    padding: .55rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    transition: background .15s;
}
.kanban-col-body.drop-target { background: rgba(163,128,80,.1); border-radius: 0 0 12px 12px; }

.kanban-empty {
    text-align: center;
    padding: 2rem 0.5rem;
    font-size: .78rem;
    color: var(--muted);
    font-style: italic;
}

.kanban-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: .6rem .7rem;
    cursor: grab;
    transition: box-shadow .15s, transform .15s, opacity .15s;
    box-shadow: var(--shadow-xs);
    user-select: none;
}
.kanban-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .5; cursor: grabbing; }
.kanban-card.priority-urgent { border-left: 3px solid #ef4444; }
.kanban-card.priority-high   { border-left: 3px solid #f97316; }
.kanban-card.overdue { background: rgba(239,68,68,.04); }
.kanban-card.due-today { background: rgba(245,158,11,.06); }
[data-theme="dark"] .kanban-card { background: var(--navy); border-color: rgba(255,255,255,.08); }

.kanban-card-head { display: flex; align-items: center; gap: .35rem; margin-bottom: .25rem; }
.kanban-card-ref { font-size: .72rem; font-family: 'JetBrains Mono', monospace; color: var(--bronze-700); flex: 1; }
.kanban-card-priority { font-size: .82rem; }
.kanban-card-channel { font-size: .82rem; opacity: .8; }

.kanban-card-client {
    font-size: .88rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
    margin-bottom: .15rem;
}
[data-theme="dark"] .kanban-card-client { color: var(--cream); }
.kanban-card-service { font-size: .78rem; color: var(--muted); margin-bottom: .35rem; }
.kanban-card-meta { color: var(--muted); margin-bottom: .35rem; }

.kanban-card-foot {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--line);
    font-size: .72rem;
}
.kanban-card-partner {
    color: var(--bronze-700);
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kanban-card-due {
    color: var(--muted);
    background: var(--bg-warm);
    padding: .1rem .4rem;
    border-radius: 999px;
}
.kanban-card-due.today { background: rgba(245,158,11,.15); color: #b45309; font-weight: 600; }
.kanban-card-due.overdue { background: rgba(239,68,68,.15); color: #b91c1c; font-weight: 600; }

.kanban-card-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    margin-left: auto;
    flex-shrink: 0;
}
.kanban-card-avatar.unassigned { background: var(--bg-warm); color: var(--muted); border: 1px dashed var(--line); }

/* ───────────────── Archive UI ──────────────── */
/* Archive toggle pills (above pedidos table) */
.archive-toggle-row {
    display: inline-flex;
    gap: .25rem;
    background: var(--bg-warm);
    padding: .25rem;
    border-radius: 9px;
    border: 1px solid var(--line);
    margin-bottom: 1rem;
}
.archive-pill {
    padding: .35rem .85rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.archive-pill:hover { color: var(--navy); }
.archive-pill.active {
    background: var(--white);
    color: var(--navy);
    box-shadow: var(--shadow-xs);
    font-weight: 600;
}
[data-theme="dark"] .archive-pill.active { background: var(--navy); color: var(--cream); }

/* Banner across the top of the hero card when a request is archived */
.hero-archived {
    background: linear-gradient(135deg, #4a5568, #2d3748);
}
.hero-archived h1, .hero-archived .hero-eyebrow strong { opacity: .9; }
.archive-banner {
    background: rgba(255,255,255,.12);
    color: var(--white);
    padding: .55rem 1rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 500;
    margin: 0 0 .9rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* CTT tracking codes section */
.tracking-add-form {
    background: var(--bg-warm);
    border: 1px dashed var(--bronze-200);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
[data-theme="dark"] .tracking-add-form { background: rgba(163,128,80,.06); }
.tracking-table .tracking-code-link {
    color: var(--bronze-700);
    text-decoration: none;
    transition: color .15s;
}
.tracking-table .tracking-code-link:hover { color: var(--bronze); text-decoration: underline; }
.tracking-table tbody tr:hover { background: var(--bg-warm); }
[data-theme="dark"] .tracking-table tbody tr:hover { background: rgba(255,255,255,.03); }

/* Conversations list — archived entries dim out */
.conv-item.archived {
    opacity: .55;
}
.conv-item.archived:hover { opacity: .85; }
.conv-item.archived.active { opacity: 1; }

/* ───────────────── Compact info-bar (admin pedido detail) ──────────────── */
/* Shows key operational fields at a glance so the admin doesn't need to
   open the edit card to scan a case. The "✎ Editar dados" button reveals
   the full form below it. */
.info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
[data-theme="dark"] .info-bar { background: var(--navy); border-color: rgba(255,255,255,.08); }
.info-bar-cells {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.info-bar-cell {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.info-bar-cell-wide {
    flex: 1 1 220px;
    min-width: 0;
}
.info-bar-lbl {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    line-height: 1.1;
}
.info-bar-cell strong {
    font-size: .92rem;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.25;
}
[data-theme="dark"] .info-bar-cell strong { color: var(--cream); }
.info-bar-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    display: inline-block;
}
.info-bar-edit {
    flex-shrink: 0;
    padding: .55rem 1rem;
    font-size: .82rem;
}

/* Smooth reveal for the edit card when toggled */
#admin-edit-card[hidden] { display: none; }
#admin-edit-card:not([hidden]) {
    animation: edit-card-in .25s cubic-bezier(.4, 0, .2, 1);
}
@keyframes edit-card-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────── Notification preferences (perfil) ──────────────── */
.prefs-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.4rem 1.5rem;
    background: var(--white);
}
.prefs-fieldset legend {
    padding: 0 .55rem;
    font-weight: 600;
    color: var(--navy);
    font-size: .92rem;
    background: var(--white);
}
[data-theme="dark"] .prefs-fieldset { background: var(--navy); }
[data-theme="dark"] .prefs-fieldset legend { background: var(--navy); color: var(--cream); }

/* "When" — three radio cards side by side */
.prefs-radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
}
.prefs-radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .9rem 1rem;
    border: 2px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}
.prefs-radio-card:hover { border-color: var(--bronze-200); background: var(--bg-warm); }
.prefs-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.prefs-radio-card.active,
.prefs-radio-card:has(input:checked) {
    border-color: var(--bronze);
    background: var(--bronze-50);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
[data-theme="dark"] .prefs-radio-card.active,
[data-theme="dark"] .prefs-radio-card:has(input:checked) { background: rgba(163,128,80,.18); }
.prefs-radio-title { font-weight: 600; color: var(--navy); font-size: .92rem; }
[data-theme="dark"] .prefs-radio-title { color: var(--cream); }
.prefs-radio-desc { font-size: .78rem; color: var(--muted); line-height: 1.4; }

/* "About what" — list of event toggles with rich rows */
.prefs-events {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.prefs-event {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem .95rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.prefs-event:hover { border-color: var(--bronze-200); background: var(--bg-warm); }
.prefs-event input { position: absolute; opacity: 0; pointer-events: none; }
.prefs-event.active,
.prefs-event:has(input:checked) {
    border-color: var(--bronze);
    background: var(--bronze-50);
}
[data-theme="dark"] .prefs-event.active,
[data-theme="dark"] .prefs-event:has(input:checked) { background: rgba(163,128,80,.15); }
.prefs-event-icon { font-size: 1.4rem; flex-shrink: 0; }
.prefs-event-body { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.prefs-event-title { font-weight: 600; color: var(--navy); font-size: .9rem; }
[data-theme="dark"] .prefs-event-title { color: var(--cream); }
.prefs-event-desc { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.prefs-event-check {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: grid; place-items: center;
    color: transparent;
    font-size: .85rem;
    font-weight: 700;
    transition: all .15s;
}
.prefs-event.active .prefs-event-check,
.prefs-event:has(input:checked) .prefs-event-check {
    background: var(--bronze);
    border-color: var(--bronze);
    color: var(--white);
}

/* ───────────────── Extra docs (novo-pedido) ──────────────── */
.extra-doc-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 32px;
    gap: .55rem;
    align-items: center;
    margin-bottom: .55rem;
}
.extra-doc-row input[type="text"],
.extra-doc-row input[type="file"] {
    padding: .5rem .65rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: .85rem;
}
[data-theme="dark"] .extra-doc-row input[type="text"],
[data-theme="dark"] .extra-doc-row input[type="file"] {
    background: var(--navy); color: var(--cream); border-color: rgba(255,255,255,.1);
}
.extra-doc-remove {
    width: 32px; height: 32px;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
}
.extra-doc-remove:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
@media (max-width: 720px) {
    .extra-doc-row { grid-template-columns: 1fr; gap: .35rem; }
    .extra-doc-remove { width: auto; padding: .35rem .9rem; border-radius: 6px; }
}

/* List badge for unread messages */
.unread-msg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--bronze);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-left: .35rem;
    vertical-align: middle;
}

[data-theme="dark"] .messages-panel { background: var(--white); }
[data-theme="dark"] .msg-thread     { background: #050818; }
[data-theme="dark"] .msg-bubble.other { background: var(--bg-warm); color: var(--cream); border-color: var(--line); }
[data-theme="dark"] .msg-date-sep   { background: var(--white); }

@media (max-width: 768px) {
    .messages-panel { height: 480px; }
    .msg-bubble { max-width: 88%; }
}

/* ───────────────── Process timeline (etapas) ──────────────── */
.proc-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 1rem 1rem .8rem;
    background: var(--bg-warm);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow-x: auto;
}
.proc-step {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
}
.proc-step:last-child { flex: 0 0 auto; }
.proc-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
    background: var(--white); color: var(--muted);
    border: 1.5px solid var(--line);
    flex-shrink: 0;
    transition: all .2s ease;
}
.proc-step.done .proc-dot {
    background: var(--success); color: var(--white); border-color: var(--success);
}
.proc-step.current .proc-dot {
    background: var(--bronze); color: var(--white); border-color: var(--bronze);
    box-shadow: 0 0 0 4px var(--bronze-50);
    animation: proc-pulse 2s ease-in-out infinite;
}
@keyframes proc-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--bronze-50); }
    50%      { box-shadow: 0 0 0 8px var(--bronze-100); }
}
.proc-label {
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink-soft);
    margin-left: .5rem;
    white-space: nowrap;
}
.proc-step.current .proc-label { color: var(--bronze-700); font-weight: 600; }
.proc-step.pending .proc-label { color: var(--muted); }
.proc-line {
    flex: 1;
    height: 2px;
    background: var(--line);
    margin: 0 .6rem;
    min-width: 1rem;
}
.proc-line.done { background: var(--success); }
.proc-cancelled {
    margin-top: .5rem;
    padding: .5rem 1rem;
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--r-sm);
    font-size: .85rem;
}
[data-theme="dark"] .proc-timeline { background: var(--navy); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .proc-dot      { background: var(--navy-900); color: var(--cream); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .proc-label    { color: var(--cream); }
[data-theme="dark"] .proc-step.pending .proc-label { color: var(--muted-soft); }

@media (max-width: 720px) {
    .proc-timeline { padding: .8rem .6rem; }
    .proc-label { font-size: .72rem; max-width: 90px; white-space: normal; line-height: 1.2; }
    .proc-line { min-width: .5rem; margin: 0 .25rem; }
}

/* ───────────────── Document batch upload (drag-drop multi) ──────────────── */
.docbatch-shell {
    margin-top: .8rem;
    padding: 1rem;
    background: var(--bg-warm);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.docbatch-shell[hidden] { display: none; }

.docbatch-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 1.2rem 1rem;
    border: 2px dashed var(--bronze-200);
    border-radius: var(--r);
    background: var(--white);
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.docbatch-drop:hover {
    border-color: var(--bronze);
    background: var(--bronze-50);
    color: var(--ink-soft);
}
.docbatch-drop.drag-over {
    border-color: var(--navy);
    background: var(--navy-50);
    color: var(--navy);
}
.docbatch-drop.drag-over .docbatch-drop-inner svg { color: var(--navy); transform: scale(1.05); }

.docbatch-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    pointer-events: none;
}
.docbatch-drop-inner button { pointer-events: auto; }
.docbatch-drop-inner > div:first-of-type { pointer-events: auto; }
.docbatch-drop-inner svg {
    color: var(--bronze);
    transition: transform .15s ease, color .15s ease;
}

.docbatch-pending {
    margin-top: 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.docbatch-pending[hidden] { display: none; }

.docbatch-pending-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    background: var(--bg-warm);
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}

.docbatch-rows {
    display: flex;
    flex-direction: column;
    max-height: 480px;
    overflow-y: auto;
}

.docbatch-row {
    display: grid;
    grid-template-columns: 56px 1fr 32px;
    gap: .8rem;
    align-items: center;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    transition: background .15s ease, opacity .25s ease;
}
.docbatch-row:last-child { border-bottom: none; }
.docbatch-row.uploading { background: var(--navy-50); }
.docbatch-row.done      { background: var(--success-bg); opacity: .85; }
.docbatch-row.error     { background: var(--danger-bg); }

.docbatch-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--line-soft);
    border: 1px solid var(--line);
}
.docbatch-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--muted);
}

.docbatch-meta { min-width: 0; }
.docbatch-filename {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .35rem;
    word-break: break-word;
    line-height: 1.3;
}
.docbatch-filename .muted {
    font-weight: 400;
    font-size: .82rem;
}

.docbatch-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.docbatch-fields input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
    padding: .35rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: .82rem;
}
.docbatch-fields input[type="text"]:focus {
    border-color: var(--bronze);
    outline: none;
    box-shadow: 0 0 0 3px var(--bronze-50);
}

.docbatch-vis {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.docbatch-vis input { margin: 0; cursor: pointer; }

.docbatch-status {
    display: inline-block;
    margin-left: .4rem;
    padding: .12rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 999px;
    vertical-align: middle;
}
.docbatch-status.uploading { background: var(--info-bg);    color: var(--info); }
.docbatch-status.done      { background: var(--success-bg); color: var(--success); }
.docbatch-status.error     { background: var(--danger-bg);  color: var(--danger); cursor: help; }

.docbatch-remove {
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
}
.docbatch-remove:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-bg);
}
.docbatch-row.uploading .docbatch-remove,
.docbatch-row.done      .docbatch-remove { opacity: .35; pointer-events: none; }

[data-theme="dark"] .docbatch-shell        { background: var(--navy-900); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .docbatch-drop         { background: var(--navy); color: var(--cream); border-color: var(--bronze-700); }
[data-theme="dark"] .docbatch-drop:hover   { background: var(--navy-700); border-color: var(--bronze); }
[data-theme="dark"] .docbatch-pending      { background: var(--navy); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .docbatch-pending-head { background: var(--navy-900); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .docbatch-row          { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .docbatch-row.uploading { background: rgba(53,71,144,.25); }
[data-theme="dark"] .docbatch-row.done      { background: rgba(26,127,77,.18); }
[data-theme="dark"] .docbatch-row.error     { background: rgba(179,38,30,.18); }
[data-theme="dark"] .docbatch-filename     { color: var(--cream); }
[data-theme="dark"] .docbatch-fields input[type="text"] {
    background: var(--navy-900); color: var(--cream); border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .docbatch-thumb        { background: var(--navy-900); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .docbatch-remove       { background: var(--navy); color: var(--cream); border-color: rgba(255,255,255,.12); }

@media (max-width: 720px) {
    .docbatch-row { grid-template-columns: 48px 1fr 28px; gap: .55rem; padding: .6rem .7rem; }
    .docbatch-thumb { width: 48px; height: 48px; }
    .docbatch-pending-head { flex-wrap: wrap; }
    .docbatch-pending-head > div:last-child { width: 100%; }
}

/* ───────────────── Document list (rows) ──────────────── */
.doc-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--white);
    overflow: hidden;
}
.doc-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: .9rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    transition: background .12s ease;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--bg-warm); }
.doc-row-private { background: var(--bg); }
.doc-row-private:hover { background: var(--bg-warm); }

.doc-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-warm);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 1.4rem;
    line-height: 1;
}

.doc-main { min-width: 0; }
.doc-name-link {
    display: inline-block;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    word-break: break-word;
    line-height: 1.3;
}
.doc-name-link:hover { color: var(--bronze-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.doc-sub {
    font-size: .76rem;
    color: var(--muted);
    margin-top: .1rem;
    word-break: break-word;
}
.doc-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
    font-size: .76rem;
    color: var(--muted);
    line-height: 1.4;
}
.doc-meta .badge { vertical-align: middle; }
.doc-meta-sep { opacity: .5; }

.doc-actions {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}
.doc-actions .btn.doc-act {
    padding: .35rem .7rem;
    font-size: .8rem;
    line-height: 1;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--ink-soft);
    transition: background .12s, border-color .12s, color .12s;
}
.doc-actions .btn.doc-act:hover {
    background: var(--bronze-50);
    border-color: var(--bronze);
    color: var(--bronze-700);
    text-decoration: none;
}
.doc-actions .btn.doc-act-icon {
    width: 32px;
    padding: .3rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .doc-list   { background: var(--navy); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .doc-row    { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .doc-row:hover { background: var(--navy-700); }
[data-theme="dark"] .doc-row-private { background: var(--navy-900); }
[data-theme="dark"] .doc-icon   { background: var(--navy-900); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .doc-name-link { color: var(--cream); }
[data-theme="dark"] .doc-name-link:hover { color: var(--bronze-200); }
[data-theme="dark"] .doc-actions .btn.doc-act {
    background: var(--navy-900); color: var(--cream); border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .doc-actions .btn.doc-act:hover {
    background: var(--navy-700); border-color: var(--bronze); color: var(--bronze-200);
}

@media (max-width: 720px) {
    .doc-row { grid-template-columns: 36px 1fr; gap: .65rem; padding: .65rem .8rem; }
    .doc-icon { width: 36px; height: 36px; font-size: 1.15rem; }
    .doc-actions {
        grid-column: 1 / -1;
        margin-top: .35rem;
        padding-left: calc(36px + .65rem);
    }
    .doc-actions .btn.doc-act { font-size: .78rem; padding: .3rem .6rem; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .btn, .sticky-bar, #toast-stack { display: none !important; }
    .main { padding: 0; max-width: 100%; }
    .card { border: 1px solid #ccc; box-shadow: none; }
    body { background: white; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; top: 0; left: 0;
        height: 100vh; width: 280px;
        z-index: 95;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
    }
    body.drawer-open .sidebar { transform: translateX(0); }
    .drawer-toggle { display: inline-flex; align-items: center; gap: .4rem; }
    .main { padding: 4rem 1.25rem 1.5rem; }
    .topbar { flex-direction: column; align-items: flex-start; }
    h1 { font-size: var(--fs-2xl); }
    .ro-list { grid-template-columns: 1fr; gap: 0; }
    .ro-list dt { padding-top: .8rem; }
    .hero-card { padding: 1.4rem 1.4rem; }
    .layout-detail .col-side { position: static; }
    #toast-stack { left: 1rem; right: 1rem; }
    .toast { min-width: 0; max-width: 100%; }
}