/* ============================================================
   HADIR GURU — "Blue Crystal Glass UI"
   Premium Glassmorphism + Soft Neumorphism, blue crystal theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  /* base gradient */
  --deep-1:#0a1c3a;
  --deep-2:#123a63;
  --deep-3:#1c5f8f;

  /* crystal accents */
  --crystal-blue:#3b82f6;
  --crystal-blue-2:#60a5fa;
  --crystal-cyan:#5ad4ff;

  /* glass surfaces */
  --glass-fill: rgba(255,255,255,0.10);
  --glass-fill-strong: rgba(255,255,255,0.16);
  --glass-fill-soft: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.32);
  --glass-border-soft: rgba(255,255,255,0.16);

  /* text */
  --ink:#eaf3ff;
  --ink-soft:#a9c2e0;
  --ink-faint:#7690b3;

  /* status */
  --st-hadir:#34d399;
  --st-izin:#fbbf24;
  --st-sakit:#f472b6;
  --st-alpa:#f87171;

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}

*{ box-sizing:border-box; }
html, body{ min-height:100vh; }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(650px 500px at 12% -8%, rgba(90,212,255,0.20), transparent 60%),
    radial-gradient(700px 560px at 108% 10%, rgba(59,130,246,0.28), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(28,95,143,0.45), transparent 60%),
    linear-gradient(160deg, var(--deep-1) 0%, var(--deep-2) 55%, var(--deep-3) 100%);
  background-attachment:fixed;
  position:relative;
}

/* ambient drifting crystal blobs */
body::before, body::after{
  content:"";
  position:fixed;
  width:520px; height:520px;
  border-radius:50%;
  filter:blur(70px);
  z-index:0;
  pointer-events:none;
  opacity:.55;
}
body::before{
  background:radial-gradient(circle, rgba(90,212,255,0.35), transparent 70%);
  top:-160px; left:-120px;
  animation:drift1 22s ease-in-out infinite alternate;
}
body::after{
  background:radial-gradient(circle, rgba(59,130,246,0.30), transparent 70%);
  bottom:-180px; right:-140px;
  animation:drift2 26s ease-in-out infinite alternate;
}
@keyframes drift1{ from{ transform:translate(0,0);} to{ transform:translate(40px,30px);} }
@keyframes drift2{ from{ transform:translate(0,0);} to{ transform:translate(-30px,-40px);} }
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
}

.container{ position:relative; z-index:1; }

h1,h2,h3,h4,h5,h6{
  font-family:'Sora', 'Inter', sans-serif;
  color:var(--ink);
  letter-spacing:-0.01em;
}

a{ color:var(--crystal-cyan); }
code{ color:var(--crystal-cyan); background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:6px; }
.text-muted{ color:var(--ink-faint) !important; }

/* ---------- crystal facet mark (signature element) ---------- */
.crystal-mark{
  display:inline-flex;
  width:30px; height:30px;
  flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(90,212,255,0.55));
}

/* ---------- navbar: frosted floating glass bar ---------- */
.navbar{
  background:var(--glass-fill-strong) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  margin:16px auto 0;
  max-width:1200px;
  box-shadow:0 8px 30px rgba(3,12,26,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  position:relative;
  z-index:2;
}
.navbar .navbar-brand{
  font-family:'Sora', sans-serif;
  font-weight:700;
  color:var(--ink) !important;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.05rem;
}
.navbar-text{ color:var(--ink-soft) !important; }

/* ---------- glass panel (wraps page content) ---------- */
.glass-panel{
  background:var(--glass-fill);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:
    0 20px 50px rgba(3,12,26,0.45),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  padding:28px;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.glass-panel::before{
  content:"";
  position:absolute;
  top:-40%; left:-20%;
  width:60%; height:180%;
  background:linear-gradient(120deg, rgba(255,255,255,0.10), transparent 60%);
  pointer-events:none;
  transform:rotate(8deg);
}

/* bootstrap card -> glass card */
.card{
  background:var(--glass-fill) !important;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:
    0 20px 50px rgba(3,12,26,0.45),
    inset 0 1px 0 rgba(255,255,255,0.30);
  color:var(--ink);
}
.card-body{ position:relative; z-index:1; }
.shadow, .shadow-sm{ box-shadow:0 20px 50px rgba(3,12,26,0.45) !important; }

/* ---------- buttons: neumorphic glass pills ---------- */
.btn{
  font-family:'Inter', sans-serif;
  font-weight:600;
  border-radius:14px !important;
  border:1px solid var(--glass-border-soft);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary, .btn-secondary, .btn-warning{
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  box-shadow:
    0 8px 18px rgba(3,12,26,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 6px rgba(0,0,0,0.15);
}
.btn-primary{ background:linear-gradient(160deg, var(--crystal-blue-2), var(--crystal-blue)) !important; }
.btn-secondary{ background:linear-gradient(160deg, #64748b, #3f4c5e) !important; }
.btn-warning{ background:linear-gradient(160deg, #fbbf24, #d99a17) !important; color:#241c00 !important; }

.btn-outline-primary, .btn-outline-light{
  background:var(--glass-fill-soft) !important;
  color:var(--ink) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn:active{
  transform:translateY(1px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,0.35) !important;
}

/* ---------- forms: inset neumorphic glass fields ---------- */
.form-control, .form-select{
  background:rgba(6,18,38,0.35) !important;
  border:1px solid var(--glass-border-soft) !important;
  color:var(--ink) !important;
  border-radius:12px !important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  padding:10px 14px;
}
.form-control::placeholder{ color:var(--ink-faint); }
.form-control:focus, .form-select:focus{
  background:rgba(6,18,38,0.5) !important;
  border-color:var(--crystal-cyan) !important;
  color:var(--ink) !important;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.35), 0 0 0 3px rgba(90,212,255,0.25) !important;
}
label{ color:var(--ink-soft); font-weight:600; font-size:.9rem; margin-bottom:6px; display:inline-block; }
.form-select option{ background:#0e2545; color:var(--ink); }

/* ---------- tables: glass rows ---------- */
.table{ color:var(--ink); border-color:var(--glass-border-soft); background:transparent; }
.table > :not(caption) > * > *{
  background:transparent;
  color:var(--ink);
  border-bottom-color:var(--glass-border-soft);
}
.table-striped > tbody > tr:nth-of-type(odd) > *{ background:rgba(255,255,255,0.045); }
.table-bordered, .table-bordered th, .table-bordered td{ border-color:var(--glass-border-soft) !important; }
.table thead th{
  font-family:'Sora', sans-serif;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--crystal-cyan);
  border-bottom:1px solid var(--glass-border) !important;
}

/* ---------- alerts ---------- */
.alert{
  border-radius:14px;
  border:1px solid var(--glass-border-soft);
  backdrop-filter:blur(10px);
  color:var(--ink);
}
.alert-success{ background:rgba(52,211,153,0.14); border-color:rgba(52,211,153,0.4); }
.alert-danger{ background:rgba(248,113,113,0.14); border-color:rgba(248,113,113,0.4); }

/* ---------- status pills (attendance status) ---------- */
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px;
  border-radius:999px;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  font-weight:600;
  border:1px solid var(--glass-border-soft);
  background:rgba(255,255,255,0.06);
}
.status-pill.st-hadir{ color:var(--st-hadir); border-color:rgba(52,211,153,0.45); background:rgba(52,211,153,0.12); }
.status-pill.st-izin{ color:var(--st-izin); border-color:rgba(251,191,36,0.45); background:rgba(251,191,36,0.12); }
.status-pill.st-sakit{ color:var(--st-sakit); border-color:rgba(244,114,182,0.45); background:rgba(244,114,182,0.12); }
.status-pill.st-alpa{ color:var(--st-alpa); border-color:rgba(248,113,113,0.45); background:rgba(248,113,113,0.12); }

/* utility */
.text-mono{ font-family:'JetBrains Mono', monospace; }
::selection{ background:rgba(90,212,255,0.35); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.18); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }