/* Shared type scale and navigation theme. Change these tokens in one place. */
:root {
    --mis-text-body: 1rem;
    --mis-text-menu: 1.125rem;
    --mis-nav-font-size: 1rem;
    --mis-text-section: 1.25rem;
    --mis-text-heading: 1.375rem;
    --mis-sidebar-width: 320px;
    --mis-nav-background: #10283d;
    --mis-nav-text: #e7eef6;
    --mis-nav-muted: #b6c9d9;
    --mis-nav-active: #0f766e;
    --mis-nav-focus: #99f6e4;
}

html[data-mis-readable] { font-size: 16px; }
html[data-mis-readable] body {
    font-size: var(--mis-text-body);
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html[data-mis-readable] :where(input, select, textarea, button, table, small, .label) {
    font-size: var(--mis-text-body);
    line-height: 1.6;
}
html[data-mis-readable] :where(p, label, a, li, td, th, small, dt, dd, figcaption, .label) {
    font-size: max(1rem, 1em) !important;
}
html[data-mis-readable] :where(h1, h2) {
    font-size: var(--mis-text-heading) !important;
    line-height: 1.5 !important;
}
html[data-mis-readable] :where(h3, h4, h5, h6) {
    font-size: var(--mis-text-section) !important;
    line-height: 1.5 !important;
}
html[data-mis-readable] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select) {
    min-height: 44px;
}
html[data-mis-readable] :where(td, th) { line-height: 1.65; }

/* Utility text sizes are generated below; icon sizes remain independent. */

html[data-mis-readable] :where(:not(i, svg, path, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, h1, h2, h3, h4, h5, h6)):is(
    [class~="md:text-sm"],
    [class~="sm:text-sm"],
    [class~="sm:text-xs"],
    [class~="text-[10px]"],
    [class~="text-[11px]"],
    [class~="text-[13px]"],
    [class~="text-[15px]"],
    [class~="text-[6px]"],
    [class~="text-[9px]"],
    [class~="text-sm"],
    [class~="text-xs"]
) { font-size: var(--mis-text-body) !important; line-height: 1.65 !important; }

html[data-mis-readable] :where(:not(i, svg, path, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, h1, h2, h3, h4, h5, h6)):is(
    [class~="lg:text-3xl"],
    [class~="lg:text-4xl"],
    [class~="md:text-2xl"],
    [class~="md:text-xl"],
    [class~="sm:text-2xl"],
    [class~="sm:text-3xl"],
    [class~="sm:text-5xl"],
    [class~="sm:text-6xl"],
    [class~="sm:text-xl"],
    [class~="text-2xl"],
    [class~="text-3xl"],
    [class~="text-4xl"],
    [class~="text-5xl"],
    [class~="text-6xl"],
    [class~="text-xl"],
    [class~="xl:text-4xl"],
    [class~="xl:text-[42px]"]
) { font-size: var(--mis-text-heading) !important; line-height: 1.65 !important; }

html[data-mis-readable] :where(:not(i, svg, path, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, h1, h2, h3, h4, h5, h6)):is(
    [class~="md:text-lg"],
    [class~="sm:text-lg"],
    [class~="text-lg"]
) { font-size: var(--mis-text-section) !important; line-height: 1.65 !important; }

html[data-mis-readable] :where(:not(i, svg, path, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, h1, h2, h3, h4, h5, h6)):is(
    [class~="md:text-base"],
    [class~="sm:text-base"],
    [class~="text-base"]
) { font-size: var(--mis-text-menu) !important; line-height: 1.65 !important; }

html[data-mis-readable] .mis-sidebar {
    width: min(var(--mis-sidebar-width), calc(100vw - 24px));
    background: linear-gradient(180deg, #15334a 0%, var(--mis-nav-background) 60%, #0c2134 100%);
    color: var(--mis-nav-text);
    border-right: 1px solid #28485e;
    box-shadow: 8px 0 28px rgb(15 23 42 / 10%);
}
html[data-mis-readable] .mis-sidebar-header {
    gap: 8px;
    padding: 20px 16px;
    background: transparent;
    border-color: #335168;
}
html[data-mis-readable] .mis-sidebar-brand {
    font-size: var(--mis-text-section) !important;
    letter-spacing: .025em;
    color: #ffffff;
}
html[data-mis-readable] .mis-sidebar-logo {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #d5f4ec;
    color: #115e59;
}
html[data-mis-readable] .mis-sidebar-logo i { font-size: 20px; }
html[data-mis-readable] .mis-sidebar-profile {
    padding: 16px;
    background: rgb(255 255 255 / 4%);
    border-color: #335168;
}
html[data-mis-readable] .mis-sidebar-name {
    font-size: var(--mis-text-menu) !important;
    color: #ccfbf1;
}
html[data-mis-readable] .mis-sidebar-department {
    font-size: var(--mis-text-body) !important;
    color: var(--mis-nav-muted);
}
html[data-mis-readable] .mis-sidebar-icon-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: #d5e4ee;
    border-radius: 10px;
}
html[data-mis-readable] .mis-sidebar-icon-button:hover { background: #29465e; color: #ffffff; }
html[data-mis-readable] .mis-sidebar-icon-button i { font-size: 18px; }
html[data-mis-readable] .mis-menu-home { margin: 0 10px 12px; }
html[data-mis-readable] .mis-menu-group {
    --mis-group-accent: #7dd3fc;
    margin: 8px 10px;
    overflow: hidden;
    border: 1px solid #335168;
    border-radius: 12px;
    background: rgb(255 255 255 / 3%);
}
html[data-mis-readable] .mis-menu-group[data-group="sidebar-group-1"] { --mis-group-accent: #5eead4; }
html[data-mis-readable] .mis-menu-group[data-group="sidebar-group-2"] { --mis-group-accent: #93c5fd; }
html[data-mis-readable] .mis-menu-group[data-group="sidebar-group-3"] { --mis-group-accent: #c4b5fd; }
html[data-mis-readable] .mis-menu-group[data-group="sidebar-group-4"] { --mis-group-accent: #fcd34d; }
html[data-mis-readable] .mis-menu-group[data-group="sidebar-group-5"] { --mis-group-accent: #f9a8d4; }
html[data-mis-readable] .mis-menu-group[data-group="sidebar-group-admin"] { --mis-group-accent: #a5b4fc; }
html[data-mis-readable] .mis-menu-group-button {
    min-height: 56px;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    font-size: var(--mis-nav-font-size) !important;
    line-height: 1.6 !important;
    color: #edf4fa;
    border-left: 3px solid var(--mis-group-accent);
    background: transparent;
}
html[data-mis-readable] .mis-menu-group-button:hover { background: #24465d; }
html[data-mis-readable] .mis-menu-group-button[aria-expanded="true"] {
    background: #24465d;
    color: #ffffff;
}
html[data-mis-readable] .mis-menu-group[data-active="true"] { border-color: #559a9b; }
html[data-mis-readable] .mis-menu-count {
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--mis-text-body) !important;
    font-weight: 600;
    color: var(--mis-group-accent);
    background: #10283d;
    border: 1px solid #456276;
    border-radius: 8px;
}
html[data-mis-readable] .mis-menu-chevron { color: var(--mis-group-accent); font-size: 14px; }
html[data-mis-readable] .mis-menu-items:not([hidden]) { padding: 6px; }
html[data-mis-readable] .mis-menu-items[hidden] { display: none !important; }
html[data-mis-readable] .mis-menu-item {
    min-height: 52px;
    margin: 3px 0;
    gap: 10px;
    padding: 10px;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: 9px;
    font-size: var(--mis-nav-font-size) !important;
    line-height: 1.6 !important;
    color: var(--mis-nav-text);
    background: transparent;
}
html[data-mis-readable] .mis-menu-item:hover { color: #ffffff; background: #284c62; border-color: #52788a; }
html[data-mis-readable] .mis-menu-item[aria-current="page"] {
    color: #ffffff;
    background: var(--mis-nav-active);
    border-color: #2a9c91;
    border-left-color: #99f6e4;
    box-shadow: 0 3px 10px rgb(0 0 0 / 12%);
    font-weight: 600;
}
html[data-mis-readable] .mis-menu-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 17px;
    color: #b9dcea;
    background: #24445a;
}
html[data-mis-readable] .mis-menu-item[aria-current="page"] .mis-menu-icon { color: #ffffff; background: #17685f; }
html[data-mis-readable] .mis-sidebar :where(button, a):focus-visible {
    outline: 2px solid var(--mis-nav-focus);
    outline-offset: -3px;
}
html[data-mis-readable] .mis-sidebar .sidebar-scroll { scrollbar-color: #55778c #10283d; scrollbar-width: thin; }
html[data-mis-readable] .mis-sidebar .sidebar-scroll::-webkit-scrollbar { width: 7px; }
html[data-mis-readable] .mis-sidebar .sidebar-scroll::-webkit-scrollbar-thumb { background: #55778c; border-radius: 8px; }
html[data-mis-readable] .mis-app-content { min-width: 0; }
html[data-mis-readable] .mis-status-bar { background: #15334a; border-color: #335168; }
@media (min-width: 768px) {
    html[data-mis-readable] .mis-sidebar { width: var(--mis-sidebar-width); }
    html[data-mis-readable] .mis-app-content { margin-left: var(--mis-sidebar-width); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-mis-readable] .mis-sidebar,
    html[data-mis-readable] .mis-sidebar * { transition-duration: 0s !important; }
}