/* AltraSync shared UI system.
   Tokens and primitives lifted from the Billing home page so every page that
   opts in with data-as-ui matches it exactly.  Dark is the app default;
   body.theme-light opts into light, same convention as [data-bh-home]. */

html body [data-as-ui]{
  --as-bg:#f4f7fb; --as-surface:#fff; --as-soft:#f6f9fd;
  --as-text:#1f3550; --as-muted:#5a6d85; --as-border:#d9e2ee;
  --as-blue:#2368e8; --as-blue-soft:#e8f0fe; --as-on-blue:#fff;
  --as-green:#0f7a5c; --as-green-soft:#e7f6f0;
  --as-amber:#8a5200; --as-amber-soft:#fff4e0;
  --as-red:#b91f32;  --as-red-soft:#fdecee;
  --as-purple:#6b3fb0; --as-purple-soft:#f1ebfb;
  --as-gray:#5a6d85; --as-gray-soft:#eef2f7;
  display:block; min-width:0; color:var(--as-text); font-size:14px; line-height:1.45;
}
html body:not(.theme-light) [data-as-ui]{
  --as-bg:#111b29; --as-surface:#192738; --as-soft:#1e2e43;
  --as-text:#edf3ff; --as-muted:#b3c3d9; --as-border:#35506e;
  --as-blue:#8fb4ff; --as-blue-soft:#1f3354; --as-on-blue:#0b1626;
  --as-green:#7fdcc0; --as-green-soft:#123a31;
  --as-amber:#ffcc85; --as-amber-soft:#3d2c12;
  --as-red:#ff9aa7;  --as-red-soft:#43202a;
  --as-purple:#cfaeff; --as-purple-soft:#2c2342;
  --as-gray:#b3c3d9; --as-gray-soft:#233449;
}

/* ---- buttons: identical to .bh-btn on Billing home ---- */
html body [data-as-ui] .as-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:38px; padding:7px 12px;
  border:1px solid var(--as-border)!important; border-radius:8px!important;
  background:var(--as-surface)!important; background-image:none!important;
  color:var(--as-text)!important; -webkit-text-fill-color:var(--as-text)!important;
  font-weight:600; font-size:14px; white-space:nowrap;
  box-shadow:none!important; cursor:pointer; text-decoration:none;
}
html body [data-as-ui] .as-btn:hover,
html body [data-as-ui] .as-btn:focus-visible{ border-color:var(--as-blue)!important; }
html body [data-as-ui] .as-btn--primary{
  background:var(--as-blue)!important; border-color:var(--as-blue)!important;
  color:var(--as-on-blue)!important; -webkit-text-fill-color:var(--as-on-blue)!important;
}
html body [data-as-ui] .as-btn--sm{ min-height:30px; padding:4px 10px; font-size:13px; border-radius:7px!important; }
html body [data-as-ui] .as-btn[disabled],
html body [data-as-ui] .as-btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

html body [data-as-ui] .as-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* ---- surfaces ---- */
html body [data-as-ui] .as-card{
  border:1px solid var(--as-border)!important; border-radius:12px!important;
  background:var(--as-surface)!important; padding:16px; min-width:0;
}
html body [data-as-ui] .as-head{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  justify-content:space-between; margin:0 0 14px;
}
html body [data-as-ui] .as-head h1,
html body [data-as-ui] .as-head h2{ margin:0; font-size:22px; line-height:1.25; color:var(--as-text); }
html body [data-as-ui] .as-sub{ margin:2px 0 0; color:var(--as-muted); font-size:13px; }

/* ---- KPI tiles ---- */
html body [data-as-ui] .as-kpis{
  display:grid; gap:12px; margin:0 0 16px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
html body [data-as-ui] .as-kpi{
  border:1px solid var(--as-border)!important; border-radius:12px!important;
  background:var(--as-surface)!important; padding:14px 16px; min-width:0;
}
html body [data-as-ui] .as-kpi b{ display:block; font-size:24px; line-height:1.15; color:var(--as-text); }
html body [data-as-ui] .as-kpi span{ display:block; margin-top:4px; font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--as-muted); }
html body [data-as-ui] .as-kpi small{ display:block; margin-top:6px; font-size:12px; color:var(--as-muted); }
html body [data-as-ui] .as-kpi--good b{ color:var(--as-green); }
html body [data-as-ui] .as-kpi--warn b{ color:var(--as-amber); }
html body [data-as-ui] .as-kpi--bad  b{ color:var(--as-red); }

/* ---- chips / status pills ---- */
html body [data-as-ui] .as-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px!important;
  background:var(--as-gray-soft)!important; color:var(--as-text)!important;
  -webkit-text-fill-color:var(--as-text)!important;
  font-size:12px; font-weight:600; white-space:nowrap;
}
html body [data-as-ui] .as-chip--blue { background:var(--as-blue-soft)!important;  color:var(--as-blue)!important;  -webkit-text-fill-color:var(--as-blue)!important; }
html body [data-as-ui] .as-chip--green{ background:var(--as-green-soft)!important; color:var(--as-green)!important; -webkit-text-fill-color:var(--as-green)!important; }
html body [data-as-ui] .as-chip--amber{ background:var(--as-amber-soft)!important; color:var(--as-amber)!important; -webkit-text-fill-color:var(--as-amber)!important; }
html body [data-as-ui] .as-chip--red  { background:var(--as-red-soft)!important;   color:var(--as-red)!important;   -webkit-text-fill-color:var(--as-red)!important; }
html body [data-as-ui] .as-chip--purple{background:var(--as-purple-soft)!important;color:var(--as-purple)!important;-webkit-text-fill-color:var(--as-purple)!important; }

/* ---- tables ---- */
html body [data-as-ui] .as-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
html body [data-as-ui] .as-table th{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--as-border);
  background:var(--as-soft)!important; color:var(--as-muted)!important;
  font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
}
html body [data-as-ui] .as-table td{ padding:11px 12px; border-bottom:1px solid var(--as-border); vertical-align:top; color:var(--as-text); }
html body [data-as-ui] .as-table tbody tr:hover td{ background:var(--as-soft)!important; }
html body [data-as-ui] .as-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
html body [data-as-ui] .as-table .num.good{ color:var(--as-green); }
html body [data-as-ui] .as-table .num.warn{ color:var(--as-amber); }
html body [data-as-ui] .as-table small{ display:block; margin-top:2px; color:var(--as-muted); font-size:12px; }
html body [data-as-ui] .as-scroll{ overflow-x:auto; border:1px solid var(--as-border); border-radius:12px; background:var(--as-surface); }
html body [data-as-ui] .as-scroll .as-table th:first-child,
html body [data-as-ui] .as-scroll .as-table td:first-child{ padding-left:16px; }

/* ---- tabs ---- */
html body [data-as-ui] .as-tabs{ display:inline-flex; gap:3px; padding:3px; margin:0 0 12px;
  border:1px solid var(--as-border); border-radius:9px; background:var(--as-soft); }
html body [data-as-ui] .as-tabs button{
  min-height:30px; padding:4px 12px; border:0!important; border-radius:6px!important;
  background:transparent!important; background-image:none!important;
  color:var(--as-muted)!important; -webkit-text-fill-color:var(--as-muted)!important;
  font:600 13px/1.2 inherit; cursor:pointer; box-shadow:none!important;
}
html body [data-as-ui] .as-tabs button[aria-pressed="true"]{
  background:var(--as-surface)!important; color:var(--as-text)!important;
  -webkit-text-fill-color:var(--as-text)!important; box-shadow:0 1px 3px rgba(15,32,58,.15)!important;
}

/* ---- filter bar ---- */
html body [data-as-ui] .as-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0 0 14px; }
html body [data-as-ui] .as-filters label{ display:flex; flex-direction:column; gap:4px;
  font-size:12px; font-weight:600; color:var(--as-muted); }
html body [data-as-ui] .as-filters input,
html body [data-as-ui] .as-filters select{
  min-height:36px; padding:6px 10px;
  border:1px solid var(--as-border)!important; border-radius:8px!important;
  background:var(--as-surface)!important; background-image:none!important;
  color:var(--as-text)!important; -webkit-text-fill-color:var(--as-text)!important;
  font:500 13.5px/1.2 inherit; box-shadow:none!important;
}
html body [data-as-ui] .as-empty{ padding:28px 16px; text-align:center; color:var(--as-muted); }

@media (max-width:720px){
  html body [data-as-ui] .as-head{ align-items:flex-start; flex-direction:column; }
  html body [data-as-ui] .as-actions .as-btn{ flex:1 1 auto; }
}