/* ==========================================================================
   Masajid Sharqia Portal — modern glass theme on Bootstrap 5
   ========================================================================== */

/* ---------- CSS variables ---------- */
:root {
  --primary:        #1e5a9e;
  --primary-dark:   #164673;
  --primary-light:  #e6eef8;
  --primary-rgb:    30, 90, 158;
  --focus-ring:     0 0 0 3px rgba(30, 90, 158, 0.25);
  --sidebar-bg:     rgba(255,255,255,0.72);
  --sidebar-fg:     #2c3e50;
  --sidebar-muted:  #6c757d;
  --body-bg:        #eef3fb;
  --body-bg-2:      #f5f7fb;
  --card-bg:        rgba(255,255,255,0.75);
  --card-bg-solid:  #ffffff;
  --border-soft:    rgba(15, 23, 42, 0.08);
  --shadow-lg:      0 20px 45px -20px rgba(30,90,158,0.25);
  --shadow-md:      0 8px 24px -12px rgba(15, 23, 42, 0.15);
  --glass-blur:     14px;
}
[data-theme="dark"] {
  --sidebar-bg:     rgba(28, 31, 38, 0.78);
  --sidebar-fg:     #e5e7eb;
  --sidebar-muted:  #9aa4b2;
  --body-bg:        #0b0d12;
  --body-bg-2:      #0f1115;
  --card-bg:        rgba(26, 29, 36, 0.72);
  --card-bg-solid:  #1a1d24;
  --border-soft:    rgba(255,255,255,0.08);
  --shadow-lg:      0 20px 45px -20px rgba(0,0,0,0.6);
  --shadow-md:      0 8px 24px -12px rgba(0,0,0,0.5);
  color-scheme: dark;
}

[data-accent="blue"]   { --primary:#1e5a9e; --primary-dark:#164673; --primary-light:#e6eef8; --primary-rgb:30,90,158; }
[data-accent="green"]  { --primary:#1f8a5c; --primary-dark:#15664a; --primary-light:#e6f5ef; --primary-rgb:31,138,92; }
[data-accent="purple"] { --primary:#6b4ea8; --primary-dark:#4d3780; --primary-light:#efeaf9; --primary-rgb:107,78,168; }
[data-accent="teal"]   { --primary:#0e8c98; --primary-dark:#075e66; --primary-light:#e1f3f5; --primary-rgb:14,140,152; }
[data-accent="slate"]  { --primary:#4b5563; --primary-dark:#334155; --primary-light:#e5e7eb; --primary-rgb:75,85,99; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(1200px 500px at -10% -20%, rgba(var(--primary-rgb), .18), transparent 65%),
    radial-gradient(900px 600px at 120% 110%, rgba(var(--primary-rgb), .12), transparent 60%),
    linear-gradient(rgba(238, 243, 251, .55), rgba(238, 243, 251, .55)),
    url('../img/body-bg.jpg') center / cover no-repeat,
    var(--body-bg);
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
  color: #1f2937;
  min-height: 100vh;
}
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 500px at -10% -20%, rgba(var(--primary-rgb), .22), transparent 65%),
    radial-gradient(900px 600px at 120% 110%, rgba(var(--primary-rgb), .15), transparent 60%),
    linear-gradient(rgba(11, 13, 18, .55), rgba(11, 13, 18, .55)),
    url('../img/body-bg.jpg') center / cover no-repeat,
    var(--body-bg);
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}
[data-theme="dark"] body { color: #e5e7eb; }
[dir="rtl"] body { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }

/* Fade-in entrance for main content */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.app-content > * { animation: fadeUp .35s ease-out both; }
.app-content > * + * { animation-delay: .05s; }

/* ---------- Bootstrap overrides ---------- */
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  box-shadow: 0 8px 20px -10px rgba(var(--primary-rgb), .55);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary);
}
.btn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; border-radius: .6rem; }
.btn:hover { transform: translateY(-1px); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ---------- Layout: fixed sidebar + topbar ---------- */
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar {
  width: 260px;
  position: fixed !important;
  inset: 0 auto 0 0;
  height: 100vh;
  z-index: 30;
  background: var(--sidebar-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  color: var(--sidebar-fg);
  border-right: 1px solid var(--border-soft);
  /* The sidebar itself is a fixed 3-row flex column: brand (top, fixed),
     .nav-scroll (middle, scrolls), .user-chip (bottom, fixed). The whole
     aside can never overflow — only the middle wrapper does. */
  display: flex; flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
}
/* Brand + user-chip don't shrink; they hold their natural height. */
.app-sidebar > .brand     { flex: 0 0 auto; }
.app-sidebar > .user-chip { flex: 0 0 auto; }
/* Scroll lives here — `min-height: 0` is required so this flex child can
   actually shrink below its content's intrinsic height in short viewports. */
.app-sidebar > .nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.app-sidebar > .nav-scroll::-webkit-scrollbar { width: 6px; }
.app-sidebar > .nav-scroll::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .3); border-radius: 3px; }
.app-sidebar > .nav-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), .5); }
[dir="rtl"] .app-sidebar { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--border-soft); }
.app-main {
  flex: 1;
  min-width: 0;
  margin-left: 260px;
  display: flex; flex-direction: column;
}
[dir="rtl"] .app-main { margin-left: 0; margin-right: 260px; }

.app-sidebar .brand {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  min-height: 78px;
}
.app-sidebar .brand .emoji { font-size: 1.5rem; }
.app-sidebar .brand .brand-logo {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
[data-theme="dark"] .app-sidebar .brand .brand-logo {
  filter: brightness(0.95) contrast(1.05);
}
.app-sidebar .nav-link {
  color: var(--sidebar-fg);
  border-radius: .65rem;
  padding: .58rem .9rem;
  margin: .12rem .55rem;
  display: flex; align-items: center; gap: .7rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.app-sidebar .nav-link i { color: var(--sidebar-muted); width: 1.1rem; text-align: center; }
.app-sidebar .nav-link:hover { background: rgba(var(--primary-rgb), .08); color: var(--primary); transform: translateX(2px); }
[dir="rtl"] .app-sidebar .nav-link:hover { transform: translateX(-2px); }
.app-sidebar .nav-link:hover i { color: var(--primary); }
.app-sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: 0 10px 20px -12px rgba(var(--primary-rgb), .6);
}
.app-sidebar .nav-link.active i { color: #fff; }
.app-sidebar .section-label {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 1rem 1.25rem .35rem;
  font-weight: 700;
}

/* Collapsible section toggle (renders as a button styled to match
   .section-label, with a rotating chevron). */
.app-sidebar .nav-section-toggle {
  width: calc(100% - 1.1rem);
  margin: .35rem .55rem 0;
  padding: .5rem .7rem;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border: 0;
  border-radius: .55rem;
  color: var(--sidebar-muted);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.app-sidebar .nav-section-toggle:hover {
  background: rgba(var(--primary-rgb), .06);
  color: var(--primary);
}
.app-sidebar .nav-section-toggle.has-active {
  color: var(--primary);
}
.app-sidebar .nav-section-toggle.has-active::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-inline-end: .55rem; vertical-align: middle;
  background: var(--primary); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .18);
}
.app-sidebar .nav-section-toggle .section-chevron {
  transition: transform .2s ease;
  font-size: .65rem;
  opacity: .65;
}
.app-sidebar .nav-section-toggle[aria-expanded="false"] .section-chevron {
  transform: rotate(-90deg);
}
[dir="rtl"] .app-sidebar .nav-section-toggle[aria-expanded="false"] .section-chevron {
  transform: rotate(90deg);
}

/* Pin sidebar nav layout: every <nav> inside the sidebar must stack items
   vertically + full-width. Don't rely on Bootstrap's .flex-column utility —
   it can lose the cascade when bootstrap.rtl.min.css swaps in or when a
   stale CSS bundle is cached, which surfaces as items wrapping horizontally
   inside collapsible groups. */
.app-sidebar nav.nav {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.app-sidebar nav.nav .nav-link {
  width: auto;
  align-self: stretch;
  flex: 0 0 auto;
}

/* Collapsible body — uses max-height so we can animate the open/close.
   data-expanded controls the steady-state; the JS handler temporarily
   sets max-height inline for the transition then clears it. */
.app-sidebar .nav-section-body {
  overflow: hidden;
  transition: max-height .25s ease;
}
.app-sidebar .nav-section-body[data-expanded="false"] {
  max-height: 0;
}
.app-sidebar .nav-section-body[data-expanded="true"] {
  max-height: none;
}
.app-sidebar .user-chip {
  /* margin-top is no longer `auto` — the .nav-scroll wrapper above handles
     vertical distribution. The chip just sits at the natural bottom of the
     fixed flex column. */
  margin: .65rem;
  padding: .75rem;
  border-radius: .85rem;
  background: rgba(var(--primary-rgb), .1);
  color: var(--primary);
  font-size: .85rem;
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid rgba(var(--primary-rgb), .15);
}
.app-sidebar .user-chip .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
}

.app-topbar {
  background: var(--sidebar-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
  padding: .65rem 1.25rem;
  display: flex; align-items: center; gap: .65rem;
  position: sticky; top: 0; z-index: 20;
}
.app-topbar .mobile-toggle { display: none; }

.app-content {
  padding: 1.75rem 1.5rem;
  flex: 1;
  max-width: 1600px;
  width: 100%;
}

/* ---------- Mobile responsive (< 992px) ---------- */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-105%); transition: transform .25s cubic-bezier(.16,.84,.44,1); }
  [dir="rtl"] .app-sidebar { transform: translateX(105%); }
  .app-sidebar.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .app-main { margin-left: 0 !important; margin-right: 0 !important; }
  .app-topbar .mobile-toggle { display: inline-flex; }
  .app-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 29; display: none; backdrop-filter: blur(4px); }
  .app-backdrop.show { display: block; }
  .app-content { padding: 1.25rem 1rem; }
  .exec-hero { padding: 1.25rem !important; }
}
@media (max-width: 575.98px) {
  .kpi-card .card-body { padding: .85rem !important; }
  .display-6, .display-5, .display-4 { font-size: 1.75rem !important; }
  .page-title { font-size: 1.4rem !important; }
}

/* ---------- Glass morphism cards ---------- */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.shadow-sm { box-shadow: var(--shadow-md) !important; }
.card:hover { box-shadow: var(--shadow-lg); }

/* Login card is opaque for readability */
.login-card { background: var(--card-bg-solid); }

/* Form controls on the glass surface */
.form-control, .form-select {
  background-color: rgba(255,255,255,.8);
  border-color: var(--border-soft);
  border-radius: .6rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
  background-color: rgba(42, 47, 57, .9); border-color: rgba(255,255,255,0.1); color: #e5e7eb;
}
[data-theme="dark"] .form-control::placeholder { color: #6b7280; }
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  background-color: var(--card-bg-solid);
}

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; color: inherit; }
.table > thead {
  background: rgba(var(--primary-rgb), .06);
  backdrop-filter: blur(6px);
}
.table thead th { text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; font-weight: 700; color: var(--sidebar-muted); border-bottom: 1px solid var(--border-soft); }
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: rgba(var(--primary-rgb), .04); }
.table > :not(caption) > * > * { vertical-align: middle; padding: .75rem .85rem; border-bottom-color: var(--border-soft); color: inherit; }
.table-light { --bs-table-bg: rgba(var(--primary-rgb), .06) !important; }

/* Dark-mode form labels, section titles, wizard bits, input placeholders, and
   Bootstrap utility text. Bootstrap ships with dark-on-light defaults and we
   want the form wizard readable on the glass surface. */
[data-theme="dark"] body,
[data-theme="dark"] .app-content,
[data-theme="dark"] .card,
[data-theme="dark"] .card .card-body { color: #e5e7eb; }
[data-theme="dark"] .form-label,
[data-theme="dark"] .col-form-label,
[data-theme="dark"] legend { color: #e5e7eb !important; }
[data-theme="dark"] .form-text,
[data-theme="dark"] .form-check-label { color: #cbd5e1 !important; }
[data-theme="dark"] .form-control::placeholder { color: #6b7280; }
[data-theme="dark"] .input-group-text {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e5e7eb !important;
}
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .h1, [data-theme="dark"] .h2,
[data-theme="dark"] .h3, [data-theme="dark"] .h4,
[data-theme="dark"] .h5, [data-theme="dark"] .h6,
[data-theme="dark"] .page-title { color: #e5e7eb; }
[data-theme="dark"] h2.text-uppercase,
[data-theme="dark"] h3.text-uppercase,
[data-theme="dark"] .text-uppercase.text-muted { color: #94a3b8 !important; }

/* Wizard step indicator: dark mode contrast */
[data-theme="dark"] .step-indicator .step { background: rgba(255,255,255,.08); color: #cbd5e1; }
[data-theme="dark"] .step-indicator .step.active,
[data-theme="dark"] .step-indicator .step.done { color: #fff; }
[data-theme="dark"] .step-indicator .connector { background: rgba(255,255,255,.12); }

/* Progress bar (Requests by Location, wizard) */
[data-theme="dark"] .progress { background-color: rgba(255,255,255,.08); }

/* Alerts retain enough contrast in dark mode */
[data-theme="dark"] .alert-info  { background-color: rgba(13,202,240,.08); border-color: rgba(13,202,240,.3); color: #b6ecf9; }
[data-theme="dark"] .alert-success{ background-color: rgba(25,135,84,.1); border-color: rgba(25,135,84,.35); color: #a6e9c4; }
[data-theme="dark"] .alert-danger{ background-color: rgba(220,53,69,.1); border-color: rgba(220,53,69,.35); color: #f4b8bf; }
[data-theme="dark"] .alert-warning{background-color: rgba(255,193,7,.12); border-color: rgba(255,193,7,.4); color: #ffe28a; }

/* Dark-mode table + DataTables text: force readable colors on every cell,
   override Bootstrap's .text-dark / .text-muted / .bg-light utility classes
   so badges, inline notes, thead labels all remain legible. */
[data-theme="dark"] .table,
[data-theme="dark"] .table > :not(caption) > * > *,
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th {
  color: #e5e7eb !important;
}
[data-theme="dark"] .table thead th { color: #cbd5e1 !important; }
[data-theme="dark"] .table-light { --bs-table-bg: rgba(var(--primary-rgb), .08) !important; color: #e5e7eb !important; }
[data-theme="dark"] .table tbody tr:hover { background: rgba(var(--primary-rgb), .12); }
[data-theme="dark"] .text-dark { color: #e5e7eb !important; }
[data-theme="dark"] .text-muted { color: #94a3b8 !important; }
[data-theme="dark"] .bg-light { background-color: rgba(255,255,255,.06) !important; color: #e5e7eb !important; }
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.bg-light.text-dark,
[data-theme="dark"] .badge.border { background-color: rgba(255,255,255,.08) !important; color: #e5e7eb !important; border-color: rgba(255,255,255,.12) !important; }
[data-theme="dark"] .badge.bg-warning { color: #111 !important; }
[data-theme="dark"] .badge.bg-warning.text-dark { color: #111 !important; }

/* DataTables chrome (length menu, info, search, pagination) */
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter label { color: #cbd5e1 !important; }
[data-theme="dark"] .dataTables_wrapper select,
[data-theme="dark"] .dataTables_wrapper input[type="search"],
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background-color: rgba(42, 47, 57, .9) !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] .pagination .page-link {
  background: rgba(42, 47, 57, .9);
  color: #e5e7eb;
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .pagination .page-item.disabled .page-link { background: rgba(42,47,57,.5); color: #6b7280; }
[data-theme="dark"] table.dataTable thead th.sorting::after { opacity: .45; }
[data-theme="dark"] table.fixedHeader-floating { background: #1a1d24 !important; color: #e5e7eb; }

/* FixedColumns pinned-cell background.
   The library sets an inline/CDN-CSS background on every sticky cell + blocker.
   We don't know the exact DOM variant across versions, so match anything whose
   class attribute contains "dtfc-" (start, end, top-blocker, bottom-blocker,
   left-top-blocker, right-top-blocker, has-start/-end, etc.). */
[class*="dtfc-"] { background-color: var(--card-bg-solid) !important; }
[class*="dtfc-"] td, [class*="dtfc-"] th { color: inherit; }
table.dataTable td[class*="dtfc-"],
table.dataTable th[class*="dtfc-"] {
  background-color: var(--card-bg-solid) !important;
}

[data-theme="dark"] [class*="dtfc-"],
[data-theme="dark"] table.dataTable td[class*="dtfc-"],
[data-theme="dark"] table.dataTable th[class*="dtfc-"] {
  background-color: #1a1d24 !important;
  color: #e5e7eb !important;
}
[data-theme="dark"] table.dataTable > tbody > tr:hover > td[class*="dtfc-"] {
  background-color: #232833 !important;
}

/* Light-mode hover for pinned cells — keep the same hover highlight as the rest of the row */
table.dataTable > tbody > tr:hover > td[class*="dtfc-"] {
  background-color: rgba(var(--primary-rgb), .04) !important;
}

/* Page title */
.page-title { font-weight: 700; margin-bottom: 1.25rem; letter-spacing: -0.01em; }

/* ---------- Executive hero (dashboard) with parallax accent ---------- */
.exec-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .14) 0%, transparent 55%), var(--card-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-md);
}
.exec-hero::before, .exec-hero::after {
  content: ''; position: absolute; pointer-events: none; border-radius: 50%;
  filter: blur(40px); opacity: .55;
  will-change: transform;
  transition: transform .2s ease-out;
}
.exec-hero::before { width: 260px; height: 260px; top: -80px; right: -60px; background: rgba(var(--primary-rgb), .35); }
.exec-hero::after  { width: 220px; height: 220px; bottom: -100px; left: -40px; background: rgba(var(--primary-rgb), .25); }
body.parallax-on .exec-hero::before { transform: translate3d(var(--parX,0), var(--parY,0), 0); }
body.parallax-on .exec-hero::after  { transform: translate3d(calc(var(--parX,0) * -1), calc(var(--parY,0) * -1), 0); }

/* KPI cards */
.kpi-card .card-body { padding: 1rem 1.1rem; }
.kpi-icon {
  width: 38px; height: 38px; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.bg-primary-subtle   { background: rgba(var(--primary-rgb), .14) !important; color: var(--primary) !important; }
.bg-success-subtle   { background: rgba(31, 138, 92, .14)   !important; color: #1f8a5c !important; }
.bg-warning-subtle   { background: rgba(234, 179, 8, .18)  !important; color: #b45309 !important; }
.bg-danger-subtle    { background: rgba(220, 53, 69, .14) !important; color: #b02a37 !important; }
.bg-secondary-subtle { background: rgba(108, 117, 125, .15)!important; color: #475569 !important; }

/* Step indicator (wizard) */
.step-indicator { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.step-indicator .step {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
  background: rgba(var(--primary-rgb), .12); color: var(--primary);
  border: 2px solid transparent; transition: all .2s ease;
}
.step-indicator .step.active { background: var(--primary); color: #fff; transform: scale(1.08); box-shadow: 0 8px 16px -8px rgba(var(--primary-rgb),.6); }
.step-indicator .step.done   { background: var(--primary); color: #fff; opacity: .88; }
.step-indicator .connector { flex: 1; height: 2px; background: rgba(var(--primary-rgb), .18); min-width: 14px; border-radius: 2px; }

/* Terms & Conditions content (used inside the modal-body — modal-dialog-scrollable
   already handles overflow, so we only style typography here). */
.tc-card { line-height: 1.7; }
.tc-card h4 { color: var(--primary); margin-top: 1.1rem; }
.tc-card p  { margin-bottom: .5rem; }
.tc-card ul { margin-top: .25rem; }

/* Signature pad */
.signature-wrap { border: 1px dashed rgba(var(--primary-rgb), .35); border-radius: .7rem; background: #fff; position: relative; }
[data-theme="dark"] .signature-wrap { background: #2a2f39; border-color: rgba(255,255,255,.18); }
.signature-wrap canvas { display: block; width: 100%; height: 180px; touch-action: none; border-radius: .7rem; }

/* Login shell — viewport-locked: the whole page never scrolls. Long forms
   (register.php in particular) scroll *inside* the right pane while the
   left hero stays pinned in place. Mobile breakpoint below releases this
   and restores natural document scroll on stacked layouts. */
.login-shell {
  height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 500px at -10% -20%, rgba(var(--primary-rgb), .18), transparent 65%),
    radial-gradient(900px 600px at 120% 110%, rgba(var(--primary-rgb), .12), transparent 60%),
    linear-gradient(rgba(238, 243, 251, .55), rgba(238, 243, 251, .55)),
    url('../img/body-bg.jpg') center / cover no-repeat,
    var(--body-bg);
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  padding: 1.5rem;
}
.login-card {
  width: 100%; max-width: 420px;
  background: var(--card-bg-solid);
  border-radius: 1.25rem;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.25);
  padding: 2.25rem;
  border: 1px solid var(--border-soft);
}
.login-card .logo { font-size: 2.5rem; text-align: center; }

/* Split hero login layout */
.login-stage {
  width: 100%; max-width: 1080px;
  height: 100%;                                /* fill the shell (minus its padding) */
  max-height: calc(100vh - 3rem);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #ffffff9c;
  box-shadow: 0 40px 80px -25px rgba(15, 23, 42, .35);
  border: 1px solid var(--border-soft);
}
[dir="rtl"] .login-stage { grid-template-columns: 1fr 1.05fr; }

.login-hero {
  position: relative;
  min-height: 0;                               /* don't push the grid past viewport */
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  isolation: isolate;
  overflow: hidden;
}
.login-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .15) 0%, rgba(15, 23, 42, .55) 60%, rgba(15, 23, 42, .85) 100%),
    radial-gradient(circle at 25% 20%, rgba(var(--primary-rgb), .25), transparent 55%);
  z-index: 0;
}
.login-hero.has-video { background: #0f172a; }
.login-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}
/* Hide iOS Safari's default "tap to play" overlay button when autoplay is
 * blocked — JS primes playback instead. */
.login-hero-video::-webkit-media-controls,
.login-hero-video::-webkit-media-controls-start-playback-button,
.login-hero-video::-webkit-media-controls-overlay-play-button,
.login-hero-video::-webkit-media-controls-panel,
.login-hero-video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}
.login-hero > *:not(.login-hero-video) { position: relative; z-index: 1; }
.login-hero::after {
  content: "";
  position: absolute; top: 1.25rem; left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1rem;
  pointer-events: none;
}
.login-hero .hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; padding: .4rem .8rem;
  border-radius: 999px; font-size: .8rem;
  align-self: flex-start;
  letter-spacing: .03em;
  margin-bottom: auto;
}
.login-hero h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  font-weight: 700; line-height: 1.25;
  margin: 0 0 .65rem 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.login-hero p {
  margin: 0;
  font-size: 1rem;
  color: rgba(255,255,255,.88);
  max-width: 38ch;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.login-hero .hero-stats {
  display: flex; gap: 1.5rem; margin-top: 1.5rem;
  padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18);
}
.login-hero .hero-stats > div { color: rgba(255,255,255,.92); }
.login-hero .hero-stats .stat-num {
  font-weight: 700; font-size: 1.4rem; display: block; line-height: 1;
}
.login-hero .hero-stats .stat-lbl {
  font-size: .78rem; opacity: .82; letter-spacing: .04em; text-transform: uppercase;
}

.login-form-pane {
  padding: 3rem 2.75rem;
  display: flex; flex-direction: column;
  /* `safe center` keeps the form vertically centered when it fits, but falls
     back to top-aligned when content overflows so the user can actually scroll
     up to the top of a long form (e.g. register.php). */
  justify-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
/* Subtle scrollbar so the scrollable pane is discoverable without being noisy. */
.login-form-pane::-webkit-scrollbar { width: 8px; }
.login-form-pane::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .3); border-radius: 4px; }
.login-form-pane::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), .5); }

.login-form-pane .logo { font-size: 2.5rem; text-align: center; line-height: 1; margin-bottom: .25rem; }
.login-form-pane .login-brand-logo { max-width: 220px; max-height: 80px; width: auto; height: auto; object-fit: contain; }
[data-theme="dark"] .login-form-pane .login-brand-logo { filter: brightness(0.95); }

@media (max-width: 900px) {
  /* On stacked mobile layouts release the viewport lock and restore natural
     document scroll — the hero turns into a banner up top. */
  .login-shell      { height: auto; min-height: 100vh; overflow: visible; }
  .login-stage      { grid-template-columns: 1fr; max-width: 480px; height: auto; max-height: none; }
  [dir="rtl"] .login-stage { grid-template-columns: 1fr; }
  .login-hero       { min-height: 220px; height: auto; padding: 1.5rem; overflow: visible; }
  .login-hero .hero-stats { display: none; }
  .login-form-pane  { padding: 2rem 1.75rem; overflow-y: visible; min-height: 0; }
}

/* Phones (≤640 px) — tighter padding so input-groups don't get clipped on the
   right edge, smaller hero banner, drop the decorative inset frame. */
@media (max-width: 640px) {
  .login-shell      { padding: 0.75rem; }
  .login-stage      { border-radius: 1.1rem; box-shadow: 0 20px 40px -15px rgba(15, 23, 42, .25); }
  .login-hero       { min-height: 170px; padding: 1.2rem 1.1rem; }
  .login-hero::after { display: none; }                                    /* drop the inset frame */
  .login-hero h2    { font-size: 1.4rem; line-height: 1.25; margin-bottom: 0.45rem; }
  .login-hero p     { font-size: 0.88rem; max-width: none; }
  .login-hero .hero-badge { font-size: 0.72rem; padding: 0.3rem 0.7rem; margin-bottom: 0.7rem; }

  .login-form-pane  { padding: 1.5rem 1.1rem; }
  .login-form-pane .login-brand-logo { max-width: 160px; max-height: 60px; }

  /* The User-ID and password fields are .input-group with a leading icon —
     prevent the leading icon from forcing the input to wrap, and let the
     <input> shrink so long placeholders don't clip on the right edge. */
  .login-form-pane .input-group        { flex-wrap: nowrap; }
  .login-form-pane .input-group-text   { padding: 0.45rem 0.7rem; flex-shrink: 0; }
  .login-form-pane .form-control       { min-width: 0; font-size: 0.95rem; }

  /* Page-specific headings inside the form pane (forgot-password / reset-password). */
  .login-form-pane h1   { font-size: 1.2rem; }
  .login-form-pane .h4  { font-size: 1.1rem; }

  /* Help-text wrapping: respect the narrow column. */
  .login-form-pane .form-text { font-size: 0.78rem; line-height: 1.45; }

  /* Mosque-account subtitle (register.php's "pending Manager approval" line). */
  .login-form-pane > p { font-size: 0.92rem; }

  /* Slightly tighter row gaps for the long register form. */
  .login-form-pane .mb-3 { margin-bottom: 0.85rem !important; }
  .login-form-pane .row.g-2 { --bs-gutter-x: 0.6rem; }
}

/* Very narrow phones (≤400 px) — Galaxy S8, older iPhones. One more notch. */
@media (max-width: 400px) {
  .login-shell      { padding: 0.5rem; }
  .login-hero       { min-height: 150px; padding: 1rem 0.85rem; }
  .login-hero h2    { font-size: 1.25rem; }
  .login-hero p     { font-size: 0.84rem; }
  .login-form-pane  { padding: 1.2rem 0.85rem; }
  .login-form-pane .input-group-text   { padding: 0.45rem 0.6rem; font-size: 0.85rem; }
  .login-form-pane .form-control       { font-size: 0.9rem; }
  .login-form-pane .login-brand-logo   { max-width: 140px; max-height: 52px; }
}

/* Avatar uploader (profile.php) */
.avatar-uploader {
  display: flex; gap: 1.25rem; align-items: center;
  padding: 1.25rem;
  border: 1px dashed rgba(var(--primary-rgb), .35);
  border-radius: 1rem;
  background: rgba(var(--primary-rgb), .04);
  transition: background .15s ease, border-color .15s ease;
  position: relative;
}
.avatar-uploader.is-dragover {
  background: rgba(var(--primary-rgb), .1);
  border-color: var(--primary);
}
.avatar-uploader .avatar-preview {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--card-bg-solid);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 2rem; font-weight: 700; color: var(--sidebar-muted);
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .25);
}
.avatar-uploader .avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-uploader .avatar-meta { flex: 1; min-width: 0; }
.avatar-uploader input[type="file"] { max-width: 360px; }
[data-theme="dark"] .avatar-uploader { background: rgba(255,255,255,.03); }

/* Site-photos gallery (request-detail) */
.site-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .65rem;
}
.site-gallery a {
  display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: .65rem;
  border: 1px solid var(--border-soft);
  position: relative;
  background: var(--card-bg-solid);
}
.site-gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.site-gallery a:hover img { transform: scale(1.05); }
.site-gallery a::after {
  content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,.35);
  opacity: 0; transition: opacity .15s ease;
  font-size: 1.25rem;
}
.site-gallery a:hover::after { opacity: 1; }

/* Multi-file uploader (create-request) */
.photo-dropzone {
  border: 2px dashed rgba(var(--primary-rgb), .35);
  border-radius: 1rem;
  background: rgba(var(--primary-rgb), .03);
  padding: 1.5rem;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
  cursor: pointer;
}
.photo-dropzone:hover, .photo-dropzone.is-dragover {
  background: rgba(var(--primary-rgb), .08);
  border-color: var(--primary);
}
.photo-dropzone .dz-icon { font-size: 2rem; color: var(--primary); }
.photo-dropzone .dz-hint { color: var(--sidebar-muted); font-size: .85rem; margin-top: .25rem; }
.photo-dropzone .photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem; margin-top: 1rem;
}
.photo-dropzone .photo-grid > div {
  position: relative; aspect-ratio: 1/1; border-radius: .55rem; overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--card-bg-solid);
}
.photo-dropzone .photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.photo-dropzone .photo-grid .remove-btn {
  position: absolute; top: .15rem; right: .15rem;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(15,23,42,.7); color: #fff; font-size: .75rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
[dir="rtl"] .photo-dropzone .photo-grid .remove-btn { right: auto; left: .15rem; }

/* Utility */
.badge-soft { background: rgba(var(--primary-rgb), .12); color: var(--primary); font-weight: 500; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--sidebar-muted); }

/* DataTables integration */
table.dataTable { border-collapse: separate !important; border-spacing: 0; width: 100% !important; }
.dataTables_wrapper .row { align-items: center; }
.dataTables_wrapper .dataTables_length select { border-radius: .5rem; border-color: var(--border-soft); padding: .25rem 1.75rem .25rem .6rem; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border-soft);
  border-radius: .5rem; padding: .4rem .7rem; margin-left: .35rem;
  background: var(--card-bg-solid); color: inherit;
}
.dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.dataTables_wrapper .dataTables_info { color: var(--sidebar-muted); font-size: .85rem; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
  cursor: pointer; background-image: none !important;
}
table.dataTable thead th.sorting::after     { content: ' \f0dc'; font-family: 'Font Awesome 6 Free'; font-weight: 900; opacity: .35; font-size: .75em; }
table.dataTable thead th.sorting_asc::after { content: ' \f0de'; font-family: 'Font Awesome 6 Free'; font-weight: 900; opacity: .9;  font-size: .75em; color: var(--primary); }
table.dataTable thead th.sorting_desc::after{ content: ' \f0dd'; font-family: 'Font Awesome 6 Free'; font-weight: 900; opacity: .9;  font-size: .75em; color: var(--primary); }
table.fixedHeader-floating {
  background: var(--card-bg-solid) !important;
  box-shadow: 0 6px 12px -8px rgba(15,23,42,.15);
  z-index: 25 !important;
}
/* Pinned columns */
.dtfc-fixed-start, .dtfc-fixed-end {
  background: var(--card-bg-solid) !important;
}

/* Pagination */
.pagination .page-link {
  color: var(--primary); border-color: var(--border-soft);
  background: var(--card-bg-solid);
  border-radius: .45rem; margin: 0 .12rem;
}
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .page-link:focus { box-shadow: var(--focus-ring); }

/* Modal + offcanvas glass */
.modal-content, .offcanvas {
  background: var(--card-bg-solid);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
}

/* Scrollbar */
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .3); border-radius: 3px; }

/* Floating WhatsApp contact button.
 * - Pinned to the visual viewport (`position: fixed`); respects iOS safe-area
 *   on devices with a home indicator so it doesn't get clipped by the bottom
 *   chrome.
 * - Sits above Bootstrap modals (z-index 1055) but below toasts (1090) so
 *   in-app dialogs always take focus over the FAB. */
.wa-fab {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right, 1.25rem));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
  left: auto;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .55), 0 4px 10px rgba(0,0,0,.12);
  z-index: 1080;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
[dir="rtl"] .wa-fab {
  right: auto;
  left: max(1.25rem, env(safe-area-inset-left, 1.25rem));
}
.wa-fab:hover, .wa-fab:focus-visible {
  color: #fff;
  background: #1ebd5b;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 34px -8px rgba(37, 211, 102, .65), 0 6px 14px rgba(0,0,0,.18);
}
.wa-fab:focus-visible { outline: 3px solid rgba(37, 211, 102, .35); outline-offset: 2px; }
.wa-fab svg { display: block; }
@media (max-width: 600px) {
  .wa-fab {
    width: 52px; height: 52px;
    right: max(1rem, env(safe-area-inset-right, 1rem));
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  }
  [dir="rtl"] .wa-fab {
    left: max(1rem, env(safe-area-inset-left, 1rem));
    right: auto;
  }
  .wa-fab svg { width: 24px; height: 24px; }
}