/* =============================================================================
   APP-FOUNDRY DESIGN SYSTEM — turnkey stylesheet
   -----------------------------------------------------------------------------
   Drop-in implementation of design-tokens.css + ui-design-system.md (§2–§10).
   Link this once (after vendoring the fonts in ../vendor/) and you get the whole
   component set. To brand: override the --accent-* values in your own small
   stylesheet loaded AFTER this one (see §2.1). Do NOT hardcode hex/px elsewhere.

   Icons: this file @imports the vendored Phosphor font; use <i class="ph ph-x">.
   ============================================================================= */

/* --- Vendored fonts (no runtime CDN) ------------------------------------- */
@font-face { font-family:"DM Sans"; font-weight:400; font-display:swap; src:url("../vendor/fonts/dm-sans-400.a220a32881ae.woff2") format("woff2"); }
@font-face { font-family:"DM Sans"; font-weight:500; font-display:swap; src:url("../vendor/fonts/dm-sans-500.aa952242481d.woff2") format("woff2"); }
@font-face { font-family:"DM Sans"; font-weight:600; font-display:swap; src:url("../vendor/fonts/dm-sans-600.c64569e0302e.woff2") format("woff2"); }
@font-face { font-family:"DM Sans"; font-weight:700; font-display:swap; src:url("../vendor/fonts/dm-sans-700.9508ec8af518.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-display:swap; src:url("../vendor/fonts/jetbrains-mono-400.caf0dfde4e44.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap; src:url("../vendor/fonts/jetbrains-mono-500.a21e038a03f7.woff2") format("woff2"); }
@import url("../vendor/phosphor/phosphor.2b0b834bd4ac.css");

/* --- Tokens (design-tokens.css) ------------------------------------------ */
:root {
  --accent:#3b5bdb; --accent-hover:#2f4bc0; --accent-tint:#eef2ff; --accent-secondary:#64748b;
  --accent-gradient-from:#3b5bdb; --accent-gradient-to:#2a3f9e; --accent-ring:rgba(59,91,219,0.10);
  --status-red:#ef4444; --status-amber:#f59e0b; --status-green:#22c55e;
  --text-primary:#0f172a; --text-secondary:#64748b; --text-muted:#94a3b8;
  --border-color:#e2e8f0; --border-strong:#cbd5e1;
  --bg-page:#f8fafc; --bg-card:#ffffff; --bg-hover:#f1f5f9; --bg-active:var(--accent-tint);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -1px rgba(0,0,0,0.04);
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --space-xs:6px; --space-sm:10px; --space-md:14px; --space-lg:18px; --space-xl:24px; --space-xxl:32px;
  --font-ui:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --navbar-height:60px; --z-navbar:1000; --z-tabs:999; --z-modal:2000; --z-toast:10000;
}

* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { font-family:var(--font-ui); font-size:13px; line-height:1.6; color:var(--text-primary); background:var(--bg-page); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { color:var(--text-primary); margin:0 0 4px; }

/* --- Navbar (§7.1) ------------------------------------------------------- */
.navbar-main { background:linear-gradient(135deg,var(--accent-gradient-from) 0%,var(--accent-gradient-to) 100%);
  padding:0 2rem; height:60px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,0.12); position:sticky; top:0; z-index:1000; }
.navbar-brand { color:#fff; font-size:15px; font-weight:700; letter-spacing:-0.3px; display:flex; align-items:center; gap:8px; }
.navbar-brand:hover { color:#fff; text-decoration:none; }
.navbar-brand i { font-size:22px; opacity:0.9; }
.navbar-right { display:flex; align-items:center; gap:12px; }
.status-pill { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); border-radius:20px;
  padding:6px 16px; font-size:12px; color:rgba(255,255,255,0.9); display:flex; align-items:center; gap:8px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; }
.status-pill.scanning .status-dot { background:#f59e0b; animation:pulse 1.5s infinite; }
.status-pill.error .status-dot { background:#f87171; }
.status-pill time { font-family:var(--font-mono); font-size:11px; opacity:0.75; }

/* --- Layout (§6) --------------------------------------------------------- */
.page-wrapper { height:calc(100vh - 60px); display:flex; flex-direction:column; overflow:hidden; }
.content-area { flex:1; overflow:hidden; display:flex; flex-direction:column; padding:0 0 24px 0; background:var(--bg-page); }
.content-area > .full-table-view, .content-area > .tree-wrapper, .content-area > .panel-layout { margin:0 24px; }
/* Simple page-based layout (non-SPA tools) */
.page { max-width:1040px; margin:0 auto; padding:24px; }
.page-narrow { max-width:640px; }

/* --- Tabs (§7.2) --------------------------------------------------------- */
.tabs-bar { background:var(--bg-card); border-bottom:1px solid var(--border-color); padding:0 2rem;
  display:flex; overflow-x:auto; position:sticky; top:60px; z-index:999; flex-shrink:0; }
.tab-btn { padding:16px 22px; font-size:13px; font-weight:500; color:var(--text-secondary); background:none;
  border:none; border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; transition:all .15s ease;
  display:flex; align-items:center; gap:8px; font-family:inherit; }
.tab-btn:hover { color:var(--text-primary); background:var(--bg-hover); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-badge { padding:2px 7px; font-size:11px; font-weight:600; border-radius:10px; background:var(--bg-hover); color:var(--text-secondary); }
.tab-btn.active .tab-badge { background:var(--bg-active); color:var(--accent); }
.tab-content { display:none; }
.tab-content.active { display:flex; flex-direction:column; flex:1; overflow:hidden; }

/* --- Toolbar (§7.3) ------------------------------------------------------ */
.toolbar { padding:14px 28px; background:var(--bg-card); border-bottom:1px solid var(--border-color);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.toolbar-divider { width:1px; height:24px; background:var(--border-color); margin:0 4px; }

/* --- Buttons (§7.4) ------------------------------------------------------ */
.btn { padding:7px 14px; font-size:12px; font-weight:500; border-radius:var(--radius-sm); border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:all .15s ease; white-space:nowrap; font-family:inherit; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn i { font-size:14px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); color:#fff; }
.btn-primary:disabled { background:var(--border-color); color:var(--text-muted); cursor:not-allowed; }
.btn-outline { background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-secondary); }
.btn-outline:hover { border-color:var(--border-strong); background:var(--bg-hover); color:var(--text-primary); }
.btn-ghost { background:transparent; color:var(--text-secondary); padding:6px 10px; }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-white { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; }
.btn-white:hover { background:rgba(255,255,255,0.25); color:#fff; }
.btn-white:disabled { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.4); cursor:not-allowed; }
.btn-sm { padding:5px 10px; font-size:11px; }
.btn-sm i { font-size:13px; }

/* --- Search box (§7.5) --------------------------------------------------- */
.search-box { position:relative; flex:1; max-width:400px; min-width:200px; }
.search-box i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:16px; }
.search-box input { width:100%; padding:8px 12px 8px 38px; border:1px solid var(--border-color); border-radius:var(--radius-md);
  font-size:13px; background:var(--bg-page); font-family:inherit; transition:all .15s ease; }
.search-box input:focus { outline:none; border-color:var(--accent); background:var(--bg-card); box-shadow:0 0 0 3px var(--accent-ring); }

/* --- Forms --------------------------------------------------------------- */
.form-label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px;
  color:var(--text-secondary); margin-bottom:6px; }
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
textarea,select,.form-control,.form-select {
  width:100%; padding:8px 12px; font-size:13px; font-family:inherit; color:var(--text-primary);
  background:var(--bg-page); border:1px solid var(--border-color); border-radius:var(--radius-md); transition:all .15s ease; }
textarea { line-height:1.6; }
input:focus,textarea:focus,select:focus,.form-control:focus,.form-select:focus {
  outline:none; border-color:var(--accent); background:var(--bg-card); box-shadow:0 0 0 3px var(--accent-ring); }
.field { margin-bottom:16px; }
.field-error { color:var(--status-red); font-size:12px; margin-top:4px; }
.form-help { color:var(--text-muted); font-size:12px; margin-top:4px; }

/* --- Filter pills (§7.6) ------------------------------------------------- */
.filter-pill { padding:5px 14px; font-size:12px; font-weight:500; border-radius:20px; border:1px solid var(--border-color);
  background:var(--bg-card); color:var(--text-secondary); cursor:pointer; transition:all .15s ease;
  display:inline-flex; align-items:center; gap:5px; font-family:inherit; }
.filter-pill:hover { border-color:var(--accent); color:var(--accent); }
.filter-pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* --- Badges (§7.7) ------------------------------------------------------- */
.badge { padding:3px 8px; font-size:11px; font-weight:600; border-radius:4px; text-transform:uppercase; letter-spacing:0.3px; display:inline-block; }
.badge-success{background:#dcfce7;color:#166534;} .badge-danger{background:#fee2e2;color:#991b1b;}
.badge-warning{background:#fef3c7;color:#92400e;} .badge-info{background:#e0e7ff;color:#3730a3;}
.badge-secondary{background:var(--bg-hover);color:var(--text-secondary);} .badge-primary{background:var(--bg-active);color:var(--accent);}
.badge-purple{background:#ede9fe;color:#5b21b6;} .badge-gray{background:var(--bg-hover);color:var(--text-secondary);}
.badge-count{background:var(--bg-hover);color:var(--text-secondary);font-weight:500;text-transform:none;}

/* --- Data table (§7.8) --------------------------------------------------- */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table thead { position:sticky; top:0; z-index:10; }
.data-table th { background:var(--bg-page); padding:11px 18px; text-align:left; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); border-bottom:2px solid var(--border-color); white-space:nowrap; }
.data-table td { padding:11px 18px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
.data-table tbody tr { transition:background .1s ease; }
.data-table tbody tr:hover { background:var(--bg-hover); }
.data-table tr:last-child td { border-bottom:none; }
.data-table .empty-row td { text-align:center; padding:40px 18px; color:var(--text-muted); }
.data-table .empty-row:hover { background:transparent; }

/* --- Card (§7.9) --------------------------------------------------------- */
.card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.card-accent { border-top:3px solid var(--accent); }
.card-body { padding:18px; }
.card-header { padding:16px 22px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; background:var(--bg-page); }
.card-title { font-weight:600; font-size:13px; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.card-title i { color:var(--text-secondary); font-size:16px; }
.section-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary); margin-bottom:12px; }

/* --- Panels (§7.10) + nav/list items (§7.11–7.12) ------------------------ */
.panel-layout { display:flex; gap:20px; flex:1; overflow:hidden; padding-top:20px; }
.panel-sidebar-card { width:220px; min-width:200px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; }
.panel-main-card { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.panel-header { padding:14px 18px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; background:var(--bg-page); flex-shrink:0; }
.panel-title { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.list-container { flex:1; overflow-y:auto; }
.nav-item { padding:14px 18px; border-bottom:1px solid var(--border-color); cursor:pointer; transition:background .1s ease; display:flex; align-items:center; gap:10px; }
.nav-item:hover { background:var(--bg-hover); }
.nav-item.active { background:var(--bg-active); border-left:3px solid var(--accent); padding-left:15px; }
.nav-label { font-weight:500; font-size:12px; color:var(--text-primary); }
.nav-item.active .nav-label { color:var(--accent); }
.list-item { padding:14px 18px; border-bottom:1px solid var(--border-color); transition:background .1s ease; display:flex; align-items:flex-start; gap:12px; }
.list-item:hover { background:var(--bg-hover); }
.list-item:last-child { border-bottom:none; }
.list-item-name { font-weight:600; font-size:13px; margin-bottom:2px; }
.list-item-meta { font-size:11px; color:var(--text-muted); }
.list-item-time { font-size:11px; color:var(--text-muted); white-space:nowrap; font-family:var(--font-mono); }
/* generic two-end row */
.list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border-color); }
.list-row:last-child { border-bottom:none; }

/* --- Modal (§7.13–7.16) -------------------------------------------------- */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.6); backdrop-filter:blur(4px); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.show { display:flex; }
.modal-content { background:var(--bg-card); border-radius:var(--radius-lg); max-width:860px; width:100%; max-height:88vh;
  overflow:hidden; display:flex; flex-direction:column; box-shadow:0 32px 64px -12px rgba(0,0,0,0.28),0 0 0 1px rgba(0,0,0,0.05); animation:modalIn 0.2s ease; }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:14px; background:var(--bg-page); flex-shrink:0; }
.modal-icon { width:42px; height:42px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.modal-title { font-weight:700; font-size:15px; margin-bottom:2px; }
.modal-subtitle { font-size:12px; color:var(--text-muted); }
.modal-close { background:none; border:none; font-size:20px; color:var(--text-muted); cursor:pointer; padding:4px; line-height:1; margin-left:auto; }
.modal-close:hover { color:var(--text-primary); }
.modal-body { padding:24px; overflow-y:auto; flex:1; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.detail-section { background:var(--bg-page); border-radius:var(--radius-md); padding:18px; }
.detail-section-title { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px;
  margin:0 0 12px; display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--border-color); padding-bottom:8px; }
.detail-row { display:flex; padding:9px 0; border-bottom:1px solid var(--border-color); gap:8px; }
.detail-row:last-child { border-bottom:none; }
.detail-label { width:110px; font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.3px; flex-shrink:0; padding-top:1px; }
.detail-value { flex:1; font-size:13px; }
.callout-item { display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:var(--radius-sm); font-size:12px; margin-top:8px; }
.callout-item i { font-size:16px; flex-shrink:0; margin-top:1px; }
.callout-item.warning{background:#fef3c7;color:#92400e;} .callout-item.danger{background:#fee2e2;color:#991b1b;} .callout-item.info{background:#e0f2fe;color:#0369a1;}
/* page-level callouts (alerts/messages) */
.callout { padding:12px 14px; border-radius:var(--radius-sm); font-size:12px; margin-bottom:14px; }
.callout.info{background:#e0f2fe;color:#0369a1;} .callout.warning{background:#fef3c7;color:#92400e;}
.callout.danger,.callout.error{background:#fee2e2;color:#991b1b;} .callout.success{background:#dcfce7;color:#166534;}

/* --- Avatar / toasts / log / empty / stats (§7.17–7.22) ------------------ */
.avatar { width:26px; height:26px; border-radius:50%; background:var(--bg-hover); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; color:var(--text-secondary); flex-shrink:0; }
.toast-container { position:fixed; bottom:24px; right:24px; z-index:10000; display:flex; flex-direction:column; gap:8px; }
.toast { padding:14px 20px; border-radius:var(--radius-md); box-shadow:var(--shadow-md),0 4px 12px rgba(0,0,0,0.15); display:flex; align-items:center; gap:12px; font-size:13px; font-weight:500; animation:slideIn 0.3s ease; min-width:280px; max-width:400px; }
.toast.success{background:#166534;color:#fff;} .toast.error{background:#991b1b;color:#fff;} .toast.info{background:#1e40af;color:#fff;}
.toast.hiding { animation:slideOut 0.3s ease forwards; }
.log-window { background:#1e293b; border-radius:var(--radius-md); font-family:var(--font-mono); font-size:11px; line-height:1.6; overflow-y:auto; padding:14px 16px; max-height:280px; }
.log-window pre { margin:0; white-space:pre-wrap; color:#94a3b8; }
.empty-state { padding:48px 24px; text-align:center; color:var(--text-muted); }
.empty-state i { font-size:36px; opacity:0.4; display:block; margin-bottom:10px; }
.empty-state p { font-size:13px; margin:0; }
.stats-bar { display:flex; align-items:center; gap:20px; }
.stat-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.stat-value { font-weight:600; color:var(--text-primary); }

/* --- Scrollbar (§7.23) --------------------------------------------------- */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-page); }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent-secondary); }

/* --- Utilities (§10) ----------------------------------------------------- */
.text-muted{color:var(--text-muted)!important;} .text-success{color:var(--status-green)!important;}
.text-danger{color:var(--status-red)!important;} .text-warning{color:var(--status-amber)!important;}
.text-center{text-align:center;} .hidden{display:none!important;}
.mono-text,.mono{font-family:var(--font-mono);font-size:11px;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.stack>*+*{margin-top:18px;}

/* --- Motion (§8) --------------------------------------------------------- */
@keyframes spin { 100%{transform:rotate(360deg);} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOut { from{transform:translateX(0);opacity:1} to{transform:translateX(100%);opacity:0} }
@keyframes modalIn { from{opacity:0;transform:scale(0.95) translateY(-10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes highlightFade { 0%{background:var(--bg-active)} 100%{background:transparent} }
@view-transition { navigation:auto; }