/* Raptool Meeting Booking — admin console app.css
   App-specific rules only; everything else comes from shared/theme.css. */

:root{
  /* categorical chart colours — each one is a real design token, never a
     raw hex, so charts stay correct in dark mode automatically. */
  --chart-1:var(--brand);
  --chart-2:var(--info);
  --chart-3:var(--ok);
  --chart-4:var(--warn);
  --chart-5:var(--danger);
  --chart-6:var(--ink-3);
  --sidebar-w:236px;
}

body{background:var(--bg-sunken)}

/* ------------------------------------------------------------- shell */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:none;background:var(--bg-raised);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;
}
.brand-row{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--brand);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;font-weight:750;font-size:15px;flex:none}
.brand-name{font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand-sub{font-size:11.5px;color:var(--ink-3)}

.nav{list-style:none;margin:6px 0;padding:0 10px;display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14px;font-weight:560;
}
.nav a:hover{background:var(--bg-sunken);text-decoration:none}
.nav a.is-active{background:var(--brand-soft);color:var(--brand)}
.nav a .ic{display:flex;flex:none}
.nav-section{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  padding:16px 22px 6px}

.side-foot{margin-top:auto;padding:14px;border-top:1px solid var(--line)}
.side-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-sm)}
.side-user-av{width:32px;height:32px;border-radius:50%;background:var(--bg-sunken);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.side-user-name{font-size:13.5px;font-weight:620;line-height:1.25}
.side-user-role{font-size:11.5px;color:var(--ink-3);text-transform:capitalize}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 28px;border-bottom:1px solid var(--line);background:var(--bg-raised);position:sticky;top:0;z-index:20}
.topbar-crumb{font-size:13.5px;font-weight:620;color:var(--ink-2)}
.view{padding:22px 28px 60px;max-width:1360px;width:100%;margin:0 auto}

@media (max-width:920px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .18s ease;z-index:90;box-shadow:var(--shadow-3)}
  .sidebar.is-open{transform:none}
  .sidebar-scrim{position:fixed;inset:0;background:rgba(10,13,18,.4);z-index:85}
  .menu-btn{display:inline-flex}
  .view{padding:18px 16px 48px}
  .topbar{padding:12px 16px}
}
.menu-btn{display:none}

/* ------------------------------------------------------------- helpers */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pagehead p{color:var(--ink-3);font-size:13.5px;margin:4px 0 0;max-width:62ch}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .input,.toolbar .select{width:auto;min-width:150px}
.spacer{flex:1}
.segmented{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden}
.segmented button{border:0;background:var(--bg-raised);color:var(--ink-2);padding:0 13px;height:32px;
  font:inherit;font-size:13px;font-weight:560;cursor:pointer;border-right:1px solid var(--line-strong)}
.segmented button:last-child{border-right:0}
.segmented button.is-on{background:var(--brand);color:var(--brand-ink)}
.section-title{font-size:15px;font-weight:650;margin:0 0 2px}
.section-help{font-size:12.5px;color:var(--ink-3);margin:0 0 12px}

/* ------------------------------------------------------------- table wrap */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-raised)}
.table-wrap .table{min-width:100%}
.table th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.table th[data-sort] .sort-ic{display:inline-block;width:9px;opacity:.5;margin-left:3px}
.table th[data-sort].is-sorted .sort-ic{opacity:1}
.table td.num,.table th.num{text-align:right}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.name-cell{display:flex;align-items:center;gap:9px}
.name-cell .ic{color:var(--ink-3);flex:none}

/* ------------------------------------------------------------- kpi row */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi-label{font-size:12px;color:var(--ink-3);font-weight:620;letter-spacing:.01em}
.kpi-value{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:4px 0 6px}
.kpi-value small{font-size:14px;font-weight:600;color:var(--ink-3)}
.kpi-note{font-size:12px;color:var(--ink-3);line-height:1.4}
.kpi.is-warn .kpi-value{color:var(--warn)}
.kpi.is-danger .kpi-value{color:var(--danger)}
.kpi.is-ok .kpi-value{color:var(--ok)}

/* ------------------------------------------------------------- dashboard grid */
.dash-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.dash-grid .span2{grid-column:1 / -1}
@media (max-width:1080px){.dash-grid{grid-template-columns:1fr}}
.chart-card .card-head{padding:14px 18px}
.chart-card .card-head h3{font-size:14.5px}
.chart-card .card-head .hint{margin-top:2px}
.chart-box{padding:6px 18px 14px;min-height:220px}
.chart-box.tall{min-height:260px}
.chart-box.short{min-height:140px}

.insight-card{background:var(--brand-soft);border:1px solid var(--line)}
.insight-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.insight-list li{display:flex;gap:10px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.insight-list .ic{color:var(--brand);flex:none;margin-top:1px}
.insight-empty{color:var(--ink-3);font-size:13px}

/* ------------------------------------------------------------- chart tooltip */
.chart-tip{position:fixed;z-index:300;background:var(--ink);color:var(--bg);padding:7px 10px;border-radius:7px;
  font-size:12.5px;line-height:1.4;box-shadow:var(--shadow-2);pointer-events:none;max-width:220px}
.chart-tip .muted{color:var(--ink-3)}
:root:not([data-theme="light"]) .chart-tip{color:var(--bg)}

/* ------------------------------------------------------------- donut */
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut-svg{position:relative;flex:none}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none}
.donut-center strong{font-size:20px;font-weight:700;letter-spacing:-.02em}
.donut-center span{font-size:11px;color:var(--ink-3)}
.donut-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1;min-width:140px}
.donut-legend li{display:flex;align-items:center;gap:8px;font-size:13px}
.donut-sw{width:10px;height:10px;border-radius:3px;flex:none}
.donut-lbl{flex:1;color:var(--ink-2)}
.donut-val{color:var(--ink-3);font-size:12px}

/* ------------------------------------------------------------- drawer */
.drawer-back{position:fixed;inset:0;background:rgba(10,13,18,.5);z-index:80;display:flex;justify-content:flex-end}
.drawer{width:min(460px,100%);height:100%;background:var(--bg-raised);box-shadow:var(--shadow-3);
  display:flex;flex-direction:column;animation:drawer-in .16s ease}
@keyframes drawer-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.drawer-head p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}
.drawer-body{flex:1;overflow:auto;padding:18px 22px}
.drawer-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--line)}

details.adv{margin-top:6px;border-top:1px solid var(--line);padding-top:14px}
details.adv summary{cursor:pointer;font-size:13px;font-weight:620;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:6px}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary .chev{transition:transform .15s}
details.adv[open] summary .chev{transform:rotate(90deg)}
details.adv .adv-body{padding-top:14px}

.chip-grid{display:flex;flex-wrap:wrap;gap:7px}
.chip-btn{all:unset;box-sizing:border-box}

/* icon picker */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;max-height:260px;overflow:auto;
  padding:2px;border:1px solid var(--line);border-radius:var(--r-sm)}
.icon-opt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;cursor:pointer;color:var(--ink-2);font:inherit;font-size:10.5px}
.icon-opt:hover{background:var(--bg-sunken)}
.icon-opt.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.icon-opt:focus-visible{outline:none;box-shadow:var(--focus)}

/* ------------------------------------------------------------- map editor */
.map-editor{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-sunken);overflow:hidden;position:relative}
.map-editor svg{display:block;width:100%;height:auto;touch-action:none}
.map-room-box{fill:var(--brand);fill-opacity:.28;stroke:var(--brand);stroke-width:2;cursor:move}
.map-room-other{fill:var(--ink-3);fill-opacity:.12;stroke:var(--ink-3);stroke-opacity:.4;stroke-width:1}
.map-handle{fill:var(--brand);stroke:var(--bg);stroke-width:1.5;cursor:nwse-resize}
.map-coords{display:flex;gap:10px;margin-top:10px}
.map-coords .field{margin-bottom:0;flex:1}

/* ------------------------------------------------------------- freshness dot */
.fresh{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.fresh-green{background:var(--ok)}
.fresh-amber{background:var(--warn)}
.fresh-red{background:var(--danger)}
.fresh-grey{background:var(--ink-3)}

/* ------------------------------------------------------------- settings */
.settings-group{margin-bottom:26px}
.settings-group h2{font-size:16px;margin-bottom:2px}
.settings-group>p{color:var(--ink-3);font-size:13px;margin:0 0 14px}
.setting-row{display:grid;grid-template-columns:260px 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.setting-row:first-of-type{border-top:none}
.setting-label{font-size:13.5px;font-weight:620}
.setting-help{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.setting-control{max-width:420px}
@media (max-width:720px){.setting-row{grid-template-columns:1fr}}
.raw-json{background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;white-space:pre-wrap;word-break:break-word;
  max-height:420px;overflow:auto;color:var(--ink-2)}
.day-chip-row{display:flex;gap:6px}

/* ------------------------------------------------------------- login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-sunken);padding:20px}
.login-card{width:100%;max-width:360px}
.login-logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:22px}

/* ------------------------------------------------------------- misc */
.help-block{background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.help-block h3{font-size:14px;margin-bottom:8px}
.help-block ol{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.pill-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--bg-raised);
  border:1px solid var(--line-strong);border-radius:6px;padding:1px 7px;font-size:13px}
.csv-preview{border:1px solid var(--line);border-radius:var(--r-sm);max-height:260px;overflow:auto}
.csv-preview table{table-layout:fixed}
.csv-preview td,.csv-preview th{overflow-wrap:anywhere;word-break:break-word}
.error-list{color:var(--danger);font-size:12.5px;margin:8px 0 0;padding-left:18px}
.import-errors{margin-top:10px}
.field-inline{display:flex;align-items:center;gap:8px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.two-col{grid-template-columns:1fr}}

/* --------------------------------------------------------- badge QR */
.badge-code-cell{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.03em;color:var(--ink-2)}
.badge-panel{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.badge-qr-host{background:#fff;border-radius:var(--r);padding:12px;box-shadow:var(--shadow-1)}
.badge-qr-host svg{display:block;width:180px;height:180px}
.badge-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px;font-weight:650;letter-spacing:.12em}