/* ============================================================================
   admin.css — the masjid console's own layer.

   Everything shared with the business console lives in console.css, which is
   a verbatim copy of the marketing site's and must stay that way. This file
   is what is genuinely particular to a seven-tab masjid panel, plus a few
   compatibility aliases. It is never copied anywhere.
   ========================================================================= */

/* ---- Compatibility aliases ------------------------------------------------
   admin.js toggles `hide` in roughly fifty places. Renaming every one of them
   to `c-hide` would be a large, purely mechanical diff through the one file
   that most needs to stay readable across a branch merge, for no behavioural
   gain — so the old name is simply aliased to the new one. Markup written
   from here on uses c-hide; the two are interchangeable.
   ------------------------------------------------------------------------ */
.hide{display:none!important}

/* ---- Topbar and login signature ---------------------------------------- */
/* The masjid leads; Ikhaa signs. This is the second of the two places the
   Ikhaa mark appears (the footer is the other) — deliberately quiet, and
   deliberately present, so a committee member always knows whose tool this
   is and who to contact. */
.admin-signature{
  display:flex;align-items:center;justify-content:center;gap:var(--c-s2);
  color:var(--c-muted);font-size:var(--c-text-sm);
  margin:0 0 var(--c-s6);
}
.admin-signature img{opacity:.85}

/* Top right: Log out, then the Ikhaa mark linking back to the website. The
   mark is the light variant because the topbar is always the masjid's dark
   brand colour. The link is 44px square so it is an honest tap target on a
   phone, though the mark itself stays small and quiet. */
.c-topbar__right{display:flex;align-items:center;gap:var(--c-s2);flex:0 0 auto}
.ikhaa-home{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--c-radius-sm);
  opacity:.85;transition:opacity 120ms ease-out;
}
.ikhaa-home:hover,.ikhaa-home:focus-visible{opacity:1}
.ikhaa-home img{width:28px;height:28px;border-radius:4px}
/* On a phone the masjid's name needs the width more than the mark does:
   narrower hit area (still full topbar-height tall) and a smaller mark. */
@media (max-width:480px){
  .c-topbar__right{gap:2px}
  .ikhaa-home{width:30px}
  .ikhaa-home img{width:22px;height:22px}
  #logoutBtn{padding:0 10px}
}

/* ---- Cards -------------------------------------------------------------- */
/* Sub-heading inside a card — the per-business offers block. */
.sub{
  margin:var(--c-s5) 0 var(--c-s3);padding-top:var(--c-s4);
  border-top:1px solid var(--c-line-subtle);
}

/* A small action in a card heading (e.g. Announcements → Archived posts),
   pushed to the right of the title. */
.head-btn{margin-left:auto}

/* ---- Prayer times ------------------------------------------------------- */
.pt-check{width:44px}
/* The AM/PM select and the Apply button should not stretch to a third of the
   bar the way the two text fields do. */
.applybar-narrow{flex:0 0 auto!important;min-width:100px}
.c-applybar .applybar-narrow .c-btn{margin-top:22px}
@media (max-width:640px){
  .c-applybar .applybar-narrow .c-btn{margin-top:0;width:100%}
  .applybar-narrow{flex:1 1 100%!important}
}

/* ---- Row metadata ------------------------------------------------------- */
/* The business-account line under a listed business ("login: a@b.co.uk"). */
.acct{display:block;color:var(--c-subtle);font-size:var(--c-text-caption);margin-top:2px}

/* The view counter on a post. Tabular so a list of counts reads as a column
   rather than a ragged edge. */
.views{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- Approvals ---------------------------------------------------------- */
/* The rejection-reason box shown inline on a submission. */
.reject-box{margin-top:var(--c-s2)}
.reject-box .c-control{margin-bottom:var(--c-s2)}

/* ---- Inline mini-forms -------------------------------------------------- */
/* Replaces prompt() for the two places that asked for real data: a business
   login's email address, and a new password for an admin. prompt() cannot be
   labelled, validated, styled or made to explain itself. */
.mini-form{margin-top:var(--c-s2);width:100%}
.mini-form .c-field{margin-bottom:var(--c-s2)}

/* ---- Wide screens ------------------------------------------------------- */
/* Above 900px the nav is a rail and the drawer machinery is inert, so the
   console can use the width it has. Every tab was previously locked to a
   760px column behind a hamburger even at 1440px. */
@media (min-width:900px){
  .c-wrap--wide{padding-top:var(--c-s5)}
}