/* ─────────────────────────────────────────────────────────────
   Starboard · Foundational Components CSS
   Extends colors_and_type.css with reusable component styles
   ───────────────────────────────────────────────────────────── */
@import url('../../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--font-body); color: var(--fg-default); background: var(--bg-app); -webkit-font-smoothing: antialiased; }

/* ─── Checkbox ─── */
.ad-ck { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.ad-ck__box { width:18px; height:18px; border-radius:4px; flex:0 0 auto; margin-top:1px; border:1.5px solid var(--neutral-400); background:#fff; display:grid; place-items:center; transition:all 120ms ease; }
.ad-ck__box:hover { border-color: var(--primary-500); }
.ad-ck__box.is-checked { background:var(--admiral-blue); border-color:var(--admiral-blue); }
.ad-ck__box.is-indeterminate { background:var(--admiral-blue); border-color:var(--admiral-blue); }
.ad-ck__box.is-disabled { background:var(--neutral-100); border-color:var(--neutral-300); border-style:dashed; cursor:not-allowed; }
.ad-ck__label { font-size:14px; color:var(--fg-default); line-height:1.45; }
.ad-ck__desc { font-size:12px; color:var(--fg-muted); margin-top:1px; }

/* ─── Radio ─── */
.ad-rad { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.ad-rad__dot { width:18px; height:18px; border-radius:50%; flex:0 0 auto; margin-top:1px; border:1.5px solid var(--neutral-400); background:#fff; transition:all 120ms ease; }
.ad-rad__dot:hover { border-color:var(--primary-500); }
.ad-rad__dot.is-selected { border-color:var(--admiral-blue); border-width:5px; }
.ad-rad__dot.is-disabled { border-color:var(--neutral-300); border-style:dashed; background:var(--neutral-100); cursor:not-allowed; }

/* ─── Switch ─── */
.ad-sw { width:40px; height:22px; border-radius:11px; position:relative; cursor:pointer; flex:0 0 auto; background:var(--neutral-300); transition:background 140ms ease; }
.ad-sw::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.18); transition:transform 140ms ease; }
.ad-sw.is-on { background:var(--admiral-blue); }
.ad-sw.is-on::after { transform:translateX(18px); }
.ad-sw.is-disabled { opacity:0.6; cursor:not-allowed; }

/* ─── Select ─── */
.ad-sel { display:flex; align-items:center; gap:8px; height:42px; padding:0 12px; background:#fff; border:1px solid var(--neutral-300); border-radius:10px; font-size:14px; color:var(--fg-strong); cursor:pointer; transition:border-color 140ms ease, box-shadow 140ms ease; }
.ad-sel:hover { border-color:var(--neutral-400); }
.ad-sel.is-open { border-color:var(--primary-500); box-shadow:0 0 0 3px rgba(51,96,255,0.12); }
.ad-sel__text { flex:1; }
.ad-sel__placeholder { color:var(--neutral-500); }

/* ─── Alert ─── */
.ad-alert { display:flex; gap:10px; padding:12px 14px; border-radius:10px; border:1px solid; font-size:13px; line-height:1.55; }
.ad-alert__icon { flex:0 0 auto; margin-top:1px; }
.ad-alert__body { flex:1; min-width:0; }
.ad-alert__title { font-family:'Plus Jakarta Sans'; font-weight:600; font-size:13px; margin-bottom:2px; }
.ad-alert__text { opacity:0.88; }
.ad-alert__action { margin-top:8px; }
.ad-alert__close { flex:0 0 auto; align-self:flex-start; width:20px; height:20px; display:grid; place-items:center; border:0; border-radius:var(--radius-xs); background:transparent; color:inherit; cursor:pointer; opacity:0.5; transition:opacity var(--duration-4) var(--ease-out); }
.ad-alert__close:hover { opacity:0.85; }
.ad-alert__close:focus-visible { outline:none; box-shadow:var(--shadow-focus-ring); }
.ad-alert--info { background:var(--primary-50); border-color:rgba(51,96,255,0.2); color:var(--primary-800); }
.ad-alert--success { background:var(--success-100); border-color:rgba(18,183,106,0.2); color:#054F31; }
.ad-alert--warning { background:var(--warning-100); border-color:rgba(254,200,75,0.4); color:#7A2E0E; }
.ad-alert--error { background:var(--error-100); border-color:rgba(240,68,56,0.2); color:#7A271A; }

/* ─── Toast ─── */
.ad-toast { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:#fff; border:1px solid var(--neutral-200); border-radius:10px; box-shadow:0 8px 24px rgba(20,40,83,0.12), 0 2px 4px rgba(20,40,83,0.06); max-width:360px; font-size:13px; }
.ad-toast__body { flex:1; min-width:0; }
.ad-toast__title { font-family:'Plus Jakarta Sans'; font-weight:600; font-size:13px; color:var(--fg-strong); margin-bottom:2px; }
.ad-toast__text { color:var(--fg-muted); line-height:1.5; }
.ad-toast__timer { height:2px; background:var(--neutral-100); border-radius:1px; margin-top:8px; overflow:hidden; }
.ad-toast__timer-fill { height:100%; border-radius:1px; transition:width 100ms linear; }

/* ─── Tooltip ─── */
.ad-tip { position:relative; display:inline-flex; align-items:center; justify-content:center; background:var(--neutral-900); color:#fff; font-size:12px; font-weight:500; line-height:1.4; padding:6px 10px; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.2); max-width:220px; pointer-events:none; }

/* ─── Menu ─── */
.ad-menu { background:#fff; border:1px solid var(--neutral-200); border-radius:10px; box-shadow:0 8px 24px rgba(20,40,83,0.12); overflow:hidden; min-width:200px; }
.ad-menu__group { padding:4px; }
.ad-menu__group + .ad-menu__group { border-top:1px solid var(--neutral-100); }
.ad-menu__item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; font-size:13px; color:var(--fg-default); cursor:pointer; transition:background 100ms ease; }
.ad-menu__item:hover { background:var(--primary-50); color:var(--primary-700); }
.ad-menu__item--danger { color:var(--error-700); }
.ad-menu__item--danger:hover { background:var(--error-100); }

/* ─── Avatar ─── */
.ad-av { display:inline-grid; place-items:center; border-radius:50%; font-family:'Plus Jakarta Sans'; font-weight:700; color:#fff; flex:0 0 auto; }
.ad-av--xs { width:20px; height:20px; font-size:8px; }
.ad-av--sm { width:24px; height:24px; font-size:9px; }
.ad-av--md { width:32px; height:32px; font-size:12px; }
.ad-av--lg { width:40px; height:40px; font-size:14px; }
.ad-av--xl { width:56px; height:56px; font-size:20px; }
.ad-av--g1 { background:linear-gradient(135deg, #3360FF, #9747FF); }
.ad-av--g2 { background:linear-gradient(135deg, #FEC84B, #F04438); }
.ad-av--g3 { background:linear-gradient(135deg, #12B76A, #3360FF); }
.ad-av--g4 { background:linear-gradient(135deg, #9747FF, #F04438); }
.ad-av--g5 { background:linear-gradient(135deg, #3360FF, #12B76A); }
.ad-av-stack { display:inline-flex; }
.ad-av-stack .ad-av { border:2px solid #fff; }
.ad-av-stack .ad-av + .ad-av { margin-left:-8px; }

/* ─── Entity header ─── */
.ad-ent { background:#fff; border:1px solid var(--neutral-200); border-radius:10px; padding:18px 20px; box-shadow:var(--shadow-xs); }
.ad-ent__top { display:flex; align-items:flex-start; gap:14px; }
.ad-ent__meta { flex:1; min-width:0; }
.ad-ent__name { font-family:'Plus Jakarta Sans'; font-weight:700; font-size:18px; color:var(--fg-strong); letter-spacing:-0.01em; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ad-ent__sub { font-size:13px; color:var(--fg-muted); margin-top:2px; }
.ad-ent__kpis { display:flex; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--neutral-100); flex-wrap:wrap; }
.ad-ent__kpi-label { font-size:11px; color:var(--fg-muted); margin-bottom:2px; }
.ad-ent__kpi-val { font-family:var(--font-mono); font-weight:500; font-size:18px; color:var(--fg-strong); }
.ad-ent__kpi-val .unit { font-family:var(--font-body); font-size:11px; color:var(--fg-muted); margin-left:2px; }

/* ─── Pagination ─── */
.ad-pag { display:flex; align-items:center; gap:4px; }
.ad-pag__btn { min-width:32px; height:32px; border-radius:8px; display:inline-grid; place-items:center; font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--fg-default); background:transparent; border:1px solid var(--neutral-200); cursor:pointer; transition:all 120ms ease; }
.ad-pag__btn:hover { background:var(--neutral-100); }
.ad-pag__btn.is-active { background:var(--primary-600); color:#fff; border-color:var(--primary-600); }
.ad-pag__btn.is-disabled { opacity:0.4; cursor:not-allowed; }

/* ─── Spinner ─── */
@keyframes ad-spin { to { transform:rotate(360deg); } }
.ad-spinner { border-radius:50%; border:2.5px solid var(--neutral-200); border-top-color:var(--admiral-blue); animation:ad-spin 0.7s linear infinite; }
.ad-spinner--sm { width:16px; height:16px; border-width:2px; }
.ad-spinner--md { width:24px; height:24px; }
.ad-spinner--lg { width:36px; height:36px; border-width:3px; }

/* ─── Progress ─── */
.ad-prog__track { height:6px; background:var(--neutral-200); border-radius:3px; overflow:hidden; }
.ad-prog__fill { height:100%; border-radius:3px; background:var(--admiral-blue); transition:width 300ms ease; }
.ad-prog__fill--success { background:var(--success-500); }
.ad-prog__fill--warning { background:#B54708; }
.ad-prog__fill--error { background:var(--error-500); }

/* ─── Skeleton ─── */
@keyframes ad-pulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
.ad-bone { background:var(--neutral-200); border-radius:4px; animation:ad-pulse 1.8s ease-in-out infinite; }

/* ─── Kbd ─── */
.ad-kbd { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--fg-strong); background:#fff; border:1px solid var(--neutral-300); border-bottom-width:2px; border-radius:5px; line-height:1; white-space:nowrap; }
.ad-kbd--sm { min-width:18px; height:18px; padding:0 4px; font-size:10px; border-radius:4px; }

/* ─── Slider ─── */
.ad-slider__track { position:relative; height:6px; background:var(--neutral-200); border-radius:3px; }
.ad-slider__fill { position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--admiral-blue); }
.ad-slider__thumb { position:absolute; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--admiral-blue); box-shadow:0 1px 4px rgba(0,0,0,0.15); cursor:grab; }
.ad-slider__thumb:hover { box-shadow:0 0 0 4px rgba(51,96,255,0.12), 0 1px 4px rgba(0,0,0,0.15); }

/* ─── Status pills (shared) ─── */
.ad-pill { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-weight:500; font-size:12px; padding:4px 10px; border-radius:9999px; white-space:nowrap; }
.ad-pill__dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.ad-pill--live    { background:#D3F8DF; color:#054F31; }
.ad-pill--progress{ background:#EFF4FF; color:#0C02AD; }
.ad-pill--risk    { background:#FEF0C7; color:#7A2E0E; }
.ad-pill--off     { background:#FEE4E2; color:#7A271A; }
.ad-pill--done    { background:#F4F4F4; color:#344054; }

/* ─── Buttons (shared) ─── */
.ad-btn { display:inline-flex; align-items:center; gap:6px; font-family:'Plus Jakarta Sans'; font-weight:600; font-size:14px; padding:10px 20px; border-radius:10px; border:0; cursor:pointer; transition:transform 120ms ease-out, box-shadow 140ms ease; }
.ad-btn:active { transform:translateY(1px); }
.ad-btn--primary { color:#fff; background:var(--admiral-gradient-primary); box-shadow:var(--shadow-button); }
.ad-btn--primary:hover { box-shadow:0 6px 16px rgba(0,56,255,0.25); }
.ad-btn--secondary { color:var(--primary-700); background:#fff; border:1px solid var(--primary-600); }
.ad-btn--secondary:hover { background:var(--primary-50); }
.ad-btn--ghost { color:var(--fg-default); background:transparent; border:1px solid var(--neutral-300); }
.ad-btn--ghost:hover { background:var(--neutral-100); }
.ad-btn--sm { font-size:13px; padding:7px 14px; border-radius:8px; }
.ad-btn--danger { color:#fff; background:var(--error-500); }
.ad-btn--danger:hover { background:var(--error-700); }