/* Shared presentation layer. Business state and role rules remain in their owners. */
:root {
    --primary: #0056a6;
    --primary-dark: #003b73;
    --ui-navy: #16295c;
    --ui-background: #f1f4fa;
    --ui-border: #dbe3f0;
    --ui-muted: #5b6b86;
    --ui-radius: 12px;
}
html, body { background: var(--ui-background); }
body, button, input, select, textarea {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
}
body { font-size: 14px; line-height: 1.5; color: #212529; }
.app-shell { display: block; overflow: visible; }
.app-main { min-height: calc(100dvh - 72px); overflow: visible; }
.app-main > main { background: transparent !important; padding: 24px clamp(16px, 3vw, 42px); }
.app-main > main > [class*="max-w-"] { max-width: 1440px; }
.app-main h1, .app-main [class*="greeting__title"] { font-size: 20px !important; font-weight: 600 !important; line-height: 1.4; }
.app-main h2 { font-size: 18px !important; font-weight: 600 !important; line-height: 1.4; }
.app-main h3, .app-main h4 { font-weight: 600 !important; }
.app-main .font-bold, .app-main .font-extrabold, .app-main .font-black { font-weight: 600; }
.app-main .text-xs { font-size: 12px; }
.app-main .text-sm { font-size: 14px; }
.app-main :is(.dashboard-panel, .proposal-panel, .surat-panel, .disposisi-panel,
    .bg-white.rounded-2xl, .bg-white.rounded-3xl, .bg-white.rounded-xl) {
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    box-shadow: 0 3px 12px rgba(22, 41, 92, .035);
}
.app-main :is(.dashboard-hero-sa, .super-admin-hero, .approver-hero, .user-hero-panel) { background: #fff; }
.app-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
    min-height: 44px; border-radius: 8px; font-size: 14px;
    border-color: #c4cfe4; background-color: #fff;
}
.app-main :is(button, .filter-chip, .preset-filter-chip, .type-filter, .role-filter, .fin-filter, .tab-chip) {
    border-radius: 8px;
}
.app-main :is(.filter-chip, .preset-filter-chip, .type-filter, .role-filter, .fin-filter, .tab-chip,
    .alur-health-filter, .lpj-eval-filter, .surat-segment-bar button) { min-height: 44px; font-size: 14px; }
.app-main button:not([class*="absolute"]):not([class*="rounded-full"]) { min-height: 44px; }
.app-main table { font-size: 14px; }
.app-main thead { background: #f7f9fd; }
.app-main th { color: var(--ui-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.app-main :is(th, td) { border-color: var(--ui-border); }
.app-main td { line-height: 1.5; }
.app-main :is(.shadow-xl, .shadow-2xl) { box-shadow: 0 8px 24px rgba(22, 41, 92, .08); }
:is(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid #85b7e6; outline-offset: 3px; }
.status-menunggu { background: #fef3c7; color: #92400e; }
.status-diproses { background: #edf6fe; color: #0056a6; }
.status-diterima, .status-disetujui, .status-selesai { background: #e7f6ec; color: #237452; }
.status-revisi, .status-tolak { background: #fee4e2; color: #b42318; }

/* Existing #sidebar ID is retained for badge and mobile menu compatibility. */
.ui-topbar {
    position: sticky; top: 0; z-index: 40; display: flex; align-items: center;
    gap: 16px; min-height: 72px; padding: 10px 24px; color: #fff; background: var(--ui-navy);
    box-shadow: 0 2px 8px rgba(22, 41, 92, .12);
}
.ui-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: #fff; }
.ui-brand img { width: auto; height: 36px; }
.ui-brand span { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .25); }
.ui-brand strong { display: block; max-width: 180px; font-size: 14px; font-weight: 600; }
.ui-brand small { display: block; font-size: 11px; color: #c4cfe4; }
.ui-primary-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.ui-nav-group { position: relative; }
.ui-topbar :is(.nav-item, summary) {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px;
    border-radius: 8px; color: #e0e7f5; white-space: nowrap; cursor: pointer;
    font-size: 13px; font-weight: 500; list-style: none;
}
.ui-topbar summary::-webkit-details-marker { display: none; }
.ui-topbar :is(.nav-item, summary):hover, .ui-topbar .is-active, .ui-topbar details[open] > summary {
    color: #fff; background: rgba(255, 255, 255, .13);
}
.ui-nav-panel {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px;
    padding: 8px; border: 1px solid var(--ui-border); border-radius: 12px;
    color: #212529; background: #fff; box-shadow: 0 12px 32px rgba(22, 41, 92, .15);
}
.ui-nav-panel .nav-item { color: #2f3b55; }
.ui-nav-panel .nav-item:hover, .ui-nav-panel .is-active { color: var(--primary); background: #edf6fe; }
.ui-account { margin-left: auto; flex-shrink: 0; }
.ui-account .ui-nav-panel { left: auto; right: 0; }
.ui-account-name { padding: 8px 10px; border-bottom: 1px solid var(--ui-border); overflow-wrap: anywhere; font-size: 12px; }
.ui-menu-toggle { display: none; }
.ui-nav-badges { display: inline-flex; gap: 3px; }
.ui-nav-badges > span { min-width: 18px; padding: 1px 5px; border-radius: 999px; font-size: 11px; font-weight: 600; }
@media (max-width: 1199px) {
    .ui-topbar { padding: calc(8px + var(--safe-top)) 16px 8px; min-height: 64px; }
    .ui-brand strong { max-width: 160px; }
}
@media (max-width: 479px) {
    .ui-brand span { display: none; }
}
@media (max-width: 1199px) {
    .ui-account { display: none; }
    .ui-menu-toggle { display: flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; border: 1px solid #ffffff40; border-radius: 8px; }
    .ui-primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 150px); overflow-y: auto; padding: 12px 16px; background: var(--ui-navy); }
    .ui-topbar.mobile-menu-open .ui-primary-nav { display: block; }
    .ui-theme #sidebarOverlay:not(.hidden) { display: block !important; }
    .ui-nav-panel { position: static; margin: 4px 0 8px; min-width: 0; box-shadow: none; }
    .ui-primary-nav > .nav-item, .ui-primary-nav summary { width: 100%; }
    .ui-mobile-account { display: block; border-top: 1px solid #ffffff30; margin-top: 8px; padding-top: 8px; }
    /* Old mobile role rules hide #sidebar; this is now the shared topbar. */
    body[class*="role-"] #sidebar.ui-topbar { display: flex !important; }
    body[class*="role-"] button.ui-menu-toggle { display: flex !important; }
    body .mobile-logout-btn { display: none; }
}
@media (min-width: 1200px) {
    .ui-mobile-account, .app-main button[onclick="toggleSidebar()"] { display: none; }
}
@media (max-width: 767px) {
    .app-main > main { padding: 16px !important; }
    .app-main :is(.filter-chip, .preset-filter-chip, .type-filter, .role-filter, .fin-filter, .tab-chip) { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.ui-public h1 { font-size: 20px; font-weight: 600; }
.ui-public h2 { font-size: 18px; font-weight: 600; }
.ui-public :is(input, select, button) { min-height: 44px; border-radius: 8px; font-size: 14px; }
.ui-public .bg-white { border-radius: 12px; border-color: var(--ui-border); }