/* ============================================================
   DYMAXION GYM — style.css
   Theme: Deep brown sidebar + warm orange accents on cream bg
   Fonts: Plus Jakarta Sans (headings) + Nunito (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Nunito:wght@400;500;600;700&display=swap');

/* ── Brand Palette ─────────────────────────────────────────── */
:root {
  --primary:       #7c2d12;
  --primary-dark:  #6b2110;
  --primary-light: #9a3412;
  --sidebar:       #431407;
  --sidebar-hover: #5c1d0a;
  --accent:        #fb923c;
  --accent-dark:   #f97316;
  --accent-glow:   rgba(251,146,60,.15);
  --hover:         #9a3412;
  --bg:            #fff7ed;
  --bg2:           #fef3e2;
  --card:          #ffffff;
  --border:        #fed7aa;
  --border-light:  #ffedd5;
  --text:          #1c0a00;
  --text-muted:    #92400e;
  --text-light:    #c2805a;
  --sidebar-text:  #fed7aa;
  --sidebar-muted: #c2722a;
  --success:       #15803d;
  --success-bg:    #f0fdf4;
  --danger:        #b91c1c;
  --danger-bg:     #fef2f2;
  --warning:       #b45309;
  --warning-bg:    #fffbeb;
  --info:          #0e7490;
  --info-bg:       #ecfeff;
  --topbar-h:      56px;
  --sidebar-w:     252px;
  --radius:        10px;
  --radius-sm:     7px;
  --shadow:        0 1px 8px rgba(124,45,18,.07);
  --shadow-md:     0 4px 18px rgba(124,45,18,.11);
  --shadow-lg:     0 8px 32px rgba(124,45,18,.15);
}

/* ── Reset / Base ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--text);
}

/* ════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════ */
.dashboard-layout { display:flex; min-height:100vh; }

/* ════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar);
  position: fixed; top:0; left:0;
  height: 100vh; z-index:1000;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  transition: width .28s ease, left .28s ease;
  scrollbar-width: thin;
  scrollbar-color: #5c1d0a transparent;
}
.sidebar::-webkit-scrollbar { width:3px; }
.sidebar::-webkit-scrollbar-thumb { background:#5c1d0a; border-radius:3px; }

.sidebar-header {
  display:flex; align-items:center; gap:9px;
  padding:14px 12px 12px;
  border-bottom:1px solid rgba(251,146,60,.13);
  flex-shrink:0;
}

.logo-text {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:13px; color:#fff;
  letter-spacing:.3px; line-height:1.15; white-space:nowrap;
}
.logo-sub {
  font-size:9px; color:var(--sidebar-muted);
  letter-spacing:1.8px; text-transform:uppercase;
}

.sidebar-nav { flex:1; padding:6px 7px 12px; }

/* Section label */
.sidebar-section {
  font-size:9px; font-weight:800;
  letter-spacing:1.6px; text-transform:uppercase;
  color:var(--sidebar-muted); padding:13px 9px 3px;
}

/* Nav links */
.sidebar a {
  display:flex; align-items:center; gap:9px;
  padding:7px 9px; border-radius:var(--radius-sm);
  color:var(--sidebar-text); font-size:12.5px; font-weight:600;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap; border-left:3px solid transparent;
}
.sidebar a i { font-size:14px; width:17px; text-align:center; flex-shrink:0; opacity:.65; transition:opacity .15s; }
.sidebar a:hover { background:var(--sidebar-hover); color:var(--accent); }
.sidebar a:hover i { opacity:1; color:var(--accent); }

/* Active state — orange left border + tinted bg */
.sidebar a.active {
  background:rgba(251,146,60,.16);
  color:var(--accent);
  border-left-color:var(--accent);
}
.sidebar a.active i { opacity:1; color:var(--accent); }

/* Collapsed */
.sidebar.collapsed { width:54px; }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .logo-sub,
.sidebar.collapsed .sidebar-section,
.sidebar.collapsed a span,
.sidebar.collapsed .sidebar-user-info { display:none; }
.sidebar.collapsed a { justify-content:center; padding:8px; border-left:none; }
.sidebar.collapsed a.active { background:rgba(251,146,60,.16); border-bottom:2px solid var(--accent); }
.sidebar.collapsed .sidebar-header { justify-content:center; padding:12px 6px; }
.sidebar.collapsed .sidebar-footer { justify-content:center; }

/* Footer */
.sidebar-footer {
  padding:10px 12px; border-top:1px solid rgba(251,146,60,.11);
  display:flex; align-items:center; gap:9px; flex-shrink:0;
}
.sidebar-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary-light),var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:800; flex-shrink:0;
}
.sidebar-user-name { font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:148px; }
.sidebar-user-role { font-size:9.5px; color:var(--sidebar-muted); }

/* ════════════════════════════════════════════════════
   OVERLAY
   ════════════════════════════════════════════════════ */
.sidebar-overlay {
  position:fixed; inset:0; background:rgba(67,20,7,.52);
  z-index:999; opacity:0; visibility:hidden; transition:opacity .24s;
}
.sidebar-overlay.active { opacity:1; visibility:visible; }

/* ════════════════════════════════════════════════════
   MAIN AREA
   ════════════════════════════════════════════════════ */
.main-area {
  flex:1; margin-left:var(--sidebar-w);
  display:flex; flex-direction:column; min-height:100vh;
  transition:margin-left .28s ease;
}
.main-area.sidebar-collapsed { margin-left:54px; }

/* ════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════ */
.topbar {
  height:var(--topbar-h); background:var(--primary);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; position:sticky; top:0; z-index:100;
  box-shadow:0 2px 10px rgba(67,20,7,.22);
}
.topbar-left,.topbar-right { display:flex; align-items:center; gap:7px; }
.topbar-welcome { font-size:12.5px; color:var(--accent); font-weight:600; }
.topbar-welcome strong { color:#fff; }

/* Toggle btn (shared — used in topbar + sidebar header) */
.toggle-btn {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer; transition:background .14s; flex-shrink:0;
}
.toggle-btn:hover { background:rgba(255,255,255,.18); }

/* Dark version inside sidebar */
.sidebar .toggle-btn {
  border-color:rgba(251,146,60,.18);
  background:transparent; color:var(--sidebar-text);
}
.sidebar .toggle-btn:hover { background:var(--sidebar-hover); }

/* ════════════════════════════════════════════════════
   CONTENT / FOOTER
   ════════════════════════════════════════════════════ */
.content-wrapper { padding:20px 22px; flex:1; }

.site-footer {
  padding:12px 22px; font-size:11.5px; color:var(--text-muted);
  border-top:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:5px;
}
.site-footer a { color:var(--accent-dark); font-weight:700; }
.site-footer a:hover { text-decoration:underline; }

/* ════════════════════════════════════════════════════
   PAGE HEADER
   ════════════════════════════════════════════════════ */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; margin-bottom:18px;
}
.page-title {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:19px; font-weight:800; color:var(--primary);
  display:flex; align-items:center; gap:9px;
}
.page-title-icon {
  width:36px; height:36px;
  background:var(--accent-glow); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-dark); font-size:15px;
}

/* ════════════════════════════════════════════════════
   STAT CARDS  (clean, no icon overload)
   ════════════════════════════════════════════════════ */
.stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow); transition:box-shadow .2s, transform .2s;
  position:relative; overflow:hidden;
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

/* Thin top accent bar */
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--accent);
  border-radius:var(--radius) var(--radius) 0 0;
}
.stat-card.sc-green::before  { background:var(--success); }
.stat-card.sc-red::before    { background:var(--danger); }
.stat-card.sc-blue::before   { background:var(--info); }
.stat-card.sc-brown::before  { background:var(--primary); }

.stat-label {
  font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.9px;
  color:var(--text-muted); margin-bottom:5px;
}
.stat-value {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:30px; font-weight:800; color:var(--primary); line-height:1;
}
.stat-value.v-green  { color:var(--success); }
.stat-value.v-red    { color:var(--danger); }
.stat-value.v-blue   { color:var(--info); }
.stat-value.v-orange { color:var(--accent-dark); }
.stat-sub { font-size:11px; color:var(--text-light); margin-top:4px; }

/* ════════════════════════════════════════════════════
   CARDS (generic)
   ════════════════════════════════════════════════════ */
.card {
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
}

/* ════════════════════════════════════════════════════
   TABLE CARD
   ════════════════════════════════════════════════════ */
.table-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.table { margin:0; font-size:13px; }
.table thead th {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10px; font-weight:800; letter-spacing:.9px;
  text-transform:uppercase; color:var(--text-muted);
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:10px 13px; white-space:nowrap;
}
.table tbody td {
  padding:10px 13px; vertical-align:middle;
  border-bottom:1px solid var(--border-light); color:var(--text); font-size:13px;
}
.table tbody tr:last-child td { border-bottom:none; }
.table tbody tr:hover td { background:var(--bg); }

/* ════════════════════════════════════════════════════
   AVATAR
   ════════════════════════════════════════════════════ */
.avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--border); }
.av-placeholder {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:800; flex-shrink:0;
}

/* ════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════ */
.btn {
  font-family:'Nunito',sans-serif; font-weight:700;
  border-radius:var(--radius-sm); font-size:12.5px;
  transition:all .14s; display:inline-flex; align-items:center; gap:5px;
}
.btn-primary { background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); border-color:var(--primary-dark); color:#fff; }

.btn-accent {
  background:var(--accent); border:none; color:#fff;
  box-shadow:0 3px 9px rgba(251,146,60,.32);
}
.btn-accent:hover {
  background:var(--accent-dark); color:#fff;
  transform:translateY(-1px); box-shadow:0 5px 14px rgba(251,146,60,.38);
}

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

.btn-icon { width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-size:12.5px; gap:0; }

.btn-wa { background:#25d366; color:#fff; border:none; border-radius:var(--radius-sm); }
.btn-wa:hover { background:#1aad54; color:#fff; }

/* ════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════ */
.badge { font-size:10px; font-weight:700; padding:2.5px 7px; border-radius:5px; font-family:'Nunito',sans-serif; }

/* ════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════ */
.form-label { font-size:12px; font-weight:700; color:var(--primary); margin-bottom:3px; }
.form-control,.form-select {
  border-radius:var(--radius-sm); border:1.5px solid var(--border);
  font-size:13px; padding:7px 11px; background:#fff; color:var(--text);
  font-family:'Nunito',sans-serif; transition:border-color .15s, box-shadow .15s;
}
.form-control:focus,.form-select:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(251,146,60,.14); outline:none;
}
.form-control::placeholder { color:var(--text-light); }

/* ════════════════════════════════════════════════════
   FILTER BAR
   ════════════════════════════════════════════════════ */
.filter-bar {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:11px 14px; margin-bottom:14px;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; box-shadow:var(--shadow);
}

/* ════════════════════════════════════════════════════
   CHART CARD
   ════════════════════════════════════════════════════ */
.chart-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); height:100%;
}
.chart-label {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.9px; color:var(--text-muted); margin-bottom:12px;
}

/* ════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════ */
#toast-container {
  position:fixed; top:64px; right:16px;
  z-index:9999; display:flex; flex-direction:column;
  gap:6px; max-width:310px; pointer-events:none;
}
.toast-msg {
  display:flex; align-items:flex-start; gap:9px;
  background:#fff; border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:var(--radius-sm); padding:10px 12px;
  box-shadow:var(--shadow-md); animation:toastIn .26s ease forwards;
  position:relative; pointer-events:all;
}
.toast-msg.success { border-left-color:var(--success); }
.toast-msg.error   { border-left-color:var(--danger); }
.toast-msg.info    { border-left-color:var(--info); }
.toast-msg.warning { border-left-color:var(--warning); }

.toast-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.toast-msg.success .toast-icon { color:var(--success); }
.toast-msg.error   .toast-icon { color:var(--danger); }
.toast-msg.info    .toast-icon { color:var(--info); }
.toast-msg.warning .toast-icon { color:var(--warning); }

.toast-body { flex:1; font-size:12.5px; font-weight:700; color:var(--text); line-height:1.4; }
.toast-close { background:none; border:none; cursor:pointer; color:var(--text-light); font-size:11px; padding:0; }
.toast-progress {
  position:absolute; bottom:0; left:0; height:2px;
  animation:toastProgress 4s linear forwards;
}
.toast-msg.success .toast-progress { background:var(--success); }
.toast-msg.error   .toast-progress { background:var(--danger); }
.toast-msg.info    .toast-progress { background:var(--info); }
.toast-msg.warning .toast-progress { background:var(--warning); }
.toast-msg:not([class*=' ']) .toast-progress { background:var(--accent); }

@keyframes toastIn  { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(18px)} }
@keyframes toastProgress { from{width:100%} to{width:0} }

/* ════════════════════════════════════════════════════
   PROFILE HERO
   ════════════════════════════════════════════════════ */
.profile-hero {
  background:linear-gradient(130deg, var(--sidebar) 0%, var(--primary) 55%, var(--accent-dark) 100%);
  border-radius:var(--radius); padding:24px 22px; color:#fff;
  display:flex; align-items:center; gap:18px; margin-bottom:20px;
}
.profile-hero-img { width:72px; height:72px; border-radius:50%; border:3px solid rgba(251,146,60,.45); object-fit:cover; }
.profile-hero-ph {
  width:72px; height:72px; border-radius:50%;
  border:3px solid rgba(251,146,60,.35);
  background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff;
}

/* ════════════════════════════════════════════════════
   LOGIN PAGE
   ════════════════════════════════════════════════════ */
.login-page { min-height:100vh; display:flex; background:var(--sidebar); }
.login-left {
  flex:1; background-size:cover; background-position:center;
  position:relative; display:flex; flex-direction:column;
  justify-content:flex-end; padding:44px;
}
.login-left::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(67,20,7,.18) 0%, rgba(67,20,7,.80) 100%);
}
.login-left-content { position:relative; z-index:1; color:#fff; }
.login-brand { font-family:'Plus Jakarta Sans',sans-serif; font-size:36px; font-weight:800; line-height:1.05; margin-bottom:8px; }
.login-tagline { font-size:13.5px; color:rgba(255,255,255,.7); margin-bottom:26px; }
.login-stats { display:flex; gap:24px; flex-wrap:wrap; }
.login-stat-val { font-family:'Plus Jakarta Sans',sans-serif; font-size:25px; font-weight:800; color:var(--accent); }
.login-stat-lbl { font-size:10px; color:rgba(255,255,255,.52); text-transform:uppercase; letter-spacing:1px; }

.login-right {
  width:390px; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:38px 34px;
}
.login-form-wrap { width:100%; max-width:318px; }
.login-logo {
  width:44px; height:44px; background:var(--primary); border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:21px; color:var(--accent); margin-bottom:18px;
}
.login-heading { font-family:'Plus Jakarta Sans',sans-serif; font-size:23px; font-weight:800; margin-bottom:4px; color:var(--primary); }
.login-sub { font-size:12.5px; color:var(--text-muted); margin-bottom:22px; }
.login-field { position:relative; margin-bottom:11px; }
.login-field .fi { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:13px; }
.login-field input {
  width:100%; padding:9px 11px 9px 36px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; font-family:'Nunito',sans-serif;
  background:#fafafa; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
.login-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(251,146,60,.14); outline:none; background:#fff; }
.btn-login {
  width:100%; padding:10px; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(135deg, var(--primary), var(--accent-dark));
  color:#fff; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:800;
  cursor:pointer; transition:opacity .15s, transform .15s; margin-top:4px;
}
.btn-login:hover { opacity:.9; transform:translateY(-1px); }
.login-error {
  background:var(--danger-bg); border:1px solid #fca5a5; border-radius:var(--radius-sm);
  padding:9px 12px; font-size:12.5px; color:var(--danger);
  display:flex; align-items:center; gap:7px; margin-bottom:12px;
}

/* ════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════ */
.page-link { border-radius:6px !important; margin:0 2px; font-size:12px; font-weight:700; color:var(--primary); border:1px solid var(--border); }
.page-item.active .page-link { background:var(--primary); border-color:var(--primary); color:#fff; }

/* ════════════════════════════════════════════════════
   ATTENDANCE PILLS
   ════════════════════════════════════════════════════ */
.att-group { display:flex; gap:5px; flex-wrap:nowrap; }
.att-pill input { display:none; }
.att-pill label {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 9px; border-radius:20px; border:1.5px solid var(--border);
  font-size:11px; font-weight:700; cursor:pointer;
  transition:all .12s; white-space:nowrap; color:var(--text-muted);
}
.att-pill.present input:checked + label { background:var(--success-bg); border-color:var(--success); color:var(--success); }
.att-pill.late    input:checked + label { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
.att-pill.absent  input:checked + label { background:var(--danger-bg);  border-color:var(--danger);  color:var(--danger); }

/* ════════════════════════════════════════════════════
   IMPORT PREVIEW
   ════════════════════════════════════════════════════ */
.import-preview { max-height:300px; overflow-y:auto; }
.row-dup { background:rgba(185,28,28,.05) !important; }
.row-new { background:rgba(21,128,61,.04) !important; }
.dup-badge { font-size:10px; font-weight:700; color:var(--danger); background:var(--danger-bg); border:1px solid #fca5a5; border-radius:4px; padding:1px 6px; }
.new-badge { font-size:10px; font-weight:700; color:var(--success); background:var(--success-bg); border:1px solid #86efac; border-radius:4px; padding:1px 6px; }

/* ════════════════════════════════════════════════════
   INFO GRID (detail pages)
   ════════════════════════════════════════════════════ */
.info-grid { display:grid; gap:9px; }
.info-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 13px; }
.info-box .lbl { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--text-muted); margin-bottom:2px; }
.info-box .val { font-size:13.5px; font-weight:700; color:var(--primary); }

/* ════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════ */
.section-divider { border:none; border-top:1px solid var(--border); margin:16px 0; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; }
.dot-green  { background:var(--success); }
.dot-red    { background:var(--danger); }
.dot-orange { background:var(--accent); }

.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state i { font-size:34px; margin-bottom:9px; opacity:.28; display:block; }

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */

/* Tablet & mobile: sidebar hidden off-screen */
@media (max-width:991px) {
  .sidebar {
    left: -260px;
    width: 252px !important; /* always full width when open on mobile */
    transition: left .28s ease;
  }
  .sidebar.mobile-show { left: 0; }

  /* main area takes full width — no margin */
  .main-area {
    margin-left: 0 !important;
    width: 100%;
  }

  /* topbar: reduce padding */
  .topbar { padding: 0 12px; }

  /* table horizontal scroll */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* filter bar stacks */
  .filter-bar { gap: 6px; }
  .filter-bar .form-control,
  .filter-bar .form-select { max-width: 100% !important; width: 100%; }
}

/* Mobile phones */
@media (max-width:768px) {
  .content-wrapper { padding: 12px 12px; }
  .login-left  { display: none; }
  .login-right { width: 100%; padding: 28px 18px; }
  .stat-value  { font-size: 22px; }

  /* stat cards 2-col on phone */
  .row .col-6 .stat-card { padding: 12px 13px; }

  /* charts stack */
  .chart-card canvas { max-height: 180px; }

  /* topbar welcome text hidden on very small */
  .topbar-welcome { display: none !important; }

  /* table font */
  .table tbody td, .table thead th { font-size: 12px; padding: 8px 10px; }

  /* page header */
  .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header > div:last-child { flex-wrap: wrap; }

  /* modal full width */
  .modal-dialog { margin: 8px; }
}

@media (max-width:480px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .att-group  { flex-wrap: wrap; }
  .btn-sm     { font-size: 12px; padding: 5px 9px; }

  /* sidebar footer hides text when sidebar is open */
  .sidebar-user-info { max-width: 130px; }

  /* site footer stacks */
  .site-footer { flex-direction: column; text-align: center; gap: 3px; }
}