/* assets/css/style.css - SIDDHESHWARI GREENS | Modern Premium Portal Theme */

@import url('../fonts/hind-vadodara.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Cinzel:wght@600;700;800&display=swap');

:root {
  /* === PRIMARY PALETTE === */
  --primary:        #f59e0b;
  --primary-deep:   #d97706;
  --primary-dark:   #92400e;
  --primary-glow:   rgba(245, 158, 11, 0.20);
  --primary-light:  #fffbeb;
  /* Legacy aliases kept for compatibility */
  --primary-hover:  #d97706;
  --warning:        #f59e0b;
  --warning-light:  #fef3c7;

  /* === ACCENT / INFO === */
  --accent:         #6366f1;
  --accent-light:   #eef2ff;
  --success:        #3b82f6;
  --success-light:  #eff6ff;
  --info:           #3b82f6;
  --info-light:     #eff6ff;

  /* === DANGER === */
  --danger:         #ef4444;
  --danger-light:   #fef2f2;
  --danger-glow:    rgba(239, 68, 68, 0.18);

  /* === SURFACES === */
  --bg-app:         #0f172a;
  --bg-sidebar:     #0c1220;
  --bg-surface:     #ffffff;
  --bg-page:        #f1f5f9;
  --bg-subtle:      #f8fafc;
  --bg-muted:       #f1f5f9;
  /* Legacy */
  --bg-main:        #f1f5f9;
  --secondary:      #0f172a;
  --secondary-hover:#1e293b;

  /* === TEXT === */
  --text-main:      #0f172a;
  --text-body:      #334155;
  --text-muted:     #64748b;
  --text-subtle:    #94a3b8;
  --text-inverse:   #ffffff;

  /* === BORDERS === */
  --border:         #e2e8f0;
  --border-subtle:  #f1f5f9;
  --border-strong:  #cbd5e1;
  --border-focus:   #f59e0b;

  /* === SHADOWS === */
  --shadow-xs:    0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm:    0 2px 8px rgba(15,23,42,0.08);
  --shadow-md:    0 4px 16px rgba(15,23,42,0.10), 0 1px 4px rgba(15,23,42,0.06);
  --shadow-lg:    0 8px 32px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-xl:    0 20px 48px rgba(15,23,42,0.18), 0 4px 16px rgba(15,23,42,0.08);
  --shadow-amber: 0 4px 20px rgba(245,158,11,0.28);

  /* === RADII === */
  --r-xs:       6px;
  --r-sm:       8px;
  --r-md:       12px;
  --r-lg:       16px;
  --r-xl:       20px;
  --r-full:     9999px;
  /* Legacy aliases */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-full:9999px;

  /* === TRANSITIONS === */
  --transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ease:             all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:      all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* U48 (admin 2026-10-11): password boxes are text boxes shown as dots, so Chrome never offers to save the password */
.sg-pwd { -webkit-text-security: disc; text-security: disc; }
.sg-pwd.sg-pwd-shown { -webkit-text-security: none; text-security: none; }

/* U37 (admin 2026-10-10): inside the Android app, pulling the page down does not show the browser's refresh circle */
html.sg-app, html.sg-app body { overscroll-behavior-y: none; }

body {
  font-family: 'Plus Jakarta Sans', 'SG Gujarati', 'Noto Sans Gujarati', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.brand-serif {
  font-family: 'Cinzel', serif, Georgia;
  letter-spacing: 0.04em;
}

.mono {
  font-family: 'JetBrains Mono', 'SG Gujarati', monospace;
}

/* Layout System */
.app-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* Sidebar (Desktop) */
.sidebar {
  width: 272px;
  background: var(--bg-sidebar);
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.05);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(245,158,11,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(99,102,241,0.05) 0%, transparent 55%);
}

.sidebar-header {
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.20);
}

.society-logo-img {
  max-height: 38px;
  width: auto;
  object-fit: contain;
  background: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.society-brand-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: 0.03em;
}

.society-brand-sub {
  font-size: 9.5px;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 2px;
}

.sidebar-nav {
  padding: 14px 10px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; }

.nav-section-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(148,163,184,0.60);
  font-weight: 700;
  padding: 14px 12px 5px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: #94a3b8;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  position: relative;
}

.nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: #e2e8f0;
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.12));
  color: var(--primary);
  font-weight: 700;
  border: 1px solid rgba(245,158,11,0.18);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}

.nav-item i {
  font-size: 17px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item .badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.sidebar-footer {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.25);
}

.user-profile-widget {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* GL-8: portal company credit (GrihaVittaSetu) – login card + side menu bottom */
.gvs-credit { text-align: center; line-height: 1.35; }
.gvs-credit .gvs-pb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: #71717a; }
.gvs-credit .gvs-pb img { height: 20px; width: auto; display: block; }
.gvs-credit .gvs-name { font-weight: 800; letter-spacing: 0.1px; }
.gvs-credit .gvs-g { color: #1a9ee0; }
.gvs-credit .gvs-s { color: #f08c1e; }
.gvs-credit .gvs-guide { font-size: 10.5px; color: #a1a1aa; margin-top: 1px; }
.gvs-credit.on-dark .gvs-pb { color: #a1a1aa; font-size: 11px; }
.gvs-credit.on-dark .gvs-pb img { height: 16px; }
.gvs-credit.on-dark .gvs-g { color: #38bdf8; }
.gvs-credit.on-dark .gvs-s { color: #fb923c; }
.gvs-credit.on-dark .gvs-guide { color: #71717a; }
.sidebar-footer .gvs-credit { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
/* Phone / small tablet (menu hidden behind ☰): credit at the end of every page instead of in the menu;
   on the profile page (all sizes) the same spot shows the full credit with "Guided by" (admin 2026-10-03) */
.gvs-page-end { display: none; }
.gvs-page-end.is-profile { display: block; padding: 0 24px 24px; }
@media (max-width: 900px) {
  .sidebar-footer .gvs-credit { display: none; }
  .gvs-page-end, .gvs-page-end.is-profile { display: block; padding: 2px 16px 76px; }
  .main-wrapper .content-area { padding-bottom: 6px; }   /* the bottom-bar room is now under .gvs-page-end */
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #1c1917;
  flex-shrink: 0;
  box-shadow: var(--shadow-amber);
}

.user-meta-info {
  flex: 1;
  min-width: 0;
}

.user-meta-name {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-meta-role {
  font-size: 10.5px;
  color: var(--primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

/* Main Content Area */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

/* Top App Header */
.top-header {
  height: 64px;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(15,23,42,0.06), var(--shadow-xs);
  gap: 12px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}

.mobile-menu-btn {
  display: none;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 20px;
  color: var(--text-body);
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1;
  transition: var(--ease);
}

.mobile-menu-btn:hover { background: var(--border); }

.page-headline {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Universal Topbar Global Search */
.header-search {
  flex: 1;
  max-width: 480px;
  margin: 0 16px;
  position: relative;
}

.top-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.top-search-box .search-icon {
  position: absolute;
  left: 14px;
  color: #64748b;
  font-size: 14px;
  pointer-events: none;
}

.top-search-input {
  width: 100%;
  padding: 8px 72px 8px 38px;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  transition: all 0.2s ease;
  outline: none;
}

.top-search-input:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.top-search-input::placeholder {
  color: #d1d5db;
  opacity: 1;
  font-size: 12px;
}

.search-kbd-badge {
  position: absolute;
  right: 12px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  font-family: 'JetBrains Mono', 'SG Gujarati', monospace;
  border: 1px solid #cbd5e1;
}

.search-clear-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
  display: none;
}

.search-clear-btn:hover {
  color: #1e293b;
}

/* Autocomplete Floating Dropdown */
.search-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  max-height: 480px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.search-dropdown-menu.show {
  display: block;
}

.search-group-header {
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-item-row {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.search-item-row:hover,
.search-item-row.selected {
  background: #eff6ff;
}

.search-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

.search-empty-state {
  padding: 24px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

@media (max-width: 900px) {
  .header-search {
    max-width: 260px;
  }
}

/* Phone header – option D (admin 2026-10-13): one white row like the tablet (menu · page name · post chip); no home
   icon (the bottom bar has હોમ); NO search on a phone at all (admin) – tablet / desktop keep the search box. */
@media (max-width: 640px) {
  .top-header { height: 60px; padding: 0 12px; flex-wrap: nowrap; gap: 8px; }
  .top-header .header-left { gap: 10px; }
  .top-header .hdr-home { display: none !important; }
  .top-header .page-headline { font-size: 16px; }
  .top-header .header-search { display: none; }
}
/* Header at every width (admin 2026-10-05, GL-19): power icon only for logout and a slimmer one-line flat / post
   chip; the panel switch sits in a strip under the header (see .panel-strip); fixed-width search so titles fit */
.top-header .header-right { gap: 8px; }
.top-header .header-right .btn span { display: none; }
.top-header .header-right .btn { padding: 6px 10px; }
.top-header .header-right .badge { padding: 6px 9px !important; font-size: 12.5px !important; white-space: nowrap; }
.top-header .header-right .badge i { display: none; }
@media (min-width: 641px) and (max-width: 1220px) {
  .top-header { gap: 8px; }
  .top-header .header-search { flex: 0 1 220px; margin: 0 4px; }
}
@media (min-width: 1221px) {
  .top-header { gap: 8px; }
  .top-header .header-search { flex: 0 1 300px; margin: 0 4px; }
}

/* Content Container */
.content-area {
  flex: 1;
  padding: 24px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
}

/* Cards & Containers */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  margin-bottom: 24px;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Metric / Stat Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-xs);
  transition: var(--ease-spring);
}

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

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-deep));
  opacity: 0;
  transition: opacity 0.2s;
}

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

.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.stat-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.stat-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  font-family: inherit;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #1c1917;
  border-color: transparent;
  box-shadow: 0 2px 8px var(--primary-glow);
  font-weight: 700;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #fbbf24, var(--primary));
  box-shadow: var(--shadow-amber);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-main);
}

.btn-secondary:hover {
  background: #e7e5e4;
}

.btn-success {
  background: #18181b; /* Charcoal Luxe */
  color: #ffffff;
  border: 1px solid #27272a;
}

.btn-success:hover {
  background: #27272a;
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626);
  color: #fff;
  box-shadow: 0 2px 8px var(--danger-glow);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 14px var(--danger-glow);
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-main);
}

.btn-outline:hover {
  background: var(--bg-subtle);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: var(--radius-md);
}

/* Badges & Tags (NO GREEN) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.badge-owner {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.badge-rental {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.badge-paid {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.badge-cleared {
  background: #f4f4f5;
  color: #18181b;
  border: 1px solid #e4e4e7;
}

.badge-unpaid, .badge-overdue {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.badge-admin {
  background: #18181b;
  color: #fbbf24;
  border: 1px solid #3f3f46;
}

.badge-committee {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* Tables */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}

/* Click-and-drag horizontal scroll affordance (see enableDragScrollTables in app.js) */
.table-responsive {
  cursor: grab;
}

.table-responsive.drag-scrolling {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.data-table th {
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 700;
  padding: 12px 16px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background-color: rgba(250, 250, 249, 0.9);
}

/* Table -> stacked cards on narrow screens. Opt in with class="data-table
   table-cards-mobile" and a data-label="<column header>" on every <td> (matching
   its <th> text) — below the breakpoint each row becomes one card with its cells
   laid out as label/value lines, instead of a table the user has to scroll sideways
   through cell-by-cell on a phone. .table-responsive's own overflow-x still applies
   above the breakpoint, and becomes irrelevant below it since rows no longer scroll. */
@media (max-width: 640px) {
  .table-cards-mobile.data-table,
  .table-cards-mobile.data-table thead,
  .table-cards-mobile.data-table tbody,
  .table-cards-mobile.data-table tr,
  .table-cards-mobile.data-table td {
    display: block;
    width: 100%;
  }
  .table-cards-mobile.data-table thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }
  .table-cards-mobile.data-table tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #ffffff;
  }
  .table-cards-mobile.data-table tbody tr:last-child {
    margin-bottom: 0;
  }
  .table-cards-mobile.data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px dashed var(--border);
    text-align: right;
    white-space: normal !important;
  }
  .table-cards-mobile.data-table td:last-child {
    border-bottom: none;
  }
  .table-cards-mobile.data-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .table-cards-mobile.data-table td:not([data-label]) {
    justify-content: flex-end;
  }
}

/* Forms & Inputs */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--text-main);
  transition: var(--transition);
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Every number input in the app deals with money — the native up/down spinner is a
   real footgun here: an accidental mouse-wheel scroll over a focused amount field
   silently increments/decrements it instead of scrolling the page. Hide the spinner
   everywhere (site-wide, not per-field); the wheel-scroll itself is also blocked
   globally in app.js (see the 'wheel' listener near DOMContentLoaded). */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 16px;
}

/* Block & Flat Interactive Matrix */
.block-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.block-tab-btn {
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.block-tab-btn.active {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: white;
  border-color: #d97706;
  box-shadow: 0 4px 10px var(--primary-glow);
}

.floor-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.floor-row {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.floor-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: 12px;
}

.flat-card-interactive {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-width: 0;
}

.flat-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.flat-card-interactive.overdue {
  border-left: 4px solid var(--danger);
}

.flat-card-interactive.cleared {
  border-left: 4px solid #18181b; /* Charcoal accent for cleared */
}

.flat-id-tag {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 6px;
}

.flat-id-tag > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.flat-id-tag > .badge {
  flex-shrink: 0;
}

.flat-resident-name {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.flat-due-indicator {
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}

/* Modal Windows */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(9, 9, 11, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 650px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.2s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.modal-box::-webkit-scrollbar { width: 5px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }

.modal-box-lg {
  max-width: 920px !important;
}

.modal-box-xl {
  max-width: 1100px !important;
}

.modal-backdrop.show .modal-box {
  transform: scale(1);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #ffffff;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-subtle);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  position: sticky;
  bottom: 0;
  z-index: 5;
}

/* Mobile Webview Bottom Navigation Bar */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: rgba(255,255,255,0.97);
  border-top: 1px solid var(--border);
  z-index: 50;
  padding: 0 8px;
  box-shadow: 0 -4px 20px rgba(15,23,42,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bottom-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-subtle);
  text-decoration: none;
  font-size: 9.5px;
  font-weight: 700;
  background: none;
  border: none;
  padding: 6px 10px;
  flex: 1;
  cursor: pointer;
  transition: var(--ease);
  border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}

.bottom-nav-item i { font-size: 19px; transition: var(--ease); }

.bottom-nav-item.active { color: var(--primary-deep); }
.bottom-nav-item.active i { transform: translateY(-2px); }

/* Late fee visual calculation box */
.calculation-breakdown-card {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 12px;
}

.calc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px dashed #fcd34d;
}

.calc-row:last-child {
  border-bottom: none;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 800;
}

/* Notice & Query Cards */
.feed-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.feed-card:hover {
  box-shadow: var(--shadow-md);
}

.feed-card.urgent {
  border-left: 4px solid var(--danger);
  background: #fffafa;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: #0f172a;
  color: var(--primary);
  border: 1px solid #1e293b;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 340px;
}

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

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.45);
  z-index: 55;              /* above bottom bar (50), below the menu (60) */
  -webkit-tap-highlight-color: transparent;
}

/* Responsive & Mobile Optimizations */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
    z-index: 60;
  }
  .sidebar.open { transform: translateX(0); }
  /* dark layer behind the open menu: first touch outside only closes the menu */
  body.sidebar-open .sidebar-backdrop { display: block; }
  body.sidebar-open { overflow: hidden; }
  .mobile-menu-btn { display: flex; }
  .content-area { padding: 16px; padding-bottom: 76px; }
  /* messages sit just above the bottom bar, full width, so they never cover a form */
  .toast-container { left: 12px; right: 12px; bottom: 72px; }
  .toast { max-width: none; }
  .bottom-nav { display: block; }
  .top-header { padding: 0 14px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { padding: 16px; }
  .page-headline { font-size: 16px; }
}

@media (max-width: 600px) {
  /* summary cards: two per row on a phone, compact, so the page is not one long column */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stat-card { padding: 12px; gap: 6px; }
  .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-card:hover { transform: none; }
  .stat-label { font-size: 11.5px; line-height: 1.3; }
  .stat-value { font-size: 19px; overflow-wrap: anywhere; }
  .stat-icon-wrapper { width: 30px; height: 30px; font-size: 14px; flex-shrink: 0; }
  .stat-sub { font-size: 10.5px; flex-wrap: wrap; }
  .card {
    padding: 16px;
  }
  .flats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flat-id-tag {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .flat-id-tag > span:first-child {
    max-width: 100%;
  }

  /* Maintenance page header action buttons — force 2 per row on mobile
     instead of each stacking full-width across 6 separate lines. Text is
     allowed to wrap to a second line within that half-width slot rather
     than forcing the button wider than its share. */
  .maint-header-actions {
    width: 100%;
  }
  .maint-header-actions .btn {
    flex: 1 1 calc(50% - 4px);
    max-width: calc(50% - 4px);
    font-size: 11px !important;
    padding: 7px 6px !important;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }

  /* Generic safety net: inline flex rows used across report/accounting
     headers default to content-based min-width and overflow on narrow
     screens unless explicitly allowed to shrink. Flex items (and any
     plain wrapper divs nested inside them) default to a content-based
     minimum width, so force them to shrink to their container instead. */
  [style*="flex-wrap:wrap"],
  [style*="flex-wrap:wrap"] > div,
  [style*="justify-content:space-between"] > div {
    min-width: 0;
  }
  h1, h2, h3 {
    overflow-wrap: break-word;
    min-width: 0;
  }
  select.form-control {
    min-width: 0 !important;
  }
}

/* Print from the app itself (rate history, advance register …): empty page-margin boxes, so Chrome
   adds no date / title / "localhost/…" address – same as every print page */
@page { @top-left { content: ""; } @top-center { content: ""; } @top-right { content: ""; } @bottom-left { content: ""; } @bottom-center { content: ""; } @bottom-right { content: ""; } }

/* Print Styling for Payment Receipts & Accounting Reports */
@media print {
  .sidebar, .top-header, .bottom-nav, .btn-no-print, .modal-backdrop, .btn {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .receipt-printable {
    box-shadow: none !important;
    border: 2px solid #000000 !important;
    margin: 0 !important;
    padding: 20px !important;
    background: #ffffff !important;
  }
  table, th, td {
    border-color: #000000 !important;
    color: #000000 !important;
  }
  .badge {
    border: 1px solid #000000 !important;
    color: #000000 !important;
  }
}

/* Badge & Waiver Manager Styles */
.badge-waived {
  background: #fffbeb;
  color: #78350f;
  border: 1px solid #fde68a;
}

.badge-reversed {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}

/* Our "date card" fields draw their own calendar icon and open the picker via the wrapping
   div's onclick (the input itself is pointer-events:none), so the browser's native calendar
   icon is dead weight — worse, its default background doesn't follow our card's own color and
   shows up as a mismatched patch on darker cards. Hide it; nothing is lost since it never
   worked anyway. */
.card-date-input::-webkit-calendar-picker-indicator {
  display: none;
}

/* The waiver/reversal register's category pill was wrapping onto two lines in its narrow
   column and, at that size, dominated the row visually — keep it compact and on one line. */
#waiver-audit-main-table .badge {
  white-space: nowrap;
  font-size: 10.5px;
  padding: 2px 7px;
}

.waiver-tab-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.waiver-tab-btn.active {
  background: #78350f;
  color: #ffffff;
  border-color: #78350f;
  box-shadow: 0 2px 6px rgba(120, 53, 15, 0.25);
}

/* Sample text inside empty boxes (placeholders): fully opaque and darker so it is easy to read, still lighter than typed text */
input::placeholder,
textarea::placeholder {
  color: #d1d5db;
  opacity: 1;
}

/* View as (admin looks at a flat, look-only) */
.view-as-bar { position: sticky; top: 0; z-index: 200; background: #78350f; color: #fff; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.view-as-bar button { background: #fff; color: #78350f; border: 0; border-radius: 6px; padding: 5px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
body.viewing-as .sidebar { top: var(--vb, 40px); height: calc(100vh - var(--vb, 40px)); }
body.viewing-as .top-header { top: var(--vb, 40px); }
/* One login, several panels */
.panel-switch { display: flex; align-items: center; gap: 8px; }
.panel-switch .panel-who { font-size: 12px; color: var(--text-muted, #64748b); white-space: nowrap; }
.seg-switch { display: inline-flex; border: 1px solid #d4d4d8; border-radius: 8px; overflow: hidden; background: #fff; }
.seg-switch button { border: 0; background: transparent; padding: 6px 12px; font-size: 12.5px; cursor: pointer; color: #18181b; }
.seg-switch button.on { background: #78350f; color: #fff; font-weight: 700; }
.panel-strip { display: none; }
/* The switch is never in the header: a slim one-line strip under it at every width (a phone stacks it), 2026-10-05 */
.panel-switch-desk { display: none; }
.panel-strip { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 16px; background: #fff; border-bottom: 1px solid var(--border); }
.panel-strip .seg-switch { display: inline-flex; }
.panel-strip .seg-switch button { padding: 5px 14px; }
@media (min-width: 1221px) { .panel-strip { padding: 6px 24px; } }
@media (max-width: 640px) {
  .panel-strip { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 14px; }
  .panel-strip .seg-switch { display: flex; }
  .panel-strip .seg-switch button { flex: 1; }
}
/* Rates page: two real columns (each its own stack), not a grid — a grid left an empty hole
   under a short card whenever its row-neighbour was much taller. One column on a narrow screen. */
.rate-cols { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.rate-col { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  .rate-cols { flex-direction: row; align-items: flex-start; }
  .rate-col { flex: 1 1 0; min-width: 0; }
}
/* Maintenance settings cards in the society's amber theme */
/* Loading outline (YouTube-style shimmer, admin 2026-10-10): grey shapes of the page with a moving shine */
.sg-skel { padding: 4px 2px; }
.sg-sk { background: #eceae4; border-radius: 6px; position: relative; overflow: hidden; }
.sg-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); animation: sgShimmer 1.3s infinite; }
@keyframes sgShimmer { 100% { transform: translateX(100%); } }
.sg-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
@media (max-width: 600px) { .sg-skel-grid > .sg-skel-card:nth-child(n+4) { display: none; } }
.sg-skel-card { border: 1px solid #fde68a; border-left: 4px solid #fcd34d; border-radius: 0 12px 12px 0; background: #fff; padding: 12px; }
.sg-skel-row { display: flex; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid #fef3c7; }
@media (prefers-reduced-motion: reduce) { .sg-sk::after { animation: none; } }
.ms-card { border: 1px solid #fde68a; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 1px 3px rgba(146, 64, 14, 0.08); }
.ms-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 18px; background: linear-gradient(135deg, var(--primary-light), #fef3c7); border-bottom: 1px solid #fde68a; }
.ms-card-icon { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 2px 6px var(--primary-glow); }
.ms-card-title { font-size: 15px; font-weight: 800; color: var(--primary-dark); }
.ms-card-body { padding: 8px 18px 16px; }
.ms-card-note { font-size: 11.5px; color: #78716c; line-height: 1.5; margin: 2px 0 8px; }
.ms-head { background: var(--primary-light); color: var(--primary-dark) !important; border-radius: 8px; border-bottom: 0 !important; padding: 7px 8px !important; margin-top: 4px; }
.ms-head > span { white-space: nowrap; }
.ms-row { padding-left: 8px !important; padding-right: 8px !important; border-bottom-color: #fef3c7 !important; transition: background 0.15s; }
.ms-row:hover { background: #fffdf5; }
.btn.ms-btn { border-color: var(--primary) !important; color: #b45309 !important; background: #fff; }
.btn.ms-btn:hover { background: var(--primary-light); }
.btn.ms-add { border: 1.5px dashed var(--primary) !important; color: #b45309 !important; background: var(--primary-light) !important; }
.btn.ms-add:hover { background: #fef3c7 !important; }
/* ઠરાવ (resolutions): amber cards, popup header, note */
.res-card { border: 1px solid #fde68a; border-radius: 12px; background: #fff; padding: 12px 14px; box-shadow: 0 1px 3px rgba(146, 64, 14, 0.06); transition: background 0.15s; }
.res-card:hover { background: #fffdf5; }
.res-card-title { font-weight: 800; font-size: 14px; color: var(--primary-dark); }
.res-tag { font-size: 10px; font-weight: 700; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; padding: 1px 8px; border-radius: 6px; }
.res-no { font-size: 11px; color: #b45309; font-weight: 700; margin-top: 2px; }
.res-meta { font-size: 11px; color: #78716c; margin-top: 8px; padding-top: 7px; border-top: 1px dashed #fde68a; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.btn.res-del { border: 1px solid #fecaca !important; color: #dc2626 !important; background: #fff; }
.btn.res-del:hover { background: #fef2f2; }
.res-modal-head { border-radius: 12px 12px 0 0; padding: 14px 18px !important; justify-content: space-between; }
.res-modal-close { background: none; border: none; color: #b45309; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.res-note { display: flex; align-items: flex-start; gap: 8px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: #92400e; margin-bottom: 12px; }
.res-note i { color: #d97706; margin-top: 1px; }
.res-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* rate tiles in the મેન્ટેનન્સ ફેરફાર ઇતિહાસ popup: 4 per row, 2 on phone */
.mh-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 600px) { .mh-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .res-head-btns { width: 100%; flex-wrap: nowrap; }
  .res-head-btns .btn { flex: 1 1 0; justify-content: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
}
/* Late fee calculator (lfc-*): one screen on desktop/tablet, no sideways scroll; month rows become cards on phones */
.lfc { max-width: 880px; margin: 0 auto; }
.lfc-rule { font-size: 12px; color: #78716c; margin-top: 1px; }
.lfc-body { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.lfc-inputs { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 10px; }
.lfc-bills { font-size: 12.5px; font-weight: 700; color: #b45309; margin-top: -4px; }
.lfc-bills:empty { display: none; }
.lfc-warn { padding: 10px 14px; border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: 13px; font-weight: 600; }
.lfc-inputs .form-control { width: 100%; min-width: 0; }
.lfc-inputs { align-items: end; }
.lfc-inputs select.form-control { height: 56px; border: 1.5px solid #fde68a; border-radius: 10px; background-color: #fffdfa; font-weight: 800; color: #18181b; }
.lfc-datecard { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #fffdfa; border: 1.5px solid #fde68a; border-radius: 10px; cursor: pointer; min-width: 0; }
.lfc-datecard:hover { border-color: var(--primary); }
.lfc-datecard-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.lfc-datecard .card-date-input { border: none; background: transparent; padding: 0; width: 100%; font-size: 15px; font-weight: 800; color: #18181b; cursor: pointer; pointer-events: none; font-family: inherit; }
.lfc-friendly { font-size: 11.5px; font-weight: 700; color: #b45309; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfc-label { display: block; font-size: 12px; font-weight: 700; color: #78716c; margin-bottom: 3px; }
.lfc-tr { display: grid; grid-template-columns: 1.1fr 2fr 0.9fr; gap: 8px; align-items: center; padding: 7px 10px; font-size: 13.5px; border-bottom: 1px solid #fef3c7; }
.lfc-th { background: var(--primary-light); color: var(--primary-dark); border-radius: 8px; border-bottom: 0; font-size: 12.5px; font-weight: 800; }
.lfc-th > span:last-child, .lfc-tot { text-align: right; }
.lfc-m { font-weight: 700; }
.lfc-detail { color: #57534e; }
.lfc-detail small { display: block; font-size: 11.5px; color: #78716c; }
.lfc-tot { font-weight: 800; color: #b45309; }
.lfc-lf { margin-top: 4px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; }
.lfc-lf.has { border-color: #fecaca; background: #fef2f2; }
.lfc-lf.has .lfc-m, .lfc-lf.has .lfc-tot { color: var(--danger); }
.lfc-total { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; padding: 9px 14px; background: #fef3c7; border: 1px solid #fde68a; border-radius: 10px; color: #92400e; font-size: 13px; }
.lfc-total b { font-size: 20px; font-weight: 800; color: #b45309; }
.lfc-note { margin-top: 8px; font-size: 12.5px; color: #78716c; text-align: center; line-height: 1.5; }
/* U52: side menu open on a narrow computer screen – રહેવાસી gets its own row so "માલિક (₹1,200)" and "· આજે" are not cut */
@media (min-width: 901px) and (max-width: 1000px) {
    .lfc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lfc-inputs > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .lfc-body { padding: 10px 12px 14px; gap: 10px; }
    .lfc-rule { font-size: 11px; }
    .lfc-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .lfc-inputs .form-control { padding-left: 8px; padding-right: 6px; font-size: 13px; }
    .lfc-inputs > div { grid-column: 1 / -1; }
    .lfc-datecard { padding: 6px 8px; gap: 7px; }
    .lfc-inputs select.form-control { height: 46px; }
    .lfc-datecard-icon { width: 26px; height: 26px; font-size: 12px; }
    .lfc-datecard .card-date-input { font-size: 13.5px; }
    .lfc-friendly { font-size: 11px; }
    .lfc-body { gap: 8px; }
    .lfc-label { margin-bottom: 2px; }
    .lfc-inputs { gap: 6px; }
    .lfc-bills { margin-top: 0; }
    .lfc-bills-tail { display: none; }
    .lfc-tr { padding: 6px 10px; margin-bottom: 5px; }
    .lfc-note { margin-top: 6px; font-size: 11.5px; }
    .lfc-bills { font-size: 11.5px; }
    .lfc-th { display: none; }
    .lfc-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; margin-bottom: 6px; border: 1px solid #fde68a; border-radius: 10px; }
    .lfc-m { grid-row: 1; grid-column: 1; }
    .lfc-tot { grid-row: 1; grid-column: 2; }
    .lfc-detail { grid-row: 2; grid-column: 1 / -1; font-size: 12px; color: #78716c; }
    .lfc-tr:not(.lfc-lf) .lfc-detail { display: none; }
    .lfc-lf { margin-top: 0; }
    .lfc-total { margin-top: 4px; }
    .lfc-total-sub { font-size: 11.5px; }
}
/* Rojmel "Table" view: day-grouped table (desktop / tablet), one card per entry on phones */
.rj-card .ms-card-head { gap: 8px; }
.rj-table-wrap { overflow-x: auto; }
.rj-table { width: 100%; min-width: 780px; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.rj-table th { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 11.5px; padding: 7px 8px; text-align: left; border-bottom: 1px solid #fde68a; white-space: nowrap; }
.rj-table th.rj-grp { text-align: center; border-bottom: 1px solid #fcd34d; }
.rj-table td { padding: 7px 8px; border-bottom: 1px solid #fef3c7; vertical-align: top; }
.rj-table .rj-sep { border-left: 2px solid #d97706; } /* thicker line before રોકડ, between રોકડ and બેંક, and after બેંક (admin: no colour, just a thicker line) */
.rj-n { text-align: right !important; white-space: nowrap; font-weight: 700; }
.rj-in { color: #1d4ed8; font-weight: 800; }
.rj-out { color: #b91c1c; font-weight: 800; }
.rj-name { font-weight: 700; color: #18181b; overflow-wrap: anywhere; }
.rj-sub { font-size: 11.5px; color: #71717a; line-height: 1.45; overflow-wrap: anywhere; }
.rj-mode { font-size: 11.5px; color: #52525b; font-weight: 600; }
.rj-ref { display: inline-flex; align-items: center; gap: 3px; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; font-weight: 700; font-size: 11px; padding: 2px 6px; border-radius: 5px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; text-decoration: none; white-space: nowrap; }
.rj-ref i { font-size: 8px; }
.rj-ref-v { background: #fef2f2; color: #b91c1c; border-color: #fecdd3; }
.rj-del { background: none; border: 1px solid #fee2e2; color: #dc2626; border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.rj-row:hover td { background: #fffdf5; }
.rj-day td { background: #fafaf9; color: #92400e; font-weight: 800; font-size: 12px; padding: 6px 8px; }
.rj-open td { background: #f8fafc; font-weight: 700; color: #475569; }
.rj-total td { background: #fafaf9; font-weight: 800; border-top: 2px solid #e4e4e7; }
.rj-close td { background: #fffbeb; color: #b45309; font-weight: 800; border-top: 1.5px solid #fde68a; }
/* Cash Register tables (દૈનિક તારીખવાર હિસાબ, જમા વાઉચર્સ): full width, amber heading band, fixed columns;
   used with "data-table table-cards-mobile" so a phone shows one card per row */
.cr-wrap { border: 1px solid #fde68a; border-radius: 12px; overflow-x: auto; background: #fff; }
.cr-table { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; font-size: 13px; }   /* narrower: scrolls inside .cr-wrap */
.cr-table th { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 11.5px; padding: 9px 10px; text-align: left; border-bottom: 1px solid #fde68a; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.cr-table td { padding: 8px 10px; border-bottom: 1px solid #fef3c7; vertical-align: middle; color: #18181b; }
.cr-table tbody tr:hover td { background: #fffdf5; }
.cr-table .cr-n { text-align: right; white-space: nowrap; font-weight: 700; }
.cr-table .cr-c { text-align: center; }
.cr-dash { color: #a1a1aa; font-weight: 400; }
.cr-name { font-weight: 700; overflow-wrap: anywhere; }
.cr-badge { display: inline-block; font-size: 10.5px; font-weight: 700; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; border-radius: 5px; padding: 1px 6px; white-space: nowrap; margin-left: 4px; }
.cr-table tr.cr-detail td { background: #fafaf9; }
.cr-vno { font-size: 12px; white-space: nowrap; letter-spacing: -0.2px; }   /* DEP-YYYYMMDD-001 on one line */
/* Voucher status: text + small ✓ / રદ buttons on one line */
.cr-st { display: flex; align-items: center; justify-content: space-between; gap: 6px; white-space: nowrap; }
.cr-st-btns { display: inline-flex; gap: 4px; }
.cr-st-sub { font-size: 11px; color: #71717a; margin-top: 2px; white-space: normal; }
.cr-act { font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.4; padding: 1px 8px; border-radius: 6px; cursor: pointer; }
.cr-act-no { background: #fff1f2; color: #dc2626; border: 1px solid #fecdd3; }
.cr-act-ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.cr-act:hover { filter: brightness(0.96); }
@media (max-width: 640px) { .cr-st { justify-content: flex-end; } }
.cr-table.cr-table-ft { min-width: 600px; }   /* transfer register; a phone gets cards */
@media (max-width: 640px) { .cr-table.cr-table-ft { min-width: 0; } .cr-ft-cell { text-align: right; min-width: 0; flex: 1; } }
/* transfer register on a phone: compact 3-line cards (admin 2026-10-03) */
.ft-mlist { display: none; }
@media (max-width: 640px) {
  .cr-ftwrap { display: none; }
  .ft-mlist { display: block; }
  .ft-m { background: #fff; border: 1px solid #e7e5e4; border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; }
  .ft-m-c { opacity: 0.6; }
  .ft-m-c .ft-m-no { text-decoration: line-through; }
  .ft-m-r1, .ft-m-r3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .ft-m-r1 b { white-space: nowrap; font-size: 14px; }
  .ft-m-no { font-size: 12px; font-weight: 800; color: #92400e; }
  .ft-m-d { font-size: 11.5px; color: #71717a; }
  .ft-m-r2 { font-size: 12.5px; font-weight: 700; color: #18181b; margin-top: 2px; overflow-wrap: anywhere; }
  .ft-m-r3 { font-size: 11px; color: #71717a; margin-top: 2px; }
  .ft-m-r3 > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ft-m-st { white-space: nowrap; font-weight: 700; }
  .ft-m-ok { color: #15803d; }
  .ft-m-x { color: #dc2626; }
}
/* Dashboard society balance card (admin 2026-10-03): four authorities only */
.sb-card { background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.sb-hd { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #78350f; margin-bottom: 8px; font-size: 14px; }
.sb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.sb-bx { background: #fff; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 12px; min-width: 0; cursor: pointer; }
.sb-tot { background: #fef3c7; cursor: default; }
.sb-l { font-size: 12px; font-weight: 700; color: #92400e; }
.sb-v { font-size: 21px; font-weight: 800; color: #18181b; line-height: 1.25; white-space: nowrap; }
.sb-s { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #78350f; border-top: 1px dashed #fde68a; padding-top: 3px; margin-top: 3px; }
.sb-s span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb-s span:last-child { white-space: nowrap; flex-shrink: 0; font-weight: 700; }
.sb-lines-ph { display: none; }
.sb-lines-ph .sb-s:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 600px) {
  .sb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sb-tot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .sb-v { font-size: 18px; }
  .sb-lines-in { display: none; }
  .sb-lines-ph { display: block; grid-column: 1 / -1; padding: 6px 12px; }
}
/* GL-14 transfer form: 4 type buttons on top (2×2 on a phone), boxes in two columns */
.ft-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.ft-fixed { border: 1px solid #e7e5e4; background: #fafaf9; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; min-height: 38px; }
.ft-bal { font-size: 12.5px; font-weight: 800; color: #15803d; margin-top: 4px; min-height: 17px; }
.ft-bal.neg { color: #b91c1c; }
.ft-kind { font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 8px 6px; border-radius: 8px; border: 1.5px solid #f59e0b; background: #fffbeb; color: #92400e; cursor: pointer; line-height: 1.25; }
.ft-kind.on { background: #f59e0b; color: #fff; border-color: #d97706; }
.ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.ft-grid .form-group { margin-bottom: 10px; min-width: 0; }
@media (max-width: 560px) { .ft-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ft-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .cr-wrap { border: 0; background: transparent; overflow: visible; }
  .cr-table { min-width: 0; }
  .cr-table .cr-n, .cr-table .cr-c { text-align: right; }
  .cr-table tr.cr-detail td::before { content: none; }
}
/* સળંગ પત્રક month-wise rows: month heading, month total, શ્રી પુરાંત (full amber line) */
.rj-month td { background: #78350f; color: #fef3c7; font-weight: 800; font-size: 12.5px; padding: 7px 10px; }
.rj-mtotal td { background: #fafaf9; font-weight: 800; border-top: 1.5px solid #d6d3d1; }
.rj-purant td { background: #fef3c7; color: #92400e; font-weight: 800; border-top: 1.5px solid #d97706; border-bottom: 2px solid #fde68a; }
.rj-cmonth { background: #78350f; color: #fef3c7; font-weight: 800; font-size: 13px; border-radius: 9px; padding: 7px 11px; margin: 14px 0 6px; }
.rj-cmopen { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.rj-cpurant { background: #fef3c7; border: 1px solid #d97706; color: #92400e; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.6; margin-top: 6px; }
.rj-empty { text-align: center; padding: 26px 12px !important; color: #71717a; }
.rj-cards { display: none; padding: 10px 12px 12px; }
.rj-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 6px; }
.rj-sum-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; font-size: 12px; color: #334155; line-height: 1.6; }
.rj-sum-close { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.rj-sum-t { font-size: 11px; font-weight: 800; }
.rj-cday { color: #92400e; font-weight: 800; font-size: 12.5px; margin: 10px 2px 5px; }
.rj-c { border: 1px solid #fde68a; border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; background: #fff; }
.rj-c-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 760px) {
  .rj-table-wrap { display: none; }
  .rj-cards { display: block; }
}
/* Rojmel summary cards: રોકડ / બેંક boxes */
.rj-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; position: relative; }
.rj-split-box { background: rgba(255,255,255,0.14); border-radius: 9px; padding: 6px 9px; min-width: 0; }
.rj-split-l { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.88); }
.rj-split-v { font-size: 15px; font-weight: 800; color: #ffffff; overflow-wrap: anywhere; }
/* Rojmel top – compact filter bar + 4 summary cards (GL-1, 2026-09-29) */
.rjf { background: linear-gradient(135deg,#0f172a 0%,#1e293b 100%); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; }
.rjf-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rjf-dates { display: flex; align-items: center; gap: 8px; flex: 1 1 420px; min-width: 0; max-width: 560px; }
.rjf-card { cursor: pointer; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 5px 10px; flex: 1; min-width: 0; }
.rjf-ic { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.rjf-lbl { font-size: 10px; font-weight: 700; color: #fbbf24; }
.rjf-input { border: none; background: transparent; padding: 0; font-size: 14px; font-weight: 800; color: #f8fafc; width: 100%; cursor: pointer; pointer-events: none; color-scheme: dark; line-height: 1.25; }
.rjf-friendly { font-size: 10.5px; font-weight: 700; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rjf-arrow { color: #64748b; font-weight: 800; flex-shrink: 0; }
.rjf-btns { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.rjf-gap { flex: 1; }
.rjf-go { background: linear-gradient(135deg,#f59e0b,#d97706); color: #1c1917; border: none; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.rjf-q { background: rgba(255,255,255,0.07); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.rjf-row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.07); }
.rjf-v { border: 1px solid; border-radius: 8px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rjf-counts { display: flex; align-items: center; gap: 8px; font-size: 11.5px; white-space: nowrap; }
.rjc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.rjc { border-radius: 12px; padding: 10px 12px; color: #fff; min-width: 0; box-shadow: 0 3px 10px rgba(15,23,42,0.14); }
.rjc-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 14px; }
.rjc-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rjc-amt { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.3px; line-height: 1.35; overflow-wrap: anywhere; }
.rjc .rj-split { margin-top: 6px; gap: 6px; }
.rjc .rj-split-box { padding: 4px 8px; }
.rjc .rj-split-v { font-size: 14px; }
@media (max-width: 1100px) { .rjc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .rjf { padding: 8px; border-radius: 12px; }
    .rjf-dates { flex-basis: 100%; max-width: none; gap: 6px; }
    .rjf-arrow, .rjf-ic, .rjf-gap, .rjf-long { display: none; }
    .rjf-card { padding: 5px 8px; }
    .rjf-btns { flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
    .rjf-go { padding: 5px 11px; }
    .rjc-grid { gap: 6px; margin-bottom: 12px; }
    .rjc { padding: 8px 9px; }
    .rjc-top i { display: none; }
    .rjc-amt { font-size: 16px; }
    .rjc .rj-split { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .rjc .rj-split-box { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 2px 6px; }
    .rjc .rj-split-l { font-size: 10.5px; }
    .rjc .rj-split-v { font-size: 12.5px; }
}
/* Rojmel "આવક–જાવક મેળ" on a phone / tablet: one card per day (the 12-column table is hidden) */
.rjt-cards { display: none; padding: 10px 10px 12px; background: #fffbeb; }
.rjt-day { background: #fff; border: 1px solid #fde68a; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.rjt-date { color: #92400e; font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.rjt-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #fef3c7; font-size: 12.5px; }
.rjt-open { color: #1d4ed8; font-weight: 800; }
.rjt-side { font-size: 11px; font-weight: 800; margin: 8px 0 0; padding: 2px 8px; border-radius: 6px; display: inline-block; }
.rjt-side-in { background: #eff6ff; color: #1d4ed8; }
.rjt-side-out { background: #fef2f2; color: #b91c1c; }
.rjt-bank { color: #64748b; font-size: 11px; font-weight: 600; }
.rjt-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #334155; padding: 7px 0 4px; border-top: 1px solid #e4e4e7; margin-top: 6px; }
.rjt-close { background: #fef3c7; color: #92400e; font-weight: 800; border-radius: 8px; padding: 7px 10px; border-bottom: none; }
@media (max-width: 1024px) {
  .rjt-table-wrap { display: none; }
  .rjt-cards { display: block; }
}
/* Member home (મારો ફ્લેટ): status card, quick links, month-wise table, receipts */
.mh-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 1000px) { .mh-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
.mh-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* one column (phone / tablet): status → links → months → charges → receipts */
@media (max-width: 999px) {
  .mh-grid { display: flex; flex-direction: column; align-items: stretch; }
  .mh-col { display: contents; }
  .mh-o1 { order: 1; } .mh-o2 { order: 2; } .mh-o3 { order: 3; } .mh-o4 { order: 4; } .mh-o5 { order: 5; }
}
.mh-nowrap { white-space: nowrap; }
.mh-card { margin: 0; }
.mh-hero { background: linear-gradient(135deg, #78350f 0%, #92400e 100%); color: #fef3c7; border-radius: 14px; padding: 14px 16px; }
.mh-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mh-hero-hi { font-size: 12px; color: #fde68a; }
.mh-hero-name { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.35; overflow-wrap: anywhere; }
.mh-hero-btn { background: transparent; color: #fef3c7; border: 1px solid rgba(254, 243, 199, 0.4); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.mh-hero-status { margin-top: 12px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 10px 12px; }
.mh-hero-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mh-hero-amt { font-size: 26px; font-weight: 900; color: #fff; line-height: 1.2; }
.mh-hero-pend { margin-top: 8px; font-size: 12.5px; color: #fef3c7; font-weight: 700; overflow-wrap: anywhere; }
.mh-hero-note { margin-top: 2px; font-size: 11.5px; color: #fde68a; }
.mh-pay-btn { margin-top: 10px; width: 100%; background: #fbbf24; color: #78350f; border: none; border-radius: 10px; padding: 9px 12px; font-weight: 800; font-size: 13.5px; cursor: pointer; }
.mh-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #f4f4f5; color: #52525b; white-space: nowrap; }
.mh-chip-ok { background: #dcfce7; color: #166534; }
.mh-chip-due { background: #fee2e2; color: #b91c1c; }
.mh-chip-pend { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.mh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mh-tiles button { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fff; border: 1px solid #fde68a; border-radius: 12px; padding: 9px 4px; font-size: 12px; font-weight: 700; color: #57534e; cursor: pointer; }
.mh-tiles button i { font-size: 18px; color: #b45309; }
/* U30: member home – this month's આવક / જાવક / સીલક */
.mh-mie-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 14px 14px; }
.mh-mie-grid > div { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 7px 8px; text-align: center; min-width: 0; }
.mh-mie-grid span { display: block; font-size: 11px; font-weight: 700; color: #92400e; }
.mh-mie-grid b { display: block; font-size: 14px; font-weight: 800; color: #18181b; overflow-wrap: anywhere; }
.mh-mie-grid b.mh-neg { color: #b91c1c; }
.mh-mie-month { display: block; font-size: 11px; font-weight: 600; color: #78716c; line-height: 1.2; }
.mh-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #fef3c7; }
.mh-row-main { flex: 1; min-width: 0; }
.mh-row-amt { font-weight: 800; white-space: nowrap; }
.mh-row-end { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mh-strong { font-weight: 700; color: #18181b; font-size: 13px; overflow-wrap: anywhere; }
.mh-sub { font-size: 11.5px; color: #71717a; overflow-wrap: anywhere; }
.mh-link { background: none; border: 1px solid #bfdbfe; color: #1d4ed8; border-radius: 8px; padding: 2px 9px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.mh-empty { padding: 16px 14px; color: #71717a; font-size: 13px; }
.mh-thead, .mh-mrow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 8px; align-items: center; padding: 8px 14px; }
.mh-thead { background: var(--primary-light); color: var(--primary-dark); font-size: 11.5px; font-weight: 800; }
.mh-mrow { border-bottom: 1px solid #fef3c7; font-size: 13px; }
.mh-n { text-align: right; white-space: nowrap; }
.mh-mtotal { font-weight: 800; }
.mh-lbl { display: none; }
.mh-mfoot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 14px; background: #fffbeb; font-size: 12.5px; color: #78350f; font-weight: 700; }
@media (max-width: 640px) {
  .mh-thead { display: none; }
  .mh-mrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chip" "base total" "late total"; row-gap: 2px; }
  .mh-mname { grid-area: name; }
  .mh-mchip { grid-area: chip; justify-self: end; }
  .mh-mbase { grid-area: base; text-align: left; font-size: 12px; color: #52525b; }
  .mh-mlate { grid-area: late; text-align: left; font-size: 12px; color: #52525b; }
  .mh-mtotal { grid-area: total; align-self: center; font-size: 15px; }
  .mh-lbl { display: inline; font-weight: 600; color: #a1a1aa; }
  .mh-row { flex-wrap: wrap; }
}
/* Testing demo copy (/Society_Demo/): blue strip so it is never mistaken for the real app */
.demo-strip { margin: 10px 16px 0; padding: 7px 12px; background: #eff6ff; color: #1e40af; border: 1px dashed #60a5fa; border-radius: 10px; font-size: 13px; font-weight: 800; text-align: center; }
/* Setup mode (જૂની એન્ટ્રી મોડ): red strip on every page while it is ON */
.setup-mode-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 10px 16px 0; padding: 8px 12px; background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 10px; font-size: 13px; font-weight: 700; }
.setup-mode-banner .btn { background: #fff; color: #b91c1c; border: 1px solid #f87171; font-weight: 700; padding: 3px 10px; font-size: 12px; }
/* wraps a tab onto a second line when the row is too narrow (never hidden off to the side; admin 2026-10-03) */
.setup-tabs { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 2px; border-bottom: 1px solid #fde68a; margin-bottom: 14px; }
.setup-tabs button { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: #71717a; font-weight: 600; font-size: 14px; padding: 8px 2px; white-space: nowrap; cursor: pointer; }
.setup-tabs button.active { border-bottom-color: #b45309; color: #78350f; font-weight: 800; }
/* Advance register tab: phone / tablet (≤1100px, the table would scroll sideways beside the menu) show each flat
   as a small card, wide desktop the table (admin 2026-10-03) */
.adv-ph { display: none; }
@media (max-width: 1100px) {
  .adv-ph { display: block; }
  .adv-ph-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; }
  .adv-ph-list > .adv-bill-row { min-width: 0; }
  .adv-dt { display: none !important; }
}
@media (max-width: 767px) {
  .adv-kpi { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .adv-kpi > div { padding: 8px 10px !important; }
  .adv-kpi > div:nth-child(4) { grid-column: 1 / -1; }
}
/* Phone: all 4 setup tabs visible as a 2×2 grid of amber buttons (admin Option A, 2026-10-03) */
@media (max-width: 767px) {
  .setup-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: none; overflow: visible; }
  .setup-tabs button { white-space: normal; text-align: left; font-size: 13px; line-height: 1.25; padding: 8px 10px; margin: 0;
    border: 1.5px solid #fde68a; border-radius: 10px; background: #fffdfa; color: #78716c; display: flex; align-items: center; gap: 6px; }
  .setup-tabs button.active { background: #fef3c7; border-color: #d97706; color: #78350f; }
}
.setup-step { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid #fef3c7; font-size: 13.5px; }
.setup-step i { font-size: 18px; flex-shrink: 0; }
.setup-check-grid { display: grid; grid-template-columns: minmax(0, 70px) minmax(0, 1fr) minmax(0, 110px) minmax(0, 130px); gap: 8px; }
@media (max-width: 600px) {
  .setup-check-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ms-head.setup-check-grid span:nth-child(n+3) { display: none; }
  .setup-check-row > span:nth-child(3) { text-align: left !important; }
  .setup-check-row > span:nth-child(3)::before { content: 'બાકી: '; font-weight: 600; color: #71717a; }
  .setup-check-row > span:nth-child(4)::before { content: 'મોડી ફી: '; font-weight: 600; color: #71717a; }
  .setup-lf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .setup-lf-row > span:nth-child(4) { grid-column: 1 / -1; }
  .ms-head:has(+ .setup-lf-row), .ms-head:has(+ div + .setup-lf-row) { display: none !important; }
  .setup-step { flex-wrap: wrap; }
  .setup-rate-grid, .tp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .ms-head.setup-rate-grid, .ms-head.tp-grid { display: none !important; }
}
.setup-lock-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.ms-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; font-size: 12px; font-weight: 800; }
/* ================= Head-wise waiver (માફી પહોંચ) ================= */
.wv-modal { max-width: 860px; width: 96%; max-height: 92vh; overflow-y: auto; border-radius: 14px; }
.wv-head { background: linear-gradient(135deg, var(--primary-light), #fef3c7); border-bottom: 1px solid #fde68a; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-radius: 14px 14px 0 0; }
.wv-head-title { font-size: 16px; font-weight: 800; color: var(--primary-dark); }
.wv-head-sub { font-size: 12px; color: #92400e; margin-top: 2px; }
.wv-body { padding: 16px 18px; }
.wv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.wv-table th { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 12px; padding: 8px; text-align: right; white-space: nowrap; }
.wv-table th:first-child { text-align: left; border-radius: 8px 0 0 8px; }
.wv-table th:last-child { border-radius: 0 8px 8px 0; }
.wv-table td { padding: 8px; border-bottom: 1px solid #fef3c7; text-align: right; vertical-align: middle; }
.wv-table td:first-child { text-align: left; font-weight: 700; color: #1c1917; }
.wv-table tfoot td { font-weight: 800; border-bottom: 0; background: #fffbeb; }
.wv-table input.wv-amt { width: 110px; text-align: right; padding: 5px 8px; border: 1.5px solid #fcd34d; border-radius: 7px; font-size: 13.5px; font-weight: 700; }
.wv-table input.wv-amt:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.wv-table input.wv-amt.wv-bad { border-color: #dc2626; background: #fef2f2; }
.wv-ok { color: #15803d; font-weight: 700; }
.wv-adv { color: #1d4ed8; font-weight: 700; }
.wv-err { color: #dc2626; font-size: 12px; font-weight: 700; }
.wv-muted { color: #a8a29e; }
.wv-note { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; font-size: 12.5px; line-height: 1.5; }
.wv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.wv-refund { margin-top: 14px; border: 1.5px dashed #f59e0b; border-radius: 10px; padding: 10px 12px; background: #fffdf5; }
.wv-refund-opts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: 6px; }
.wv-refund-opts label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.wv-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.wv-add-general { margin-top: 8px; font-size: 12px; }
.wv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; background: #fff; border: 1px solid #fde68a; font-size: 12px; font-weight: 700; color: #92400e; }
.wv-chip b { color: #78350f; font-weight: 800; }
.wv-list-row { display: grid; grid-template-columns: 110px 90px 1fr 120px 150px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #fef3c7; font-size: 13px; }
.wv-list-row.wv-list-head { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 12px; border-radius: 8px; border-bottom: 0; }
.wv-list-row.wv-reversed { background: #fafaf9; color: #78716c; }
.wv-list-row .wv-lines { font-size: 12px; color: #57534e; line-height: 1.5; }
.wv-hs { margin: 4px 0 2px; max-width: 260px; border: 1px solid #fcd34d; border-radius: 6px; background: #fffbeb; }
.wv-hs div { display: flex; justify-content: space-between; gap: 8px; padding: 1px 8px; font-size: 11.5px; color: #78350f; }
.wv-hs div.b { border-top: 1px solid #fcd34d; font-weight: 800; color: #451a03; }
.wv-reversed .wv-hs { background: none; border-color: #e7e5e4; }
.wv-reversed .wv-hs div { color: #a8a29e; }
.wv-list-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.wv-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
/* ચાર્જ રજિસ્ટર tab – same table look as the waiver register (2026-09-29) */
.chg-list-row { display: grid; grid-template-columns: minmax(0, 2fr) 90px minmax(190px, 1.2fr) minmax(0, 1.3fr) 215px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #fef3c7; font-size: 13px; }
.chg-list-row.chg-list-head { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 12px; border-radius: 8px; border-bottom: 0; }
.chg-list-row.chg-cancelled { background: #fafaf9; color: #78716c; opacity: .7; }
.chg-list-row .chg-sub { font-size: 11.5px; color: #78716c; margin-top: 2px; }
.chg-status { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.chg-list-row.chg-click { cursor: pointer; }
.chg-list-row.chg-click:hover { background: #fffbeb; }
/* one charge, flat by flat (openChargeFlatsModal) */
.chgf-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 90px 90px minmax(0, 1.6fr); gap: 10px; align-items: center; padding: 9px 10px; border-bottom: 1px solid #fef3c7; font-size: 13px; }
.chgf-row.chgf-head { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 12px; border-radius: 8px; border-bottom: 0; }
@media (max-width: 600px) {
  .chgf-row { grid-template-columns: 1fr 1fr 1fr; border: 1px solid #fde68a; border-radius: 10px; margin-bottom: 8px; background: #fff; }
  .chgf-row.chgf-head { display: none; }
  .chgf-row [data-l] { text-align: left !important; }
  .chgf-row [data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: #78716c; font-weight: 600; }
  .chgf-row > div:first-child { grid-column: 1 / -1; }
  .chgf-how { grid-column: 1 / -1; }
}
/* મારું એકાઉન્ટ (redesign 2026-10-13): top card, grouped rows, popups ("sheets") */
.pf-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
/* phone / tablet: one column as before – the wrappers vanish and લોગઆઉટ goes last */
.pf-side, .pf-main, .pf-col { display: contents; }
.pf-side > .pf-list { order: 99; }
/* computer (admin 2026-10-14, option A): amber card + logout on the left (stays in view), details + security and
   સામાન્ય as two columns on the right */
@media (min-width: 1200px) {
    .pf-wrap { max-width: 1120px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
    .pf-side { display: block; position: sticky; top: 76px; }
    .pf-side > .pf-list { order: 0; }
    .pf-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
    .pf-col { display: block; }
    .pf-col > .pf-grp:first-child { margin-top: 2px; }
}
.pf-hero { background: linear-gradient(160deg, #fef3c7, #fde68a); border: 1px solid #fcd34d; border-radius: 18px; padding: 18px 16px 14px; text-align: center; }
.pf-av { position: relative; width: 68px; height: 68px; margin: 0 auto; }
.pf-av .cm-av { width: 68px !important; height: 68px !important; border: 3px solid #fff; border-radius: 50%; object-fit: cover; }
.pf-initial { width: 68px; height: 68px; border-radius: 50%; background: #451a03; color: #fef3c7; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; border: 3px solid #fff; }
.pf-cam { position: absolute; right: -4px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d97706; background: #fff; color: #b45309; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; padding: 0; }
.pf-name { margin-top: 8px; font-size: 17px; font-weight: 800; color: #451a03; overflow-wrap: anywhere; }
.pf-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.pf-chips span { background: #fff; color: #78350f; border-radius: 10px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pf-stats > div { background: #fff; border-radius: 12px; padding: 8px; }
.pf-stats b { display: block; font-size: 17px; font-weight: 800; color: #451a03; }
.pf-stats b.pf-due { color: #b91c1c; }
.pf-stats span { font-size: 11.5px; color: #92400e; font-weight: 600; }
.pf-grp { font-size: 12.5px; font-weight: 700; color: #78716c; margin: 16px 4px 6px; }
.card.pf-list { padding: 0 !important; overflow: hidden; margin: 0; }
.pf-row, .gen-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-top: 1px solid #f5f5f4; background: none; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; font-family: inherit; }
.pf-list > :first-child { border-top: 0; }
.pf-row:hover, .gen-row:hover { background: #fffbeb; }
.pf-val { font-size: 12px; color: #78716c; font-weight: 600; text-align: right; line-height: 1.35; max-width: 55%; overflow-wrap: anywhere; }
.pf-logout { color: #b91c1c; }
.pf-logout .gen-ic { background: #fee2e2; color: #b91c1c; }
.pf-logout .gen-arrow { display: none; }
.pf-list:has(.pf-logout) { margin-top: 16px; }
.pf-sec { font-size: 13px; font-weight: 800; color: #b45309; border-top: 1px solid #f5f5f4; padding-top: 12px; margin: 14px 0 10px; scroll-margin-top: 8px; }
.pf-sheet { display: none; position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .5); align-items: center; justify-content: center; padding: 12px; }
.pf-sheet.open { display: flex; }
.pf-sheet-box { background: #fff; border-radius: 16px; width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.pf-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #fde68a; background: #fffbeb; color: #78350f; font-size: 15px; }
.pf-sheet-x { background: none; border: 0; font-size: 26px; line-height: 1; color: #78350f; cursor: pointer; padding: 0 4px; }
.pf-sheet-body { padding: 14px 16px 16px; overflow-y: auto; }
/* email confirmed / not confirmed symbol inside the email box (admin 2026-10-14, option D) */
.pf-email-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 1; pointer-events: auto; }
@media (max-width: 600px) {
  .pf-sheet { align-items: flex-end; padding: 0; }
  .pf-sheet-box { border-radius: 18px 18px 0 0; max-height: 92vh; }
}
.gen-ic { width: 34px; height: 34px; border-radius: 10px; background: #fef3c7; color: #b45309; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.gen-ic-ag { background: #eeedfe; color: #3c3489; }
.gen-lb { flex: 1; min-width: 0; }
.gen-arrow { color: #a8a29e; }
/* લૉગિન રજિસ્ટર (2026-10-13) – same table look; a card per login on a phone */
.ll-row { display: grid; grid-template-columns: 150px minmax(0, 1.4fr) 110px 130px 120px; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #fef3c7; font-size: 13px; }
.ll-row.ll-head { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 12px; border-radius: 8px; border-bottom: 0; }
.ll-row .ll-sub { font-size: 11.5px; color: #78716c; margin-top: 2px; }
.ll-badge { border-radius: 10px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) {
  .ll-row { grid-template-columns: 1fr 1fr; border: 1px solid #fde68a; border-radius: 10px; margin-bottom: 8px; background: #fff; }
  .ll-row.ll-head { display: none; }
  .ll-row [data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: #78716c; font-weight: 600; }
  .ll-filters { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .ll-filters .appcal-card { gap: 6px; padding-right: 6px; }
  .ll-filters input.appcal-in { font-size: 14px !important; }
}
/* tablet and phone: each charge is a card – title on top, labelled values below */
@media (max-width: 1024px) {
  .chg-list-row { grid-template-columns: 90px minmax(0, 1.3fr) minmax(0, 1fr) auto; border: 1px solid #fde68a; border-radius: 10px; margin-bottom: 10px; background: #fff; }
  .chg-list-row.chg-list-head { display: none; }
  .chg-list-row .chg-title { grid-column: 1 / -1; }
  .chg-list-row [data-l] { text-align: left !important; }
  .chg-list-row [data-l]::before { content: attr(data-l); display: block; font-size: 11px; color: #78716c; font-weight: 600; }
}
@media (max-width: 700px) {
  .chg-list-row { grid-template-columns: 1fr 1fr; }
  .chg-status { grid-column: 1 / -1; justify-content: flex-start; }
  /* waiver filters: flat + head side by side, the two dates side by side, search full width */
  .wv-filters { grid-template-columns: 1fr 1fr; }
  #wv-f-flat { order: 1; } #wv-f-head { order: 2; } #wv-f-from { order: 3; } #wv-f-to { order: 4; }
  #wv-f-res { order: 5; grid-column: 1 / -1; }
  .wv-filters .form-control { min-width: 0; }
}
@media (max-width: 700px) {
  .wv-body { padding: 12px; }
  .wv-table thead { display: none; }
  .wv-table, .wv-table tbody, .wv-table tfoot, .wv-table tr, .wv-table td { display: block; width: 100%; }
  .wv-table tr { border: 1px solid #fde68a; border-radius: 10px; margin-bottom: 10px; padding: 6px 10px; background: #fff; }
  .wv-table td { border-bottom: 1px dashed #fef3c7; display: flex; justify-content: space-between; align-items: center; padding: 6px 0; text-align: right; }
  .wv-table td:first-child { font-size: 14px; border-bottom: 1px solid #fde68a; }
  .wv-table td[data-l]::before { content: attr(data-l); color: #78716c; font-weight: 600; font-size: 12px; text-align: left; margin-right: 10px; }
  .wv-table td:last-child { border-bottom: 0; }
  .wv-table tfoot tr { background: #fffbeb; }
  .wv-table input.wv-amt { width: 130px; }
  .wv-list-row { grid-template-columns: 1fr 1fr; }
  .wv-list-row.wv-list-head { display: none; }
  .wv-list-row .wv-lines { grid-column: 1 / -1; }
  .wv-list-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ================= ભાડૂઆત યાદી ================= */
.tl-row { display: grid; grid-template-columns: 80px 1.2fr 1.3fr 110px 90px 90px 100px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #fef3c7; font-size: 13px; cursor: pointer; }
.tl-row:hover { background: #fffdf5; }
.tl-row.tl-head { background: var(--primary-light); color: var(--primary-dark); font-weight: 800; font-size: 12px; border-radius: 8px; border-bottom: 0; cursor: default; }
.tl-row.tl-ended { color: #78716c; }
.tl-flat { font-weight: 800; color: #78350f; }
.tl-warn { font-size: 11px; color: #b45309; font-weight: 700; margin-top: 2px; }
.tl-st { font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.tl-st-on { background: #dcfce7; color: #166534; }
.tl-st-off { background: #f5f5f4; color: #57534e; }
@media (max-width: 1100px) {
  .tl-row.tl-head { display: none; }
  .tl-row { grid-template-columns: 1fr; gap: 4px; border: 1px solid #fde68a; border-radius: 10px; margin-bottom: 10px; background: #fff; }
  .tl-row > span[data-l] { display: flex; justify-content: space-between; gap: 10px; text-align: right; }
  .tl-row > span[data-l]::before { content: attr(data-l); color: #78716c; font-size: 12px; font-weight: 600; text-align: left; }
  .tl-flat { font-size: 15px; border-bottom: 1px solid #fde68a; padding-bottom: 4px; }
}
@media (max-width: 1100px) {
  #tl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
  #tl-list .tl-row { margin-bottom: 0; }
}

/* ભાડૂઆત યાદી v2: two filter buttons, block buttons, 5 columns (current) / 6 (left) */
.tl-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tl-seg { display: inline-flex; border: 1.5px solid var(--primary); border-radius: 10px; overflow: hidden; }
.tl-seg button { border: 0; background: #fff; color: #92400e; font-weight: 800; font-size: 13px; padding: 8px 16px; cursor: pointer; font-family: inherit; }
.tl-seg button.on { background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; }
.tl-blocks { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tl-blk { border: 1px solid #fde68a; background: #fff; color: #92400e; font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-family: inherit; min-width: 40px; }
.tl-blk.on { background: #fef3c7; border-color: var(--primary); color: #78350f; }
.tl-search { flex: 1; min-width: 160px; }
.tl-current .tl-row { grid-template-columns: 90px 1.3fr 1.3fr 130px 110px; }
.tl-left .tl-row { grid-template-columns: 90px 1.2fr 1.2fr 120px 100px 100px; }
@media (max-width: 1100px) {
  .tl-current .tl-row, .tl-left .tl-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tl-seg { width: 100%; } .tl-seg button { flex: 1; }
}

/* ================= ખાતાવહી: opened-khata toolbar (period controls + amber band) ================= */
.kt-period { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.kt-seg { display: inline-flex; border: 1.5px solid var(--primary); border-radius: 8px; overflow: hidden; }
.kt-seg button { border: 0; border-right: 1px solid #fcd34d; background: #fff; color: #78350f; font-weight: 700; font-size: 12.5px; padding: 6px 12px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.kt-seg button:last-child { border-right: 0; }
.kt-seg button:hover { background: #fffbeb; }
.kt-seg button.on { background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; }
.kt-range { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #fcd34d; background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 800; color: #78350f; white-space: nowrap; }
.kt-range.custom { border-color: var(--primary); background: #fffbeb; }
.kt-range > i { color: #d97706; }
.kt-date { position: relative; cursor: pointer; border-radius: 5px; padding: 1px 3px; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; }
.kt-date:hover { background: #fef3c7; }
.kt-date input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.kt-arrow { color: #d97706; }
.kt-band { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; }
.kt-name { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.kt-no { background: #78350f; color: #fff; font-weight: 900; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; font-size: 12px; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.kt-title { font-weight: 800; color: #78350f; font-size: 15px; overflow-wrap: anywhere; }
.kt-note { font-size: 12px; color: #92400e; font-weight: 600; margin-top: 1px; }
.kt-stats { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.kt-stat { background: #fff; border: 1px solid #fde68a; border-radius: 8px; padding: 4px 12px; text-align: right; min-width: 112px; }
.kt-stat small { display: block; font-size: 11px; color: #92400e; font-weight: 600; }
.kt-stat b { font-size: 15px; font-weight: 800; color: #18181b; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; white-space: nowrap; }
.kt-stat.kt-ok { background: #dcfce7; border-color: #bbf7d0; } .kt-stat.kt-ok small, .kt-stat.kt-ok b { color: #166534; }
.kt-stat.kt-due { background: #fee2e2; border-color: #fecaca; } .kt-stat.kt-due small, .kt-stat.kt-due b { color: #b91c1c; }
.kt-stat.kt-adv { background: #dbeafe; border-color: #bfdbfe; } .kt-stat.kt-adv small, .kt-stat.kt-adv b { color: #1d4ed8; }
/* Income head khata: month row opener + flat lines (register and phone) */
.kt-grp-btn { margin-top: 4px; border: 1px solid #d97706; background: #fffbeb; color: #78350f; font-weight: 800; font-size: 10.5px; padding: 2px 8px; border-radius: 6px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.kt-grp-btn:hover { background: #fef3c7; }
.kt-grp-row td { background: #fffdf5; font-size: 10.5px; color: #3f3f46; padding: 4px 6px !important; border-bottom: 1px dashed #fde68a; vertical-align: top; }
.kt-grp-row .kt-gn { text-align: right; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; font-weight: 700; border-right: 1px solid #fef3c7; }
.kt-grp-row .kt-gp { text-align: center; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; border-right: 1.5px solid #78350f; }
.kt-grp-row .kt-gd { border-right: 1.5px solid #78350f; line-height: 1.3; }
.kt-grp-row .kt-gm { border-right: 1.5px solid #78350f; }
.kt-grp-row .kt-gt { text-align: center; white-space: nowrap; border-right: 2px solid #78350f; }
.kt-grp-flat { font-size: 9.5px; font-weight: 800; color: #1e3a8a; background: #dbeafe; padding: 0 4px; border-radius: 3px; border: 1px solid #bfdbfe; }
.kt-grp-adv { font-size: 9.5px; font-weight: 800; color: #1d4ed8; background: #dbeafe; padding: 0 5px; border-radius: 4px; }
.kt-grp-sub { font-size: 9.5px; color: #71717a; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; }
.kt-pgrp { margin-top: 6px; border-top: 1px dashed #fde68a; }
.kt-pgrp-item { padding: 6px 0; border-bottom: 1px dashed #fef3c7; }
.kt-pgrp-item:last-child { border-bottom: 0; }
/* Flat card on the khata cards page: the dates its figures cover */
.kt-card-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 6px; padding: 1px 7px; margin-bottom: 6px; }
/* મેન્ટેનન્સ flat cards – compact on phone / tablet (2026-10-02) */
.mt-short, .mt-gear { display: none; }
.mt-chips .btn { gap: 4px; }
@media (max-width: 767px) {
    .mt-head { gap: 8px !important; }
    .mt-head-l { width: 100%; }
    .mt-head .card-title { display: flex; align-items: center; gap: 6px; width: 100%; }
    .mt-gear { display: inline-flex; margin-left: auto; padding: 3px 8px !important; }
    .mt-sub, .mt-long { display: none !important; }
    .mt-short { display: inline; }
    .maint-header-actions { width: 100%; flex-wrap: nowrap !important; gap: 6px !important; }
    .maint-header-actions .btn { flex: 1; justify-content: center; white-space: nowrap; padding: 6px 8px !important; }
    .maint-header-actions .mt-del { flex: 0 0 auto; }
    .mt-filterbar { padding: 8px 10px !important; gap: 7px !important; }
    .mt-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; width: 100%; }
    .mt-chips .btn { flex-shrink: 0; white-space: nowrap; }
    .mt-search { width: 100%; }
    .mt-search input { width: auto !important; flex: 1; min-width: 0; }
    .mt-sort .seg-switch button { padding: 5px 9px; }
    .maint-row { padding: 10px 11px !important; }
    .maint-row .mt-who { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
    .maint-row .mt-name { flex: 1; min-width: 0; }
    .maint-row .mt-phone { flex-shrink: 0; white-space: nowrap; margin-top: 2px; }
    .maint-row .mt-dues { padding: 5px 0 !important; margin-bottom: 6px !important; }
    .maint-row .mt-btns { flex-wrap: nowrap !important; padding-top: 6px !important; }
    .maint-row .mt-btns .mt-lbl { display: none; }
    .maint-row .mt-btns .btn { flex-shrink: 0; }
    .maint-row .mt-btns .btn:first-child { margin-right: auto; }
}
/* Cash Register – compact phone layout + date cards / collector buttons (2026-10-02) */
.cr-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-dates .bbk-dc { min-width: 150px; max-width: 200px; background: #fff; }
.cr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cr-chips .btn { border-radius: 999px; font-size: 12px; font-weight: 700; padding: 3px 11px; }
.cr-mlist { display: none; }
@media (max-width: 767px) {
    .cr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
    .cr-kpis .cr-kpi { padding: 7px 9px !important; min-width: 0; }
    .cr-kpis .cr-kpi:last-child { grid-column: 1 / -1; }
    .cr-kpis .cr-kpi-l { font-size: 11px !important; }
    .cr-kpis .cr-kpi-v { font-size: 16px !important; margin-top: 2px !important; }
    .cr-kpis .cr-kpi-s { display: none; }
    .cr-dates { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .cr-dates .bbk-dc { max-width: none; min-width: 0; }
    .cr-dates .bbk-dc-ic { display: none; }
    .cr-dates > .btn { grid-column: 1 / -1; }
    .cr-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .cr-chips .btn { flex-shrink: 0; white-space: nowrap; }
}
/* Day table → 2-line day cards up to 1220px (tablet, small laptop with the side menu; the table needs 820px), admin 2026-10-05 GL-19 */
@media (max-width: 1220px) {
    .cr-daywrap { display: none; }   /* only the day table: it has its own phone list (.cr-mlist); other tabs show their phone cards */
    .cr-mlist { display: block; }
    .cr-mday { background: #fff; border: 1px solid #e7e5e4; border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; }
    .cr-mrow1 { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; }
    .cr-mname { font-size: 12px; color: #3f3f46; font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cr-mrow2 { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: 11.5px; color: #71717a; margin-top: 3px; }
    .cr-mrow2 b { color: #1d4ed8; font-weight: 800; }
    .cr-mmore { margin-left: auto; background: none; border: none; color: #2563eb; font-weight: 700; font-size: 12px; padding: 0; cursor: pointer; }
    .cr-mdetail { border-top: 1px dashed #e7e5e4; margin-top: 6px; padding-top: 4px; }
    .cr-mitem { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; padding: 3px 0; }
    .cr-mitem b { color: #1d4ed8; white-space: nowrap; }
}
/* Bank Book top – compact layout (2026-10-02) */
.bbk-strip { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #e2e8f0; border-radius: 12px; padding: 9px 14px; margin-bottom: 10px; }
.bbk-info { flex: 1 1 320px; min-width: 0; }
.bbk-name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: #fff; min-width: 0; }
.bbk-name > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bbk-tag { flex-shrink: 0; background: #d97706; color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.bbk-sub { font-size: 11.5px; color: #cbd5e1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbk-sep { color: #64748b; margin: 0 2px; }
.bbk-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.bbk-bal-wrap { text-align: right; }
.bbk-bal-l { font-size: 10.5px; color: #94a3b8; font-weight: 700; }
.bbk-bal { font-size: 21px; font-weight: 900; color: #38bdf8; line-height: 1.2; white-space: nowrap; }
.bbk-fund { font-size: 11px; color: #86efac; white-space: nowrap; }
.bbk-btns { display: flex; gap: 5px; }
.bbk-ib { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bbk-ib-new { color: #fbbf24; border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.1); }
.bbk-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
.bbk-dc { cursor: pointer; display: flex; align-items: center; gap: 8px; background: #fffdfa; border: 1.5px solid #fde68a; border-radius: 10px; padding: 4px 10px; flex: 1; min-width: 0; max-width: 260px; }
.bbk-dc-ic { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.bbk-dc-l { font-size: 10px; font-weight: 700; color: #92400e; }
.bbk-dc-in { border: none; background: transparent; padding: 0; font-size: 14px; font-weight: 800; color: #18181b; width: 100%; cursor: pointer; pointer-events: none; line-height: 1.25; }
.bbk-dc-f { font-size: 10.5px; font-weight: 700; color: #78716c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbk-arrow { color: #a8a29e; font-weight: 800; }
.bbk-go { background: linear-gradient(135deg,#f59e0b,#d97706); color: #1c1917; border: none; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.bbk-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.bbk-box { border: 1px solid; border-radius: 9px; padding: 6px 10px; min-width: 0; }
.bbk-box .l { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbk-box .v { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
    .bbk-strip { padding: 8px 10px; }
    .bbk-info { flex-basis: 100%; }
    .bbk-name { font-size: 13.5px; }
    .bbk-long, .bbk-tag { display: none; }
    .bbk-right { width: 100%; margin-left: 0; justify-content: space-between; }
    .bbk-bal-wrap { text-align: left; }
    .bbk-bal { font-size: 17px; }
    .bbk-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
    .bbk-dc { max-width: none; padding: 4px 8px; }
    .bbk-dc-ic, .bbk-arrow { display: none; }
    .bbk-go { grid-column: 1 / -1; padding: 6px; }
    .bbk-boxes { gap: 5px; }
    .bbk-box { padding: 5px 7px; }
    .bbk-box .v { font-size: 12.5px; }
}
/* Admin dashboard – compact layout (2026-09-29) */
.db-stats { gap: 10px; margin-bottom: 12px; }
.db-stats .stat-card { padding: 10px 12px; }
.db-stats .stat-card-header { margin-bottom: 4px; }
.db-stats .stat-label { font-size: 12px; }
.db-stats .stat-icon-wrapper { width: 28px; height: 28px; font-size: 14px; }
.db-stats .stat-value { font-size: 20px; line-height: 1.3; }
.db-stats .stat-sub { font-size: 11.5px; margin-top: 2px; }
.db-card { padding: 10px 12px !important; margin-bottom: 12px !important; }
.db-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.db-hd b { font-size: 14px; font-weight: 800; color: #18181b; display: inline-flex; align-items: center; gap: 6px; }
.db-hd .btn { font-size: 12px; padding: 4px 10px; }
.db-note { font-size: 11.5px; color: #b45309; font-weight: 600; }
.db-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.db-blk { background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; padding: 7px 10px; cursor: pointer; min-width: 0; transition: border-color .15s; }
.db-blk:hover { border-color: #d97706; }
.db-blk b { font-size: 14px; font-weight: 800; color: #78350f; }
.db-blk-n { font-size: 12px; color: #92400e; font-weight: 600; }
.db-blk-s { font-size: 12px; font-weight: 700; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-rates { display: flex !important; align-items: center; gap: 6px 16px; flex-wrap: wrap; font-size: 12.5px; color: #52525b; background: linear-gradient(135deg, #fafaf9 0%, #fffbeb 100%); }
.db-rates b { color: #92400e; font-weight: 800; }
.db-rates-gap { flex: 1; }
.db-rates-btns { display: flex; gap: 6px; }
.db-rates-btns .btn { font-size: 11.5px; padding: 3px 9px; font-weight: 700; background: #fff; }
.db-row { display: grid; grid-template-columns: 122px 62px minmax(0, 1fr) 100px 92px 78px 190px 100px; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #f4f4f5; font-size: 12.5px; }
.db-row:last-child { border-bottom: 0; }
.db-row-h { font-size: 11px; font-weight: 700; color: #71717a; background: #fafaf9; border-radius: 6px; border-bottom: 0; }
.db-row .c-no.mono { font-weight: 700; color: var(--primary); font-size: 11.5px; }
.db-row .c-flat { font-weight: 800; color: #18181b; }
.db-row .c-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.db-row .c-amt { text-align: right; font-weight: 800; color: #b45309; white-space: nowrap; padding-right: 14px; }
.db-row-h .c-amt { color: #71717a; font-weight: 700; }
/* wide screens: date / mode / status are three grid columns (the c-meta wrapper "dissolves"); two-line layout below keeps them on one line */
.db-row .c-meta { display: contents; }
.db-row .c-meta > .c-date, .db-row .c-meta > .c-mode, .db-row .c-meta > .c-stat { font-size: 11.5px; color: #71717a; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; min-width: 0; }
.db-row .c-meta > .c-sep { display: none; }
.db-row .c-meta .c-stat .db-st { margin-left: 0; max-width: 100%; }
.db-row .c-act { display: flex; gap: 5px; justify-content: flex-end; }
.db-row .c-act .btn { font-size: 11.5px; padding: 3px 9px; }
.db-st { margin-left: 4px; border-radius: 5px; padding: 1px 6px; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1400px) {
    .db-row-h { display: none; }
    .db-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "flat name amt" "no meta act"; gap: 2px 8px; padding: 7px 2px; }
    .db-row .c-flat { grid-area: flat; }
    .db-row .c-name { grid-area: name; }
    .db-row .c-amt { grid-area: amt; padding-right: 0; }
    .db-row .c-no { grid-area: no; }
    .db-row .c-meta { grid-area: meta; display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #71717a; white-space: nowrap; overflow: hidden; min-width: 0; }
    .db-row .c-meta > .c-date, .db-row .c-meta > .c-mode, .db-row .c-meta > .c-stat { display: inline-flex; overflow: visible; }
    .db-row .c-meta > .c-sep { display: inline; }
    .db-row .c-meta .c-stat .db-st { margin-left: 4px; }
    .db-row .c-act { grid-area: act; }
}
@media (max-width: 767px) {
    .db-stats { gap: 6px; }
    .db-stats .stat-card { padding: 8px 10px; }
    .db-stats .stat-icon-wrapper, .db-stats .stat-sub { display: none; }
    .db-stats .stat-value { font-size: 17px; }
    .db-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .db-rates-gap { display: none; }
    .db-row .c-type { display: none; }
    .db-row .c-meta .db-st { max-width: 90px; }
    .db-row .c-meta .db-st-ok, .db-row .c-lbl { display: none; }
    .db-row .c-act .btn { padding: 3px 7px; }
}
/* Khata cards directory – compact layout (GL-1, 2026-09-29) */
.kd-head { background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.kd-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kd-title { font-size: 15px; font-weight: 800; color: #18181b; margin: 0; display: flex; align-items: center; gap: 6px; }
.kd-count { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.kd-acts { margin-left: auto; display: flex; gap: 6px; }
.kd-acts .btn { font-size: 12px; font-weight: 700; padding: 5px 10px; }
.kd-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.kd-stat { border: 1px solid #fde68a; background: #fffbeb; border-radius: 8px; padding: 6px 10px; min-width: 0; }
.kd-stat .l { font-size: 11px; font-weight: 700; color: #92400e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-stat .v { font-size: 15px; font-weight: 800; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; line-height: 1.35; }
.kd-stat .s { font-size: 10.5px; color: #78716c; white-space: nowrap; }
.kd-search { position: relative; margin-top: 10px; }
.kd-search input { padding-left: 34px; padding-right: 32px; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 600; background: #fafafa; }
.kd-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.kd-chips .btn { border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }
.kd-dates { font-size: 12px; font-weight: 700; color: #92400e; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.kd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(235px, 100%), 1fr)); gap: 10px; margin-bottom: 24px; }
.kd-card { background: #fff; border: 1.5px solid #e4e4e7; border-radius: 10px; padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; transition: border-color .15s; min-width: 0; }
.kd-card:hover { border-color: #d97706; }
.kd-row1 { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kd-no { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 28px; height: 28px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #b45309; color: #fff; font-size: 12.5px; font-weight: 800; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; margin-right: 7px; }
.kd-id { font-size: 15px; font-weight: 800; color: #18181b; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; }
.kd-type { font-size: 10px; font-weight: 700; color: #475569; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.kd-name { font-size: 12.5px; font-weight: 700; color: #3f3f46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-figs { display: grid; gap: 4px; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 7px; padding: 4px 8px; }
.kd-figs .l { font-size: 10px; font-weight: 700; color: #64748b; }
.kd-figs .v { font-size: 12.5px; font-weight: 800; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; }
.kd-btns { display: flex; gap: 5px; }
.kd-btns .btn { padding: 4px 8px; font-size: 12px; border-radius: 6px; font-weight: 700; }
@media (max-width: 1100px) { .kd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
    .kd-stats { display: flex; overflow-x: auto; scrollbar-width: none; }
    .kd-stat { flex: 0 0 132px; }
    .kd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .kd-acts .btn .kd-long { display: none; }
    /* Hisabi chopda page header on a phone: title, then year + buttons in ONE row (print / delete list as icons) */
    .acc-hd { gap: 6px 10px !important; }
    .acc-hd h1 { font-size: 19px !important; }
    .acc-hd-acts { flex-wrap: nowrap !important; gap: 6px !important; width: 100%; }
    .acc-hd-acts > div { flex: 1; min-width: 0; }
    .acc-hd-acts select { min-width: 0 !important; flex: 1; width: 100% !important; }
    .acc-hd-btn { padding: 6px 10px !important; }
    .acc-hd-btn .acc-hd-lbl { display: none; }
}
/* Khata print choice (મહિનાવાર / ફ્લેટ વિગત સાથે) inside the app dialog */
.kt-popt { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid #fde68a; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.kt-popt.on { border-color: #d97706; background: #fffbeb; }
.kt-popt input { margin-top: 4px; accent-color: #d97706; }
.kt-popt b { display: block; color: #78350f; font-weight: 800; }
.kt-popt small { display: block; font-size: 11.5px; color: #71717a; margin-top: 2px; }
/* Phone card view of the khata (< 768px); tablet / desktop keep the register */
.kt-phone { display: none; margin-bottom: 16px; }
.kt-switch { display: flex; border: 1.5px solid var(--primary); border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.kt-switch button { flex: 1; border: 0; background: #fff; color: #78350f; font-weight: 800; font-size: 13px; padding: 8px 6px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.kt-switch button.on { background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; }
.kt-c-month { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: #92400e; margin: 12px 2px 6px; }
.kt-c-month::after { content: ''; flex: 1; border-top: 1px dashed #fcd34d; }
.kt-c-card { background: #fff; border: 1px solid #fde68a; border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.kt-c-card.kt-c-open { background: #fffbeb; border-color: #fcd34d; }
.kt-c-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kt-c-title { font-weight: 700; font-size: 13px; color: #18181b; overflow-wrap: anywhere; }
.kt-c-amt { font-weight: 800; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; white-space: nowrap; font-size: 13.5px; }
.kt-c-dr { color: #b91c1c; }
.kt-c-cr { color: #15803d; }
.kt-c-bal .kt-c-cr { color: #1d4ed8; }
.kt-c-tag { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.kt-tag-dr { background: #fee2e2; color: #b91c1c; }
.kt-tag-cr { background: #dcfce7; color: #166534; }
.kt-c-sub { font-size: 11.5px; color: #71717a; margin-top: 2px; line-height: 1.45; overflow-wrap: anywhere; }
.kt-c-sub a { color: #78350f; font-weight: 700; text-decoration: none; }
.kt-c-bal { display: flex; justify-content: space-between; margin-top: 7px; padding-top: 6px; border-top: 1px dashed #fde68a; font-size: 12px; color: #92400e; }
.kt-c-bal b { font-family: 'JetBrains Mono', 'SG Gujarati', monospace; font-weight: 800; }
.kt-c-note { background: #f4f4f5; color: #52525b; border-radius: 10px; padding: 8px 11px; font-size: 12px; margin-bottom: 7px; overflow-wrap: anywhere; }
.kt-c-owner { background: #fef3c7; color: #78350f; border: 1.5px solid #d97706; border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 800; text-align: center; margin: 10px 0; overflow-wrap: anywhere; }
.kt-c-total { background: #78350f; border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.kt-c-total .kt-c-line { color: #fde68a; font-size: 13px; padding: 2px 0; }
.kt-c-total b { color: #fff; font-family: 'JetBrains Mono', 'SG Gujarati', monospace; }
.kt-c-total .kt-c-net { border-top: 1px solid #92400e; margin-top: 4px; padding-top: 6px; }
@media (max-width: 767px) {
  .kt-phone { display: block; }
  .kt-hide-phone { display: none !important; }
}
/* narrower than a wide desktop: dates get their own row; the band stacks name over figures */
@media (max-width: 1199px) {
  .kt-row1 .kt-period { order: 10; flex-basis: 100%; }
}
@media (max-width: 767px) {
  .kt-row1 > .kt-more { order: 1; margin-left: auto; }
  .kt-row1 > .kt-search { order: 2; }
}
@media (max-width: 1023px) {
  .kt-band { flex-wrap: wrap; }
  .kt-name { flex-basis: 100%; }
  .kt-stats { margin-left: 0; width: 100%; }
  .kt-stat { flex: 1; min-width: 0; }
}
@media (max-width: 600px) {
  .kt-row1 .kt-period { flex-direction: column; align-items: stretch; }
  .kt-seg { display: flex; } .kt-seg button { flex: 1; padding: 7px 4px; }
  .kt-range { justify-content: center; }
  .kt-title { font-size: 14px; }
  .kt-stats { gap: 6px; }
  .kt-stat { padding: 4px 6px; }
  .kt-stat b { font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
}

/* ---- Committee page (U12, admin 2026-10-06): light amber bar, office-bearer cards, uniform member cards ---- */
.cm-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.cm-bar-title { font-size: 16px; font-weight: 800; color: #78350f; display: flex; align-items: center; gap: 6px; }
.cm-bar-title i { color: #b45309; }
.cm-term { background: #fff; color: #78350f; border: 1px solid #fcd34d; border-radius: 8px; padding: 4px 8px; font-weight: 800; font-size: 12.5px; max-width: 100%; }
.cm-count { font-size: 12px; color: #92400e; }
.cm-bar-gap { flex: 1; }
.cm-btn { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12.5px; text-decoration: none; }
.cm-btn-main { background: #b45309; border: 1px solid #b45309; color: #fff; }
.cm-btn-main:hover { background: #92400e; color: #fff; }
.cm-more { position: relative; }
.cm-more > summary { list-style: none; cursor: pointer; }
.cm-more > summary::-webkit-details-marker { display: none; }
.cm-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid #e7e5e4; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; min-width: 190px; }
.cm-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #27272a; cursor: pointer; }
.cm-menu button:hover { background: #fef3c7; }
.cm-menu .cm-menu-danger { color: #b91c1c; }
.cm-dissolved { display: flex; gap: 10px; align-items: flex-start; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: 12.5px; }
.cm-empty { text-align: center; padding: 36px 12px; color: #71717a; background: #fff; border: 1px solid #e7e5e4; border-radius: 12px; }
.cm-empty i { font-size: 42px; color: #d4d4d8; }
.cm-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 6px; background: #fef3c7; color: #78350f; white-space: nowrap; }
.cm-chip-post { font-size: 12px; }
.cm-chip-admin { background: #78350f; color: #fff; }
.cm-chip-off { background: #fee2e2; color: #b91c1c; }
.cm-av { border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #f59e0b; background: #fef3c7; }
.cm-av-def { object-fit: contain; background: #fff; padding: 2px; }
.cm-card { background: #fff; border: 1px solid #e7e5e4; border-radius: 12px; min-width: 0; }
.cm-name { font-size: 14px; font-weight: 800; color: #18181b; overflow-wrap: anywhere; }
.cm-sub { font-size: 12px; color: #71717a; overflow-wrap: anywhere; }
.cm-note { font-size: 11.5px; color: #57534e; background: #fafaf9; border-radius: 6px; padding: 5px 8px; margin-top: 8px; }
.cm-calls { display: flex; gap: 6px; flex-shrink: 0; }
.cm-call { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #fcd34d; background: #fffbeb; color: #b45309; text-decoration: none; font-size: 15px; }
.cm-call:hover { background: #fef3c7; }
.cm-call-big { width: 40px; height: 40px; font-size: 17px; }
.cm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; border-top: 1px dashed #e7e5e4; margin-top: 10px; padding-top: 8px; width: 100%; }
.cm-pill { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; border: 1px solid #e4e4e7; background: #f4f4f5; color: #71717a; cursor: pointer; }
.cm-pill.on { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.cm-ib { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #e4e4e7; background: #fff; color: #52525b; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cm-ib:hover { background: #fafaf9; }
.cm-ib-del { color: #b91c1c; border-color: #fecaca; }
.cm-bearers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
/* photo on the left at the top, details beside it (admin 2026-10-06: the centred card took too much space) */
.cm-bearer { border-left: 3px solid #b45309; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.cm-bearer .cm-av { width: 48px !important; height: 48px !important; }
.cm-bearer .cm-body { flex: 1; min-width: 0; }
.cm-bearer .cm-name { font-size: 14.5px; margin-top: 2px; }
.cm-bearer .cm-note { width: 100%; margin-top: 0; }
.cm-bearer .cm-actions { margin-top: 0; }
.cm-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 10px; }
.cm-member { padding: 10px 12px; }
.cm-member .cm-top { display: flex; align-items: center; gap: 10px; }
.cm-member .cm-body { flex: 1; min-width: 0; }
.cm-ext { background: #faf5ff; border-color: #e9d5ff; }
/* U19 pending-payment card (dashboard + maintenance page) */
.pp-card { border: 2px solid #d97706; background: #fffdfa; padding: 10px 12px; margin-bottom: 16px; }
.pp-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; color: #92400e; }
.pp-hd i { color: #d97706; }
.pp-count { background: #dc2626; color: #fff; font-weight: 800; font-size: 11.5px; border-radius: 999px; padding: 1px 9px; }
.pp-note { font-size: 12px; color: #92400e; }
.pp-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px dashed #fde68a; min-width: 0; }
.pp-flat { flex-shrink: 0; color: #18181b; }
.pp-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #27272a; }
.pp-amt { flex-shrink: 0; color: #b45309; }
.pp-det { flex-shrink: 0; font-size: 12.5px; color: #44403c; white-space: nowrap; }
.pp-btn { flex-shrink: 0; background: #2563eb !important; border: none !important; }
@media (max-width: 767px) {
    .pp-row { flex-wrap: wrap; gap: 2px 10px; }
    .pp-name { flex-basis: 0; }
    .pp-det { order: 5; flex: 1 1 100%; white-space: normal; }
    .pp-btn { order: 4; margin-left: auto; }
}

/* U10 owner photos window + top bar photo */
.mp-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #e7e5e4; }
.mp-row:last-child { border-bottom: none; }
.topbar-av-btn { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; border-radius: 50%; }
@media (max-width: 767px) {
    .cm-bar { padding: 8px 10px; }
    .cm-bar-title { font-size: 15px; flex: 1 1 100%; }
    .cm-bar-gap { display: none; }
    .cm-count { flex: 1; min-width: 0; }
    .cm-bearers { grid-template-columns: 1fr; gap: 8px; }
    .cm-bearer .cm-name { font-size: 14px; }
    .cm-members { grid-template-columns: 1fr; gap: 8px; }
    .cm-call { width: 40px; height: 40px; font-size: 17px; }
}

/* =========================================================================================================
   PRINT CENTER – design C (U51, admin 2026-10-12/13 after previews A / B / C)
   ========================================================================================================= */
.pcc-top { position: relative; overflow: hidden; background: linear-gradient(135deg, #451a03 0%, #78350f 45%, #b45309 100%); color: #fff; border-radius: 18px; padding: 18px 18px 16px; margin-bottom: 16px; box-shadow: 0 10px 24px rgba(120, 53, 15, .22); }
.pcc-top::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.2px); background-size: 14px 14px; pointer-events: none; }
.pcc-top::after { content: "\F4FF"; font-family: bootstrap-icons; position: absolute; right: -14px; bottom: -34px; font-size: 150px; color: rgba(255, 255, 255, .07); pointer-events: none; }
.pcc-row { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pcc-tic { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); flex-shrink: 0; }
.pcc-tt b { display: block; font-size: 18px; letter-spacing: .2px; }
.pcc-tt small { color: #fde68a; font-size: 12px; font-weight: 600; }
.pcc-find { margin-left: auto; display: flex; gap: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 6px; }
.pcc-find select, .pcc-find input { border: 0; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; min-width: 0; color: #78350f; font-weight: 700; font-family: inherit; }
.pcc-find input { width: 120px; }
.pcc-find button { border: 0; border-radius: 8px; background: #fbbf24; color: #78350f; font-weight: 800; padding: 0 12px; cursor: pointer; font-family: inherit; }
.pcc-results { position: relative; }
.pcc-results:not(:empty) { margin-top: 8px; background: #fff; border-radius: 10px; padding: 4px; color: #292524; }
.pcc-quick { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.pcc-q { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; border-radius: 12px; padding: 9px 10px; font-weight: 800; font-size: 12.5px; cursor: pointer; text-align: left; transition: background .12s, transform .12s; font-family: inherit; }
.pcc-q i { width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.pcc-q:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.pcc-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.pcc-sec { background: #fff; border: 1px solid #f1e3c4; border-top: 4px solid var(--c); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(146, 64, 14, .07); }
.pcc-hd { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: color-mix(in srgb, var(--c) 7%, #fff); }
.pcc-hic { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 3px 8px color-mix(in srgb, var(--c) 35%, transparent); }
.pcc-ht { font-weight: 800; color: #1c1917; font-size: 14.5px; }
.pcc-n { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--c); background: #fff; border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); border-radius: 999px; padding: 2px 9px; }
.pcc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 14px; }
.pcc-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 13px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c) 4%, #fff)); border: 1px solid #efe6d6; border-radius: 14px; cursor: pointer; text-align: center; transition: transform .14s, box-shadow .14s, border-color .14s; font-family: inherit; }
.pcc-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 20px color-mix(in srgb, var(--c) 18%, transparent); border-color: color-mix(in srgb, var(--c) 45%, #fff); }
.pcc-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 21px; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 30%, transparent); }
.pcc-nm { font-weight: 800; font-size: 12.5px; color: #292524; line-height: 1.25; }
.pcc-sb { font-size: 10.5px; color: #a8a29e; font-weight: 700; margin-top: -4px; }
.pcc-go { position: absolute; top: 8px; right: 9px; font-size: 11px; color: #d6d3d1; transition: color .14s; }
.pcc-tile:hover .pcc-go { color: var(--c); }
.pcc-extra { display: flex; gap: 6px; padding: 0 14px 14px; }
.pcc-extra input { width: 110px; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-family: inherit; }
/* phone / tablet: compact band – title + search in one row, shortcuts one swipe row of chips (admin 2026-10-12) */
@media (max-width: 1000px) {
  .pcc-top { padding: 10px 12px; border-radius: 14px; margin-bottom: 12px; }
  .pcc-top::after { font-size: 90px; bottom: -22px; }
  .pcc-row { flex-wrap: nowrap; gap: 10px; }
  .pcc-tic { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .pcc-tt b { font-size: 15px; }
  .pcc-tt small { display: none; }
  .pcc-find { margin-left: auto; width: auto; padding: 4px; gap: 4px; }
  .pcc-find select { padding: 6px 4px; font-size: 12px; }
  .pcc-find input { width: 90px; padding: 6px 7px; font-size: 12px; }
  .pcc-find button { padding: 0 9px; font-size: 12px; }
  .pcc-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; padding-bottom: 2px; }
  .pcc-quick::-webkit-scrollbar { display: none; }
  .pcc-q { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; font-size: 12px; gap: 6px; white-space: nowrap; }
  .pcc-q i { width: auto; height: auto; background: none; font-size: 13px; }
}
/* phone: no title in the band (the page header says it) and no header search row on this page (admin 2026-10-13) */
@media (max-width: 480px) {
  .pcc-tic, .pcc-tt { display: none; }
  .pcc-top::after { display: none; }
  .pcc-find { width: 100%; margin-left: 0; }
  .pcc-find input { flex: 1; width: auto; }
  .pcc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
}
@media (max-width: 640px) {
  body.pc-page .top-header .header-search { display: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   GL-10 accountant login (admin 2026-10-15): the books are look-only – the add / edit / delete / collect buttons of
   the screens it can see are hidden (the server refuses them too). Header search is off for it.
   --------------------------------------------------------------------------------------------------------------- */
body.acct-mode .top-header .header-search,
body.acct-mode [onclick*="openAddExpenseVoucherModal"], body.acct-mode [onclick*="openAddAccountHeadModal"],
body.acct-mode [onclick*="openReconciliationCheckModal"], body.acct-mode [onclick*="deleteAccountHead"],
body.acct-mode [onclick*="openVendorSettlementModal"], body.acct-mode [onclick*="openBankAccountSettingsModal"],
body.acct-mode [onclick*="openCloseBankAccount"], body.acct-mode [onclick*="deleteExpenseVoucher"],
body.acct-mode [onclick*="openAddSocietyChargeModal"], body.acct-mode [onclick*="openWaiverForm"],
body.acct-mode [onclick*="openWaiverNoteEdit"], body.acct-mode [onclick*="reverseWaiver"],
body.acct-mode [onclick*="openEditWaiverReasonModal"], body.acct-mode [onclick*="openCollectPaymentModal"],
body.acct-mode [onclick*="openAdvancePaymentModal"], body.acct-mode [onclick*="openCancelPaymentModal"],
body.acct-mode [onclick*="openPaidChargeReversalModal"], body.acct-mode [onclick*="openFundTransferModal"],
body.acct-mode [onclick*="openDepositCashModal"], body.acct-mode [onclick*="cancelFundTransfer"],
body.acct-mode [onclick*="openBillGenerationModal"], body.acct-mode [onclick*="startViewAs"] { display: none !important; }

/* bank book: the accountant's tick and note on each line */
.acct-chk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.acct-tick { border: 1.5px solid #fbbf24; background: #fffbeb; color: #92400e; border-radius: 8px; padding: 3px 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; }
.acct-tick:hover { border-color: #d97706; }
.acct-tick.on { background: #dcfce7; border-color: #86efac; color: #166534; }
.acct-note { border: none; background: none; color: #a8a29e; font-size: 15px; padding: 2px 4px; cursor: pointer; position: relative; }
.acct-note.has { color: #b45309; }
.acct-note.wait::after { content: ""; position: absolute; top: 1px; right: 0; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; }

/* notes / questions page */
.an-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid #f5f5f4; cursor: pointer; }
.an-row:hover { background: #fffbeb; }
.an-ic { width: 34px; height: 34px; border-radius: 10px; background: #fef3c7; color: #b45309; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.an-lbl { font-weight: 800; color: #1c1917; overflow-wrap: anywhere; }
.an-sub { font-size: 12px; color: #78716c; margin-top: 2px; overflow-wrap: anywhere; }
.an-badge { font-size: 11px; font-weight: 800; border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
.an-badge.wait { background: #fee2e2; color: #991b1b; }
.an-badge.done { background: #dcfce7; color: #166534; }
.an-msg { border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; max-width: 88%; overflow-wrap: anywhere; }
.an-msg.acct { background: #fffbeb; border: 1px solid #fde68a; }
.an-msg.cm { background: #f0fdf4; border: 1px solid #bbf7d0; margin-left: auto; }
.an-msg .who { font-size: 11.5px; font-weight: 800; color: #57534e; margin-bottom: 2px; }
.an-msg .when { font-size: 10.5px; color: #a8a29e; margin-top: 3px; }

/* downloads page */
.ad-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border-top: 1px solid #f5f5f4; }
.ad-name { font-weight: 800; color: #1c1917; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ad-name i { color: #d97706; font-size: 16px; }
.ad-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ad-btn { border: 1.5px solid #fbbf24; background: #fff; color: #92400e; border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ad-btn:hover { background: #fffbeb; border-color: #d97706; }
.ad-btn.off { border-style: dashed; color: #a8a29e; border-color: #e7e5e4; cursor: default; background: #fafaf9; }
.ad-dates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ad-dates .appcal-card, .ad-dates input { min-width: 150px; }
.ad-btn.main { background: #d97706; border-color: #d97706; color: #fff; }
.ad-btn.main:hover { background: #b45309; border-color: #b45309; }
.ad-btn:disabled { opacity: .6; cursor: default; }
/* GL-10 Part B: Tally lists (changed after export, file history) */
.tl-count { margin-left: auto; background: #fee2e2; color: #991b1b; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 800; }
.tl-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 130px auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid #f5f5f4; font-size: 13px; color: #1c1917; }
.tl-row.hist { grid-template-columns: 130px minmax(0, 1fr) 80px auto; }
.tl-row.head { font-size: 12px; font-weight: 800; color: #92400e; background: #fffbeb; }
.tl-no { font-weight: 800; overflow-wrap: anywhere; }
.tl-amt { text-align: right; font-weight: 800; white-space: nowrap; }
.tl-chip { border-radius: 8px; padding: 2px 8px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.tl-chip.red { background: #fee2e2; color: #991b1b; }
.tl-chip.amber { background: #fef3c7; color: #92400e; }
.tl-chip.grey { background: #f5f5f4; color: #78716c; }
.tl-empty { padding: 12px 14px; color: #78716c; font-size: 13px; border-top: 1px solid #f5f5f4; }
@media (max-width: 560px) {
  .tl-row, .tl-row.hist { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .tl-row.head { display: none; }
  .tl-amt { text-align: left; }
}
@media (max-width: 560px) {
  .ad-row { grid-template-columns: 1fr; }
  .ad-btns { justify-content: flex-start; }
  .ad-dates > * { flex: 1 1 140px; }
}/* the extra check column needs room: below 1100px the accountant's bank register uses the stacked card layout */
@media (max-width: 1100px) {
  body.acct-mode .bbr-wide { display: none; }
  body.acct-mode .bbr-phone { display: block; }
}