/* =========================
   THEME & RESET (Mobile First)
   ========================= */
:root{
  --bg-0:#121212;
  --bg-1:#1a1a1a;
  --text:#fefefe;
  --muted:#ffdab3;
  --primary:#ff9b42;     /* orange */
  --primary-2:#ff6f00;   /* deep orange */
  --gold-1:#ffae42;      /* gold */
  --gold-2:#ffd27f;      /* light gold */

  /* spacing & radius */
  --r:10px;
  --gap-1:10px;
  --gap-2:16px;
  --gap-3:24px;

  /* elevation */
  --glow-1:0 0 12px rgba(255,166,77,.35), 0 0 24px rgba(255,210,127,.18);
  --glow-2:0 3px 10px rgba(0,0,0,.4);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--text);
  background:linear-gradient(135deg,#2b2b2b 0%, #1e1e1e 100%);
}

/* Links */
a{ color:var(--gold-1); text-decoration:none; }
a:hover{ color:var(--gold-2); text-shadow:0 0 5px var(--gold-1); }

/* =========================
   NAVBAR
   ========================= */
nav{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(90deg,var(--primary) 0%, var(--primary-2) 100%);
  color:#fff;
  padding:12px var(--gap-2);
  box-shadow:var(--glow-2);
}
nav .brand{
  font-weight:800; letter-spacing:.5px;
}
nav a{
  display:inline-block;
  color:#fff8ec;
  margin-right:12px;
  font-weight:600;
}
nav a:hover{ color:#fff; text-shadow:0 0 6px var(--gold-2); }

/* Pada layar kecil, link akan wrap otomatis (tanpa hamburger JS) */
nav .menu{ margin-top:8px; }

/* =========================
   CONTAINER & LAYOUT
   ========================= */
.container{
  width:100%;
  max-width:1100px;
  margin:20px auto;
  padding:16px;
  background:rgba(40,40,40,.9);
  border-radius:var(--r);
  box-shadow:var(--glow-1);
}

/* Sections spacing */
section{ margin-block:var(--gap-3); }

/* =========================
   HEADINGS + GLITTER SHINE
   ========================= */
@keyframes shine {
  0% { background-position:-200% center; }
  100%{ background-position:200% center; }
}
@keyframes sparkle {
  0% { opacity:.2; text-shadow:0 0 5px #fff, 0 0 10px var(--gold-2); }
  100%{ opacity:1;  text-shadow:0 0 10px #fff, 0 0 20px var(--gold-2), 0 0 30px var(--gold-1); }
}
h1,h2,h3{
  margin:0 0 var(--gap-2) 0;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:800;
  background:linear-gradient(120deg,var(--gold-2) 0%, var(--gold-1) 20%, #fff 40%, var(--gold-1) 60%, var(--gold-2) 80%, var(--gold-1) 100%);
  background-size:200% auto;
  -webkit-text-fill-color:transparent;
  animation:shine 4s linear infinite;
}
h1::after,h2::after,h3::after{ content:" ✨"; animation:sparkle 1.5s ease-in-out infinite alternate; }

@media (prefers-reduced-motion:reduce){
  h1,h2,h3{ animation:none; }
  h1::after,h2::after,h3::after{ animation:none; }
}

/* =========================
   FORMS (touch-friendly)
   ========================= */
form .row{ display:grid; gap:var(--gap-1); }
label{ display:block; font-weight:600; margin-bottom:6px; color:var(--gold-2); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select{
  width:100%;
  padding:12px;
  border:1px solid var(--gold-1);
  border-radius:8px;
  background:#1f1f1f;
  color:#fffaf0;
}
input:focus, select:focus{
  outline:none;
  box-shadow:0 0 6px var(--gold-1), 0 0 12px var(--gold-2);
}

button{
  width:100%;
  padding:12px 16px;
  border:none; border-radius:8px;
  background:linear-gradient(90deg,var(--primary) 0%, var(--primary-2) 100%);
  color:#1e1e1e; font-weight:800; letter-spacing:.3px;
  cursor:pointer; transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
button:hover{ color:#fff; box-shadow:0 0 10px var(--gold-1), 0 0 16px var(--gold-2); filter:saturate(1.1); }
button:active{ transform:scale(.98); }

.form-actions{ display:grid; gap:var(--gap-1); }

/* Card (login, info) */
.card{
  background:rgba(30,30,30,.9);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);
  padding:16px;
  box-shadow:var(--glow-1);
}

/* =========================
   LOGIN TICKER (running text)
   ========================= */
.ticker{
  position: relative; overflow:hidden; height:44px;
  border-radius:12px;
  border:1px solid rgba(255,174,66,.6);
  background:#151515;
  box-shadow:0 0 12px rgba(255,174,66,.4),0 0 20px rgba(255,120,0,.3);
  margin:8px 0 18px 0;
}
.ticker__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(200px 40px at 15% 50%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(200px 40px at 85% 50%, rgba(255,210,127,.10), transparent 60%);
  pointer-events:none;
}
.ticker__track{
  display:flex; white-space:nowrap;
  animation: ticker-move 18s linear infinite;
}
.ticker__glitter{
  padding:0 2rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  background:linear-gradient(120deg,
      #ff6f00 0%,
      #ff9b42 20%,
      #ffd27f 40%,
      #fff6cc 50%,
      #ffd27f 60%,
      #ff9b42 80%,
      #ff6f00 100%);
  background-size:200% auto;
  -webkit-text-fill-color:transparent;
  animation:fire-shine 3s linear infinite, fire-flicker 1.6s ease-in-out infinite alternate;
  text-shadow:
    0 0 6px rgba(255,140,0,.5),
    0 0 12px rgba(255,174,66,.4),
    0 0 18px rgba(255,120,0,.3);
}

@keyframes ticker-move {
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@keyframes fire-shine {
  0% {background-position:-200% center;}
  100% {background-position:200% center;}
}
@keyframes fire-flicker {
  0%,19%,21%,100%{opacity:1;}
  20%{opacity:.6;}
}
@keyframes tmv{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes tshine{ 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} }

/* =========================
   TABLES (Mobile First)
   ========================= */
table{
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:separate;
  border-spacing:0;
  background:#171717;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:var(--text);
}
table thead{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(90deg,var(--gold-1) 0%, var(--primary-2) 100%);
  color:#1e1e1e; font-weight:800;
}
table th, table td{
  white-space:nowrap;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
table tbody tr:nth-child(even){ background:rgba(255,174,66,.05); }
table tbody tr:hover{ background:rgba(255,174,66,.12); }

/* total kolom di admin_uml / admin_grades */
.row-total{ text-align:right; font-weight:800; color:var(--gold-2); }

/* Badge kecil */
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(255,174,66,.18); color:var(--gold-2);
  border:1px solid rgba(255,174,66,.45);
  font-size:12px; font-weight:700;
}

/* =========================
   ALERTS
   ========================= */
.alert{
  padding:12px; border-radius:8px; font-weight:700; margin:12px 0;
  border:1px solid transparent;
}
.alert-success{
  background:rgba(255,174,66,.18);
  color:var(--gold-2);
  border-color:rgba(255,174,66,.45);
}
.alert-error{
  background:rgba(255,99,71,.18);
  color:#ff7b72;
  border-color:#ff7b72;
}

/* =========================
   RAPOR CARD (kartu ucapan)
   ========================= */
.report-card {
  text-align:center;
  padding:1.6rem 1rem;
  background: linear-gradient(135deg,var(--gold-2), var(--gold-1), #fff0cc);
  color:#1e1e1e;
  border-radius:16px;
  box-shadow:0 0 25px rgba(255,210,127,.35), inset 0 0 10px rgba(255,210,127,.4);
  margin-bottom:1.5rem;
}
.report-card h2 {
  margin:0 0 .5rem 0; font-size:1.2rem; font-weight:900;
  -webkit-text-fill-color:initial; background:none; color:#331a00; text-transform:none; letter-spacing:.3px;
}
.report-card .score {
  font-size:2.6rem; font-weight:900; margin-top:.25rem;
  text-shadow:0 2px 6px rgba(255,255,255,.5);
}

/* =========================
   FOOTER
   ========================= */
footer{
  text-align:center; color:var(--muted);
  font-size:13px; padding:18px; margin-top:40px;
}

/* =========================
   BREAKPOINTS
   ========================= */
@media (min-width:600px){
  .container{ padding:22px; }
  button{ width:auto; }
  .form-actions{ grid-auto-flow:column; justify-content:flex-start; }
  form .row.cols-2{ grid-template-columns:1fr 1fr; }
}

@media (min-width:900px){
  nav{ padding:14px 28px; }
  nav .menu{ display:inline; margin-top:0; }
  .container{ margin:28px auto; padding:26px 30px; }

  table{
    display:table;
    border-collapse:collapse;
    overflow:visible;
    border-radius:10px;
  }
  table th, table td{
    white-space:normal;
    border:1px solid rgba(255,255,255,.12);
  }
}

/* =========================
   PRINT (rapor)
   ========================= */
@media print{
  body{ background:#fff; color:#000; }
  nav, footer{ display:none; }
  .container{
    box-shadow:none; background:#fff; color:#000; border:none;
  }
  h1,h2,h3{
    -webkit-text-fill-color:initial;
    background:none; color:#000; text-shadow:none; animation:none;
  }
  .report-card{
    background:#fff; color:#000; box-shadow:none; border:1px solid #000;
  }
  table{ display:table; overflow:visible; border:1px solid #000; color:#000; }
  table th, table td{ border-color:#000; }
}