/* ===================================================================
   Base Styles - Variables, Resets, Globals
   =================================================================== */

/* Import Google Sans font */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&display=swap');

:root {
    /* New V3 Theme Variables (LIGHT defaults) */
    --color-v3-surface: #ffffff;
    --color-v3-overlay-background: rgba(252, 252, 252, 0.3);
    --color-v3-surface-left-nav: #f8f8f7;
    --color-v3-surface-container: #ffffff;
    --color-v3-surface-container-high: #f8f8f7;
    --color-v3-surface-container-highest: #e4e4e2;
    --color-v3-button-container: #ffffff;
    --color-v3-button-container-high: #f8f8f7;
    --color-v3-button-container-highest: #e4e4e2;
    --color-v3-button-container-accent: #cbdae9;
    --color-v3-text-disable: #c2bebe;
    --color-v3-text-on-button: #32302c;
    --color-v3-text-on-button-reverse: #ffffff;
    --color-v3-text: #32302c;
    --color-v3-text-var: #5d5d5f;
    --color-v3-text-link: #2483e2;
    --color-v3-outline: #e1e1e1;
    --color-v3-outline-var: #eeeeec;
    --color-v3-outline-accent: #2483e2;
    --color-v3-error-text: #690005;
    --color-v3-error-container: #ffdad6;
    --color-v3-warning-text: #2a1700;
    --color-v3-warning-container: #ffddb7;
    --color-v3-hover: #eeeeec;
    --color-v3-accent-1: #fcbd00;
    --color-v3-accent-light-1: #fff7e0;
    --color-v3-accent-2: #c597ff;
    --color-v3-accent-light-2: #f8f3ff;
    --color-v3-accent-3: #d73a49;
    --color-v3-accent-4: #3ca059;

    --v3-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --v3-shadow-sm: 0 1px 3px 0 rgba(10, 13, 18, 0.1), 0 1px 2px -1px rgba(10, 13, 18, 0.1);
    --v3-shadow-md: 0 4px 6px -1px rgba(10, 13, 18, 0.1), 0 2px 4px -2px rgba(10, 13, 18, 0.06);
    --v3-shadow-lg: 0 12px 16px -4px rgba(10, 13, 18, 0.08), 0 4px 6px -2px rgba(10, 13, 18, 0.03), 0 2px 2px -1px rgba(10, 13, 18, 0.04);

    /* Original Variables Mapped to New Theme */
    --bg-color: var(--color-v3-surface);
    --text-color: var(--color-v3-text);
    --secondary-text-color: var(--color-v3-text-var);
    --primary-color: var(--color-v3-text-link);
    --primary-color-hover: #1b6ac4; /* Darker blue for hover */
    --border-color: var(--color-v3-outline);
    --card-bg-color: var(--color-v3-surface-container-high);
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-success: var(--color-v3-accent-4);
    --color-error: var(--color-v3-accent-3);
    --color-warning: var(--color-v3-accent-1);

    --border-radius: 8px;
    --border-radius-sm: 4px;
    --header-height: 64px;
    --sidebar-width: 256px;

    /* Custom sidebar active colors */
    --sidebar-active-bg: #e0e3e7; /* Tailwind gray-100 */
    --sidebar-active-border: #d1d5db; /* Tailwind gray-300 */
    /* Hover background for sidebar items (light) pulled from common settings */
    --sidebar-hover-bg: var(--color-v3-hover);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-v3-surface: #202124;
        --color-v3-overlay-background: rgba(32, 33, 36, 0.72);
        --color-v3-surface-left-nav: #1f1f1f;
        --color-v3-surface-container: #202124;
        --color-v3-surface-container-high: #303134;
        --color-v3-surface-container-highest: #3c4043;
        --color-v3-button-container: #303134;
        --color-v3-button-container-high: #3c4043;
        --color-v3-button-container-highest: #5f6368;
        --color-v3-button-container-accent: rgba(138, 180, 248, 0.16);
        --color-v3-text-disable: #5f6368;
        --color-v3-text-on-button: #e8eaed;
        --color-v3-text-on-button-reverse: #ffffff;
        --color-v3-text: #e8eaed;
        --color-v3-text-var: #9aa0a6;
        --color-v3-text-link: #8ab4f8;
        --color-v3-outline: #3c4043;
        --color-v3-outline-var: #5f6368;
        --color-v3-outline-accent: #8ab4f8;
        --color-v3-error-text: #ffb4ab;
        --color-v3-error-container: #93000a;
        --color-v3-warning-text: #ffd29b;
        --color-v3-warning-container: #4a2a05;
        --color-v3-hover: #3c4043;
        --bg-color: #202124;
        --text-color: #e8eaed;
        --secondary-text-color: #9aa0a6;
        --primary-color: #8ab4f8;
        --primary-color-hover: #a5c7f8;
        --border-color: var(--color-v3-outline);
        --card-bg-color: var(--color-v3-surface-container-high);

        --sidebar-hover-bg: var(--color-v3-hover);
        --sidebar-active-bg: var(--color-v3-button-container-accent);
    }
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    text-decoration: underline;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* === SVGs should never show checkerboard backgrounds === */
img[src$=".svg"], svg {
    background: transparent !important;
}

/* ===== MDC Circular Progress (kept for future) ===== */
.vision8 .mdc-circular-progress {
    display: inline-flex;
    position: relative;
    direction: ltr;
    line-height: 0;
    overflow: hidden;
    transition: opacity .25s cubic-bezier(.4, 0, .6, 1);
}

.vision8 .mdc-circular-progress__determinate-circle,
.vision8 .mdc-circular-progress__indeterminate-circle-graphic {
    fill: transparent;
    stroke: var(--primary-color);
}

/* ===== Icon helpers ===== */
.vision8 .materialdesignWizIconSvgsSvgIcon {
    fill: currentColor;
    flex-shrink: 0;
}

/* ===== Typography tokens (kept; mapped to Inter already used in project) ===== */
.vision8 .gmat-display-1 {
    font: 400 64px/76px "Inter", sans-serif;
    letter-spacing: 0;
}

.vision8 .gmat-display-2 {
    font: 400 57px/64px "Inter", sans-serif;
    letter-spacing: 0;
}

.vision8 .gmat-display-3 {
    font: 400 45px/52px "Inter", sans-serif;
    letter-spacing: 0;
}

.vision8 .gmat-headline-1 {
    font: 400 36px/44px "Inter", sans-serif;
}

.vision8 .gmat-headline-2 {
    font: 400 32px/40px "Inter", sans-serif;
}

.vision8 .gmat-headline-3 {
    font: 400 28px/36px "Inter", sans-serif;
}

.vision8 .gmat-headline-4 {
    font: 400 24px/32px "Inter", sans-serif;
}

.vision8 .gmat-headline-5 {
    font: 400 22px/28px "Inter", sans-serif;
}

.vision8 .gmat-headline-6 {
    font: 400 18px/24px "Inter", sans-serif;
}

.vision8 .gmat-body-1 {
    font: 400 16px/24px "Inter", sans-serif;
}

.vision8 .gmat-body-2 {
    font: 400 14px/20px "Inter", sans-serif;
}

.vision8 .gmat-overline {
    font: 500 12px/16px "Inter", sans-serif;
}

/* ===== Elevation helpers (mapped to project shadows) ===== */
.vision8 .mat-elevation-z0 {
    box-shadow: var(--v3-shadow-xs);
}

.vision8 .mat-elevation-z1 {
    box-shadow: var(--v3-shadow-sm);
}

.vision8 .mat-elevation-z2 {
    box-shadow: var(--v3-shadow-md);
}

.vision8 .mat-elevation-z3 {
    box-shadow: var(--v3-shadow-lg);
}

/* ===== Utility: surface containers (kept for future UI parity) ===== */
.vision8 .mat-app-background {
    background-color: var(--bg-color);
    color: var(--text-color);
}