/* ==========================================================================
   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; }

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