/* ============================================================
   style.css — feuille de style GLOBALE, chargée par le gabarit de base
   `templates/index.html` sur TOUTE page du site.

   Contient : le reset CSS, et surtout le "design system" (bloc :root
   ci-dessous) — toutes les variables CSS (--accent, --bg-card, --shadow-md,
   --radius-*, etc.) réutilisées par les feuilles de style spécifiques à
   chaque page (case_creation.css, dashboard.css, ...) et par les styles
   inline des partials (header.html, footer.html, messages.html...).
   Modifier une variable ici a un impact global sur tout le site.
   ============================================================ */

/* ============================================================
   RESET CSS
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    text-rendering: optimizeSpeed;
    font-family: "Poppins", system-ui, -apple-system, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    min-height: 100vh;
}

ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
}

button { cursor: pointer; }
textarea { resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

p { overflow-wrap: break-word; }
fieldset { border: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================
   DESIGN SYSTEM — Variables
   ============================================================ */
:root {
    /* Colors */
    --bg-main:        #f4f7fb;
    --bg-card:        #ffffff;
    --bg-subtle:      #edf2f9;

    --text-primary:   #1a2744;
    --text-secondary: #5a6a8a;
    --text-muted:     #9ba8c0;

    --accent:         #2c5fbf;
    --accent-light:   #5ba2cf;
    --accent-hover:   #1e4a9e;
    --accent-soft:    #e8f0fe;

    --blue-dark:      #2c4471;
    --blue-light:     #5ba2cf;

    --success:        #16a34a;
    --success-bg:     #dcfce7;
    --warning:        #d97706;
    --warning-bg:     #fef3c7;
    --error:          #dc2626;
    --error-bg:       #fee2e2;
    --info:           #0284c7;
    --info-bg:        #e0f2fe;

    --border:         #dce3f0;
    --border-focus:   var(--accent);
    --shadow-sm:      0 1px 3px rgba(44,95,191,0.08);
    --shadow-md:      0 4px 16px rgba(44,95,191,0.12);
    --shadow-lg:      0 8px 32px rgba(44,95,191,0.16);

    /* Status badges */
    --status-open:          #d97706;
    --status-open-bg:       #fef3c7;
    --status-progress:      #0284c7;
    --status-progress-bg:   #e0f2fe;
    --status-resolved:      #16a34a;
    --status-resolved-bg:   #dcfce7;
    --status-closed:        #6b7280;
    --status-closed-bg:     #f3f4f6;

    /* Radius & spacing */
    --radius-sm:    6px;
    --radius-md:    12px;
    --radius-lg:    20px;
    --radius-pill:  999px;

    --header-h:     68px;
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
#app-content {
    min-height: calc(100vh - var(--header-h) - 60px);
}

/* ============================================================
   SHARED BUTTON STYLES
   ============================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-subtle);
    color: var(--text-primary);
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: 0.88rem;
    border: 1px solid var(--border);
    transition: background 0.2s, transform 0.15s;
}
.btn-secondary:hover {
    background: var(--border);
    transform: translateY(-1px);
}

/* ============================================================
   SHARED CARD STYLE
   ============================================================ */
.card-modern {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.card-modern:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* ============================================================
   SHARED INPUT STYLE
   ============================================================ */
.input-modern {
    width: 100%;
    padding: 11px 16px;
    background: var(--bg-subtle);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-modern:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(44,95,191,0.12);
}

/* ============================================================
   BADGE STYLES
   ============================================================ */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-success  { background: var(--success-bg);  color: var(--success); }
.badge-warning  { background: var(--warning-bg);  color: var(--warning); }
.badge-error    { background: var(--error-bg);    color: var(--error);   }
.badge-info     { background: var(--info-bg);     color: var(--info);    }
.badge-muted    { background: var(--status-closed-bg); color: var(--status-closed); }