/* Onafriq Design System — faithful HTML/CSS reference (html-prototype mode)
 * This stylesheet reproduces the production Angular chrome 1:1: Radikal font,
 * charcoal sidebar with rounded-br cutout + dot-grid app menu, white topbar with
 * notification badge + profile block, summary stat card, status pills, data table,
 * and pagination. Values come from tailwind.config.js and the real components.
 * Do not approximate. Copy examples/onafriq-app-shell.golden.html and replace only
 * the .ods-content region. */

/* ---------- Radikal font ---------- */
@font-face { font-family: "Radikal";        src: url("fonts/Radikal.woff2") format("woff2"), url("fonts/Radikal.woff") format("woff");               font-weight: 400; font-display: swap; }
@font-face { font-family: "Radikal-Light";  src: url("fonts/Radikal-Light.woff2") format("woff2"), url("fonts/Radikal-Light.woff") format("woff");   font-weight: 300; font-display: swap; }
@font-face { font-family: "Radikal-Medium"; src: url("fonts/Radikal-Medium.woff2") format("woff2"), url("fonts/Radikal-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Radikal-Bold";   src: url("fonts/Radikal-Bold.woff2") format("woff2"), url("fonts/Radikal-Bold.woff") format("woff");     font-weight: 700; font-display: swap; }
@font-face { font-family: "Radikal-Black";  src: url("fonts/Radikal-Black.woff2") format("woff2"), url("fonts/Radikal-Black.woff") format("woff");   font-weight: 900; font-display: swap; }

/* ---------- Tokens (from tailwind.config.js) ---------- */
:root {
  --primary:#F0F000; --primary-100:#FFFFDB; --primary-800:#939300;
  --secondary:#4A5052; --charcoal-gray:#2F3235;
  --gray-50:#F9FBFC; --gray-100:#E9EEF0; --gray-200:#D3DADC; --gray-300:#ADB7BB;
  --gray-400:#7C878A; --gray-500:#4A5052; --gray-600:#343739; --gray-700:#2A2C2E;
  --gray-800:#242729; --gray-900:#181A1C;
  --blue-100:#BFD5FF; --blue-500:#1F62E7; --blue-700:#093794;
  --green-100:#C8FFE4; --green-500:#06894A;
  --red-100:#FFD7DF; --red-500:#D90C34;
  --orange-100:#FFD8BB; --orange-500:#F06800;
  --sidebar-w:200px;
}

* { box-sizing:border-box; }
body { margin:0; font-family:"Radikal","Inter",ui-sans-serif,system-ui,sans-serif; color:var(--gray-900); background:var(--gray-100); }
.font-medium{ font-family:"Radikal-Medium"; font-weight:500; }
.font-bold{ font-family:"Radikal-Bold"; font-weight:700; }
.font-light{ font-family:"Radikal-Light"; font-weight:300; }

/* ---------- Shell ---------- */
.ods-shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; background:var(--gray-100); }

/* ---------- Sidebar (charcoal, rounded-br cutout) ---------- */
.ods-sidebar { background:var(--charcoal-gray); border-radius:0 0 75px 0; display:flex; flex-direction:column; padding:24px 0; position:sticky; top:0; height:100vh; }
.ods-sidebar-head { display:flex; align-items:center; gap:8px; padding:0 14px 8px; }
/* dot-grid app menu ("burger" / products launcher) — toggleable */
.ods-app-menu-wrap { position:relative; }
.ods-app-menu { display:grid; grid-template-columns:repeat(3,4px); gap:4px; place-content:center; width:36px; height:36px; border-radius:50%; background:var(--charcoal-gray); cursor:pointer; transition:background .2s; }
.ods-app-menu:hover { background:var(--gray-900); }
.ods-app-menu span { width:4px; height:4px; border-radius:50%; background:#fff; transition:background .2s; }
.ods-app-menu.open { background:var(--gray-900); }
.ods-app-menu.open span { background:var(--primary); }
/* products panel dropped by the app menu */
.ods-menu-panel { position:absolute; left:0; top:44px; width:280px; background:#fff; border-radius:12px; padding:0 16px; max-height:0; overflow:hidden; box-shadow:0 4px 28px rgba(0,47,56,.1); transition:max-height .3s ease, padding .3s ease; z-index:60; }
.ods-menu-panel.open { max-height:420px; padding:12px 16px; }
.ods-menu-section { display:flex; flex-direction:column; margin-bottom:12px; }
.ods-menu-title { font-family:"Radikal-Medium"; font-weight:500; font-size:12px; color:var(--gray-500); margin-bottom:8px; }
.ods-menu-item { display:flex; align-items:center; gap:8px; padding:6px; border-radius:8px; text-decoration:none; color:var(--gray-900); transition:background .2s; }
.ods-menu-item:hover { background:var(--gray-100); }
.ods-menu-item .ods-menu-ic { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; background:var(--gray-200); color:var(--gray-800); flex:none; }
.ods-menu-item .ods-menu-ic svg { width:16px; height:16px; }
.ods-menu-item span.t { font-size:14px; }
.ods-brand { color:#fff; } /* holds the onafriq logo svg */
.ods-nav { display:flex; flex-direction:column; margin-top:10px; }
.ods-nav a { display:flex; align-items:center; gap:9px; padding:12px 14px; color:#fff; font-size:14px; text-decoration:none; cursor:pointer; border-left:2px solid transparent; transition:background .2s; }
.ods-nav a .ods-ic { width:20px; height:20px; flex:none; }
.ods-nav a:hover { background:var(--gray-700); }
.ods-nav a.active { background:var(--gray-900); color:var(--primary); border-left-color:var(--primary); }
.ods-nav a.active .ods-ic { color:var(--primary); }

/* ---------- Main ---------- */
.ods-main { display:flex; flex-direction:column; min-width:0; }

/* ---------- Topbar ---------- */
.ods-topbar { display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 48px; background:#fff; }
.ods-topbar .ods-title { font-family:"Radikal-Medium"; font-weight:500; font-size:1.5rem; margin:0; }
.ods-topbar-right { display:flex; align-items:center; gap:16px; }
.ods-notif { position:relative; color:var(--charcoal-gray); cursor:pointer; }
.ods-notif .ods-badge { position:absolute; top:-6px; right:-8px; background:var(--red-500); color:#fff; font-size:9px; line-height:1; padding:2px 4px; border-radius:9px; }
.ods-profile-wrap { position:relative; }
.ods-profile { display:flex; align-items:center; gap:8px; padding:8px; border-radius:6px; cursor:pointer; }
.ods-profile:hover, .ods-profile.open { background:var(--gray-200); }
.ods-profile.open { border-radius:6px 6px 0 0; }
.ods-profile .ods-chev { transition:transform .2s; }
.ods-profile.open .ods-chev { transform:rotate(180deg); }
/* profile dropdown menu */
.ods-profile-menu { position:absolute; right:0; top:100%; width:260px; background:#fff; border-radius:0 0 8px 8px; box-shadow:2px 2px 11px rgba(0,0,0,.19); overflow:hidden; display:none; z-index:60; }
.ods-profile-menu.open { display:block; }
.ods-profile-menu a { display:flex; align-items:center; gap:10px; padding:14px 18px; text-decoration:none; color:var(--gray-800); font-size:14px; border-bottom:1px solid var(--gray-200); transition:background .2s; }
.ods-profile-menu a:last-child { border-bottom:0; }
.ods-profile-menu a:hover { background:var(--gray-100); }
.ods-avatar { height:36px; width:36px; border-radius:50%; background:var(--gray-100); color:#2F3234; font-family:"Radikal-Medium"; font-size:13px; display:flex; align-items:center; justify-content:center; }
.ods-profile-name { font-family:"Radikal-Bold"; font-weight:700; color:var(--gray-900); font-size:14px; line-height:1.25; }
.ods-profile-role { color:var(--gray-400); font-size:12px; font-family:"Radikal-Light"; }

/* ---------- Content region (the only part agents replace) ---------- */
.ods-content { padding:20px 24px; display:flex; flex-direction:column; gap:18px; }
.ods-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ods-page-header h1 { font-family:"Radikal-Medium"; font-weight:500; font-size:2.125rem; margin:0; }
.ods-subtitle { color:var(--gray-500); font-size:13px; margin:6px 0 0; }

/* ---------- Cards ---------- */
.ods-card { background:#fff; border-radius:18px; padding:20px 24px; }
.ods-card h2 { font-family:"Radikal-Medium"; font-weight:500; font-size:1.125rem; margin:0 0 12px; }

/* ---------- Summary card + colored stat circles ---------- */
.ods-summary { display:flex; gap:28px; align-items:flex-start; }
.ods-summary-intro { min-width:150px; }
.ods-summary-intro .ods-title-lg { font-family:"Radikal-Medium"; font-weight:500; font-size:1.5rem; line-height:1.15; }
.ods-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px 20px; flex:1; align-content:start; }
.ods-stat { display:flex; align-items:center; gap:10px; }
.ods-stat-ic { height:36px; width:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.ods-stat-ic svg { width:18px; height:18px; }
.ods-stat-label { font-size:11px; color:var(--gray-500); }
.ods-stat-value { font-family:"Radikal-Medium"; font-weight:500; font-size:16px; }
.ods-stat--brand   .ods-stat-ic { background:var(--primary-100); color:var(--primary-800); }
.ods-stat--success .ods-stat-ic { background:var(--green-100);   color:var(--green-500); }
.ods-stat--info    .ods-stat-ic { background:var(--blue-100);    color:var(--blue-500); }
.ods-stat--neutral .ods-stat-ic { background:var(--gray-100);    color:var(--gray-500); }
.ods-stat--danger  .ods-stat-ic { background:var(--red-100);     color:var(--red-500); }

/* ---------- Tabs ---------- */
.ods-tabs { display:flex; gap:6px; padding-left:6px; }
.ods-tab { font-size:14px; padding:8px 18px; border-radius:8px 8px 0 0; background:var(--gray-200); color:var(--gray-500); cursor:pointer; border:none; font-family:inherit; }
.ods-tab:hover:not(.active) { background:var(--gray-300); color:var(--gray-700); }
.ods-tab.active { background:#fff; color:#000; font-family:"Radikal-Medium"; font-weight:500; }
/* tab panels — only the active one shows */
.ods-tab-panel { display:none; }
.ods-tab-panel.active { display:block; }

/* ---------- Toolbar (Add / Search / Filter) ---------- */
.ods-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ods-toolbar-left, .ods-toolbar-right { display:flex; align-items:center; gap:10px; }

/* ---------- Buttons ---------- */
.ods-btn { height:38px; padding:0 20px; font-family:"Radikal-Medium"; font-weight:500; font-size:1rem; display:inline-flex; align-items:center; gap:8px; border:none; border-radius:6px; cursor:pointer; transition:background .2s; }
.ods-btn-primary { background:var(--primary); color:#181A1C; box-shadow:1px 1px 1px rgba(0,0,0,.2); }
.ods-btn-primary:hover { background:var(--primary-100); }
.ods-btn-secondary { background:var(--gray-100); color:var(--gray-900); }
.ods-btn-secondary:hover { background:var(--gray-200); }
.ods-btn-ghost { background:transparent; color:var(--gray-900); }
.ods-icon-btn { height:38px; width:40px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--gray-200); border-radius:6px; cursor:pointer; color:var(--gray-500); }

/* ---------- Inputs ---------- */
.ods-search { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--gray-200); border-radius:8px; padding:0 12px; height:38px; min-width:220px; color:var(--gray-400); }
.ods-input, .ods-select { height:38px; padding:0 12px; border:1px solid var(--gray-200); border-radius:6px; background:#fff; font-family:inherit; font-size:14px; color:var(--gray-900); }
.ods-input:focus, .ods-select:focus, .ods-textarea:focus { outline:none; border-color:var(--gray-900); }

/* ---------- Form fields (from components/input.md + components/textarea.md) ---------- */
.ods-field { display:flex; flex-direction:column; }
.ods-label { font-family:"Radikal-Light"; font-weight:300; font-size:14px; color:var(--gray-800); margin-bottom:4px; }
.ods-textarea { min-height:96px; padding:10px 12px; border:1px solid var(--gray-200); border-radius:6px; background:#fff; font-family:"Radikal-Light"; font-size:14px; color:var(--gray-900); resize:vertical; }
.ods-error { font-size:12px; color:var(--red-500); margin-top:4px; }
.ods-form-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.ods-form-actions { display:flex; gap:10px; margin-top:16px; }
.ods-card-title { font-family:"Radikal-Medium"; font-weight:500; font-size:1.125rem; margin:0 0 12px; }

/* ---------- Data table ---------- */
.ods-table-wrap { background:#fff; border-radius:14px; padding:16px; }
.ods-table { width:100%; border-collapse:collapse; font-size:13px; }
.ods-table thead th { text-align:left; font-family:"Radikal-Medium"; font-weight:500; color:var(--gray-900); padding:12px 10px; }
.ods-table tbody td { padding:14px 10px; color:var(--gray-800); }
.ods-table tbody tr:nth-child(odd) { background:var(--gray-50); }
.ods-check { width:16px; height:16px; border:1px solid var(--gray-300); border-radius:3px; display:inline-block; }
.ods-link { color:var(--gray-900); text-decoration:underline; }
.ods-product { display:flex; align-items:center; gap:5px; color:var(--gray-500); }
.ods-kebab { color:var(--gray-400); cursor:pointer; }

/* ---------- Status pills (h-26, min-w-114, rounded-md) ---------- */
.ods-pill { display:inline-flex; align-items:center; justify-content:center; gap:5px; height:26px; min-width:114px; padding:0 12px; border-radius:6px; font-family:"Radikal-Light"; font-weight:300; font-size:14px; text-transform:capitalize; }
.ods-pill svg { width:15px; height:15px; flex:none; }
.ods-pill--success { background:var(--green-100);  color:var(--green-500); }
.ods-pill--info    { background:var(--blue-100);   color:var(--blue-700); }
.ods-pill--warning { background:var(--orange-100); color:var(--orange-500); }
.ods-pill--danger  { background:var(--red-100);    color:var(--red-500); }
.ods-pill--neutral { background:var(--gray-100);   color:var(--gray-500); }

/* ---------- Pagination ---------- */
.ods-pagination { display:flex; align-items:center; gap:10px; padding-top:14px; font-size:13px; color:var(--gray-500); }
.ods-pagination .ods-page { padding:2px 8px; border-radius:5px; cursor:pointer; }
.ods-pagination .ods-page.active { background:var(--primary); color:var(--gray-900); }
.ods-pagination .ods-select { height:28px; padding:0 8px; }

/* ---------- KPI grid + charts (dashboard content) ---------- */
.ods-grid { display:grid; gap:16px; }
.ods-grid-4 { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.ods-grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.ods-kpi { display:flex; flex-direction:column; gap:6px; }
.ods-kpi-label { font-size:12px; color:var(--gray-500); }
.ods-kpi-value { font-family:"Radikal-Medium"; font-weight:500; font-size:1.5rem; }
.ods-kpi-meta { font-size:11px; color:var(--gray-500); }
.ods-chart-placeholder { height:180px; border-radius:8px; background:var(--gray-50); border:1px dashed var(--gray-200); display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:13px; }
.ods-alert { border-radius:8px; padding:12px 14px; background:var(--primary-100); border:1px solid var(--primary); font-size:13px; color:var(--gray-900); }

/* ---------- Footer ---------- */
.ods-footer { padding:14px 24px; color:var(--gray-400); font-size:12px; }