/**
 * Thème Graphik Impact - ShopFlow Light Theme
 * Version: 1.0.0
 * Description: Application de la charte graphique Graphik Impact au thème clair de ShopFlow
 * Basé sur: brand-variables.css et brand-colors.js
 */

/* ========================================
   THEME LIGHT - GRAPHIK IMPACT
   ======================================== */

:root.light {
    /* === COULEURS PRIMAIRES GI === */
    --gi-black: #000000;
    --gi-cyan: #009FE3;
    --gi-web: #EB5D18; /* Orange - Parfait pour ShopFlow (e-commerce) */

    /* === COULEURS FONCTIONNELLES === */

    /* Textes — strong contrast for readability */
    --text-primary: #111827;     /* gray-900 — softer than pure black          */
    --text-secondary: #374151;   /* gray-700 — clearly readable                */
    --text-tertiary: #6B7280;    /* gray-500 — labels, captions                */
    --text-muted: #9CA3AF;       /* gray-400 — placeholder, disabled           */

    /*
     * LIGHT MODE STRATEGY — "clean white, shadows for depth"
     * Page bg is very light. Cards are white with soft shadows.
     * Inset areas use a barely-there tint for grouping.
     * Inspired by Linear, Notion, Vercel.
     */
    --bg-primary: #F8F9FB;       /* page canvas — barely off-white             */
    --bg-secondary: #FFFFFF;     /* card / panel — pure white                  */
    --bg-tertiary: #F1F3F5;      /* inset: metrics, charts, input bg           */
    --bg-hover: #EDF0F3;         /* hover — subtle but visible                 */
    --card-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --main-bg: #F8F9FB;          /* must match --bg-primary                    */

    /* Borders — very light, let shadows do the heavy lifting */
    --border-primary: #E5E7EB;
    --border-secondary: #D1D5DB;

    /* Inputs */
    --input-bg: #FFFFFF;
    --input-border: #D1D5DB;

    /* Accents et Actions */
    --accent: var(--gi-cyan);
    --accent-hover: #0088c7;
    --btn-primary: var(--gi-web);
    --btn-primary-hover: #d15316;

    /* États — slightly more saturated for light backgrounds */
    --success: #059669;          /* emerald-600 — darker green for contrast    */
    --warning: #D97706;          /* amber-600                                  */
    --error: #DC2626;            /* red-600                                    */
    --info: var(--gi-cyan);

    /* Skeleton loaders */
    --skeleton-base: #e0e4e8;
    --skeleton-highlight: #eef0f3;

    /* Shadows — crucial for depth in light mode */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);

    /* === TYPOGRAPHIE GI === */
    --font-primary: "Outfit", system-ui, -apple-system, sans-serif;
    --font-secondary: "Zalando Sans", system-ui, -apple-system, sans-serif;
}

/* ========================================
   APPLICATION DE LA TYPOGRAPHIE GI
   ======================================== */

:root.light body {
    font-family: var(--font-secondary) !important;
    color: var(--text-primary) !important;
    background-color: var(--main-bg) !important;
}

/* Tous les titres utilisent Outfit */
:root.light h1,
:root.light h2,
:root.light h3,
:root.light h4,
:root.light h5,
:root.light h6,
:root.light .text-h1,
:root.light .text-h2,
:root.light .text-h3,
:root.light .text-h4,
:root.light .text-h5,
:root.light .text-h6 {
    font-family: var(--font-primary) !important;
    color: var(--text-primary) !important;
}

/* Tous les textes de corps utilisent Zalando Sans */
:root.light p,
:root.light span,
:root.light label,
:root.light .text-body,
:root.light .text-body-large,
:root.light .text-body-small {
    font-family: var(--font-secondary) !important;
}

/* ========================================
   BOUTONS ET CTA - DESIGN MODERNE GI
   ======================================== */

/* Boutons primaires - Orange (Web GI) — scoped to buttons/links */
:root.light .btn-primary,
:root.light button.bg-red-600,
:root.light button.bg-red-500,
:root.light a.bg-red-600,
:root.light a.bg-red-500 {
    background: linear-gradient(135deg, var(--gi-web) 0%, #d15316 100%) !important;
    color: white !important;
    border: none !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(235, 93, 24, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

:root.light .btn-primary::before,
:root.light button.bg-red-600::before,
:root.light button.bg-red-500::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

:root.light .btn-primary:hover,
:root.light button.bg-red-600:hover,
:root.light button.bg-red-500:hover,
:root.light a.bg-red-600:hover,
:root.light a.bg-red-500:hover {
    background: linear-gradient(135deg, #d15316 0%, var(--gi-web) 100%) !important;
    box-shadow: 0 8px 20px rgba(235, 93, 24, 0.35) !important;
    transform: translateY(-2px) !important;
}

:root.light .btn-primary:hover::before,
:root.light button.bg-red-600:hover::before,
:root.light button.bg-red-500:hover::before {
    left: 100% !important;
}

:root.light .btn-primary:active,
:root.light button.bg-red-600:active,
:root.light button.bg-red-500:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(235, 93, 24, 0.2) !important;
}

/* Boutons secondaires - Cyan (scoped to buttons/links only, not icon containers) */
:root.light button.bg-blue-600,
:root.light button.bg-blue-500,
:root.light a.bg-blue-600,
:root.light a.bg-blue-500,
:root.light .btn-secondary {
    background: linear-gradient(135deg, var(--gi-cyan) 0%, #0088c7 100%) !important;
    color: white !important;
    border: none !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

:root.light button.bg-blue-600:hover,
:root.light button.bg-blue-500:hover,
:root.light a.bg-blue-600:hover,
:root.light a.bg-blue-500:hover,
:root.light .btn-secondary:hover {
    background: linear-gradient(135deg, #0088c7 0%, var(--gi-cyan) 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 159, 227, 0.35) !important;
    transform: translateY(-2px) !important;
}

:root.light button.bg-blue-600:active,
:root.light button.bg-blue-500:active,
:root.light .btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 159, 227, 0.2) !important;
}

/* Boutons outline - Moderne */
:root.light .btn-outline,
:root.light button.border-2 {
    background: transparent !important;
    border: 2px solid var(--gi-cyan) !important;
    color: var(--gi-cyan) !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

:root.light .btn-outline:hover,
:root.light button.border-2:hover {
    background: var(--gi-cyan) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* Boutons ghost - Subtils */
:root.light .btn-ghost {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

:root.light .btn-ghost:hover {
    background: rgba(0, 159, 227, 0.08) !important;
    color: var(--gi-cyan) !important;
}

/* Boutons icônes */
:root.light .btn-icon,
:root.light button[class*="w-8"],
:root.light button[class*="w-10"],
:root.light button[class*="w-12"] {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

:root.light .btn-icon:hover,
:root.light button[class*="w-8"]:hover,
:root.light button[class*="w-10"]:hover,
:root.light button[class*="w-12"]:hover {
    background: rgba(0, 159, 227, 0.08) !important;
    transform: scale(1.05) !important;
}

/* Groupes de boutons */
:root.light .btn-group button {
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

:root.light .btn-group button:first-child {
    border-radius: 8px 0 0 8px !important;
}

:root.light .btn-group button:last-child {
    border-radius: 0 8px 8px 0 !important;
    border-right: none !important;
}

/* États disabled */
:root.light button:disabled,
:root.light .btn-primary:disabled,
:root.light .btn-secondary:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

:root.light button:disabled:hover,
:root.light .btn-primary:disabled:hover,
:root.light .btn-secondary:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Boutons avec loading state */
:root.light button[data-loading="true"] {
    position: relative !important;
    color: transparent !important;
}

:root.light button[data-loading="true"]::after {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
    border-radius: 50% !important;
    animation: spin 0.6s linear infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   LIENS ET ACCENTS - CYAN GI
   ======================================== */

:root.light a,
:root.light .text-blue-500,
:root.light .text-blue-600,
:root.light .text-cyan-500 {
    color: var(--gi-cyan) !important;
}

:root.light a:hover,
:root.light .text-blue-500:hover,
:root.light .text-blue-600:hover {
    color: var(--accent-hover) !important;
}

/* ========================================
   SIDEBAR - IDENTITÉ GI (light mode enhancements)
   HTML uses semantic tokens. These are GI branding extras.
   ======================================== */

:root.light .sidebar-bg,
:root.light aside#sidebar {
    background: var(--bg-primary) !important;
    border-right: 1px solid var(--border-primary) !important;
}

/* User card — distinct background in light */
:root.light aside#sidebar .cursor-pointer.group {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

:root.light aside#sidebar .cursor-pointer.group:hover {
    border-color: rgba(0, 159, 227, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

:root.light aside#sidebar .cursor-pointer.group:hover #sidebar-user-name {
    color: var(--gi-cyan) !important;
}

/* User name — GI branding */
:root.light aside#sidebar #sidebar-user-name {
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
}

/* Role badge — cyan */
:root.light aside#sidebar #sidebar-user-role {
    background: rgba(0, 159, 227, 0.1) !important;
    color: var(--gi-cyan) !important;
    border-color: rgba(0, 159, 227, 0.2) !important;
}

/* Logout hover — red */
:root.light aside#sidebar button[onclick*="logout"]:hover {
    background: rgba(239, 68, 68, 0.05) !important;
}

:root.light aside#sidebar button[onclick*="logout"]:hover i,
:root.light aside#sidebar button[onclick*="logout"]:hover span {
    color: #ef4444 !important;
}

/* ── Sidebar theme toggle — source unique de vérité ──────────────── */
/* Base (both modes): dimensions + shape + reset admin.css .toggle-switch */
#sidebar-theme-toggle {
    width: 36px !important;     /* w-9 */
    height: 20px !important;    /* h-5 */
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 9999px !important;
    padding: 0 2px !important;
    border: none !important;
    cursor: pointer;
    position: relative !important;
    transition: background-color 0.2s ease !important;
}

#sidebar-theme-toggle-dot {
    width: 14px !important;     /* h-3.5 */
    height: 14px !important;
    min-width: 14px !important;
    border-radius: 9999px !important;
    background-color: #FFFFFF !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ── Dark mode (default): track = gray-600, dot right ── */
:root.dark #sidebar-theme-toggle,
#sidebar-theme-toggle {
    background-color: #4B5563 !important;  /* gray-600 */
}

:root.dark #sidebar-theme-toggle[aria-checked="true"] {
    background-color: var(--gi-cyan, #009FE3) !important;
}

/* ── Light mode: track = gray-400, dot left ── */
:root.light #sidebar-theme-toggle {
    background-color: #9CA3AF !important;  /* gray-400 */
}

:root.light #sidebar-theme-toggle[aria-checked="true"] {
    background-color: var(--gi-cyan, #009FE3) !important;
}

/* Focus ring — both modes */
#sidebar-theme-toggle:focus-visible {
    outline: 2px solid var(--gi-cyan, #009FE3) !important;
    outline-offset: 2px !important;
}

/* Dot in light mode — stronger shadow for contrast */
:root.light #sidebar-theme-toggle-dot {
    background-color: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}


/* ========================================
   CARDS ET CONTENEURS - DESIGN MODERNE GI
   ======================================== */

:root.light .card-bg,
:root.light .card {
    background: linear-gradient(145deg, #FFFFFF 0%, #FBFBFC 100%) !important;
    border: 1px solid #E0E4E8 !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.04) !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Accent subtil au top des cards */
:root.light .card-bg::before,
:root.light .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--gi-cyan) 0%, var(--gi-web) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

:root.light .card-bg:hover,
:root.light .card:hover {
    box-shadow: 0 12px 28px -4px rgba(0, 159, 227, 0.10), 0 4px 12px -2px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(0, 159, 227, 0.25) !important;
}

:root.light .card-bg:hover::before,
:root.light .card:hover::before {
    opacity: 1 !important;
}

/* Cards avec header */
:root.light .card .card-header,
:root.light .card-header {
    background: linear-gradient(135deg, rgba(0, 159, 227, 0.02) 0%, rgba(235, 93, 24, 0.02) 100%) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    padding: 16px 20px !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    color: var(--gi-black) !important;
}

/* Cards clickable - style interactif */
:root.light .card-bg[onclick],
:root.light .card[onclick],
:root.light .cursor-pointer.card-bg,
:root.light .cursor-pointer.card {
    cursor: pointer !important;
}

:root.light .card-bg[onclick]:hover,
:root.light .card[onclick]:hover,
:root.light .cursor-pointer.card-bg:hover,
:root.light .cursor-pointer.card:hover {
    box-shadow: 0 12px 32px rgba(0, 159, 227, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-4px) scale(1.01) !important;
}

/* Cards avec statut - bordure colorée */
:root.light .card.status-success,
:root.light .card-bg.status-success {
    border-left: 4px solid var(--success) !important;
}

:root.light .card.status-warning,
:root.light .card-bg.status-warning {
    border-left: 4px solid var(--warning) !important;
}

:root.light .card.status-error,
:root.light .card-bg.status-error {
    border-left: 4px solid var(--error) !important;
}

:root.light .card.status-info,
:root.light .card-bg.status-info {
    border-left: 4px solid var(--gi-cyan) !important;
}

/* Cards compactes pour statistiques */
:root.light .stat-card,
:root.light .metric-card {
    background: linear-gradient(145deg, #FFFFFF 0%, #F9FAFB 100%) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
}

:root.light .stat-card:hover,
:root.light .metric-card:hover {
    box-shadow: 0 8px 24px rgba(0, 159, 227, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* Conteneurs principaux */
:root.light .container,
:root.light .main-container {
    background: var(--bg-secondary) !important;
}

/* Content area — see CONTENT AREA section below */

/* Panels et sections */
:root.light .panel,
:root.light .section {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 12px !important;
    padding: 24px !important;
}

/* Dividers dans les cards */
:root.light .card hr,
:root.light .card-bg hr,
:root.light .divider {
    border-color: var(--border-primary) !important;
    opacity: 0.5 !important;
}

/* ========================================
   INPUTS ET FORMULAIRES
   ======================================== */

/* Inputs scoped to main — don't affect login page */
:root.light main input,
:root.light main textarea,
:root.light main select,
:root.light main .input-field {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-secondary) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-secondary) !important;
}

:root.light main input:focus,
:root.light main textarea:focus,
:root.light main select:focus,
:root.light main .input-field:focus {
    outline: none !important;
    border-color: var(--gi-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0, 159, 227, 0.2) !important;
}

:root.light main input::placeholder,
:root.light main textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* ========================================
   BADGES ET LABELS
   ======================================== */

:root.light .badge,
:root.light .label {
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
}

/* Badge succès */
:root.light .badge-success,
:root.light .bg-green-100 {
    background-color: #d1fae5 !important;
    color: var(--success) !important;
}

/* Badge info */
:root.light .badge-info,
:root.light .bg-blue-100 {
    background-color: #dbeafe !important;
    color: var(--gi-cyan) !important;
}

/* Badge warning */
:root.light .badge-warning,
:root.light .bg-yellow-100 {
    background-color: #fef3c7 !important;
    color: var(--warning) !important;
}

/* Badge erreur */
:root.light .badge-error,
:root.light .bg-red-100 {
    background-color: #fee2e2 !important;
    color: var(--error) !important;
}

/* ========================================
   TABLES
   ======================================== */

:root.light table {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
}

:root.light thead {
    background-color: var(--bg-tertiary) !important;
}

:root.light th {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-secondary) !important;
}

:root.light td {
    font-family: var(--font-secondary) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

:root.light tbody tr:hover {
    background-color: var(--bg-secondary) !important;
}

/* ========================================
   MODALS ET POPOVERS
   ======================================== */

:root.light .modal,
:root.light .popover,
:root.light [role="dialog"] {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-xl) !important;
}

:root.light .modal-header,
:root.light .modal-title {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

/* ========================================
   TOASTS ET NOTIFICATIONS
   ======================================== */

:root.light .toast {
    background-color: var(--card-bg) !important;
    border-left: 4px solid var(--gi-cyan) !important;
    box-shadow: var(--shadow-lg) !important;
}

:root.light .toast-success {
    border-left-color: var(--success) !important;
}

:root.light .toast-error {
    border-left-color: var(--error) !important;
}

:root.light .toast-warning {
    border-left-color: var(--warning) !important;
}

/* ========================================
   SCROLLBAR - STYLE GI
   ======================================== */

:root.light ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:root.light ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

:root.light ::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 4px;
}

:root.light ::-webkit-scrollbar-thumb:hover {
    background: var(--gi-cyan);
}

/* ========================================
   FORM INPUTS - THEME AWARE
   ======================================== */

/* Classe utilitaire pour inputs/selects adaptes au theme */
.form-input {
    width: 100%;
    border: 1px solid var(--border-primary);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input::placeholder {
    color: var(--text-tertiary);
}

.form-input:focus {
    outline: none;
    border-color: var(--gi-cyan);
    box-shadow: 0 0 0 2px rgba(0, 159, 227, 0.2);
}

.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Select specifique */
select.form-input {
    appearance: auto;
}

/* Textarea */
textarea.form-input {
    min-height: 80px;
    resize: vertical;
}

/* ========================================
   STATES ET FEEDBACK
   ======================================== */

/* Loading states */
:root.light .loading {
    color: var(--gi-cyan) !important;
}

/* Disabled states */
:root.light button:disabled,
:root.light input:disabled,
:root.light select:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Focus visible pour accessibilité */
:root.light *:focus-visible {
    outline: 2px solid var(--gi-cyan) !important;
    outline-offset: 2px !important;
}

/* ========================================
   LOGO ET BRANDING SPECIFIQUE
   ======================================== */

/* Le mot "ShopFlow" utilise toujours Outfit Bold */
:root.light [data-app-title],
:root.light .app-title,
:root.light .brand-name {
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--gi-black) 0%, var(--gi-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   PAGE HEADERS
   ======================================== */

.page-header {
    padding-top: 0.25rem;
}

.page-title {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.2;
}

.page-subtitle {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-top: 0.375rem;
    line-height: 1.5;
}

/* ========================================
   CONTENT AREA — BACKGROUND CONTRAST
   ======================================== */

:root.light main[role="main"],
:root.light main[role="main"] .flex-1.overflow-y-auto {
    background: var(--bg-primary) !important;
}

:root.dark main[role="main"],
:root.dark main[role="main"] .flex-1.overflow-y-auto {
    background: var(--bg-primary) !important;
}

/* ========================================
   FLOATING CARDS
   ======================================== */

.card-bg {
    border: none !important;
    border-radius: 1rem !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

/* --- DARK --- */
:root.dark .card-bg {
    background: var(--bg-secondary) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

:root.dark .card-bg:hover {
    box-shadow:
        0 0 0 1px rgba(0, 159, 227, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-1px);
}

/* --- LIGHT — shadow-driven depth (no visible border) --- */
:root.light .card-bg {
    background: var(--bg-secondary) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

:root.light .card-bg:hover {
    box-shadow:
        0 0 0 1px rgba(0, 159, 227, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 12px 36px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px);
}

/* ========================================
   SECTION TITLES — ACCENT BAR
   ======================================== */

.card-bg h3.text-lg {
    display: flex;
    align-items: center;
    padding-left: 0.875rem;
    border-left: 3px solid var(--gi-cyan);
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--text-primary) !important;
}

/* h4 sub-headers */
main h4.text-sm {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--text-tertiary) !important;
}

/* ========================================
   PLATFORM CARDS — REDESIGN
   ======================================== */

.platform-card {
    border-width: 1px !important;
    border-radius: 0.75rem !important;
    transition: all 0.2s ease !important;
}

:root.dark .platform-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
}

:root.dark .platform-card:hover:not(.opacity-60) {
    border-color: rgba(0, 159, 227, 0.4) !important;
    background: var(--bg-hover) !important;
}

:root.dark .platform-card.border-cyan-500 {
    border-color: var(--gi-cyan) !important;
    background: rgba(0, 159, 227, 0.06) !important;
}

:root.light .platform-card {
    background: #FAFBFC !important;
    border-color: #E2E8F0 !important;
}

:root.light .platform-card:hover:not(.opacity-60) {
    border-color: rgba(0, 159, 227, 0.4) !important;
    background: #F0F9FF !important;
}

:root.light .platform-card.border-cyan-500 {
    border-color: var(--gi-cyan) !important;
    background: rgba(0, 159, 227, 0.04) !important;
}

/* Platform icon container */
.platform-card .platform-icon {
    border-radius: 0.5rem;
}

:root.dark .platform-card .platform-icon {
    background: var(--border-secondary) !important;
}

:root.light .platform-card .platform-icon {
    background: #E2E8F0 !important;
}

:root.light .platform-card.border-cyan-500 .platform-icon {
    background: rgba(0, 159, 227, 0.12) !important;
}

/* ========================================
   INPUTS — THEME AWARE
   ======================================== */

main select,
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main textarea {
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-size: 0.875rem;
}

main select:focus,
main input:focus,
main textarea:focus {
    border-color: var(--gi-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.1) !important;
    outline: none !important;
}

:root.dark main select,
:root.dark main input[type="text"],
:root.dark main input[type="email"],
:root.dark main input[type="password"],
:root.dark main input[type="number"],
:root.dark main textarea {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
}

:root.light main select,
:root.light main input[type="text"],
:root.light main input[type="email"],
:root.light main input[type="password"],
:root.light main input[type="number"],
:root.light main textarea {
    background: #FAFBFC !important;
    border-color: #E2E8F0 !important;
}

/* Labels */
main label {
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
}

/* ========================================
   INFO / TIP BOXES
   ======================================== */

.card-bg [class*="bg-blue-900"],
.card-bg [class*="bg-purple-900"] {
    border-radius: 0.75rem !important;
}

:root.dark .card-bg [class*="bg-blue-900"],
:root.dark .card-bg [class*="bg-purple-900"] {
    background: rgba(0, 159, 227, 0.05) !important;
    border-color: rgba(0, 159, 227, 0.12) !important;
}

:root.light .card-bg [class*="bg-blue-900"],
:root.light .card-bg [class*="bg-purple-900"] {
    background: rgba(0, 159, 227, 0.03) !important;
    border-color: rgba(0, 159, 227, 0.1) !important;
}

/* Info box text color for light mode */
:root.light .card-bg [class*="bg-blue-900"] .text-blue-200,
:root.light .card-bg [class*="bg-blue-900"] .text-blue-400,
:root.light .card-bg [class*="bg-blue-900"] .text-blue-300 {
    color: var(--text-secondary) !important;
}

/* ========================================
   CTA BUTTONS — IMPACTFUL
   ======================================== */

.btn-gi,
button.bg-cyan-600 {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 0.625rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 159, 227, 0.2);
}

.btn-gi:hover,
button.bg-cyan-600:hover {
    box-shadow: 0 4px 14px rgba(0, 159, 227, 0.3);
    transform: translateY(-1px);
}

.btn-gi:active,
button.bg-cyan-600:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 159, 227, 0.2);
}

/* ========================================
   API KEY STATUS BAR
   ======================================== */

main .flex.justify-between.items-center.p-3 {
    border-radius: 0.5rem;
}

:root.dark main .flex.justify-between.items-center.p-3 {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-secondary) !important;
}

:root.light main .flex.justify-between.items-center.p-3 {
    background: #FAFBFC !important;
    border: 1px solid #E2E8F0 !important;
}

/* ========================================
   UPLOAD AREA
   ======================================== */

:root.dark #upload-area {
    border-color: var(--border-secondary) !important;
    background: rgba(15, 23, 42, 0.5);
}

:root.dark #upload-area:hover,
:root.dark #upload-area.border-cyan-500 {
    background: rgba(0, 159, 227, 0.04);
}

:root.light #upload-area {
    border-color: #CBD5E1 !important;
    background: #FAFBFC;
}

:root.light #upload-area:hover,
:root.light #upload-area.border-cyan-500 {
    background: #F0F9FF;
    border-color: var(--gi-cyan) !important;
}

/* ========================================
   TEXT COLOR OVERRIDES — BOTH THEMES
   ======================================== */


/* ========================================
   PILL TAB NAVIGATION
   ======================================== */

.nav-bar {
    background: var(--bg-secondary);
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.5rem;
    border: none;
    color: var(--text-tertiary);
    background: transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(127, 127, 127, 0.1);
}

.tab-btn-active,
.tab-btn.tab-btn-active {
    color: var(--gi-cyan) !important;
    background: rgba(0, 159, 227, 0.1) !important;
}

.tab-btn-active:hover {
    background: rgba(0, 159, 227, 0.15) !important;
}

/* Dark mode specifics */
:root.dark .nav-bar {
    background: var(--bg-secondary);
}

/* Light mode specifics */
:root.light .nav-bar {
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

:root.light .tab-btn {
    color: var(--text-secondary);
}

:root.light .tab-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.04);
}

:root.light .tab-btn-active,
:root.light .tab-btn.tab-btn-active {
    color: var(--gi-cyan) !important;
    background: rgba(0, 159, 227, 0.08) !important;
    font-weight: 600;
}

/* ========================================
   EXPLORER SUB-TABS
   ======================================== */

.explorer-subtab {
    color: var(--text-tertiary);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.explorer-subtab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.explorer-subtab-active,
.settings-subtab-active {
    color: var(--gi-cyan) !important;
    background: rgba(0, 159, 227, 0.08) !important;
    border-color: rgba(0, 159, 227, 0.2) !important;
    font-weight: 600 !important;
}

/* Settings sub-tabs — same base as explorer */
.settings-subtab {
    color: var(--text-tertiary);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.settings-subtab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* ========================================
   UTILITIES
   ======================================== */

/* Classes utilitaires pour forcer les couleurs GI */
:root.light .text-gi-cyan { color: var(--gi-cyan) !important; }
:root.light .text-gi-orange { color: var(--gi-web) !important; }
:root.light .text-gi-black { color: var(--gi-black) !important; }

:root.light .bg-gi-cyan { background-color: var(--gi-cyan) !important; }
:root.light .bg-gi-orange { background-color: var(--gi-web) !important; }
:root.light .bg-gi-black { background-color: var(--gi-black) !important; }

:root.light .border-gi-cyan { border-color: var(--gi-cyan) !important; }
:root.light .border-gi-orange { border-color: var(--gi-web) !important; }

/* ========================================
   NAVIGATION TABS - BARRE D'ONGLETS
   ======================================== */

/* Fond de la barre de nav */
:root.light nav.bg-gray-900 {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E0E4E8 !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* Tabs inactifs */
:root.light .tab-btn {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
}

:root.light .tab-btn:hover {
    color: var(--gi-cyan) !important;
    background: rgba(0, 159, 227, 0.04) !important;
    border-bottom-color: rgba(0, 159, 227, 0.3) !important;
}

/* Header mobile */
:root.light header.bg-gray-900 {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* ========================================
   OPACITY BG VARIANTS (bg-gray-800/XX)
   ======================================== */

/* bg-gray-800/30 - lignes alternees de tableaux, etc. */
:root.light .bg-gray-800\/30 {
    background: var(--bg-secondary) !important;
}

/* bg-gray-800/40 */
:root.light .bg-gray-800\/40 {
    background: var(--bg-secondary) !important;
}

/* bg-gray-700/50 - bordures et hover */
:root.light .border-gray-700\/50 {
    border-color: var(--border-primary) !important;
}

/* hover:bg-gray-800/30 */
:root.light .hover\:bg-gray-800\/30:hover {
    background: var(--bg-hover) !important;
}

/* hover:bg-gray-700 */
:root.light .hover\:bg-gray-700:hover {
    background: var(--bg-hover) !important;
}

/* ========================================
   MODALS EN THEME CLAIR
   ======================================== */

:root.light .bg-gray-900.rounded-lg.border {
    background-color: var(--card-bg) !important;
    border-color: var(--border-primary) !important;
}

:root.light .bg-black.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* ========================================
   SIDEBAR SUB-HEADERS
   ======================================== */

/* Labels de section (GENERATION IA, ENRICHISSEMENT WEB) */
:root.light aside#sidebar .text-\[10px\].uppercase {
    color: #6B7280 !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
}

/* ========================================
   HISTORY PAGE — TAB HISTORIQUE
   ======================================== */

/* Disable hover lift on card-bg containers (static panels, not clickable) */
#tab-history .card-bg:hover {
    transform: none !important;
}

#tab-history .card-bg::before {
    display: none !important;
}

/* --- Filter pills --- */
#tab-history .history-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}

:root.dark #tab-history .history-filter-pill {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
}

:root.light #tab-history .history-filter-pill {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

:root.light #tab-history .history-filter-pill:hover,
:root.light #tab-history .history-filter-pill:focus-within {
    border-color: rgba(0, 159, 227, 0.4);
    background: #E0F2FE;
}

#tab-history .history-filter-pill select,
#tab-history .history-filter-pill input[type="date"] {
    border: none !important;
    box-shadow: none !important;
    font-size: 0.8125rem;
    cursor: pointer;
}

/* Dark: transparent bg, native appearance */
:root.dark #tab-history .history-filter-pill select {
    background: transparent !important;
    padding: 0 !important;
}

:root.dark #tab-history .history-filter-pill input[type="date"] {
    background: transparent !important;
    padding: 0 !important;
}

/* Light: keep the chevron SVG from themes.css by NOT overriding background */
:root.light #tab-history .history-filter-pill select {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    padding-right: 1rem !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    appearance: none !important;
}

:root.light #tab-history .history-filter-pill input[type="date"] {
    color: var(--text-primary) !important;
    background: transparent !important;
    padding: 0 !important;
}

/* --- Action buttons --- */
#tab-history .history-action-btn {
    font-family: var(--font-primary, 'Outfit', sans-serif);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

#tab-history .history-action-btn.btn-refresh {
    background: var(--gi-cyan);
    color: white;
}
#tab-history .history-action-btn.btn-refresh:hover {
    background: #0088c7;
    box-shadow: 0 2px 8px rgba(0, 159, 227, 0.25);
}

#tab-history .history-action-btn.btn-clear {
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}
:root.light #tab-history .history-action-btn.btn-clear {
    background: #EDF2F7;
}

#tab-history .history-action-btn.btn-advanced {
    color: var(--gi-cyan);
    border: 1px solid rgba(0, 159, 227, 0.3);
}
#tab-history .history-action-btn.btn-advanced:hover {
    background: rgba(0, 159, 227, 0.1);
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 768px) {
    :root.light {
        /* Shadows reduites mais encore visibles sur mobile */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-md: 0 3px 8px -1px rgba(0, 0, 0, 0.10);
    }
}