/* ════════════════════════════════════════════════════════════════════════
   CUBOOD RMS — Master Stylesheet
   Theme: Dark (soft), brand-aligned to logo (deep navy + emerald green)
   Covers: core/accounts, properties, tenancy, billing, payments,
           maintenance, security, messaging, notifications, reports,
           resources
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ───────────────────────────────────────────────────── */
:root {
  /* Brand colors — pulled from the Cubood logo */
  --brand-navy:        #0f2438;   /* house mark / wordmark dark half */
  --brand-navy-light:  #1a3a57;
  --brand-emerald:     #1fae7d;   /* "C" mark / wordmark green half */
  --brand-emerald-light: #2ecf99;
  --brand-emerald-dark: #157a59;

  /* Surfaces — soft dark, not pure black */
  --surface-0:   #11161f;   /* page background */
  --surface-1:   #161c27;   /* sidebar / navbar */
  --surface-2:   #1b2330;   /* cards */
  --surface-3:   #222b3a;   /* raised elements, modals, popovers */
  --surface-4:   #2a3445;   /* hover / active surface */
  --surface-input: #1c2533; /* form controls */

  /* Borders */
  --border-subtle: #2a3344;
  --border-strong: #3a4658;

  /* Text */
  --text-primary:   #eef1f5;
  --text-secondary: #aab3c2;
  --text-muted:     #7e8a9c;
  --text-on-brand:  #ffffff;

  /* Semantic */
  --color-success:  #1fae7d;
  --color-success-bg: rgba(31, 174, 125, 0.14);
  --color-warning:  #f5a623;
  --color-warning-bg: rgba(245, 166, 35, 0.14);
  --color-danger:   #e5564a;
  --color-danger-bg: rgba(229, 86, 74, 0.14);
  --color-info:     #3da9d8;
  --color-info-bg:  rgba(61, 169, 216, 0.14);
  --color-secondary: #8993a4;
  --color-secondary-bg: rgba(137, 147, 164, 0.14);

  /* Primary = brand emerald (actionable), accent = brand navy */
  --primary:        var(--brand-emerald);
  --primary-strong: var(--brand-emerald-dark);
  --primary-soft:   rgba(31, 174, 125, 0.16);
  --accent:         var(--brand-navy-light);

  /* Layout */
  --sidebar-width: 240px;
  --navbar-height: 56px;
  --navbar-height-mobile: 52px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  background: var(--surface-0);
  color: var(--text-primary);
}

a {
  color: var(--brand-emerald-light);
}
a:hover {
  color: var(--brand-emerald);
}

::selection {
  background: var(--primary-soft);
  color: var(--text-primary);
}

/* Global scrollbar theming */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Focus accessibility — brand-colored, not browser default blue */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand-emerald-light);
  outline-offset: 2px;
}

.text-muted {
  color: var(--text-muted) !important;
}

hr {
  border-color: var(--border-subtle);
  opacity: 1;
}

/* ── 3. Auth Pages (login / register) ──────────────────────────────────── */
.auth-body {
  background: radial-gradient(circle at 20% 20%, var(--brand-navy-light) 0%, var(--brand-navy) 45%, #081019 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-wrapper {
  width: 100%;
  max-width: 520px;
}

.auth-card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.auth-logo img,
.auth-logo svg {
  height: 42px;
  width: auto;
}

.auth-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 0.25rem;
}

.auth-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1.75rem;
}

/* ── 4. Top Navbar ──────────────────────────────────────────────────────── */
.navbar {
  background: var(--surface-1) !important;
  border-bottom: 1px solid var(--border-subtle);
  height: var(--navbar-height);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  color: var(--text-primary) !important;
  font-size: 1.05rem;
}

.navbar-brand img {
  height: 28px;
  width: auto;
}

.navbar .nav-link {
  color: var(--text-secondary) !important;
  transition: color var(--transition-fast);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--text-primary) !important;
}

/* ── 5. Layout / Sidebar ────────────────────────────────────────────────── */
.wrapper {
  margin-top: var(--navbar-height);
  min-height: calc(100vh - var(--navbar-height));
}

.sidebar {
  width: var(--sidebar-width);
  min-height: calc(100vh - var(--navbar-height));
  background: var(--surface-1);
  border-right: 1px solid var(--border-subtle);
  flex-shrink: 0;
  position: sticky;
  top: var(--navbar-height);
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
}

.sidebar-inner {
  padding: 1rem 0.75rem;
}

.main-content {
  min-height: calc(100vh - var(--navbar-height));
  overflow-x: hidden;
}

.sidebar-nav {
  margin: 0;
  padding: 0;
}

.sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 1rem 0.75rem 0.35rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.sidebar-link i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.sidebar-link:hover {
  background: var(--surface-3);
  color: var(--brand-emerald-light);
}

.sidebar-link.active {
  background: var(--primary-soft);
  color: var(--brand-emerald-light);
  font-weight: 600;
  position: relative;
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-emerald);
  border-radius: 0 3px 3px 0;
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

/* ── 6. Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.card-header {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-primary);
}

.card-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

.card.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

/* Border-accent cards used throughout (alerts, completion states, etc.) */
.border-success { border-color: var(--color-success) !important; }
.border-danger  { border-color: var(--color-danger) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-primary { border-color: var(--primary) !important; }
.border-info    { border-color: var(--color-info) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

/* ── 7. Page Header ─────────────────────────────────────────────────────── */
.page-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1rem;
}

.page-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── 8. Buttons ─────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--brand-emerald);
  border-color: var(--brand-emerald);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-emerald-dark);
  border-color: var(--brand-emerald-dark);
}

.btn-outline-primary {
  color: var(--brand-emerald-light);
  border-color: var(--brand-emerald);
}
.btn-outline-primary:hover {
  background: var(--brand-emerald);
  border-color: var(--brand-emerald);
  color: #fff;
}

.btn-secondary,
.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
.btn-outline-secondary:hover {
  background: var(--surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-success { background: var(--color-success); border-color: var(--color-success); }
.btn-outline-success { color: var(--color-success); border-color: var(--color-success); }
.btn-outline-success:hover { background: var(--color-success); color: #fff; }

.btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn-outline-danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn-outline-danger:hover { background: var(--color-danger); color: #fff; }

.btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #1a1300; }
.btn-outline-warning { color: var(--color-warning); border-color: var(--color-warning); }

.btn-xs {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
}

/* ── 9. Forms ───────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  background-color: var(--surface-input);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-input);
  border-color: var(--brand-emerald);
  color: var(--text-primary);
  box-shadow: 0 0 0 0.2rem var(--primary-soft);
}

.form-select option {
  background: var(--surface-2);
  color: var(--text-primary);
}

.form-label {
  color: var(--text-secondary);
  font-size: 0.83rem;
}

.form-text {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.form-check-input {
  background-color: var(--surface-input);
  border-color: var(--border-strong);
}
.form-check-input:checked {
  background-color: var(--brand-emerald);
  border-color: var(--brand-emerald);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem var(--primary-soft);
}
.form-check-label {
  color: var(--text-secondary);
}

input[type="file"].form-control {
  line-height: 1.9;
}

/* Disabled / readonly */
.form-control:disabled,
.form-select:disabled {
  background-color: var(--surface-1);
  color: var(--text-muted);
}

/* ── 10. Tables ─────────────────────────────────────────────────────────── */
.table {
  color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
}

.table th {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom-color: var(--border-subtle);
}

.table td {
  border-color: var(--border-subtle);
  vertical-align: middle;
}

.table-light,
.table > :not(caption) > * > * {
  background-color: transparent;
}

.table-light {
  --bs-table-bg: var(--surface-3);
  --bs-table-color: var(--text-secondary);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--surface-3);
  color: var(--text-primary);
}

.table-warning {
  --bs-table-bg: rgba(245, 166, 35, 0.08);
  --bs-table-color: var(--text-primary);
}

.table-danger {
  --bs-table-bg: rgba(229, 86, 74, 0.08);
  --bs-table-color: var(--text-primary);
}

.table-responsive {
  border-radius: var(--radius-md);
}

/* ── 11. List Groups ────────────────────────────────────────────────────── */
.list-group-item {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--surface-3);
  color: var(--text-primary);
}

/* ── 12. Badges (semantic — used across billing, maintenance, security) ──── */
.badge {
  font-weight: 600;
  border-radius: var(--radius-pill);
  letter-spacing: 0.01em;
}

.bg-success-subtle { background: var(--color-success-bg) !important; }
.text-success       { color: var(--color-success) !important; }

.bg-danger-subtle  { background: var(--color-danger-bg) !important; }
.text-danger        { color: var(--color-danger) !important; }

.bg-warning-subtle { background: var(--color-warning-bg) !important; }
.text-warning        { color: var(--color-warning) !important; }

.bg-info-subtle    { background: var(--color-info-bg) !important; }
.text-info           { color: var(--color-info) !important; }

.bg-primary-subtle { background: var(--primary-soft) !important; }
.text-primary        { color: var(--brand-emerald-light) !important; }

.bg-secondary-subtle { background: var(--color-secondary-bg) !important; }
.text-secondary        { color: var(--color-secondary) !important; }

.bg-light {
  background: var(--surface-3) !important;
  color: var(--text-secondary) !important;
}

/* Generic priority/status badge helper (maintenance, billing, security) */
.status-badge,
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
}

/* ── 13. Stat Cards ─────────────────────────────────────────────────────── */
.stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* The value + label always live in their own wrapper div next to the
   icon (never as bare siblings of .stat-icon) so they stack — value on
   top, label below — instead of spilling out sideways next to a long
   label. This rule also gives that wrapper room to shrink and wrap
   its text instead of overflowing the card on narrow screens. */
.stat-card > div:not(.stat-icon) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
  overflow-wrap: break-word;
}

@media (max-width: 576px) {
  .stat-card { padding: 1rem 0.75rem; }
  .stat-value { font-size: 1.3rem; }
}

/* ── 14. Quick Action Buttons ───────────────────────────────────────────── */
.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--surface-2);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all var(--transition-base);
  text-align: center;
}

.quick-action-btn i {
  font-size: 1.5rem;
  color: var(--brand-emerald-light);
}

.quick-action-btn:hover {
  border-color: var(--brand-emerald);
  background: var(--primary-soft);
  color: var(--text-primary);
}

/* ── 15. Avatars ────────────────────────────────────────────────────────── */
.avatar-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-navy-light), var(--brand-emerald));
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-circle-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-navy-light), var(--brand-emerald));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── 16. Empty States (shared across every app's list views) ──────────── */
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text-muted);
}

.empty-state i {
  font-size: 3.5rem;
  color: var(--border-strong);
  display: block;
  margin-bottom: 1rem;
}

.empty-state h5,
.empty-state h6 {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

/* ── 17. Modals ─────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
}

.modal-header {
  border-bottom: 1px solid var(--border-subtle);
}

.modal-footer {
  border-top: 1px solid var(--border-subtle);
}

.modal-title {
  color: var(--text-primary);
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(1.6);
}

.modal-backdrop.show {
  opacity: 0.65;
}

/* ── 18. Dropdowns ──────────────────────────────────────────────────────── */
.dropdown-menu {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}

.dropdown-item {
  color: var(--text-secondary);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-4);
  color: var(--text-primary);
}

.dropdown-divider {
  border-color: var(--border-subtle);
}

/* ── 19. Alerts ─────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.alert-success { background: var(--color-success-bg); color: var(--color-success); border-color: rgba(31,174,125,0.3); }
.alert-danger  { background: var(--color-danger-bg);  color: var(--color-danger);  border-color: rgba(229,86,74,0.3); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: rgba(245,166,35,0.3); }
.alert-info    { background: var(--color-info-bg);    color: var(--color-info);    border-color: rgba(61,169,216,0.3); }
.alert-secondary { background: var(--color-secondary-bg); color: var(--color-secondary); }

/* Active alert pulse (security app) */
.alert-active-pulse {
  animation: cubood-alert-pulse 2s ease-in-out infinite;
}

@keyframes cubood-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 86, 74, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(229, 86, 74, 0.08); }
}

/* ── 20. Property / Unit Cards (properties app) ────────────────────────── */
.unit-status-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

.unit-status-vacant { background: var(--color-warning-bg); color: var(--color-warning); }
.unit-status-occupied { background: var(--color-success-bg); color: var(--color-success); }
.unit-status-maintenance { background: var(--color-info-bg); color: var(--color-info); }
.unit-status-reserved { background: var(--color-secondary-bg); color: var(--color-secondary); }

/* ── 21. Tenancy — Checklist builder ───────────────────────────────────── */
.checklist-room-card {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
}

/* ── 22. Billing — Receipts / Print ─────────────────────────────────────── */
.receipt-amount-box {
  background: linear-gradient(135deg, var(--brand-navy-light), var(--brand-emerald-dark));
  color: #fff;
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
}

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .navbar, .sidebar, .page-header, .btn, .modal, .alert {
    display: none !important;
  }
  .main-content {
    margin: 0 !important;
    padding: 0 !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
  }
  #receipt-print, #receipt-print * {
    color: #000 !important;
  }
}

/* ── 23. Payments ───────────────────────────────────────────────────────── */
.payment-channel-card {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  font-size: 0.85rem;
}

/* ── 24. Maintenance — star rating ─────────────────────────────────────── */
.star-rating .star-btn {
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.star-rating .star-btn:hover,
.star-rating .star-btn.active {
  color: var(--color-warning) !important;
}

/* ── 25. Security App ───────────────────────────────────────────────────── */
.visitor-row-inside {
  border-left: 3px solid var(--color-success);
}

.incident-card-critical { border-left: 4px solid var(--color-danger) !important; }
.incident-card-high     { border-left: 4px solid var(--color-warning) !important; }
.incident-card-medium   { border-left: 4px solid var(--primary) !important; }
.incident-card-low      { border-left: 4px solid var(--color-secondary) !important; }

.gate-entry-pill { background: var(--color-success-bg); color: var(--color-success); }
.gate-exit-pill  { background: var(--surface-3); color: var(--text-muted); }

.incident-media-thumb {
  height: 120px;
  object-fit: cover;
  width: 100%;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast);
}
.incident-media-thumb:hover {
  transform: scale(1.03);
}

/* ── 26. Messaging App ──────────────────────────────────────────────────── */
.conversation-row {
  transition: background var(--transition-fast);
}
.conversation-row:hover {
  background: var(--surface-3);
}
.conversation-row.unread {
  background: var(--primary-soft);
}

.conversation-unread-badge {
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  background: var(--brand-emerald);
  color: #fff;
}

#chat-window {
  height: 500px;
  overflow-y: auto;
  background: var(--surface-1);
  scroll-behavior: smooth;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.chat-bubble-wrap {
  display: inline-flex;
  flex-direction: column;
  max-width: 75%;
  min-width: 0;
}

.chat-bubble-wrap.own {
  align-items: flex-end;
}

.chat-bubble-wrap.other {
  align-items: flex-start;
}

.chat-bubble {
  display: inline-block;
  max-width: 100%;
  border-radius: 14px;
  padding: 0.6rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  white-space: normal;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.chat-bubble-own,
.bg-primary.text-white {
  background: var(--brand-emerald) !important;
  color: #fff !important;
  border-radius: 14px 14px 4px 14px;
}

.chat-bubble-other,
.bg-white.border {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: 14px 14px 14px 4px;
}

.chat-timestamp {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.chat-status-icon {
  font-size: 0.75rem;
  margin-left: 0.3rem;
  vertical-align: -1px;
}
.chat-status-sent {
  color: var(--brand-emerald);
}
.chat-status-failed {
  color: var(--color-danger, #dc3545);
}

.ws-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-muted);
}
.ws-status-dot.connected {
  background: var(--color-success);
}

#message-input {
  border-radius: var(--radius-pill);
  padding-left: 1rem;
}

#send-btn {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.announcement-pinned {
  border-left: 4px solid var(--color-warning) !important;
  background: linear-gradient(to right, rgba(245, 166, 35, 0.1), transparent);
}

/* ── 27. Notifications App ──────────────────────────────────────────────── */
.notification-row {
  border-left: 3px solid transparent;
  transition: background var(--transition-fast);
}
.notification-row.unread,
.bg-primary-subtle.notification-row {
  border-left-color: var(--brand-emerald);
  background: var(--primary-soft);
}
.notification-row:hover {
  background: var(--surface-3);
}

.notif-channel-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-channel-email  { background: var(--color-info-bg); color: var(--color-info); }
.notif-channel-sms    { background: var(--color-success-bg); color: var(--color-success); }
.notif-channel-inapp  { background: var(--color-warning-bg); color: var(--color-warning); }

#notif-count {
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-danger);
}

@keyframes cubood-bell-ring {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-10deg); }
  20%, 40% { transform: rotate(10deg); }
}
.bell-ring {
  animation: cubood-bell-ring 0.6s ease-in-out;
}

.preferences-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.preferences-table td.text-center input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
}
.preferences-event-label { font-weight: 500; font-size: 0.85rem; color: var(--text-primary); }
.preferences-event-desc  { font-size: 0.72rem; color: var(--text-muted); }

@media (max-width: 576px) {
  .preferences-table { font-size: 0.78rem; }
}

/* ── 28. Reports App ────────────────────────────────────────────────────── */
.report-type-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  background: var(--surface-2);
}
.report-type-card:hover {
  border-color: var(--brand-emerald);
  background: var(--primary-soft);
}
.report-type-card.active {
  border-color: var(--brand-emerald);
  background: var(--primary-soft);
}
.report-type-card i {
  font-size: 1.6rem;
  color: var(--brand-emerald-light);
  margin-bottom: 0.4rem;
  display: block;
}

.aging-bucket {
  border-radius: var(--radius-md);
  padding: 0.9rem;
  text-align: center;
}
.aging-current { background: var(--color-success-bg); color: var(--color-success); }
.aging-30      { background: var(--color-warning-bg); color: var(--color-warning); }
.aging-60      { background: var(--color-danger-bg);  color: var(--color-danger); }
.aging-90      { background: rgba(229, 86, 74, 0.28);  color: #ff8a80; }

.report-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.report-table td {
  font-size: 0.85rem;
}

.export-status-queued     { color: var(--text-muted); }
.export-status-generating { color: var(--color-warning); }
.export-status-ready      { color: var(--color-success); }
.export-status-failed     { color: var(--color-danger); }

.report-metric-tile {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.report-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}
.report-metric-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (max-width: 576px) {
  .report-type-card { padding: 0.75rem; }
  .report-metric-value { font-size: 1.2rem; }
}

/* ── 29. Resources App (admin editor side — dark themed) ────────────────── */
.resource-section-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  margin-bottom: 0.6rem;
  background: var(--surface-3);
}

.resource-public-url {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: var(--brand-emerald-light);
  word-break: break-all;
}

/* ── 30. Resources — PUBLIC page (intentionally LIGHT, not dark) ─────────
   This page is shown to tenants/visitors with no login — it should stay
   light and welcoming regardless of the admin dark theme, since it's a
   standalone document (not extending layouts/base.html). Kept self-
   contained here so it can be lifted into its own file if desired. ────── */
.public-page-body {
  background: #f5f6fa;
  min-height: 100vh;
  color: #1a1a2e;
}

.public-hero {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-emerald-dark) 100%);
  color: #fff;
  padding: 3rem 1.5rem 4rem;
  text-align: center;
}

.public-hero h1 {
  font-weight: 700;
  font-size: 1.9rem;
}

.public-content-wrap {
  max-width: 860px;
  margin: -2.5rem auto 3rem;
  padding: 0 1rem;
}

.public-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  color: #1a1a2e;
}

.public-card h5 {
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #1a1a2e;
}

.public-card h5 i {
  color: var(--brand-emerald-dark);
}

.public-rule-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid #f1f1f3;
}
.public-rule-item:last-child { border-bottom: none; }

.public-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px solid #f1f1f3;
}
.public-contact-row:last-child { border-bottom: none; }

.public-contact-phone {
  font-weight: 600;
  color: var(--brand-emerald-dark);
  font-size: 0.95rem;
}
.public-contact-phone a { color: inherit; text-decoration: none; }

.public-facility-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #eef3fb;
  color: var(--brand-navy);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  margin: 0.2rem;
}

.public-not-found {
  text-align: center;
  padding: 5rem 1rem;
  color: #1a1a2e;
}

@media (max-width: 576px) {
  .public-hero h1 { font-size: 1.5rem; }
  .public-card { padding: 1.1rem; }
}

/* ── 31. Misc utility polish ────────────────────────────────────────────── */
.bg-white {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
}

.border {
  border-color: var(--border-subtle) !important;
}

/* ── Navbar: org badge truncation on narrow desktop ───────────────────── */
.navbar-text.text-white-50 {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Navbar: quick action button (Add Building) ────────────────────────── */
.navbar .btn-light {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  color: var(--brand-navy);
}
.navbar .btn-light:hover {
  background: var(--brand-emerald-light);
  color: #fff;
}

/* ── Navbar: secondary icon links (messages) ────────────────────────────── */
.navbar .nav-link.text-white:hover {
  color: var(--brand-emerald-light) !important;
}

/* ── Dashboard: role-specific empty states ──────────────────────────────
   (.empty-state already exists globally; these are icon-color variants
   for the four new dashboard templates) ────────────────────────────────── */
.empty-state .bi-house-x,
.empty-state .bi-shield-x {
  color: var(--color-warning);
}

/* ── Dashboard: tenant bill summary card ────────────────────────────────── */
.stat-icon.bg-danger-subtle.text-danger,
.stat-icon.bg-success-subtle.text-success {
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* ── Dashboard: security visitor pills (already defined globally as
   .gate-entry-pill / .gate-exit-pill, but dashboard tables need the
   .status-badge base class applied alongside them) ─────────────────────── */
.status-badge.gate-entry-pill,
.status-badge.gate-exit-pill {
  font-weight: 600;
}

/* ── Dashboard: provider rating stat ─────────────────────────────────────── */
.stat-card .stat-icon.bg-info-subtle .bi-star {
  color: var(--color-warning);
}

/* ── Dashboard: tenant "no tenancy" / security "no assignment" cards ────── */
.card .empty-state {
  padding: 3rem 1rem;
}

/* ── Generic role badge on body — lets future CSS target by data-role
   without duplicating templates, matches data-role attr added to <body> ─ */
body[data-role="TENANT"] .navbar { border-bottom: 2px solid var(--color-info); }
body[data-role="SECURITY"] .navbar { border-bottom: 2px solid var(--color-warning); }
body[data-role="MAINTENANCE_PROVIDER"] .navbar { border-bottom: 2px solid var(--brand-emerald); }

.border-top    { border-top-color: var(--border-subtle) !important; }
.border-bottom { border-bottom-color: var(--border-subtle) !important; }
.border-start  { border-left-color: var(--border-subtle) !important; }
.border-end    { border-right-color: var(--border-subtle) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Bootstrap close icon already inverted above; ensure spinners read on dark */
.spinner-border {
  border-right-color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════
   32. MOBILE RESPONSIVENESS — GLOBAL FIXES
   Append this entire block to the end of cubood.css
   ════════════════════════════════════════════════════════════════════════ */

/* ── Prevent any element from causing horizontal scroll/overflow ───────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

/* ── Off-canvas sidebar for mobile (replaces plain display:none) ────────
   Requires a toggle button + tiny JS snippet — see notes after this file.
   If you don't add the toggle button yet, this degrades gracefully to
   the old hidden behavior (sidebar just stays off-screen). ──────────── */
@media (max-width: 768px) {
  .sidebar {
    display: block !important;
    position: fixed;
    top: var(--navbar-height-mobile);
    left: 0;
    height: calc(100vh - var(--navbar-height-mobile));
    width: 260px;
    max-width: 80vw;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    top: var(--navbar-height-mobile);
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .main-content {
    width: 100%;
  }

  .sidebar-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.3rem;
  }
}

@media (min-width: 769px) {
  .sidebar-toggle-btn {
    display: none !important;
  }
}

/* ── Navbar ──────────────────────────────────────────────────────────── */
/* Fixed (not auto) height on mobile so the navbar is always exactly
   --navbar-height-mobile tall — never taller, never shorter — which
   means the wrapper clearance below can match it exactly too. No more
   guessing at a "fallback" pixel value that drifts from the real
   rendered height and leaves an oversized gap above the page title. */
@media (max-width: 768px) {
  .navbar {
    height: var(--navbar-height-mobile) !important;
    min-height: var(--navbar-height-mobile);
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
  }

  .navbar-brand {
    font-size: 0.92rem;
    gap: 0.4rem;
  }

  .navbar-brand img {
    height: 24px;
  }

  .navbar .btn-light {
    font-size: 0.72rem;
    padding: 0.3rem 0.55rem;
  }

  .navbar-text.text-white-50 {
    max-width: 110px;
  }

  /* Collapse less critical nav-links into an overflow-safe row */
  .navbar .nav-link {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
  }

  /* Wrapper clearance now matches the fixed mobile navbar height
     exactly, across the whole mobile range — not just ≤576px. */
  .wrapper {
    margin-top: var(--navbar-height-mobile);
    min-height: calc(100vh - var(--navbar-height-mobile));
  }

  .sidebar {
    top: var(--navbar-height-mobile);
    height: calc(100vh - var(--navbar-height-mobile));
  }

  body.sidebar-open::after {
    top: var(--navbar-height-mobile);
  }
}

@media (max-width: 400px) {
  .navbar-brand span {
    display: none; /* keep logo icon, hide wordmark on very narrow screens */
  }
}

/* ── Typography scale-down ──────────────────────────────────────────── */
@media (max-width: 768px) {
  body {
    font-size: 0.85rem;
  }

  .page-title {
    font-size: 1.05rem;
  }

  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  h3, .h3 { font-size: 1.15rem; }
  h4, .h4 { font-size: 1.05rem; }
}

/* ── Page header / spacing ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem !important;
  }

  .page-header .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* NOTE: .main-content itself is intentionally left with no padding
     of its own — .container-fluid (its direct child, see the section-33
     override below) is what carries the mobile padding. Padding both
     the parent and the child here used to stack, pushing the page
     title much further down than intended and leaving a large empty
     gap under the navbar. */

  .card-body {
    padding: 1rem !important;
  }

  .row.g-4 {
    --bs-gutter-y: 0.75rem;
    --bs-gutter-x: 0.75rem;
  }
}

/* ── Stat cards ──────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .stat-card {
    padding: 0.85rem;
    gap: 0.7rem;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  .stat-value {
    font-size: 1.15rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }
}

/* ── Forms — prevent iOS auto-zoom, bigger touch targets ────────────── */
@media (max-width: 768px) {
  .form-control,
  .form-select,
  textarea.form-control {
    font-size: 16px; /* stops iOS Safari zooming in on focus */
    min-height: 44px;
  }

  .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
  }

  .form-label {
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
  }

  /* Stack label/value pairs and form rows cleanly */
  .row > [class^="col-"] {
    margin-bottom: 0.5rem;
  }
}

/* ── Buttons — sizing on mobile ───────────────────────────────────────── */
@media (max-width: 576px) {
  .btn {
    min-height: 44px;
    font-size: 0.85rem;
  }

  .btn-xs {
    min-height: 32px;
  }

  .btn.btn-auto-width {
    width: auto;
  }
}

/* ── Tables — smaller text + safe horizontal scroll ─────────────────── */
@media (max-width: 768px) {
  .table {
    font-size: 0.78rem;
  }

  .table th,
  .table td {
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
  }

  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Modals — near full-screen on mobile ────────────────────────────── */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-body {
    padding: 1rem;
    max-height: 75vh;
    overflow-y: auto;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .modal-footer .btn {
    width: 100%;
    margin: 0.2rem 0 !important;
  }
}

/* ── Quick action buttons — 2-column grid instead of squeeze ────────── */
@media (max-width: 576px) {
  .quick-action-btn {
    padding: 0.9rem 0.5rem;
    font-size: 0.72rem;
  }

  .quick-action-btn i {
    font-size: 1.2rem;
  }
}

/* ── Messaging — conversation list ─────────────────────────────────────
   Slightly smaller type and tighter row padding so the list reads as
   a clean, dense inbox rather than an oversized, spaced-out list. ──── */
@media (max-width: 576px) {
  .conversation-row {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }

  .conversation-row .fw-semibold.small,
  .conversation-row span.small {
    font-size: 0.82rem;
  }

  .conversation-row .text-muted.small {
    font-size: 0.76rem;
  }

  .avatar-circle-sm {
    width: 34px;
    height: 34px;
    font-size: 0.7rem;
  }

  .conversation-unread-badge {
    min-width: 19px;
    height: 19px;
    font-size: 0.65rem;
  }

  /* Messages page header buttons (Announcements / New Message) — a
     little smaller and tighter so two buttons don't dominate the row */
  .page-header .btn-sm {
    font-size: 0.74rem;
    padding: 0.35rem 0.6rem;
  }
}

/* ── Messaging — chat window ─────────────────────────────────────────── */
@media (max-width: 576px) {
  /* Chat header: back arrow + name row — keep them inline (side by
     side), just tighten the gap and shrink the name so the whole row
     is compact instead of dominating the top of a small screen. */
  .chat-page .page-header .d-flex.align-items-center.gap-3 {
    gap: 0.6rem !important;
  }

  .chat-page .page-header h5 {
    font-size: 0.98rem;
  }

  .chat-page .page-header .btn-outline-secondary.btn-sm {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .chat-bubble-wrap {
    max-width: 85%;
  }

  .chat-bubble {
    font-size: 0.8rem;
    padding: 0.55rem 0.85rem;
  }

  .chat-timestamp {
    font-size: 0.65rem;
  }

  #message-input {
    font-size: 16px; /* iOS zoom prevention */
  }

  #send-btn,
  #attach-btn {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    padding: 0;
  }
}

/* ── Chat page: fill exactly the space below the navbar, no page-level
   scrolling needed to reach the message input. The chat card grows to
   fill whatever room is left after the (fixed-height) navbar and the
   (auto-height) page header — no more, no less — instead of relying
   on a guessed pixel offset that never quite matches every screen. ─── */
@media (max-width: 768px) {
  body.chat-page .main-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--navbar-height-mobile));
    height: calc(100dvh - var(--navbar-height-mobile));
    overflow: hidden;
  }

  body.chat-page .main-content .container-fluid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0.5rem !important;
  }

  body.chat-page .main-content .container-fluid > *:not(.chat-card-wrap) {
    flex-shrink: 0;
  }

  body.chat-page .chat-card-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.chat-page .chat-card-wrap .card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  body.chat-page .chat-card-wrap .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
  }

  body.chat-page #chat-window {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  body.chat-page .chat-input-area {
    flex-shrink: 0;
  }
}

/* ── Avatars — shrink on very small screens ──────────────────────────── */
@media (max-width: 400px) {
  .avatar-circle {
    width: 72px;
    height: 72px;
    font-size: 1.5rem;
  }
}

/* ── Empty states — reduce vertical padding so they don't dominate
   short mobile viewports ────────────────────────────────────────────── */
@media (max-width: 576px) {
  .empty-state {
    padding: 2rem 0.75rem;
  }

  .empty-state i {
    font-size: 2.5rem;
  }
}

/* ── Auth pages (login/register) ────────────────────────────────────── */
@media (max-width: 576px) {
  .auth-card {
    padding: 1.5rem 1.25rem;
    border-radius: var(--radius-md);
  }

  .auth-title {
    font-size: 1.1rem;
  }
}

/* ── Public resource pages ───────────────────────────────────────────── */
@media (max-width: 576px) {
  .public-hero {
    padding: 2rem 1rem 3rem;
  }

  .public-content-wrap {
    margin-top: -1.75rem;
  }

  .public-card {
    padding: 1rem;
  }

  .public-contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* ── Dropdowns — keep on-screen instead of overflowing edge ──────────── */
@media (max-width: 576px) {
  .dropdown-menu {
    max-width: calc(100vw - 1.5rem);
  }
}

/* ── Report / aging tiles — 2-column instead of cramped row ──────────── */
@media (max-width: 576px) {
  .report-metric-tile {
    padding: 0.85rem;
  }

  .report-metric-value {
    font-size: 1.15rem;
  }

  .aging-bucket {
    padding: 0.65rem;
    font-size: 0.85rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   33. MOBILE FIXES — APPEND AFTER SECTION 32
   These fix the remaining gaps not covered by section 32:
   container-fluid padding override, navbar height clipping on mobile,
   sidebar close button, and table cell clamping.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Container padding on mobile — this is the ONLY place page padding
   is set on mobile (see the note in the "Page header / spacing" block
   above). Keeping it in one place, on the actual scrolling container,
   is what keeps the gap under the navbar small and consistent on
   every page. ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .main-content .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
  }
}

/* ── Sidebar close button (shown inside sidebar on mobile only) ──── */
.sidebar-close-btn {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 0.75rem 0;
  }

  .sidebar-close-btn button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
  }

  .sidebar-close-btn button:hover {
    color: var(--text-primary);
  }
}

/* ── Fix: table cells with long unbreakable content (phone numbers,
   bill numbers, UUIDs) breaking mobile table layout ─────────────── */
@media (max-width: 768px) {
  .table td, .table th {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Columns that should never be clipped */
  .table td.no-clip,
  .table th.no-clip {
    max-width: none;
    white-space: normal;
    overflow: visible;
  }
}

/* ── Page header layout on mobile — title first, actions below ────────
   Every page-header in the app follows the same markup shape: a title
   block, then (optionally) an actions block with one or more buttons,
   laid out side-by-side via Bootstrap's d-flex/justify-content-between.
   On mobile that squeezes a wide button right up against the title and
   forces the buttons to stack full-height, dominating the page. Instead:
   stack the title above the actions (like the dashboard, which has no
   actions row and is just the title on its own), then let the actions
   themselves sit in their own row, side by side, sized to their content
   — not stretched full-width. ──────────────────────────────────────── */
@media (max-width: 576px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* The actions row (Bootstrap's d-flex.gap-2 pattern used for header
     buttons everywhere) — full width, buttons side by side, hugging
     their own text instead of stretching to fill the row or each other. */
  .page-header > .d-flex.gap-2 {
    width: 100%;
    margin-top: 0.65rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  .page-header > .d-flex.gap-2 .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: auto;
    font-size: 0.76rem;
    padding: 0.4rem 0.65rem;
    line-height: 1.2;
  }

  .page-header > .d-flex.gap-2 > form {
    display: flex;
    flex: 0 0 auto;
  }

  .page-header > .d-flex.gap-2 > form .btn {
    width: auto;
  }

  /* A bare single action button with no wrapping div (e.g. "Add Tenancy")
     — give it its own row below the title instead of squeezing the
     title sideways, and keep it hugging its own text. */
  .page-header > a.btn,
  .page-header > button.btn {
    width: auto;
    margin-top: 0.65rem;
    min-height: auto;
    font-size: 0.78rem;
    padding: 0.45rem 0.75rem;
    line-height: 1.2;
  }

  /* Opt out for headers where the button legitimately belongs beside
     other inline content (e.g. a back-arrow next to a page title) —
     those wrap the button + title together in their own flex row, which
     this selector deliberately doesn't touch since it only targets
     .d-flex.gap-2 / bare .btn children of .page-header directly. */
}

/* ── Cards: reduce border-radius on very small screens for more space */
@media (max-width: 400px) {
  .card {
    border-radius: var(--radius-sm);
  }

  .modal-content {
    border-radius: var(--radius-sm);
  }
}

/* ── Finance cards on dashboard: stack text properly on 320px ────── */
@media (max-width: 380px) {
  .card .d-flex.align-items-center.gap-3 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .card .fw-bold.fs-5 {
    font-size: 1rem !important;
  }
}

/* ── Lite dashboard upgrade banner: stack on mobile ─────────────── */
@media (max-width: 576px) {
  .card-body.d-flex.align-items-center.justify-content-between {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ── Billing plan select: full-width cards on mobile ─────────────── */
@media (max-width: 768px) {
  .row.g-4 .col-md-6.col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Prevent long words and URLs from breaking layout ───────────── */
.card-body, .modal-body, p, li, td, .alert {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════════════
   34. Accordion (Bootstrap) - Cubood Dark Theme
   ════════════════════════════════════════════════════════════════════════ */

.accordion {
    --bs-accordion-bg: var(--surface-2);
    --bs-accordion-color: var(--text-primary);
    --bs-accordion-border-color: var(--border-subtle);
    --bs-accordion-border-radius: var(--radius-md);
    --bs-accordion-inner-border-radius: var(--radius-md);

    --bs-accordion-btn-bg: var(--surface-2);
    --bs-accordion-btn-color: var(--text-primary);
    --bs-accordion-btn-focus-border-color: var(--brand-emerald);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--primary-soft);

    --bs-accordion-active-bg: var(--surface-3);
    --bs-accordion-active-color: var(--brand-emerald-light);
}

.accordion-item {
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    background: var(--surface-2);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: none;
}

.accordion-button:hover {
    background: var(--surface-3);
    color: var(--brand-emerald-light);
}

.accordion-button:not(.collapsed) {
    background: var(--surface-3);
    color: var(--brand-emerald-light);
    box-shadow: inset 0 -1px 0 var(--border-subtle);
}

.accordion-button:focus {
    box-shadow: 0 0 0 .2rem var(--primary-soft);
    border-color: var(--brand-emerald);
}

.accordion-body {
    background: var(--surface-2);
    color: var(--text-primary);
    border-top: 1px solid var(--border-subtle);
}

.accordion-collapse {
    background: var(--surface-2);
}

/* Dark accordion arrow */
.accordion-button::after {
    filter: brightness(0) invert(0.85);
    transition: transform .2s ease;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(0.95);
}

/* Remove Bootstrap's blue active highlight */
.accordion-button:not(.collapsed)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-emerald);
}

/* Tables inside accordions */
.accordion .table {
    margin-bottom: 0;
}

.accordion .table thead th {
    background: var(--surface-3);
}

.accordion .table tbody tr:hover {
    background: var(--surface-3);
}

/* File upload area inside accordion */
.accordion input[type="file"] {
    background: var(--surface-input);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}

/* ════════════════════════════════════════════════════════════════════════
   35. PWA — Install Button, Offline State, Standalone Mode Polish
   Append this entire block to the end of cubood.css
   ════════════════════════════════════════════════════════════════════════ */

/* ── Install App button (mobile navbar) ─────────────────────────────────── */
#pwa-install-btn {
  background: var(--brand-emerald) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

#pwa-install-btn:hover,
#pwa-install-btn:focus {
  background: var(--brand-emerald-dark) !important;
  color: #ffffff !important;
}

#pwa-install-btn i {
  font-size: 0.9rem;
}

/* Install entry inside the mobile dropdown menu */
#pwa-install-dropdown-item .dropdown-item {
  color: var(--brand-emerald-light);
  font-weight: 500;
}

#pwa-install-dropdown-item .dropdown-item:hover,
#pwa-install-dropdown-item .dropdown-item:focus {
  background: var(--primary-soft);
  color: var(--brand-emerald-light);
}

/* ── iOS "Add to Home Screen" instructions modal ────────────────────────── */
#pwa-ios-modal .modal-content {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
}

#pwa-ios-modal ol {
  color: var(--text-secondary);
  line-height: 1.6;
}

#pwa-ios-modal strong {
  color: var(--text-primary);
}

#pwa-ios-modal .bi-box-alt-1,
#pwa-ios-modal .bi-box-arrow-up {
  color: var(--brand-emerald-light);
}

/* ── Standalone / installed-app mode polish ─────────────────────────────
   display-mode: standalone fires once launched from the home screen icon
   (no browser chrome). Slightly tighten the top spacing and hide the
   install affordances entirely since they're already installed. ───────── */
@media (display-mode: standalone) {
  .navbar {
    padding-top: env(safe-area-inset-top, 0);
    min-height: calc(var(--navbar-height-mobile) + env(safe-area-inset-top, 0));
  }

  .wrapper {
    margin-top: calc(var(--navbar-height-mobile) + env(safe-area-inset-top, 0));
  }

  #pwa-install-btn,
  #pwa-install-dropdown-item {
    display: none !important;
  }
}

/* ── Offline banner (optional, toggled via JS by adding
   `.is-offline` to <body> if you wire up online/offline listeners) ─────── */
.offline-banner {
  display: none;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(245, 166, 35, 0.3);
}

body.is-offline .offline-banner {
  display: block;
}

/* ── Offline fallback page (templates/offline.html) ─────────────────────
   That page is standalone (doesn't extend base.html), so it links this
   stylesheet directly — these rules just theme its two custom elements. ── */
.offline-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.offline-icon i {
  font-size: 2.5rem;
  color: var(--text-muted);
}