@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');
@import url('./components.css');
@import url('./page-form.css');
@import url('./page-list.css');
@import url('./page-report.css');
@import url('./page-pedagogico.css');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}
.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}
.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}
.button-link { text-decoration: unset; }

.title { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; }
.title.title-secondary { padding: 0.313rem 0 0; color: var(--dxds-color-content-secondary-default-rest); }
.title-header-text { font-size: var(--dxds-font-size-headline-lg); font-weight: var(--dxds-font-weight-headline-default); letter-spacing: var(--dxds-letter-spacing-headline-lg); line-height: var(--dxds-line-height-headline-lg); }
.title-content-text { font-size: var(--dxds-font-size-base-lg); font-weight: var(--dxds-font-weight-base-default); letter-spacing: var(--dxds-letter-spacing-base-lg); line-height: var(--dxds-line-height-base-lg); }

.main-content { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; }

/* ================================================================
   ClassOne Design Tokens
   Estetica: Linear/Notion-inspired, azul institucional
   ================================================================ */

:root {
    --co-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --co-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
    /* Aliases sem prefixo — usados em page-form.css e page-list.css */
    --font-sans: var(--co-font-sans);
    --font-mono: var(--co-font-mono);
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
    --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;
    --s-9:48px; --s-10:64px;
    --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px;
}

/* Light theme */
[data-theme='light'], .co-app {
    --bg:            oklch(0.985 0.003 240);
    --bg-subtle:     oklch(0.97  0.005 240);
    --surface:       #ffffff;
    --surface-2:     oklch(0.98  0.004 240);
    --surface-hover: oklch(0.96  0.006 240);
    --border:        oklch(0.91  0.008 240);
    --border-strong: oklch(0.85  0.010 240);
    --text:          oklch(0.20  0.020 250);
    --text-2:        oklch(0.40  0.018 250);
    --text-muted:    oklch(0.55  0.015 250);
    --text-faint:    oklch(0.70  0.012 250);
    --primary:       oklch(0.46  0.16  255);
    --primary-hover: oklch(0.41  0.17  255);
    --on-primary:    #ffffff;
    --primary-soft:  oklch(0.96  0.035 255);
    --primary-soft-2: oklch(0.92 0.06 255);
    --shadow-sm: 0 1px 2px 0 oklch(0.20 0.02 250 / 0.05);
    --shadow-md: 0 1px 3px 0 oklch(0.20 0.02 250 / 0.06), 0 1px 2px -1px oklch(0.20 0.02 250 / 0.04);
    --shadow-lg: 0 8px 24px -8px oklch(0.20 0.02 250 / 0.12), 0 4px 8px -4px oklch(0.20 0.02 250 / 0.06);
    --shadow-xl: 0 16px 40px -12px oklch(0.20 0.02 250 / 0.18), 0 6px 16px -6px oklch(0.20 0.02 250 / 0.08);
    --success:   oklch(0.65 0.18  145);
    --danger:    oklch(0.55 0.22   25);
    --warning:   oklch(0.72 0.16   70);
    --info:      oklch(0.60 0.14  240);
    --primary-pressed: var(--primary-hover);
}

/* Dark theme (cinza, nao preto) */
[data-theme='dark'] {
    --bg:            oklch(0.28 0.006 250);
    --bg-subtle:     oklch(0.32 0.007 250);
    --surface:       oklch(0.35 0.008 250);
    --surface-2:     oklch(0.38 0.008 250);
    --surface-hover: oklch(0.42 0.009 250);
    --border:        oklch(0.45 0.010 250);
    --border-strong: oklch(0.52 0.010 250);
    --text:          oklch(0.97 0.005 250);
    --text-2:        oklch(0.86 0.008 250);
    --text-muted:    oklch(0.72 0.010 250);
    --text-faint:    oklch(0.60 0.010 250);
    --primary:       oklch(0.68 0.16  255);
    --primary-hover: oklch(0.74 0.16  255);
    --on-primary:    oklch(0.16 0.012 250);
    --primary-soft:  oklch(0.28 0.06  255);
    --primary-soft-2: oklch(0.34 0.09 255);
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.30);
    --shadow-md: 0 1px 3px 0 rgba(0,0,0,0.35), 0 1px 2px -1px rgba(0,0,0,0.20);
    --shadow-lg: 0 8px 24px -8px rgba(0,0,0,0.50), 0 4px 8px -4px rgba(0,0,0,0.30);
    --shadow-xl: 0 16px 40px -12px rgba(0,0,0,0.60), 0 6px 16px -6px rgba(0,0,0,0.35);
    --success:   oklch(0.55 0.17  145);
    --danger:    oklch(0.60 0.22   25);
    --warning:   oklch(0.75 0.15   70);
    --info:      oklch(0.65 0.14  240);
    --primary-pressed: var(--primary-hover);
}

/* Base do app */
.co-app {
    font-family: var(--co-font-sans);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    container-type: inline-size;
    container-name: coapp;
    box-sizing: border-box;
}

.co-app *, .co-app *::before, .co-app *::after { box-sizing: border-box; }
.co-mono { font-family: var(--co-font-mono); font-feature-settings: 'tnum'; }