/* ============================================================
   BAWSALA — DASHBOARD CSS (User + Admin)
   ============================================================ */

/* ===== SHARED DASHBOARD LAYOUT ===== */
.dash-wrap{
  display:flex;min-height:100vh;
  background:var(--bg);
}

/* ===== SIDEBAR ===== */
.sidebar{
  width:240px;flex-shrink:0;
  min-height:100vh;position:fixed;top:0;right:0;
  display:flex;flex-direction:column;
  z-index:100;overflow-y:auto;
  transition:width .3s var(--ease);
}
.user-sidebar{
  background:var(--surface2);
  border-left:1px solid var(--border);
}
.admin-sidebar{
  background:linear-gradient(180deg,#071e1b 0%,#0b2e2a 40%,#0f3833 100%);
  border-left:1px solid rgba(42,138,130,.18);
}
.sidebar-logo{
  padding:22px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:11px;flex-shrink:0;
}
.admin-sidebar .sidebar-logo{border-bottom-color:rgba(255,255,255,.08)}
.sidebar-logo-text{font-size:13px;font-weight:800}
.admin-sidebar .sidebar-logo-text{color:#fff}

.sidebar-nav{padding:14px 10px;flex:1}
.nav-group-lbl{
  font-size:10px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;padding:10px 12px 5px;
  color:var(--text3);margin-top:6px;
}
.admin-sidebar .nav-group-lbl{color:rgba(255,255,255,.33)}
.s-link{
  display:flex;align-items:center;gap:11px;
  padding:10px 13px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:var(--tr);margin-bottom:2px;color:var(--text2);
  border:none;background:none;width:100%;text-align:right;
  font-family:var(--font-body);
}
.s-link i{width:17px;text-align:center;font-size:14px;flex-shrink:0}
.s-link:hover,.s-link.active{background:var(--glass-teal);color:var(--t2)}

.admin-sidebar .s-link{color:rgba(255,255,255,.62)}
.admin-sidebar .s-link:hover,.admin-sidebar .s-link.active{
  background:rgba(42,138,130,.16);color:#fff;
}
.admin-sidebar .nav-group-lbl{color:rgba(255,255,255,.28)}
.s-link.s-danger{color:rgba(239,68,68,.7)}
.s-link.s-danger:hover{background:rgba(239,68,68,.10);color:#ef4444}

/* ===== MAIN CONTENT ===== */
.dash-main{
  flex:1;margin-right:240px;
  display:flex;flex-direction:column;min-height:100vh;
}

/* ===== TOPBAR ===== */
.dash-topbar{
  background:var(--surface2);border-bottom:1px solid var(--border);
  padding:14px clamp(16px,3vw,36px);
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(16px);
}
.dash-topbar h2{font-size:17px;font-weight:800}
.dash-topbar p{font-size:12px;color:var(--text3)}
.topbar-actions{display:flex;gap:9px;align-items:center}
.user-chip{
  display:flex;align-items:center;gap:9px;
  padding:6px 12px 6px 8px;border-radius:var(--r-sm);
  background:var(--glass-teal);border:1px solid var(--border);
  font-size:13px;font-weight:600;cursor:pointer;transition:var(--tr);
}
.user-chip:hover{background:rgba(42,138,130,.14)}
.user-dot{
  width:30px;height:30px;border-radius:50%;
  background:var(--g-brand);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:700;
}

/* ===== DASH CONTENT ===== */
.dash-content{padding:clamp(16px,3vw,36px);flex:1}

/* Stats Row */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:26px}
.stat-card{
  background:var(--g-card);backdrop-filter:blur(20px);
  border:1px solid var(--border2);border-radius:var(--r-lg);
  padding:20px;display:flex;align-items:center;gap:16px;transition:var(--tr);
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.stat-icon{
  width:46px;height:46px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;
}
.si-teal{background:rgba(24,97,91,.10);color:var(--t3)}
.si-gold{background:rgba(201,168,76,.10);color:var(--go2)}
.si-green{background:rgba(34,197,94,.10);color:#16a34a}
.si-red{background:rgba(239,68,68,.10);color:#dc2626}
.si-blue{background:rgba(59,130,246,.10);color:#2563eb}
.si-purple{background:rgba(139,92,246,.10);color:#7c3aed}
.stat-info .num{font-size:1.7rem;font-weight:900;line-height:1}
.stat-info .lbl{font-size:11px;color:var(--text3);margin-top:3px}

/* Table wrap — always scrollable */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-md);
}
.table-wrap table{ width:100%;border-collapse:collapse; }
.table-wrap thead th{
  padding:10px 14px;text-align:right;
  font-size:11px;font-weight:700;letter-spacing:.4px;
  color:var(--text3);white-space:nowrap;
  border-bottom:1px solid var(--border);
  background:var(--glass-teal);
}
.table-wrap tbody td{ padding:11px 14px;vertical-align:middle; }
.table-wrap tbody tr{ border-bottom:1px solid var(--border);transition:background .15s; }
.table-wrap tbody tr:last-child{ border-bottom:none; }
.table-wrap tbody tr:hover{ background:var(--glass-teal); }

/* Panel */
.panel{
  background:var(--g-card);backdrop-filter:blur(20px);
  border:1px solid var(--border2);border-radius:var(--r-lg);
  margin-bottom:20px;
}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 22px;border-bottom:1px solid var(--border);
}
.panel-head h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.panel-head h3 i{color:var(--t3)}
.panel-body{padding:20px 22px}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.panel-grid{grid-template-columns:1fr}}

/* Member Detail */
.member-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.detail-item{background:var(--glass-teal);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px}
.detail-item .lbl{font-size:11px;color:var(--text3);font-weight:600;margin-bottom:4px}
.detail-item .val{font-size:14px;font-weight:700}

/* Member Card in Dashboard */
.dash-card-wrap{max-width:360px;margin:0 auto 24px}

/* Volunteer Hours */
.vol-hours{
  background:var(--g-brand);border-radius:var(--r-lg);
  padding:22px;color:#fff;display:flex;align-items:center;gap:18px;margin-bottom:20px;
  flex-wrap:wrap;
}
.vol-hours-stat{ display:flex;flex-direction:column; }
.vol-hours-num{font-size:3rem;font-weight:900;line-height:1}
.vol-hours-sub{font-size:12px;opacity:.75;margin-top:4px}
.vol-hours-info{
  flex:1;border-right:1px solid rgba(255,255,255,.18);padding-right:18px;
  min-width:120px;
}
.vol-hours-btn{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  white-space:nowrap;
}
.vol-hours-info p{color:rgba(255,255,255,.75);font-size:13px}

/* File Upload */
.file-drop{
  border:2px dashed var(--border);border-radius:var(--r-lg);
  padding:32px;text-align:center;cursor:pointer;
  transition:var(--tr);background:var(--glass-teal);
}
.file-drop:hover{border-color:var(--t3);background:rgba(42,138,130,.08)}
.file-drop i{font-size:2.2rem;color:var(--t3);margin-bottom:10px}
.file-drop p{font-size:13px;color:var(--text2)}
.file-drop small{font-size:11px;color:var(--text3)}

/* Tab system */
.tab-list{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:24px;flex-wrap:wrap}
.tab-btn{
  padding:9px 18px;border:none;background:none;
  font-family:var(--font-body);font-weight:700;font-size:13px;
  color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;
  margin-bottom:-2px;transition:var(--tr);border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.tab-btn:hover{color:var(--t2);background:var(--glass-teal)}
.tab-btn.active{color:var(--t2);border-bottom-color:var(--t3);background:var(--glass-teal)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Empty State */
.empty-state{
  text-align:center;padding:52px 20px;color:var(--text3);
}
.empty-state i{font-size:2.8rem;margin-bottom:12px;opacity:.4}
.empty-state p{font-size:14px}

/* Import/Export area */
.excel-actions{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px;
}
.excel-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-sm);
  font-size:13px;font-weight:700;cursor:pointer;
  transition:var(--tr);border:none;font-family:var(--font-body);
}
.excel-export{background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.25);color:#16a34a}
.excel-import{background:rgba(59,130,246,.09);border:1px solid rgba(59,130,246,.25);color:#2563eb}
.excel-template{background:rgba(234,179,8,.09);border:1px solid rgba(234,179,8,.25);color:#ca8a04}
.excel-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}

/* Info expand (before approve/reject) */
.expand-info{
  background:var(--glass-teal);border:1px solid var(--border);
  border-radius:var(--r-md);padding:18px;margin-top:12px;
  font-size:13px;
}
.expand-info .info-row{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.expand-info .info-row:last-child{border-bottom:none}
.expand-info .info-row .key{color:var(--text3);font-weight:700;min-width:130px;flex-shrink:0}
.expand-info .info-row .val{color:var(--text1);font-weight:600}

/* Admin Quick Notif */
.quick-notif{
  background:var(--g-card);backdrop-filter:blur(20px);
  border:1px solid var(--border2);border-radius:var(--r-lg);
  padding:20px;margin-bottom:20px;
}
.quick-notif h4{font-size:14px;font-weight:700;margin-bottom:14px}

/* Site settings highlight */
.settings-section{
  border-bottom:1px solid var(--border);padding-bottom:22px;margin-bottom:22px;
}
.settings-section:last-child{border-bottom:none;margin-bottom:0}
.settings-section h4{font-size:14px;font-weight:700;margin-bottom:16px;color:var(--t3)}

/* Popup admin controls */
.popup-preview-wrap{
  background:var(--glass-teal);border:2px dashed var(--border);
  border-radius:var(--r-lg);padding:24px;text-align:center;
}

/* ===== STAT LOADING ANIMATION ===== */
@keyframes shimmer {
  0%{background-position:200% 0}100%{background-position:-200% 0}
}
.stat-info .num[data-loading="true"] {
  background:linear-gradient(90deg,var(--border) 25%,var(--glass-teal) 50%,var(--border) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:6px;color:transparent;min-width:40px;
}

/* ===== PILL FILTER ===== */
.pill{
  padding:6px 16px;border-radius:20px;border:1.5px solid var(--border);
  background:transparent;font-family:var(--font-body);font-weight:700;
  font-size:12px;color:var(--text3);cursor:pointer;transition:var(--tr);
}
.pill:hover{border-color:var(--t3);color:var(--t2)}
.pill.active{background:var(--glass-teal);border-color:var(--t3);color:var(--t2)}

/* ===== IMPROVED STAT CARDS ===== */
.stat-card{position:relative;overflow:hidden}
.stat-card::before{
  content:'';position:absolute;top:-50%;left:-50%;
  width:200%;height:200%;
  background:radial-gradient(circle,rgba(42,138,130,0.04) 0%,transparent 70%);
  pointer-events:none;
}
.stat-info .num{
  font-size:1.8rem;font-weight:900;line-height:1;
  background:var(--g-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ===== IMPROVED TABLE ===== */
tbody tr{transition:background .15s,transform .1s}
tbody tr:hover{background:var(--glass-teal);transform:scale(1.001)}

/* ===== PANEL ENHANCEMENTS ===== */
.panel{transition:box-shadow .3s}
.panel:hover{box-shadow:var(--sh-sm)}
.panel-head{background:linear-gradient(to left,transparent,var(--glass-teal))}

/* ===== ADMIN SIDEBAR ACTIVE INDICATOR ===== */
.admin-sidebar .s-link.active {
  background:rgba(42,138,130,.20);
  border-right:3px solid var(--t4);
  color:#fff;
}

/* ===== IMPROVED TOPBAR ===== */
.dash-topbar{box-shadow:0 1px 0 var(--border),var(--sh-sm)}

/* ===== HAMBURGER BUTTON ===== */
.hamburger-btn{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:var(--glass-teal);border:1px solid var(--border);
  cursor:pointer;font-size:17px;color:var(--text1);
  flex-shrink:0;transition:var(--tr);
}
.hamburger-btn:hover{ background:rgba(42,138,130,.14); }

/* ===== SIDEBAR OVERLAY (mobile) ===== */
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:199;
  backdrop-filter:blur(3px);
}
.sidebar-overlay.open{ display:block; }

/* ===== OVERFLOW GUARD ===== */
.dash-wrap{ overflow-x:hidden;max-width:100vw; }
.dash-main{ min-width:0; }
.dash-content{ min-width:0;overflow-x:hidden; }
.panel-grid > *,.stat-row > *{ min-width:0; }

/* ===== RESPONSIVE — 900px (tablets + all phones) ===== */
@media(max-width:900px){

  /* Sidebar slide-in */
  .hamburger-btn{ display:flex; }
  .sidebar{
    display:flex !important;
    position:fixed;top:0;right:0;
    height:100dvh;width:280px;z-index:200;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    will-change:transform;box-shadow:none;
  }
  .sidebar.open{
    transform:translateX(0);
    box-shadow:-8px 0 32px rgba(0,0,0,.28);
  }
  .dash-main{ margin-right:0 !important; }

  /* Topbar: compact */
  .dash-topbar{ padding:10px 14px !important;gap:8px; }
  .dash-topbar h2{ font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px; }
  .dash-topbar p{ display:none !important; }
  .topbar-actions{ gap:6px;flex-shrink:0; }
  .hide-mobile{ display:none !important; }
  .user-chip{ padding:5px 7px;gap:5px; }

  /* Content */
  .dash-content{ padding:12px !important; }

  /* Stats */
  .stat-row{ grid-template-columns:repeat(2,1fr) !important;gap:10px;margin-bottom:16px; }
  .stat-card{ padding:14px 12px;gap:10px; }
  .stat-icon{ width:38px;height:38px;font-size:16px; }
  .stat-info .num{ font-size:1.4rem; }
  .stat-info .lbl{ font-size:10px; }

  /* Panels */
  .panel-grid{ grid-template-columns:1fr !important;gap:14px; }
  .panel{ margin-bottom:14px; }
  .panel-head{
    padding:12px 16px !important;
    flex-wrap:wrap;gap:8px;
  }
  .panel-head h3{ font-size:13px; }
  .panel-body{ padding:14px 16px !important; }

  /* Tables — always scroll horizontally */
  .table-wrap{ overflow-x:auto;-webkit-overflow-scrolling:touch; }
  .table-wrap table{ min-width:420px; }
  .table-wrap th,.table-wrap td{ padding:8px 10px;white-space:nowrap;font-size:12px; }

  /* Forms */
  .form-row{ grid-template-columns:1fr !important; }
  .member-detail-grid{ grid-template-columns:1fr 1fr; }

  /* Tabs: horizontal scroll, no wrap */
  .tab-list{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap !important;
    scrollbar-width:none;padding-bottom:2px;
  }
  .tab-list::-webkit-scrollbar{ display:none; }
  .tab-btn{ white-space:nowrap;padding:8px 14px;font-size:12px; }

  /* Volunteer hours */
  .vol-hours{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
    padding:18px !important;
  }
  .vol-hours-info{
    border-right:none !important;
    border-top:1px solid rgba(255,255,255,.15);
    padding-right:0 !important;
    padding-top:12px;
    width:100%;
  }
  .vol-hours-btn{ width:100%;justify-content:center; }

  /* Excel / action buttons */
  .excel-actions{ gap:8px; }
  .excel-btn{ padding:8px 12px;font-size:12px; }

  /* Pill row */
  [style*="display:flex"][style*="gap:8px"] .pill,
  .pill{ font-size:11px;padding:5px 12px; }

  /* Expand info */
  .expand-info .info-row{ flex-direction:column;gap:3px; }
  .expand-info .info-row .key{ min-width:unset; }

  /* Modals: slide up from bottom */
  .modal-overlay{ padding:0 !important;align-items:flex-end; }
  .modal{
    border-radius:var(--r-xl) var(--r-xl) 0 0 !important;
    max-height:92dvh;overflow-y:auto;
    padding:22px 18px !important;
    width:100% !important;max-width:100% !important;
    transform:translateY(40px) !important;
  }
  .modal-overlay.open .modal{ transform:translateY(0) !important; }
  .modal-lg{ max-width:100% !important; }
  .modal-header h3{ font-size:16px; }
}

/* ===== RESPONSIVE — 480px (phones) ===== */
@media(max-width:480px){
  .member-detail-grid{ grid-template-columns:1fr !important; }
  .sidebar{ width:290px; }
  .stat-card{ padding:12px 10px;gap:8px; }
  .stat-icon{ width:34px;height:34px;font-size:14px; }
  .stat-info .num{ font-size:1.3rem; }
  .dash-content{ padding:10px !important; }
  .panel-head{ padding:10px 12px !important; }
  .panel-body{ padding:12px !important; }
  .excel-actions{ flex-direction:column;align-items:stretch; }
  .excel-btn{ justify-content:center; }
}

/* ===== RESPONSIVE — 360px (small phones) ===== */
@media(max-width:360px){
  .stat-row{ grid-template-columns:1fr !important; }
  .sidebar{ width:100vw; }
  .dash-topbar h2{ max-width:120px;font-size:14px; }
  .stat-card{ padding:10px;gap:8px; }
  .stat-icon{ width:32px;height:32px;font-size:13px; }
}