/* ============================================================
   ASUTLab Design System — Components
   v1.0
============================================================ */

/* ============================================================
   BASE
============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:var(--lh-normal);
  color:var(--fg-primary);
  background:var(--bg-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   TYPE
============================================================ */
.ds-display{ font-family:var(--font-display); font-weight:600; font-size:var(--t-display); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; }
.ds-h1{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h1); line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); margin:0; }
.ds-h2{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h2); line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); margin:0; }
.ds-h3{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h3); line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); margin:0; }
.ds-body-lg{ font-size:var(--t-body-lg); line-height:var(--lh-normal); }
.ds-body{ font-size:var(--t-body); line-height:var(--lh-normal); }
.ds-caption{ font-size:var(--t-caption); line-height:var(--lh-normal); color:var(--fg-secondary); }
.ds-mono{ font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--fg-secondary); }
.ds-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.ds-num-xl{ font-family:var(--font-display); font-weight:600; font-size:var(--t-num-xl); line-height:1; letter-spacing:var(--tracking-tight); font-variant-numeric:tabular-nums; }
.ds-num-lg{ font-family:var(--font-display); font-weight:600; font-size:var(--t-num-lg); line-height:1; letter-spacing:var(--tracking-tight); font-variant-numeric:tabular-nums; }

.ds-text-muted{ color:var(--fg-muted); }
.ds-text-secondary{ color:var(--fg-secondary); }
.ds-text-accent{ color:var(--fg-accent); }

/* ============================================================
   BUTTON · primary · secondary · ghost · danger
============================================================ */
.btn{
  --btn-h: 36px;
  --btn-px: 16px;
  --btn-fs: var(--t-body);
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2);
  height:var(--btn-h); padding:0 var(--btn-px);
  font-family:var(--font-text); font-weight:500; font-size:var(--btn-fs);
  line-height:1; letter-spacing:var(--tracking-normal);
  border:var(--bw-1) solid transparent; border-radius:var(--r-md);
  background:transparent; color:inherit; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--c-signal-500); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* sizes */
.btn.is-sm{ --btn-h:28px; --btn-px:12px; --btn-fs:var(--t-caption); }
.btn.is-lg{ --btn-h:44px; --btn-px:20px; --btn-fs:var(--t-body-lg); }

/* variants */
.btn.is-primary{ background:var(--c-graphite-800); color:var(--c-paper-100); border-color:var(--c-graphite-800); }
.btn.is-primary:hover:not(:disabled){ background:var(--c-graphite-700); border-color:var(--c-graphite-700); }
.btn.is-primary:active:not(:disabled){ background:var(--c-graphite-900); }

.btn.is-accent{ background:var(--c-signal-500); color:#fff; border-color:var(--c-signal-500); }
.btn.is-accent:hover:not(:disabled){ background:var(--c-signal-600); border-color:var(--c-signal-600); }
.btn.is-accent:active:not(:disabled){ background:var(--c-signal-700); }

.btn.is-secondary{ background:var(--bg-surface); color:var(--fg-primary); border-color:var(--border-default); }
.btn.is-secondary:hover:not(:disabled){ background:var(--bg-sunken); border-color:var(--border-strong); }

.btn.is-ghost{ background:transparent; color:var(--fg-primary); border-color:transparent; }
.btn.is-ghost:hover:not(:disabled){ background:var(--bg-sunken); }

.btn.is-danger{ background:transparent; color:var(--c-bad-500); border-color:var(--c-bad-500); }
.btn.is-danger:hover:not(:disabled){ background:var(--c-bad-500); color:#fff; }

/* icon-only */
.btn.is-icon{ width:var(--btn-h); padding:0; }

/* ============================================================
   INPUT · TEXT / TEXTAREA / SELECT
============================================================ */
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field__label{ font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--fg-secondary); }
.field__hint{ font-size:var(--t-caption); color:var(--fg-muted); }
.field__error{ font-size:var(--t-caption); color:var(--c-bad-500); }

.input,.select,.textarea{
  font-family:var(--font-text); font-size:var(--t-body); line-height:1.4;
  color:var(--fg-primary); background:var(--bg-surface);
  border:var(--bw-1) solid var(--border-default);
  border-radius:var(--r-md);
  padding:0 var(--space-3); height:36px;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  width:100%;
}
.textarea{ height:auto; padding:var(--space-3); min-height:96px; resize:vertical; line-height:var(--lh-normal); }
.select{ appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 5l3 3 3-3' stroke='%233A4255' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
}
.input::placeholder,.textarea::placeholder{ color:var(--fg-muted); }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--border-strong); }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--c-signal-500);
  box-shadow:0 0 0 3px var(--c-signal-100);
}
.input:disabled,.select:disabled,.textarea:disabled{
  background:var(--bg-sunken); color:var(--fg-muted); cursor:not-allowed;
}
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea{ border-color:var(--c-bad-500); }
.field.is-invalid .input:focus,
.field.is-invalid .select:focus,
.field.is-invalid .textarea:focus{ box-shadow:0 0 0 3px var(--c-bad-100); }

/* input with leading icon/affix */
.input-group{ position:relative; display:flex; align-items:stretch; }
.input-group__affix{
  display:inline-flex; align-items:center; padding:0 var(--space-3);
  background:var(--bg-sunken); color:var(--fg-secondary);
  border:var(--bw-1) solid var(--border-default); border-right:0;
  border-radius:var(--r-md) 0 0 var(--r-md);
  font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:var(--tracking-wide);
}
.input-group .input{ border-radius:0 var(--r-md) var(--r-md) 0; }

/* ============================================================
   CHECKBOX · RADIO · SWITCH
============================================================ */
.check, .radio{
  appearance:none; width:16px; height:16px;
  border:var(--bw-1) solid var(--border-strong); background:var(--bg-surface);
  display:inline-grid; place-content:center; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  margin:0;
}
.check{ border-radius:var(--r-sm); }
.radio{ border-radius:var(--r-pill); }
.check:checked{ background:var(--c-graphite-800); border-color:var(--c-graphite-800); }
.check:checked::after{
  content:""; width:9px; height:5px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.radio:checked{ border-color:var(--c-graphite-800); border-width:5px; }
.check:focus-visible,.radio:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--c-signal-100); }

.switch{ position:relative; width:34px; height:20px; flex:none; }
.switch input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.switch__track{
  position:absolute; inset:0; background:var(--c-mist-300);
  border-radius:var(--r-pill); transition:background var(--dur-fast) var(--ease-out);
}
.switch__thumb{
  position:absolute; top:2px; left:2px; width:16px; height:16px;
  background:#fff; border-radius:var(--r-pill); box-shadow:var(--elev-1);
  transition:left var(--dur-fast) var(--ease-out);
}
.switch input:checked + .switch__track{ background:var(--c-signal-500); }
.switch input:checked + .switch__track + .switch__thumb{ left:16px; }

.option-row{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--t-body); }
.option-row label{ cursor:pointer; }

/* ============================================================
   TAG · BADGE · PILL · STATUS
============================================================ */
.tag{
  display:inline-flex; align-items:center; gap:var(--space-2);
  height:24px; padding:0 var(--space-3);
  font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-mono); text-transform:uppercase;
  border:var(--bw-1) solid var(--border-default); color:var(--fg-secondary);
  background:var(--bg-surface); border-radius:var(--r-sm);
}
.tag.is-solid{ background:var(--c-graphite-800); color:var(--c-paper-100); border-color:var(--c-graphite-800); }
.tag.is-accent{ background:var(--c-signal-50); color:var(--c-signal-700); border-color:var(--c-signal-100); }

.status-dot{
  display:inline-block; width:8px; height:8px; border-radius:var(--r-pill);
  background:var(--fg-muted); flex:none;
}
.status-dot.is-ok{ background:var(--status-ok); }
.status-dot.is-warn{ background:var(--status-warn); }
.status-dot.is-bad{ background:var(--status-bad); }
.status-dot.is-info{ background:var(--status-info); }
.status-dot.is-accent{ background:var(--c-signal-500); }

.status-pill{
  display:inline-flex; align-items:center; gap:var(--space-2);
  height:22px; padding:0 var(--space-2) 0 var(--space-2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-mono); text-transform:uppercase;
  border-radius:var(--r-sm); background:var(--bg-sunken); color:var(--fg-secondary);
}
.status-pill.is-ok{ background:var(--status-ok-bg); color:var(--c-ok-600); }
.status-pill.is-warn{ background:var(--status-warn-bg); color:var(--c-warn-600); }
.status-pill.is-bad{ background:var(--status-bad-bg); color:var(--c-bad-600); }
.status-pill.is-info{ background:var(--status-info-bg); color:var(--c-info-500); }

/* delta · trend up/down */
.delta{
  display:inline-flex; align-items:center; gap:var(--space-1);
  font-family:var(--font-mono); font-size:var(--t-caption); letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--c-ok-500);
}
.delta.is-down{ color:var(--c-bad-500); }
.delta.is-flat{ color:var(--fg-muted); }

/* ============================================================
   CARD · KPI
============================================================ */
.card{
  background:var(--bg-surface); border:var(--bw-1) solid var(--border-subtle);
  border-radius:var(--r-md); padding:var(--space-5);
}
.card.is-flat{ background:transparent; }
.card.is-inverse{ background:var(--c-graphite-800); color:var(--c-paper-100); border-color:var(--c-graphite-800); }

.kpi-card{
  background:var(--bg-surface); border:var(--bw-1) solid var(--border-subtle);
  border-radius:var(--r-md); padding:var(--space-5) var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-3); min-height:128px;
}
.kpi-card__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-mono); text-transform:uppercase; color:var(--fg-secondary);}
.kpi-card__value{ font-family:var(--font-display); font-weight:600; font-size:var(--t-num-lg); line-height:1; letter-spacing:var(--tracking-tight); font-variant-numeric:tabular-nums; color:var(--fg-primary); display:flex; align-items:baseline; gap:var(--space-2); }
.kpi-card__unit{ font-size:14px; color:var(--fg-muted); font-weight:400;}
.kpi-card__foot{ display:flex; justify-content:space-between; align-items:center; }
.kpi-card.is-accent{ border-width:var(--bw-2); border-color:var(--c-signal-500); }
.kpi-card.is-accent .kpi-card__value{ color:var(--c-signal-500); }
.kpi-card.is-accent .kpi-card__label{ color:var(--c-signal-600); }
.kpi-card.is-warn{ border-left:var(--bw-2) solid var(--c-warn-500); }
.kpi-card.is-bad{ border-left:var(--bw-2) solid var(--c-bad-500); }
.kpi-card.is-ok{ border-left:var(--bw-2) solid var(--c-ok-500); }

/* ============================================================
   TABS
============================================================ */
.tabs{
  display:flex; gap:var(--space-1);
  border-bottom:var(--bw-1) solid var(--border-subtle);
  padding:0;
}
.tabs__item{
  position:relative;
  padding:var(--space-3) var(--space-4);
  font-family:var(--font-text); font-size:var(--t-body); font-weight:500;
  color:var(--fg-secondary); cursor:pointer;
  background:transparent; border:0; border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color var(--dur-fast) var(--ease-out);
}
.tabs__item:hover{ color:var(--fg-primary); }
.tabs__item.is-active{ color:var(--fg-primary); border-bottom-color:var(--c-signal-500); }
.tabs__item .tabs__count{ font-family:var(--font-mono); font-size:11px; color:var(--fg-muted); margin-left:var(--space-2); }

/* segmented · range filter */
.segmented{ display:inline-flex; padding:2px; background:var(--bg-sunken); border:var(--bw-1) solid var(--border-subtle); border-radius:var(--r-md); gap:0;}
.segmented__item{
  padding:6px 12px; font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-mono); text-transform:uppercase;
  background:transparent; border:0; color:var(--fg-secondary); cursor:pointer; border-radius:var(--r-sm);
}
.segmented__item.is-active{ background:var(--bg-surface); color:var(--fg-primary); box-shadow:var(--elev-1); }

/* ============================================================
   TABLE
============================================================ */
.tbl{ width:100%; border-collapse:collapse; font-size:var(--t-body); }
.tbl th{
  text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-mono); text-transform:uppercase;
  color:var(--fg-secondary); font-weight:400;
  padding:var(--space-3) var(--space-4); border-bottom:var(--bw-1) solid var(--border-subtle);
  white-space:nowrap;
}
.tbl td{
  padding:var(--space-3) var(--space-4);
  border-bottom:var(--bw-1) solid var(--border-subtle);
  color:var(--fg-primary); vertical-align:middle;
}
.tbl tbody tr:hover td{ background:var(--bg-sunken); }
.tbl .tbl__num{ font-variant-numeric:tabular-nums; text-align:right; font-family:var(--font-mono);}
.tbl .tbl__hl{ color:var(--c-signal-500); font-weight:600; }
.tbl .tbl__muted{ color:var(--fg-muted); }
.tbl .tbl__sort{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--fg-secondary); }
.tbl .tbl__sort.is-active{ color:var(--fg-primary); }

/* ============================================================
   BREADCRUMB · PAGINATION
============================================================ */
.crumbs{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--t-caption); color:var(--fg-muted);}
.crumbs a{ color:var(--fg-secondary); text-decoration:none; }
.crumbs a:hover{ color:var(--fg-primary); }
.crumbs__sep{ opacity:.5;}
.crumbs__current{ color:var(--fg-primary); font-weight:500; }

.pager{ display:flex; align-items:center; gap:var(--space-1); font-family:var(--font-mono); font-size:var(--t-caption);}
.pager__item{
  min-width:28px; height:28px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center;
  border:var(--bw-1) solid var(--border-subtle); background:var(--bg-surface);
  color:var(--fg-secondary); cursor:pointer; border-radius:var(--r-sm);
}
.pager__item:hover{ border-color:var(--border-strong); color:var(--fg-primary);}
.pager__item.is-active{ background:var(--c-graphite-800); color:var(--c-paper-100); border-color:var(--c-graphite-800); }

/* ============================================================
   TOOLTIP · DIALOG · TOAST
============================================================ */
.tooltip{
  display:inline-flex; padding:6px 10px;
  background:var(--c-graphite-800); color:var(--c-paper-100);
  font-family:var(--font-text); font-size:var(--t-caption); line-height:1.3;
  border-radius:var(--r-sm); box-shadow:var(--elev-2);
  max-width:240px;
}

.dialog{
  width:520px; background:var(--bg-surface); border-radius:var(--r-lg);
  box-shadow:var(--elev-overlay); overflow:hidden;
  display:flex; flex-direction:column;
}
.dialog__hd{ padding:var(--space-5) var(--space-6); border-bottom:var(--bw-1) solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between;}
.dialog__ttl{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h3); margin:0; letter-spacing:var(--tracking-tight);}
.dialog__bd{ padding:var(--space-6); color:var(--fg-secondary); font-size:var(--t-body); line-height:var(--lh-normal);}
.dialog__ft{ padding:var(--space-4) var(--space-6); border-top:var(--bw-1) solid var(--border-subtle); display:flex; justify-content:flex-end; gap:var(--space-3); background:var(--bg-sunken);}

.toast{
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  background:var(--c-graphite-800); color:var(--c-paper-100);
  border-radius:var(--r-md); box-shadow:var(--elev-3);
  font-size:var(--t-body); max-width:380px;
}
.toast__icon{ width:20px; height:20px; flex:none; color:var(--c-signal-500); }
.toast.is-ok .toast__icon{ color:var(--c-ok-500); }
.toast.is-bad .toast__icon{ color:var(--c-bad-500); }
.toast__close{ margin-left:auto; opacity:.6; cursor:pointer; }

/* ============================================================
   NAVIGATION · sidebar · topbar
============================================================ */
.nav-sidebar{
  width:var(--sidebar-w); background:var(--c-graphite-800); color:var(--c-paper-100);
  display:flex; flex-direction:column; padding:var(--space-4);
}
.nav-sidebar__brand{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); }
.nav-sidebar__group{ margin-top:var(--space-6); }
.nav-sidebar__caption{
  font-family:var(--font-mono); font-size:11px; letter-spacing:var(--tracking-mono); text-transform:uppercase;
  color:var(--c-mist-400); padding:0 var(--space-3) var(--space-2);
}
.nav-item{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3); border-radius:var(--r-sm);
  font-size:var(--t-body); color:var(--c-mist-300); text-decoration:none;
  cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast);
}
.nav-item:hover{ background:rgba(255,255,255,.05); color:var(--c-paper-100); }
.nav-item.is-active{ background:rgba(238,106,31,.12); color:var(--c-signal-500); }
.nav-item .nav-item__count{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--c-mist-400); }
.nav-item.is-active .nav-item__count{ color:var(--c-signal-500); }

.topbar{
  height:var(--topbar-h); border-bottom:var(--bw-1) solid var(--border-subtle);
  background:var(--bg-surface);
  display:flex; align-items:center; gap:var(--space-4);
  padding:0 var(--space-6);
}

/* ============================================================
   SKELETON · EMPTY · LOADING
============================================================ */
.skeleton{
  display:block; background:linear-gradient(90deg, var(--c-mist-200) 0%, var(--c-rule-150) 50%, var(--c-mist-200) 100%);
  background-size:200% 100%; border-radius:var(--r-sm);
  animation:ds-skel 1.4s linear infinite;
}
@keyframes ds-skel{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }

.empty{
  padding:var(--space-12); text-align:center; color:var(--fg-secondary);
  border:1px dashed var(--border-default); border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
}
.empty__ttl{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h3); color:var(--fg-primary); margin:0;}