/* ═══════════════════════════════════════════════════════════════
   FCR Dashboard — Complete Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ── Theme variables ──────────────────────────────────────── */
:root{
  --bg:#eef2f7; --panel:#ffffff; --panel-2:#f8fafc; --panel-3:#edf2f7;
  --border:#e2e8f0; --border-light:#cbd5e1;
  --text:#0f172a; --text-2:#475569; --muted:#94a3b8;
  --brand:#0f3b63; --brand-2:#1769a8; --brand-glow:rgba(23,105,168,0.16);
  --accent:#c91926; --ok:#12805c; --warn:#d97706; --err:#c91926; --info:#2563eb;
  --row-hover:#f1f5f9; --row-dirty:#fef9c3; --row-selected:#dbeafe;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 10px 15px rgba(15,23,42,.1),0 4px 6px rgba(15,23,42,.05);
  --radius:8px; --sidebar-width:248px;
}
[data-theme="dark"]{
  --bg:#0b1220; --panel:#111827; --panel-2:#0f172a; --panel-3:#1e293b;
  --border:#1f2937; --border-light:#374151;
  --text:#e5e7eb; --text-2:#9ca3af; --muted:#6b7280;
  --brand:#3b82f6; --brand-2:#60a5fa; --brand-glow:rgba(59,130,246,0.2);
  --row-hover:#1e293b; --row-dirty:#422006; --row-selected:#1e3a8a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 10px 15px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);
  font-family:'Segoe UI',Tahoma,Arial,sans-serif;font-size:13px}
button{font-family:inherit;font-size:12px;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:12px}

/* ── Layout ───────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:56px 1fr;
  height:100vh;grid-template-areas:"topbar topbar" "sidebar main"}
.app.sidebar-collapsed{--sidebar-width:60px}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar{grid-area:topbar;background:linear-gradient(90deg,#092338,var(--brand),var(--accent));
  color:#fff;display:flex;align-items:center;padding:0 20px;gap:12px;
  box-shadow:0 2px 4px rgba(0,0,0,.15);z-index:10}
.logo-wrapper{display:flex;align-items:center;gap:12px}
.topbar .logo{font-weight:700;font-size:16px;letter-spacing:.5px}
.topbar .sub{opacity:.85;font-size:12px}
.topbar .spacer{flex:1}
.topbar .dirty-chip{background:rgba(255,255,255,.2);padding:4px 12px;border-radius:20px;
  font-size:11px;display:none;align-items:center;gap:6px}
.topbar .dirty-chip.show{display:inline-flex}
.topbar .icon-btn{background:rgba(255,255,255,.15);border:none;color:#fff;
  width:34px;height:34px;border-radius:6px;display:inline-flex;
  align-items:center;justify-content:center;font-size:15px;transition:all .15s;position:relative}
.topbar .icon-btn:hover{background:rgba(255,255,255,.28)}

/* ── Notification button ──────────────────────────────────── */
.notification-btn span{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:#fbbf24;color:#111827;
  font-size:10px;font-weight:800;display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 4px rgba(0,0,0,.2)}
.notification-btn.has-items span{display:flex}

/* ── Top dropdowns (language, notifications) ──────────────── */
.top-dropdown{position:relative}
.top-dropdown .dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;margin-top:0;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);min-width:260px;z-index:1000;padding:0;
  display:none;color:var(--text);
}
.top-dropdown .dropdown-menu.show{display:block;animation:slideDown .15s ease-out}

/* Language menu */
.lang-menu{min-width:160px;padding:6px 0}
.lang-option{display:flex;align-items:center;gap:10px;padding:9px 14px;
  cursor:pointer;font-size:13px;transition:background .1s}
.lang-option:hover{background:var(--row-hover)}
.lang-option.active{background:var(--brand-glow);font-weight:600;color:var(--brand)}
.lang-option span:first-child{font-size:18px}

/* Notification menu */
.notif-menu{min-width:360px;max-height:420px;overflow:hidden;display:none;flex-direction:column}
.notif-menu.show{display:flex}
.notif-header{padding:12px 16px;border-bottom:1px solid var(--border);
  background:var(--panel-2);display:flex;flex-direction:column;gap:2px}
.notif-header strong{font-size:13px;color:var(--text)}
.notif-subtitle{font-size:11px;color:var(--text-2)}
.notif-list{overflow-y:auto;max-height:340px;padding:8px}
.notif-item{border:1px solid rgba(217,119,6,.35);background:rgba(251,191,36,.08);
  border-radius:8px;padding:10px 12px;font-size:12px;margin-bottom:6px;
  cursor:pointer;transition:all .15s}
.notif-item:hover{background:rgba(251,191,36,.18);transform:translateX(2px)}
.notif-item strong{display:block;color:var(--text);margin-bottom:3px;font-size:12px}
.notif-item span{color:var(--text-2);font-size:11px;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notif-item .notif-meta{display:flex;justify-content:space-between;margin-top:4px;
  font-size:10px;color:var(--muted)}
.notif-empty{padding:20px;text-align:center;color:var(--muted);font-size:12px}

/* ── Login screen ─────────────────────────────────────────── */
/* The app is fully rendered behind the overlay so entering the dashboard is
   instant, but it must be invisible: a blurred dashboard showing through the
   panel looked like a styling bug and leaked data before sign-in. */
.login-screen{position:fixed;inset:0;z-index:5000;background:
  linear-gradient(135deg,#092338,#0f3b63 62%,#0a1c2e),
  radial-gradient(circle at 78% 18%,rgba(201,25,38,.30),transparent 36%);
  display:flex;align-items:center;justify-content:center;padding:24px;color:#fff;
  transition:opacity .4s ease}
.login-screen.hidden{opacity:0;pointer-events:none}
.login-panel{width:min(520px,100%);background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);border-radius:14px;padding:32px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.login-brand img{height:44px;width:auto;background:#fff;border-radius:8px;padding:5px}
.login-brand h1{margin:0;font-size:22px;line-height:1.1}
.login-brand p{margin:4px 0 0;color:rgba(255,255,255,.76);font-size:12px}
.login-copy h2{margin:0;font-size:28px;line-height:1.18;letter-spacing:0}
.login-copy p{margin:6px 0 0;color:rgba(255,255,255,.76);font-size:13px}
.login-progress{height:8px;background:rgba(255,255,255,.16);border-radius:999px;
  overflow:hidden;margin:24px 0 14px}
.login-progress span{display:block;width:18%;height:100%;
  background:linear-gradient(90deg,#fff,#fbbf24);border-radius:999px;transition:width .4s ease}
.login-btn{width:100%;justify-content:center;padding:11px 14px;font-size:13px;margin-top:8px}

/* Sign-in form */
.login-form{display:none;flex-direction:column;gap:2px;margin-top:6px}
.login-form.show{display:flex;animation:loginIn .25s ease-out}
#login-startup{display:block}
#login-startup.hide{display:none}
@keyframes loginIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.login-field{display:block;margin-top:16px}
.login-field > span{display:block;font-size:11px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:6px}
.login-field input[type="text"],.login-field input[type="password"]{
  width:100%;padding:11px 13px;font-size:13px;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:8px;outline:none;
  transition:border-color .15s,background .15s}
.login-field input::placeholder{color:rgba(255,255,255,.35)}
.login-field input:focus{border-color:#fbbf24;background:rgba(255,255,255,.14)}
.login-password{position:relative}
.login-password input{padding-right:44px}
.login-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:rgba(255,255,255,.65);font-size:14px;cursor:pointer;
  padding:6px 8px;border-radius:6px;line-height:1}
.login-eye:hover{background:rgba(255,255,255,.12);color:#fff}
.login-error{margin:12px 0 0;padding:9px 12px;border-radius:8px;font-size:12px;
  background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.5);color:#fecaca}
.login-error[hidden]{display:none}
.login-error.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}}
.login-remember{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:12px;color:rgba(255,255,255,.75);cursor:pointer;user-select:none}
.login-remember input{accent-color:#fbbf24;cursor:pointer;margin:0}
.login-arrow{margin-left:4px;transition:transform .15s}
.login-btn:hover .login-arrow{transform:translateX(3px)}
.login-btn[disabled]{opacity:.6;cursor:progress}
.login-hint{margin:14px 0 0;text-align:center;font-size:11px;color:rgba(255,255,255,.5)}
.login-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.14);
  font-size:10.5px;color:rgba(255,255,255,.5)}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar{grid-area:sidebar;background:var(--panel);border-right:1px solid var(--border);
  padding:16px 0;overflow-y:auto;transition:all .2s}
.sidebar-collapsed .sidebar{padding:16px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 20px;
  color:var(--text-2);cursor:pointer;border-left:3px solid transparent;
  transition:all .15s;white-space:nowrap}
.sidebar-collapsed .nav-item{padding:10px;justify-content:center}
.sidebar-collapsed .nav-item span:nth-child(2){display:none}
.nav-item:hover{background:var(--panel-2);color:var(--text)}
.nav-item.active{background:var(--panel-2);color:var(--brand);
  border-left-color:var(--brand);font-weight:600}
.nav-item .ico{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.nav-sep{height:1px;background:var(--border);margin:12px 20px}
.sidebar-collapsed .nav-sep{margin:12px 8px}
.nav-foot{padding:12px 20px;color:var(--muted);font-size:11px}
.sidebar-collapsed .nav-foot{display:none}

/* ── Main ─────────────────────────────────────────────────── */
.main{grid-area:main;overflow:auto;padding:clamp(16px,2.2vw,28px)}
.page{display:none}
.page.active{display:block}
.page-title{font-size:clamp(20px,2.2vw,28px);font-weight:750;margin:0 0 4px}
.page-sub{color:var(--text-2);margin:0 0 20px;font-size:13px}

/* ── Hero cards (stats) ───────────────────────────────────── */
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hero-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-card::before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:var(--brand)}
.hero-card.total::before{background:var(--info)}
.hero-card.open::before{background:var(--brand)}
.hero-card.done::before{background:var(--ok)}
.hero-card.pending::before{background:var(--warn)}
.hero-card span{display:block;color:var(--text-2);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px}
.hero-card strong{display:block;margin-top:8px;font-size:clamp(26px,3vw,38px);
  line-height:1;color:var(--text)}

/* ── Notice panel (notifications page) ────────────────────── */
.notice-panel{display:block;background:linear-gradient(135deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.notice-panel h3{margin:0 0 4px;font-size:16px}
.notice-panel > p{margin:0 0 12px;color:var(--text-2);font-size:12px}
.notice-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.notice-item{border:1px solid rgba(217,119,6,.35);background:rgba(251,191,36,.12);
  border-radius:8px;padding:10px 12px;font-size:12px;cursor:pointer;transition:all .15s}
.notice-item:hover{background:rgba(251,191,36,.22);transform:translateY(-1px)}
.notice-item strong{display:block;color:var(--text);margin-bottom:3px}
.notice-item span{color:var(--text-2);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── Quick stats (clickable filter cards) ─────────────────── */
.quick-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick-stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 16px;box-shadow:var(--shadow);cursor:pointer;
  transition:all 0.2s ease;position:relative;overflow:hidden}
.quick-stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--brand);opacity:0;transition:opacity 0.2s}
.quick-stat:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.quick-stat:hover::before{opacity:1}
.quick-stat.active{border-color:var(--brand);
  background:linear-gradient(135deg,var(--panel),var(--panel-2));
  box-shadow:var(--shadow), 0 0 0 2px var(--brand-glow)}
.quick-stat.active::before{opacity:1;background:var(--brand)}
.quick-stat[data-filter="open"]::before{background:var(--brand)}
.quick-stat[data-filter="finished"]::before{background:var(--ok)}
.quick-stat[data-filter="pending"]::before{background:var(--warn)}
.quick-stat[data-filter="rejected"]::before{background:var(--err)}
.qs-label{font-size:11px;color:var(--text-2);text-transform:uppercase;
  letter-spacing:0.5px;font-weight:600;margin-bottom:4px}
.qs-value{font-size:24px;font-weight:700;color:var(--text)}

/* ── Toolbar ──────────────────────────────────────────────── */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.toolbar .group{display:flex;gap:6px;align-items:center}
.toolbar .sep{width:1px;height:24px;background:var(--border);margin:0 4px}
.toolbar input[type=text],.toolbar select{
  background:var(--panel);border:1px solid var(--border);color:var(--text);
  padding:6px 10px;border-radius:6px;outline:none;font-size:12px}
.toolbar input[type=text]{min-width:260px}
.toolbar input[type=text]:focus,.toolbar select:focus{border-color:var(--brand)}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border-radius:6px;border:1px solid var(--border);background:var(--panel);
  color:var(--text);font-weight:500;transition:all .15s;font-size:12px}
.btn:hover{background:var(--panel-2)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-danger{background:var(--err);color:#fff;border-color:var(--err)}
.btn-danger:hover{opacity:.9}
.btn-success{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-sm{padding:4px 8px;font-size:11px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Filters bar ──────────────────────────────────────────── */
.filters-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;
  padding:10px 12px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius)}
.filters-bar .filter-group{display:flex;gap:6px;align-items:center}
.filters-bar label{font-size:11px;color:var(--text-2);font-weight:600}
.filters-bar select{min-width:130px}

/* Status pills */
.status-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;
  font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pill-green{background:#dcfce7;color:#166534}
.pill-red{background:#fee2e2;color:#991b1b}
.pill-yellow{background:#fef3c7;color:#92400e}
.pill-gray{background:#f1f5f9;color:#475569}
[data-theme="dark"] .pill-green{background:#14532d;color:#bbf7d0}
[data-theme="dark"] .pill-red{background:#7f1d1d;color:#fecaca}
[data-theme="dark"] .pill-yellow{background:#78350f;color:#fde68a}
[data-theme="dark"] .pill-gray{background:#1e293b;color:#cbd5e1}

.row-actions{display:flex;gap:4px}
.row-actions button{padding:4px 7px;font-size:11px;border-radius:4px;
  border:1px solid var(--border);background:var(--panel);color:var(--text-2);
  transition:all .15s}
.row-actions button:hover{background:var(--panel-2);color:var(--text)}
.row-actions .btn-edit{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
.row-actions .btn-edit:hover{background:var(--brand-2);border-color:var(--brand-2)}

/* Status cell (double-click) */
.status-cell{cursor:pointer;transition:background .15s;position:relative}
.status-cell:hover{background:var(--row-hover) !important}
.status-cell:hover::after{content:'✏️';position:absolute;right:4px;top:50%;
  transform:translateY(-50%);font-size:10px;opacity:.5}

/* Sortable columns */
.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background 0.15s;position:relative}
.sortable:hover{background:rgba(255,255,255,0.1) !important}
.sortable-active{background:rgba(59,131,246,0.3) !important}
.sort-indicator{font-size:10px;margin-left:4px;opacity:0.8}
[data-theme="dark"] .sortable:hover{background:rgba(59,130,246,0.15) !important}
[data-theme="dark"] .sortable-active{background:rgba(59,131,246,0.25) !important}

/* ── Cards ────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

/* ── Charts ───────────────────────────────────────────────── */
.chart-container{position:relative;height:240px;width:100%}
.chart-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.chart-box h4{margin:0 0 10px;font-size:13px;color:var(--text-2);font-weight:600}
.chart-box .chart-container{flex:1;min-height:0}

/* ── Modal ────────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;
  align-items:center;justify-content:center;z-index:1000}
.modal-backdrop.show{display:flex}
.modal{background:var(--panel);border-radius:var(--radius);padding:24px;
  min-width:400px;max-width:600px;box-shadow:0 20px 60px rgba(0,0,0,.3);
  max-height:90vh;overflow-y:auto}
.modal h3{margin:0 0 12px;font-size:16px}
.modal p{color:var(--text-2);line-height:1.5;margin:0 0 20px}
.modal .actions{display:flex;gap:10px;justify-content:flex-end}

/* ── Toast ────────────────────────────────────────────────── */
#toast-container{position:fixed;top:70px;right:20px;z-index:2000;
  display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--info);
  padding:12px 16px;border-radius:6px;box-shadow:var(--shadow-lg);min-width:260px;
  animation:slide .25s ease-out;font-size:12px}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--err)}
.toast.warn{border-left-color:var(--warn)}
@keyframes slide{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Forms ────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:11px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.field input,.field select,.field textarea{
  width:100%;padding:7px 9px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:6px;color:var(--text);outline:none}
input[type="date"]{min-height:32px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
.field textarea{min-height:70px;resize:vertical;font-family:inherit}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;
  padding-top:12px;border-top:1px solid var(--border)}

/* ── Settings ─────────────────────────────────────────────── */
.settings-section{margin-bottom:20px}
.settings-section h4{margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);
  font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.5px}
.kv-row{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:center;
  padding:6px 0;border-bottom:1px dashed var(--border)}
.kv-row .k{font-weight:600;color:var(--text-2);font-size:11px}
.kv-row .v{color:var(--text)}
.kv-row .v input:not([type="checkbox"]):not([type="radio"]){width:100%;padding:6px 10px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:6px;color:var(--text)}
.kv-row .v input[readonly]{color:var(--muted);cursor:not-allowed}
.kv-row .v label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12px}
.kv-row .v input[type="checkbox"],.kv-row .v input[type="radio"]{
  width:auto;margin:0;flex:0 0 auto;accent-color:var(--brand);cursor:pointer}

/* ── Dropdown (column visibility) ─────────────────────────── */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{display:none;position:absolute;top:100%;right:0;margin-top:4px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);min-width:200px;z-index:100;padding:6px 0}
.dropdown-menu.show{display:block;animation:slideDown .15s ease-out}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.dropdown-header{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;font-size:11px;font-weight:600;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.5px}
.dropdown-header .btn-link{background:none;border:none;color:var(--brand);cursor:pointer;
  font-size:11px;padding:2px 6px;border-radius:4px;transition:all .15s}
.dropdown-header .btn-link:hover{background:var(--brand-glow)}
.dropdown-divider{height:1px;background:var(--border);margin:4px 0}
.dropdown-menu label{display:flex;align-items:center;gap:8px;padding:6px 12px;
  cursor:pointer;font-size:12px;color:var(--text);transition:background .1s}
.dropdown-menu label:hover{background:var(--row-hover)}
.dropdown-menu input[type="checkbox"]{accent-color:var(--brand);cursor:pointer}
.col-hidden{display:none!important}
.col-hidden + col{display:none}

/* ── About page ───────────────────────────────────────────── */
.about-hero{text-align:center;padding:30px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;border-radius:var(--radius);margin-bottom:20px}
.about-hero h2{margin:0 0 6px;font-size:26px}
.about-hero p{margin:0;opacity:.9}
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.about-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow)}
.about-card h4{margin:0 0 12px;color:var(--brand);font-size:13px;text-transform:uppercase;
  letter-spacing:.5px}
.about-card .row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px dashed var(--border);font-size:13px}
.about-card .row:last-child{border:none}
.about-card .row span:first-child{color:var(--text-2);flex:0 0 auto}
.about-card .row span:last-child{text-align:right;min-width:0;overflow-wrap:anywhere;
  word-break:break-word}

/* ── Reset settings button ────────────────────────────────── */
#btn-reset-settings{background:transparent;color:var(--err);border-color:var(--err)}
#btn-reset-settings:hover{background:var(--err);color:#fff}

/* ── Utilities ────────────────────────────────────────────── */
.hidden{display:none!important}
.text-muted{color:var(--muted)}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}
.flex{display:flex}.gap-2{gap:8px}.gap-3{gap:12px}.items-center{align-items:center}
.spacer{flex:1}

/* ── Dark mode ambient effect ─────────────────────────────── */
[data-theme="dark"] body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(circle at 20% 50%, rgba(59,130,246,0.1) 0%, transparent 50%),
             radial-gradient(circle at 80% 80%, rgba(139,92,246,0.08) 0%, transparent 50%);
  pointer-events:none;z-index:-1}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:1100px){
  .hero-stats,.quick-stats,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2,.about-grid,.notice-panel{grid-template-columns:1fr}
}
@media(max-width:980px){
  .app{grid-template-columns:1fr;grid-template-rows:56px auto 1fr;
    grid-template-areas:"topbar" "sidebar" "main"}
  .sidebar{display:flex;gap:4px;overflow-x:auto;padding:8px;border-right:0;
    border-bottom:1px solid var(--border)}
  .nav-item{border-left:0;border-bottom:3px solid transparent;padding:9px 12px}
  .nav-sep,.nav-foot{display:none}
  .toolbar input[type=text]{min-width:180px;width:100%}
}
@media(max-width:640px){
  .topbar{padding:0 10px;gap:8px}
  .topbar .sub{display:none}
  .topbar .logo{font-size:14px}
  .main{padding:14px}
  .hero-stats,.quick-stats,.form-grid{grid-template-columns:1fr}
  .toolbar,.filters-bar{display:grid;grid-template-columns:1fr}
  .toolbar .group{flex-wrap:wrap}
  .kv-row{grid-template-columns:1fr;gap:4px}
  .modal{min-width:0;width:calc(100vw - 24px);padding:18px}
  #edit-modal .modal{min-width:0!important}
  .login-panel{padding:22px}
  .login-copy h2{font-size:22px}
}

#tbl-fcr th, #tbl-fcr td {
  padding: 10px 12px;
  border: 1px solid var(--border); /* Clean uniform borders */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* Prevents messy multi-line wrapping */
}

/* Subtle row hover and clean contrast rules */
#tbl-fcr tbody tr:hover {
  background-color: var(--row-hover) !important;
}
#tbl-fcr tbody tr.dirty {
  background-color: var(--row-dirty) !important;
}
#tbl-fcr tbody tr.selected {
  background-color: var(--row-selected) !important;
}

table.fcr{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
table.fcr td{overflow:hidden;text-overflow:ellipsis}

/* -- Table wrapper -- horizontal scroll -- */
.tbl-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 340px);border:1px solid var(--border);border-radius:var(--radius)}
/* ── TABLE — sticky header + sticky action column ─────────── */
/* The table can be wider than the window (9+ columns), so keep the header
   and the row actions visible while scrolling. */
#tbl-fcr thead th{
  position:sticky;top:0;z-index:2;background:var(--panel-3);color:var(--text-2);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  text-align:left;white-space:nowrap}
#tbl-fcr thead th.sortable{cursor:pointer;user-select:none}
#tbl-fcr thead th.sortable:hover{color:var(--text)}
#tbl-fcr th:last-child,#tbl-fcr td:last-child{
  position:sticky;right:0;z-index:1;background:var(--panel)}
#tbl-fcr thead th:last-child{z-index:3;background:var(--panel-3)}
#tbl-fcr tbody tr:hover td:last-child{background:var(--row-hover)}
#tbl-fcr tbody tr.dirty td:last-child{background:var(--row-dirty)}
#tbl-fcr tbody tr.selected td:last-child{background:var(--row-selected)}
#tbl-fcr td[contenteditable="true"]:focus{
  outline:2px solid var(--brand);outline-offset:-2px;background:var(--panel-2)}
#tbl-fcr td.status-cell{cursor:pointer}