/* ============ SICO Helpdesk - Executive Dashboard ============ */
:root {
  --accent: #6366f1;
  --accent2: #22d3ee;
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0,0,0,.28);
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.theme-dark {
  --bg: #0b1020; --bg2:#111834; --panel:#151d3b; --panel2:#1b2447;
  --text:#e8ecf7; --muted:#93a0c4; --border:#26305c; --input:#0f1730;
}
.theme-light {
  --bg:#f4f5fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#f7f8fd;
  --text:#1b213a; --muted:#7683a6; --border:#eaecf5; --input:#f7f8fd;
  --shadow: 0 10px 30px rgba(38,50,110,.08);
}

/* Enterprise chrome: a constant deep-navy shell for the top bar and sidebar
   in both themes. Re-scoping the theme variables re-tints every child control
   (buttons, pills, inputs, filter groups) without per-element overrides. */
.topbar, .sidebar {
  --panel:#171f44; --panel2:#1e2852; --input:#101735;
  --text:#eaeefb; --muted:#9aa7cf; --border:rgba(148,163,216,.18);
  --accent:#818cf8;
  color:var(--text); color-scheme:dark;
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ---- top bar ---- */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:nowrap;
  padding:14px 22px; background:linear-gradient(120deg,#0e1533,#171f44);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;
  box-shadow:0 2px 14px rgba(8,12,28,.35);
}
/* v3.13: the brand can shrink (min-width:0) so a long capability title yields
   space to the actions row instead of pushing the buttons onto a second,
   misaligned line. The title itself scales down and wraps rather than overflow. */
.brand { display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0; }
.logo {
  height:46px; width:auto; display:block; border-radius:10px; flex:0 0 auto;
  box-shadow:0 4px 14px rgba(11,16,32,.35);
}
.brand-text { min-width:0; }
.brand-text h1 {
  font-size:clamp(15px,1.7vw,24px); margin:0; font-weight:700; line-height:1.2;
  overflow-wrap:anywhere;
}
/* Stacked under the title so the header stays narrow and the actions row
   never runs out of width and wraps. */
.title-updated {
  display:block; font-size:13px; font-weight:500; color:var(--muted);
  margin-top:3px; white-space:nowrap;
}
/* v3.13: actions keep their intrinsic width (flex:0 0 auto) so they stay on
   one aligned row on desktop; flex-wrap only kicks in on genuinely narrow
   viewports where the whole bar reflows. */
.top-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  flex:0 0 auto; min-width:0; justify-content:flex-end; }
.btn {
  background:var(--panel2); color:var(--text); border:1px solid var(--border);
  padding:9px 14px; border-radius:8px; cursor:pointer; font-weight:600;
  font-size:13px; transition:.15s; font-family:inherit; white-space:nowrap;
}
.btn:hover { border-color:#3b82f6; box-shadow:0 1px 3px rgba(9,12,28,.28); }
/* v3.14: enterprise corporate-blue for primary actions — a restrained solid
   blue with a subtle depth gradient and soft neutral shadow replaces the vivid
   indigo→cyan glow, matching the admin console's enterprise theme. */
.btn-primary { background:linear-gradient(180deg,#3b82f6,#2563eb); color:#fff; border:1px solid #1d4ed8; box-shadow:0 1px 2px rgba(29,78,216,.35); }
.btn-primary:hover { background:linear-gradient(180deg,#2563eb,#1d4ed8); border-color:#1d4ed8; box-shadow:0 2px 8px rgba(29,78,216,.45); }
/* CSV Upload-tab action buttons — deliberately off the indigo/cyan tab theme */
.btn-upload { background:linear-gradient(135deg,#059669,#10b981); color:#fff; border:none; }
.btn-upload:hover { border:none; box-shadow:0 2px 12px rgba(16,185,129,.4); }
.btn-import { background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; border:none; }
.btn-import:hover { border:none; box-shadow:0 2px 12px rgba(245,158,11,.45); }
.btn-import:disabled { background:var(--panel2); color:var(--muted); opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn-refresh { background:linear-gradient(135deg,#475569,#64748b); color:#fff; border:none; }
.btn-refresh:hover { border:none; box-shadow:0 2px 12px rgba(100,116,139,.45); }
/* ---- v3.1: Application Insight dropdown (replaces the v2 view switch) ---- */
.insight-select { position:relative; display:flex; align-items:center; gap:10px; margin-right:6px; }
.ins-label {
  font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; white-space:nowrap;
}
.ins-btn {
  display:flex; align-items:center; gap:9px; min-width:150px;
  background:linear-gradient(180deg,#3b82f6,#2563eb);
  color:#fff; border:1px solid #1d4ed8; padding:9px 13px; border-radius:8px;
  cursor:pointer; font-weight:700; font-size:13px; font-family:inherit;
  box-shadow:0 1px 2px rgba(29,78,216,.35); transition:.15s;
}
.ins-btn:hover { background:linear-gradient(180deg,#2563eb,#1d4ed8); box-shadow:0 2px 8px rgba(29,78,216,.45); }
/* v3.12: hard cap so an unexpectedly long name can never push the top-menu
   buttons onto a second line — the JS short form should already fit. */
.ins-current { flex:1; text-align:left; white-space:nowrap;
  max-width:170px; overflow:hidden; text-overflow:ellipsis; }
.ins-caret { font-size:11px; transition:transform .18s ease; }
.insight-select.open .ins-caret { transform:rotate(180deg); }
.ins-menu {
  position:absolute; top:calc(100% + 7px); left:0; min-width:250px; z-index:60;
  background:var(--panel); border:1px solid var(--border); border-radius:13px;
  box-shadow:0 18px 44px rgba(5,8,22,.55); padding:6px;
  display:flex; flex-direction:column; gap:2px; animation:menuIn .16s ease;
}
@keyframes menuIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.ins-menu.hidden { display:none; }
.ins-opt {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--text); cursor:pointer;
  padding:9px 12px; border-radius:9px; font-family:inherit; font-size:13px;
  font-weight:600; transition:.12s; white-space:nowrap;
}
.ins-opt:hover { background:var(--panel2); }
.ins-opt.active { background:linear-gradient(180deg,#3b82f6,#2563eb); color:#fff; }
.ins-opt .ins-check { margin-left:auto; opacity:0; font-weight:800; }
.ins-opt.active .ins-check { opacity:1; }
/* v3.12: dropdown shows the FULL capability name but never grows unbounded */
.ins-opt-lbl { max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* v3.12: note shown inside the menu when no capabilities exist yet */
.ins-empty { padding:11px 14px; color:var(--muted); font-size:13px;
  font-weight:600; white-space:nowrap; }

/* v4.2: data-source label leading the "Updated at" line (the old top-bar
   pill). Green = live GLPI, cyan = uploaded CSV, amber = demo fallback. */
.src-live { color:#4ade80; font-weight:700; }
.src-csv  { color:#22d3ee; font-weight:700; }
.src-demo { color:#fbbf24; font-weight:700; }
.upd-date { font-weight:700; }
.upd-time { font-size:0.82em; opacity:0.85; }

/* ---- v3: session controls in the top bar ---- */
a.btn { text-decoration:none; display:inline-block; line-height:1; }
/* v4: 'Welcome: Full Name' greeting — replaces the User/Role card. Single
   line; the extra margin keeps a clear gap before the APPLICATION selector. */
.welcome {
  flex:0 0 auto; margin-right:12px; white-space:nowrap;
  font-size:12px; font-weight:600; color:var(--muted);
}
.welcome b { color:var(--text); font-weight:700; font-size:13px; }

/* ---- v3.1: insight LOV module placeholder ---- */
.insight-placeholder { text-align:center; padding:64px 30px; }
.insight-placeholder.hidden { display:none; }
.insight-placeholder .ip-ico { font-size:46px; margin-bottom:10px; }
.insight-placeholder h2 { margin:0 0 8px; font-size:22px; }
.insight-placeholder p { color:var(--muted); max-width:540px; margin:0 auto; font-size:14px; }

/* ---- v3.1: confirmation modal (logout) ---- */
.modal-backdrop {
  position:fixed; inset:0; z-index:120; display:flex; align-items:center;
  justify-content:center; background:rgba(5,8,18,.6); backdrop-filter:blur(3px);
}
.modal-backdrop.hidden { display:none; }
.modal {
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:18px; box-shadow:var(--shadow); padding:26px 30px;
  width:min(92vw, 380px); text-align:center; animation:menuIn .18s ease;
}
.modal-ico { font-size:30px; margin-bottom:6px; }
.modal h3 { margin:0 0 6px; font-size:18px; }
.modal p { margin:0 0 18px; color:var(--muted); font-size:13.5px; }
.modal-actions { display:flex; justify-content:center; gap:10px; }
.modal-actions .btn { padding:9px 18px; }
.btn-danger { background:linear-gradient(135deg,#ef4444,#f97316); color:#fff; border:none; }

/* ---- banner ---- */
.banner {
  margin:0; padding:11px 22px; background:rgba(245,158,11,.14);
  color:var(--warn); border-bottom:1px solid rgba(245,158,11,.35); font-size:13px; font-weight:600;
}
.banner.err { background:rgba(239,68,68,.14); color:var(--bad); border-color:rgba(239,68,68,.4); }
.hidden { display:none; }

/* ---- layout ---- */
.layout { display:flex; align-items:flex-start; }
.sidebar {
  width:270px; flex:none; padding:18px 16px; position:sticky; top:75px;
  height:calc(100vh - 75px); overflow-y:auto; border-right:1px solid var(--border);
  background:linear-gradient(180deg,#0e1533,#171f44);
}
.sidebar-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.sidebar-head h2 { font-size:15px; margin:0; }
.sidebar-tools { display:flex; gap:12px; }
.link-btn { background:none;border:none;color:var(--accent);cursor:pointer;font-size:12px;font-weight:600; }
.fld { display:block; margin-bottom:16px; }
.fld > span { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); margin-bottom:6px; font-weight:700; }
.fld input[type=text], .fld input[type=date] {
  width:100%; padding:8px 10px; border-radius:9px; border:1px solid var(--border);
  background:var(--input); color:var(--text); font-family:inherit; font-size:13px;
}
.daterow { display:flex; flex-direction:column; gap:6px; }
.daterow input { width:100%; }
.quick-range { display:flex; gap:5px; margin-top:7px; }
.quick-range button {
  flex:1; padding:5px 0; font-size:11.5px; border-radius:7px; cursor:pointer;
  border:1px solid var(--border); background:var(--input); color:var(--muted); font-weight:600;
}
.quick-range button.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* v2: asset-type quick nav (left menu, assets view only) */
.asset-menu { margin-bottom:18px; display:flex; flex-direction:column; gap:3px; }
.asset-menu.hidden { display:none; }
.am-title { font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); font-weight:700; margin-bottom:6px; }
.am-item {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 10px; border-radius:9px; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--muted);
  background:var(--input); border:1px solid var(--border); transition:all .12s ease;
}
.am-item:hover { color:var(--text); border-color:var(--accent); transform:translateX(2px); }
.am-item.active {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; border-color:transparent;
}
.am-ico { font-size:15px; width:18px; text-align:center; flex:none; }
.am-lbl { flex:1; }
.am-cnt {
  font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:20px;
  background:rgba(148,163,216,.16); color:inherit; flex:none;
}
.am-item.active .am-cnt { background:rgba(255,255,255,.22); }

.filter-group { margin-bottom:10px; }
.filter-group > .fg-head {
  display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);
  font-weight:700; margin-bottom:6px; padding:4px 0;
}
.fg-head .cnt { color:var(--accent); margin-left:auto; }
.fg-arrow { display:inline-block; font-size:10px; transition:transform .15s ease; }
.filter-group:not(.collapsed) .fg-arrow { transform:rotate(90deg); }
.filter-group.collapsed .fg-body { display:none; }
.filter-group.collapsed > .fg-head { margin-bottom:0; }
.fg-body { max-height:190px; overflow-y:auto; padding-right:4px; }
.opt { display:flex; align-items:center; gap:8px; padding:4px 2px; font-size:13px; cursor:pointer; }
.opt input { accent-color:var(--accent); }
.opt .c { margin-left:auto; color:var(--muted); font-size:11.5px; }

/* v3.14: "Select Filters" picker — pinned first group of the left menu */
.fp-group {
  padding-bottom:8px; margin-bottom:12px;
  border-bottom:1px solid rgba(148,163,216,.22);
}
.fp-group .fg-body { max-height:240px; }
.fp-links { display:flex; gap:12px; padding:2px 2px 6px; }
.fp-links .link-btn { font-size:11.5px; }
.fp-rec { color:#f59e0b; font-size:11px; cursor:help; }

/* ---- content ---- */
.content { flex:1; padding:20px 22px 40px; min-width:0; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:16px; }
.kpi {
  background:linear-gradient(135deg,var(--panel),var(--panel2)); border:1px solid var(--border);
  border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi::after { content:""; position:absolute; right:-20px; top:-20px; width:70px; height:70px;
  border-radius:50%; background:var(--kpi-accent,var(--accent)); opacity:.12; }
.kpi .k-label { font-size:12px; color:var(--muted); font-weight:600; }
.kpi .k-value { font-size:29px; font-weight:800; margin-top:4px; line-height:1.1;
  overflow:hidden; }
.kpi .k-value.wrap2 { display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; word-break:break-word; }
.kpi .k-sub { font-size:11.5px; color:var(--muted); margin-top:5px; }

.chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.chip { background:var(--panel2); border:1px solid var(--border); color:var(--text);
  padding:4px 10px; border-radius:20px; font-size:12px; cursor:pointer; }
.chip b { color:var(--accent); }
.chip .x { margin-left:6px; color:var(--muted); }

.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:16px; }
.card {
  background:var(--panel); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow); padding:16px 18px; min-width:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(38,50,110,.13); }
.card.wide { grid-column:1 / -1; }
/* A bar chart with many categories can't fit legibly in a half-width cell —
 * `autowide` promotes it to full width and `order` drops it into a new row
 * below the compact charts so long labels get the whole panel width. */
.card.autowide { grid-column:1 / -1; order:5; }
.card-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.card-h h3 { font-size:14.5px; margin:0; font-weight:700; }
.muted { color:var(--muted); font-weight:500; font-size:12.5px; }
.chart { width:100%; height:270px; }
.chart.tall { height:330px; }

/* ---- table ---- */
.table-card { margin-top:16px; }
.table-wrap { overflow:auto; max-height:460px; border-radius:10px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:9px 11px; border-bottom:1px solid var(--border); white-space:nowrap; }
th { position:sticky; top:0; background:var(--panel2); cursor:pointer; font-size:12px;
  text-transform:uppercase; letter-spacing:.3px; color:var(--muted); z-index:1; }
tbody tr:hover { background:var(--panel2); }
.badge { padding:2px 9px; border-radius:20px; font-size:11.5px; font-weight:700; }

.foot { margin-top:22px; text-align:center; color:var(--muted); font-size:12px; }

/* ---- loader ---- */
.loader { position:fixed; inset:0; background:rgba(5,8,18,.72); backdrop-filter:blur(3px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:#fff; z-index:100; font-weight:600; }
.loader.hidden { display:none; }
.spinner { width:46px; height:46px; border-radius:50%; border:4px solid rgba(255,255,255,.25);
  border-top-color:var(--accent2); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- kpi entrance animation ---- */
@keyframes riseIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.kpi { animation:riseIn .5s ease both; }
.kpi:nth-child(1){animation-delay:.02s}.kpi:nth-child(2){animation-delay:.06s}
.kpi:nth-child(3){animation-delay:.10s}.kpi:nth-child(4){animation-delay:.14s}
.kpi:nth-child(5){animation-delay:.18s}.kpi:nth-child(6){animation-delay:.22s}
@media (prefers-reduced-motion: reduce) {
  .kpi { animation:none !important; }
}

/* ---- responsive ---- */
@media (max-width: 880px) {
  .sidebar { position:static; width:100%; height:auto; border-right:none; border-bottom:1px solid var(--border); }
  .layout { flex-direction:column; }
  /* v3.13: below the desktop breakpoint the whole bar stacks — brand on its
     own row, actions wrapping beneath it left-aligned, so nothing cramps. */
  .topbar { flex-wrap:wrap; }
  .brand { flex:1 1 100%; }
  .top-actions { flex:1 1 100%; justify-content:flex-start; }
}
/* ---- print ---- */
@page { size: A4 landscape; margin: 8mm; }

/* Applied by the PDF button while printing so Plotly redraws at page width */
body.printing .sidebar { display:none !important; }
body.printing .content { width:1040px; max-width:1040px; padding:0; }

@media print {
  .topbar, .sidebar, .top-actions, #loader, .quick-range, #reset-filters { display:none !important; }
  body { background:#fff; color:#000; }
  .card, .kpi { box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  .content { width:1040px; max-width:1040px; padding:0; }
  .table-wrap { overflow:visible; max-height:none; }
}