/* Panneau admin (admin-ui.js) : grand ecran sur ordinateur, rubriques en bandeau sur telephone. */

#m-admin .adm-box { display: flex; flex-direction: column; width: min(1240px, calc(100vw - 2rem)); max-width: none; height: calc(100vh - 2rem); max-height: none; padding: 0; overflow: hidden; }
.adm-head { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.25rem; border-bottom: 1px solid var(--line); }
.adm-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.adm-nav { display: flex; flex-direction: column; gap: .2rem; padding: .85rem; border-right: 1px solid var(--line); overflow-y: auto; }
.adm-nav button { padding: .6rem .8rem; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600; text-align: left; cursor: pointer; white-space: nowrap; }
.adm-nav button:hover { background: var(--hover); }
.adm-nav button.on { background: var(--brand-soft); color: var(--brand-ink); }
.adm-main { min-width: 0; overflow-y: auto; padding: 1.25rem 1.5rem 2rem; }
.adm-sec[hidden] { display: none; }
.adm-sec > .card { margin-top: 0 !important; margin-bottom: 1rem; }
.adm-title { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; }

#m-admin .adm-kpis { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-bottom: 1rem !important; }
.adm-todo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.adm-todo-item { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.adm-todo-item:hover { border-color: var(--brand); }
.adm-todo-item strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.adm-todo-item span { font-size: .78rem; color: var(--muted); }

.adm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.adm-tools .inp { flex: 1 1 14rem; min-width: 0; }
.adm-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.adm-chip { min-height: 34px; padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; }
.adm-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.adm-count { font-size: .78rem; color: var(--muted); }

.adm-row[hidden] { display: none !important; }
.adm-row-meta { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 761px) {
  .adm-row { display: grid !important; grid-template-columns: minmax(0, 2fr) 7rem 9rem auto; align-items: center; }
}
.adm-err { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; overflow-wrap: anywhere; }
.adm-err-meta { font-size: .72rem; color: var(--muted); }
.adm-backup-note { margin: 0 0 .85rem; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.adm-backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.adm-backup-actions > * { min-height: 42px; }
.adm-backup-status { margin-top: .6rem; min-height: 1.2em; font-size: .82rem; font-weight: 600; }
.adm-restore { display: inline-flex; align-items: center; padding: .4rem 1rem; border: 1px solid var(--danger-ink); border-radius: var(--r-ctl); color: var(--danger-ink); font-size: .85rem; font-weight: 600; cursor: pointer; }

@media (max-width: 760px) {
  #m-admin .adm-box { width: 100vw; height: 100dvh; border-radius: 0; }
  .adm-head { padding: .6rem .85rem; }
  .adm-layout { display: flex; flex-direction: column; }
  .adm-nav { flex-direction: row; flex-shrink: 0; padding: .4rem .6rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .adm-nav button { min-height: 40px; padding: .4rem .75rem; }
  .adm-main { flex: 1; min-height: 0; padding: .9rem .85rem calc(1.5rem + env(safe-area-inset-bottom)); }
  .adm-row { flex-wrap: wrap; }
  .adm-row > :first-child { flex: 1 1 100%; }
  .adm-row > :last-child { margin-left: auto; }
  .adm-todo { grid-template-columns: 1fr 1fr; }
  #m-admin .adm-kpis { grid-template-columns: 1fr 1fr !important; }
}