/* ==========================================================================
   VARP Techlabs · IT Asset Management — visual system
   Brand: deep navy (#080c1c) from the logo, electric blue gradient, orange spark.
   ========================================================================== */
:root {
  --navy-950: #060a18; --navy-900: #0b1124; --navy-800: #121a35; --navy-700: #1b2548;
  --ink: #0f172a; --ink-2: #475569; --ink-3: #8a94a6;
  --line: #e6e9f0; --line-2: #eef1f6;
  --bg: #f3f5fa; --surface: #ffffff;
  --brand: #2a6df4; --brand-2: #22b4f0; --spark: #f26a2e;
  --grad: linear-gradient(135deg, #22b4f0 0%, #2a6df4 55%, #5b4cf0 100%);
  --good: #0a8f0a; --good-bg: #e8f7ea; --warn: #b26a00; --warn-bg: #fff4dc; --bad: #c62d2d; --bad-bg: #fdecec;
  /* data-viz state colours (validated set; never colour-alone — always labelled) */
  --st-issued: #3987e5; --st-available: #0ca30c; --st-inspect: #fab219; --st-missing: #d55181;
  --st-reserved: #9085e9; --st-repair: #ec835a; --st-expired: #d03b3b; --st-unknown: #a8a69c;
  --radius: 16px; --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
  --shadow-2: 0 10px 30px -12px rgba(15,23,42,.25);
  --itam-ink: var(--ink); --itam-accent: var(--brand); --itam-bg: var(--bg);
}
html { -webkit-font-smoothing: antialiased; }
body { background: var(--bg); color: var(--ink); font-size: .925rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--brand); }
main, .container-fluid > .content { }

/* ---------- navbar ---------- */
.navbar { background: radial-gradient(1200px 120px at 0% 0%, #13204a 0%, var(--navy-950) 60%) !important;
  border-bottom: 1px solid rgba(255,255,255,.06); padding-top: .55rem; padding-bottom: .55rem; }
.navbar-brand { font-weight: 650; letter-spacing: .2px; }
.brand-logo { height: 30px; width: auto; display: block; }

.brand-app { font-size: .95rem; color: #cfe3f1; font-weight: 600; }
.navbar .nav-link { color: rgba(255,255,255,.72) !important; border-radius: 999px; padding: .4rem .85rem !important; margin: 0 .1rem; transition: background .15s, color .15s; }
.navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.07); }
.navbar .nav-link.active { color: #fff !important; background: rgba(42,109,244,.28); box-shadow: inset 0 0 0 1px rgba(110,170,255,.35); border-bottom: 0; }
.navbar .dropdown-menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: .35rem; }
.navbar .dropdown-item { border-radius: 8px; }
.login-logo { background: var(--navy-950); border-radius: 12px; padding: .9rem 1rem; text-align: center; }
.login-logo img { height: 40px; width: auto; }
@media (max-width: 400px) { .brand-logo { height: 24px; } .brand-sep, .brand-app { display: none; } }
.demo-banner { background: repeating-linear-gradient(45deg,#ffe08a,#ffe08a 12px,#ffd35c 12px,#ffd35c 24px); color:#5a4300; font-weight:600; text-align:center; padding:.25rem; font-size:.85rem; }

/* ---------- general components ---------- */
.page-title { font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em; margin: 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.card-header { border-bottom: 1px solid var(--line-2); border-top-left-radius: var(--radius) !important; border-top-right-radius: var(--radius) !important; }
.btn { border-radius: 10px; font-weight: 550; }
.btn-primary, .btn-brand { background: var(--grad); border: 0; color: #fff; box-shadow: 0 6px 16px -8px rgba(42,109,244,.8); }
.btn-primary:hover, .btn-brand:hover, .btn-primary:focus, .btn-brand:focus { filter: brightness(1.07); color: #fff; }
.btn-soft { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-soft:hover { border-color: #c9d3e6; background: #f8faff; color: var(--ink); }
.btn-outline-primary { border-color: #b9cdf9; color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); }
.form-control, .form-select { border-radius: 10px; border-color: #dde2ec; }
.form-control:focus, .form-select:focus { border-color: #8db0fa; box-shadow: 0 0 0 .2rem rgba(42,109,244,.15); }
.nav-tabs .nav-link { border-radius: 10px 10px 0 0; font-weight: 550; color: var(--ink-2); }
.nav-tabs .nav-link.active { color: var(--ink); }
.badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; }
.alert { border-radius: 12px; }
.list-group-item { border-color: var(--line-2); }

/* legacy metric tiles (other pages) */
.metric { display:block; text-decoration:none; color:inherit; border-radius: 14px; padding: 1rem 1.1rem; background:#fff; border:1px solid var(--line); height:100%; transition: transform .15s, border-color .15s, box-shadow .15s; }
.metric:hover, .metric:focus { border-color: #b9cdf9; box-shadow: var(--shadow-2); transform: translateY(-1px); }
.metric .num { font-size: 1.8rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.metric .lbl { color: var(--ink-2); font-size:.82rem; }
.metric.warn .num { color: var(--warn); } .metric.bad .num { color: var(--bad); } .metric.good .num { color: var(--good); }
.section-label { text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; color: var(--ink-3); font-weight:700; margin: 1.2rem 0 .55rem; }
.badge-status { font-weight: 600; }

/* tables */
.tabulator { font-size: .875rem; border-radius: 14px; border: 1px solid var(--line) !important; overflow: hidden; box-shadow: var(--shadow-1); }
.tabulator .tabulator-header { background: #f7f9fc !important; border-bottom: 1px solid var(--line) !important; }
.tabulator .tabulator-header .tabulator-col { background: transparent !important; }
.tabulator .tabulator-col-title { font-weight: 650; color: var(--ink-2); }
.tabulator .tabulator-row { cursor: pointer; transition: background .1s; }
.tabulator .tabulator-row.tabulator-row-even { background: #fbfcfe; }
.tabulator .tabulator-row:hover { background: #eef4ff !important; }
.tabulator .tabulator-footer { background: #f7f9fc !important; border-top: 1px solid var(--line) !important; }
.table-toolbar .form-control, .table-toolbar .form-select { max-width: 280px; }
dl.kv { display:grid; grid-template-columns: max-content 1fr; gap:.3rem 1rem; margin:0; }
dl.kv dt { color: var(--ink-2); font-weight:500; } dl.kv dd { margin:0; }
.unknown { color: var(--ink-3); font-style: italic; }
.timeline { list-style:none; padding-left:0; margin:0; }
.timeline li { border-left: 2px solid #dbe3f0; padding: 0 0 .75rem .95rem; position: relative; }
.timeline li::before { content:""; width:10px; height:10px; border-radius:50%; background: var(--grad); position:absolute; left:-6px; top:.35rem; box-shadow: 0 0 0 3px #fff; }
.form-label { font-weight: 550; }
.empty { color: var(--ink-3); padding: 1.2rem; text-align:center; }
textarea.email-draft { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85rem; }

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.dash-head { display:flex; flex-wrap:wrap; align-items:flex-end; gap: .75rem 1rem; margin: .25rem 0 1rem; }
.dash-kicker { color: var(--ink-3); font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dash-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.dash-actions { margin-left:auto; display:flex; flex-wrap:wrap; gap:.5rem; }

/* hero */
.hero { position: relative; overflow: hidden; border-radius: 22px; padding: 1.6rem 1.6rem 1.2rem; color: #fff;
  background: radial-gradient(700px 300px at 85% -10%, rgba(34,180,240,.35), transparent 60%),
              radial-gradient(600px 300px at -10% 120%, rgba(91,76,240,.35), transparent 60%),
              linear-gradient(160deg, #0d1531 0%, var(--navy-950) 70%);
  box-shadow: 0 24px 50px -24px rgba(6,10,24,.65); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.hero > * { position: relative; z-index: 1; }
.hero a { color: inherit; text-decoration: none; }
.hero-grid { display:grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 1.25rem; align-items: end; }
.hero-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9fc4ff; }
.hero-kicker i { color: var(--brand-2); margin-right: .25rem; }
.hero-figure { font-size: clamp(4.5rem, 11vw, 8.5rem); font-weight: 800; line-height: .9; letter-spacing: -.055em; margin: .3rem 0 .4rem;
  background: linear-gradient(180deg, #ffffff 30%, #a9c8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: #b9c6e4; font-size: 1rem; } .hero-sub strong { color: #fff; }
.hero-main { display:block; border-radius: 14px; }
.hero-side { display:grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hero-stat { display:block; padding: 1rem 1.1rem; border-radius: 16px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(6px); transition: background .15s, transform .15s; }
.hero-stat:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.hero-stat .v { font-size: 2.9rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.hero-stat .v span { font-size: 1.4rem; font-weight: 700; color: #9fc4ff; margin-left: 2px; }
.hero-stat .l { color: #b9c6e4; font-size: .84rem; margin-top: .3rem; }
.hero-stat.is-good .v { color: #5ee08a; }
.hero-stat.is-alert { background: linear-gradient(160deg, rgba(242,106,46,.28), rgba(242,106,46,.08)); border-color: rgba(242,106,46,.55); }
.hero-stat.is-alert .v { color: #ffb38f; } .hero-stat.is-alert .l { color: #ffd9c7; }
.chip-alert { display:inline-block; margin-top:.45rem; font-size:.72rem; font-weight:700; padding:.15rem .55rem; border-radius:999px; background: var(--spark); color:#fff; }
.meter { height: 6px; border-radius: 999px; background: rgba(159,196,255,.18); margin-top: .65rem; overflow: hidden; }
.meter span { display:block; height:100%; border-radius: 999px; background: var(--grad); }

/* segmented state bar */
.fleet-bar { display:flex; gap: 2px; height: 14px; margin-top: 1.3rem; border-radius: 999px; overflow: visible; }
.fleet-bar .seg { position: relative; display:block; min-width: 6px; height: 100%; flex-basis: 0; }
.fleet-bar .seg:first-child { border-radius: 999px 0 0 999px; } .fleet-bar .seg:last-child { border-radius: 0 999px 999px 0; }
.fleet-bar .seg:only-child { border-radius: 999px; }
.fleet-bar .seg:hover { filter: brightness(1.2); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.fleet-bar.is-light { height: 12px; margin: .4rem 0 .9rem; }
.fleet-legend { display:flex; flex-wrap:wrap; gap: .4rem 1.1rem; margin-top: .8rem; font-size: .85rem; }
.fleet-legend .lg { color: #d6e0f5; } .fleet-legend .lg b { color:#fff; margin-left:.25rem; font-weight: 700; }
.fleet-legend .lg.is-zero { color: #6f7ca0; } .fleet-legend .lg.is-zero b { color: #6f7ca0; }
.fleet-legend .lg:hover { color:#fff; }
.dot { display:inline-block; width:9px; height:9px; border-radius: 3px; margin-right: .45rem; vertical-align: 1px; }
.st-issued { background: var(--st-issued); } .st-available { background: var(--st-available); } .st-inspect { background: var(--st-inspect); }
.st-missing { background: var(--st-missing); } .st-reserved { background: var(--st-reserved); } .st-repair { background: var(--st-repair); }
.st-expired { background: var(--st-expired); } .st-unknown { background: var(--st-unknown); }

/* tooltips for data marks */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position:absolute; left:50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  white-space: nowrap; background: #0b1124; color:#fff; font-size:.75rem; font-weight:600; padding:.3rem .55rem; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 20; pointer-events:none; }

/* section heads */
.section-head { display:flex; align-items:center; gap:.6rem; margin: 1.8rem 0 .75rem; }
.section-head h2 { font-size: 1.15rem; font-weight: 750; letter-spacing: -.01em; margin: 0; }
.pill { font-size: .75rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; }
.pill-warn { background: var(--warn-bg); color: var(--warn); } .pill-good { background: var(--good-bg); color: var(--good); }

/* attention tiles */
.att-grid { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .8rem; }
.att { position: relative; display:block; text-decoration:none; color: var(--ink); background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem 1.05rem; box-shadow: var(--shadow-1); transition: transform .15s, box-shadow .15s, border-color .15s; overflow:hidden; }
.att:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--ink); }
.att::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: transparent; }
.att-ic { position:absolute; right: .9rem; top: .85rem; font-size: 1.15rem; color: var(--ink-3); }
.att-n { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.att-l { font-weight: 650; margin-top: .35rem; font-size: .9rem; }
.att-s { color: var(--ink-3); font-size: .78rem; margin-top: .1rem; }
.att.is-warn::before { background: var(--st-inspect); } .att.is-warn .att-n { color: var(--warn); } .att.is-warn .att-ic { color: #e0a100; }
.att.is-bad::before { background: var(--st-expired); } .att.is-bad .att-n { color: var(--bad); } .att.is-bad .att-ic { color: var(--bad); }
.att.is-bad { background: linear-gradient(180deg, #fff 60%, #fff6f6); }
.att.is-clear { background: #fafbfd; box-shadow: none; }
.att.is-clear .att-n { font-size: 1.7rem; color: #b5bdcc; } .att.is-clear .att-l { color: var(--ink-2); font-weight: 600; }
.att.is-clear .att-ic { color: #c9d1de; }

/* visual panels */
.viz-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; margin-top: 1.4rem; }
.panel { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1); }
.panel-h { display:flex; align-items: baseline; justify-content: space-between; gap:.5rem; margin-bottom: .8rem; }
.panel-h h3 { font-size: 1rem; font-weight: 750; margin: 0; letter-spacing: -.01em; }
.muted { color: var(--ink-3); font-size: .8rem; }
.big-inline { font-size: 1.35rem; color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.hbars { display:flex; flex-direction:column; gap: .55rem; }
.hbar { display:grid; grid-template-columns: minmax(90px, 38%) 1fr 2.6rem; align-items:center; gap:.6rem; text-decoration:none; color: var(--ink); font-size: .86rem; }
.hbar:hover { color: var(--ink); } .hbar:hover .hbar-f { filter: brightness(1.1); }
.hbar-l { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hbar-t { height: 12px; background: #eef2f8; border-radius: 999px; overflow: hidden; }
.hbar-f { display:block; height:100%; border-radius: 0 4px 4px 0; background: var(--st-issued); min-width: 4px; }
.hbar-f.alt { background: #5598e7; }
.hbar-v { text-align:right; font-weight: 750; }
.wlist { display:grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; }
.wrow { display:flex; align-items:center; gap:.35rem; text-decoration:none; color: var(--ink-2); font-size: .86rem; padding: .2rem 0; }
.wrow b { color: var(--ink); margin-left:auto; font-weight: 750; } .wrow .muted { width: 2.6rem; text-align: right; }
.wrow:hover { color: var(--ink); }

/* low-emphasis strip */
.mini-strip { display:flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.mini { display:flex; align-items: baseline; gap: .4rem; text-decoration:none; color: var(--ink-2); background: transparent;
  border: 1px dashed #d5dbe6; border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; transition: background .15s, border-color .15s; }
.mini b { color: var(--ink); font-size: .98rem; font-weight: 750; }
.mini:hover { background: #fff; border-style: solid; border-color: #c9d3e6; color: var(--ink); }
.mini.is-warn b { color: var(--warn); } .mini.is-bad b { color: var(--bad); }

@media (max-width: 1199px) { .att-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .viz-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .hero { padding: 1.2rem 1.1rem 1rem; border-radius: 18px; }
  .hero-grid { grid-template-columns: 1fr; gap: .9rem; }
  .hero-stat .v { font-size: 2.2rem; }
  .att-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .att-n { font-size: 2.1rem; }
  .viz-grid { grid-template-columns: 1fr; }
  .dash-title { font-size: 1.5rem; }
  .dash-actions { margin-left: 0; }
  .metric .num { font-size: 1.4rem; } .table-toolbar .form-control { max-width: 100%; }
}
main.container-fluid { max-width: 1520px; }

/* ==========================================================================
   PAGES & TABLES (v1.3)
   ========================================================================== */
.page-head { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem 1rem; margin: .25rem 0 1.1rem; }
.page-head .page-actions, .page-actions { margin-left:auto; display:flex; flex-wrap:wrap; gap:.5rem; }
.page-kicker { color: var(--ink-3); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.page-kicker a { color: var(--ink-3); text-decoration:none; } .page-kicker a:hover { color: var(--brand); }
.page-head .page-title { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; }
.page-sub { color: var(--ink-2); margin: .2rem 0 0; font-size: .92rem; }
.hint { color: var(--ink-3); font-size: .82rem; margin: 0 0 .6rem; } .hint i { color: var(--brand); }

/* segmented tabs (also restyles Bootstrap nav-tabs everywhere) */
.seg-tabs, .nav-tabs { display:inline-flex; flex-wrap:wrap; gap:.25rem; padding:.3rem; background:#e9edf5; border-radius: 14px; border:0; }
.seg-tabs .nav-link, .nav-tabs .nav-link { border:0 !important; border-radius: 10px !important; color: var(--ink-2); font-weight:600; padding:.45rem .95rem; margin:0; }
.seg-tabs .nav-link:hover, .nav-tabs .nav-link:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.seg-tabs .nav-link.active, .nav-tabs .nav-link.active { background:#fff !important; color: var(--ink) !important; box-shadow: 0 1px 3px rgba(15,23,42,.12); }

/* table shell + toolbar */
.table-shell { background: var(--surface); border:1px solid var(--line); border-radius: 18px; padding: .9rem; box-shadow: var(--shadow-1); }
.table-shell.is-compact { padding: .7rem; }
.table-shell .tabulator { box-shadow:none; border-radius: 12px; }
.table-toolbar { gap: .5rem !important; margin-bottom: .7rem !important; }
.search-box { position: relative; flex: 1 1 260px; max-width: 360px; }
.search-box i { position:absolute; left:.75rem; top:50%; transform: translateY(-50%); color: var(--ink-3); font-size:.85rem; pointer-events:none; }
.search-box .form-control { padding-left: 2.1rem; height: 36px; background:#f6f8fc; border-color: transparent; max-width: none !important; }
.search-box .form-control:focus { background:#fff; }
.table-toolbar .form-select { height: 36px; max-width: 260px; background-color:#f6f8fc; border-color: transparent; }
.table-toolbar .btn { height: 36px; display:inline-flex; align-items:center; gap:.35rem; }
.count-pill { font-size:.78rem; font-weight:700; color: var(--ink-2); background:#eef2f8; padding:.3rem .7rem; border-radius:999px; }
.count-pill:empty { display:none; }
[data-chips] .badge { background:#eef4ff !important; color: var(--brand) !important; border: 0 !important; font-weight:600; }

/* tabulator skin */
.tabulator { border:1px solid var(--line-2) !important; background:#fff; }
.tabulator .tabulator-header { background:#fff !important; border-bottom: 1px solid var(--line) !important; }
.tabulator .tabulator-header .tabulator-col { border-right: 0 !important; }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: .6rem .7rem .35rem; }
.tabulator .tabulator-col-title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tabulator .tabulator-header-filter input, .tabulator .tabulator-header-filter select { font-size:.78rem !important; padding: .2rem .45rem !important;
  border: 1px solid transparent !important; background: #f4f6fb !important; border-radius: 8px !important; height: 28px; }
.tabulator .tabulator-header-filter input:focus { border-color: #8db0fa !important; background:#fff !important; outline:0; }
.tabulator .tabulator-col .tabulator-col-sorter .tabulator-arrow { border-bottom-color: #c3cad8 !important; }
.tabulator .tabulator-row { border-bottom: 1px solid var(--line-2) !important; min-height: 46px; }
.tabulator .tabulator-row .tabulator-cell { border-right: 0 !important; padding: .72rem .7rem; }
.tabulator .tabulator-row.tabulator-row-even { background:#fff; }
.tabulator .tabulator-row:hover { background: #f3f7ff !important; }
.tabulator .tabulator-row .tabulator-frozen.tabulator-frozen-left { border-right: 0 !important; box-shadow: 6px 0 8px -8px rgba(15,23,42,.25); }
.tabulator .tabulator-cell.num-cell { font-variant-numeric: tabular-nums; font-weight: 600; }
.tabulator .tabulator-footer { background:#fff !important; border-top: 1px solid var(--line-2) !important; padding: .55rem .6rem; }
.tabulator .tabulator-footer .tabulator-page { border-radius: 8px !important; border: 1px solid var(--line) !important; background:#fff !important; margin: 0 2px; }
.tabulator .tabulator-footer .tabulator-page.active { background: var(--grad) !important; color:#fff !important; border-color: transparent !important; }
.tabulator .tabulator-footer .tabulator-page-size { border-radius: 8px; border-color: var(--line); }
.cell-link { font-weight: 650; color: var(--brand); text-decoration: none; }
.cell-link:hover { text-decoration: underline; }

/* status chips (tables) */
.chip { display:inline-flex; align-items:center; gap:.38rem; font-size:.76rem; font-weight:650; padding:.2rem .6rem .2rem .5rem; border-radius:999px; white-space:nowrap; }
.chip i { width:7px; height:7px; border-radius:50%; background: currentColor; display:inline-block; }
.chip-good { background:#e7f6ea; color:#0a7a17; } .chip-blue { background:#e8f0fe; color:#1f5fd1; }
.chip-violet { background:#efedfd; color:#5b4cd6; } .chip-warn { background:#fff3d6; color:#9a5b00; }
.chip-bad { background:#fdeaea; color:#bb2323; } .chip-neutral { background:#eef1f5; color:#5b6575; }

/* people & stock cells */
.holder-person { display:inline-flex; align-items:center; gap:.5rem; }
.avatar-xs { width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; font-size:.62rem; font-weight:800; color:#fff;
  background: var(--grad); flex: 0 0 24px; letter-spacing:.02em; }
.holder-stock { display:inline-flex; align-items:center; gap:.35rem; color:#5b4cd6; font-weight:600; font-size:.84rem; background:#f2f0fe; padding:.15rem .55rem; border-radius:8px; }

/* detail pages */
.detail-head { display:flex; flex-wrap:wrap; align-items:center; gap: .9rem 1rem; margin: .25rem 0 1.2rem; }
.detail-head .page-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; }
.detail-head > .ms-auto { margin-left:auto; }
.avatar-lg { width:60px; height:60px; border-radius: 18px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.35rem;
  background: var(--grad); box-shadow: 0 10px 24px -12px rgba(42,109,244,.8); flex: 0 0 60px; }
.avatar-lg.is-asset { background: linear-gradient(140deg, #0d1531, #1b2b62); font-size: 1.6rem; }
.card-header { background:#fff !important; font-weight: 700; padding: .85rem 1.1rem; }
.card-body { padding: 1.1rem; }
.card .table { margin-bottom: 0; }
.card .table thead th { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); background:#fff; }
.card .table td { border-color: var(--line-2); padding-top:.6rem; padding-bottom:.6rem; }
.card .table tbody tr:hover { background:#f6f9ff; }

/* warehouses */
.wh-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.wh-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow-1); }
.wh-card.is-off { opacity: .6; }
.wh-top { display:flex; align-items:center; gap:.75rem; }
.wh-ic { width:44px; height:44px; border-radius: 12px; display:grid; place-items:center; color:#fff; background: linear-gradient(140deg,#0d1531,#1b2b62); font-size:1.2rem; }
.wh-name { font-weight: 800; font-size: 1.05rem; letter-spacing:-.01em; } .wh-loc { color: var(--ink-3); font-size:.82rem; }
.wh-stats { display:grid; grid-template-columns: repeat(3,1fr); gap:.5rem; margin: .9rem 0 .4rem; }
.wh-stat { background:#f6f8fc; border-radius: 12px; padding:.55rem .65rem; text-decoration:none; color: var(--ink-2); display:block; }
.wh-stat b { display:block; font-size: 1.45rem; font-weight: 800; color: var(--ink); letter-spacing:-.02em; line-height:1.1; }
.wh-stat span { font-size: .72rem; }
.wh-meta { color: var(--ink-2); font-size: .8rem; display:grid; gap:.2rem; margin-top:.4rem; }
.mini.is-store { border-style: solid; border-color: #ddd8fb; background:#f7f6ff; color:#5b4cd6; }
.mini.is-store i { color:#5b4cd6; }
@media (max-width: 767px) { .page-head .page-actions { margin-left:0; } .search-box { max-width:none; } .table-shell { padding:.6rem; border-radius:14px; } }