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

:root {
  --primary:#a855f7; --primary-light:#c084fc; --primary-dark:#7c3aed;
  --primary-soft:#f5f0ff; --primary-border:#ddd6fe;
  --success:#10B981; --success-soft:#ECFDF5;
  --danger:#EF4444; --danger-soft:#FEF2F2;
  --bg:#faf5ff; --surface:#FFFFFF; --surface-2:#fdf8ff;
  --border:#ede9fe;
  --text:#0F172A; --text-muted:#64748B; --text-light:#94A3B8;
  --shadow-sm:0 1px 4px rgba(168,85,247,0.08),0 1px 2px rgba(0,0,0,0.04);
  --shadow:0 4px 20px rgba(168,85,247,0.12),0 2px 8px rgba(0,0,0,0.05);
  --radius:16px; --radius-sm:10px; --radius-pill:100px;
  --gradient:linear-gradient(135deg,#667eea 0%,#a855f7 50%,#7c3aed 100%);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; font-size:16px; }
body{ font-family:'Plus Jakarta Sans','Segoe UI',sans-serif; background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased; color:var(--text); }
h1,h2,h3{ font-family:'Outfit',sans-serif; font-weight:700; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--primary-border); border-radius:99px; }

/* ══════════════════════════════
   LOGIN
══════════════════════════════ */
#loginWrapper{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--gradient); padding:16px; position:fixed; inset:0; z-index:100;
}
#loginWrapper::before{
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#loginCard{
  background:#fff; border-radius:24px;
  box-shadow:0 24px 60px rgba(0,0,0,0.2);
  width:100%; max-width:400px;
  padding:clamp(28px,6vw,44px) clamp(20px,6vw,40px);
  position:relative; animation:slideUp 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes slideUp{ from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.logo-area{ text-align:center; margin-bottom:28px; }
.logo-glow{ position:relative; display:inline-block; }
.logo-glow::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); width:110px; height:110px; background:radial-gradient(circle,rgba(100,149,237,0.4) 0%,transparent 70%); border-radius:50%; z-index:0; }
.logo-star{ font-size:clamp(36px,8vw,44px); position:relative; z-index:1; display:block; line-height:1; margin-bottom:8px; filter:drop-shadow(0 0 12px rgba(100,149,237,0.9)); }
.logo-line{ width:52px; height:2px; background:linear-gradient(to right,transparent,rgba(100,149,237,0.7),transparent); margin:10px auto 0; }
#loginCard h1.login-title{ font-size:11px; font-weight:700; letter-spacing:5px; text-transform:uppercase; color:#6495ED; text-align:center; margin-bottom:2px; }
#loginCard h2.brand-name{ font-family:'Syne',sans-serif; font-size:clamp(26px,6vw,32px); font-weight:800; color:#1a2a4a; text-align:center; letter-spacing:1px; }
#loginCard .login-subtitle{ text-align:center; color:#7a99c8; font-size:13px; margin-top:6px; margin-bottom:28px; }
#loginCard .form-group{ margin-bottom:16px; }
#loginCard label{ display:block; margin-bottom:6px; color:#3a5a8a; font-weight:600; font-size:13px; }
#loginCard input{ width:100%; padding:13px 16px; border-radius:10px; font-size:16px; font-family:'Plus Jakarta Sans',sans-serif; background:#f4f8ff; border:1.5px solid #c5d8f8; color:#1a2a4a; transition:all 0.2s; }
#loginCard input:focus{ outline:none; border-color:#6495ED; background:#fff; box-shadow:0 0 0 4px rgba(100,149,237,0.12); }
#loginCard input::placeholder{ color:#a0bcd8; }
#loginCard .login-btn{ width:100%; padding:14px; font-size:16px; font-weight:700; border:none; border-radius:12px; cursor:pointer; background:var(--gradient); color:#fff; box-shadow:0 6px 20px rgba(168,85,247,0.4); margin-top:6px; transition:all 0.25s; font-family:'Plus Jakarta Sans',sans-serif; }
#loginCard .login-btn:active{ transform:scale(0.98); }

/* ══════════════════════════════
   CONTAINER & HEADER
══════════════════════════════ */
.container{ max-width:980px; margin:0 auto; padding:12px; animation:fadeUp 0.35s ease; }
@media(min-width:600px){ .container{ padding:20px; } }
@media(min-width:960px){ .container{ padding:24px 20px; } }
@keyframes fadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.header{
  background:var(--surface); border-radius:var(--radius); padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px; box-shadow:var(--shadow-sm); border:1px solid var(--border);
  gap:10px; flex-wrap:wrap;
}
.header-left h1{ font-size:clamp(16px,4vw,20px); color:var(--text); display:flex; align-items:center; gap:6px; }
.header-left h1 span{ color:var(--primary); }
.user-info{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.user-info strong{ color:var(--text); font-weight:600; }

/* ══════════════════════════════
   TABS — horizontal scroll
══════════════════════════════ */
.tabs-wrapper{
  background:var(--surface); border-radius:var(--radius); padding:5px;
  display:flex; gap:3px; margin-bottom:14px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.tabs-wrapper::-webkit-scrollbar{ display:none; }
.tab{
  padding:8px 13px; cursor:pointer; border:none; background:transparent;
  color:var(--text-muted); font-size:13px; font-weight:500;
  border-radius:8px; transition:all 0.2s; white-space:nowrap;
  box-shadow:none; min-height:34px; font-family:'Plus Jakarta Sans',sans-serif;
  text-decoration:none; display:inline-flex; align-items:center; gap:4px;
  scroll-snap-align:start; flex-shrink:0;
}
.tab:hover{ background:var(--primary-soft); color:var(--primary); }
.tab.active{ background:var(--gradient); color:white; box-shadow:0 3px 10px rgba(168,85,247,0.35); font-weight:600; }

/* ══════════════════════════════
   SECTION CARDS
══════════════════════════════ */
.section-card{ background:var(--surface); border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
@media(min-width:600px){ .section-card{ padding:22px; } }
@media(min-width:960px){ .section-card{ padding:24px; } }
.section-card h2{ font-size:16px; color:var(--text); margin-bottom:16px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

/* Summary hero */
.summary-card{ background:var(--gradient); border-radius:var(--radius); padding:20px; margin-bottom:12px; position:relative; overflow:hidden; }
.summary-card::before{ content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px; background:rgba(255,255,255,0.06); border-radius:50%; }
.summary-card::after{ content:''; position:absolute; bottom:-50px; left:-20px; width:180px; height:180px; background:rgba(255,255,255,0.04); border-radius:50%; }
.summary-card h2{ color:rgba(255,255,255,0.9); font-size:16px; margin-bottom:14px; position:relative; z-index:1; }
.summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative; z-index:1; }
@media(min-width:500px){ .summary-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:700px){ .summary-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); } }
.summary-item{ background:rgba(255,255,255,0.14); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.2); padding:13px; border-radius:10px; }
.summary-label{ font-size:10px; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.7px; font-weight:700; }
.summary-value{ font-size:clamp(17px,4vw,22px); font-weight:700; color:white; margin-top:5px; font-family:'Outfit',sans-serif; }

/* ══════════════════════════════
   FORMS
══════════════════════════════ */
.form-group{ margin-bottom:14px; }
label{ display:block; margin-bottom:5px; color:var(--text); font-weight:600; font-size:13px; }
input,select,textarea{ width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:16px; font-family:'Plus Jakarta Sans',sans-serif; background:var(--surface); color:var(--text); transition:all 0.2s; -webkit-appearance:none; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(168,85,247,0.1); background:#fff; }
input::placeholder,textarea::placeholder{ color:var(--text-light); }

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
button{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px; cursor:pointer; border:none; border-radius:var(--radius-sm); padding:11px 20px; transition:all 0.2s; min-height:44px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; background:var(--gradient); color:white; box-shadow:0 3px 10px rgba(168,85,247,0.28); width:100%; }
button:active{ transform:scale(0.97); opacity:0.9; }
button:disabled{ opacity:0.5; cursor:not-allowed; }
.btn-secondary{ background:var(--surface); color:var(--text-muted); border:1.5px solid var(--border); box-shadow:none; }
.btn-danger{ background:linear-gradient(135deg,#F43F5E,var(--danger)); color:white; box-shadow:0 3px 10px rgba(239,68,68,0.25); }
.btn-success{ background:linear-gradient(135deg,#34D399,var(--success)); color:white; box-shadow:0 3px 10px rgba(16,185,129,0.25); }
.btn-logout{ background:var(--gradient); color:#fff; font-weight:700; box-shadow:0 3px 14px rgba(168,85,247,0.35); }
.btn-inline{ width:auto; min-height:36px; padding:8px 16px; font-size:13px; }

/* ══════════════════════════════
   ALERTS
══════════════════════════════ */
.alert{ padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:12px; font-size:14px; font-weight:500; display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
.alert-success{ background:var(--success-soft); color:#065F46; border:1px solid #A7F3D0; }
.alert-error{ background:var(--danger-soft); color:#991B1B; border:1px solid #FECACA; }

/* ══════════════════════════════
   EXPENSE CARDS
══════════════════════════════ */
.expense-card{ background:var(--surface); border:1.5px solid var(--border); padding:13px 15px; border-radius:12px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; transition:all 0.2s; gap:12px; }
.expense-card:active{ transform:scale(0.99); }
.expense-amount{ font-size:17px; font-weight:700; color:var(--primary); font-family:'Outfit',sans-serif; white-space:nowrap; }
.expense-details{ color:var(--text-muted); font-size:12px; margin-top:3px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.expense-actions{ display:flex; gap:7px; flex-shrink:0; }
.expense-actions a,.expense-actions button{ padding:7px 12px; font-size:12px; min-height:34px; width:auto; }
.cat-pill{ display:inline-flex; align-items:center; background:var(--primary-soft); color:var(--primary); border-radius:var(--radius-pill); padding:2px 9px; font-size:11px; font-weight:600; }

/* Filter */
.filter-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.filter-grid-btn{ display:flex; gap:8px; margin-top:10px; }
.filter-stat-label{ color:var(--text-muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
.filter-stat-value{ font-size:20px; font-weight:700; color:var(--primary); font-family:'Outfit',sans-serif; margin-top:3px; }

/* ══════════════════════════════
   TABLE
══════════════════════════════ */
.balance-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); border:1px solid var(--border); }
table{ width:100%; border-collapse:collapse; min-width:400px; }
th,td{ padding:11px 14px; text-align:left; }
thead tr{ border-bottom:2px solid var(--border); background:var(--surface-2); }
th{ font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); font-weight:700; }
td{ font-size:13px; color:var(--text); border-bottom:1px solid var(--border); }
tbody tr:hover td{ background:var(--surface-2); }
tbody tr:last-child td{ border-bottom:none; }
.balance-row-positive td:last-child{ color:var(--success); font-weight:700; }
.balance-row-negative td:last-child{ color:var(--danger); font-weight:700; }

/* ══════════════════════════════
   BADGES
══════════════════════════════ */
.badge{ background:var(--primary-soft); color:var(--primary); padding:3px 10px; border-radius:var(--radius-pill); font-size:11px; font-weight:700; display:inline-block; }
.badge-danger{ background:var(--danger-soft); color:var(--danger); }
.badge-success{ background:var(--success-soft); color:var(--success); }

/* User cards */
.user-card{ background:var(--surface); border:1.5px solid var(--border); padding:14px; border-radius:12px; margin-bottom:10px; transition:all 0.2s; }
.user-card-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.user-card strong{ color:var(--text); font-weight:700; font-size:14px; }
.user-card-meta{ color:var(--text-muted); font-size:12px; margin-top:7px; }
.absence-indicator{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.present{ background:var(--success); }
.absent{ background:var(--danger); }

/* Cat bars */
.cat-bar-wrap{ margin-bottom:13px; }
.cat-bar-label{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; font-weight:500; }
.cat-bar-track{ height:7px; background:var(--border); border-radius:99px; overflow:hidden; }
.cat-bar-fill{ height:100%; border-radius:99px; background:var(--gradient); transition:width 0.7s ease; }

/* Empty state */
.empty-state{ text-align:center; padding:44px 20px; color:var(--text-muted); }
.empty-state .empty-icon{ font-size:40px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; line-height:1.6; }

/* Danger zone */
.danger-zone{ background:#FFF1F2; border:1.5px solid #FECDD3; border-radius:var(--radius-sm); padding:16px; }
.danger-zone p{ color:#9F1239; font-size:13px; margin-bottom:12px; font-weight:500; line-height:1.5; }

/* ══════════════════════════════
   MOBILE — phones first
══════════════════════════════ */
@media(max-width:599px){
  /* Header */
  .header{ padding:12px 14px; }
  .btn-logout{ padding:9px 16px; font-size:13px; min-height:38px; }

  /* Expense cards stack */
  .expense-card{ flex-direction:column; align-items:flex-start; gap:10px; }
  .expense-actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .expense-actions a,.expense-actions button{ width:100%; text-align:center; justify-content:center; }

  /* Filter */
  .filter-grid{ grid-template-columns:1fr; }
  .filter-grid-btn{ flex-direction:column; }

  /* Summary */
  .summary-grid{ grid-template-columns:1fr 1fr; }

  /* Table → card view */
  .balance-table-wrap{ border:none; }
  table{ min-width:unset; }
  thead{ display:none; }
  tbody tr{ display:block; margin-bottom:10px; border:1.5px solid var(--border); border-radius:12px; padding:12px; background:var(--surface); }
  td{ display:flex; justify-content:space-between; border:none; padding:5px 0; font-size:13px; }
  td::before{ content:attr(data-label); font-weight:700; color:var(--primary); font-size:11px; text-transform:uppercase; letter-spacing:0.4px; flex-shrink:0; margin-right:8px; padding-top:1px; }

  /* User management grid */
  .user-card-header{ flex-direction:column; align-items:flex-start; }
  .user-card .actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }

  /* Login */
  #loginCard{ border-radius:20px; }
}

/* ══════════════════════════════
   TABLET
══════════════════════════════ */
@media(min-width:600px) and (max-width:899px){
  .summary-grid{ grid-template-columns:repeat(3,1fr); }
  .expense-card{ flex-wrap:wrap; }
  .filter-grid{ grid-template-columns:1fr 1fr auto auto; }
}

/* ══════════════════════════════
   DESKTOP
══════════════════════════════ */
@media(min-width:900px){
  button{ width:auto; }
  .btn-full{ width:100%; }
  .filter-grid{ grid-template-columns:1fr 1fr auto auto; }
  .summary-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
  .section-card:hover{ box-shadow:var(--shadow); }
  .expense-card:hover{ border-color:var(--primary-border); box-shadow:var(--shadow); transform:translateY(-1px); }
  .user-card:hover{ border-color:var(--primary-border); box-shadow:var(--shadow-sm); }
}