/* AILAM GOV visual system, adapted to this prototype's existing components.
   Source: ailam-gov-source/dist/style.css + modules.css, DESIGN.md (15.10.2026).
   Load after module styles. Layout, navigation and application state stay local. */
:root {
  --bg: #f5f4f1;
  --surface: #fff;
  --surface-2: #f7f7f3;
  --ink: #20211f;
  --text: #20211f;
  --muted: #6c7069;
  --line: #ecece8;
  --dark: #252621;
  --accent: #f3a400;
  --accent-2: #ffbc3c;
  --amber: #f3a400;
  --amber-light: #fff3d5;
  --success-bg: #c8ed78;
  --success: #385d19;
  --warning-bg: #ffeab9;
  --warning: #96680d;
  --danger-bg: #f9d7d9;
  --danger: #a23c45;
  --neutral-bg: #eeeee9;
  --radius: 20px;
  --shadow: 0 1px 2px #20211f05;
  --sidebar: 238px;
}

html { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-synthesis: none; }
::selection { background: #ffe2a2; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #df9900;
  outline-offset: 3px;
}
button { transition: background .15s, box-shadow .15s, color .15s; }
h1 { font-size: 27px; font-weight: 700; line-height: 1.24; letter-spacing: -.9px; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
h3 { font-weight: 600; }
.page-head p, .section-head p { color: #6d7169; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #6d7169; }

/* White navigation, compact amber selection, reference sidebar proportions. */
.app-shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { background: var(--surface); color: var(--ink); padding: 0; border-right: 1px solid #eeeeea; overflow: hidden; }
.brand { gap: 10px; padding: 22px 20px; min-height: 86px; flex-shrink: 0; }
.brand-mark { width: 37px; height: 37px; flex-shrink: 0; border-radius: 11px; background: linear-gradient(125deg,#ffbd2c,#f1a000); color: #23251f; font-size: 29px; font-weight: 700; }
.brand strong { font-size: 17px; letter-spacing: .6px; }
.brand small { color: #6d7169; font-size: 10px; line-height: 1.4; }
.sidebar .workspace { margin: 0 11px 12px; padding: 10px; gap: 8px; border-radius: 11px; background: #f8f7f4; border-color: var(--line); grid-template-columns: 30px minmax(0,1fr) auto; }
.workspace-avatar { width: 30px; height: 30px; border-radius: 9px; background: var(--amber-light); color: #927328; font-size: 13px; font-weight: 600; }
.workspace small { color: var(--muted); font-size: 10px; }
.workspace b { font-size: 12px; font-weight: 600; }
.workspace button { color: var(--muted); }
.sidebar nav { padding: 0 11px 16px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sidebar .workspace, .sidebar-bottom { flex-shrink: 0; }
.nav-section { margin: 8px 0 14px; }
.nav-title { color: #70766a; font-size: 10px; font-weight: 600; letter-spacing: 1.45px; padding: 10px 10px 8px; }
.nav-button { min-height: 39px; padding: 10px; gap: 9px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 400; line-height: 1.3; grid-template-columns: 18px minmax(0,1fr) auto; }
.nav-button svg { width: 16px; height: 16px; color: #6e726d; }
.nav-button:hover { background: #f4f4f1; color: var(--ink); }
.nav-button.active { background: linear-gradient(100deg,#f8ad0b,#ffcc62); color: #20211f; font-weight: 600; box-shadow: 0 2px 5px #e7a80015; }
.nav-button.active svg { color: #473913; }
.nav-badge { background: #f0f0eb; color: var(--muted); border-radius: 5px; padding: 2px 5px; min-width: 21px; }
.nav-button.active .nav-badge { color: #473913; background: #ffffff80; }
.skip-nav-current { color: #6a4c0d; background: var(--amber-light); }
.skip-nav-children { padding: 6px 0 0 9px; border-left: 1px solid var(--line); margin-left: 8px; }
.skip-nav-children .nav-button { font-size: 13px; }
.sidebar-bottom { padding: 14px 15px; border-color: var(--line); }
.user-card { padding: 4px 0; grid-template-columns: 35px minmax(0,1fr); }
.user-card b { font-size: 12px; font-weight: 600; }
.user-card small { color: #6d7169; font-size: 10px; }
.avatar { width: 35px; height: 35px; background: #ffbd30; color: #23251f; font-weight: 700; }

.topbar { height: 78px; padding: 0 30px; gap: 18px; background: #f8f7f4; backdrop-filter: none; border-color: #edede9; }
.breadcrumbs { font-size: 13px; }
.breadcrumbs strong { font-weight: 600; }
.top-search { width: min(260px,26vw); }
.top-search input { height: 36px; border-color: #efefeb; font-size: 12px; }
.top-search span { top: 8px; }
.top-icon { width: 35px; height: 35px; flex-shrink: 0; color: #6f756b; border-color: #f0f0ed; }
.role-select { height: 36px; font-size: 12px; color: #414a39; max-width: 220px; }
.topbar > .role-select { margin-left: auto; }
.page { max-width: 2000px; padding: 31px 30px 24px; }
.page-head { margin-bottom: 22px; }

/* Reference controls: rounded rectangles, restrained shadows and clear focus. */
.btn { min-height: 41px; border-radius: 11px; border-color: #e5e7df; padding: 10px 17px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.btn:hover { transform: none; background: #f4f4ef; border-color: #e5e7df; }
.btn-primary { background: linear-gradient(105deg,#f2a000,#ffbc3c); color: #20211f; box-shadow: none; }
.btn-primary:hover { background: linear-gradient(105deg,#e89900,#ffb627); box-shadow: 0 3px 8px #cb890322; }
.btn-dark:hover { background: #3b3d35; border-color: #3b3d35; }
.btn-small { min-height: 34px; padding: 7px 13px; font-size: 13px; }
.icon-btn { width: 40px; padding: 0; }
.btn:disabled { cursor: default; }
.tabs { gap: 25px; padding-bottom: 0; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab { min-height: 43px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 0; background: transparent; color: #6d7464; font-size: 14px; font-weight: 400; }
.tab:hover { color: var(--ink); }
.tab.active { background: transparent; border-color: var(--amber); color: #252923; font-weight: 600; }
.tab span, .tab.active span { border-radius: 5px; background: #f2f4ec; color: #646e57; }
.skip-tabs { gap: 8px; }
.skip-tabs .btn { border-radius: 18px; }
.skip-tabs button[aria-pressed=true] { background: #ffedc4; color: #6a4c0d; border-color: #ffedc4; }
.field input, .field select, .field textarea, .select, .search-field input, .wf-filters select, .wf-filters input {
  border-color: #e2e8d8; border-radius: 9px; background: #fefefa; color: var(--ink); font-size: 14px;
}
.field label { font-size: 14px; font-weight: 500; }
.field input::placeholder, .field textarea::placeholder, .search-field input::placeholder, .top-search input::placeholder { color: #73786d; }
.field input:focus, .field select:focus, .field textarea:focus, .top-search input:focus { border-color: #df9900; box-shadow: 0 0 0 3px #f3a40020; }
.search-field:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 9px; }
.select { max-width: 100%; }

/* Panels and data: light surfaces, thin separators, no dark hero blocks. */
.card, .kpi, .module-card, .leadership-card { border-color: #efefea; box-shadow: var(--shadow); }
.module-hero { background: #fff; color: var(--ink); border: 1px solid #efefea; border-radius: 20px; padding: 26px; gap: 24px; }
.module-hero::after, .setup-explainer::after { display: none; }
.module-hero h1 { font-size: 27px; }
.module-hero p { color: #6d7169; font-size: 14px; }
.hero-stat { background: #f7f7f3; border-color: #f0f3e9; border-radius: 13px; padding: 16px; }
.hero-stat b { font-size: 28px; font-weight: 600; letter-spacing: -.7px; }
.hero-stat span { color: #6d7169; }
.kpi { min-height: 132px; padding: 22px; }
.kpi-label { color: #6d7169; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.kpi strong { font-size: 36px; font-weight: 500; letter-spacing: -.8px; }
.module-card { border-radius: 15px; }
.module-card:hover { transform: none; border-color: #e4d5b4; box-shadow: 0 2px 8px #20211f08; }
.module-card .module-icon { background: var(--amber-light); color: #96680d; border-radius: 11px; }
.module-card b { font-size: 16px; font-weight: 600; }
.module-card em { color: #75551a; font-weight: 600; }
.activity-item time { color: var(--muted); }
.activity-dot { color: #96680d; background: var(--amber-light); }
th { background: #fff; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #6d7169; padding: 13px 18px; }
td { font-size: 14px; padding: 16px 18px; }
tbody tr:hover, tbody tr.clickable:hover { background: #fffaf0; }
.table-scroll .btn[data-action="open-database-org"],
.table-scroll .btn[data-action="open-legacy-org"],
.table-scroll .btn[data-action="select-public-section"] {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: 0; min-height: 0; text-align: left; font-weight: 500;
}
.table-scroll .btn[data-action="open-database-org"]:hover,
.table-scroll .btn[data-action="open-legacy-org"]:hover,
.table-scroll .btn[data-action="select-public-section"]:hover { text-decoration: underline; }
.dashboard-grid > .card { min-width: 0; }
.dashboard-grid .table-card table { min-width: 0; }
.dashboard-grid .table-card td, .dashboard-grid .table-card th { padding: 14px 12px; }
.dashboard-grid .table-card .progress { width: 65px; }
.dashboard-grid .table-card .progress-label { gap: 6px; font-size: 12px; }
.status { min-height: 25px; border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; }
.progress { height: 6px; background: #eeeee9; }
.progress i { background: var(--amber); }
.progress-label { color: #606958; }
.type-chip { background: #f2f4ec; color: #646e57; font-weight: 500; border-radius: 6px; }
.description { color: #555b50; }
.hint, .skip-check, .skip-ai-answer { background: #f7f7f3; color: #646b5b; border-radius: 9px; }
.toast { background: #293320; border-radius: 12px; box-shadow: 0 5px 25px #25331b30; }

/* Passport, structure and administration use the same light GOV components. */
.passport-title h1 { font-size: 26px; font-weight: 600; letter-spacing: -.65px; line-height: 1.3; }
.school-mark { background: #fff0cf; color: #ae7b20; border-radius: 14px; }
.school-mark span { color: #96680d; }
.passport-score { border: 1px solid #f0f3e9; background: #f7f7f3; border-radius: 13px; }
.passport-score strong { font-weight: 500; }
.info { border-radius: 13px; border-color: #efefea; }
.info small, .detail-meta dt { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.info b, .detail-meta dd { font-weight: 500; color: #414a39; }
.org-node { border-radius: 13px; }
.org-node.root { background: var(--amber-light); border-color: #f4deb0; color: var(--ink); }
.org-node.root small, .org-node.root span { color: #6d7169; }
.structure-tree li::before, .structure-tree li::after, .structure-tree ul ul::before { border-color: #d9ddcf; }
.leadership-portrait { background: linear-gradient(135deg,#f7f4eb,#e9ecdf); }
.leadership-position { color: #96680d; }
.leadership-details h3 { font-size: 17px; }
.route-index { background: #eeeee9; color: #646b5b; }
.detail-meta div { border-radius: 9px; }
.direction.in { background: #edf2e4; color: #5b7040; }
.direction.internal { background: #eeeee9; color: #646b5b; }
.drawer-backdrop, .modal-backdrop { background: #20211f55; }
.drawer-head h2 { font-size: 23px; font-weight: 600; }
.modal { border-radius: 20px; box-shadow: 0 12px 55px #20211f20; }
.close { color: #6f756b; }
.connection-badge { font-weight: 500; }
.setup-explainer { background: #fff; color: var(--ink); }
.setup-explainer > p, .mini-route .route-node small { color: #6d7169; }
.mini-route .route-node:not(:last-child)::before { background: var(--line); }
.setup-explainer h2, .login-card h2 { font-size: 23px; }
.setup-number, .template-icon { background: var(--amber-light); color: #96680d; }
.form-section-title span { font-weight: 600; }
.template-head { background: #f8f7f4; }
.template-head h2 { font-size: 16px; }
.template-sections b, .template-sections span { font-weight: 500; }
.wizard-steps span, .passport-preview > strong { font-weight: 500; }
.passport-editor-tabs .btn { border-radius: 9px; }
.passport-record { border-radius: 13px; }
.passport-record :disabled { color: var(--ink); background: var(--surface-2); }
.wf-link { color: #75551a; }
.wf-message, .wf-file { border-color: var(--line); }
.wf-message small, .wf-file small, .detail-layout aside .card p { color: var(--muted); }
.wf-upload { background: var(--surface-2); border-radius: 9px; }
.wf-danger { color: var(--danger) !important; }
.skip-workspace .page-head h1 { font-size: 27px; }

@media (max-width:1590px) { .page { padding: 28px 26px; } }
@media (max-width:1240px) {
  :root { --sidebar: 216px; }
  h1, .module-hero h1, .skip-workspace .page-head h1 { font-size: 25px; }
  .brand { padding: 22px 16px; }
  .brand small { font-size: 9px; }
  .nav-button { font-size: 13px; }
  .topbar { padding: 0 22px; gap: 12px; }
}
@media (max-width:1000px) {
  .topbar { height: 67px; }
  .page { padding: 24px 20px; }
  .hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Keep this application's established menu toggle breakpoint and behavior. */
@media (max-width:820px) {
  .app-shell { grid-template-columns: minmax(0,1fr); }
  .sidebar { width: 248px; left: -260px; }
  .app-shell.menu-open .sidebar { left: 0; }
  .topbar { height: 66px; padding: 0 16px; gap: 10px; }
  .top-search { width: auto; min-width: 0; }
  .top-search input { font-size: 16px; }
  .role-select { width: 46px; max-width: 46px; color: transparent; }
  .page { padding: 23px 16px; }
  h1, .module-hero h1, .skip-workspace .page-head h1 { font-size: 26px; }
  .passport-title h1 { font-size: 23px; }
  .card, .kpi, .module-hero { border-radius: 15px; }
  .card { padding: 18px 16px; }
  .table-card { padding: 0; }
  .table-card .section-head { padding: 18px 16px 0; }
  .nav-button { font-size: 14px; }
  .tabs { gap: 24px; }
  .field input, .field select, .field textarea, .select, .search-field input, .wf-filters select, .wf-filters input { font-size: 16px; }
  .module-hero { padding: 20px; }
  .modal { width: calc(100% - 20px); max-height: calc(100dvh - 24px); border-radius: 18px; padding: 20px; }
  .modal-backdrop { padding: 0; }
  .skip-detail-grid .card { padding: 18px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}