/* ═══════════════════════════════════════════════════════════
   LEITNI — Design System Admin
   Inspiré du style index.html : fond #f5f7fa, cartes blanches
   arrondies (15px), ombre douce, police Segoe UI/Roboto
   ═══════════════════════════════════════════════════════════ */

:root {
    --adm-bg:        #f5f7fa;
    --adm-surface:   #ffffff;
    --adm-border:    #e8ecf0;
    --adm-shadow:    0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    --adm-shadow-hv: 0 8px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);

    --adm-primary:   #4a90e2;
    --adm-primary-dk:#357abd;
    --adm-primary-lt:#eaf3fc;
    --adm-success:   #2ecc71;
    --adm-danger:    #e74c3c;
    --adm-warn:      #f39c12;

    --adm-text:      #333333;
    --adm-text2:     #555e68;
    --adm-text3:     #8a9ab0;
    --adm-sidebar:   #2c3e50;
    --adm-sidebar-hv:#34495e;

    --adm-radius:    15px;
    --adm-radius-sm: 10px;
    --adm-radius-lg: 20px;
    --adm-radius-pill:999px;

    --adm-font:      'Segoe UI', Roboto, system-ui, sans-serif;
    --adm-topbar-h:  60px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── TOPBAR ─────────────────────────────────────────────── */
.adm-topbar {
    position: sticky; top: 0; z-index: 100;
    height: var(--adm-topbar-h);
    background: var(--adm-surface);
    border-bottom: 1px solid var(--adm-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex; align-items: center; gap: 12px; padding: 0 20px;
}

.adm-back {
    flex-shrink: 0; width: 36px; height: 36px;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-bg); border: 1.5px solid var(--adm-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--adm-text); cursor: pointer;
    text-decoration: none; transition: background 0.15s;
    font-family: var(--adm-font); line-height: 1;
}
.adm-back:hover { background: var(--adm-border); }

.adm-topbar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.adm-topbar-title { font-size: 1rem; font-weight: 700; color: var(--adm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-topbar-sub   { font-size: 0.75rem; color: var(--adm-text3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-topbar-end   { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* ── PAGE ───────────────────────────────────────────────── */
.adm-page { max-width: 980px; margin: 0 auto; padding: 24px 20px 100px; }

/* ── SECTION CARD ───────────────────────────────────────── */
.adm-card {
    background: var(--adm-surface); border-radius: var(--adm-radius);
    border: 1px solid var(--adm-border); box-shadow: var(--adm-shadow);
    padding: 24px; margin-bottom: 16px;
}
.adm-card-title { font-size: 1.05rem; font-weight: 700; color: var(--adm-text); margin: 0 0 4px; }
.adm-card-sub   { font-size: 0.85rem; color: var(--adm-text3); margin: 0 0 16px; line-height: 1.45; }

/* ── BOUTONS ────────────────────────────────────────────── */
.adm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 18px; border-radius: var(--adm-radius-sm);
    font-family: var(--adm-font); font-size: 0.88rem; font-weight: 600;
    border: none; cursor: pointer;
    transition: transform 0.1s, opacity 0.15s, background 0.15s;
    white-space: nowrap;
}
.adm-btn:active  { transform: scale(0.96); }
.adm-btn:disabled{ opacity: 0.45; cursor: default; pointer-events: none; }
.adm-btn-primary { background: var(--adm-primary); color: white; }
.adm-btn-primary:hover { background: var(--adm-primary-dk); }
.adm-btn-success { background: var(--adm-success); color: white; }
.adm-btn-success:hover { opacity: 0.88; }
.adm-btn-danger  { background: var(--adm-danger); color: white; }
.adm-btn-danger:hover  { opacity: 0.88; }
.adm-btn-ghost   { background: var(--adm-surface); color: var(--adm-text2); border: 1.5px solid var(--adm-border); }
.adm-btn-ghost:hover   { background: var(--adm-bg); }
.adm-btn-lg { height: 48px; padding: 0 32px; font-size: 0.95rem; }

/* ── INPUTS ─────────────────────────────────────────────── */
.adm-input {
    height: 40px; padding: 0 14px; border-radius: var(--adm-radius-sm);
    border: 1.5px solid var(--adm-border); background: var(--adm-surface);
    font-family: var(--adm-font); font-size: 0.9rem; color: var(--adm-text);
    outline: none; transition: border-color 0.15s, box-shadow 0.15s; width: 100%;
}
.adm-input:focus { border-color: var(--adm-primary); box-shadow: 0 0 0 3px rgba(74,144,226,0.15); }
.adm-input-sm    { width: 72px; text-align: center; font-weight: 700; }

/* ── SAVE BARS ──────────────────────────────────────────── */
.adm-save-bar {
    position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
    background: var(--adm-sidebar); color: white;
    padding: 10px 16px 10px 20px; border-radius: var(--adm-radius);
    display: none; align-items: center; gap: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22); z-index: 200;
    white-space: nowrap; min-width: 260px;
}
.adm-save-bar.visible { display: flex; }
.adm-save-bar-label   { font-size: 0.85rem; flex: 1; }

.adm-save-bar-full {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.94); backdrop-filter: blur(12px);
    border-top: 1px solid var(--adm-border);
    padding: 14px 20px; display: flex; justify-content: center;
    align-items: center; gap: 12px; z-index: 200;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

/* ── DIVERS ─────────────────────────────────────────────── */
.adm-divider { height: 1px; background: var(--adm-border); margin: 16px 0; }

.adm-sort-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.adm-sort-pill {
    padding: 6px 14px; border-radius: var(--adm-radius-pill);
    font-size: 0.8rem; font-weight: 600; border: 1.5px solid var(--adm-border);
    background: var(--adm-surface); cursor: pointer; color: var(--adm-text2);
    transition: all 0.15s; font-family: var(--adm-font);
}
.adm-sort-pill.active { background: var(--adm-sidebar); color: white; border-color: var(--adm-sidebar); }
.adm-sort-pill:hover:not(.active) { background: var(--adm-bg); }

.adm-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--adm-radius-pill); font-size: 0.72rem; font-weight: 700; }
.adm-tag-blue  { background: var(--adm-primary-lt); color: var(--adm-primary-dk); }
.adm-tag-green { background: #eafaf1; color: #1e8449; }
.adm-tag-red   { background: #fdedec; color: #c0392b; }
.adm-tag-grey  { background: var(--adm-bg); color: var(--adm-text3); }

.adm-empty { text-align: center; padding: 40px; color: var(--adm-text3); font-size: 0.9rem; }

@keyframes adm-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.adm-fadein { animation: adm-fadein 0.25s ease-out both; }