/* =========================================================
   CYBERTECH — Student Dashboard styles
   Extends the site's existing "Ledger" design system (style.css).
   Reuses --ink / --paper / --red / --rule tokens already defined there.
   ========================================================= */

body.dash-body{ min-height:100vh; }
body.dash-body::before{ z-index:0; } /* keep site's paper-grain texture behind dashboard content */

/* ===== AUTH PAGES (login / change password) ===== */
.auth-shell{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px;
  position:relative; z-index:2;
}
.auth-card{
  width:100%; max-width:440px;
  background:var(--paper-light); border:1px solid var(--rule);
  border-radius:2px; padding:44px 40px;
  box-shadow:5px 5px 0 var(--ink);
}
.auth-brand{ display:block; margin-bottom:24px; }
.auth-brand img{ height:38px; }
.auth-card h1{ font-size:1.7rem; margin:14px 0 12px; }
.auth-card .lede{ font-size:14.5px; color:var(--ink-soft); margin:0 0 30px; line-height:1.65; }
.auth-form{ margin-top:6px; }
.auth-submit{ width:100%; justify-content:center; margin-top:6px; }
.auth-help{ font-size:13px; color:var(--ink-soft); margin:24px 0 6px; text-align:center; }
.auth-back{
  display:block; text-align:center; font-size:13px; font-weight:600;
  text-decoration:none; color:var(--ink); border-bottom:none;
}
.auth-back:hover{ color:var(--red-deep); }

.dash-lang-toggle{
  position:fixed; top:20px; right:20px; z-index:20;
}

.form-error{
  background:rgba(213,56,42,0.08); border:1px solid rgba(213,56,42,0.3);
  color:var(--red-deep); font-size:13.5px; padding:12px 14px;
  border-radius:2px; margin:4px 0 18px; line-height:1.5;
}
.form-success{
  background:rgba(91,94,98,0.08); border:1px solid var(--rule);
  color:var(--ink); font-size:13.5px; padding:12px 14px;
  border-radius:2px; margin:4px 0 18px; line-height:1.5;
}

/* ===== DASHBOARD NAV ===== */
.dash-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 48px; background:rgba(243,238,225,0.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);
  position:relative; z-index:10;
}
.dash-nav-right{ display:flex; align-items:center; gap:10px; }
.dash-logout{ font-size:13.5px; }

/* ===== DASHBOARD MAIN ===== */
.dash-main{
  max-width:1080px; margin:0 auto; padding:48px 32px 90px;
  position:relative; z-index:2;
}
.dash-state{ text-align:center; padding:120px 20px; color:var(--ink-soft); }
.dash-state p{ margin-bottom:20px; }

.dash-header{ margin-bottom:36px; }
.dash-header h1{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin:14px 0 16px; }
.dash-id-row{ display:flex; gap:10px; flex-wrap:wrap; }
.dash-id-row .tag{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em;
  border:1px solid var(--rule); background:var(--paper-light);
  color:var(--ink-soft); padding:5px 12px; border-radius:2px;
}
#statusTag[data-status="active"]{ border-color:var(--red); color:var(--red-deep); }
#statusTag[data-status="completed"]{ border-color:var(--teal); color:var(--teal); }
#statusTag[data-status="on_hold"]{ border-color:var(--brass); color:var(--brass); }
#statusTag[data-status="dropped"]{ border-color:var(--ink-faint); color:var(--ink-faint); }

/* ===== CARD GRID ===== */
.dash-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px;
}
.dash-card{
  background:var(--paper-light); border:1px solid var(--rule); border-radius:2px;
  padding:30px 28px; box-shadow:3px 3px 0 var(--ink);
}
.dash-card-head{ margin-bottom:22px; }
.dash-card-head .code{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em;
  color:var(--red-deep); margin-bottom:8px;
}
.dash-card-head h3{ font-size:1.25rem; }

.dash-meta-rows{ margin-bottom:24px; }
.dash-meta-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 0; border-bottom:1px dashed var(--rule-soft); font-size:13.5px;
}
.dash-meta-row:last-child{ border-bottom:none; }
.dash-meta-row span{ color:var(--ink-soft); }
.dash-meta-row strong{ font-weight:600; text-align:right; }

.dash-days-block{
  text-align:center; padding:26px 10px; margin-bottom:22px;
  background:var(--ink); border-radius:2px; color:var(--paper-light);
}
.dash-days-num{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:2.6rem;
  color:var(--brass-light); font-variant-numeric:tabular-nums; line-height:1;
}
.dash-days-label{ font-size:12.5px; color:rgba(243,238,225,0.75); margin-top:8px; letter-spacing:0.02em; }
.dash-days-block[data-state="overdue"]{ background:var(--red-deep); }
.dash-days-block[data-state="overdue"] .dash-days-num{ color:#fff; }
.dash-days-block[data-state="overdue"] .dash-days-label{ color:rgba(255,255,255,0.85); }
.dash-days-block[data-state="completed"]{ background:var(--teal); }
.dash-days-block[data-state="completed"] .dash-days-num{ color:#fff; }
.dash-days-block[data-state="completed"] .dash-days-label{ color:rgba(255,255,255,0.9); }

.dash-progress-wrap{ margin-top:4px; }
.dash-progress-labels{
  display:flex; justify-content:space-between; font-size:12px;
  color:var(--ink-soft); margin-bottom:8px;
  font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;
}
.dash-progress-track{
  height:8px; border-radius:6px; background:var(--rule-soft); overflow:hidden;
}
.dash-progress-fill{
  height:100%; background:linear-gradient(90deg, var(--red-deep), var(--red));
  border-radius:6px; transition:width .6s var(--ease-out);
}
.dash-progress-fill.money{ background:linear-gradient(90deg, var(--teal), var(--teal-light)); }

.dash-stat-trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-radius:2px;
  overflow:hidden; margin-bottom:22px;
}
.dash-stat{ background:var(--paper-light); padding:18px 10px; text-align:center; }
.dash-stat-num{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.3rem;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.dash-stat.good .dash-stat-num{ color:var(--teal); }
.dash-stat.due .dash-stat-num{ color:var(--red-deep); }
.dash-stat-label{ font-size:11px; color:var(--ink-soft); margin-top:6px; letter-spacing:0.02em; }

.dash-due-banner{
  margin-top:20px; padding:14px 16px; background:rgba(213,56,42,0.08);
  border:1px solid rgba(213,56,42,0.3); border-radius:2px; font-size:13px;
  color:var(--red-deep); line-height:1.6;
}
.dash-due-banner strong{ font-family:'IBM Plex Mono',monospace; }
.dash-clear-banner{
  margin-top:20px; padding:14px 16px; background:rgba(91,94,98,0.08);
  border:1px solid var(--rule); border-radius:2px; font-size:13px;
  color:var(--ink); font-weight:600;
}

/* ===== PAYMENT HISTORY TABLE ===== */
.dash-history{
  background:var(--paper-light); border:1px solid var(--rule); border-radius:2px;
  padding:30px 28px; box-shadow:3px 3px 0 var(--ink); margin-bottom:30px;
}
.dash-table-wrap{ overflow-x:auto; }
.dash-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.dash-table th{
  text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.06em; color:var(--ink-soft); text-transform:uppercase;
  padding:10px 12px; border-bottom:1px solid var(--rule);
}
.dash-table td{ padding:12px 12px; border-bottom:1px solid var(--rule-soft); }
.dash-table tr:last-child td{ border-bottom:none; }
.dash-empty{ color:var(--ink-soft); font-size:13.5px; padding:20px 0 0; text-align:center; }

.dash-footnote{
  text-align:center; font-size:13.5px; color:var(--ink-soft);
}
.dash-footnote a{ font-weight:600; text-decoration:none; margin-left:6px; }
.dash-footnote a:hover{ color:var(--red-deep); }

/* ===== responsive ===== */
@media (max-width:820px){
  .dash-grid{ grid-template-columns:1fr; }
  .dash-nav{ padding:14px 20px; }
  .dash-main{ padding:36px 18px 70px; }
}
@media (max-width:520px){
  .auth-card{ padding:34px 24px; }
  .dash-card, .dash-history{ padding:22px 18px; }
  .dash-stat-trio{ grid-template-columns:1fr; }
}