/*--------------------------------------------------------------
# Material Design 3 Theme Tokens
--------------------------------------------------------------*/

:root {
    /* Vibrant Color Palette - Electric Aqua & Deep Violet */
    --md-sys-color-primary: #6366f1;
    /* Electric Indigo */
    --md-sys-color-primary-container: #e0e7ff;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #1e1b4b;

    /* Secondary Colors - Cyan Glow */
    --md-sys-color-secondary: #06b6d4;
    --md-sys-color-secondary-container: #cffafe;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-on-secondary-container: #083344;

    /* Tertiary Colors - Rose Accent */
    --md-sys-color-tertiary: #f43f5e;
    --md-sys-color-tertiary-container: #ffe4e6;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-on-tertiary-container: #4c0519;

    /* Error Colors */
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-on-error-container: #410002;

    /* Success Colors */
    --md-sys-color-success: #006e2a;
    --md-sys-color-success-container: #92f99d;
    --md-sys-color-on-success: #ffffff;
    --md-sys-color-on-success-container: #002106;

    /* Warning Colors */
    --md-sys-color-warning: #a97900;
    --md-sys-color-warning-container: #ffdf9e;
    --md-sys-color-on-warning: #ffffff;
    --md-sys-color-on-warning-container: #261900;

    /* Background Colors */
    --md-sys-color-background: #fdfbff;
    --md-sys-color-on-background: #1a1b1f;

    /* Surface Colors */
    --md-sys-color-surface: #fdfbff;
    --md-sys-color-surface-variant: #e0e2ec;
    --md-sys-color-on-surface: #1a1b1f;
    --md-sys-color-on-surface-variant: #44474e;

    /* Surface Containers */
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f3f3fa;
    --md-sys-color-surface-container: #eeeef6;
    --md-sys-color-surface-container-high: #e8e8f1;
    --md-sys-color-surface-container-highest: #e2e2ec;

    /* Outline */
    --md-sys-color-outline: #74777f;
    --md-sys-color-outline-variant: #c4c6d0;

    /* Elevation & Shadow */
    --md-sys-elevation-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    --md-sys-elevation-level1: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    --md-sys-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.05);
    --md-sys-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.05);
    --md-sys-elevation-level4: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
    --md-sys-elevation-level5: 0px 8px 12px 6px rgba(0, 0, 0, 0.05);

    /* Shape - Organic Pill Enforcement */
    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 12px;
    --md-sys-shape-corner-medium: 20px;
    --md-sys-shape-corner-large: 28px;
    --md-sys-shape-corner-extra-large: 40px;
    --md-sys-shape-corner-pill: 999px;

    /* Typography Scale */
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-weight: 400;

    --md-sys-typescale-display-medium-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-medium-weight: 400;

    --md-sys-typescale-display-small-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    --md-sys-typescale-display-small-weight: 400;

    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-large-weight: 600;

    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-headline-medium-line-height: 36px;
    --md-sys-typescale-headline-medium-weight: 600;

    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-weight: 600;

    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-large-weight: 500;

    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-weight: 500;

    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-weight: 500;

    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-weight: 400;

    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-weight: 400;

    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-weight: 400;

    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-weight: 500;

    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-weight: 500;

    --md-sys-typescale-label-small-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-weight: 500;

    /* Spacing Scale */
    --md-sys-spacing-0: 0px;
    --md-sys-spacing-1: 4px;
    --md-sys-spacing-2: 8px;
    --md-sys-spacing-3: 12px;
    --md-sys-spacing-4: 16px;
    --md-sys-spacing-5: 20px;
    --md-sys-spacing-6: 24px;
    --md-sys-spacing-7: 28px;
    --md-sys-spacing-8: 32px;
    --md-sys-spacing-10: 40px;
    --md-sys-spacing-12: 48px;
    --md-sys-spacing-16: 64px;
}

/*--------------------------------------------------------------
# Material Components Theming
--------------------------------------------------------------*/

md-filled-button {
    --md-filled-button-container-color: var(--md-sys-color-primary);
    --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-button-container-shape: var(--md-sys-shape-corner-pill);
}

/* Material Outlined Button */
md-outlined-button {
    --md-outlined-button-outline-color: var(--md-sys-color-outline);
    --md-outlined-button-label-text-color: var(--md-sys-color-primary);
    --md-outlined-button-container-shape: var(--md-sys-shape-corner-pill);
}

/* Material Text Button */
md-text-button {
    --md-text-button-label-text-color: var(--md-sys-color-primary);
}

/* Material Filled Text Field */
md-filled-text-field {
    --md-filled-text-field-container-color: var(--md-sys-color-surface-variant);
    --md-filled-text-field-active-indicator-color: var(--md-sys-color-primary);
    --md-filled-text-field-focus-active-indicator-color: var(--md-sys-color-primary);
    --md-filled-text-field-label-text-color: var(--md-sys-color-on-surface-variant);
    --md-filled-text-field-input-text-color: var(--md-sys-color-on-surface);
}

/* Material Outlined Text Field */
md-outlined-text-field {
    --md-outlined-text-field-outline-color: var(--md-sys-color-outline);
    --md-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);
    --md-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);
    --md-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);
}

/* Material Select */
md-filled-select,
md-outlined-select {
    --md-filled-select-text-field-container-color: var(--md-sys-color-surface-variant);
    --md-filled-select-text-field-active-indicator-color: var(--md-sys-color-primary);
}

/* Material Elevated Card */
md-elevated-card {
    --md-elevated-card-container-color: var(--md-sys-color-surface);
    --md-elevated-card-container-elevation: var(--md-sys-elevation-level1);
    --md-elevated-card-container-shape: var(--md-sys-shape-corner-medium);
}

/* Material Filled Card */
md-filled-card {
    --md-filled-card-container-color: var(--md-sys-color-surface-variant);
    --md-filled-card-container-shape: var(--md-sys-shape-corner-medium);
}

/* Material Dialog */
md-dialog {
    --md-dialog-container-color: var(--md-sys-color-surface);
    --md-dialog-container-shape: var(--md-sys-shape-corner-extra-large);
    --md-dialog-headline-color: var(--md-sys-color-on-surface);
    --md-dialog-supporting-text-color: var(--md-sys-color-on-surface-variant);
}

/* Material Navigation Drawer */
md-navigation-drawer {
    --md-navigation-drawer-container-color: var(--md-sys-color-surface);
    --md-navigation-drawer-container-shape: 0;
}

/* Material List */
md-list {
    --md-list-container-color: transparent;
}

md-list-item {
    --md-list-item-label-text-color: var(--md-sys-color-on-surface);
    --md-list-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
}

/* Material Chip */
md-chip,
md-filter-chip,
md-assist-chip {
    --md-chip-elevated-container-color: var(--md-sys-color-surface-variant);
    --md-chip-label-text-color: var(--md-sys-color-on-surface-variant);
}

/* Material FAB */
md-fab {
    --md-fab-container-color: var(--md-sys-color-primary-container);
    --md-fab-icon-color: var(--md-sys-color-on-primary-container);
}

/*--------------------------------------------------------------
# RTL Support
--------------------------------------------------------------*/

[dir="rtl"] md-navigation-drawer {
    right: 0;
    left: auto;
}

[dir="rtl"] md-list-item {
    text-align: right;
}

[dir="rtl"] md-filled-text-field,
[dir="rtl"] md-outlined-text-field {
    direction: rtl;
    text-align: right;
}

/*--------------------------------------------------------------
# Material Symbols Icons
--------------------------------------------------------------*/

.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-size: 24px;
    user-select: none;
}

.material-symbols-filled {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* Icon sizes */
.icon-sm {
    font-size: 18px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20;
}

.icon-md {
    font-size: 24px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.icon-lg {
    font-size: 32px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 40;
}

.icon-xl {
    font-size: 48px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}

/*--------------------------------------------------------------
# Utility Classes
--------------------------------------------------------------*/

.elevation-0 {
    box-shadow: var(--md-sys-elevation-level0);
}

.elevation-1 {
    box-shadow: var(--md-sys-elevation-level1);
}

.elevation-2 {
    box-shadow: var(--md-sys-elevation-level2);
}

.elevation-3 {
    box-shadow: var(--md-sys-elevation-level3);
}

.elevation-4 {
    box-shadow: var(--md-sys-elevation-level4);
}

.elevation-5 {
    box-shadow: var(--md-sys-elevation-level5);
}

.surface {
    background-color: var(--md-sys-color-surface);
}

.surface-variant {
    background-color: var(--md-sys-color-surface-variant);
}

.primary {
    color: var(--md-sys-color-primary);
}

.on-primary {
    color: var(--md-sys-color-on-primary);
}

.secondary {
    color: var(--md-sys-color-secondary);
}

.on-surface {
    color: var(--md-sys-color-on-surface);
}

.on-surface-variant {
    color: var(--md-sys-color-on-surface-variant);
}

.error {
    color: var(--md-sys-color-error);
}

.success {
    color: var(--md-sys-color-success);
}

.warning {
    color: var(--md-sys-color-warning);
}

/* Spacing utilities */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: var(--md-sys-spacing-1);
}

.m-2 {
    margin: var(--md-sys-spacing-2);
}

.m-3 {
    margin: var(--md-sys-spacing-3);
}

.m-4 {
    margin: var(--md-sys-spacing-4);
}

.m-5 {
    margin: var(--md-sys-spacing-5);
}

.m-6 {
    margin: var(--md-sys-spacing-6);
}

.mt-1 {
    margin-top: var(--md-sys-spacing-1);
}

.mt-2 {
    margin-top: var(--md-sys-spacing-2);
}

.mt-3 {
    margin-top: var(--md-sys-spacing-3);
}

.mt-4 {
    margin-top: var(--md-sys-spacing-4);
}

.mt-5 {
    margin-top: var(--md-sys-spacing-5);
}

.mt-6 {
    margin-top: var(--md-sys-spacing-6);
}

.mb-1 {
    margin-bottom: var(--md-sys-spacing-1);
}

.mb-2 {
    margin-bottom: var(--md-sys-spacing-2);
}

.mb-3 {
    margin-bottom: var(--md-sys-spacing-3);
}

.mb-4 {
    margin-bottom: var(--md-sys-spacing-4);
}

.mb-5 {
    margin-bottom: var(--md-sys-spacing-5);
}

.mb-6 {
    margin-bottom: var(--md-sys-spacing-6);
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: var(--md-sys-spacing-1);
}

.p-2 {
    padding: var(--md-sys-spacing-2);
}

.p-3 {
    padding: var(--md-sys-spacing-3);
}

.p-4 {
    padding: var(--md-sys-spacing-4);
}

.p-5 {
    padding: var(--md-sys-spacing-5);
}

.p-6 {
    padding: var(--md-sys-spacing-6);
}

/* Layout utilities */
.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-none {
    display: none;
}

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

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

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

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

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

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

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

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

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

.gap-1 {
    gap: var(--md-sys-spacing-1);
}

.gap-2 {
    gap: var(--md-sys-spacing-2);
}

.gap-3 {
    gap: var(--md-sys-spacing-3);
}

.gap-4 {
    gap: var(--md-sys-spacing-4);
}

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

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

.text-left {
    text-align: left;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}