/* ==========================================================================
   base.css — Sales Booster design tokens and core components
   --------------------------------------------------------------------------
   Single source of truth for color, radius, type and buttons.
   Loaded first in base.html, before any per-page {% block head_css %}.

   Decisions recorded 2026-08-07 (see .claude/skills/frontend-salesbooster):
     neutrals  Tailwind gray ramp
     brand     #F5A623
     semantics Apple (success #34C759 / danger #FF3B30 / warning #FF9500)
     buttons   compact — 8px 16px, radius 8px, 14px/600
     naming    .button-* (never .btn-*)
     radius    8px base, 12/16 above it
     type      Manrope with system fallbacks
     tabs      underlined .context-tabs — never a segmented pill (2026-08-17)

   When adding a value here, add it as a token. Never hardcode a hex in a
   template — if a shade is missing from the ramp, extend the ramp.
   ========================================================================== */

:root {
    /* ---- neutral ramp — Tailwind gray -------------------------------- */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* ---- brand ------------------------------------------------------- */
    --brand-orange: #F5A623;
    --brand-orange-hover: #E09612;   /* pressed / hover fill */
    --brand-orange-ink: #B26A00;     /* orange TEXT on white — #F5A623 is 2.03:1 and unreadable */
    --brand-orange-tint: #FEF6E7;    /* selected rows, soft highlights */
    --brand-orange-rgb: 245, 166, 35; /* for rgba() when an alpha is needed */
    --brand-black: #1D1D1F;

    /* Marketplace identity colors — used to tag a listing/sale by origin.
       These are the partners' brand colors, not ours; do not restyle them. */
    --ml-yellow: #FFE600;
    --shopee-orange: #EE4D2D;
    --shopee-orange-hover: #E04A11;

    /* ---- text and surfaces ------------------------------------------- */
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --background-color: #FFFFFF;
    --container-bg: #FFFFFF;
    --surface-subtle: var(--gray-50);

    /* border-color stays deliberately faint (legacy app-wide look).
       Use --border-strong wherever an edge must actually be visible:
       buttons, inputs, table cells. */
    --border-color: rgba(0, 0, 0, 0.05);
    --card-border-color: rgba(0, 0, 0, 0.05);
    --border-strong: var(--gray-200);

    /* ---- semantic — Apple palette ------------------------------------ */
    /* *-base   fills, dots, icons
       *-ink    text on the matching tint (all >= 4.5:1)
       *-tint   badge / soft button background
       *-border tint outline                                              */
    --success-base:   #34C759;
    --success-ink:    #1E7A34;
    --success-tint:   #E8FAEE;
    --success-border: #A7E8BC;

    --danger-base:    #FF3B30;
    --danger-ink:     #D70015;
    --danger-tint:    #FFEBEA;
    --danger-border:  #FFC5C1;

    --warning-base:   #FF9500;
    --warning-ink:    #A85600;
    --warning-tint:   #FFF4E5;
    --warning-border: #FFD9A0;

    --info-base:      #0066CC;
    --info-ink:       #0F4C91;
    --info-tint:      #EAF3FC;
    --info-border:    #B9D6F2;

    --accent-blue: #0066CC;

    /* ---- radius — 8px base, scale 8 / 12 / 16 ------------------------ */
    --radius-sm: 6px;      /* chips, icon buttons                         */
    --radius: 8px;         /* DEFAULT — buttons, inputs, small cards      */
    --radius-card: 12px;   /* cards, panels                               */
    --radius-modal: 16px;  /* modals                                      */
    --radius-pill: 999px;  /* pills — note: 99px also appears in old code */

    /* Legacy container tokens. analytics.html and metas.css depend on
       these exact values (13 usages); changing them reflows those pages.
       Prefer --radius-card / --radius-modal in new code. */
    --radius-md: 16px;
    --radius-lg: 24px;

    /* ---- controls ----------------------------------------------------
       One height for everything that sits on a control row. Before this
       token a .button computed to 37.6px and a .form-control to 43px, so a
       button next to an input was always ~5px short and the row read as
       broken. Both now resolve to exactly this. */
    --control-height: 40px;
    --control-height-sm: 32px;   /* .button-sm, compact rows */

    /* ---- type -------------------------------------------------------- */
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;   /* DEFAULT for controls and body copy in the app */
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 24px;

    /* ---- spacing ----------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* ---- charts ------------------------------------------------------
       Categorical series colors. Line 1 is the brand orange so the primary
       series matches the rest of the UI; the remaining nine are ordered for
       adjacent-hue separation. charts.css consumes these — do not redeclare
       them there. */
    --chart-line-1:  var(--brand-orange);
    --chart-line-2:  #16A34A;
    --chart-line-3:  #6366F1;
    --chart-line-4:  #EC4899;
    --chart-line-5:  #0EA5E9;
    --chart-line-6:  #8B5CF6;
    --chart-line-7:  #F43F5E;
    --chart-line-8:  #14B8A6;
    --chart-line-9:  #D97706;
    --chart-line-10: #64748B;

    --chart-bg:        var(--container-bg);
    --chart-border:    var(--gray-200);
    --chart-grid:      var(--gray-100);
    --chart-grid-text: var(--text-muted);
    --chart-axis-text: var(--text-secondary);
    --chart-radius:    var(--radius-card);
    --chart-dot-radius: 4px;
    --chart-transition: var(--transition);

    /* ---- elevation --------------------------------------------------- */
    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 10px 40px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.2);

    --focus-ring: 0 0 0 3px rgba(245, 166, 35, 0.35);
    --transition: 0.2s ease;
}


/* ==========================================================================
   HIDDEN
   The `hidden` attribute only gets `display: none` from the user-agent sheet,
   so ANY component here that sets its own `display` silently defeats it —
   `.button` (inline-flex), `.context-tab` (inline-flex), `.empty-state`
   (flex), `.modal-overlay.active` (flex). `el.hidden = true` then does
   nothing, which is a bug that looks like a JavaScript bug and is not one.
   `!important` is deliberate: `hidden` means "not in the page", and no
   component's layout should be able to argue with it.
   ========================================================================== */

[hidden] { display: none !important; }


/* ==========================================================================
   BUTTONS
   Canonical class is .button plus one variant. `.btn-*` is deprecated —
   do not add new uses; convert on sight when editing a file.
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;

    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    min-height: var(--control-height);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition), opacity var(--transition);
}

.button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Never use `cursor: not-allowed` — rely on the native disabled attribute. */
.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* ---- primary ---------------------------------------------------------
   White on #F5A623 measures 2.03:1, below the WCAG AA 4.5:1 threshold.
   This is a deliberate brand decision. If you ever want the accessible
   variant without changing brand identity, swap the background here for
   var(--brand-orange-ink) — nothing else needs to change.               */
.button-primary {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #FFFFFF;
}
.button-primary:hover {
    background-color: var(--brand-orange-hover);
    border-color: var(--brand-orange-hover);
}

/* ---- secondary — the default for anything that is not the main action */
.button-secondary {
    background-color: var(--gray-50);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
.button-secondary:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--text-primary);
}

/* ---- danger — tinted at rest, fills on hover ------------------------- */
.button-danger {
    background-color: var(--danger-tint);
    border-color: var(--danger-border);
    color: var(--danger-ink);
}
.button-danger:hover {
    background-color: var(--danger-ink);
    border-color: var(--danger-ink);
    color: #FFFFFF;
}

/* Use inside a confirmation modal, where destroying is the point. */
.button-danger-solid {
    background-color: var(--danger-ink);
    border-color: var(--danger-ink);
    color: #FFFFFF;
}
.button-danger-solid:hover {
    background-color: #B3000F;
    border-color: #B3000F;
}

/* ---- success ---------------------------------------------------------- */
.button-success {
    background-color: var(--success-tint);
    border-color: var(--success-border);
    color: var(--success-ink);
}
.button-success:hover {
    background-color: var(--success-ink);
    border-color: var(--success-ink);
    color: #FFFFFF;
}

/* ---- AI-assisted action ----------------------------------------------
   For actions where the work is done by AI. Brand-tinted at rest so it
   stands out from a plain secondary without stealing the single primary
   of the view; fills on hover. Always pair it with the sparkle icon —
   the AI cue has to be visual, not only in the label.                    */
.button-ai {
    background-color: var(--brand-orange-tint);
    border-color: rgba(var(--brand-orange-rgb), 0.45);
    color: var(--brand-orange-ink);
}
.button-ai:hover {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #FFFFFF;
}

/* ---- ghost / text ----------------------------------------------------- */
.button-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.button-ghost:hover {
    background-color: var(--gray-100);
    color: var(--text-primary);
}

/* ---- icon-only — always give it an aria-label and an SVG, never an emoji */
.button-icon {
    padding: 6px;
    border-radius: var(--radius-sm);
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
}
.button-icon:hover {
    background-color: var(--gray-100);
    color: var(--text-primary);
}
.button-icon.danger:hover {
    background-color: var(--danger-tint);
    color: var(--danger-ink);
}

/* ---- sizes ------------------------------------------------------------ */
.button-sm {
    /* Own height: without it the .button min-height would inflate every small
       button to 40px and there would be no small button left. 12px of side
       padding because these carry real sentences ("Usar dados do produto"),
       not one-word labels. */
    min-height: var(--control-height-sm);
    padding: 5px 12px;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}
.button-lg {
    padding: 11px 22px;
    font-size: var(--text-lg);
}
.button-block {
    display: flex;
    width: 100%;
}


/* ==========================================================================
   STATUS BADGE
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.badge-success { background-color: var(--success-tint); color: var(--success-ink); border-color: var(--success-border); }
.badge-danger  { background-color: var(--danger-tint);  color: var(--danger-ink);  border-color: var(--danger-border);  }
.badge-warning { background-color: var(--warning-tint); color: var(--warning-ink); border-color: var(--warning-border); }
.badge-info    { background-color: var(--info-tint);    color: var(--info-ink);    border-color: var(--info-border);    }
.badge-neutral { background-color: var(--gray-100);     color: var(--text-secondary); border-color: var(--gray-200);    }


/* ==========================================================================
   CONTEXT TABS
   Underlined tab strip used to switch the context of a page (tag contexts,
   marketplace, rule type). Buttons or links; mark the current one `.active`.
   ========================================================================== */

.context-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-5);
}

.context-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -1px;
    white-space: nowrap;
}

.context-tab:hover {
    color: var(--text-primary);
}

.context-tab.active {
    color: var(--brand-orange);
    border-bottom-color: var(--brand-orange);
}


/* ==========================================================================
   CARD
   ========================================================================== */

.card {
    background-color: var(--container-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}


/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

.form-group { margin-bottom: var(--space-4); }

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--text-primary);
}

.form-group .help-text {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--background-color);
    transition: border-color var(--transition), box-shadow var(--transition),
                background-color var(--transition);
}
.form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
.form-control:hover {
    border-color: var(--gray-300);
    background-color: var(--gray-50);
}
.form-control:focus {
    outline: none;
    border-color: var(--brand-orange);
    background-color: var(--background-color);
    box-shadow: var(--focus-ring);
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--text-muted);
}

/* Single-line controls lock to the row height. `padding-block: 0` lets the
   flex/line centring do the vertical work, so the box is exactly
   --control-height and lines up with any .button beside it. */
input.form-control:not([type="checkbox"]):not([type="radio"]),
select.form-control:not([multiple]):not([size]) {
    height: var(--control-height);
    padding-block: 0;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}


/* ==========================================================================
   PAGE HEADER
   Title on the left, actions on the right. `.content-header` is the older
   name for the same thing — both are kept so existing markup keeps working.
   ========================================================================== */

.page-header,
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.page-header h1,
.content-header h1 {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

.page-header .subtitle,
.content-header .subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* "‹ Voltar" style link that sits above or beside a page title. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-decoration: none;
}
.back-link:hover { color: var(--text-primary); }


/* ==========================================================================
   MODAL
   Overlays are toggled with an inline `display` by the page scripts, so the
   base state stays `none` and `.active` is only a convenience for newer code.
   ========================================================================== */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-overlay.active,
.modal-overlay.show,
.modal-overlay.visible { display: flex; }

.modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-6);
    background-color: var(--container-bg);
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-modal);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.modal-header h2,
.modal-header h3 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
}

.modal-body {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
}

.modal-footer,
.modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* Centered SVG above the title in confirmation dialogs. */
.modal-icon-wrapper {
    margin-bottom: var(--space-4);
    text-align: center;
    color: var(--brand-orange);
}

.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 0;
}
.modal-close-btn:hover {
    background-color: var(--gray-100);
    color: var(--text-primary);
}


/* ==========================================================================
   ENTITY LIST
   One card per record — the clean alternative to a data table for short,
   editable lists (fiscal rules, tags). Those lists carry two or three facts
   and an action set per record, which a table turns into mostly-empty
   columns and a spreadsheet header. The card keeps the record readable and
   wraps on a phone instead of scrolling sideways.

   Markup:
     <div class="entity-list">
       <div class="entity-list-head"><span>N regras</span> ...</div>
       <div class="entity-card">
         <span class="entity-card-dot" style="background: #F5A623"></span>
         <div class="entity-card-body">
           <div class="entity-card-title">Nome <span class="badge">…</span></div>
           <p class="entity-card-desc">…</p>
           <div class="entity-card-meta"><span>…</span></div>
         </div>
         <div class="entity-card-actions"> buttons </div>
       </div>
     </div>
   ========================================================================== */

.entity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Deliberately not a table header: one quiet line of context, no fill,
   no column rules. */
.entity-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.entity-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--container-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.entity-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-soft);
}

/* A card whose whole surface opens something. The anchor stays a real
   <a href> — so middle-click, ctrl-click and "abrir em nova guia" all behave
   natively — and its ::after stretches over the card to make the entire
   surface the target. One link, one tab stop, no JS click handler to
   intercept (and swallow) a modified click.

   Anything else interactive inside the card must be lifted above the overlay,
   which the rule below does for buttons, inputs and selects. */
.entity-card-link { position: relative; }

.entity-card-link .entity-card-anchor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
}

.entity-card-link .entity-card-anchor:focus-visible {
    outline: none;
}

.entity-card-link .entity-card-anchor:focus-visible::after {
    box-shadow: var(--focus-ring);
    border-color: var(--brand-orange);
}

.entity-card-link :is(button, input, select, a:not(.entity-card-anchor)) {
    position: relative;
    z-index: 1;
}

/* Color chip — a tag color, a status. The color itself is data, so it is
   set inline by whoever renders the card. */
.entity-card-dot {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
}

.entity-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.entity-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.entity-card-desc {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.entity-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* The "nothing here yet" card takes the place of a record, so it keeps the
   list's shape — dashed, to read as absence rather than as a row. */
.entity-list .empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-card);
}

.entity-card-actions {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 640px) {
    .entity-card {
        flex-wrap: wrap;
    }
    .entity-card-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


/* ==========================================================================
   TABLE
   `.data-table` is canonical. `.styled-table` and `.standard-table` are the
   names already in the templates and resolve to the same rules.
   ========================================================================== */

.table-container {
    width: 100%;
    overflow-x: auto;
    background-color: var(--container-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--radius-card);
}

.data-table,
.styled-table,
.standard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

.data-table th,
.styled-table th,
.standard-table th {
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface-subtle);
    border-bottom: 1px solid var(--border-strong);
    text-align: left;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.data-table td,
.styled-table td,
.standard-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr:last-child td,
.styled-table tbody tr:last-child td,
.standard-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover,
.styled-table tbody tr:hover,
.standard-table tbody tr:hover { background-color: var(--gray-50); }

/* Right-align money and quantity columns. */
.data-table .is-numeric,
.styled-table .is-numeric,
.standard-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: var(--text-secondary);
}
.empty-state svg { color: var(--text-muted); }
.empty-state h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}
.empty-state p {
    margin: 0;
    max-width: 420px;
    font-size: var(--text-base);
}


/* ==========================================================================
   INLINE MESSAGE
   Static feedback inside a page or card. Transient feedback is a toast.
   ========================================================================== */

.message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: var(--text-base);
    line-height: 1.5;
    text-align: center;
}
.message.success { background-color: var(--success-tint); color: var(--success-ink); border-color: var(--success-border); }
.message.error   { background-color: var(--danger-tint);  color: var(--danger-ink);  border-color: var(--danger-border);  }
.message.warning { background-color: var(--warning-tint); color: var(--warning-ink); border-color: var(--warning-border); }
.message.info    { background-color: var(--info-tint);    color: var(--info-ink);    border-color: var(--info-border);    }


/* ==========================================================================
   AUTH SHELL
   The centered single-card layout shared by the standalone pages that sit
   outside base.html: verificação de e-mail, redefinição de senha, exclusão
   de conta, erro.
   ========================================================================== */

.auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: var(--space-5);
    box-sizing: border-box;
    background-color: var(--surface-subtle);
    font-family: var(--font-sans);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

.auth-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 450px;
    padding: var(--space-6);
    background-color: var(--container-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.auth-card .logo {
    height: 100px;
    margin-bottom: var(--space-5);
}

.auth-card h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
    font-weight: 700;
}

.auth-card p {
    margin: 0 0 var(--space-5);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
}

.auth-card p:last-child { margin-bottom: 0; }

.auth-card a { color: var(--brand-orange-ink); font-weight: 600; text-decoration: none; }
.auth-card a:hover { text-decoration: underline; }

.auth-card .message { margin-top: var(--space-5); }


/* ==========================================================================
   CHECKLIST
   Confirmation copy where each line is a commitment. The check is an SVG —
   never an emoji.
   ========================================================================== */

.checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    line-height: 1.6;
}

.checklist li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--success-base);
}


/* ==========================================================================
   FORM LAYOUT
   ========================================================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}


/* ==========================================================================
   FILTER SELECT — multi-select filter in a popover
   ==========================================================================
   Replaces `<select multiple>`, which fails at exactly this job: no search,
   the ctrl-click convention is undiscoverable, and a `size` box either
   truncates the options or towers over the controls beside it.

   The pattern instead: a trigger the height of every other control that
   states the current selection in words, and a popover holding a search field
   and a checkmarked list. Selection is shown by a check, not a checkbox — the
   space is reserved so labels never shift, and the row itself is the hit
   target.

   Markup:
     .filter-select[data-open]
       button.filter-select-trigger  > .filter-select-value + svg
       div.filter-select-popover
         .filter-select-search       > svg + input
         .filter-select-list         > button.filter-select-option[aria-selected]
                                         > svg.check + .label + .meta
         .filter-select-footer       > button + .filter-select-count
   ========================================================================== */

.filter-select {
    position: relative;
    display: inline-block;
    min-width: 260px;
}

.filter-select-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    height: var(--control-height);
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--background-color);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition),
                background-color var(--transition);
}

.filter-select-trigger:hover {
    border-color: var(--gray-300);
    background-color: var(--gray-50);
}

.filter-select-trigger:focus-visible,
.filter-select[data-open="true"] .filter-select-trigger {
    outline: none;
    border-color: var(--brand-orange);
    box-shadow: var(--focus-ring);
}

.filter-select-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-select-trigger svg {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform var(--transition);
}

.filter-select[data-open="true"] .filter-select-trigger svg {
    transform: rotate(180deg);
}

/* ---- popover ---- */

.filter-select-popover {
    position: absolute;
    z-index: 50;
    top: calc(100% + var(--space-2));
    left: 0;
    width: 100%;
    min-width: 280px;
    display: none;
    flex-direction: column;
    max-height: 340px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background-color: var(--container-bg);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
}

.filter-select[data-open="true"] .filter-select-popover {
    display: flex;
    animation: filter-select-in 0.14s ease-out;
}

/* Rises 4px while fading. Enough to read as "this came from the button",
   not enough to be a performance. */
@keyframes filter-select-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.filter-select-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-muted);
}

.filter-select-search svg { flex-shrink: 0; }

.filter-select-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
}

.filter-select-search input::placeholder { color: var(--text-muted); }

.filter-select-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-1);
}

.filter-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.filter-select-option:hover { background-color: var(--gray-50); }
.filter-select-option:focus-visible {
    outline: none;
    background-color: var(--gray-100);
}

.filter-select-option[aria-selected="true"] {
    background-color: var(--brand-orange-tint);
    font-weight: 600;
}

/* The check keeps its box whether or not it is shown, so nothing shifts
   sideways as options are selected. */
.filter-select-option svg {
    flex-shrink: 0;
    color: var(--brand-orange-ink);
    visibility: hidden;
}

.filter-select-option[aria-selected="true"] svg { visibility: visible; }

/* An option may carry a second line. The text column owns the flexing so the
   check and the count keep their positions whether or not it is there. */
.filter-select-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.filter-select-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-select-option-sub {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-select-option[aria-selected="true"] .filter-select-option-sub {
    color: var(--brand-orange-ink);
}

.filter-select-option-meta {
    flex-shrink: 0;
    align-self: center;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.filter-select-empty {
    padding: var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Limpar à esquerda, contagem no meio, ação primária à direita — a ordem em
   que se lê, e a confirmação fica no canto onde a mão já está. */
.filter-select-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-strong);
    background-color: var(--surface-subtle);
}

.filter-select-count {
    flex: 1;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ---- control row ----
   A label above, controls below, everything on one baseline. */

.control-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.control-row-field label,
.control-row-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}