/* ============================================================
   box catalog — design system (slate + indigo, sidebar dashboard)
   ============================================================ */
:root{
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f8fafc;
  --border:#e6e9f0; --border-2:#eef1f6;
  --text:#0f172a; --muted:#64748b; --faint:#94a3b8;
  --accent:#4f46e5; --accent-weak:#eef2ff; --accent-text:#4338ca;
  --good:#16a34a; --good-weak:#eafaf0;
  --warn:#d97706; --warn-weak:#fdf3e7;
  --bad:#dc2626;  --bad-weak:#fdecec;
  --info:#0891b2; --info-weak:#e6f7fb;
  --side-bg:#0f172a; --side-2:#111c31; --side-text:#cbd5e1; --side-muted:#7c8aa5; --side-active:#1e293b;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow-lg:0 10px 30px rgba(15,23,42,.12);
  --radius:14px; --radius-sm:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-bs-theme="dark"]{
  --bg:#0b1120; --surface:#121a2a; --surface-2:#0e1626;
  --border:#22304a; --border-2:#1a2740;
  --text:#e6ebf4; --muted:#93a1b8; --faint:#6b7a94;
  --accent:#6366f1; --accent-weak:#1e1b4b; --accent-text:#c7d2fe;
  --good-weak:#0e2a1c; --warn-weak:#2a2010; --bad-weak:#2a1414; --info-weak:#08252c;
  --side-bg:#0a0f1c; --side-2:#0e1728; --side-active:#16213a;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 34px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font); background:var(--bg); color:var(--text); font-size:14px; line-height:1.45;}
a{color:var(--accent-text); text-decoration:none}
.mono{font-variant-numeric:tabular-nums}
.num{text-align:right !important}
.muted{color:var(--muted)}

/* ---------------- layout ---------------- */
.app{display:flex; min-height:100vh}
.sidebar{
  width:238px; flex:0 0 238px; background:var(--side-bg); color:var(--side-text);
  position:fixed; inset:0 auto 0 0; height:100vh; display:flex; flex-direction:column;
  padding:18px 14px; z-index:40; transition:transform .22s ease;
}
.brand{display:flex; align-items:center; gap:9px; font-size:1.15rem; font-weight:800; letter-spacing:-.02em; color:#fff; padding:6px 8px 16px;}
.brand small{color:var(--side-muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em}
.side-nav{display:flex; flex-direction:column; gap:3px; margin-top:6px}
.side-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  color:var(--side-text); font-weight:500; font-size:.92rem; transition:background .12s, color .12s;
}
.side-nav a .ic{font-size:1.05rem; width:20px; text-align:center; opacity:.9}
.side-nav a:hover{background:var(--side-2); color:#fff}
.side-nav a.active{background:var(--side-active); color:#fff}
.side-nav a.active .ic{opacity:1}
.side-foot{margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07)}
.sync-pill{
  flex:1; display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:10px;
  background:var(--side-2); color:var(--side-text); font-size:.78rem; font-weight:500; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.sync-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--faint); flex:0 0 auto}
.sync-pill.ok .dot{background:var(--good)} .sync-pill.run .dot{background:var(--warn); animation:pulse 1s infinite} .sync-pill.err .dot{background:var(--bad)}
@keyframes pulse{50%{opacity:.35}}
.icon-btn{background:var(--side-2); color:var(--side-text); border:none; border-radius:10px; width:38px; height:38px; cursor:pointer; font-size:1rem}
.icon-btn:hover{background:var(--side-active); color:#fff}

.content{margin-left:238px; flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--border); padding:14px 24px;
}
.page-title{font-size:1.28rem; font-weight:800; letter-spacing:-.02em; margin:0}
.page-sub{color:var(--muted); font-size:.82rem; margin-top:2px}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.menu-btn{display:none; background:none; border:1px solid var(--border); border-radius:9px; width:38px; height:38px; font-size:1.1rem; cursor:pointer; color:var(--text)}
.page{padding:20px 24px 60px; max-width:1500px; width:100%}
.backdrop{display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:35}

/* ---------------- KPI cards ---------------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:13px; margin-bottom:8px}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.kpi .top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px}
.kpi .label{font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.kpi .chip{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:.95rem; background:var(--accent-weak); color:var(--accent-text)}
.kpi .chip.good{background:var(--good-weak); color:var(--good)} .kpi .chip.warn{background:var(--warn-weak); color:var(--warn)}
.kpi .chip.bad{background:var(--bad-weak); color:var(--bad)} .kpi .chip.info{background:var(--info-weak); color:var(--info)}
.kpi .chip.neutral{background:var(--surface-2); color:var(--muted)}
.kpi .value{font-size:1.62rem; font-weight:800; letter-spacing:-.02em; line-height:1.05}
.kpi .sub{font-size:.76rem; color:var(--muted); margin-top:4px}
.kpi .sub .up{color:var(--good); font-weight:600} .kpi .sub .down{color:var(--bad); font-weight:600}

/* ---------------- panels / sections ---------------- */
.section-title{font-size:.95rem; font-weight:700; letter-spacing:-.01em; margin:26px 0 12px; display:flex; align-items:center; gap:9px; color:var(--text)}
.section-title .tag{font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); padding:2px 8px; border-radius:20px}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.panel-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border)}
.panel-head h3{margin:0; font-size:.9rem; font-weight:700}
.panel-body{padding:14px 16px}
.panel-body.tight{padding:6px 10px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-7-5{display:grid; grid-template-columns:1.4fr 1fr; gap:16px}
@media(max-width:1050px){ .grid-2,.grid-7-5{grid-template-columns:1fr} }

/* ---------------- buttons / forms ---------------- */
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:10px; padding:8px 14px; font-size:.86rem; font-weight:600; cursor:pointer; transition:.12s}
.btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.big{padding:12px 22px; font-size:1rem; border-radius:12px}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-group{display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface)}
.btn-group button{border:none; background:transparent; color:var(--muted); padding:8px 13px; font-size:.83rem; font-weight:600; cursor:pointer; border-right:1px solid var(--border)}
.btn-group button:last-child{border-right:none}
.btn-group button.active{background:var(--accent); color:#fff}
.field label{display:block; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:4px}
.input,select.input{background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:9px 12px; font-size:.9rem; width:100%}
.input:focus,select.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak)}
.searchbar{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:6px 8px 6px 16px; box-shadow:var(--shadow-lg)}
.searchbar input{flex:1; border:none; background:transparent; color:var(--text); font-size:1.1rem; padding:12px 0; outline:none}
.searchbar .ic{font-size:1.15rem; color:var(--muted)}
.chip-btn{cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:20px; padding:5px 12px; font-size:.8rem; font-weight:500}
.chip-btn:hover{border-color:var(--accent); color:var(--accent-text)}

/* ---------------- badges ---------------- */
.badge-soft{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:600}
.b-good{background:var(--good-weak); color:var(--good)} .b-warn{background:var(--warn-weak); color:var(--warn)}
.b-bad{background:var(--bad-weak); color:var(--bad)} .b-info{background:var(--info-weak); color:var(--info)}
.b-neutral{background:var(--surface-2); color:var(--muted); border:1px solid var(--border)}
.attr-badge{display:inline-block; background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:1px 7px; font-size:.75rem; margin:1px 3px 1px 0}

/* ---------------- distribution bars ---------------- */
.dist-row{display:grid; grid-template-columns:150px 1fr 60px; gap:10px; align-items:center; margin-bottom:6px; font-size:.84rem}
.dist-bar{background:var(--surface-2); border-radius:6px; overflow:hidden; height:12px}
.dist-bar>span{display:block; height:100%; background:linear-gradient(90deg,var(--accent),#818cf8); border-radius:6px}
.dist-row .c{text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------------- progress + log ---------------- */
.progress-track{height:12px; background:var(--surface-2); border-radius:20px; overflow:hidden; border:1px solid var(--border)}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--accent),#818cf8); width:0; transition:width .4s ease; border-radius:20px}
.logbox{background:#0b1220; color:#cbd5e1; border-radius:12px; padding:14px 16px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; line-height:1.6; max-height:320px; overflow:auto; white-space:pre-wrap}
.state{display:inline-flex; align-items:center; gap:8px; font-weight:600}
.state .dot{width:10px;height:10px;border-radius:50%;background:var(--faint)}
.state.ok .dot{background:var(--good)} .state.run .dot{background:var(--warn); animation:pulse 1s infinite} .state.err .dot{background:var(--bad)} .state.idle .dot{background:var(--faint)}

/* ---------------- alerts ---------------- */
.alert{border-radius:12px; padding:12px 15px; font-size:.86rem; border:1px solid transparent}
.alert.warn{background:var(--warn-weak); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.alert.err{background:var(--bad-weak); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.alert.info{background:var(--info-weak); color:var(--info); border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.hint{text-align:center; color:var(--muted); padding:56px 16px}
.hint .big{font-size:2.6rem; display:block; margin-bottom:10px; opacity:.5}

/* ---------------- tables (DataTables) ---------------- */
table.dataTable{border-collapse:collapse !important; width:100% !important; font-size:.86rem}
table.dataTable thead th{background:var(--surface-2); color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700; border-bottom:1px solid var(--border) !important; padding:10px 12px; white-space:nowrap}
table.dataTable tbody td{border-bottom:1px solid var(--border-2) !important; padding:9px 12px; vertical-align:middle}
table.dataTable tbody tr:hover td{background:var(--surface-2)}
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:8px !important; padding:4px 10px !important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--accent) !important; color:#fff !important; border:none !important}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:5px 9px}
.dataTables_wrapper{color:var(--muted); font-size:.83rem}
.dt-buttons .btn{margin-right:6px}
.cell-wrap{max-width:260px; white-space:normal}
.tbl-scroll{overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
.tbl-scroll .panel-body{padding:6px 12px}

/* ---------------- responsive ---------------- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .backdrop{display:block}
  .content{margin-left:0}
  .menu-btn{display:grid; place-items:center}
  .page{padding:16px}
  .topbar{padding:12px 16px}
}

/* ---------------- small utilities ---------------- */
.flex{display:flex; align-items:center; gap:10px}
.flex.wrap{flex-wrap:wrap}
.flex.top{align-items:flex-start}
.between{justify-content:space-between}
.ms-auto{margin-left:auto}
.gap-6{gap:6px}
.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mb-2{margin-bottom:12px}.mb-0{margin-bottom:0}
.small{font-size:.8rem}
.hidden{display:none !important}
.text-good{color:var(--good)}.text-bad{color:var(--bad)}.text-warn{color:var(--warn)}
.w-100{width:100%}
.d-none{display:none !important}