/*
 * 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) ----
 * Stacked like the flag (saffron / white / green, 2 px each), so the white band stays visible on a white page. */
.snn-tricolour {
    display: flex;
    flex-direction: column;
    height: 6px;
    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; }
/* Icon + text must sit on one line: Filament pins .fi-link-label to the baseline while the icon is centred,
   which drifts apart once links get our 44 px min-height (text rides high, icon low). Centre both. */
.fi-link { align-items: center; }
.fi-link > .fi-link-label { align-self: center; line-height: 1.25; }
.fi-link > .fi-icon, .fi-btn > .fi-icon, .fi-icon-btn > .fi-icon, .fi-dropdown-list-item > .fi-icon { align-self: center; flex-shrink: 0; }
.fi-btn > .fi-btn-label, .fi-dropdown-list-item-label { line-height: 1.25; }
.fi-ta-actions { align-items: center; }

/* ---- 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; }
}

/* ==========================================================================================================
 * Dashboard quick links – App\Filament\Widgets\QuickLinks (resources/views/filament/widgets/quick-links.blade.php)
 * Client 2026-10-03: big tiles with icons for the main sections. Tile >= 96 px, icon 32 px, labels >= 16 px, all in rem
 * so they grow with A / A+ / A++. Grid: 2 columns on phones, 3-4 on desktop (capped at 4). Icon and text are centred on
 * one line (row layout); on phones the icon sits above the text on the same centre axis.
 * ========================================================================================================== */
.snn-ql-heading .snn-ql-sep, .snn-ql-group-title .snn-ql-sep { color: var(--snn-text-2); font-weight: 400; }
.snn-ql-groups { display: flex; flex-direction: column; gap: 1.5rem; }
.snn-ql-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0 0 0.75rem;
    padding-inline-start: 0.625rem;
    border-inline-start: 4px solid var(--snn-saffron);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--snn-navy);
}
.snn-ql-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    /* as many 14rem columns as fit, but never more than 4 */
    grid-template-columns: repeat(auto-fill, minmax(max(14rem, calc((100% - 3 * 0.75rem) / 4)), 1fr));
}
.snn-ql-item { display: flex; min-width: 0; }
.snn-ql-tile {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    min-height: 6rem;                 /* 96 px at A */
    padding: 0.875rem 1rem;
    background: #FFFFFF;
    border: 1px solid var(--snn-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    color: var(--snn-text);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.snn-ql-tile:hover { background: #EDF2F9; border-color: var(--snn-navy); }
.fi a.snn-ql-tile:focus-visible, .snn-ql-tile:focus-visible {
    outline: 3px solid var(--snn-saffron);
    outline-offset: 2px;
    border-color: var(--snn-navy);
    background: #EDF2F9;
}
.snn-ql-tile:has(.snn-ql-badge-urgent) { box-shadow: inset 4px 0 0 #B42318, 0 1px 2px rgba(16, 24, 40, 0.05); }
.snn-ql-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background: #E6EDF7;
    color: var(--snn-navy);
}
.snn-ql-icon > .fi-icon { width: 2rem; height: 2rem; margin: 0; }   /* 32 px at A */
.snn-ql-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    min-width: 0;
}
.snn-ql-en {
    font-size: 1.0625rem;             /* 17 px */
    font-weight: 700;
    line-height: 1.3;
    color: var(--snn-navy);
    overflow-wrap: anywhere;
}
.snn-ql-hi {
    font-size: 1rem;                  /* 16 px */
    font-weight: 500;
    line-height: 1.4;
    color: var(--snn-text-2);
    overflow-wrap: anywhere;
}
.snn-ql-hint { font-size: 0.875rem; line-height: 1.4; color: var(--snn-text-2); }
/* Count badge = number + words + icon + colour (never colour alone). White on #B42318 6.6:1, on #A15C00 5.2:1. */
.snn-ql-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 0.75rem;           /* pill on one line, still tidy when it wraps at A++ */
    font-size: 0.9375rem;             /* 15 px */
    font-weight: 600;
    line-height: 1.3;
    color: #FFFFFF;
}
.snn-ql-badge > .fi-icon { width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; align-self: center; }
.snn-ql-badge strong { font-weight: 800; }
.snn-ql-badge-urgent { background: #B42318; }
.snn-ql-badge-waiting { background: #A15C00; }
.snn-ql-empty { color: var(--snn-text-2); margin: 0; }
@media (max-width: 39.9375rem) {
    .snn-ql .fi-section-content { padding: 1rem 0.75rem; }
    .snn-ql-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .snn-ql-tile { flex-direction: column; justify-content: center; text-align: center; gap: 0.5rem; padding: 0.75rem 0.5rem; }
    .snn-ql-text { align-items: center; }
    .snn-ql-badge { align-self: center; }
    .snn-ql-tile:has(.snn-ql-badge-urgent) { box-shadow: inset 0 4px 0 #B42318, 0 1px 2px rgba(16, 24, 40, 0.05); }
}
/* ==== end dashboard quick links ==== */