/* ================================================================
   MySafeSociety — Unified Design System v1.0
   Flat Colors · Low Radius · Light/Dark Theme · Inter Font
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ──────────────────────────────────────────────── */
:root {
  --brand:           #2563EB;
  --brand-hover:     #1D4ED8;
  --brand-light:     #EFF6FF;
  --brand-muted:     #DBEAFE;
  --success:         #16A34A;
  --success-light:   #DCFCE7;
  --danger:          #DC2626;
  --danger-light:    #FEE2E2;
  --warning:         #D97706;
  --warning-light:   #FEF3C7;
  --info:            #0891B2;
  --info-light:      #E0F2FE;

  /* Light theme */
  --bg:              #F1F5F9;
  --surface:         #FFFFFF;
  --surface-2:       #F8FAFC;
  --surface-3:       #F1F5F9;
  --border:          #E2E8F0;
  --border-strong:   #CBD5E1;
  --focus-ring:      rgba(37, 99, 235, 0.15);
  --tx-1:            #0F172A;
  --tx-2:            #475569;
  --tx-3:            #94A3B8;
  --shadow-s:        0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-m:        0 2px 4px rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.04);
  --shadow-l:        0 4px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);

  /* Sidebar */
  --sb-bg:           #1E293B;
  --sb-text:         #94A3B8;
  --sb-active-bg:    #2563EB;
  --sb-active-text:  #FFFFFF;
  --sb-hover:        #334155;
  --sb-width:        240px;

  /* Surface alias */
  --surface-alt: #F8FAFC;

  /* Radius */
  --r-s:  4px;
  --r-m:  6px;
  --r-l:  8px;
  --r-xl: 10px;
}

[data-theme="dark"] {
  --bg:              #0F172A;
  --surface:         #1E293B;
  --surface-2:       #263348;
  --surface-3:       #334155;
  --border:          #334155;
  --border-strong:   #475569;
  --focus-ring:      rgba(59, 130, 246, 0.2);
  --tx-1:            #F1F5F9;
  --tx-2:            #94A3B8;
  --tx-3:            #64748B;
  --shadow-s:        0 1px 2px rgba(0,0,0,.3);
  --shadow-m:        0 2px 8px rgba(0,0,0,.3);
  --shadow-l:        0 4px 24px rgba(0,0,0,.4);
  --sb-bg:           #0F172A;
  --sb-hover:        #1E293B;
  --surface-alt:     #1E293B;
  --brand-light:     rgba(37,99,235,.15);
  --brand-muted:     rgba(37,99,235,.2);
  --success-light:   rgba(22,163,74,.15);
  --danger-light:    rgba(220,38,38,.15);
  --warning-light:   rgba(217,119,6,.15);
  --info-light:      rgba(8,145,178,.15);
}

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--tx-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .2s, color .2s;
}

h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--tx-1); line-height: 1.3; margin-bottom: .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5 { font-size: .9375rem; }
h6 { font-size: .875rem; }

p { color: var(--tx-2); margin-bottom: .75rem; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
small, .small { font-size: .8125rem; }
hr { border-color: var(--border); margin: 1.25rem 0; opacity: 1; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.card-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: .875rem 1.25rem;
  font-weight: 600;
  font-size: .875rem;
  color: var(--tx-1);
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body  { padding: 1.25rem; }
.card-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: .875rem 1.25rem;
}
.card-title { font-size: .9375rem; font-weight: 700; color: var(--tx-1); margin-bottom: .25rem; }
.card-text  { color: var(--tx-2); font-size: .875rem; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--tx-2);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .375rem;
}
.form-control,
.form-select {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-m);
  color: var(--tx-1);
  font-size: .875rem;
  font-family: inherit;
  padding: .5625rem .875rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
  width: 100%;
}
.form-control:focus,
.form-select:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
  color: var(--tx-1);
  outline: none;
}
.form-control::placeholder { color: var(--tx-3); }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--danger) !important; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.invalid-feedback { font-size: .8125rem; color: var(--danger); margin-top: .25rem; }
.valid-feedback   { font-size: .8125rem; color: var(--success); margin-top: .25rem; }
.form-text        { font-size: .8125rem; color: var(--tx-3); margin-top: .25rem; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--focus-ring); }
textarea.form-control { resize: vertical; min-height: 90px; }

/* Input Group */
.input-group-text {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  color: var(--tx-3);
  font-size: .875rem;
  padding: .5625rem .875rem;
}
.input-group > .input-group-text:first-child {
  border-right: none;
  border-radius: var(--r-m) 0 0 var(--r-m);
}
.input-group > .form-control:last-child,
.input-group > .form-select:last-child {
  border-left: none;
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.input-group > .input-group-text:last-child {
  border-left: none;
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.input-group > .form-control:only-child { border-radius: var(--r-m); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--r-m);
  padding: .5rem 1rem;
  border: 1.5px solid transparent;
  line-height: 1.5;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-sm { font-size: .8125rem; padding: .3125rem .75rem; }
.btn-lg { font-size: 1rem;     padding: .6875rem 1.375rem; }

.btn-primary, .btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-primary:hover, .btn-brand:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.btn-secondary {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--tx-1);
}
.btn-secondary:hover { background: var(--surface-3); color: var(--tx-1); }
.btn-success  { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: #15803D; border-color: #15803D; color: #fff; }
.btn-danger   { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-danger:hover  { background: #B91C1C;  border-color: #B91C1C;  color: #fff; }
.btn-warning  { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-info     { background: var(--info);    border-color: var(--info);    color: #fff; }
.btn-outline-primary {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}
.btn-outline-primary:hover { background: var(--brand); color: #fff; }
.btn-outline-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--tx-2);
}
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--tx-1); }
.btn-light {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--tx-1);
}
.btn-light:hover { background: var(--surface-3); }
.btn-link { background: none; border-color: transparent; color: var(--brand); padding-left: 0; padding-right: 0; }
.btn-link:hover { color: var(--brand-hover); }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .25em .625em;
  border-radius: var(--r-s);
  line-height: 1.4;
}
.badge.bg-primary   { background: var(--brand-muted)    !important; color: var(--brand)    !important; }
.badge.bg-success   { background: var(--success-light)  !important; color: var(--success)  !important; }
.badge.bg-danger    { background: var(--danger-light)   !important; color: var(--danger)   !important; }
.badge.bg-warning   { background: var(--warning-light)  !important; color: var(--warning)  !important; }
.badge.bg-info      { background: var(--info-light)     !important; color: var(--info)     !important; }
.badge.bg-secondary { background: var(--surface-3)      !important; color: var(--tx-2)     !important; }
.badge.bg-dark      { background: var(--tx-1)            !important; color: var(--surface) !important; }
.badge.bg-light     { background: var(--surface-2)      !important; color: var(--tx-2)     !important; border: 1px solid var(--border); }

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--r-m);
  border: 1.5px solid;
  font-size: .875rem;
  padding: .875rem 1rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.alert-danger  { background: var(--danger-light);  border-color: #FCA5A5; color: #991B1B; }
.alert-success { background: var(--success-light); border-color: #86EFAC; color: #166534; }
.alert-warning { background: var(--warning-light); border-color: #FCD34D; color: #92400E; }
.alert-info    { background: var(--info-light);    border-color: #7DD3FC; color: #075985; }
[data-theme="dark"] .alert-danger  { background: rgba(220,38,38,.12);  border-color: rgba(220,38,38,.3);  color: #FCA5A5; }
[data-theme="dark"] .alert-success { background: rgba(22,163,74,.12);  border-color: rgba(22,163,74,.3);  color: #86EFAC; }
[data-theme="dark"] .alert-warning { background: rgba(217,119,6,.12);  border-color: rgba(217,119,6,.3);  color: #FCD34D; }
[data-theme="dark"] .alert-info    { background: rgba(8,145,178,.12);  border-color: rgba(8,145,178,.3);  color: #7DD3FC; }

/* ── Tables ─────────────────────────────────────────────────────── */
.table {
  width: 100%;
  color: var(--tx-1);
  border-collapse: separate;
  border-spacing: 0;
  font-size: .875rem;
}
.table thead th {
  background: var(--surface-2);
  color: var(--tx-3);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .75rem 1rem;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.table tbody td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--tx-1);
  background: var(--surface);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }
.table-responsive {
  border-radius: var(--r-l);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-s);
  overflow-x: auto;
}

/* DataTables */
.dataTables_wrapper { padding: 0; }

/* Top bar: Show [X] entries  ·  Search input — sits ABOVE the card */
.mss-dt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 .75rem 0;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Card wrapper — only the table lives here */
.mss-dt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}

/* Bottom bar: Showing X to Y of Z  ·  Pagination — sits BELOW the card */
.mss-dt-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0 0 0;
  margin-left: 0 !important;
  flex-wrap: wrap;
  gap: .5rem;
}
.mss-dt-bottom > * { margin: 0 !important; padding-left: 0 !important; }

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length { margin: 0 !important; }

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--tx-2);
  margin: 0;
  white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-m);
  color: var(--tx-1);
  padding: .375rem .75rem;
  font-size: .8125rem;
  font-family: inherit;
  height: 34px;
}
.dataTables_wrapper .dataTables_filter input {
  min-width: 200px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}

/* Info text: "Showing X to Y of Z" */
.dataTables_wrapper .dataTables_info {
  font-size: .8125rem;
  color: var(--tx-3);
  padding: 0 !important;
  margin: 0 !important;
  padding-top: 2px !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
  margin: 0;
  padding: 0;
}
.dataTables_wrapper .paginate_button {
  border-radius: var(--r-s) !important;
  padding: .3rem .65rem !important;
  font-size: .8125rem !important;
  font-weight: 500;
  color: var(--tx-2) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  line-height: 1.4 !important;
}
.dataTables_wrapper .paginate_button:hover {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--tx-1) !important;
}
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.dataTables_wrapper .paginate_button.disabled,
.dataTables_wrapper .paginate_button.disabled:hover {
  color: var(--tx-3) !important;
  cursor: default !important;
}

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  padding: .625rem 0;
  box-shadow: var(--shadow-s);
}
.navbar-brand {
  font-weight: 800;
  font-size: .9375rem;
  color: var(--tx-1) !important;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.nav-link {
  font-size: .875rem;
  font-weight: 500;
  color: var(--tx-2) !important;
  padding: .375rem .625rem !important;
  border-radius: var(--r-m);
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--tx-1) !important; background: var(--surface-2); }
.nav-link.active { color: var(--brand) !important; background: var(--brand-light); }

/* ── Dropdowns ──────────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-l);
  padding: .375rem;
  min-width: 180px;
  font-size: .875rem;
  margin-top: .375rem !important;
}
.dropdown-item {
  border-radius: var(--r-s);
  padding: .5rem .875rem;
  color: var(--tx-1);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background .12s;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--tx-1); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand-light); color: var(--brand); }
.dropdown-header { font-size: .75rem; font-weight: 700; color: var(--tx-3); letter-spacing: .06em; text-transform: uppercase; padding: .5rem .875rem .25rem; }
.dropdown-divider { border-color: var(--border); margin: .375rem 0; }

/* ── Modals ─────────────────────────────────────────────────────── */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-l);
}
.modal-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.modal-title { font-size: .9375rem; font-weight: 700; color: var(--tx-1); }
.modal-body  { padding: 1.25rem; }
.modal-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: .875rem 1.25rem;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  gap: .5rem;
}
.btn-close { opacity: .5; transition: opacity .15s; }
.btn-close:hover { opacity: 1; }
[data-theme="dark"] .btn-close { filter: invert(1); }
.modal-backdrop.show { opacity: .4; }

/* ── Sidebar (AdminLTE override) ────────────────────────────────── */
.app-sidebar {
  background: var(--sb-bg) !important;
  width: var(--sb-width) !important;
  border-right: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: none !important;
}
.sidebar-brand {
  padding: .875rem 1.25rem !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
}
.sidebar-brand .brand-text { font-size: .875rem !important; font-weight: 700 !important; color: #F1F5F9 !important; }
.nav-sidebar > .nav-item > .nav-link {
  font-size: .8125rem !important;
  font-weight: 500 !important;
  color: var(--sb-text) !important;
  padding: .5rem 1rem !important;
  border-radius: var(--r-m) !important;
  margin: 1px .5rem !important;
  transition: background .15s, color .15s !important;
}
.nav-sidebar > .nav-item > .nav-link:hover { background: var(--sb-hover) !important; color: #F1F5F9 !important; }
.nav-sidebar > .nav-item > .nav-link.active { background: var(--sb-active-bg) !important; color: #fff !important; }
.nav-sidebar .nav-link .nav-icon { width: 18px; font-size: .8125rem; opacity: .7; margin-right: .5rem; }
.nav-sidebar .nav-link.active .nav-icon { opacity: 1; }

/* Fix: global p{color} bleeds into sidebar in light theme */
.app-sidebar p,
.app-sidebar .nav-link p { color: var(--sb-text) !important; margin: 0; }
.app-sidebar .nav-link:hover p { color: #F1F5F9 !important; }
.app-sidebar .nav-link.active p { color: #fff !important; }
.app-sidebar h1,.app-sidebar h2,.app-sidebar h3,
.app-sidebar h4,.app-sidebar h5,.app-sidebar h6 { color: #F1F5F9 !important; }
.app-sidebar a { color: var(--sb-text); }
.app-sidebar { color: var(--sb-text); }

/* Sidebar user block */
.sb-user-block {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 1rem .625rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: .375rem;
  list-style: none;
}
.sb-avatar {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.sb-user-info { min-width: 0; }
.sb-user-name {
  font-size: .8125rem; font-weight: 700; color: #F1F5F9 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-role {
  font-size: .7rem; color: rgba(255,255,255,.35) !important;
  text-transform: uppercase; letter-spacing: .04em;
}

.sidebar-wrapper { padding-top: .375rem; }
.nav-header {
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.25) !important;
  padding: .875rem 1.5rem .375rem !important;
}

/* ── App Header (AdminLTE) ──────────────────────────────────────── */
.app-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-s) !important;
  min-height: 56px !important;
}
.app-header .navbar-nav .nav-link { color: var(--tx-2) !important; }
.app-header .navbar-nav .nav-link:hover { color: var(--tx-1) !important; }

/* ── Login Page ─────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-l);
  overflow: hidden;
}
.login-card-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 2rem 1.5rem;
  text-align: center;
}
.login-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-l);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin: 0 auto .875rem;
  color: #fff;
}
.login-title { font-size: 1.0625rem; font-weight: 700; color: var(--tx-1); margin: 0 0 .25rem; }
.login-subtitle { font-size: .8125rem; color: var(--tx-3); margin: 0; }
.login-card-body { padding: 1.75rem 2rem 2rem; }
.login-footer {
  border-top: 1px solid var(--border);
  padding: 1.25rem 2rem;
  background: var(--surface-2);
  text-align: center;
}
.portal-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
  margin-top: .75rem;
}
.portal-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--tx-2);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.portal-link:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-light);
}
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  color: var(--tx-2);
  font-size: .8125rem;
  text-decoration: none;
}
.login-brand:hover { color: var(--tx-1); }

/* ── Stat Cards ─────────────────────────────────────────────────── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 1.125rem;
  box-shadow: var(--shadow-s);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9375rem;
  flex-shrink: 0;
  color: #fff;
}
.stat-info {}
.stat-value { font-size: 1.375rem; font-weight: 800; color: var(--tx-1); line-height: 1.1; }
.stat-label { font-size: .75rem; font-weight: 600; color: var(--tx-3); text-transform: uppercase; letter-spacing: .05em; margin-top: .25rem; }

/* ── Page Header ────────────────────────────────────────────────── */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: .75rem;
}
.page-head h4, .page-head h3 { margin: 0; font-size: 1.0625rem; }
.page-sub { font-size: .8125rem; color: var(--tx-3); margin-top: .125rem; }

/* ── Theme Toggle Button ────────────────────────────────────────── */
.theme-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-m);
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  color: var(--tx-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  font-size: .875rem;
  flex-shrink: 0;
}
.theme-btn:hover { background: var(--surface-3); color: var(--tx-1); border-color: var(--border-strong); }

/* ── Avatar ─────────────────────────────────────────────────────── */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  background: var(--brand-muted);
  color: var(--brand);
  flex-shrink: 0;
}
.avatar-sm { width: 26px; height: 26px; font-size: .6875rem; }
.avatar-lg { width: 44px; height: 44px; font-size: .9375rem; }

/* ── Misc Utilities ─────────────────────────────────────────────── */
.text-brand   { color: var(--brand)   !important; }
.bg-brand     { background: var(--brand) !important; color: #fff !important; }
.text-mss-1   { color: var(--tx-1)   !important; }
.text-mss-2   { color: var(--tx-2)   !important; }
.text-mss-3   { color: var(--tx-3)   !important; }
.bg-surface   { background: var(--surface)   !important; }
.bg-surface-2 { background: var(--surface-2) !important; }
.border-mss   { border-color: var(--border)  !important; }
.divider      { height: 1px; background: var(--border); margin: 1.25rem 0; }
.fw-500       { font-weight: 500 !important; }
.fw-600       { font-weight: 600 !important; }
.fw-700       { font-weight: 700 !important; }

/* ── Pagination ─────────────────────────────────────────────────── */
.pagination .page-link {
  background: var(--surface);
  border-color: var(--border);
  color: var(--tx-2);
  font-size: .8125rem;
  font-weight: 500;
  padding: .375rem .75rem;
  border-radius: var(--r-s) !important;
  margin: 0 2px;
}
.pagination .page-link:hover { background: var(--surface-2); color: var(--tx-1); }
.pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .page-item.disabled .page-link { color: var(--tx-3); }

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb { background: none; padding: 0; margin: 0; font-size: .8125rem; }
.breadcrumb-item a { color: var(--tx-3); }
.breadcrumb-item.active { color: var(--tx-1); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--tx-3); }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx-3); }

/* ── Page layout wrapper ────────────────────────────────────────── */
.dash { padding: 1rem; max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .dash { padding: 1.5rem 2rem; } }
.dash-cols { display: grid; gap: 1rem; }
@media (min-width: 768px) { .dash-cols { grid-template-columns: 1fr 340px; } }

/* ── Greeting bar ───────────────────────────────────────────────── */
.greet-bar {
  display: flex; align-items: center; gap: .875rem;
  padding: 1rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1.25rem;
}
.greet-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; font-weight: 800; flex-shrink: 0;
}
.greet-av img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.greet-name { font-size: 1rem; font-weight: 800; color: var(--tx-1); line-height: 1.3; }
.greet-sub  { font-size: .8rem; color: var(--tx-3); margin-top: 1px; }
.greet-time { margin-left: auto; font-size: .75rem; color: var(--tx-3); text-align: right; white-space: nowrap; }

/* ── Flat stat tiles ────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .625rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 600px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .875rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: inherit;
  transition: border-color .15s;
}
.stat-tile:hover { border-color: var(--brand); color: inherit; }
.stat-tile.has-action .stat-num { color: var(--danger); }
.stat-ico {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; flex-shrink: 0;
}
.stat-num { font-size: 1.375rem; font-weight: 800; color: var(--tx-1); line-height: 1; }
.stat-lbl { font-size: .7rem; color: var(--tx-3); margin-top: 2px; font-weight: 600; letter-spacing: .02em; }

/* ── Section card ───────────────────────────────────────────────── */
.sc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.sc-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.sc-ico {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}
.sc-title { font-size: .9rem; font-weight: 700; color: var(--tx-1); flex: 1; }
.sc-link {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx-3); background: var(--surface-alt, var(--surface-2));
  border: 1px solid var(--border);
  text-decoration: none; font-size: .75rem;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.sc-link:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.sc-empty {
  padding: 2rem 1rem; text-align: center;
  color: var(--tx-3); font-size: .875rem;
}
.sc-empty i { font-size: 1.5rem; display: block; margin-bottom: .5rem; }

/* ── Generic list row ───────────────────────────────────────────── */
.list-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: none; }
.list-av {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.list-name { font-size: .875rem; font-weight: 600; color: var(--tx-1); }
.list-sub  { font-size: .75rem; color: var(--tx-3); }

/* ── Visitor row ────────────────────────────────────────────────── */
.vrow {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.vrow:last-child { border-bottom: none; }
.vav {
  width: 48px; height: 48px; border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--tx-3);
}
.vav img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.v-name { font-size: .875rem; font-weight: 700; color: var(--tx-1); }
.v-sub  { font-size: .75rem; color: var(--tx-3); margin-top: 1px; }
.vbtn {
  padding: .25rem .6rem; border-radius: 6px;
  font-size: .75rem; font-weight: 700;
  border: none; cursor: pointer; line-height: 1.5;
}
.vbtn-ok { background: var(--success-light); color: #15803D; }
.vbtn-no { background: var(--danger-light);  color: #B91C1C; }
.vstatus {
  font-size: .7rem; font-weight: 700; padding: .2em .6em;
  border-radius: 5px; text-transform: uppercase; letter-spacing: .04em;
}

/* ── Maintenance row ────────────────────────────────────────────── */
.mt-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
}
.mt-row:last-child { border-bottom: none; }
.mt-purpose { font-size: .875rem; font-weight: 600; color: var(--tx-1); flex: 1; }
.mt-month   { font-size: .75rem; color: var(--tx-3); }
.mt-amt     { font-size: .875rem; font-weight: 700; color: var(--tx-1); white-space: nowrap; }

/* ── Notice row ─────────────────────────────────────────────────── */
.notice-row { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.notice-row:last-child { border-bottom: none; }
.notice-ttl { font-size: .875rem; font-weight: 700; color: var(--tx-1); margin-bottom: .25rem; }
.notice-txt { font-size: .8rem; color: var(--tx-2); line-height: 1.55; }
.notice-ts  { font-size: .72rem; color: var(--tx-3); margin-top: .25rem; }

/* ── Society info block ─────────────────────────────────────────── */
.soc-info  { padding: 1rem; }
.soc-name  { font-size: .9375rem; font-weight: 800; color: var(--tx-1); margin-bottom: .25rem; }
.soc-addr  { font-size: .8rem; color: var(--tx-3); margin-bottom: .875rem; }
.soc-kv    { margin-bottom: .375rem; }
.soc-k     { font-size: .7rem; font-weight: 700; color: var(--tx-3); text-transform: uppercase; letter-spacing: .06em; }
.soc-v     { font-size: .875rem; font-weight: 600; color: var(--tx-1); }

/* ── Stat grid variants ─────────────────────────────────────────── */
.stat-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 960px) { .stat-grid-6 { grid-template-columns: repeat(6, 1fr); } }

/* Quick-action row inside .sc */
.qa-row {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.qa-row:last-child { border-bottom: none; }
.qa-row:hover { background: var(--surface-alt); color: inherit; }

/* ── Chip selector ──────────────────────────────────────────────── */
.chip-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: .3rem .875rem; border: 1.5px solid var(--border);
  border-radius: 99px; font-size: .8125rem; font-weight: 600;
  cursor: pointer; background: var(--surface); color: var(--tx-2);
  transition: all .12s; line-height: 1.6; user-select: none;
}
.chip:hover:not(.chip-active) { border-color: var(--brand); color: var(--brand); }
.chip.chip-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.chip-green.chip-active  { background: #16A34A; border-color: #16A34A; }
.chip.chip-amber.chip-active  { background: #D97706; border-color: #D97706; }

/* ── Form field helpers ──────────────────────────────────────────── */
.f-label  { display: block; font-size: .8125rem; font-weight: 700; color: var(--tx-2); margin-bottom: .375rem; }
.f-input  { width: 100%; padding: .575rem .875rem; border: 1.5px solid var(--border); border-radius: 8px; font-size: .9375rem; color: var(--tx-1); background: var(--surface); transition: border-color .15s; }
.f-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.f-hint   { font-size: .75rem; color: var(--tx-3); margin-top: .25rem; }

/* Responsive ─────────────────────────────────────────────────────── */
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .login-card { max-width: 100%; border-radius: var(--r-l); }
  .login-card-body,
  .login-card-header { padding: 1.25rem; }
  .login-footer { padding: 1rem 1.25rem; }
  .portal-links { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .stat-card { padding: 1rem; }
}