/* ============================================================
   CONNEXIA — Design System
   Primary: #286cbf (Blue) | BG: #eff6ff | Sidebar: White
   ============================================================ */

:root {
  --primary:        #286cbf;
  --primary-dark:   #205699;
  --primary-light:  #dbeafe;
  --primary-bg:     #eff6ff;
  --accent:         #3b82f6;
  --success:        #16a34a;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --info:           #06b6d4;
  --purple:         #286cbf;
  --category-senior: #286cbf;
  --orange:         #f97316;
  --bg:             #eff6ff;
  --sidebar-width:  260px;
  --topbar-height:  76px;
  --card-shadow:    0 1px 6px rgba(0,0,0,.08);
  --card-radius:    16px;
  --transition:     .2s ease;
  --sidebar-text:   #374151;
  --sidebar-muted:  #9ca3af;
}

/* ── RESET / BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: #111827;
  font-size: 14px;
  margin: 0;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.page-header h1, .section-title, .card-header,
.stat-value, .welcome-banner h2 {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ══════════════════════════════════════
   SIDEBAR — White with blue accents
══════════════════════════════════════ */
.sidebar {
  position: fixed;
  left: 0; top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  transition: width var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

/* Logo area */
.sidebar-logo {
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
  text-align: center;
}
.sidebar-logo-icon {
  width: 40px; height: 40px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-logo-icon i { color: #fff; font-size: 18px; }
.sidebar-logo-text { flex: 1; min-width: 0; }
.sidebar-logo .brand-name, .sidebar-logo-text .brand-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
  display: block;
  line-height: 1.25;
}
.sidebar-logo .brand-place {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  line-height: 1.3;
  margin-top: 0;
}
.sidebar-role-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 3px;
  letter-spacing: .2px;
}
.role-resident    { background: #dbeafe; color: #205699; }
.role-clerk       { background: #dbeafe; color: #1d4ed8; }
.role-admin       { background: #eaf2fc; color: #1d4f8f; }

/* Nav */
.sidebar-nav { flex: 1; min-height: 0; padding: 12px 0 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.nav-section-label {
  color: rgba(255,255,255,.76);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 14px 24px 4px;
}
[data-theme="dark"] .nav-section-label { color: #a8b3c2; }

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 2px 8px;
  color: var(--sidebar-text);
  font-size: 14px;
  border-radius: 8px;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  font-weight: 500;
}
.sidebar-nav .nav-link i {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  color: #9ca3af;
  transition: color var(--transition);
}
.sidebar-nav .nav-link:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.sidebar-nav .nav-link:hover i { color: var(--primary); }
.sidebar-nav .nav-link.active {
  color: #ffffff;
  background: var(--primary);
  font-weight: 600;
}
.sidebar-nav .nav-link.active i { color: rgba(255,255,255,.9); }
.sidebar-nav .nav-link .badge {
  margin-left: auto;
  background: #f59e0b;          /* orange = needs attention (pending / almost due / unread) */
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.sidebar-nav .nav-link.active .badge { background: rgba(255,255,255,.3); color: #fff; }
/* Count badges beside a module title */
.sidebar-nav .nav-link .badge {
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.sidebar-nav .nav-link .badge + .badge { margin-left: 4px; }
/* Red = overdue (urgent) — same red as the card's 'Overdue' badge */
.sidebar-nav .nav-link .badge-overdue { background: var(--danger); }
.sidebar-nav .nav-link.active .badge-overdue { background: var(--danger); color: #fff; }
/* Legacy alias — almost-due now uses the default orange badge */
.sidebar-nav .nav-link .badge-due { background: #f59e0b; }

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 8px 16px;
  border-top: 1px solid #f3f4f6;
  flex-shrink: 0;
}
.sidebar-footer .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 1px 0;
  color: var(--sidebar-text);
  font-size: 13px;
  border-radius: 8px;
  transition: all var(--transition);
}
.sidebar-footer .nav-link i { font-size: 15px; width: 20px; text-align: center; color: #9ca3af; }
.sidebar-footer .nav-link:hover { color: var(--danger); background: #fef2f2; }
.sidebar-footer .nav-link:hover i { color: var(--danger); }
.sidebar-brgy-info {
  padding: 8px 14px 0;
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}

/* ══════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}

/* ── TOPBAR ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topbar-height);
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.topbar-toggle {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  line-height: 1;
  transition: background var(--transition);
  display: none;
}
.topbar-toggle:hover { background: var(--primary-light); color: var(--primary); }

.topbar-barangay { display: flex; align-items: center; gap: 10px; }
.topbar-barangay .brgy-name { font-size: 14px; font-weight: 700; color: #111827; }
.topbar-barangay .brgy-loc  { font-size: 12px; color: #6b7280; }

.topbar-page-title { flex: 1; min-width: 0; }
.topbar-page-title h1 { font-size: 28px; font-weight: 800; color: #111827; margin: 0; letter-spacing: -.5px; line-height: 1.1; }
.topbar-page-title .page-subtitle { margin: 3px 0 0; color: #6b7280; font-size: 15px; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }

.notif-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 18px;
  color: #6b7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background var(--transition);
}
.notif-btn:hover { background: var(--primary-light); color: var(--primary); }
.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px; height: 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
}
.topbar-user:hover { background: #f9fafb; }
.topbar-user .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.topbar-user .user-info { line-height: 1.2; }
.topbar-user .user-name { font-size: 13px; font-weight: 600; color: #111827; }
.topbar-user .user-role { font-size: 11px; color: #6b7280; }

/* ── CONTENT AREA ── */
.page-content { padding: 24px; flex: 1; }

/* ── PAGE HEADER ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.page-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  letter-spacing: -.3px;
}
.page-header .page-subtitle { margin: 3px 0 0; color: #6b7280; font-size: 13px; }

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.card {
  border: 1px solid #e5e7eb;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background: #fff;
}
.card-header {
  background: none;
  border-bottom: 1px solid #f3f4f6;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.card-header i { color: var(--primary); }
.card-body { padding: 20px; }

/* ── STAT CARDS ── */
.stat-card {
  height: 100%;            /* every card in a row ends level, sub-line or not */
  border-radius: var(--card-radius);
  padding: 20px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.stat-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.stat-icon img { width: 34px; height: 34px; object-fit: contain; }
.stat-icon.blue    { background: #dbeafe; color: #2563eb; }
.stat-icon.green   { background: #dbeafe; color: var(--primary); }
.stat-icon.orange  { background: #ffedd5; color: var(--orange); }
.stat-icon.red     { background: #fee2e2; color: var(--danger); }
.stat-icon.teal    { background: #cffafe; color: var(--info); }
.stat-icon.purple  { background: #eaf2fc; color: var(--purple); }
.stat-icon.yellow  { background: #fef9c3; color: #ca8a04; }
.stat-body .stat-value { font-size: 28px; font-weight: 800; line-height: 1.1; color: #111827; }
.stat-body .stat-label { font-size: 12px; color: #6b7280; margin-top: 2px; }
.stat-body .stat-sub   { font-size: 11px; color: var(--primary); margin-top: 4px; }

/* Colored large stat numbers (Reports) */
.stat-num-blue   { color: #2563eb !important; }
.stat-num-orange { color: var(--orange) !important; }
.stat-num-green  { color: var(--primary) !important; }
.stat-num-red    { color: var(--danger) !important; }
.stat-num-purple { color: var(--purple) !important; }

/* ══════════════════════════════════════
   WELCOME BANNERS
══════════════════════════════════════ */
.welcome-banner {
  border-radius: var(--card-radius);
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.welcome-banner.green  { background: linear-gradient(135deg, #286cbf 0%, #205699 100%); }
.welcome-banner.purple { background: linear-gradient(135deg, #286cbf 0%, #1d4f8f 100%); }
.welcome-banner.blue   { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.welcome-banner h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.welcome-banner p  { margin: 0; opacity: .88; font-size: 13.5px; }
.welcome-banner .wb-sub { font-size: 13px; margin-top: 4px; opacity: .75; }

/* ══════════════════════════════════════
   TABLES
══════════════════════════════════════ */
.table { font-size: 13.5px; }
.table th {
  background: #f9fafb;
  font-weight: 600;
  color: #6b7280;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  padding: 11px 14px;
}
.table td { vertical-align: middle; border-bottom: 1px solid #f3f4f6; padding: 11px 14px; }
.table tbody tr:hover { background: #f9fafb; }
.table-responsive { border-radius: var(--card-radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dropdown-menu { font-size:12.5px; min-width:150px; padding:4px 0; }
.dropdown-item { padding:5px 14px; font-size:12.5px; }
.dropdown-item i { font-size:11px; }
.dropdown-divider { margin:3px 0; }

.action-btns { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.action-btns .btn { padding: 4px 10px; font-size: 12px; }
/* icon-only action buttons stay square so a row of them lines up evenly */
.action-btns .btn-icon { width: 32px; height: 32px; padding: 0; }
.action-btns form { display: inline-flex; }

/* ══════════════════════════════════════
   FORMS
══════════════════════════════════════ */
.form-label { font-weight: 600; font-size: 13px; color: #374151; margin-bottom: 5px; }
.form-control, .form-select {
  font-size: 13.5px;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  transition: border-color var(--transition), box-shadow var(--transition);
  color: #111827;
  font-weight: 500;
}
.form-control::placeholder {
  color: #9ca3af;
  font-weight: 400;
  opacity: 1;
}
#auditFilter input[type="date"],
#customRangeForm input[type="date"] { font-weight: 400; color: #6c757d; }
[data-theme="dark"] #auditFilter input[type="date"],
[data-theme="dark"] #customRangeForm input[type="date"] { color: #bdc0c5; }
/* Consistent neutral text for dropdown fields throughout the modules. */
select.form-select, select.form-control { font-weight: 400; color: #6c757d; }
.renter-details { min-width: 0; padding: 16px; border: 1px solid #dbe4ef; border-radius: 10px; background: #f8fafc; }
.renter-details legend { float: none; width: auto; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #334155; }
.renter-details .form-label { font-size: 12px; }
[data-theme="dark"] .renter-details { background: #1e2a38; border-color: #344254; }
[data-theme="dark"] .renter-details legend { color: #e2e8f0; }
:root:not([data-theme="dark"]) select.form-select:has(option:checked:not([value=""])),
:root:not([data-theme="dark"]) select.form-control:has(option:checked:not([value=""])) { color: #111827; }
:root:not([data-theme="dark"]) select.form-select option,
:root:not([data-theme="dark"]) select.form-control option { color: #111827; }
:root:not([data-theme="dark"]) select.form-select option[value=""],
:root:not([data-theme="dark"]) select.form-control option[value=""] { color: #6c757d; }
[data-theme="dark"] select.form-select,
[data-theme="dark"] select.form-control { color: #bdc0c5; }
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(40,108,191,.12);
  outline: none;
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.input-group-text { background: #f9fafb; border-color: #d1d5db; font-size: 13px; color: #6b7280; }

.required-star { color: var(--danger); }
.optional-tag {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: #9ca3af;
  text-transform: none;
  letter-spacing: 0;
}
.section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-light);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn { border-radius: 8px; font-size: 13.5px; font-weight: 500; transition: all var(--transition); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-success { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-success:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn.btn-light-solid-primary.btn-sm { padding: 5px 12px; font-size: 12.5px; line-height: 1.5; }
.btn.btn-resident-action { padding: 4px 10px; font-size: 11.5px; }
:root:not([data-theme="dark"]) .btn-light-solid-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
:root:not([data-theme="dark"]) .btn-light-solid-primary:hover,
:root:not([data-theme="dark"]) .btn-light-solid-primary:focus,
:root:not([data-theme="dark"]) .btn-light-solid-primary:active { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn.btn-resident-edit { background: transparent; color: #4b5563; border-color: #d1d5db; }
.btn.btn-resident-edit:hover,
.btn.btn-resident-edit:focus,
.btn.btn-resident-edit:active { background: rgba(0,0,0,.04); color: #1f2937; border-color: #9ca3af; }
.resident-edit-lock #lockText { color: #4b5563; }
.resident-edit-lock #lockText strong { color: #1f2937; }
/* Shared editing locks: amber while locked, neutral while editing. */
.btn-edit-lock.btn-warning, .btn.lock-btn.locked { background: #fffbeb; color: #374151; border-color: #fcd34d; }
.btn-edit-lock.btn-warning:hover, .btn.lock-btn.locked:hover,
.btn-edit-lock.btn-warning:focus, .btn.lock-btn.locked:focus,
.btn-edit-lock.btn-warning:active, .btn.lock-btn.locked:active { background: #fef3c7; color: #1f2937; border-color: #f59e0b; }
.btn-edit-lock.btn-outline-secondary, .btn.lock-btn:not(.locked) { background: transparent; color: #4b5563; border-color: #d1d5db; }
.btn-edit-lock.btn-outline-secondary:hover, .btn.lock-btn:not(.locked):hover,
.btn-edit-lock.btn-outline-secondary:focus, .btn.lock-btn:not(.locked):focus,
.btn-edit-lock.btn-outline-secondary:active, .btn.lock-btn:not(.locked):active { background: rgba(0,0,0,.04); color: #1f2937; border-color: #9ca3af; }
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; }

/* ══════════════════════════════════════
   BADGES & STATUS
══════════════════════════════════════ */
.badge { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; }

/* Status badges */
.badge-pending     { background: #fef3c7; color: #92400e; }
.badge-processing  { background: #dbeafe; color: #1e40af; }
.badge-approved    { background: #dcfce7; color: #14532d; }
.badge-completed   { background: #f3f4f6; color: #374151; }
.badge-ready       { background: #dbeafe; color: #1d4f8f; }
.badge-rejected    { background: #fee2e2; color: #7f1d1d; }
.badge-new         { background: #dbeafe; color: #1e40af; }
.badge-investigating { background: #fef3c7; color: #92400e; }
.badge-resolved    { background: #dcfce7; color: #14532d; }
.badge-dismissed   { background: #f3f4f6; color: #374151; }
.badge-released    { background: #dcfce7; color: #14532d; }
.badge-returned    { background: #f3f4f6; color: #374151; }
.badge-active      { background: #dcfce7; color: #14532d; }
.badge-suspended   { background: #fee2e2; color: #7f1d1d; }
.badge-verified    { background: #dcfce7; color: #14532d; }
.badge-denied      { background: #fee2e2; color: #7f1d1d; }
.badge.st-ready-for-pickup { background-color: #286cbf !important; color: #fff !important; }
.badge.st-returned { background-color: #475569 !important; color: #fff !important; }
[data-theme="dark"] .badge.bg-primary.st-ready-for-pickup,
[data-theme="dark"] .badge-ready { background-color: #1e3a5f !important; color: #93c5fd !important; }
[data-theme="dark"] .badge.bg-success.st-returned,
[data-theme="dark"] .badge-returned { background-color: #334155 !important; color: #cbd5e1 !important; }

/* ══════════════════════════════════════
   TAB TOGGLE (Figma style pill tabs)
══════════════════════════════════════ */
.pill-tabs {
  display: inline-flex;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;           /* scroll instead of overflowing on small screens */
  -webkit-overflow-scrolling: touch;
}
.pill-tabs::-webkit-scrollbar { height: 0; }
#borrowStaffTabs { margin-top: -8px; }
#jobTabs { display: flex; width: fit-content; }
@media (min-width: 577px) {
  body.page-jobs.role-resident .page-content { padding-top: 16px; }
}
.pill-tabs .pill-tab { white-space: nowrap; flex-shrink: 0; }
.pill-tabs .pill-tab {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border: none;
  background: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.pill-tabs .pill-tab.active,
.pill-tabs .pill-tab:focus {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(40,108,191,.25);
}

/* Filter chips (status filter) */
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-chip {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  transition: all var(--transition);
  text-decoration: none;
  display: inline-block;
}
.filter-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.filter-chips-mobile { display: none; }
.period-pills-mobile { display: none; }
.annx-cats-mobile { display: none; }

/* Job cards (Indeed-inspired, Connexia blue) — shared by resident Job Finder & admin moderation */
.jobx-card { background:#fff; border:1px solid #e8ecf1; border-radius:14px; padding:16px 18px 0; display:flex; flex-direction:column; height:100%; transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.jobx-card:hover { box-shadow:0 10px 26px rgba(40,108,191,.13); border-color:#cdddf3; transform:translateY(-2px); }
.jobx-flag { display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:20px; }
.jobx-flag.blue { color:#286cbf; background:#eaf2fd; }
.jobx-flag.green { color:#15803d; background:#e7f6ec; }
.jobx-title { font-size:17px; font-weight:800; color:#1f2937; margin:12px 0 3px; line-height:1.25; }
.jobx-company { font-size:13.5px; color:#4b5563; font-weight:500; }
.jobx-loc { font-size:12.5px; color:#9ca3af; margin-top:1px; }
.jobx-pill { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:8px; }
.jobx-pill.salary { background:#e7f6ec; color:#15803d; }
.jobx-pill.muted { background:#f1f3f5; color:#495057; }
.jobx-desc { font-size:12.5px; color:#6b7280; margin:12px 0 0; line-height:1.5; }
.jobx-foot { margin-top:auto; border-top:1px solid #f0f2f5; padding:12px 0; }

/* ══════════════════════════════════════
   FILTER PANEL
══════════════════════════════════════ */
.filter-panel {
  background: #fff;
  border-radius: var(--card-radius);
  border: 1px solid #e5e7eb;
  box-shadow: var(--card-shadow);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.filter-panel .form-control,
.filter-panel .form-select { font-size: 13px; padding: 7px 12px; }

/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */
.modal-header { background: var(--primary); color: #fff; border-radius: var(--card-radius) var(--card-radius) 0 0; }
.modal-header .btn-close { filter: brightness(0) invert(1); }
.modal-title { font-size: 15px; font-weight: 600; }
.modal-content { border: none; border-radius: var(--card-radius); box-shadow: 0 8px 32px rgba(0,0,0,.18); }

/* ══════════════════════════════════════
   EQUIPMENT CARDS (Figma grid style)
══════════════════════════════════════ */
.equip-card {
  background: #fff;
  border: 1px solid #d4dbe4;
  border-radius: var(--card-radius);
  padding: 18px;
  box-shadow: 0 1px 3px rgba(15,40,80,.06);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.equip-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(15,40,80,.10); }
.equip-card-img { background: #f3f4f6; }
.equip-card-placeholder { display: flex; align-items: center; justify-content: center; }
.equip-card-placeholder > i { font-size: 32px; color: #cbd5e1; }
.equip-card-icon {
  width: 44px; height: 44px;
  background: #eaf2fc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--purple);
  margin-bottom: 12px;
}
.equip-avail-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}
.equip-avail-badge.available   { background: #dcfce7; color: #14532d; }
.equip-avail-badge.unavailable { background: #fee2e2; color: #7f1d1d; }
.equip-progress { height: 5px; border-radius: 3px; background: #e5e7eb; margin: 10px 0 6px; }
.equip-progress .bar { height: 100%; border-radius: 3px; background: var(--primary); }
.equip-progress .bar.yellow { background: var(--warning); }
.equip-progress .bar.red    { background: var(--danger); }
.equip-count { font-size: 12px; color: #6b7280; display: flex; justify-content: space-between; }

/* Borrow request card — aligned meta rows */
.borrow-req-items {
  font-size: 12px;
  color: #374151;
  margin-top: 4px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
}
.borrow-req-items > div,
.borrow-req-meta > div {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.9;
}
.borrow-req-items > div > i { font-size: 10px; width: 14px; text-align: center; flex-shrink: 0; }
.borrow-req-meta {
  font-size: 12.5px;
  color: #374151;
  margin-top: 12px;
}
.borrow-req-meta > div > i { width: 14px; text-align: center; flex-shrink: 0; }
.borrow-req-meta > div > span { min-width: 0; overflow-wrap: anywhere; }
.br-card-name { color: #111827; }
.br-user-icon { background: #e0f2fe; color: #0369a1; }

/* ══════════════════════════════════════
   ANNOUNCEMENT CARDS (Figma style)
══════════════════════════════════════ */
.ann-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--card-radius);
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  gap: 14px;
  transition: box-shadow var(--transition);
}
.ann-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.ann-card.pinned { border-color: var(--primary); }
.ann-icon {
  width: 40px; height: 40px;
  background: var(--primary-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
  font-size: 16px;
}
.ann-body { flex: 1; min-width: 0; }
.ann-title { font-size: 15px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.ann-meta  { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.ann-content { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.6; }
.ann-date { font-size: 12px; color: #9ca3af; margin-top: 8px; }

/* ══════════════════════════════════════
   COMPLAINT/JOB/DOC LIST ITEMS
══════════════════════════════════════ */
.list-item-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--card-radius);
  padding: 12px 16px;
  margin-bottom: 0;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow var(--transition);
  position: relative;
}
.list-item-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.list-item-card.js-clickable { cursor: pointer; }
.list-item-card.js-clickable:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(40,108,191,.15); }

/* Light status tints — the card colour tells you the status at a glance */
.list-item-card.lc-pending,  .equip-card.lc-pending  { border-left: 4px solid #f59e0b; background: #fff; }
.list-item-card.lc-progress, .equip-card.lc-progress { border-left: 4px solid #3b82f6; background: #fff; }
.list-item-card.lc-ready,    .equip-card.lc-ready    { border-left: 4px solid #286cbf; background: #fff; }
.list-item-card.lc-success,  .equip-card.lc-success  { border-left: 4px solid #22c55e; background: #fff; }
.list-item-card.lc-overdue,  .equip-card.lc-overdue  { border-left: 4px solid #ef4444; background: #fff; }
.list-item-card.lc-duesoon,  .equip-card.lc-duesoon  { border-left: 4px solid #f97316; background: #fff; }
/* orange badge/progress utility (e.g. "Almost Due" in dashboard breakdowns) */
.bg-orange { background-color: #f97316 !important; color: #fff !important; }
.list-item-card.lc-muted,    .equip-card.lc-muted    { border-left: 4px solid #9ca3af; background: #fff; }
/* clickable box cards (borrow requests) behave like list cards */
.equip-card.js-clickable { cursor: pointer; }
.equip-card.js-clickable:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(40,108,191,.15); }
/* keep the blue hover accent from fighting the status tint's left border */
.list-item-card.js-clickable[class*="lc-"]:hover,
.equip-card.js-clickable[class*="lc-"]:hover { border-left-width: 4px; }
.list-item-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.list-item-icon.complaint { background: #ffedd5; color: var(--orange); }
.list-item-icon.doc       { background: var(--primary-light); color: var(--primary); }
.list-item-icon.job       { background: #dbeafe; color: #2563eb; }
.list-item-icon.borrow    { background: #eaf2fc; color: var(--purple); }
.list-item-body { flex: 1; min-width: 0; }
.list-item-title { font-size: 13.5px; font-weight: 700; color: #111827; margin: 0 0 1px; }
.list-item-sub   { font-size: 12px; color: #6b7280; margin: 0; }
.list-item-meta  { font-size: 11.5px; color: #9ca3af; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.list-item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.meta-text { color: #6b7280; }
.archive-retention-notice { background: #f8fafc; border: 1px solid #eef2f7; }

/* ══════════════════════════════════════
   STATUS TIMELINE (Complaints)
══════════════════════════════════════ */
.timeline { list-style: none; padding: 0; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 14px; top: 0; bottom: 0;
  width: 2px;
  background: #e5e7eb;
}
.timeline-item { display: flex; gap: 16px; padding-bottom: 20px; position: relative; }
.timeline-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  z-index: 1;
}
.timeline-body { flex: 1; }
.timeline-body h6 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.timeline-body p  { margin: 0; font-size: 12.5px; color: #6b7280; }
.timeline-body .time { font-size: 11px; color: #9ca3af; margin-top: 4px; }

/* ══════════════════════════════════════
   CHAT
══════════════════════════════════════ */
.chat-wrapper {
  display: flex;
  height: calc(100vh - 130px);
  min-height: 460px;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: var(--card-shadow);
  background: #fff;
}
.chat-list {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  background: #fff;
}
.chat-list-header {
  padding: 14px 16px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid #e5e7eb;
  color: #9ca3af;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 11px;
}
.chat-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-item:hover { background: #f9fafb; }
.chat-item.active { background: var(--primary-light); border-left: 3px solid var(--primary); }
.chat-item .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.chat-item .info .name    { font-size: 13px; font-weight: 600; color: #111827; }
.chat-item .info .preview { font-size: 12px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-header .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.chat-header-info .name { font-size: 14px; font-weight: 700; color: #111827; }
.chat-header-info .role { font-size: 12px; color: #6b7280; }

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f9fafb;
}
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 13px;
  gap: 8px;
}
.chat-empty i { font-size: 40px; color: #d1d5db; }
.msg-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.msg-bubble.incoming { background: #fff; color: #111827; align-self: flex-start; border-radius: 4px 14px 14px 14px; border: 1px solid #e5e7eb; }
.msg-bubble.outgoing { background: var(--primary); color: #fff; align-self: flex-end; border-radius: 14px 4px 14px 14px; }
.msg-time { font-size: 11px; color: #9ca3af; margin-top: 3px; }
.msg-group { display: flex; flex-direction: column; }
.msg-group.outgoing { align-items: flex-end; }

.chat-input-area {
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 10px;
  align-items: center;
  background: #fff;
}
.chat-input-area textarea {
  flex: 1;
  border-radius: 22px;
  resize: none;
  padding: 10px 16px;
  font-size: 13.5px;
  min-height: 42px;
  max-height: 100px;
  border: 1.5px solid #e5e7eb;
  color: #111827;
}
.chat-input-area textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(40,108,191,.1); }
.chat-send-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background var(--transition);
}
.chat-send-btn:hover { background: var(--primary-dark); }

/* ══════════════════════════════════════
   CAMERA / QR CAPTURE
══════════════════════════════════════ */
.camera-container {
  border: 2px dashed #d1d5db;
  border-radius: var(--card-radius);
  padding: 16px;
  text-align: center;
  background: #f9fafb;
}
.camera-container video {
  width: 100%;
  max-width: 420px;
  border-radius: 8px;
  background: #000;
}
.camera-container canvas { display: none; }
.captured-preview {
  width: 100%;
  max-width: 420px;
  border-radius: 8px;
  border: 2px solid var(--primary);
  margin: 10px auto;
  display: block;
}
.camera-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.qr-section {
  border: 2px dashed #d1d5db;
  border-radius: var(--card-radius);
  padding: 20px;
  text-align: center;
  background: #f9fafb;
}
.qr-section #qrcode img { margin: 12px auto; }
.qr-status { font-size: 13px; color: #6b7280; margin-top: 10px; }
.qr-status.uploaded { color: var(--primary); font-weight: 600; }

.upload-method-tabs .nav-link {
  color: #6b7280;
  border-radius: 8px;
  font-size: 13px;
}
.upload-method-tabs .nav-link.active { background: var(--primary); color: #fff; }

/* ══════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════ */
.login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  overflow: hidden;
  background: url('../img/barangay_hall.png') center/cover no-repeat;
  background-attachment: fixed;
}
.login-page::before {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 0;
}
.login-page.staff {
  background: url('../img/barangay_hall.png') center/cover no-repeat;
  background-attachment: fixed;
}
.login-page, .login-page * { font-family: 'Inter', system-ui, sans-serif; }
.login-wordmark, .login-form-side h2, .login-submit, .login-card h2 { font-family: 'Montserrat', system-ui, sans-serif; }
.login-page::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .login-shell { animation: none !important; }
}

/* ── Split sign-in: barangay panel on the left, form on the right ── */
.login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  animation: loginRise .4s ease both;
}
@keyframes loginRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Left: who this belongs to */
.login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 38px 36px;
  padding-bottom: 100px;
  color: #fff;
  background: #1a3e6e;
  overflow: hidden;
}
.login-page.staff .login-brand {
  background: #0e1f38;
}

.login-seal {
  width: 180px; height: 180px;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  object-fit: contain;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.login-wordmark { font-size: 28px; font-weight: 700; letter-spacing: -.2px; margin: 24px 0 4px; }
.login-place { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.7); }
.login-tagline {
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255,255,255,.85);
  margin: 20px 0 0;
  max-width: 24em;
}
.login-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.login-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.8); }
.login-points i {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
}
.login-brand-foot {
  margin-top: auto;
  padding-top: 28px;
  font-size: 11px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.5);
}

/* Right: the form */
.login-form-side { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.login-form-side h2 { font-size: 22px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.login-form-side .login-sub { font-size: 13px; color: #64748b; margin-bottom: 24px; }
.login-form-side .form-label { font-size: 12.5px; font-weight: 600; color: #475569; letter-spacing: .1px; margin-bottom: 5px; }
.login-field { position: relative; }
.login-field > i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: #94a3b8; pointer-events: none; transition: color var(--transition);
}
.login-field .form-control {
  padding: 11px 14px 11px 38px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.login-field .form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.login-field .form-control:focus ~ i { color: #3b82f6; }
.login-field .login-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: #94a3b8;
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.login-field .login-eye:hover { color: #3b82f6; background: #f0f4ff; }
.login-field .login-eye .eye-img { width: 24px; height: 24px; object-fit: contain; opacity: .5; }
.login-field .login-eye:hover .eye-img { opacity: .8; }
.login-submit {
  width: 100%;
  padding: 11px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: #1e5a9e;
  transition: background var(--transition);
}
.login-submit:hover  { background: #174a86; }
.login-submit:active { background: #13406f; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 14px; color: #9ca3af; font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.login-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px;
  font-size: 13.5px; font-weight: 600;
  color: #1e5a9e;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  transition: all var(--transition);
}
.login-cta:hover { background: #f0f4ff; border-color: #93b4e0; }
.login-staff-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 22px; padding: 10px 12px;
  font-size: 12px; line-height: 1.45; color: #64748b;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
}
.login-staff-note i { color: #9ca3af; margin-top: 1px; }
.login-form-side .login-back { margin-top: 16px; }
.login-alert {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.45;
  padding: 10px 12px; margin-bottom: 16px;
  color: #991b1b; background: #fef2f2;
  border: 1px solid #fecaca; border-left: 3px solid #dc2626;
  border-radius: 8px;
}

@media (max-width: 860px) {
  .login-page { padding: 0; align-items: stretch; }
  .login-shell { grid-template-columns: 1fr; max-width: 480px; border-radius: 12px; margin: 20px auto; }
  .login-brand { padding: 24px 24px 20px; text-align: center; align-items: center; }
  .login-seal { width: 56px; height: 56px; }
  .login-wordmark { font-size: 22px; margin-top: 10px; }
  .login-tagline { font-size: 13px; margin-top: 10px; }
  .login-points, .login-brand-foot { display: none; }
  .login-form-side { padding: 28px 24px 30px; }
  .login-close { opacity: .8; }
  .login-close img { filter: brightness(0) invert(1); }
}
@media (max-width: 420px) {
  .login-shell { border-radius: 10px; margin: 12px auto; }
  .login-form-side { padding: 24px 20px 28px; }
}

/* Centred single card — used by change-password.php */
.login-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 24px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.06);
}
.login-logo-icon {
  width: 52px; height: 52px;
  background: #1e5a9e;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.login-logo-icon i { color: #fff; font-size: 22px; }
.login-card h2 { font-size: 20px; font-weight: 700; color: #1e293b; margin: 0 0 4px; text-align: center; }
.login-card .login-sub { font-size: 13px; color: #6b7280; text-align: center; margin-bottom: 24px; }
.login-card .form-control { padding: 11px 14px; }
.login-card .btn-primary { width: 100%; padding: 11px; font-size: 14.5px; font-weight: 600; border-radius: 8px; }

.demo-access { margin-top: 20px; }
.demo-access-label { font-size: 11px; font-weight: 700; color: #9ca3af; letter-spacing: .8px; text-transform: uppercase; text-align: center; margin-bottom: 10px; }
.demo-btns { display: flex; gap: 8px; justify-content: center; }
.demo-btn {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid;
  background: none;
  transition: all var(--transition);
  text-decoration: none;
}
.demo-btn.resident { border-color: #dbeafe; color: #2563eb; background: #eff6ff; }
.demo-btn.resident:hover { background: #dbeafe; }
.demo-btn.clerk    { border-color: var(--primary-light); color: var(--primary); background: var(--primary-bg); }
.demo-btn.clerk:hover { background: var(--primary-light); }
.demo-btn.admin    { border-color: #eaf2fc; color: var(--purple); background: #f0f6fd; }
.demo-btn.admin:hover { background: #eaf2fc; }

.login-register-link { text-align: center; font-size: 13px; margin-top: 18px; }
.login-register-link a { font-weight: 700; color: var(--primary); }
.login-back { text-align: center; font-size: 12.5px; color: #6b7280; margin-top: 10px; }

/* ══════════════════════════════════════
   REGISTER PAGE
══════════════════════════════════════ */
.register-page {
  min-height: 100vh;
  background: url('../img/barangay_hall.png') center/cover no-repeat fixed;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
}
.reg-wrapper { width: 100%; max-width: 820px; }
.reg-card-shell {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  overflow: hidden;
}
.reg-brand {
  background: #1a3e6e;
  color: #fff;
  text-align: center;
  padding: 32px 24px 24px;
}
.reg-seal {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  margin-bottom: 12px;
}
.reg-brand-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.reg-brand-sub {
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
  opacity: .9;
}
.reg-brand-hint {
  font-size: 12px;
  margin-top: 4px;
  opacity: .65;
}
.reg-body { padding: 0 24px 24px; }
.reg-footer {
  text-align: center;
  padding: 16px 24px 22px;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  color: #6b7280;
}
.reg-footer a {
  color: #1a3e6e;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.reg-footer a:hover { text-decoration: underline; }
.login-close { position:absolute; top:12px; right:12px; text-decoration:none; z-index:10; opacity:.5; transition:opacity .2s; }
.login-close img { width:28px; height:28px; }
.login-close:hover { opacity:.8; }

/* Tab-style step indicator */
.step-tabs {
  display: flex;
  background: #fff;
  padding: 0;
}
.step-tab {
  flex: 1;
  text-align: center;
  padding: 16px 8px 0;
  cursor: default;
}
.step-tab-label {
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  display: block;
  padding-bottom: 10px;
}
.step-tab.active .step-tab-label { color: #1a3e6e; font-weight: 700; }
.step-tab.done .step-tab-label   { color: #6b7280; font-weight: 600; }
.step-tab-bar {
  height: 5px;
  border-radius: 4px;
  margin: 0 10% 0;
  background: #e5e7eb;
  border: 1px dashed #d1d5db;
  transition: all .25s;
}
.step-tab.active .step-tab-bar { background: #1a3e6e; border: none; }
.step-tab.done .step-tab-bar   { background: #94a3b8; border: none; }

.reg-body .card { border: none; box-shadow: none; }
.reg-body .card-header { background: none; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #1a3e6e; }
.reg-body .card-footer { padding-left: 0; padding-right: 0; }
.reg-btn-next { background: #1a3e6e !important; border-color: #1a3e6e !important; color: #fff !important; }
.reg-btn-next:hover, .reg-btn-next:focus { background: #153358 !important; border-color: #153358 !important; color: #fff !important; }
.register-page .btn-primary { background: #1a3e6e; border-color: #1a3e6e; color: #fff; }
.register-page .btn-primary:hover, .register-page .btn-primary:focus { background: #153358; border-color: #153358; color: #fff; }
.register-page .btn-success { background: #1a3e6e; border-color: #1a3e6e; color: #fff; }
.register-page .btn-success:hover { background: #153358; border-color: #153358; }
.register-page .btn-outline-primary { color: #1a3e6e; border-color: #1a3e6e; }
.register-page .btn-outline-primary:hover { background: #1a3e6e; border-color: #1a3e6e; color: #fff; }
.form-step { display: none; }
.form-step.active { display: block; }

/* ══════════════════════════════════════
   AUDIT LOG TAGS
══════════════════════════════════════ */
.audit-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.audit-tag.document    { background: #dbeafe; color: #1e40af; }
.audit-tag.user        { background: #eaf2fc; color: #1d4f8f; }
.audit-tag.complaint   { background: #ffedd5; color: #9a3412; }
.audit-tag.equipment   { background: #dcfce7; color: #14532d; }
.audit-tag.announcement{ background: #fef9c3; color: #713f12; }
.audit-tag.job         { background: #cffafe; color: #0e7490; }
.audit-tag.auth        { background: #f3f4f6; color: #374151; }

/* ══════════════════════════════════════
   MISC
══════════════════════════════════════ */
.avatar-initial {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
.avatar-sm { width: 32px; height: 32px; font-size: 13px; }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: #9ca3af;
}
.empty-state i { font-size: 48px; color: #d1d5db; margin-bottom: 12px; display: block; }
.empty-state p { margin: 0; font-size: 14px; }

.search-highlight { background: #fef9c3; border-radius: 3px; padding: 0 2px; }

/* Notification dropdown */
.notif-dropdown {
  width: 340px;
  border-radius: var(--card-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border: 1px solid #e5e7eb;
}
.notif-dropdown .dropdown-header {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
}
.notif-markall { font-size: 12px; color: var(--primary); white-space: nowrap; text-decoration: none; }
.notif-markall:hover { text-decoration: underline; }
/* Centered pop-up reminder (e.g. borrow approved) — compact & mobile-friendly */
.notif-pop-modal { border-radius: 14px !important; padding-top: 1.25rem !important; }
.notif-pop { text-align: center; padding: 0 0.35rem; }
.notif-pop-icon {
  width: 46px; height: 46px; margin: 0 auto 10px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: #fff;
  background: linear-gradient(135deg, var(--primary), #4f8fe0);
  box-shadow: 0 4px 12px rgba(40,108,191,.32);
  animation: notifPopIn .3s ease;
}
@keyframes notifPopIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Flash pop-up icon colours by type */
.notif-pop-icon.fp-success { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 4px 12px rgba(34,197,94,.32); }
.notif-pop-icon.fp-error   { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 12px rgba(239,68,68,.32); }
.notif-pop-icon.fp-warning { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 12px rgba(245,158,11,.32); }
.notif-pop-icon.fp-info    { background: linear-gradient(135deg, var(--primary), #4f8fe0); }
.notif-pop-title { font-size: 14.5px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.notif-pop-text  { font-size: 12px; color: #6b7280; line-height: 1.5; }
.notif-pop-modal .swal2-html-container { margin: 0.4rem 0.8rem 0 !important; }
.notif-pop-modal .swal2-actions { gap: 8px; margin-top: 1.1rem; flex-wrap: nowrap; }
.notif-pop-modal .swal2-actions .btn { flex: 1 1 auto; }
@media (max-width: 400px) {
  .notif-pop-icon { width: 42px; height: 42px; font-size: 17px; }
  .notif-pop-title { font-size: 13.5px; }
  .notif-pop-text { font-size: 11.5px; }
}

.notif-item {
  position: relative;
  padding: 11px 30px 11px 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  gap: 10px;
  font-size: 12.5px;
}
.notif-item:hover { background: #f9fafb; }
.notif-dropdown .notif-item:hover,
.notif-dropdown .notif-item.unread:hover { background: #dceafa; }
.notif-dropdown .notif-item:hover .notif-body .title { color: #143e73; }
.notif-item.unread { background: var(--primary-bg); }
.notif-item .notif-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.notif-item .notif-icon.doc    { background: var(--primary-light); color: var(--primary); }
.notif-item .notif-icon.comp   { background: #fee2e2; color: var(--danger); }
.notif-item .notif-icon.borrow { background: #ffedd5; color: var(--orange); }
.notif-item .notif-icon.reg    { background: var(--primary-light); color: var(--primary); }
.notif-item .notif-body { min-width: 0; }
.notif-item .notif-body .title { font-weight: 600; color: #111827; }
.notif-item .notif-body .msg   { color: #6b7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-item .notif-body .time  { color: #9ca3af; font-size: 11px; margin-top: 2px; }
.notif-item .notif-unread-dot {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--primary);
}
.notif-empty { text-align: center; padding: 26px 16px; color: #6b7280; }
.notif-empty i { font-size: 30px; color: #d1d5db; }

/* ANNOUNCEMENT category chips */
.cat-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.cat-General     { background: #f3f4f6; color: #374151; }
.cat-Health      { background: #fee2e2; color: #b91c1c; }
.cat-Emergency   { background: #fee2e2; color: var(--danger); }
.cat-Events      { background: #ffedd5; color: var(--orange); }
.cat-Infrastructure { background: #cffafe; color: var(--info); }
.cat-Programs    { background: #eaf2fc; color: var(--purple); }
.cat-Community   { background: var(--primary-light); color: var(--primary); }
.cat-Governance  { background: #dbeafe; color: #1e40af; }

/* Pinned indicator */
.pinned-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Progress bars */
.progress { height: 6px; border-radius: 3px; background: #e5e7eb; }
.progress-bar { border-radius: 3px; background: var(--primary); }
.progress-bar.orange { background: var(--warning); }
.progress-bar.red    { background: var(--danger); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 992px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0; min-height: auto; }
  /* Show the overlay only while the sidebar is open (JS removes .d-none) */
  .sidebar-overlay:not(.d-none) { display: block; }
  .topbar-toggle { display: flex; }
  .login-card { padding: 32px 24px; }
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 199;
}

@media (max-width: 576px) {
  .page-content { padding: 10px; }
  .chat-list { width: 100%; max-height: 30vh; border-right: none; border-bottom: 1px solid #e5e7eb; }
  .chat-wrapper { flex-direction: column; }
  .chat-main { min-height: 0; }
  .demo-btns { flex-direction: column; }

  /* Topbar: tighter spacing, drop the location subtitle */
  :root { --topbar-height: 56px; }
  .topbar { padding: 0 12px; }
  .topbar-barangay .brgy-loc { display: none; }
  .topbar-barangay .brgy-name { font-size: 13px; }
  .topbar-seal { width: 26px; height: 26px; }

  /* Notification dropdown: full-width on mobile, compact height */
  .notif-dropdown {
    width: calc(100vw - 16px) !important;
    position: fixed !important;
    top: var(--topbar-height) !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
  }
  .notif-dropdown #notifList { max-height: 210px !important; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 767.98px) {
  /* Headings and cards breathe on small screens */
  .page-header h1 { font-size: 19px; }
  .page-header { margin-bottom: 16px; }
  .card-body { padding: 14px; }
  .filter-panel { padding: 10px 12px; }

  /* Tables: slightly smaller text so fewer columns clip */
  .table { font-size: 12.5px; }

  /* Cards and modals breathe / fit on phones */
  .equip-card { padding: 14px; }
  .modal-lg, .modal-xl { --bs-modal-width: 100%; }
  .pill-tabs { width: 100%; }
  /* Filter rows never force the page to scroll sideways */
  .filter-chips { gap: 5px; }
}
/* Multi-item borrow rows: let the equipment select shrink instead of overflowing */
.borrow-item { flex-wrap: nowrap; }
.borrow-item .js-eq { min-width: 0; }

/* ══════════════════════════════════════
   PRINT
══════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .btn, .filter-panel, .pagination, .action-btns { display: none !important; }
  .main-wrapper { margin-left: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ══════════════════════════════════════
   BOOTSTRAP OVERRIDES
══════════════════════════════════════ */
.bg-primary { background-color: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
.page-link { color: var(--primary); }
.page-item.active .page-link { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.nav-pills .nav-link.active { background-color: var(--primary); }

/* ══════════════════════════════════════
   MESSAGES — assistant, suggestions, handoff
   Used by resident/messages.php and clerk/messages.php.
══════════════════════════════════════ */
body.page-messages .page-content { overflow: hidden; }
.chat-shell {
  height: calc(100vh - 165px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e3ebf6;
}

/* ── Header ───────────────────────────────────────────── */
.chat-topbar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--primary) 0%, #1e5aa3 100%);
  color: #fff;
  flex-shrink: 0;
}
.chat-topbar-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.chat-topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: .92;
  margin-top: 2px;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
  flex-shrink: 0;
}
.status-dot.is-waiting { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .25); }
.bot-avatar-lg {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  border: 1.5px solid rgba(255, 255, 255, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Message thread ───────────────────────────────────── */
.chat-messages {
  background: #f6f9fd;
  gap: 2px;
  padding: 18px 18px 8px;
}

/* One message = optional avatar + a column holding name, bubble, time. */
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.msg-row.outgoing { flex-direction: row-reverse; }
.msg-col { display: flex; flex-direction: column; max-width: min(78%, 560px); }
.msg-row.outgoing .msg-col { align-items: flex-end; }

.msg-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-bottom: 18px;
}
.msg-av.is-staff { background: #0f766e; }

.msg-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 4px 3px;
}
.msg-auto-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary);
  background: #e4edfa;
  border-radius: 4px;
  padding: 2px 6px;
}

.msg-bubble {
  max-width: 100%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 13.8px;
  line-height: 1.62;
  word-break: break-word;
}
.msg-bubble.incoming {
  background: #fff;
  color: #1f2937;
  border: 1px solid #e3ebf6;
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(16, 42, 78, .05);
}
.msg-bubble.outgoing {
  background: var(--primary);
  color: #fff;
  border: none;
  border-bottom-right-radius: 5px;
  box-shadow: 0 1px 3px rgba(40, 108, 191, .28);
}
/* The assistant reads as a distinct voice, not just another staff member. */
.msg-bubble.bot {
  background: #fff;
  border: 1px solid #d8e5f7;
  border-left: 3px solid var(--primary);
}
.msg-time {
  font-size: 10.5px;
  color: #a3b0c2;
  margin: 4px 3px 0;
}

/* ── First-time welcome ───────────────────────────────── */
.chat-welcome {
  text-align: center;
  padding: 14px 16px 4px;
  max-width: 500px;
  margin: 0 auto;
}
.chat-welcome-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #4a90e2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 10px;
  box-shadow: 0 6px 18px rgba(40, 108, 191, .28);
}
.chat-welcome h2 {
  font-size: 16.5px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}
.chat-welcome p {
  font-size: 13.5px;
  line-height: 1.6;
  color: #6b7280;
  margin: 0 0 4px;
}

/* ── Quick replies (inside the conversation) ──────────── */
.chat-quick {
  margin: 14px 0 4px 38px;
}
.chat-quick-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.8px;
  font-weight: 600;
  color: #8794a6;
  margin-bottom: 7px;
}
.faq-toggle {
  margin-left: auto;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #d1d5db; background: #fff; color: #6b7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; cursor: pointer;
  transition: background .15s ease;
}
.faq-toggle:hover { background: #f3f4f6; }
/* Wrapping, not a hidden side-scroller — every option stays visible. */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-chip {
  border: 1px solid #cbdcf2;
  background: #fff;
  color: var(--primary);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11.8px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 42, 78, .04);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.chat-chip:hover {
  background: #eef4fc;
  border-color: var(--primary);
  transform: translateY(-1px);
}
.chat-chip:active { transform: translateY(0); }


/* ── Handed over to staff ─────────────────────────────── */
.chat-staff-note {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border-top: 1px solid #fde9c8;
  background: #fffbf2;
  flex-shrink: 0;
}
.chat-staff-note-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fef0d6;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.chat-staff-note-title { font-size: 13px; font-weight: 700; color: #92400e; }
.chat-staff-note-sub   { font-size: 11.8px; color: #a16207; margin-top: 1px; }

/* ── Typing dots ──────────────────────────────────────── */
.typing-bubble { display: flex; gap: 4px; align-items: center; padding: 14px 16px; }
.typing-bubble span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #b6c6dc;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── Composer ─────────────────────────────────────────── */
.chat-input-wrap {
  padding: 10px 18px 12px;
  border-top: 1px solid #e9eff7;
  background: #fff;
  flex-shrink: 0;
}
.chat-input-wrap textarea {
  border: 1px solid #dbe4f0;
  background: #f8fafc;
}
.chat-input-wrap textarea:focus {
  border-color: var(--primary);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 108, 191, .1);
}
.chat-send-btn:disabled { opacity: .45; cursor: default; }

/* Staff status is shown only while a person is handling the conversation. */
#chatStaffStatus[hidden] { display: none !important; }

/* ── Small screens ────────────────────────────────────── */
@media (max-width: 575.98px) {
  .msg-col { max-width: 86%; }
  .chat-messages { padding: 14px 12px 6px; }
  .chat-input-wrap, .chat-staff-note { padding-left: 12px; padding-right: 12px; }
  .chat-quick { margin-left: 0; }
  .chat-chip { font-size: 12.2px; padding: 6px 12px; }
}

/* ══════════════════════════════════════
   FLOATING RESIDENT ACTIONS + EMERGENCY ALERT
══════════════════════════════════════ */
.float-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.float-btn {
  position: relative;
  width: 50px; height: 50px;
  border: none;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.float-btn:hover { transform: translateY(-2px); color: #fff; }
.float-chat { background: var(--primary); box-shadow: 0 4px 14px rgba(40, 108, 191, .42); }
.float-chat:hover { background: var(--primary-dark); }

/* Red, slightly larger, and quietly pulsing — it has to be findable in a hurry. */
.float-sos { background: #dc2626; box-shadow: 0 4px 16px rgba(220, 38, 38, .5); }
.float-sos:hover { background: #b91c1c; }
.float-sos::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(220, 38, 38, .55);
  animation: sosPulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes sosPulse {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Name appears on hover so the icons are never a guess. */
.float-label {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #111827;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.float-btn:hover .float-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ── Alert dialog ─────────────────────────────────────── */
.sos-modal { border: none; border-radius: 14px; overflow: hidden; }
.sos-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: #fff;
}
.sos-head-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.sos-head-title { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.sos-head-sub   { font-size: 11.5px; opacity: .9; }

.sos-warn {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.2px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.sos-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}

/* Type picker: radios drawn as tiles. */
.sos-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.sos-type-input { position: absolute; opacity: 0; pointer-events: none; }
.sos-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 66px;
  padding: 9px 6px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.sos-type i { font-size: 17px; color: #9ca3af; transition: color var(--transition); }
.sos-type span { font-size: 10.8px; font-weight: 600; color: #4b5563; line-height: 1.25; }
.sos-type:hover { border-color: #fca5a5; background: #fef2f2; }
.sos-type-input:checked + .sos-type {
  border-color: #dc2626;
  background: #fef2f2;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}
.sos-type-input:checked + .sos-type i,
.sos-type-input:checked + .sos-type span { color: #b91c1c; }
.sos-type-input:focus-visible + .sos-type { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Staff-side alert cards ───────────────────────────── */
.alert-card {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #9ca3af;
  border-radius: 11px;
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.alert-card.is-active    { border-left-color: #dc2626; background: #fffbfb; }
.alert-card.is-responding{ border-left-color: #f59e0b; }
.alert-card.is-resolved  { border-left-color: #16a34a; opacity: .78; }
.alert-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
}
.alert-meta { font-size: 12px; color: #6b7280; margin-top: 3px; }
.alert-details {
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  border-radius: 8px;
  padding: 8px 11px;
  margin-top: 9px;
  line-height: 1.55;
}

@media (max-width: 575.98px) {
  .float-stack { right: 14px; bottom: 14px; gap: 10px; }
  .float-btn { width: 46px; height: 46px; font-size: 17px; }
  .sos-types { grid-template-columns: repeat(2, 1fr); }
}

/* Keep the resident composer's send button clear of the floating emergency
   button, which sits in the same bottom-right corner. (.chat-input-wrap is the
   resident chat only — the clerk page uses .chat-input-area and has no FAB.) */
.chat-input-wrap { padding-right: 80px; }
@media (max-width: 575.98px) {
  .chat-input-wrap { padding-right: 68px; }
}

/* ── Emergency hotlines (shown when the office is closed) ── */
.sos-closed-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4f8f;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 12.4px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.hotline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  background: #fff;
  text-decoration: none;
  margin-bottom: 9px;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.hotline:hover {
  border-color: #dc2626;
  background: #fef2f2;
  transform: translateY(-1px);
}
.hotline-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.hotline-text { flex: 1; min-width: 0; }
.hotline-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
  line-height: 1.35;
}
.hotline-number {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  letter-spacing: .01em;
  line-height: 1.25;
}
.hotline-go { font-size: 12px; color: #9ca3af; flex-shrink: 0; }
.sos-closed-foot {
  font-size: 11.8px;
  color: #6b7280;
  line-height: 1.55;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #f0f0f0;
}

/* Label in front of the resident category choices */
.filter-group-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* Residents: category toggles with visible selected states. */
.resident-category-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.resident-category-options { display: flex; flex-wrap: wrap; gap: 6px; }
.resident-category-option { position: relative; margin: 0; cursor: pointer; }
.resident-category-all { text-decoration: none; }
.resident-category-help { margin: 8px 0 0; color: #64748b; font-size: 11.5px; }
.resident-category-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.resident-category-option span { display: block; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #475569; font-size: 12.5px; line-height: 1.25; transition: background .15s, border-color .15s, color .15s; }
.resident-category-option:hover span { border-color: #7da9d9; background: #edf5fe; color: #174a87; }
.resident-category-option input:checked + span,
.resident-category-all.active span { border-color: #286cbf; background: #286cbf; color: #fff; }
.resident-category-option input:focus-visible + span { outline: 2px solid #286cbf; outline-offset: 2px; }
[data-theme="dark"] .resident-category-option span { border-color: #3a4a5c; background: #19222c; color: #cbd5e1; }
[data-theme="dark"] .resident-category-option:hover span { border-color: #78aee8; background: #263a50; color: #fff; }
[data-theme="dark"] .resident-category-option input:checked + span,
[data-theme="dark"] .resident-category-all.active span { border-color: #78aee8; background: #285d9e; color: #fff; }
[data-theme="dark"] .resident-category-help { color: #a8b3c2; }
[data-theme="dark"] .resident-category-option input:focus-visible + span { outline-color: #93c5fd; }
@media (max-width: 575.98px) {
  .resident-category-row > .ms-auto { width: 100%; justify-content: flex-end; }
}

/* "Updating…" hint while the filtered list reloads */
.filter-busy { font-size: 12px; color: #6b7280; white-space: nowrap; }

/* Collapsible "how to set up" notes in System Settings — visible when needed,
   out of the way the rest of the time. */
.setup-guide > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  list-style: none;
}
.setup-guide > summary::-webkit-details-marker { display: none; }
.setup-guide > summary::before { content: '\f054'; font: 900 9px "Font Awesome 6 Free"; margin-right: 6px; }
.setup-guide[open] > summary::before { content: '\f078'; }
.setup-guide { font-size: 12.5px; }

/* Sub-sections inside a settings card (Restore under Save, Send Test under Save Settings) */
.settings-sub-title {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
}
.settings-sub {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e9eff7;
}

/* System Settings: one card, three tabs, one area at a time */
.settings-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 10px;
  margin: 0;
  list-style: none;
  overflow-x: auto;
}
.settings-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.settings-tab:hover { color: var(--primary); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.settings-tab > i { font-size: 13px; }
.settings-card { padding: 24px; }
.settings-section + .settings-section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}
/* The divider is there to separate two visible sections. When the one above is
   switched off (Notifications shows one channel at a time), there is nothing to
   separate it from. */
.settings-section[hidden] { display: none; }
.settings-section[hidden] + .settings-section {
  margin-top: 0; padding-top: 0; border-top: 0;
}
.settings-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--primary, #2563eb);
  margin-bottom: 14px;
}
.settings-section-head > i { font-size: 14px; }

/* Vertical rule between two settings columns — only when they sit side by side */
@media (min-width: 768px) {
  .settings-col-divider { border-left: 1px solid #e9eff7; }
}

/* Activity History: fixed-height, scrolls on its own so it stays compact */
.audit-scroll {
  max-height: 260px;
  overflow-y: auto;
  border-top: 1px solid #e5e7eb;
}
.audit-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
}

/* Activity History: stable columns and a shared left edge for each label. */
#activityHistory .audit-scroll { overflow: auto; }
#activityHistory .audit-scroll { scrollbar-width: auto; scrollbar-color: #94a3b8 #f1f5f9; scrollbar-gutter: stable; }
#activityHistory .audit-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
#activityHistory .audit-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
#activityHistory .audit-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border: 2px solid #f1f5f9; border-radius: 6px; }
#activityHistory .audit-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
#activityHistory .audit-scroll::-webkit-scrollbar-corner { background: #f1f5f9; }
#activityHistory .audit-table { table-layout: fixed; min-width: 860px; }
#activityHistory .audit-table th,
#activityHistory .audit-table td { text-align: left; padding: 12px 18px; vertical-align: middle; }
#activityHistory .audit-table th { background: #f1f5f9; color: #64748b; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
#activityHistory .audit-table td { font-size: 12.5px; line-height: 1.5; color: #334155; overflow-wrap: anywhere; }
#activityHistory .audit-table .audit-user { font-weight: 600; color: #1f2937; }
#activityHistory .audit-table .audit-user-name { font-weight: 400; font-size: 11.5px; color: #64748b; margin-top: 1px; }
#activityHistory .audit-table .audit-time,
#activityHistory .audit-table .audit-ip { font-size: 11.5px; color: #64748b; font-variant-numeric: tabular-nums; }
#activityHistory .audit-ip { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
#activityHistory .audit-module { display: inline-block; padding: 3px 8px; border-radius: 5px; background: #eef2f6; color: #475569; font-size: 11px; font-weight: 500; }
[data-theme="dark"] #activityHistory .audit-scroll { border-color: #2d3a4a; }
[data-theme="dark"] #activityHistory .audit-scroll { scrollbar-width: auto; scrollbar-color: #718096 #19222c; scrollbar-gutter: stable; }
[data-theme="dark"] #activityHistory .audit-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] #activityHistory .audit-scroll::-webkit-scrollbar-track { background: #19222c; }
[data-theme="dark"] #activityHistory .audit-scroll::-webkit-scrollbar-thumb { background: #718096; border: 2px solid #19222c; border-radius: 6px; }
[data-theme="dark"] #activityHistory .audit-scroll::-webkit-scrollbar-thumb:hover { background: #a8b3c2; }
[data-theme="dark"] #activityHistory .audit-scroll::-webkit-scrollbar-corner { background: #19222c; }
[data-theme="dark"] #activityHistory .audit-table th { background: #1e2a38; color: #bdc0c5; }
[data-theme="dark"] #activityHistory .audit-table td { color: #e2e8f0; }
[data-theme="dark"] #activityHistory .audit-table .audit-user { color: #f1f5f9; }
[data-theme="dark"] #activityHistory .audit-table .audit-time,
[data-theme="dark"] #activityHistory .audit-table .audit-ip { color: #a8b3c2; }
[data-theme="dark"] #activityHistory .audit-module { background: #2d3a4a; color: #cbd5e1; }

/* Emergency alerts on the Messages page — same idea as the audit log card,
   a little shorter so the conversations stay in view */
.alert-scroll {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid #e5e7eb;
}
.alert-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
}
.alert-scroll .alert-row-active > td { background: #fff5f5; }

/* Borrow request cards: every text line is exactly one line tall, so all cards
   in the grid come out the same size regardless of items or purpose length */
.br-card-line {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
.borrow-req-meta > div > span.br-card-line { flex: 1; }

/* Announcement posting schedule (admin form + card line) */
.ann-schedule-box { background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; }
.ann-schedule-box .form-label { font-size:12.5px; margin-bottom:4px; color:#475569; }
.ann-schedule-title { font-size:13px; font-weight:600; color:#1f2937; margin-bottom:8px; }
.ann-schedule-hint { font-size:12px; color:#64748b; margin-top:8px; min-height:18px; }
.ann-schedule { font-size:12px; color:#475569; margin-bottom:4px; }
.ann-schedule-scheduled { color:#0e7490; }
.ann-schedule-ended, .ann-schedule-archived { color:#9ca3af; }
.ann-schedule-box .input-group .ann-time { max-width: 125px; }

.ann-details-box { background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; }
.ann-details-toggle { display:flex; align-items:center; font-size:13px; font-weight:600; color:#1f2937; text-decoration:none; cursor:pointer; }
.ann-details-toggle:hover { color:var(--primary); }
.ann-details-toggle[aria-expanded="true"] .ann-details-arrow { transform:rotate(180deg); }
.ann-details-arrow { transition:transform .2s; font-size:11px; }
.ann-details-box .form-label { font-size:12.5px; margin-bottom:4px; color:#475569; }
.ann-details-box .input-group .ann-time { max-width:125px; }

/* Emergency pop-up: the icon pulses so it cannot be missed */
.notif-pop-urgent { animation: notifUrgentPulse 1.2s ease-in-out infinite; }
@keyframes notifUrgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  50%      { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
}

/* ══════════════════════════════════════
   JOB FINDER — one post per row
══════════════════════════════════════ */
.jrow-list { display:flex; flex-direction:column; gap:10px; }
.jrow {
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid #e8ecf1; border-radius:12px;
  padding:12px 16px; min-height:88px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.jrow:hover { border-color:#cdddf3; box-shadow:0 4px 14px rgba(40,108,191,.08); }
.jrow-icon {
  width:44px; height:44px; flex-shrink:0; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.jrow-icon.blue  { background:#eaf2fd; color:#286cbf; }
.jrow-icon.green { background:#e7f6ec; color:#15803d; }
.jrow-main { flex:1; min-width:0; cursor:pointer; outline:none; }
.jrow-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#1f2937; line-height:1.3; min-width:0; }
.jrow-main:hover .jrow-title > span:first-child { color:var(--primary); }
.jrow-meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:#6b7280; margin-top:3px; }
.jrow-meta i { font-size:11px; color:#9ca3af; margin-right:5px; }
.jrow-note-inline { font-style:italic; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jrow-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.jrow-tag { font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:6px; background:#f1f3f5; color:#495057; white-space:nowrap; }
.jrow-tag.salary { background:#e7f6ec; color:#15803d; }
.jrow-chip { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.jrow-chip i { font-size:10px; }
.jrow-chip.warn  { background:#fef3c7; color:#92400e; }
.jrow-chip.ok    { background:#dcfce7; color:#166534; }
.jrow-chip.bad   { background:#fee2e2; color:#991b1b; }
.jrow-chip.muted { background:#f1f3f5; color:#6b7280; }
.jrow-chip.mine  { background:#eff6ff; color:#1d4f8f; }
.jrow-side { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.jrow-btn { min-width:118px; }
.jrow-sent { font-size:12.5px; font-weight:600; color:#15803d; background:#e7f6ec; padding:6px 12px; border-radius:8px; white-space:nowrap; }
.jrow-note { font-size:11.5px; color:#9ca3af; white-space:nowrap; }
.jrow-more { color:#9ca3af; border:0; padding:4px 8px; }
.jrow-more:hover { color:#374151; background:#f1f3f5; }
.jrow-privacy { font-size:11.5px; color:#9ca3af; align-self:center; }
@media (max-width: 768px) {
  .jrow { flex-wrap:wrap; align-items:flex-start; }
  .jrow-main { flex-basis:calc(100% - 58px); }
  .jrow-side { width:100%; justify-content:flex-end; padding-top:8px; border-top:1px solid #f0f2f5; }
  .jrow-note { white-space:normal; }
  .jrow-privacy { width:100%; margin-left:0 !important; }
}

/* Job Finder rows — bigger and easier to read, with a short overview */
.jrow { padding:18px 22px; min-height:128px; gap:18px; border-radius:14px; }
.jrow-icon { width:54px; height:54px; font-size:21px; border-radius:12px; align-self:flex-start; }
.jrow-title { font-size:18px; }
.jrow-chip { font-size:12px; padding:3px 10px; }
.jrow-meta { font-size:14px; margin-top:5px; gap:4px 18px; }
.jrow-meta i { font-size:12.5px; }
.jrow-overview {
  font-size:14px; color:#4b5563; line-height:1.55; margin:8px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.jrow-sched { font-size:13.5px; color:#374151; margin-top:6px; }
.jrow-sched i { color:#9ca3af; margin-right:6px; }
.jrow-tags { gap:8px; margin-top:10px; }
.jrow-tag { font-size:13px; padding:4px 11px; border-radius:7px; }
.jrow-side { align-self:center; }
.jrow-btn { min-width:130px; font-size:14px; padding:8px 14px; }
.jrow-sent { font-size:14px; padding:8px 14px; }
.jrow-note { font-size:12.5px; }
.jrow-privacy { font-size:12.5px; }
.jrow-list { gap:14px; }
@media (max-width: 768px) {
  .jrow { padding:14px 16px; }
  .jrow-icon { width:46px; height:46px; font-size:18px; }
  .jrow-title { font-size:16.5px; }
  .jrow-main { flex-basis:calc(100% - 64px); }
}
/* Room under the last row so the floating Emergency / Messages buttons never cover its button */
.jrow-list { padding-bottom:96px; }

/* Job Finder rows — identical size for every post.
   Each line has a fixed height; long text is cut with "…" and shown in full
   in the details pop-up. */
.jrow { height:196px; min-height:0; overflow:hidden; align-items:center; }
.jrow-main { display:flex; flex-direction:column; height:100%; justify-content:center; }
.jrow-title  { height:24px; flex-shrink:0; white-space:nowrap; }
.jrow-title > span:first-child { min-width:0; }
.jrow-meta   { height:21px; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; flex-shrink:0; }
.jrow-meta > span { overflow:hidden; text-overflow:ellipsis; }
.jrow-overview { height:calc(14px * 1.55 * 2); flex-shrink:0; }
.jrow-overview.empty, .jrow-sched.empty { color:#b0b7c1; font-style:italic; }
.jrow-sched  { height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.jrow-tags   { height:27px; flex-wrap:nowrap; overflow:hidden; flex-shrink:0; }
/* Resident Job Finder: content-sized rows and grouped work details. */
body.page-jobs.role-resident .jrow { height: auto; min-height: 0; align-items: flex-start; padding: 18px 20px; }
body.page-jobs.role-resident .jrow-main { height: auto; justify-content: flex-start; }
body.page-jobs.role-resident .jrow-side { align-self: flex-start; }
body.page-jobs.role-resident .jrow-title { height: auto; min-height: 24px; }
body.page-jobs.role-resident .jrow-meta { height: auto; flex-wrap: wrap; white-space: normal; }
body.page-jobs.role-resident .jrow-overview { height: auto; margin: 8px 0 10px; }
body.page-jobs.role-resident .jrow-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 12px; color: #64748b; }
body.page-jobs.role-resident .jrow-facts > span { overflow-wrap: anywhere; }
body.page-jobs.role-resident .jrow-facts i { color: #94a3b8; margin-right: 6px; }
body.page-jobs.role-resident .jrow-sched { height: auto; font-size: 12px; margin: 0; white-space: normal; overflow: visible; }
body.page-jobs.role-resident .jrow-tags { height: auto; flex-wrap: wrap; overflow: visible; margin-top: 9px; gap: 6px; }
body.page-jobs.role-resident .jrow-tag { font-size: 11.5px; padding: 3px 8px; }
body.page-jobs.role-resident .jrow-list { gap: 12px; }
[data-theme="dark"] body.page-jobs.role-resident .jrow-facts { color: #a8b3c2; }
@media (max-width: 768px) {
  body.page-jobs.role-resident .jrow { padding: 14px 16px; }
  body.page-jobs.role-resident .jrow-side { align-self: auto; }
}
@media (max-width: 768px) {
  /* On phones the button sits under the details, so let the row grow — but
     the details part still keeps the same fixed lines. */
  .jrow { height:auto; }
  .jrow-main { height:auto; }
}

/* ══════════════════════════════════════
   USER MANAGEMENT — same look as the Residents list
══════════════════════════════════════ */
.um-tab-count { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; flex-shrink:0; min-width:16px; height:16px; line-height:1; font-size:10px; font-weight:700; padding:0 4px; margin-left:4px; border-radius:20px; background:rgba(0,0,0,.07); }
.nav-pills .nav-link.active .um-tab-count { background:rgba(255,255,255,.25); }
.um-mini-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.um-mini-avatar.admin { background:#dbeafe; color:#1d4f8f; }
.um-mini-avatar.clerk { background:#e0f2fe; color:#0369a1; }
.badge.um-badge-admin { background:#dbeafe; color:#1d4f8f; }
.badge.um-badge-clerk { background:#e0f2fe; color:#0369a1; }
tr.um-off > td { background:#fafafa; }
tr.um-off .um-mini-avatar, tr.um-off .fw-semibold { opacity:.6; }
/* User Management card (top of System Settings): tabs + search row */
.um-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 20px; border-bottom:1px solid #f0f2f5; }
.um-toolbar .nav-link { padding:5px 12px; font-size:13px; }
:root:not([data-theme="dark"]) #users .um-toolbar .nav-link { background: transparent; color: #5b6472; border: 1px solid transparent; border-radius: 7px; font-weight: 500; }
:root:not([data-theme="dark"]) #users .um-toolbar .nav-link:hover { background: #f1f5f9; color: #334155; }
:root:not([data-theme="dark"]) #users .um-toolbar .nav-link.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: none; font-weight: 600; }
:root:not([data-theme="dark"]) #users .um-toolbar .um-tab-count { background: #e9edf2; color: #596575; font-weight: 600; }
:root:not([data-theme="dark"]) #users .um-toolbar .nav-link.active .um-tab-count { background: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 768px) { .um-toolbar form { margin-left:0 !important; width:100%; } .um-toolbar form input { width:100% !important; } }
/* Barangay Office (staff) sign-in: darker badge so it is clearly not the resident page */
.login-logo-icon.staff { background:linear-gradient(135deg,#1e293b,#334155); }

/* ══════════════════════════════════════
   ANNOUNCEMENTS — easy-to-read news feed (resident, clerk and admin)
══════════════════════════════════════ */
/* One colour per category */
.annx-General        { --ac:#475569; --ac-bg:#f1f5f9; }
.annx-Health         { --ac:#dc2626; --ac-bg:#fee2e2; }
.annx-Infrastructure { --ac:#d97706; --ac-bg:#fef3c7; }
.annx-Programs       { --ac:#286cbf; --ac-bg:#eaf2fc; }
.annx-Emergency      { --ac:#b91c1c; --ac-bg:#fee2e2; }
.annx-Events         { --ac:#0d9488; --ac-bg:#ccfbf1; }
.annx-cat-General        { --ac:#475569; --ac-bg:#f1f5f9; }
.annx-cat-Health         { --ac:#dc2626; --ac-bg:#fee2e2; }
.annx-cat-Infrastructure { --ac:#d97706; --ac-bg:#fef3c7; }
.annx-cat-Programs       { --ac:#286cbf; --ac-bg:#eaf2fc; }
.annx-cat-Emergency      { --ac:#b91c1c; --ac-bg:#fee2e2; }
.annx-cat-Events         { --ac:#0d9488; --ac-bg:#ccfbf1; }

/* Search + category bar */
.annx-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:#fff; border:1px solid #e8ecf1; border-radius:14px; padding:12px 16px; margin-bottom:20px; }
.annx-search { display:flex; align-items:center; gap:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:8px 12px; flex:0 1 340px; }
.annx-search i { color:#94a3b8; }
.annx-search input { border:0; outline:0; background:transparent; font-size:15px; width:100%; color:#1f2937; }
.annx-clear { color:#94a3b8; }
.annx-cats { display:flex; flex-wrap:wrap; gap:6px; }
.annx-cats .filter-chip { font-size:13px; }
.annx-count { font-size:13px; color:#6b7280; }

.annx-section { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#64748b; margin:0 0 10px; }
.annx-list { display:flex; flex-direction:column; gap:14px; }

/* One announcement */
.annx { --ac:#475569; --ac-bg:#f1f5f9; display:flex; background:#fff; border:1px solid #e8ecf1; border-left:5px solid var(--ac); border-radius:14px; transition:box-shadow .15s ease, transform .15s ease; }
.annx:hover { box-shadow:0 8px 22px rgba(15,23,42,.08); }
.annx.is-pinned { background:#fffcf2; border-color:#fde68a; border-left-color:var(--ac); }
.annx.is-hidden-now { background:#fafafa; }
.annx.is-hidden-now .annx-main, .annx.is-hidden-now .annx-thumb { opacity:.7; }
.annx-main { flex:1; min-width:0; padding:18px 22px; cursor:pointer; outline:none; }
.annx-main:focus-visible { box-shadow:inset 0 0 0 2px var(--primary); }
.annx-top { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.annx-cat { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--ac); background:var(--ac-bg); padding:4px 11px; border-radius:20px; }
.annx-flag { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; }
.annx-flag.pinned    { background:#fef3c7; color:#92400e; }
.annx-flag.new       { background:#dcfce7; color:#166534; }
.annx-flag.showing   { background:#dcfce7; color:#166534; }
.annx-flag.scheduled { background:#cffafe; color:#155e75; }
.annx-flag.ended, .annx-flag.archived { background:#e5e7eb; color:#4b5563; }
.annx-when { margin-left:auto; font-size:13px; color:#6b7280; white-space:nowrap; }
.annx-title { font-size:19px; font-weight:700; color:#111827; line-height:1.35; margin:12px 0 6px; }
.annx-main:hover .annx-title { color:var(--primary); }
.annx-text {
  font-size:15px; line-height:1.7; color:#374151; margin:0; white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.annx-foot { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:14px; font-size:13px; color:#6b7280; }
.annx-foot i { margin-right:6px; color:#9ca3af; }
.annx-more { margin-left:auto; font-weight:600; color:var(--primary); }
.annx-more i { color:inherit; margin:0 0 0 6px; transition:transform .15s ease; }
.annx-main:hover .annx-more i { transform:translateX(3px); }
.annx-thumb { width:220px; flex-shrink:0; cursor:pointer; background:#f1f5f9; }
.annx-thumb img { width:100%; height:100%; min-height:150px; max-height:230px; object-fit:cover; display:block; }
.annx-actions { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:16px; border-left:1px solid #f0f2f5; width:130px; flex-shrink:0; }
.annx-actions form { margin:0; }
.annx-empty { text-align:center; background:#fff; border:2px dashed #e2e8f0; border-radius:14px; padding:40px 20px; color:#6b7280; font-size:14px; }
.annx-empty i { font-size:32px; color:#cbd5e1; margin-bottom:10px; display:block; }

/* Reading view */
.annr { border-radius:16px; overflow:hidden; }
.annr-head { padding:22px 28px 18px; border-bottom:1px solid #eef1f5; }
.annr-title { font-size:26px; font-weight:800; color:#111827; line-height:1.3; margin:14px 0 10px; }
.annr-meta { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14px; color:#6b7280; }
.annr-meta i { margin-right:6px; color:#9ca3af; }
.annr-body { padding:24px 28px; }
.annr-figure { margin:0 0 22px; }
.annr-figure img { width:100%; max-height:460px; object-fit:contain; background:#f8fafc; border-radius:12px; border:1px solid #eef1f5; cursor:zoom-in; }
.annr-figure figcaption { font-size:12.5px; color:#9ca3af; margin-top:6px; }
.annr-text { font-size:16.5px; line-height:1.85; color:#1f2937; white-space:pre-wrap; word-wrap:break-word; max-width:70ch; }
.annr-event-info { background:#f0f7ff; border:1px solid #d4e4f7; border-radius:12px; padding:14px 18px; margin-bottom:20px; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.annr-info-row { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#1f2937; line-height:1.4; }
.annr-info-row i { color:var(--primary); margin-top:3px; width:16px; text-align:center; flex-shrink:0; }
.annr-info-row strong { font-size:11.5px; color:#286cbf; text-transform:uppercase; letter-spacing:.5px; }

@media (max-width: 768px) {
  .annx { flex-direction:column; }
  .annx-thumb { width:100%; order:-1; }
  .annx-thumb img { max-height:190px; min-height:0; }
  .annx-main { padding:16px 18px; }
  .annx-title { font-size:17.5px; }
  .annx-more { margin-left:0; }
  .annx-actions { width:100%; flex-direction:row; border-left:0; border-top:1px solid #f0f2f5; padding:12px 16px; }
  .annx-actions > * { flex:1; }
  .annr-head, .annr-body { padding-left:20px; padding-right:20px; }
  .annr-title { font-size:21px; }
  .annr-text { font-size:16px; }
  .annr-event-info { grid-template-columns:1fr; }
}

/* Announcement picture, Facebook-style: full width under the caption, the
   whole image shown (scaled to fit, never cropped). Very tall pictures are
   capped and centred on a soft background instead of being cut. */
.annx-photo { margin:14px -22px 0; background:#f1f5f9; border-top:1px solid #eef1f5; border-bottom:1px solid #eef1f5; display:flex; justify-content:center; position:relative; }
.annx-photo-count { position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:3px 10px;border-radius:6px;pointer-events:none; }
.annx-photo img { display:block; width:100%; height:auto; max-height:620px; object-fit:contain; }
.annx-photo + .annx-foot { margin-top:12px; }
.annx .annx-thumb { display:none; }   /* old side thumbnail — no longer used */
@media (max-width: 768px) {
  .annx-photo { margin:12px -18px 0; }
  .annx-photo img { max-height:480px; }
}

/* Announcements read as a centred column (like a Facebook feed), so text lines
   stay comfortable and pictures fit neatly instead of stretching edge to edge. */
.annx-toolbar, .annx-section, .annx-list, .annx-empty { max-width:760px; margin-left:auto; margin-right:auto; }
.annx-toolbar-manage, .annx-list-manage, .annx-empty-manage { max-width:900px; }   /* admin: room for Edit / Delete */
.annx-toolbar .annx-search { flex:1 1 260px; }
.annx-photo img { max-height:520px; }
@media (max-width: 768px) { .annx-photo img { max-height:420px; } }

/* Announcements toolbar: search fills the whole width, the category buttons
   below share the full width evenly, so the bar lines up with the posts. */
.annx-toolbar { flex-direction:column; align-items:stretch; gap:12px; padding:14px 16px; }
.annx-toolbar .annx-search { flex:1 1 auto; width:100%; padding:10px 14px; }
.annx-toolbar .annx-search input { font-size:15.5px; }
.annx-cats { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.annx-cats .filter-chip { flex:1 1 0; justify-content:center; text-align:center; white-space:nowrap; padding-left:10px; padding-right:10px; }
/* Admin: the two dropdowns share the width, the count sits at the end */
.annx-toolbar-manage form { flex-wrap:nowrap !important; }
.annx-toolbar-manage select.form-select { flex:1 1 0; width:auto !important; }
.annx-toolbar-manage .annx-count { flex-shrink:0; margin-left:4px !important; }
@media (max-width: 768px) {
  .annx-cats .filter-chip { flex:1 1 calc(33.333% - 8px); }
  .annx-toolbar-manage form { flex-wrap:wrap !important; }
  .annx-toolbar-manage select.form-select { flex:1 1 calc(50% - 8px); }
}

/* Final layout: search + filters span the full page width; the posts stay in
   the centred reading column underneath. */
.annx-toolbar, .annx-toolbar-manage { max-width:none; width:100%; margin-left:0; margin-right:0; }
.annx-list, .annx-section, .annx-empty { margin-left:auto !important; margin-right:auto !important; }
.annx-cats .filter-chip { flex:1 1 0; }

/* ── Announcements search card: same width as the posts, directly above them,
      and it stays just under the top bar while scrolling. ── */
.annx-side { display:block; }
.annx-toolbar,
.annx-toolbar-manage {
  max-width:760px !important; width:auto; margin:0 auto 18px !important;
  position:sticky; top:calc(var(--topbar-height) + 10px); z-index:20;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
}
.annx-toolbar-manage { max-width:900px !important; }
/* Categories on one tidy line, each at its natural size (scrolls sideways on small screens) */
.annx-cats { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:8px; }
.annx-cats::-webkit-scrollbar { display:none; }
.annx-cats .filter-chip { flex:0 0 auto !important; padding-left:14px; padding-right:14px; }
@media (max-width: 768px) {
  .annx-toolbar, .annx-toolbar-manage { top:calc(var(--topbar-height) + 6px); }
  .annx-cats .filter-chip { flex:0 0 auto !important; }
}

/* ══════════════════════════════════════
   ANNOUNCEMENTS (resident) — posts in the middle, search + categories in a
   panel on the right that stays in view; on phones the panel sits on top.
══════════════════════════════════════ */
.annx-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:24px; align-items:start; max-width:1100px; margin:0 auto; }
.annx-side { grid-column:2; grid-row:1; position:sticky; top:calc(var(--topbar-height) + 10px); }
.annx-feed { grid-column:1; grid-row:1; min-width:0; }
/* Line the panel up with the first announcement card, not the "Pinned" label above it */
.annx-section { height:20px; line-height:20px; margin:0 0 10px; }
.annx-layout.has-heading .annx-side { margin-top:30px; }
.annx-side .annx-toolbar { position:static; max-width:none !important; margin:0 !important; }
.annx-side-title { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; margin:4px 2px 0; }
.annx-side .annx-cats { flex-direction:column; flex-wrap:nowrap; overflow:visible; gap:2px; }
.annx-side .annx-cats .filter-chip { text-align:left; border:0; background:transparent; border-radius:8px; padding:9px 12px; font-size:14px; color:#374151; }
.annx-side .annx-cats .filter-chip:hover { background:#f1f5f9; color:#111827; }
.annx-side .annx-cats .filter-chip.active { background:var(--primary-light); color:var(--primary); font-weight:700; }
.annx-side .annx-cats .filter-chip i { width:20px; }
.annx-feed .annx-list, .annx-feed .annx-section, .annx-feed .annx-empty { max-width:none; }
@media (max-width: 992px) {
  .annx-layout { grid-template-columns:1fr; }
  .annx-side { grid-column:1; grid-row:1; position:static; }
  .annx-layout.has-heading .annx-side { margin-top:0; }
  .annx-feed { grid-row:2; }
  .annx-side-title { display:none; }
  .annx-side .annx-cats { flex-direction:row; overflow-x:auto; }
  .annx-side .annx-cats .filter-chip { border:1px solid #e5e7eb; }
}

/* ══════════════════════════════════════
   ADMIN ANNOUNCEMENTS — shared pieces
══════════════════════════════════════ */
.annx { position:relative; }
.annx-menu { position:absolute; top:12px; right:12px; z-index:2; }
.annx-menu-btn { width:34px; height:34px; border-radius:50%; border:0; color:#6b7280; background:transparent; display:flex; align-items:center; justify-content:center; }
.annx-menu-btn:hover, .annx-menu-btn[aria-expanded="true"] { background:#f1f5f9; color:#111827; }
.adm-ann .annx .annx-top { padding-right:40px; }
.adm-sec-count { font-size:11.5px; background:#e5e7eb; color:#4b5563; border-radius:20px; padding:1px 8px; margin-left:4px; }

/* ══════════════════════════════════════
   ADMIN ANNOUNCEMENTS — posts in the middle, New Announcement + filters in a
   panel on the right that stays in view; on phones the panel sits on top.
══════════════════════════════════════ */
.adm-ann { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:start; max-width:1100px; margin:0 auto; }
.adm-feed { grid-column:1; grid-row:1; min-width:0; }
.adm-feed .annx-list, .adm-feed .annx-section, .adm-feed .annx-empty { max-width:none; }
.adm-panel { grid-column:2; grid-row:1; position:sticky; top:calc(var(--topbar-height) + 10px); background:#fff; border:1px solid #e8ecf1; border-radius:14px; padding:14px; }
/* Level with the first card: the section heading above it is 20px tall + 10px gap */
.adm-ann.has-heading .adm-panel { margin-top:30px; }
.adm-panel-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#94a3b8; margin:16px 4px 6px; }
.adm-panel-link { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px; font-size:14px; color:#374151; text-decoration:none; }
.adm-panel-link span { font-size:12px; color:#6b7280; }
.adm-panel-link:hover { background:#f1f5f9; color:#111827; }
.adm-panel-link.active { background:var(--primary-light); color:var(--primary); font-weight:700; }
.adm-panel-link.active span { color:var(--primary); }
@media (max-width: 992px) {
  .adm-ann { grid-template-columns:1fr; }
  .adm-panel { grid-column:1; grid-row:1; position:static; }
  .adm-ann.has-heading .adm-panel { margin-top:0; }
  .adm-feed { grid-row:2; }
}

/* "Notices" — the everyday catch-all announcement category (office hours, closures, reminders) */
.annx-Notices, .annx-cat-Notices { --ac:#2563eb; --ac-bg:#dbeafe; }
.cat-Notices { background:#dbeafe; color:#1d4ed8; }

/* ── Registration: "Use your phone to take the photo" panel ── */
.phone-capture { background:#f8fafc; border:1px solid #dbe4f0; border-radius:14px; padding:16px 18px; margin-bottom:12px; text-align:left; }
.pc-head { font-size:15.5px; font-weight:700; color:#1e3a8a; }
.pc-head i { margin-right:8px; color:#286cbf; }
.pc-intro { font-size:13.5px; color:#475569; margin:6px 0 14px; }
.pc-row { display:flex; gap:18px; align-items:flex-start; }
.pc-qr { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:10px; flex-shrink:0; }
.pc-qr .qr-code-box { width:168px; height:168px; display:flex; align-items:center; justify-content:center; }
.pc-qr .qr-code-box img, .pc-qr .qr-code-box canvas { width:168px !important; height:168px !important; }
.pc-steps { margin:0; padding-left:20px; font-size:14px; color:#334155; }
.pc-steps li { margin-bottom:8px; line-height:1.45; }
.pc-steps span { font-size:12.5px; color:#64748b; }
.pc-linkrow { list-style:none; margin-left:-20px; display:flex; align-items:center; gap:6px; }
.pc-link { font-size:12px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:6px 8px; word-break:break-all; color:#1e40af; }
.pc-status { margin-top:12px; font-size:14px; font-weight:600; color:#1e40af; background:#eff6ff; border-radius:10px; padding:10px 12px; }
.pc-status.ok { color:#166534; background:#dcfce7; }
.pc-status.warn { color:#92400e; background:#fef3c7; }
.pc-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.pc-use-phone { margin-top:6px; }
@media (max-width: 576px) {
  .pc-row { flex-direction:column; align-items:center; }
}
/* Registration: "allow the camera" note and the reason the phone option is showing */
.cam-ask { display:flex; align-items:flex-start; gap:6px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; border-radius:12px; padding:12px 14px; font-size:13.5px; margin-bottom:12px; text-align:left; }
.cam-ask i { margin-top:3px; color:#286cbf; }
.pc-reason { background:#fef3c7; color:#92400e; border-radius:10px; padding:9px 12px; font-size:13.5px; font-weight:600; margin:10px 0 4px; }
/* Registration camera cards: "Allow the camera?" and "Try on another device" */
.cam-card { text-align:center; background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:24px 20px 18px; margin-bottom:12px; }
.cam-card .cc-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 12px; }
.cam-card .cc-icon.ask { background:#dbeafe; color:#1d4ed8; }
.cam-card .cc-icon.no  { background:#fee2e2; color:#dc2626; }
.cam-card .cc-title { font-size:18px; font-weight:800; color:#111827; }
.cam-card .cc-text { font-size:14.5px; color:#475569; margin:6px auto 16px; max-width:420px; line-height:1.55; }
.cam-card .cc-main { width:100%; max-width:320px; padding:12px; font-weight:700; font-size:15.5px; border-radius:12px; }
.cam-card .btn-link { display:block; margin:8px auto 0; font-weight:600; }
.cam-card .cc-foot { font-size:12.5px; color:#94a3b8; margin-top:10px; }
.cam-ask { align-items:center; }
/* "The camera is blocked": simple steps to turn it back on */
.cam-card .cc-steps { text-align:left; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px; margin:16px auto 0; max-width:440px; }
.cam-card .cc-steps-title { font-size:14px; font-weight:700; color:#1e3a8a; margin-bottom:10px; }
.cam-card .cc-step { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#334155; margin-bottom:10px; line-height:1.5; }
.cam-card .cc-num { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:#286cbf; color:#fff; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.cam-card .cc-key { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; background:#fff; border:1px solid #cbd5e1; font-size:11px; color:#475569; vertical-align:middle; }
.cam-card .cc-recheck { margin-left:34px; }
/* "No camera? Use your phone instead" — under the live camera, big and easy to see */
.camera-container .pc-use-phone {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; max-width:380px; margin:16px auto 4px; padding:12px 18px;
  font-size:16px; font-weight:700; color:#1d4ed8; text-decoration:none;
  background:#eff6ff; border:2px dashed #93c5fd; border-radius:12px;
}
.camera-container .pc-use-phone i { font-size:19px; margin:0 !important; }
.camera-container .pc-use-phone:hover { background:#dbeafe; border-color:#286cbf; color:#1e40af; }
.camera-container .pc-use-phone[hidden] { display:none; }
/* Small picture guides in the "camera is blocked" steps */
.cam-card .cc-pic { display:block; width:100%; max-width:250px; height:auto; margin:8px 0 2px; }
.cam-card .cc-small { font-size:12.5px; color:#64748b; }

/* ══════════════════════════════════════
   ANNOUNCEMENTS — send to residents (broadcast)
══════════════════════════════════════ */
/* "Sent 132 of 140 via app · email" under an announcement card */
.annx-sent {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.45; color: #166534;
  background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 10px;
}
.annx-sent.busy { color: #1e40af; background: #eff6ff; border-color: #dbeafe; }
.annx-sent > i { margin-top: 2px; }
.annx-sent i + i, .annx-sent span i { margin-right: 4px; }
.annx-sent-when { color: #94a3b8; margin-left: 6px; }

.bc-ann { background: #f8fafc; border: 1px solid #e8edf3; border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.bc-ann-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #94a3b8; }
.bc-ann-title { font-size: 15.5px; font-weight: 700; color: #0f172a; margin-top: 2px; }

.bc-section-title { font-size: 12.5px; font-weight: 700; color: #334155; letter-spacing: .2px; margin-bottom: 8px; }
.bc-channels { display: grid; gap: 10px; }
.bc-channel {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 12px;
  cursor: pointer; transition: all var(--transition); background: #fff;
}
.bc-channel:hover { border-color: var(--primary-light); background: #f8fbff; }
.bc-channel:has(input:checked) { border-color: var(--primary); background: #f5f9ff; box-shadow: 0 0 0 3px rgba(40,108,191,.10); }
.bc-channel.disabled { opacity: .62; cursor: not-allowed; background: #f8fafc; }
.bc-channel input { margin-top: 3px; flex: none; }
.bc-channel-icon {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-bg); color: var(--primary); font-size: 15px;
}
.bc-channel.disabled .bc-channel-icon { background: #f1f5f9; color: #94a3b8; }
.bc-channel-body { display: flex; flex-direction: column; gap: 2px; }
.bc-channel-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.bc-channel-note { font-size: 12.5px; color: #64748b; }
.bc-count { font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-bg); border-radius: 20px; padding: 2px 9px; margin-left: 6px; }
.bc-count.none { color: #92400e; background: #fef3c7; }
.bc-setup-link { font-size: 12.5px; color: #64748b; margin-top: 10px; }

.bc-sms-meta { display: flex; justify-content: space-between; font-size: 12px; color: #64748b; margin-top: 5px; }
.bc-warning {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: #92400e;
  background: #fffbeb; border: 1px solid #fde68a;
}
.bc-total {
  margin-top: 16px; padding: 11px 14px; border-radius: 11px;
  font-size: 13.5px; color: #1e40af; background: #eff6ff; border: 1px solid #dbeafe;
}
.bc-progress-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: #334155; margin-bottom: 8px; }
.bc-bar { height: 12px; border-radius: 20px; }
.bc-chan-results { margin-top: 16px; display: grid; gap: 6px; }
.bc-chan-row { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 12px; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 9px; }
.bc-failures { margin-top: 16px; font-size: 12.5px; }
.bc-failures ul { margin: 0; padding-left: 20px; color: #64748b; }
.bc-failures li { margin-bottom: 3px; }
.bc-done-note { margin-top: 16px; padding: 11px 14px; border-radius: 11px; font-size: 13.5px; background: #f0fdf4; border: 1px solid #dcfce7; color: #166534; }

/* ══════════════════════════════════════
   CLERK DASHBOARD — stat cards that open their queue, and the
   "emergencies are in Messages" strip
══════════════════════════════════════ */
.stat-card-link { text-decoration: none; color: inherit; }
.stat-card-link:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.10); color: inherit; }
.stat-card-link:hover .fa-chevron-right { color: var(--primary) !important; }
.stat-sub.text-warning-dark { color: #c2680c; }

.dash-alert {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--card-radius);
  background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626;
  color: #991b1b; text-decoration: none;
  font-size: 13.5px; line-height: 1.4;
  transition: background var(--transition), transform var(--transition);
}
.dash-alert:hover { background: #fee2e2; color: #991b1b; transform: translateY(-1px); }
.dash-alert-icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #dc2626; color: #fff; font-size: 16px;
}
.dash-alert strong { font-size: 14.5px; }
.dash-alert span span { font-size: 12.5px; opacity: .85; }

/* Summary overlay opened from a clerk dashboard card */
.dc-head { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 12px; }
.dc-big { font-size: 34px; font-weight: 800; color: var(--primary); line-height: 1; flex: none; min-width: 52px; text-align: center; }
.dc-section { font-size: 13px; font-weight: 700; color: #334155; margin: 20px 0 10px; }
.dc-list { border: 1px solid #e8edf3; border-radius: 12px; overflow: hidden; }
.dc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; font-size: 13px; color: #1f2937; text-decoration: none;
  border-bottom: 1px solid #f1f5f9; transition: background var(--transition);
}
.dc-row:last-child { border-bottom: 0; }
.dc-row:hover { background: #f5f9ff; color: #1f2937; }
.dc-row.warn { background: #fff7ed; }
.dc-row.warn:hover { background: #ffedd5; }
.dc-row-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-row-side { font-size: 11.5px; color: #94a3b8; flex: none; }
.dc-row i { font-size: 11px; color: #cbd5e1; flex: none; }
.dc-empty { padding: 14px; text-align: center; font-size: 13px; color: #64748b; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 12px; }
/* the stat card is a <button> now — strip the browser's own button look */
button.stat-card { width: 100%; text-align: left; font: inherit; cursor: pointer; }

/* ── Dashboard detail modal (admin) ── */
.dm-card { border-radius: 16px; overflow: hidden; border: none; }
.dm-close { position: absolute; top: 14px; right: 14px; z-index: 2; filter: brightness(0) opacity(.4); }
.dm-close:hover { filter: brightness(0) opacity(.7); }
.dm-banner { padding: 28px 24px 22px; text-align: center; background: #b9d2f4; }
.dm-icon-wrap {
  width: 54px; height: 54px; border-radius: 14px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.dm-icon-wrap img { width: 32px; height: 32px; object-fit: contain; }
.dm-icon-wrap i { font-size: 22px; color: var(--primary); }
.dm-total { font-size: 38px; font-weight: 800; color: #111827; line-height: 1.1; }
.dm-title { font-size: 14px; font-weight: 600; color: #374151; margin-top: 2px; }
.dm-range { font-size: 12px; color: #6b7280; margin-top: 4px; }
.dm-body { padding: 16px 24px 8px; }
.dm-row-bar { margin-bottom: 14px; }
.dm-row-bar:last-of-type { margin-bottom: 8px; }
.dm-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.dm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dm-status { flex: 1; font-size: 13.5px; color: #374151; font-weight: 600; }
.dm-count { font-size: 14px; font-weight: 700; color: #111827; }
.dm-of { font-size: 12px; font-weight: 400; color: #9ca3af; }
.dm-bar { height: 8px; background: #f1f5f9; border-radius: 8px; overflow: hidden; }
.dm-bar-fill { height: 100%; border-radius: 8px; transition: width .4s ease; min-width: 2px; }
.dm-bar-pct { font-size: 11.5px; color: #9ca3af; margin-top: 2px; text-align: right; }
.dm-foot { padding: 12px 24px 16px; text-align: center; }
.dm-foot .btn { padding: 8px 28px; border-radius: 8px; font-size: 13px; font-weight: 600; }

/* ══════════════════════════════════════
   DOCUMENT REQUESTS — pickup notice (Email / SMS) choice and status
══════════════════════════════════════ */
.pn-box { margin-top: 14px; padding: 12px 14px; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 12px; }
.pn-title { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 10px; }
.pn-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; margin-bottom: 7px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
  font-size: 13px; cursor: pointer; transition: all var(--transition);
}
.pn-opt:last-child { margin-bottom: 0; }
.pn-opt:hover { border-color: var(--primary-light); }
.pn-opt:has(input:checked) { border-color: var(--primary); background: #f5f9ff; }
.pn-opt.always { cursor: default; border-color: #dcfce7; background: #f0fdf4; }
.pn-opt.always > i { color: #16a34a; margin-top: 2px; }
.pn-opt.off { opacity: .62; cursor: not-allowed; background: #f8fafc; }
.pn-opt input { margin-top: 2px; flex: none; }
.pn-opt > span { display: flex; flex-direction: column; gap: 1px; }
.pn-dest { font-size: 11.5px; color: #64748b; }
/* the line on a request card */
.pn-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 10px; border-radius: 20px;
  font-size: 11.5px; color: #1e40af; background: #eff6ff; border: 1px solid #dbeafe;
}
.pn-note.done { color: #166534; background: #f0fdf4; border-color: #dcfce7; }
.pn-note.warn { color: #92400e; background: #fffbeb; border-color: #fde68a; }

/* Registration — 6-digit code box, checked automatically (no Verify button) */
.otp-box { position: relative; max-width: 260px; }
.otp-box .form-control {
  padding-right: 42px; font-size: 18px; font-weight: 700; letter-spacing: 6px; text-align: center;
}
.otp-box .form-control::placeholder { font-size: 13.5px; font-weight: 400; letter-spacing: 0; }
.otp-box .form-control.is-valid, .otp-box .form-control.is-invalid { background-image: none; padding-right: 42px; }
.otp-state { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 17px; pointer-events: none; }
.otp-state.busy { color: var(--primary); }
.otp-state.ok   { color: #16a34a; }
.otp-state.bad  { color: #dc2626; }
.otp-box .form-control.is-invalid { animation: otpShake .35s; }
@keyframes otpShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .otp-box .form-control.is-invalid { animation: none; } }

.pf-current { font-size: 13px; color: #64748b; background: #f8fafc; border: 1px solid #e8edf3; border-radius: 10px; padding: 9px 12px; }
/* Pencil beside the fields a resident may edit on My Profile */
.pf-field { min-width: 0; }                 /* the pencil follows the text, even when it wraps */
.pf-field-value { overflow-wrap: anywhere; }
.pf-pencil { vertical-align: middle; margin-left: 6px; width: 26px; height: 26px; border: 1px solid #dbeafe; border-radius: 7px; background: #f5f9ff;
             color: var(--primary); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
             transition: all var(--transition); }
.pf-pencil:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
/* System Settings — "send a test" under email and SMS */
.test-send { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #e2e8f0; }
.test-send .form-label { font-size: 13px; font-weight: 600; }


/* ══════════════════════════════════════════════════════════════════
   DESIGN REFRESH (Sep 2026) — calmer, civic look
   Loaded last on purpose so it overrides the older rules above.
   The aim is an office tool, not a showcase: one typeface built for
   government sites (Public Sans), a neutral paper-grey background
   instead of blue-tinted everything, borders instead of floating
   shadows, flat banners, smaller corner radii, and colour used only
   where it carries meaning (status, attention, the one primary action).
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bg:           #f3f4f6;
  --ink:          #1b2330;
  --ink-2:        #4a5568;
  --ink-3:        #7a8596;
  --line:         #e2e5ea;
  --line-soft:    #eef0f3;
  --card-radius:  16px;
  --card-shadow:  0 1px 2px rgba(16, 24, 40, .04);
  --transition:   .15s ease;
  --primary:      #245fa8;          /* the brand blue, one step deeper so text on it reads well */
  --primary-dark: #1c4c88;
  --primary-light:#e6eef8;
  --primary-bg:   #f0f5fb;
}
body {
  font-family: 'Inter', 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;          /* numbers line up in tables and counts */
}
h1, h2, h3, h4, h5, h6, .h5, .h6 { color: var(--ink); letter-spacing: -.01em; }

/* ── Page header: plain title, a muted icon, no shouting ── */
.page-header h1 { font-size: 32px; font-weight: 800; letter-spacing: -.015em; }
.page-header h1 > i, .page-header h1 .text-primary { color: var(--ink-3) !important; font-size: .85em; }
.page-header .page-subtitle, .page-header p { color: var(--ink-3); font-size: 14px; }

/* ── Sidebar ── */
.sidebar { border-right: 1px solid var(--line); }
.sidebar-logo { padding: 22px 18px 18px; gap: 6px; flex-direction: column; align-items: center; text-align: center; border-bottom: 1px solid var(--line-soft); }
.sidebar-seal { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
                background: #fff; border: 2px solid var(--line); padding: 2px; }
.sidebar-logo .brand-name, .sidebar-logo-text .brand-name { font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.25; color: #fff; }
.sidebar-logo .brand-place, .sidebar-logo-text .brand-place { display: block; font-size: 12.5px; color: rgba(255,255,255,.75); line-height: 1.3; margin-top: 0; }
.sidebar-role-badge { border-radius: 4px; font-size: 11px; padding: 2px 8px; margin-top: 4px; font-weight: 600; }
.role-resident, .role-clerk { background: var(--primary-light); color: var(--primary-dark); }
.role-admin { background: #eaf2fc; color: #1d4f8f; }

.sidebar-nav { padding: 10px 0 8px; }
.sidebar-nav .nav-link { margin: 2px 10px; padding: 9px 14px; border-radius: 8px; font-size: 14.5px;
                         color: var(--ink-2); font-weight: 500; position: relative; }
.sidebar-nav .nav-link i { color: #98a2b3; font-size: 17px; width: 22px; }
.sidebar-nav .nav-link:hover { background: #f2f4f7; color: var(--ink); }
.sidebar-nav .nav-link:hover i { color: var(--ink-2); }
/* Active: a quiet tint and a bar on the left, not a solid blue pill */
.sidebar-nav .nav-link.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.sidebar-nav .nav-link.active::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px;
                                        width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.sidebar-nav .nav-link.active i { color: var(--primary); }
.sidebar-nav .nav-link .badge { background: #d97706; border-radius: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
.sidebar-nav .nav-link.active .badge { background: #d97706; color: #fff; }
.sidebar-nav .nav-link .badge-overdue, .sidebar-nav .nav-link.active .badge-overdue { background: #c62828; }

.sidebar-footer { border-top: 1px solid var(--line-soft); padding: 10px 10px 14px; }
.sidebar-footer .nav-link { border-radius: 6px; color: var(--ink-2); padding: 8px 12px; }

/* ── Top bar: today's date and whether the office is open ── */
.topbar { border-bottom: 1px solid var(--line); box-shadow: none; }
.topbar-today { min-width: 0; text-align: right; }
.topbar-today .today-date { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.topbar-today .today-office { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.topbar-today .today-office .dot { width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; flex-shrink: 0; }
.topbar-today .today-office.open .dot { background: #2e9d5b; box-shadow: 0 0 0 3px rgba(46,157,91,.15); }
.topbar-mobile-brand { display: none; }
.topbar-seal { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); }
@media (max-width: 991.98px) {
  .topbar-today { display: none; }
  .topbar-page-title { flex: 1; min-width: 0; }
  .topbar-page-title h1 { font-size: 18px; font-weight: 700; }
  .topbar-page-title .page-subtitle { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-mobile-brand { display: none; }
}
@media (max-width: 768px) {
  .topbar-page-title h1 { font-size: 16px; }
  .topbar-page-title .page-subtitle { display: none; }
}
.notif-btn:hover { background: #f2f4f7; color: var(--ink); }

/* ── Cards: a border does the work; shadows stay out of the way ── */
.card, .stat-card, .equip-card, .list-item-card, .filter-panel {
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}
.card-header { padding: 13px 18px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line-soft); }
.card-header i { color: var(--ink-3); }
.card-body { padding: 18px; }

/* Stat cards: the number leads; hover is a border change, not a jump */
.stat-card { padding: 18px; gap: 14px; }
.stat-card:hover, .stat-card-link:hover { transform: none; box-shadow: var(--card-shadow); border-color: #c5ccd6; }
.stat-icon { width: 42px; height: 42px; border-radius: 8px; font-size: 17px; }
.stat-icon.blue, .stat-icon.green { background: #e8eef7; color: #2d5c9a; }
.stat-icon.orange { background: #fbeee2; color: #b45a12; }
.stat-icon.red    { background: #f8e6e6; color: #b3312f; }
.stat-icon.teal   { background: #e3f1f1; color: #1f7470; }
.stat-icon.purple { background: #eaf2fc; color: #286cbf; }
.stat-icon.yellow { background: #f8f1dc; color: #8a6511; }
.stat-body .stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.stat-body .stat-label { font-size: 12.5px; color: var(--ink-2); }
.stat-body .stat-sub   { color: var(--ink-3); }

/* Dashboard banners: flat, one colour, no gradient */
.welcome-banner { border-radius: var(--card-radius); padding: 22px 26px; }
.welcome-banner.green, .welcome-banner.blue, .welcome-banner.purple { background: #1e3f6d; }
.welcome-banner h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.welcome-banner p, .welcome-banner .wb-sub { opacity: .85; }

/* ── Buttons: smaller corners, no glow ── */
.btn { border-radius: 6px; font-weight: 500; }
.btn-sm { border-radius: 5px; }
.btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: none; }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-primary { color: var(--primary); border-color: #b9cbe3; }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.fw-bold.btn { font-weight: 600 !important; }

/* ── Status badges: small rectangles, not candy pills ── */
.badge { border-radius: 4px; font-weight: 600; letter-spacing: .01em; padding: .35em .6em; }
.badge.rounded-pill { border-radius: 999px; }

/* ── Filter chips ── */
.filter-chip { border-radius: 6px; border-color: var(--line); color: var(--ink-2); font-weight: 500; }
.filter-chip:hover { background: #f2f4f7; color: var(--ink); }
.filter-chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Forms ── */
.form-control, .form-select { border-color: #d3d8df; border-radius: 6px; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(36,95,168,.12); }
.form-label { color: var(--ink-2); }

/* ── Tables ── */
.table th { background: #f7f8fa; color: var(--ink-3); font-weight: 600; letter-spacing: .04em; }
.table td { border-color: var(--line-soft); }

/* ── Borrow request cards: one fixed size, whatever the request holds ── */
.borrow-req-card { height: 236px !important; overflow: hidden; }
.borrow-req-card .borrow-req-meta > div { min-height: 22px; }
.borrow-req-card .border-top { border-color: var(--line-soft) !important; }

/* ══════════════════════════════════════
   NOTIFICATIONS — slim cards in the corner instead of a blocking pop-up
══════════════════════════════════════ */
.nt-stack {
  position: fixed; top: 76px; right: 20px; z-index: 1090;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.nt {
  pointer-events: auto; position: relative; overflow: hidden;
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .06);
  padding: 12px 12px 12px 14px;
  animation: ntIn .22s ease-out both;
}
.nt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--nt-accent, var(--primary)); }
.nt.leaving { animation: ntOut .18s ease-in forwards; }
@keyframes ntIn  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ntOut { to { opacity: 0; transform: translateX(16px); } }
.nt-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center;
           font-size: 14px; color: var(--nt-accent, var(--primary)); background: var(--nt-tint, var(--primary-light)); }
.nt-body { flex: 1; min-width: 0; }
.nt-head { display: flex; align-items: baseline; gap: 8px; }
.nt-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; flex: 1; min-width: 0; }
.nt-time { font-size: 11px; color: var(--ink-3); flex-shrink: 0; }
.nt-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px;
           display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt-actions { display: flex; gap: 6px; margin-top: 9px; }
.nt-actions .btn { font-size: 12px; padding: 3px 10px; }
.nt-close { background: none; border: 0; color: #98a2b3; width: 24px; height: 24px; border-radius: 5px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; font-size: 13px; margin: -2px -2px 0 0; }
.nt-close:hover { background: #f2f4f7; color: var(--ink); }
.nt-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--nt-accent, var(--primary));
            opacity: .35; transform-origin: left; animation: ntTimer linear forwards; }
.nt:hover .nt-timer { animation-play-state: paused; }
@keyframes ntTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* kinds */
.nt.k-success   { --nt-accent: #2e9d5b; --nt-tint: #e5f4eb; }
.nt.k-error     { --nt-accent: #c62828; --nt-tint: #fbe9e9; }
.nt.k-warning   { --nt-accent: #b76e00; --nt-tint: #fbf0de; }
.nt.k-document  { --nt-accent: #245fa8; --nt-tint: #e6eef8; }
.nt.k-complaint { --nt-accent: #b3312f; --nt-tint: #f8e6e6; }
.nt.k-borrow    { --nt-accent: #1f7470; --nt-tint: #e3f1f1; }
.nt.k-job       { --nt-accent: #286cbf; --nt-tint: #eaf2fc; }
.nt.k-announcement { --nt-accent: #8a6511; --nt-tint: #f8f1dc; }
/* an emergency stays until someone deals with it */
.nt.k-emergency { --nt-accent: #c62828; --nt-tint: #c62828; border-color: #f0c4c4; background: #fff8f8; }
.nt.k-emergency .nt-icon { color: #fff; animation: ntPulse 1.6s ease-in-out infinite; }
@keyframes ntPulse { 50% { box-shadow: 0 0 0 6px rgba(198,40,40,.18); } }
@media (max-width: 575.98px) { .nt-stack { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .nt, .nt.leaving, .nt.k-emergency .nt-icon { animation: none; } .nt-timer { display: none; } }

/* Status edge on list and request cards: a coloured left edge on a white
   card (the old full-card tints made a page of cards look like a patchwork). */
.list-item-card[class*="lc-"], .equip-card[class*="lc-"] { background: #fff; border-left-width: 3px; }
.list-item-card.lc-pending,  .equip-card.lc-pending  { border-left-color: #d08a12; }
.list-item-card.lc-progress, .equip-card.lc-progress { border-left-color: #3d74b8; }
.list-item-card.lc-ready,    .equip-card.lc-ready    { border-left-color: #286cbf; }
.list-item-card.lc-success,  .equip-card.lc-success  { border-left-color: #2e9d5b; }
.list-item-card.lc-overdue,  .equip-card.lc-overdue  { border-left-color: #c62828; }
.list-item-card.lc-duesoon,  .equip-card.lc-duesoon  { border-left-color: #cc6a1a; }
.list-item-card.lc-muted,    .equip-card.lc-muted    { border-left-color: #a8b0bc; }
.equip-card.js-clickable[class*="lc-"]:hover, .list-item-card.js-clickable:hover { border-color: #c5ccd6; }
/* Fix-ups for the refresh: banner text stays white; header icons stay quiet */
.welcome-banner h1, .welcome-banner h2, .welcome-banner h3 { color: #fff; }
.card-header .text-primary, .card-header i.text-primary { color: var(--ink-3) !important; }
/* Public Sans runs a little wider than Segoe UI: keep table cells on one line
   (a wide table scrolls inside its card instead of breaking "Jul 09, 2026"). */
.table { font-size: 13px; }
.table th, .table td { white-space: nowrap; }
.table td .btn { white-space: nowrap; }
.table td.text-wrap, .table td .text-wrap { white-space: normal; }
/* Even-width digits only where numbers are compared at a glance */
body { font-feature-settings: normal; }
.stat-value, .dc-big { font-feature-settings: "tnum" 1; }
.table > :not(caption) > * > * { padding-left: .6rem; padding-right: .6rem; }
@media (max-width: 575.98px) { .nt-stack { top: 72px; bottom: auto; left: 12px; right: 12px; } }   /* clear of the floating emergency/chat buttons */


/* ══════════════════════════════════════
   CONFIRMATION DIALOG (askConfirm in app.js) — replaces SweetAlert's stock look
══════════════════════════════════════ */
body.cf-open { overflow: hidden; }
.cf-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(17, 24, 39, .45);
  opacity: 0; transition: opacity .15s ease;
}
.cf-backdrop.show { opacity: 1; }
.cf-backdrop[hidden] { display: none; }
.cf-dialog {
  width: min(440px, 100%); background: #fff; border-radius: 16px;
  position: relative; border: 1px solid #e2e8f0;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .25), 0 2px 6px rgba(16, 24, 40, .08);
  transform: translateY(8px) scale(.98); transition: transform .15s ease;
}
.cf-backdrop.show .cf-dialog { transform: none; }
.cf-head { display: flex; gap: 14px; padding: 22px 22px 18px; }
.cf-icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--primary-light); color: var(--primary);
}
.cf-dialog.danger .cf-icon { background: #fbe9e9; color: #c62828; }
.cf-copy { min-width: 0; }
.cf-title { font-size: 17px; font-weight: 600; color: var(--ink); margin: 1px 0 6px; letter-spacing: -.01em; }
.cf-text { font-size: 13px; line-height: 1.65; color: #64748b; margin: 0; overflow-wrap: anywhere; }
.cf-dismiss { position: absolute; right: 10px; top: 10px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: #64748b; font-size: 15px; }
.cf-dismiss:hover { background: #f1f5f9; color: #334155; }
.cf-dismiss:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.cf-dismiss:disabled { opacity: .5; }
.cf-password { padding: 0 22px 14px; }
.cf-password-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.cf-password-error { margin: 6px 0 0; font-size: 12px; font-weight: 500; color: #dc2626; min-height: 1em; }
[data-theme="dark"] .cf-password-error { color: #f87171; }
.cf-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 22px; background: #f8f9fb; border-top: 1px solid var(--line-soft);
  border-radius: 0 0 16px 16px;
}
.cf-actions .btn { min-width: 104px; font-size: 12.5px; font-weight: 600; padding: 8px 16px; border-radius: 8px; line-height: 1.5; }
.cf-actions .btn-light { background: #fff; border: 1px solid #d3d8df; color: var(--ink-2); }
.cf-actions .btn-light:hover { background: #f2f4f7; color: var(--ink); }
.cf-actions .btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.cf-actions .btn-danger:hover, .cf-actions .btn-danger:focus { background: #991b1b; border-color: #991b1b; color: #fff; }
@media (max-width: 480px) {
  .cf-backdrop { align-items: flex-end; padding: 0; }
  .cf-dialog { width: 100%; border-radius: 12px 12px 0 0; }
  .cf-actions { border-radius: 0; }
  .cf-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cf-backdrop, .cf-dialog { transition: none; } }
.f-powered strong { color: rgba(255,255,255,.8); font-weight: 600; }   /* landing footer credit */

/* Resident dashboard welcome card: one solid light blue (no gradient).
   #2a72c8 is the lightest blue that keeps the white text easy to read.
   Clerk and admin banners keep their plain navy. */
.welcome-banner.resident { background: #2a72c8; }


/* Number on a status filter chip — the sidebar badge moved onto the chips:
   orange needs attention, red is urgent, everything else stays quiet. */
.filter-chip { display: inline-flex; align-items: center; gap: 7px; }
.chip-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 3px;
          font-size: 10px; font-weight: 700; line-height: 1;
          display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0;
          background: #eef1f5; color: #4a5568; }
.chip-n.plain  { background: #eef1f5; color: #4a5568; }
.chip-n.zero   { background: #eef0f3; color: #9aa4b2; font-weight: 600; }
/* Only the plain and empty numbers invert on the selected chip — a number with
   a status colour keeps it, because it is still that status. */
.filter-chip.active .chip-n.plain,
.filter-chip.active .chip-n.zero { background: rgba(255,255,255,.25); color: #fff; }
/* Residents uses pill tabs rather than chips — same badges. */
.nav-tabs .nav-link .chip-n, .nav-link .chip-n { margin-left: 6px; }
.nav-link:has(> .chip-n), .nav-link:has(> .um-tab-count), .btn.chip-archive { display: inline-flex; align-items: center; }
.nav-pills .nav-link.active .chip-n.plain, .nav-pills .nav-link.active .chip-n.zero,
.nav-tabs  .nav-link.active .chip-n.plain, .nav-tabs  .nav-link.active .chip-n.zero { background: rgba(255,255,255,.25); color: #fff; }

/* Archive — cancelled and deleted requests, parked at the far right of the row */
.filter-chips .chip-archive { margin-left: auto; gap: 6px; padding: 5px 12px; font-size: 12.5px; line-height: 1.5; border-width: 1px; border-radius: 5px; }
.chip-archive i { font-size: 12.5px; opacity: .7; }
.chip-archive .chip-archive-label { display: none; }
.chip-archive:hover i, .chip-archive.active i { opacity: 1; }

/* Equipment-sized status controls shared by the staff request modules. */
.module-status-filters { align-items: center; }
.module-status-filters .filter-chip {
  box-sizing: border-box; height: 34px; padding: 6px 16px;
  border-width: 1.5px; border-radius: 6px; font-size: 12.5px; line-height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; white-space: nowrap;
}

/* ── Sidebar "something new" dot ──────────────────────────────────────────
   One dot, one colour, on every module — no numbers to read. It is there only
   until the person opens that module; nav_seen remembers when they last looked,
   so the dot returns only when something newer than that arrives. */
.sidebar-nav .nav-link .nav-dot {
  margin-left: auto; flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: #c62828;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, .13);
}
.sidebar-nav .nav-link.active .nav-dot { box-shadow: 0 0 0 3px rgba(198, 40, 40, .2); }
/* The wrapper only exists so the live poll can refresh the dot in place. */
.sidebar-nav .nav-link [data-nav-badge] { display: contents; }

/* ── Filter chip numbers ──────────────────────────────────────────────────
   Each status keeps its own meaning: amber is waiting, blue is in progress,
   blue is ready, green is approved, cyan is out, slate is filed, red is urgent,
   maroon is declined, grey is archived. The same language the status badges
   on the cards already speak. */
.chip-n.t-pending  { background: #d97706; color: #fff; }   /* waiting on staff */
.chip-n.t-progress { background: #286cbf; color: #fff; }   /* being worked on */
.chip-n.t-ready    { background: #286cbf; color: #fff; }   /* ready for the resident */
.chip-n.t-approved { background: #15803d; color: #fff; }   /* approved / resolved */
.chip-n.t-released { background: #0f766e; color: #fff; }   /* out in the barangay */
.chip-n.t-closed   { background: #475569; color: #fff; }   /* returned / closed */
.chip-n.t-overdue  { background: #c62828; color: #fff; }   /* urgent */
.chip-n.t-rejected { background: #9f1239; color: #fff; }   /* declined */
.chip-n.t-archive  { background: #6b7280; color: #fff; }   /* archived */
/* On the selected chip every number keeps its colour — it is the same status. */

/* ── System Settings → About ─────────────────────────────────────────────
   The one screen that names the software rather than the barangay. */
.about-sys { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.about-mark { width: 52px; height: 52px; border-radius: 13px; flex: 0 0 auto;
              display: grid; place-items: center; color: #fff; font-size: 22px;
              background: linear-gradient(140deg, #4f93da, #2a68ac); }
.about-name { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.2px; }
.about-tag  { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.about-grid { display: grid; grid-template-columns: 150px 1fr; gap: 10px 18px; margin: 0 0 18px; }
.about-grid dt { font-size: 12px; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .4px; color: #8a94a3; padding-top: 2px; }
.about-grid dd { margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.about-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 0;
              padding: 12px 14px; background: #f7f9fc; border-radius: 8px;
              border-left: 3px solid var(--primary); }
@media (max-width: 560px) { .about-grid { grid-template-columns: 1fr; gap: 4px 0; }
                            .about-grid dd { margin-bottom: 10px; } }
/* Software credit on the sign-in card — small, grey, below everything else. */
.login-credit { margin-top: 20px; text-align: center; font-size: 11px; color: #9ca3af; }
.login-credit strong { color: #6b7280; font-weight: 600; }

/* The one SMS gateway the barangay uses — stated, not chosen from a list. */
.sms-provider { display: flex; align-items: center; gap: 8px; height: 38px;
                padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
                background: #f7f9fc; font-size: 14px; font-weight: 600; color: var(--ink); }
.sms-provider i { color: var(--primary); font-size: 13px; }

/* ── System Settings → Notifications: Email or Text, never both at once ──
   Two long forms stacked on one tab was a scroll; this shows one and says
   at a glance whether the other is switched on. */
.chan-switch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px;
               background: #f1f4f8; border-radius: 10px; }
.chan-btn { display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 16px; border-radius: 7px; text-decoration: none;
            font-size: 13.5px; font-weight: 600; color: var(--ink-2);
            transition: background .15s, color .15s, box-shadow .15s; }
.chan-btn i { font-size: 13px; opacity: .8; }
.chan-btn:hover { color: var(--ink); background: rgba(255,255,255,.65); }
.chan-btn.active { background: #fff; color: var(--primary);
                   box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px rgba(16,24,40,.04); }
.chan-btn.active i { opacity: 1; }
/* Green when that channel is switched on, grey when it is not. */
.chan-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd2db; }
.chan-dot.on { background: #16a34a; }
@media (max-width: 480px) { .chan-switch { display: flex; }
                            .chan-btn { flex: 1; justify-content: center; padding: 8px 10px; } }

/* ── Equipment: a colour of its own for every status ─────────────────────
   Seven statuses, seven different colours — no two shades of one hue, so
   nothing reads as "the same colour twice". The badge on the card and the
   number on its filter chip are always the identical value.
   Scoped to this page: no other module's colours change. */
body.page-borrow {
  --eq-pending:   #f59e0b;   /* amber  — waiting for staff        */
  --eq-approved:  #16a34a;   /* green  — approved                 */
  --eq-released:  #0891b2;   /* cyan   — out with the resident    */
  --eq-returned:  #475569;   /* slate — brought back              */
  --eq-overdue:   #dc2626;   /* red    — past the return date     */
  --eq-rejected:  #991b1b;   /* dark red — turned down            */
  --eq-cancelled: #6b7280;   /* grey   — cancelled by the resident */
}
body.page-borrow .badge.st-pending,
body.page-borrow .chip-n.t-pending   { background: var(--eq-pending)   !important; color: #fff !important; }
body.page-borrow .badge.st-approved,
body.page-borrow .chip-n.t-approved  { background: var(--eq-approved)  !important; color: #fff !important; }
body.page-borrow .badge.st-released,
body.page-borrow .chip-n.t-released  { background: var(--eq-released)  !important; color: #fff !important; }
body.page-borrow .badge.st-returned,
body.page-borrow .chip-n.t-closed    { background: var(--eq-returned)  !important; color: #fff !important; }
body.page-borrow .badge.st-overdue,
body.page-borrow .chip-n.t-overdue   { background: var(--eq-overdue)   !important; color: #fff !important; }
body.page-borrow .badge.st-rejected,
body.page-borrow .chip-n.t-rejected  { background: var(--eq-rejected)  !important; color: #fff !important; }
body.page-borrow .badge.st-cancelled,
body.page-borrow .chip-n.t-archive   { background: var(--eq-cancelled) !important; color: #fff !important; }
/* Dark mode: translucent badges matching document-request style */
[data-theme="dark"] body.page-borrow .badge.st-pending,
[data-theme="dark"] body.page-borrow .chip-n.t-pending   { background: rgba(245,158,11,.15)  !important; color: #fbbf24 !important; }
[data-theme="dark"] body.page-borrow .badge.st-approved,
[data-theme="dark"] body.page-borrow .chip-n.t-approved  { background: rgba(22,163,74,.15)   !important; color: #34d399 !important; }
[data-theme="dark"] body.page-borrow .badge.st-released,
[data-theme="dark"] body.page-borrow .chip-n.t-released  { background: rgba(8,145,178,.15)   !important; color: #22d3ee !important; }
[data-theme="dark"] body.page-borrow .badge.st-returned,
[data-theme="dark"] body.page-borrow .chip-n.t-closed    { background: rgba(100,116,139,.18) !important; color: #cbd5e1 !important; }
[data-theme="dark"] body.page-borrow .badge.st-overdue,
[data-theme="dark"] body.page-borrow .chip-n.t-overdue   { background: rgba(220,38,38,.15)   !important; color: #f87171 !important; }
[data-theme="dark"] body.page-borrow .badge.st-rejected,
[data-theme="dark"] body.page-borrow .chip-n.t-rejected  { background: rgba(153,27,27,.15)   !important; color: #f87171 !important; }
[data-theme="dark"] body.page-borrow .badge.st-cancelled,
[data-theme="dark"] body.page-borrow .chip-n.t-archive   { background: rgba(107,114,128,.15) !important; color: #bdc0c5 !important; }

/* ── THINGS RESPOND WHEN YOU TOUCH THEM ─────────────────────────────────
   Nothing here changes what anything does. It only makes the interface
   answer back: a card lifts under the pointer, a row highlights, a pressed
   button sinks, and a button that started an action shows it is working.
   Anyone who asks for less motion gets a still interface instead. */

/* A button that has just been pressed is doing something. */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  color: #fff; animation: cnx-spin .6s linear infinite;
}
.btn-light.is-busy::after, .btn-outline-secondary.is-busy::after { color: var(--ink-2); }
@keyframes cnx-spin { to { transform: rotate(360deg); } }

/* Cards and rows acknowledge the pointer. */
.card, .list-item-card, .borrow-req-card, .stat-card, .summary-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.list-item-card:hover, .borrow-req-card:hover {
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, .07);
}
.js-clickable { cursor: pointer; }
.table tbody tr { transition: background-color .14s ease; }
.table tbody tr:hover { background: #f7f9fc; }

/* Buttons and chips sink slightly when pressed — the oldest feedback there is. */
.btn, .filter-chip, .pill-tab, .settings-tab, .chan-btn {
  transition: transform .12s ease, background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.btn:active, .filter-chip:active, .pill-tab:active, .chan-btn:active { transform: translateY(1px); }

/* Keyboard users can see where they are. Pointer users never see this ring. */
.btn:focus-visible, .filter-chip:focus-visible, .nav-link:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .chan-btn:focus-visible,
.pill-tab:focus-visible, .settings-tab:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px;
}

/* A list that has just loaded settles in rather than snapping into place. */
@keyframes cnx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-content .list-item-card, .page-content .borrow-req-card {
  animation: cnx-rise .34s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .card, .list-item-card, .borrow-req-card, .btn, .filter-chip, .pill-tab,
  .chan-btn, .table tbody tr { transition: none; }
  .list-item-card:hover, .borrow-req-card:hover { transform: none; }
  .btn:active, .filter-chip:active, .pill-tab:active, .chan-btn:active { transform: none; }
  .page-content .list-item-card, .page-content .borrow-req-card { animation: none; }
  .btn.is-busy::after { animation: none; }
}

/* ── BARANGAY GALLERY ────────────────────────────────────────────────────
   The same grid for staff and residents; only the upload box and the delete
   button differ. Photos keep a square crop so a row never goes ragged. */
.gal-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.gal-item { position: relative; margin: 0; background: #fff; border: 1px solid var(--line);
            border-radius: 12px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.gal-item:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(16,24,40,.10); }
.gal-open { display: block; width: 100%; padding: 0; border: 0; background: #eef3fa; cursor: zoom-in; }
.gal-open img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                transition: transform .3s ease; }
.gal-item:hover .gal-open img { transform: scale(1.04); }
.gal-cap { padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
/* The delete button stays out of the way until the photo is hovered. */
.gal-del { position: absolute; top: 8px; right: 8px; margin: 0; opacity: 0; transition: opacity .16s ease; }
.gal-item:hover .gal-del, .gal-del:focus-within { opacity: 1; }
.gal-del-btn { width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(17,24,39,.72);
               color: #fff; font-size: 12.5px; display: grid; place-items: center; }
.gal-del-btn:hover { background: #c62828; }

/* Upload box — staff only */
.gal-drop { border: 1.5px dashed #c3d2e6; border-radius: 12px; background: #f9fbfe; padding: 18px;
            display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gal-drop i { width: 46px; height: 46px; border-radius: 11px; background: #e6eef8; color: var(--primary);
              display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.gal-drop-copy { flex: 1 1 240px; }
.gal-drop-copy strong { display: block; font-size: 14px; color: var(--ink); }
.gal-drop-copy span { font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 575.98px) {
  .gal-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gal-item, .gal-open img { transition: none; }
  .gal-item:hover { transform: none; }
  .gal-item:hover .gal-open img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   BRAND: BLUE · WHITE · GREEN
   The three colours of the barangay seal — the blue ring, the green hills,
   the white ground between them. Blue leads (anything you can act on),
   green confirms (anything finished or going well), white carries.

   Every other colour in the system is a signal, not decoration: amber waits,
   red warns. They stay rare so they keep meaning something.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Blue — the seal's ring. Actions, links, the things you press. */
  --brand-blue:        #286cbf;
  --brand-blue-dark:   #1f5599;
  --brand-blue-soft:   #e7f0fb;
  --brand-blue-faint:  #f4f8fd;

  /* Green — the seal's hills. Done, verified, approved, healthy. */
  --brand-green:       #2f9e44;
  --brand-green-dark:  #26833a;
  --brand-green-soft:  #e7f6ec;
  --brand-green-faint: #f4fbf6;

  /* White carries everything; these are its shades. */
  --brand-white:       #ffffff;
  --brand-paper:       #f6f8fb;

  /* The one green in the system, so "good" always looks the same. */
  --success: var(--brand-green);
}

/* Success wears the brand green wherever Bootstrap would have used its own. */
.text-success { color: var(--brand-green) !important; }
.bg-success   { background-color: var(--brand-green) !important; }
.btn-success  { background: var(--brand-green); border-color: var(--brand-green); }
.btn-success:hover, .btn-success:focus {
  background: var(--brand-green-dark); border-color: var(--brand-green-dark);
}
.btn-outline-success { color: var(--brand-green-dark); border-color: var(--brand-green); }
.btn-outline-success:hover { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.progress-bar.bg-success { background-color: var(--brand-green) !important; }
.alert-success { background: var(--brand-green-soft); border-color: #bde5c8; color: #1c5f2b; }

/* Positive states across the system — one green, one meaning. */
.badge-approved, .badge-resolved { background: var(--brand-green-soft); color: #1c5f2b; }
.nt.k-success .nt-icon { background: var(--brand-green-soft); color: var(--brand-green-dark); }
.role-resident { background: var(--brand-green-soft); color: var(--brand-green-dark); }
.topbar-today .today-office.open .dot { background: var(--brand-green); box-shadow: 0 0 0 3px rgba(47,158,68,.16); }
.today-office.open { color: var(--brand-green-dark); }

/* ── Confirmation dialog: everything on one line ──
   The icon now sits level with the question instead of floating below it,
   and the buttons line up with the text above them. */
.cf-head { display: flex; align-items: flex-start; gap: 14px; padding: 28px 32px 24px 24px; }
.cf-icon { margin-top: 0; }
.cf-title { margin: 0 0 8px; line-height: 1.4; }
.cf-copy { padding-top: 0; }
.cf-actions { align-items: center; padding: 16px 24px; }
.cf-actions .btn { min-width: 104px; }
@media (max-width: 480px) {
  .cf-head { align-items: center; }
  .cf-copy { padding-top: 0; }
}

/* ── Paired dashboard cards ──
   Two cards side by side stretch to match each other, so the shorter one
   used to leave a wide blank space under its message. The message now sits
   in the middle of whatever room the card has. */
.dash-pair .card { display: flex; flex-direction: column; }
.dash-pair .card-body { flex: 1; display: flex; flex-direction: column; }
.dash-pair .card-body > .table-responsive { flex: 1; display: flex; flex-direction: column; }
.dash-pair .card-body .table { margin-bottom: 0; }
/* An "all clear" row grows to fill the card and centres what it says. */
.dash-pair tbody tr.is-empty td { height: 100%; vertical-align: middle; }
.dash-pair tbody:has(tr.is-empty) { height: 100%; }
.dash-pair .table > tbody > tr.is-empty:hover { background: transparent; }

/* ── Card colours that mean something ───────────────────────────────────
   A card's colour is chosen by how that queue is actually doing, not by
   which module it belongs to. So the colour tells you something before you
   have read a single number:

     green  · nothing waiting — this queue is clear
     blue   · work is waiting for you
     amber  · something is due soon
     red    · something is overdue or wrong

   Blue and green do the everyday work, which keeps the screen in the
   barangay's colours; amber and red stay rare so they still mean something
   when they appear. */
.stat-icon, .rstat-icon { transition: background-color .2s ease, color .2s ease; }

.stat-icon.blue,  .rstat-icon.blue  { background: var(--brand-blue-soft);  color: var(--brand-blue); }
.stat-icon.green, .rstat-icon.green { background: var(--brand-green-soft); color: var(--brand-green-dark); }
.stat-icon.amber, .rstat-icon.amber { background: #fdf0dc;                 color: #b45a12; }
.stat-icon.red,   .rstat-icon.red   { background: #fbe9e9;                 color: #b3312f; }

/* Older names still in the templates, folded onto the four above. */
.stat-icon.teal, .stat-icon.purple  { background: var(--brand-blue-soft);  color: var(--brand-blue); }
.stat-icon.orange                   { background: #fdf0dc;                 color: #b45a12; }
.stat-icon.yellow                   { background: #fdf0dc;                 color: #b45a12; }

/* The whole card takes the colour, in a pastel soft enough to look at all day.
   The tint is the state; the icon and the numbers sit on top of it. */
.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  transition: background-color .25s ease, border-color .25s ease,
              transform .18s ease, box-shadow .18s ease;
}
.stat-card.is-clear   { background: #eef8f1; border-color: #cfe9d8; }   /* pastel green — clear    */
.stat-card.is-waiting { background: #eaf2fc; border-color: #cfe0f5; }   /* pastel blue  — waiting  */
.stat-card.is-soon    { background: #fdf4e7; border-color: #f0dcbd; }   /* pastel amber — due soon */
.stat-card.is-late    { background: #fcefef; border-color: #f0d2d2; }   /* pastel red   — overdue  */

/* On a tinted card the icon sits in white, so it reads as a badge on the tint
   rather than a second patch of the same colour. */
.stat-card.is-clear .stat-icon,
.stat-card.is-waiting .stat-icon,
.stat-card.is-soon .stat-icon,
.stat-card.is-late .stat-icon { background: #fff; }
.stat-card.is-clear   .stat-icon { color: var(--brand-green-dark); }
.stat-card.is-waiting .stat-icon { color: var(--brand-blue); }
.stat-card.is-soon    .stat-icon { color: #b45a12; }
.stat-card.is-late    .stat-icon { color: #b3312f; }

.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16,24,40,.08); }
@media (prefers-reduced-motion: reduce) {
  .stat-card { transition: none; }
  .stat-card:hover { transform: none; }
}

/* Resident list icons follow the same rule: blue for a module, green when done. */
.list-item-icon, .list-item-icon.doc, .list-item-icon.job,
.list-item-icon.complaint, .list-item-icon.borrow {
  background: var(--brand-blue-soft); color: var(--brand-blue);
}
.list-item-icon.done { background: var(--brand-green-soft); color: var(--brand-green-dark); }

/* ══════════════════════════════════════════════════════════════════════
   THE THEME: BLUE · GREEN · WHITE
   The system used to sit on flat grey, which made every screen feel the
   same and a little lifeless. The page now rests on the faintest blue —
   the colour of the seal's ring, thinned almost to white — so the white
   cards lift off it instead of disappearing into it.

   Green is the second voice, not decoration: it marks the things that
   have gone right. Together with the blue they carry the barangay's
   colours through every screen without shouting.
   ══════════════════════════════════════════════════════════════════════ */

/* The ground everything stands on. */
body, .main-wrapper, .page-content { background: #e8e8e8; }

/* White cards on a tinted page need only the lightest edge to separate. */
.card {
  background: #fff;
  border: 1px solid #d5d5d5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }

/* A card's heading sits on a wash of the brand blue, with a green keyline
   under it — both colours present on every card, quietly. */
.card-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: none;
}
.card-header i { color: var(--brand-blue); }

/* Page titles get a short green rule, the way the seal's hills sit under
   its ring. It is small, and it is on every page, which is what makes the
   system feel like one thing. */
.page-header h1 { position: relative; padding-bottom: 10px; }
.page-header h1::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-blue) 0 55%, var(--brand-green) 55% 100%);
}

/* Tables: a blue-tinted head, and rows that answer the pointer in blue. */
.table > thead th {
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  color: #46566b;
}
.table tbody tr:hover { background: #f6faff; }

/* The sidebar keeps its white, with the active page marked in brand blue
   and a green tip on the marker. */
.sidebar-nav .nav-link.active { background: var(--brand-blue-soft); color: var(--brand-blue-dark); }
.sidebar-nav .nav-link.active::before { background: var(--brand-blue); }

/* Filter chips: white by default, brand blue when chosen. */
.filter-chip { background: #fff; border-color: #d5d5d5; }
.filter-chip:hover { border-color: #aaa; background: #f5f5f5; }
.filter-chip.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.filter-chip.chip-archive { background: transparent; color: #6c757d; border-color: #6c757d; }
.filter-chip.chip-archive:hover,
.filter-chip.chip-archive.active { background: #6c757d; color: #fff; border-color: #6c757d; }
:root:not([data-theme="dark"]) .chip-archive .chip-n { background: #e2e8f0 !important; color: #475569 !important; }
:root:not([data-theme="dark"]) .chip-archive:hover,
:root:not([data-theme="dark"]) .chip-archive.active { background: #f1f5f9; color: #374151; border-color: #94a3b8; }

/* Pill tabs follow the chips. */
.pill-tab.active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

/* Buttons: blue leads, green confirms, and both lift slightly when pressed. */
.btn-primary { background: var(--brand-blue); border-color: var(--brand-blue); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.btn-outline-primary { color: var(--brand-blue); border-color: #b9d3ef; }
.btn-outline-primary:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

/* The empty state stops being grey-on-grey. */
.empty-state i { color: #b6cfe8; }
.empty-state p { color: #7f92a8; }

/* ── Dashboard cards: a colour each ─────────────────────────────────────
   Only on the dashboards, and the one place the three-colour rule is let
   out. Eight cards need eight colours a person can tell apart, and blue to
   green does not contain eight distinguishable steps.

   So these come from hues spread around the wheel at one lightness — blue,
   blue, cyan, teal, green, lime, amber and slate — kept pale enough to sit
   under dark text. Reds are skipped so nothing is mistaken for the overdue
   card. The chrome around them — buttons, badges, headings, the sidebar —
   stays blue, green and white, and that is what carries the barangay's
   colours.

   A card with a real problem overrules its colour further down. */
body.page-dashboard .page-content { padding: 18px 24px; }
body.page-dashboard .welcome-banner { padding: 14px 24px; }
body.page-dashboard .welcome-banner h2 { font-size: 17px; font-weight: 600; margin-bottom: 1px; }
body.page-dashboard .welcome-banner p { font-size: 12.5px; }
body.page-dashboard .card { border: 1px solid #d5d5d5; box-shadow: 0 2px 8px rgba(0,0,0,.08); background: #fff; }
body.page-dashboard .card-header { padding: 14px 18px; font-size: 15px; font-weight: 600; line-height: 1.4; background: #f8f9fa; border-bottom: 1px solid #e2e6ec; }
body.page-dashboard .section-title { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
@media (min-width: 992px) {
  body.page-dashboard .topbar-page-title h1 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
  body.page-dashboard .topbar-page-title .page-subtitle { font-size: 13px; line-height: 1.4; }
}
body.page-dashboard .card-body { padding: 16px 18px; }
body.page-dashboard .progress { border-radius: 6px; background: #eef2f7; }
body.page-dashboard .progress-bar { border-radius: 6px; transition: width .6s ease; }

/* ── Reports & Analytics: match dashboard sizing ── */
body.page-reports .section-title { font-size: 18px; font-weight: 800; letter-spacing: 0; text-transform: none; }
body.page-reports .card-header { padding: 14px 18px; font-size: 19px; font-weight: 700; background: #f8f9fa; border-bottom: 1px solid #e2e6ec; }

/* Reports: one task per view, with a single service trend on the overview. */
.reports-shell { width: 100%; margin: 0; }
.report-main { min-width: 0; }
.reports-shell .reports-toolbar { margin-bottom: 12px; }
.reports-shell .report-heading-copy { min-width: 0; }
.reports-shell .report-toolbar-actions { flex-shrink: 0; }
.report-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.report-section-number { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; background: #e8eef5; border-radius: 9px; font-size: 12px; font-weight: 600; color: #475569; }
.report-section-heading h2 { margin: 0 0 4px; color: #1e293b; font-size: 17px; font-weight: 650; line-height: 1.3; }
.report-section-heading p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.5; }
.report-scope { display: inline-block; flex-shrink: 0; border-radius: 5px; background: #f1f5f9; padding: 4px 7px; color: #64748b; font-size: 10px; font-weight: 500; line-height: 1.4; }
.report-section-heading > .report-scope { margin-left: auto; }
.report-residents-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report-residents-grid > .card { margin: 0; min-width: 0; }
.report-residents-grid .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-chart-caption { min-height: 20px; margin: 0 0 12px; font-size: 11px; line-height: 1.6; color: #64748b; }
.report-chart-caption strong { font-size: 14px; font-weight: 600; color: #334155; }
.report-demographic-chart { position: relative; height: 240px; }
.reports-shell .report-service { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; min-height: 76px; padding: 12px 14px; }
.reports-shell .report-service-label { grid-column: 1; grid-row: 1; }
.reports-shell .report-service strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 23px; }
.reports-shell .report-service-hint { grid-column: 1; grid-row: 2; padding-left: 39px; }
[data-theme="dark"] .report-section-number { background: #2d3a4a; color: #cbd5e1; }
[data-theme="dark"] .report-section-heading h2,
[data-theme="dark"] .report-chart-caption strong { color: #e2e8f0; }
[data-theme="dark"] .report-section-heading p,
[data-theme="dark"] .report-chart-caption { color: #a8b3c2; }
[data-theme="dark"] .report-scope { background: #2d3a4a; color: #bdc9d8; }
@media (max-width: 767.98px) {
  .report-residents-grid { grid-template-columns: minmax(0, 1fr); }
  .report-section-heading { flex-wrap: wrap; }
  .report-section-heading > div { flex: 1; min-width: 180px; }
  .report-section-heading > .report-scope { margin-left: 46px; }
  .reports-shell .report-toolbar-actions { flex: 0 0 calc(100% - 46px); margin-left: 46px !important; }
}
@media (max-width: 575.98px) {
  .reports-shell .report-service { padding: 12px; }
  .reports-shell .report-service-label { font-size: 11px; gap: 6px; }
  .reports-shell .report-service-label > i { display: none; }
  .reports-shell .report-service-hint { padding-left: 0; }
  .reports-shell .report-service strong { font-size: 22px; }
}
.report-section { scroll-margin-top: 100px; }
.report-section + .report-section { border-top: 1px solid #dbe2ea; padding-top: 12px; margin-top: 12px; }
.report-jump-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.report-jump-nav a { font-size: 12px; font-weight: 500; color: #64748b; padding: 6px 0; text-decoration: none; }
.report-jump-nav a:hover { color: #286cbf; }
.report-jump-nav a:focus-visible { outline: 2px solid #60a5fa; outline-offset: 4px; border-radius: 2px; }
.report-jump-nav i { font-size: 9px; }
[data-theme="dark"] .report-section + .report-section { border-color: #3a4758; }
[data-theme="dark"] .report-jump-nav a { color: #a8b3c2; }
[data-theme="dark"] .report-jump-nav a:hover { color: #93c5fd; }
.reports-title { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 5px; }
.reports-title > span { color: #64748b; font-weight: 400; margin-left: 6px; }
.reports-tabs { margin: 0; }
.reports-tabs .reports-tab:hover:not(.active) { background: rgba(40,108,191,.06); color: #286cbf; }
.reports-intro h3 { font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.reports-shell .card .card-header { font-size: 14px; font-weight: 600; padding: 15px 20px; }
.reports-shell .card .card-body { padding: 20px; }
.report-service { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; height: 100%; padding: 18px 20px; border: 1px solid #dbe2ea; border-radius: 10px; background: #fff; color: #334155; text-align: left; transition: border-color .15s, background .15s; }
.report-service:hover { border-color: #94b9e2; }
.report-service.active { border-color: #286cbf; background: #f0f6fd; box-shadow: inset 0 0 0 1px #286cbf; }
.report-service-label { font-size: 12.5px; font-weight: 500; }
.report-service strong { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.report-service-hint { font-size: 11px; color: #64748b; }
.report-service.active .report-service-hint { color: #286cbf; }
.report-period { font-size: 12px; font-weight: 400; color: #64748b; margin-left: auto; }
.report-trend { position: relative; height: 320px; }
.report-trend.report-resident-trend { height: 240px; }
.report-total { display: inline-block; font-size: 12px; font-weight: 500; background: #e8eef5; color: #475569; padding: 5px 9px; border-radius: 6px; margin-left: 8px; vertical-align: middle; }
.report-service:focus-visible, .reports-tab:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.report-overview { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-overview h3 { margin-bottom: 4px; }
.report-overview .report-total { margin-left: 0; white-space: nowrap; }
.report-service-label { display: flex; align-items: center; gap: 9px; }
.report-service-label > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #f1f5f9; color: #64748b; }
.report-activity-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.report-activity-layout > .card { min-width: 0; margin: 0; }
.report-activity-layout > .card:first-child { grid-column: span 2; }
.reports-shell .report-activity-layout > .card > .card-header { min-height: 56px; }
.report-activity-layout > .card > .card-body { flex: 1; }
.report-activity-footer { min-height: 88px; padding: 16px 20px; border-top: 1px solid #e2e8f0; }
.report-activity-footer.report-trend-facts { margin: 0; padding: 16px 20px; align-content: start; }
.report-activity-footer .report-status-note { margin: 0; padding: 0; border: 0; }
.report-trend-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid #e2e8f0; padding-top: 16px; margin-top: 16px; }
.report-trend-facts > div { display: flex; flex-direction: column; gap: 5px; }
.report-trend-facts span, .report-status-caption, .report-status-note, .report-status-empty { font-size: 12px; color: #64748b; line-height: 1.6; }
.report-trend-facts strong { font-size: 15px; font-weight: 600; color: #334155; }
.report-status-card .card-body { display: flex; flex-direction: column; }
.report-status-caption { font-weight: 600; margin-bottom: 20px; }
.report-status-list { flex: 1; min-height: 0; }
.report-status-list.is-empty { display: grid; place-items: center; text-align: center; }
.report-status-list.is-empty .report-status-empty { margin: 0; padding: 0; max-width: 34ch; }
.report-status-entry { margin-bottom: 19px; }
.report-status-entry > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: #334155; margin-bottom: 8px; }
.report-status-entry strong { white-space: nowrap; font-size: 13px; }
.report-status-entry small { color: #64748b; font-size: 11px; font-weight: 400; }
.report-status-track, .report-rank-track { height: 6px; border-radius: 6px; overflow: hidden; background: #eef2f6; }
.report-status-track > span, .report-rank-track > span { display: block; height: 100%; border-radius: inherit; }
.report-status-note { margin: auto 0 0; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.report-status-empty { padding: 20px 0; }
.report-rank-entry { padding-bottom: 14px; margin-bottom: 5px; }
.reports-shell .report-rank-entry .top-rank-row { border: 0; gap: 10px; }
.report-rank-entry .top-rank-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #f1f5f9; font-size: 12px; }
.report-rank-track { margin-left: 34px; height: 4px; }
.report-rank-track > span { background: #5b9bd5; }
[data-theme="dark"] .report-service-label > i,
[data-theme="dark"] .report-rank-entry .top-rank-num { background: #2d3a4a; color: #b9c6d6; }
[data-theme="dark"] .report-trend-facts,
[data-theme="dark"] .report-status-note { border-color: #3a4758; }
[data-theme="dark"] .report-activity-footer { border-color: #3a4758; }
[data-theme="dark"] .report-trend-facts span,
[data-theme="dark"] .report-status-caption,
[data-theme="dark"] .report-status-note,
[data-theme="dark"] .report-status-empty,
[data-theme="dark"] .report-status-entry small { color: #a8b3c2; }
[data-theme="dark"] .report-trend-facts strong,
[data-theme="dark"] .report-status-entry > div:first-child { color: #e2e8f0; }
[data-theme="dark"] .report-status-track,
[data-theme="dark"] .report-rank-track { background: #334155; }
@media (max-width: 991.98px) {
  .report-activity-layout { grid-template-columns: minmax(0, 1fr); }
  .report-activity-layout > .card:first-child { grid-column: auto; }
}
@media (max-width: 575.98px) {
  .report-overview { align-items: flex-start; flex-direction: column; }
  .report-trend-facts { gap: 8px; }
  .report-trend-facts span { font-size: 10px; min-height: 32px; }
  .report-trend-facts strong { font-size: 13px; }
}
[data-theme="dark"] .reports-title > span,
[data-theme="dark"] .report-period,
[data-theme="dark"] .report-service-hint { color: #a8b3c2; }
[data-theme="dark"] .reports-tabs .reports-tab:hover:not(.active) { color: #bfdbfe; background: rgba(59,130,246,.08); }
[data-theme="dark"] .report-service { background: #222e3c; border-color: #3a4758; color: #e2e8f0; }
[data-theme="dark"] .report-service:hover { border-color: #60a5fa; }
[data-theme="dark"] .report-service.active { background: #243b55; border-color: #60a5fa; box-shadow: inset 0 0 0 1px #60a5fa; }
[data-theme="dark"] .report-service.active .report-service-hint { color: #93c5fd; }
[data-theme="dark"] .report-total { background: #2d3a4a; color: #e2e8f0; }
@media (max-width: 575.98px) {
  .reports-title { font-size: 20px; }
  .reports-shell .report-toolbar-actions { justify-content: space-between; }
  .reports-tabs .reports-tab { padding: 7px 12px; font-size: 12px; }
  .report-service { padding: 14px 12px; gap: 8px; }
  .report-service strong { font-size: 24px; }
  .report-service-hint { font-size: 10px; }
  .report-trend { height: 250px; }
  .report-trend.report-resident-trend { height: 220px; }
  .reports-shell .card .card-body { padding: 16px; }
}
body.page-reports .card { border: 1px solid #d5d5d5; box-shadow: 0 2px 8px rgba(0,0,0,.08); background: #fff; }
.top-rank-row { padding: 9px 0; border-bottom: 1px solid #f0f0f0; }
.top-rank-num { font-size: 14px; color: #94a3b8; min-width: 20px; }
.top-rank-name { font-size: 14px; font-weight: 500; color: #1e293b; }
.top-rank-count { font-size: 14px; color: #1e293b; white-space: nowrap; }

body.page-dashboard .stat-card[class*="tint-"] {
  border: none;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
  padding: 14px 16px;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
body.page-dashboard .stat-card[class*="tint-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.45);
  pointer-events: none;
}
body.page-dashboard .stat-card[class*="tint-"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.6);
}

body.page-dashboard .stat-card.tint-1,
body.page-dashboard .stat-card.tint-2,
body.page-dashboard .stat-card.tint-3,
body.page-dashboard .stat-card.tint-4,
body.page-dashboard .stat-card.tint-5,
body.page-dashboard .stat-card.tint-6,
body.page-dashboard .stat-card.tint-7,
body.page-dashboard .stat-card.tint-8 { background: #fff; border: 1px solid #e5e7eb; }

body.page-dashboard .stat-card[class*="tint-"] .stat-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.7);
  border-radius: 10px;
  color: var(--brand-blue) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  flex-shrink: 0;
}
body.page-dashboard .stat-card[class*="tint-"] .stat-icon img { width: 34px; height: 34px; object-fit: contain; }

body.page-dashboard .stat-card[class*="tint-"] .stat-body { gap: 2px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
body.page-dashboard .stat-card[class*="tint-"] .stat-value { color: #0f172a; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
body.page-dashboard .stat-card[class*="tint-"] .stat-label { color: #111827; font-size: 14px; font-weight: 600; line-height: 1.4; }
#dashStatCards .summary-period { color: #64748b; font-size: 10px; line-height: 1.3; }
#dashStatCards .stat-card { height: 100%; align-items: flex-start; }
#dashStatCards .stat-label { min-height: 2.8em; margin-top: 0; }
#dashStatCards .stat-icon { margin-top: 0; }
#dashStatCards .summary-queue { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
#dashStatCards .summary-queue-badge { display: inline-block; padding: 3px 5px; font-size: 10px; line-height: 1.2; border-radius: 4px; background: #e2e8f0; color: #475569; }
#dashStatCards .summary-queue-badge strong { font-weight: 700; }
#dashStatCards .summary-queue-badge.pending { background: #fef3c7; color: #92400e; }
#dashStatCards .summary-queue-badge.ready { background: #dbeafe; color: #1d4f8f; }
#dashStatCards .summary-queue-badge.urgent { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] #dashStatCards .summary-period { color: #a8b3c2; }
[data-theme="dark"] #dashStatCards .summary-queue-badge { background: #334155; color: #cbd5e1; }
[data-theme="dark"] #dashStatCards .summary-queue-badge.pending { background: #513d1c; color: #fde68a; }
[data-theme="dark"] #dashStatCards .summary-queue-badge.ready { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] #dashStatCards .summary-queue-badge.urgent { background: #54282e; color: #fecaca; }
body.page-dashboard .stat-card[class*="tint-"] .stat-sub   { color: #64748b; font-size: 12px; font-weight: 500; margin-top: 1px; }
body.page-dashboard .stat-card[class*="tint-"] .stat-go { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   GREEN CHROME
   The sidebar and the bar across the top wear a light green — the seal's
   own green thinned right down, so it reads as the barangay's colour
   without filling a whole wall with it.

   On a pale surface the text has to be dark, not white: everything here
   is a deep green, measured against the background (the faintest pairing
   is the small print at 5.4:1, past the 4.5:1 mark). The page you are on
   is the one thing that goes solid, in the seal's full green, so it is
   unmistakable.

   The panel's outer corners are rounded, which lets the page show past it
   and stops the sidebar reading as a wall.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --seal-green:      #068605;   /* read off the seal itself     */
  --chrome-green:    #e3f2e3;   /* the light wash for the panels */
  --chrome-edge:     #c3e2c4;   /* its border                    */
  --chrome-ink:      #12400f;   /* headings on it                */
  --chrome-ink-soft: #1d5b1b;   /* links on it                   */
  --chrome-ink-mute: #3d6b3c;   /* small print on it             */
}

/* ── Sidebar ── */
.sidebar {
  background: var(--chrome-green);
  border-right: 1px solid var(--chrome-edge);
  border-radius: 0;
  /* Not overflow:hidden — the sidebar scrolls when the menu is taller than
     the screen, and hiding the overflow would trap it. A rounded box clips
     its children anyway. */
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-logo { border-bottom: 1px solid var(--chrome-edge); }
.sidebar-logo .brand-name, .sidebar-logo-text .brand-name  { color: #fff; }
.sidebar-logo .brand-place, .sidebar-logo-text .brand-place { color: rgba(255,255,255,.75); }

.sidebar-role-badge,
.sidebar-role-badge.role-admin,
.sidebar-role-badge.role-clerk,
.sidebar-role-badge.role-resident {
  background: rgba(6,134,5,.14); color: #0c5c0b;
}

.sidebar-nav .nav-link { color: var(--chrome-ink-soft); }
.sidebar-nav .nav-link i { color: #4a7f48; }
.sidebar-nav .nav-link:hover { background: rgba(6,134,5,.12); color: var(--chrome-ink); }
.sidebar-nav .nav-link:hover i { color: var(--chrome-ink); }
/* The page you are on is the seal's own green, filled in. */
.sidebar-nav .nav-link.active { background: var(--seal-green); color: #fff; font-weight: 700; }
.sidebar-nav .nav-link.active i { color: #fff; }
.sidebar-nav .nav-link.active::before { background: #056004; }
.sidebar-nav .nav-link.active .badge { background: #fff; color: #0c5c0b; }

.sidebar-footer { border-top: 1px solid var(--chrome-edge); }
.sidebar-footer .nav-link { color: var(--chrome-ink-soft); }
.sidebar-footer .nav-link:hover { background: rgba(6,134,5,.12); color: var(--chrome-ink); }

/* On a pale green the red "new" dot reads on its own — no ring needed. */
.sidebar-nav .nav-link .nav-dot { box-shadow: 0 0 0 3px rgba(198,40,40,.14); }
.sidebar-nav .nav-link.active .nav-dot { box-shadow: 0 0 0 3px rgba(255,255,255,.4); }

/* ── Top bar ── */
.topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
}
.topbar-today .today-date { color: #111827; }
.topbar-today .today-office { color: #6b7280; }
.topbar-today .today-office .dot { background: #93ab92; }
.topbar-today .today-office.open { color: #0c5c0b; }
.topbar-today .today-office.open .dot { background: var(--seal-green); box-shadow: 0 0 0 3px rgba(6,134,5,.18); }

.notif-btn { color: #374151; }
.notif-btn:hover { background: #f3f4f6; color: #111827; }
.topbar-user:hover { background: #f3f4f6; }
.topbar-user .user-name { color: #111827; }
.topbar-user .user-role { color: #6b7280; }
.topbar-user .avatar { background: #1a3e6e; color: #fff; }
.topbar-user .fa-chevron-down { color: #6b7280 !important; }
.topbar .menu-toggle, .topbar .sidebar-toggle { color: #374151; }

/* ══════════════════════════════════════════════════════════════════════
   THE THEME, FINISHED: BLUE · GREEN · WHITE
   Blue carries the page, green carries the frame around it, white holds
   the work. Status colours are untouched — amber still means waiting, red
   still means wrong, and those have to stay what they are.
   ══════════════════════════════════════════════════════════════════════ */

/* The banner across the top of a dashboard was a flat navy that belonged to
   neither colour. It now runs from the seal's blue into its green, which is
   the one place in the system both appear in the same breath. */
.welcome-banner.green,
.welcome-banner.blue,
.welcome-banner.purple {
  background: linear-gradient(115deg, #1d4f8f 0%, #236a8f 52%, #197a4a 100%);
  border: 0;
}
/* The resident's card stays the single light blue that was asked for — only
   a green hairline along the bottom ties it to the rest. */
.welcome-banner.resident {
  background: #2a72c8;
  border-bottom: 3px solid var(--seal-green);
}

/* Section headings get the same blue-into-green rule the page titles have,
   so a long page keeps the two colours running down it. */
.annx-section, .off-group-title, .settings-section-head, .adm-panel-title {
  position: relative;
}
.card-header { border-radius: var(--card-radius) var(--card-radius) 0 0; }

/* Links and anything the page offers you are blue; anything finished is
   green. Nothing else gets to be either. */
a { color: var(--brand-blue); }
a:hover { color: var(--brand-blue-dark); }
.text-primary { color: var(--brand-blue) !important; }
.btn-link { color: var(--brand-blue); }

/* Inputs answer in blue when they are being used. */
.form-control:focus, .form-select:focus {
  border-color: #8fb6e4;
  box-shadow: 0 0 0 3px rgba(40,108,191,.14);
}

/* The modal's head carries the same wash as a card's, so a dialog looks like
   it came from this system rather than from Bootstrap. */
.modal-header {
  background: linear-gradient(#fbfdff, #f3f8fd);
  border-bottom: 1px solid #e3edf7;
  box-shadow: inset 0 -2px 0 -1px rgba(6,134,5,.26);
}
.modal-content { border: 1px solid #dfe9f4; border-radius: 14px; }
.modal-footer { background: #f7fafd; border-top: 1px solid #e9f0f7; }

/* Pagination in the house blue. */
.page-link { color: var(--brand-blue); }
.page-item.active .page-link { background: var(--brand-blue); border-color: var(--brand-blue); }

/* One radius and one shadow across the system, so nothing looks borrowed. */
.card, .modal-content, .filter-panel, .settings-card { border-radius: var(--card-radius); }
.card { box-shadow: 0 1px 2px rgba(20,50,90,.05); }

/* Resident dashboard: Recent Requests / Recent Complaints cards get extra rounding */
.role-resident.page-dashboard .card { border-radius: 20px; }
.role-resident.page-dashboard .card .card-header { border-radius: 20px 20px 0 0; }
@media (max-width: 576px) {
  .role-resident.page-dashboard .card .card-header { padding: 10px 14px; font-size: 14px; }
  .role-resident.page-dashboard .card .card-body .d-flex.border-bottom { padding: 8px 14px !important; }
  .role-resident.page-dashboard .card .card-body .d-flex.border-bottom .text-truncate { font-size: 12.5px !important; }
  .role-resident.page-dashboard .card .card-body .d-flex.border-bottom div[style*="11.5px"] { font-size: 10.5px !important; }
  .role-resident.page-dashboard .card .card-body .badge { font-size: 10.5px; padding: 3px 8px; }
}

/* The floating buttons a resident always sees: emergency stays red because it
   is an emergency; the message button takes the barangay's green. */
.float-chat { background: var(--seal-green); }
.float-chat:hover { background: #0a6e0c; }

/* ══════════════════════════════════════════════════════════════════════
   THE PANELS, IN LIGHT BLUE
   The sidebar and the bar across the top go back to blue — but a light
   blue, not the deeper one they were wearing. It is a step paler than
   that, and at the same time a touch more saturated, so the colour is
   plainly blue rather than a grey that happens to lean cool.

   The dark inks on it were measured against the new background: headings
   land at 11.3:1 and the small print at 5.6:1, both past the 4.5:1 mark.
   "Office open" keeps its green, because that is a status and statuses
   do not change colour. Everything else here follows the blue.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --chrome-blue:     #286cbf;   /* the blue the panels lean on   */
  --chrome-green:    #d3e4f7;   /* the light wash for the panels */
  --chrome-edge:     #a8c8e8;   /* its border                    */
  --chrome-ink:      #0d2b45;   /* headings on it                */
  --chrome-ink-soft: #17456f;   /* links on it                   */
  --chrome-ink-mute: #3a5a78;   /* small print on it             */
}

.sidebar-logo .brand-name, .sidebar-logo-text .brand-name  { color: #fff; }
.sidebar-logo .brand-place, .sidebar-logo-text .brand-place { color: rgba(255,255,255,.75); }

.sidebar-role-badge,
.sidebar-role-badge.role-admin,
.sidebar-role-badge.role-clerk,
.sidebar-role-badge.role-resident {
  background: rgba(40,108,191,.16); color: #14456f;
}

.sidebar-nav .nav-link i { color: #4b749f; }
.sidebar-nav .nav-link:hover { background: rgba(40,108,191,.12); color: var(--chrome-ink); }
.sidebar-nav .nav-link:hover i { color: var(--chrome-ink); }
/* The page you are on is filled in, in the house blue. */
.sidebar-nav .nav-link.active { background: var(--chrome-blue); color: #fff; font-weight: 700; }
.sidebar-nav .nav-link.active i { color: #fff; }
.sidebar-nav .nav-link.active::before { background: #1d5596; }
.sidebar-nav .nav-link.active .badge { background: #fff; color: #14456f; }
.sidebar-footer .nav-link:hover { background: rgba(40,108,191,.12); color: var(--chrome-ink); }

.topbar-today .today-office .dot { background: #93a9c0; }
.notif-btn:hover { background: rgba(40,108,191,.12); color: var(--chrome-ink); }
.topbar-user:hover { background: rgba(40,108,191,.12); }
.topbar-user .avatar { background: var(--chrome-blue); color: #fff; }
.topbar-user .fa-chevron-down { color: #4b749f !important; }

/* ── The dashboard's welcome banner: one flat blue ───────────────────────
   The band at the top of a dashboard was a gradient running blue into
   green. It is now the house blue and nothing else — a plain block of
   colour, so the first thing on the page is the calmest thing on it.
   White on this blue measures 5.3:1, past the 4.5:1 mark.

   The resident's banner and the cards further down keep what they have. */
.welcome-banner.green,
.welcome-banner.blue,
.welcome-banner.purple {
  background: var(--brand-blue);
  border: 0;
}


.topbar {
  margin-left: 0;
  border-left: none;
}
/* ── "See all notifications", under the bell ─────────────────────────────
   The dropdown stops at the newest fifteen. This is the way out of it, and
   it sits on the dropdown's own floor so it stays put while the list above
   scrolls. */
.notif-seeall {
  display: block;
  padding: 11px 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  background: #f7fafd;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  transition: background var(--transition);
}
.notif-seeall:hover { background: #eaf2fb; color: var(--brand-blue-dark); }
.notif-seeall i { font-size: 11px; transition: transform var(--transition); }
.notif-seeall:hover i { transform: translateX(3px); }

/* ── The notifications page ──────────────────────────────────────────────
   The same rows as the dropdown, given room to breathe and grouped by day.
   Unread rows carry a pale blue wash and a "New" tag; read ones are plain,
   so the eye finds what is new without reading a word. */
.notif-page-list { padding: 0; overflow: hidden; }
.notif-day {
  padding: 10px 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5b7390;
  background: #f4f8fd;
  border-bottom: 1px solid #e8eef6;
}
.notif-day:not(:first-child) { border-top: 1px solid #e8eef6; }

.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: #f7fafd; }
.notif-row.unread { background: #eff6ff; }
.notif-row.unread:hover { background: #e6f0fd; }

.notif-row .notif-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
/* One colour per kind, matching the icon the bell already uses. */
.notif-row .notif-icon.doc    { background: #dbeafe; color: #1d4ed8; }
.notif-row .notif-icon.comp   { background: #fee2e2; color: #b91c1c; }
.notif-row .notif-icon.borrow { background: #ffedd5; color: #c2410c; }
.notif-row .notif-icon.reg    { background: #dcfce7; color: #15803d; }
.notif-row .notif-icon.job    { background: #eaf2fc; color: #1d4f8f; }
.notif-row .notif-icon.ann    { background: #cffafe; color: #0e7490; }
.notif-row .notif-icon.gen    { background: #e8edf4; color: #475569; }

.notif-row .notif-body { min-width: 0; flex: 1; }
.notif-row .notif-body .title { font-size: 13.5px; font-weight: 700; color: #111827; }
.notif-row.unread .notif-body .title { color: #0d2b45; }
.notif-row .notif-body .msg {
  font-size: 12.5px; color: #5b6b7f; line-height: 1.5; margin-top: 2px;
}
.notif-row .notif-when {
  flex-shrink: 0; text-align: right;
  font-size: 11.5px; color: #8a97a8; white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.notif-new {
  background: var(--brand-blue); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 20px;
}

/* The chip row holds the kind-of-notification menu on its right. */
.notif-filters .dropdown .filter-chip { cursor: pointer; }

@media (max-width: 575px) {
  .notif-row { padding: 12px 13px; gap: 10px; }
  .notif-row .notif-body .msg { font-size: 12px; }
  /* On a narrow screen the time drops under the text rather than squeezing it. */
  .notif-row .notif-when { font-size: 11px; }
}

/* ── A resident's top bar meets the side panel square ────────────────────
   Staff keep the curve where the bar turns into the sidebar. On the
   resident's side that corner is squared off, as asked. */
body.role-resident .topbar { border-radius: 0; }

/* ── Announcements on a narrow screen ────────────────────────────────────
   Once the side panel drops above the posts, the whole page was coming out
   about 700px wide whatever the screen was — so on a phone you saw roughly
   half of it and had to scroll sideways for the rest.

   Two things caused it. The stacked grid used `1fr`, which refuses to go
   narrower than its contents; and the category buttons were each asking
   for a third of the row and refusing to wrap their labels, so between
   them they demanded ~664px before anything could shrink.

   The column is now minmax(0,1fr), which is allowed to shrink, and the
   category buttons take their natural width and wrap onto as many rows as
   they need — every category stays visible, none of it hides off-screen. */
@media (max-width: 992px) {
  .annx-layout { grid-template-columns: minmax(0, 1fr); }
  .annx-side, .annx-feed { min-width: 0; }
  .annx-side .annx-cats { flex-wrap: wrap; overflow: visible; gap: 8px; }
  .annx-side .annx-cats .filter-chip { flex: 0 1 auto; min-width: 0; white-space: normal; }
}

/* ── The ready-made questions keep to the left ───────────────────────────
   They were allowed to run the full width of the thread, so a row of them
   finished over on the right-hand side, where only the resident's own
   messages belong. They now sit inside the same column an incoming
   message uses, and wrap onto another row instead of reaching across. */
.chat-quick { max-width: min(78%, 560px); }
@media (max-width: 768px) { .chat-quick { max-width: 86%; } }

/* ── A message, its name and its time share one edge ─────────────────────
   The name above a bubble and the time under it each carried a 3px side
   margin, so neither lined up with the bubble between them — every message
   was three pixels out, on the left going down and on the right coming
   back. They now sit flush with the bubble's own edge, which is what the
   eye follows down a conversation.

   The thread also keeps a gutter on both sides, not just the side with the
   scrollbar, so the left and right margins of the conversation match. */
.msg-name { margin: 0 0 4px; }
.msg-time { margin: 4px 0 0; }
.chat-messages { scrollbar-gutter: stable both-edges; }

/* ── The composer lines up with the conversation ─────────────────────────
   The box you type in carried 80px of padding on its right, to keep the
   send button clear of the floating emergency button. That button is no
   longer on this page, so all the padding did was push the whole composer
   to the left of the messages above it.

   Padding now matches the thread's: its own side margin plus the width of
   the thread's scrollbar, since the thread reserves that on both edges.
   The result is one straight line down each side of the conversation —
   first message, last message, and the box you type in. */
:root {
  --chat-pad: 18px;   /* the conversation's side margin        */
  --chat-bar: 5px;    /* the scrollbar the thread reserves for */
}
.chat-messages   { padding-left: var(--chat-pad); padding-right: var(--chat-pad); }
.chat-input-wrap,
.chat-staff-note {
  padding-left:  calc(var(--chat-pad) + var(--chat-bar));
  padding-right: calc(var(--chat-pad) + var(--chat-bar));
}
@media (max-width: 575.98px) {
  :root { --chat-pad: 12px; }
}

/* ── Alerts you have sent, under the emergency form ──────────────────────
   A short log at the foot of the emergency dialog: what was raised, when,
   and where it got to. It is capped in height so the dialog does not grow
   past a phone screen — six entries scroll inside it.

   The three states keep the colours they mean everywhere else: red while
   nobody has picked it up, blue while staff are on their way, green once
   it is done. */
.sos-history {
  border-top: 1px solid #f0e3e3;
  background: #fcfafa;
  padding: 12px 18px 14px;
}
.sos-history-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: #8a7d7d;
  margin-bottom: 8px;
}
.sos-history-list { max-height: 168px; overflow-y: auto; }

.sos-past {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f3eded;
}
.sos-past:last-child { border-bottom: 0; }
.sos-past-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fdeaea; color: #b3312f;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
}
.sos-past-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sos-past-type { font-size: 12.8px; font-weight: 700; color: #2b2323; }
.sos-past-when { font-size: 11px; color: #9b8f8f; }

.sos-pill {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.sos-pill.is-open   { background: #fde2e2; color: #a92a28; }   /* nobody yet   */
.sos-pill.is-coming { background: #eaf2fc; color: #1d4f8f; }   /* on their way */
.sos-pill.is-done   { background: #d9f2e1; color: #1a7038; }   /* finished     */
[data-theme="dark"] .sos-pill.is-coming { background: #1e3a5f; color: #bfdbfe; }
[data-theme="dark"] .sos-closed-note { background: #1e3a5f; border-color: #315276; color: #bfdbfe; }

@media (max-width: 575.98px) {
  .sos-history { padding: 11px 14px 12px; }
  .sos-history-list { max-height: 132px; }
  .sos-past-when { font-size: 10.5px; }
}

/* When the alert form is the panel on screen the dialog is already tall, so
   the log above the footer gives up some of its height — it still scrolls,
   and the form stays the thing you came for. */
#sosFormPanel:not([hidden]) ~ .sos-history .sos-history-list { max-height: 92px; }

/* ── A resident's Messages fills the screen, and only the thread scrolls ──
   The conversation used a guessed height (100vh minus 165px), which never
   quite matched what the page header and padding actually took, so the
   whole page scrolled a little underneath the chat.

   Instead of guessing, the chat now takes whatever is left: the wrapper is
   exactly one screen tall, the content area is a column, and the chat box
   is the part of it that stretches. Nothing is left over to scroll, and
   scrolling happens where it belongs — inside the messages.

   Only the resident's side. Staff share the file name but their page has a
   list of conversations and the alerts table above it, and that page is
   meant to scroll. */
body.page-messages { overflow: hidden; height: 100vh; }
body.page-messages .main-wrapper { height: 100%; overflow: hidden; }
body.page-messages .page-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0 !important;
}
body.page-messages .page-header { margin-bottom: 10px; flex-shrink: 0; }
body.page-messages .page-content > .card { flex-shrink: 0; }
body.page-messages .chat-shell,
body.page-messages .chat-wrapper {
  flex: 1 1 0;
  height: 0;
  min-height: 0 !important;
  overflow: hidden;
}

/* ── The two floating buttons, squared up with the page ──────────────────
   They sat 22px from the edges while the page itself keeps a 24px margin,
   so they hung slightly outside the column of content and slightly too low.
   Both offsets now match the page's own margin exactly — 24px on a screen,
   12px on a phone — so the stack lines up with the right-hand edge of the
   cards above it and with their bottom edge.

   They are a little smaller too: 46px instead of 50px. The emergency button
   does not need bulk to be found, it has the colour and the pulse. */
body.role-resident .page-content { padding-bottom: 130px; }
.float-stack { right: 18px; bottom: 28px; gap: 11px; transition: transform .25s ease; }
.float-btn { width: 46px; height: 46px; font-size: 17.5px; }
.float-toggle {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1px solid #d1d5db; color: #6b7280;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; cursor: pointer; align-self: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  transition: background .15s, color .15s;
}
.float-toggle:hover { background: #f3f4f6; color: #374151; }
.float-stack .float-btn { transition: opacity .2s, transform .2s; }
.float-stack.is-hidden .float-btn { pointer-events: none; opacity: 0; transform: translateY(30px); }
.float-stack.is-hidden .float-toggle { margin-top: -8px; }

@media (max-width: 576px) {
  .float-stack { right: 14px; bottom: 14px; gap: 10px; }
  .float-btn { width: 44px; height: 44px; font-size: 16.5px; }
}

/* ── Request cards carry their status as a full colour ───────────────────
   They used to be white with a coloured stripe down the left. Now the whole
   card takes the colour, the way the dashboard tiles do, so a list can be
   read at arm's length — everywhere: a resident's own requests, and the
   clerk's and administrator's queues. The stripe stays, a shade deeper, so
   the edge still reads where cards sit side by side.

   The colours are the ones each status already means, and the small print
   was darkened to #4b5563 to sit on them — measured against all seven, the
   weakest pairing is 5.93:1, past the 4.5:1 mark. */
.list-item-note { font-size: 12.5px; color: #6b7280; }
.list-item-note.is-small { font-size: 12px; }

.list-item-card.lc-pending,  .equip-card.lc-pending  { background: #fff; border-color: #d5d5d5; border-left-color: #c98a12; }
.list-item-card.lc-progress, .equip-card.lc-progress { background: #fff; border-color: #d5d5d5; border-left-color: #2f66ab; }
.list-item-card.lc-ready,    .equip-card.lc-ready    { background: #fff; border-color: #d5d5d5; border-left-color: #286cbf; }
.list-item-card.lc-success,  .equip-card.lc-success  { background: #fff; border-color: #d5d5d5; border-left-color: #1f8a4c; }
.list-item-card.lc-overdue,  .equip-card.lc-overdue  { background: #fff; border-color: #d5d5d5; border-left-color: #b82220; }
.list-item-card.lc-duesoon,  .equip-card.lc-duesoon  { background: #fff; border-color: #d5d5d5; border-left-color: #bf5f14; }
.list-item-card.lc-muted,    .equip-card.lc-muted    { background: #fff; border-color: #d5d5d5; border-left-color: #8f98a4; }

.list-item-card[class*="lc-"], .equip-card[class*="lc-"] { border-left-width: 4px; }
/* The small print has to be darker than it is on white, or the colour eats it. */
.list-item-card[class*="lc-"] .list-item-sub,
.list-item-card[class*="lc-"] .list-item-note,
.equip-card[class*="lc-"] .list-item-sub,
.equip-card[class*="lc-"] .list-item-note { color: #4b5563; }
/* The staff lists carry a third, fainter line — who asked and what for.
   At #9ca3af it all but vanished on a colour; #55616f keeps it quieter
   than the rest of the card while still clearing 4.96:1 on every fill. */
.list-item-card[class*="lc-"] .list-item-meta,
.equip-card[class*="lc-"] .list-item-meta { color: #55616f; }
/* The icon sits on a pane of white so it belongs to the card it is on. */
.list-item-card[class*="lc-"] .list-item-icon { background: rgba(255,255,255,.72); }
/* Hovering must not wash the colour back out to the plain blue edge. */
.list-item-card.js-clickable[class*="lc-"]:hover,
.equip-card.js-clickable[class*="lc-"]:hover { box-shadow: 0 4px 16px rgba(20, 50, 90, .14); }

/* ── Rejected is maroon, not grey ────────────────────────────────────────
   A rejected card was sharing the archive's grey with cancelled ones, while
   its number badge on the filter chip was maroon — so the two disagreed on
   the same page. It now takes the maroon the badge already uses: #9f1239,
   and on the Equipment page the dark red that module was given instead.

   Cancelled keeps the grey. Withdrawn by the resident and turned down by
   the barangay are not the same thing, and the colours should not say they
   are. The small print clears 5.9:1 on this fill, the fainter line 4.9:1. */
.list-item-card.lc-rejected, .equip-card.lc-rejected {
  background: #eeb8cc; border-color: #d98fab; border-left-color: #9f1239;
}
/* Deeper than the others, so it cannot be mistaken for the overdue red —
   43 apart in RGB, where it used to be 10. At that depth the two quiet
   text tones have to come down with it: 5.6:1 and 4.8:1 on this fill. */
.list-item-card.lc-rejected .list-item-sub,
.list-item-card.lc-rejected .list-item-note,
.equip-card.lc-rejected .list-item-sub,
.equip-card.lc-rejected .list-item-note { color: #3d4653; }
.list-item-card.lc-rejected .list-item-meta,
.equip-card.lc-rejected .list-item-meta { color: #46505e; }
body.page-borrow .list-item-card.lc-rejected,
body.page-borrow .equip-card.lc-rejected { border-left-color: var(--eq-rejected); }

/* ══════════════════════════════════════════════════════════════════════
   THE PANELS GO BLUE
   The sidebar and the bar across the top stop being a wash and become the
   colour itself — the house blue, deepened to #1d5596 so that everything
   standing on it still reads. The brand blue is a shade too light to carry
   small white text; this one clears 7.5:1 for white, 5.5:1 for the quieter
   lines and 4.8:1 for the faintest.

   Everything on them flips with the background: the text is white, the
   page you are on is a white pill with blue inside it, and "office open"
   keeps its green but a light one, because a leaf-green on navy cannot be
   read. The page behind stays pale, so the panels frame it.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --chrome-blue:     #1d5596;   /* the panels themselves          */
  --chrome-green:    #1d5596;   /* the fill token the panels use  */
  --chrome-edge:     #17457a;   /* the line where one panel ends  */
  --chrome-ink:      #ffffff;   /* headings on it                 */
  --chrome-ink-soft: rgba(255,255,255,.88);   /* links on it      */
  --chrome-ink-mute: rgba(255,255,255,.72);   /* small print      */
}

/* The borders inside a panel are lighter than the panel, not darker. */
.sidebar-logo, .sidebar-footer { border-color: rgba(255,255,255,.16); }

.sidebar-role-badge,
.sidebar-role-badge.role-admin,
.sidebar-role-badge.role-clerk,
.sidebar-role-badge.role-resident {
  background: rgba(255,255,255,.18); color: #fff;
}

.sidebar-nav .nav-link i { color: rgba(255,255,255,.72); }
.sidebar-nav .nav-link:hover,
.sidebar-footer .nav-link:hover,
.topbar-user:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar-nav .nav-link:hover i { color: #fff; }

/* The page you are on: white, filled in, with the blue inside it. */
.sidebar-nav .nav-link.active { background: #fff; color: #1b5293; font-weight: 700; }
.sidebar-nav .nav-link.active i { color: #1b5293; }
.sidebar-nav .nav-link.active::before { background: #0f3e75; }
.sidebar-nav .nav-link.active .badge { background: #1b5293; color: #fff; }
/* The "something new" dot needs a ring of the panel, not of the old page. */
.sidebar-nav .nav-link .nav-dot { box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.sidebar-nav .nav-link.active .nav-dot { box-shadow: 0 0 0 3px rgba(27,82,147,.25); }

/* The brand block that only shows on a phone. */
.topbar-barangay .brgy-name { color: #111827; }
.topbar-barangay .brgy-loc  { color: #6b7280; }
.topbar .menu-toggle, .topbar .sidebar-toggle, .topbar-toggle { color: #374151; }
.topbar-toggle:hover { background: #f3f4f6; color: #111827; }

.topbar-today .today-office { color: #6b7280; }
.topbar-today .today-office .dot { background: #98a2b3; }
.topbar-today .today-office.open { color: #15803d; }
.topbar-today .today-office.open .dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }

.topbar-user .avatar { background: #1a3e6e; color: #fff; }
.topbar-user .fa-chevron-down { color: #6b7280 !important; }

/* ── The resident's welcome card, plain blue ─────────────────────────────
   It carried a green hairline along the bottom, from back when the frame
   around it was green and the line tied the two together. The panels are
   blue now, so the line is the only green left on the page and it reads as
   a stray edge. Gone, and the card takes the same blue the staff banner
   took, so all three dashboards open the same way. */
.welcome-banner.resident { background: var(--brand-blue); border-bottom: 0; }

/* ── Signing in on a phone held upright ──────────────────────────────────
   The card stacked correctly but nothing shrank with it: the barangay
   header kept a desktop seal and a desktop wordmark, the form kept desktop
   type, and the whole thing came to ~880px — taller than a phone screen,
   and running edge to edge with no page showing around it, which is what
   made it look oversized.

   The card gets its margin back, and everything inside it steps down one
   size. It now comes to about two thirds of what it was, so a portrait
   screen shows the seal, the name and the form together. */
@media (max-width: 860px) {
  /* A gutter, so the card reads as a card and not as the page itself. */
  .login-page { padding: 14px 12px; align-items: center; }
  .login-shell { margin: 0 auto; }
}

@media (max-width: 575.98px) {
  .login-brand { padding: 20px 20px 18px; }
  .login-seal { width: 52px; height: 52px; }
  .login-wordmark { font-size: 21px; margin: 10px 0 1px; letter-spacing: -.2px; }
  .login-place { font-size: 12px; }
  .login-tagline { font-size: 12.8px; line-height: 1.45; margin-top: 10px; }

  .login-form-side { padding: 22px 18px 24px; }
  .login-form-side h2 { font-size: 20px; }
  .login-form-side .login-sub { font-size: 12.5px; margin-bottom: 16px; }
  .login-form-side .form-label { font-size: 11.8px; margin-bottom: 4px; }
  .login-form-side .mb-3 { margin-bottom: 12px !important; }
  .login-form-side .login-back { margin-top: 12px; }
}

/* A short screen in landscape has even less to give: the tagline is the
   first thing to go, since the name above it already says whose this is. */
@media (max-height: 560px) and (max-width: 860px) {
  .login-tagline { display: none; }
  .login-brand { padding: 16px 20px 14px; }
}

/* ── The panels, a lighter blue ──────────────────────────────────────────
   One step up from the deep blue they were: #2566a8 instead of #1d5596.
   Lighter leaves less room underneath it, so the quieter lines come up
   with it — the links go to plain white and the small print to 86%, which
   measures 4.9:1 against the new background (white itself is 5.9:1). The
   "office open" green is lifted for the same reason.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --chrome-blue:     #2566a8;
  --chrome-green:    #2566a8;
  --chrome-edge:     #1e5590;
  --chrome-ink:      #ffffff;
  --chrome-ink-soft: #ffffff;
  --chrome-ink-mute: rgba(255,255,255,.86);
}
.topbar-barangay .brgy-loc { color: #6b7280; }
.sidebar-nav .nav-link i { color: rgba(255,255,255,.86); }
.topbar-today .today-office { color: #6b7280; }
.topbar-today .today-office .dot { background: #98a2b3; }
.topbar-today .today-office.open { color: #15803d; }
.topbar-today .today-office.open .dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.topbar-user .fa-chevron-down { color: #6b7280 !important; }
/* On a lighter panel the washes need a little more of themselves to show. */
.sidebar-nav .nav-link:hover,
.sidebar-footer .nav-link:hover { background: rgba(255,255,255,.18); }
.notif-btn:hover,
.notif-btn:focus-visible { background: #eaf2fc; color: #1d4f8f; }
.topbar-user:hover { background: #f3f4f6; }
.sidebar-role-badge,
.sidebar-role-badge.role-admin,
.sidebar-role-badge.role-clerk,
.sidebar-role-badge.role-resident { background: rgba(255,255,255,.22); }
.sidebar-logo, .sidebar-footer { border-color: rgba(255,255,255,.20); }

/* ══════════════════════════════════════════════════════════════════════
   THE REST OF THE BLUE, LIGHTENED TO MATCH
   The panels went lighter; everything else wearing the house blue follows,
   or the page is two blues arguing. The working blue moves from #245fa8 to
   #2d74bd — white on it still measures 4.8:1, and it still reads as a link
   on white at the same 4.8:1, so nothing is lost by the change.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --primary:          #2d74bd;
  --primary-dark:     #235d9c;
  --brand-blue:       #2d74bd;
  --brand-blue-dark:  #235d9c;
}
/* The deep ends of the gradients came down with it — these were the darkest
   blue left anywhere, and they were what read as heavy. */
.chat-topbar { background: linear-gradient(135deg, var(--primary) 0%, #2a68ac 100%); }
.sidebar-nav .nav-link.active::before { background: #1d5596; }

/* Light mode sidebar: deeper logo blue with a soft blue selected row. */
html:not([data-theme="dark"]) .sidebar {
  background: #1f568f;
  border-right-color: #194779;
}
html:not([data-theme="dark"]) .sidebar-logo { border-bottom-color: #3d70a3; }
html:not([data-theme="dark"]) .sidebar .brand-name { color: #f0f6fd; }
html:not([data-theme="dark"]) .sidebar .brand-place { color: #d2e2f2; }
html:not([data-theme="dark"]) .sidebar .sidebar-role-badge { background: #356aa0; color: #edf5fd; }
html:not([data-theme="dark"]) .sidebar .nav-section-label { color: #c4d8ed; }
html:not([data-theme="dark"]) .sidebar-nav .nav-link { color: #edf5fd; }
html:not([data-theme="dark"]) .sidebar-nav .nav-link i { color: #c9def3; }
html:not([data-theme="dark"]) .sidebar-nav .nav-link:hover { background: #2c669f; color: #f5f9ff; }
html:not([data-theme="dark"]) .sidebar-nav .nav-link:hover i { color: #f5f9ff; }
html:not([data-theme="dark"]) .sidebar-nav .nav-link.active { background: #e1edfa; color: #164b80; }
html:not([data-theme="dark"]) .sidebar-nav .nav-link.active i { color: #164b80; }
html:not([data-theme="dark"]) .sidebar-nav .nav-link.active::before { background: #83b0df; }

/* ── The search and filter bar is tinted, not blank ──────────────────────
   It sits above every list and was the same white as the list itself, so
   the two ran together. A pale blue separates the controls you change from
   the records you are reading, and ties them to the panels around them. */
.filter-panel, .search-card, .annx-toolbar {
  background: #fff;
  border: 1px solid #d5d5d5;
}
/* The fields inside it stay white, so what you can type in still stands out
   against what the bar itself is. */
.filter-panel .form-control, .filter-panel .form-select,
.search-card .form-control, .search-card .form-select,
.annx-toolbar .annx-search { background: #fff; }
.search-card .input-group-text, .filter-panel .input-group-text { background: #fff; border-color: #dbe4f0; }
.filter-panel .filter-group-label { color: #46607e; }

/* ── Headers, in light grey ──────────────────────────────────────────────
   One surface for everything that titles a block of records: the strip at
   the top of a card, the head of a table, and the bar holding the search box
   and the filters. They all take the same soft grey, so a page reads as a
   stack of labelled sections rather than one long sheet of white. Dark text
   on it measures 12.9:1, so nothing on a header is a squint.

   A header is also left-aligned now. It was a flex row set to space-between,
   which with only an icon and a title pushed the title to the far right of
   the card. Headers that genuinely put something on the right say so with
   Bootstrap's own class, and those are left as they are. */
.card-header:not(.d-flex):not(.justify-content-between) { justify-content: flex-start; }

.card-header,
.table > thead th,
.filter-panel, .search-card, .annx-toolbar {
  background: #f8f9fa;
  color: #1f2937;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: none;
}
.card-header i { color: #6b7684; }
.table > thead th { font-weight: 700; }
/* The bars that hold controls are boxed on all four sides, not just under. */
.filter-panel, .search-card, .annx-toolbar { border: 1px solid #d5d5d5; }
/* What you can type in stays white, so it stands out from the bar it is on. */
.filter-panel .form-control, .filter-panel .form-select,
.search-card .form-control, .search-card .form-select,
.annx-toolbar .annx-search { background: #fff; }
.search-card .input-group-text, .filter-panel .input-group-text { background: #fff; border-color: #dde1e6; }
.filter-panel .filter-group-label { color: #5b6472; }

/* ── A row of filter chips, in a bar of its own ──────────────────────────
   Where a chip row stands on its own — Notifications — it gets the same
   grey the other filter bars wear, so it reads as the controls for the list
   rather than as loose buttons on the page. Rows that sit directly under a
   search card are left as they are: two grey bars stacked is the thing this
   is trying to avoid. */
.filter-chips.filter-bar {
  background: #eef0f3;
  border: 1px solid #dfe3e8;
  border-radius: var(--card-radius);
  padding: 10px 12px;
}

/* ── A table head directly under a card header ───────────────────────────
   Where the two meet — Residents, Messages, System Settings — two bands of
   the same grey read as one tall header. The table head takes a pale blue
   there instead, so the section's title and the column labels are plainly
   two different things. Dark blue on it measures 8.7:1.

   It is keyed off the markup, not the page: only a table whose head follows
   a card header is touched, so any list that stands on its own keeps the
   grey it has. */
.card > .card-header + .table-responsive .table > thead th,
.card > .card-header + .audit-scroll .table > thead th,
.card > .card-header + .alert-scroll .table > thead th,
.card > .card-header + .um-toolbar,
.card > .card-header + .table > thead th {
  background: #eaf1fa;
  color: #17456f;
  border-bottom: 1px solid #cfdeef;
}

/* ── Action history on a complaint ───────────────────────────────────────
   Each entry says what the case was moved to, and under it what was done.
   The status leads because that is what somebody scanning the history is
   looking for; the note underneath is the detail. The dots are left plain —
   the badge already carries the colour, and a column of coloured circles
   beside coloured badges was saying the same thing twice. */
.tl-head { margin: 0 0 5px; }
.tl-status { font-size: 12px; font-weight: 700; color: #286cbf; display: inline-flex; align-items: center; gap: 6px; }
/* The status is set in plain text now — no badge, no colour. The card is a
   record of what happened, and the colour is already on the complaint. */
.tl-status strong { color: #1f2937; font-weight: 800; }
.timeline-body p { color: #3f4a5a; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE DASHBOARD — must be last so it wins over the themed overrides
   above that re-set stat-card/welcome-banner sizes without a breakpoint.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  /* Welcome banners breathe on phones */
  .welcome-banner { padding: 18px 16px; margin-bottom: 16px; }
  .welcome-banner h2 { font-size: 17px; }
  .welcome-banner p, .welcome-banner .wb-sub { font-size: 12px; }

  /* Stat cards: compact for phones */
  .stat-card { padding: 14px 12px; gap: 10px; flex-direction: column; align-items: flex-start; }
  .stat-icon { width: 36px; height: 36px; border-radius: 8px; font-size: 15px; }
  .stat-body .stat-value { font-size: 22px; }
  .stat-body .stat-label { font-size: 11px; line-height: 1.3; }
  .stat-body .stat-sub { font-size: 10px; }
  .stat-go { display: none; }

  /* Dashboard glassmorphism cards: tighter on mobile */
  body.page-dashboard .stat-card[class*="tint-"] { padding: 14px 12px; gap: 8px; border-radius: 12px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-icon { width: 34px; height: 34px; border-radius: 8px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-icon img { width: 22px; height: 22px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-value { font-size: 22px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-label { font-size: 11px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-sub { font-size: 10px; }

  /* Tighten the gutter between stat columns */
  .row.g-3 > [class*="col-6"] { padding-left: 5px; padding-right: 5px; }

  /* Admin date filter: horizontally scrollable pills, stacked date inputs */
  #dashFilterCard .card-body { padding: 10px 12px; gap: 6px; flex-direction: column; align-items: stretch; }
  #periodPills { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; white-space: nowrap; width: 100%; }
  #periodPills .btn { font-size: 11.5px; padding: 4px 10px; flex-shrink: 0; }
  #customRangeForm { width: 100%; }
  #customRangeForm input[type="date"] { width: 100% !important; flex: 1; }

  /* Chart card header */
  .card-header { font-size: 13px; flex-wrap: wrap; gap: 6px; }
  #chartHeaderInfo .badge { font-size: 10px; }

  /* Chart filter tabs: scroll horizontally on mobile */
  #chartFilter { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; white-space: nowrap; max-width: 100%; }
  #chartFilter .btn { font-size: 10.5px; padding: 3px 8px; flex-shrink: 0; }
  .card-header.d-flex { flex-direction: column; align-items: flex-start; }
  .card-header.d-flex #chartFilter { width: 100%; }

  /* Recent items rows */
  .card .d-flex.border-bottom { padding: 10px 14px !important; }

  /* Clerk walk-in bar */
  .card-body.d-flex.flex-wrap .btn-sm { font-size: 11.5px; padding: 4px 10px; }
  .card-body.d-flex.flex-wrap .btn-light-solid-primary.btn-sm,
  #users .card-header .btn-light-solid-primary.btn-sm { font-size: 11.5px; padding: 4px 10px; }

  /* ── Mobile filter chips → dropdown ──────────────────────────────────── */
  .filter-chips:not(.annx-cats) > .filter-chip { display: none !important; }
  .filter-chips-mobile { display: block !important; flex: 1; min-width: 0; }
  #periodPills { display: none !important; }
  .period-pills-mobile { display: block !important; width: 100%; }
  .annx-cats > .filter-chip { display: none !important; }
  .annx-cats-mobile { display: block !important; width: 100%; }

  /* Search-card rows: stack inputs tighter on phones */
  .search-card .row.g-2 > [class*="col-"] { padding-left: 4px; padding-right: 4px; }
  .search-card .form-control,
  .search-card .form-select { font-size: 13px; }

  /* ── Register page: compact header + step indicator ──────────────────── */
  .register-page { padding: 16px 10px; }
  .reg-brand { padding: 24px 16px 18px; }
  .reg-seal { width: 56px; height: 56px; }
  .reg-brand-name { font-size: 18px; }
  .reg-brand-sub { font-size: 13px; }
  .reg-body { padding: 0 14px 16px; }

  .step-tabs { flex-wrap: nowrap; }
  .step-tab-label { font-size: 10.5px; padding-bottom: 8px; }
  .step-tab { padding: 10px 4px 0; }

  /* Register: hide QR / "use your phone" on mobile — the user IS on a phone */
  .phone-capture,
  .pc-use-phone,
  .cc-other { display: none !important; }

  /* ── Admin / Clerk mobile responsiveness ─────────────────────────────── */

  /* Page header: stack title + buttons vertically */
  .page-header { flex-direction: column; gap: 10px; }
  .page-header > .d-flex { width: 100%; }
  .page-header > .d-flex .btn { flex: 1; font-size: 12px; white-space: nowrap; }
  .page-header h1 { font-size: 17px; }
  .page-header h1 > i { display: none; }
  .page-header .page-subtitle { font-size: 12px; }

  /* Topbar: avatar smaller, chevron hidden */
  .topbar-user .avatar { width: 30px; height: 30px; font-size: 12px; }
  .topbar-user > .fa-chevron-down { display: none; }
  .topbar-actions { gap: 4px; }
  .notif-btn { padding: 6px; font-size: 16px; }

  /* Filter panel: inputs stack, smaller text */
  .filter-panel .form-control,
  .filter-panel .form-select,
  .search-card .form-control,
  .search-card .form-select { font-size: 12.5px; height: 34px; }
  .filter-panel .btn,
  .search-card .btn { font-size: 12px; padding: 5px 10px; }

  /* Tables: scroll hint + compact cells */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table th { padding: 8px 10px; font-size: 10.5px; letter-spacing: .4px; }
  .table td { padding: 8px 10px; font-size: 12px; }
  .table { white-space: nowrap; }

  /* Action buttons in tables: icon-only, smaller */
  .action-btns .btn { padding: 3px 7px; font-size: 11px; }
  .action-btns .btn-icon { width: 28px; height: 28px; }
  .action-btns .btn .btn-label-text { display: none; }

  /* Pagination: compact */
  .pagination { gap: 2px; }
  .page-link { padding: 4px 8px; font-size: 12px; }

  /* Stat cards on dashboard: tighter */
  .stat-card { padding: 12px 10px; gap: 8px; }
  .stat-icon { width: 34px; height: 34px; font-size: 14px; }
  .stat-body .stat-value { font-size: 20px; }
  .stat-body .stat-label { font-size: 10.5px; }

  body.page-dashboard .stat-card[class*="tint-"] { padding: 12px 10px; gap: 6px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-icon { width: 30px; height: 30px; border-radius: 8px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-icon img { width: 20px; height: 20px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-value { font-size: 20px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-label { font-size: 10.5px; }
  body.page-dashboard .stat-card[class*="tint-"] .stat-sub { font-size: 9.5px; }

  /* Welcome banner */
  .welcome-banner { padding: 16px 14px; margin-bottom: 14px; }
  .welcome-banner h2 { font-size: 16px; }
  .welcome-banner p { font-size: 12px; }

  /* Badges inside tables */
  .badge { font-size: 10.5px; padding: .25em .5em; }

  /* Cards: tighter spacing */
  .card-header { padding: 10px 14px; font-size: 13px; }
  .card-body { padding: 12px; }

  /* Modals: full width, no side margins */
  .modal-dialog { margin: 8px; }

  /* ── Document / Complaint list cards ─────────────────────────────────── */
  .list-item-card {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 8px;
  }
  .list-item-icon { width: 30px; height: 30px; font-size: 13px; border-radius: 7px; }
  .list-item-title { font-size: 13px; }
  .list-item-sub { font-size: 11.5px; }
  .list-item-meta { font-size: 11px; gap: 6px; flex-direction: column; }
  .list-item-note, .pn-note { font-size: 11.5px; }
  .list-item-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
  }
  .list-item-actions .badge { order: -1; }
  .list-item-actions .btn { font-size: 11px; padding: 4px 8px; flex: 1; min-width: 0; white-space: nowrap; }
  .list-item-actions form { flex: 1; min-width: 0; }
  .list-item-actions form .btn { width: 100%; }
  .list-item-actions .d-flex { width: 100%; }

  /* ── Mobile collapsible filter panels ─────────────────────────────────── */
  .mobile-filter-wrap {
    margin-bottom: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
  }
  .mobile-filter-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: background .15s ease;
  }
  .mobile-filter-toggle:active { background: #f1f5f9; }
  .mobile-filter-toggle .mf-arrow {
    font-size: 11px;
    color: #9ca3af;
    transition: transform .25s ease;
  }
  .mobile-filter-toggle.open .mf-arrow { transform: rotate(180deg); }
  .mobile-filter-toggle .mf-active-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    margin-left: 6px;
    vertical-align: middle;
  }
  .mobile-filter-body {
    overflow: hidden;
    transition: max-height .25s ease;
    max-height: 0;
  }
  .mobile-filter-body.open { max-height: 500px; }
  .mobile-filter-body > .search-card,
  .mobile-filter-body > .filter-panel {
    padding: 12px !important;
    border-top: 1px solid #f1f5f9;
  }

  /* ── System Settings mobile ─────────────────────────────────────────── */

  /* Activity History filter: wrap and go full-width */
  #auditFilter {
    flex-wrap: wrap !important;
    width: 100%;
  }
  #auditFilter .form-control,
  #auditFilter .form-select {
    max-width: 100% !important;
    flex: 1 1 100%;
  }
  #auditFilter .form-control[type="date"] {
    flex: 1 1 45%;
  }
  #auditFilter .btn { flex: 0 0 auto; }

  /* Activity History card-header: stack label & form vertically */
  .audit-scroll { max-height: 200px; }

  /* Settings tabs: tighter, scrollable */
  .settings-tab { padding: 10px 12px; font-size: 12.5px; gap: 6px; }
  .settings-tab > i { font-size: 11px; }
  .settings-card { padding: 14px; }

  /* Backup restore: file input full-width */
  #restoreForm .form-control { max-width: 100% !important; }

  /* Notification channel switch: fill width */
  .chan-switch { display: flex; }
  .chan-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12.5px; }

  /* Settings section heads: slightly smaller */
  .settings-section-head { font-size: 14px; gap: 7px; }
}

/* ══════════════════════════════════════
   INTERACTION ANIMATIONS
══════════════════════════════════════ */

/* Table rows: soft highlight slide */
.table tbody tr { transition: background .15s ease; }

/* Cards: gentle lift on hover */
.card { transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }

/* Buttons: press feedback */
.btn { transition: all .15s ease; }
.btn:active { transform: scale(.97); }

/* Sidebar nav links: slide highlight */
.sidebar-nav .nav-link { transition: background .15s ease, color .15s ease, padding-left .15s ease; }
.sidebar-nav .nav-link:hover { padding-left: 14px; }

/* Action buttons: pop on hover */
.action-btns .btn { transition: all .15s ease; }
.action-btns .btn:hover { transform: translateY(-1px); }
.action-btns .btn:active { transform: translateY(0) scale(.95); }

/* Stat cards: border glow on hover */
.stat-card { transition: border-color .2s ease, box-shadow .2s ease; }
.stat-card:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(40,108,191,.1); }

/* Badge: subtle pop */
.badge { transition: transform .15s ease; }
.badge:hover { transform: scale(1.05); }

/* Filter chips & pills: smooth state change */
.filter-chip { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.pill-tab { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }

/* Form inputs: focus glow */
.form-control, .form-select { transition: border-color .15s ease, box-shadow .15s ease; }

/* Notification bell: ring on hover */
.notif-btn { transition: color .15s ease, transform .15s ease; }
.notif-btn:hover { transform: rotate(-8deg) scale(1.1); }

/* Topbar user: lift */
.topbar-user { transition: background .15s ease, box-shadow .15s ease; }
.topbar-user:hover { box-shadow: 0 1px 6px rgba(0,0,0,.08); }

/* Modal: fade-scale entrance */
.modal.fade .modal-dialog { transition: transform .2s ease, opacity .2s ease; transform: scale(.96) translateY(8px); }
.modal.show .modal-dialog { transform: scale(1) translateY(0); }

/* Page content: fade in on load */
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page-content { animation: pageIn .25s ease-out; }

/* Dropdown menus: soft drop */
.dropdown-menu { transition: opacity .15s ease, transform .15s ease; transform-origin: top center; }
.dropdown-menu.show { animation: dropIn .15s ease; }
@keyframes dropIn { from { opacity: 0; transform: scaleY(.95) translateY(-4px); } to { opacity: 1; transform: scaleY(1) translateY(0); } }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}



/* ══════════════════════════════════════════════════════════════════════
   DARK MODE
   Blue-gray palette matching AdminKit's clean design: transparent card
   borders, unified surfaces, lighter secondary text for readability.
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:             #19222c;
  --ink:            #ffffff;
  --ink-2:          #bdc0c5;
  --ink-3:          #8a8fa0;
  --line:           #2d3a4a;
  --line-soft:      #253040;
  --card-shadow:    0 0 14px rgba(0,0,0,.08);
  --primary:        #3b82f6;
  --primary-dark:   #2563eb;
  --primary-light:  rgba(59,130,246,.15);
  --primary-bg:     rgba(59,130,246,.08);
  --brand-blue:     #3b82f6;
  --brand-blue-dark:#2563eb;
  --brand-blue-soft:rgba(59,130,246,.15);

  --chrome-blue:    #19222c;
  --chrome-green:   #19222c;
  --chrome-edge:    #253040;
  --chrome-ink:     #ffffff;
  --chrome-ink-soft:#d3d5d8;
  --chrome-ink-mute:#bdc0c5;

  --seal-green:     #10b981;
  --success:        #10b981;
  --warning:        #f59e0b;
  --danger:         #ef4444;
  --info:           #06b6d4;
  --purple:         #60a5fa;
  --category-senior: #93c5fd;
  --orange:         #f97316;
}

/* ── Page & body ── */
[data-theme="dark"] body {
  background: var(--bg);
  color: var(--ink-2);
}
[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"] .h5, [data-theme="dark"] .h6 { color: #ffffff; }
[data-theme="dark"] a { color: var(--primary); }
[data-theme="dark"] a:hover { color: #60a5fa; }
[data-theme="dark"] body, [data-theme="dark"] .main-wrapper,
[data-theme="dark"] .page-content { background: var(--bg); }

/* ── Sidebar ── */
[data-theme="dark"] .sidebar {
  background: #222e3c;
  border-right: 1px solid rgba(255,255,255,.04);
}
[data-theme="dark"] .sidebar-logo { border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .sidebar-seal { border-color: rgba(255,255,255,.08); background: #1e2a38; }
[data-theme="dark"] .sidebar-brgy { color: #ffffff; }
[data-theme="dark"] .sidebar-brgy-info { color: #8a8fa0; }
[data-theme="dark"] .sidebar-role-badge,
[data-theme="dark"] .sidebar-role-badge.role-admin,
[data-theme="dark"] .sidebar-role-badge.role-clerk,
[data-theme="dark"] .sidebar-role-badge.role-resident {
  background: rgba(59,130,246,.15); color: #60a5fa; border-color: rgba(59,130,246,.25);
}
[data-theme="dark"] .sidebar-nav .nav-link { color: #e0e2e6; }
[data-theme="dark"] .sidebar-nav .nav-link i { color: #9ba2b0; }
[data-theme="dark"] .sidebar-nav .nav-link:hover { background: rgba(255,255,255,.05); color: #ffffff; }
[data-theme="dark"] .sidebar-nav .nav-link:hover i { color: #bdc0c5; }
[data-theme="dark"] .sidebar-nav .nav-link.active { background: var(--primary); color: #fff; }
[data-theme="dark"] .sidebar-nav .nav-link.active i { color: #fff; }
[data-theme="dark"] .sidebar-nav .nav-link.active::before { background: #2563eb; }
[data-theme="dark"] .sidebar-nav .nav-link.active .badge { background: rgba(255,255,255,.22); color: #fff; }
[data-theme="dark"] .sidebar-nav .nav-link .nav-dot { box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
[data-theme="dark"] .sidebar-footer { border-top-color: #253040; }
[data-theme="dark"] .sidebar-footer .nav-link { color: #bdc0c5; }
[data-theme="dark"] .sidebar-footer .nav-link:hover { background: rgba(239,68,68,.08); color: var(--danger); }
[data-theme="dark"] .sidebar-footer .nav-link:hover i { color: var(--danger); }

/* ── Topbar ── */
[data-theme="dark"] .topbar {
  background: #19222c;
  border-bottom-color: rgba(255,255,255,.04);
  box-shadow: none;
}
[data-theme="dark"] .topbar-page-title h1 { color: #ffffff; }
[data-theme="dark"] .topbar-page-title .page-subtitle { color: var(--ink-2); }
[data-theme="dark"] .topbar-barangay .brgy-name { color: #ffffff; }
[data-theme="dark"] .topbar-barangay .brgy-loc { color: var(--ink-3); }
[data-theme="dark"] .topbar-seal { border-color: #2d3a4a; }
[data-theme="dark"] .topbar-today .today-date { color: #ffffff; }
[data-theme="dark"] .topbar-today .today-office { color: var(--ink-2); }
[data-theme="dark"] .notif-btn { color: #bdc0c5; }
[data-theme="dark"] .notif-btn:hover,
[data-theme="dark"] .notif-btn:focus-visible { background: rgba(255,255,255,.06); color: #ffffff; }
[data-theme="dark"] .topbar-user:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .topbar-user .user-name { color: #ffffff; }
[data-theme="dark"] .topbar-user .user-role { color: var(--ink-2); }
[data-theme="dark"] .topbar-user .avatar { background: var(--primary); }
[data-theme="dark"] .topbar-user .fa-chevron-down { color: #8a8fa0 !important; }
[data-theme="dark"] .topbar-toggle { color: #bdc0c5; }
[data-theme="dark"] .topbar-toggle:hover { background: rgba(255,255,255,.06); color: #ffffff; }

/* ── Theme toggle button ── */
.theme-toggle {
  background: none; border: none; color: #6b7280; font-size: 17px;
  cursor: pointer; padding: 8px; border-radius: 8px; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.theme-toggle:hover { background: #f3f4f6; color: #374151; }
[data-theme="dark"] .theme-toggle { color: #bdc0c5; }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.06); color: #fbbf24; }
.theme-toggle .fa-sun { display: none; }
.theme-toggle .fa-moon { display: inline; }
[data-theme="dark"] .theme-toggle .fa-sun { display: inline; }
[data-theme="dark"] .theme-toggle .fa-moon { display: none; }

/* ── Cards ── */
[data-theme="dark"] .card {
  background: #222e3c;
  border-color: transparent;
  box-shadow: var(--card-shadow);
}
[data-theme="dark"] .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); }
[data-theme="dark"] .card-header {
  background: #222e3c;
  border-bottom-color: rgba(255,255,255,.06);
  color: #ffffff;
}
[data-theme="dark"] .card-header i { color: var(--ink-2); }
.card-header .btn i { color: inherit; }
[data-theme="dark"] .card-body { color: var(--ink-2); }

/* Page-specific card overrides (higher specificity than body.page-* .card) */
[data-theme="dark"] body.page-dashboard .card,
[data-theme="dark"] body.page-reports .card {
  background: #222e3c; border-color: transparent;
  box-shadow: var(--card-shadow);
}
[data-theme="dark"] body.page-dashboard .card-header,
[data-theme="dark"] body.page-reports .card-header {
  background: #222e3c; border-bottom-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .top-rank-row { border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .top-rank-num { color: #8a8fa0; }
[data-theme="dark"] .top-rank-name { color: #ffffff; }
[data-theme="dark"] .top-rank-count { color: #bdc0c5; }
/* Chart filter buttons */
#chartFilter .btn { border-color: #cbd5e1; color: #64748b; }
#chartFilter .btn:hover { border-color: #94a3b8; color: #334155; }
[data-theme="dark"] #chartFilter .btn { border-color: rgba(255,255,255,.08); color: #8a8fa0; background: transparent; }
[data-theme="dark"] #chartFilter .btn:hover { border-color: rgba(255,255,255,.15); color: #ffffff; background: rgba(255,255,255,.06); }

/* Stat cards */
[data-theme="dark"] .stat-card {
  background: #222e3c;
  border-color: transparent;
}
[data-theme="dark"] .stat-card:hover { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .stat-body .stat-value { color: #ffffff; }
[data-theme="dark"] .stat-body .stat-label { color: #bdc0c5; }
[data-theme="dark"] .stat-body .stat-sub { color: #8a8fa0; }
[data-theme="dark"] .stat-icon.blue,
[data-theme="dark"] .stat-icon.green { background: rgba(59,130,246,.12); color: #60a5fa; }
[data-theme="dark"] .stat-icon.orange { background: rgba(249,115,22,.12); color: #fb923c; }
[data-theme="dark"] .stat-icon.red { background: rgba(239,68,68,.12); color: #f87171; }
[data-theme="dark"] .stat-icon.teal { background: rgba(6,182,212,.12); color: #22d3ee; }
[data-theme="dark"] .stat-icon.purple { background: rgba(40,108,191,.15); color: #93c5fd; }
[data-theme="dark"] .stat-icon.yellow { background: rgba(245,158,11,.12); color: #fbbf24; }

/* Dashboard tint stat cards */
[data-theme="dark"] body.page-dashboard .stat-card[class*="tint-"] {
  background: #222e3c;
  border: 1px solid transparent;
  box-shadow: var(--card-shadow);
}
[data-theme="dark"] body.page-dashboard .stat-card[class*="tint-"]::before { border-color: rgba(255,255,255,.04); }
[data-theme="dark"] body.page-dashboard .stat-card[class*="tint-"] .stat-icon {
  background: #2d3a4a;
  color: #d1d5db !important;
  box-shadow: none;
}
[data-theme="dark"] body.page-dashboard .stat-card[class*="tint-"] .stat-icon img { filter: brightness(0) invert(.84); }
[data-theme="dark"] body.page-dashboard .stat-card[class*="tint-"] .stat-value { color: #ffffff; }
[data-theme="dark"] body.page-dashboard .stat-card[class*="tint-"] .stat-label { color: #ffffff; }
[data-theme="dark"] body.page-dashboard .stat-card[class*="tint-"] .stat-sub { color: #8a8fa0; }

/* Detail modals (stat card click) */
[data-theme="dark"] .dm-card { background: #222e3c; }
[data-theme="dark"] .dm-banner { background: rgba(59,130,246,.1); }
[data-theme="dark"] .dm-close { filter: brightness(10) opacity(.5); }
[data-theme="dark"] .dm-close:hover { filter: brightness(10) opacity(.8); }
[data-theme="dark"] .dm-icon-wrap { background: rgba(255,255,255,.08); }
[data-theme="dark"] .dm-total { color: #ffffff; }
[data-theme="dark"] .dm-title { color: #bdc0c5; }
[data-theme="dark"] .dm-range { color: #8a8fa0; }
[data-theme="dark"] .dm-status { color: #bdc0c5; }
[data-theme="dark"] .dm-count { color: #ffffff; }
[data-theme="dark"] .dm-of { color: #8a8fa0; }
[data-theme="dark"] .dm-bar { background: #2d3a4a; }
[data-theme="dark"] .dm-bar-pct { color: #8a8fa0; }
[data-theme="dark"] .dm-foot { border-top-color: rgba(255,255,255,.06); }

/* ── Welcome banner ── */
[data-theme="dark"] .welcome-banner.green,
[data-theme="dark"] .welcome-banner.blue,
[data-theme="dark"] .welcome-banner.purple,
[data-theme="dark"] .welcome-banner.resident {
  background: linear-gradient(135deg, #1e2a44 0%, #253352 100%);
}

/* ── Tables ── */
[data-theme="dark"] .table {
  color: var(--ink-2);
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-2);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  --bs-table-hover-color: var(--ink-2);
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-striped-color: var(--ink-2);
}
[data-theme="dark"] .table th {
  background: transparent;
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .table td { border-bottom-color: rgba(255,255,255,.05); color: var(--ink-2); }
[data-theme="dark"] .table tbody tr:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .table tbody tr:hover > * { background-color: transparent !important; }
[data-theme="dark"] .table-responsive { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .card > .card-header + .table-responsive .table > thead th,
[data-theme="dark"] .card > .card-header + .audit-scroll .table > thead th,
[data-theme="dark"] .card > .card-header + .alert-scroll .table > thead th,
[data-theme="dark"] .card > .card-header + .um-toolbar,
[data-theme="dark"] .card > .card-header + .table > thead th {
  background: transparent; color: #ffffff; border-bottom-color: rgba(255,255,255,.08);
}

/* ── Forms ── */
[data-theme="dark"] .form-label { color: #bdc0c5; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #19222c;
  border-color: rgba(255,255,255,.1);
  color: #ffffff;
}
[data-theme="dark"] .form-control::placeholder { color: #8a8fa0; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  background-color: #19222c;
}
[data-theme="dark"] .input-group-text {
  background: #19222c;
  border-color: rgba(255,255,255,.1);
  color: #8a8fa0;
}
[data-theme="dark"] .form-text { color: #8a8fa0; }
[data-theme="dark"] .form-text a { color: #60a5fa; }
[data-theme="dark"] .form-check-input { background-color: #2d3a4a; border-color: #3a4a5c; }
[data-theme="dark"] .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .form-check-label { color: #bdc0c5; }
[data-theme="dark"] .chan-switch { background: #19222c; }
[data-theme="dark"] .chan-btn { color: #bdc0c5; }
[data-theme="dark"] .chan-btn:hover { color: #ffffff; background: rgba(255,255,255,.08); }
[data-theme="dark"] .chan-btn.active { background: #2d3a4a; color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.06); }
[data-theme="dark"] .settings-sub { border-top-color: #2d3a4a; }
[data-theme="dark"] .settings-sub-title { color: #bdc0c5; }
[data-theme="dark"] .setup-guide { color: #bdc0c5; }
[data-theme="dark"] .setup-guide p,
[data-theme="dark"] .setup-guide li,
[data-theme="dark"] .setup-guide ol { color: #bdc0c5; }
[data-theme="dark"] .setup-guide strong { color: #ffffff; }

/* ── Buttons ── */
[data-theme="dark"] .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
[data-theme="dark"] .btn-success { background: #198754; border-color: #198754; color: #fff; }
[data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn-success:focus,
[data-theme="dark"] .btn-success:active { background: #146c43; border-color: #146c43; color: #fff; }
[data-theme="dark"] .btn-outline-primary { color: #60a5fa; border-color: rgba(59,130,246,.35); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
[data-theme="dark"] .btn-outline-secondary { color: #bdc0c5; border-color: #2d3a4a; background: transparent; }
[data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255,255,255,.05); color: #ffffff; border-color: #3a4a5c; }
[data-theme="dark"] .btn-resident-edit { background: transparent; color: #bdc0c5; border-color: #2d3a4a; }
[data-theme="dark"] .btn-resident-edit:hover,
[data-theme="dark"] .btn-resident-edit:focus,
[data-theme="dark"] .btn-resident-edit:active { background: rgba(255,255,255,.05); color: #ffffff; border-color: #3a4a5c; }
[data-theme="dark"] .resident-edit-lock #lockText { color: #bdc0c5; }
[data-theme="dark"] .resident-edit-lock #lockText strong { color: #ffffff; }
[data-theme="dark"] .btn-edit-lock.btn-warning, [data-theme="dark"] .btn.lock-btn.locked { background: rgba(245,158,11,.12); color: #fbbf24; border-color: rgba(245,158,11,.35); }
[data-theme="dark"] .btn-edit-lock.btn-warning:hover, [data-theme="dark"] .btn.lock-btn.locked:hover,
[data-theme="dark"] .btn-edit-lock.btn-warning:focus, [data-theme="dark"] .btn.lock-btn.locked:focus,
[data-theme="dark"] .btn-edit-lock.btn-warning:active, [data-theme="dark"] .btn.lock-btn.locked:active { background: rgba(245,158,11,.22); color: #fcd34d; border-color: #fbbf24; }
[data-theme="dark"] .btn-edit-lock.btn-outline-secondary, [data-theme="dark"] .btn.lock-btn:not(.locked) { background: transparent; color: #bdc0c5; border-color: #2d3a4a; }
[data-theme="dark"] .btn-edit-lock.btn-outline-secondary:hover, [data-theme="dark"] .btn.lock-btn:not(.locked):hover,
[data-theme="dark"] .btn-edit-lock.btn-outline-secondary:focus, [data-theme="dark"] .btn.lock-btn:not(.locked):focus,
[data-theme="dark"] .btn-edit-lock.btn-outline-secondary:active, [data-theme="dark"] .btn.lock-btn:not(.locked):active { background: rgba(255,255,255,.05); color: #ffffff; border-color: #3a4a5c; }
[data-theme="dark"] .btn-outline-danger { color: #f87171; border-color: rgba(239,68,68,.35); background: transparent; }
[data-theme="dark"] .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
[data-theme="dark"] .btn-outline-success { color: #34d399; border-color: rgba(16,185,129,.35); background: transparent; }
[data-theme="dark"] .btn-outline-success:hover { background: var(--success); border-color: var(--success); color: #fff; }
[data-theme="dark"] .btn-light { background: #222e3c; border-color: #2d3a4a; color: #bdc0c5; }
[data-theme="dark"] .btn-light:hover { background: #2d3a4c; color: #ffffff; }

/* ── Filter chips & pill tabs ── */
[data-theme="dark"] .filter-chip {
  background: #222e3c;
  border-color: rgba(255,255,255,.1);
  color: #bdc0c5;
}
[data-theme="dark"] .filter-chip:hover { border-color: var(--primary); color: #60a5fa; background: rgba(59,130,246,.06); }
[data-theme="dark"] .filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme="dark"] .pill-tabs { background: #222e3c; }
[data-theme="dark"] .pill-tabs .pill-tab { color: #bdc0c5; }
[data-theme="dark"] .pill-tabs .pill-tab.active { background: var(--primary); color: #fff; }

/* ── Search / filter panel ── */
[data-theme="dark"] .filter-panel,
[data-theme="dark"] .search-card,
[data-theme="dark"] .annx-toolbar {
  background: #222e3c;
  border-color: transparent;
}
[data-theme="dark"] .filter-panel .form-control,
[data-theme="dark"] .filter-panel .form-select,
[data-theme="dark"] .search-card .form-control,
[data-theme="dark"] .search-card .form-select,
[data-theme="dark"] .annx-toolbar .annx-search {
  background-color: #19222c;
}
[data-theme="dark"] .search-card .input-group-text,
[data-theme="dark"] .filter-panel .input-group-text {
  background: #19222c; border-color: #2d3a4a;
}
[data-theme="dark"] .filter-chips.filter-bar {
  background: #222e3c; border-color: #2d3a4a;
}

/* ── Dropdowns ── */
[data-theme="dark"] .dropdown-menu {
  background: #222e3c;
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
[data-theme="dark"] .dropdown-item { color: #bdc0c5; }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus { background: rgba(255,255,255,.05); color: #ffffff; }
[data-theme="dark"] .dropdown-item.text-danger { color: var(--danger) !important; }
[data-theme="dark"] .dropdown-divider { border-color: #2d3a4a; }
[data-theme="dark"] .dropdown-header { color: #ffffff; border-bottom-color: #2d3a4a; }

/* ── Notifications ── */
[data-theme="dark"] .notif-dropdown { background: #222e3c; border-color: #2d3a4a; }
[data-theme="dark"] .notif-dropdown .dropdown-header { border-bottom-color: #253040; color: #ffffff; }
[data-theme="dark"] .notif-item { border-bottom-color: #253040; }
[data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,.03); }
[data-theme="dark"] .notif-item.unread { background: rgba(59,130,246,.05); }
[data-theme="dark"] .notif-dropdown .notif-item:hover,
[data-theme="dark"] .notif-dropdown .notif-item.unread:hover { background: #293b50; }
[data-theme="dark"] .notif-dropdown .notif-item:hover .notif-body .title { color: #fff; }
[data-theme="dark"] .notif-item .notif-body .title { color: #ffffff; }
[data-theme="dark"] .notif-item .notif-body .msg { color: #8a8fa0; }
[data-theme="dark"] .notif-item .notif-body .time { color: #8a8fa0; }
[data-theme="dark"] .notif-seeall { background: #1e2a38; border-top-color: #253040; color: var(--primary); }
[data-theme="dark"] .notif-seeall:hover { background: rgba(59,130,246,.06); }
[data-theme="dark"] .notif-empty { color: #8a8fa0; }
[data-theme="dark"] .notif-empty i { color: #3a4a5c; }

/* Notifications page */
[data-theme="dark"] .notif-day { background: #1e2a38; border-color: #253040; color: #8a8fa0; }
[data-theme="dark"] .notif-row { border-bottom-color: #253040; }
[data-theme="dark"] .notif-row:hover { background: rgba(255,255,255,.02); }
[data-theme="dark"] .notif-row.unread { background: rgba(59,130,246,.05); }
[data-theme="dark"] .notif-row.unread:hover { background: rgba(59,130,246,.07); }
[data-theme="dark"] .notif-row .notif-body .title { color: #ffffff; }
[data-theme="dark"] .notif-row .notif-body .msg { color: #bdc0c5; }
[data-theme="dark"] .notif-row .notif-when { color: #8a8fa0; }
[data-theme="dark"] .notif-row .notif-icon.doc { background: rgba(59,130,246,.12); color: #60a5fa; }
[data-theme="dark"] .notif-row .notif-icon.comp { background: rgba(239,68,68,.12); color: #f87171; }
[data-theme="dark"] .notif-row .notif-icon.borrow { background: rgba(249,115,22,.12); color: #fb923c; }
[data-theme="dark"] .notif-row .notif-icon.reg { background: rgba(16,185,129,.12); color: #34d399; }
[data-theme="dark"] .notif-row .notif-icon.job { background: rgba(40,108,191,.15); color: #93c5fd; }
[data-theme="dark"] .notif-row .notif-icon.ann { background: rgba(6,182,212,.12); color: #22d3ee; }
[data-theme="dark"] .notif-row .notif-icon.gen { background: #222e3c; color: #8a8fa0; }

/* ── Badges (semantic colours on navy bg) ── */
[data-theme="dark"] .badge.bg-warning   { background-color: rgba(245,158,11,.15) !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge.bg-info      { background-color: rgba(59,130,246,.15) !important; color: #60a5fa !important; }
[data-theme="dark"] .badge.bg-primary   { background-color: rgba(59,130,246,.15) !important; color: #60a5fa !important; }
[data-theme="dark"] .badge.bg-success   { background-color: rgba(16,185,129,.15) !important; color: #34d399 !important; }
[data-theme="dark"] .badge.bg-danger    { background-color: rgba(239,68,68,.15) !important; color: #f87171 !important; }
[data-theme="dark"] .badge.bg-secondary { background-color: rgba(139,148,168,.12) !important; color: #bdc0c5 !important; }
[data-theme="dark"] .badge.bg-dark      { background-color: rgba(139,148,168,.12) !important; color: #bdc0c5 !important; }

/* User Management badges use muted tints on the dark table surface. */
[data-theme="dark"] #users .um-badge-admin { background: rgba(129,140,248,.12); color: #bfdbfe; border: 1px solid rgba(129,140,248,.25); }
[data-theme="dark"] #users .um-badge-clerk { background: rgba(56,189,248,.1); color: #bae6fd; border: 1px solid rgba(56,189,248,.22); }
[data-theme="dark"] #users .badge.bg-warning { background-color: rgba(251,191,36,.1) !important; color: #fde68a !important; border: 1px solid rgba(251,191,36,.22); }

/* ── List item cards ── */
[data-theme="dark"] .list-item-card {
  background: #222e3c;
  border-color: transparent;
}
[data-theme="dark"] .list-item-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.22); }
[data-theme="dark"] .list-item-card.js-clickable:hover { border-color: var(--primary); }
[data-theme="dark"] .list-item-title { color: #ffffff; }
[data-theme="dark"] .list-item-sub { color: #bdc0c5; }
[data-theme="dark"] .list-item-meta { color: #8a8fa0; }
[data-theme="dark"] .list-item-note { color: #8a8fa0; }
[data-theme="dark"] .meta-text { color: #8a8fa0; }
[data-theme="dark"] .archive-retention-notice { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .archive-retention-notice .meta-text { color: #bdc0c5; }
[data-theme="dark"] .archive-retention-notice strong { color: #ffffff; }
[data-theme="dark"] .list-item-icon.complaint { background: rgba(249,115,22,.12); color: #fb923c; }
[data-theme="dark"] .list-item-icon.doc { background: rgba(59,130,246,.12); color: #60a5fa; }
[data-theme="dark"] .list-item-icon.job { background: rgba(59,130,246,.12); color: #60a5fa; }
[data-theme="dark"] .list-item-icon.borrow { background: rgba(40,108,191,.15); color: #93c5fd; }
/* Status tints neutralised on dark */
[data-theme="dark"] .list-item-card.lc-pending,  [data-theme="dark"] .equip-card.lc-pending  { background: #222e3c; border-left-color: #f59e0b; }
[data-theme="dark"] .list-item-card.lc-progress, [data-theme="dark"] .equip-card.lc-progress { background: #222e3c; border-left-color: #3b82f6; }
[data-theme="dark"] .list-item-card.lc-ready,    [data-theme="dark"] .equip-card.lc-ready    { background: #222e3c; border-left-color: #60a5fa; }
[data-theme="dark"] .list-item-card.lc-success,  [data-theme="dark"] .equip-card.lc-success  { background: #222e3c; border-left-color: #22c55e; }
[data-theme="dark"] .list-item-card.lc-overdue,  [data-theme="dark"] .equip-card.lc-overdue  { background: #222e3c; border-left-color: #ef4444; }
[data-theme="dark"] .list-item-card.lc-duesoon,  [data-theme="dark"] .equip-card.lc-duesoon  { background: #222e3c; border-left-color: #f97316; }
[data-theme="dark"] .list-item-card.lc-muted,    [data-theme="dark"] .equip-card.lc-muted    { background: #222e3c; border-left-color: #9ca3af; }
[data-theme="dark"] .list-item-card.lc-rejected,  [data-theme="dark"] .equip-card.lc-rejected  { background: #222e3c; border-color: #5b3239; }
[data-theme="dark"] .list-item-card[class*="lc-"] .list-item-sub,
[data-theme="dark"] .equip-card[class*="lc-"] .list-item-sub { color: #bdc0c5; }
[data-theme="dark"] .list-item-card[class*="lc-"] .list-item-meta,
[data-theme="dark"] .equip-card[class*="lc-"] .list-item-meta { color: #8a8fa0; }
[data-theme="dark"] .list-item-card.lc-rejected .list-item-sub,
[data-theme="dark"] .equip-card.lc-rejected .list-item-sub { color: #a8b3c2; }
[data-theme="dark"] .list-item-card.lc-rejected .list-item-meta,
[data-theme="dark"] .equip-card.lc-rejected .list-item-meta { color: #94a3b8; }
[data-theme="dark"] .list-item-card[class*="lc-"] .list-item-note,
[data-theme="dark"] .equip-card[class*="lc-"] .list-item-note { color: #8a8fa0; }
[data-theme="dark"] .list-item-card.lc-rejected .list-item-note,
[data-theme="dark"] .equip-card.lc-rejected .list-item-note { color: #94a3b8; }
[data-theme="dark"] .list-item-actions { border-top-color: #2d3a4a; }

/* ── Floating emergency / chat buttons ── */
[data-theme="dark"] .float-toggle { background: #222e3c; border-color: #2d3a4a; color: #8a8fa0; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
[data-theme="dark"] .float-toggle:hover { background: #2d3a4c; color: #ffffff; }
[data-theme="dark"] .float-btn, [data-theme="dark"] .float-btn:hover { color: #ffffff; }

/* ── Pickup notification box & pill (pn-*) ── */
[data-theme="dark"] .pn-box { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .pn-title { color: #e5e7eb; }
[data-theme="dark"] .pn-opt { border-color: #2d3a4a; }
[data-theme="dark"] .pn-opt:hover { border-color: rgba(59,130,246,.35); }
[data-theme="dark"] .pn-opt:has(input:checked) { border-color: var(--primary); background: rgba(59,130,246,.1); }
[data-theme="dark"] .pn-opt.always { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.1); }
[data-theme="dark"] .pn-opt.off { background: #1e2a38; }
[data-theme="dark"] .pn-dest { color: #8a8fa0; }
[data-theme="dark"] .pn-note { color: #93c5fd; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); }
[data-theme="dark"] .pn-note.done { color: #34d399; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); }
[data-theme="dark"] .pn-note.warn { color: #fbbf24; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); }

/* ── Job Finder "View Post" modal (vj-*) ── */
.vj-note { border-radius: 10px; border: 1px solid; padding: 10px 13px; font-size: 13px; }
.vj-note-info { background: #eff6ff; border-color: #dbeafe; color: #1e40af; }
.vj-note-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.vj-note-danger strong { display: block; }
.vj-note-danger .reason { color: #b91c1c; font-size: 13px; }
[data-theme="dark"] .vj-hero { border-color: #2d3a4a; }
[data-theme="dark"] .vj-hero-cap { background: #1e2a38; color: #8a8fa0; }
[data-theme="dark"] .vj-file { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .vj-file .ic { background: rgba(239,68,68,.15); color: #f87171; }
[data-theme="dark"] .vj-file .flex-fill div:last-child { color: #8a8fa0; }
[data-theme="dark"] .vj-pdf { border-color: #2d3a4a; }
[data-theme="dark"] .vj-pdf-bar { background: #1e2a38; color: #bdc0c5; }
[data-theme="dark"] .vj-pdf iframe { background: #19222c; }
[data-theme="dark"] .vj-grid { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .vj-field { background: #222e3c; }
[data-theme="dark"] .vj-field .lbl { color: #60a5fa; }
[data-theme="dark"] .vj-field .val { color: #d8dade; }
[data-theme="dark"] .vj-field .val.salary { color: #34d399; }
[data-theme="dark"] .vj-section h6 { color: #60a5fa; }
[data-theme="dark"] .vj-section .box { background: #222e3c; border-color: #2d3a4a; color: #bdc0c5; }
[data-theme="dark"] .vj-note-info { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93c5fd; }
[data-theme="dark"] .vj-note-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #f87171; }
[data-theme="dark"] .vj-note-danger .reason { color: #fca5a5; }

/* ── Chat: handed over to staff notice ── */
[data-theme="dark"] .chat-staff-note { background: rgba(245,158,11,.1); border-top-color: rgba(245,158,11,.2); }
[data-theme="dark"] .chat-staff-note-icon { background: rgba(245,158,11,.18); color: #fbbf24; }
[data-theme="dark"] .chat-staff-note-title { color: #fbbf24; }
[data-theme="dark"] .chat-staff-note-sub { color: #d6a548; }

/* ── Chat: quick-reply suggestion chips ── */
[data-theme="dark"] .chat-quick-label { color: #8a8fa0; }
[data-theme="dark"] .faq-toggle { background: #222e3c; border-color: #2d3a4a; color: #8a8fa0; }
[data-theme="dark"] .faq-toggle:hover { background: #2d3a4c; color: #ffffff; }
[data-theme="dark"] .chat-chip { background: #222e3c; border-color: #2d3a4a; color: #60a5fa; box-shadow: none; }
[data-theme="dark"] .chat-chip:hover { background: rgba(59,130,246,.12); border-color: var(--primary); }
[data-theme="dark"] .chat-input-wrap { background: #19222c; border-top-color: #2d3a4a; }
[data-theme="dark"] .chat-input-wrap textarea { background: #222e3c; border-color: #2d3a4a; color: #ffffff; }
[data-theme="dark"] .chat-input-wrap textarea:focus { background: #222e3c; border-color: var(--primary); }
[data-theme="dark"] .chat-input-wrap textarea::placeholder { color: #8a8fa0; }

/* ── Announcement cards (ann-card) ── */
[data-theme="dark"] .ann-card { background: #222e3c; border-color: transparent; }
[data-theme="dark"] .ann-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.22); }
[data-theme="dark"] .ann-card.pinned { border-color: var(--primary); }
[data-theme="dark"] .ann-icon { background: rgba(59,130,246,.12); color: #60a5fa; }
[data-theme="dark"] .ann-title { color: #ffffff; }
[data-theme="dark"] .ann-content { color: #bdc0c5; }
[data-theme="dark"] .ann-date { color: #8a8fa0; }

/* ── Equipment cards ── */
[data-theme="dark"] .equip-card { background: #222e3c; border-color: transparent; }
[data-theme="dark"] .equip-card:hover { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .equip-card.js-clickable[class*="lc-"]:hover { border-top-color: rgba(255,255,255,.08); border-right-color: rgba(255,255,255,.08); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .equip-card-img { background: #19222c; }
[data-theme="dark"] .equip-card-placeholder > i { color: #3a4a5c; }
[data-theme="dark"] .equip-card-icon { background: rgba(40,108,191,.15); color: #93c5fd; }
[data-theme="dark"] .equip-avail-badge.available { background: rgba(16,185,129,.14); color: #34d399; }
[data-theme="dark"] .equip-avail-badge.unavailable { background: rgba(239,68,68,.14); color: #f87171; }
[data-theme="dark"] .equip-progress { background: #2d3a4a; }
[data-theme="dark"] .equip-count { color: #8a8fa0; }

/* ── Job cards ── */
[data-theme="dark"] .jobx-card { background: #222e3c; border-color: transparent; }
[data-theme="dark"] .jobx-card:hover { border-color: rgba(255,255,255,.08); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
[data-theme="dark"] .jobx-title { color: #ffffff; }
[data-theme="dark"] .jobx-company { color: #bdc0c5; }
[data-theme="dark"] .jobx-loc { color: #8a8fa0; }
[data-theme="dark"] .jobx-pill.salary { background: rgba(16,185,129,.14); color: #34d399; }
[data-theme="dark"] .jobx-pill.muted { background: #2d3a4a; color: #bdc0c5; }
[data-theme="dark"] .jobx-desc { color: #bdc0c5; }
[data-theme="dark"] .jobx-foot { border-top-color: #2d3a4a; }
[data-theme="dark"] .jobx-flag.blue { background: rgba(59,130,246,.12); color: #60a5fa; }
[data-theme="dark"] .jobx-flag.green { background: rgba(16,185,129,.12); color: #34d399; }

/* ── Chat ── */
[data-theme="dark"] .chat-wrapper { background: #222e3c; border-color: transparent; }
[data-theme="dark"] .chat-list { background: #1e2a38; border-right-color: #2d3a4a; }
[data-theme="dark"] .chat-list-header { color: #8a8fa0; border-bottom-color: #2d3a4a; }
[data-theme="dark"] .chat-item { border-bottom-color: #253040; }
[data-theme="dark"] .chat-item:hover { background: rgba(255,255,255,.03); }
[data-theme="dark"] .chat-item.active { background: rgba(59,130,246,.08); border-left-color: var(--primary); }
[data-theme="dark"] .chat-item .info .name { color: #ffffff; }
[data-theme="dark"] .chat-item .info .preview { color: #8a8fa0; }
[data-theme="dark"] .chat-header { background: #1e2a38; border-bottom-color: #2d3a4a; }
[data-theme="dark"] .chat-header-info .name { color: #ffffff; }
[data-theme="dark"] .chat-header-info .role { color: #8a8fa0; }
[data-theme="dark"] .chat-messages { background: #19222c; }
[data-theme="dark"] .msg-bubble.incoming { background: #222e3c; color: #d3d5d8; border-color: #2d3a4a; }
[data-theme="dark"] .msg-bubble.outgoing { background: var(--primary); color: #fff; }
[data-theme="dark"] .msg-time { color: #8a8fa0; }
[data-theme="dark"] .chat-input-area { background: #1e2a38; border-top-color: #2d3a4a; }
[data-theme="dark"] .chat-input-area textarea { background: #19222c; border-color: #2d3a4a; color: #ffffff; }
[data-theme="dark"] .chat-input-area textarea:focus { border-color: var(--primary); }
[data-theme="dark"] .chat-empty { color: #8a8fa0; }
[data-theme="dark"] .chat-empty i { color: #2d3a4a; }

/* ── Modals ── */
[data-theme="dark"] .modal-content { background: #222e3c; border-color: transparent; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
[data-theme="dark"] .modal-header {
  background: #222e3c;
  border-bottom-color: rgba(255,255,255,.06);
  color: #ffffff;
  box-shadow: none;
}
[data-theme="dark"] .modal-header .modal-title { color: #60a5fa; }
.cv-label { font-size: 11px; color: #286cbf; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
[data-theme="dark"] .cv-label { color: #60a5fa; }
.cv-value { font-size: 14px; color: #1f2937; font-weight: 500; margin-top: 3px; overflow-wrap: anywhere; }
[data-theme="dark"] .cv-value { color: #d8dade; }
[data-theme="dark"] .modal-header .btn-close { filter: invert(1) brightness(0.85); }
[data-theme="dark"] .modal-body { color: #bdc0c5; }
[data-theme="dark"] .modal-footer { background: #1e2a38; border-top-color: rgba(255,255,255,.06); }

/* ── Confirm dialog ── */
[data-theme="dark"] .cf-dialog { background: #222e3c; border-color: #2d3a4a; }
[data-theme="dark"] .cf-title { color: #ffffff; }
[data-theme="dark"] .cf-text { color: #bdc0c5; }
[data-theme="dark"] .cf-icon { background: rgba(59,130,246,.15); color: #60a5fa; }
[data-theme="dark"] .cf-dialog.danger .cf-icon { background: rgba(239,68,68,.15); color: #f87171; }
[data-theme="dark"] .cf-actions { background: #1e2a38; border-top-color: #2d3a4a; }
[data-theme="dark"] .cf-actions .btn-light { background: #222e3c; border-color: #2d3a4a; color: #bdc0c5; }
[data-theme="dark"] .cf-actions .btn-light:hover { background: #2d3a4c; color: #ffffff; }
[data-theme="dark"] .cf-dismiss { color: #a8b3c2; }
[data-theme="dark"] .cf-dismiss:hover { background: #2d3a4a; color: #fff; }
[data-theme="dark"] .cf-actions .btn-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
[data-theme="dark"] .cf-actions .btn-danger:hover,
[data-theme="dark"] .cf-actions .btn-danger:focus { background: #991b1b; border-color: #991b1b; color: #fff; }

/* ── Misc ── */
[data-theme="dark"] .empty-state { color: #8a8fa0; }
[data-theme="dark"] .empty-state i { color: #2d3a4a; }
[data-theme="dark"] .search-highlight { background: rgba(245,158,11,.2); color: #fbbf24; }
[data-theme="dark"] .text-muted { color: #8a8fa0 !important; }
[data-theme="dark"] .text-primary { color: #60a5fa !important; }
[data-theme="dark"] .border-bottom { border-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] hr { border-color: rgba(255,255,255,.06); }

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2d3a4a; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4a5c; }

/* Category chips */
[data-theme="dark"] .cat-chip { opacity: .88; }

/* Borrow meta / items */
[data-theme="dark"] .borrow-req-items { background: #1e2a38; color: #bdc0c5; }
[data-theme="dark"] .borrow-req-meta { color: #bdc0c5; }
[data-theme="dark"] .br-card-name { color: #ffffff; }
[data-theme="dark"] .br-user-icon { background: rgba(59,130,246,.12); color: #60a5fa; }

/* Timeline */
/* Document and equipment request detail dialogs. */
.request-detail-modal {
  --rd-surface: #fff; --rd-bg: #f6f8fb; --rd-line: #e2e8f0;
  --rd-ink: #1e293b; --rd-muted: #64748b; --rd-blue: #286cbf; --rd-soft: #eaf2fc;
}
[data-theme="dark"] .request-detail-modal {
  --rd-surface: #222e3c; --rd-bg: #1b2633; --rd-line: #344254;
  --rd-ink: #e2e8f0; --rd-muted: #a8b3c2; --rd-blue: #93c5fd; --rd-soft: #2a405b;
}
.request-detail-modal .modal-content { border: 1px solid var(--rd-line); border-radius: 16px; background: var(--rd-surface); box-shadow: 0 24px 80px rgba(15,23,42,.24); }
.request-detail-modal .modal-header { padding: 18px 24px; background: var(--rd-surface); border-bottom: 1px solid var(--rd-line); border-radius: 16px 16px 0 0; }
.request-detail-modal .modal-title { color: var(--rd-ink); font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.request-detail-modal .modal-header .btn-close { filter: none; opacity: .6; flex-shrink: 0; }
.request-detail-modal .modal-header .btn-close:hover { opacity: 1; }
[data-theme="dark"] .request-detail-modal .modal-header .btn-close { filter: invert(1); opacity: .8; }
.request-detail-modal .modal-body { padding: 24px; background: var(--rd-bg); }
.request-detail-modal .modal-footer { padding: 14px 24px; background: var(--rd-surface); border-top: 1px solid var(--rd-line); border-radius: 0 0 16px 16px; }
.request-detail-modal .rd-overview { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.request-detail-modal .rd-person-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--rd-soft); color: var(--rd-blue); font-size: 19px; border-radius: 13px; }
.request-detail-modal .rd-person { flex: 1; min-width: 0; }
.request-detail-modal .rd-person-name { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--rd-ink); overflow-wrap: anywhere; }
.request-detail-modal .rd-label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rd-muted); margin-bottom: 5px; }
.request-detail-modal .rd-value { font-size: 13.5px; font-weight: 500; line-height: 1.6; color: var(--rd-ink); overflow-wrap: anywhere; white-space: pre-line; }
#newRequestModal #reqStep2 { color: var(--rd-ink); }
#newRequestModal.doc-request-review .modal-dialog { max-width: 640px; }
#newRequestModal .doc-review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
#newRequestModal .doc-review-avatar { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: var(--rd-soft); display: inline-flex; align-items: center; justify-content: center; }
#newRequestModal .doc-review-avatar > i { font-size: 20px; color: var(--rd-blue); }
#newRequestModal .doc-review-name { color: var(--rd-ink); font-size: 15px; font-weight: 600; }
#newRequestModal .doc-review-note { color: var(--rd-muted); font-size: 12.5px; line-height: 1.6; }
#newRequestModal .doc-review-section { padding: 16px; margin-bottom: 14px; border: 1px solid var(--rd-line); border-radius: 10px; background: var(--rd-surface); }
#newRequestModal .doc-review-section h6 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--rd-ink); font-family: inherit; font-size: 13px; font-weight: 600; }
#newRequestModal .doc-review-section h6 > i { color: var(--rd-blue); }
#newRequestModal .doc-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
#newRequestModal .doc-review-item { min-width: 0; }
#newRequestModal .doc-review-item.is-wide { grid-column: 1 / -1; }
#newRequestModal .doc-review-label { display: block; color: var(--rd-muted); font-size: 12px; font-weight: 500; margin-bottom: 4px; }
#newRequestModal .doc-review-value { color: var(--rd-ink); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#newRequestModal .doc-review-value.is-empty { color: var(--rd-muted); }
#newRequestModal .doc-review-fee { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--rd-line); }
#newRequestModal .doc-review-fee strong { color: var(--rd-blue); font-size: 18px; font-weight: 600; }
#newRequestModal #reviewFeeNote { max-width: 230px; color: var(--rd-muted); font-size: 12px; line-height: 1.6; }
#newRequestModal .doc-review-attachments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#newRequestModal .doc-review-attachments figure { min-width: 0; margin: 0; }
#newRequestModal .doc-review-attachments figcaption { margin: 10px 0 0; color: var(--rd-ink); font-size: 12px; font-weight: 500; }
#newRequestModal #reviewAttachmentsSection { padding: 0; border: 0; background: transparent; }
#newRequestModal .doc-review-attachment-button { display: block; width: 100%; padding: 0; border: 1px solid var(--rd-line); border-radius: 8px; background: var(--rd-surface); overflow: hidden; font: inherit; cursor: zoom-in; }
#newRequestModal .doc-review-attachment-button:hover { border-color: var(--rd-blue); box-shadow: 0 4px 16px rgba(15,23,42,.12); }
#newRequestModal .doc-review-attachment-button:focus-visible { outline: 2px solid var(--rd-blue); outline-offset: 3px; }
#newRequestModal .doc-review-attachment-preview { position: relative; display: flex; align-items: center; justify-content: center; height: 160px; padding: 16px; background: linear-gradient(145deg, var(--rd-soft), var(--rd-bg)); }
#newRequestModal .doc-review-attachment-zoom { position: absolute; right: 9px; bottom: 9px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--rd-line); border-radius: 6px; color: var(--rd-blue); background: var(--rd-surface); font-size: 10px; }
#newRequestModal .doc-review-photo { width: 112px; height: 112px; object-fit: contain; background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 7px; box-shadow: 0 3px 10px rgba(15,23,42,.12); }
#newRequestModal .doc-review-signature { width: 180px; height: 64px; max-width: 100%; object-fit: contain; background: #fff; border: 1px solid var(--rd-line); border-radius: 7px; padding: 6px 10px; }
#newRequestModal .doc-review-pickup { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
#newRequestModal .doc-review-pickup > i { color: var(--rd-blue); }
#newRequestModal .doc-review-pickup strong { color: var(--rd-ink); font-size: 12px; font-weight: 600; }
#newRequestModal .doc-review-pickup p { margin: 4px 0 0; color: var(--rd-muted); font-size: 12px; line-height: 1.6; }
#newRequestModal .doc-review-correction { margin: 12px 0 0; color: var(--rd-muted); font-size: 11px; line-height: 1.6; }
#newRequestModal .doc-review-correction > i { margin-right: 5px; color: var(--rd-blue); }
#newRequestModal #reviewAttachmentsSection[hidden] { display: none !important; }
#newRequestModal .doc-image-viewer { display: none; width: min(900px, calc(100vw - 32px)); height: min(720px, 90dvh); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid var(--rd-line); border-radius: 14px; background: var(--rd-surface); color: var(--rd-ink); box-shadow: 0 24px 80px rgba(0,0,0,.4); overflow: hidden; }
#newRequestModal .doc-image-viewer[open] { display: flex; flex-direction: column; }
#newRequestModal .doc-image-viewer::backdrop { background: rgba(5,12,22,.75); backdrop-filter: blur(3px); }
#newRequestModal .doc-image-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--rd-line); }
#newRequestModal .doc-image-viewer-header span { color: var(--rd-muted); font-size: 10px; }
#newRequestModal .doc-image-viewer-header h3 { margin: 4px 0 0; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--rd-ink); }
#newRequestModal .doc-image-viewer-close { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--rd-line); border-radius: 8px; background: var(--rd-soft); color: var(--rd-ink); }
#newRequestModal .doc-image-viewer-stage { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--rd-bg); touch-action: none; }
#newRequestModal .doc-image-viewer-stage img { display: block; width: auto; height: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); object-fit: contain; background: #fff; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.2); user-select: none; }
#newRequestModal .doc-image-viewer-stage.is-zoomed { cursor: grab; }
#newRequestModal .doc-image-viewer-stage.is-dragging { cursor: grabbing; }
#newRequestModal .doc-image-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--rd-line); }
#newRequestModal .doc-image-viewer-hint { color: var(--rd-muted); font-size: 11px; }
#newRequestModal .doc-image-viewer-controls { display: flex; align-items: center; gap: 6px; margin-left: auto; }
#newRequestModal .doc-image-viewer-controls button { height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid var(--rd-line); border-radius: 7px; background: var(--rd-soft); color: var(--rd-ink); font-size: 12px; }
#newRequestModal .doc-image-viewer-controls button:disabled { opacity: .4; cursor: default; }
#newRequestModal .doc-image-viewer-controls button:hover:not(:disabled), #newRequestModal .doc-image-viewer-close:hover { color: var(--rd-blue); border-color: var(--rd-blue); }
#newRequestModal .doc-image-viewer-controls output { min-width: 50px; text-align: center; color: var(--rd-ink); font-size: 12px; }
#newRequestModal .doc-image-viewer button:focus-visible { outline: 2px solid var(--rd-blue); outline-offset: 2px; }
@media (max-width: 575.98px) {
  #newRequestModal .doc-image-viewer { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  #newRequestModal .doc-image-viewer-hint { display: none; }
  #newRequestModal .doc-image-viewer-controls button { min-width: 40px; height: 40px; }
}
@media (max-width: 379.98px) {
  #newRequestModal .doc-review-grid { grid-template-columns: minmax(0, 1fr); }
  #newRequestModal .doc-review-item.is-wide { grid-column: 1; }
  #newRequestModal .doc-review-attachments { grid-template-columns: minmax(0, 1fr); }
}
.request-detail-modal .rd-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 3px; font-size: 11.5px; color: var(--rd-muted); }
.request-detail-modal .rd-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; background: #e2e8f0; color: #475569; }
.request-detail-modal .rd-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.request-detail-modal .rd-status.pending { background: #fef3c7; color: #92400e; }
.request-detail-modal .rd-status.ready { background: #dbeafe; color: #1d4f8f; }
.request-detail-modal .rd-status.success { background: #dcfce7; color: #166534; }
.request-detail-modal .rd-status.returned { background: #e2e8f0; color: #475569; }
.request-detail-modal .rd-status.danger { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .request-detail-modal .rd-status { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .request-detail-modal .rd-status.pending { background: #513d1c; color: #fde68a; }
[data-theme="dark"] .request-detail-modal .rd-status.ready { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .request-detail-modal .rd-status.success { background: #144d38; color: #86efac; }
[data-theme="dark"] .request-detail-modal .rd-status.returned { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .request-detail-modal .rd-status.danger { background: #54282e; color: #fecaca; }
.request-detail-modal .rd-section { margin-bottom: 20px; }
.request-detail-modal .rd-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--rd-ink); font-size: 12px; font-weight: 600; }
.request-detail-modal .rd-section-title > i { color: var(--rd-blue); }
.request-detail-modal .rd-panel { padding: 18px; border: 1px solid var(--rd-line); border-radius: 11px; background: var(--rd-surface); color: var(--rd-ink); }
.request-detail-modal .rd-purpose { padding: 15px 18px; border: 1px solid var(--rd-line); border-left: 3px solid var(--rd-blue); border-radius: 10px; background: var(--rd-surface); margin-bottom: 20px; }
.request-detail-modal .rd-note { padding: 15px 18px; background: var(--rd-soft); border-radius: 10px; margin-bottom: 18px; }
.request-detail-modal .rd-submitted { display: flex; align-items: center; gap: 7px; color: var(--rd-muted); font-size: 11.5px; }
.request-detail-modal .rd-equipment-list { border: 1px solid var(--rd-line); background: var(--rd-surface); border-radius: 11px; overflow: hidden; }
.request-detail-modal .rd-equipment-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.request-detail-modal .rd-equipment-row + .rd-equipment-row { border-top: 1px solid var(--rd-line); }
.request-detail-modal .rd-equipment-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--rd-soft); color: var(--rd-blue); flex-shrink: 0; }
.request-detail-modal .rd-equipment-name { color: var(--rd-ink); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.request-detail-modal .rd-quantity { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: var(--rd-bg); color: var(--rd-muted); font-size: 11px; white-space: nowrap; }
.request-detail-modal .rd-quantity strong { color: var(--rd-ink); margin-left: 5px; }
.request-detail-modal .rd-section-count { padding: 2px 6px; border-radius: 5px; background: var(--rd-soft); color: var(--rd-blue); font-size: 10px; }
.request-detail-modal .rd-panel .timeline { margin-bottom: 0; }
.request-detail-modal .rd-panel .timeline-body p { white-space: pre-line; }
.request-detail-modal .rd-panel .timeline-item:last-child { padding-bottom: 0; }
.complaint-detail-view > [class*="col-"] > .card { border: 1px solid var(--rd-line); border-radius: 13px; overflow: hidden; background: var(--rd-surface); }
.complaint-detail-view .card > .card-header { padding: 16px 20px; font-size: 13.5px; font-weight: 600; color: var(--rd-ink); background: var(--rd-surface); border-bottom: 1px solid var(--rd-line); }
.complaint-detail-view .card > .card-header > i { color: var(--rd-blue); }
.complaint-detail-view .card > .card-body { padding: 20px; }
.complaint-detail-view .card > .complaint-detail-body { background: var(--rd-bg); }
.complaint-detail-view .rd-header-type { margin-left: auto; color: var(--rd-muted); font-size: 11px; font-weight: 400; }
.complaint-detail-view .rd-evidence { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.complaint-detail-view .rd-evidence img { max-height: 280px; object-fit: contain; cursor: zoom-in; }
.complaint-detail-view .rd-evidence-caption { color: var(--rd-muted); font-size: 11px; }
.complaint-detail-view .timeline::before { background: var(--rd-line); }
.complaint-detail-view .timeline-dot { background: var(--rd-soft); color: var(--rd-blue); border-color: var(--rd-surface); }
.complaint-detail-view .timeline-item:last-child { padding-bottom: 0; }
.complaint-detail-view .timeline-body { min-width: 0; overflow-wrap: anywhere; }
.complaint-detail-view .tl-status { flex-wrap: wrap; gap: 4px; color: var(--rd-blue); }
.complaint-detail-view .tl-status strong { color: var(--rd-ink); }
.complaint-detail-view .timeline-body .time { color: var(--rd-muted); line-height: 1.5; }

/* Job details and post composer share the request detail surfaces. */
.job-detail-modal .rd-job-posted { font-size: 12px; line-height: 1.5; color: var(--rd-muted); }
.job-detail-modal .modal-title { font-size: 20px; line-height: 1.35; }
.job-detail-modal .vj-grid { border: 1px solid var(--rd-line); border-radius: 11px; background: var(--rd-surface); gap: 0; }
.job-detail-modal .vj-field { padding: 15px 18px; background: transparent; }
.job-detail-modal .vj-field .lbl { color: var(--rd-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; }
.job-detail-modal .vj-field .lbl i { color: var(--rd-blue); }
.job-detail-modal .vj-field .val { color: var(--rd-ink); font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
.job-detail-modal .vj-field .val.salary { color: var(--rd-blue); font-weight: 600; }
.job-detail-modal .vj-section { margin-top: 20px; }
.job-detail-modal .vj-section h6 { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--rd-ink); gap: 8px; margin-bottom: 10px; }
.job-detail-modal .vj-section h6 i { color: var(--rd-blue); }
.job-detail-modal .vj-section .box { padding: 16px 18px; border-color: var(--rd-line); background: var(--rd-surface); color: var(--rd-ink); line-height: 1.7; }
.job-detail-modal .vj-hero, .job-detail-modal .vj-pdf { border-color: var(--rd-line); margin-bottom: 0; }
.job-detail-modal .vj-hero-cap { background: var(--rd-surface); color: var(--rd-muted); padding: 9px; }
.job-detail-modal .vj-hero img { object-fit: contain; background: var(--rd-surface); }
.job-detail-modal .vj-file { background: var(--rd-surface); border-color: var(--rd-line); color: var(--rd-ink); margin-bottom: 0; }
.job-detail-modal .vj-pdf-bar { background: var(--rd-surface); color: var(--rd-ink); }
.job-compose-modal .job-post-form { display: flex; width: 100%; max-height: 100%; }
.job-compose-modal .job-compose-intro { margin-bottom: 18px; }
.job-compose-modal .job-compose-intro h6 { font-size: 17px; font-weight: 600; color: var(--rd-ink); margin: 0 0 5px; }
.job-compose-modal .job-compose-intro p { font-size: 12.5px; line-height: 1.6; color: var(--rd-muted); margin: 0; }
.job-compose-modal .job-compose-fields { padding: 18px; margin: 0 0 16px; border: 1px solid var(--rd-line); border-radius: 11px; background: var(--rd-surface); }
.job-compose-modal .post-section-title { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--rd-blue); margin: 0 0 15px; }
.job-compose-modal .form-label { font-size: 12px; font-weight: 500 !important; color: var(--rd-ink); margin-bottom: 6px; }
.job-compose-modal .form-control, .job-compose-modal .form-select { font-size: 13px; border-color: var(--rd-line); border-radius: 7px; }
.job-compose-modal .input-group > .form-control, .job-compose-modal .input-group > .form-select { border-radius: 0; }
.job-compose-modal .input-group > :first-child { border-radius: 7px 0 0 7px; }
.job-compose-modal .input-group > :last-child { border-radius: 0 7px 7px 0; }
.job-compose-modal .job-compose-divider { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rd-line); }
.job-compose-modal .job-compose-divider .post-section-title { margin-bottom: 0; }
.job-compose-modal .post-choose-first { padding: 25px 18px; color: var(--rd-muted); background: var(--rd-surface); border-color: var(--rd-line); }
.job-compose-modal .post-where { background: var(--rd-soft); color: var(--rd-blue); border-color: var(--rd-line); line-height: 1.6; }
.job-compose-modal .job-compose-privacy { display: flex; align-items: flex-start; gap: 10px; padding: 15px; margin-top: 16px; background: var(--rd-soft); border-radius: 10px; color: var(--rd-ink); font-size: 12px; }
.job-compose-modal .job-compose-privacy > i { color: var(--rd-blue); margin-top: 3px; }
.job-compose-modal .job-compose-privacy strong { font-weight: 600; }
.job-compose-modal .job-compose-privacy p { margin: 4px 0 0; color: var(--rd-muted); line-height: 1.6; }
.interested-people-modal .interested-intro { display: flex; align-items: center; gap: 8px; color: var(--rd-muted); font-size: 12px; margin-bottom: 16px; }
.interested-people-modal .interested-person-card { background: var(--rd-surface); border: 1px solid var(--rd-line); border-radius: 12px; padding: 20px; }
.interested-people-modal .interested-person-card + .interested-person-card { margin-top: 16px; }
.interested-people-modal .interested-person-heading { display: flex; align-items: center; gap: 12px; }
.interested-people-modal .interested-date { font-size: 11px; color: var(--rd-muted); white-space: nowrap; }
.interested-people-modal .interested-contact { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--rd-line); }
.interested-people-modal .interested-contact > * { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--rd-ink); min-width: 0; }
.interested-people-modal .interested-contact span { overflow-wrap: anywhere; }
.interested-people-modal .interested-contact i { color: var(--rd-blue); }
.interested-people-modal .interested-contact a:hover { color: var(--rd-blue); text-decoration: underline; }
.interested-people-modal .interested-background { margin-top: 18px; }
.interested-people-modal .interested-message { margin-top: 18px; background: var(--rd-bg); border-left: 3px solid var(--rd-blue); border-radius: 8px; padding: 14px 16px; }
.interested-people-modal .interested-resume { margin-top: 18px; border: 1px solid var(--rd-line); border-radius: 9px; padding: 14px; }
.interested-people-modal .interested-resume-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.interested-people-modal .interested-resume-preview { margin-top: 12px; }
.interested-people-modal .interested-resume-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--rd-line); border-radius: 7px; background: var(--rd-bg); cursor: zoom-in; }
.interested-people-modal .interested-resume-preview img[hidden] { display: none; }
.interested-people-modal .interested-resume-fallback:not([hidden]) { display: flex; align-items: center; gap: 10px; padding: 18px; background: var(--rd-bg); color: var(--rd-muted); font-size: 12px; border-radius: 7px; }
.interested-people-modal .interested-preview-hint { margin-top: 7px; font-size: 11px; color: var(--rd-muted); }
@media (max-width: 575.98px) {
  .interested-people-modal .interested-person-card { padding: 16px; }
  .interested-people-modal .interested-person-heading { flex-wrap: wrap; }
  .interested-people-modal .interested-date { width: 100%; margin-left: 58px; }
}
@media (max-width: 575.98px) {
  .request-detail-modal .modal-header, .request-detail-modal .modal-footer { padding: 14px 16px; }
  .request-detail-modal .modal-body { padding: 18px 16px; }
  .request-detail-modal .modal-title { font-size: 13px; }
  .request-detail-modal .rd-overview { flex-wrap: wrap; gap: 10px; }
  .request-detail-modal .rd-person-name { font-size: 15px; }
  .request-detail-modal .rd-status { margin-left: 56px; }
  .request-detail-modal .rd-panel { padding: 15px; }
}

[data-theme="dark"] .timeline::before { background: #2d3a4a; }
[data-theme="dark"] .timeline-body h6 { color: #ffffff; }
[data-theme="dark"] .timeline-body .tl-status { color: #60a5fa; }
[data-theme="dark"] .timeline-body .tl-status strong { color: #ffffff; }
[data-theme="dark"] .timeline-body p { color: #bdc0c5; }
[data-theme="dark"] .timeline-body .time { color: #bdc0c5; }

/* Page header rule */
[data-theme="dark"] .page-header h1::after {
  background: linear-gradient(90deg, var(--primary) 0 55%, var(--seal-green) 55% 100%);
}

/* Pagination */
[data-theme="dark"] .page-link { background: #222e3c; border-color: #2d3a4a; color: #93c5fd; }
[data-theme="dark"] .page-link:hover { background: #2d3a4a; border-color: #3a4a5c; color: #ffffff; }
[data-theme="dark"] .page-link:focus { box-shadow: 0 0 0 .2rem rgba(96, 165, 250, .25); }
[data-theme="dark"] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Greyed-out arrows and the "…" still have to be readable, so they sit well
   above the page background instead of disappearing into it. */
[data-theme="dark"] .page-item.disabled .page-link { background: #1b2635; border-color: #2d3a4a; color: #64748b; }

/* Section title */
[data-theme="dark"] .section-title { color: #60a5fa; border-bottom-color: #2d3a4a; }

/* Audit tags */
[data-theme="dark"] .audit-tag.document    { background: rgba(59,130,246,.12); color: #60a5fa; }
[data-theme="dark"] .audit-tag.user        { background: rgba(40,108,191,.15); color: #93c5fd; }
[data-theme="dark"] .audit-tag.complaint   { background: rgba(249,115,22,.12); color: #fb923c; }
[data-theme="dark"] .audit-tag.equipment   { background: rgba(16,185,129,.12); color: #34d399; }
[data-theme="dark"] .audit-tag.announcement{ background: rgba(245,158,11,.12); color: #fbbf24; }
[data-theme="dark"] .audit-tag.job         { background: rgba(6,182,212,.12); color: #22d3ee; }
[data-theme="dark"] .audit-tag.auth        { background: rgba(139,148,168,.1); color: #bdc0c5; }

/* Camera / QR */
[data-theme="dark"] .camera-container { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .qr-section { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .qr-status { color: #8a8fa0; }

/* Notification pop-up */
[data-theme="dark"] .notif-pop-title { color: #ffffff; }
[data-theme="dark"] .notif-pop-text { color: #bdc0c5; }
[data-theme="dark"] .notif-pop-modal { background: #222e3c !important; }

/* Mobile filter wrap */
[data-theme="dark"] .mobile-filter-wrap { background: #222e3c; border-color: #2d3a4a; }
[data-theme="dark"] .mobile-filter-toggle { background: #222e3c; color: #ffffff; }
[data-theme="dark"] .mobile-filter-toggle:active { background: #2d3a4c; }

/* ── Announcement cards (.annx) ── */
[data-theme="dark"] .annx { background: #222e3c; border-color: transparent; }
[data-theme="dark"] .annx:hover { box-shadow: 0 6px 18px rgba(0,0,0,.22); }
[data-theme="dark"] .annx.is-pinned { background: #252c20; border-color: #3a3f28; }
[data-theme="dark"] .annx.is-hidden-now { background: #1e2a38; }
[data-theme="dark"] .annx-title { color: #ffffff; }
[data-theme="dark"] .annx-text { color: #bdc0c5; }
[data-theme="dark"] .annx-foot { color: #8a8fa0; }
[data-theme="dark"] .annx-foot i { color: #8a8fa0; }
[data-theme="dark"] .annx-when { color: #8a8fa0; }
[data-theme="dark"] .annx-count { color: #8a8fa0; }
[data-theme="dark"] .annx-section { color: #8a8fa0; }
[data-theme="dark"] .annx-actions { border-left-color: #2d3a4a; }
[data-theme="dark"] .annx-empty { background: #222e3c; border-color: #2d3a4a; color: #8a8fa0; }
[data-theme="dark"] .annx-empty i { color: #2d3a4a; }
[data-theme="dark"] .annx-thumb { background: #1e2a38; }
[data-theme="dark"] .annx-photo { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .annx-search { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .annx-search input { color: #ffffff; }
[data-theme="dark"] .annx-search i { color: #8a8fa0; }
[data-theme="dark"] .annx-side-title { color: #8a8fa0; }
[data-theme="dark"] .annx-side .annx-cats .filter-chip { color: #bdc0c5; }
[data-theme="dark"] .annx-side .annx-cats .filter-chip:hover { background: rgba(255,255,255,.05); color: #ffffff; }
[data-theme="dark"] .annx-side .annx-cats .filter-chip.active { background: rgba(59,130,246,.15); color: #60a5fa; }
/* Admin announcement sidebar panel */
[data-theme="dark"] .adm-panel { background: #222e3c; border-color: #2d3a4a; }
[data-theme="dark"] .adm-panel-title { color: #8a8fa0; }
[data-theme="dark"] .adm-panel-link { color: #bdc0c5; }
[data-theme="dark"] .adm-panel-link span { color: #8a8fa0; }
[data-theme="dark"] .adm-panel-link:hover { background: rgba(255,255,255,.05); color: #ffffff; }
[data-theme="dark"] .adm-panel-link.active { background: rgba(59,130,246,.15); color: #60a5fa; }
[data-theme="dark"] .adm-panel-link.active span { color: #60a5fa; }
/* Announcement flag badges */
[data-theme="dark"] .annx-flag.showing, [data-theme="dark"] .annx-flag.new { background: rgba(16,185,129,.14); color: #34d399; }
[data-theme="dark"] .annx-flag.scheduled { background: rgba(6,182,212,.14); color: #22d3ee; }
[data-theme="dark"] .annx-flag.ended, [data-theme="dark"] .annx-flag.archived { background: rgba(139,148,168,.1); color: #bdc0c5; }
[data-theme="dark"] .annx-flag.pinned { background: rgba(245,158,11,.14); color: #fbbf24; }
/* Announcement category chips on dark */
[data-theme="dark"] .annx-cat { opacity: .85; }
/* Announcement reading view */
[data-theme="dark"] .annr-head { border-bottom-color: #2d3a4a; }
[data-theme="dark"] .annr-title { color: #ffffff; }
[data-theme="dark"] .annr-meta { color: #8a8fa0; }
[data-theme="dark"] .annr-text { color: #d3d5d8; }
[data-theme="dark"] .annr-figure img { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .annr-event-info { background: rgba(59,130,246,.05); border-color: #2d3a4a; }
[data-theme="dark"] .annr-info-row { color: #d8dade; }
[data-theme="dark"] .annr-info-row strong { color: #60a5fa; }
/* Announcement form (add/edit modal) */
[data-theme="dark"] .ann-schedule-box { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .ann-schedule-title { color: #ffffff; }
[data-theme="dark"] .ann-schedule-box .form-label { color: #8a8fa0; }
[data-theme="dark"] .ann-schedule-hint { color: #8a8fa0; }
[data-theme="dark"] .ann-details-box { background: #1e2a38; border-color: #2d3a4a; }
[data-theme="dark"] .ann-details-box .form-label { color: #8a8fa0; }
[data-theme="dark"] .ann-details-toggle { color: #bdc0c5; }
[data-theme="dark"] .ann-details-toggle:hover { color: var(--primary); }
[data-theme="dark"] .form-control::file-selector-button { background-color: #2d3a4a; color: #bdc0c5; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }

/* Float buttons */
[data-theme="dark"] .float-chat { background: var(--seal-green); }

/* Bootstrap overrides for dark */
[data-theme="dark"] .bg-light { background-color: #222e3c !important; }
[data-theme="dark"] .bg-white { background-color: #222e3c !important; }
[data-theme="dark"] .text-dark { color: #ffffff !important; }
[data-theme="dark"] .border { border-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; }
[data-theme="dark"] .alert-info { background: rgba(59,130,246,.1); color: #60a5fa; border-color: rgba(59,130,246,.2); }
[data-theme="dark"] .alert-success { background: rgba(16,185,129,.1); color: #34d399; border-color: rgba(16,185,129,.2); }
[data-theme="dark"] .alert-dismissible .btn-close { filter: invert(1) brightness(.85); opacity: .8; }
[data-theme="dark"] .alert-dismissible .btn-close:hover,
[data-theme="dark"] .alert-dismissible .btn-close:focus { opacity: 1; }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,.1); color: #fbbf24; border-color: rgba(245,158,11,.2); }
[data-theme="dark"] .alert-danger { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.2); }

/* Walk-in actions and reminders use the same cool palette as the dark staff UI. */
[data-theme="dark"] body.page-complaints #walkinModal .btn-warning {
  background: #286cbf;
  border-color: #286cbf;
  color: #fff !important;
}
[data-theme="dark"] body.page-complaints #walkinModal .btn-warning:hover,
[data-theme="dark"] body.page-complaints #walkinModal .btn-warning:focus {
  background: #1f579d;
  border-color: #1f579d;
  color: #fff !important;
}
[data-theme="dark"] body.page-borrow #walkinModal .alert-warning {
  background: #24364a;
  border-color: #3b5874;
  color: #c9d9eb;
}
[data-theme="dark"] body.page-borrow #walkinModal .alert-warning i { color: #93c5fd; }

/* Walk-in document requests: resident record search. */
.walkin-resident-results { max-height: 150px; overflow-y: auto; margin-top: 4px; }
.walkin-resident-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid #dfe9f4;
  color: #1f2937;
  text-align: left;
  cursor: pointer;
}
.walkin-resident-result + .walkin-resident-result { border-top: 0; }
.walkin-resident-result:hover,
.walkin-resident-result:focus { background: #eff6ff; outline-color: #286cbf; }
.walkin-resident-result small,
.walkin-resident-empty { color: #64748b; }
.walkin-resident-empty { padding: 8px 2px; font-size: 12px; }
[data-theme="dark"] .walkin-resident-result { background: #19222c; border-color: #3a4a5c; color: #e2e8f0; }
[data-theme="dark"] .walkin-resident-result:hover,
[data-theme="dark"] .walkin-resident-result:focus { background: #243b55; }
[data-theme="dark"] .walkin-resident-result small,
[data-theme="dark"] .walkin-resident-empty { color: #a8b3c2; }

/* Settings page */
[data-theme="dark"] .settings-card { background: #222e3c; border-color: transparent; }
[data-theme="dark"] .settings-tab { color: #bdc0c5; }
[data-theme="dark"] .settings-tab.active { color: #ffffff; background: #222e3c; }
[data-theme="dark"] .settings-section-head { color: #60a5fa; }

/* ── Login & Register pages ── */
[data-theme="dark"] .login-page { background: #19222c; }
[data-theme="dark"] .login-shell { box-shadow: 0 4px 24px rgba(0,0,0,.35); }
[data-theme="dark"] .login-brand { background: #1e2a38; }
[data-theme="dark"] .login-wordmark { color: #ffffff; }
[data-theme="dark"] .login-place { color: #bdc0c5; }
[data-theme="dark"] .login-tagline { color: #bdc0c5; }
[data-theme="dark"] .login-form-side { background: #222e3c; }
[data-theme="dark"] .login-form-side h2 { color: #ffffff; }
[data-theme="dark"] .login-form-side .login-sub { color: #bdc0c5; }
[data-theme="dark"] .register-page { background: #19222c; }
[data-theme="dark"] .register-shell { background: #222e3c; box-shadow: 0 4px 24px rgba(0,0,0,.35); }
[data-theme="dark"] .register-header { background: #1e2a38; }
[data-theme="dark"] .register-header h2 { color: #ffffff; }
[data-theme="dark"] .register-header p { color: #bdc0c5; }

/* ── Special categories progress bars ── */
[data-theme="dark"] .progress { background: #2d3a4a; }

/* ── Nav pills (filter tabs outside sidebar) ── */
[data-theme="dark"] .nav-pills .nav-link:not(.active) { color: #bdc0c5; }
[data-theme="dark"] .nav-pills .nav-link:not(.active):hover { color: #ffffff; background: rgba(255,255,255,.05); }
/* Opaque count backgrounds stay readable on both selected and idle tabs. */
[data-theme="dark"] .chip-n { --count-bg: #334155; --count-ink: #e2e8f0; background: var(--count-bg); color: var(--count-ink); }
[data-theme="dark"] .chip-n.t-pending  { --count-bg: #713f12; --count-ink: #fde68a; }
[data-theme="dark"] .chip-n.t-progress { --count-bg: #1e3a5f; --count-ink: #60a5fa; }
[data-theme="dark"] .chip-n.t-ready    { --count-bg: #1e3a5f; --count-ink: #93c5fd; }
[data-theme="dark"] .chip-n.t-approved { --count-bg: #14532d; --count-ink: #bbf7d0; }
[data-theme="dark"] .chip-n.t-released { --count-bg: #134e4a; --count-ink: #99f6e4; }
[data-theme="dark"] .chip-n.t-closed,
[data-theme="dark"] .chip-n.t-archive  { --count-bg: #334155; --count-ink: #e2e8f0; }
[data-theme="dark"] .chip-n.t-overdue,
[data-theme="dark"] .chip-n.t-rejected { --count-bg: #7f1d1d; --count-ink: #fecaca; }
/* Match each status badge; shared tones can represent different statuses. */
[data-theme="dark"] .chip-n.count-status-pending,
[data-theme="dark"] .chip-n.count-status-for-mediation { --count-bg: #713f12; --count-ink: #fbbf24; }
[data-theme="dark"] .chip-n.count-status-processing,
[data-theme="dark"] .chip-n.count-status-under-investigation { --count-bg: #1e3a5f; --count-ink: #60a5fa; }
[data-theme="dark"] .chip-n.count-status-ready-for-pickup { --count-bg: #1e3a5f; --count-ink: #93c5fd; }
[data-theme="dark"] .chip-n.count-status-approved,
[data-theme="dark"] .chip-n.count-status-resolved,
[data-theme="dark"] .chip-n.count-status-released { --count-bg: #144d38; --count-ink: #34d399; }
[data-theme="dark"] .chip-n.count-status-returned { --count-bg: #334155; --count-ink: #cbd5e1; }
[data-theme="dark"] .chip-n.count-status-rejected,
[data-theme="dark"] .chip-n.count-status-overdue { --count-bg: #641e28; --count-ink: #f87171; }
[data-theme="dark"] .chip-n.count-status-closed,
[data-theme="dark"] .chip-n.count-status-deactivated { --count-bg: #2d3a4a; --count-ink: #bdc0c5; }
[data-theme="dark"] body.page-borrow .chip-n.count-status-released { --count-bg: #164e63; --count-ink: #22d3ee; }
[data-theme="dark"] body.page-borrow .chip-n.count-status-returned { --count-bg: #334155; --count-ink: #cbd5e1; }
[data-theme="dark"] .chip-n.plain,
[data-theme="dark"] .chip-n.zero,
[data-theme="dark"] .filter-chip.active .chip-n.plain,
[data-theme="dark"] .filter-chip.active .chip-n.zero,
[data-theme="dark"] .nav-pills .nav-link.active .chip-n.plain,
[data-theme="dark"] .nav-pills .nav-link.active .chip-n.zero,
[data-theme="dark"] .nav-tabs .nav-link.active .chip-n.plain,
[data-theme="dark"] .nav-tabs .nav-link.active .chip-n.zero { background: #334155; color: #e2e8f0; }
[data-theme="dark"] body.page-borrow .chip-n[class] { background: var(--count-bg) !important; color: var(--count-ink) !important; }
[data-theme="dark"] .um-tab-count,
[data-theme="dark"] .nav-pills .nav-link.active .um-tab-count { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .notif-badge { background: #b91c1c; color: #ffffff; }
[data-theme="dark"] .chip-archive,
[data-theme="dark"] .filter-chip.chip-archive { background: transparent; color: #bdc0c5; border-color: #2d3a4a; }
[data-theme="dark"] .chip-archive:hover,
[data-theme="dark"] .chip-archive.active,
[data-theme="dark"] .filter-chip.chip-archive:hover,
[data-theme="dark"] .filter-chip.chip-archive.active { color: #ffffff; background: rgba(255,255,255,.06); border-color: #3a4a5c; }

/* ── Form-select arrow for dark mode ── */
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bdc0c5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}

/* ── Filter panel in dark mode ── */
[data-theme="dark"] .filter-panel .form-select {
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .filter-panel .filter-group-label { color: #8a8fa0; }
[data-theme="dark"] .filter-panel .form-check-label { color: #bdc0c5; }

/* ── User management table extras ── */
[data-theme="dark"] .um-toolbar { background: #1e2a38; }

/* ── Job Finder rows (jrow) ── */
[data-theme="dark"] .jrow { background: #222e3c; border-color: #2d3a4a; }
[data-theme="dark"] .jrow:hover { border-color: rgba(59,130,246,.35); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
[data-theme="dark"] .jrow-icon.blue  { background: rgba(59,130,246,.15); color: #60a5fa; }
[data-theme="dark"] .jrow-icon.green { background: rgba(16,185,129,.15); color: #34d399; }
[data-theme="dark"] .jrow-title { color: #ffffff; }
[data-theme="dark"] .jrow-meta { color: #8a8fa0; }
[data-theme="dark"] .jrow-meta i { color: #8a8fa0; }
[data-theme="dark"] .jrow-overview { color: #bdc0c5; }
[data-theme="dark"] .jrow-overview.empty, [data-theme="dark"] .jrow-sched.empty { color: #6b7280; }
[data-theme="dark"] .jrow-sched { color: #bdc0c5; }
[data-theme="dark"] .jrow-sched i { color: #8a8fa0; }
[data-theme="dark"] .jrow-tag { background: #2d3a4a; color: #bdc0c5; }
[data-theme="dark"] .jrow-tag.salary { background: rgba(16,185,129,.15); color: #34d399; }
[data-theme="dark"] .jrow-chip.warn  { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-theme="dark"] .jrow-chip.ok    { background: rgba(16,185,129,.15); color: #34d399; }
[data-theme="dark"] .jrow-chip.bad   { background: rgba(239,68,68,.15); color: #f87171; }
[data-theme="dark"] .jrow-chip.muted { background: #2d3a4a; color: #8a8fa0; }
[data-theme="dark"] .jrow-chip.mine  { background: rgba(40,108,191,.18); color: #93c5fd; }
[data-theme="dark"] .jrow-sent { color: #34d399; background: rgba(16,185,129,.15); }
[data-theme="dark"] .jrow-note { color: #8a8fa0; }
[data-theme="dark"] .jrow-more { color: #8a8fa0; }
[data-theme="dark"] .jrow-more:hover { color: #ffffff; background: rgba(255,255,255,.08); }
[data-theme="dark"] .jrow-privacy { color: #8a8fa0; }
@media (max-width: 575.98px) { [data-theme="dark"] .jrow-side { border-top-color: #2d3a4a; } }

/* ── Toast notification cards (top-right pop-ups) ── */
[data-theme="dark"] .nt {
  background: #222e3c;
  border-color: #2d3a4a;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .nt-close { color: #8a8fa0; }
[data-theme="dark"] .nt-close:hover { background: rgba(255,255,255,.08); color: #ffffff; }
[data-theme="dark"] .nt.k-success      { --nt-accent: #34d399; --nt-tint: rgba(16,185,129,.15); }
[data-theme="dark"] .nt.k-error        { --nt-accent: #f87171; --nt-tint: rgba(239,68,68,.15); }
[data-theme="dark"] .nt.k-warning      { --nt-accent: #fbbf24; --nt-tint: rgba(245,158,11,.15); }
[data-theme="dark"] .nt.k-document     { --nt-accent: #60a5fa; --nt-tint: rgba(59,130,246,.15); }
[data-theme="dark"] .nt.k-complaint    { --nt-accent: #fb7185; --nt-tint: rgba(244,63,94,.15); }
[data-theme="dark"] .nt.k-borrow       { --nt-accent: #2dd4bf; --nt-tint: rgba(20,184,166,.15); }
[data-theme="dark"] .nt.k-job          { --nt-accent: #93c5fd; --nt-tint: rgba(40,108,191,.18); }
[data-theme="dark"] .nt.k-announcement { --nt-accent: #facc15; --nt-tint: rgba(202,138,4,.2); }
[data-theme="dark"] .nt.k-emergency    { --nt-accent: #f87171; --nt-tint: #f87171; border-color: rgba(239,68,68,.35); background: #2c1f23; }

/* Compact export menus for reports and module record lists. */
.export-menu { min-width: 240px; max-width: calc(100vw - 24px); max-height: min(76vh, 520px); overflow-y: auto; padding: 7px; border: 1px solid #dbe2ea; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); font-size: 13px; }
.export-menu .dropdown-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 5px; color: #475569; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.export-menu-year { color: #64748b; font-weight: 600; letter-spacing: 0; }
.export-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; color: #1e293b; line-height: 1.3; }
.export-menu .dropdown-item i { width: 17px; color: #286cbf; text-align: center; }
.export-menu .dropdown-item:hover, .export-menu .dropdown-item:focus { background: #eaf2fc; color: #174a87; }
.export-menu .dropdown-divider { margin: 7px 4px; border-color: #e2e8f0; }
.export-menu-note { display: block; padding: 7px 10px 4px; color: #64748b; font-size: 11.5px; line-height: 1.4; }
.resident-export-choice { position: relative; margin: 0; cursor: pointer; }
.resident-export-choice > span { flex: 1; }
.resident-export-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.resident-export-choice .resident-export-check { margin-left: auto; visibility: hidden; }
.resident-export-choice.is-selected { background: #edf4fc; color: #174a87; }
.resident-export-choice.is-selected .resident-export-check { visibility: visible; }
.resident-export-choice:focus-visible,
.resident-export-choice:has(input:focus-visible) { outline: 2px solid #286cbf; outline-offset: -2px; }
[data-theme="dark"] .resident-export-choice.is-selected { background: #2d4056; color: #fff; }
[data-theme="dark"] .export-menu { background: #222e3c; border-color: #3a4758; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
[data-theme="dark"] .export-menu .dropdown-header, [data-theme="dark"] .export-menu-year, [data-theme="dark"] .export-menu-note { color: #a8b3c2; }
[data-theme="dark"] .export-menu .dropdown-item { color: #e2e8f0; }
[data-theme="dark"] .export-menu .dropdown-item i { color: #93c5fd; }
[data-theme="dark"] .export-menu .dropdown-item:hover, [data-theme="dark"] .export-menu .dropdown-item:focus { background: #2d4056; color: #fff; }
[data-theme="dark"] .export-menu .dropdown-divider { border-color: #3a4758; }