/* Hifzhelper build 4.2.15.13 | css/admin.css */
/* ============================================================
   Hifzhelper — admin screen
   ============================================================ */

/* V3.44: the screen-level width cap that used to live here is REMOVED
   entirely, confirmed in chat -- #screen-admin is never independently
   capped now, it's just another --surface-track screen (css/base.css's
   universal .screen rule). The register box + search + list below are
   now wrapped in a new .screen-content div (index.html) for their own
   30/50 cap instead -- same gap Haidh had, confirmed against the code
   on request before this fix. */

/* V3.75.0 — item 1: icon and heading grouped LEFT, close on the right.
   The V3.74.2 attempt (.card-header-row-left, auto/1fr/auto) NEVER took
   effect: base.css's `.screen:has(> .screen-content) .card-header-row
   { grid-template-columns: 1fr auto }` matches this screen too, and at
   three classes of specificity it beat the single class regardless of
   source order. The two-column grid it forced onto a three-child header
   is what stranded the close button on a second row, centred. That class
   is now deleted (see css/detail-pages.css, V3.75.0); this id-scoped rule
   outranks the base one by construction. */
#screen-admin .card-header-row { grid-template-columns: auto 1fr auto; }
#screen-admin .card-header-row .card-header-icon { justify-self: start; }
#screen-admin .card-header-row h2 { justify-self: start; }

.admin-register-box {
  background: var(--color-surface);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
/* V3.4.3 item 2: restores the block/full-width styling every other form
   in the app already has for its labels/inputs. This box never had its
   own rule — it looked fine before only because a wrapping <div> (removed
   in the V3.4.2 restructuring) forced a line break as a side effect, not
   because the label/input were actually styled to stack. */
.admin-register-box label {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-ink-soft);
  margin-top: var(--space-md);
  margin-bottom: 4px;
}
.admin-register-box input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-sm);
  background: var(--color-page-bg);
}
#adminRegisterResult {
  font-size: var(--font-size-base);
  color: var(--color-success);
  margin-top: var(--space-sm);
}

/* ---- compact searchable user list ---- */
#admin_search {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}
.admin-list-empty {
  text-align: center;
  color: var(--color-ink-faint);
  padding: var(--space-lg);
}
/* Each row: a clickable name/ID area (its own button, opens the detail
   card) plus sibling icon-buttons for copy/share — kept as separate
   buttons rather than nested ones, since a <button> can't legally contain
   another <button>. */
.admin-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-table-border);
}
.admin-list-row:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.admin-list-row:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: none; }
.admin-list-open {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  text-align: left;
  color: var(--color-ink);
}
.admin-list-row .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-faint);
  flex: 0 0 auto;
}
.admin-list-name {
  flex: 1;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Inactive students: greyed-out name instead of a separate "Inactive"
   text label — keeps the row compact (V3.4.1). */
.admin-list-name.inactive { color: var(--color-ink-faint); }
/* V3.77.0 (j): a role chip on teaching and admin rows. After (j) the list
   holds a teaching row for every teacher alongside her student row, with
   the same name plus "(Teacher)" — the chip is the at-a-glance signal. A
   plain student row carries none, so the common case stays quiet. */
.admin-role-chip {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

button.secondary.danger {
  color: var(--color-error);
  border-color: var(--color-error);
}


/* V4.2.11: registration captures Female and, only when Female is on,
   Haaidha. The same compact controls are used by the mobile card and the
   temporary desktop register row; existing student rows are unchanged. */
.admin-register-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-ink-soft); white-space: nowrap;
}
.admin-register-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.admin-new-profile-inline { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* V4.2.15.1: when Female + Haaidha is selected during registration, show
   the same Haidh setup controls used by the Personal Journal before the
   account is created. Register remains the only commit action. */
.admin-register-haidh-setup {
  box-sizing: border-box;
  padding: var(--space-md);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.admin-register-haidh-setup .admin-register-haidh-title {
  display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm);
}
.admin-register-haidh-setup .admin-register-haidh-title strong { font-size: 17px; }
.admin-register-haidh-setup .haidh-ruling-row { margin-top: 0; }
.admin-register-haidh-setup .settings-row { margin-top: var(--space-sm); }
.admin-register-haidh-setup .settings-row label { margin: 0; }
.admin-register-haidh-setup .settings-row input { box-sizing: border-box; }
.admin-row-new-haidh td { background: var(--color-accent-soft, #D0DBE7); padding: 8px; }
.admin-row-new-haidh .admin-register-haidh-setup { max-width: 760px; margin: 0 auto; }
.admin-register-check.admin-register-haidh-check input[type="checkbox"] { width: 24px; height: 24px; }


/* ============================================================
   V4.1.0 (user's mock, 2026-09-01) — the admin table.
   Colour: the app's OWN palette, not the mock's pink — sage on the id
   column and mauve across the rest, the same pairing the journal and
   summary tables use, so this reads as their sibling. */
/* V4.2.0 (user): the maktab summary's shape — header row + white rows
   region, ONE width for both (the journal-table lesson: a width on only
   one of them splits the table in half). The card and .screen-content
   are gone, so the shared 30% desktop cap no longer applies here — the
   width comes from not opting in, not from an override. */
.admin-screen-body { padding: 0 var(--space-md); }
/* V4.2.1: HEADER and BODY are two tables sharing one <colgroup>, so their
   columns align exactly (the flex-header-over-fixed-table of V4.2.0
   never did). The header table wears the colours; the body table sits
   in its own white scrolling region. */
.admin-toolbar { display: flex; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); }
.admin-toolbar #admin_search { flex: 1 1 auto; margin: 0; }
.admin-toolbar .admin-add-row { flex: 0 0 auto; width: auto; margin: 0; padding: 8px 16px; }
/* V4.2.15.7: Register a user is a primary management action, not a
   dashed add-placeholder. */
.admin-toolbar #adminRegisterOpenBtn {
  border: 1px solid var(--palette-evergreen);
  background: var(--palette-evergreen);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.admin-toolbar #adminRegisterOpenBtn:hover { filter: brightness(.96); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.admin-table-head thead th {
  background: var(--color-table-header-log);
  text-align: left; padding: 10px 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.admin-table-head thead th.admin-th-id { background: var(--color-table-header-date); }
.admin-table-head thead th:first-child { border-top-left-radius: var(--radius-md); }
.admin-table-head thead th.admin-th-actions { border-top-right-radius: var(--radius-md); }
.admin-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-table-border); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  max-height: calc(100vh - var(--auth-band-height, 60px) - 160px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.admin-table-body td { overflow: hidden; }
/* the register row + its match hint, and the just-created highlight */
.admin-row-new td { background: var(--color-accent-soft, #D0DBE7); }
.admin-row-new .admin-register-btn { width: auto; padding: 6px 14px; font-size: 13px; }
/* V4.2.11.1: Register is an action, not a success-state indicator.
   Keep it forest green on both the desktop inline row and the mobile card
   without changing --color-success used by attendance/ticks elsewhere. */
button.secondary.admin-register-btn {
  background: var(--palette-evergreen);
  border-color: var(--palette-evergreen);
  color: #fff;
  font-weight: 600;
}
.admin-row-match td, .admin-row-newerr td { border-bottom: none; padding-top: 0; }
.admin-match-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); }
.admin-match-actions .secondary { width: auto; padding: 6px 12px; font-size: 13px; }
.admin-row-just-created td { background: var(--palette-lavender, #E3DADE); }
/* action buttons hug their content so the delete icon always fits */
.admin-actions-cell .secondary, .admin-actions-strip .secondary { width: auto; display: inline-block; }
/* V4.2.15.13: reserve at least 220px for Name plus 950px for the other
   columns. One horizontal scroll surface keeps header and body aligned;
   limiting this to larger screens preserves the mobile named-grid cards. */
@media (min-width: 768px) {
  .admin-toolbar, .admin-table-region, .admin-status-line { width: 80%; margin-left: auto; margin-right: auto; }
  .admin-table-region { overflow-x: auto; }
  .admin-table-layout { min-width: 1200px; }
  .admin-table-head, .admin-wrap { width: 100%; }
  .admin-wrap { overflow-x: hidden; }
}
.admin-table td { padding: 8px; border-bottom: 1px solid var(--color-table-border); vertical-align: middle; }
.admin-cell-id { font-size: 12px; opacity: .75; white-space: nowrap; }
.admin-dash { opacity: .55; }
/* the inline controls read as text until touched — the quiet pattern the
   settings rows already use */
.admin-inline {
  width: 100%; box-sizing: border-box; font: inherit;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--radius-sm); padding: 6px;
}
.admin-inline:focus { border-color: var(--color-table-border); background: var(--color-surface, #fff); outline: none; }
.admin-inline[type="checkbox"] { width: 20px; height: 20px; }
.admin-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.admin-actions-cell { white-space: nowrap; }
.admin-actions-cell .icon-btn, .admin-actions-strip .icon-btn { vertical-align: middle; }
.admin-pin-btn { width: auto; padding: 4px 10px; font-size: 12px; }
.admin-delete-btn { color: var(--color-error, #b3261e); }
.admin-add-row {
  display: block; width: 100%; margin-top: var(--space-md);
  border: 1px dashed var(--color-table-border); background: transparent;
  border-radius: 999px; padding: 10px; font: inherit; cursor: pointer;
}
.admin-status-line { min-height: 18px; font-size: 13px; opacity: .8; margin: 4px 0; }
.admin-status-line.is-error { color: var(--color-error, #b3261e); opacity: 1; }
/* DESKTOP: one wide row per user, the actions in their own cell */
.admin-row-actions { display: none; }
/* MOBILE: the fields TR + following actions TR are styled as one visual
   card. V4.2.9 final order: Name heading / Unique ID + WhatsApp /
   Role + Group + Status / actions. */
@media (max-width: 767px) {
  /* V4.2.9: mobile heading copies the Maktab Attendance header-card
     treatment without changing the established desktop Admin header. */
  #screen-admin .admin-header-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
  }
  #screen-admin .admin-header-row h2 { margin: 0; }
  #screen-admin .admin-header-row .screen-close-btn { margin-left: auto; }

  /* V4.2.9: mobile is a CARD LIST, not a table inside a white table
     container. Desktop/tablet retain the real table unchanged. */
  .admin-table.admin-table-head { display: none; }
  .admin-wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    max-height: none;
    overflow: visible;
  }
  .admin-table { min-width: 0; background: transparent; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }

  /* Four short visual rows:
       1 name (card heading, no caption)
       2 Unique ID | WhatsApp
       3 Role | Group | Status
       4 Reset PIN + delete/copy/share actions (the following action TR). */
  .admin-table tr.admin-row-fields {
    display: grid;
    background: var(--color-surface);
    border: 1px solid var(--color-table-border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: 0;
    padding: var(--space-sm) var(--space-md) 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      'name name name name name name'
      'id id id wa wa wa'
      'role role group group status status';
    gap: 0 var(--space-sm);
  }
  .admin-row-fields td { padding: 0 0 var(--space-sm); border: none; min-width: 0; }
  .admin-row-fields td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-ink-soft);
    margin-bottom: 2px;
  }
  .admin-row-fields td[data-label="Name"] { grid-area: name; }
  .admin-row-fields td[data-label="Name"]::before { display: none; }
  .admin-row-fields td[data-label="Name"] .admin-inline {
    font-size: 17px;
    font-weight: 700;
    padding: 2px 0 6px;
  }
  .admin-row-fields .admin-cell-id { grid-area: id; font-size: 11px; color: var(--color-ink-soft); }
  .admin-row-fields td[data-label="WhatsApp"] { grid-area: wa; }
  .admin-row-fields td[data-label="Role"] { grid-area: role; }
  .admin-row-fields td[data-label="Group"] { grid-area: group; }
  .admin-row-fields td[data-label="Status"] { grid-area: status; }
  .admin-row-fields .admin-actions-cell { display: none; }

  .admin-row-actions {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-table-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin: 0 0 var(--space-md);
  }
  .admin-row-actions td { border-bottom: none; padding: 4px var(--space-md) var(--space-sm); }
  .admin-actions-strip {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: nowrap;
  }
  .admin-row-actions [data-reset-pin] {
    order: 1;
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
    font-weight: 600;
    padding: 6px 12px;
  }
  .admin-row-actions [data-delete] { order: 2; }
  .admin-row-actions [data-copy-url] { order: 3; }
  .admin-row-actions [data-share-url] { order: 4; }

  /* V4.2.9.2: registration is a purpose-built MOBILE card instead of
     forcing the desktop table row into the card grid. Desktop/tablet still
     use the original inline table row. */
  .admin-mobile-register-card {
    width: 100%;
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1px solid var(--color-table-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: 0 0 var(--space-md);
  }
  .admin-mobile-register-heading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  .admin-mobile-register-heading strong {
    flex: 1 1 auto;
    font-size: 17px;
    line-height: 1.25;
  }
  .admin-mobile-register-heading .icon-btn { flex: 0 0 auto; }
  .admin-mobile-register-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
  }
  .admin-mobile-register-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: end;
    margin-bottom: var(--space-sm);
  }
  .admin-mobile-register-card label > span:first-child {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-ink-soft);
    margin-bottom: 2px;
  }
  .admin-mobile-register-card .admin-inline:not([type="checkbox"]) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .admin-mobile-new-status {
    min-height: 32px;
    align-items: center;
  }
  .admin-mobile-new-status > span {
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: inherit;
    margin: 0;
  }
  .admin-mobile-register-profile {
    display: flex; align-items: center; gap: var(--space-md);
    min-height: 28px; margin: 0 0 var(--space-sm);
  }
  .admin-mobile-register-card .admin-register-haidh-setup {
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm);
  }
  .admin-mobile-register-card .admin-register-haidh-setup .settings-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: var(--space-sm); align-items: center;
  }
  .admin-mobile-register-card .admin-register-haidh-setup .settings-row input { width: 100%; min-width: 0; }
  .admin-mobile-register-actions {
    display: flex;
    align-items: center;
  }
  .admin-mobile-register-actions .admin-register-btn {
    width: auto;
    min-width: 110px;
    background: var(--palette-evergreen);
    border-color: var(--palette-evergreen);
    color: #fff;
    font-weight: 600;
    padding: 7px 16px;
  }
  .admin-mobile-register-match { margin-top: var(--space-sm); }
  .admin-mobile-register-card .admin-match-actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-top: var(--space-xs);
  }
}



/* V4.2.15.2 — Student Management now uses the exact Attendance-style
   white header row at every width, not only a mobile imitation. */
#screen-admin .admin-header-row { display:flex; align-items:center; gap:var(--space-sm); background:var(--color-surface); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-md); margin-bottom:var(--space-md); }
#screen-admin .admin-header-row h2 { margin:0; }
#screen-admin .admin-header-row .screen-close-btn { margin-left:auto; }
.admin-haidh-pill { display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:64px; padding:5px 10px; border:1px solid var(--color-table-border); border-radius:999px; background:var(--color-page-bg); color:var(--color-ink-faint); font:inherit; font-size:12px; font-weight:700; cursor:pointer; opacity:.65; }
.admin-haidh-pill.is-complete { background:var(--palette-evergreen); border-color:var(--palette-evergreen); color:#fff; opacity:1; }
.admin-haidh-settings-card { width:min(620px, calc(100vw - 24px)); max-height:90vh; overflow:auto; }
.admin-haidh-settings-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-sm); padding-right:0; }
.admin-haidh-settings-titles { display:flex; align-items:baseline; gap:var(--space-sm); min-width:0; flex:1 1 auto; }
.admin-haidh-settings-head strong, .admin-haidh-settings-student { font-size:18px; font-weight:700; color:var(--color-ink); }
.admin-haidh-settings-student { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-haidh-settings-actions { display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.admin-haidh-settings-save { color:var(--palette-evergreen); padding:6px; }
.admin-haidh-settings-save svg { width:36px; height:36px; }
.admin-haidh-settings-card .admin-haidh-settings-close { position:static; inset:auto; margin:0; padding:4px 2px; font-size:28px; line-height:1; }
@media (max-width: 767px) {
  .admin-row-fields tr { min-width:0; }
  .admin-row-fields td[data-label="Haidh Settings"] { grid-area: haidh; }
  .admin-table tr.admin-row-fields { grid-template-areas: 'name name name name name name' 'id id id wa wa wa' 'role role group group status status' 'haidh haidh haidh haidh haidh haidh'; }
  .admin-row-fields td[data-label="Haidh Settings"] { padding-top:2px; }
}