/* ==========================================================================
   admin.css — the admin panel only. Loaded after app.css, which supplies the
   colour variables, buttons and form-field styling reused here.
   ========================================================================== */

/* app.css pins the CV workspace to the viewport; the admin panel is an
   ordinary scrolling document. */
html, body.admin-page{ height:auto; overflow:auto; }
body.admin-page{ background:var(--bg); }

.admin-wrap{ max-width:1080px; margin:0 auto; padding:22px 16px 60px; }

/* --------------------------------- Cards --------------------------------- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;
}
.card-title{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; font-size:13px; font-weight:700;
  letter-spacing:.7px; text-transform:uppercase; color:var(--txt-dim);
}
.card-title .count{
  font-size:11px; font-weight:700; letter-spacing:0;
  background:var(--panel-2); border:1px solid var(--line);
  color:var(--txt-dim); border-radius:20px; padding:2px 8px;
}
.inline-right{ margin-left:auto; }

.muted{ color:var(--txt-dim); font-size:12.5px; margin:0; }
.ta-r{ text-align:right; }

/* -------------------------------- Flashes -------------------------------- */
.flash{
  margin:0 0 14px; padding:11px 14px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; border:1px solid transparent;
}
.flash-ok{ background:rgba(22,163,74,.10); color:#15803d; border-color:rgba(22,163,74,.28); }
.flash-err{ background:rgba(214,69,80,.10); color:#b3323c; border-color:rgba(214,69,80,.28); }

/* ------------------------------ Site access ------------------------------ */
.access-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.access-row > div{ flex:1; min-width:240px; }
.status{ margin:0 0 4px; font-size:14px; display:flex; align-items:center; gap:8px; }
.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot-ok{  background:var(--ok);     box-shadow:0 0 0 3px rgba(22,163,74,.18); }
.dot-off{ background:var(--danger); box-shadow:0 0 0 3px rgba(214,69,80,.18); }

/* ------------------------------- Add form -------------------------------- */
.add-form{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.add-form .field{ flex:1 1 190px; margin-bottom:0; }
.add-form .btn{ flex:none; height:35px; }

/* --------------------------------- Table --------------------------------- */
.table-scroll{ overflow-x:auto; }
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--txt-faint);
  padding:0 10px 8px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{ padding:11px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }

.badge{
  display:inline-block; font-size:11px; font-weight:700; padding:3px 9px;
  border-radius:20px; background:var(--panel-2); border:1px solid var(--line);
  color:var(--txt-dim); white-space:nowrap;
}
.badge-admin{ background:rgba(47,111,224,.12); color:var(--accent); border-color:rgba(47,111,224,.30); }
.badge-ok{    background:rgba(22,163,74,.12);  color:#15803d;       border-color:rgba(22,163,74,.30); }
.badge-off{   background:rgba(214,69,80,.12);  color:#b3323c;       border-color:rgba(214,69,80,.30); }

.tag{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--txt-faint); border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; margin-left:6px; vertical-align:middle;
}

/* Each action is its own little form, laid out on one row. */
.row-actions{ display:flex; gap:6px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.row-actions form{ display:flex; gap:5px; align-items:center; }
.pw-form input{
  width:130px; font:inherit; font-size:12px; color:var(--txt);
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:6px 8px;
}
.pw-form input:focus{ outline:none; border-color:var(--accent); }

/* Per-user, per-tool access, in the Accounts table's Access column. */
.tool-access-form{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
.tool-access-tog{
  display:flex; align-items:center; gap:5px; font-size:12px; color:var(--txt-dim);
  cursor:pointer; white-space:nowrap;
}
.tool-access-tog input{ accent-color:var(--accent); cursor:pointer; width:15px; height:15px; }

/* ----------------------------- School library ---------------------------- */
/* One row of the Book Labels school list is itself a form: both names, a
   replacement crest and Save, edited in place rather than on a second page —
   the whole library is a handful of rows and every edit is a typo fix. */
.row-form{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.row-form input[type="text"]{
  flex:1 1 160px; min-width:0; font:inherit; font-size:12.5px; color:var(--txt);
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:6px 8px;
}
.row-form input[type="text"]:focus{ outline:none; border-color:var(--accent); }
.row-form input[type="file"]{ flex:1 1 150px; min-width:0; font-size:11px; color:var(--txt-dim); }
.row-drop{
  display:flex; align-items:center; gap:5px; font-size:11.5px;
  color:var(--txt-dim); white-space:nowrap; cursor:pointer;
}
.row-drop input{ accent-color:var(--danger); cursor:pointer; }

/* Filled in by the crest loader at the foot of admin/index.php. */
.crest-cell{
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden;
}
.crest-cell img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }

.nowrap{ white-space:nowrap; }

/* The border colours bound to a school, as three chips. */
.theme-chip{ display:inline-flex; gap:2px; vertical-align:middle; margin-left:4px; }
.theme-chip i{
  width:9px; height:16px; border-radius:2px; border:1px solid rgba(0,0,0,.15);
}

/* --------------------------------- Mobile -------------------------------- */
@media (max-width: 760px){
  .admin-wrap{ padding:14px 10px 40px; }
  .card{ padding:14px; }
  .row-actions{ justify-content:flex-start; }
}