/* ==========================================================================
   Darb Al-Zahra — UX Phase 1 refinements (loaded AFTER styles.css).
   Identity is untouched: every colour, radius family, shadow, gradient and the glass recipe comes from the
   existing tokens (--primary, --gold, --card, --line, --muted, --shadow…). This file only organises:
   hierarchy, grouping (More menu / danger zone), compact rows, matrix, no inner scrollers, mobile tables.
   ========================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- accessibility: visible keyboard focus + reduced motion (existing tokens only) */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- "More" menu (secondary actions) */
.more-menu{position:relative;display:inline-block}
.more-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;user-select:none}
.more-menu>summary::-webkit-details-marker{display:none}
.more-menu>summary b{font-size:11px;opacity:.8;transition:transform .15s}
.more-menu[open]>summary b{transform:rotate(180deg)}
.more-menu-list{position:absolute;z-index:40;inset-block-start:calc(100% + 6px);inset-inline-end:0;min-width:240px;max-width:min(320px,86vw);padding:6px;border-radius:18px;background:var(--card-solid);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:2px}
.more-menu:not([open])>.more-menu-list{display:none}
.more-menu-item{display:grid;gap:2px;width:100%;text-align:start;padding:10px 12px;border-radius:13px;border:0;background:transparent;color:var(--text);font:inherit;font-weight:800;cursor:pointer}
.more-menu-item small{font-weight:600;font-size:12px;color:var(--muted);line-height:1.5}
.more-menu-item:hover,.more-menu-item:focus-visible{background:var(--primary-soft)}
.more-menu-item.danger{color:var(--danger)}
.row-more>summary{min-width:40px;justify-content:center;padding-inline:10px;font-size:18px;line-height:1}
.row-more>summary b{display:none}

/* ---- managed khatma admin: primary actions, More, separated danger zone */
.admin-layout{display:grid;gap:14px}
.admin-lead{margin:0;color:var(--muted)}
.admin-primary-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.danger-zone{margin-top:6px;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.danger-zone strong{display:block}
.danger-zone small{display:block;color:var(--muted);line-height:1.6}

/* ---- WhatsApp editor: one editable surface */
.wa-editor{display:grid;gap:12px}
.wa-message-field{display:grid;gap:6px}
.wa-message-field small{font-weight:500;color:var(--muted)}
.wa-message-field textarea{min-height:150px;line-height:1.9}
.wa-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wa-hint{margin:0;color:var(--muted);font-size:12.5px}
.wa-template-toggle[aria-expanded="true"]{background:var(--primary-soft)}

/* ---- rotation matrix (reader x period) */
.rot-panel{display:block}.rot-panel>*+*{margin-top:12px}.rot-panel>*{min-width:0;max-width:100%}
.rot-lead{margin:0;color:var(--muted)}
.rot-actions{display:flex;flex-wrap:wrap;gap:10px}
.rot-matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--card);-webkit-overflow-scrolling:touch}
.rot-matrix{width:100%;border-collapse:separate;border-spacing:0;min-width:max-content;font-size:13.5px}
.rot-matrix th,.rot-matrix td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.rot-matrix thead th{position:sticky;top:0;background:var(--card-solid);font-weight:800;vertical-align:bottom}
.rot-matrix thead th small{display:block;font-weight:600;font-size:11.5px;color:var(--muted)}
.rot-matrix thead th em{display:block;font-style:normal;font-size:11px;color:var(--primary);font-weight:800}
.rot-matrix tbody tr:last-child th,.rot-matrix tbody tr:last-child td{border-bottom:0}
.rot-matrix .rot-name{position:sticky;inset-inline-start:0;z-index:2;text-align:start;background:var(--card-solid);font-weight:800;min-width:132px;box-shadow:inset -1px 0 0 var(--line)}
.rot-matrix .is-current{background:var(--primary-soft)}
.rot-matrix tbody .is-current .rot-juz{color:var(--primary);font-weight:900}
.rot-juz{display:inline-block;font-weight:700;letter-spacing:.2px}
.rot-empty{color:var(--muted)}

/* ---- readers directory: toolbar + compact rows */
.rd-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.rd-search{flex:1 1 280px;min-width:0}
.rd-search input{width:100%}
.rd-toolbar select{flex:0 1 220px;min-width:0}
.rd-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.rd-chip-btn{font:inherit;font-weight:800;font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer}
.rd-chip-btn b{color:var(--muted);font-weight:700;margin-inline-start:4px}
.rd-chip-btn.active{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.rd-chip-btn.active b{color:var(--primary)}
.rd-toolbar-actions{display:flex;gap:8px;margin-inline-start:auto}
.rd-section{margin-top:22px}
.rd-groups{display:grid;gap:8px}
.rd-group-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.rd-group-main{min-width:0;display:grid;gap:2px}
.rd-group-main strong{overflow-wrap:anywhere}
.rd-group-meta{color:var(--muted);font-size:12.5px}
.rd-group-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.rd-more{display:flex;justify-content:center;margin-top:12px}
.reader-row{align-items:center;gap:10px 14px;padding-block:10px}
.reader-row.is-off{opacity:.72}
.reader-row .owner-row-title{display:flex;flex-wrap:wrap;gap:6px;align-items:center;overflow-wrap:anywhere}
.reader-row .owner-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;white-space:normal;font-size:12.5px}
.reader-row .owner-row-meta>span+span::before{content:"·";margin-inline:7px;opacity:.55}
.reader-row .rd-group{color:var(--primary);font-weight:800}
.reader-row .rd-note{max-width:100%;overflow-wrap:anywhere}
.reader-row .owner-row-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.rd-chip{display:inline-flex;align-items:center;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:800;background:var(--primary-soft);color:var(--primary)}
.rd-chip.off{background:var(--danger-soft,rgba(157,63,63,.11));color:var(--danger)}

/* ---- current distribution: chips, compact rows, NO inner scroller */
.audit-chips{display:flex;flex-wrap:wrap;gap:10px 22px;margin:2px 0 12px}
.audit-chips>div{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.audit-chip-label{font-size:12.5px;font-weight:800;color:var(--muted);margin-inline-end:2px}
.audit-chip{min-width:34px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.audit-chip.shared{border-color:var(--gold)}
.audit-chip.empty{border-color:var(--danger);color:var(--danger)}
.audit-chip:hover{background:var(--primary-soft)}
.audit-chip-none{font-style:normal;color:var(--muted);font-size:12.5px}
.reader-audit-table-wrap{max-height:none;overflow-y:visible;overflow-x:auto}
.reader-audit-table{width:100%}
.reader-audit-table th[scope="row"]{white-space:nowrap;width:1%;text-align:center;vertical-align:top}
.audit-num{display:inline-grid;place-items:center;min-width:32px;height:32px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:900}
.audit-multi{display:block;margin-top:3px;font-size:11px;color:var(--gold);font-weight:800}
.reader-audit-assignments{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.reader-audit-assignments li{display:flex;align-items:center;justify-content:space-between;gap:10px}
.reader-audit-filters{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
@media (max-width:560px){.reader-audit-filters{grid-template-columns:1fr}}

/* ---- unit action icons (SVG instead of emoji) + status dots */
.managed-reader-action{display:inline-grid;place-items:center;min-width:42px;min-height:42px;padding:0}
.managed-reader-action svg{display:block}
.st-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-inline-end:6px;vertical-align:middle;background:var(--muted)}
.st-dot.st-completed{background:var(--primary)}
.st-dot.st-reading{background:var(--gold)}
.st-dot.st-assigned{background:var(--muted);opacity:.65}

/* ---- visual hierarchy: operational pages get a compact page head (public pages keep the hero scale) */
body[data-route^="managed"] .page-head h1,body[data-route="reader-group"] .page-head h1,body[data-route="dashboard"] .page-head h1,body[data-route="reports"] .page-head h1,body[data-route="owner"] .page-head h1,body[data-route="owner-center"] .page-head h1,body[data-route="reader-activity-logs"] .page-head h1,body[data-route="khatma"] .page-head h1,body[data-route="khatmas"] .page-head h1{font-size:clamp(26px,1.2vw + 20px,38px)!important;line-height:1.25!important;margin-block:6px 6px!important}
body[data-route^="managed"] .page-head,body[data-route="reader-group"] .page-head,body[data-route="dashboard"] .page-head,body[data-route="reports"] .page-head,body[data-route="owner"] .page-head,body[data-route="owner-center"] .page-head,body[data-route="reader-activity-logs"] .page-head,body[data-route="khatmas"] .page-head{padding-block:18px 10px!important}
body[data-route^="managed"] .page-head p,body[data-route="reader-group"] .page-head p{font-size:15px}
.mini-stats,.reader-audit-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}

/* ---- touch comfort */
@media (pointer:coarse){.compact-btn{min-height:42px}.more-menu-item{min-height:46px}.rd-chip-btn{min-height:40px}}

/* ---- wide tables → label/value cards on narrow screens */
@media (max-width:760px){
  table.rt-cards{display:block;width:100%}
  table.rt-cards thead{display:none}
  table.rt-cards tbody{display:grid;gap:10px}
  table.rt-cards tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
  table.rt-cards td{display:flex;flex-direction:column;gap:1px;min-width:0;padding:2px 0!important;border:0!important;text-align:start!important;overflow-wrap:anywhere}
  table.rt-cards td:first-child{grid-column:1/-1;font-weight:800;padding-bottom:6px!important;border-bottom:1px solid var(--line)!important}
  table.rt-cards td:first-child::before{display:none}
  table.rt-cards td:empty{display:none}
  table.rt-cards td::before{content:attr(data-label);color:var(--muted);font-weight:700;font-size:12px;flex-shrink:0}
}

/* ---- distribution table → compact part cards (3 columns on desktop, 1 on phones); no inner scroller, no wide gaps */
.reader-audit-table-wrap{border:0;border-radius:0;overflow:visible}
.reader-audit-table{display:block;border:0;background:none}
.reader-audit-table caption{display:block;text-align:start;margin-bottom:8px}
.reader-audit-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.reader-audit-table tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
.reader-audit-table tr{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.reader-audit-table tr[hidden]{display:none!important}
.reader-audit-table tr[data-audit-kind="shared"]{border-color:var(--gold)}
.reader-audit-table tr[data-audit-kind="empty"]{border-style:dashed}
.reader-audit-table th[scope="row"]{display:block;width:auto;padding:0;border:0;flex-shrink:0}
.reader-audit-table td{display:block;flex:1;min-width:0;padding:0!important;border:0!important;align-self:center}

/* reader rows: name+meta on the right, actions on the same line (all widths) */
.reader-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 12px}
.reader-row .owner-row-main{min-width:0}
.reader-row .owner-row-actions{align-self:center}
.reader-row .owner-row-actions>.btn{min-height:38px}

/* unit cards: icon buttons never push the grid wider than the screen */
.managed-reader-action{min-width:38px;min-height:38px}
.managed-unit-reader-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.managed-unit-reader-row>span{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
.units-grid>.unit{min-width:0}
.units-grid .status-dot{max-width:100%;white-space:normal;text-align:center;line-height:1.5;border-radius:14px;overflow-wrap:anywhere}
@media (max-width:820px){.units-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:360px){.units-grid{grid-template-columns:minmax(0,1fr)!important}}

/* phones: two compact part cards per row */
@media (max-width:560px){
  .reader-audit-table tbody{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .reader-audit-table tr{padding:8px 9px;gap:7px}
  .audit-num{min-width:28px;height:28px;font-size:13px}
  .reader-audit-assignments li{flex-wrap:wrap;gap:2px 6px}
  .reader-audit-assignments li>span:first-child{font-size:13px}
}
@media (max-width:560px){.reader-audit-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}.reader-audit-stat{padding:10px 12px}}