/* =========================================================
   LOCATION.CSS — base commune des pages avec sidebar
   - Polices & variables
   - Layout 100vh + sidebar
   - Cards verre / boutons / header
   - Grille centrée 2 colonnes (responsive)
   - Cartes cliquables + focus
   ======================================================= */

/* Polices (mêmes familles que styles.css) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@700;800&family=Source+Sans+3:wght@600&display=swap');

/* ========= Variables ========= */
:root{
    /* Branding */
    --brand-primary: #173454;
    --brand-secondary: #c29a32;

    /* Typo */
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --font-title: Montserrat, var(--font-body);
    --font-subtitle: "Source Sans 3", var(--font-body);

    /* Couleurs */
    --text: #0b0f14;
    --muted: #516074;
    --bg: linear-gradient(135deg, #eef2f7 0%, #f8fafc 100%);
    --surface: hsl(0 0% 100% / .85);
    --surface-strong: hsl(0 0% 100% / .92);

    /* UI */
    --radius: 14px;
    --shadow-1: 0 10px 25px rgba(0,0,0,.16);
    --shadow-2: 0 2px 8px rgba(0,0,0,.10);

    --ink: #fff;
}

@media (prefers-color-scheme: dark) {
    :root{
        --text: #f3f7ff;
        --muted: #b2c0d6;
        --bg: radial-gradient(1000px 600px at 10% -10%, #141c26 0%, #0c1218 60%);
        --surface: hsl(215 22% 16% / .74);
        --surface-strong: hsl(215 22% 16% / .88);
    }
}

/* ========= Base & Layout ========= */
html, body { height: 100%; }
html { font-family: var(--font-body); font-size: 16px; }
body.app{
    margin: 0;
    color: var(--text);
    background: var(--bg);
}

/* Conteneur global avec sidebar */
.layout{
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

/* ========= Sidebar ========= */
.sidebar{
    width: 220px;
    flex: 0 0 220px;
    background: #0f243b;
    color: #fff;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar .brand{
    display: flex; align-items: center; gap: 10px;
    font-weight: 700;
}
.sidebar .brand img{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.sidebar .nav{ display: grid; gap: 6px; margin-top: 6px; }
.sidebar .nav a{
    display: block;
    color: #eaf1ff;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
}
.sidebar .nav a:hover{ background: rgba(255,255,255,.10); }
.sidebar .nav a.active{ background: rgba(255,255,255,.16); }

/* Sous-menus : cachés par défaut */
.sidebar .dropdown-content {
    display: none;
    margin-left: 10px;         /* petit décalage visuel */
}

/* Afficher au survol du parent */
.sidebar .dropdown-tickets:hover > .dropdown-content,
.sidebar .dropdown-hardwares:hover > .dropdown-content,
.sidebar .dropdown-contracts:hover > .dropdown-content,
.sidebar .dropdown-users:hover > .dropdown-content {
    display: block;
}

/* Optionnel: curseur et survol sur le déclencheur */
.sidebar .nav > div > a {
    display: block;
    color: #eaf1ff;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
}
.sidebar .nav > div > a:hover {
    background: rgba(255,255,255,.10);
}

/* ========= Main ========= */
.main{
    flex: 1;
    min-width: 0;
    padding: 24px 32px;
}

/* ========= Header ========= */
.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
}
.header h1{
    margin: 0;
    font-family: var(--font-title);
    font-size: clamp(1.3rem, .9rem + 1.4vw, 2rem);
}

/* ========= Boutons ========= */
.btn{
    appearance: none;
    border: 1px solid var(--brand-primary);
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    color: var(--brand-primary);
    background: #fff;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: filter .15s ease, transform .04s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }
.btn--ghost{ background: transparent; color: var(--brand-primary); }

/* Petit bouton pour actions (si besoin) */
.btn.btn--sm{ padding: 6px 10px; border-radius: 10px; font-weight: 600; }

/* ========= Cards (style “verre”) ========= */
.card, .hero, .form-card{
    background: var(--surface);
    border-radius: var(--radius);
    padding: clamp(16px, 2vw, 22px);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(10px);
    border: 1px solid hsl(210 20% 90% / .35);
}
@media (prefers-color-scheme: dark){
    .card, .hero, .form-card{ border-color: hsl(210 18% 20% / .35); }
}

/* ========= Grille centrée 2 colonnes (responsive) ========= */
.cards.cards--centered{
    --card-min: 280px;
    display: grid;
    grid-template-columns: repeat(2, minmax(var(--card-min), 1fr));
    gap: 20px 24px;
    max-width: 900px;          /* largeur idéale pour 2 colonnes */
    margin: 0 auto;
    align-items: stretch;      /* cartes alignées en hauteur */
}

/* 1 colonne sur mobile */
@media (max-width: 720px){
    .cards.cards--centered{
        grid-template-columns: 1fr;
        max-width: 520px;
    }
}

/* ========= Cartes stats cliquables ========= */
.card.stat{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 130px;          /* ajuste si besoin */
    text-align: center;
}
.card.stat h2{
    margin: 0;
    font-size: 2rem;
    color: var(--brand-primary);
}
.card.stat p{
    margin: 6px 0 0;
    color: var(--muted);
}
@media (prefers-color-scheme: dark){
    .card.stat h2{ color: var(--brand-secondary); }
    .card.stat p{ color: #cfd9e6; }
}

.card.clickable{
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.card.clickable:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(23,52,84,.18);
}
.card.clickable:active{ transform: translateY(0); }
.card.clickable:focus, .card.clickable:focus-visible{
    box-shadow: 0 0 0 3px rgba(23,52,84,.25);
}

/* ========= Formulaires (si pages edit/creation) ========= */
.form-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}
.field{ display: grid; gap: 6px; }
.field--wide{ grid-column: span 12; }
.field:not(.field--wide){ grid-column: span 6; }

.field label{ font-weight: 600; }
.field input, .field select, .field textarea{
    border: 1px solid hsl(210 18% 86% / .65);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    background: #fff;
    color: #173454;
}
@media (prefers-color-scheme: dark){
    .field input, .field select, .field textarea{
        background: hsl(215 22% 12% / .98);
        color: #f3f7ff;
        border-color: hsl(215 20% 28% / .6);
    }
}

/* ========= Utilitaires ========= */
.muted{ color: var(--muted); }
.right{ text-align: right; white-space: nowrap; }

/* ========= Responsive global ========= */
@media (max-width: 900px){
    .main{ padding: 18px; }
    .sidebar{ width: 200px; flex-basis: 200px; }
    .field, .filters .field, .field--wide{ grid-column: span 12; }
}