/* Fonts are loaded dynamically via JS to support user choice */
/* Default fonts included as fallback */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Lexend:wght@300;400;500;600&display=swap');

/* Global Native Splash Screen Hide (Desktop) */
.native-splash-screen {
    display: none;
}

/* Brand Logo Utility - Mask technique to allow theme-tinting of PNG */
.brand-logo-tint,
.brand-logo-img {
    display: inline-block;
    width: 200px;
    height: 65px;
    background-color: var(--primary);
    -webkit-mask: url('../logo/logo.png') no-repeat center;
    mask: url('../logo/logo.png') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: var(--transition-standard);
}

:root {
    /* Color Seeds - To be updated via JS */
    --primary-seed: #0061a4;

    /* Light Theme - Tinted by primary-seed */
    --primary: var(--primary-seed);
    --on-primary: #ffffff;
    --primary-container: color-mix(in srgb, var(--primary-seed) 20%, #ffffff);
    --on-primary-container: color-mix(in srgb, var(--primary-seed) 80%, #000000);

    --surface: color-mix(in srgb, var(--primary-seed) 5%, #fdfcff);
    --on-surface: #1a1c1e;
    --surface-variant: color-mix(in srgb, var(--primary-seed) 10%, #dfe2eb);
    --on-surface-variant: #43474e;
    --outline: #73777f;

    --surface-container-low: color-mix(in srgb, var(--primary-seed) 5%, #f7f9fc);
    --surface-container: color-mix(in srgb, var(--primary-seed) 8%, #f3f5f9);
    --surface-container-high: color-mix(in srgb, var(--primary-seed) 11%, #eceef4);
    --surface-container-highest: color-mix(in srgb, var(--primary-seed) 12%, #e2e8f0);

    --secondary-container: color-mix(in srgb, var(--primary-seed) 15%, #f4f4f4);
    --on-secondary-container: #1a1c1e;
    --tertiary-container: #f7ebff;
    --on-tertiary-container: #250059;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --on-error: #ffffff;
    --error: #ba1a1a;

    /* Typography Variables */
    --font-main: 'Google Sans', 'Lexend', sans-serif;
    --font-style: normal;
    --weight-thin: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    --warning: #FB8C00;
    --on-warning: #ffffff;
    --warning-container: #FFF3E0;
    --on-warning-container: #E65100;

    --success: #4CAF50;
    --on-success: #ffffff;
    --success-container: #E8F5E9;
    --on-success-container: #1B5E20;

    /* Aesthetic Multipliers */
    --radius-multiplier: 1;
    --density-multiplier: 1;
    --glass-opacity: 0.8;
    --glass-blur: 12px;
    --glow-opacity: 0.5;

    /* Computed Radii (rem) */
    --radius-xs: calc(0.5rem * var(--radius-multiplier));
    --radius-s: calc(0.75rem * var(--radius-multiplier));
    --radius-m: calc(1rem * var(--radius-multiplier));
    --radius-l: calc(1.5rem * var(--radius-multiplier));
    --radius-xl: calc(2rem * var(--radius-multiplier));
    --radius-full: 9999px;

    /* Form Field Variables */
    --field-height: 64px;
    --field-radius: 18px;

    --transition-standard: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-emphasized: all 0.7s cubic-bezier(0.2, 0, 0, 1);

    accent-color: var(--primary);

    /* Typography Variables */
}

[data-theme="dark"] {
    /* True Tinted Dark Mode - Surfaces are clearly influenced by primary-seed */
    --primary: color-mix(in srgb, var(--primary-seed) 60%, #ffffff);
    --on-primary: color-mix(in srgb, var(--primary-seed) 80%, #000000);
    --primary-container: color-mix(in srgb, var(--primary-seed) 25%, #000000);
    --on-primary-container: color-mix(in srgb, var(--primary-seed) 30%, #ffffff);

    --surface: color-mix(in srgb, var(--primary-seed) 10%, #080808);
    --on-surface: #e2e2e6;
    --surface-variant: color-mix(in srgb, var(--primary-seed) 15%, #232529);
    --on-surface-variant: #c3c7cf;
    --outline: #8d9199;

    --surface-container-low: color-mix(in srgb, var(--primary-seed) 8%, #0f1115);
    --surface-container: color-mix(in srgb, var(--primary-seed) 10%, #14161a);
    --surface-container-high: color-mix(in srgb, var(--primary-seed) 12%, #1a1c21);
    --surface-container-highest: color-mix(in srgb, var(--primary-seed) 15%, #23252a);

    --secondary-container: color-mix(in srgb, var(--primary-seed) 10%, #1e2024);
    --on-secondary-container: #ffffff;
    --tertiary-container: color-mix(in srgb, #9c41ff 20%, #000000);
    --on-tertiary-container: #eaddff;
    --error-container: color-mix(in srgb, #ffb4ab 20%, #000000);
    --on-error-container: #ffdad6;
    --on-error: #000000;
    --error: #ffb4ab;
}

/* Theme Toggle Icon Logic */
.theme-icon-sun,
.theme-icon-moon,
#themeIcon,
#mobileThemeIcon,
#sidebarThemeIcon {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, color 0.3s ease;
}

/* Light Mode: Showing Moon icon */
[data-theme="light"] #themeIcon,
[data-theme="light"] #mobileThemeIcon,
[data-theme="light"] #sidebarThemeIcon {
    color: var(--on-surface-variant);
}

/* Dark Mode: Showing Sun icon */
[data-theme="dark"] #themeIcon,
[data-theme="dark"] #mobileThemeIcon,
[data-theme="dark"] #sidebarThemeIcon {
    color: #ffdb58 !important;
    /* Sun yellow */
    transform: rotate(45deg) scale(1.1);
}

/* Sidebar Theme Toggle mobile styling */
.theme-toggle-nav .nav-icon {
    background: var(--surface-container-high) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .nav-item.active {
    background: var(--primary-container);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

[data-theme="dark"] .card-header {
    background: var(--surface-container-high);
    border-bottom: 1px solid var(--surface-variant);
    color: var(--on-surface);
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeScaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.1);
    }
}

@keyframes pageEntrance {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: var(--transition-emphasized);
}

[data-theme="light"] .loader-logo {
    background-color: var(--primary);
}

.loader-wrapper.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: clamp(150px, 40vw, 200px);
}

.loader-logo {
    width: 100%;
    height: clamp(80px, 20vh, 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite ease-in-out;
}

.loader-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

[data-theme="dark"] .loader-logo img,
body.compact-mode .loader-logo img {
    filter: brightness(0) invert(1);
}

.loader-progress-container {
    width: 100%;
    height: 6px;
    background: var(--surface-variant);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.loader-progress-bar {
    width: 0%;
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    animation: progress-load 2s infinite ease-in-out;
}

[data-theme="dark"] .loader-progress-container {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .loader-progress-bar {
    background: #ffffff;
}

@keyframes progress-load {
    0% {
        width: 0%;
        transform: translateX(-100%);
    }

    50% {
        width: 100%;
        transform: translateX(0);
    }

    100% {
        width: 0%;
        transform: translateX(100%);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.animate-page-entrance {
    animation: pageEntrance 0.6s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.animate-in {
    animation: slideUpFade 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.mobile-only {
    display: none !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    font-family: var(--font-main);
    font-style: var(--font-style);
    background-color: var(--surface);
    color: var(--on-surface);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    /* Aside and Main will scroll independently */
    display: flex;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: var(--weight-bold);
}

/* Global Themed Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
    opacity: 0.5;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-seed);
}

/* Main Scrollable Area */
.main-content-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 24px;
}

.main-content-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Breadcrumbs & Page Headers */
.page-header-container {
    margin-bottom: 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
    font-size: 0.8125rem;
    /* 13px */
    color: var(--on-surface-variant);
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li+li::before {
    content: '>';
    margin-right: 12px;
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.6;
    font-weight: 700;
    color: var(--on-surface-variant);
}

.content-wrapper {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    width: 100%;
    max-width: 100%;
}

.breadcrumb li a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb li a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.breadcrumb li span {
    color: var(--on-surface-variant);
}

.page-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--primary) 20%, transparent);
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, white);
    transition: var(--transition-standard);
}

[data-theme="dark"] .page-header-icon {
    border-color: color-mix(in srgb, var(--primary) 30%, black);
}

.page-header-icon i {
    width: 1.25rem;
    height: 1.25rem;
}

.page-title-group .headline-medium {
    margin: 0;
    font-size: clamp(1.125rem, 3vw, 1.25rem);
    /* Responsive Headline */
    font-weight: 600;
    color: var(--on-surface);
}

.breadcrumb li:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--outline-variant);
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-standard);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Global Utility Classes */
.w-full {
    width: 100% !important;
}

.h-full {
    height: 100% !important;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

/* Grid System */
.grid {
    display: grid !important;
    width: 100%;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

/* Base Column Spans */
.col-span-1 {
    grid-column: span 1 / span 1 !important;
}

.col-span-2 {
    grid-column: span 2 / span 2 !important;
}

.col-span-3 {
    grid-column: span 3 / span 3 !important;
}

.col-span-4 {
    grid-column: span 4 / span 4 !important;
}

.col-span-5 {
    grid-column: span 5 / span 5 !important;
}

.col-span-6 {
    grid-column: span 6 / span 6 !important;
}

.col-span-7 {
    grid-column: span 7 / span 7 !important;
}

.col-span-8 {
    grid-column: span 8 / span 8 !important;
}

.col-span-9 {
    grid-column: span 9 / span 9 !important;
}

.col-span-10 {
    grid-column: span 10 / span 10 !important;
}

.col-span-11 {
    grid-column: span 11 / span 11 !important;
}

.col-span-12 {
    grid-column: span 12 / span 12 !important;
}

/* Responsive Grid (min-width: 768px) */
@media (min-width: 768px) {
    .md\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    .md\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }

    .md\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }

    .md\:col-span-3 {
        grid-column: span 3 / span 3 !important;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4 !important;
    }

    .md\:col-span-5 {
        grid-column: span 5 / span 5 !important;
    }

    .md\:col-span-6 {
        grid-column: span 6 / span 6 !important;
    }

    .md\:col-span-7 {
        grid-column: span 7 / span 7 !important;
    }

    .md\:col-span-8 {
        grid-column: span 8 / span 8 !important;
    }

    .md\:col-span-9 {
        grid-column: span 9 / span 9 !important;
    }

    .md\:col-span-10 {
        grid-column: span 10 / span 10 !important;
    }

    .md\:col-span-11 {
        grid-column: span 11 / span 11 !important;
    }

    .md\:col-span-12 {
        grid-column: span 12 / span 12 !important;
    }
}

/* Flex System */
.flex {
    display: flex !important;
}

.flex-col {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.items-center {
    align-items: center !important;
}

.items-start {
    align-items: flex-start !important;
}

.items-end {
    align-items: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.actions-flex {
    display: flex !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    width: 100%;
}

.center-all {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Gap System (rem) */
.gap-0 {
    gap: 0 !important;
}

.gap-4 {
    gap: 0.25rem !important;
}

.gap-8 {
    gap: 0.5rem !important;
}

.gap-12 {
    gap: 0.75rem !important;
}

.gap-16 {
    gap: 1rem !important;
}

.gap-24 {
    gap: 1.5rem !important;
}

.gap-32 {
    gap: 2rem !important;
}

/* Gap X/Y System */
.gap-x-4 {
    column-gap: 0.25rem !important;
}

.gap-x-8 {
    column-gap: 0.5rem !important;
}

.gap-x-12 {
    column-gap: 0.75rem !important;
}

.gap-x-16 {
    column-gap: 1rem !important;
}

.gap-x-24 {
    column-gap: 1.5rem !important;
}

.gap-x-32 {
    column-gap: 2rem !important;
}

.gap-y-4 {
    row-gap: 0.25rem !important;
}

.gap-y-8 {
    row-gap: 0.5rem !important;
}

.gap-y-12 {
    row-gap: 0.75rem !important;
}

.gap-y-16 {
    row-gap: 1rem !important;
}

.gap-y-24 {
    row-gap: 1.5rem !important;
}

.gap-y-32 {
    row-gap: 2rem !important;
}

.breadcrumb li:last-child {
    color: var(--on-surface);
    font-weight: 500;
}

.title-large {
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(1.5rem, 5vw, 1.75rem);
    /* Fluid Title */
    font-weight: 500;
    color: var(--on-surface);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--outline);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--on-surface-variant);
}

.app-container {
    display: flex;
    width: 100%;
    height: 100%;
}

main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    transition: var(--transition-emphasized);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    height: 2.75rem;
    /* Increased touch target */
    border-radius: var(--radius-full);
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-standard);
    gap: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    /* Prevent text wrapping */
    flex-shrink: 0;
    /* Prevent shrinking */
    user-select: none;
    position: relative;
    overflow: hidden;
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.12);
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: scale(0.96) translateY(0);
}

.btn-secondary {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    border: none;
}

.btn-tertiary {
    background: var(--tertiary-container);
    color: var(--on-tertiary-container);
    border: none;
}

.btn-error {
    background: var(--error-container);
    color: var(--on-error-container);
    border: none;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--outline);
    color: var(--primary);
}

.btn-outline:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border-color: var(--primary);
}

.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--radius-full);
}

/* Button that matches form field height/shape */
.btn-field {
    height: 40px !important;
    border-radius: var(--field-radius) !important;
    padding: 0 1.5rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

.btn-sm {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    gap: 0.25rem;
}

.btn-icon.btn-sm {
    width: 2rem;
    height: 2rem;
    padding: 0;
}

.btn-icon.btn-sm svg,
.btn-icon.btn-sm i {
    width: 14px !important;
    height: 14px !important;
}

.btn-fab {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    padding: 0;
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.15);
    background: var(--primary);
    color: var(--on-primary);
}

.btn-fab-mini {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.btn-fab-extended {
    height: 3.5rem;
    padding: 0 1.5rem;
    border-radius: 1rem;
    gap: 0.75rem;
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.15);
    background: var(--primary);
    color: var(--on-primary);
}

.btn-fab-large {
    width: 6rem;
    height: 6rem;
    border-radius: 1.75rem;
    padding: 0;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.btn-fab-large i,
.btn-fab-large svg {
    width: 2.25rem;
    height: 2.25rem;
}

/* FAB Color Variants */
.btn-fab-tonal {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.btn-fab-secondary {
    background: var(--secondary);
    color: var(--on-secondary);
}

.btn-fab-tertiary {
    background: var(--tertiary-container);
    color: var(--on-tertiary-container);
}

.btn-fab-surface {
    background: var(--surface-container-high);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-fab:hover,
.btn-fab-mini:hover,
.btn-fab-large:hover,
.btn-fab-extended:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Speed Dial Component */
.fab-speed-dial {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    /* Stack upwards */
    align-items: center;
    gap: 12px;
}

.speed-dial-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
}

.fab-speed-dial.open .speed-dial-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.speed-dial-label {
    position: absolute;
    right: 100%;
    margin-right: 0.75rem;
    background: var(--surface-container-highest);
    color: var(--on-surface);
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    /* 12px */
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.speed-dial-actions button:hover .speed-dial-label {
    opacity: 1;
    transform: translateX(0);
}

/* Main button rotation when open */
.fab-speed-dial.open .btn-fab i,
.fab-speed-dial.open .btn-fab svg {
    transform: rotate(45deg);
    transition: transform 0.3s var(--transition-emphasized);
}

.btn-ghost {
    background: transparent !important;
    border: none !important;
    color: var(--on-surface-variant);
}

.btn-ghost:hover {
    background: var(--surface-container-highest) !important;
    color: var(--on-surface);
}

.spin {
    animation: spin 1s linear infinite;
}

/* --- Advanced Button Styles --- */

/* Loading State */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
    z-index: 2;
}

.btn-outline.btn-loading::after {
    border-color: rgba(0, 97, 164, 0.2);
    border-top-color: var(--primary);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Material 3 Tonal */
.btn-tonal {
    background: var(--primary-container);
    color: var(--on-primary-container);
    border: none;
}

.btn-tonal:hover {
    background: color-mix(in srgb, var(--primary-container) 90%, black);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Glass Variant */
.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--on-surface);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Glowing Button */
.btn-glow {
    box-shadow: 0 0 15px color-mix(in srgb, var(--primary) 40%, transparent);
}

.btn-glow:hover {
    box-shadow: 0 0 25px color-mix(in srgb, var(--primary) 60%, transparent);
}

/* Premium Gradient */
.btn-premium {
    background: linear-gradient(135deg, var(--primary) 0%, #9c41ff 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Segmented Buttons */
.segmented-buttons {
    display: inline-flex;
    background: var(--surface-container-high);
    padding: 4px;
    border-radius: var(--radius-full);
    position: relative;
    isolation: isolate;
}

.segmented-buttons button {
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.segmented-buttons button.active {
    color: var(--on-primary);
}

.segmented-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background: var(--primary);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.card {
    background: var(--surface-container-low);
    border-radius: var(--radius-l);
    border: 1px solid var(--surface-variant);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: var(--transition-standard);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

/* Glow Effect */
.card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, var(--primary) 0%, transparent 70%);
    opacity: calc(var(--glow-opacity) * 0.05);
    pointer-events: none;
    z-index: 0;
}

.card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* Universal Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--primary-container);
    color: var(--on-primary-container);
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.card-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--on-primary-container);
    margin: 0;
}

.card-subtitle {
    font-size: 0.75rem;
    /* 12px */
    color: color-mix(in srgb, var(--on-primary-container) 70%, transparent);
    font-weight: 400;
}

/* Card Search Utility */
.card-search {
    position: relative;
    width: 100%;
    max-width: 17.5rem;
    /* 280px */
}

.card-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--on-surface-variant);
    pointer-events: none;
}

.card-search input {
    width: 100%;
    height: 2.5rem;
    background: var(--surface-container-highest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-m);
    padding: 0 0.75rem 0 2.25rem;
    font-size: 0.8125rem;
    /* 13px */
    color: var(--on-surface);
    transition: var(--transition-standard);
}

.card-search input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Card Content Area */
.card-body {
    padding: 1rem;
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Universal Card Padding Safety - For content not wrapped in card-body */
.card>div:not(.card-header):not(.card-body):not(.card-footer):not(.nav-sub) {
    padding: 0 1rem 1rem 1rem;
}

.card>div:not(.card-header):not(.card-body):not(.card-footer):first-child {
    padding-top: 1rem;
}

/* Flex Layout Utilities */
.flex-wrap-gap {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.flex-col-12 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flex-align-center {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flex-justify-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Card Footer */
.card-footer {
    padding: 16px 24px;
    background: var(--surface-container-low);
    border-top: 1px solid var(--surface-variant);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Action Groups */
.card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-table-search {
    width: 15rem;
    /* 240px */
    height: 2.5rem;
    /* 40px */
    background: var(--surface-container-highest);
}

@media (max-width: 768px) {
    .card-header {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        gap: 12px;
    }

    .card-header>div[style*="flex"] {
        flex-direction: column !important;

        width: 100%;
        gap: 8px !important;
    }

    .data-table-search {
        width: 100% !important;
    }

    .card-title {
        font-size: clamp(1rem, 3vw, 1.1rem);
        margin-bottom: 0.25rem;
    }
}


/* Responsive Overrides */
@media (max-width: 768px) {
    .mobile-only {
        display: flex !important;
    }

    body {
        overflow-y: auto;
        height: auto;
    }

    .app-container {
        flex-direction: column;
    }

    main {
        padding: 0;
    }

    .content-wrapper {
        padding: 16px;
        gap: 16px;
    }

    .card {
        padding: 16px;
    }

    .page-header-container {
        margin-bottom: 4px;
    }

    .breadcrumb {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .page-title-group .headline-medium {
        font-size: 1.5rem;
    }
}

/* Theme Palette 6-Slots */
.theme-palette.palette-6-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0;
}

.color-slot-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
}

.color-dot {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 3px solid var(--surface);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.color-dot:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.color-dot.active {
    border-color: var(--on-surface);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
    transform: scale(0.9);
}

.setting-hint {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin-top: 8px;
    opacity: 0.8;
}

/* Compact Mode - Deep Black & Gray Aesthetic (No Theme Influence) */
body.compact-mode {
    --primary: #444444;
    --on-primary: #ffffff;
    --primary-container: #222222;
    --on-primary-container: #888888;

    --surface: #000000;
    --on-surface: #888888;
    --surface-variant: #111111;
    --on-surface-variant: #666666;
    --outline: #222222;

    --surface-container-low: #080808;
    --surface-container: #0a0a0a;
    --surface-container-high: #111111;
    --surface-container-highest: #1a1a1a;

    --secondary-container: #111111;
    --on-secondary-container: #888888;

    background: #000000 !important;
}

body.compact-mode .card,
body.compact-mode aside,
body.compact-mode header,
body.compact-mode .card-header,
body.compact-mode .select-dropdown,
body.compact-mode .topbar-actions,
body.compact-mode .search-bar,
body.compact-mode .profile-dropdown,
body.compact-mode .profile-dropdown-menu,
body.compact-mode .palette-selector {
    background: #000000 !important;
    border: 1px solid #222 !important;
    box-shadow: none !important;
    color: #888888 !important;
}

body.compact-mode .nav-item.active {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
}

body.compact-mode .nav-item:not(.active) {
    color: #666666 !important;
}

body.compact-mode h1,
body.compact-mode h2,
body.compact-mode h3,
body.compact-mode h4,
body.compact-mode p,
body.compact-mode span:not(.badge),
body.compact-mode label,
body.compact-mode .clock-time,
body.compact-mode .clock-date,
body.compact-mode i,
body.compact-mode svg {
    color: #888888 !important;
}

body.compact-mode .btn-primary {
    background: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
}

body.compact-mode input,
body.compact-mode select,
body.compact-mode textarea {
    background: #000000 !important;
    color: #888888 !important;
    border-color: #222 !important;
}

/* Base Compact Mode Padding Reduction */
body.compact-mode main {
    padding: 12px 16px !important;
}

/* Floating Input Style (MD3) */
.field-floating {
    position: relative;
    margin-bottom: 2rem;
}

.field-floating input,
.field-floating select,
.field-floating textarea {
    width: 100%;
    height: var(--field-height);
    padding: 1.5rem 1.25rem 0.5rem;
    border: 2px solid var(--outline-variant);
    border-radius: var(--field-radius);
    background: var(--surface);
    color: var(--on-surface);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    outline: none;
    transition: var(--transition-standard);
    appearance: none;
}

.field-floating select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
}

.field-floating textarea {
    height: auto;
    min-height: 120px;
    padding-top: 2rem;
}

.field-floating label {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    font-size: 1rem;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--surface);
    padding: 0 6px;
    margin: 0 4px;
    z-index: 1;
}

.field-floating input:focus,
.field-floating select:focus,
.field-floating textarea:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 12%, transparent);
}

.field-floating input:focus+label,
.field-floating input:not(:placeholder-shown)+label,
.field-floating select:focus+label,
.field-floating select:not([value=""])+label,
.field-floating textarea:focus+label,
.field-floating textarea:not(:placeholder-shown)+label,
.field-floating input[type="date"]+label,
.field-floating input[type="time"]+label,
.field-floating select:valid+label {
    top: 0;
    left: 1rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary);
    background: var(--surface);
    transform: translateY(-50%);
    z-index: 10;
}

/* Compact Floating Field (for search boxes) */
.field-floating.compact input {
    height: 40px !important;
    padding: 0.75rem 1rem 0.25rem 3rem !important;
    /* Increased left padding (48px) */
    font-size: 13px !important;
}

.field-floating.compact label {
    left: 3rem !important;
    /* Matches input padding (48px) */
    font-size: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.field-floating.compact input:focus+label,
.field-floating.compact input:not(:placeholder-shown)+label {
    top: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    transform: translateY(-50%) !important;
}

.field-floating.compact i,
.field-floating.compact svg {
    position: absolute !important;
    left: 18px !important;
    /* Increased gap from left edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    /* Slightly smaller/sharper icon */
    height: 16px !important;
    opacity: 0.5 !important;
    pointer-events: none;
}

body.compact-mode .card {
    padding: 16px !important;
    gap: 12px !important;
}

body.compact-mode .nav-item {
    padding: 8px 12px !important;
    margin: 2px 8px !important;
}

/* Utility Classes for Doctor + UI (Restored) */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    color: var(--on-surface-variant);
    transition: var(--transition-standard);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
}

.btn-icon:hover {
    background-color: var(--surface-variant);
    color: var(--on-surface);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    /* 12px */
    font-weight: 500;
    line-height: 1.2;
}

/* Typography Utilities */
.display-small {
    font-family: 'Google Sans', sans-serif;
    font-size: clamp(2rem, 8vw, 2.25rem);
    /* Fluid Heading */
    line-height: 1.2;
    font-weight: 400;
}

.title-large {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.375rem;
    /* 22px */
    line-height: 1.75rem;
    font-weight: 400;
}

.label-large {
    font-family: 'Lexend', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.body-large {
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    /* 16px */
    line-height: 1.5rem;
    font-weight: 400;
}

.body-medium {
    font-family: 'Lexend', sans-serif;
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.25rem;
    font-weight: 400;
}

.body-small {
    font-family: 'Lexend', sans-serif;
    font-size: 0.75rem;
    /* 12px */
    line-height: 1rem;
    font-weight: 400;
}

/* Responsive Page Header */
.page-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 768px) {
    .page-header-flex {
        flex-direction: column;
        align-items: flex-start;
        /* Title on top-left */
    }

    .page-header-flex .btn {
        width: 100%;
        /* Full width button on mobile */
        margin-top: 8px;
    }
}

/* --- Data Table System --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-m);
    border: 1px solid var(--surface-variant);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
    background: var(--surface);
}

.data-table th {
    padding: 1rem;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    /* 13px */
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    /* 0.5px */
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.data-table td {
    padding: 1rem;
    color: var(--on-surface);
    border-bottom: 1px solid var(--surface-variant);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr.hover-lift-row:hover {
    background: var(--surface-container-highest);
    transition: background 0.2s ease;
}

/* --- Flat Table Layout --- */
.table-container-flat {
    background: transparent;
    border-radius: var(--radius-m);
    overflow: hidden;
}

.table-header-flat {
    margin-bottom: 12px;
}

.table-title-flat {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--on-surface);
    margin: 0;
}

.table-subtitle-flat {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    margin: 4px 0 0 0;
}

.main-table-flat {
    margin-top: 16px;
}

/* --- Universal List System --- */
.universal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface-container-low);
    border-radius: var(--radius-m);
    transition: var(--transition-standard);
    border: 1px solid transparent;
}

.list-item:hover {
    background: var(--surface-container-high);
    border-color: var(--surface-variant);
    transform: translateX(4px);
}

.list-item-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-s);
    background: var(--primary-container);
    color: var(--on-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-item-content {
    flex: 1;
}

.list-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface);
    margin: 0;
}

.list-item-subtitle {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin: 0;
}

/* Feature List (bullet style) */
.feature-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--on-surface-variant);
    line-height: 1.5;
}

.feature-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--outline);
    color: var(--primary);
}


.btn-outline:hover {
    background: var(--surface-container-highest);
    border-color: var(--primary);
}

/* Responsive Main Body Spacing */
.main-body {
    padding: 24px;
}

@media (max-width: 768px) {
    .main-body {
        padding: 16px;
        /* Reduced padding on mobile */
    }
}

aside {
    width: 16rem;
    /* 256px */
    background: var(--surface-container-low);
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    transition: var(--transition-emphasized);
    border-right: 1px solid var(--surface-variant);
    position: relative;
    z-index: 100;
}

/* Glass Sidebar & Header */
.aside-nav {
    display: flex;
    flex-direction: column;
    width: 17.5rem;
    /* 280px */
    background: color-mix(in srgb, var(--surface-container-low) calc(var(--glass-opacity) * 100%), transparent);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-right: 1px solid var(--surface-variant);
    transition: var(--transition-emphasized);
    position: relative;
    z-index: 100;
}

header.top-header {
    height: 4rem;
    /* 64px */
    background: color-mix(in srgb, var(--surface) calc(var(--glass-opacity) * 100%), transparent);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--surface-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 90;
}

[data-theme="dark"] aside {
    background: var(--surface-container-low);
    border-color: var(--surface-variant);
}

aside.shrunk {
    width: 80px;
    overflow: hidden;
    /* Clip internal "pre-expansion" layout jumps */
}

aside.shrunk:hover {
    width: 256px;
    z-index: 1200;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.15);
}

.sidebar-header {
    height: 100px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    overflow: hidden;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centered */
    gap: 0;
    min-width: 0;
    width: 100%;
}

.logo-icon {
    width: 120px;
    /* Reduced from 240px */
    height: 64px;
    /* Reduced from 96px */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logo-text {
    display: none;
}

aside.shrunk .logo-icon {
    width: 48px;
    height: 48px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

aside.shrunk:hover .logo-icon {
    width: 120px;
}

aside.shrunk .logo-text {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

aside.shrunk:hover .logo-text {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

/* Custom Themed Scrollbar for Sidebar Nav */
nav::-webkit-scrollbar {
    width: 5px;
}

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

nav::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
    opacity: 0.5;
}

nav::-webkit-scrollbar-thumb:hover {
    background: var(--primary-seed);
}

aside.shrunk nav {
    overflow-x: hidden;
    padding-right: 0;
}

aside.shrunk:hover nav {
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 3.5rem;
    /* 56px */
    text-decoration: none;
    color: var(--on-surface-variant);
    border-radius: var(--radius-full);
    position: relative;
    transition: var(--transition-emphasized);
    cursor: pointer;
    overflow: visible;
    flex-shrink: 0;
}

/* Standalone items match group spacing */
nav>.nav-item {
    margin-bottom: 4px;
}

aside.shrunk .nav-item {
    justify-content: flex-start;
    overflow: visible;
}

.nav-item:hover {
    background: var(--surface-container-high);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-item.active {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

[data-theme="dark"] .nav-item.active {
    background: var(--primary);
    color: var(--on-primary);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.nav-icon {
    width: 2.25rem;
    /* 36px */
    height: 2.25rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0.625rem;
    transition: var(--transition-standard);
    background: var(--surface-container-high);
    color: var(--on-surface-variant);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
}

.nav-item.active .nav-icon {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.nav-item:hover .nav-icon {
    background: var(--primary-container);
    color: var(--primary);
    transform: scale(1.05);
}

.nav-icon svg,
.nav-icon i[class^="ph-"],
.nav-icon i[class*=" ph-"] {
    width: 1.25rem;
    /* 20px */
    height: 1.25rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    stroke-width: 2;
    transition: var(--transition-standard);
}

.nav-item:hover .nav-icon svg * {
    animation: drawIcon 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes drawIcon {
    0% {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dasharray: 100;
        stroke-dashoffset: 0;
    }
}

.nav-label {
    font-weight: 500;
    font-size: 0.90625rem;
    /* 14.5px */
    white-space: nowrap;
    opacity: 1;
    transition: var(--transition-standard);
    margin-left: 0.5rem;
    /* Reduced from 12px to be closer to icon */
}

aside.shrunk .nav-label {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    /* Prevent text from wrapping during width transition */
}

aside.shrunk:hover .nav-label {
    opacity: 1;
    pointer-events: auto;
}

aside.shrunk .nav-group {
    overflow: hidden;
}

aside.shrunk:hover .nav-group {
    overflow: visible;
}

aside.shrunk .sub-item {
    height: 2.5rem;
    /* 40px */
    margin: 0.125rem 0.5rem;
    padding: 0 1rem 0 1.5rem;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-top: 1px solid var(--surface-variant);
    margin-top: auto;
    background: var(--surface-container-low);
    border-radius: var(--radius-m);
}

.footer-btn {
    flex: 1;
    height: 3rem;
    /* 48px */
    border: none;
    background: transparent;
    border-radius: var(--radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: var(--transition-standard);
    padding: 0 0.75rem;
    white-space: nowrap;
    overflow: hidden;
}

.footer-btn:hover {
    background: var(--surface-container-high);
}

.footer-btn.logout-btn {
    color: var(--error);
}

.footer-btn.logout-btn:hover {
    background: color-mix(in srgb, var(--error) 10%, transparent);
}

.footer-btn i {
    width: 1.25rem;
    height: 1.25rem;
}

.footer-btn .toggle-icon {
    transition: var(--transition-emphasized);
}

aside.shrunk .sidebar-footer {
    flex-direction: column;
    padding: 8px 4px;
    gap: 4px;
}

aside.shrunk .footer-btn {
    width: 3rem;
    /* 48px */
    padding: 0;
    flex: none;
}

aside.shrunk .footer-btn .nav-label {
    display: none;
}

aside.shrunk .toggle-icon {
    transform: rotate(180deg);
}

aside.shrunk:hover .toggle-icon {
    transform: rotate(0deg);
}

[data-theme="dark"] aside {
    background: var(--surface-container-low);
    /* Even darker for professional depth */
    border-color: var(--surface-variant);
}

/* Mobile Sidebar Styling */
@media (max-width: 768px) {
    aside {
        position: fixed;
        left: -17.5rem;
        /* -280px */
        top: 0;
        bottom: 0;
        width: 17.5rem;
        height: 100vh;
        z-index: 2001;
        background: var(--surface);
        transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1);
        border-right: none;
        padding-bottom: 1.5rem;
    }

    [data-theme="dark"] aside {
        background: var(--surface-container-low);
    }

    aside.mobile-open {
        transform: translateX(17.5rem);
        box-shadow: 0.75rem 0 2rem rgba(0, 0, 0, 0.2);
    }

    aside .sidebar-footer {
        display: none;
        /* Hide desktop toggle on mobile */
    }
}

/* --- Consolidated Sidebar Navigation --- */
.nav-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

.nav-sub {
    display: none;
    /* Forced hidden by default */
    flex-direction: column;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    margin: 4px 12px;
    border-radius: var(--radius-m);
}

.nav-group.open .nav-sub {
    display: flex;
    margin: 8px;
    animation: slideDownFade 0.3s ease forwards;
}

.nav-group .nav-item {
    cursor: pointer;
    justify-content: space-between !important;
    padding-right: 28px;
    /* Moves arrow further left */
}

.nav-item .group-arrow {
    transition: transform 0.3s ease;
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.nav-group.open .group-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}

.nav-divider-label {
    font-size: 0.65rem;
    /* Small text */
    font-weight: 800;
    /* Bold text */
    text-transform: uppercase;
    color: var(--on-surface-variant);
    padding: 1.5rem 1rem 0.5rem 1.25rem;
    opacity: 0.6;
    letter-spacing: 0.05rem;
}


.sub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 16px;
    text-decoration: none;
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    transition: var(--transition-standard);
}

.sub-item:hover {
    background: var(--surface-container-highest);
    color: var(--on-surface);
}

.sub-item.active {
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 500;
}

/* Shrunk Sidebar Support */
aside.shrunk .nav-sub {
    display: none !important;
}

/* User Meta in Topbar */
.user-meta-topbar {
    display: flex;
    flex-direction: column;
    margin: 0;
    /* Removed margin-right to fix alignment */
    line-height: 1.2;
}

.user-meta-topbar .user-name {
    font-weight: 600;
    font-size: 0.875rem;
    /* 14px */
    color: var(--on-surface);
}

.user-meta-topbar .user-role {
    font-size: 0.75rem;
    /* 12px */
    color: var(--on-surface-variant);
    font-weight: 400;
}

/* Sidebar Overlay Scrim */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-emphasized);
}

header {
    height: 4rem;
    /* 64px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: var(--surface-container-low);
    border-radius: 2.1875rem;
    /* 35px */
    position: sticky;
    top: 0.75rem;
    margin: 0.75rem 1.5rem 1.5rem 1.5rem;
    z-index: 1000;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.08);
    border: 1px solid var(--surface-variant);
    transition: var(--transition-emphasized);
}

[data-theme="dark"] header {
    background: var(--surface-container-low);
    border-color: var(--surface-variant);
}

.search-bar {
    display: none;
}

.search-bar:focus-within {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.search-bar input {
    background: transparent;
    border: none;
    outline: none;
    flex: 1;
    color: var(--on-surface);
    font-family: inherit;
    font-size: 14px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--on-primary-container);
    cursor: pointer;
    transition: var(--transition-standard);
}

.icon-btn:hover {
    background: var(--surface-container-high);
}

.profile-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 1rem 0.25rem 0.5rem;
    background: var(--primary-container);
    border-radius: var(--radius-full);
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
    transition: var(--transition-standard);
    color: var(--on-primary-container);
}

.profile-dropdown:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--primary-container));
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}


.profile-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8125rem;
    /* 13px */
    overflow: hidden;
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    background: var(--surface-container-highest);
    min-width: 14rem;
    border-radius: var(--radius-l);
    padding: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    display: none;
    /* Initially hidden */
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--surface-variant);
    transform-origin: top right;
    backdrop-filter: blur(20px);
    z-index: 1100;
}

.profile-dropdown-menu.active {
    display: flex !important;
    animation: slideUpFade 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
}

/* Removed hover-based display trigger to use JS active class exclusively */

/* Palette Selector */
.palette-selector {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: var(--surface-container-highest);
    padding: 0;
    border-radius: var(--radius-l);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    display: none;
    border: 1px solid var(--surface-variant);
    z-index: 1100;
    overflow: hidden;
    transform-origin: top right;
    backdrop-filter: blur(20px);
}

.palette-selector.open {
    display: block;
    animation: slideUpFade 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

#toggleSidebar {
    display: flex;
}

#menuToggle {
    display: none;
}

@media (max-width: 768px) {
    #toggleSidebar {
        display: none;
    }

    #menuToggle {
        display: flex;
    }
}

.palette-selector.open {
    display: grid !important;
    animation: slideUpFade 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.color-option {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition-standard);
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.active {
    border-color: var(--on-surface);
}

.dropdown-item {
    padding: 0.3125rem;
    border-radius: var(--radius-s);
    color: var(--on-surface-variant);
    font-size: 0.8125rem;
    /* 13px */
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
    overflow: hidden;
}

.dropdown-item i {
    transition: transform 0.3s var(--transition-emphasized);
}

.dropdown-item:hover {
    background: var(--primary-container);
    color: var(--on-primary-container);
    transform: translateX(4px);
}

.dropdown-item:hover i {
    transform: scale(1.1) rotate(-5deg);
}

.close-search {
    display: none;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    header {
        padding: 0 0.5rem;
        height: 3.5rem;
        margin: 0.5rem 0.75rem 1rem 0.75rem;
        top: 0.5rem;
        border-radius: 1rem;
    }

    header .search-bar {
        display: none;
    }

    header .search-bar:focus-within {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: var(--surface);
        padding: 0 16px;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header .search-bar input {
        background: transparent;
        border: none;
        outline: none;
        flex: 1;
        color: var(--on-surface);
        font-family: inherit;
        font-size: 14px;
    }

    header .search-bar:focus-within input {
        flex: 1;
        opacity: 1;
        display: block;
        padding: 0 12px;
        background: transparent;
        border: none;
    }

    .close-search {
        display: none;
        background: transparent;
        border: none;
        color: var(--on-surface-variant);
        cursor: pointer;
        padding: 8px;
        z-index: 110;
        position: relative;
        pointer-events: auto;
    }

    header .search-bar:focus-within .close-search {
        display: flex;
    }

    .topbar-actions {
        gap: 4px;
    }

    .profile-dropdown {
        padding-left: 4px;
    }

    .profile-avatar {
        width: 40px;
        height: 40px;
    }

    .profile-dropdown i {
        display: none;
    }
}

/* Final Mobile Overrides */
@media (max-width: 768px) {
    .profile-dropdown {
        padding: 0.25rem !important;
        gap: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .profile-avatar {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .profile-dropdown i,
    .user-meta-topbar,
    #paletteToggle {
        display: none !important;
    }
}





/* Role Panel Label Styles */
.panel-label-top {
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.panel-badge {
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/*
 * High-Fidelity Healthcare App UI (Isolated)
 * Matched to provided medical design inspiration.
 */

@media only screen and (max-width: 768px) {
    :root {
        --app-bg: #f8fafc;
        --app-surface: #ffffff;
        --app-primary: #0f766e;
        /* Teal medical color */
        --app-primary-soft: #f0fdfa;
        --app-text: #1e293b;
        --app-text-soft: #64748b;
        --app-radius: 2rem;
        /* 32px */
        --app-bar-height: 4.5rem;
        /* 72px */
        --app-nav-height: 5rem;
        /* 80px */
        --app-shadow-soft: 0 0.5rem 1.875rem rgba(0, 0, 0, 0.04);
        --app-transition: cubic-bezier(0.2, 0, 0, 1);
    }

    /* Fixed App Shell */
    body {
        overflow: hidden !important;
        position: fixed;
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        background: var(--app-bg) !important;
        font-family: 'Google Sans', sans-serif !important;
    }

    .app-container {
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--app-bg) !important;
    }

    .main-content-scroll {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 1.25rem !important;
        padding-top: calc(var(--app-bar-height) + 0.75rem) !important;
        padding-bottom: calc(var(--app-nav-height) + 1.5rem) !important;
        background: var(--app-bg) !important;
        -webkit-overflow-scrolling: touch;
    }

    /* High-Fidelity Header (Matched to Image) */
    .top-app-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: var(--app-bar-height) !important;
        background: var(--app-bg) !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 2000 !important;
        padding: 0 1.25rem !important;
        display: flex !important;
        align-items: center !important;
    }

    .healthcare-header-mobile {
        width: 100%;
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    .header-user-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .user-avatar-mobile {
        width: 2.75rem;
        /* 44px */
        height: 2.75rem;
        border-radius: 0.875rem;
        /* 14px */
        background: var(--app-primary-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .user-avatar-mobile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .user-greeting-mobile {
        display: flex;
        flex-direction: column;
    }

    .greeting-sub {
        font-size: 0.6875rem;
        /* 11px */
        color: var(--app-text-soft);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.03125rem;
        /* 0.5px */
    }

    .greeting-name {
        font-size: 1rem;
        /* 16px */
        font-weight: 700;
        color: var(--app-text);
    }

    .header-actions-mobile {
        display: flex;
        gap: 12px;
    }

    .icon-btn-m {
        width: 2.75rem;
        /* 44px */
        height: 2.75rem;
        border-radius: var(--radius-full);
        background: var(--app-surface);
        border: 1px solid rgba(0, 0, 0, 0.03);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--app-text);
        box-shadow: var(--app-shadow-soft);
    }

    .icon-btn-m i {
        width: 1.375rem;
        /* 22px */
        height: 1.375rem;
    }

    /* High-Fidelity Cards */
    .card {
        background: var(--app-surface) !important;
        border-radius: var(--app-radius) !important;
        border: none !important;
        box-shadow: var(--app-shadow-soft) !important;
        padding: 1.5rem !important;
        margin-bottom: 1.25rem !important;
    }

    /* Hero/Banner Card (Matched to Image) */
    .dashboard-hero {
        background: var(--app-primary) !important;
        color: #ffffff !important;
        position: relative;
        overflow: hidden;
        min-height: 10rem;
        display: none;
        /* Desktop hide */
        padding: 1.5rem !important;
        background-image: linear-gradient(135deg, var(--app-primary) 0%, #0d9488 100%) !important;
    }

    .dashboard-hero h2 {
        font-size: clamp(1.125rem, 4vw, 1.25rem);
        /* Responsive Mobile Title */
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 1rem;
        color: white !important;
    }

    .hero-search-pill {
        background: rgba(255, 255, 255, 0.2);
        padding: 0.375rem 1rem;
        border-radius: var(--radius-full);
        font-size: 0.75rem;
        /* 12px */
        backdrop-filter: blur(10px);
        width: fit-content;
    }

    /* Category Grid (Matched to Image) */
    .category-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
        margin: 12px 0 24px 0 !important;
    }

    .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .category-icon {
        width: 3.25rem;
        /* 52px */
        height: 3.25rem;
        border-radius: 1.125rem;
        /* 18px */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--app-shadow-soft);
    }

    .category-label {
        font-size: 0.6875rem;
        /* 11px */
        font-weight: 600;
        color: var(--app-text-soft);
    }

    .card-v3 {
        border-radius: var(--app-radius) !important;
    }

    /* Bottom Navigation (Image Matched) */
    .bottom-nav {
        height: var(--app-nav-height) !important;
        background: var(--app-surface) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.02) !important;
        padding-bottom: env(safe-area-inset-bottom, 12px) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.03) !important;
    }

    .nav-pill {
        width: 2.75rem !important;
        /* 44px */
        height: 2.75rem !important;
        border-radius: var(--radius-full) !important;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s var(--app-transition);
    }

    .bottom-nav-item.active {
        color: var(--app-primary) !important;
    }

    .bottom-nav-item span {
        font-size: 0.625rem !important;
        /* 10px */
        font-weight: 600 !important;
        margin-top: 0.25rem;
        color: var(--app-text-soft);
    }

    .bottom-nav-item.active span {
        color: var(--app-primary) !important;
    }

    /* Floating Action Button (Calendar in Image) */
    .mobile-fab-container {
        bottom: 36px !important;
    }

    .mobile-fab {
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity 0.4s ease;
    }

    .native-splash-screen.fade-out {
        opacity: 0;
        pointer-events: none;
    }

    .splash-logo {
        width: 5rem;
        /* 80px */
        height: 5rem;
        background: var(--primary);
        border-radius: 1.25rem;
        /* 20px */
        margin-bottom: 1.5rem;
        animation: scaleIn 0.8s var(--m3-transition);
    }

    @keyframes scaleIn {
        from {
            transform: scale(0.8);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }


    .splash-spinner {
        width: 2rem;
        /* 32px */
        height: 2rem;
        border: 0.1875rem solid var(--m3-surface-container-high);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: rotate 1s linear infinite;
    }

    @keyframes rotate {
        to {
            transform: rotate(360deg);
        }
    }

    /* System Utils */
    .mobile-only {
        display: flex !important;
    }

    /* Pastel Category Colors (Matched to Image Icons) */
    .icon-nephro {
        background: #fee2e2;
        color: #ef4444;
    }

    .icon-anesth {
        background: #e0f2fe;
        color: #0ea5e9;
    }

    .icon-ortho {
        background: #fef3c7;
        color: #f59e0b;
    }

    .icon-ophthal {
        background: #ecfdf5;
        color: #10b981;
    }

    .icon-pedia {
        background: #fae8ff;
        color: #d946ef;
    }

    .icon-onco {
        background: #fef2f2;
        color: #f87171;
    }

    .icon-derm {
        background: #fff7ed;
        color: #f97316;
    }

    /* Fix stats cards to be side-by-side on mobile where appropriate */
    .stats-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 4px !important;
    }

    .stat-card {
        border-radius: var(--app-radius) !important;
        border: none !important;
        background: var(--app-surface) !important;
        box-shadow: var(--app-shadow-soft) !important;
        padding: 16px !important;
    }

    /* System Utils */
    .mobile-only {
        display: flex !important;
    }

    .hide-mobile {
        display: none !important;
    }
}

/* assets/css/forms.css */

.field-floating {
    position: relative !important;
    margin-bottom: 1.5rem;
    display: flex;

}

.field-floating input,
.field-floating select,
.field-floating textarea {
    width: 100%;
    height: 2.8125rem;
    /* 45px */
    padding: 0.625rem 0.75rem 0.25rem;
    border: 2px solid color-mix(in srgb, var(--primary) 15%, transparent);
    border-radius: var(--radius-full);
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-family: inherit;
    font-size: 0.875rem;
    /* 14px */
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    accent-color: var(--primary);
}

.field-floating textarea {
    height: auto;
    min-height: 6.25rem;
    /* 100px */
    padding: 1rem;
    padding-top: 1.25rem;
    resize: vertical;
    border-radius: var(--radius-l);
}

.field-floating label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    /* 14px */
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 0.25rem;
    z-index: 10;
}

.field-floating input:focus,
.field-floating select:focus {
    border-color: var(--primary);
    border-width: 2px;
    background: var(--surface);
    color: var(--on-surface);
}

.field-floating input:hover,
.field-floating select:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--primary-container));
}

.field-floating input:focus+label,
.field-floating input:not(:placeholder-shown)+label,
.field-floating select:focus+label,
.field-floating select:not([value=""])+label,
.field-floating textarea:focus+label,
.field-floating textarea:not(:placeholder-shown)+label,
.field-floating input[type="date"]+label,
.field-floating input[type="time"]+label {
    top: 0 !important;
    left: 0.75rem !important;
    font-size: 0.6875rem !important;
    /* 11px */
    font-weight: 700 !important;
    color: var(--primary) !important;
    /* Match the card body background exactly */
    background: var(--surface-container-low) !important;
    border-radius: 4px;
    transform: translateY(-50%) !important;
    padding: 0 0.375rem !important;
}

.field-floating input:focus+label,
.field-floating select:focus+label,
.field-floating textarea:focus+label {
    background: var(--surface-container-low) !important;
    border-radius: 4px;
    color: var(--primary);
}


/* Custom Arrow for Native Select (Robust Method) */
.field-floating select {
    appearance: none !important;
    cursor: pointer;
    padding-right: 2.75rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.25rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--on-primary-container);
}

[data-theme="dark"] .field-floating select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

.field-floating select:focus {
    background-position: right 1rem center, center !important;
    /* Forces re-render if needed */
    transform: scale(1.01);
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

/* Ensure the label is perfectly positioned and themed */
.field-floating select:focus+label,
.field-floating select:not([value=""])+label {
    background: var(--surface) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    top: 0 !important;
    left: 0.75rem !important;
    transform: translateY(-50%) !important;
    font-size: 0.6875rem !important;
}

/* No lift animation on focus */
.field-floating:focus-within {
    transform: none;
}

/* Specific fix for date/time which always has a value/placeholder in some browsers */
.field-floating input[type="date"],
.field-floating input[type="time"] {
    color-scheme: light;
}

.field-floating input[type="date"]:focus,
.field-floating input[type="time"]:focus {
    color: var(--primary);
    font-weight: 500;
}

[data-theme="dark"] .field-floating input[type="date"],
[data-theme="dark"] .field-floating input[type="time"] {
    color-scheme: dark;
}

.field-floating input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: grayscale(1) invert(0.5) sepia(1) saturate(5);
    /* Base for theming */
    opacity: 0.5;
    padding: 6px;
    margin-right: -4px;
    border-radius: 50%;
    transition: var(--transition-standard);
}

.field-floating input:focus::-webkit-calendar-picker-indicator {
    background-color: var(--primary-container);
    opacity: 1;
}

[data-theme="dark"] .field-floating input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8) sepia(100%) saturate(10000%) hue-rotate(180deg);
}

.field-floating input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: var(--radius-s);
    padding: 4px;
    transition: var(--transition-standard);
    accent-color: var(--primary);
}

.field-floating input::-webkit-calendar-picker-indicator:hover {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Custom Date/Time Picker (Flatpickr) Theming */
.flatpickr-calendar {
    background: var(--primary-container) !important;
    border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2) !important;
    border-radius: var(--radius-l) !important;
    padding: 8px !important;
    color: var(--on-primary-container) !important;
    width: 315px !important;
    /* Fixed width to ensure all days fit */
}

.flatpickr-months {
    background: var(--primary-container) !important;
}

.flatpickr-month {
    color: var(--on-primary-container) !important;
    fill: var(--on-primary-container) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--on-primary-container) !important;
    font-weight: 600 !important;
}

.flatpickr-weekday {
    color: color-mix(in srgb, var(--on-primary-container) 70%, transparent) !important;
    font-weight: 600 !important;
}

.flatpickr-day {
    color: var(--on-primary-container) !important;
    border-radius: var(--radius-m) !important;
    transition: var(--transition-standard) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.focus,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange.focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange.focus,
.flatpickr-day.endRange:hover,
.flatpickr-day.endRange:focus {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--surface-variant) !important;
}

.flatpickr-day.today {
    border-color: var(--primary) !important;
}

.flatpickr-day.today:hover {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
}

.flatpickr-day:hover {
    background: color-mix(in srgb, var(--primary) 15%, var(--primary-container)) !important;
    color: var(--primary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--primary) !important;
}

.flatpickr-time {
    border-top: 1px solid color-mix(in srgb, var(--primary) 15%, transparent) !important;
}

.flatpickr-time input:focus {
    background: color-mix(in srgb, var(--primary) 10%, var(--primary-container)) !important;
}

/* Flatpickr Dark Mode Overrides */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--primary-container) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4) !important;
    border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

/* Inline Picker Polish */
.inline-picker-container .flatpickr-calendar {
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    border: none !important;
}

.inline-picker-container .flatpickr-months {
    background: transparent !important;
}

[data-theme="dark"] .flatpickr-day {
    color: var(--on-surface) !important;
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--outline) !important;
}

[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] span.flatpickr-weekday,
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--on-surface) !important;
    fill: var(--on-surface) !important;
}

[data-theme="dark"] .flatpickr-calendar.arrowTop:before,
[data-theme="dark"] .flatpickr-calendar.arrowTop:after {
    border-bottom-color: var(--surface-container-high) !important;
}

[data-theme="dark"] .flatpickr-calendar.arrowBottom:before,
[data-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--surface-container-high) !important;
}

[data-theme="dark"] .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--on-surface) !important;
}

[data-theme="dark"] .numInputWrapper span.arrowDown:after {
    border-top-color: var(--on-surface) !important;
}

[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--on-surface) !important;
}

[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
    color: var(--surface-variant) !important;
}

/* Typing Polish Animation */
.field-floating input,
.field-floating textarea {
    letter-spacing: 0.2px;
}

.field-floating input::placeholder {
    transition: opacity 0.3s var(--transition-standard);
}

.field-floating input:focus::placeholder {
    opacity: 0.5;
}

/* Switch Styling */
.switch {
    position: relative;
    display: inline-block;
    width: 3.25rem;
    /* 52px */
    height: 2rem;
    /* 32px */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--surface-container-highest);
    transition: .4s;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Inner box shadow */
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.5rem;
    /* 24px */
    width: 1.5rem;
    left: 0.25rem;
    bottom: 0.25rem;
    background-color: var(--on-surface-variant);
    transition: .4s;
    border-radius: var(--radius-full);
}

input:checked+.slider {
    background-color: var(--primary);
}

input:checked+.slider:before {
    transform: translateX(1.25rem);
    /* 20px */
    background-color: var(--on-primary);
}

/* Button Styling */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-standard);
    border: none;

    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--on-primary);
}

.btn-primary:hover {
    background-color: var(--primary-dark, var(--primary));
    box-shadow: var(--shadow-s);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--outline);
    color: var(--primary);
}

.btn-outline:hover {
    background-color: var(--primary-container);
}

.btn-secondary {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
}

.btn-tertiary {
    background-color: transparent;
    color: var(--primary);
}

.btn-tertiary:hover {
    background-color: var(--primary-container);
}

.btn-error {
    background-color: var(--error);
    color: var(--on-error);
}


/* --- CONSOLIDATED CUSTOM SELECTION SYSTEM --- */
.custom-select {
    position: relative;
    width: 100%;
    z-index: 10;
    transition: z-index 0s;
}

.custom-select.active {
    z-index: 10000 !important;
}

.select-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem 0.25rem;
    border: 2px solid var(--surface-variant);
    border-radius: var(--radius-m);
    background: var(--surface-container-low);
    cursor: pointer;
    min-height: 2.8125rem;
    /* 45px */
    align-items: center;
    transition: var(--transition-standard);
    position: relative;
}

.select-box:hover {
    border-color: var(--outline);
}

.custom-select.active .select-box {
    border-color: var(--primary);
    background: var(--surface);
}

/* Premium Select Variant - Matching profile-dropdown aesthetic */
.premium-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    isolation: isolate;
}

.premium-select-wrapper select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.25rem 3rem 0.25rem 3.5rem;
    /* Space for icon and chevron */
    background: var(--primary-container);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--on-primary-container);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-standard);
    z-index: 1;
    outline: none;
}

.premium-select-wrapper select:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--primary-container));
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.premium-select-wrapper select:focus {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent);
}

.premium-select-wrapper .select-icon {
    position: absolute;
    left: 0.5rem;
    z-index: 2;
    pointer-events: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8125rem;
    transition: var(--transition-standard);
}

.premium-select-wrapper:focus-within .select-icon {
    transform: scale(1.1);
}

.premium-select-wrapper .chevron-icon {
    position: absolute;
    right: 1rem;
    z-index: 2;
    pointer-events: none;
    color: var(--on-primary-container);
    transition: var(--transition-standard);
}

.premium-select-wrapper:focus-within .chevron-icon {
    transform: rotate(180deg);
}

/* Hidden label logic (not really needed if select has default value, but kept for structure) */
.premium-select-wrapper .select-label {
    display: none;
}


/* Pure CSS Custom Dropdown - Checkbox Hack */
.css-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 10;
    transition: z-index 0s;
}

.css-dropdown:has(.css-dropdown-state:checked) {
    z-index: 10001 !important;
}

.selection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
}

@media (max-width: 992px) {
    .selection-grid {
        grid-template-columns: 1fr;
    }
}

.card:has(.css-dropdown-state:checked),
.selection-col:has(.css-dropdown-state:checked),
.selection-grid:has(.css-dropdown-state:checked) {
    z-index: 100000 !important;
    position: relative;
}



.css-dropdown-state {
    display: none;
}

.css-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 1rem 0.25rem 0.5rem;
    background: var(--primary-container);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
    cursor: pointer;
    min-height: 48px;
    width: 100%;
    transition: var(--transition-standard);
    color: var(--on-primary-container);
    user-select: none;
}

.css-dropdown-trigger:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--primary-container));
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

.css-dropdown-trigger .trigger-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8125rem;
    transition: var(--transition-standard);
}

.css-dropdown-trigger .trigger-text {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
}

.css-dropdown-trigger .chevron-icon {
    transition: transform 0.3s var(--transition-standard);
}

/* Visibility Logic */
.css-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface-container-high);
    border-radius: var(--radius-l);
    padding: 0.5rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--primary);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 1000;
    transform-origin: top;
    animation: slideUpFade 0.3s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.css-dropdown-state:checked~.css-dropdown-menu {
    display: flex;
}

.css-dropdown-state:checked~.css-dropdown-trigger .chevron-icon {
    transform: rotate(180deg);
}

.css-dropdown-state:checked~.css-dropdown-trigger {
    background: var(--primary-container);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Options */
.css-dropdown-item {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-m);
    color: var(--on-primary-container);
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.css-dropdown-item:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--primary-container));
    color: var(--primary);
    padding-left: 1.25rem;
}

.css-dropdown-item i {
    width: 18px;
}

/* Searchable Dropdown - Search Header */
.css-dropdown-search {
    padding: 8px;
    position: sticky;
    top: -8px;
    /* Offset parent padding */
    background: var(--primary-container);
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
    margin: -8px -8px 8px -8px;
    border-top-left-radius: var(--radius-l);
    border-top-right-radius: var(--radius-l);
    z-index: 5;
}

.css-dropdown-search input {
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-m);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
    background: color-mix(in srgb, var(--primary) 5%, var(--primary-container));
    color: var(--on-primary-container);
    font-size: 0.8125rem;
    outline: none;
    transition: var(--transition-standard);
}

.css-dropdown-search input:focus {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Tag/Pill System for Multi-Select */
.css-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.css-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 4px;
    background: var(--primary-container);
    color: var(--on-primary-container);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
    animation: slideUpFade 0.2s ease-out;
}

.css-tag i {
    width: 14px;
    height: 14px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.css-tag i:hover {
    opacity: 1;
}

.css-dropdown-menu .css-dropdown-item.hidden {
    display: none;
}


@keyframes optionAppear {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.select-option:hover {
    background: var(--surface-variant);
    color: var(--on-surface);
    transform: translateX(4px);
}

.select-option.selected {
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 600;
}

.select-option.selected::after {
    content: '';
    width: 0.5rem;
    /* 8px */
    height: 0.5rem;
    background: var(--primary);
    border-radius: 50%;
    margin-left: auto;
    box-shadow: 0 0 0.625rem var(--primary);
}

/* Multi-select Tags */
.badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--primary-container);
    color: var(--on-primary-container);
    border-radius: var(--radius-m);
    font-size: 0.6875rem;
    /* 11px */
    font-weight: 500;
}

.tag-remove {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag-remove:hover {
    opacity: 0.7;
}

/* Feedback for Multi-select Summary */
.custom-select[data-display="summary"] .select-box-display {
    color: var(--primary);
    font-weight: 700;
}

/* Custom Scrollbar for Options */
.select-options::-webkit-scrollbar {
    width: 6px;
}

.select-options::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 10px;
}

/* --- Form Layout Utilities --- */
.form-card-body {
    padding: 24px;
}

@media (max-width: 768px) {
    .form-card-body {
        padding: 16px;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .form-grid>* {
        grid-column: span 1 !important;
    }

    .form-row-4 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .form-row-4>* {
        grid-column: span 1 !important;
    }
}

/* Grid Spans */
.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

@media (max-width: 1024px) {

    .col-span-2,
    .col-span-3 {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {

    .col-span-2,
    .col-span-3,
    .form-grid>.col-span-2,
    .form-grid>.col-span-3 {
        grid-column: span 1 !important;
    }
}

.form-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    grid-column: span 3;
}

@media (max-width: 1024px) {
    .form-row-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .form-row-4 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .form-row-4>* {
        grid-column: span 1 !important;
    }
}

/* File Upload Responsiveness */
.file-upload-container {
    display: flex;
    align-items: center;
    gap: 24px;
}

@media (max-width: 600px) {
    .file-upload-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .file-upload-wrapper {
        width: 100%;
    }

    .file-upload-wrapper .btn {
        width: 100%;
        justify-content: center;
    }
}

.form-group-margin {
    margin-bottom: 32px;
}



.form-actions {
    margin-top: 32px;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 16px;
}

@media (max-width: 600px) {
    .form-actions {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .form-actions .btn {
        width: 100%;
        height: 3rem;
        /* 48px */
        /* Taller on mobile */
    }
}

/* --- Special Input States --- */
.input-readonly {
    background: var(--surface-container-high) !important;
    cursor: default;
}

/* --- File Upload Styling --- */
.file-upload-section {
    margin-top: 24px;
}

.file-upload-label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
}

.file-upload-wrapper {
    position: relative;
    display: inline-block;
}

.file-upload-input {
    display: none !important;
}


.file-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-standard);
    border: none;
}

.file-upload-btn:hover {
    background-color: var(--surface-variant);
    box-shadow: var(--shadow-s);
}

.file-upload-btn i {
    width: 1.125rem !important;
    /* 18px */
    height: 1.125rem !important;
}

/* --- Helper for specific field height --- */
.textarea-fixed {
    height: 6.25rem !important;
    /* 100px */
}

/* --- Profile Photo Enhancements (Cropping & Preview) --- */
.file-upload-container {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--surface-container-low);
    padding: 16px;
    border-radius: var(--radius-m);
    border: 2px dashed var(--surface-variant);
}

.image-preview-wrapper {
    position: relative;
    width: 5rem;
    /* 80px */
    height: 5rem;
}

.image-preview {
    width: 5rem;
    /* 80px */
    height: 5rem;
    border-radius: 50%;
    background: var(--surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-surface-variant);
    overflow: hidden;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-s);
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-image-btn {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.5rem;
    /* 24px */
    height: 1.5rem;
    border-radius: 50%;
    background: var(--error);
    color: var(--on-error);
    border: 2px solid var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: var(--transition-standard);
}

.remove-image-btn:hover {
    transform: scale(1.1);
    background: var(--error-container);
    color: var(--on-error-container);
}

.remove-image-btn i {
    width: 0.875rem !important;
    /* 14px */
    height: 0.875rem !important;
}

/* Cropper Modal */
/* Photo Cropper v2 - Absolute Solidity Fix */
.pcv2-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #000000f2 !important;
    /* 95% opacity black */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999999 !important;
    backdrop-filter: blur(15px) !important;
}

.pcv2-overlay.active {
    display: flex !important;
}

.pcv2-box {
    background-color: #ffffff !important;
    background: #ffffff !important;
    width: 95%;
    max-width: 34.375rem;
    /* 550px */
    border-radius: 1.25rem !important;
    /* 20px */
    overflow: hidden !important;
    box-shadow: 0 2.5rem 7.5rem rgba(0, 0, 0, 0.9) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 10000000 !important;
    opacity: 1 !important;
    border: none !important;
    animation: pcv2-enter 0.3s ease-out !important;
}

[data-theme="dark"] .pcv2-box {
    background-color: #1a1c1e !important;
    background: #1a1c1e !important;
}

.pcv2-header {
    background: #f1f3f5 !important;
    padding: 1rem 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #000 !important;
}

[data-theme="dark"] .pcv2-header {
    background: #2d2d2d !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.pcv2-header h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    /* 16px */
    font-weight: 600 !important;
}

.pcv2-close {
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: inherit !important;
    opacity: 0.7 !important;
}

.pcv2-body {
    background: #000 !important;
    max-height: 25rem !important;
    /* 400px */
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.pcv2-footer {
    background: #f1f3f5 !important;
    padding: 1rem 1.5rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .pcv2-footer {
    background: #2d2d2d !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@keyframes pcv2-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Android Clock Widget */
.android-clock {
    text-align: center;
    background: linear-gradient(135deg, var(--primary-container), var(--tertiary-container));
    padding: 2rem;
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 25rem;
    /* 400px */
    color: var(--on-primary-container);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.clock-time {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
}

.clock-date {
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 0.5rem;
    opacity: 0.8;
}

/* Data Table Styling */
.data-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-m);
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

th {
    padding: 1rem;
    background: var(--surface-container-highest);
    font-weight: 500;
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    /* 14px */
    cursor: pointer;
    user-select: none;
    transition: var(--transition-standard);
}

th:hover {
    background: var(--surface-container-high);
}

.sort-icon {
    display: inline-flex;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.3;
}

th.active .sort-icon {
    opacity: 1;
}

/* Pagination Controls */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-top: 1px solid var(--surface-variant);
}

.pagination {
    display: flex;
    gap: 8px;
}

.page-btn {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--surface-variant);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    /* 14px */
    transition: var(--transition-standard);
}

.page-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

td {
    padding: 1rem;
    border-bottom: 1px solid var(--surface-variant);
    font-size: 0.875rem;
    /* 14px */
    color: var(--on-surface);
}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background: var(--surface-container-low);
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    /* 12px */
    font-weight: 600;
}

.badge-success {
    background: #cff4e4;
    color: #0b5e34;
}

/* Custom Components Styles */


.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    /* Enhanced glass effect */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--surface);
    width: 90%;
    max-width: 25rem;
    padding: 2rem;
    border-radius: var(--radius-xl);
    text-align: center;
    transform: scale(0.9);
    transition: var(--transition-emphasized);
    border-left: 4px solid transparent;
    /* Prepare for status border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-content.modal-success {
    border-left-color: var(--success);
}

.modal-content.modal-error {
    border-left-color: var(--error);
}

.modal-content.modal-warning {
    border-left-color: var(--warning);
}

.modal-overlay.open {
    display: flex;
}

.modal-overlay.open .modal-content {
    animation: modalEnter 0.4s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.modal-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

@media (max-width: 768px) {
    .clock-time {
        font-size: 3rem;
    }

    .android-clock {
        padding: 24px;
    }

    .table-footer {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .card h2 {
        font-size: 1.2rem !important;
    }

    .card {
        gap: 16px !important;
    }
}

/* Premium Stat Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.stat-card {
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--surface-variant);
    background: var(--surface);
    border-radius: var(--radius-l);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
    transition: var(--transition-standard);
}

.stat-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label {
    font-size: 0.6875rem;
    /* 11px */
    font-weight: 600;
    color: var(--on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    /* 1px */
    opacity: 0.8;
}

.stat-value {
    font-size: clamp(1.5rem, 5vw, 1.75rem);
    /* Fluid Stat Value */
    font-weight: 700;
    color: var(--on-surface);
    font-family: 'Google Sans', sans-serif;
    line-height: 1.2;
}

.stat-icon-wrapper {
    width: 3.25rem;
    /* 52px */
    height: 3.25rem;
    border-radius: var(--radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-standard);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-icon-wrapper i {
    width: 1.625rem;
    /* 26px */
    height: 1.625rem;
}

.patient-card .stat-icon-wrapper {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.consult-card .stat-icon-wrapper {
    background: var(--tertiary-container);
    color: var(--on-tertiary-container);
}

.followup-card .stat-icon-wrapper {
    background: var(--error-container);
    color: var(--on-error-container);
}

.lab-card .stat-icon-wrapper {
    background: var(--primary-container);
    color: var(--primary);
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -15%;
    right: -15%;
    width: 7.5rem;
    /* 120px */
    height: 7.5rem;
    background: var(--glow-color, transparent);
    filter: blur(45px);
    opacity: 0.12;
    transition: var(--transition-emphasized);
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
}

.patient-card {
    --glow-color: var(--primary);
}

.consult-card {
    --glow-color: #9c41ff;
}

.followup-card {
    --glow-color: var(--error);
}

.lab-card {
    --glow-color: var(--primary-seed);
}

.stat-card:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.stat-card:hover .stat-icon-wrapper {
    transform: scale(1.1) rotate(-5deg);
}

.stat-card:hover::after {
    opacity: 0.3;
    transform: scale(1.5);
}

.hover-lift {
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px) scale(1.01);
}

@media (max-width: 600px) {
    .stats-grid {
        gap: 12px !important;
    }

    .stat-card {
        padding: 16px !important;
    }

    .stat-value {
        font-size: 24px !important;
    }
}

/* Page Header System */
.page-header {
    margin-bottom: 0.75rem;
}

.page-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    /* Fluid Heading */
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0px;
}

.page-subtitle {
    font-size: 0.875rem;
    /* 14px */
    color: var(--on-surface-variant);
}

.stats-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.flex-wrap-gap {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.flex-col-12 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.text-caption {
    font-size: 0.75rem;
    /* 12px */
    color: var(--on-surface-variant);
}

/* Palette and Font buttons */
.palette-button,
.font-button {
    padding: 1rem;
    background: var(--surface-container-low);
    border: 2px solid var(--surface-variant);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: all 0.2s;
}

.palette-button:hover,
.font-button:hover {
    border-color: var(--primary);
    background: var(--surface-container);
}

.palette-button.active,
.font-button.active {
    border-color: var(--primary);
    border-width: 3px;
    background: var(--primary-container);
}

.palette-preview {
    width: 100%;
    height: 3.75rem;
    /* 60px */
    border-radius: var(--radius-s);
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .stats-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* --- Form Support --- */
.text-error {
    color: var(--error) !important;
}

.text-success {
    color: #2e7d32 !important;
}

.field-error input,
.field-error textarea,
.field-error select {
    border-color: var(--error) !important;
    border-width: 2px !important;
}

.field-error label {
    color: var(--error) !important;
}

.field-success input,
.field-success textarea,
.field-success select {
    border-color: #2e7d32 !important;
    border-width: 2px !important;
}

.field-success label {
    color: #2e7d32 !important;
}

.input-icon-wrapper {
    position: relative;
    width: 100%;
}

.input-icon-wrapper i,
.input-icon-wrapper svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    color: var(--on-surface-variant);
    pointer-events: none;
    z-index: 2;
}

.input-with-icon {
    padding-left: 2.5rem !important;
}

.input-with-icon+label {
    left: 2.5rem !important;
}

.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-m);
}

/* --- Card & Grid Utilities --- */
.card-item {
    padding: 1rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-m);
}

.card-item-title {
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.grid-item-colored {
    padding: 24px;
    border-radius: var(--radius-m);
    text-align: center;
}

.grid-item-colored p {
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 500;
}

/* Spacing System - Margin */
.m-0 {
    margin: 0 !important;
}

.m-4 {
    margin: 4px !important;
}

.m-8 {
    margin: 0.5rem !important;
}

.m-12 {
    margin: 0.75rem !important;
}

.m-16 {
    margin: 1rem !important;
}

.m-24 {
    margin: 1.5rem !important;
}

.m-32 {
    margin: 2rem !important;
}

.m-48 {
    margin: 3rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-4 {
    margin-top: 0.25rem !important;
}

.mt-8 {
    margin-top: 0.5rem !important;
}

.mt-12 {
    margin-top: 0.75rem !important;
}

.mt-16 {
    margin-top: 1rem !important;
}

.mt-24 {
    margin-top: 1.5rem !important;
}

.mt-32 {
    margin-top: 2rem !important;
}

.mt-48 {
    margin-top: 3rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-4 {
    margin-bottom: 0.25rem !important;
}

.mb-8 {
    margin-bottom: 0.5rem !important;
}

.mb-12 {
    margin-bottom: 0.75rem !important;
}

.mb-16 {
    margin-bottom: 1rem !important;
}

.mb-24 {
    margin-bottom: 1.5rem !important;
}

.mb-32 {
    margin-bottom: 2rem !important;
}

.mb-48 {
    margin-bottom: 3rem !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.ml-4 {
    margin-left: 0.25rem !important;
}

.ml-8 {
    margin-left: 0.5rem !important;
}

.ml-12 {
    margin-left: 0.75rem !important;
}

.ml-16 {
    margin-left: 1rem !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-4 {
    margin-right: 0.25rem !important;
}

.mr-8 {
    margin-right: 0.5rem !important;
}

.mr-12 {
    margin-right: 0.75rem !important;
}

.mr-16 {
    margin-right: 1rem !important;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-4 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

.mx-8 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-4 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-8 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-16 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

/* Spacing System - Padding (rem) */
.p-0 {
    padding: 0 !important;
}

.p-4 {
    padding: 0.25rem !important;
}

.p-8 {
    padding: 0.5rem !important;
}

.p-12 {
    padding: 0.75rem !important;
}

.p-16 {
    padding: 1rem !important;
}

.p-24 {
    padding: 1.5rem !important;
}

.p-32 {
    padding: 2rem !important;
}

.p-48 {
    padding: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-4 {
    padding-top: 4px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pt-16 {
    padding-top: 16px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-4 {
    padding-bottom: 0.25rem !important;
}

.pb-8 {
    padding-bottom: 0.5rem !important;
}

.pb-16 {
    padding-bottom: 1rem !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.px-4 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}

.px-8 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.px-16 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.px-24 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-4 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-8 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-16 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Typography Extras */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-bold {
    font-weight: 700 !important;
}

.text-medium {
    font-weight: 500 !important;
}

.text-normal {
    font-weight: 400 !important;
}

.text-small {
    font-size: 0.75rem !important;
    /* 12px */
}

.text-caption {
    font-size: 0.75rem !important;
    /* 12px */
    color: var(--on-surface-variant) !important;
}

.category-label {
    font-size: 0.6875rem;
    /* 11px */
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    margin-left: 0.25rem;
    margin-bottom: 0.5rem;
    display: block;
}

.component-link-card {
    text-decoration: none;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.component-card-icon {
    width: 2.25rem;
    /* 36px */
    height: 2.25rem;
    flex-shrink: 0;
}

.component-card-title {
    font-size: 0.875rem;
    /* 14px */
    margin: 0;
    font-weight: 600;
    color: var(--on-surface);
}

.component-card-desc {
    font-size: 0.625rem;
    /* 10px */
    color: var(--on-surface-variant);
    margin: 0;
}

/* --- Feedback & Communication Utilities --- */
.feedback-demo-card {
    padding: 1.25rem;
    border: 1px dashed var(--outline-variant);
    background: var(--surface-container-low);
    border-radius: var(--radius-m);
}

.feedback-demo-card h4 {
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.code-info-block {
    display: block;
    background: var(--surface-container-highest);
    padding: 1rem;
    border-radius: var(--radius-m);
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
    /* 13px */
    color: var(--on-surface);
    line-height: 1.6;
    overflow-x: auto;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    /* 13px */
    color: var(--on-surface-variant);
    margin-bottom: 0.75rem;
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Toast Container System */
.toast-container {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.toast-pos-top-left {
    top: 24px;
    left: 24px;
}

.toast-pos-top-center {
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
}

.toast-pos-top-right {
    top: 24px;
    right: 24px;
}

.toast-pos-bottom-left {
    bottom: 24px;
    left: 24px;
    flex-direction: column-reverse;
}

.toast-pos-bottom-center {
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
}

.toast-pos-bottom-right {
    bottom: 24px;
    right: 24px;
    flex-direction: column-reverse;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: color-mix(in srgb, var(--primary) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--on-primary);
    border: 1px solid color-mix(in srgb, var(--on-primary) 10%, transparent);
    border-radius: var(--radius-full);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    min-width: 18.75rem;
    /* 300px */
    max-width: 25rem;
    /* 400px */
    animation: appleReveal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
}

.toast i {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes appleReveal {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast.toast-success {
    background: var(--success);
    color: var(--on-success);
    border-color: color-mix(in srgb, var(--on-success) 20%, transparent);
}

.toast.toast-error {
    background: var(--error);
    color: var(--on-error);
    border-color: color-mix(in srgb, var(--on-error) 20%, transparent);
}

.toast.toast-warning {
    background: var(--warning);
    color: var(--on-warning);
    border-color: color-mix(in srgb, var(--on-warning) 20%, transparent);
}

/* Hide animation class for JS */
.toast.toast-hiding {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    pointer-events: none;
}

.toast.toast-info {
    border-left-color: var(--surface-variant);
}

/* Fix clipping for dropdowns */
.card {
    overflow: visible !important;
    border-radius: var(--radius-m);
    /* Ensure parent radius */
}

/* Compensate for overflow: visible by rounding children */
.card-header:first-child {
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
}

.card-body:last-child {
    border-bottom-left-radius: var(--radius-m);
    border-bottom-right-radius: var(--radius-m);
}

/* --- Advanced Form Styles --- */
.field-icon-suffix {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--on-surface-variant);
    opacity: 0.6;
    transition: var(--transition-standard);
    z-index: 11;
}

.search-select:focus-within .field-icon-suffix,
.search-tag:focus-within .field-icon-suffix {
    color: var(--primary);
    opacity: 1;
}

/* Ensure active selection containers stay on top of other cards */
.search-select:focus-within,
.search-tag:focus-within {
    z-index: 50;
}

.input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    position: relative;
    isolation: isolate;
}

.input-group .field-floating {
    flex: 1;
    z-index: 2;
}

.input-group .field-floating input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
    border-right-width: 0;
}

.input-group .btn {

    width: 3rem;
    padding: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
    margin: 0;
    border: 1px solid var(--outline);
    /* Match input border */
    border-left: none;
    /* No double border */
    background: var(--surface-container-low);
    color: var(--primary);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group .btn:hover {
    background: var(--surface-container-high);
}

.input-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
}

.input-initial {
    width: 5rem;
    /* 80px */
    flex-shrink: 0;
}

/* --- Advanced Selection Styles --- */
.search-select,
.search-tag {
    position: relative;
    width: 100%;
}

/* Base Dropdown Styling */
.select-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 100%;
    background: var(--surface-container-high);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100;
    pointer-events: none;
}

.select-dropdown.open {
    max-height: 18.75rem;
    opacity: 1;
    transform: translateY(0) scale(1);
    overflow-y: auto;
    pointer-events: auto;
    padding: 0.5rem 0;
}

/* Custom Scrollbar for Dropdown */
.select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.select-dropdown::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: 10px;
}

/* Selection Items */
.select-search {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 2;
    border-bottom: 1px solid var(--outline-variant);
    margin-bottom: 4px;
}

.select-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--on-surface);
    font-size: 0.875rem;
    /* 14px */
}

.select-option {
    padding: 0.75rem 1.25rem;
    margin: 0.125rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-m);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    /* 14px */
    color: var(--on-surface-variant);
}

.select-option i {
    width: 1.125rem !important;
    /* 18px */
    height: 1.125rem !important;
    opacity: 0.7;
}

.select-option:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.select-option.selected {
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-weight: 600;
}

.select-option.selected::after {
    content: '';
    width: 0.375rem;
    /* 6px */
    height: 0.375rem;
    background: var(--primary);
    border-radius: 50%;
    margin-left: auto;
}

/* Tagging System Enhancement */
.tag-field {
    transition: all 0.3s ease;
}

.tag-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

/* Fix label floating for tag field when it has chips but input is empty */
.tag-field:has(.tag-chip) label {
    top: 0 !important;
    left: 0.75rem !important;
    font-size: 0.6875rem !important;
    /* 11px */
    font-weight: 700 !important;
    color: var(--primary) !important;
    background: var(--surface) !important;
    transform: translateY(-50%) !important;
    padding: 0 0.375rem !important;
}

.tag-field {
    cursor: text;
    display: flex;
    flex-direction: column;
}

.tag-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.8125rem;
    /* 45px */
    padding: 0.375rem 0.5rem;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem 0.375rem 0.75rem;
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 500;
    animation: chipEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid transparent;
    transition: all 0.2s;
}

.tag-chip:hover {
    background: var(--secondary);
    color: var(--on-secondary);
}

@keyframes chipEnter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chip-remove {
    width: 0.875rem;
    height: 0.875rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.chip-remove:hover {
    opacity: 1;
}

.tag-input {
    min-width: 3.75rem;
    /* 60px */
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.5rem 0;
    color: var(--on-surface);
}

/* Radio Cards - Professional Upgrade */
.radio-card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.radio-card {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-l);
    padding: 1.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--surface-container-low);
}

.radio-card:hover {
    background: var(--surface-container-high);
    border-color: var(--outline);
    transform: translateY(-4px);
    box-shadow: var(--shadow-m);
}

.radio-card.checked {
    border-color: var(--primary);
    background: var(--primary-container);
    box-shadow: 0 0 0 1px var(--primary);
}

.radio-card.checked i {
    color: var(--primary);
    transform: scale(1.1);
}

.radio-card.checked div {
    color: var(--on-primary-container);
}

/* Chip Groups */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.choice-chip {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--outline-variant);
    border-radius: 1.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
}

.choice-chip:hover {
    background: var(--surface-container-high);
    border-color: var(--outline);
}

.choice-chip.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-s);
}

/* --- FAIL-SAFE SELECTION OVERRIDES --- */
.custom-select,
.select-box,
.select-dropdown,
.select-option,
.select-search input,
.tag-remove {
    pointer-events: auto !important;
}

.custom-select {
    position: relative !important;
    overflow: visible !important;
}

.select-dropdown {
    z-index: 10001 !important;
}

.custom-select.active .select-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix grid layout */
.form-grid {
    display: grid !important;
    gap: 1.5rem;
}

.select-box {
    z-index: 5 !important;
}

.select-search {
    z-index: 10 !important;
}

/* --- Selection UI Framework --- */

/* Radio Cards */
.radio-card-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.radio-card {
    position: relative;
    padding: 1.25rem;
    background: var(--surface-container-low);
    border: 1px solid var(--surface-variant);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: var(--transition-standard);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.radio-card:hover {
    background: var(--surface-container);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.radio-card.checked {
    background: var(--primary-container);
    border-color: var(--primary);
    border-width: 2px;
}

.radio-card .card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--surface-variant);
    color: var(--on-surface-variant);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-standard);
}

.radio-card.checked .card-icon {
    background: var(--primary);
    color: var(--on-primary);
}

.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-card .card-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-surface);
}

/* Choice Chips */
.chips-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choice-chip {
    padding: 0.5rem 1rem;
    background: var(--surface-container-high);
    border: 1px solid var(--surface-variant);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: var(--transition-standard);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.choice-chip:hover {
    background: var(--surface-variant);
    color: var(--on-surface);
}

.choice-chip.active {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    border-color: var(--secondary);
}

.choice-chip.active i {
    color: var(--secondary);
}

/* Segmented Toggle Buttons */
.segmented-button-container {
    display: flex;
    background: var(--surface-container-high);
    padding: 4px;
    border-radius: var(--radius-full);
    gap: 4px;
    width: fit-content;
}

.segmented-button {
    padding: 8px 24px;
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-standard);
    display: flex;
    align-items: center;
    gap: 8px;
}

.segmented-button:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
}

.segmented-button.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --- Theming System UI --- */

/* Palette Selector (Header) */
.palette-selector {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--surface-container-high);
    border: 1px solid var(--surface-variant);
    border-radius: var(--radius-l);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-standard);
}

.palette-selector.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.palette-item {
    transition: var(--transition-standard);
    border: 2px solid transparent !important;
}

.palette-item:hover {
    transform: scale(1.05);
}

.palette-item.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 12px var(--primary);
}

/* Theming Page Components */
.palette-button {
    background: var(--surface-container-low);
    border: 1px solid var(--surface-variant);
    border-radius: var(--radius-m);
    padding: 12px;
    cursor: pointer;
    transition: var(--transition-standard);
}

.palette-button:hover {
    background: var(--surface-container);
    border-color: var(--primary);
}

.palette-button.active {
    background: var(--primary-container);
    border-color: var(--primary);
    border-width: 2px;
}

.palette-preview {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-s);
    margin-bottom: 8px;
}

.font-button {
    background: var(--surface-container-low);
    border: 1px solid var(--surface-variant);
    border-radius: var(--radius-m);
    padding: 16px;
    cursor: pointer;
    transition: var(--transition-standard);
    border: 1px solid var(--outline-variant);
}

.font-button:hover {
    background: var(--surface-container);
    border-color: var(--primary);
}

.font-button.active {
    background: var(--primary-container);
    border-color: var(--primary);
    border-width: 2px;
}

.token-swatch {
    padding: 16px;
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.token-swatch-label {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
}

.token-swatch-value {
    font-size: 13px;
    font-weight: 600;
}

.feature-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: var(--radius-m);
    background: var(--surface-container-low);
}

/* --- Widget Animations --- */
@keyframes heart-pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(0.95);
        opacity: 0.5;
    }
}

.status-dot-pulse {
    animation: heart-pulse 2s infinite ease-in-out;
}

/* --- SELECTION COMPONENT STYLES (Extracted) --- */

/* Utility Layouts */
.page-header-layout {
    margin-bottom: 32px;
}

.breadcrumb-layout {
    margin-bottom: 16px;
}

.text-dimmed {
    color: var(--on-surface-variant);
    opacity: 0.8;
}

.grid-layout-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 32px;
}

.col-layout-selection {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* File Dropzone */
.selection-dropzone {
    border: 2px dashed var(--surface-variant);
    border-radius: var(--radius-l);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-standard);
    background: var(--surface-container-low);
    position: relative;
    overflow: hidden;
}

.selection-dropzone:hover {
    border-color: var(--primary);
    background: var(--primary-container);
    transform: translateY(-2px);
}

.selection-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.dropzone-icon-box {
    width: 48px;
    height: 48px;
    background: var(--primary-container);
    color: var(--primary);
    border-radius: var(--radius-m);
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Color Grid Selection */
.color-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 16px;
}

.color-dot {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-standard);
    border: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.color-dot.active {
    border-color: var(--on-surface);
    transform: scale(1.1);
}

/* Extended Segmented Buttons (Variant) */
.segmented-control {
    position: relative;
    display: flex;
    background: var(--surface-container-high);
    padding: 4px;
    border-radius: var(--radius-full);
    width: fit-content;
}

.segmented-control .indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: var(--transition-standard);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

.segmented-control button {
    position: relative;
    border: none;
    background: none;
    padding: 10px 24px;
    border-radius: var(--radius-full);
    color: var(--on-surface-variant);
    font-weight: 500;
    cursor: pointer;
    z-index: 1;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.segmented-control button.active {
    color: var(--on-primary);
}

.file-list-item {
    padding: 8px 12px;
    background: var(--surface-container-high);
    border-radius: var(--radius-s);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-list-area {
    margin-top: 16px;
    text-align: left;
}

/* Additional standard utility classes */
.text-weight-medium {
    font-weight: 500;
}

.mt-4 {
    margin-top: 4px;
}

.mb-16 {
    margin-bottom: 16px;
}

/* --- FLOATING SELECTION DROPDOWN STYLES --- */

.floating-selection-group {
    position: relative;
    width: 100%;
}

.floating-selection-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-container-high);
    border-radius: var(--radius-m);
    padding: 0.5rem;
    box-shadow: var(--shadow-m);
    border: 1px solid var(--outline-variant);
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
    animation: slideUpFade 0.2s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.floating-selection-dropdown.active {
    display: flex;
}

.floating-selection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-s);
    cursor: pointer;
    color: var(--on-surface);
    transition: background 0.2s;
    font-size: 0.875rem;
}

.floating-selection-item:hover {
    background: var(--surface-container-highest);
}

.floating-selection-item i {
    color: var(--on-surface-variant);
    opacity: 0.7;
}

.floating-selection-item.selected {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.floating-selection-item.selected i {
    color: var(--primary);
    opacity: 1;
}

.floating-selection-item.hidden {
    display: none;
}

/* Tag Styles for Floating Field */
.tag-container-floating {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 48px 10px 12px;
    min-height: 48px;
    border: 2px solid color-mix(in srgb, var(--primary) 15%, transparent);
    border-radius: var(--radius-full);
    background: var(--primary-container);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.tag-container-floating:focus-within,
.tag-container-floating.has-tags {
    background: var(--surface);
    border-color: var(--primary);
}

.tag-container-floating .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    border-radius: var(--radius-s);
    font-size: 0.75rem;
    font-weight: 500;
    animation: scaleFadeIn 0.2s forwards;
}

.tag-container-floating .tag-chip i {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.tag-container-floating .tag-chip i:hover {
    opacity: 1;
}

.tag-container-floating input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: 24px !important;
    flex: 1;
    min-width: 60px;
    box-shadow: none !important;
}

/* Specific fix for floating label with tags */
.field-floating.has-tags label {
    top: 0 !important;
    left: 0.75rem !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    /* Match the card body background exactly */
    background: var(--surface-container-low) !important;
    border-radius: 4px;
    transform: translateY(-50%) !important;
    padding: 0 0.375rem !important;
}

.field-floating:focus-within label {
    background: var(--surface) !important;
}

/* --- REFINEMENT: FLOATING SELECTION LABELS --- */

.floating-selection-group .field-floating i[data-lucide] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-selection-group:focus-within .field-floating i[data-lucide] {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary);
}

.tag-container-floating {
    border: 2px solid color-mix(in srgb, var(--primary) 10%, transparent) !important;
    background: var(--surface-container-low) !important;
    padding-top: 14px !important;
    /* Space for label */
    padding-bottom: 6px !important;
}

.tag-container-floating:hover {
    border-color: var(--primary) !important;
    background: var(--surface-container-mid) !important;
}

.tag-container-floating.has-tags input {
    margin-top: 2px;
}

/* Ensure label lifts correctly for Tag Container */
.floating-selection-group.has-tags .field-floating label,
.floating-selection-group:focus-within .field-floating label {
    top: 0 !important;
    left: 0.75rem !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    background: var(--surface-container-low) !important;
    border-radius: 4px;
    transform: translateY(-50%) !important;
    padding: 0 0.375rem !important;
    z-index: 20;
}

/* Polish for Dropdown Items */
.floating-selection-item {
    font-weight: 500;
}

.floating-selection-item i {
    width: 16px;
    height: 16px;
}

/* --- FLOATING SELECT ARROW ICON --- */
/* Chevron-down icon positioned inside floating select inputs */
.floating-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--on-surface-variant);
    pointer-events: none;
}

/* --- SEARCH FIELD WITH ICON --- */

/* Position the search icon inside the floating field */
.search-field-floating {
    position: relative;
}

.search-field-floating .search-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--on-surface-variant);
    pointer-events: none;
    transition: var(--transition-standard);
    z-index: 2;
}

/* Shift input text to the right to make room for the icon */
.search-field-floating input {
    padding-left: 42px !important;
}

/* Shift label to the right to align with the input text */
.search-field-floating label {
    left: 42px !important;
}

/* When focused or has value, label floats up — reset left to match other fields */
.search-field-floating input:focus+label,
.search-field-floating input:not(:placeholder-shown)+label {
    left: 0.75rem !important;
}

/* Icon color changes on focus */
.search-field-floating:focus-within .search-field-icon {
    color: var(--primary);
}

/* Results container for search feedback */
.search-field-results {
    margin-top: 12px;
    font-size: 0.8125rem;
    color: var(--on-surface-variant);
    min-height: 0;
    transition: var(--transition-standard);
}

.search-field-results:empty {
    display: none;
}

.search-field-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: var(--transition-standard);
    color: var(--on-surface);
}

.search-field-result-item:hover {
    background: var(--surface-container-highest);
}

.search-field-result-item i {
    width: 16px;
    height: 16px;
    color: var(--primary);
    flex-shrink: 0;
}

/* --- FIX: DROPDOWN STACKING & CLIPPING --- */

/* 
 * Ensure cards don't clip dropdowns (overflow: visible is default, 
 * but we re-enforce it for clarity in selection contexts) 
 */
.selection-grid .card {
    position: relative;
    overflow: visible !important;
}

.selection-grid .card-body {
    position: relative;
    overflow: visible !important;
    z-index: 1;
}

/* 
 * Boost z-index of the active selection group.
 * This ensures the dropdown appears above sibling cards in the grid.
 */
.floating-selection-group:focus-within {
    z-index: 100 !important;
}

.floating-selection-group.has-tags {
    z-index: 5;
    /* Base lifted state */
}

.floating-selection-group.has-tags:focus-within {
    z-index: 100 !important;
}

/* Ensure the dropdown itself is always at the very top of its container */
.floating-selection-dropdown {
    z-index: 1000 !important;
}

/* --- REFINEMENT V2: STACKING & FULL-WIDTH --- */

/* 
 * CRITICAL: Use :focus-within on the card itself to lift it above siblings.
 * This solves the issue of dropdowns going under cards below.
 */
.selection-grid .card:focus-within {
    z-index: 99 !important;
}

/* Full Width for Search & Tag */
.floating-selection-group.tag-group-refined {
    width: 100%;
}

.tag-container-floating.full-width {
    width: 100% !important;
    padding-right: 16px !important;
    /* No side icon */
}

/* Ensure search input in tag container takes full width if no chips */
.tag-container-floating.full-width input {
    flex: 1;
    min-width: 120px;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Pagination System --- */
.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--surface-container-low);
    border-top: 1px solid var(--outline-variant);
    gap: 16px;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    font-weight: 500;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--outline-variant);
    background: var(--surface);
    color: var(--on-surface);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-standard);
    user-select: none;
}

.page-btn:hover:not(:disabled) {
    background: var(--surface-container-high);
    border-color: var(--primary);
    color: var(--primary);
}

.page-btn.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--surface-container-low);
}

.page-btn i {
    width: 18px;
    height: 18px;
}

/* --- Custom Themed Selects --- */
.form-select {
    background-color: var(--surface-container-highest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-m);
    color: var(--on-surface);
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    transition: var(--transition-standard);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2343474e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.1rem;
    cursor: pointer;
    min-height: 40px;
}

.form-select:hover {
    background-color: var(--surface-container-high);
    border-color: var(--outline);
}

.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
    background-color: var(--surface);
}

.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.8125rem;
    min-height: 32px;
    height: 32px;
    border-radius: var(--radius-s);
}

/* Segmented Buttons Refinement */
.segmented-group {
    display: inline-flex;
    background: var(--surface-container-high);
    padding: 3px;
    border-radius: var(--radius-full);
    border: 1px solid var(--outline-variant);
}

.segmented-group .btn {
    border: none !important;
    background: transparent !important;
    padding: 6px 16px;
    border-radius: var(--radius-full) !important;
    font-size: 11px;
    font-weight: 600;
    color: var(--on-surface-variant);
    box-shadow: none !important;
    transition: var(--transition-standard);
}

.segmented-group .btn.active,
.segmented-group .btn-primary {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* --- Global Confirmation Modal --- */
#confirmModal {
    z-index: 9999;
}

#confirmModal .modal-content {
    max-width: 400px;
    width: 90%;
    padding: 32px;
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--outline-variant);
    text-align: center;
}

#confirmModal .modal-icon {
    margin-bottom: 24px;
    display: inline-flex;
}

#confirmModal .modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

#confirmModal h3 {
    margin-bottom: 8px;
    color: var(--on-surface);
}

#confirmModal p {
    color: var(--on-surface-variant);
    line-height: 1.5;
}