/* ============================================================
   Society Management - Custom Theme (Bootstrap 5 override)
   ============================================================ */

:root {
  /* Default theme: Sky blue + White */
  --sm-primary: #0284c7;         /* Sky blue */
  --sm-primary-dark: #0369a1;
  --sm-primary-light: #38bdf8;
  --sm-accent: #10b981;
  --sm-warn: #f59e0b;
  --sm-danger: #dc2626;
  --sm-bg: #f0f9ff;              /* Soft sky wash */
  --sm-surface: #ffffff;         /* White cards */
  --sm-text: #0c4a6e;
  --sm-muted: #64748b;
  --sm-border: #bae6fd;
  --sm-radius: 10px;
  --sm-sidebar-w: 260px;
  /* Fluid type scale (screen-wise) */
  --sm-fs-body: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --sm-fs-small: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  --sm-fs-h1: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);
  --sm-fs-h5: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --sm-fs-nav: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --sm-fs-stat: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  --sm-pad-main: clamp(0.75rem, 0.5rem + 1.5vw, 2rem);
  /* Chart palette (theme-aware) */
  --sm-chart-collection: #0284c7;
  --sm-chart-expenses:   #f59e0b;
  --sm-chart-income:     #10b981;
  --sm-chart-debit:      #dc2626;
  --sm-chart-collection-bg: rgba(2, 132, 199, .15);
  --sm-chart-expenses-bg:   rgba(245, 158, 11, .15);
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  font-family: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--sm-fs-body);
  line-height: 1.5;
  background: var(--sm-bg);
  color: var(--sm-text);
  /* Notch / gesture bar (Android + iPhone) */
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: border-box; }

.btn-primary {
  background-color: var(--sm-primary);
  border-color: var(--sm-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--sm-primary-dark);
  border-color: var(--sm-primary-dark);
}
.btn-outline-primary { color: var(--sm-primary); border-color: var(--sm-primary); }
.btn-outline-primary:hover { background-color: var(--sm-primary); border-color: var(--sm-primary); }

.text-primary  { color: var(--sm-primary) !important; }
.bg-primary    { background-color: var(--sm-primary) !important; }
.bg-primary-soft { background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%); }

/* ---- Sidebar / Layout ---- */
.sm-app {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: var(--sm-sidebar-w) minmax(0, 1fr);
}
.sm-sidebar {
  background: linear-gradient(180deg, var(--sm-primary-dark) 0%, var(--sm-primary) 100%);
  color: #fff;
  padding: 1.25rem 0.9rem;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sm-sidebar .brand {
  display: flex; align-items: center; gap: .7rem;
  color: #fff; font-weight: 700; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  padding: .5rem 0 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  margin-bottom: 1rem;
  text-decoration: none;
}
.sm-sidebar .brand i { font-size: 1.5rem; color: #fbbf24; flex-shrink: 0; }
.sm-sidebar .nav-link {
  color: rgba(255,255,255,.85);
  padding: .55rem .75rem;
  border-radius: 8px;
  display: flex; align-items: center; gap: .65rem;
  font-size: var(--sm-fs-nav);
  margin-bottom: 2px;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease, transform .15s ease;
}
.sm-sidebar .nav-link:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.sm-sidebar .nav-link.active {
  background: rgba(255,255,255,.22);
  color: #fff;
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35),
    0 6px 16px rgba(0, 0, 0, .22),
    inset 3px 0 0 #ffffff;
}
.sm-sidebar .nav-section {
  color: rgba(255,255,255,.55);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 1rem 0 .3rem .3rem;
}
.sm-sidebar .nav-section-super {
  color: rgba(255, 220, 160, .85);
  margin-top: 1.25rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.sm-main {
  padding: var(--sm-pad-main);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* older Android WebView - clip unsupported */
  overflow-x: clip;
}
.sm-main.sm-main-with-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.sm-portal-footer {
  margin-top: auto;
  padding: 1.5rem 0.5rem 0.85rem;
  text-align: center;
}
.sm-portal-footer-inner {
  border-top: 1px solid var(--sm-border);
  padding-top: 0.85rem;
}
.sm-portal-footer-brand {
  font-weight: 700;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem);
  color: var(--sm-primary-dark);
  letter-spacing: 0.02em;
}
.sm-portal-footer-sub {
  font-size: 0.75rem;
  color: var(--sm-muted);
  margin-top: 0.15rem;
}
.sm-auth-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  text-align: center;
  z-index: 3;
  pointer-events: none;
}
.sm-auth-footer .sm-portal-footer-brand { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.sm-auth-footer .sm-portal-footer-sub { color: rgba(255,255,255,.85); }
html.dark-mode .sm-portal-footer-brand { color: var(--sm-primary-light); }
html.dark-mode .sm-portal-footer-inner { border-top-color: var(--sm-border); }
.sm-topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}
.sm-topbar h1 {
  font-size: var(--sm-fs-h1); font-weight: 700; margin: 0; color: var(--sm-text);
  line-height: 1.25;
}
.sm-topbar .user-chip {
  display: flex; align-items: center; gap: .55rem;
  background: var(--sm-surface, #fff); padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--sm-border); font-size: var(--sm-fs-small);
  max-width: 100%;
}
.sm-topbar .user-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sm-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .8rem; flex-shrink: 0;
}

/* ---- Profile dropdown (standard account menu) ---- */
.sm-profile-dropdown { flex-shrink: 0; }
.sm-profile-trigger {
  cursor: pointer;
  border: 1px solid var(--sm-border);
  background: var(--sm-surface, #fff);
  padding: .35rem .75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--sm-text);
  transition: border-color .15s, box-shadow .15s;
}
.sm-profile-trigger:hover,
.sm-profile-trigger:focus,
.sm-profile-trigger[aria-expanded="true"] {
  border-color: var(--sm-primary-light);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, .15);
  outline: none;
}
.sm-profile-name { font-weight: 600; font-size: .9rem; line-height: 1.15; }
.sm-profile-role { font-size: .72rem; color: var(--sm-muted); }
.sm-profile-caret { font-size: .7rem; color: var(--sm-muted); margin-left: .1rem; }
.sm-profile-menu {
  min-width: min(320px, calc(100vw - 1.5rem));
  padding: .55rem 0;
  border: 1px solid var(--sm-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  margin-top: .4rem !important;
}
.sm-profile-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem .35rem;
}
.sm-profile-head-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sm-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; flex-shrink: 0;
}
.sm-profile-head-name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.sm-profile-head-sub { font-size: .75rem; color: var(--sm-muted); }
.sm-profile-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sm-muted);
  padding: .35rem 1rem .15rem;
}
.sm-profile-details { padding: .15rem 1rem .5rem; }
.sm-profile-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .82rem;
  padding: .28rem 0;
  border-bottom: 1px solid var(--sm-border);
}
.sm-profile-row:last-child { border-bottom: 0; }
.sm-profile-row span { color: var(--sm-muted); flex-shrink: 0; }
.sm-profile-row strong {
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  color: var(--sm-text);
}
.sm-profile-theme .sm-theme-toggle { width: 100%; }
.sm-profile-theme .sm-theme-btn { flex: 1; justify-content: center; }
.sm-profile-menu .dropdown-item {
  font-size: .88rem;
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
}
html.dark-mode .sm-profile-menu {
  background: var(--sm-surface);
  border-color: var(--sm-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
html.dark-mode .sm-profile-trigger {
  background: var(--sm-surface);
  color: var(--sm-text);
}

/* ---- Theme toggle (Light / Dark) ---- */
.sm-theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: var(--sm-surface, #fff);
  border: 1px solid var(--sm-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  flex-shrink: 0;
}
.sm-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  background: transparent;
  color: var(--sm-muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  padding: .4rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.sm-theme-btn i { font-size: .9rem; }
.sm-theme-btn:hover { color: var(--sm-text); background: rgba(30, 58, 138, .06); }
.sm-theme-btn.active {
  background: var(--sm-primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(30, 58, 138, .35);
}
.sm-theme-btn.active:hover { color: #fff; background: var(--sm-primary-dark); }
html.dark-mode .sm-theme-toggle {
  background: var(--sm-surface);
  border-color: var(--sm-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
html.dark-mode .sm-theme-btn:hover { background: rgba(255, 255, 255, .08); }
html.dark-mode .sm-theme-btn.active {
  background: var(--sm-primary-light);
  box-shadow: 0 1px 6px rgba(72, 149, 239, .4);
}
.sm-theme-float {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  z-index: 1050;
}
@media (max-width: 576px) {
  .sm-theme-btn span { display: none; }
  .sm-theme-btn { padding: .42rem .55rem; }
  .sm-sidebar-theme .sm-theme-btn span { display: inline; }
  .sm-profile-theme .sm-theme-btn span { display: inline; }
}

/* Sidebar theme block - every left-nav page */
.sm-sidebar-foot {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.sm-sidebar-theme {
  padding: 0.15rem 0.35rem 0.65rem;
}
.sm-sidebar-theme .sm-theme-toggle {
  width: 100%;
  justify-content: stretch;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  box-shadow: none;
}
.sm-sidebar-theme .sm-theme-btn {
  flex: 1;
  justify-content: center;
  color: rgba(255,255,255,.75);
}
.sm-sidebar-theme .sm-theme-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
}
.sm-sidebar-theme .sm-theme-btn.active {
  background: #fff;
  color: var(--sm-primary-dark, #172554);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.sm-sidebar-theme .sm-theme-btn.active:hover {
  background: #fff;
  color: var(--sm-primary-dark, #172554);
}
html.dark-mode .sm-sidebar-theme .sm-theme-btn.active {
  background: #fff;
  color: #0f172a;
}

/* ---- Cards ---- */
.card { border: 1px solid var(--sm-border); border-radius: var(--sm-radius); }
.card-title { font-weight: 600; margin: 0; }
.card h5, .sm-main > .mb-2 h5, .sm-main h5 {
  font-size: var(--sm-fs-h5);
}
.card h6 { font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); }

.stat-card {
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: #fff;
  padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem);
  height: 100%;
}
.stat-card .icon {
  width: clamp(38px, 36px + 0.5vw, 44px);
  height: clamp(38px, 36px + 0.5vw, 44px);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem); margin-bottom: .7rem;
}
.stat-card .label { color: var(--sm-muted); font-size: var(--sm-fs-small); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .value { font-size: var(--sm-fs-stat); font-weight: 700; margin-top: .2rem; color: var(--sm-text); line-height: 1.2; }
.stat-card .sub   { font-size: var(--sm-fs-small); color: var(--sm-muted); margin-top: .3rem; }

.stat-card.indigo .icon { background: #e0f2fe; color: var(--sm-primary); }
.stat-card.green  .icon { background: #d1fae5; color: #059669; }
.stat-card.amber  .icon { background: #fef3c7; color: #b45309; }
.stat-card.rose   .icon { background: #ffe4e6; color: #be123c; }
.stat-card.sky    .icon { background: #dbeafe; color: #1d4ed8; }

/* ---- Login page (base; layout refined further below) ---- */
.login-card {
  background: #fff;
  padding: clamp(1.4rem, 1.2rem + 1.5vw, 2.2rem) clamp(1.1rem, 1rem + 1vw, 2rem);
  border-radius: 14px;
  width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.login-card .brand-lg {
  text-align: center; margin-bottom: 1.5rem;
}
.login-card .brand-lg i { font-size: clamp(2rem, 1.8rem + 1vw, 2.5rem); color: var(--sm-primary); }
.login-card .brand-lg h2 { margin-top: .5rem; font-weight: 700; color: var(--sm-primary-dark); font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); }
.login-card .brand-lg p { color: var(--sm-muted); font-size: var(--sm-fs-small); margin: 0; }

/* ---- Tables ---- */
.table-responsive {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  /* Keep wide tables scrollable instead of squashing columns */
  max-height: min(70vh, 720px);
}
.table-responsive > .table {
  margin-bottom: 0;
  width: max-content;
  min-width: 100%;
}
.table-responsive > .table th,
.table-responsive > .table td {
  white-space: nowrap;
}
.table {
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.92rem);
  margin-bottom: 0;
}

/* Always-visible scrollbars on data areas (mobile + desktop) */
.table-responsive,
.sm-sidebar,
.sm-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--sm-primary-light, #38bdf8) rgba(148, 163, 184, .25);
}
.table-responsive::-webkit-scrollbar,
.sm-sidebar::-webkit-scrollbar,
.sm-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.table-responsive::-webkit-scrollbar-track,
.sm-sidebar::-webkit-scrollbar-track,
.sm-scroll::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, .18);
  border-radius: 8px;
}
.table-responsive::-webkit-scrollbar-thumb,
.sm-sidebar::-webkit-scrollbar-thumb,
.sm-scroll::-webkit-scrollbar-thumb {
  background: var(--sm-primary, #0284c7);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.table-responsive::-webkit-scrollbar-thumb:hover,
.sm-sidebar::-webkit-scrollbar-thumb:hover,
.sm-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--sm-primary-dark, #0369a1);
  background-clip: padding-box;
}
html.dark-mode .table-responsive::-webkit-scrollbar-track,
html.dark-mode .sm-sidebar::-webkit-scrollbar-track,
html.dark-mode .sm-scroll::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, .55);
}
html.dark-mode .table-responsive::-webkit-scrollbar-thumb,
html.dark-mode .sm-scroll::-webkit-scrollbar-thumb {
  background: #38bdf8;
  background-clip: padding-box;
}
html.dark-mode .sm-sidebar::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, .55);
  background-clip: padding-box;
}
.table thead th {
  background: #f9fafb;
  color: var(--sm-muted);
  font-weight: 600;
  font-size: clamp(0.68rem, 0.65rem + 0.15vw, 0.78rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--sm-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table td { vertical-align: middle; }
.badge-status {
  padding: .3em .65em; font-size: .7rem; font-weight: 600; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.badge-status.pending  { background: #fef3c7; color: #92400e; }
.badge-status.approved { background: #d1fae5; color: #065f46; }
.badge-status.rejected { background: #fee2e2; color: #991b1b; }
.badge-status.overdue  { background: #ffe4e6; color: #9f1239; }
.badge-status.under_verification { background: #dbeafe; color: #1e40af; }
.badge-status.open     { background: #e0f2fe; color: #075985; }
.badge-status.in_progress { background: #fef3c7; color: #92400e; }
.badge-status.resolved,
.badge-status.closed   { background: #d1fae5; color: #065f46; }
.badge-status.po_raised { background: #e0f2fe; color: #075985; }
.badge-status.awaiting_invoice { background: #fef3c7; color: #92400e; }
.badge-status.invoice_received { background: #dbeafe; color: #1e40af; }
.badge-status.paid { background: #d1fae5; color: #065f46; }
.badge-status.cancelled { background: #f3f4f6; color: #4b5563; }

/* ---- Utilities ---- */
.section-title {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); font-weight: 600; color: var(--sm-text);
  margin: 1.25rem 0 .75rem; display: flex; align-items: center; gap: .5rem;
}
.hover-shadow { transition: box-shadow .2s, transform .15s; }
.hover-shadow:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
a.stat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.1); }
a.stat-card:focus-visible { outline: 2px solid var(--sm-primary); outline-offset: 2px; }
.spinner-overlay {
  position: fixed; inset: 0; background: rgba(255,255,255,.7);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.spinner-overlay.active { display: flex; }

.sm-menu-toggle { display: none; }
.sm-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  z-index: 1040;
}
.sm-sidebar-backdrop.show { display: block; }

/* ---- Screen-wise breakpoints ---- */
@media (max-width: 1200px) {
  :root { --sm-sidebar-w: 232px; }
}

@media (max-width: 992px) {
  .sm-app { grid-template-columns: 1fr; }
  .sm-sidebar {
    position: fixed; left: -280px; z-index: 1050;
    width: min(280px, 86vw); transition: left .25s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.2);
  }
  .sm-sidebar.open { left: 0; }
  .sm-main { padding: var(--sm-pad-main); }
  .sm-menu-toggle { display: inline-flex !important; align-items: center; }
  .sm-topbar h1 { font-size: 1.25rem; }
  .stat-card .value { font-size: 1.4rem; }
}

@media (max-width: 768px) {
  :root {
    --sm-pad-main: 0.85rem;
  }
  .sm-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .sm-topbar .user-chip span:not(.avatar) {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card.p-3 { padding: 0.9rem !important; }
  .btn { white-space: nowrap; }
  .form-control, .form-select {
    font-size: 16px; /* avoids iOS zoom on focus */
  }
  .login-card { max-width: 100%; }

  /* Tabs: horizontal scroll, no cramped wrap */
  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.15rem;
    padding-bottom: 2px;
  }
  .nav-tabs .nav-item { flex: 0 0 auto; }
  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
  }

  /* Action button rows wrap cleanly */
  .sm-main .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
  }
  .sm-main .d-flex.gap-2.flex-wrap {
    width: 100%;
  }
  .sm-main .d-flex.gap-2.flex-wrap > .btn {
    flex: 1 1 auto;
    min-width: calc(50% - 0.35rem);
  }

  /* Tables: keep header readable + visible scroll */
  .table-responsive {
    margin-left: -0.15rem;
    margin-right: -0.15rem;
    max-height: min(62vh, 560px);
  }
  .table th, .table td {
    vertical-align: middle;
  }
  .table .btn-sm {
    padding: 0.28rem 0.45rem;
  }

  /* Modals full-width on phones */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: calc(100% - 1rem);
  }
  .modal-body .row > [class*="col-"] {
    margin-bottom: 0.15rem;
  }

  /* Filter bars stack */
  .owners-filter-bar .row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .owners-filter-bar .text-md-end {
    text-align: start !important;
  }

  /* Stat cards full width */
  #summary .col-md,
  #summary > .col,
  .row > .col-md {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .sm-sidebar .brand span { font-size: 0.95rem; }
  .stat-card .value { font-size: 1.25rem; }
  .table { font-size: 0.78rem; }
  .sm-main .row.g-3 { --bs-gutter-x: 0.65rem; --bs-gutter-y: 0.65rem; }
}

/* ============================================================
   Dark Theme - deep night sky (user-selectable)
   Default for all users remains Light (sky blue + white).
   ============================================================ */
html.dark-mode {
  --sm-primary:        #38bdf8;
  --sm-primary-dark:   #0ea5e9;
  --sm-primary-light:  #7dd3fc;
  --sm-accent:         #34d399;
  --sm-warn:           #fbbf24;
  --sm-danger:         #f87171;
  --sm-bg:             #0b1220;
  --sm-surface:        #132337;
  --sm-text:           #e0f2fe;
  --sm-muted:          #94a3b8;
  --sm-border:         #1e3a5f;
  --sm-chart-collection: #38bdf8;
  --sm-chart-expenses:   #fbbf24;
  --sm-chart-income:     #34d399;
  --sm-chart-debit:      #f87171;
  --sm-chart-collection-bg: rgba(56, 189, 248, .2);
  --sm-chart-expenses-bg:   rgba(251, 191, 36, .2);
}

html.dark-mode body {
  background: var(--sm-bg);
  color: var(--sm-text);
}

html.dark-mode .card,
html.dark-mode .stat-card,
html.dark-mode .user-chip,
html.dark-mode .login-card,
html.dark-mode .bg-primary-soft {
  background-color: var(--sm-surface) !important;
}

html.dark-mode .card { border-color: var(--sm-border); }
html.dark-mode .table thead th {
  background: #0f1c2e;
  color: var(--sm-muted);
  border-color: var(--sm-border);
}
html.dark-mode .table td { border-color: var(--sm-border); }
html.dark-mode .table td.bg-primary-soft { background: rgba(14, 165, 233, .12) !important; }
html.dark-mode .text-muted { color: var(--sm-muted) !important; }
html.dark-mode .btn-light,
html.dark-mode .sm-menu-toggle {
  background-color: var(--sm-surface);
  border-color: var(--sm-border);
  color: var(--sm-text);
}
html.dark-mode .btn-light:hover,
html.dark-mode .sm-menu-toggle:hover {
  background-color: var(--sm-border);
}
html.dark-mode .nav-tabs .nav-link.active,
html.dark-mode .nav-tabs .nav-link:hover {
  color: var(--sm-primary-light);
}

/* Page tabs (Owners / Flats / ...) - clear active marker both themes */
.nav-tabs.sm-page-tabs {
  flex-wrap: wrap;
  gap: .15rem .25rem;
  border-bottom-color: var(--sm-border);
}
.nav-tabs .nav-link {
  border-radius: 8px 8px 0 0;
  color: var(--sm-muted);
  transition: box-shadow .18s ease, background .18s ease, color .18s ease;
}
.nav-tabs .nav-link.active {
  color: var(--sm-primary) !important;
  font-weight: 600;
  background: var(--sm-surface) !important;
  border-color: var(--sm-border) var(--sm-border) var(--sm-surface) !important;
  box-shadow: 0 -2px 10px rgba(2, 132, 199, .12), 0 0 0 1px rgba(2, 132, 199, .08);
}
html.dark-mode .nav-tabs .nav-link.active {
  color: #7dd3fc !important;
  background: var(--sm-surface) !important;
  border-color: var(--sm-border) var(--sm-border) var(--sm-surface) !important;
  box-shadow: 0 -2px 14px rgba(56, 189, 248, .28), 0 0 0 1px rgba(56, 189, 248, .2);
}
html.dark-mode a { color: var(--sm-primary-light); }
html.dark-mode .sm-sidebar {
  background: linear-gradient(180deg, #061018 0%, #0b1c2e 45%, #0e2740 100%);
  color: #e0f2fe;
  box-shadow: inset -1px 0 0 rgba(56, 189, 248, .12);
}
html.dark-mode .sm-sidebar .brand {
  border-bottom-color: rgba(56, 189, 248, .18);
  color: #f0f9ff;
}
html.dark-mode .sm-sidebar .nav-section {
  color: rgba(125, 211, 252, .55);
}
html.dark-mode .sm-sidebar .nav-section-super {
  color: rgba(253, 224, 171, .75);
  border-top-color: rgba(251, 191, 36, .2);
}
html.dark-mode .sm-sidebar .nav-link {
  color: rgba(224, 242, 254, .82);
}
html.dark-mode .sm-sidebar .nav-link:hover {
  background: rgba(56, 189, 248, .12);
  color: #fff;
}
html.dark-mode .sm-sidebar .nav-link.active {
  background: rgba(56, 189, 248, .24);
  color: #e0f2fe;
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, .4),
    0 0 18px rgba(56, 189, 248, .35),
    inset 3px 0 0 #38bdf8;
}
html.dark-mode .sm-sidebar-foot {
  border-top-color: rgba(56, 189, 248, .18);
}
html.dark-mode .bg-primary-soft { background: linear-gradient(135deg, rgba(14,165,233,.22) 0%, rgba(3,105,161,.15) 100%) !important; }
html.dark-mode .stat-card.indigo .icon { background: rgba(14,165,233,.22); color: var(--sm-primary-light); }
html.dark-mode .stat-card.green  .icon { background: rgba(16,185,129,.2); color: #34d399; }
html.dark-mode .stat-card.amber  .icon { background: rgba(245,158,11,.2); color: #fbbf24; }
html.dark-mode .stat-card.rose   .icon { background: rgba(220,38,38,.2); color: #f87171; }
html.dark-mode .stat-card.sky    .icon { background: rgba(56,189,248,.22); color: #7dd3fc; }
html.dark-mode .login-hero { background: #132337; }
html.dark-mode .dash-sketch { background: #132337; border-color: var(--sm-border); }

/* Bootstrap light surfaces - must not flash white in night mode */
html.dark-mode .table-light,
html.dark-mode tr.table-light,
html.dark-mode .table > tbody > tr.table-light > *,
html.dark-mode thead.table-light > tr > th {
  --bs-table-bg: rgba(19, 35, 55, .92);
  --bs-table-color: var(--sm-text);
  --bs-table-hover-bg: rgba(56, 189, 248, .08);
  background-color: rgba(19, 35, 55, .92) !important;
  color: var(--sm-text) !important;
  border-color: var(--sm-border) !important;
}

html.dark-mode .bg-light,
html.dark-mode .text-bg-light {
  background-color: rgba(19, 35, 55, .92) !important;
  color: var(--sm-text) !important;
  border-color: var(--sm-border) !important;
}

html.dark-mode .bg-white {
  background-color: var(--sm-surface) !important;
  color: var(--sm-text) !important;
}

html.dark-mode .table tbody tr { color: var(--sm-text); }
html.dark-mode .table tbody tr td {
  background-color: transparent;
  color: inherit;
}

html.dark-mode .table code {
  color: #7dd3fc;
  background-color: rgba(56, 189, 248, .14);
  padding: 0.12em 0.35em;
  border-radius: 4px;
}

html.dark-mode .btn-outline-warning {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, .7);
}
html.dark-mode .btn-outline-warning:hover,
html.dark-mode .btn-outline-warning:focus {
  color: #fde68a;
  background-color: rgba(251, 191, 36, .14);
  border-color: #fbbf24;
}

html.dark-mode .badge.bg-success-subtle {
  background-color: rgba(16, 185, 129, .2) !important;
  color: #6ee7b7 !important;
}
html.dark-mode .badge.bg-warning-subtle {
  background-color: rgba(251, 191, 36, .2) !important;
  color: #fcd34d !important;
}
html.dark-mode .badge.bg-secondary-subtle,
html.dark-mode .badge.text-bg-secondary {
  background-color: rgba(148, 163, 184, .22) !important;
  color: #e2e8f0 !important;
}

html.dark-mode .alert-light {
  background: var(--sm-surface);
  border-color: var(--sm-border);
  color: var(--sm-text);
}

html.dark-mode .sm-main .form-control,
html.dark-mode .sm-main .form-select {
  background-color: #0f1c2e;
  border-color: var(--sm-border);
  color: var(--sm-text);
}
html.dark-mode .sm-main .form-control:focus,
html.dark-mode .sm-main .form-select:focus {
  background-color: #0f1c2e;
  border-color: var(--sm-primary);
  color: var(--sm-text);
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, .2);
}
html.dark-mode .sm-main .form-control::placeholder { color: #64748b; }

html.dark-mode .modal-content {
  background: var(--sm-surface);
  border-color: var(--sm-border);
  color: var(--sm-text);
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer { border-color: var(--sm-border); }

html.dark-mode .sm-approver-chip {
  background: rgba(15, 28, 46, .95) !important;
  border-color: var(--sm-border) !important;
  color: var(--sm-text);
}
html.dark-mode .sm-approver-chip .text-muted { color: #94a3b8 !important; }

html.dark-mode .sm-row-vacant,
html.dark-mode .sm-row-vacant > td {
  background-color: rgba(15, 28, 46, .55) !important;
  color: var(--sm-muted) !important;
}

html.dark-mode .sm-surface-panel {
  background: rgba(15, 28, 46, .55) !important;
  border-color: var(--sm-border) !important;
}

/* Light theme helpers */
.sm-approver-chip {
  background: rgba(240, 249, 255, .95);
  border-color: #bae6fd !important;
}
.sm-row-vacant { background: rgba(248, 250, 252, .85); }
.sm-surface-panel { background: rgba(248, 250, 252, .85); }

@media (min-width: 1400px) {
  /* Fill wide Windows / Mac displays - do not leave empty right gutter */
  .sm-main {
    max-width: none;
    width: 100%;
  }
}

.toast-container { z-index: 10000; }

/* ---- Society logo (sidebar + login) - animated box centered ---- */
.sm-sidebar .brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 0.85rem 0.65rem 1rem;
  gap: 0;
}
.sm-brand-logo,
.sm-brand-logo-lg,
.login-logo-panel img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #0b1220 !important;
  object-fit: contain;
}
html.dark-mode .sm-brand-logo,
html.dark-mode .sm-brand-logo-lg,
html.dark-mode .login-logo-panel img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #0b1220 !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .35), 0 4px 16px rgba(0, 0, 0, .35);
}
@media (min-width: 1200px) {
  .login-card .brand-lg .sm-brand-logo-lg { display: none !important; }
  .login-card .brand-lg .sm-animated-logo { display: none !important; }
  .login-logo-panel .sm-animated-logo { display: flex !important; }
}
.sm-brand-logo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  padding: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .35), 0 4px 16px rgba(0,0,0,.35);
}
.sm-brand-logo-lg {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  margin: 0 0 0.65rem;
  padding: 4px;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, .35), 0 6px 18px rgba(3, 105, 161, .2);
}
.login-logo-panel img {
  width: min(160px, 58%);
  height: auto;
  max-height: 160px;
  padding: 8px;
  border-radius: 16px;
}
.sm-sidebar .brand .sm-brand-sub {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Login / forgot: mobile-first card; wide desktop = logo | building | form */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(160deg, #e0f2fe 0%, #bae6fd 40%, #7dd3fc 100%);
}
.login-logo-panel,
.login-hero {
  display: none !important; /* tablet / phone: hide side panels */
}
.login-wrap > .login-card {
  margin: 0 auto;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 16px 48px rgba(3, 105, 161, .18);
  padding: 1.5rem 1.25rem 1.35rem;
}
.login-card .brand-lg {
  text-align: center;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-card .brand-lg .sm-brand-logo-lg {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 14px;
  margin: 0 0 0.65rem;
  background: #0b1220;
  padding: 4px;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, .35), 0 6px 18px rgba(3, 105, 161, .2);
}
.login-card .brand-lg h2 {
  margin-top: 0;
  font-weight: 700;
  color: #0369a1;
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
}
.login-card .brand-lg p {
  color: var(--sm-muted);
  font-size: var(--sm-fs-small);
  margin: 0.2rem 0 0;
}
.login-card .input-group-text {
  background: #f0f9ff !important;
  border-color: var(--sm-border);
  color: var(--sm-primary);
}
.login-card .form-control {
  border-color: var(--sm-border);
  background: #fff;
}
.login-card .form-control:focus {
  border-color: var(--sm-primary-light);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .2);
}
.login-card #supportBox {
  background: #f0f9ff !important;
  border-color: #bae6fd !important;
  border-radius: 10px;
  padding: 0.75rem 0.85rem !important;
}
.login-card hr { border-color: #e0f2fe; opacity: 1; }

/* Auth theme toggle - compact, clear */
.sm-theme-float {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  z-index: 1050;
}
.sm-theme-float .sm-theme-toggle {
  background: #fff;
  border-color: #bae6fd;
  box-shadow: 0 4px 14px rgba(3, 105, 161, .15);
}
.sm-theme-float .sm-theme-btn span { display: none; }
.sm-theme-float .sm-theme-btn { padding: .45rem .6rem; }
.sm-theme-float .sm-theme-btn.active { background: var(--sm-primary); }

html.dark-mode .login-wrap {
  background: linear-gradient(160deg, #0b1220 0%, #0c4a6e 55%, #082f49 100%);
}
html.dark-mode .login-wrap > .login-card {
  background: #132337 !important;
  border: 1px solid #1e3a5f;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
}
html.dark-mode .login-card .brand-lg h2 { color: #7dd3fc; }
html.dark-mode .login-card .brand-lg p,
html.dark-mode .login-card .text-muted,
html.dark-mode .login-card .form-label { color: #94a3b8 !important; }
html.dark-mode .login-card .input-group-text {
  background: #0b1220 !important;
  border-color: #1e3a5f;
  color: #7dd3fc;
}
html.dark-mode .login-card .form-control {
  background: #0b1220;
  border-color: #1e3a5f;
  color: #e0f2fe;
}
html.dark-mode .login-card .form-control::placeholder { color: #64748b; }
html.dark-mode .login-card .btn-outline-secondary {
  border-color: #1e3a5f;
  color: #94a3b8;
  background: #0b1220;
}
html.dark-mode .login-card #supportBox {
  background: #0b1220 !important;
  border-color: #1e3a5f !important;
  color: #e0f2fe;
}
html.dark-mode .login-card #supportBox .text-muted { color: #94a3b8 !important; }
html.dark-mode .login-card hr { border-color: #1e3a5f; }
html.dark-mode .sm-theme-float .sm-theme-toggle {
  background: #132337;
  border-color: #1e3a5f;
}

/* Wide desktop only: logo LEFT · building CENTER · form RIGHT */
@media (min-width: 1200px) {
  .login-wrap {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 55%, #0369a1 100%);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  html.dark-mode .login-wrap {
    background: linear-gradient(135deg, #0b1220 0%, #0c4a6e 55%, #082f49 100%);
  }
  .login-logo-panel {
    display: flex !important;
    width: min(24vw, 260px);
    flex-shrink: 0;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column;
    padding: 2rem 1rem;
    background: rgba(255,255,255,.1);
    border-right: 1px solid rgba(255,255,255,.14);
    text-align: center;
    z-index: 2;
    align-self: stretch;
  }
  .login-logo-panel .sm-animated-logo {
    display: flex !important;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  .login-logo-panel .login-logo-tag {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .login-hero {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: #e8e4dc;
    align-self: stretch;
  }
  .login-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .login-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3,105,161,.2) 0%, transparent 35%, transparent 65%, rgba(3,105,161,.25) 100%);
    pointer-events: none;
  }
  .login-wrap > .login-card {
    margin: 0;
    max-width: min(400px, 34vw);
    width: min(400px, 34vw);
    flex-shrink: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: max(1.5rem, env(safe-area-inset-top)) 1.5rem max(1.5rem, env(safe-area-inset-bottom));
  }
  .login-card .brand-lg .sm-animated-logo { display: none; }
  .login-card .brand-lg .sm-brand-logo-lg { display: none; }
  .login-card .brand-lg { text-align: center; align-items: center; }
  html.dark-mode .login-wrap > .login-card {
    background: #0f1c2e !important;
    border: 0;
    border-left: 1px solid #1e3a5f;
  }
}

@media (max-width: 480px) {
  .login-wrap { padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem 1rem; }
  .login-wrap > .login-card { padding: 1.25rem 1rem 1.1rem; }
}
@media (max-width: 768px) {
  .sm-brand-logo {
    width: 56px;
    height: 56px;
  }
}

/* Dashboard: building strip fills width */
.dash-sketch {
  border-radius: 12px;
  overflow: hidden;
  background: #e8e4dc;
  border: 1px solid #e7e2d8;
  max-height: 140px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-sketch img {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  object-position: center;
  display: block;
  padding: 0;
  opacity: 0.95;
}
@media (max-width: 576px) {
  .dash-sketch { max-height: 100px; }
  .dash-sketch img { max-height: 100px; }
}

/* Mobile menu + touch + anti-glitch */
@media (max-width: 992px) {
  .sm-sidebar {
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  body.sm-nav-open {
    overflow: hidden;
    touch-action: none;
  }
  .sm-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .sm-sidebar .nav-link {
    min-height: 44px;
  }
}

/* Generate Bills - responsive rate card (no cramped table scroll) */
.sm-rate-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: none;
}
.sm-rate-row {
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  background: var(--sm-bg, #f0f9ff);
}
.sm-rate-row .form-label { font-weight: 600; }
.sm-rate-card .btn { white-space: normal; }
html.dark-mode .sm-rate-row {
  background: rgba(15, 23, 42, .45);
  border-color: var(--sm-border);
}
@media (min-width: 768px) {
  .sm-rate-row .w-md-auto { width: auto !important; }
}

/* Cards / tables fill available width without horizontal page scroll */
.sm-main .card,
.sm-main .table-responsive,
.sm-main .row {
  max-width: 100%;
}
.sm-main img {
  max-width: 100%;
  height: auto;
}

/* Prevent double-tap zoom glitch on controls (Android Chrome) */
@media (hover: none) and (pointer: coarse) {
  .btn, .nav-link, .form-control, .form-select {
    touch-action: manipulation;
  }
}

/* ============================================================
   ALL PAGES - mobile / tablet / monitor (global)
   ============================================================ */

/* Monitor / desktop: readable content width, fill main column */
@media (min-width: 1200px) {
  .sm-main > .card,
  .sm-main > .row,
  .sm-main > .table-responsive,
  .sm-main > .mb-2,
  .sm-main > .mb-3,
  .sm-main > .d-flex.justify-content-between {
    max-width: 100%;
  }
}

@media (min-width: 1600px) {
  :root { --sm-pad-main: clamp(1.25rem, 1rem + 1vw, 2.25rem); }
}

/* Tablet (portrait + landscape) */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    --sm-pad-main: 1rem;
    --sm-sidebar-w: 220px;
  }
  .sm-main .row.g-3,
  .sm-main .row.g-2 {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.85rem;
  }
  .stat-card .value { font-size: 1.45rem; }
  .card.p-3 { padding: 1rem !important; }
  .table { font-size: 0.9rem; }
  .modal-dialog.modal-lg { max-width: min(720px, 94vw); }
}

/* Phone + small tablet: forms, filters, toolbars */
@media (max-width: 767.98px) {
  .sm-main h5,
  .sm-main > .mb-2 h5,
  .sm-main > .mb-3 h5 {
    font-size: 1.05rem;
    line-height: 1.3;
  }
  .sm-main .small.text-muted {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  /* Stack Bootstrap cols that are only col-md-* / col-lg-* */
  .sm-main .row > [class*="col-md-"],
  .sm-main .row > [class*="col-lg-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Keep half-width when col-6 / col-sm-6 present */
  .sm-main .row > .col-6,
  .sm-main .row > .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .sm-main .row > .col-12,
  .sm-main .row > .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Input groups: wrap test/save rows */
  .sm-main .input-group {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  .sm-main .input-group > .form-control,
  .sm-main .input-group > .form-select {
    flex: 1 1 8rem;
    min-width: 0;
  }
  .sm-main .input-group > .btn {
    flex: 0 0 auto;
  }

  /* Page action toolbars */
  .sm-main .btn-toolbar,
  .sm-main .btn-group {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .sm-main .btn-group > .btn {
    flex: 1 1 auto;
  }

  /* Filter / search bars */
  .sm-main .card .row.g-2 > [class*="col-"],
  .sm-main .card .row.g-3 > [class*="col-"],
  .owners-filter-bar .row > [class*="col-"],
  .filter-bar .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Form switches: easier tap */
  .sm-main .form-check-input {
    min-width: 2.2em;
    min-height: 1.15em;
  }
  .sm-main .form-switch .form-check-input {
    width: 2.5em;
  }

  /* Badges / pills wrap */
  .sm-main .badge { white-space: normal; text-align: left; }

  /* Charts / canvases */
  .sm-main canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Dropdown menus stay on screen */
  .dropdown-menu {
    max-width: min(100vw - 1.5rem, 22rem);
  }
}

/* Very small phones */
@media (max-width: 400px) {
  .sm-main .row > .col-6,
  .sm-main .row > .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .sm-topbar .user-chip span:not(.avatar) { max-width: 6.5rem; }
  .sm-main .btn-sm { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
}

/* Landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .sm-sidebar {
    height: 100dvh;
  }
  .login-wrap {
    align-items: flex-start;
    padding-top: 0.75rem;
  }
  .table-responsive {
    max-height: min(48vh, 320px);
  }
}

/* Print: hide chrome */
@media print {
  .sm-sidebar,
  .sm-menu-toggle,
  .sm-sidebar-backdrop,
  .sm-topbar .user-chip,
  .spinner-overlay { display: none !important; }
  .sm-app { display: block; }
  .sm-main { padding: 0; overflow: visible; }
}