/* Noor Connect app styles — layered on core/app.css (theme-connect = blue).
   Only connect-specific components live here; foundation classes (.card, .btn,
   .badge, .table-wrap, table.table, .pagination, .hero, .ad-slot, .share-bar)
   come from core/app.css. */

[x-cloak] { display:none !important; }

/* ---- Sub-nav ---- */
.nc-subnav { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:14px 0 4px; }
.nc-subnav a { padding:6px 12px; border-radius:var(--radius-pill); font-size:var(--fs-sm);
  color:var(--ink); border:1px solid var(--line); background:var(--card); }
.nc-subnav a:hover { background:var(--brand-tint); text-decoration:none; }
.nc-subnav a.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.nc-subnav .sp { flex:1; }

/* ---- Generic text bits ---- */
.section-title { font-weight:800; color:var(--brand-dark); font-size:var(--fs-md);
  margin:22px 0 10px; }
.meta { color:var(--muted); font-size:var(--fs-sm); }
.muted { color:var(--muted); }
.hijri { display:inline-block; margin-top:8px; background:var(--brand-tint);
  color:var(--brand-dark); padding:4px 12px; border-radius:var(--radius-pill); font-size:var(--fs-sm); }
.org-line { display:flex; gap:8px; align-items:center; margin-bottom:4px; }
.ann-title { font-weight:700; font-size:var(--fs-md); margin:2px 0; }
.ann-body { line-height:1.6; margin-top:6px; white-space:pre-wrap; }
.links { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.error { color:#a12626; background:#fdeaea; border:1px solid #f3c6c6; padding:10px 14px;
  border-radius:var(--radius-sm); font-size:var(--fs-sm); }

/* ---- Chips / pills ---- */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.chip { padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--line);
  background:var(--card); cursor:pointer; font:inherit; font-size:var(--fs-sm); color:var(--ink); }
.chip:hover { background:var(--brand-tint); text-decoration:none; }
.chip.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.pill-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pill { padding:4px 12px; border-radius:var(--radius-pill); background:var(--brand-tint);
  color:var(--brand-dark); font-size:.8rem; font-weight:600; }
.type-tag { font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
.badge.pending { background:#fdf6e3; color:#856404; }

/* ---- Directory type navigator ---- */
.dir-nav { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.dir-type { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:96px;
  padding:12px 14px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--card); cursor:pointer; font:inherit; color:var(--ink); text-decoration:none; }
.dir-type:hover { background:var(--brand-tint); text-decoration:none; }
.dir-type.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.dir-type-ic { font-size:1.4rem; }
.dir-type-name { font-weight:700; font-size:var(--fs-sm); }
.dir-type-count { font-size:.75rem; opacity:.8; }
.dir-type-pending { font-size:.7rem; color:#b7791f; font-weight:700; }
.dir-searchrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.dir-staff-note { background:#eef4fb; border:1px solid #cfe0f3; color:#1f4e83;
  padding:8px 14px; border-radius:var(--radius-sm); font-size:var(--fs-sm); }
.dir-vtick { color:var(--brand); font-weight:700; }
.dir-rec { font-size:.8rem; color:var(--muted); }
tr.is-pending td { background:#fffdf5; }
tr.is-rejected td { background:#fdf4f4; }

/* ---- Detail page ---- */
.dir-item .dir-head { display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom:6px; }
.dir-conn-list { list-style:none; padding:0; margin:8px 0; display:grid; gap:6px; }
.dir-conn-item { padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--card); }
.dir-conn-rel { font-weight:700; color:var(--brand-dark); }

/* ---- Forms ---- */
.field-label { display:block; }
.field-label .meta { display:block; margin-bottom:4px; }
.city-input, .field-label input, .field-label select, .field-label textarea {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; background:#fff; color:var(--ink); }
.city-input:focus { outline:none; border-color:var(--brand); box-shadow:var(--ring); }
.lbl { display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); font-weight:600; }
.lbl input, .lbl select, .lbl textarea { font-weight:400; padding:8px 10px;
  border:1px solid var(--line); border-radius:var(--radius-sm); font-family:inherit; }

/* ======================================================================= */
/* Admin components                                                        */
/* ======================================================================= */
.admin-table { width:100%; border-collapse:collapse; background:var(--card); }
.admin-table th, .admin-table td { padding:10px 12px; text-align:start;
  border-bottom:1px solid var(--line); font-size:var(--fs-sm); vertical-align:top; }
.admin-table th { background:#f2f6f3; color:var(--muted); font-weight:700; }
.admin-table .primary-cell { font-weight:600; }
.admin-table .num { text-align:end; }

.pill-tag { display:inline-block; padding:2px 10px; border-radius:var(--radius-pill);
  font-size:.72rem; font-weight:700; background:#eef1ef; color:var(--muted); }
.pill-tag.green { background:#eafaf1; color:#1c6b41; }
.pill-tag.red { background:#fdeaea; color:#a12626; }
.pill-tag.amber { background:#fdf6e3; color:#856404; }

.icon-btn { display:inline-flex; align-items:center; justify-content:center; padding:5px 9px; min-width:44px; min-height:44px;
  border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card);
  cursor:pointer; font:inherit; font-size:.95rem; color:var(--ink); text-decoration:none; }
.icon-btn:hover { background:var(--brand-tint); text-decoration:none; }
.icon-btn.go { border-color:#bde9cd; }
.icon-btn.danger { border-color:#f3c6c6; }
.admin-actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.admin-actions form { display:inline; margin:0; }

.admin-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; }
.edit-panel { border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  background:#fbfdfb; margin:12px 0; }
.edit-panel.editing { border-color:var(--brand); background:var(--brand-tint); }

.crud-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:8px; }
.crud-title-wrap { display:flex; align-items:center; gap:10px; }
.crud-count { background:var(--brand-tint); color:var(--brand-dark); font-weight:700;
  padding:2px 12px; border-radius:var(--radius-pill); font-size:var(--fs-sm); }
.crud-edit { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:10px; }
.crud-list { display:grid; gap:8px; margin-top:14px; }
.crud-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); }
.crud-row.editing { border-color:var(--brand); }
.crud-ic { font-size:1.3rem; }
.crud-main { flex:1; }
.crud-name { font-weight:700; display:flex; gap:8px; align-items:center; }
.crud-sub { display:flex; gap:12px; color:var(--muted); font-size:.8rem; margin-top:2px; }
.crud-actions { display:flex; gap:6px; }
.crud-empty { text-align:center; color:var(--muted); padding:40px 0; }
.crud-empty .ic { font-size:2rem; }

.admin-cards { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:16px; }
.admin-card { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); text-decoration:none; color:var(--ink); }
.admin-card:hover { box-shadow:var(--shadow-md); text-decoration:none; transform:translateY(-2px);
  transition:.15s; }
.admin-card .ic { font-size:1.6rem; }
.admin-card .t { font-weight:700; }
.admin-card .d { color:var(--muted); font-size:.8rem; }
.badge-count { margin-inline-start:auto; background:var(--brand); color:#fff; font-weight:700;
  min-width:24px; text-align:center; padding:2px 8px; border-radius:var(--radius-pill); font-size:.75rem; }
.badge-count.zero { background:#eef1ef; color:var(--muted); }
.nc-admin-note { background:#eef4fb; border:1px solid #cfe0f3; color:#1f4e83; padding:10px 14px;
  border-radius:var(--radius-sm); font-size:var(--fs-sm); margin:10px 0; }

/* ── Prayer times card (ported from components/connect/PrayerTimes.tsx) ── */
.prayer-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.prayer-meta h2 { margin:0; font-size:var(--fs-h3); }
.prayer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
@media (min-width:620px) { .prayer-grid { grid-template-columns:repeat(6,1fr); } }
.prayer-cell { position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:13px 12px; text-align:center; transition:box-shadow .15s, transform .15s, border-color .15s; }
.prayer-cell:hover { box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.prayer-cell.next { background:var(--brand-tint); border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand), var(--shadow-sm); }
.prayer-hint { margin-top:4px; font-size:.78rem; opacity:.85; }
.prayer-name { font-size:var(--fs-sm); color:var(--muted); }
.prayer-cell.next .prayer-name { color:var(--brand-dark); font-weight:600; }
.prayer-time { font-size:var(--fs-h3); font-weight:700; margin-top:2px; }
.prayer-progress { display:flex; align-items:center; gap:12px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line); }
.prayer-progress .ring { flex:0 0 auto; display:block; }
.prayer-progress .ring-track { stroke:var(--line); }
.prayer-progress .ring-fill { stroke:var(--brand); transition:stroke-dashoffset .3s; }
.prayer-progress .pp-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.prayer-progress .pp-label { font-size:var(--fs-sm); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.prayer-progress .pp-value { font-size:var(--fs-md); font-weight:700; color:var(--brand-dark); }

/* Directory: table on desktop, phone-friendly cards ≤700px (easier for non-tech users). */
.dir-cards { list-style: none; margin: 0; padding: 0; display: none; }
@media (max-width: 700px) {
  .dir-table-wrap { display: none; }
  .dir-cards { display: grid; gap: 12px; }
}
.dir-card {
  display: grid; gap: 8px; padding: 14px 16px;
  border: 1px solid var(--line, #dbe4ee); border-radius: 14px; background: var(--card, #fff);
  box-shadow: 0 1px 2px rgba(20,32,27,.04), 0 6px 18px rgba(20,32,27,.05);
}
.dir-card.is-pending { border-inline-start: 3px solid #d9a300; }
.dir-card.is-rejected { opacity: .7; }
.dir-card-name { font-weight: 800; font-size: 1.08rem; color: var(--brand-dark, #0e3792); text-decoration: none; }
.dir-card-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: .86rem; color: var(--muted, #5b6b7a); }
.dir-card-about { margin: 0; line-height: 1.45; }
.dir-card-contact { display: flex; gap: 10px; margin-top: 2px; }
.dir-cbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; font-size: 20px; text-decoration: none;
  background: var(--brand-tint, #dde6fb); border: 1px solid transparent;
}
.dir-cbtn:active { background: var(--brand, #1a4fd0); }