/* ============================================================
   Actech Academy — Student Portal
   Design language: a physical student ID card + registration
   desk, not a SaaS login screen. Flat color, hard offset
   shadows, hairline rules, slight hand-set rotation — matches
   the workshop page's tactile "paper & ticket" system.
   ============================================================ */

:root{
  --ink:#1a1a1a;
  --red:#A31621;
  --paper:#ffffff;
  --paper2:#f5f5f3;
  --line:#e5e5e5;
  --mustard:#c99a2e;
  --green:#2f7d4f;

  --font-display:'Barlow Condensed', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

.hidden{ display:none !important; }

button{ font-family:inherit; }
input{ font-family:inherit; }

/* ---------------------------------------------------------
   Shared: buttons
--------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border:none;
  cursor:pointer;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.9rem 1.4rem;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn--primary{
  background:var(--red);
  color:#fff;
  box-shadow:3px 3px 0 var(--ink);
}
.btn--primary:hover{
  box-shadow:1px 1px 0 var(--ink);
  transform:translate(2px,2px);
}
.btn--primary:disabled{
  opacity:.6;
  cursor:progress;
  box-shadow:1px 1px 0 var(--ink);
  transform:translate(2px,2px);
}
.btn--block{ width:100%; }
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
  padding:.6rem 1.1rem;
  font-size:.7rem;
}
.btn--ghost:hover{ background:var(--ink); color:#fff; }

.btn-spinner{ display:inline-flex; align-items:center; gap:.5rem; }

/* ---------------------------------------------------------
   Brand mark
--------------------------------------------------------- */
.brand-mark{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.3rem;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
}
.brand-mark span{ color:var(--red); }
.brand-mark--dark{ color:var(--ink); }
.brand-mark--dark span{ color:var(--red); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* ============================================================
   LOGIN VIEW
   ============================================================ */
.login-view{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr 1fr;
}

/* ---- Left: brand / registration-desk panel ---- */
.brand-panel{
  position:relative;
  background:var(--ink);
  color:#fff;
  padding:3rem 3.2rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}

/* faint diagonal security-print hatching, like the guilloché
   pattern printed on real ID cards & certificates */
.brand-panel__pattern{
  position:absolute;
  inset:0;
  opacity:.06;
  background-image:repeating-linear-gradient(
    45deg,
    #fff 0px, #fff 1px,
    transparent 1px, transparent 13px
  );
  pointer-events:none;
}

.brand-panel__top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.brand-panel__mid{ position:relative; max-width:30rem; margin:3rem 0; }

.brand-headline{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.4rem, 4.2vw, 3.6rem);
  line-height:.98;
  letter-spacing:-.01em;
  margin:0 0 1.1rem;
  text-transform:uppercase;
}

.brand-sub{
  font-size:.95rem;
  line-height:1.6;
  color:rgba(255,255,255,.65);
  max-width:26rem;
}

/* ---- Signature element: the student ID card ---- */
.id-card{
  position:relative;
  width:min(100%, 320px);
  background:linear-gradient(160deg, #232323, #161616);
  border-radius:14px;
  padding:1.1rem 1.2rem 1rem;
  box-shadow:7px 9px 0 rgba(0,0,0,.45);
  transform:rotate(-3deg);
  border:1px solid rgba(255,255,255,.08);
}

.id-card::before{
  /* lanyard punch hole, top-left */
  content:'';
  position:absolute;
  top:12px; left:14px;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--ink);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}

.id-card::after{
  /* holo-style corner chip, bottom right, purely graphic */
  content:'';
  position:absolute;
  bottom:14px; right:14px;
  width:26px; height:18px;
  border-radius:3px;
  background:repeating-linear-gradient(
    115deg,
    var(--mustard) 0 3px,
    #d9c37a 3px 6px
  );
  opacity:.85;
}

.id-card__stripe{
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background:var(--red);
  border-radius:14px 14px 0 0;
}

.id-card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:16px;
}

.id-card__row--top{
  margin-top:.4rem;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  color:rgba(255,255,255,.6);
}
.id-card__row--top i{ color:var(--red); font-size:.85rem; }

.id-card__body{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem 0 1rem 16px;
}

.id-card__avatar{
  width:44px; height:44px;
  border-radius:50%;
  background:#3a3a3a;
  border:1.5px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55);
  font-size:1.1rem;
  flex-shrink:0;
}

.id-card__label{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:.15rem;
}

.id-card__id{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.05em;
  color:#fff;
}

.id-card__row--bottom{
  border-top:1px dashed rgba(255,255,255,.15);
  padding:.6rem 0 0 16px;
  font-size:.62rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.4);
  text-transform:uppercase;
}

/* dashboard variant sits on white, so invert a few surfaces */
.id-card--dashboard{ transform:rotate(-1.4deg); margin:1.6rem 0 2rem; }

.status-badge{
  font-family:var(--font-mono);
  font-weight:700;
  padding:.15rem .5rem;
  border-radius:3px;
  background:rgba(47,125,79,.18);
  color:#8fe0ac;
  letter-spacing:.06em;
}

/* ---- Right: form panel ---- */
.form-panel{
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem 2rem;
}

.form-panel__inner{ width:100%; max-width:23rem; }

.form-panel__header{ margin-bottom:2rem; }
.form-panel__header .brand-mark{ display:block; margin-bottom:1.6rem; }
.form-panel__header h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.9rem;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 .5rem;
}
.form-panel__header p{
  font-size:.88rem;
  color:#6b6b6b;
  line-height:1.55;
  margin:0;
}
.form-panel__header p b{ color:var(--ink); }

.login-form{ margin-top:1.6rem; }

.field{ margin-bottom:1.35rem; }
.field label{
  display:block;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8a8a8a;
  margin-bottom:.5rem;
}

.input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  border-bottom:2px solid var(--ink);
  padding-bottom:.15rem;
}
.input-wrap i:first-child{
  color:var(--red);
  font-size:.85rem;
  margin-right:.7rem;
}
.input-wrap input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size:.95rem;
  padding:.55rem 0;
  color:var(--ink);
}
.input-wrap input::placeholder{ color:#b9b9b9; }
.input-wrap:focus-within{ border-color:var(--red); }

.input-icon-btn{
  background:none;
  border:none;
  color:#9a9a9a;
  cursor:pointer;
  padding:.3rem;
}
.input-icon-btn:hover{ color:var(--ink); }

.form-error{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.82rem;
  color:var(--red);
  background:rgba(163,22,33,.06);
  border-left:3px solid var(--red);
  padding:.6rem .8rem;
  margin:0 0 1.2rem;
}

.form-panel__footnote{
  margin-top:1.8rem;
  font-size:.78rem;
  color:#8a8a8a;
  line-height:1.5;
  border-top:1px dashed var(--line);
  padding-top:1.2rem;
}
.form-panel__footnote a{ color:var(--red); font-weight:600; text-decoration:none; }
.form-panel__footnote a:hover{ text-decoration:underline; }

/* ============================================================
   DASHBOARD VIEW
   ============================================================ */
.dashboard-view{ min-height:100vh; background:var(--paper); }

.dash-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem 1.8rem;
  border-bottom:1px solid var(--line);
}

.dash-main{
  max-width:640px;
  margin:0 auto;
  padding:2.2rem 1.5rem 4rem;
}

.dash-welcome{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.06em;
  color:#8a8a8a;
  text-transform:uppercase;
  margin:0 0 .5rem;
}
.dash-welcome span{ color:var(--ink); font-weight:700; }

/* ---- Detail list — printed like a receipt / ticket stub,
   consistent with the workshop page's ticket motif ---- */
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line);
  margin-bottom:1.6rem;
}
.detail-card{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:1.1rem 1.2rem;
  border-right:1px dashed var(--line);
  border-bottom:1px dashed var(--line);
}
.detail-card:nth-child(2n){ border-right:none; }
.detail-card:nth-last-child(-n+2){ border-bottom:none; }

.detail-card__label{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9a9a9a;
}
.detail-card__label i{ color:var(--red); }

.detail-card__value{
  font-weight:600;
  font-size:.98rem;
  color:var(--ink);
}
.detail-card__value--mono{ font-family:var(--font-mono); letter-spacing:.03em; }

/* ---- Actions ---- */
.action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.action-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
  background:#fff;
  border:1.5px solid var(--ink);
  padding:1.3rem 1.2rem;
  cursor:pointer;
  text-align:left;
  box-shadow:4px 4px 0 var(--line);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.action-card i{ font-size:1.3rem; color:var(--red); margin-bottom:.2rem; }
.action-card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  text-transform:uppercase;
  color:var(--ink);
}
.action-card__sub{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:#9a9a9a;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.action-card:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--line);
  background:var(--paper2);
}

.action-notice{
  margin-top:1.2rem;
  font-size:.85rem;
  color:var(--ink);
  background:var(--paper2);
  border-left:3px solid var(--mustard);
  padding:.7rem .9rem;
}

/* ---- Toast ---- */
.toast{
  position:fixed;
  left:50%;
  bottom:1.6rem;
  transform:translateX(-50%);
  background:var(--ink);
  color:#fff;
  font-size:.85rem;
  padding:.75rem 1.2rem;
  box-shadow:3px 4px 0 rgba(0,0,0,.3);
  z-index:500;
  max-width:90vw;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .login-view{ grid-template-columns:1fr; }
  .brand-panel{ padding:2.2rem 1.6rem 2.6rem; }
  .brand-panel__mid{ margin:2rem 0 1.6rem; }
  .brand-headline{ font-size:clamp(2rem, 8vw, 2.8rem); }
  .id-card{ width:min(100%, 280px); }
  .form-panel{ padding:2.4rem 1.5rem 3rem; }

  .detail-grid{ grid-template-columns:1fr; }
  .detail-card{ border-right:none !important; }
  .detail-card:not(:last-child){ border-bottom:1px dashed var(--line) !important; }

  .action-grid{ grid-template-columns:1fr; }
}