@charset "UTF-8";
/* ==========================================================================
   Sunrise Ticket System — UI layer
   --------------------------------------------------------------------------
   Loaded AFTER admin/assets/css/oneui.min.css. This file restyles the
   existing OneUI / Bootstrap 4 primitives in place, so no screen markup,
   form field, JS selector or controller has to change.

   Sections
     01  Design tokens
     02  Base & canvas
     03  Layout shell (sidebar / header / footer)
     04  Blocks (cards)
     05  Page headings & toolbars
     06  Buttons
     07  Forms & controls
     08  select2 / bootstrap-select
     09  Tables & DataTables
     10  Badges, pills, status dots
     11  Modals
     12  Tabs
     13  Alerts & notifications
     14  Dropzone & attachments
     15  Stat tiles & dashboard
     16  Utilities
     17  Print
     18  Reduced motion / accessibility
   ========================================================================== */

/* ==========================================================================
   01  Design tokens
   ========================================================================== */
:root {
    /* Brand — deep blue carries actions; amber is a highlight only, so it
       never competes with the red/amber/green SLA semantics. */
    --su-brand:           #1c5fd6;
    --su-brand-strong:    #1a54bd;
    --su-brand-dark:      #14448f;
    --su-brand-soft:      #eaf1fd;
    --su-brand-border:    #c2d8f8;
    --su-accent:          #f2a11c;
    --su-accent-soft:     #fef4e4;

    /* Sidebar (dark navy) */
    --su-nav-bg:          #101b2f;
    --su-nav-bg-deep:     #0b1424;
    --su-nav-fg:          #a9b6cc;
    --su-nav-fg-strong:   #ffffff;
    --su-nav-hover-bg:    rgba(255, 255, 255, .06);
    --su-nav-active-bg:   rgba(28, 95, 214, .22);
    --su-nav-heading:     #5d6f8d;
    --su-nav-border:      rgba(255, 255, 255, .07);
    --su-nav-w:           250px;
    --su-nav-w-mini:      74px;

    /* Neutrals */
    --su-canvas:          #f5f6f9;
    --su-surface:         #ffffff;
    --su-surface-2:       #fafbfc;
    --su-surface-3:       #f2f4f7;
    --su-border:          #e4e7ee;
    --su-border-strong:   #d3d8e2;
    --su-fg:              #16202f;
    --su-fg-muted:        #5c6879;
    --su-fg-subtle:       #8b95a6;

    /* Status */
    --su-success:         #17a673;
    --su-success-soft:    #e6f7f1;
    --su-warning:         #d98211;
    --su-warning-soft:    #fdf3e3;
    --su-danger:          #dc3f4d;
    --su-danger-soft:     #fdeced;
    --su-info:            #1d8ecf;
    --su-info-soft:       #e7f4fc;

    /* Radii */
    --su-r-sm:  6px;
    --su-r:     10px;
    --su-r-lg:  14px;
    --su-r-pill: 999px;

    /* Elevation — low and soft; this is a data tool, not a landing page */
    --su-sh-xs: 0 1px 2px rgba(16, 27, 47, .05);
    --su-sh-sm: 0 1px 3px rgba(16, 27, 47, .06), 0 1px 2px rgba(16, 27, 47, .04);
    --su-sh:    0 2px 6px rgba(16, 27, 47, .07), 0 1px 2px rgba(16, 27, 47, .04);
    --su-sh-md: 0 6px 18px rgba(16, 27, 47, .09), 0 2px 6px rgba(16, 27, 47, .05);
    --su-sh-lg: 0 18px 44px rgba(16, 27, 47, .16), 0 4px 12px rgba(16, 27, 47, .08);

    --su-ring: 0 0 0 3px rgba(28, 95, 214, .18);

    --su-ease: cubic-bezier(.4, 0, .2, 1);
    --su-t:    .16s var(--su-ease);
}

/* ==========================================================================
   02  Base & canvas
   ========================================================================== */

/* ---- Reset ---------------------------------------------------------------
   The app shell gets this from oneui.min.css (Bootstrap reboot). Standalone
   pages that skip that 394 KB bundle — the auth screens — got no reset at
   all, which left them with the browser's default 8px body margin and
   content-box sizing. The values below are identical to the ones oneui
   already sets, so this changes nothing on the app screens. */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background-color: var(--su-canvas);
    color: var(--su-fg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: .875rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--su-fg);
    font-weight: 600;
    letter-spacing: -.011em;
}

a { color: var(--su-brand); transition: color var(--su-t); }
a:hover { color: var(--su-brand-dark); }

hr { border-top-color: var(--su-border); }

.text-muted { color: var(--su-fg-muted) !important; }
.bg-body,
.bg-body-light { background-color: var(--su-canvas) !important; }
.bg-white { background-color: var(--su-surface) !important; }

/* Focus visibility — keyboard users could not see focus at all before. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid var(--su-brand);
    outline-offset: 2px;
    box-shadow: none;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--su-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--su-border-strong);
    border: 2px solid transparent;
    border-radius: var(--su-r-pill);
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--su-fg-subtle); background-clip: content-box; }

/* Text selection */
::selection { background: var(--su-brand-soft); color: var(--su-brand-dark); }

/* ==========================================================================
   03  Layout shell
   ========================================================================== */

/* ---- Content width -------------------------------------------------------
   'main-content-narrow' capped the app at a percentage width, wasting screen
   on the wide ticket tables. Give it a generous max instead.

   Every screen renders its own <main id="main-container">, usually as a
   "hero" band (.bg-body-light > .content) followed by the body content, so
   both shapes are covered here. */
#main-container > .content,
#main-container > .bg-body-light > .content,
#main-container > .bg-body > .content,
#page-header > .content-header,
#page-footer > .content {
    max-width: 1680px;
    margin-inline: auto;
}
#main-container > .content { padding: 1.5rem 1.5rem 2rem; }
@media (max-width: 575.98px) {
    #main-container > .content { padding: 1rem .875rem 1.5rem; }
}

/* ---- Screen hero band ----------------------------------------------------
   The pattern the screens already use for their page title. Turning it into
   a white band with a hairline base gives all 29 screens a real page header
   without touching any of their markup. */
#main-container > .bg-body-light,
#main-container > .bg-body {
    background-color: var(--su-surface) !important;
    border-bottom: 1px solid var(--su-border);
}
#main-container > .bg-body-light > .content,
#main-container > .bg-body > .content {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
#main-container > .bg-body-light + .content,
#main-container > .bg-body + .content { padding-top: 1.5rem; }

/* The hero usually holds an h1/h2 plus a breadcrumb or an action button. */
#main-container > .bg-body-light .content-heading,
#main-container > .bg-body .content-heading {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

/* ---- Sidebar ------------------------------------------------------------- */
/* A flex column, so the brand and the quick-jump field stay pinned and only
   the nav list scrolls — the search shouldn't be able to scroll out of view. */
#sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, var(--su-nav-bg) 0%, var(--su-nav-bg-deep) 100%);
    box-shadow: inset -1px 0 0 var(--su-nav-border);
}

/* Desktop only, exactly as oneui.min.css scopes its own equivalents.
   Unscoped, these applied on phones too: `sidebar-o` is in the initial class
   list from Blade, so the rail stayed docked open and pushed the content
   250px off the right edge of a 390px viewport. Below 992px OneUI drives the
   off-canvas drawer via `sidebar-o-xs` instead, and its own base rules
   handle the width and transform. */
@media (min-width: 992px) {
    #sidebar { width: var(--su-nav-w); }
    #page-container.sidebar-o          { padding-left: var(--su-nav-w); }
    #page-container.sidebar-o #sidebar { transform: translateX(0); }
}

#sidebar > .content-header,
#sidebar > .su-navsearch { flex: 0 0 auto; }

#sidebar .js-sidebar-scroll {
    flex: 1 1 auto;
    /* OneUI hard-codes height:calc(100% - 4rem) for a 4rem header; the flex
       row above sizes it correctly instead. */
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---- No visible scrollbar -----------------------------------------------
   Scrolling still works (wheel, trackpad, touch, keyboard); only the bar is
   hidden. The global `*` rule sets a thin bar, so these ID-scoped rules
   have to override it. The SimpleBar track is hidden defensively in case
   'side-scroll' is ever put back on #page-container. */
#sidebar,
#sidebar .js-sidebar-scroll {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge/IE */
}
#sidebar::-webkit-scrollbar,
#sidebar .js-sidebar-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
#sidebar .simplebar-track { display: none !important; }

/* Sidebar brand */
#sidebar .content-header {
    height: 62px;
    padding-inline: 1.125rem;
    background: transparent !important;
    border-bottom: 1px solid var(--su-nav-border);
}
.su-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    color: var(--su-nav-fg-strong);
    text-decoration: none;
}
.su-brand:hover { color: var(--su-nav-fg-strong); }
/* The launcher icon (also the favicon). Left unstyled apart from sizing —
   it carries its own teal ground, so a container behind it would only add
   a second shape. */
.su-brand__mark {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: block;
    object-fit: contain;
    border-radius: 8px;
}
.su-brand__text { min-width: 0; line-height: 1.15; }
.su-brand__name {
    display: block;
    font-size: .9375rem;
    font-weight: 650;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.su-brand__sub {
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--su-nav-heading);
    text-transform: uppercase;
    letter-spacing: .085em;
    white-space: nowrap;
}

/* ---- Sidebar quick-jump -------------------------------------------------
   Filters the 16 destinations live. Behaviour in js/ui/sidebar-nav.js. */
.su-navsearch {
    position: relative;
    display: flex;
    align-items: center;
    margin: .75rem .625rem .25rem;
}
.su-navsearch__icon {
    position: absolute;
    left: .625rem;
    font-size: .75rem;
    color: var(--su-nav-heading);
    pointer-events: none;
}
.su-navsearch__input {
    width: 100%;
    height: 34px;
    padding: 0 3.25rem 0 1.875rem;
    border: 1px solid var(--su-nav-border);
    border-radius: var(--su-r-sm);
    background-color: rgba(255, 255, 255, .05);
    color: var(--su-nav-fg-strong);
    font-size: .8125rem;
    font-weight: 500;
    transition: background-color var(--su-t), border-color var(--su-t), box-shadow var(--su-t);
}
.su-navsearch__input::placeholder { color: var(--su-nav-heading); opacity: 1; }
.su-navsearch__input:hover { border-color: rgba(255, 255, 255, .16); }
.su-navsearch__input:focus {
    outline: 0;
    background-color: rgba(255, 255, 255, .09);
    border-color: var(--su-brand);
    box-shadow: 0 0 0 3px rgba(28, 95, 214, .25);
}
/* Chrome/Edge draw their own clear affordance on type=search; we have one. */
.su-navsearch__input::-webkit-search-cancel-button { display: none; }

.su-navsearch__kbd {
    position: absolute;
    right: .5rem;
    padding: .0625rem .3125rem;
    border: 1px solid var(--su-nav-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    color: var(--su-nav-heading);
    font-family: inherit;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .02em;
    pointer-events: none;
}
.su-navsearch__input:focus ~ .su-navsearch__kbd { opacity: 0; }

.su-navsearch__clear {
    position: absolute;
    right: .3125rem;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--su-r-sm);
    background: transparent;
    color: var(--su-nav-heading);
    font-size: .75rem;
    cursor: pointer;
    transition: background-color var(--su-t), color var(--su-t);
}
.su-navsearch__clear:hover {
    background-color: rgba(255, 255, 255, .1);
    color: var(--su-nav-fg-strong);
}

/* Empty result note */
.su-nav-empty {
    padding: 1.25rem .75rem;
    color: var(--su-nav-heading);
    font-size: .8125rem;
    text-align: center;
    list-style: none;
}

/* While filtering, the group parents are context rather than targets, and
   the submenu's connector rail would dangle past a filtered-out item. */
.su-nav--filtering .nav-main-link-submenu { opacity: .6; }
.su-nav--filtering .nav-main-link-submenu::after { display: none; }
.su-nav--filtering .nav-main-submenu::before { display: none; }

/* The global focus ring is brand blue, which disappears against the navy
   rail — keyboard users need a light one in here. */
#sidebar a:focus-visible,
#sidebar button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: 1px;
}

/* Keyboard result highlight (ArrowUp/ArrowDown) */
#sidebar .nav-main-link.su-nav-hit {
    background-color: var(--su-nav-hover-bg);
    color: var(--su-nav-fg-strong);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* The field is meaningless when the rail is collapsed to icons; it comes
   back with the rest of the labels while the sidebar is hovered. */
#page-container.sidebar-mini.sidebar-o #sidebar:not(:hover) .su-navsearch { display: none; }

/* Sidebar nav */
#sidebar .content-side { padding: .875rem .625rem; }

.nav-main-heading {
    padding: 1.125rem .75rem .375rem;
    color: var(--su-nav-heading);
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .09em;
}
.nav-main-item + .nav-main-heading { margin-top: .25rem; }

#sidebar .nav-main-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 2px;
    padding: .5rem .75rem;
    border-radius: var(--su-r-sm);
    color: var(--su-nav-fg);
    font-size: .8438rem;
    font-weight: 500;
    transition: background-color var(--su-t), color var(--su-t);
}
#sidebar .nav-main-link:hover {
    background-color: var(--su-nav-hover-bg);
    color: var(--su-nav-fg-strong);
}
#sidebar .nav-main-link-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    margin-right: .6875rem;
    font-size: 1rem;
    text-align: center;
    opacity: .8;
    transition: opacity var(--su-t);
}
#sidebar .nav-main-link:hover .nav-main-link-icon { opacity: 1; }
#sidebar .nav-main-link-name { min-width: 0; }

/* Active item — a left rail + tinted ground reads instantly in peripheral
   vision, which matters when staff live in one screen all shift. */
#sidebar .nav-main-link.active {
    background-color: var(--su-nav-active-bg);
    color: var(--su-nav-fg-strong);
    font-weight: 600;
}
#sidebar .nav-main-link.active::before {
    content: "";
    position: absolute;
    left: -.625rem; top: 50%;
    width: 3px; height: 20px;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    background: var(--su-accent);
}
#sidebar .nav-main-link.active .nav-main-link-icon { opacity: 1; color: #fff; }

/* Submenu */
#sidebar .nav-main-link-submenu::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", FontAwesome;
    font-weight: 900;
    margin-left: auto;
    font-size: .8125rem;
    opacity: .55;
    transition: transform var(--su-t);
}
#sidebar .nav-main-item.open > .nav-main-link-submenu::after { transform: rotate(-180deg); }

/* Submenu items carry icons too, so the indent is pulled in from 1.9375rem
   to leave room for icon + label inside a 250px rail — "User Online Log
   Report" is the constraint. */
#sidebar .nav-main-submenu {
    position: relative;
    margin: 2px 0 .25rem;
    padding-left: 1.375rem;
    background: transparent;
}
#sidebar .nav-main-submenu::before {
    content: "";
    position: absolute;
    left: .9375rem; top: 2px; bottom: 2px;
    width: 1px;
    background: var(--su-nav-border);
}
/* Slightly smaller and quieter than the top-level icons, so the two levels
   stay visually distinct. */
#sidebar .nav-main-submenu .nav-main-link-icon {
    width: 1rem;
    margin-right: .5rem;
    font-size: .8125rem;
    opacity: .65;
}
#sidebar .nav-main-submenu .nav-main-link:hover .nav-main-link-icon,
#sidebar .nav-main-submenu .nav-main-link.active .nav-main-link-icon { opacity: 1; }
/* Long labels wrap rather than being clipped; keep the icon from squashing. */
#sidebar .nav-main-submenu .nav-main-link { line-height: 1.35; }
#sidebar .nav-main-link-icon { flex-shrink: 0; }
#sidebar .nav-main-submenu .nav-main-link {
    min-height: 34px;
    padding: .375rem .75rem;
    font-size: .8125rem;
    font-weight: 450;
    color: #93a1b8;
}
#sidebar .nav-main-submenu .nav-main-link:hover { color: var(--su-nav-fg-strong); }
#sidebar .nav-main-submenu .nav-main-link.active {
    background-color: var(--su-nav-hover-bg);
    color: var(--su-nav-fg-strong);
    font-weight: 600;
}
#sidebar .nav-main-submenu .nav-main-link.active::before {
    left: -1.3125rem;
    width: 2px; height: 14px;
}

/* Mini (collapsed) sidebar.
   Desktop only — OneUI's sidebar_mini_toggle is itself a no-op below 992px,
   and the collapsed rail makes no sense against an off-canvas drawer. */
@media (min-width: 992px) {
    #page-container.sidebar-mini.sidebar-o { padding-left: var(--su-nav-w-mini); }
    #page-container.sidebar-mini.sidebar-o #sidebar { width: var(--su-nav-w-mini); overflow: visible; }
    #page-container.sidebar-mini.sidebar-o #sidebar .nav-main-link { justify-content: center; padding-inline: 0; }
    #page-container.sidebar-mini.sidebar-o #sidebar .nav-main-link-icon { margin-right: 0; }
    #page-container.sidebar-mini.sidebar-o #sidebar .nav-main-heading { text-align: center; overflow: hidden; }
    #page-container.sidebar-mini.sidebar-o #sidebar:hover { width: var(--su-nav-w); box-shadow: var(--su-sh-lg); }
    #page-container.sidebar-mini.sidebar-o #sidebar:hover .nav-main-link { justify-content: flex-start; padding-inline: .75rem; }
    #page-container.sidebar-mini.sidebar-o #sidebar:hover .nav-main-link-icon { margin-right: .6875rem; }
}

/* ---- Header -------------------------------------------------------------- */
#page-header {
    background-color: var(--su-surface);
    border-bottom: 1px solid var(--su-border);
    box-shadow: none;
}
#page-container.page-header-fixed #page-header { box-shadow: var(--su-sh-xs); }
#page-header > .content-header {
    height: 60px;
    padding-inline: 1.5rem;
    gap: .5rem;
}
@media (max-width: 575.98px) { #page-header > .content-header { padding-inline: .875rem; } }

/* Header icon buttons */
.btn-dual {
    border-radius: var(--su-r-sm);
    color: var(--su-fg-muted);
    background-color: transparent;
    border-color: transparent;
    transition: background-color var(--su-t), color var(--su-t);
}
.btn-dual:hover,
.btn-dual:focus {
    background-color: var(--su-surface-3);
    color: var(--su-fg);
    border-color: transparent;
    box-shadow: none;
}
.su-icon-btn {
    width: 34px; height: 34px;
    display: inline-grid; place-items: center;
    padding: 0;
}
/* Bootstrap 4 has no d-lg-inline-grid, so the desktop-only icon buttons need
   their own responsive display utility to survive the .su-icon-btn grid. */
.su-icon-btn.su-lg-up { display: none; }
@media (min-width: 992px) { .su-icon-btn.su-lg-up { display: inline-grid; } }

/* Header page title — replaces the dead template search box with something
   that actually orients the user. */
.su-header-title {
    min-width: 0;
    font-size: .9375rem;
    font-weight: 650;
    color: var(--su-fg);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.su-header-divider {
    width: 1px;
    height: 22px;
    margin-inline: .25rem;
    background: var(--su-border);
}

/* User chip */
.su-user-chip {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 34px;
    padding: 0 .5rem 0 .3125rem;
    border-radius: var(--su-r-pill);
    border: 1px solid var(--su-border);
    background: var(--su-surface);
    color: var(--su-fg);
    font-size: .8125rem;
    font-weight: 550;
    transition: background-color var(--su-t), border-color var(--su-t);
}
.su-user-chip:hover { background: var(--su-surface-3); border-color: var(--su-border-strong); color: var(--su-fg); }
.su-avatar {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--su-brand);
    color: #fff;
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.su-avatar--lg { width: 52px; height: 52px; font-size: 1.125rem; }

/* Notification toggle in the header */
.su-notify-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 34px;
    margin: 0;
    padding: 0 .75rem;
    border-radius: var(--su-r-pill);
    border: 1px solid var(--su-border);
    background: var(--su-surface);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--su-fg-muted);
    white-space: nowrap;
}
.su-notify-switch .custom-control-label { cursor: pointer; }

/* Bell + unread dot */
.su-bell { position: relative; }
.su-bell__dot {
    position: absolute;
    top: 6px; right: 7px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--su-danger);
    box-shadow: 0 0 0 2px var(--su-surface);
}

/* Header dropdowns */
.dropdown-menu {
    border: 1px solid var(--su-border);
    border-radius: var(--su-r);
    box-shadow: var(--su-sh-md);
    padding: .375rem;
    font-size: .8438rem;
    color: var(--su-fg);
}
.dropdown-item {
    border-radius: var(--su-r-sm);
    padding: .5rem .625rem;
    font-weight: 500;
    color: var(--su-fg);
    transition: background-color var(--su-t);
}
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--su-surface-3); color: var(--su-fg); }
.dropdown-item.text-danger:hover { background-color: var(--su-danger-soft); color: var(--su-danger) !important; }
.dropdown-divider { border-top-color: var(--su-border); margin: .375rem .25rem; }
.dropdown-header {
    padding: .5rem .625rem .25rem;
    font-size: .6875rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--su-fg-subtle);
}
.su-dropdown-user {
    padding: .75rem .625rem;
    margin: -.375rem -.375rem .25rem;
    border-bottom: 1px solid var(--su-border);
    border-radius: var(--su-r) var(--su-r) 0 0;
    background: var(--su-surface-2);
}

/* Notification list inside the bell dropdown */
#notification-list { max-height: 380px; overflow-y: auto; }
#notification-list > li > a {
    display: flex;
    gap: .625rem;
    padding: .625rem;
    border-radius: var(--su-r-sm);
    color: var(--su-fg);
    transition: background-color var(--su-t);
}
#notification-list > li > a:hover { background: var(--su-surface-3); }
.su-empty-note {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--su-fg-subtle);
    font-size: .8125rem;
}

/* ---- Footer -------------------------------------------------------------- */
#page-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--su-border);
}
#page-footer .content { padding: 1rem 1.5rem; }
#page-footer,
#page-footer a { color: var(--su-fg-subtle); font-size: .8125rem; }
#page-footer a:hover { color: var(--su-brand); }