/* ====================================================
   Sarafi — Kikundi Management System
   Design System v3 — Glassy / Modern / No-Border
   ==================================================== */

html { visibility: visible; }

/* ============ THEME VARIABLES ============ */
:root {
  --bg-page:        #f0eeea;
  --bg-surface:     #ffffff;
  --bg-surface2:    #f5f4f1;
  --bg-surface3:    #ebe9e4;
  --border:         #e4e2dc;
  --border-strong:  #cac8c0;
  --text-primary:   #18181a;
  --text-secondary: #52504d;
  --text-muted:     #9896900;
  --accent:         #1d6f4e;
  --accent-hover:   #145c3e;
  --accent-light:   #e6f4ec;
  --danger:         #c23b3b;
  --danger-light:   #fdf0f0;
  --warning:        #b5680d;
  --warning-light:  #fef7ed;
  --info:           #1a5fa8;
  --info-light:     #edf4fd;
  --purple:         #5e3bb0;
  --purple-light:   #f3effe;

  /* Shadows — layered for depth */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 0 3px var(--accent-light);

  --radius:     12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-sm:  8px;
  --font:       'DM Sans', 'Segoe UI', sans-serif;
  --sidebar-width: 224px;
  --topbar-height: 56px;

  /* Compat aliases */
  --bg-primary:     var(--bg-page);
  --bg-secondary:   var(--bg-surface);
  --bg-card:        var(--bg-surface);
  --bg-card-hover:  var(--bg-surface2);
  --glow-orange:    var(--accent);
  --glow-orange-dim:var(--accent-light);
  --glow-green:     #1d8a5e;
  --glow-green-dim: rgba(29,138,94,0.12);
  --glow-blue:      var(--info);
  --glow-purple:    var(--purple);
  --glow-red:       var(--danger);
  --border-glow:    rgba(29,111,78,0.3);
  --text-muted:     #989690;
}

[data-theme="dark"] {
  --bg-page:        #0c0c0a;
  --bg-surface:     #161614;
  --bg-surface2:    #1f1f1c;
  --bg-surface3:    #2a2a26;
  --border:         #2a2a26;
  --border-strong:  #383835;
  --text-primary:   #f0efe9;
  --text-secondary: #9a9890;
  --text-muted:     #5a5855;
  --accent:         #4ade98;
  --accent-hover:   #38c47e;
  --accent-light:   #0a2e1b;
  --danger:         #f87171;
  --danger-light:   #2a0f0f;
  --warning:        #fbbf24;
  --warning-light:  #271d07;
  --info:           #60a5fa;
  --info-light:     #0a1d38;
  --purple:         #a78bfa;
  --purple-light:   #180f30;
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.35);

  --bg-primary:     var(--bg-page);
  --bg-secondary:   var(--bg-surface);
  --bg-card:        var(--bg-surface2);
  --bg-card-hover:  var(--bg-surface3);
  --glow-orange:    var(--accent);
  --glow-orange-dim:var(--accent-light);
  --glow-green:     #4ade98;
  --glow-green-dim: rgba(74,222,152,0.12);
  --glow-blue:      var(--info);
  --glow-purple:    var(--purple);
  --glow-red:       var(--danger);
  --border-glow:    rgba(74,222,152,0.3);
  --text-muted:     #5a5855;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.92rem;
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============ SIDEBAR ============ */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-surface);
  border-right: none;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.25s ease;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .sidebar {
  background: var(--bg-surface);
  box-shadow: 4px 0 32px rgba(0,0,0,0.4);
}

.sidebar-brand {
  padding: 1.25rem 1rem 1rem;
  border-bottom: none;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.brand-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
  font-weight: 800;
  letter-spacing: -1px;
  box-shadow: 0 4px 12px rgba(29,111,78,0.35);
}

.brand-text .name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.brand-text .sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.sidebar-user {
  padding: 0.75rem 0.85rem;
  margin: 0 0.5rem 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-bottom: none;
  background: var(--bg-surface2);
  border-radius: var(--radius);
}

[data-theme="dark"] .sidebar-user {
  background: rgba(255,255,255,0.04);
}

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(29,111,78,0.3);
}

[data-theme="dark"] .avatar {
  box-shadow: 0 2px 8px rgba(74,222,152,0.25);
}

.avatar-lg { width: 54px; height: 54px; font-size: 1.1rem; }

.avatar-img {
  object-fit: cover;
  width: 100%; height: 100%;
  border-radius: 50%;
}

.user-info .uname {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.user-info .urole {
  font-size: 0.66rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.sidebar-nav {
  flex: 1;
  padding: 0.35rem 0;
  overflow-y: auto;
}

.nav-section-title {
  padding: 0.75rem 1.35rem 0.2rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.nav-item a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.56rem 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  position: relative;
  font-size: 0.84rem;
  font-weight: 500;
  margin: 1px 0.5rem;
}

.nav-item a .nav-icon {
  width: 18px;
  text-align: center;
  font-size: 0.82rem;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.nav-item a:hover {
  color: var(--text-primary);
  background: var(--bg-surface2);
}

.nav-item a:hover .nav-icon { opacity: 1; }

.nav-item a.active {
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(29,111,78,0.12);
}

[data-theme="dark"] .nav-item a.active {
  box-shadow: 0 2px 12px rgba(74,222,152,0.15);
}

.nav-item a.active .nav-icon { opacity: 1; }

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(194,59,59,0.4);
}

.sidebar-footer {
  padding: 0.85rem 1rem;
  border-top: none;
  background: transparent;
}

/* ============ MAIN CONTENT ============ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  padding: 0 1.35rem;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), var(--shadow-sm);
}

[data-theme="dark"] .topbar {
  background: rgba(22,22,20,0.88);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 20px rgba(0,0,0,0.35);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.page-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface2);
  border: none;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: all 0.15s;
  position: relative;
  cursor: pointer;
  font-size: 0.85rem;
}

.icon-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(29,111,78,0.15);
}

[data-theme="dark"] .icon-btn:hover {
  box-shadow: 0 2px 8px rgba(74,222,152,0.15);
}

.theme-btn { font-size: 1rem; line-height: 1; }

.notif-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 7px; height: 7px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  animation: notifDotPulse 2s ease infinite;
}

@keyframes notifDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(194,59,59,0.5); }
  60%     { box-shadow: 0 0 0 5px rgba(194,59,59,0); }
}

.page-content {
  flex: 1;
  padding: 1.5rem;
}

/* ============ CARDS ============ */
.card {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}

[data-theme="dark"] .card {
  background: var(--bg-surface2);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.card-body { padding: 1.15rem; }

/* ============ STAT CARDS ============ */
.stat-card {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .stat-card {
  background: var(--bg-surface2);
}

/* Decorative glow blob behind icon */
.stat-card::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--card-accent, var(--accent));
  opacity: 0.07;
  pointer-events: none;
  transition: opacity 0.2s;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stat-card:hover::after { opacity: 0.12; }

.stat-card .icon-wrap {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.2rem;
  letter-spacing: -0.5px;
}

.stat-card .stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.stat-card .stat-change {
  font-size: 0.72rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.change-up { color: var(--glow-green); }
.change-dn { color: var(--danger); }

/* ============ COLOUR VARIANTS ============ */
.glow-orange { --card-accent: var(--accent); }
.glow-green  { --card-accent: var(--glow-green); }
.glow-blue   { --card-accent: var(--info); }
.glow-purple { --card-accent: var(--purple); }
.glow-red    { --card-accent: var(--danger); }

.icon-orange { background: var(--accent-light);   color: var(--accent); }
.icon-green  { background: rgba(29,138,94,0.1);   color: var(--glow-green); }
.icon-blue   { background: var(--info-light);      color: var(--info); }
.icon-purple { background: var(--purple-light);    color: var(--purple); }
.icon-red    { background: var(--danger-light);    color: var(--danger); }

[data-theme="dark"] .icon-green { background: rgba(74,222,152,0.1); color: var(--glow-green); }

/* Glassy stat card variants */
.stat-card.glow-orange { background: linear-gradient(135deg, rgba(29,111,78,0.08) 0%, rgba(29,111,78,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 20px rgba(29,111,78,0.1); }
.stat-card.glow-green  { background: linear-gradient(135deg, rgba(29,138,94,0.08) 0%, rgba(29,138,94,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 20px rgba(29,138,94,0.1); }
.stat-card.glow-blue   { background: linear-gradient(135deg, rgba(26,95,168,0.08) 0%, rgba(26,95,168,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 20px rgba(26,95,168,0.1); }
.stat-card.glow-purple { background: linear-gradient(135deg, rgba(94,59,176,0.08) 0%, rgba(94,59,176,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 20px rgba(94,59,176,0.1); }
.stat-card.glow-red    { background: linear-gradient(135deg, rgba(194,59,59,0.08) 0%, rgba(194,59,59,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 20px rgba(194,59,59,0.1); }

[data-theme="dark"] .stat-card.glow-orange { background: linear-gradient(135deg, rgba(74,222,152,0.1) 0%, rgba(74,222,152,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 24px rgba(74,222,152,0.12); }
[data-theme="dark"] .stat-card.glow-green  { background: linear-gradient(135deg, rgba(74,222,152,0.1) 0%, rgba(74,222,152,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 24px rgba(74,222,152,0.12); }
[data-theme="dark"] .stat-card.glow-blue   { background: linear-gradient(135deg, rgba(96,165,250,0.1) 0%, rgba(96,165,250,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 24px rgba(96,165,250,0.12); }
[data-theme="dark"] .stat-card.glow-purple { background: linear-gradient(135deg, rgba(167,139,250,0.1) 0%, rgba(167,139,250,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 24px rgba(167,139,250,0.12); }
[data-theme="dark"] .stat-card.glow-red    { background: linear-gradient(135deg, rgba(248,113,113,0.1) 0%, rgba(248,113,113,0.02) 100%); box-shadow: var(--shadow-sm), 0 4px 24px rgba(248,113,113,0.12); }

/* ============ TABLES ============ */
.table-dark-custom {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}

[style*="overflow-x:auto"],
[style*="overflow-x: auto"] {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.table-dark-custom thead th {
  background: var(--bg-surface2);
  color: var(--text-muted);
  font-size: 0.69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table-dark-custom tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

.table-dark-custom tbody tr:last-child { border-bottom: none; }

.table-dark-custom tbody tr:hover {
  background: var(--bg-surface2);
}

.table-dark-custom tbody td {
  padding: 0.78rem 1rem;
  color: var(--text-secondary);
  vertical-align: middle;
}

.table-dark-custom tbody td:first-child { color: var(--text-primary); font-weight: 500; }

/* ============ BADGES ============ */
.badge-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.65rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge-pending  { background: var(--warning-light);  color: var(--warning); }
.badge-approved { background: var(--accent-light);   color: var(--accent); }
.badge-rejected { background: var(--danger-light);   color: var(--danger); }
.badge-active   { background: var(--accent-light);   color: var(--accent); }
.badge-inactive { background: var(--bg-surface3);    color: var(--text-muted); }
.badge-paid     { background: var(--accent-light);   color: var(--accent); }
.badge-unpaid   { background: var(--danger-light);   color: var(--danger); }
.badge-info     { background: var(--info-light);     color: var(--info); }

/* ============ FORMS ============ */
.form-control, .form-select {
  background: var(--bg-surface2) !important;
  border: 1.5px solid transparent !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.6rem 0.875rem !important;
  font-size: 0.875rem !important;
  transition: all 0.15s !important;
  font-family: var(--font) !important;
  box-shadow: none !important;
}

.form-control:hover, .form-select:hover {
  border-color: var(--border-strong) !important;
}

.form-control:focus, .form-select:focus {
  background: var(--bg-surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(29,111,78,0.15) !important;
  color: var(--text-primary) !important;
  outline: none !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  box-shadow: 0 0 0 3px rgba(74,222,152,0.15) !important;
}

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

.form-label {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

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

/* ============ BUTTONS ============ */
.btn-primary, .btn-glow {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 0.58rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: all 0.18s ease;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  font-family: var(--font);
  box-shadow: 0 2px 8px rgba(29,111,78,0.25), 0 1px 2px rgba(29,111,78,0.15);
}

.btn-primary:hover, .btn-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(29,111,78,0.38), 0 2px 6px rgba(29,111,78,0.2);
  color: #fff;
  opacity: 0.95;
}

.btn-primary:active, .btn-glow:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(29,111,78,0.2);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-glow {
  box-shadow: 0 2px 12px rgba(74,222,152,0.25);
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-glow:hover {
  box-shadow: 0 6px 24px rgba(74,222,152,0.35);
}

.btn-outline-glow {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  padding: 0.58rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-family: var(--font);
}

.btn-outline-glow:hover {
  background: var(--accent-light);
  color: var(--accent);
  box-shadow: 0 2px 10px rgba(29,111,78,0.18);
}

.btn-ghost {
  background: var(--bg-surface2);
  border: none;
  color: var(--text-secondary);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font-family: var(--font);
  font-weight: 600;
}

.btn-ghost:hover {
  background: var(--bg-surface3);
  color: var(--text-primary);
}

.btn-danger-soft {
  background: var(--danger-light);
  border: none;
  color: var(--danger);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  transition: all 0.15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  font-family: var(--font);
  font-weight: 600;
}

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

.btn-success-soft {
  background: var(--accent-light);
  border: none;
  color: var(--accent);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  transition: all 0.15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  font-family: var(--font);
  font-weight: 600;
}

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

.btn-info-soft {
  background: var(--info-light);
  border: none;
  color: var(--info);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  transition: all 0.15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  font-family: var(--font);
  font-weight: 600;
}

.btn-info-soft:hover { background: var(--info); color: #fff; }

/* ============ PROGRESS ============ */
.progress-custom {
  height: 6px;
  background: var(--bg-surface3);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-custom {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 0.8s ease;
}

.progress-bar-green { background: linear-gradient(90deg, var(--glow-green), #1d6f4e); }
.progress-bar-red   { background: linear-gradient(90deg, var(--danger), #a83030); }

/* ============ ALERTS ============ */
.alert-custom {
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  border: none;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alert-success-custom { background: var(--accent-light); color: var(--accent); }
.alert-danger-custom  { background: var(--danger-light); color: var(--danger); }
.alert-warning-custom { background: var(--warning-light); color: var(--warning); }
.alert-info-custom    { background: var(--info-light); color: var(--info); }

/* ============ BREADCRUMB ============ */
.breadcrumb-custom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.breadcrumb-custom a { color: var(--accent); text-decoration: none; font-weight: 600; }
.breadcrumb-custom a:hover { text-decoration: underline; }
.breadcrumb-custom .sep { color: var(--border-strong); }

/* ============ AVATAR STACK ============ */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .avatar {
  width: 28px; height: 28px;
  font-size: 0.65rem;
  border: 2px solid var(--bg-surface);
  margin-left: -7px;
}
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ============ ACTIVITY FEED ============ */
.activity-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }

.activity-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.activity-content .act-title {
  font-size: 0.83rem;
  color: var(--text-primary);
  font-weight: 500;
}

.activity-content .act-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* ============ HAMBURGER ============ */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0.25rem;
  align-items: center;
}

/* ============ OVERLAY ============ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  backdrop-filter: blur(4px);
}

/* ============ LOGIN PAGE ============ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-lg);
}

.login-logo { text-align: center; margin-bottom: 2rem; }

.login-logo .logo-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  margin: 0 auto 0.85rem;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(29,111,78,0.35);
}

/* ============ NOTIFICATION DROPDOWN ============ */
.notif-dropdown {
  width: 310px;
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.notif-item {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  text-decoration: none;
  display: block;
}

.notif-item:hover { background: var(--bg-surface2); }
.notif-item.unread { background: var(--accent-light); }

/* ============ EMPTY STATE ============ */
.empty-state { text-align: center; padding: 2.5rem 1rem; }

.empty-state .empty-icon {
  font-size: 2.5rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  opacity: 0.4;
}

.empty-state h5 { color: var(--text-secondary); font-weight: 700; margin-bottom: 0.4rem; }
.empty-state p  { color: var(--text-muted); font-size: 0.875rem; }

/* ============ PAGINATION ============ */
.pagination .page-link {
  background: var(--bg-surface);
  border: none;
  color: var(--text-secondary);
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  font-size: 0.82rem;
  box-shadow: var(--shadow-xs);
}

.pagination .page-link:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.pagination .page-item.active .page-link {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(29,111,78,0.3);
}

/* ============ MODALS ============ */
.modal-dark .modal-content {
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

.modal-dark .modal-header {
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.2rem;
  background: var(--bg-surface2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-dark .modal-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-surface2);
}

.modal-dark .modal-title { font-weight: 800; font-size: 0.95rem; }

/* ============ SEARCH BAR ============ */
.search-bar { position: relative; }
.search-bar input { padding-left: 2.35rem !important; }
.search-bar .search-icon {
  position: absolute;
  left: 0.8rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.82rem;
  pointer-events: none;
}

/* ============ TABS ============ */
.tab-nav {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.25rem;
  gap: 0;
}

.tab-btn {
  padding: 0.65rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  font-family: var(--font);
}

.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ============ CALLOUT BOXES ============ */
.callout {
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  border-left: 3px solid;
  margin-bottom: 1rem;
}

.callout-success { background: var(--accent-light);  border-color: var(--accent);  color: var(--text-primary); }
.callout-danger  { background: var(--danger-light);  border-color: var(--danger);  color: var(--text-primary); }
.callout-warning { background: var(--warning-light); border-color: var(--warning); color: var(--text-primary); }
.callout-info    { background: var(--info-light);    border-color: var(--info);    color: var(--text-primary); }

/* ============ DROPDOWN ============ */
.dropdown-menu {
  background: var(--bg-surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0.4rem 0 !important;
}

[data-theme="dark"] .dropdown-menu {
  background: var(--bg-surface2) !important;
}

.dropdown-item {
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
  padding: 0.5rem 1rem !important;
  font-family: var(--font);
  border-radius: var(--radius-sm);
  margin: 1px 4px;
  transition: all 0.12s;
}

.dropdown-item:hover {
  background: var(--bg-surface2) !important;
  color: var(--text-primary) !important;
}

.dropdown-divider { border-color: var(--border) !important; margin: 4px 0 !important; }

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  .main-wrapper { margin-left: 0; }
  .hamburger { display: flex; }
  .sidebar-overlay.active { display: block; }
  .page-content { padding: 1rem; }
}

@media (max-width: 576px) {
  .stat-card .stat-value { font-size: 1.2rem; }
  .login-card { margin: 1rem; padding: 1.75rem 1.25rem; }
  .page-content { padding: 0.75rem; }
}

/* ============ MOBILE BOTTOM NAV ============ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1050;
  background: rgba(255,255,255,0.9);
  border-top: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0 0.25rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  align-items: flex-start;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
}

[data-theme="dark"] .bottom-nav {
  background: rgba(22,22,20,0.92);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}

@media (max-width: 991px) {
  .bottom-nav { display: flex; }
  .main-wrapper .page-content {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0));
  }
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.55rem 0.1rem 0.4rem;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s ease;
  gap: 3px;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.bn-item:hover, .bn-item:focus { color: var(--accent); text-decoration: none; }
.bn-item.active { color: var(--accent); }

.bn-icon-wrap {
  position: relative;
  width: 48px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 15px;
  font-size: 1.05rem;
  transition: background 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

.bn-item.active .bn-icon-wrap {
  background: var(--accent-light);
  transform: translateY(-1px) scale(1.08);
}

[data-theme="dark"] .bn-item.active .bn-icon-wrap {
  background: rgba(74,222,152,0.15);
}

.bn-item.active .bn-icon-wrap i {
  filter: drop-shadow(0 0 5px rgba(29,111,78,0.55));
}

[data-theme="dark"] .bn-item.active .bn-icon-wrap i {
  filter: drop-shadow(0 0 6px rgba(74,222,152,0.5));
}

.bn-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  background: var(--accent);
  border-radius: 3px;
  animation: bnPillIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes bnPillIn { from{width:4px;opacity:0} to{width:18px;opacity:1} }

.bn-label {
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.bn-badge {
  position: absolute;
  top: -2px; right: 3px;
  background: var(--danger);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 800;
  padding: 1px 3.5px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  line-height: 1.6;
  border: 1.5px solid var(--bg-surface);
  animation: bnBadgePulse 2.5s ease infinite;
}

@keyframes bnBadgePulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* Ripple tap */
.bn-item::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  background: transparent;
  transition: background 0.12s;
}
.bn-item:active::before { background: var(--accent-light); }

/* ============ PWA INSTALL BTN ============ */
.pwa-install-btn {
  background: var(--accent-light) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}

.pwa-install-pulse {
  animation: pwaGlow 2s ease infinite;
}

@keyframes pwaGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(29,111,78,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(29,111,78,0); }
}

/* ============ LOADING OVERLAY ============ */
#globalLoadingOverlay {
  display:none; position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; flex-direction:column; gap:1rem;
}
#globalLoadingOverlay.active { display:flex; animation:gloFadeIn 0.2s ease; }
@keyframes gloFadeIn { from{opacity:0} to{opacity:1} }
#gloSpinner {
  width:52px; height:52px; border-radius:50%;
  border:4px solid rgba(255,255,255,0.2);
  border-top-color:#fff;
  animation:gloSpin 0.75s linear infinite;
}
@keyframes gloSpin { to{transform:rotate(360deg)} }
#gloMsg { color:#fff; font-weight:700; font-size:0.875rem; font-family:var(--font); letter-spacing:0.02em; }

/* ============ CONFIRM MODAL ============ */
#confirmModal { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
#confirmModal.open { display:flex; }
#confirmBackdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); }
#confirmBox {
  position:relative; background:var(--bg-surface); border:none;
  border-radius:var(--radius-xl); padding:1.75rem; max-width:400px; width:calc(100% - 2rem);
  box-shadow:var(--shadow-lg);
}
#confirmModal.open #confirmBackdrop { animation:cfBackdropIn 0.2s ease forwards; }
#confirmModal.open #confirmBox      { animation:cfBoxIn 0.28s cubic-bezier(0.34,1.4,0.64,1) forwards; }
#confirmModal.closing #confirmBackdrop { animation:cfBackdropOut 0.15s ease forwards; }
#confirmModal.closing #confirmBox      { animation:cfBoxOut 0.15s ease forwards; }
@keyframes cfBackdropIn  { from{opacity:0} to{opacity:1} }
@keyframes cfBackdropOut { from{opacity:1} to{opacity:0} }
@keyframes cfBoxIn  { from{opacity:0;transform:scale(0.9) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes cfBoxOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(0.95)} }
#confirmIconWrap { width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.3rem;margin-bottom:1rem; }
#confirmOk, #confirmCancel { padding:0.55rem 1.25rem;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:700;cursor:pointer;border:none;transition:all 0.15s;font-family:var(--font); }
#confirmOk:hover, #confirmCancel:hover { opacity:0.88; }

.close, .btn-close { filter: var(--btn-close-filter, none); }
[data-theme="dark"] .btn-close { filter: invert(1); }

/* ============ TOM SELECT ============ */
.ts-wrapper { font-family: var(--font); }

.ts-control {
  background: var(--bg-surface2) !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  min-height: 38px !important;
  padding: 0.38rem 0.5rem !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  cursor: pointer;
}

.ts-wrapper.focus .ts-control {
  background: var(--bg-surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(29,111,78,0.15) !important;
}

[data-theme="dark"] .ts-wrapper.focus .ts-control {
  box-shadow: 0 0 0 3px rgba(74,222,152,0.15) !important;
}

.ts-control input { color: var(--text-primary) !important; font-size: 0.875rem !important; font-family: var(--font) !important; }
.ts-control input::placeholder { color: var(--text-muted) !important; }
.ts-control .item { color: var(--text-primary) !important; background: transparent !important; font-size: 0.875rem !important; }

.ts-dropdown {
  background: var(--bg-surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
  font-family: var(--font) !important;
  margin-top: 4px !important;
  z-index: 9999 !important;
}

[data-theme="dark"] .ts-dropdown { background: var(--bg-surface2) !important; }

.ts-dropdown .ts-dropdown-content { padding: 0.3rem 0 !important; }

.ts-dropdown .option {
  padding: 0.52rem 0.875rem !important;
  font-size: 0.875rem !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: var(--radius-sm);
  margin: 1px 4px;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background: var(--bg-surface2) !important;
  color: var(--text-primary) !important;
}

.ts-dropdown .option.selected {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.ts-dropdown .create {
  color: var(--accent) !important;
  font-weight: 700 !important;
  padding: 0.52rem 0.875rem !important;
  border-top: 1px solid var(--border) !important;
}

.ts-control .clear-button,
.ts-wrapper .ts-control .clear-button { color: var(--text-muted) !important; opacity: 0.7; }
.ts-wrapper:not(.no-delete) .ts-control .item .remove { color: var(--text-muted) !important; }
.ts-control .placeholder { color: var(--text-muted) !important; font-size: 0.875rem !important; }

.modal .ts-dropdown { z-index: 10000 !important; }
.ts-wrapper + select { display: none !important; }

/* ============ ACTION GROUPS ============ */
.action-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.action-group a,
.action-group button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: var(--font);
  font-weight: 600;
  line-height: 1;
  border: none;
}

.action-view   { background: var(--bg-surface2);   color: var(--text-secondary); }
.action-view:hover   { background: var(--bg-surface3); color: var(--text-primary); }

.action-edit   { background: var(--info-light);    color: var(--info); }
.action-edit:hover   { background: var(--info);  color: #fff; }

.action-sell   { background: var(--accent-light);  color: var(--accent); }
.action-sell:hover   { background: var(--accent); color: #fff; }

.action-pay    { background: var(--accent-light);  color: var(--accent); }
.action-pay:hover    { background: var(--accent); color: #fff; }

.action-delete { background: var(--danger-light);  color: var(--danger); }
.action-delete:hover { background: var(--danger); color: #fff; }

.action-warn   { background: var(--warning-light); color: var(--warning); }
.action-warn:hover   { background: var(--warning); color: #fff; }

.action-info   { background: var(--info-light);    color: var(--info); }
.action-info:hover   { background: var(--info);   color: #fff; }

.action-purple { background: var(--purple-light);  color: var(--purple); }
.action-purple:hover { background: var(--purple); color: #fff; }

.action-icon { width: 30px; height: 30px; padding: 0; font-size: 0.75rem; }

/* ============ TABLE IMPROVEMENTS ============ */
.table-dark-custom tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--radius); }
.table-dark-custom tbody tr:last-child td:last-child  { border-radius: 0 0 var(--radius) 0; }

.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--accent); }
.th-sort i { font-size: 0.65rem; margin-left: 4px; opacity: 0.5; }
.th-sort.asc i.fa-sort-up, .th-sort.desc i.fa-sort-down { opacity: 1; color: var(--accent); }

.table-dark-custom tbody tr.clickable { cursor: pointer; }
.table-dark-custom tbody tr.clickable:hover td { background: var(--bg-surface2); }

.status-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700;
}
.status-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.status-dot.paid     { color: var(--glow-green); }
.status-dot.unpaid   { color: var(--danger); }
.status-dot.partial  { color: var(--warning); }
.status-dot.active   { color: var(--glow-green); }
.status-dot.inactive { color: var(--text-muted); }

.amount-positive { color: var(--glow-green); font-weight: 700; }
.amount-negative { color: var(--danger);     font-weight: 700; }
.amount-neutral  { color: var(--accent);     font-weight: 700; }

/* ============ ANIMATIONS ============ */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-content > * {
  animation: pageEnter 0.32s ease both;
}
.page-content > *:nth-child(2) { animation-delay: 0.04s; }
.page-content > *:nth-child(3) { animation-delay: 0.08s; }
.page-content > *:nth-child(4) { animation-delay: 0.12s; }
.page-content > *:nth-child(5) { animation-delay: 0.16s; }

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface2) 25%, var(--bg-surface3) 50%, var(--bg-surface2) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rippleAnim {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.fade-in   { animation: fadeIn 0.35s ease forwards; }
.fade-in-1 { animation-delay: 0.04s; }
.fade-in-2 { animation-delay: 0.08s; }
.fade-in-3 { animation-delay: 0.12s; }
.fade-in-4 { animation-delay: 0.16s; }

/* ============ UTILITIES ============ */
.text-orange  { color: var(--accent)     !important; }
.text-green   { color: var(--glow-green) !important; }
.text-blue    { color: var(--info)       !important; }
.text-purple  { color: var(--purple)     !important; }
.text-dim     { color: var(--text-muted) !important; }
.text-danger  { color: var(--danger)     !important; }
.text-secondary-custom { color: var(--text-secondary) !important; }
.text-accent  { color: var(--accent)     !important; }

.bg-card      { background: var(--bg-surface)  !important; }
.bg-surface2  { background: var(--bg-surface2) !important; }
.border-custom { border-color: var(--border) !important; }
.rounded-custom { border-radius: var(--radius) !important; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.divider { height: 1px; background: var(--border); margin: 0.85rem 0; }

/* ============ PRINT STYLES ============ */
@media print {
  .sidebar, .sidebar-overlay, .topbar, .bottom-nav,
  #globalLoadingOverlay, #confirmModal, #confirmBackdrop,
  .breadcrumb-custom, .pwa-install-btn,
  .btn-glow, .btn-ghost, button,
  .dropdown-menu, [data-confirm],
  form .card, form.card { display: none !important; }

  body, html { background: #fff !important; color: #000 !important; }
  .main-wrapper { margin: 0 !important; padding: 0 !important; }
  .page-content { padding: 0 !important; margin: 0 !important; padding-bottom: 0 !important; }
  .card:has(form) { display: none !important; }

  .card {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    break-inside: avoid;
    margin-bottom: 1.5rem !important;
    page-break-inside: avoid;
  }
  .card-header {
    background: transparent !important;
    border-bottom: 2px solid #1d6f4e !important;
    padding: 0.5rem 0 !important;
  }
  .card-title { color: #000 !important; font-size: 0.95rem !important; font-weight: 700 !important; }
  .card-body { padding: 0.5rem 0 !important; }

  .stat-card {
    border: 1px solid #ccc !important;
    background: #fafafa !important;
    box-shadow: none !important;
    color: #000 !important;
    break-inside: avoid;
  }
  .row { display: flex !important; flex-wrap: wrap !important; }
  .col-6, .col-md-2, .col-md-3, .col-md-4 { flex: 0 0 25% !important; max-width: 25% !important; }
  .col-lg-4 { flex: 0 0 33.33% !important; max-width: 33.33% !important; }
  .col-lg-6 { flex: 0 0 50% !important; max-width: 50% !important; }
  .col-lg-8 { flex: 0 0 66.66% !important; max-width: 66.66% !important; }
  .col-lg-12, .col-12 { flex: 0 0 100% !important; max-width: 100% !important; }

  .table-dark-custom {
    border-collapse: collapse !important;
    width: 100% !important;
    font-size: 0.78rem !important;
    color: #000 !important;
  }
  .table-dark-custom thead tr { background: #1d6f4e !important; color: #fff !important; }
  .table-dark-custom th, .table-dark-custom td {
    padding: 5px 8px !important;
    border: 1px solid #ddd !important;
    color: inherit !important;
  }
  .table-dark-custom tbody tr:nth-child(even) { background: #f5f5f5 !important; }

  #summaryContribChart, #summaryFedhaChart,
  #contribMonthChart, #fedhaMonthChart,
  #loanMonthChart, #loanStatusChart,
  #finesMonthChart, [id$="Chart"] { display: none !important; }

  .progress-custom { border: 1px solid #ccc !important; background: #eee !important; }
  .progress-bar-custom { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
  .fade-in { opacity: 1 !important; transform: none !important; }
  a { color: inherit !important; text-decoration: none !important; }
  .print-header { display: block !important; }
}

.print-header {
  display: none;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid #1d6f4e;
}
.print-header h2 { margin: 0; font-size: 1.2rem; color: #1d6f4e; }
.print-header p  { margin: 0.2rem 0 0; font-size: 0.8rem; color: #555; }

/* ================================================================
   MOBILE APP DESIGN — Native iOS/Android feel
   ================================================================ */

/* ── Global mobile baseline ──────────────────────────────────── */
@media (max-width: 991px) {

  /* Momentum scrolling everywhere */
  * { -webkit-tap-highlight-color: transparent; }

  html { -webkit-text-size-adjust: 100%; }

  /* ── Page content ────────────────────────────────────────── */
  .page-content {
    padding: 1rem 0.9rem;
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* ── Topbar — frosted native app bar ──────────────────────── */
  .topbar {
    height: 58px;
    padding: 0 1rem;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 0.5px 0 rgba(0,0,0,0.1);
  }

  [data-theme="dark"] .topbar {
    background: rgba(20,20,18,0.9);
    box-shadow: 0 0.5px 0 rgba(255,255,255,0.06);
  }

  .page-title { font-size: 1rem; font-weight: 800; }

  .topbar-right { gap: 0.3rem; }

  .icon-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: transparent;
  }

  .icon-btn:hover { background: var(--bg-surface2); }

  /* ── Hamburger touch target ───────────────────────────────── */
  .hamburger {
    width: 38px; height: 38px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
  }

  /* ── Sidebar drawer — slides from left ───────────────────── */
  .sidebar {
    width: 82vw;
    max-width: 300px;
    border-radius: 0 28px 28px 0;
    box-shadow: 8px 0 48px rgba(0,0,0,0.22);
  }

  .sidebar-nav { padding: 0.5rem 0; }

  .nav-item a {
    padding: 0.65rem 0.9rem;
    margin: 2px 0.6rem;
    font-size: 0.87rem;
    border-radius: 14px;
  }

  /* ── Cards ────────────────────────────────────────────────── */
  .card {
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  }

  [data-theme="dark"] .card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.2);
  }

  .card-body { padding: 1rem; }

  /* ── Stat cards ────────────────────────────────────────────── */
  .stat-card {
    border-radius: 18px;
    padding: 1rem;
  }

  .stat-card .stat-value { font-size: 1.3rem; }

  /* ── Forms — native input sizing ──────────────────────────── */
  .form-control, .form-select {
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
    min-height: 50px;
  }

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

  textarea.form-control { min-height: 100px; }

  /* ── Buttons — bigger touch targets ──────────────────────── */
  .btn-primary, .btn-glow {
    padding: 0.72rem 1.35rem;
    border-radius: 12px;
    font-size: 0.9rem;
    min-height: 46px;
  }

  .btn-ghost {
    padding: 0.6rem 1rem;
    border-radius: 12px;
    min-height: 42px;
  }

  /* Full-width CTA utility for mobile */
  .btn-mobile-full {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 14px;
    min-height: 52px;
  }

  /* ── Action group buttons — larger on mobile ──────────────── */
  .action-group a,
  .action-group button {
    padding: 0.42rem 0.75rem;
    font-size: 0.82rem;
    border-radius: 8px;
    min-height: 36px;
  }

  /* ── Breadcrumb ──────────────────────────────────────────── */
  .breadcrumb-custom {
    font-size: 0.71rem;
    margin-bottom: 0.9rem;
  }

  /* ── Row gutter tighter on mobile ────────────────────────── */
  .row { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }

  /* ── Modals — bottom sheets on mobile ────────────────────── */
  .modal-dialog {
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .modal-dark .modal-content,
  .modal-dialog .modal-content {
    border-radius: 26px 26px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 12px), 12px);
  }

  /* Pull handle */
  .modal-dark .modal-content::before,
  .modal-dialog .modal-content::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border-strong);
    border-radius: 4px;
    margin: 10px auto 0;
    opacity: 0.5;
  }

  .modal.fade .modal-dialog {
    transform: translateY(100%) !important;
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1) !important;
  }

  .modal.show .modal-dialog {
    transform: translateY(0) !important;
    transition: transform 0.38s cubic-bezier(0.16,1,0.3,1) !important;
  }

  .modal-dark .modal-header {
    border-radius: 26px 26px 0 0;
    padding: 0.85rem 1.15rem 0.85rem;
  }

  /* ── Table — horizontal scroll wrapper ──────────────────── */
  .table-responsive-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    scrollbar-width: none;
  }
  .table-responsive-wrap::-webkit-scrollbar { display: none; }

  /* ── Pagination — larger touch targets ───────────────────── */
  .pagination .page-link {
    min-width: 38px; min-height: 38px;
    display: flex; align-items: center; justify-content: center;
  }

}

/* ── Small phones ────────────────────────────────────────────── */
@media (max-width: 576px) {
  .page-content {
    padding: 0.85rem 0.75rem;
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  }

  .topbar { padding: 0 0.85rem; }

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

  .card { border-radius: 18px; }
  .card-body { padding: 0.875rem; }

  .stat-card { border-radius: 16px; padding: 0.9rem; }
  .stat-card .stat-value { font-size: 1.2rem; }
  .stat-card .icon-wrap { width: 36px; height: 36px; font-size: 0.95rem; }

  .login-card {
    margin: 0.75rem;
    padding: 1.75rem 1.25rem;
    border-radius: 24px;
  }
}

/* ================================================================
   BOTTOM NAV — Native Tab Bar Redesign
   ================================================================ */

@media (max-width: 991px) {

  .bottom-nav {
    display: flex;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    align-items: flex-start;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    box-shadow: 0 -0.5px 0 rgba(0,0,0,0.08), 0 -8px 32px rgba(0,0,0,0.06);
    border-top: none;
    gap: 0;
  }

  [data-theme="dark"] .bottom-nav {
    background: rgba(18,18,16,0.92);
    box-shadow: 0 -0.5px 0 rgba(255,255,255,0.07), 0 -8px 32px rgba(0,0,0,0.45);
  }

  .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 4px 4px;
    gap: 2px;
    color: var(--text-muted);
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease;
    outline: none;
    min-width: 0;
  }

  .bn-icon-wrap {
    width: 46px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 1.15rem;
    position: relative;
    transition: background 0.25s ease, transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
    flex-shrink: 0;
  }

  .bn-item.active .bn-icon-wrap {
    background: var(--accent-light);
    transform: translateY(-1px) scale(1.08);
    box-shadow: 0 4px 14px rgba(29,111,78,0.18);
  }

  [data-theme="dark"] .bn-item.active .bn-icon-wrap {
    background: rgba(74,222,152,0.16);
    box-shadow: 0 4px 14px rgba(74,222,152,0.2);
  }

  .bn-item.active .bn-icon-wrap i {
    color: var(--accent);
    filter: drop-shadow(0 0 6px rgba(29,111,78,0.4));
  }

  [data-theme="dark"] .bn-item.active .bn-icon-wrap i {
    filter: drop-shadow(0 0 7px rgba(74,222,152,0.45));
  }

  .bn-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
  }

  .bn-item.active { color: var(--accent); }

  /* Remove old underline pill */
  .bn-item.active::after { display: none; }

  /* Tap scale feedback */
  .bn-item:active .bn-icon-wrap {
    transform: scale(0.88);
    transition: transform 0.12s ease;
  }

  .bn-item.active:active .bn-icon-wrap {
    transform: translateY(-1px) scale(0.92);
  }

  .bn-badge {
    position: absolute;
    top: -4px; right: -2px;
    min-width: 16px; height: 16px;
    background: var(--danger);
    color: #fff;
    font-size: 0.52rem;
    font-weight: 800;
    border-radius: 10px;
    border: 2px solid var(--bg-surface);
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    line-height: 1;
    animation: bnBadgePulse 2.5s ease infinite;
  }

  /* Ripple on tap */
  .bn-item::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 14px;
    background: transparent;
    transition: background 0.1s;
  }
  .bn-item:active::before { background: var(--accent-light); }
  [data-theme="dark"] .bn-item:active::before { background: rgba(74,222,152,0.08); }

  /* ── Swipe left shadow on tables ─────────────────────────── */
  .table-scroll-hint {
    position: relative;
  }
  .table-scroll-hint::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 100%;
    background: linear-gradient(to right, transparent, var(--bg-surface));
    border-radius: 0 16px 16px 0;
    pointer-events: none;
    opacity: 0.8;
  }

}

/* ================================================================
   NATIVE LIST ROWS — iOS-style inset rows
   ================================================================ */
.native-list {
  background: var(--bg-surface);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .native-list { background: var(--bg-surface2); }

.native-list-item {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  gap: 0.85rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.12s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.native-list-item:last-child { border-bottom: none; }

.native-list-item:active { background: var(--bg-surface2); }

.native-list-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.native-list-content { flex: 1; min-width: 0; }

.native-list-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.native-list-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.native-list-right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.native-list-chevron {
  color: var(--border-strong);
  font-size: 0.65rem;
}

/* ================================================================
   MOBILE UTILITY CLASSES
   ================================================================ */

/* Horizontal scroll strip for KPI cards */
.kpi-scroll-strip {
  display: flex;
  overflow-x: auto;
  gap: 0.75rem;
  padding: 0.15rem 0.05rem 0.5rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-left: -0.05rem;
}
.kpi-scroll-strip::-webkit-scrollbar { display: none; }
.kpi-scroll-strip > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Section header — native app style */
.section-header-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}
.section-header-mobile .section-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.section-header-mobile .section-action {
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* Floating action button */
.fab {
  position: fixed;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  right: 1.25rem;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 6px 24px rgba(29,111,78,0.4), 0 2px 8px rgba(29,111,78,0.2);
  border: none;
  cursor: pointer;
  z-index: 900;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
  text-decoration: none;
}

.fab:hover { transform: scale(1.08); }
.fab:active { transform: scale(0.94); }

[data-theme="dark"] .fab {
  box-shadow: 0 6px 24px rgba(74,222,152,0.35), 0 2px 8px rgba(74,222,152,0.15);
}

@media (max-width: 991px) {
  .fab { display: flex; }
}

/* Swipe row indicator */
.swipe-hint {
  display: none;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: right;
  margin-bottom: 0.4rem;
  gap: 0.3rem;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 991px) {
  .swipe-hint { display: flex; }
}

/* ================================================================
   HAPTIC BUTTON FEEDBACK
   All interactive items get a scale-down on :active
   ================================================================ */
@media (max-width: 991px) {
  .btn-primary:active, .btn-glow:active   { transform: scale(0.97); }
  .btn-ghost:active                        { transform: scale(0.97); }
  .btn-danger-soft:active                  { transform: scale(0.97); }
  .btn-success-soft:active                 { transform: scale(0.97); }
  .btn-info-soft:active                    { transform: scale(0.97); }
  .btn-outline-glow:active                 { transform: scale(0.97); }

  .stat-card:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  .card:active { /* no scale for containers */ }
}

/* ================================================================
   MOBILE PAGE-ENTER ANIMATION — slide up from bottom
   ================================================================ */
@media (max-width: 991px) {
  @keyframes mobilePageEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .page-content > * {
    animation: mobilePageEnter 0.3s cubic-bezier(0.16,1,0.3,1) both;
  }

  .page-content > *:nth-child(1) { animation-delay: 0.0s; }
  .page-content > *:nth-child(2) { animation-delay: 0.05s; }
  .page-content > *:nth-child(3) { animation-delay: 0.09s; }
  .page-content > *:nth-child(4) { animation-delay: 0.13s; }
  .page-content > *:nth-child(5) { animation-delay: 0.16s; }
}