@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/*
 * Feuille de styles dédiée au tableau de bord, compilée séparément de
 * `resources/css/app.css` (site public). Les variables de couleur
 * fondamentales sont reprises à l'identique (mêmes teintes extraites du
 * logo officiel NH TRANS, voir `coordination.md`, intervention CLAUDE-001)
 * pour rester cohérent avec la marque, mais l'esthétique est volontairement
 * plus sobre, plus dense et orientée productivité — distincte du site public.
 */
@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    --color-brand-primary: #023567;
    --color-brand-dark: #011b36;
    --color-brand-light: #4fa8d8;
    --color-brand-ink: #1b2a3a;
    --color-brand-muted: #55606b;
    --color-brand-border: #dde4ec;
    --color-brand-surface: #f5f8fb;
    --color-brand-white: #ffffff;

    /* Teintes d'état, réservées à l'interface d'administration. */
    --color-admin-success: #157a4a;
    --color-admin-success-bg: #e7f5ee;
    --color-admin-warning: #97650a;
    --color-admin-warning-bg: #fbf1de;
    --color-admin-danger: #b3261e;
    --color-admin-danger-bg: #fbeaea;
    --color-admin-info: #023567;
    --color-admin-info-bg: #e7f2f9;
    --color-admin-neutral-bg: #eef1f4;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--color-brand-surface);
        color: var(--color-brand-ink);
        -webkit-font-smoothing: antialiased;
    }

    :focus-visible {
        outline: 2px solid var(--color-brand-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
    }
}

@layer components {
    /* ---------------------------------------------------------------- */
    /* Boutons (repris du site public, palette identique)                */
    /* ---------------------------------------------------------------- */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    }

    .btn:disabled,
    .btn[aria-disabled='true'] {
        opacity: 0.55;
        pointer-events: none;
    }

    .btn-primary {
        background-color: var(--color-brand-primary);
        color: var(--color-brand-white);
        border: 1px solid var(--color-brand-primary);
    }

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

    .btn-secondary {
        background-color: var(--color-brand-white);
        color: var(--color-brand-ink);
        border: 1px solid var(--color-brand-border);
    }

    .btn-secondary:hover {
        border-color: var(--color-brand-primary);
        color: var(--color-brand-primary);
    }

    .btn-danger {
        background-color: var(--color-brand-white);
        color: var(--color-admin-danger);
        border: 1px solid var(--color-admin-danger);
    }

    .btn-danger:hover {
        background-color: var(--color-admin-danger-bg);
    }

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

    .btn-ghost:hover {
        background-color: var(--color-admin-neutral-bg);
        color: var(--color-brand-ink);
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* ---------------------------------------------------------------- */
    /* Sidebar / navigation admin                                        */
    /* ---------------------------------------------------------------- */

    .admin-sidebar {
        transition: width 200ms ease;
    }

    .admin-sidebar[data-collapsed='true'] {
        width: 4.5rem;
    }

    .admin-sidebar[data-collapsed='true'] .admin-sidebar__label,
    .admin-sidebar[data-collapsed='true'] .admin-sidebar__group-title,
    .admin-sidebar[data-collapsed='true'] .admin-sidebar__badge {
        display: none;
    }

    .admin-nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-brand-muted);
        transition: background-color 150ms ease, color 150ms ease;
    }

    .admin-nav-link:hover {
        background-color: var(--color-admin-neutral-bg);
        color: var(--color-brand-ink);
    }

    .admin-nav-link[aria-current='page'] {
        background-color: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
        color: var(--color-brand-primary);
        font-weight: 600;
    }

    /* Drawer mobile */
    .admin-drawer {
        transform: translateX(-100%);
        transition: transform 220ms ease;
    }

    .admin-drawer[data-open='true'] {
        transform: translateX(0);
    }

    .admin-drawer-backdrop {
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
    }

    .admin-drawer-backdrop[data-open='true'] {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---------------------------------------------------------------- */
    /* Cartes, tableaux, badges                                          */
    /* ---------------------------------------------------------------- */

    .admin-card {
        background-color: var(--color-brand-white);
        border: 1px solid var(--color-brand-border);
        border-radius: 0.75rem;
    }

    .admin-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
    }

    .admin-table th {
        text-align: left;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-brand-muted);
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-brand-border);
        white-space: nowrap;
    }

    .admin-table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--color-brand-border);
        vertical-align: middle;
    }

    .admin-table tbody tr:hover {
        background-color: var(--color-brand-surface);
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        border-radius: 9999px;
        padding: 0.1875rem 0.625rem;
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .status-badge::before {
        content: '';
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 9999px;
        background-color: currentColor;
    }

    .status-badge--success { background-color: var(--color-admin-success-bg); color: var(--color-admin-success); }
    .status-badge--warning { background-color: var(--color-admin-warning-bg); color: var(--color-admin-warning); }
    .status-badge--danger { background-color: var(--color-admin-danger-bg); color: var(--color-admin-danger); }
    .status-badge--info { background-color: var(--color-admin-info-bg); color: var(--color-admin-info); }
    .status-badge--neutral { background-color: var(--color-admin-neutral-bg); color: var(--color-brand-muted); }

    .demo-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        border-radius: 0.25rem;
        padding: 0.125rem 0.5rem;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background-color: var(--color-admin-warning-bg);
        color: var(--color-admin-warning);
        border: 1px dashed color-mix(in srgb, var(--color-admin-warning) 45%, transparent);
    }

    /* ---------------------------------------------------------------- */
    /* Modals, drawers, toasts                                           */
    /* ---------------------------------------------------------------- */

    .admin-modal-backdrop {
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    .admin-modal-backdrop[data-open='true'] {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-modal-panel {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .admin-modal-backdrop[data-open='true'] .admin-modal-panel {
        opacity: 1;
        transform: none;
    }

    .admin-toast-region {
        position: fixed;
        z-index: 70;
        right: 1rem;
        bottom: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-width: 22rem;
    }

    .admin-toast {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        border-radius: 0.625rem;
        border: 1px solid var(--color-brand-border);
        background-color: var(--color-brand-white);
        padding: 0.75rem 1rem;
        box-shadow: 0 12px 32px -16px rgb(1 27 54 / 0.35);
        font-size: 0.8125rem;
        color: var(--color-brand-ink);
        animation: admin-toast-in 200ms ease;
    }

    @keyframes admin-toast-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        .admin-toast { animation: none; }
    }

    /* ---------------------------------------------------------------- */
    /* Formulaires                                                        */
    /* ---------------------------------------------------------------- */

    .admin-field-input {
        width: 100%;
        border-radius: 0.5rem;
        border: 1px solid var(--color-brand-border);
        background-color: var(--color-brand-white);
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        color: var(--color-brand-ink);
        transition: border-color 150ms ease;
    }

    .admin-field-input:focus {
        border-color: var(--color-brand-primary);
        outline: none;
    }

    .admin-field-input[aria-invalid='true'] {
        border-color: var(--color-admin-danger);
    }

    .admin-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 2.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        background-color: var(--color-brand-border);
        transition: background-color 150ms ease;
        cursor: pointer;
        flex-shrink: 0;
    }

    .admin-switch[data-checked='true'] {
        background-color: var(--color-brand-primary);
    }

    .admin-switch__thumb {
        position: absolute;
        top: 0.1875rem;
        left: 0.1875rem;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 9999px;
        background-color: var(--color-brand-white);
        transition: transform 150ms ease;
    }

    .admin-switch[data-checked='true'] .admin-switch__thumb {
        transform: translateX(1rem);
    }

    /* ---------------------------------------------------------------- */
    /* Divers                                                             */
    /* ---------------------------------------------------------------- */

    .lift-on-hover {
        transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    }

    @media (prefers-reduced-motion: no-preference) {
        .lift-on-hover:hover {
            transform: translateY(-2px);
        }
    }

    .lift-on-hover:hover {
        box-shadow: 0 10px 24px -16px rgb(1 27 54 / 0.3);
        border-color: color-mix(in srgb, var(--color-brand-primary) 35%, var(--color-brand-border));
    }

    .admin-sparkbar {
        display: flex;
        align-items: flex-end;
        gap: 0.1875rem;
        height: 2rem;
    }

    .admin-sparkbar__bar {
        flex: 1;
        border-radius: 2px;
        background-color: color-mix(in srgb, var(--color-brand-primary) 70%, transparent);
    }

    .admin-dropzone {
        border: 2px dashed var(--color-brand-border);
        border-radius: 0.75rem;
        transition: border-color 150ms ease, background-color 150ms ease;
    }

    .admin-dropzone[data-dragover='true'] {
        border-color: var(--color-brand-primary);
        background-color: color-mix(in srgb, var(--color-brand-primary) 6%, transparent);
    }

    [data-tab-panel][hidden] {
        display: none;
    }

    .admin-tab-trigger {
        border-color: transparent;
        color: var(--color-brand-muted);
    }

    .admin-tab-trigger[aria-selected='true'] {
        border-color: var(--color-brand-primary);
        color: var(--color-brand-primary);
    }

    .unsaved-indicator {
        display: none;
    }

    .unsaved-indicator[data-visible='true'] {
        display: inline-flex;
    }

    .admin-bulk-bar {
        display: none;
    }

    .admin-bulk-bar[data-visible='true'] {
        display: flex;
    }
}
