/* ==========================================================================
   Base compartilhada: reset, elementos e componentes genéricos (botão, campo,
   cartão, alerta, chip). Só usa tokens de ui-tokens.css. Carregada logo após
   os tokens em todas as áreas; folhas de área/página acrescentam, não refazem.
   ========================================================================== */
@layer base {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body { margin: 0; min-height: 100vh; background: var(--ui-bg); }
    img, svg, video { display: block; max-width: 100%; height: auto; }
    h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
    h1, h2, h3, h4 { line-height: 1.2; font-weight: var(--ui-weight-semibold); letter-spacing: -.015em; }
    b, strong { font-weight: var(--ui-weight-semibold); }
    /* Link de componente (com classe: botão, menu, logo, ícone) não leva
       sublinhado; link solto no meio do texto continua sublinhado. */
    a { color: var(--ui-primary); text-decoration: none; }
    :where(p, li, dd, td, small, label, figcaption) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
    a:not([class]):hover { text-decoration: underline; }
    small { font-size: .875em; }
    button { cursor: pointer; }
    :disabled { cursor: not-allowed; }
    table { border-collapse: collapse; width: 100%; }

    .visually-hidden, .visually-hidden-field, .visually-hidden-file, .sr-only {
        position: absolute !important;
        width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }

    /* Contêiner de página */
    .ui-container { width: min(1120px, 100% - 32px); margin-inline: auto; }
    .ui-container-narrow { width: min(760px, 100% - 32px); margin-inline: auto; }

    /* Botões */
    .ui-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        min-height: var(--ui-control-height); padding: 0 18px;
        border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm);
        background: var(--ui-surface); color: var(--ui-text);
        font-weight: var(--ui-weight-semibold); font-size: 15px; line-height: 1.2; text-decoration: none;
        transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    }
    .ui-btn:hover { background: var(--ui-surface-soft); border-color: var(--ui-gray-400); }
    .ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
    .ui-btn-primary { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
    .ui-btn-primary:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: #fff; }
    .ui-btn-ghost { border-color: transparent; background: transparent; }
    .ui-btn-ghost:hover { background: var(--ui-primary-soft); border-color: transparent; color: var(--ui-primary); }
    .ui-btn-danger { background: var(--ui-danger); border-color: var(--ui-danger); color: #fff; }
    .ui-btn-danger:hover { background: var(--ui-danger-hover); border-color: var(--ui-danger-hover); color: #fff; }
    .ui-btn-sm { min-height: var(--ui-control-height-sm); padding: 0 12px; font-size: 14px; }

    /* Campos */
    .ui-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
    .ui-label { font-size: 13px; font-weight: var(--ui-weight-semibold); color: var(--ui-text); }
    .ui-label small { font-weight: var(--ui-weight-medium); color: var(--ui-muted); }
    .ui-input, .ui-select, .ui-textarea {
        width: 100%; min-height: var(--ui-control-height); padding: 0 12px;
        border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
        background: var(--ui-surface); color: var(--ui-text); font-size: 16px;
        transition: border-color 120ms ease, box-shadow 120ms ease;
    }
    .ui-textarea { min-height: 120px; padding: 10px 12px; resize: vertical; }
    .ui-select { padding-right: 36px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23566563' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
    .ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--ui-border-strong); }
    .ui-select { cursor: pointer; }
    .ui-select:disabled { cursor: not-allowed; background-color: var(--ui-surface-soft); color: var(--ui-muted); }
    .ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--ui-primary); box-shadow: var(--ui-focus-ring); }
    .ui-input::placeholder, .ui-textarea::placeholder { color: var(--ui-gray-400); }
    .ui-input.is-invalid, .ui-select.is-invalid, .ui-textarea.is-invalid { border-color: var(--ui-danger); box-shadow: 0 0 0 3px var(--ui-danger-soft); }
    .ui-input.is-invalid:focus, .ui-select.is-invalid:focus, .ui-textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgb(180 35 24 / 15%); }
    .ui-input.is-valid, .ui-select.is-valid, .ui-textarea.is-valid { border-color: var(--ui-success); }
    /* Texto de ajuda: uma regra para .ui-help (painel) e .form-help (cadastro,
       admin). Estados por is-* (painel) ou text-* (public-register.js). */
    .ui-help, .form-help { font-size: var(--ui-text-sm); line-height: 1.45; color: var(--ui-muted); }
    :is(.ui-help, .form-help):is(.is-error, .text-danger), .invalid-feedback { color: var(--ui-danger); }
    :is(.ui-help, .form-help):is(.is-success, .text-success) { color: var(--ui-success); }
    :is(.ui-help, .form-help):is(.is-warning, .text-warning) { color: var(--ui-warning); }
    :is(.ui-help, .form-help):is(.is-info, .text-info) { color: var(--ui-info); }
    .invalid-feedback { font-size: var(--ui-text-sm); line-height: 1.45; }
    .invalid-feedback:empty { display: none; }
    .ui-error { font-size: 13px; color: var(--ui-danger); }
    .ui-field-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .ui-field-grid .ui-field-full { grid-column: 1 / -1; }

    /* Lista de opções do select: nos navegadores com select personalizável
       (appearance: base-select) a lista aberta segue o visual do sistema em vez
       do menu nativo; nos demais continua o menu do sistema operacional. */
    @supports (appearance: base-select) {
        .ui-select:not([multiple]):not([size]), .ui-select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
        .ui-select:not([multiple]):not([size]) { display: flex; align-items: center; }
        .ui-select::picker-icon { display: none; }
        .ui-select::picker(select) {
            margin-top: 6px;
            padding: 6px;
            border: 1px solid var(--ui-border);
            border-radius: var(--ui-radius-md);
            background: var(--ui-surface);
            box-shadow: 0 16px 36px -12px rgb(16 42 40 / 22%), 0 2px 6px rgb(16 42 40 / 6%);
            max-height: min(340px, 60vh);
            scrollbar-width: thin;
        }
        .ui-select option {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 38px;
            padding: 8px 12px;
            border-radius: var(--ui-radius-sm);
            color: var(--ui-text);
            font-size: 14.5px;
            cursor: pointer;
        }
        .ui-select option:hover, .ui-select option:focus-visible { outline: none; background: var(--ui-gray-50); box-shadow: inset 0 0 0 1px var(--ui-gray-200); }
        .ui-select option:checked { background: var(--ui-primary-soft); color: var(--ui-primary-hover); font-weight: var(--ui-weight-medium); }
        .ui-select option::checkmark { order: 2; margin-left: auto; color: var(--ui-primary); }
        .ui-select option:disabled { color: var(--ui-gray-400); cursor: default; }
        .ui-select optgroup { padding: 4px 0; color: var(--ui-muted); font-size: 12px; font-weight: var(--ui-weight-semibold); }
    }

    /* Tons dos chips de ícone (campos do painel, blocos do cadastro). */
    [data-tone="blue"] { --tone-bg: #e8f0fe; --tone-fg: #2f6fde; }
    [data-tone="green"] { --tone-bg: #e6f5ec; --tone-fg: #2c8a52; }
    [data-tone="teal"] { --tone-bg: var(--ui-primary-soft); --tone-fg: var(--ui-primary); }
    [data-tone="cyan"] { --tone-bg: #e2f5f9; --tone-fg: #127f9b; }
    [data-tone="purple"] { --tone-bg: #f0ebfd; --tone-fg: #7350d1; }
    [data-tone="sky"] { --tone-bg: #e8f1fb; --tone-fg: #2a68ad; }
    [data-tone="amber"] { --tone-bg: #fff2da; --tone-fg: #b87207; }
    [data-tone="rose"] { --tone-bg: #fdecef; --tone-fg: #c93c55; }
    .ui-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
    .ui-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ui-primary); flex: none; }

    /* Cartões, alertas, chips */
    .ui-card {
        background: var(--ui-surface); border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm);
    }
    .ui-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ui-border); }
    .ui-card-title, .company-card-title { font-size: var(--ui-title-sm); font-weight: var(--ui-weight-semibold); line-height: 1.3; letter-spacing: -.01em; }
    .ui-alert {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md);
        background: var(--ui-surface-soft); color: var(--ui-text); font-size: 14px;
    }
    .ui-alert-success { background: var(--ui-success-soft); border-color: var(--ui-success-border); color: var(--ui-success); }
    .ui-alert-danger { background: var(--ui-danger-soft); border-color: var(--ui-danger-border); color: var(--ui-danger); }
    .ui-alert-info { background: var(--ui-info-soft); border-color: var(--ui-info-border); color: var(--ui-info); }
    .ui-alert-warning { background: var(--ui-warning-soft); border-color: var(--ui-warning-border); color: var(--ui-warning); }

    /* Chip: componente único para rótulo curto de estado/contagem (público,
       empresa e admin). Tom por classe (.ui-chip-success…) ou por [data-tone];
       texto longo vai em .ui-chip-label (recebe reticências). Ícone dentro do
       chip: app_icon(nome, 'ui-icon-xs'). */
    .ui-chip {
        --chip-bg: var(--ui-surface-soft); --chip-fg: var(--ui-gray-700); --chip-bd: var(--ui-border);
        display: inline-flex; align-items: center; gap: 6px;
        max-width: 100%; min-width: 0; min-height: 24px; padding: 2px 10px;
        border: 1px solid var(--chip-bd); border-radius: var(--ui-radius-pill);
        background: var(--chip-bg); color: var(--chip-fg);
        font-size: 12.5px; font-weight: var(--ui-weight-medium); line-height: 1.3; letter-spacing: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
    }
    .ui-chip:empty { display: none; }
    .ui-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .ui-chip-sm { min-height: 20px; padding: 1px 8px; font-size: 12px; gap: 4px; }
    .ui-chip-lg { min-height: 32px; padding: 4px 12px; font-size: 14px; }
    .ui-chip-wrap { white-space: normal; border-radius: var(--ui-radius-md); }
    .ui-chip[data-tone] { --chip-bg: var(--tone-bg); --chip-fg: var(--tone-fg); --chip-bd: transparent; }
    .ui-chip-primary { --chip-bg: var(--ui-primary-soft); --chip-fg: var(--ui-primary-hover); --chip-bd: var(--ui-primary-border); }
    .ui-chip-success { --chip-bg: var(--ui-success-soft); --chip-fg: var(--ui-success); --chip-bd: var(--ui-success-border); }
    .ui-chip-warning { --chip-bg: var(--ui-warning-soft); --chip-fg: var(--ui-warning); --chip-bd: var(--ui-warning-border); }
    .ui-chip-danger { --chip-bg: var(--ui-danger-soft); --chip-fg: var(--ui-danger); --chip-bd: var(--ui-danger-border); }
    .ui-chip-info { --chip-bg: var(--ui-info-soft); --chip-fg: var(--ui-info); --chip-bd: var(--ui-info-border); }
    .ui-chip-accent { --chip-bg: var(--ui-accent-soft); --chip-fg: var(--ui-accent); --chip-bd: transparent; }
    .ui-chip-solid { --chip-bg: var(--chip-fg); --chip-bd: transparent; color: #fff; }
    .ui-chip-plain { --chip-bg: transparent; --chip-bd: transparent; padding-inline: 0; }
    .ui-chip-dot::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .ui-chip-upper { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
    /* Selo "empate": quem divide a posição na categoria (campaign_tie_badge). */
    .tie-badge { --chip-bg: var(--ui-accent-soft); --chip-fg: var(--ui-accent); --chip-bd: transparent; min-height: 18px; margin-inline-start: .45em; padding: 0 7px; font-size: 11px; font-weight: var(--ui-weight-medium); letter-spacing: .02em; vertical-align: .12em; flex: none; }
    .ui-eyebrow { font-size: var(--ui-text-xs); font-weight: var(--ui-weight-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--ui-accent); }
    .ui-muted { color: var(--ui-muted); }

    /* Estado vazio */
    .ui-empty {
        padding: 28px 20px; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-md);
        background: var(--ui-surface); text-align: center; color: var(--ui-muted);
    }
}