/*
 * Components for the members area and backoffice. Values only via the --vle-* tokens
 * (public/tokens.css). Rules: docs/design/regras-de-interface.md.
 */
/* Same layer order Tailwind uses, declared first so utilities (w-20, px-3...) win over components. */
@layer theme, base, components, utilities;
[x-cloak] { display: none !important; }
input[type="radio"] { accent-color: var(--vle-primary); }

@layer components {
body { font: var(--vle-text-body); background: var(--vle-bg); color: var(--vle-text); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none; box-shadow: var(--vle-shadow-focus); border-radius: var(--vle-radius-sm);
}

/* Type: Cormorant only at 28px or more (regras 3). */
.display-lg, .display-md, .display-sm { font-family: var(--vle-font-display); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.display-lg { font: var(--vle-text-display-lg); letter-spacing: -0.01em; }
.display-md { font: var(--vle-text-display-md); letter-spacing: -0.01em; }
.display-sm { font: var(--vle-text-display-sm); }
@media (max-width: 640px) { .display-lg { font-size: 36px; } }
.display-lg em, .display-md em, .display-sm em { font-style: italic; color: var(--vle-accent); }
.title-lg { font: var(--vle-text-title-lg); }
.title-md { font: var(--vle-text-title-md); }
.body-lg { font: var(--vle-text-body-lg); }
.body-sm { font: var(--vle-text-body-sm); }
.eyebrow { font: var(--vle-text-eyebrow); letter-spacing: var(--vle-text-eyebrow-tracking); text-transform: uppercase; color: var(--vle-primary-text); }
.reading { max-width: var(--vle-reading-max); }
.link { color: var(--vle-primary-text); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* An implicit grid track grows to its widest child; on phones that scrolled whole pages sideways. */
.grid > * { min-width: 0; }

/* Surfaces */
.card { background: var(--vle-surface); border: 1px solid var(--vle-border); border-radius: var(--vle-radius-lg); box-shadow: var(--vle-shadow-sm); }

/* Buttons (regras 5): one primary per screen; never white text on green. */
.btn, .btn-secondary, .btn-ghost, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--vle-touch-min); padding: 0 20px; border-radius: var(--vle-radius-pill);
    font: var(--vle-text-label); white-space: nowrap; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn { background: var(--vle-action); color: var(--vle-on-action); min-height: 48px; }
.btn:hover, .btn:active { background: var(--vle-action-hover); }
.btn-secondary, .btn-ghost { border: 1px solid var(--vle-border); color: var(--vle-text); background: transparent; }
.btn-secondary:hover, .btn-ghost:hover { background: var(--vle-surface2); }
.btn-danger { border: 1px solid var(--vle-error); color: var(--vle-error); background: transparent; min-height: 36px; padding: 0 14px; }
.btn-danger:hover { background: color-mix(in srgb, var(--vle-error) 10%, transparent); }
.btn:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* Forms */
.label { display: block; font: var(--vle-text-label); margin-bottom: 6px; }
.input {
    width: 100%; min-height: 48px; padding: 0 14px; font: var(--vle-text-body);
    background: var(--vle-surface); color: var(--vle-text);
    border: 1px solid var(--vle-border); border-radius: var(--vle-radius-md);
}
textarea.input { padding: 12px 14px; }
.input::placeholder { color: var(--vle-text-muted); }
.input:focus { outline: none; border-color: var(--vle-primary); box-shadow: 0 0 0 1px var(--vle-primary); }
.input[aria-invalid="true"] { border-color: var(--vle-error); }
.field-error { font: var(--vle-text-body-sm); color: var(--vle-error); margin-top: 6px; }
.hint { font: var(--vle-text-body-sm); color: var(--vle-text-muted); }

/* Progress: always with the number in text next to it (regras 5). */
.progress { height: 4px; border-radius: 999px; background: var(--vle-surface2); overflow: hidden; }
.progress-lg { height: 6px; }
.progress > span { display: block; height: 100%; background: var(--vle-primary); border-radius: inherit; }

/* Alerts */
.alert { border: 1px solid var(--vle-border); background: var(--vle-surface); border-radius: var(--vle-radius-md); padding: 12px 16px; }
.alert-error { border-color: var(--vle-error); color: var(--vle-error); }

/* Tables (backoffice) */
.table { width: 100%; font: var(--vle-text-body); }
.table th { text-align: left; font: var(--vle-text-label); color: var(--vle-text-muted); padding: 12px 16px; border-bottom: 1px solid var(--vle-border); }
.table td { padding: 12px 16px; border-top: 1px solid var(--vle-border); }
.table tr:first-child td { border-top: 0; }
/* Row actions sit under their row at full width, so buttons never stack in a narrow last column. */
.table tr.row-actions td { border-top: 0; padding-top: 0; }

/* Status chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--vle-radius-sm); font: var(--vle-text-body-sm); font-weight: 600; background: var(--vle-surface2); color: var(--vle-text-muted); }
.chip-ok { color: var(--vle-success); }
.chip-warn { color: var(--vle-warning); }
.chip-risk { color: var(--vle-error); }
/* Filter chips: wrap on wide screens, one swipeable row on phones so the list starts above the fold. */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
    .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
    .chip-row > * { flex-shrink: 0; white-space: nowrap; }
}

/* Checkbox: every plain checkbox, no class needed (regras 9). */
input[type="checkbox"]:not([role="switch"]) {
    appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0; cursor: pointer;
    border: 1.5px solid var(--vle-text-muted); border-radius: var(--vle-radius-sm);
    background: var(--vle-surface) center / 14px no-repeat; transition: background-color .15s, border-color .15s;
}
input[type="checkbox"]:not([role="switch"]):checked {
    border-color: var(--vle-action); background-color: var(--vle-action);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Switch: <x-switch>, a checkbox with role="switch" (keyboard, forms and screen readers for free). */
.switch { position: relative; flex-shrink: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; appearance: none;
    border-radius: 999px; background: var(--vle-border); transition: background-color .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--vle-on-action); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s; }
.switch:checked { background: var(--vle-action); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* Rich select: <x-select> (Alpine). The trigger looks like .input; the panel is a card. */
.select-trigger { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.select-trigger[aria-expanded="true"] { border-color: var(--vle-primary); box-shadow: 0 0 0 1px var(--vle-primary); }
.select-panel { position: absolute; z-index: 40; left: 0; right: 0; margin-top: 6px; overflow: hidden;
    background: var(--vle-surface); border: 1px solid var(--vle-border); border-radius: var(--vle-radius-md);
    box-shadow: var(--vle-shadow-md); }
.select-search { width: 100%; padding: 12px 14px 12px 40px; font: var(--vle-text-body); background: transparent;
    color: var(--vle-text); border-bottom: 1px solid var(--vle-border); outline: none; box-shadow: none !important; }
.select-option { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 14px; text-align: left; cursor: pointer; }
.select-option[data-active="true"] { background: var(--vle-surface2); }
.select-option[aria-selected="true"] { font-weight: 600; }

/* Drop zone for <x-image-upload> and file lists. */
.dropzone { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
    border: 2px dashed var(--vle-border); border-radius: var(--vle-radius-lg); background: var(--vle-surface2); transition: border-color .15s; }
.dropzone:hover, .dropzone[data-over="true"] { border-color: var(--vle-primary); }

/* Round crop (<x-image-upload round>): the photo moves under a fixed circle. */
.crop-dialog { margin: auto; width: min(26rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--vle-border);
    border-radius: var(--vle-radius-lg); background: var(--vle-surface); color: inherit; }
.crop-dialog::backdrop { background: color-mix(in srgb, black 50%, transparent); }
.crop-stage { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--vle-radius-md, 12px);
    background: var(--vle-surface2); cursor: grab; touch-action: none; user-select: none; }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; max-width: none; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 100vmax color-mix(in srgb, black 55%, transparent);
    outline: 2px solid var(--vle-primary); pointer-events: none; }
input[type="range"] { accent-color: var(--vle-primary); }

/* Formatted descriptions: editor (backoffice) and the member-facing text share .rich. */
.rich > * + *, .rich div + div { margin-top: .6em; }
.rich h1 { font: var(--vle-text-title-lg); margin-top: 1em; }
.rich ul { list-style: disc; padding-left: 1.4em; }
.rich ol { list-style: decimal; padding-left: 1.4em; }
.rich li + li { margin-top: .25em; }
.rich a { color: var(--vle-primary-text); text-decoration: underline; text-underline-offset: 3px; }
.rich blockquote { border-left: 3px solid var(--vle-primary); padding-left: 1em; color: var(--vle-text-muted); }
.rich strong { font-weight: 600; }
trix-editor.rich-editor { min-height: 180px; padding: 12px 14px; font: var(--vle-text-body); color: var(--vle-text);
    background: var(--vle-surface); border: 1px solid var(--vle-border); border-radius: var(--vle-radius-md); }
trix-editor.rich-editor:focus { outline: none; border-color: var(--vle-primary); box-shadow: 0 0 0 1px var(--vle-primary); }
trix-toolbar .trix-button-group--file-tools, trix-toolbar .trix-button--icon-code { display: none !important; } /* trix.css is unlayered */
trix-toolbar .trix-button-group { border-color: var(--vle-border); border-radius: var(--vle-radius-sm); }
trix-toolbar .trix-button { border-color: var(--vle-border); }
trix-toolbar .trix-button.trix-active { background: var(--vle-surface2); }

/* Reorder handle + toast. */
.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0;
    border-radius: var(--vle-radius-sm); color: var(--vle-text-muted); cursor: grab; touch-action: none; }
.drag-handle:hover { background: var(--vle-surface2); color: var(--vle-text); }
.is-dragging { opacity: .4; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 20px);
    opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: var(--vle-radius-pill); font: var(--vle-text-label);
    background: var(--vle-text); color: var(--vle-bg); transition: opacity .2s, transform .2s; }
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }
.toast[data-error="true"] { background: var(--vle-error); color: var(--vle-on-error); }

/* Segmented control: 2-4 mutually exclusive options shown at once (role=radiogroup). */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--vle-radius-pill); background: var(--vle-surface2); }
.segmented > button { min-height: 36px; padding: 0 16px; border-radius: var(--vle-radius-pill); font: var(--vle-text-label); color: var(--vle-text-muted); }
.segmented > button[aria-checked="true"] { background: var(--vle-surface); color: var(--vle-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* "Entrar com o Google": Google's own button style (white, grey border, dark text) on both themes. */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px;
    border-radius: var(--vle-radius-pill); background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775;
    font: 500 15px/1 var(--vle-font-sans); }
.btn-google:hover { background: #F2F2F2; }
}

/* Dashboard: pulsing dot of the live panel (still when motion is reduced). */
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vle-success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vle-success) 60%, transparent); animation: live-pulse 2s infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
/* Live map (dashboard): MapLibre positions the pin root with transform, so only colors and size live here. */
.live-map { height: 360px; background: var(--vle-surface2); }
.live-map-fail { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: var(--vle-text-muted); }
.live-pin { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; border: 2px solid #fff; background: var(--vle-primary); color: #fff; font: 600 12px/1 var(--vle-font-sans); cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); }
.live-pin-many { min-width: 40px; height: 40px; font-size: 14px; }
.live-pin:focus-visible { outline: 3px solid var(--vle-primary); outline-offset: 2px; }
.live-map-popup .maplibregl-popup-content { border-radius: var(--vle-radius-md); padding: 12px 14px; font: inherit; color: #12232c; }
.live-map-place { font-weight: 600; margin-bottom: 6px; }
.live-map-list { display: grid; gap: 6px; }
.live-map-list a { font-weight: 600; text-decoration: underline; }
.live-map-list small { display: block; color: #55666e; }