/* Core layout + components | No external imports */
:root{
--brand-primary:#17488A;
--brand-accent:#08915E;
--text:#1F2937; /* slate-800 */
--muted:#6B7280; /* slate-500 */
--bg:#FFFFFF;
--bg-soft:#F7F8FA;
--radius:12px;
--space:16px;
--shadow:0 2px 10px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--bg);font:400 15px/1.6, system-ui, -apple-system, Segoe UI, Roboto, Arial}
img{max-width:100%;height:auto}
.container{max-width:1320px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}


/* Topbar */
.topbar{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee}
.topbar-inner{display:flex;align-items:center;gap:12px;height:56px}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.topbar-nav .menu{display:none}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn, .btn-primary{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:8px 12px;cursor:pointer}
.btn-primary{background:var(--brand-primary);color:#fff}
.btn-nav-toggle,.btn-search,.btn-profile{background:transparent;border:0;padding:8px;border-radius:10px}
.btn-nav-toggle:hover,.btn-search:hover,.btn-profile:hover{background:var(--bg-soft)}
.topbar-search{border-top:1px solid #eee;padding:10px 0;background:#fff}
.search-form{display:flex;gap:8px}
.search-form input{flex:1;border:1px solid #ddd;border-radius:10px;padding:10px}


/* Layout */
.layout{display:flex;min-height:calc(100vh - 56px)}
.layout-sidebar{width:280px;border-inline-end:1px solid #eee;background:#fff}
.layout-page{flex:1;min-width:0;background:var(--bg-soft)}
.page-content{padding:24px 0}


/* Sidebar Menu */
.menu{list-style:none;margin:0;padding:8px}
.menu-vertical>.menu-item{position:relative}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none}
.menu a:hover{background:rgba(23,72,138,.08);color:var(--brand-primary)}
.menu .has-children>a{justify-content:space-between}
.menu .submenu-toggle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;border:0;background:transparent;transition:transform .2s ease}
.menu .submenu-toggle:hover{background:rgba(0,0,0,.05)}
.menu .submenu{display:none;padding-inline-start:10px}
.menu .submenu.open{display:block;animation:fadeSlide .18s ease}
.menu .chevron{transition:transform .2s ease}
.menu .submenu.open ~ .submenu-toggle .chevron{transform:rotate(180deg)}


@keyframes fadeSlide{from{opacity:.0;transform:translateY(-4px)}to{opacity:1;transform:none}}


/* Footer */
.portal-footer{background:#fff;border-top:1px solid #eee}
.footer-grid{display:grid;gap:12px;padding:20px 0;grid-template-columns:1fr auto}
.muted{color:var(--muted)}


/* Horizontal menu for topbar (desktop) */
.menu-horizontal{display:flex;gap:4px}
.menu-horizontal>.menu-item{position:relative}
.menu-horizontal .submenu{position:absolute;inset-inline-start:0;top:100%;min-width:220px;background:#fff;border:1px solid #eee;border-radius:10px;box-shadow:var(--shadow);padding:6px;margin-top:8px}
.menu-horizontal .submenu .submenu{inset-inline-start:100%;top:-6px;margin-top:0}
.menu-horizontal .menu-item:hover>ul.submenu{display:block}


/* Responsive */
@media (min-width: 992px){
.topbar-nav .menu{display:flex}