:root {
    --app-font-family: Inter, Segoe UI, sans-serif;
    --app-heading-font: Poppins;
    --app-body-font: Inter;
    --app-ui-font: Inter;
    --app-card-radius: 18px;
    --app-panel-radius: 18px;
    --app-surface-radius: 24px;
    --app-button-radius: 12px;
    --app-input-radius: 14px;
    --app-padding: 18px;
    --app-margin: 18px;
    --app-section-gap: 18px;
    --app-grid-gap: 18px;
    --app-primary: #2f5df5;
    --app-secondary: #11c0b7;
    --app-info: #0ea5e9;
    --app-success: #10b981;
    --app-warning: #f59e0b;
    --app-error: #ef4444;
    --app-bg: #f3f8ff;
    --app-surface: #ffffff;
    --app-surface-alt: #f8fbff;
    --app-panel: #ffffff;
    --app-panel-alt: #f4f8ff;
    --app-title: #12213a;
    --app-subtitle: #405171;
    --app-text: #12213a;
    --app-muted-text: #5c6e8d;
    --app-border: rgba(143, 161, 204, 0.28);
    --app-divider: #d9e8ff;
    --app-table-bg: #f8fbff;
    --app-bg-a: #f3f8ff;
    --app-bg-b: #d9e8ff;
    --app-accent-a: #2f5df5;
    --app-accent-b: #11c0b7;
    --app-glow-a: rgba(47, 93, 245, 0.15);
    --app-glow-b: rgba(17, 192, 183, 0.12);
    --app-header-grad-a: #2f5df5;
    --app-header-grad-b: #11c0b7;
    --app-header-gradient: linear-gradient(135deg, var(--app-header-grad-a), var(--app-header-grad-b));
    --app-nav-bg: color-mix(in srgb, var(--app-surface) 82%, var(--app-bg-b) 18%);
    --app-nav-text: var(--app-title);
    --app-nav-muted: var(--app-muted-text);
    --app-nav-hover: color-mix(in srgb, var(--app-primary) 18%, transparent);
    --app-nav-active: color-mix(in srgb, var(--app-secondary) 24%, transparent);
    --app-drawer-width: 286px;
    --app-drawer-mini-width: 60px;
    --app-appbar-height: 64px;
    --app-elevation-global: 3;
    --app-elevation-paper: 2;
    --app-elevation-card: 4;
}

html, body, #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
}

.login-page {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}


html {
    margin: 0;
    min-height: 100%;
    scrollbar-gutter: stable; /* Prevents layout shift when scrollbar appears */
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: var(--app-font-family);
    background: var(--app-bg-a);
    color: var(--app-text);
}

body {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Smart Scrollbar Styling - Show only on overflow */
/* Webkit browsers (Chrome, Safari, Edge, newer Opera) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--app-border);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--app-muted-text);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
    background: var(--app-text);
    background-clip: content-box;
}

/* Firefox */
* {
    scrollbar-color: var(--app-border) transparent;
    scrollbar-width: thin;
}

h1, h2, h3, h4, h5, h6, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--app-heading-font);
    color: var(--app-title);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .gh-shell__appbar .gh-brand .mud-typography-subtitle1,
    .gh-shell__appbar .gh-brand .mud-typography-caption,
    .gh-page-title {
        background: var(--app-header-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.mud-typography, .mud-button, .mud-input, .mud-chip {
    font-family: var(--app-body-font);
}

.gh-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

.gh-shell__appbar {
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--app-border);
}

.gh-shell__drawer .mud-drawer-content {
    padding: 1rem 0.75rem 1.25rem 0;
    background: var(--app-nav-bg);
}

.gh-shell__drawer .mud-drawer {
    width: var(--app-drawer-width);
}

.gh-shell__drawer .mud-drawer-mini,
.gh-shell__drawer .mud-drawer--mini,
.gh-shell__drawer .mud-drawer-open-mini-md-left,
.gh-shell__drawer .mud-drawer-open-mini-md-right {
    width: var(--app-drawer-mini-width) !important;
}

.gh-shell__drawer.mud-drawer-custom.mud-drawer--closed {
    min-width: 60px !important;
}

/* Mini drawer: icon-only header rows, hide texts and child links while collapsed. */
.gh-shell__drawer .mud-drawer--mini .mud-nav-link-text,
.gh-shell__drawer .mud-drawer-mini .mud-nav-link-text,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link-text,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link-text,
.gh-shell__drawer .mud-drawer--mini .mud-nav-link-expand-icon,
.gh-shell__drawer .mud-drawer-mini .mud-nav-link-expand-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link-expand-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link-expand-icon {
    display: none !important;
}

.gh-shell__drawer .mud-drawer--mini .mud-nav-link,
.gh-shell__drawer .mud-drawer-mini .mud-nav-link,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link,
.gh-shell__drawer .mud-drawer--mini .mud-nav-group-text,
.gh-shell__drawer .mud-drawer-mini .mud-nav-group-text,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-group-text,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-group-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.gh-shell__drawer .mud-drawer--mini .mud-nav-link .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-mini .mud-nav-link .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer--mini .mud-nav-group-text .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-mini .mud-nav-group-text .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-group-text .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-group-text .mud-nav-link-icon {
    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

.gh-shell__drawer .mud-drawer--mini .mud-nav-link,
.gh-shell__drawer .mud-drawer-mini .mud-nav-link,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link,
.gh-shell__drawer .mud-drawer--mini .mud-nav-group-text,
.gh-shell__drawer .mud-drawer-mini .mud-nav-group-text,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-group-text,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-group-text {
    position: relative !important;
}

.gh-shell__drawer .mud-drawer--mini .mud-nav-link .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-mini .mud-nav-link .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer--mini .mud-nav-group-text .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-mini .mud-nav-group-text .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-group-text .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-group-text .mud-nav-link-icon {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

/* Closed mini navmenu: increase clickable area and icon size for clarity. */
    .gh-shell__drawer .mud-drawer--mini .mud-nav-link,
    .gh-shell__drawer .mud-drawer-mini .mud-nav-link,
    .gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link,
    .gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link,
    .gh-shell__drawer .mud-drawer--mini .mud-nav-group-text,
    .gh-shell__drawer .mud-drawer-mini .mud-nav-group-text,
    .gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-group-text,
    .gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-group-text {
        min-height: 44px !important;
       
    }

.gh-shell__drawer .mud-drawer--mini .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-mini .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link-icon,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link-icon {
    font-size: 1.45rem !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    text-align: center !important;
}

.gh-shell__drawer .mud-drawer--mini .mud-nav-link-icon .mud-icon-root,
.gh-shell__drawer .mud-drawer-mini .mud-nav-link-icon .mud-icon-root,
.gh-shell__drawer .mud-drawer-open-mini-md-left .mud-nav-link-icon .mud-icon-root,
.gh-shell__drawer .mud-drawer-open-mini-md-right .mud-nav-link-icon .mud-icon-root {
    font-size: 1.45rem !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.gh-shell__drawer,
.gh-shell__drawer .mud-drawer,
.gh-shell__drawer .mud-drawer-content,
.gh-shell__drawer .mud-drawer-container,
.gh-shell__drawer .mud-navmenu,
.gh-shell__drawer .mud-drawer-mini,
.gh-shell__drawer .mud-drawer--mini,
.gh-shell__drawer .mud-drawer-open-mini-md-left,
.gh-shell__drawer .mud-drawer-open-mini-md-right {
    background-color: var(--app-nav-bg) !important;
    background-image: none !important;
}

.gh-shell__drawer .mud-paper,
.gh-shell__drawer .mud-elevation-1,
.gh-shell__drawer .mud-elevation-2,
.gh-shell__drawer .mud-elevation-3 {
    box-shadow: none !important;
}

.gh-shell__drawer .mud-overlay {
    background: transparent !important;
}

.gh-shell__content {
    padding: calc(var(--app-section-gap) + 8px);
    height: calc(100dvh - var(--app-appbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.gh-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.gh-brand__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.gh-brand .mud-icon-root {
    color: var(--app-secondary);
}

.gh-loading-shell {
    min-height: 60vh;
    display: grid;
    place-content: center;
    gap: 1rem;
}

.gh-page-shell {
    display: grid;
    gap: var(--app-section-gap);
    padding: 0;
}

.gh-page-shell__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.gh-page-shell__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gh-page-shell__body {
    min-width: 0;
}

.gh-page-title {
    color: var(--app-title);
}

.gh-page-subtitle,
.gh-section-header__subtitle,
.gh-theme-preview__body {
    color: var(--app-muted-text);
}

.gh-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--app-secondary);
}

.gh-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.gh-stat-card,
.gh-info-card,
.gh-theme-preview {
    border-radius: var(--app-card-radius);
    background: color-mix(in srgb, var(--app-panel) 90%, transparent);
    border: 1px solid var(--app-border);
}

.gh-stat-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
}

.gh-stat-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-content: center;
    background: var(--app-secondary);
    color: white;
}

.gh-stat-card__label {
    color: var(--app-muted-text);
}

.gh-info-card {
    padding: 1.25rem;
    height: 100%;
}

.gh-info-card__content {
    display: grid;
    gap: 1rem;
}

.gh-status-banner {
    border-radius: var(--app-button-radius);
    margin-bottom: 1rem;
}

.gh-action-button {
    border-radius: var(--app-button-radius);
}

.gh-search-field .mud-input-control {
    border-radius: var(--app-input-radius);
}

.gh-nav-menu .mud-nav-link {
    border-radius: 12px;
    margin-bottom: 0.35rem;
}

.gh-nav-menu__section {
    color: var(--app-muted-text);
}

.gh-shell__appbar .gh-brand .mud-typography-subtitle1,
.gh-shell__appbar .gh-brand .mud-typography-caption,
.gh-shell__appbar .mud-input-slot,
.gh-shell__appbar .mud-select-input,
.gh-nav-menu .mud-nav-link-text,
.gh-nav-menu .mud-nav-group-text .mud-nav-link-text {
    color: inherit;
}

.gh-shell__appbar .mud-icon-root,
.gh-nav-menu .mud-nav-link-icon,
.gh-nav-menu .mud-nav-group .mud-nav-link-icon {
    color: var(--app-secondary) !important;
    opacity: 1 !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    /* Keep icon glyphs solid for readability; gradient clip can make Material icons disappear in some renderers. */
}

.gh-theme-preview {
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
}

.gh-theme-preview__swatches {
    display: flex;
    gap: 0.5rem;
}

.gh-theme-preview__swatches span {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.gh-theme-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    align-items: start;
}

.gh-color-field {
    display: grid;
    gap: 0.4rem;
    color: var(--app-muted-text);
    font-size: 0.92rem;
}

.gh-color-field input[type=color] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: transparent;
    padding: 0;
}

.gh-table {
    border-radius: var(--app-card-radius);
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable both-edges;
}

.gh-table .mud-table-container,
.gh-table .mud-table-root,
.gh-table .mud-data-grid-table {
    min-width: max-content;
}

/* Keep MudPaper-based sections safe when content grows wide/tall. */
.gh-page-shell__body > .mud-paper {
    max-width: 100%;
    overflow: auto;
}

.gh-page-shell__body > .mud-paper.gh-overflow-auto,
.gh-page-shell__body > .mud-paper.gh-overflow-y-auto,
.gh-page-shell__body > .mud-paper.gh-overflow-x-auto {
    scrollbar-gutter: stable both-edges;
}

.gh-page-shell__body .mud-table-container,
.gh-page-shell__body .mud-data-grid {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable both-edges;
}

.gh-login-layout {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 460px);
    align-items: center;
    gap: clamp(2rem, 4vw, 5rem);
    padding: clamp(1.5rem, 4vw, 4rem);
}

.gh-login-theme-toggle {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    z-index: 2;
}

.gh-login-layout__hero {
    display: grid;
    gap: 2rem;
}

.gh-login-layout__copy {
    max-width: 640px;
    display: grid;
    gap: 1rem;
}

.gh-login-layout__copy .mud-typography-h2 {
    max-width: 12ch;
}

.gh-login-layout__art {
    width: min(100%, 620px);
    justify-self: start;
}

.gh-login-layout__card {
    display: flex;
    justify-content: center;
}

.gh-login-layout--compact {
    grid-template-columns: minmax(320px, 720px);
    justify-content: center;
}

.gh-user-avatar--interactive {
    cursor: pointer;
    user-select: none;
}

.mt-4 {
    margin-top: 1rem;
}

/* Scrollbar Utility Classes */
.gh-scroll-auto {
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.gh-scroll-hidden {
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.gh-scroll-visible {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.gh-overflow-auto {
    max-width: 100%;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

.gh-overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable both-edges;
}

.gh-overflow-y-auto {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
}

/* Dark Mode Scrollbar Adjustments */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        border: 2px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:active {
        background: rgba(255, 255, 255, 0.7);
        background-clip: content-box;
    }

    * {
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }
}

@media (max-width: 959.98px) {
    .gh-page-shell__header {
        flex-direction: column;
    }

    .gh-login-layout {
        grid-template-columns: 1fr;
    }

    .gh-login-layout__art {
        display: none;
    }
}