/* =============================================================================
   ui-modern.css — Consolidated UI/UX modernization layer (Phase 1: foundations)
   -----------------------------------------------------------------------------
   GOALS
   - Raise the visual baseline across the whole app WITHOUT breaking existing pages.
   - Theme-aware: builds only on existing tokens (--theme-*, --mud-palette-*).
   - Loaded AFTER MudBlazor so it cascades last and needs minimal !important.
   - Strong visual refinements are scoped to the app shell (.ps-app) and to
     opt-in utility classes (.ui-*) so legacy screens stay untouched until adopted.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1) DESIGN TOKENS (namespaced --ui-* so they never collide with existing ones)
   --------------------------------------------------------------------------- */
:root {
    /* Elevation / shadow scale (light theme) */
    --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ui-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.08);
    --ui-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.10);
    --ui-shadow-lg: 0 14px 38px rgba(15, 23, 42, 0.14);
    --ui-ring: 0 0 0 3px rgba(var(--theme-primary-rgb, 37, 99, 235), 0.28);

    /* Surfaces derived from the active palette */
    --ui-surface: var(--mud-palette-surface, var(--theme-surface, #fff));
    --ui-surface-2: color-mix(in srgb, var(--theme-primary-rgb-fallback, #2563eb) 4%, var(--ui-surface));
    --ui-border: color-mix(in srgb, var(--mud-palette-text-primary, #0f172a) 12%, transparent);
    --ui-border-strong: color-mix(in srgb, var(--mud-palette-text-primary, #0f172a) 22%, transparent);

    /* Radius scale (aligns with --theme-border-radius) */
    --ui-radius-sm: 8px;
    --ui-radius-md: 12px;
    --ui-radius-lg: 16px;
    --ui-radius-pill: 999px;

    /* Motion */
    --ui-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ui-dur: 180ms;
}

[data-theme="dark"] {
    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --ui-shadow-md: 0 8px 22px rgba(0, 0, 0, 0.5);
    --ui-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
    --ui-border: color-mix(in srgb, #ffffff 14%, transparent);
    --ui-border-strong: color-mix(in srgb, #ffffff 24%, transparent);
}

/* ---------------------------------------------------------------------------
   2) MODERN SCROLLBARS (global, safe — purely cosmetic)
   --------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--theme-primary, #2563eb) 45%, transparent) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 45%, transparent);
    border-radius: var(--ui-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 70%, transparent);
    background-clip: content-box;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------------------------------------------------------------------------
   3) APP SHELL POLISH (scoped to authenticated app .ps-app)
   These refine shadows/radius/motion only — never colors or layout structure.
   --------------------------------------------------------------------------- */

/* AppBar: crisper depth + readable title */
.ps-app .mud-appbar {
    box-shadow: var(--ui-shadow-md) !important;
    backdrop-filter: saturate(1.1);
}

.ps-app .app-bar-title {
    letter-spacing: 0.2px;
}

/* Drawer: comfortable width + soft edge */
.ps-app .mud-drawer.ps-app-drawer {
    box-shadow: var(--ui-shadow-lg) !important;
}

/* Branded drawer header */
.ps-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--theme-gradient-primary, var(--theme-drawer-bg, #1e3a8a));
    color: var(--theme-drawer-text, #fff);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ps-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ps-drawer-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.16);
    padding: 4px;
    flex: 0 0 auto;
}

.ps-drawer-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ps-drawer-brand-title {
    font-weight: 800;
    font-size: 0.98rem;
    line-height: 1.2;
    color: #fff;
}

.ps-drawer-brand-sub {
    font-size: 0.72rem;
    opacity: 0.85;
    color: #fff;
}

.ps-drawer-header .mud-icon-button {
    color: #fff !important;
}

/* Main content — NEVER override padding-top (MudBlazor reserves space for fixed AppBar) */
.ps-app .ps-main-content,
.ps-app .mud-main-content {
    padding-top: var(--mud-appbar-height, 64px) !important;
    padding-bottom: clamp(0.5rem, 1.2vw, 1.25rem);
    padding-inline: clamp(0.25rem, 1vw, 0.75rem);
    min-height: calc(100vh - var(--mud-appbar-height, 64px));
}

/* AppBar stays above page content */
.ps-app .mud-appbar {
    z-index: var(--mud-zindex-appbar, 1100) !important;
}

/* Papers & cards: unified soft elevation + radius (visual only) */
.ps-app .mud-paper:not(.mud-appbar):not(.mud-drawer):not(.theme-card-header):not(.theme-dialog-header):not(.mud-snackbar) {
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
    transition: box-shadow var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease);
}

.ps-app .mud-card {
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
}

/* Buttons: consistent radius + subtle hover lift / active press */
.ps-app .mud-button-root {
    border-radius: var(--ui-radius-sm);
    transition: transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease),
        background-color var(--ui-dur) var(--ui-ease) !important;
}

.ps-app .mud-button-filled:hover {
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-1px);
}

.ps-app .mud-button-root:active {
    transform: translateY(0);
}

/* Inputs: clearer focus affordance (keyboard + click) */
.ps-app .mud-input-control:focus-within .mud-input-slot,
.ps-app .mud-input-control:focus-within {
    border-radius: var(--ui-radius-sm);
}

.ps-app .mud-input-outlined-border {
    transition: border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
}

.ps-app .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    box-shadow: var(--ui-ring);
}

/* Tooltips: softer modern look */
.mud-tooltip {
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: var(--ui-shadow-md) !important;
    font-size: 0.8rem !important;
}

/* Dialog surface: rounder corners + depth */
.mud-dialog {
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
}

/* Snackbar: modern pill-ish card */
.mud-snackbar {
    border-radius: var(--ui-radius-md) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

/* ---------------------------------------------------------------------------
   4) REUSABLE UTILITY COMPONENTS (opt-in .ui-* classes)
   Adopt these on any page for an instantly consistent modern look.
   --------------------------------------------------------------------------- */

/* 4.1 Section card / panel */
.ui-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-sm);
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
}

.ui-section + .ui-section {
    margin-top: 1rem;
}

.ui-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--mud-palette-text-primary);
}

.ui-section-title::before {
    content: "";
    width: 4px;
    height: 1.1em;
    border-radius: var(--ui-radius-pill);
    background: var(--theme-gradient-primary, var(--theme-primary, #2563eb));
}

/* 4.2 KPI cards */
.ui-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.ui-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
    transition: transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
}

.ui-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-md);
}

.ui-kpi::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 4px;
    background: var(--ui-kpi-accent, var(--theme-primary, #2563eb));
}

.ui-kpi-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.ui-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.ui-kpi-sub {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
}

.ui-kpi--success { --ui-kpi-accent: var(--theme-success, #16a34a); }
.ui-kpi--warning { --ui-kpi-accent: var(--theme-warning, #ea580c); }
.ui-kpi--error   { --ui-kpi-accent: var(--theme-error, #dc2626); }
.ui-kpi--info    { --ui-kpi-accent: var(--theme-info, #0284c7); }

/* 4.3 Toolbar / filter bar */
.ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-xs);
}

.ui-toolbar .ui-toolbar-spacer {
    margin-inline-start: auto;
}

/* 4.4 Button row with clear hierarchy */
.ui-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.ui-btn-row--end {
    justify-content: flex-end;
}

/* 4.5 Empty / no-data state */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: clamp(1.5rem, 5vw, 3rem) 1rem;
    color: var(--mud-palette-text-secondary);
}

.ui-empty .ui-empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 12%, transparent);
    color: var(--theme-primary, #2563eb);
    font-size: 30px;
}

.ui-empty .ui-empty-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--mud-palette-text-primary);
}

.ui-empty .ui-empty-hint {
    font-size: 0.85rem;
    max-width: 360px;
}

/* 4.6 Opt-in modern data grid (sticky header + zebra + hover) */
.ui-grid {
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    border: 1px solid var(--ui-border);
}

.ui-grid .mud-table-container {
    border-radius: 0;
}

.ui-grid .mud-table-head .mud-table-cell,
.ui-grid .mud-table-head th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--theme-gradient-primary, var(--theme-primary, #2563eb)) !important;
    color: var(--theme-appbar-text, #fff) !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.ui-grid .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell {
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 4%, var(--ui-surface)) !important;
}

.ui-grid .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: color-mix(in srgb, var(--theme-primary, #2563eb) 12%, var(--ui-surface)) !important;
}

/* 4.7 Loading overlay helper for forms/sections */
.ui-busy {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.ui-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ui-surface) 40%, transparent);
    backdrop-filter: blur(1px);
    border-radius: inherit;
}

/* ---------------------------------------------------------------------------
   5) LOGIN POLISH (scoped to .login-card — refines existing design, no rewrite)
   --------------------------------------------------------------------------- */
.login-card {
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    overflow: hidden;
}

.login-card .login-field .mud-input-outlined-border {
    transition: border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
}

.login-card .login-field .mud-input.mud-focused .mud-input-outlined-border {
    box-shadow: var(--ui-ring);
}

.login-card .login-submit-btn {
    border-radius: var(--ui-radius-sm) !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    transition: transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease) !important;
}

.login-card .login-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-md) !important;
}

/* ---------------------------------------------------------------------------
   6) ACCESSIBILITY & MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ps-app .mud-button-root,
    .ps-app .mud-paper,
    .ui-kpi,
    .login-card .login-submit-btn {
        transition: none !important;
    }

    .ps-app .mud-button-filled:hover,
    .ui-kpi:hover,
    .login-card .login-submit-btn:hover {
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------------
   7) PRINT: keep utility components clean on paper
   --------------------------------------------------------------------------- */
@media print {
    .ui-section,
    .ui-kpi,
    .ui-toolbar,
    .ui-grid {
        box-shadow: none !important;
        border-color: #cbd5e1 !important;
    }

    .ui-no-print {
        display: none !important;
    }
}