/* ═══════════════════════════════════════════════════════════
   NC Conversas · Negócio Certo — Dark & Light Theme
   ═══════════════════════════════════════════════════════════ */

/* ── Dark (default) ─────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg:       #111b21;
  --bg-chat:  #0b141a;
  --panel:    #111b21;
  --header:   #202c33;
  --out:      #005c4b;
  --in:       #202c33;
  --sys:      #182229;
  --text:     #e9edef;
  --muted:    #8696a0;
  --accent:   #00a884;
  --accent-h: #00cf9e;
  --border:   rgba(134,150,160,.14);
  --hover:    rgba(134,150,160,.08);
  --active:   #2a3942;
  --tick:     #53bdeb;
  --red:      #ef4444;
  --card:     #1e2d35;
  --card2:    #243340;
  --shadow:   rgba(0,0,0,.45);
  --chat-bg-overlay: rgba(11,20,26,.85);
}

/* ── Light ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:       #f0f2f5;
  --bg-chat:  #efeae2;
  --panel:    #ffffff;
  --header:   #008069;
  --out:      #d9fdd3;
  --in:       #ffffff;
  --sys:      #fff;
  --text:     #111b21;
  --muted:    #667781;
  --accent:   #00a884;
  --accent-h: #017561;
  --border:   rgba(0,0,0,.1);
  --hover:    rgba(0,0,0,.05);
  --active:   #d9fdd3;
  --tick:     #53bdeb;
  --red:      #dc2626;
  --card:     #ffffff;
  --card2:    #f8f9fa;
  --shadow:   rgba(0,0,0,.12);
  --chat-bg-overlay: rgba(239,234,226,.05);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; overflow: hidden; }
body { background: var(--bg); color: var(--text); }

::-webkit-scrollbar           { width: 5px; height: 5px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: rgba(134,150,160,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(134,150,160,.45); }

.hidden { display: none !important; }
button  { cursor: pointer; }
input   { outline: none; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
[data-theme="light"] .icon-btn:hover { background: rgba(0,0,0,.08); color: var(--text); }

/* Sidebar icon-btn default color */
.sidebar-header .icon-btn { color: rgba(255,255,255,.75); }
.sidebar-header .icon-btn:hover { color: #fff; background: rgba(255,255,255,.12); }
[data-theme="light"] .sidebar-header .icon-btn { color: rgba(255,255,255,.85); }

/* ═══════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════ */
.full-center {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0a0f14 0%, #111b21 55%, #0d1f2d 100%);
  position: relative; overflow: hidden;
}
.login-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.login-shape {
  position: absolute; border-radius: 50%; opacity: .07;
  animation: floatShape 8s ease-in-out infinite;
}
.login-shape.s1 { width:400px;height:400px;background:radial-gradient(circle,var(--accent),transparent 70%);top:-120px;left:-120px;animation-delay:0s; }
.login-shape.s2 { width:320px;height:320px;background:radial-gradient(circle,#1e40af,transparent 70%);bottom:-80px;right:-80px;animation-delay:-3s; }
.login-shape.s3 { width:220px;height:220px;background:radial-gradient(circle,var(--accent),transparent 70%);top:45%;right:18%;animation-delay:-5s; }
@keyframes floatShape {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-20px) scale(1.05); }
}

.login-card {
  width: 380px; position: relative; z-index: 1;
  background: rgba(32,44,51,.88);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px; padding: 40px 36px 34px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.65), 0 0 0 1px rgba(0,168,132,.1);
  animation: cardIn .3s ease;
}
@keyframes cardIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }

.login-logo { margin: 0 auto 18px; width:130px; height:78px; display:flex; align-items:center; justify-content:center; }
.login-logo img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.login-card h1 { font-size:1.35rem;font-weight:700;color:#e9edef;margin-bottom:4px;letter-spacing:.3px; }
.login-subtitle { color:#8696a0;font-size:.79rem;margin-bottom:26px;letter-spacing:.6px;text-transform:uppercase; }
.login-footer { margin-top:18px;font-size:.7rem;color:rgba(134,150,160,.45);border-top:1px solid rgba(255,255,255,.05);padding-top:12px; }

.field { text-align:left; margin-bottom:16px; }
.field label { display:block;font-size:.74rem;color:#8696a0;font-weight:600;margin-bottom:5px;letter-spacing:.4px;text-transform:uppercase; }
.field input {
  width:100%;background:rgba(0,0,0,.35);color:#e9edef;
  border:1px solid rgba(134,150,160,.2);border-radius:10px;padding:12px 14px;
  font-size:.94rem;transition:border-color .2s, box-shadow .2s;
}
.field input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,168,132,.15); }
.field input.input-error { border-color:#ff6b6b!important;animation:shake .35s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.pwd-wrap { position:relative;display:flex;align-items:center; }
.pwd-wrap input { padding-right:44px; }
.eye-btn { position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8696a0;padding:4px;display:flex;align-items:center;border-radius:5px;transition:color .15s; }
.eye-btn:hover { color:#e9edef; }

.save-pwd-row { display:flex;align-items:center;gap:9px;margin-bottom:14px;cursor:pointer;user-select:none;padding:9px 11px;background:rgba(0,168,132,.07);border:1px solid rgba(0,168,132,.14);border-radius:9px;transition:background .15s; }
.save-pwd-row:hover { background:rgba(0,168,132,.12); }
.save-pwd-row input[type="checkbox"] { width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0; }
.save-pwd-row span { font-size:.82rem;color:#8696a0; }

.btn-primary {
  width:100%;background:linear-gradient(135deg,#00a884,#008f6e);color:#0a1612;
  border:none;border-radius:10px;padding:13px;font-size:.97rem;font-weight:700;letter-spacing:.3px;
  box-shadow:0 4px 18px rgba(0,168,132,.35);transition:opacity .2s, transform .1s, box-shadow .2s;
}
.btn-primary:hover { opacity:.91;box-shadow:0 6px 22px rgba(0,168,132,.5); }
.btn-primary:active { transform:scale(.98); }
.btn-primary:disabled { opacity:.55;cursor:not-allowed; }
.login-error { margin-top:10px;min-height:18px;font-size:.82rem;color:#ff8080;display:flex;align-items:center;justify-content:center;gap:4px; }

/* ═══════════════════════════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════════════════════════ */
.app { display:grid;grid-template-columns:360px 1fr;height:100vh;overflow:hidden; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.sidebar { background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:background .25s; }

.sidebar-header { height:60px;flex-shrink:0;background:var(--header);display:flex;align-items:center;gap:10px;padding:0 12px;transition:background .25s; }
.user-avatar { width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:.74rem;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.sidebar-title { flex:1; }
.st-main { display:block;font-size:.88rem;font-weight:700;color:#fff;line-height:1.2; }
.st-sub  { display:block;font-size:.68rem;color:rgba(255,255,255,.65); }
.sidebar-actions { display:flex;gap:2px; }

.stats-pill { display:flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(0,168,132,.07);border-bottom:1px solid rgba(0,168,132,.12);font-size:.72rem;color:var(--accent);flex-shrink:0; }
.pill-sep { color:var(--muted); }

.search-bar { padding:7px 10px;flex-shrink:0;border-bottom:1px solid var(--border); }
.search-wrap { display:flex;align-items:center;gap:8px;background:var(--header);border-radius:8px;padding:0 11px; }
[data-theme="light"] .search-wrap { background:#f0f2f5; }
.search-icon { color:var(--muted);flex-shrink:0; }
#search { flex:1;background:transparent;color:var(--text);border:none;padding:9px 0;font-size:.87rem; }
#search::placeholder { color:var(--muted); }
.search-clear { background:none;border:none;color:var(--muted);padding:2px;display:flex;align-items:center; }

.contacts-list { flex:1;overflow-y:auto; }
.list-loading { padding:32px 14px;text-align:center;color:var(--muted);font-size:.87rem; }

/* Contact item */
.contact-item { display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;user-select:none; }
.contact-item:hover  { background:var(--hover); }
.contact-item.active { background:var(--active); }
.contact-av { width:49px;height:49px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0;color:#fff; }
.contact-body { flex:1;min-width:0; }
.contact-row1 { display:flex;justify-content:space-between;align-items:baseline;gap:6px; }
.contact-name { font-size:.91rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;color:var(--text); }
.contact-ts   { font-size:.7rem;color:var(--muted);flex-shrink:0; }
.contact-row2 { display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px; }
.contact-preview { font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1; }
.contact-badges { display:flex;align-items:center;gap:4px;flex-shrink:0; }
.badge-media  { font-size:.65rem;color:var(--muted); }
.badge-count  { background:var(--accent);color:#111b21;border-radius:10px;padding:1px 6px;font-size:.68rem;font-weight:700;min-width:18px;text-align:center; }

.load-more-btn { display:block;width:100%;padding:12px;text-align:center;color:var(--accent);font-size:.79rem;background:none;border:none;border-top:1px solid var(--border);transition:background .15s; }
.load-more-btn:hover { background:var(--hover); }

/* ═══════════════════════════════════════════════════════════
   RIGHT PANEL
═══════════════════════════════════════════════════════════ */
.right-panel { display:flex;flex-direction:column;overflow:hidden;background:var(--bg-chat);transition:background .25s; }

/* Empty state */
.empty-chat { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#222e35;transition:background .25s; }
[data-theme="light"] .empty-chat { background:#f8f9fa; }
.empty-logo { width:100px;height:60px;opacity:.55; }
.empty-logo img { width:100%;height:100%;object-fit:contain; }
.empty-chat h2 { font-size:1.4rem;font-weight:300;color:var(--muted); }
.empty-chat p  { color:var(--muted);font-size:.87rem; }
.empty-stats   { display:flex;gap:32px;margin-top:8px; }
.empty-stat    { text-align:center; }
.empty-stat-val{ font-size:1.9rem;font-weight:700;color:var(--accent);line-height:1.1; }
.empty-stat-lbl{ font-size:.7rem;color:var(--muted);margin-top:2px; }
.empty-note    { display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.73rem;margin-top:8px; }

/* Chat content */
.chat-content { flex:1;display:flex;flex-direction:column;overflow:hidden; }

.chat-header { height:60px;flex-shrink:0;background:var(--header);display:flex;align-items:center;justify-content:space-between;padding:0 14px;transition:background .25s; }
.chat-header-left { display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer; }
.chat-avatar { width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;color:#fff;flex-shrink:0; }
.chat-name { font-size:.93rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.chat-sub  { font-size:.72rem;color:rgba(255,255,255,.75); }
.chat-header-right { display:flex;gap:2px; }
.chat-header-right .icon-btn { color:rgba(255,255,255,.75); }
.chat-header-right .icon-btn:hover { color:#fff;background:rgba(255,255,255,.12); }

.in-chat-search { display:flex;align-items:center;gap:10px;background:var(--header);padding:8px 14px;border-bottom:1px solid var(--border);flex-shrink:0; }
.in-chat-search input { flex:1;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:7px 12px;color:var(--text);font-size:.88rem; }
.in-chat-count { font-size:.76rem;color:var(--muted);white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════
   MESSAGES AREA + CHAT BACKGROUND
═══════════════════════════════════════════════════════════ */
.messages-area {
  flex:1; overflow-y:auto;
  padding:10px 8%;
  display:flex; flex-direction:column; gap:1px;
  /* WA background with dark overlay on dark mode */
  background-image:
    linear-gradient(var(--chat-bg-overlay), var(--chat-bg-overlay)),
    url('/wa-background.png');
  background-size: auto, 380px auto;
  background-color: var(--bg-chat);
  transition: background-color .25s;
}

/* ── Date separator ── */
.date-sep { display:flex;align-items:center;justify-content:center;margin:10px 0 8px;pointer-events:none; }
.date-sep span { background:var(--sys);color:var(--muted);font-size:.71rem;padding:4px 12px;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.2); }
[data-theme="light"] .date-sep span { background:#e9edef;color:var(--muted);box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* ── Message bubbles ── */
.msg-wrap { display:flex;flex-direction:column;max-width:72%;margin-bottom:1px;animation:msgIn .12s ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.msg-wrap.out { align-self:flex-end;align-items:flex-end; }
.msg-wrap.in  { align-self:flex-start;align-items:flex-start; }
.msg-wrap.sys { align-self:center;align-items:center;max-width:85%; }

.bubble {
  position:relative;padding:6px 8px 5px 9px;border-radius:7.5px;
  font-size:.875rem;line-height:1.45;
  box-shadow:0 1px 2px rgba(0,0,0,.28);
  word-break:break-word;white-space:pre-wrap;min-width:80px;
}
.bubble.out { background:var(--out);border-top-right-radius:2px; }
.bubble.in  { background:var(--in); border-top-left-radius:2px; }
.bubble.sys { background:rgba(255,255,255,.06);color:var(--muted);font-size:.79rem;text-align:center;padding:4px 12px;border-radius:6px;min-width:0; }
[data-theme="light"] .bubble.out { color:#111b21; }
[data-theme="light"] .bubble.in  { color:#111b21;box-shadow:0 1px 3px rgba(0,0,0,.12); }
[data-theme="light"] .bubble.sys { background:rgba(0,0,0,.05);color:var(--muted); }

/* Tails */
.bubble.out::before { content:'';position:absolute;top:0;right:-8px;border-left:8px solid var(--out);border-top:8px solid transparent; }
.bubble.in::before  { content:'';position:absolute;top:0;left:-8px;border-right:8px solid var(--in);border-top:8px solid transparent; }
[data-theme="light"] .bubble.in::before { border-right-color:#fff; }

.msg-footer { display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:2px;float:right;margin-left:12px;margin-bottom:-2px; }
.msg-time   { font-size:.67rem;color:rgba(134,150,160,.9);white-space:nowrap;line-height:1; }
[data-theme="light"] .msg-time { color:rgba(17,27,33,.5); }
.msg-tick   { font-size:.75rem;color:var(--tick);line-height:1; }
.bubble-text { margin-right:58px;display:inline; }
mark { background:rgba(255,234,0,.3);color:inherit;border-radius:2px;padding:0 1px; }

/* ── Media ── */
.media-img { position:relative;cursor:zoom-in;margin-bottom:2px;border-radius:7px;overflow:hidden;display:inline-block; }
.media-img img { display:block;max-width:300px;max-height:300px;min-width:80px;object-fit:cover; }

.wa-voice { display:flex;align-items:center;gap:10px;padding:4px 2px;min-width:230px;max-width:320px; }
.wa-voice-btn { width:42px;height:42px;border-radius:50%;background:var(--accent);border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .1s; }
.wa-voice-btn:hover { background:var(--accent-h);transform:scale(1.05); }
.wa-voice-center { flex:1;min-width:0;display:flex;flex-direction:column;gap:5px; }
.wa-waves { display:flex;align-items:center;gap:2px;height:28px;cursor:pointer; }
.wa-bar   { width:3px;border-radius:1.5px;background:rgba(134,150,160,.35);transition:background .08s;flex-shrink:0; }
.wa-bar.played { background:var(--accent); }
.wa-voice-footer { display:flex;justify-content:space-between;align-items:center; }
.wa-voice-time { font-size:.69rem;color:var(--muted); }

.media-video { display:block;max-width:300px;max-height:280px;border-radius:7px;outline:none; }

.media-doc { display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:8px;padding:10px 12px;min-width:210px;max-width:280px;text-decoration:none;color:var(--text);transition:background .15s; }
.media-doc:hover { background:rgba(255,255,255,.1); }
[data-theme="light"] .media-doc { background:rgba(0,0,0,.04); }
[data-theme="light"] .media-doc:hover { background:rgba(0,0,0,.08); }
.doc-icon { width:38px;height:38px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem; }
.doc-info { flex:1;min-width:0; }
.doc-name { font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.doc-type { font-size:.69rem;color:var(--muted);margin-top:2px;text-transform:uppercase; }
.doc-dl   { color:var(--accent);flex-shrink:0;display:flex;align-items:center; }
.media-missing { font-size:.74rem;color:rgba(232,168,124,.8);font-style:italic;padding:2px 0;display:flex;align-items:center;gap:5px; }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════ */
.dashboard { flex:1;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);transition:background .25s; }
[data-theme="light"] .dashboard { background:#f0f2f5; }

.dash-scroll { flex:1;overflow-y:auto;padding:24px 28px 40px; }

.dash-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px; }
.dash-brand  { display:flex;align-items:center;gap:14px; }
.dash-logo   { width:64px;height:38px;object-fit:contain; }
.dash-brand-name { font-size:1.15rem;font-weight:700;color:var(--text); }
.dash-brand-sub  { font-size:.74rem;color:var(--muted);margin-top:2px; }
.dash-indexed    { font-size:.74rem;color:var(--muted); }

/* KPI row */
.kpi-row { display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px; }
.kpi-card {
  background:var(--card);border-radius:14px;padding:18px 16px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 2px 12px var(--shadow);border:1px solid var(--border);
  transition:transform .15s, box-shadow .15s;
}
.kpi-card:hover { transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow); }
.kpi-ico { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.kpi-green  .kpi-ico { background:rgba(0,168,132,.15);color:#00a884; }
.kpi-blue   .kpi-ico { background:rgba(59,130,246,.15);color:#3b82f6; }
.kpi-orange .kpi-ico { background:rgba(245,158,11,.15);color:#f59e0b; }
.kpi-purple .kpi-ico { background:rgba(139,92,246,.15);color:#8b5cf6; }
.kpi-teal   .kpi-ico { background:rgba(20,184,166,.15);color:#14b8a6; }
.kpi-body { min-width:0; }
.kpi-val { font-size:1.4rem;font-weight:700;color:var(--text);line-height:1.1; }
.kpi-lbl { font-size:.72rem;color:var(--muted);margin-top:3px; }

/* Charts row */
.charts-row { display:flex;gap:16px;margin-bottom:16px;align-items:stretch; }
.chart-card {
  background:var(--card);border-radius:14px;padding:18px 20px;
  box-shadow:0 2px 12px var(--shadow);border:1px solid var(--border);
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.flex1 { flex:1; }
.flex2 { flex:2; }
.chart-card-title { display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px; }
.chart-wrap { position:relative;flex:1; }
.chart-wrap canvas { width:100%!important; }
.chart-donut { display:flex;align-items:center;justify-content:center;height:180px; }
.chart-hbar  { height:260px;overflow-y:auto; }

.chart-legend { display:flex;flex-wrap:wrap;gap:8px;justify-content:center; }
.legend-item  { display:flex;align-items:center;gap:5px;font-size:.73rem;color:var(--muted); }
.legend-dot   { width:10px;height:10px;border-radius:50%;flex-shrink:0; }

/* Top contacts table */
.top-table-wrap { flex:1;overflow-y:auto; }
.top-table { width:100%;border-collapse:collapse;font-size:.83rem; }
.top-table th { text-align:left;padding:7px 10px;color:var(--muted);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1; }
.top-table td { padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text); }
.top-table tr:last-child td { border-bottom:none; }
.top-table tr:hover td { background:var(--hover); }
.top-table .rank { font-weight:700;color:var(--accent);width:28px; }
.top-table .ct-av { width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff; }
.top-table .bar-cell { width:120px; }
.bar-bg  { background:var(--border);border-radius:3px;height:6px;overflow:hidden; }
.bar-fill{ background:var(--accent);height:100%;border-radius:3px;transition:width .6s ease; }
.has-media-badge { font-size:.65rem;background:rgba(0,168,132,.15);color:var(--accent);padding:2px 6px;border-radius:4px; }

/* Loading / error states in dashboard */
.dash-loading { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:300px;color:var(--muted); }
.spinner { width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════ */
.lightbox { position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center; }
.lb-overlay { position:absolute;inset:0;background:rgba(0,0,0,.92);cursor:zoom-out; }
.lb-content { position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:92vw;max-height:92vh; }
.lb-close,.lb-download { position:fixed;top:14px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;z-index:9001;display:flex;align-items:center;justify-content:center;transition:background .15s;text-decoration:none; }
.lb-close    { right:14px;cursor:pointer; }
.lb-download { right:58px; }
.lb-close:hover,.lb-download:hover { background:rgba(255,255,255,.28); }
#lb-img { max-width:90vw;max-height:84vh;border-radius:8px;object-fit:contain;box-shadow:0 8px 40px rgba(0,0,0,.6); }
.lb-caption { color:rgba(255,255,255,.65);font-size:.82rem; }

/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
.toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1f2c34;color:var(--text);padding:10px 20px;border-radius:8px;font-size:.84rem;box-shadow:0 4px 20px rgba(0,0,0,.4);z-index:9002;pointer-events:none;animation:toastIn .2s ease; }
@keyframes toastIn { from{opacity:0;bottom:12px} to{opacity:1;bottom:24px} }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:1100px) { .kpi-row { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px)  { .app { grid-template-columns:1fr; } .sidebar { display:none; } }
@media (min-width:1400px) { .app { grid-template-columns:380px 1fr; } }