/*
 * Tema visual compartilhado pelo CRM, autenticação e Portal do Cliente.
 * A preferência é aplicada por theme.js antes do carregamento das folhas de estilo.
 */
:root,
html[data-theme="light"] {
    color-scheme: light;
    color: var(--ink);
    background: var(--bg);
    --nav: #122033;
    --nav2: #1b2d46;
    --ink: #17243a;
    --muted: #69778b;
    --line: #dfe6ef;
    --bg: #f5f7fa;
    --card: #fff;
    --brand: #25a8a0;
    --brand-dark: #167d78;
    --danger: #b42318;
    --theme-surface: #fff;
    --theme-surface-alt: #eaf0f5;
    --theme-field: #fff;
    --theme-hover: #edf2f7;
    --theme-inset: #f8fafc;
    --theme-success-bg: #ecfdf3;
    --theme-success-text: #067647;
    --theme-danger-bg: #fef3f2;
    --theme-danger-text: #b42318;
    --theme-warning-bg: #fff4d6;
    --theme-warning-text: #684b00;
    --theme-shadow: 0 8px 28px rgba(18, 32, 51, .08);
    --shadow: var(--theme-shadow);
}

html[data-theme="dark"] {
    color-scheme: dark;
    color: var(--ink);
    background: var(--bg);
    --nav: #08111f;
    --nav2: #16243a;
    --ink: #e7edf6;
    --muted: #aab7ca;
    --line: #334258;
    --bg: #0d1624;
    --card: #172235;
    --brand: #37bdb5;
    --brand-dark: #4ecdc4;
    --danger: #ff9a91;
    --theme-surface: #172235;
    --theme-surface-alt: #202d41;
    --theme-field: #101b2b;
    --theme-hover: #26364d;
    --theme-inset: #101a29;
    --theme-success-bg: #10352b;
    --theme-success-text: #75e0b4;
    --theme-danger-bg: #3c2023;
    --theme-danger-text: #ffaaa3;
    --theme-warning-bg: #3b3018;
    --theme-warning-text: #f2d27b;
    --theme-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    --shadow: var(--theme-shadow);
}

html,
body,
.topbar,
.panel,
.metric,
dialog,
.portal-top,
.portal-product-card,
.portal-empty,
.portal-rich-content,
.portal-promotions article,
.portal-gallery figure,
.portal-download-grid article {
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

html {
    color: var(--ink);
    background: var(--bg);
}

body {
    color: var(--ink);
    background: var(--bg);
}

.topbar,
.metric,
.panel,
dialog,
.user-menu-popover,
.deal-card,
.project-task,
.permission-choice,
.portal-asset-admin-item,
.portal-media-admin-item,
.calendar-day,
.company-target-list .check-row,
.template-preview,
.variable-token {
    color: var(--ink);
    background: var(--theme-surface);
    border-color: var(--line);
}

.metric,
.panel {
    box-shadow: var(--theme-shadow);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
    color: var(--ink);
    background: var(--theme-field);
    border-color: var(--line);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: .9;
}

.button.secondary,
.help-button,
.table-pagination button,
.access-count {
    color: var(--ink);
    background: var(--theme-hover);
    border-color: var(--line);
}

.button.secondary:hover,
.help-button:hover,
.table-pagination button:hover:not(:disabled) {
    background: var(--theme-surface-alt);
}

.kanban-column,
.project-column,
.automation-flow > div,
.calendar-task,
.milestone-row span,
.calendar-day.empty,
.company-target-list,
.version-list pre,
kbd {
    color: var(--ink);
    background: var(--theme-surface-alt);
    border-color: var(--line);
}

.permission-choice:has(input:checked),
.section-help-purpose {
    color: var(--ink);
    background: color-mix(in srgb, var(--brand) 12%, var(--theme-surface));
    border-color: var(--brand);
}

.user-menu-popover > a:hover {
    background: var(--theme-hover);
}

html[data-theme="dark"] .button:not(.secondary) {
    background: #167d78;
}

html[data-theme="dark"] .button:not(.secondary):hover {
    background: #0f6864;
}

.product-badges small {
    color: var(--theme-success-text);
    background: var(--theme-success-bg);
}

.status.ok,
.alert.success {
    color: var(--theme-success-text);
    background: var(--theme-success-bg);
    border-color: color-mix(in srgb, var(--theme-success-text) 38%, transparent);
}

.status.bad,
.alert.error {
    color: var(--theme-danger-text);
    background: var(--theme-danger-bg);
    border-color: color-mix(in srgb, var(--theme-danger-text) 38%, transparent);
}

.profile-preview-banner {
    color: var(--theme-warning-text);
    background: var(--theme-warning-bg);
    border-color: color-mix(in srgb, var(--theme-warning-text) 45%, transparent);
}

.profile-preview-banner .button {
    color: var(--theme-warning-bg);
    background: var(--theme-warning-text);
}

.portal-asset-admin-item,
.portal-media-admin-item {
    background: color-mix(in srgb, var(--theme-surface) 94%, var(--theme-surface-alt));
}

.portal-media-thumb {
    background: var(--theme-hover);
}

.theme-control {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.theme-control select {
    width: auto;
    min-width: 112px;
    margin: 0;
    padding: 8px 30px 8px 10px;
    border-radius: 8px;
    font-size: .82rem;
}

.auth-theme-switcher {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 5;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
}

html[data-theme="light"] .auth-page {
    background:
        radial-gradient(circle at 15% 15%, #d9f3f0, transparent 42%),
        linear-gradient(135deg, #eef6f7, #dbe5ef);
}

html[data-theme="dark"] .auth-page {
    background: radial-gradient(circle at 15% 15%, #204b55, var(--nav) 42%, #070d16);
}

.auth-brand {
    color: var(--ink);
}

/* Portal do cliente: o tema altera a moldura sem substituir a identidade de cada produto. */
.client-portal {
    color: var(--ink);
    background: var(--bg);
}

.portal-top,
.portal-product-card,
.portal-empty,
.portal-rich-content,
.portal-promotions article,
.portal-gallery figure,
.portal-download-grid article,
.portal-preview-note,
.portal-skip {
    color: var(--ink);
    background: var(--theme-surface);
    border-color: var(--line);
}

.portal-brand {
    color: var(--ink);
}

.portal-account a,
.portal-account button {
    color: var(--muted);
}

.portal-account button {
    color: var(--theme-danger-text);
}

.portal-home-head span,
.portal-card-content small,
.portal-download-grid p,
.portal-download-grid small {
    color: var(--muted);
}

.portal-home-head p {
    color: var(--brand-dark);
}

.portal-product-card {
    border-bottom-color: var(--product-accent, #167d78);
}

.portal-product-card,
.portal-rich-content,
.portal-promotions article,
.portal-gallery figure,
.portal-download-grid article {
    box-shadow: var(--theme-shadow);
}

.portal-product-page {
    /* A área personalizada continua usando as cores configuradas para o produto. */
    color: var(--portal-text);
    background-color: var(--portal-background);
}

.portal-preview-note {
    box-shadow: 0 8px 30px rgba(0, 0, 0, .24);
}

@media (max-width: 760px) {
    .topbar {
        gap: 12px;
    }

    .topbar .theme-control > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .topbar .theme-control select {
        min-width: 94px;
        padding-left: 8px;
        padding-right: 24px;
    }
}

@media (max-width: 520px) {
    .auth-theme-switcher {
        top: 10px;
        right: 10px;
    }

    .auth-theme-switcher .theme-control > span {
        display: none;
    }

    .portal-account .theme-control > span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body,
    .topbar,
    .panel,
    .metric,
    dialog,
    .portal-top,
    .portal-product-card,
    .portal-empty,
    .portal-rich-content,
    .portal-promotions article,
    .portal-gallery figure,
    .portal-download-grid article {
        transition: none;
    }
}

@media (forced-colors: active) {
    .theme-control select,
    .auth-theme-switcher {
        border: 1px solid CanvasText;
    }
}