/* ============================================================
   HOSTEL MANAGEMENT SAAS — MAIN STYLESHEET
   ============================================================ */

/* === 1. CSS VARIABLES ===================================== */
:root {
  --primary:        #4F46E5;
  --primary-dark:   #3730A3;
  --primary-hover:  #4338CA;
  --primary-light:  #EEF2FF;
  --primary-lighter:#F5F3FF;

  --success:        #10B981;
  --success-light:  #D1FAE5;
  --success-dark:   #059669;

  --warning:        #F59E0B;
  --warning-light:  #FEF3C7;
  --warning-dark:   #D97706;

  --danger:         #EF4444;
  --danger-light:   #FEE2E2;
  --danger-dark:    #DC2626;
  --danger-hover:   #B91C1C;

  --info:           #3B82F6;
  --info-light:     #DBEAFE;

  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  --bg:           #F1F5F9;
  --surface:      #FFFFFF;
  --surface-2:    #F8FAFC;
  --border:       #E2E8F0;
  --border-light: #F1F5F9;
  --text:         #0F172A;
  --text-2:       #475569;
  --text-muted:   #94A3B8;

  --sidebar-width: 256px;
  --sidebar-bg:    #0F172A;
  --header-h:      60px;

  --r-sm:  6px;
  --r:     8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-full:9999px;

  --sh-sm: 0 1px 2px 0 rgb(0 0 0/.05);
  --sh:    0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
  --sh-md: 0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
  --sh-lg: 0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
  --sh-xl: 0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);

  --t: 200ms ease;
  --t-slow: 300ms ease;
}

/* === 2. RESET & BASE ======================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* prevent any element from causing viewport horizontal scroll */
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;}
ul,ol{list-style:none;}
h1,h2,h3,h4,h5,h6{line-height:1.3;font-weight:600;}

/* === 3. LAYOUT ============================================ */
.app-layout{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-width);
  background:var(--sidebar-bg);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;
  z-index:100;
  transition:transform var(--t-slow);
  overflow:hidden;
  will-change:transform; /* GPU layer for smooth slide animation */
}
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-logo{display:flex;align-items:center;gap:10px;}
.sidebar-logo .logo-icon{
  width:36px;height:36px;border-radius:var(--r);
  background:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.sidebar-logo .logo-text{
  font-size:16px;font-weight:700;color:#F1F5F9;
  letter-spacing:-.3px;white-space:nowrap;
}
.sidebar-logo .logo-sub{
  font-size:10px;color:var(--gray-400);display:block;margin-top:-2px;
}
.sidebar-close{
  display:none;background:none;border:none;
  color:var(--gray-400);font-size:22px;cursor:pointer;
  padding:4px;border-radius:var(--r-sm);
  transition:color var(--t);
}
.sidebar-close:hover{color:#fff;}

.sidebar-nav{flex:1;overflow-y:auto;padding:12px 10px;}
.sidebar-nav::-webkit-scrollbar{width:4px;}
.sidebar-nav::-webkit-scrollbar-track{background:transparent;}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;}

.nav-section-title{
  font-size:10px;font-weight:600;letter-spacing:.8px;
  color:var(--gray-500);text-transform:uppercase;
  padding:12px 8px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r);
  color:var(--gray-400);font-size:14px;font-weight:500;
  transition:all var(--t);cursor:pointer;
  white-space:nowrap;min-height:44px;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.4);}
.nav-item .nav-icon{font-size:18px;flex-shrink:0;width:20px;text-align:center;}
.nav-item .nav-badge{
  margin-left:auto;background:var(--danger);color:#fff;
  font-size:10px;font-weight:700;min-width:18px;height:18px;
  border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  padding:0 5px;
}

/* Sidebar footer — hidden; profile moved to top header */
.sidebar-footer{display:none;}

/* ── Header Profile Widget ──────────────────────────────── */
.header-profile{
  position:relative;
  display:flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;
  border-radius:var(--r-full);
  border:1.5px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  user-select:none;
  transition:background var(--t),border-color var(--t);
  flex-shrink:0;
}
.header-profile:hover{background:var(--gray-100);border-color:var(--gray-300);}
.header-profile-avatar{
  width:30px;height:30px;border-radius:var(--r-full);
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;overflow:hidden;
}
.header-profile-avatar img{width:100%;height:100%;object-fit:cover;}
.header-profile-name{
  font-size:13px;font-weight:600;color:var(--text);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.header-profile-caret{font-size:9px;color:var(--text-muted);line-height:1;}

/* Dropdown */
.header-profile-dropdown{
  display:none;
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  min-width:210px;z-index:300;overflow:hidden;
}
.header-profile-dropdown.open{display:block;}
.hpd-info{padding:14px 16px;border-bottom:1px solid var(--border);}
.hpd-info-hostel{font-size:13px;font-weight:700;color:var(--text);}
.hpd-info-email{font-size:11px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;}
.hpd-logout{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:11px 16px;
  background:none;border:none;cursor:pointer;
  color:var(--danger);font-size:13px;font-weight:600;
  transition:background var(--t);text-align:left;
}
.hpd-logout:hover{background:var(--danger-light);}

/* legacy — keep avatar style in case used elsewhere */
.user-avatar{
  width:34px;height:34px;border-radius:var(--r-full);
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex-shrink:0;overflow:hidden;
}
.user-avatar img{width:100%;height:100%;object-fit:cover;}

.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:99;
  backdrop-filter:blur(2px);
}

/* Main Content */
.main-content{
  flex:1;margin-left:var(--sidebar-width);
  min-height:100vh;display:flex;flex-direction:column;
  transition:margin-left var(--t-slow);
  min-width:0; /* critical: prevents flex child from expanding beyond parent */
  overflow-x:hidden; /* clip any overflowing child; table containers still scroll internally */
}

/* Header */
.top-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
  padding:0 24px;
  box-shadow:var(--sh-sm);
}
.menu-toggle{
  display:none;background:none;border:none;
  font-size:22px;cursor:pointer;color:var(--text-2);
  padding:6px;border-radius:var(--r);transition:all var(--t);
  flex-shrink:0;
}
.menu-toggle:hover{background:var(--gray-100);color:var(--text);}
.page-title{font-size:18px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.header-status{
  font-size:12px;font-weight:600;padding:4px 10px;
  border-radius:var(--r-full);
}
.header-status.trial{background:var(--warning-light);color:var(--warning-dark);}
.header-status.active{background:var(--success-light);color:var(--success-dark);}
.header-status.expired{background:var(--danger-light);color:var(--danger-dark);}

/* Page Content */
.page-content{flex:1;padding:24px;min-width:0;overflow-x:hidden;}
.page-content-inner{max-width:1400px;margin:0 auto;min-width:0;}

/* === 4. CARDS ============================================= */
.card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh);border:1px solid var(--border);
  overflow:hidden;
}
.card-header{
  padding:18px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.card-title{font-size:15px;font-weight:700;}
.card-body{padding:20px;}
.card-footer{
  padding:14px 20px;border-top:1px solid var(--border);
  background:var(--surface-2);
}

/* Stat Cards */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;margin-bottom:24px;
}
.stat-card{
  background:var(--surface);border-radius:var(--r-lg);
  padding:14px 16px;border:1px solid var(--border);
  box-shadow:var(--sh);transition:all var(--t);
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:13px;
}
.stat-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px);}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;
  width:4px;height:100%;background:var(--primary);
}
.stat-card.success::before{background:var(--success);}
.stat-card.warning::before{background:var(--warning);}
.stat-card.danger::before{background:var(--danger);}
.stat-card.info::before{background:var(--info);}
.stat-card.purple::before{background:#8B5CF6;}
.stat-icon{
  width:42px;height:42px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;flex-shrink:0;
  background:var(--primary-light);
}
.stat-card.success .stat-icon{background:var(--success-light);}
.stat-card.warning .stat-icon{background:var(--warning-light);}
.stat-card.danger .stat-icon{background:var(--danger-light);}
.stat-card.info .stat-icon{background:var(--info-light);}
.stat-card.purple .stat-icon{background:#F5F3FF;}
.stat-body{flex:1;min-width:0;}
.stat-value{font-size:22px;font-weight:800;line-height:1.1;}
.stat-label{font-size:12px;color:var(--text-2);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat-sub{font-size:11px;color:var(--text-muted);margin-top:1px;}

/* === 5. BUTTONS =========================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:9px 18px;
  border-radius:var(--r);border:none;cursor:pointer;
  font-size:14px;font-weight:600;
  transition:all var(--t);white-space:nowrap;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn-lg{padding:12px 24px;font-size:15px;}
.btn-icon{width:44px;height:44px;padding:0;flex-shrink:0;}
.btn-icon.sm{width:36px;height:36px;}
.btn-full{width:100%;}

.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 4px 12px rgba(79,70,229,.3);}
.btn-primary:active{transform:scale(.98);}

.btn-secondary{background:var(--gray-100);color:var(--text);}
.btn-secondary:hover:not(:disabled){background:var(--gray-200);}

.btn-success{background:var(--success);color:#fff;}
.btn-success:hover:not(:disabled){background:var(--success-dark);}

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

.btn-warning{background:var(--warning);color:#fff;}
.btn-warning:hover:not(:disabled){background:var(--warning-dark);}

.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text-2);}
.btn-outline:hover:not(:disabled){background:var(--gray-50);border-color:var(--gray-300);}

.btn-outline-primary{background:transparent;border:1.5px solid var(--primary);color:var(--primary);}
.btn-outline-primary:hover:not(:disabled){background:var(--primary-light);}

.btn-ghost{background:transparent;color:var(--text-2);}
.btn-ghost:hover:not(:disabled){background:var(--gray-100);}

.btn-danger-ghost{background:transparent;color:var(--danger);}
.btn-danger-ghost:hover:not(:disabled){background:var(--danger-light);}

/* === 6. FORMS ============================================= */
.form-group{margin-bottom:18px;}
.form-row{display:grid;gap:18px;grid-template-columns:1fr 1fr;}
.form-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
.form-row.cols-1{grid-template-columns:1fr;}
label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px;}
label .required{color:var(--danger);margin-left:2px;}
.form-control{
  width:100%;padding:10px 13px;
  border:1.5px solid var(--border);
  border-radius:var(--r);background:var(--surface);
  color:var(--text);font-size:14px;
  transition:border-color var(--t),box-shadow var(--t);
  appearance:none;-webkit-appearance:none;
}
.form-control:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.1);
}
.form-control::placeholder{color:var(--text-muted);}
.form-control:disabled{background:var(--gray-50);color:var(--text-muted);cursor:not-allowed;}
textarea.form-control{resize:vertical;min-height:90px;}
select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:36px;cursor:pointer;}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:4px;}
.form-error{font-size:12px;color:var(--danger);margin-top:4px;}
.field-error{display:block;font-size:12px;color:var(--danger);margin-top:4px;font-weight:500;}
.form-control.is-invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,.12);}
.input-group{display:flex;}
.input-group .form-control{border-radius:var(--r) 0 0 var(--r);}
.input-group .input-group-text{
  padding:10px 13px;background:var(--gray-100);
  border:1.5px solid var(--border);border-left:none;
  border-radius:0 var(--r) var(--r) 0;
  font-size:14px;color:var(--text-2);white-space:nowrap;
}
.form-check{display:flex;align-items:center;gap:8px;cursor:pointer;}
.form-check input[type="checkbox"],.form-check input[type="radio"]{
  width:16px;height:16px;accent-color:var(--primary);cursor:pointer;
}

/* Search bar */
.search-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r);padding:8px 12px;
  transition:border-color var(--t),box-shadow var(--t);
}
.search-bar:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1);}
.search-bar input{border:none;outline:none;flex:1;font-size:14px;background:transparent;color:var(--text);}
.search-bar input::placeholder{color:var(--text-muted);}
.search-icon{color:var(--text-muted);font-size:17px;flex-shrink:0;}

/* File Upload */
.file-upload-area{
  border:2px dashed var(--border);border-radius:var(--r-lg);
  padding:32px 20px;text-align:center;cursor:pointer;
  transition:all var(--t);background:var(--surface-2);
}
.file-upload-area:hover,.file-upload-area.drag-over{
  border-color:var(--primary);background:var(--primary-light);
}
.file-upload-area input[type="file"]{display:none;}
.file-upload-icon{font-size:36px;margin-bottom:10px;}
.file-upload-text{font-size:14px;color:var(--text-2);}
.file-upload-hint{font-size:12px;color:var(--text-muted);margin-top:4px;}
.file-preview{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r);
  margin-top:10px;
}
.file-preview img{width:48px;height:48px;object-fit:cover;border-radius:var(--r-sm);}
.file-preview-name{flex:1;font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* === 7. TABLES ============================================ */
.table-container{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch; /* smooth momentum scroll on iOS */
  border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--sh);
  width:100%;max-width:100%; /* never wider than parent */
}
table{width:100%;border-collapse:collapse;background:var(--surface);}
thead th{
  padding:12px 16px;text-align:left;
  font-size:12px;font-weight:700;
  color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;
  background:var(--surface-2);border-bottom:1.5px solid var(--border);
  white-space:nowrap;
}
tbody td{
  padding:13px 16px;font-size:14px;
  border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
.td-name{font-weight:600;}
.td-muted{color:var(--text-muted);font-size:13px;}
.td-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}

/* === 7b. BULK ROOM TABLE ================================== */
.room-bulk-table{width:100%;border-collapse:collapse;}
.room-bulk-table thead th{
  padding:9px 8px;font-size:12px;font-weight:700;
  color:var(--text-2);text-transform:uppercase;letter-spacing:.4px;
  background:var(--surface-2);border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.room-bulk-table tbody td{
  padding:5px 4px;border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
.room-bulk-table tbody tr:last-child td{border-bottom:none;}
.room-bulk-table tbody tr:hover td{background:rgba(79,70,229,.02);}
/* Row 1 = template row — subtle tint */
.room-bulk-table tbody tr:first-child td{background:rgba(79,70,229,.035);}
.room-bulk-table tbody tr:first-child:hover td{background:rgba(79,70,229,.06);}
.cell-num{
  width:32px;text-align:center;font-size:12px;
  color:var(--text-muted);font-weight:700;padding:0 4px;
}
/* Apply-to-all pill button inside column headers */
.apply-all-btn{
  display:inline-flex;align-items:center;gap:2px;
  font-size:10px;font-weight:700;letter-spacing:.3px;
  padding:2px 7px;margin-top:5px;border-radius:20px;
  background:rgba(79,70,229,.1);color:var(--primary);
  border:1px solid rgba(79,70,229,.25);
  cursor:pointer;transition:background var(--t),transform var(--t);
  white-space:nowrap;text-transform:none;
}
.apply-all-btn:hover{background:rgba(79,70,229,.22);transform:translateY(1px);}
.apply-all-btn:active{transform:translateY(2px);}
/* Make th flex so label + pill stack vertically */
.th-col{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  line-height:1.3;
}
.cell-input{
  width:100%;border:1.5px solid transparent;
  border-radius:var(--r-sm);padding:7px 9px;
  font-size:13px;background:transparent;color:var(--text);
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
  appearance:none;-webkit-appearance:none;
}
.cell-input:hover{border-color:var(--border);background:var(--surface);}
.cell-input:focus{
  outline:none;border-color:var(--primary);background:var(--surface);
  box-shadow:0 0 0 3px rgba(79,70,229,.1);
}
.cell-input.is-invalid{border-color:var(--danger)!important;background:var(--danger-light);}
select.cell-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;background-size:15px;
  padding-right:26px;cursor:pointer;
}
.count-step{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;text-align:center;
}
.count-step h3{font-size:18px;font-weight:700;margin-bottom:6px;}
.count-step p{font-size:14px;color:var(--text-2);margin-bottom:24px;}
.count-input-row{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;}
.count-big{
  width:100px;text-align:center;font-size:26px;font-weight:800;
  border:2px solid var(--border);border-radius:var(--r-lg);
  padding:10px;color:var(--text);background:var(--surface);
  transition:border-color var(--t);
}
.count-big:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.1);}

/* === 8. MODALS ============================================ */
.modal-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:200;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  align-items:center;justify-content:center;padding:16px;
  overscroll-behavior:contain;
}
.modal-backdrop.show{display:flex;}
.modal{
  background:var(--surface);border-radius:var(--r-xl);
  box-shadow:var(--sh-xl);width:100%;max-width:560px;
  max-height:90vh;overflow:hidden;
  display:flex;flex-direction:column;
  animation:modalIn .2s ease;
}
.modal.modal-lg{max-width:760px;}
.modal.modal-sm{max-width:400px;}
.modal.modal-xl{max-width:960px;}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px);}to{opacity:1;transform:none;}}
.modal-header{
  padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.modal-title{font-size:17px;font-weight:700;}
.modal-close{
  background:none;border:none;cursor:pointer;
  width:32px;height:32px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--text-muted);
  transition:all var(--t);
}
.modal-close:hover{background:var(--gray-100);color:var(--text);}
.modal-body{padding:24px;overflow-y:auto;flex:1;}
.modal-footer{
  padding:16px 24px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:10px;
  flex-shrink:0;background:var(--surface-2);
}

/* Confirm Dialog */
.confirm-icon{
  width:56px;height:56px;border-radius:var(--r-full);
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
}
.confirm-icon.danger{background:var(--danger-light);}
.confirm-icon.warning{background:var(--warning-light);}
.confirm-title{font-size:17px;font-weight:700;text-align:center;margin-bottom:8px;}
.confirm-message{font-size:14px;color:var(--text-2);text-align:center;}

/* === 9. BADGES & STATUS =================================== */
.badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:var(--r-full);
  font-size:12px;font-weight:600;white-space:nowrap;
}
.badge-success{background:var(--success-light);color:var(--success-dark);}
.badge-warning{background:var(--warning-light);color:var(--warning-dark);}
.badge-danger{background:var(--danger-light);color:var(--danger-dark);}
.badge-info{background:var(--info-light);color:#1D4ED8;}
.badge-primary{background:var(--primary-light);color:var(--primary-dark);}
.badge-gray{background:var(--gray-100);color:var(--gray-600);}
.badge-purple{background:#F5F3FF;color:#5B21B6;}

/* Dot status */
.status-dot{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;
}
.status-dot::before{
  content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.status-dot.active::before{background:var(--success);}
.status-dot.vacant::before{background:var(--info);}
.status-dot.partial::before{background:var(--warning);}
.status-dot.full::before{background:var(--danger);}
.status-dot.maintenance::before{background:var(--gray-400);}
.status-dot.pending::before{background:var(--warning);}
.status-dot.paid::before{background:var(--success);}
.status-dot.expired::before{background:var(--danger);}
.status-dot.trial::before{background:#8B5CF6;}

/* === 10. TOASTS =========================================== */
#toast-container{
  position:fixed;top:20px;right:20px;z-index:300;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--surface);border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--sh-xl);
  border-left:4px solid var(--primary);
  min-width:280px;max-width:380px;
  pointer-events:all;
  animation:toastIn .3s ease;
  transition:all var(--t-slow);
}
.toast.success{border-left-color:var(--success);}
.toast.error{border-left-color:var(--danger);}
.toast.warning{border-left-color:var(--warning);}
.toast-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.toast-content{flex:1;min-width:0;}
.toast-title{font-size:14px;font-weight:700;margin-bottom:2px;}
.toast-message{font-size:13px;color:var(--text-2);}
.toast-close{
  background:none;border:none;cursor:pointer;
  color:var(--text-muted);font-size:18px;flex-shrink:0;
  padding:0;transition:color var(--t);
}
.toast-close:hover{color:var(--text);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}}

/* === 11. LOADING ========================================== */
.spinner{
  width:20px;height:20px;border-radius:50%;
  border:2.5px solid var(--border);
  border-top-color:var(--primary);
  animation:spin .6s linear infinite;
  flex-shrink:0;
}
.spinner.sm{width:14px;height:14px;border-width:2px;}
.spinner.lg{width:32px;height:32px;border-width:3px;}
.spinner.white{border-color:rgba(255,255,255,.3);border-top-color:#fff;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-overlay{
  position:absolute;inset:0;
  background:rgba(255,255,255,.7);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  z-index:10;border-radius:inherit;
}
.page-loading{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:200px;gap:14px;
}
.page-loading p{font-size:14px;color:var(--text-muted);}

/* Skeleton */
.skeleton{
  background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-50) 50%,var(--gray-100) 75%);
  background-size:200% 100%;
  animation:skeleton 1.5s infinite;
  border-radius:var(--r);
}
@keyframes skeleton{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* === 12. EMPTY STATE ====================================== */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 20px;text-align:center;
}
.empty-icon{font-size:48px;margin-bottom:16px;opacity:.7;}
.empty-title{font-size:17px;font-weight:700;margin-bottom:6px;}
.empty-desc{font-size:14px;color:var(--text-2);max-width:360px;margin:0 auto 20px;}

/* === 13. TABS ============================================= */
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--border);margin-bottom:20px;overflow-x:auto;}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{
  padding:10px 18px;font-size:14px;font-weight:600;
  border:none;background:none;cursor:pointer;
  color:var(--text-muted);border-bottom:2.5px solid transparent;
  white-space:nowrap;transition:all var(--t);margin-bottom:-1.5px;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* === 14. TOOLBAR ========================================== */
.toolbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;flex-wrap:wrap;
}
.toolbar .search-bar{flex:1;min-width:200px;max-width:360px;}
.toolbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;}

/* === 15. MEMBER CARD (list view) ========================== */
.member-card{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:14px;align-items:center;padding:16px;
  background:var(--surface);border-radius:var(--r-lg);
  border:1px solid var(--border);box-shadow:var(--sh-sm);
  transition:all var(--t);
}
.member-card:hover{box-shadow:var(--sh-md);border-color:var(--gray-300);}
.member-avatar{
  width:44px;height:44px;border-radius:var(--r-full);
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;overflow:hidden;flex-shrink:0;
}
.member-avatar img{width:100%;height:100%;object-fit:cover;}
.member-info .name{font-weight:700;font-size:15px;}
.member-info .room{font-size:13px;color:var(--text-2);}
.member-info .details{font-size:12px;color:var(--text-muted);}
.member-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
/* On smaller screens: buttons wrap to full-width row below info */
@media(max-width:640px){
  .member-card{grid-template-columns:auto 1fr;gap:10px;}
  .member-card > div:last-child{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;}
}

/* === 16. ROOM CARD ======================================== */
.room-card{
  background:var(--surface);border-radius:var(--r-lg);
  border:1px solid var(--border);box-shadow:var(--sh-sm);
  overflow:hidden;transition:all var(--t);
}
.room-card:hover{box-shadow:var(--sh-md);}
.room-card-header{
  padding:16px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;background:var(--surface-2);
}
.room-number{font-size:20px;font-weight:800;}
.room-name{font-size:13px;color:var(--text-2);}
.room-card-body{padding:16px 18px;}
.room-stat{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;}
.room-stat label{color:var(--text-muted);font-size:13px;}
.room-progress{
  height:6px;background:var(--gray-100);border-radius:var(--r-full);
  margin:10px 0;overflow:hidden;
}
.room-progress-bar{
  height:100%;border-radius:var(--r-full);background:var(--success);
  transition:width .5s ease;
}
.room-progress-bar.warning{background:var(--warning);}
.room-progress-bar.danger{background:var(--danger);}
.room-card-footer{
  padding:12px 18px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  flex-wrap:wrap;
}
.room-card-actions-left{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
/* "Add Member" button — green-tinted outline, sits alongside Members btn */
.btn-add-member{
  border:1.5px solid var(--success);color:var(--success);
  background:transparent;
  transition:background var(--t),color var(--t);
}
.btn-add-member:hover{background:var(--success);color:#fff;}

/* Rooms grid */
.rooms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}

/* === STATUS BOARD ========================================= */
.view-toggle{
  display:inline-flex;border:1.5px solid var(--border);
  border-radius:var(--r);overflow:hidden;
}
.view-toggle-btn{
  padding:6px 14px;font-size:13px;font-weight:600;
  background:transparent;color:var(--text-2);border:none;cursor:pointer;
  transition:background var(--t),color var(--t);white-space:nowrap;
}
.view-toggle-btn.active{background:var(--primary);color:#fff;}

.status-summary-bar{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;
}
.status-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--r-full);
  font-size:13px;font-weight:700;border:1.5px solid transparent;
}
.status-chip-vacant    {background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE;}
.status-chip-pending   {background:#FFF7ED;color:#C2410C;border-color:#FDBA74;}
.status-chip-allpaid   {background:#F0FDF4;color:#15803D;border-color:#86EFAC;}
.status-chip-maint     {background:#F8FAFC;color:#64748B;border-color:#CBD5E1;}

.status-board{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:12px;
}
.sb-card{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow var(--t);
}
.sb-card:hover{box-shadow:var(--sh-sm);}
/* Left accent stripe by room status */
.sb-card.sb-vacant    {border-left:4px solid #60A5FA;}
.sb-card.sb-partial   {border-left:4px solid var(--warning);}
.sb-card.sb-full      {border-left:4px solid var(--danger);}
.sb-card.sb-maint     {border-left:4px solid #94A3B8;}
/* Extra orange stripe if ANY pending payment */
.sb-card.sb-has-pending{border-left:4px solid #F97316;}

.sb-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--border);gap:8px;flex-wrap:wrap;
}
.sb-room-num{font-size:15px;font-weight:800;}
.sb-room-sub{font-size:12px;color:var(--text-muted);}
.sb-header-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}

.sb-members{padding:6px 0;}
.sb-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 14px;gap:8px;
  border-bottom:1px solid var(--border-light);
}
.sb-row:last-child{border-bottom:none;}
.sb-row.sb-vacant-bed{opacity:.5;}
.sb-member-name{
  font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
}
.sb-member-sub{font-size:11px;color:var(--text-muted);}
.sb-pay-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;white-space:nowrap;flex-shrink:0;
}
.sb-pay-badge.paid   {background:#DCFCE7;color:#15803D;}
.sb-pay-badge.pending{background:#FFF7ED;color:#C2410C;}
.sb-pay-badge.partial{background:#FEF9C3;color:#854D0E;}

@media(max-width:768px){
  .status-board{grid-template-columns:1fr;}
}

/* === 17. PAGE TOOLBAR + FILTERS =========================== */
.filter-bar{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;padding:14px 18px;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.filter-select{padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--r);font-size:13px;color:var(--text-2);background:var(--surface);cursor:pointer;appearance:none;-webkit-appearance:none;}
.filter-select:focus{outline:none;border-color:var(--primary);}

/* === 18. PAGINATION ======================================= */
.pagination{
  display:flex;align-items:center;justify-content:center;
  gap:4px;padding:20px 0;
}
.page-btn{
  width:36px;height:36px;border-radius:var(--r);
  border:1.5px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;
  transition:all var(--t);
}
.page-btn:hover{border-color:var(--primary);color:var(--primary);}
.page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.page-btn:disabled{opacity:.4;cursor:not-allowed;}

/* === 19. LOGIN PAGE ======================================= */
.login-page{
  min-height:100vh;background:var(--gray-900);
  display:flex;align-items:center;justify-content:center;
  padding:20px;position:relative;overflow:hidden;
}
.login-page::before{
  content:'';position:absolute;top:-200px;right:-200px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,70,229,.3) 0%,transparent 70%);
  pointer-events:none;
}
.login-page::after{
  content:'';position:absolute;bottom:-200px;left:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.2) 0%,transparent 70%);
  pointer-events:none;
}
.login-box{
  background:rgba(255,255,255,.04);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-2xl);padding:44px 40px;
  width:100%;max-width:440px;text-align:center;
  position:relative;z-index:1;
  box-shadow:0 32px 64px rgba(0,0,0,.4);
}
.login-logo{
  width:64px;height:64px;border-radius:var(--r-xl);
  background:var(--primary);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;box-shadow:0 8px 24px rgba(79,70,229,.4);
}
.login-title{font-size:26px;font-weight:800;color:#fff;margin-bottom:6px;}
.login-sub{font-size:15px;color:rgba(255,255,255,.5);margin-bottom:32px;}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:14px 24px;border-radius:var(--r-lg);
  background:#fff;border:none;cursor:pointer;
  font-size:15px;font-weight:700;color:var(--gray-700);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transition:all var(--t);
}
.btn-google:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}
.btn-google:active{transform:none;}
.btn-google img{width:22px;height:22px;}
.login-footer{margin-top:24px;font-size:12px;color:rgba(255,255,255,.3);}

/* === 20. ONBOARDING ======================================= */
.onboarding-page{
  min-height:100vh;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.onboarding-box{
  background:var(--surface);border-radius:var(--r-2xl);
  box-shadow:var(--sh-xl);border:1px solid var(--border);
  width:100%;max-width:640px;overflow:hidden;
}
.onboarding-header{
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
  padding:28px 32px;color:#fff;
}
.onboarding-header h2{font-size:22px;font-weight:800;margin-bottom:4px;}
.onboarding-header p{font-size:14px;opacity:.8;}
.onboarding-steps{
  display:flex;align-items:center;gap:0;
  padding:20px 24px;border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.step-item{
  display:flex;align-items:center;gap:8px;flex:1;
}
.step-item:last-child{flex:none;}
.step-num{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
  border:2px solid var(--border);color:var(--text-muted);
  transition:all var(--t);
}
.step-item.active .step-num,.step-item.done .step-num{
  background:var(--primary);border-color:var(--primary);color:#fff;
}
.step-label{font-size:13px;font-weight:600;color:var(--text-muted);}
.step-item.active .step-label{color:var(--primary);}
.step-item.done .step-label{color:var(--text-2);}
.step-line{flex:1;height:2px;background:var(--border);margin:0 8px;}
.step-line.done{background:var(--primary);}
.onboarding-body{padding:28px 32px;}
.room-setup-item{
  background:var(--surface-2);border-radius:var(--r-lg);
  border:1px solid var(--border);padding:18px;margin-bottom:14px;
  position:relative;
}
.room-setup-item .remove-room{
  position:absolute;top:12px;right:12px;
}

/* === 21. SUBSCRIPTION PAGE ================================ */
.subscription-page{
  max-width:540px;margin:0 auto;padding:24px;
}
.sub-status-card{
  border-radius:var(--r-xl);padding:24px;
  margin-bottom:20px;text-align:center;color:#fff;
}
.sub-status-card.trial{background:linear-gradient(135deg,#7C3AED,#4F46E5);}
.sub-status-card.expired{background:linear-gradient(135deg,#991B1B,#DC2626);}
.sub-status-card.active{background:linear-gradient(135deg,#065F46,#059669);}
.sub-status-card h2{font-size:22px;font-weight:800;margin-bottom:4px;}
.sub-status-card .days{font-size:42px;font-weight:900;margin:10px 0;}
.sub-status-card p{font-size:14px;opacity:.85;}
.qr-card{
  background:var(--surface);border-radius:var(--r-xl);
  border:1px solid var(--border);box-shadow:var(--sh);
  padding:24px;text-align:center;margin-bottom:20px;
}
.qr-card img{
  max-width:200px;margin:12px auto;border-radius:var(--r);
  border:8px solid var(--surface);box-shadow:var(--sh);
}
.upi-id{
  background:var(--primary-light);color:var(--primary-dark);
  border-radius:var(--r);padding:10px 16px;
  font-size:16px;font-weight:700;display:inline-block;
  margin:8px 0;letter-spacing:.5px;
}

/* === 22. SUPER ADMIN ====================================== */
.super-admin-header{
  background:linear-gradient(135deg,var(--gray-900),var(--gray-800));
  color:#fff;padding:28px 32px;
  display:flex;align-items:center;gap:16px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.tenant-row-details{
  display:none;
  background:var(--surface-2);
  border-top:1px solid var(--border);
  padding:16px 20px;
}
.tenant-row-details.show{display:table-row;}
.tenant-detail-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;padding:12px 0;
}
.tenant-detail-item .label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;margin-bottom:2px;}
.tenant-detail-item .value{font-size:14px;font-weight:600;}

/* === 23. RECEIPT / PAYMENT ================================ */
.receipt-preview{
  border:2px dashed var(--border);border-radius:var(--r-xl);
  padding:24px;background:var(--surface-2);
}
.receipt-header{text-align:center;margin-bottom:16px;}
.receipt-hostel-name{font-size:20px;font-weight:800;}
.receipt-address{font-size:13px;color:var(--text-2);}
.receipt-divider{border:none;border-top:1px dashed var(--border);margin:14px 0;}
.receipt-row{
  display:flex;justify-content:space-between;
  font-size:14px;padding:5px 0;
}
.receipt-row.total{font-weight:800;font-size:16px;border-top:2px solid var(--border);padding-top:10px;margin-top:6px;}
.receipt-row.paid{color:var(--success-dark);font-weight:700;}
.receipt-row.balance{color:var(--danger-dark);font-weight:700;}

/* === 24. CHARTS / REPORTS ================================= */
.report-summary-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;margin-bottom:24px;
}
.mini-chart{height:120px;position:relative;background:var(--surface-2);border-radius:var(--r);overflow:hidden;}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:100%;padding:12px 8px 0;}
.bar{
  flex:1;background:var(--primary-light);border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:all .4s ease;position:relative;min-height:4px;
}
.bar:hover{background:var(--primary);}
.bar.success{background:var(--success-light);}
.bar.success:hover{background:var(--success);}

/* === 25. DASHBOARD SPECIFIC =============================== */
.two-col-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media(max-width:768px){
  .two-col-grid{grid-template-columns:1fr;}
}

/* Quick action buttons wrap nicely on mobile */
.quick-actions-body{display:flex;gap:12px;flex-wrap:wrap;}
.quick-actions-body .btn{flex:1;min-width:130px;justify-content:center;}

/* ── Dashboard Command-Center Layout ─────────────────────── */
.db-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.db-main-card{height:100%;}
.db-side{display:flex;flex-direction:column;gap:16px;}

/* Pending payments list rows */
.db-pending-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;
  border-bottom:1px solid var(--border-light);
  transition:background var(--t);
}
.db-pending-row:last-child{border-bottom:none;}
.db-pending-row:hover{background:var(--surface-2);}
.db-pending-row.fade-out{opacity:0;transition:opacity 300ms ease;}
.db-pending-info{flex:1;min-width:0;}
.db-pending-name{
  font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.db-pending-sub{
  font-size:12px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.db-pending-actions{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.db-due-amount{
  font-size:14px;font-weight:700;color:var(--danger-dark);
  min-width:64px;text-align:right;
}
.db-due-amount.partial{color:var(--warning-dark);}

/* Recent payments & vacant rooms list rows */
.db-list-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;
  border-bottom:1px solid var(--border-light);
}
.db-list-row:last-child{border-bottom:none;}
.db-list-info{flex:1;min-width:0;}
.db-list-name{
  font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.db-list-sub{
  font-size:12px;color:var(--text-muted);
}
.db-list-amount{
  font-size:13px;font-weight:700;color:var(--success-dark);
  flex-shrink:0;
}

/* Quick-Expense category chip buttons */
.qe-cat-btn{
  padding:6px 12px;
  border-radius:var(--r-full);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px;font-weight:600;
  cursor:pointer;
  transition:all var(--t);
  white-space:nowrap;
}
.qe-cat-btn:hover{
  border-color:var(--primary);
  background:var(--primary-light);
  color:var(--primary-dark);
}
.qe-cat-btn.selected{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
}

/* Empty state inside db lists */
.db-empty{
  padding:28px 18px;
  text-align:center;
  color:var(--text-muted);
  font-size:13px;
}
.db-empty .db-empty-icon{font-size:28px;margin-bottom:8px;}

/* Responsive: stack columns on tablet */
@media(max-width:900px){
  .db-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .db-pending-row{padding:10px 14px;gap:8px;}
  .db-pending-actions{gap:4px;}
  .db-pending-actions .btn{padding:5px 8px;font-size:12px;}
  .db-due-amount{font-size:13px;min-width:50px;}
  .db-list-row{padding:8px 14px;}
}

/* Quick Add Expense toggle header */
#qaHeader{user-select:none;}
#qaHeader:hover{background:var(--surface-2);}

/* Quick Add inline form stacks on mobile */
@media(max-width:600px){
  #qaBody > div:last-child{flex-direction:column;align-items:stretch!important;}
  #qaBody .form-group{flex:1 1 100%!important;min-width:0!important;}
  #btnQuickAddExpense{width:100%;}
}

/* Payment filter bar stacks on mobile */
@media(max-width:600px){
  .payment-filter-bar{flex-direction:column;align-items:stretch!important;}
  .payment-filter-bar .filter-select,
  .payment-filter-bar .search-bar{width:100%;max-width:100%!important;min-width:0!important;}
  .payment-filter-bar #paymentSummary,
  .payment-filter-bar #pendingSummary{margin-left:0!important;}
}

/* ── Responsive Tables ────────────────────────────────────
   Hide lower-priority columns on small screens.
   The table still scrolls within .table-container if needed.
   ──────────────────────────────────────────────────────── */
@media(max-width:640px){
  /* Payments table (11 cols): hide Receipt#, Mode, Date — keep Member, Room, Period, Total, Paid, Balance, Status, Actions */
  #paymentsContainer table th:nth-child(1),
  #paymentsContainer table td:nth-child(1),  /* Receipt # */
  #paymentsContainer table th:nth-child(8),
  #paymentsContainer table td:nth-child(8),  /* Mode */
  #paymentsContainer table th:nth-child(10),
  #paymentsContainer table td:nth-child(10){ /* Date */
    display:none;
  }

  /* Expenses table (7 cols): hide Paid To, Mode, Notes — keep Date, Category, Amount, Actions */
  #expensesContainer table th:nth-child(4),
  #expensesContainer table td:nth-child(4),  /* Paid To */
  #expensesContainer table th:nth-child(5),
  #expensesContainer table td:nth-child(5),  /* Mode */
  #expensesContainer table th:nth-child(6),
  #expensesContainer table td:nth-child(6){  /* Notes */
    display:none;
  }

  /* Pending payments table (4 cols): already compact, fine as is */

  /* General: make table cells wrap text and reduce padding on small screens */
  tbody td{ padding:10px 10px; font-size:13px; }
  thead th{ padding:10px 10px; font-size:11px; }
}

/* === 25b. MISC UTILITIES ================================== */
.flex{display:flex;} .flex-col{flex-direction:column;}
.items-center{align-items:center;} .justify-between{justify-content:space-between;}
.justify-end{justify-content:flex-end;} .gap-1{gap:4px;} .gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;}
.w-full{width:100%;} .mt-auto{margin-top:auto;}
.text-right{text-align:right;} .text-center{text-align:center;}
.font-bold{font-weight:700;} .font-semibold{font-weight:600;}
.text-sm{font-size:13px;} .text-xs{font-size:12px;} .text-lg{font-size:17px;} .text-xl{font-size:20px;}
.text-success{color:var(--success-dark);} .text-danger{color:var(--danger-dark);}
.text-warning{color:var(--warning-dark);} .text-muted{color:var(--text-muted);}
.text-primary{color:var(--primary);}
.mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;} .mb-6{margin-bottom:24px;}
.mt-2{margin-top:8px;} .mt-4{margin-top:16px;}
.p-4{padding:16px;} .p-6{padding:24px;}
.hidden{display:none!important;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0;}
.currency{font-variant-numeric:tabular-nums;}

/* Info blocks */
.info-box{
  display:flex;gap:10px;padding:12px 14px;
  border-radius:var(--r);border:1px solid var(--border);
  background:var(--surface-2);font-size:13px;
}
.info-box.info{border-color:var(--info-light);background:var(--info-light);}
.info-box.warning{border-color:var(--warning-light);background:var(--warning-light);}
.info-box.success{border-color:var(--success-light);background:var(--success-light);}
.info-box.danger{border-color:var(--danger-light);background:var(--danger-light);}

/* section-header used on top of page content */
.section-header{margin-bottom:20px;}
.section-header h1{font-size:22px;font-weight:800;}
.section-header p{font-size:14px;color:var(--text-2);margin-top:3px;}

/* Chip */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:12px;font-weight:600;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-2);
}

/* === 26. RESPONSIVE ======================================= */
@media(max-width:1024px){
  :root{--sidebar-width:220px;}
}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .sidebar-close{display:flex;}
  .sidebar-overlay.show{display:block;}
  .main-content{margin-left:0;}
  .menu-toggle{display:flex;}

  .page-content{padding:16px;}
  .top-header{padding:0 12px;gap:8px;}
  .card-body{padding:16px;}
  /* On mobile hide the name text — keep just the avatar circle */
  .header-profile-name,.header-profile-caret{display:none;}
  .header-profile{padding:4px;border-radius:var(--r-full);}
  /* Dropdown opens to the left so it doesn't overflow the screen */
  .header-profile-dropdown{right:0;min-width:190px;}
  .form-row{grid-template-columns:1fr;}
  .form-row.cols-3{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .rooms-grid{grid-template-columns:1fr;}
  /* Modal slides up from bottom on mobile */
  .modal{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:95vh;margin-top:auto;}
  .modal-backdrop{align-items:flex-end;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
  .toolbar{gap:8px;}
  .toolbar .search-bar{min-width:0;max-width:100%;flex:1;}
  .toolbar-actions{width:100%;flex-wrap:wrap;}
  #toast-container{top:auto;bottom:16px;right:8px;left:8px;}
  .toast{min-width:0;max-width:100%;}
  .onboarding-body{padding:20px;}
  .onboarding-header{padding:20px;}
  .login-box{padding:32px 24px;}
  /* Payment filter summary goes full-width on mobile */
  #paymentSummary,#pendingSummary{margin-left:0!important;width:100%;justify-content:flex-start;}
  /* Header status badge — compact */
  .header-status{font-size:11px;padding:3px 8px;}
  /* Ensure all buttons have minimum touch targets */
  .btn{min-height:40px;}
  .btn-sm{min-height:36px;}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr;}
  .form-row.cols-3{grid-template-columns:1fr;}
  .modal-footer{flex-direction:column;}
  .modal-footer .btn{width:100%;}
  /* View-toggle: show icons only — .vt-text spans are hidden */
  .vt-text{display:none;}
  .view-toggle-btn{padding:6px 10px;font-size:14px;}
  /* Header status: very compact, truncate if needed */
  .header-status{font-size:10px;padding:2px 6px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Header action buttons — compact padding */
  .header-actions .btn{padding:7px 10px;font-size:13px;}
  /* Page title font size reduction */
  .page-title{font-size:16px;}
  /* Toolbar stacks vertically on tiny screens */
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar .search-bar{max-width:100%;}
  .toolbar-actions{margin-left:0;}
}

/* Print styles */
@media print{
  .sidebar,.top-header,.btn,button,.no-print{display:none!important;}
  .main-content{margin-left:0!important;}
  .page-content{padding:0!important;}
  .card{box-shadow:none!important;border:1px solid #ddd!important;}
  body{background:#fff!important;}
}

/* ============================================================
   === 27. PWA — BOTTOM NAV + SAFE AREAS + TOUCH UX =========
   ============================================================ */

/* Safe-area CSS variables */
:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
  --bn-h: 62px; /* bottom nav height */
}

/* ── Bottom Nav ─────────────────────────────────────────── */
.bottom-nav{
  display:none; /* shown only on mobile via media query */
  position:fixed;bottom:0;left:0;right:0;
  z-index:150;
  background:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -2px 16px rgba(0,0,0,.08);
  padding-bottom:var(--safe-bottom);
  height:calc(var(--bn-h) + var(--safe-bottom));
}
.bottom-nav .bn-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:2px;padding:6px 4px 4px;
  background:none;border:none;cursor:pointer;
  color:var(--text-muted);font-size:inherit;
  text-decoration:none;
  transition:color var(--t),transform var(--t);
  -webkit-tap-highlight-color:transparent;
  min-height:var(--bn-h);
  position:relative;
}
.bottom-nav .bn-item:active{transform:scale(.9);}
.bottom-nav .bn-item.active{color:var(--primary);}
.bottom-nav .bn-item.active .bn-icon{
  background:var(--primary-light);border-radius:12px;
  padding:2px 16px;
}
.bottom-nav .bn-icon{
  font-size:22px;line-height:1;
  transition:background var(--t),padding var(--t);
  padding:2px 16px;border-radius:12px;
}
.bottom-nav .bn-label{
  font-size:10px;font-weight:600;letter-spacing:.01em;
  line-height:1;white-space:nowrap;
}
/* Notification badge on bottom nav */
.bottom-nav .bn-item .bn-badge{
  position:absolute;top:4px;left:50%;
  transform:translateX(6px);
  background:var(--danger);color:#fff;
  font-size:9px;font-weight:800;
  min-width:16px;height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;
  border:2px solid var(--surface);
}

/* ── Page exit animation ─────────────────────────────────── */
@keyframes pageExit{to{opacity:0;transform:translateX(-10px);}}
.page-exit #appLayout{animation:pageExit .18s ease forwards;}

/* ── Page enter animation ────────────────────────────────── */
@keyframes pageEnter{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:none;}}
#appLayout{animation:pageEnter .2s ease;}

/* ── Swipe handle on bottom-sheet modals ────────────────── */
@media(max-width:768px){
  .modal::before{
    content:'';display:block;
    width:40px;height:4px;border-radius:2px;
    background:var(--gray-300);
    margin:10px auto 0;flex-shrink:0;
  }
  .modal-header{padding-top:12px;}
}

/* ── Pull to Refresh indicator ───────────────────────────── */
#ptr-indicator{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:0;overflow:hidden;opacity:0;
  font-size:13px;font-weight:600;color:var(--text-2);
  transition:opacity .1s;
}
.ptr-spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--border);
  border-top-color:var(--primary);
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Touch active feedback ───────────────────────────────── */
.btn:active:not(:disabled){transform:scale(.97);}
.card:active{} /* no scale on cards */
.member-card:active,.room-card:active{
  box-shadow:var(--sh-sm);
}

/* ── Prevent text-size-adjust on orientation change ─────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* ── iOS input zoom fix: minimum 16px font ───────────────── */
@media(max-width:768px){
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="email"],
  input[type="date"],
  input[type="password"],
  select,
  textarea{
    font-size:16px!important;
  }
}

/* ── Standalone (installed app) extras ──────────────────── */
.pwa-standalone .top-header{
  padding-top:var(--safe-top);
  height:calc(var(--header-h) + var(--safe-top));
}
.pwa-standalone .sidebar{
  padding-top:var(--safe-top);
}

/* ── Slide-down animation (for install chip) ─────────────── */
@keyframes slideDown{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}

/* ── Mobile: show bottom nav, adjust layout ──────────────── */
@media(max-width:768px){
  .bottom-nav{display:flex;}

  /* Push page content up so it's not hidden behind bottom nav */
  .page-content{
    padding-bottom:calc(var(--bn-h) + var(--safe-bottom) + 16px);
  }

  /* Keep hamburger visible — taps it to open full sidebar */
  .menu-toggle{display:flex!important;}

}

/* ── Desktop: no bottom nav ──────────────────────────────── */
@media(min-width:769px){
  .bottom-nav{display:none!important;}
}

/* Print: hide bottom nav */
@media print{
  .bottom-nav{display:none!important;}
}