/* ==========================================================================
   JUSFY DESIGN SYSTEM - ADMIN CUSTOMIZATION
   ========================================================================== */

@layer base {
    :root {
        /* Brand colors - Green/Teal */
        --brand: 163 99% 34%;
        --brand-dark: 163 99% 24%;
        --brand-soft: 158 50% 94%;

        /* Accent colors - Orange (for CTAs/Promos) */
        --accent-orange: 18 91% 48%;
        --accent-orange-dark: 18 91% 43%;
        --accent-orange-soft: 18 86% 95%;
        --accent-orange-border: 18 81% 85%;

        /* Neutral colors */
        --neutral-900: 0 0% 7%;
        --neutral-600: 240 1% 37%;
        --neutral-500: 220 1% 52%;
        --neutral-200: 225 25% 94%;

        /* Core semantic tokens */
        --background: 0 0% 100%;
        --background-page: 228 100% 99%;
        --foreground: 0 0% 7%;
        --primary: var(--brand);
        --border: 240 4% 81%;
        --radius: 0.5rem;

        /* Unfold/Tailwind Mappings */
        --color-primary-50: 158 50% 94%;
        --color-primary-100: 163 60% 85%;
        --color-primary-500: var(--brand);
        --color-primary-600: var(--brand-dark);
        --color-primary-700: 163 99% 20%;
    }

    .dark {
        --background: 0 0% 7%;
        --foreground: 0 0% 100%;
        --border: 240 1% 25%;

        /* Ajustes Dark Mode para Unfold */
        --color-primary-500: 163 99% 40%;
        --color-primary-600: 163 99% 34%;
    }
}

/* ==========================================================================
   1. ESTRUTURA GLOBAL E SIDEBAR
   ========================================================================== */

/* Garante que a sidebar use o Teal da Jusfy */
#unfold-sidebar {
    background-color: hsl(var(--brand)) !important;
}

#unfold-sidebar .active {
    background-color: hsl(var(--brand-dark)) !important;
}

/* ==========================================================================
   2. INPUTS DE TEXTO, SELECTS E TEXTAREAS
   ========================================================================== */
.field-row .grow.relative input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field-row .grow.relative select,
.field-row .grow.relative textarea {
    display: block;
    width: 100%;
    max-width: 42rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--foreground));
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.field-row .grow.relative input:focus,
.field-row .grow.relative select:focus {
    outline: none;
    border-color: hsl(var(--brand));
    box-shadow: 0 0 0 2px hsl(var(--brand) / 0.2);
}

/* ==========================================================================
   3. CHECKBOXES E RADIOS (Jusfy Green)
   ========================================================================== */
.field-row .grow.relative input[type="checkbox"],
.field-row .grow.relative input[type="radio"] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: hsl(var(--background));
    border: 2px solid hsl(var(--border));
    accent-color: hsl(var(--brand));
    cursor: pointer;
    vertical-align: middle;
}

.field-row .grow.relative input[type="checkbox"] { border-radius: 0.25rem; }
.field-row .grow.relative input[type="radio"] { border-radius: 9999px; }

/* ==========================================================================
   4. LINK "ALTERAR SENHA" (Estilo Accent Orange)
   ========================================================================== */
.field-row .grow.relative div.readonly:has(a[href*="/password/"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.field-row .grow.relative div.readonly a[href*="/password/"] {
    display: inline-block;
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid hsl(var(--accent-orange-border));
    background-color: hsl(var(--accent-orange-soft));
    color: hsl(var(--accent-orange-dark));
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

@media (min-width: 1024px) {
    .field-row .grow.relative div.readonly a[href*="/password/"] { width: auto; }
}

.field-row .grow.relative div.readonly a[href*="/password/"]:hover {
    background-color: hsl(var(--accent-orange));
    color: white;
    border-color: hsl(var(--accent-orange-dark));
}

/* ==========================================================================
   5. DARK MODE OVERRIDES
   ========================================================================== */
.dark .field-row .grow.relative input,
.dark .field-row .grow.relative select,
.dark .field-row .grow.relative textarea {
    background-color: hsl(var(--neutral-900));
    border-color: hsl(