/* ═══════════════════════════════════════════════════════
   Grupo Orizonti — Design System
   ═══════════════════════════════════════════════════════ */

/* ── Alpine x-cloak (project-wide) ──────────────────────
   One global rule so any new component using x-cloak doesn't
   have to re-declare it. Loaded by index.html before any
   per-component sheet, so per-component overrides win (e.g.
   .md-preview[x-cloak] in markdown-preview.css). */
[x-cloak] { display: none !important; }

/* ── Tokens ─────────────────────────────────────────────── */
:root {
    /* Brand */
    --brand: #547264;
    --brand-dark: #40574c;
    --brand-muted: #6d8f80;
    --brand-subtle: #e8efec;
    /* Accent foreground for use on --brand-subtle backgrounds.
       Mirrors --brand in light mode; lifted in dark mode for contrast. */
    --brand-accent: #547264;
    --cream: #cdc9a6;
    --cream-light: #e8e5d6;
    --cream-dark: #b0ab87;

    /* Surfaces */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f0ede6;

    /* Borders */
    --border: #e0dbd1;
    --border-focus: #547264;

    /* Text */
    --text: #2c3e32;
    --text-muted: #7a8b81;
    --text-on-brand: #e8e5d6;

    /* Feedback */
    --error: #c0392b;
    --error-bg: #fdf2f2;
    --error-border: rgba(192, 57, 43, 0.25);
    --success: #4cd97b;
    --warning: #f5a623;

    /* Match pill (KB search result quality) */
    --match-excelente: #547264;
    --match-excelente-dark: #3a5248;
    --match-bom: #3a8080;
    --match-bom-dark: #2c6060;
    --match-razoavel: #a07820;
    --match-razoavel-dark: #7a5a10;
    --match-fraco: #b05a20;
    --match-fraco-dark: #8a3e10;

    /* Radii */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.375rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.07);
    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.08);

    /* Motion */
    --transition: 150ms ease;

    /* Stacking & overlays — seed of the modal stacking system; future modal
       sites should reuse these tokens rather than introducing new literals. */
    --z-modal-backdrop: 199;
    --z-modal: 200;
    --backdrop-modal: rgba(0, 0, 0, 0.45);

    /* Typography */
    --font: 'Nunito', system-ui, sans-serif;
    --font-size-xxs: 0.71875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 0.9375rem;
    --font-size-lg: 1.125rem;

    /* Role pill swatches (owner/admin keep brand-adjacent hues that
       --brand-* tokens don't cover; editor/viewer reuse existing tokens). */
    --role-owner-bg: rgba(216, 169, 74, 0.20);
    --role-owner-fg: #d8a94a;
    --role-admin-bg: rgba(92, 143, 168, 0.20);
    --role-admin-fg: #5c8fa8;
}

/* ── Dark mode ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bg: #1b1e1b;
        --surface: #242724;
        --surface-alt: #2c302b;
        --border: #3a3f38;
        --text: #dfe0da;
        --text-muted: #8c9689;
        --brand-subtle: #1f2e27;
        --brand-accent: #9bbcad;
        --error-bg: #2d1a1a;
        --error-border: rgba(192, 57, 43, 0.35);
        --role-owner-bg: rgba(216, 169, 74, 0.28);
        --role-admin-bg: rgba(92, 143, 168, 0.28);
        --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.25);
        --shadow-md: 0 4px 14px rgb(0 0 0 / 0.35);
    }
}

html[data-theme="dark"] {
    --bg: #1b1e1b;
    --surface: #242724;
    --surface-alt: #2c302b;
    --border: #3a3f38;
    --text: #dfe0da;
    --text-muted: #8c9689;
    --brand-subtle: #1f2e27;
    --brand-accent: #9bbcad;
    --error-bg: #2d1a1a;
    --error-border: rgba(192, 57, 43, 0.35);
    --role-owner-bg: rgba(216, 169, 74, 0.28);
    --role-admin-bg: rgba(92, 143, 168, 0.28);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.25);
    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.35);
}

/* ── Scrollbars (global thin style) ─────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

*::-webkit-scrollbar-button {
    display: none;
}

/* ── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: var(--font-size-md);
    -webkit-font-smoothing: antialiased;
}


/* ── Shared button utilities ─────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn--primary {
    background: var(--brand);
    color: var(--text-on-brand);
}

.btn--primary:hover {
    background: var(--brand-dark);
}

.btn--secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn--secondary:hover {
    background: var(--surface-alt);
}

.btn--ghost {
    background: none;
    color: var(--text-muted);
    border: 1px solid transparent;
}

.btn--ghost:hover {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border);
}

.btn--danger {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
}

.btn--danger:hover {
    filter: brightness(1.15);
}

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

.btn:disabled:hover {
    filter: none;
}

.btn--sm {
    padding: 0.3rem 0.65rem;
    font-size: var(--font-size-xs);
}

/* ── Generic form fields ─────────────────────────────── */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.875rem;
}

.form-field label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.form-hint {
    font-weight: 400;
    font-size: var(--font-size-xs);
}

.form-field input[type="text"],
.form-field input[type="file"] {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.875rem;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field input[type="text"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--border);
    color: var(--text-muted);
}

.form-field input[type="text"]:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(84, 114, 100, 0.12);
}

.form-field input[type="file"] {
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.text-muted {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Ensure popover backdrop visibility is controlled by CSS class, not only JS inline style */
.px-popover-backdrop--visible {
    visibility: visible !important;
}

/* ── Checkboxes ──────────────────────────────────────────
   Global, design-system-styled. Renders as a 1rem rounded square with
   a brand-coloured fill + white check when :checked. Indeterminate
   state shows a brand bar. Disabled is muted. Focus ring matches the
   project's standard outline (var(--border-focus) + soft glow).

   To opt out (e.g. native picker for accessibility experiments), add
   class="native" or wrap in [data-native-checkbox]. */
input[type="checkbox"]:not(.native):not([data-native-checkbox] *) {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition);
}
input[type="checkbox"]:not(.native):hover:not(:disabled) {
    border-color: var(--brand-muted, var(--brand));
}
input[type="checkbox"]:not(.native):focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(84, 114, 100, 0.18);
}
input[type="checkbox"]:not(.native):checked {
    background-color: var(--brand);
    border-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.875rem 0.875rem;
}
input[type="checkbox"]:not(.native):checked:hover:not(:disabled) {
    background-color: var(--brand-dark);
    border-color: var(--brand-dark);
}
input[type="checkbox"]:not(.native):indeterminate {
    background-color: var(--brand);
    border-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='4' y1='8' x2='12' y2='8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.875rem 0.875rem;
}
input[type="checkbox"]:not(.native):disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--surface-alt);
}
input[type="checkbox"]:not(.native):disabled:checked {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
}

/* ── Date / datetime / time inputs ───────────────────────
   Native picker UI is OS-drawn (we can't cross-browser-skin the popup
   calendar), but we own the *field* chrome and the picker-indicator
   icon. The icon ships as inline SVG via mask-image so it picks up
   --text-muted at rest and --brand on hover, matching every other
   focusable affordance in the design system. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    width: 1.125rem;
    height: 1.125rem;
    margin-inline-start: 0.25rem;
    cursor: pointer;
    opacity: 1;
    background-color: var(--text-muted);
    background-image: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--transition);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator {
    background-color: var(--brand);
}
input[type="date"]:focus::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator,
input[type="time"]:focus::-webkit-calendar-picker-indicator,
input[type="month"]:focus::-webkit-calendar-picker-indicator,
input[type="week"]:focus::-webkit-calendar-picker-indicator {
    background-color: var(--brand);
}

/* The numeric segments inside a date-like input pick up --text + the
   project font, and empty placeholders pick up --text-muted, so the
   field reads like every other text input in the system. */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="week"]::-webkit-datetime-edit {
    color: var(--text);
    font-family: inherit;
}
input[type="date"]:invalid::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]:invalid::-webkit-datetime-edit-fields-wrapper,
input[type="time"]:invalid::-webkit-datetime-edit-fields-wrapper,
input[type="month"]:invalid::-webkit-datetime-edit-fields-wrapper,
input[type="week"]:invalid::-webkit-datetime-edit-fields-wrapper {
    color: var(--text-muted);
}

.px-popover-card {
    max-width: min(44ch, calc(100vw - 1rem)) !important;
}
/* ── Number-input spinners ────────────────────────────────
   Native browser spinners ignore the warm Orizonti palette and look
   chunky in dark mode. Hide them by default and surface a brand-tinted
   pair on hover/focus instead. Keyboard ↑/↓ still work either way.

   Firefox respects the input's color-scheme; the explicit rules below
   target WebKit/Blink, where ``::-webkit-inner-spin-button`` is the
   only handle on the spinner. */
input[type="number"] {
    color-scheme: light dark;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    opacity: 0;
    transition: opacity var(--transition);
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:focus::-webkit-inner-spin-button {
    opacity: 0.6;
}
/* Hide the entire spin region in Firefox unless interacted with */
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

/* ── Global body shell ───────────────────────────────────────
   Every authenticated page renders inside <body class="page-body">
   and needs the column flex root so AppShell's chrome can fill the
   viewport exactly. Lives here (not in app-shell.css) because
   `body.page-body` is the root element — even pages that skip
   AppShell (auth screens) inherit the same body class.
   The rest of the AppShell layout — `.app-shell`, `.app-main`,
   `.app-main__primary`, `#app-content`, `#sidebar-backdrop` —
   lives in `app-shell.css` next to the component, so each rule
   has exactly one source of truth. */
body.page-body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

/* ── Toolbar primitives ──────────────────────────────────────
   Shared by per-kind toolbars in the Library (doc_toolbar,
   form_toolbar, …). Lifted from the per-component sheets so
   every toolbar variant inherits the same button/menu shape
   without re-declaring it.

   Canonical choices when the per-component sheets disagreed:
   - .btn-toolbar includes `text-decoration: none` so it works
     on both <button> and <a> elements.
   - .menu styles both `button` and `a` children, also with
     `text-decoration: none`, for the same reason.
   The outer popover scaffold (position / border / shadow /
   z-index / hidden state) still lives in popover.css; .menu
   here is the variant overlay applied to a popover panel. */

.btn-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: inherit;
    text-decoration: none;
}
.btn-toolbar:hover {
    background: var(--brand-subtle);
    border-color: var(--brand-muted);
}
.btn-toolbar--primary {
    background: var(--brand-subtle);
    color: var(--brand-accent);
    border-color: transparent;
    font-weight: 600;
}
.btn-toolbar--primary:hover {
    background: var(--brand-subtle);
    border-color: var(--brand-muted);
}
.btn-toolbar .material-symbols-rounded {
    font-size: 1rem;
}
.btn-toolbar:disabled,
.btn-toolbar--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.menu {
    padding: 0.25rem;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}
.menu button,
.menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    text-align: left;
    text-decoration: none;
    font-size: 0.8125rem;
    font-family: inherit;
    width: 100%;
}
.menu button:hover,
.menu a:hover {
    background: var(--surface-alt);
}
.menu hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 0.25rem 0;
}

.menu-section-label {
    padding: 0.375rem 0.75rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.menu-item--danger {
    color: var(--error);
}
.menu-item--danger:hover {
    background: var(--error-bg);
    color: var(--error);
}
.menu-item--danger .material-symbols-rounded {
    color: var(--error);
}