/* ==========================================================================
   Payerset Brand Theme — Django Admin Override
   Colors extracted from payerset.com

   Strategy: Override Django's own CSS custom properties so that both
   Django's base.css AND dark_mode.css use our palette. Then layer on
   component-specific overrides for polish.
   ========================================================================== */

/* -- Override Django's built-in CSS variables (light AND dark) ------------- */
:root,
html[data-theme="dark"],
@media (prefers-color-scheme: dark) {
    :root {
        --primary:    rgb(4, 30, 46);
        --primary-fg: #ffffff;

        --secondary:    rgb(4, 51, 76);
        --secondary-fg: #ffffff;

        --accent:    rgb(52, 132, 169);
        --accent-fg: #ffffff;

        --header-color:          #ffffff;
        --header-branding-color: #ffffff;
        --header-bg:    rgb(4, 30, 46);
        --header-link-color: rgb(198, 204, 205);

        --breadcrumbs-fg:       rgb(198, 204, 205);
        --breadcrumbs-link-fg:  rgb(91, 153, 178);
        --breadcrumbs-bg:       rgb(4, 51, 76);

        --link-fg:       rgb(4, 69, 102);
        --link-hover-color: rgb(52, 132, 169);
        --link-selected-fg: rgb(52, 132, 169);

        --hairline-color: rgb(198, 204, 205);
        --border-color:   rgb(198, 204, 205);

        --body-fg:       rgb(39, 49, 54);
        --body-bg:       rgb(243, 245, 246);
        --body-quiet-color: rgb(69, 80, 85);
        --body-loud-color:  rgb(4, 30, 46);

        --darkened-bg:   rgba(4, 30, 46, 0.04);
        --selected-bg:   rgba(52, 132, 169, 0.12);
        --selected-row:  rgba(52, 132, 169, 0.06);

        --button-fg: #ffffff;
        --button-bg: rgb(52, 132, 169);
        --button-hover-bg: rgb(4, 69, 102);
        --default-button-bg: rgb(4, 69, 102);
        --default-button-hover-bg: rgb(4, 30, 46);

        --close-button-bg: #888;
        --close-button-hover-bg: #747474;

        --delete-button-bg: #dc3545;
        --delete-button-hover-bg: #b02a37;

        --object-tools-fg: #ffffff;
        --object-tools-bg: rgb(4, 51, 76);
        --object-tools-hover-bg: rgb(4, 69, 102);

        --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }
}

/* Repeat at top level for browsers that don't nest inside @media */
:root {
    --primary:    rgb(4, 30, 46);
    --primary-fg: #ffffff;
    --secondary:    rgb(4, 51, 76);
    --secondary-fg: #ffffff;
    --accent:    rgb(52, 132, 169);
    --accent-fg: #ffffff;
    --header-color:          #ffffff;
    --header-branding-color: #ffffff;
    --header-bg:    rgb(4, 30, 46);
    --header-link-color: rgb(198, 204, 205);
    --breadcrumbs-fg:       rgb(198, 204, 205);
    --breadcrumbs-link-fg:  rgb(91, 153, 178);
    --breadcrumbs-bg:       rgb(4, 51, 76);
    --link-fg:       rgb(4, 69, 102);
    --link-hover-color: rgb(52, 132, 169);
    --link-selected-fg: rgb(52, 132, 169);
    --hairline-color: rgb(198, 204, 205);
    --border-color:   rgb(198, 204, 205);
    --body-fg:       rgb(39, 49, 54);
    --body-bg:       rgb(243, 245, 246);
    --body-quiet-color: rgb(69, 80, 85);
    --body-loud-color:  rgb(4, 30, 46);
    --darkened-bg:   rgba(4, 30, 46, 0.04);
    --selected-bg:   rgba(52, 132, 169, 0.12);
    --selected-row:  rgba(52, 132, 169, 0.06);
    --button-fg: #ffffff;
    --button-bg: rgb(52, 132, 169);
    --button-hover-bg: rgb(4, 69, 102);
    --default-button-bg: rgb(4, 69, 102);
    --default-button-hover-bg: rgb(4, 30, 46);
    --close-button-bg: #888;
    --close-button-hover-bg: #747474;
    --delete-button-bg: #dc3545;
    --delete-button-hover-bg: #b02a37;
    --object-tools-fg: #ffffff;
    --object-tools-bg: rgb(4, 51, 76);
    --object-tools-hover-bg: rgb(4, 69, 102);
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Our own tokens (for custom rules below) */
    --ps-black:     rgb(4, 30, 46);
    --ps-darkest:   rgb(4, 51, 76);
    --ps-darker:    rgb(4, 62, 87);
    --ps-dark:      rgb(4, 69, 102);
    --ps-primary:   rgb(4, 58, 75);
    --ps-mid:       rgb(39, 49, 54);
    --ps-slate:     rgb(69, 80, 85);
    --ps-muted:     rgb(84, 108, 116);
    --ps-gray:      rgb(100, 116, 132);
    --ps-steel:     rgb(52, 132, 169);
    --ps-cadet:     rgb(91, 153, 178);
    --ps-silver:    rgb(132, 132, 132);
    --ps-darkgray:  rgb(172, 180, 188);
    --ps-lightgray: rgb(198, 204, 205);
    --ps-smoke:     rgb(243, 245, 246);
    --ps-white:     #ffffff;
}

/* Force our variables in dark mode too */
@media (prefers-color-scheme: dark) {
    :root {
        --primary:    rgb(4, 30, 46);
        --primary-fg: #ffffff;
        --secondary:    rgb(4, 51, 76);
        --secondary-fg: #ffffff;
        --accent:    rgb(52, 132, 169);
        --accent-fg: #ffffff;
        --header-color:          #ffffff;
        --header-branding-color: #ffffff;
        --header-bg:    rgb(4, 30, 46);
        --header-link-color: rgb(198, 204, 205);
        --breadcrumbs-fg:       rgb(198, 204, 205);
        --breadcrumbs-link-fg:  rgb(91, 153, 178);
        --breadcrumbs-bg:       rgb(4, 51, 76);
        --link-fg:       rgb(4, 69, 102);
        --link-hover-color: rgb(52, 132, 169);
        --link-selected-fg: rgb(52, 132, 169);
        --hairline-color: rgb(198, 204, 205);
        --border-color:   rgb(198, 204, 205);
        --body-fg:       rgb(39, 49, 54);
        --body-bg:       rgb(243, 245, 246);
        --body-quiet-color: rgb(69, 80, 85);
        --body-loud-color:  rgb(4, 30, 46);
        --darkened-bg:   rgba(4, 30, 46, 0.04);
        --selected-bg:   rgba(52, 132, 169, 0.12);
        --selected-row:  rgba(52, 132, 169, 0.06);
        --button-fg: #ffffff;
        --button-bg: rgb(52, 132, 169);
        --button-hover-bg: rgb(4, 69, 102);
        --default-button-bg: rgb(4, 69, 102);
        --default-button-hover-bg: rgb(4, 30, 46);
        --close-button-bg: #888;
        --close-button-hover-bg: #747474;
        --delete-button-bg: #dc3545;
        --delete-button-hover-bg: #b02a37;
        --object-tools-fg: #ffffff;
        --object-tools-bg: rgb(4, 51, 76);
        --object-tools-hover-bg: rgb(4, 69, 102);
        --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }
}


/* ==========================================================================
   Global / Typography
   ========================================================================== */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Header
   ========================================================================== */

#header {
    box-shadow: 0 2px 12px rgba(4, 30, 46, 0.25);
    padding: 14px 28px;
}

#user-tools {
    font-size: 0.85em;
    font-weight: 400;
}

#user-tools a {
    font-weight: 500;
    border-bottom: none;
    transition: color 0.15s ease;
}

#branding h1 {
    font-weight: 600;
    font-size: 1.3em;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

div.breadcrumbs {
    padding: 10px 28px;
    font-size: 0.85em;
    font-weight: 400;
    border: none;
}

div.breadcrumbs a {
    text-decoration: none;
    font-weight: 500;
}

/* ==========================================================================
   Content area
   ========================================================================== */

#content {
    padding: 24px 32px;
}

#content h1 {
    font-weight: 700;
    font-size: 1.6em;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Links
   ========================================================================== */

a:link, a:visited {
    text-decoration: none;
    transition: color 0.15s ease;
}

/* ==========================================================================
   Module panels
   ========================================================================== */

.module {
    border: 1px solid var(--ps-lightgray);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0px;
    box-shadow: 0 1px 3px rgba(4, 30, 46, 0.06);
    background: var(--ps-white);
    margin-left: 0;
    margin-right: 0;
}

/* Prevent module from bleeding outside its container */
#content .module {
    max-width: 100%;
    box-sizing: border-box;
}

.module h2, .module caption {
    font-weight: 600;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    border: none;
    color: var(--ps-white);
}

/* Links on dark backgrounds should always be white */
.module h2 a,
.module caption a,
.inline-group h2 a {
    color: var(--ps-white) !important;
}

/* ==========================================================================
   Buttons — Modern rounded style
   ========================================================================== */

.submit-row input[type="submit"],
input[type="submit"],
.button,
a.button {
    border: none;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.875em;
    padding: 10px 20px;
    text-transform: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(4, 30, 46, 0.15);
    letter-spacing: 0.01em;
}

.submit-row input[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover,
a.button:hover {
    box-shadow: 0 4px 12px rgba(4, 30, 46, 0.2);
    transform: translateY(-1px);
}

.submit-row input[type="submit"]:active,
input[type="submit"]:active,
.button:active,
a.button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(4, 30, 46, 0.15);
}

input[type="submit"].default,
.submit-row input.default {
    font-weight: 700;
    padding: 10px 24px;
}

/* Delete button */
.deletelink,
.submit-row a.deletelink {
    border-radius: 6px;
    font-weight: 600;
    padding: 10px 18px;
    transition: all 0.2s ease;
}

.deletelink:hover,
.submit-row a.deletelink:hover {
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    transform: translateY(-1px);
}

/* Submit row container */
.submit-row {
    border: 1px solid var(--ps-lightgray);
    border-radius: 8px;
    padding: 14px 20px;
    overflow: visible;
}

/* ==========================================================================
   Object tools (Add / History buttons in top-right)
   ========================================================================== */

.object-tools {
    margin-bottom: 16px;
}

.object-tools a:link,
.object-tools a:visited {
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 0.8em;
    text-transform: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(4, 30, 46, 0.1);
    white-space: nowrap;
    color: var(--ps-white) !important;
}

.object-tools a:hover {
    box-shadow: 0 4px 8px rgba(4, 30, 46, 0.15);
    transform: translateY(-1px);
}

/* ==========================================================================
   Tables / Change list
   ========================================================================== */

#result_list {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--ps-lightgray);
    box-shadow: 0 1px 3px rgba(4, 30, 46, 0.06);
}

#result_list table {
    border: none;
}

#result_list thead th {
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border: none;
}

#result_list tbody td,
#result_list tbody th {
    padding: 11px 14px;
    font-size: 0.9em;
    border-bottom: 1px solid var(--ps-smoke);
}

#result_list tbody th {
    font-weight: 500;
}

#result_list tbody tr:hover {
    background: rgba(52, 132, 169, 0.08);
}

#result_list tbody th a {
    font-weight: 600;
}

/* ==========================================================================
   Sidebar nav — the main fix for readability
   ========================================================================== */

#nav-sidebar {
    background: var(--ps-black);
    border-right: none;
    box-shadow: 2px 0 8px rgba(4, 30, 46, 0.15);
}

/* Override the module background inside the sidebar */
#nav-sidebar .module {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

/* Section headings (AUTHENTICATION AND AUTHORIZATION, HOSPITALS, etc.) */
#nav-sidebar .module caption,
#nav-sidebar .module h2 {
    background: transparent !important;
    color: var(--ps-darkgray) !important;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 16px 6px;
    font-weight: 600;
}

/* Table cells in sidebar */
#nav-sidebar .module th,
#nav-sidebar .module td {
    background: transparent !important;
    padding: 0;
    border: none;
}

/* Sidebar model name links (Hospitals, Systems, Groups, Users) */
#nav-sidebar .module th a,
#nav-sidebar .module a:link,
#nav-sidebar .module a:visited {
    color: var(--ps-lightgray) !important;
    padding: 7px 16px;
    display: block;
    border-radius: 4px;
    margin: 1px 8px;
    font-weight: 400;
    font-size: 0.9em;
    transition: all 0.15s ease;
    text-decoration: none;
}

#nav-sidebar .module th a:hover,
#nav-sidebar .module a:hover {
    color: var(--ps-white) !important;
    background: var(--ps-darkest);
}

/* Active app highlight */
#nav-sidebar .current-app th a,
#nav-sidebar .current-app a:link,
#nav-sidebar .current-app a:visited {
    color: var(--ps-white) !important;
    font-weight: 600;
}

/* "+ Add" links in sidebar — the yellow buttons fix */
#nav-sidebar .module td a,
#nav-sidebar .module .addlink {
    color: var(--ps-cadet) !important;
    background: transparent !important;
    font-size: 0.8em;
    font-weight: 500;
    padding: 7px 8px;
    margin: 0;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.15s ease;
}

#nav-sidebar .module td a:hover,
#nav-sidebar .module .addlink:hover {
    color: var(--ps-white) !important;
    background: var(--ps-darkest) !important;
}

/* Sidebar filter input */
#nav-sidebar #nav-filter {
    background: var(--ps-darkest);
    color: var(--ps-lightgray);
    border: 1px solid var(--ps-darker);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85em;
    margin: 8px;
    width: calc(100% - 16px);
    box-sizing: border-box;
}

#nav-sidebar #nav-filter::placeholder {
    color: var(--ps-gray);
}

#nav-sidebar #nav-filter:focus {
    border-color: var(--ps-steel);
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 132, 169, 0.2);
}

/* Toggle button */
#toggle-nav-sidebar {
    color: var(--ps-darkgray);
    transition: color 0.15s ease;
}

#toggle-nav-sidebar:hover {
    color: var(--ps-white);
}

/* ==========================================================================
   Filters sidebar (changelist right side)
   ========================================================================== */

#changelist-filter {
    background: var(--ps-white);
    border: 1px solid var(--ps-lightgray);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(4, 30, 46, 0.06);
    overflow: hidden;
}

#changelist-filter h3 {
    font-weight: 600;
    color: var(--ps-slate);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 16px 4px;
    border-top: 1px solid var(--ps-smoke);
}

#changelist-filter li {
    padding: 0;
}

#changelist-filter a {
    display: block;
    padding: 6px 16px;
    font-size: 0.875em;
    border-radius: 0;
    transition: all 0.15s ease;
}

#changelist-filter a:hover {
    background: var(--ps-smoke);
}

#changelist-filter li.selected a {
    color: var(--ps-dark) !important;
    font-weight: 700;
    background: rgba(52, 132, 169, 0.08);
    border-left: 3px solid var(--ps-steel);
    padding-left: 13px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
    border: 1px solid var(--ps-lightgray);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9em;
    color: var(--ps-mid);
    background: var(--ps-white);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--ps-steel);
    box-shadow: 0 0 0 3px rgba(52, 132, 169, 0.12);
    outline: none;
}

.aligned label {
    color: var(--ps-mid);
    font-weight: 600;
    font-size: 0.85em;
}

.help, .helptext {
    color: var(--ps-gray);
    font-size: 0.8em;
}

/* Ensure table header text in inline groups is readable */
.inline-group .tabular thead th {
    color: var(--ps-mid);
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Make sure "My actions" and content-area text has good contrast */
#content a:link, #content a:visited {
    color: var(--ps-dark);
}

#content a:hover {
    color: var(--ps-steel);
}

fieldset {
    border: 1px solid var(--ps-lightgray);
    border-radius: 8px;
    background: var(--ps-white);
}

fieldset h2 {
    background: var(--ps-smoke) !important;
    color: var(--ps-slate) !important;
    font-size: 0.85em !important;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
}

/* ==========================================================================
   Inline groups
   ========================================================================== */

.inline-group {
    border-radius: 8px;
    overflow: hidden;
}

.inline-group h2 {
    background: var(--ps-darkest) !important;
    color: var(--ps-white) !important;
    font-size: 0.85em !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tabular .module table {
    border: none;
}

/* ==========================================================================
   Login page
   ========================================================================== */

body.login {
    background: var(--ps-black);
}

body.login #header {
    background: transparent;
    box-shadow: none;
    padding: 40px 28px 20px;
    text-align: center;
}

body.login #container {
    background: var(--ps-black);
    min-height: 100vh;
}

body.login #content {
    background: var(--ps-white);
    border-radius: 12px;
    padding: 32px;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(4, 30, 46, 0.4);
}

body.login #content h1 {
    color: var(--ps-black);
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 20px;
}

body.login .submit-row {
    padding: 16px 0 0;
    border: none;
    background: transparent;
}

body.login .submit-row input {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    border-radius: 8px;
}

/* ==========================================================================
   Recent actions
   ========================================================================== */

#recent-actions-module li {
    padding: 8px 16px;
    border-bottom: 1px solid var(--ps-smoke);
    font-size: 0.875em;
}

/* ==========================================================================
   Messages / alerts
   ========================================================================== */

.messagelist li {
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9em;
}

.messagelist li.success {
    background: #d1fae5;
    color: #065f46;
}

.messagelist li.warning {
    background: #fef3c7;
    color: #92400e;
}

.messagelist li.error {
    background: #fee2e2;
    color: #991b1b;
}

/* ==========================================================================
   Action bar (changelist)
   ========================================================================== */

.actions {
    background: var(--ps-white);
    border: 1px solid var(--ps-lightgray);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 16px;
}

.actions select {
    border-radius: 6px;
    border: 1px solid var(--ps-lightgray);
    padding: 6px 10px;
    font-size: 0.85em;
}

.actions button {
    background: var(--ps-steel);
    color: var(--ps-white);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.actions button:hover {
    background: var(--ps-dark);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.paginator {
    font-size: 0.85em;
    padding: 12px 0;
}

.paginator a:link, .paginator a:visited {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--ps-lightgray);
    font-weight: 500;
    transition: all 0.15s ease;
}

.paginator a:hover {
    background: var(--ps-steel);
    color: var(--ps-white);
    border-color: var(--ps-steel);
}

/* ==========================================================================
   Search bar
   ========================================================================== */

#changelist-search {
    border: none;
    background: transparent;
    padding: 0;
    margin-bottom: 16px;
}

#changelist-search #searchbar {
    border-radius: 8px;
    border: 1px solid var(--ps-lightgray);
    padding: 10px 16px;
    font-size: 0.9em;
    width: 40%;
    min-width: 240px;
    background: var(--ps-white);
    box-shadow: 0 1px 3px rgba(4, 30, 46, 0.04);
}

#changelist-search #searchbar:focus {
    border-color: var(--ps-steel);
    box-shadow: 0 0 0 3px rgba(52, 132, 169, 0.12);
}

#changelist-search input[type="submit"] {
    border-radius: 8px;
    padding: 10px 20px;
}

/* ==========================================================================
   Focus states
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--ps-steel);
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ==========================================================================
   Hide sidebar completely
   ========================================================================== */

#nav-sidebar,
#toggle-nav-sidebar {
    display: none !important;
}

/* Reset main content to full width when sidebar is gone */
.main > .content {
    max-width: 100%;
    margin-left: 0 !important;
}

/* ==========================================================================
   Top Navigation
   ========================================================================== */

#ps-nav {
    background: var(--ps-darkest);
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 0;
}

.ps-nav-link {
    color: var(--ps-lightgray) !important;
    padding: 10px 16px;
    font-size: 0.85em;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    display: block;
}

.ps-nav-link:hover {
    color: var(--ps-white) !important;
    background: var(--ps-darker);
}

.ps-nav-dropdown {
    position: relative;
}

.ps-nav-arrow {
    font-size: 0.7em;
    margin-left: 4px;
}

.ps-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--ps-darkest);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(4, 30, 46, 0.3);
    min-width: 160px;
    z-index: 1000;
}

.ps-nav-dropdown:hover .ps-nav-dropdown-menu {
    display: block;
}

.ps-nav-dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--ps-lightgray) !important;
    font-size: 0.85em;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.ps-nav-dropdown-menu a:hover {
    color: var(--ps-white) !important;
    background: var(--ps-darker);
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.ps-dashboard {
    padding: 0;
}

.ps-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.ps-metric-card {
    background: var(--ps-white);
    border: 1px solid var(--ps-lightgray);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
}

.ps-metric-card--warn .ps-metric-value {
    color: #dc3545;
}

.ps-metric-value {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--ps-black);
    line-height: 1;
    margin-bottom: 6px;
}

.ps-metric-label {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ps-gray);
}

.ps-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.ps-quick-links {
    display: flex;
    gap: 12px;
}

.ps-quick-link {
    display: inline-block;
    background: var(--ps-steel);
    color: var(--ps-white) !important;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85em;
    text-decoration: none;
    transition: background 0.15s ease;
}

.ps-quick-link:hover {
    background: var(--ps-dark);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
    #header {
        padding: 12px 16px;
    }

    #content {
        padding: 16px;
    }

    #ps-nav {
        padding: 0 12px;
        flex-wrap: wrap;
    }

    .ps-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .ps-dashboard-grid {
        grid-template-columns: 1fr;
    }
}