/*
 * Console — thème d'administration DeskMethod.
 * Charte v1.0 : canvas blanc cassé, texte marine, une seule couleur
 * d'action (bleu profond), radius 8 px, données en mono.
 *
 * Mode Configuration : même tokens. La sidebar change de contenu
 * (`SettingsNav`). Le contenu vit dans des blocs `SectionCard`
 * (`bg-card`, filet, radius) — jamais à même le canvas.
 */

html[data-area='admin'] {
    color-scheme: light;

    --font-sans:
        'Archivo', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji';
    --font-heading:
        'Space Grotesk', 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --font-mono:
        'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo,
        monospace;

    /* Surfaces — blanc cassé / cartes blanches */
    --background: #f5f7fa;
    --foreground: #0a1a2e;
    --card: #ffffff;
    --card-foreground: #0a1a2e;
    --popover: #ffffff;
    --popover-foreground: #0a1a2e;

    /* Une seule couleur d'action : bleu profond */
    --primary: #1e40af;
    --primary-foreground: #ffffff;
    --secondary: #e7eaf0;
    --secondary-foreground: #0a1a2e;
    --muted: #eef1f6;
    --muted-foreground: #64748b;
    --accent: #eef1f6;
    --accent-foreground: #0a1a2e;
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;

    --border: #e7eaf0;
    --input: #d5dbe6;
    --ring: #1e40af;

    --chart-1: #1e40af;
    --chart-2: #7c9af8;
    --chart-3: #0e9f6e;
    --chart-4: #d97706;
    --chart-5: #0a1a2e;

    --radius: 0.5rem;

    --success: #0e9f6e;
    --success-tint: #e7f7f1;
    --warning: #d97706;
    --warning-tint: #fef4e6;
    --danger-tint: #fdecec;
    --info: #1e40af;
    --info-tint: #e8edfb;
    --live: #0e9f6e;
    --overlay: rgb(10 22 51 / 0.55);

    /* Chrome latéral : marine, accent clair sur fond sombre */
    --sidebar: #0a1a2e;
    --sidebar-background: #0a1a2e;
    --sidebar-foreground: #d7deea;
    --sidebar-primary: #7c9af8;
    --sidebar-primary-foreground: #0a1633;
    --sidebar-accent: #13233c;
    --sidebar-accent-foreground: #f5f7fa;
    --sidebar-border: #16304a;
    --sidebar-ring: #7c9af8;
}

html[data-area='admin'].dark {
    color-scheme: dark;

    --background: #0a1633;
    --foreground: #f5f7fa;
    --card: #102044;
    --card-foreground: #f5f7fa;
    --popover: #13264d;
    --popover-foreground: #f5f7fa;

    --primary: #7c9af8;
    --primary-foreground: #0a1633;
    --secondary: #16304a;
    --secondary-foreground: #f5f7fa;
    --muted: #13264d;
    --muted-foreground: #9aa8bd;
    --accent: #16304a;
    --accent-foreground: #f5f7fa;
    --destructive: #f87171;
    --destructive-foreground: #0a1633;

    --border: rgb(231 234 240 / 0.12);
    --input: rgb(231 234 240 / 0.22);
    --ring: #7c9af8;

    --chart-1: #7c9af8;
    --chart-2: #93c5fd;
    --chart-3: #34d399;
    --chart-4: #fbbf24;
    --chart-5: #f5f7fa;

    --success: #34d399;
    --success-tint: rgb(14 159 110 / 0.16);
    --warning: #fbbf24;
    --warning-tint: rgb(217 119 6 / 0.16);
    --danger-tint: rgb(220 38 38 / 0.16);
    --info: #7c9af8;
    --info-tint: rgb(124 154 248 / 0.16);
    --live: #34d399;
    --overlay: rgb(7 12 28 / 0.65);

    --sidebar: #070f22;
    --sidebar-background: #070f22;
    --sidebar-foreground: #d7deea;
    --sidebar-primary: #7c9af8;
    --sidebar-primary-foreground: #0a1633;
    --sidebar-accent: #102044;
    --sidebar-accent-foreground: #f5f7fa;
    --sidebar-border: #16304a;
    --sidebar-ring: #7c9af8;
}

html[data-area='admin'] {
    font-family: var(--font-sans);

    body {
        font-size: 15px;
        line-height: 1.5;
    }

    ::selection {
        background: rgb(30 64 175 / 0.18);
    }

    .font-heading {
        font-family: var(--font-heading);
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-heading);
        font-weight: 600;
        text-wrap: balance;
    }

    .font-mono,
    code,
    kbd {
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em;
    }

    * {
        scrollbar-width: thin;
        scrollbar-color: rgb(100 116 139 / 0.4) transparent;
    }

    input[type='checkbox'].console-check {
        appearance: none;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        border-radius: 0.25rem;
        border: 1px solid var(--input);
        background-color: var(--card);
        cursor: pointer;
        transition:
            background-color 100ms ease,
            border-color 100ms ease;
    }

    input[type='checkbox'].console-check:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--ring) 50%, transparent);
        outline-offset: 1px;
    }

    input[type='checkbox'].console-check:checked {
        border-color: var(--primary);
        background-color: var(--primary);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5.4' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 0.75rem;
        background-position: center;
        background-repeat: no-repeat;
    }

    .field-group + .field-group {
        border-top: 1px solid var(--border);
        padding-top: 1.25rem;
    }

    .console-live-dot {
        position: relative;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 9999px;
        background: var(--live);
    }

    .console-live-dot::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 9999px;
        background: var(--live);
        animation: console-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
}

@keyframes console-ping {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    75%,
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

html[data-area='admin'].dark {
    ::selection {
        background: rgb(124 154 248 / 0.28);
    }
}

html[data-area='admin'].dark input[type='checkbox'].console-check:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5.4' stroke='%230a1633' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}