/* ==========================================================================
   SchoolHub Admin Theme
   --------------------------------------------------------------------------
   Override layer loaded after Filament's own CSS.

   Architecture:
   01. Design tokens
   02. Sidebar
   03. Custom topbar + user menu
   04. Main content + page headers
   05. Dashboard/stat cards
   06. Tables
   07. Forms, buttons, badges, modals
   08. Image editor
   09. Footer
   10. Login/auth
   11. Resource create/edit pages
   12. Responsive rules (kept close to the components they affect)

   IMPORTANT: Filament remains responsible for component layout and behavior.
   This file skins/overrides Filament; it does not replace Filament core CSS.
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {

    /* Brand navy */

    --sh-navy-900: #0d1f38;

    --sh-navy-800: #12294a;

    --sh-navy-700: #1b3a63;

    /* Primary blue */

    --sh-blue-600: #1a5fa8;

    --sh-blue-500: #2472c4;

    --sh-blue-100: #e3edf9;

    /* Accent */

    --sh-amber: #d97d0d;

    /* Card accents */

    --sh-rail-1: #1a5fa8;

    --sh-rail-2: #b5721a;

    --sh-rail-3: #6b4f9e;

    --sh-rail-4: #0f7a68;

    /* Neutrals */

    --sh-bg: #f4f6fa;

    --sh-surface: #ffffff;

    --sh-border: #e4e8f0;

    --sh-text: #16233a;

    --sh-text-muted: #64748b;

    --sh-text-dim: #94a3b8;

    /* Sidebar */

    --sh-nav-text: #a9b6cc;

    --sh-nav-text-hover: #e8eef7;

    --sh-nav-group: #9db0cf;

    /* Layout */

    --sh-main-padding-x: 1.75rem;

    --sh-main-padding-top: 1.5rem;

    --sh-topbar-height: 4.25rem;

}


/* ============================================================

 * 02. SIDEBAR

*   ============================================================ */

.fi-sidebar {

    background: var(--sh-navy-900) !important;

    border-right: none !important;

    min-height: 100vh !important;

}

.fi-sidebar-header {

    background: var(--sh-navy-800) !important;

    border-bottom:

        1px solid rgba(255, 255, 255, 0.07) !important;

    display: flex !important;

    align-items: center !important;

    gap: 0.7rem !important;

    min-height: 4.5rem !important;

    padding: 0.9rem 1.5rem !important;

    box-shadow: none !important;

}

.fi-sidebar-header .fi-logo,

.fi-sidebar-header a > span,

.fi-sidebar-header > a {

    color: #ffffff !important;

    font-weight: 700 !important;

    letter-spacing: 0.01em !important;

}


/* Sidebar navigation */

.fi-sidebar-item {

    margin: 1px 8px !important;

    border-radius: 7px !important;

}

.fi-sidebar-item-label {

    font-size: 0.86rem !important;

    font-weight: 500 !important;

}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {

    color: var(--sh-nav-text) !important;

}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {

    color: #7286a3 !important;

}

.fi-sidebar-item:not(.fi-active):hover {

    background: rgba(255, 255, 255, 0.055) !important;

}

.fi-sidebar-item:not(.fi-active):hover .fi-sidebar-item-label,

.fi-sidebar-item:not(.fi-active):hover .fi-sidebar-item-icon {

    color: var(--sh-nav-text-hover) !important;

}


/* Active nav */

html .fi-sidebar .fi-sidebar-item.fi-active,

html .fi-sidebar .fi-sidebar-item.fi-active > a {

    background: var(--sh-blue-600) !important;

    background-image: none !important;

}

html .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label,

html .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {

    color: #ffffff !important;

    opacity: 1 !important;

}


/* Group headings */

html .fi-sidebar .fi-sidebar-group-label {

    color: var(--sh-nav-group) !important;

    text-transform: uppercase;

    font-size: 0.66rem !important;

    letter-spacing: 0.11em;

    font-weight: 700 !important;

    margin-top: 1.1rem !important;

    margin-bottom: 0.3rem !important;

    padding-left: 1.1rem !important;

}

html .fi-sidebar .fi-sidebar-group:first-of-type .fi-sidebar-group-label {

    margin-top: 0 !important;

}

html .fi-sidebar .fi-sidebar-group-collapse-btn {

    color: var(--sh-nav-group) !important;

}


/* Sidebar badges */

.fi-sidebar-item .fi-badge {

    background: #c0392b !important;

    border-radius: 20px !important;

    min-width: 1.35rem !important;

    justify-content: center !important;

}

.fi-sidebar-item .fi-badge,

.fi-sidebar-item .fi-badge span {

    color: #ffffff !important;

    font-size: 0.65rem !important;

    font-weight: 700 !important;

}


/* Sidebar scrollbar */

.fi-sidebar-nav {

    scrollbar-width: thin;

    scrollbar-color:

        rgba(255, 255, 255, 0.12)

        transparent;

    overflow-y: auto;

}

.fi-sidebar-nav::-webkit-scrollbar {

    width: 5px;

}

.fi-sidebar-nav::-webkit-scrollbar-track {

    background: transparent;

}

.fi-sidebar-nav::-webkit-scrollbar-thumb {

    background: transparent;

    border-radius: 4px;

}

.fi-sidebar-nav:hover::-webkit-scrollbar-thumb {

    background: rgba(255, 255, 255, 0.14);

}


/* Compact rhythm
 *
 * Filament's defaults (2rem around the nav, 1.75rem between groups,
 * 0.5rem inside each item) suit a short menu. With five groups they push
 * half the menu below the fold. These keep it scannable: tight items, a
 * clear but small break between groups.
 */

.fi-sidebar-header {

    min-height: 4rem !important;

    padding: 0.75rem 1.25rem !important;

}

.fi-sidebar-header .fi-logo {

    margin: 0 !important;

}

.fi-sidebar-nav {

    padding: 0.75rem 0.5rem 1.25rem !important;

    row-gap: 0.25rem !important;

}

.fi-sidebar-nav-groups {

    margin-inline: 0 !important;

    row-gap: 0.25rem !important;

}

.fi-sidebar-group,
.fi-sidebar-group-items {

    row-gap: 1px !important;

}

.fi-sidebar-item {

    margin: 0 !important;

}

.fi-sidebar-item-btn {

    padding: 0.45rem 0.7rem !important;

    column-gap: 0.7rem !important;

}

/*
 * Filament paints the LINK inside each item light grey (gray-100) on
 * hover, focus and when active -- designed for a white sidebar. On this
 * navy one it covered the pale text. The link stays transparent; the item
 * behind it shows the hover and active colours set above.
 */
html .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn,
html .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:hover,
html .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:focus-visible {

    background-color: transparent !important;

}

html .fi-sidebar .fi-sidebar-item > .fi-sidebar-item-btn:focus-visible {

    outline: 2px solid rgba(255, 255, 255, 0.35) !important;

    outline-offset: -2px;

}

html .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {

    background-color: var(--sh-blue-600) !important;

}

.fi-sidebar-item-icon {

    width: 1.15rem !important;

    height: 1.15rem !important;

}

.fi-sidebar-group-btn {

    padding: 0.35rem 0.7rem 0.25rem !important;

}

/* Overrides the group-heading margins set above. */
html .fi-sidebar .fi-sidebar-group-label {

    margin: 0 !important;

    padding-left: 0 !important;

}

html .fi-sidebar .fi-sidebar-group {

    padding-top: 0.6rem;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

}

html .fi-sidebar .fi-sidebar-nav-groups > .fi-sidebar-group:first-child {

    padding-top: 0.35rem;

    border-top: none;

}


/* ============================================================

 * 03. CUSTOM TOPBAR

*   ============================================================ */

.fi-topbar {

    display: none !important;

}


/*

 * Filament still reserves space for its built-in topbar even

 * when hidden. Remove that reserved space.

*/

.fi-body,

html .fi-body {

    --topbar-height: 0rem !important;

}


/* Custom top navigation */

.sh-topbar {

    position: sticky;

    top: 0;

    /*
     * Same layer as Filament's own topbar (.fi-topbar-ctn = 30): above
     * page content and dropdowns (20), but below modals (40/50) and
     * notifications (50), which must be able to cover it.
     */
    z-index: 30;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    min-height: var(--sh-topbar-height);

    padding:

        0.85rem

        var(--sh-main-padding-x);

    /*

 * Pull the custom bar out through .fi-main padding so that

 * the bar runs from the sidebar boundary to the right edge

 * of the Filament content area.

*    */

    margin-top: calc(-1 * var(--sh-main-padding-top));

    margin-left:

        calc(-1 * var(--sh-main-padding-x));

    margin-right:

        calc(-1 * var(--sh-main-padding-x));

    margin-bottom: 0.9rem;

    background: var(--sh-surface);

    border-bottom:

        1px solid var(--sh-border);

    box-shadow:

        0 1px 3px rgba(13, 31, 56, 0.06),

        0 4px 12px rgba(13, 31, 56, 0.035);

    isolation: isolate;

}


/*

 * Prevent content from showing through the sticky navbar.

*/

.sh-topbar::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background: var(--sh-surface);

}


/* Topbar left */

.sh-topbar-left {

    display: flex;

    align-items: center;

    gap: 0.65rem;

    flex-wrap: wrap;

    min-width: 0;

}


/* Topbar right */

.sh-topbar-right {

    position: relative;

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


/* Sidebar toggle */

.sh-icon-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2.25rem;

    height: 2.25rem;

    flex: 0 0 2.25rem;

    border-radius: 8px;

    border: 1px solid transparent;

    background: transparent;

    color: var(--sh-text-muted);

    cursor: pointer;

    transition:

        background 0.15s ease,

        color 0.15s ease,

        border-color 0.15s ease;

}

.sh-icon-btn:hover {

    background: #f1f4f9;

    color: var(--sh-text);

}

.sh-icon-btn svg {

    width: 1.3rem !important;

    height: 1.3rem !important;

    min-width: 1.3rem;

    flex-shrink: 0;

}


/* Topbar chips */

.sh-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    background: #f7f9fc;

    border:

        1px solid var(--sh-border);

    border-radius: 8px;

    padding: 0.42rem 0.75rem;

    font-size: 0.78rem;

    color: var(--sh-text-muted);

    white-space: nowrap;

}

.sh-chip svg {

    width: 1rem !important;

    height: 1rem !important;

    min-width: 1rem;

    color: var(--sh-blue-600);

    flex-shrink: 0;

}

.sh-chip-value {

    color: var(--sh-text);

    font-weight: 600;

}

.sh-chip-clock {

    font-variant-numeric: tabular-nums;

    letter-spacing: 0.03em;

    color: var(--sh-text);

    font-weight: 600;

}

.sh-chip-divider {

    width: 1px;

    height: 0.9rem;

    background: var(--sh-border);

}

.sh-chip-role .sh-chip-value {

    color: var(--sh-blue-600);

    text-transform: uppercase;

    font-size: 0.72rem;

    letter-spacing: 0.05em;

}

.sh-chip-plan .sh-chip-value {

    text-transform: uppercase;

    font-size: 0.72rem;

    letter-spacing: 0.05em;

}

.sh-chip-plan-blue svg, .sh-chip-plan-blue .sh-chip-value { color: var(--sh-blue-600); }

.sh-chip-plan-green svg, .sh-chip-plan-green .sh-chip-value { color: #16a34a; }

.sh-chip-plan-red { border-color: #fecaca; background: #fef2f2; }

.sh-chip-plan-red svg, .sh-chip-plan-red .sh-chip-value { color: #dc2626; }

.sh-chip-link { text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; }

.sh-chip-link:hover { border-color: var(--sh-blue-600); box-shadow: 0 0 0 1px rgba(26, 95, 168, .15); }


/* ============================================================

 * 03A. USER MENU

*   ============================================================ */

.sh-user-btn {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 10px;

    padding:

        0.35rem

        0.6rem

        0.35rem

        0.4rem;

    cursor: pointer;

    transition:

        background 0.15s ease,

        border-color 0.15s ease;

}

.sh-user-btn:hover {

    background: #f7f9fc;

    border-color: var(--sh-border);

}

.sh-user-avatar {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2.25rem;

    height: 2.25rem;

    border-radius: 50%;

    background: var(--sh-navy-800);

    color: #ffffff;

    font-size: 0.78rem;

    font-weight: 700;

    text-transform: uppercase;

    flex-shrink: 0;

}

.sh-user-meta {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    line-height: 1.25;

    text-align: left;

}

.sh-user-name {

    font-size: 0.84rem;

    font-weight: 600;

    color: var(--sh-text);

    white-space: nowrap;

}

.sh-user-role {

    font-size: 0.68rem;

    color: var(--sh-text-dim);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}

.sh-user-chevron {

    width: 0.9rem !important;

    height: 0.9rem !important;

    color: var(--sh-text-dim);

    transition: transform 0.15s ease;

}

.sh-user-chevron.sh-rotated {

    transform: rotate(180deg);

}


/* User dropdown */

.sh-user-menu {

    position: absolute;

    top: calc(100% + 0.5rem);

    right: 0;

    min-width: 14rem;

    background: var(--sh-surface);

    border:

        1px solid var(--sh-border);

    border-radius: 10px;

    box-shadow:

        0 12px 28px rgba(13, 31, 56, 0.14);

    overflow: hidden;

    z-index: 150;

}

.sh-user-menu-head {

    padding: 0.8rem 0.95rem;

    border-bottom:

        1px solid var(--sh-border);

    background: #f7f9fc;

}

.sh-user-menu-name {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--sh-text);

}

.sh-user-menu-email {

    font-size: 0.75rem;

    color: var(--sh-text-dim);

    margin-top: 0.1rem;

    word-break: break-all;

}

.sh-user-menu-item {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    width: 100%;

    padding: 0.7rem 0.95rem;

    background: transparent;

    border: none;

    font-size: 0.84rem;

    color: var(--sh-text);

    cursor: pointer;

    text-align: left;

    transition: background 0.12s ease;

}

.sh-user-menu-item:hover {

    background: #f1f4f9;

}

.sh-user-menu-item svg {

    width: 1.05rem !important;

    height: 1.05rem !important;

    color: var(--sh-text-muted);

}


/* Prevent Alpine flash */

[x-cloak] {

    display: none !important;

}


/* Generic avatar */

.fi-avatar {

    background-color:

        var(--sh-navy-800) !important;

}

.fi-avatar .fi-avatar-initials,

.fi-avatar span {

    color: #ffffff !important;

    font-weight: 600 !important;

}


/* ============================================================

 * 03B. TOPBAR RESPONSIVE

*   ============================================================ */

@media (max-width: 1100px) {

    .sh-topbar-left .sh-chip {

        display: none;

    }

}

@media (max-width: 640px) {

    :root {

        --sh-main-padding-x: 1rem;

    }

    .sh-topbar {

        padding: 0.7rem 1rem;

        margin-top:

            calc(-1 * var(--sh-main-padding-top));

        margin-left: -1rem;

        margin-right: -1rem;

        margin-bottom: 1rem;

        min-height: 4rem;

    }

    .sh-user-meta {

        display: none;

    }

    .sh-user-btn {

        padding: 0.25rem;

    }

}


/* ============================================================

 * 04. MAIN CONTENT / PAGE HEADER

*   ============================================================ */

.fi-main-ctn {

    background: var(--sh-bg) !important;

}


/*

 * Main page padding is also used by the topbar/footer variables.

*/

.fi-main {

    padding-left:

        var(--sh-main-padding-x) !important;

    padding-right:

        var(--sh-main-padding-x) !important;

    padding-top:

        var(--sh-main-padding-top) !important;

    padding-bottom: 0 !important;

}

.fi-page {

    padding-top: 0 !important;

}

.fi-page-content,

.fi-resource-list-records-page .fi-page-content {

    gap: 1rem !important;

}


/* Page heading */

.fi-header {

    background:

        linear-gradient(

            180deg,

            #f2f7fd 0%,

            #eaf2fb 100%

        ) !important;

    border:

        1px solid var(--sh-border) !important;

    border-bottom:

        3px solid var(--sh-blue-600) !important;

    border-radius:

        12px 12px 0 0 !important;

    padding:

        1.05rem 1.35rem !important;

    margin-top: 0 !important;

    margin-bottom: 0 !important;

}

.fi-header-heading {

    color:

        var(--sh-blue-600) !important;

    font-weight: 700 !important;

    font-size: 1.3rem !important;

    text-transform: uppercase !important;

    letter-spacing: 0.02em !important;

}

.fi-header-subheading {

    color:

        var(--sh-text-muted) !important;

    font-size: 0.9rem !important;

    margin-top: 0.2rem !important;

}

.fi-breadcrumbs-item-label {

    color:

        var(--sh-text-muted) !important;

    font-size: 0.8rem !important;

}


/* ============================================================

 * 05. DASHBOARD / STAT CARDS

*   ============================================================ */

.fi-wi-stats-overview {

    gap: 1.15rem !important;

}

.fi-wi-stats-overview-stat {

    background:

        var(--sh-surface) !important;

    border:

        1px solid var(--sh-border) !important;

    border-radius: 12px !important;

    box-shadow:

        0 1px 2px

        rgba(13, 31, 56, 0.04) !important;

    position: relative !important;

    overflow: hidden !important;

    padding:

        1.35rem 1.25rem 1.25rem !important;

    transition:

        transform 0.16s ease,

        box-shadow 0.16s ease;

}

.fi-wi-stats-overview-stat::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background:

        var(--sh-rail-1);

}

.fi-wi-stats-overview-stat:nth-of-type(4n+2)::before {

    background: var(--sh-rail-2);

}

.fi-wi-stats-overview-stat:nth-of-type(4n+3)::before {

    background: var(--sh-rail-3);

}

.fi-wi-stats-overview-stat:nth-of-type(4n+4)::before {

    background: var(--sh-rail-4);

}

.fi-wi-stats-overview-stat:hover {

    transform: translateY(-2px);

    box-shadow:

        0 8px 20px

        rgba(13, 31, 56, 0.08) !important;

}

.fi-wi-stats-overview-stat-value {

    color:

        var(--sh-navy-800) !important;

    font-size: 1.85rem !important;

    font-weight: 700 !important;

    line-height: 1.1 !important;

}

.fi-wi-stats-overview-stat-label {

    color:

        var(--sh-text-muted) !important;

    font-size: 0.72rem !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.07em !important;

}

.fi-wi-stats-overview-stat-description {

    font-size: 0.78rem !important;

    margin-top: 0.35rem !important;

}

.fi-wi-stats-overview-stat-icon {

    background:

        var(--sh-blue-100) !important;

    color:

        var(--sh-blue-600) !important;

    border-radius: 10px !important;

    padding: 0.55rem !important;

    width: 2.5rem !important;

    height: 2.5rem !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

}

.fi-wi-account {

    background:

        var(--sh-surface) !important;

    border:

        1px solid var(--sh-border) !important;

    border-radius: 12px !important;

    box-shadow:

        0 1px 2px

        rgba(13, 31, 56, 0.04) !important;

}


/* ============================================================

 * 06. TABLES

*   ============================================================ */

.fi-ta-ctn,

.fi-section {

    background:

        var(--sh-surface) !important;

    border:

        1px solid var(--sh-border) !important;

    border-radius: 12px !important;

    box-shadow:

        0 1px 2px

        rgba(13, 31, 56, 0.04) !important;

}

/*
 * Only tables clip to the rounded card. A form section must NOT, or its
 * dropdowns, date pickers and select menus get cut off at the card edge.
 * Sections round their header and footer to match the card instead.
 */
.fi-ta-ctn {

    overflow: hidden !important;

}

.fi-section > :first-child {

    border-top-left-radius: 12px;

    border-top-right-radius: 12px;

}

.fi-section > :last-child {

    border-bottom-left-radius: 12px;

    border-bottom-right-radius: 12px;

}

.fi-ta-header-cell {

    background:

        #eef3fa !important;

    font-size:

        0.74rem !important;

    font-weight:

        700 !important;

    letter-spacing:

        0.02em !important;

    padding-top:

        0.75rem !important;

    padding-bottom:

        0.75rem !important;

    border-right:

        1px solid #dde4ee !important;

    border-bottom:

        2px solid #ccd7e6 !important;

}

.fi-ta-header-cell,

.fi-ta-header-cell span {

    color:

        var(--sh-navy-800) !important;

}

.fi-ta-row {

    background:

        var(--sh-surface) !important;

}

.fi-ta-row:hover {

    background:

        #f5f9fe !important;

}

.fi-ta-cell {

    padding-top:

        0.6rem !important;

    padding-bottom:

        0.6rem !important;

    border-right:

        1px solid #e8edf5 !important;

    border-bottom:

        1px solid #e8edf5 !important;

}

.fi-ta-header-cell:last-child,

.fi-ta-cell:last-child {

    border-right: none !important;

}

.fi-ta-cell > div,

.fi-ta-col-wrp {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

    min-height: 0 !important;

}

.fi-ta-cell .fi-avatar,

.fi-ta-cell img[class*="rounded-full"],

.fi-ta-cell .fi-ta-image-item {

    width: 2.1rem !important;

    height: 2.1rem !important;

}

.fi-ta-ctn {

    margin-top: 0 !important;

}


/* Table text */

.fi-ta-text-item-label {

    color:

        var(--sh-text) !important;

    font-size:

        0.875rem !important;

}


/* Table footer */

.fi-ta-footer,

.fi-pagination {

    background:

        var(--sh-surface) !important;

    border-top:

        1px solid var(--sh-border) !important;

}


/* Search */

.fi-ta-search-field input {

    background:

        #f7f9fc !important;

    color:

        var(--sh-text) !important;

    border:

        1px solid var(--sh-border) !important;

    border-radius:

        8px !important;

}


/* Pagination */

.fi-pagination-items {

    gap: 0.25rem !important;

}

.fi-pagination-item .fi-btn,

.fi-pagination-item button,

.fi-pagination-item a {

    border:

        1px solid var(--sh-border) !important;

    background:

        var(--sh-surface) !important;

    color:

        var(--sh-text) !important;

    border-radius:

        6px !important;

    min-width:

        2.25rem !important;

    justify-content:

        center !important;

    font-weight:

        500 !important;

    box-shadow:

        none !important;

}

.fi-pagination-item .fi-btn:hover,

.fi-pagination-item button:hover,

.fi-pagination-item a:hover {

    background:

        #eef3fa !important;

    border-color:

        #c8d5e6 !important;

}

.fi-pagination-item .fi-active,

.fi-pagination-item[aria-current] .fi-btn,

.fi-pagination-item .fi-btn.fi-active {

    background:

        var(--sh-blue-600) !important;

    border-color:

        var(--sh-blue-600) !important;

    color:

        #ffffff !important;

}

.fi-pagination-item .fi-active span,

.fi-pagination-item[aria-current] .fi-btn span {

    color:

        #ffffff !important;

}


/* Empty state */

.fi-ta-empty-state-icon-ctn {

    background:

        var(--sh-blue-100) !important;

}

.fi-ta-empty-state-icon {

    color:

        var(--sh-blue-600) !important;

}

.fi-ta-empty-state-heading {

    color:

        var(--sh-text) !important;

    font-weight: 600 !important;

}

.fi-ta-empty-state-description {

    color:

        var(--sh-text-muted) !important;

}


/* ============================================================

 * 07. FORMS / BUTTONS / BADGES / MODALS

*   ============================================================ */

.fi-input,

.fi-select-input,

.fi-textarea {

    border-radius: 8px !important;

}

.fi-fo-field-wrp-label {

    font-weight: 600 !important;

    color:

        var(--sh-text) !important;

    font-size:

        0.85rem !important;

}

.fi-btn {

    border-radius:

        7px !important;

    font-weight:

        600 !important;

    font-size:

        0.84rem !important;

}


/* Secondary actions */

.fi-header-actions .fi-btn.fi-color-gray,

.fi-ta-actions .fi-btn.fi-color-gray {

    background:

        var(--sh-navy-800) !important;

    border-color:

        var(--sh-navy-800) !important;

    color:

        #ffffff !important;

}

.fi-header-actions .fi-btn.fi-color-gray:hover,

.fi-ta-actions .fi-btn.fi-color-gray:hover {

    background:

        var(--sh-navy-700) !important;

    border-color:

        var(--sh-navy-700) !important;

}

.fi-header-actions .fi-btn.fi-color-gray svg,

.fi-header-actions .fi-btn.fi-color-gray span,

.fi-ta-actions .fi-btn.fi-color-gray svg,

.fi-ta-actions .fi-btn.fi-color-gray span {

    color: #ffffff !important;

}


/* Row actions */

.fi-ta-cell .fi-link,

.fi-ta-actions .fi-link {

    border:

        1px solid #c8d5e6 !important;

    border-radius:

        6px !important;

    padding:

        0.28rem 0.6rem !important;

    color:

        var(--sh-blue-600) !important;

    font-size:

        0.78rem !important;

    font-weight:

        600 !important;

    text-decoration:

        none !important;

    background:

        var(--sh-surface) !important;

}

.fi-ta-cell .fi-link:hover,

.fi-ta-actions .fi-link:hover {

    background:

        var(--sh-blue-100) !important;

    border-color:

        var(--sh-blue-500) !important;

}


/* Badges */

.fi-badge {

    border-radius:

        6px !important;

    font-weight:

        600 !important;

    font-size:

        0.7rem !important;

    letter-spacing:

        0.01em !important;

}


/* Modal */

.fi-modal-window {

    border-radius:

        14px !important;

}


/* Tabs
 *
 * Filament centres free-standing tab bars (e.g. the Salary / Allowances /
 * Deductions tabs under a record) in a floating pill. Line them up with
 * the content instead, as an underlined tab strip.
 */

.fi-tabs:not(.fi-contained) {

    margin-inline: 0 !important;

    width: 100%;

    background: transparent !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    padding: 0 !important;

    border-bottom: 1px solid var(--sh-border);

    gap: 0.25rem;

}

.fi-tabs:not(.fi-contained) .fi-tabs-tab {

    border-radius: 0 !important;

    border-bottom: 2px solid transparent;

    margin-bottom: -1px;

    padding: 0.7rem 1rem !important;

    background: transparent !important;

}

.fi-tabs:not(.fi-contained) .fi-tabs-tab.fi-active {

    border-bottom-color: var(--sh-blue-600);

    color: var(--sh-blue-600) !important;

}

.fi-tabs-tab {

    border-radius:

        8px !important;

    font-weight:

        500 !important;

}


/* Wizard steps (e.g. the "New student" admission modal): the current
   step is a solid, strong-colour card — not just its icon — so it is
   obvious at a glance which step you are on. */

.fi-sc-wizard-header-step-icon-ctn {

    background: #eef2f7 !important;

    color: #94a3b8 !important;

    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;

}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-btn {

    background: var(--sh-blue-600, #1a5fa8) !important;

    transition: background-color .15s ease;

}

/* The chevron divider is drawn over the last 20px of each tab. Cut the
   active tab to the same shape so the blue ends in an arrow point. */

.fi-sc-wizard-header-step.fi-active:not(:last-child) .fi-sc-wizard-header-step-btn {

    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);

}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-separator {

    color: var(--sh-blue-600, #1a5fa8) !important;

}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {

    background: #fff !important;

    color: var(--sh-blue-600, #1a5fa8) !important;

    box-shadow: none !important;

}

.fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {

    background: #16a34a !important;

    color: #fff !important;

}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label {

    color: #fff !important;

    font-weight: 700 !important;

}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-description {

    color: rgba(255, 255, 255, .85) !important;

}

.fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-label {

    color: #16a34a !important;

}


/* Admission ("New student") modal: fits the screen, the step bar and the
   Back / Next / Save buttons stay put while only the fields scroll, and
   the photo sits in a card beside the details instead of its own row. */

.sh-admission-modal {

    max-height: calc(100dvh - 5rem);

    display: flex;

    flex-direction: column;

    overflow: hidden;

    box-shadow: 0 30px 70px -20px rgba(13, 31, 56, .55), 0 0 0 1px rgba(13, 31, 56, .06) !important;

}

/* Centre it with equal space above and below, so it floats over the page
   (Filament's default sits modals higher, which pinned this tall one near
   the top edge). */

.fi-modal-window-ctn:has(> .sh-admission-modal) {

    grid-template-rows: 1fr auto 1fr !important;

    padding-block: 2.5rem !important;

}

.sh-admission-modal .fi-modal-header {

    flex: none;

    padding: 1.1rem 1.5rem !important;

    border-bottom: 1px solid var(--sh-border);

}

.sh-admission-modal .fi-modal-heading {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--sh-text);

}

.sh-admission-modal .fi-modal-content {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 0 1.5rem !important;

}

.sh-admission-modal .fi-sc-wizard-header {

    position: sticky;

    top: 0;

    z-index: 5;

    margin: 0 -1.5rem;

    padding: 1rem 1.5rem;

    background: #fff;

    border: 0 !important;

    border-bottom: 1px solid var(--sh-border) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

}

.sh-admission-modal .fi-sc-wizard-step.fi-active {

    padding: 1.4rem 0 1.25rem;

}

.sh-admission-modal .fi-sc-wizard-footer {

    position: sticky;

    bottom: 0;

    z-index: 5;

    margin: 0 -1.5rem;

    padding: .9rem 1.5rem;

    background: #f8fafc;

    border-top: 1px solid var(--sh-border);

}

.sh-admission-modal .sh-student-photo {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: .6rem;

    padding: 1.25rem 1rem;

    text-align: center;

    background: #f8fafc;

    border: 1px dashed #cbd5e1;

    border-radius: 14px;

}

.sh-admission-modal .sh-student-photo > * {

    flex: none !important;

    width: 100%;

    height: auto !important;

    justify-items: center;

}

.sh-admission-modal .sh-student-photo .fi-fo-field-label-ctn,

.sh-admission-modal .sh-student-photo .fi-fo-field-label {

    justify-content: center;

}


/* ============================================================

 * 08. IMAGE EDITOR — CROP RATIO ACTIVE STATE

*   ============================================================ */

/*

 * Ratio buttons such as:

 * Free

 * 1:1

 * 3:1

 * 4:1

 * 16:9

 * now clearly show which option is selected.

*/

.fi-modal button[aria-pressed] {

    border:

        1px solid #d1d5db !important;

    border-radius:

        0.5rem !important;

    background:

        #ffffff !important;

    color:

        #374151 !important;

    transition:

        background-color 0.15s ease,

        border-color 0.15s ease,

        color 0.15s ease,

        box-shadow 0.15s ease;

}

.fi-modal button[aria-pressed]:hover {

    border-color:

        var(--sh-blue-500) !important;

    color:

        var(--sh-blue-600) !important;

    background:

        #f5f9fe !important;

}


/* Selected crop ratio */

.fi-modal button[aria-pressed="true"] {

    background:

        var(--sh-blue-600) !important;

    border-color:

        var(--sh-blue-600) !important;

    color:

        #ffffff !important;

    box-shadow:

        0 0 0 2px

        rgba(26, 95, 168, 0.15) !important;

    font-weight:

        700 !important;

}

.fi-modal button[aria-pressed="true"] span,

.fi-modal button[aria-pressed="true"] svg {

    color:

        #ffffff !important;

}


/* ============================================================

 * 09. FOOTER

*   ============================================================ */

/*

 * IMPORTANT:

 * This footer is NOT manually offset using the sidebar width.

 * It lives inside .fi-main, which means Filament already positions

 * it correctly when the sidebar expands/collapses.

 * Its horizontal margins match .sh-topbar exactly.

*/

.sh-footer {

    /* In the normal flow: a sticky footer sat on top of the last widgets. */
    position: static;
    gap: 0.35em;
    flex-wrap: wrap;


    display: flex;

    align-items: center;

    justify-content: center;

    width: auto;

    min-height: 46px;

    padding:

        0.85rem

        var(--sh-main-padding-x);

    margin-top: 0.9rem;

    margin-left:

        calc(-1 * var(--sh-main-padding-x));

    margin-right:

        calc(-1 * var(--sh-main-padding-x));

    margin-bottom: 0;

    background:

        var(--sh-surface);

    border-top:

        1px solid var(--sh-border);

    box-shadow:

        0 -1px 3px rgba(13, 31, 56, 0.04),

        0 -4px 10px rgba(13, 31, 56, 0.025);

    color:

        var(--sh-text-dim);

    font-size:

        0.78rem;

    line-height: 1.4;

    text-align: center;

}


/*

 * Keep content directly centered in the available main-content

 * column between the sidebar and right edge.

*/

.sh-footer > * {

    margin: 0;

}

.sh-footer p {

    margin: 0;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 0.25rem;

}

.sh-footer strong {

    color:

        var(--sh-text-muted);

    font-weight: 600;

}


/* Footer mobile */

@media (max-width: 640px) {

    .sh-footer {

        min-height: 44px;

        padding:

            0.75rem 1rem;

        margin-left: -1rem;

        margin-right: -1rem;

        font-size: 0.72rem;

    }

    .sh-footer p {

        gap: 0.2rem;

    }

}


/* ============================================================

 * 10. LOGIN / AUTH PAGE

*   ============================================================ */

.fi-simple-layout {

    background:

        var(--sh-bg) !important;

    min-height:

        100vh;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    padding:

        1.5rem;

}

.fi-simple-main {

    background:

        var(--sh-surface) !important;

    border-radius:

        14px !important;

    box-shadow:

        0 20px 50px

        rgba(13, 31, 56, 0.15) !important;

    border:

        none !important;

    padding:

        0 !important;

    overflow:

        hidden !important;

    width:

        100% !important;

    max-width:

        46rem !important;

}


/* Login desktop */

@media (min-width: 860px) {

    .fi-simple-page {

        display: flex !important;

        flex-direction:

            row !important;

        align-items:

            stretch !important;

        width:

            100% !important;

    }

    .fi-simple-page > .sh-login-brand {

        flex:

            0 0 42% !important;

        max-width:

            42% !important;

    }

    .fi-simple-page > .fi-simple-page-content {

        flex:

            1 1 58% !important;

        max-width:

            58% !important;

        min-width:

            0 !important;

    }

}


/* Invisible action modal sibling */

.fi-simple-page > [wire:partial],

.fi-simple-page > div:not(.sh-login-brand):not(.fi-simple-page-content) {

    flex:

        0 0 0 !important;

    width:

        0 !important;

    max-width:

        0 !important;

    padding:

        0 !important;

    margin:

        0 !important;

}


/* Brand panel */

.sh-login-brand {

    background:

        linear-gradient(

            160deg,

            #0f3663 0%,

            #14457d 45%,

            #0c2a4d 100%

        );

    color:

        #ffffff;

    padding:

        2.5rem 1.9rem;

    display:

        flex;

    flex-direction:

        column;

    align-items:

        center;

    justify-content:

        center;

    text-align:

        center;

    position:

        relative;

    overflow:

        hidden;

}

.sh-login-brand::after {

    content: "";

    position:

        absolute;

    top:

        -20%;

    right:

        -25%;

    width:

        55%;

    height:

        150%;

    background:

        linear-gradient(

            105deg,

            transparent 0%,

            rgba(255, 255, 255, 0.07) 42%,

            rgba(255, 255, 255, 0.07) 48%,

            transparent 49%

        ),

        linear-gradient(

            105deg,

            transparent 0%,

            rgba(255, 255, 255, 0.05) 62%,

            rgba(255, 255, 255, 0.05) 72%,

            transparent 73%

        );

    transform:

        rotate(8deg);

    pointer-events:

        none;

}

.sh-login-brand img {

    height:

        4.25rem;

    width:

        auto;

    margin-bottom:

        1.75rem;

    position:

        relative;

    z-index:

        1;

}

.sh-login-brand h2 {

    font-size:

        1.2rem;

    font-weight:

        700;

    margin-bottom:

        0.55rem;

    position:

        relative;

    z-index:

        1;

}

.sh-login-brand p {

    font-size:

        0.82rem;

    line-height:

        1.55;

    color:

        rgba(255, 255, 255, 0.8);

    position:

        relative;

    z-index:

        1;

}


/* Login links */

.sh-login-links {

    display:

        flex;

    gap:

        0.6rem;

    margin-top:

        1.5rem;

    flex-wrap:

        wrap;

    justify-content:

        center;

    position:

        relative;

    z-index:

        1;

}

.sh-login-links a {

    display:

        inline-flex;

    align-items:

        center;

    gap:

        0.4rem;

    border:

        1px solid

        rgba(255, 255, 255, 0.28);

    border-radius:

        20px;

    padding:

        0.4rem 0.9rem;

    font-size:

        0.78rem;

    color:

        #ffffff;

    text-decoration:

        none;

    transition:

        background 0.15s ease;

}

.sh-login-links a:hover {

    background:

        rgba(255, 255, 255, 0.12);

}

.sh-login-links svg {

    width:

        0.9rem !important;

    height:

        0.9rem !important;

}


/* Login mobile */

@media (max-width: 859px) {

    .sh-login-brand {

        padding:

            2rem 1.5rem;

    }

    .sh-login-brand p,

    .sh-login-links {

        display:

            none;

    }

    .sh-login-brand img {

        height:

            3rem;

        margin-bottom:

            0;

    }

}


/* Login form area */

.fi-simple-page > .fi-simple-page-content {

    padding:

        2.25rem 2rem !important;

    display:

        flex !important;

    flex-direction:

        column !important;

    justify-content:

        center !important;

    align-items:

        stretch !important;

    gap:

        0.9rem !important;

}

.fi-simple-page-content div,

.fi-simple-page-content form,

.fi-simple-page-content section,

.fi-simple-page-content header {

    width:

        100% !important;

    max-width:

        100% !important;

    min-width:

        0 !important;

}

.fi-simple-page input[type="text"],

.fi-simple-page input[type="email"],

.fi-simple-page input[type="password"],

.fi-simple-page .fi-input {

    width:

        100% !important;

    min-width:

        0 !important;

}


/* Login checkbox */

.fi-simple-page input[type="checkbox"] {

    width:

        1rem !important;

    min-width:

        1rem !important;

    max-width:

        1rem !important;

    height:

        1rem !important;

    flex:

        0 0 1rem !important;

}

.fi-simple-page .fi-fo-checkbox,

.fi-simple-page label:has(input[type="checkbox"]) {

    display:

        flex !important;

    align-items:

        center !important;

    gap:

        0.5rem !important;

}


/* Password eye */

.fi-simple-page .fi-input-wrp button,

.fi-simple-page .fi-input-wrp-suffix {

    width:

        auto !important;

    flex:

        0 0 auto !important;

    order:

        2 !important;

}

.fi-simple-page .fi-input-wrp .fi-input {

    order:

        1 !important;

}


/* Login heading */

.fi-simple-header {

    text-align:

        center !important;

    margin-bottom:

        0.5rem !important;

}

.fi-simple-header-heading {

    color:

        var(--sh-blue-600) !important;

    font-weight:

        700 !important;

    font-size:

        1.3rem !important;

    letter-spacing:

        -0.01em !important;

}

.fi-simple-header-heading::after {

    content:

        "Enter your credentials to continue.";

    display:

        block;

    margin-top:

        0.3rem;

    font-size:

        0.84rem;

    font-weight:

        400;

    color:

        var(--sh-text-muted);

    letter-spacing:

        0;

}

.fi-simple-header-subheading {

    display:

        none !important;

}


/* Login field labels */

.fi-simple-page .fi-fo-field-wrp-label {

    font-size:

        0.82rem !important;

    font-weight:

        600 !important;

    color:

        var(--sh-text) !important;

    margin-bottom:

        0.3rem !important;

}


/* Hide required star */

.fi-simple-page .fi-fo-field-wrp-label sup,

.fi-simple-page .fi-fo-field-wrp-required-mark,

.fi-simple-page label sup,

.fi-simple-page [class*="required-mark"] {

    display:

        none !important;

}


/* Login input wrapper */

.fi-simple-page .fi-input-wrp {

    border-radius:

        8px !important;

    border:

        1px solid #d8dfea !important;

    background:

        #fbfcfe !important;

    box-shadow:

        none !important;

}

.fi-simple-page .fi-input-wrp:focus-within {

    border-color:

        var(--sh-blue-500) !important;

    box-shadow:

        0 0 0 3px

        rgba(36, 114, 196, 0.12) !important;

}

.fi-simple-page .fi-input {

    padding-top:

        0.62rem !important;

    padding-bottom:

        0.62rem !important;

    font-size:

        0.9rem !important;

}

.fi-simple-page .fi-checkbox-input {

    border-radius:

        4px !important;

}


/* Password reset */

.fi-simple-page .fi-fo-field-wrp-hint-action,

.fi-simple-page a[href*="password-reset"] {

    color:

        var(--sh-amber) !important;

    font-size:

        0.8rem !important;

    font-weight:

        600 !important;

    text-decoration:

        none !important;

}

.fi-simple-page .fi-fo-field-wrp-hint-action:hover,

.fi-simple-page a[href*="password-reset"]:hover {

    text-decoration:

        underline !important;

}


/* Login submit */

.fi-simple-page .fi-btn[type="submit"] {

    background:

        linear-gradient(

            135deg,

            var(--sh-blue-600) 0%,

            var(--sh-blue-500) 100%

        ) !important;

    border:

        none !important;

    padding-top:

        0.72rem !important;

    padding-bottom:

        0.72rem !important;

    font-size:

        0.92rem !important;

    font-weight:

        600 !important;

    border-radius:

        8px !important;

    box-shadow:

        0 4px 12px

        rgba(26, 95, 168, 0.28) !important;

    justify-content:

        center !important;

}

.fi-simple-page .fi-btn[type="submit"]:hover {

    box-shadow:

        0 6px 16px

        rgba(26, 95, 168, 0.36) !important;

}


/* Brand panel already carries logo */

.fi-simple-main .fi-logo {

    display:

        none !important;

}


/* ============================================================

 * 11. RESOURCE CREATE / EDIT PAGES

 * Filament caps these pages narrower than the panel's full

 * width. Let the form use the space the page has.

*   ============================================================ */

.fi-resource-create-record-page .fi-page-content,

.fi-resource-edit-record-page .fi-page-content,

.fi-resource-create-record-page form:not(.fi-modal-window),

.fi-resource-edit-record-page form:not(.fi-modal-window) {

    max-width: 100% !important;

    width: 100% !important;

}

/* Keep Filament form/grid children from forcing narrow or overflowing columns. */
.fi-resource-create-record-page form:not(.fi-modal-window) > *,
.fi-resource-edit-record-page form:not(.fi-modal-window) > *,
.fi-resource-create-record-page .fi-fo-component-ctn,
.fi-resource-edit-record-page .fi-fo-component-ctn,
.fi-resource-create-record-page .fi-section,
.fi-resource-edit-record-page .fi-section {
    min-width: 0;
}

/* Inputs should fill the column Filament assigns to them. */
.fi-resource-create-record-page .fi-fo-field-wrp,
.fi-resource-edit-record-page .fi-fo-field-wrp,
.fi-resource-create-record-page .fi-input-wrp,
.fi-resource-edit-record-page .fi-input-wrp {
    width: 100%;
    min-width: 0;
}

/* Resource forms stack naturally on smaller screens. */
@media (max-width: 1024px) {
    .fi-resource-create-record-page .fi-page-content,
    .fi-resource-edit-record-page .fi-page-content {
        width: 100% !important;
    }
}


/* ============================================================
 * TOPBAR — NEEDS-ATTENTION BELL
 *   Built in resources/views/filament/partials/topbar.blade.php from
 *   App\Services\AttentionItems. Each row links to where it is fixed.
 * ============================================================ */

.sh-bell {
    position: relative;
    margin-right: 0.6rem;
}

.sh-bell-btn {
    position: relative;
    border-color: var(--sh-border);
    background: var(--sh-surface);
}

.sh-bell-btn.is-active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.sh-bell-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    border: 2px solid var(--sh-surface);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
}

.sh-bell-badge-danger { background: #dc2626; }
.sh-bell-badge-warning { background: #f59e0b; }

.sh-bell-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: -0.25rem;
    width: 23rem;
    max-width: calc(100vw - 2rem);
    max-height: min(32rem, calc(100vh - 6rem));
    overflow-y: auto;
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(13, 31, 56, 0.16);
    z-index: 150;
}

.sh-bell-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: var(--sh-surface);
    border-bottom: 1px solid var(--sh-border);
    font-size: 0.9rem;
    color: var(--sh-text);
}

.sh-bell-head span {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--sh-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.sh-bell-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--sh-text);
    text-decoration: none;
    transition: background 0.15s ease;
}

.sh-bell-item:last-child { border-bottom: 0; }
.sh-bell-item:hover { background: #f8fafc; }
.sh-bell-item:hover .sh-bell-go { color: #2563eb; transform: translateX(2px); }

.sh-bell-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
}

.sh-bell-icon svg { width: 1.1rem; height: 1.1rem; }
.sh-bell-icon-danger { background: #fef2f2; color: #dc2626; }
.sh-bell-icon-warning { background: #fffbeb; color: #d97706; }
.sh-bell-icon-info { background: #eff6ff; color: #2563eb; }

.sh-bell-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sh-bell-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
}

.sh-bell-detail {
    font-size: 0.78rem;
    color: var(--sh-text-muted);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.sh-bell-go {
    flex: none;
    align-self: center;
    color: #cbd5e1;
    transition: color 0.15s ease, transform 0.15s ease;
}

.sh-bell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--sh-text-muted);
    font-size: 0.82rem;
}

.sh-bell-empty svg { color: #16a34a; margin-bottom: 0.25rem; }
.sh-bell-empty strong { color: var(--sh-text); font-size: 0.9rem; }

@media (max-width: 640px) {
    .sh-bell-menu { position: fixed; top: 4rem; left: 1rem; right: 1rem; width: auto; max-width: none; }
}