/*
 * Academia Empreendedor — tokens Material Design 3 (Fase 4) e
 * componentes base partilhados pelo frontend publico e backoffice.
 * Sem dependencia de bibliotecas de terceiros: tokens escritos a mao
 * a partir da especificacao M3 (m3.material.io), com a cor-semente
 * por omissao da Academia Empreendedor (#154C79).
 */

:root {
    --md-sys-color-primary: #154C79;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d3e4ff;
    --md-sys-color-on-primary-container: #001c38;
    --md-sys-color-secondary: #55606e;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #d9e4f5;
    --md-sys-color-on-secondary-container: #121c29;
    --md-sys-color-surface: #fdfbff;
    --md-sys-color-on-surface: #1a1c1e;
    --md-sys-color-surface-container: #f0f0f4;
    --md-sys-color-surface-container-high: #e8e9ed;
    --md-sys-color-surface-variant: #dee3eb;
    --md-sys-color-on-surface-variant: #42474e;
    --md-sys-color-outline: #72777f;
    --md-sys-color-outline-variant: #c2c7cf;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --md-sys-color-success: #2e6e3e;
    --md-sys-color-success-container: #c3f2cc;
    --md-sys-shape-xs: 4px;
    --md-sys-shape-sm: 8px;
    --md-sys-shape-md: 12px;
    --md-sys-shape-lg: 16px;
    --md-sys-shape-xl: 28px;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --md-sys-color-primary: #a4c9ff;
        --md-sys-color-on-primary: #00325b;
        --md-sys-color-primary-container: #154c79;
        --md-sys-color-on-primary-container: #d3e4ff;
        --md-sys-color-secondary: #bdc9d9;
        --md-sys-color-on-secondary: #27323f;
        --md-sys-color-secondary-container: #3d4757;
        --md-sys-color-on-secondary-container: #d9e4f5;
        --md-sys-color-surface: #121316;
        --md-sys-color-on-surface: #e2e2e6;
        --md-sys-color-surface-container: #1e2022;
        --md-sys-color-surface-container-high: #292a2d;
        --md-sys-color-surface-variant: #42474e;
        --md-sys-color-on-surface-variant: #c2c7cf;
        --md-sys-color-outline: #8c9199;
        --md-sys-color-outline-variant: #42474e;
        --md-sys-color-error-container: #93000a;
        --md-sys-color-on-error-container: #ffdad6;
        --md-sys-color-success: #a8d5b3;
        --md-sys-color-success-container: #0f5223;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100dvh;
}

body {
    font-family: Roboto, system-ui, -apple-system, sans-serif;
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

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

h1, h2, h3, h4 { font-weight: 400; margin: 0 0 8px; }
h1 { font-size: 1.75rem; line-height: 2.25rem; }
h2 { font-size: 1.375rem; line-height: 1.75rem; }
h3 { font-size: 1.125rem; line-height: 1.5rem; }

p { line-height: 1.5rem; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* App bar */
.app-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-container);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-bar .brand {
    font-weight: 500;
    font-size: 1.125rem;
    text-decoration: none;
    color: var(--md-sys-color-on-surface);
}

.app-bar nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.app-bar nav a, .app-bar nav button {
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
    font-size: 0.875rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 100px;
    border: none;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.25rem;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

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

.btn.text {
    background: transparent;
    color: var(--md-sys-color-primary);
    padding: 10px 12px;
}

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

/* Inputs */
.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.field label {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}

.field input, .field select, .field textarea {
    padding: 12px 16px;
    border-radius: var(--md-sys-shape-sm);
    border: 1px solid var(--md-sys-color-outline);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    font-size: 1rem;
    font-family: inherit;
}

.field textarea { resize: vertical; min-height: 96px; }

/* Cards */
.card {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-lg);
    padding: 16px;
}

.card.elevated { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--md-sys-shape-sm);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    font-size: 0.75rem;
}

.badge-error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

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

.progress-bar {
    height: 8px;
    border-radius: 100px;
    background: var(--md-sys-color-surface-variant);
    overflow: hidden;
}

.progress-bar > div {
    height: 100%;
    background: var(--md-sys-color-primary);
    transition: width 0.3s ease;
}

.snackbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--md-sys-color-on-surface);
    color: var(--md-sys-color-surface);
    padding: 12px 20px;
    border-radius: var(--md-sys-shape-sm);
    font-size: 0.875rem;
    z-index: 100;
    max-width: calc(100% - 32px);
}

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

.empty-state {
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
    padding: 48px 16px;
}

footer.app-footer {
    padding: 24px 16px 40px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}

table { width: 100%; border-collapse: collapse; }
table th, table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.875rem;
}

.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.hidden { display: none !important; }
.stars { color: #f5a623; letter-spacing: 2px; }
.muted { color: var(--md-sys-color-on-surface-variant); }