/* ===== AMC Spark Admin — Theme ===== */
:root{
  --ink:#0f172a; --ink-sub:#1f2937; --muted:#64748b; --muted-2:#94a3b8;
  --bg:#f6f8fb; --bg-2:#eef2f7; --panel:#ffffff; --line:#e5e7eb;
  --brand:#0ea5ff; --brand-2:#22c55e; --accent:#f59e0b;
  --danger:#ef4444; --ok:#16a34a; --warn:#ff9500; --info:#0ea5ff;
  --radius:14px; --radius-lg:18px; --shadow:0 12px 34px rgba(2,6,23,.08);
  --soft:0 8px 22px rgba(15,23,42,.10); --w:1240px;
}
html[data-theme="dark"]{
  --ink:#e5e7eb; --ink-sub:#cbd5e1; --muted:#94a3b8; --muted-2:#b6c0d0;
  --bg:#0b1020; --bg-2:#0c1328; --panel:#0f172a; --line:#20304a;
  --brand:#11b5ff; --brand-2:#22c55e; --accent:#f59e0b;
  --danger:#ef5350; --ok:#84cc16; --warn:#ffb020; --info:#38bdf8;
  --shadow:0 18px 44px rgba(2,6,23,.45); --soft:0 14px 30px rgba(2,6,23,.35);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  min-height:100dvh;
}

/* Reusables */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem .95rem; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font-weight:800; cursor:pointer;
  text-decoration:none; transition:transform .15s ease, background .2s ease, border .2s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn.primary{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#00121b; border-color:color-mix(in srgb,var(--line) 60%, transparent);
  box-shadow:var(--soft);
}
.btn.ghost{ background:transparent }
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--panel) 90%, transparent); font-size:.78rem; color:var(--muted) }
.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:999px; background:rgba(148,163,184,.12); border:1px solid var(--line) }
.small{ font-size:.9rem } .muted{ color:var(--muted) }

input,select,textarea{
  width:100%; padding:.72rem .85rem; border-radius:12px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 90%, transparent); color:var(--ink); outline:none;
}
input:focus,select:focus,textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%, transparent) }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:10; padding:10px 16px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#00121b; border-bottom:1px solid color-mix(in srgb,var(--line) 60%, transparent);
}
.topbar .wrap{ max-width:var(--w); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:12px }
.brand{ font-weight:900; letter-spacing:.2px }

/* Shell */
.dash{ max-width:var(--w); margin:18px auto; display:grid; grid-template-columns:280px 1fr; gap:16px; padding:0 12px }
.side{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:var(--shadow); height:max-content; position:sticky; top:72px;
}
.menu{ display:grid; gap:8px }
.menu .item{
  width:100%; text-align:left; border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 92%, transparent); border-radius:12px; padding:.65rem .8rem; cursor:pointer;
}
.menu .item.active{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%, transparent) }
.menu .sep{ height:1px; background:var(--line); margin:6px 0 }

.filters{ margin-top:12px; display:grid; gap:8px }
.legend{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; color:var(--muted) }
.legend .dot{ width:10px;height:10px;border-radius:50%; display:inline-block }
.legend .open{ background:#ff9500 } .legend .wip{ background:#0ea5ff } .legend .resolved{ background:#22c55e }

.main{ display:grid; gap:14px }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:var(--soft)
}
.card-title{ margin:0 0 6px; font-size:1rem; color:var(--ink-sub) }

/* Tabs */
.tab{ display:none } .tab.show{ display:block }

/* KPIs */
.kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.kpi.card{ text-align:center }
.kpi .lab{ color:var(--muted) }
.kpi .num{ font-weight:900; font-size:1.8rem }

/* Grids */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:980px){ .dash{ grid-template-columns:1fr } .grid-2{ grid-template-columns:1fr } }

/* Kanban */
.kanban{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
@media (max-width:1100px){ .kanban{ grid-template-columns:1fr 1fr } }
@media (max-width:720px){ .kanban{ grid-template-columns:1fr } }

.col{ background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden }
.col header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel) 92%, transparent) }
.lane{ padding:10px; display:grid; gap:10px; min-height:140px }

.ticket{ background:color-mix(in srgb,var(--panel) 98%, transparent); border:1px solid var(--line); border-radius:14px; padding:10px 12px; box-shadow:0 6px 18px rgba(2,6,23,.06); cursor:grab }
.ticket .t-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px }
.ticket .title{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ticket .meta{ color:var(--muted); font-size:.85rem; display:flex; gap:10px; flex-wrap:wrap }
.ticket .actions{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap }
.ticket.open{ border-color:#ff9500; box-shadow:0 6px 18px rgba(255,149,0,.15) }
.ticket.wip{ border-color:#0ea5ff; box-shadow:0 6px 18px rgba(14,165,233,.15) }
.ticket.resolved{ border-color:#22c55e; box-shadow:0 6px 18px rgba(34,197,94,.14) }
.ticket.overdue{ border-color:#ef4444 !important; box-shadow:0 6px 18px rgba(239,68,68,.18) !important }

/* Table */
.table-tools{ display:flex; align-items:center; justify-content:space-between }
.table{ margin-top:12px; border:1px solid var(--line); border-radius:16px; overflow:auto; background:var(--panel) }
table{ width:100%; border-collapse:collapse; min-width:940px }
th,td{ padding:10px 12px; border-bottom:1px solid var(--line); font-size:.93rem; vertical-align:top }
th{ background:color-mix(in srgb,var(--panel) 92%, transparent); text-align:left; position:sticky; top:0; z-index:1 }
.row-actions{ display:flex; gap:8px; flex-wrap:wrap }
tbody tr:hover{ background:color-mix(in srgb,var(--panel) 96%, transparent) }
tbody tr.row-open{ background:rgba(255,149,0,.06) }
tbody tr.row-wip{ background:rgba(14,165,233,.06) }
tbody tr.row-resolved{ background:rgba(34,197,94,.06) }
tbody tr.overdue{ background:rgba(239,68,68,.12) !important }

/* Drawer */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(560px,92vw);
  background:var(--panel); color:var(--ink); border-left:1px solid var(--line);
  transform:translateX(105%); transition:transform .25s ease; z-index:30; display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0) }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel) 92%, transparent) }
.drawer-body{ padding:14px; overflow:auto; display:grid; gap:12px; flex:1 }
.kv{ display:grid; gap:8px }
.files a{ margin-right:6px }

/* Heatmap */
.heat{ display:grid; grid-template-columns:repeat(24,1fr); gap:3px }
.heat .cell{ aspect-ratio:1/1; border-radius:6px; background:#e5e7eb }
html[data-theme="dark"] .heat .cell{ background:#1f2937 }
.heat .cell[data-v="1"]{ filter:brightness(1.04) }
.heat .cell[data-v="2"]{ filter:brightness(1.1) }
.heat .cell[data-v="3"]{ filter:brightness(1.18) }
.heat .cell[data-v="4"]{ filter:brightness(1.28) }
.heat .cell[data-v="5"]{ filter:brightness(1.4) }

/* Toast */
.toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:color-mix(in srgb,var(--panel) 92%, transparent); border:1px solid var(--line); border-radius:12px; padding:10px 14px; color:var(--ink); opacity:0; pointer-events:none; transition:.2s; z-index:40 }
.toast.show{ opacity:1; pointer-events:auto }

/* Scrollbar */
*{ scrollbar-color: color-mix(in srgb,var(--brand) 50%, var(--line)) transparent; scrollbar-width:thin }
::-webkit-scrollbar{ height:10px; width:10px }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--brand) 40%, var(--line)); border-radius:999px }
::-webkit-scrollbar-track{ background:transparent }

/* Print */
@media print{
  .topbar,.side,.drawer,.toast { display:none !important }
  body{ background:#fff }
  .table{ box-shadow:none; border:1px solid #ddd }
}