/* ==========================================================================
   Arqam design system - layout & components (uses tokens from theme.css, ornament from ornament.css)
   Spacing only uses the scale: 4 / 8 / 12 / 16 / 24 / 32 px  (--sp-1 ... --sp-6)
   ========================================================================== */

/* ---- base ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }
body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-text); background: var(--c-bg); margin: 0; font-variant-numeric: lining-nums; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-ui); font-weight: 700; line-height: var(--lh-tight); color: var(--c-heading); margin-top: 0; margin-bottom: var(--sp-3); }
a { color: var(--c-link); text-underline-offset: 3px; }
a:hover { color: var(--c-link-hover); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--c-accent-bright); color: #241C00; }
code { color: var(--c-accent-text); }
.text-muted, .form-text { color: var(--c-muted) !important; }
.text-danger { color: var(--c-err-solid) !important; }
[dir="ltr"], .ltr { unicode-bidi: plaintext; }
small, .small { font-size: var(--fs-sm); }
label, .btn, .badge, .nav-link, th, .form-control, .form-select, .dropdown-item, .page-link, .breadcrumb { font-family: var(--font-ui); }

/* section headings inside pages: star bullet + hairline */
.app-content :is(h2, h3, h5, h6):not(.page-title):not(.stat-value) {
  display: flex; align-items: center; gap: var(--sp-2); font-size: 1.0625rem; margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border);
}
.app-content :is(h2, h3, h5, h6):not(.page-title):not(.stat-value)::before {
  content: ""; flex: none; width: 12px; height: 12px; background: var(--c-accent);
  -webkit-mask: var(--orn-star) center / contain no-repeat; mask: var(--orn-star) center / contain no-repeat;
}
.app-content .h6:not(.page-title), .app-content h6 { font-size: 1rem; }
.app-content * + :is(h2, h3, h5, h6):not(.page-title) { margin-top: var(--sp-5); }
.card :is(h2, h3, h5, h6) { margin-top: 0 !important; }

/* ---- app shell ------------------------------------------------------------- */
.app-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.app-body { flex: 1; display: flex; align-items: flex-start; min-width: 0; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); flex: 1; }

/* top bar */
.app-topbar {
  position: sticky; top: 0; z-index: 1030; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4); background: var(--c-topbar-bg); color: var(--c-topbar-text);
  border-bottom: 3px solid var(--c-topbar-border); box-shadow: var(--shadow);
}
.app-topbar .brand { display: flex; align-items: center; gap: var(--sp-3); color: inherit; text-decoration: none; min-width: 0; }
.brand-logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--c-accent-bright), 0 2px 6px rgba(0,0,0,.25); }
.brand-title { font-family: var(--font-ui); font-weight: 800; font-size: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 1; }
.user-chip { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); padding: 0 var(--sp-2); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar .btn-topbar, .nav-toggle, .nav-collapse {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.10); color: var(--c-topbar-text); border: 1px solid rgba(255,255,255,.28); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); transition: background var(--ease);
}
:root[data-theme="sand"] .app-topbar .btn-topbar, :root[data-theme="sand"] .nav-toggle, :root[data-theme="sand"] .nav-collapse { background: rgba(107,46,31,.07); border-color: rgba(107,46,31,.35); }
.app-topbar .btn-topbar:hover, .nav-toggle:hover, .nav-collapse:hover { background: rgba(255,255,255,.2); color: var(--c-topbar-text); }
:root[data-theme="sand"] .app-topbar .btn-topbar:hover { background: rgba(107,46,31,.14); }
.app-topbar form { margin: 0; }
.nav-toggle { display: none; padding: 0 var(--sp-3); font-size: 1.25rem; }
.nav-collapse { padding: 0 var(--sp-3); font-size: 1.2rem; }
.app-topbar .dropdown-menu { min-width: 200px; padding: var(--sp-1); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.app-topbar .dropdown-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); color: var(--c-text); font-weight: 600; font-size: var(--fs-sm); }
.app-topbar .dropdown-item:hover, .app-topbar .dropdown-item:focus { background: var(--c-hover); color: var(--c-text); }
.theme-swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-border-strong); }
[data-theme-choice="green"] .theme-swatch { background: linear-gradient(135deg, #0B7A3B 55%, #E8D44D 55%); }
[data-theme-choice="royal"] .theme-swatch { background: linear-gradient(135deg, #1F2A7A 55%, #E8D44D 55%); }
[data-theme-choice="sky"]   .theme-swatch { background: linear-gradient(135deg, #0F70B7 55%, #F0EB15 55%); }
[data-theme-choice="sand"]  .theme-swatch { background: linear-gradient(135deg, #F1E3C2 55%, #6B2E1F 55%); }
[data-theme-choice="night"] .theme-swatch { background: linear-gradient(135deg, #09110D 55%, #E8D44D 55%); }
.dropdown-item .theme-check { margin-inline-start: auto; visibility: hidden; color: var(--c-primary); }
:root[data-theme="night"] .dropdown-item .theme-check { color: var(--c-accent-text); }
:root[data-theme="green"] [data-theme-choice="green"] .theme-check, :root[data-theme="royal"] [data-theme-choice="royal"] .theme-check,
:root[data-theme="sand"] [data-theme-choice="sand"] .theme-check, :root[data-theme="night"] [data-theme-choice="night"] .theme-check, :root[data-theme="sky"] [data-theme-choice="sky"] .theme-check { visibility: visible; }
:root[data-logo-pref="green"] [data-logo-choice="green"] .theme-check, :root[data-logo-pref="blue"] [data-logo-choice="blue"] .theme-check, :root[data-logo-pref="auto"] [data-logo-choice="auto"] .theme-check, :root:not([data-logo-pref]) [data-logo-choice="auto"] .theme-check { visibility: visible; }
:root:not([data-theme]) [data-theme-choice="green"] .theme-check { visibility: visible; }

/* sidebar (right side in RTL) */
.app-sidebar {
  position: sticky; top: var(--topbar-h); width: var(--sidebar-w); flex: none; height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  background: var(--c-side-bg); color: var(--c-side-text); padding: var(--sp-3) 0 var(--sp-5); border-inline-end: 1px solid var(--c-side-border);
}
.app-sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--c-accent-bright); opacity: .05; -webkit-mask: var(--orn-tile) 0 0 / 64px 64px; mask: var(--orn-tile) 0 0 / 64px 64px; }
.app-sidebar .nav { position: relative; gap: 2px; padding: 0 var(--sp-2); }
.app-sidebar .nav-link {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  color: var(--c-side-text); font-weight: 600; font-size: var(--fs-sm); border-inline-start: 3px solid transparent; transition: background var(--ease), color var(--ease);
}
.app-sidebar .nav-link .bi { font-size: 1.15rem; width: 24px; text-align: center; color: var(--c-side-muted); transition: color var(--ease); }
.app-sidebar .nav-link:hover { background: var(--c-side-hover); color: #fff; }
.app-sidebar .nav-link:hover .bi { color: var(--c-accent-bright); }
.app-sidebar .nav-link.active { background: var(--c-side-active-bg); color: var(--c-side-active-text); border-inline-start-color: var(--c-accent-bright); }
.app-sidebar .nav-link.active .bi { color: var(--c-accent-bright); }
.nav-backdrop { display: none; }

/* logo swap: both images are rendered, <html data-logo> (set before first paint) decides which one shows */
html:not([data-logo="blue"]) .logo-blue, html[data-logo="blue"] .logo-green { display: none !important; }
.logo-thumb { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: #fff; box-shadow: 0 0 0 1px var(--c-border-strong); }
.logo-thumb-icon { width: 24px; text-align: center; flex: none; color: var(--c-accent-text); }
.app-topbar .dropdown-header { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-xs); color: var(--c-muted); padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.app-topbar .dropdown-divider { border-color: var(--c-border); margin: var(--sp-1) 0; }
.app-topbar .dropdown-menu { min-width: 280px; }
.logo-option { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); cursor: pointer; height: 100%; font-family: var(--font-ui); font-weight: 600; }
.logo-option img { border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--c-border-strong); flex: none; }
.logo-option.selected { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary); background: var(--c-primary-soft); }


/* ---- page header (title bar + breadcrumb + actions) -------------------------- */
.page-header {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  border-inline-start: 5px solid var(--c-accent);
}
.page-header::before { /* faint khatam wash on the far (left) end */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: var(--c-pattern); opacity: .06;
  -webkit-mask-image: var(--orn-tile), linear-gradient(to right, #000, transparent 45%); mask-image: var(--orn-tile), linear-gradient(to right, #000, transparent 45%);
  -webkit-mask-size: 48px 48px, 100% 100%; mask-size: 48px 48px, 100% 100%; -webkit-mask-composite: source-in; mask-composite: intersect;
}
.page-header-text { min-width: 0; position: relative; }
.page-title { font-size: var(--fs-xl); font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: var(--sp-1); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-link); text-decoration: underline; }
.crumbs .bi { font-size: .7em; }
.page-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.page-actions > .d-flex { flex-wrap: wrap; }

/* ---- cards ------------------------------------------------------------------ */
.card { --bs-card-bg: var(--c-surface); --bs-card-border-color: var(--c-border); --bs-card-border-radius: var(--radius); --bs-card-inner-border-radius: calc(var(--radius) - 1px); --bs-card-cap-bg: var(--c-surface-2); --bs-card-color: var(--c-text); --bs-card-spacer-y: var(--sp-4); --bs-card-spacer-x: var(--sp-4);
  background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-body { padding: var(--sp-4); }
.card-header { padding: var(--sp-3) var(--sp-4); font-family: var(--font-ui); font-weight: 700; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.card.border-warning { border-color: var(--c-accent) !important; border-width: 1px 1px 1px 5px; border-style: solid; }
.list-group { --bs-list-group-bg: var(--c-surface); --bs-list-group-color: var(--c-text); --bs-list-group-border-color: var(--c-border); --bs-list-group-border-radius: var(--radius); --bs-list-group-item-padding-y: var(--sp-2); --bs-list-group-item-padding-x: var(--sp-4); }
.timeline-item { line-height: 1.6; }

/* ---- buttons ---------------------------------------------------------------- */
.btn { --bs-btn-padding-y: 6px; --bs-btn-padding-x: 16px; --bs-btn-font-size: var(--fs-sm); --bs-btn-border-radius: var(--radius-sm); --bs-btn-font-weight: 600; --bs-btn-line-height: 1.5;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 38px; transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease); }
.btn-sm { --bs-btn-padding-y: 4px; --bs-btn-padding-x: 12px; --bs-btn-font-size: var(--fs-xs); min-height: 32px; }
.btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 35%, transparent); outline: none; }
.btn-success, .btn-primary { --bs-btn-bg: var(--c-primary); --bs-btn-border-color: var(--c-primary); --bs-btn-color: var(--c-on-primary);
  --bs-btn-hover-bg: var(--c-primary-hover); --bs-btn-hover-border-color: var(--c-primary-hover); --bs-btn-hover-color: var(--c-on-primary);
  --bs-btn-active-bg: var(--c-primary-hover); --bs-btn-active-border-color: var(--c-primary-hover); --bs-btn-active-color: var(--c-on-primary);
  --bs-btn-disabled-bg: var(--c-primary); --bs-btn-disabled-border-color: var(--c-primary); --bs-btn-disabled-color: var(--c-on-primary); box-shadow: var(--shadow-sm); }
.btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--c-outline); --bs-btn-border-color: var(--c-outline); --bs-btn-hover-bg: var(--c-primary); --bs-btn-hover-border-color: var(--c-primary); --bs-btn-hover-color: var(--c-on-primary);
  --bs-btn-active-bg: var(--c-primary-hover); --bs-btn-active-border-color: var(--c-primary-hover); --bs-btn-active-color: var(--c-on-primary); --bs-btn-disabled-color: var(--c-outline); --bs-btn-disabled-border-color: var(--c-outline); }
.btn-secondary, .btn-outline-secondary { --bs-btn-color: var(--c-text); --bs-btn-bg: var(--c-surface); --bs-btn-border-color: var(--c-border-strong); --bs-btn-hover-bg: var(--c-hover); --bs-btn-hover-border-color: var(--c-border-strong); --bs-btn-hover-color: var(--c-text);
  --bs-btn-active-bg: var(--c-hover); --bs-btn-active-border-color: var(--c-border-strong); --bs-btn-active-color: var(--c-text); --bs-btn-disabled-color: var(--c-muted); --bs-btn-disabled-border-color: var(--c-border); }
.btn-danger { --bs-btn-bg: var(--c-err-solid); --bs-btn-border-color: var(--c-err-solid); --bs-btn-color: var(--c-on-err-solid); --bs-btn-hover-bg: var(--c-err-solid); --bs-btn-hover-border-color: var(--c-err-solid); --bs-btn-hover-color: var(--c-on-err-solid); }
.btn-outline-danger { --bs-btn-color: var(--c-err-solid); --bs-btn-border-color: var(--c-err-solid); --bs-btn-hover-bg: var(--c-err-solid); --bs-btn-hover-border-color: var(--c-err-solid); --bs-btn-hover-color: var(--c-on-err-solid); --bs-btn-active-bg: var(--c-err-solid); --bs-btn-active-color: var(--c-on-err-solid); }
.btn-warning { --bs-btn-bg: var(--c-warn-solid); --bs-btn-border-color: var(--c-accent); --bs-btn-color: var(--c-on-warn-solid); --bs-btn-hover-bg: var(--c-accent); --bs-btn-hover-border-color: var(--c-accent); --bs-btn-hover-color: var(--c-on-warn-solid); --bs-btn-active-bg: var(--c-accent); --bs-btn-active-color: var(--c-on-warn-solid); }
.btn-outline-warning { --bs-btn-color: var(--c-accent-text); --bs-btn-border-color: var(--c-accent); --bs-btn-hover-bg: var(--c-warn-solid); --bs-btn-hover-border-color: var(--c-accent); --bs-btn-hover-color: var(--c-on-warn-solid); --bs-btn-active-bg: var(--c-warn-solid); --bs-btn-active-color: var(--c-on-warn-solid); }
.btn-close { filter: none; }
:root[data-theme="night"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---- forms ------------------------------------------------------------------ */
.form-label { font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--sp-1); color: var(--c-text); }
.form-control, .form-select {
  min-height: 38px; padding: 6px var(--sp-3); font-size: var(--fs-sm); color: var(--c-text); background-color: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-control::placeholder { color: var(--c-muted); opacity: .8; }
.form-control:focus, .form-select:focus { color: var(--c-text); background-color: var(--c-surface); border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 24%, transparent); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--c-surface-2); color: var(--c-muted); opacity: 1; }
.form-control-sm { min-height: 32px; padding: 4px var(--sp-2); font-size: var(--fs-xs); }
textarea.form-control { min-height: 72px; line-height: 1.6; }
.form-check { min-height: 0; margin-bottom: var(--sp-2); }
.form-check-input { border-color: var(--c-border-strong); background-color: var(--c-surface); margin-top: .45em; }
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); }
:root[data-theme="night"] .form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2314180A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-label { font-size: var(--fs-sm); }
.form-text { font-size: var(--fs-xs); margin-top: var(--sp-1); }
.input-group > .btn { min-height: 38px; }
.invalid-feedback, .validation-message { color: var(--c-err-solid); font-size: var(--fs-xs); font-family: var(--font-ui); }
.valid.modified:not([type=checkbox]) { outline: 0; border-color: var(--c-ok-solid); }
.invalid { outline: 0; border-color: var(--c-err-solid) !important; }
.validation-message { display: block; margin-top: var(--sp-1); }

/* form grids: Bootstrap rows -> 12px / 16px gutters, 3-up on desktop, 2-up on tablet, 1-up on phones */
.row { --bs-gutter-x: var(--sp-4); --bs-gutter-y: var(--sp-3); }
.row.g-2 { --bs-gutter-x: var(--sp-3); --bs-gutter-y: var(--sp-2); }
.row.g-3 { --bs-gutter-x: var(--sp-4); --bs-gutter-y: var(--sp-3); }
.row.g-2 + .table-responsive, .row.mb-3 { margin-bottom: var(--sp-4); }
@media (min-width: 768px) and (max-width: 1099.98px) {
  .row > .col-md-2, .row > .col-md-3 { flex: 0 0 auto; width: 50%; }
  .row > .col-md-1 { flex: 0 0 auto; width: 50%; }
  .row > .col-md-4 { flex: 0 0 auto; width: 50%; }
}
@media (max-width: 767.98px) {
  .row > [class*="col-md-"] { flex: 0 0 auto; width: 100%; }
}

/* ---- tables: compact, zebra, sticky header ------------------------------------ */
.table {
  --bs-table-color: var(--c-text); --bs-table-bg: var(--c-surface); --bs-table-striped-bg: var(--c-zebra); --bs-table-striped-color: var(--c-text);
  --bs-table-hover-bg: var(--c-hover); --bs-table-hover-color: var(--c-text); --bs-table-active-bg: var(--c-hover); --bs-table-border-color: var(--c-border);
  width: 100%; margin-bottom: var(--sp-4); border-collapse: separate; border-spacing: 0; border: 1px solid var(--c-border); border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.55; font-variant-numeric: tabular-nums;
}
.table > :not(caption) > * > * { padding: 7px var(--sp-3); border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table > thead > tr > th {
  position: sticky; top: var(--topbar-h); z-index: 2; background: var(--c-th-bg); --bs-table-bg: var(--c-th-bg); --bs-table-bg-type: var(--c-th-bg); color: var(--c-th-text);
  font-weight: 700; font-size: var(--fs-xs); white-space: nowrap; border-bottom: 2px solid var(--c-accent); padding-block: 8px;
}
.table > thead > tr:first-child > th:first-child { border-top-right-radius: calc(var(--radius) - 1px); }
.table > thead > tr:first-child > th:last-child { border-top-left-radius: calc(var(--radius) - 1px); }
.table > tbody > tr:last-child > td:first-child { border-bottom-right-radius: calc(var(--radius) - 1px); }
.table > tbody > tr:last-child > td:last-child { border-bottom-left-radius: calc(var(--radius) - 1px); }
.table-sm > :not(caption) > * > * { padding: 6px var(--sp-3); }
.table td .btn-sm { min-height: 28px; padding: 2px 10px; }
.table td .badge { vertical-align: middle; }
.table-responsive { margin-bottom: var(--sp-4); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }
/* Sticky header inside the scroll wrapper: the wrapper is the (only) scroll container of the table - horizontal for wide tables and vertical for
   long ones (max-height), so `position: sticky; top: 0` on the header cells always has a scroller to stick to (RTL horizontal scrolling is unchanged). */
@media (max-width: 991.98px) {
  .table:not(.table-fit) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table:not(.table-fit) > thead > tr > th { top: 0; position: static; }
  .table:not(.table-fit) td { min-width: 84px; }
  .table-responsive > .table { display: table; }
}
pre.json { white-space: pre-wrap; direction: ltr; text-align: left; font-size: var(--fs-xs); margin: 0; max-width: 360px; }
.text-nowrap .btn + .btn { margin-inline-start: var(--sp-1); }

/* ---- tabs ------------------------------------------------------------------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--c-border); --bs-nav-tabs-link-active-bg: var(--c-surface); --bs-nav-tabs-link-active-color: var(--c-heading); --bs-nav-tabs-link-active-border-color: var(--c-border) var(--c-border) var(--c-surface);
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: var(--sp-1); border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4) !important; scrollbar-width: thin; }
.nav-tabs .nav-link { color: var(--c-muted); font-weight: 600; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); white-space: nowrap; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: -1px; position: relative; }
.nav-tabs .nav-link:hover { color: var(--c-heading); background: var(--c-hover); border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--c-heading); background: var(--c-surface); border-color: var(--c-border); box-shadow: inset 0 3px 0 var(--c-accent); }
.nav-tabs .nav-item { flex: none; }

/* ---- alerts & badges --------------------------------------------------------- */
.alert { --bs-alert-padding-y: var(--sp-3); --bs-alert-padding-x: var(--sp-4); --bs-alert-margin-bottom: var(--sp-4); border-radius: var(--radius-sm); border-width: 1px 1px 1px 5px; font-size: var(--fs-sm); line-height: 1.6; }
.alert-success { background: var(--c-ok-bg); color: var(--c-ok-text); border-color: var(--c-ok-solid); }
.alert-danger  { background: var(--c-err-bg); color: var(--c-err-text); border-color: var(--c-err-solid); }
.alert-warning { background: var(--c-warn-bg); color: var(--c-warn-text); border-color: var(--c-accent); }
.alert-info    { background: var(--c-info-bg); color: var(--c-info-text); border-color: var(--c-info-solid); }
.badge { font-weight: 600; font-size: var(--fs-xs); padding: 2px var(--sp-3); border-radius: var(--radius-pill); line-height: 1.6; letter-spacing: 0; }
.badge.bg-secondary { background: var(--c-chip-bg) !important; color: var(--c-chip-text) !important; }
.badge.bg-success { background: var(--c-ok-solid) !important; color: var(--c-on-ok-solid) !important; }
.badge.bg-primary { background: var(--c-primary) !important; color: var(--c-on-primary) !important; }
.badge.bg-danger { background: var(--c-err-solid) !important; color: var(--c-on-err-solid) !important; }
.badge.bg-warning, .badge.bg-warning.text-dark { background: var(--c-warn-solid) !important; color: var(--c-on-warn-solid) !important; }
.badge.bg-info { background: var(--c-info-solid) !important; color: var(--c-on-info-solid) !important; }
.badge.bg-light, .badge.bg-light.text-dark { background: var(--c-surface-2) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }
.bg-white { background-color: var(--c-surface) !important; }
.bg-light { background-color: var(--c-surface-2) !important; }
.text-dark { color: var(--c-text) !important; }
.border { border-color: var(--c-border) !important; }
.dropdown-menu, .modal-content { --bs-dropdown-bg: var(--c-surface); --bs-dropdown-color: var(--c-text); --bs-dropdown-border-color: var(--c-border); --bs-modal-bg: var(--c-surface); --bs-modal-color: var(--c-text); --bs-modal-border-color: var(--c-border); --bs-modal-border-radius: var(--radius-lg); --bs-modal-padding: var(--sp-4); --bs-modal-header-padding: var(--sp-4); }
.pagination { --bs-pagination-bg: var(--c-surface); --bs-pagination-color: var(--c-link); --bs-pagination-border-color: var(--c-border); --bs-pagination-active-bg: var(--c-primary); --bs-pagination-active-border-color: var(--c-primary); --bs-pagination-active-color: var(--c-on-primary); }
.pager-info { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--c-muted); }
.progress { --bs-progress-bg: var(--c-surface-2); }

/* ---- dashboard --------------------------------------------------------------- */
.welcome-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6);
  background: var(--c-hero-bg); color: var(--c-hero-text); border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid rgba(232,212,77,.45);
}
.welcome-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--c-hero-accent); opacity: .13;
  -webkit-mask: var(--orn-tile) 0 0 / 56px 56px; mask: var(--orn-tile) 0 0 / 56px 56px; }
.welcome-banner::after { content: ""; position: absolute; inset: var(--sp-2); border: 1px solid rgba(232,212,77,.5); border-radius: calc(var(--radius-lg) - 6px); pointer-events: none; }
.welcome-logo { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 50%; background: #fff; object-fit: cover; flex: none; box-shadow: 0 0 0 3px var(--c-hero-accent), 0 6px 18px rgba(0,0,0,.3); }
.welcome-text { position: relative; z-index: 1; min-width: 0; }
.welcome-text p { margin: 0; }
.welcome-text .welcome-hello { font-family: var(--font-ui); font-size: var(--fs-2xl); font-weight: 800; line-height: 1.3; color: var(--c-hero-text); }
.welcome-text .welcome-sub { font-size: var(--fs-base); opacity: .95; margin-top: var(--sp-1); }
.welcome-text .welcome-date { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--c-hero-accent); margin-top: var(--sp-2); font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--sp-4); }
.stat-card {
  position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); color: var(--c-text); text-decoration: none;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-accent); color: var(--c-text); }
.stat-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: var(--c-primary-soft); color: var(--c-heading); box-shadow: inset 0 0 0 1px var(--c-border); }
.stat-body { min-width: 0; position: relative; z-index: 1; }
.stat-label { font-family: var(--font-ui); font-weight: 700; color: var(--c-heading); font-size: var(--fs-base); line-height: 1.3; }
.stat-value { font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-2xl); line-height: 1.2; color: var(--c-text); font-variant-numeric: tabular-nums; }
.stat-desc { color: var(--c-muted); font-size: var(--fs-xs); line-height: 1.5; }

/* ---- authentication pages ------------------------------------------------------ */
.auth-wrap { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5) var(--sp-4); }
.auth-card {
  width: 100%; max-width: 440px; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-4) var(--sp-5) var(--sp-5); outline: 1px solid var(--c-accent); outline-offset: -8px;
}
.auth-card.orn-frame::before { inset: 4px; border-radius: calc(var(--radius-lg) - 3px); opacity: .8; }
.auth-card.orn-frame::after { -webkit-mask-size: 16px 16px; mask-size: 16px 16px; inset: -1px; }
.auth-head { text-align: center; margin-bottom: var(--sp-4); }
.auth-head .mihrab { max-width: 280px; }
.auth-logo { width: 120px; height: 120px; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: 0 0 0 3px var(--c-accent-bright), 0 0 0 5px var(--c-arch), var(--shadow); }
.auth-title { font-family: var(--font-ui); font-weight: 800; font-size: 1.25rem; color: var(--c-heading); margin: var(--sp-3) 0 0; }
.auth-sub { color: var(--c-muted); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; }
.auth-card .geo-divider { margin: var(--sp-3) 0; }
.auth-card .card { background: transparent; border: 0; box-shadow: none !important; }
.auth-card .card-body { padding: 0; }
.auth-card h1 { font-size: 1.125rem; text-align: center; }
.auth-card .btn.w-100 { min-height: 44px; font-size: var(--fs-base); }
.auth-foot { text-align: center; margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); font-family: var(--font-ui); }

/* ---- misc ------------------------------------------------------------------- */
#blazor-error-ui { background: var(--c-warn-bg); color: var(--c-warn-text); border-top: 3px solid var(--c-accent); bottom: 0; box-shadow: var(--shadow-lg); display: none; left: 0; padding: var(--sp-3) var(--sp-5); position: fixed; width: 100%; z-index: 2000; font-family: var(--font-ui); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--sp-4); top: var(--sp-3); }
.blazor-error-boundary { background: var(--c-err-solid); color: var(--c-on-err-solid); padding: var(--sp-4); }
.app-content > .alert:first-child { margin-top: 0; }
.page-gap { height: var(--sp-4); }

/* ---- responsive shell --------------------------------------------------------- */
@media (max-width: 1199.98px) { :root { --sidebar-w: 216px; } .app-content { padding-inline: var(--sp-4); } }
@media (min-width: 992px) {
  .nav-collapse { display: inline-flex; }
  .app-sidebar { transition: width .22s ease; overflow-x: hidden; }
  /* icon-only rail (state kept in <html data-sidebar>, set before first paint) */
  :root[data-sidebar="collapsed"] { --sidebar-w: 64px; }
  :root[data-sidebar="collapsed"] .app-sidebar .nav { padding: 0 var(--sp-2); }
  :root[data-sidebar="collapsed"] .app-sidebar .nav-link { justify-content: center; gap: 0; padding: var(--sp-3) var(--sp-2); }
  :root[data-sidebar="collapsed"] .app-sidebar .nav-link > span { display: none; }
}
@media (max-width: 991.98px) {
  .nav-collapse { display: none; }
  .nav-toggle { display: inline-flex; }
  .app-sidebar { position: fixed; top: var(--topbar-h); bottom: 0; right: 0; height: auto; width: min(300px, 86vw); z-index: 1045; transform: translateX(105%); transition: transform .22s ease; box-shadow: none; }
  .app-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .nav-backdrop.open { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 1040; background: rgba(0,0,0,.45); }
  .user-chip { display: none; }
  .brand-title { font-size: 1rem; }
}
@media (max-width: 575.98px) {
  :root { --topbar-h: 56px; --fs-2xl: 1.5rem; --fs-xl: 1.1875rem; }
  .app-topbar { gap: var(--sp-2); padding: 0 var(--sp-3); }
  .brand-logo { width: 40px; height: 40px; }
  .brand-title { font-size: .875rem; white-space: normal; line-height: 1.25; }
  .app-topbar .btn-topbar { padding: 0 var(--sp-2); }
  .app-content { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .page-header { padding: var(--sp-3) var(--sp-4); }
  .page-actions, .page-actions > .d-flex { width: 100%; }
  .welcome-banner { flex-direction: column; text-align: center; padding: var(--sp-5) var(--sp-4); gap: var(--sp-3); }
  .welcome-logo { width: 72px; height: 72px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .stat-card { flex-direction: column; text-align: center; padding: var(--sp-3); gap: var(--sp-2); }
  .stat-desc { display: none; }
  .auth-card { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .card-body { padding: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .app-topbar, .app-sidebar, body::before { display: none !important; } .app-content { padding: 0; } }

/* ---- halaqat: follow-up grid (P-52) ------------------------------------------------ */
.memo-grid { font-size: var(--fs-xs); }
.memo-grid th, .memo-grid td { white-space: nowrap; }
.memo-grid td { padding: 4px var(--sp-2); vertical-align: top; }
.memo-grid .form-select, .memo-grid .form-control { min-height: 30px; padding: 2px var(--sp-2); font-size: var(--fs-xs); }
.memo-grid .memo-surah { min-width: 132px; }
.memo-grid .memo-ayah { width: 64px; }
.memo-grid .memo-att { width: 64px; }
.memo-grid .memo-score { width: 76px; }
.memo-grid .memo-rating { min-width: 96px; }
.memo-grid .memo-notes { min-width: 140px; }
.memo-grid .memo-name { position: sticky; right: 0; z-index: 1; background: inherit; font-weight: 600; min-width: 150px; }
.memo-grid .memo-calc { color: var(--c-muted); text-align: center; font-variant-numeric: tabular-nums; }
.memo-grid tr.row-has-errors > td { background: var(--c-err-bg); }
.memo-grid .row-errors { color: var(--c-err-text); font-size: var(--fs-xs); white-space: normal; min-width: 220px; }
.memo-grid .row-errors div { line-height: 1.4; }
.memo-scroll { overflow-x: auto; margin-bottom: var(--sp-4); border-radius: var(--radius); }
.memo-scroll > .table { margin-bottom: 0; }
.memo-scroll .table > thead > tr > th { position: sticky; top: 0; }
.info-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: var(--sp-4); }
.info-strip .lbl { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.stat-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.stat-chips .chip { background: var(--c-chip-bg); color: var(--c-chip-text); border-radius: var(--radius-pill); padding: 2px var(--sp-3); font-size: var(--fs-xs); }
.stat-chips .chip strong { color: var(--c-heading); }


/* ---- wide tables: scroll inside the wrapper, never squeezed, never a page-level sideways scroll -------------------------------
   Wrapper scrolls (also in RTL, where the overflow goes to the left and is reached with a negative scrollLeft); the table is
   at least as wide as the wrapper and as wide as its content. */
.table-responsive, .memo-scroll { overflow: auto; max-width: 100%; max-height: calc(100vh - var(--topbar-h) - var(--sp-6)); overscroll-behavior: contain; }
.table-responsive > .table > thead > tr > th, .memo-scroll > .table > thead > tr > th { position: sticky; top: 0; z-index: 3; }
.table-responsive > .table, .memo-scroll > .table { display: table; width: max-content; min-width: 100%; max-width: none; }
.table-responsive > .table:not(.table-fit) td, .memo-scroll > .table td { min-width: 0; }
html, body { max-width: 100%; overflow-x: clip; }

/* ---- select arrow: reserve room for the caret on the inline-end (left in RTL) so it never overlaps the text ------------------ */
.form-select, .form-select-sm { padding-inline-end: 2.25rem; background-position: left .75rem center; background-size: 16px 12px; }
html[dir="ltr"] .form-select, html[dir="ltr"] .form-select-sm { background-position: right .75rem center; }
.form-select option { padding-inline-end: var(--sp-2); }

/* ---- touch targets: >= 40px inputs / >= 36px small buttons on phones and tablets ------------------------------------------ */
@media (max-width: 991.98px), (pointer: coarse) {
  .form-control, .form-select, .form-control-sm, .form-select-sm, .memo-grid .form-select, .memo-grid .form-control, .input-group > .btn { min-height: 40px; }
  .btn, .btn-sm, .table td .btn-sm { min-height: 40px; }
  .form-check-input { width: 1.35em; height: 1.35em; }
  .nav-tabs .nav-link { min-height: 40px; }
}


/* ---- module section navigation (finance / supervision / inventory) ------------------------------------------------------- */
.subnav { display: flex; flex-wrap: nowrap; gap: var(--sp-1); overflow-x: auto; margin-bottom: var(--sp-4); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--c-border); scrollbar-width: thin; }
.subnav-link { white-space: nowrap; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); text-decoration: none; border: 1px solid transparent; }
.subnav-link:hover { background: var(--c-hover); color: var(--c-heading); }
.subnav-link.active { background: var(--c-chip-bg); color: var(--c-chip-text); border-color: var(--c-border); }
@media (max-width: 991.98px), (pointer: coarse) { .subnav-link { min-height: 40px; display: inline-flex; align-items: center; } }

/* ---- simple CSS bars (data-entry monitoring) ----------------------------------------------------------------------------- */
.bar-col { min-width: 140px; }
.cbar { position: relative; height: 22px; min-width: 120px; background: var(--c-zebra); border: 1px solid var(--c-border); border-radius: var(--radius-pill); overflow: hidden; }
.cbar-fill { height: 100%; background: var(--c-accent); }
.cbar-fill.ok { background: var(--c-ok-solid); }
.cbar-fill.mid { background: #c9a227; }
.cbar-fill.low { background: var(--c-err-solid); }
.cbar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; color: var(--c-text); text-shadow: 0 0 3px var(--c-surface), 0 0 3px var(--c-surface); }

/* ---- dashboard cards (R-01) and report chips/charts (M14) ---------------------------------------------------------------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.dash-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-4); color: var(--c-text); }
.dash-card h2 { font-family: var(--font-ui); font-size: var(--fs-base); font-weight: 800; color: var(--c-heading); margin: 0 0 var(--sp-2); }
.dash-card .dash-big { font-family: var(--font-ui); font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dash-card .dash-sub { color: var(--c-muted); font-size: var(--fs-xs); }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px dashed var(--c-border); font-size: var(--fs-sm); }
.dash-list li:last-child { border-bottom: 0; }
.dash-list a { color: var(--c-link, var(--c-heading)); text-decoration: none; }
.dash-list .dash-n { font-weight: 800; font-variant-numeric: tabular-nums; }
.chip .chip-x { margin-inline-start: var(--sp-1); text-decoration: none; font-weight: 800; }
.report-table td.tabular { font-variant-numeric: tabular-nums; }
.report-table tr.report-totals td { border-top: 2px solid var(--c-accent); background: var(--c-zebra); }
.report-chart .chart-value { min-width: 56px; text-align: end; font-variant-numeric: tabular-nums; }