/*
 * SNN admin panel (Filament 5) – light government look for 50+ users (docs/phase1/UI_STYLE.md).
 * Loaded after Filament's CSS through the STYLES_AFTER render hook (AdminPanelProvider). No build step.
 * Filament's own rules are unlayered, so selectors here use the same or higher specificity.
 */

/* ---- Type scale & shape: Filament's "sm" text is its body size -> 16 px; nothing below 14 px. ---- */
html.fi {
    --text-xs: 0.875rem;              /* 14 px (badges, hints) */
    --text-xs--line-height: 1.45;
    --text-sm: 1rem;                  /* 16 px (body, tables, nav, inputs, buttons) */
    --text-sm--line-height: 1.5;
    --text-base: 1.0625rem;           /* 17 px */
    --text-base--line-height: 1.5;
    --text-lg: 1.25rem;               /* 20 px */
    --text-lg--line-height: 1.4;
    --text-xl: 1.375rem;
    --text-2xl: 1.625rem;
    --text-3xl: 1.875rem;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 6px;
    --radius-2xl: 8px;
    --snn-navy: #0B3A75;
    --snn-navy-hover: #082C5A;
    --snn-border: #D5DCE6;
    --snn-bg: #F4F6F9;
    --snn-text: #1B2533;
    --snn-text-2: #4A5568;
    --snn-saffron: #FF9933;
    --snn-green: #138808;
    font-size: 16px;
    color-scheme: light;
}

html.fi body.fi-body {
    font-family: 'Noto Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--snn-text);
    background-color: var(--snn-bg);
}

/* ---- Tricolour strip (BODY_START hook) ---- */
.snn-tricolour {
    display: flex;
    height: 4px;
    width: 100%;
}
.snn-tricolour > span { flex: 1 1 0; }
.snn-tricolour > span:nth-child(1) { background: var(--snn-saffron); }
.snn-tricolour > span:nth-child(2) { background: #FFFFFF; }
.snn-tricolour > span:nth-child(3) { background: var(--snn-green); }

/* ---- Brand (logo placeholder + two-line title) ---- */
.snn-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
    min-width: 0;
    color: var(--snn-navy);
    text-decoration: none;
}
.snn-brand-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: var(--snn-navy);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--snn-saffron);
}
.snn-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.snn-brand-hi {
    font-weight: 700;
    font-size: 1rem;
    color: var(--snn-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snn-brand-en {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--snn-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fi-logo { display: flex; align-items: center; max-width: 100%; }

/* ---- Topbar ---- */
.fi-topbar {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--snn-border);
    box-shadow: none;
    min-height: 4rem;
}

/* ---- Sidebar ---- */
.fi-sidebar {
    background-color: #FFFFFF;
    border-inline-end: 1px solid var(--snn-border);
}
.fi-sidebar-header { background-color: #FFFFFF; }
.fi-sidebar-group-label {
    font-size: 0.9375rem;             /* 15 px */
    font-weight: 700;
    color: var(--snn-text-2);
}
.fi-sidebar-item-btn {
    min-height: 2.75rem;              /* 44 px */
    border-radius: 4px;
}
.fi-sidebar-item-label {
    font-size: 1rem;                  /* 16 px */
    font-weight: 500;
    color: var(--snn-text);
}
.fi-sidebar-item-btn > .fi-icon { color: var(--snn-text-2); }
.fi-sidebar-item-btn:hover { background-color: #EDF2F9; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: #E6EDF7;
    box-shadow: inset 4px 0 0 var(--snn-navy);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--snn-navy);
    font-weight: 700;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--snn-navy); }

/* ---- Page header ---- */
.fi-header-heading { color: var(--snn-text); font-weight: 700; }
.fi-header-subheading, .fi-section-header-description { color: var(--snn-text-2); }

/* ---- Cards / panels: white, 1 px border, 6 px radius, very light shadow ---- */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-widget .fi-section,
.fi-simple-main {
    border: 1px solid var(--snn-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.fi-section-header-heading { color: var(--snn-text); font-weight: 700; }

/* ---- Buttons & links: >= 44 px targets ---- */
.fi-btn {
    min-height: 2.75rem;
    padding-inline: 1rem;
    font-weight: 600;
}
.fi-btn.fi-size-xs, .fi-btn.fi-size-sm { min-height: 2.75rem; }
.fi-icon-btn:not(.fi-input-wrp .fi-icon-btn) {
    width: 2.75rem;
    height: 2.75rem;
}
.fi-ta-actions .fi-link,
.fi-ta-cell .fi-link {
    min-height: 2.75rem;
    font-weight: 600;
}
.fi-link { text-underline-offset: 3px; }

/* ---- Forms: label above, fields >= 44 px ---- */
.fi-fo-field-label-content { color: var(--snn-text); font-weight: 600; }
.fi-input-wrp {
    min-height: 2.75rem;
    --tw-ring-color: #8A96A8;          /* clearly visible field border; error/focus states keep Filament's colours */
}
input.fi-input,
select.fi-select-input,
textarea.fi-input {
    padding-block: 0.625rem;
    font-size: 1rem;
    color: var(--snn-text);
}
input.fi-input::placeholder, textarea.fi-input::placeholder { color: #5F6B7A; }
.fi-select-input-btn { min-height: 2.75rem; font-size: 1rem; }
.fi-checkbox-input { width: 1.25rem; height: 1.25rem; }
.fi-fo-field-wrp-error-message { font-size: 0.9375rem; font-weight: 600; }

/* ---- Tables: >= 15 px text, rows >= 44 px, zebra rows, clear header ---- */
.fi-ta-table > thead > tr { background-color: #EEF2F7; }
.fi-ta-header-cell {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--snn-text);
    white-space: nowrap;
}
.fi-ta-table > tbody > tr.fi-ta-row { height: 3rem; }
/* Rows ~52 px: 44 px action buttons + small padding (Filament default would give ~76 px with the larger buttons). */
.fi-ta-text:not(.fi-inline), .fi-ta-icon:not(.fi-inline), .fi-ta-color:not(.fi-inline) { padding-block: 0.75rem; }
.fi-ta-cell:has(.fi-ta-actions) { padding-block: 0.25rem; }
.fi-ta-table > tbody > tr.fi-ta-row:nth-child(even) { background-color: #F8FAFC; }
.fi-ta-table > tbody > tr.fi-ta-row:hover { background-color: #EDF2F9; }
.fi-ta-text-item.fi-size-sm, .fi-ta-text-item { font-size: 1rem; }
.fi-ta-text-item.fi-size-xs { font-size: 0.9375rem; }
.fi-ta-text-item.fi-color-gray, .fi-ta-text-description { color: var(--snn-text-2); }
.fi-pagination-item-btn { min-width: 2.75rem; min-height: 2.75rem; }

/* ---- Badges: readable (text is always shown with the colour) ---- */
.fi-badge { font-size: 0.875rem; font-weight: 600; padding-block: 0.25rem; }

/* ---- Tabs: active tab underlined in navy ---- */
.fi-tabs-item { min-height: 2.75rem; }
.fi-tabs-item-label { font-size: 1rem; }
.fi-tabs-item.fi-active { box-shadow: inset 0 -3px 0 var(--snn-navy); }

/* ---- Footer (FOOTER hook) ---- */
.snn-footer {
    margin-top: 2rem;
    padding: 0.875rem 1.5rem;
    background: #E9EDF2;
    border-top: 1px solid var(--snn-border);
    color: var(--snn-text-2);
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
    width: 100%;
}
.snn-footer a { color: var(--snn-navy); text-decoration: underline; text-underline-offset: 3px; }
.snn-footer a:hover { color: var(--snn-navy-hover); }
.fi-simple-layout .snn-footer { margin-top: auto; background: transparent; border-top: 0; }

/* ---- Login (simple layout): centred light card, two-line title ---- */
.fi-simple-layout { background-color: var(--snn-bg); }
.fi-simple-main { margin-block: 2rem; }
.fi-simple-header .fi-logo { height: auto !important; }
.fi-simple-header .snn-brand { flex-direction: column; text-align: center; gap: 0.75rem; }
.fi-simple-header .snn-brand-badge { width: 4rem; height: 4rem; font-size: 1.125rem; }
.fi-simple-header .snn-brand-hi { font-size: 1.25rem; white-space: normal; }
.fi-simple-header .snn-brand-en { font-size: 1rem; white-space: normal; }
.fi-simple-header-heading { color: var(--snn-text); font-size: 1.25rem; }
.snn-login-heading { display: flex; flex-direction: column; gap: 0.125rem; }
.snn-login-heading-en { font-size: 1rem; font-weight: 500; color: var(--snn-text-2); }
.fi-simple-main .fi-btn { min-height: 3rem; font-size: 1.0625rem; }
.fi-simple-main .fi-input-wrp { min-height: 3rem; }
.fi-simple-main input.fi-input { font-size: 1.0625rem; padding-block: 0.75rem; }
.fi-simple-main .fi-fo-field-label-content { font-size: 1rem; }

/* ---- Focus: clearly visible for keyboard users ---- */
.fi a:focus-visible, .fi button:focus-visible, .snn-footer a:focus-visible {
    outline: 3px solid var(--snn-saffron);
    outline-offset: 2px;
}

/* ---- No animations beyond simple fades ---- */
@media (prefers-reduced-motion: reduce) {
    .fi * { transition: none !important; animation: none !important; }
}