/* ============================================================
   VigiRoute Sérénité — Habillage de l'administration
   (charte distincte de l'application : tons ambre / ardoise)
   ============================================================ */

:root {
  --a-navy:    #14212B;
  --a-navy-dk: #0C1720;
  --a-amber:   #C77B15;
  --a-amber-lt:#FDF3E2;
  --a-slate:   #3E5461;
  --a-off:     #F5F6F7;
  --a-line:    #DEE4E8;
  --a-text:    #1B2A33;
  --a-gray:    #5C6E79;
}

body.admin-body { background: var(--a-off); color: var(--a-text); }

/* ---------- Écran de connexion ---------- */
.admin-login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
}
.admin-login-hero {
  background: linear-gradient(150deg, var(--a-navy-dk) 0%, var(--a-slate) 100%);
  padding: calc(34px + var(--safe-top)) 22px 46px; text-align: center;
}
.admin-login-hero .brand { justify-content: center; margin-bottom: 16px; }
.admin-login-hero .brand-mark { background: var(--a-amber); }
.admin-login-hero h1 { color: #fff; font-size: clamp(1.5rem, 4.6vw, 2rem); margin-bottom: 8px; }
.admin-login-hero p { color: rgba(255,255,255,.7); font-size: .95rem; }
.admin-login-panel {
  flex: 1; background: #fff; border-radius: 24px 24px 0 0; margin-top: -22px;
  padding: 26px 20px calc(40px + var(--safe-bottom)); position: relative; z-index: 2;
}
.admin-login-inner { max-width: 440px; margin: 0 auto; }

/* ---------- Barre du haut ---------- */
.admin-top {
  position: sticky; top: 0; z-index: 60; background: var(--a-navy);
  padding-top: var(--safe-top); box-shadow: 0 2px 12px rgba(12,23,32,.2);
}
.admin-top .top-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 16px;
  min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.admin-top .brand-mark { background: var(--a-amber); }
.admin-tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-navy); background: var(--a-amber); padding: 3px 8px; border-radius: 6px;
  margin-left: 8px; vertical-align: middle;
}

/* ---------- Contenu ---------- */
.admin-main { max-width: 1080px; margin: 0 auto; padding: 22px 16px 0; }
.admin-view { padding-bottom: 112px; }
.admin-head { margin-bottom: 20px; }
.admin-head h2 { font-size: clamp(1.35rem, 3.6vw, 1.8rem); margin-bottom: 5px; }
.admin-head p { color: var(--a-gray); font-size: .94rem; }

.admin-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
@media (min-width: 760px) { .admin-kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.admin-kpi {
  background: #fff; border: 1px solid var(--a-line); border-radius: var(--radius);
  padding: 15px;
}
.admin-kpi .l { font-size: .74rem; color: var(--a-gray); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.admin-kpi .v { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--a-navy); line-height: 1.15; margin-top: 6px; }
.admin-kpi.alert { border-left: 4px solid var(--a-amber); }
.admin-kpi.good { border-left: 4px solid var(--ok); }
.admin-kpi.bad { border-left: 4px solid var(--danger); }

.admin-panel {
  background: #fff; border: 1px solid var(--a-line); border-radius: var(--radius);
  padding: 19px; margin-bottom: 18px;
}
.admin-panel .panel-head h3 { color: var(--a-navy); }

/* ---------- Filtres ---------- */
.admin-filters {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px;
}
@media (min-width: 640px) { .admin-filters { grid-template-columns: 2fr 1fr auto; align-items: end; } }
.admin-filters .field { margin: 0; }

/* ---------- Tableaux ---------- */
table.data th { background: var(--a-navy); }
.admin-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Barre de navigation de l'administration ---------- */
.admin-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  background: #fff; border-top: 1px solid var(--a-line);
  padding-bottom: var(--safe-bottom); box-shadow: 0 -2px 16px rgba(12,23,32,.09);
}
.admin-tabbar .tabbar-inner { max-width: 1080px; margin: 0 auto; display: flex; overflow-x: auto; scrollbar-width: none; }
.admin-tabbar .tabbar-inner::-webkit-scrollbar { display: none; }
.admin-tabbar .tab {
  flex: 1 0 auto; min-width: 76px; padding: 10px 8px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #8A9AA4; font-size: .7rem; font-weight: 700; border-top: 3px solid transparent;
}
.admin-tabbar .tab svg { width: 21px; height: 21px; }
.admin-tabbar .tab.active { color: var(--a-amber); border-top-color: var(--a-amber); }

/* ---------- Bannière domaine ---------- */
.admin-domain {
  background: var(--a-amber-lt); border: 1px solid rgba(199,123,21,.3);
  border-radius: var(--radius); padding: 18px; margin-bottom: 18px;
}
.admin-domain h3 { color: var(--a-navy); margin-bottom: 7px; }
.admin-domain p { font-size: .9rem; color: var(--a-gray); margin-bottom: 14px; }

.admin-btn-amber { background: var(--a-amber); color: #fff; }
.admin-btn-amber:hover { background: #A9660F; }

.audit-line {
  display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--a-line);
  font-size: .88rem;
}
.audit-line:last-child { border-bottom: none; }
.audit-line time { color: var(--a-gray); font-size: .8rem; white-space: nowrap; }
.audit-line b { color: var(--a-navy); }

.admin-msg-card {
  border: 1px solid var(--a-line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; background: #fff;
}
.admin-msg-card .mc-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.admin-msg-card .mc-head strong { color: var(--a-navy); font-size: .98rem; }
.admin-msg-card .mc-body { font-size: .92rem; color: var(--a-gray); line-height: 1.55; }
.admin-msg-card .mc-foot { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

@media print { .admin-tabbar, .admin-top { display: none !important; } }