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

:root {
  --navy-950:#08080A;
  --navy-900:#111117;
  --navy-800:#191922;
  --navy-700:#22222E;
  --navy-600:#2E2E3C;
  --gold-500:#00E0FF;
  --gold-400:#6EF3FF;
  --cyan-600:#00AECC;
  --teal-500:#2FE297;
  --red-500:#FF4757;
  --violet-500:#B18CFF;
  --ink-100:#F3F7F8;
  --ink-300:#B9C6CA;
  --ink-500:#78878C;
  --border-soft: rgba(255,255,255,.08);
  --glow-cyan: rgba(0,224,255,.30);
  --shadow-sm: 0 2px 8px rgba(6,10,12,.06);
  --shadow-md: 0 10px 24px rgba(6,10,12,.08), 0 2px 6px rgba(6,10,12,.05);
  --shadow-lift: 0 20px 48px rgba(4,4,8,.14), 0 4px 12px rgba(4,4,8,.08);
  --shadow-dark: 0 20px 50px rgba(2,2,4,.45), 0 4px 14px rgba(2,2,4,.3);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: #EEF3F5;
  background-image:
    radial-gradient(1200px 500px at 100% -10%, rgba(0,224,255,.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0,224,255,.04), transparent 60%);
  background-attachment: fixed;
  color: var(--navy-900);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

a { color: inherit; }
::selection { background: rgba(0,224,255,.22); color: var(--navy-950); }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* ============ APP SHELL ============ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background:
    radial-gradient(520px 320px at 15% -10%, rgba(0,224,255,.10), transparent 60%),
    linear-gradient(185deg, var(--navy-950), var(--navy-900) 65%);
  color: var(--ink-100);
  padding: 22px 16px;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform .25s ease;
  border-right: 1px solid rgba(0,224,255,.08);
}

.brand { display:flex; align-items:center; gap:11px; padding: 4px 10px 22px; border-bottom: 1px solid var(--border-soft); margin-bottom: 18px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--gold-500), var(--cyan-600));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700; color: var(--navy-950); font-size: 16px;
  box-shadow: 0 0 0 1px rgba(0,224,255,.25), 0 8px 18px rgba(0,224,255,.28);
}
.brand-text h1 { font-size: 15px; color: #fff; }
.brand-text span { font-size: 10.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .09em; }

.nav-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 3px; flex: 1; }
.nav-links a {
  display:flex; align-items:center; gap: 12px;
  padding: 11px 14px; border-radius: 10px;
  text-decoration:none; color: var(--ink-300); font-size: 13.5px; font-weight: 500;
  transition: background .16s ease, color .16s ease, transform .16s ease;
  position: relative;
}
.nav-links a svg { width:18px; height:18px; opacity:.8; flex-shrink:0; transition: opacity .16s ease; }
.nav-links a:hover { background: rgba(0,224,255,.07); color: #fff; }
.nav-links a:hover svg { opacity: 1; }
.nav-links a.active {
  background: linear-gradient(120deg, var(--gold-500), var(--cyan-600));
  color: var(--navy-950); font-weight: 700;
  box-shadow: 0 8px 20px rgba(0,224,255,.30);
}
.nav-links a.active svg { opacity: 1; }

.sidebar-clock {
  margin-top: auto;
  padding: 14px 14px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
}
.sidebar-clock .date { font-size: 10.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .07em; }
.sidebar-clock .time { font-size: 20px; color: var(--gold-400); font-weight: 600; text-shadow: 0 0 18px rgba(0,224,255,.35); }

.logout-link { color: var(--red-500) !important; }
.logout-link:hover { background: rgba(255,71,87,.1) !important; }

/* ============ MAIN AREA ============ */
.main-area { margin-left: 248px; flex: 1; min-width: 0; }

.topbar {
  height: 66px;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #E1E9EA;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 28px;
  position: sticky; top:0; z-index: 30;
}
.topbar h2 { font-size: 17.5px; color: var(--navy-900); font-weight: 700; }
.topbar .subtitle { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.menu-toggle { display:none; background:none; border:none; font-size: 22px; cursor:pointer; }
.topbar .stamp { box-shadow: 0 4px 14px rgba(0,224,255,.12); }

.content-area { padding: 28px; max-width: 1300px; }

/* ============ CARDS ============ */
.panel {
  background: linear-gradient(180deg, #ffffff, #fbfdfd);
  border-radius: 16px;
  border: 1px solid #E3EAEC;
  box-shadow: var(--shadow-lift);
  padding: 24px;
  position: relative;
}

.stat-card {
  background: linear-gradient(180deg, #ffffff, #fbfdfd);
  border-radius: 16px; border:1px solid #E3EAEC;
  padding: 19px 20px; display:flex; align-items:center; gap:16px;
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.stat-card .num { font-family: var(--font-display); font-size: 30px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.stat-card .label { font-size: 11.5px; color: var(--ink-500); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; font-weight:600; }

.nav-card {
  background: linear-gradient(180deg, #ffffff, #fbfdfd);
  border-radius: 18px; border:1px solid #E3EAEC;
  padding: 26px 22px; text-decoration:none; color: var(--navy-900);
  display:flex; flex-direction:column; gap:12px;
  box-shadow: var(--shadow-md);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
  position: relative; overflow: hidden;
}
.nav-card::before {
  content:""; position:absolute; inset:0; border-radius:18px; padding:1px;
  background: linear-gradient(135deg, rgba(0,224,255,0), rgba(0,224,255,0));
  transition: background .2s ease; pointer-events:none;
}
.nav-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgba(0,224,255,.35); }
.nav-card:hover::before { background: linear-gradient(135deg, rgba(0,224,255,.5), rgba(0,224,255,0) 60%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.nav-card .icon-wrap {
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  color: var(--gold-400);
  box-shadow: inset 0 0 0 1px rgba(0,224,255,.14);
  transition: transform .2s ease;
}
.nav-card:hover .icon-wrap { transform: scale(1.06) rotate(-3deg); }
.nav-card .icon-wrap svg { width:22px; height:22px; }
.nav-card h5 { font-size: 15.5px; font-weight: 700; }
.nav-card p { font-size: 12.5px; color: var(--ink-500); margin:0; line-height:1.5; }

/* ============ STAMP BADGES (signature element) ============ */
.stamp {
  display: inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 13px;
  border: 2px dashed currentColor;
  border-radius: 999px;
  transform: rotate(-3deg);
  animation: stamp-in .28s cubic-bezier(.2,1.4,.4,1);
}
@keyframes stamp-in { from { opacity:0; transform: rotate(-3deg) scale(1.5); } to { opacity:1; transform: rotate(-3deg) scale(1); } }
.stamp-Present { color: #1FAE72; background: rgba(47,226,151,.10); }
.stamp-Absent  { color: var(--red-500);  background: rgba(255,71,87,.09); }
.stamp-Late    { color: var(--cyan-600); background: rgba(0,224,255,.10); }
.stamp-Leave   { color: #8863E8; background: rgba(177,140,255,.10); }

.stat-icon-Present { background: rgba(47,226,151,.13); color: #1FAE72; }
.stat-icon-Absent  { background: rgba(255,71,87,.12); color: var(--red-500); }
.stat-icon-Late    { background: rgba(0,224,255,.13); color: var(--cyan-600); }
.stat-icon-Leave   { background: rgba(177,140,255,.13); color: #8863E8; }
.stat-icon {
  width:46px; height:46px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center;
  font-size: 18px; flex-shrink:0;
}

/* ============ ID CARD ============ */
.id-card {
  width: 100%; max-width: 340px; border-radius: 20px; overflow:hidden;
  background: linear-gradient(160deg,#fff,#F7FAFA);
  border: 1px solid #E3EAEC; box-shadow: var(--shadow-lift);
  animation: card-in .25s ease;
}
@keyframes card-in { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:translateY(0);} }
.id-card-header {
  background: linear-gradient(120deg, var(--navy-950), var(--navy-700));
  color:#fff; padding: 15px 16px; text-align:center;
  font-family: var(--font-display); font-weight:600; font-size: 12.5px;
  letter-spacing:.09em; text-transform:uppercase;
  position: relative; overflow: hidden;
}
.id-card-header::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 40%, rgba(0,224,255,.22) 50%, transparent 60%);
}
.id-card-body { padding: 18px; display:flex; gap:14px; }
.id-card-photo { width: 84px; height: 84px; border-radius: 13px; object-fit:cover; background:#ddd; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,224,255,.25), 0 4px 12px rgba(0,0,0,.14); }
.id-card-info div { font-size: 12.5px; margin-bottom: 5px; color: var(--navy-800); }
.id-card-info b { color: var(--ink-500); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.05em; display:block; }

/* ============ FORMS & BUTTONS ============ */
.form-label { font-size: 12.5px; font-weight: 700; color: var(--navy-800); margin-bottom: 5px; display:block; }
.form-control, .form-select {
  border-radius: 10px; border: 1px solid #D8E1E3; padding: 10px 12px; font-size: 14px;
  width: 100%; background:#fff; font-family: var(--font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(0,224,255,.16);
}
.roll-scan-input { font-family: var(--font-mono); font-size: 22px; text-align:center; letter-spacing:3px; }

.btn { border-radius: 10px; padding: 10px 18px; font-weight:700; font-size:13.5px; border:none; cursor:pointer; transition: filter .15s ease, transform .12s ease, box-shadow .15s ease; }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(160deg, var(--navy-800), var(--navy-950)); color:#fff; box-shadow: 0 8px 18px rgba(8,8,10,.22); }
.btn-primary:hover { filter: brightness(1.2); box-shadow: 0 10px 22px rgba(8,8,10,.28); }
.btn-gold { background: linear-gradient(135deg, var(--gold-500), var(--cyan-600)); color: var(--navy-950); box-shadow: 0 8px 20px rgba(0,224,255,.32); }
.btn-gold:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(0,224,255,.42); transform: translateY(-1px); }
.btn-outline { background:transparent; border:1px solid #D8E1E3; color: var(--navy-800); }
.btn-outline:hover { border-color: var(--gold-500); color: var(--navy-950); }
.btn-danger-soft { background: rgba(255,71,87,.1); color: var(--red-500); }
.btn-sm { padding: 6px 13px; font-size: 12px; border-radius:8px; }
.btn-block { width:100%; }
.btn-outline-primary { background: transparent; border: 1px solid #D8E1E3; color: var(--navy-800); border-radius: 8px; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.btn-outline-primary:hover { border-color: var(--gold-500); color: var(--cyan-600); background: rgba(0,224,255,.06); }
.btn-outline-danger { background: transparent; border: 1px solid #F3D3D6; color: var(--red-500); border-radius: 8px; transition: background .15s ease; }
.btn-outline-danger:hover { background: rgba(255,71,87,.08); }

/* ============ TABLES ============ */
.data-table { width:100%; border-collapse: collapse; background:#fff; border-radius:14px; overflow:hidden; }
.data-table th {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); color: var(--ink-300); text-transform:uppercase;
  font-size: 10.5px; letter-spacing:.06em; padding: 13px 14px; text-align:left; font-weight:700;
}
.data-table td { padding: 12px 14px; font-size: 13.5px; border-bottom: 1px solid #EEF4F1; color: var(--navy-800); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background: rgba(0,224,255,.035); }
.row-accent-Present { border-left: 3px solid #1FAE72; }
.row-accent-Absent { border-left: 3px solid var(--red-500); }
.row-accent-Late { border-left: 3px solid var(--cyan-600); }
.row-accent-Leave { border-left: 3px solid #8863E8; }

/* ============ MODAL (bootstrap-compatible overrides) ============ */
.modal-content { border-radius: 18px; border:none; box-shadow: var(--shadow-dark); }
.modal-header { border-bottom: 1px solid #EEF4F1; padding: 19px 22px; }
.modal-header .modal-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.modal-body { padding: 20px 22px; }
.modal-footer { border-top: 1px solid #EEF4F1; padding: 14px 22px; }

/* ============ LOGIN PAGE ============ */
.login-shell { min-height: 100vh; display:flex; }
.login-visual {
  flex: 1.1;
  background:
    radial-gradient(680px 420px at 75% 15%, rgba(0,224,255,.14), transparent 60%),
    radial-gradient(circle at 30% 20%, var(--navy-700), var(--navy-950) 70%);
  color:#fff; display:flex; flex-direction:column; justify-content:center; padding: 60px;
  position:relative; overflow:hidden;
}
.login-visual::before {
  content:""; position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(rgba(0,224,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,224,255,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 60% 30%, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle at 60% 30%, #000 0%, transparent 65%);
}
.login-visual::after {
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  border: 2px dashed rgba(0,224,255,.30); top:-120px; right:-140px;
}
.login-visual .stamp-hero {
  font-family: var(--font-mono); border:3px dashed var(--gold-500); color: var(--gold-400);
  display:inline-flex; padding: 10px 20px; border-radius: 999px; transform: rotate(-4deg);
  font-weight:700; letter-spacing:.08em; font-size:13px; width:fit-content; margin-bottom:24px;
  box-shadow: 0 0 30px rgba(0,224,255,.18);
  position: relative; z-index: 1;
}
.login-visual h1 { font-size: 35px; line-height:1.18; max-width:420px; position: relative; z-index: 1; }
.login-visual p { color: var(--ink-300); max-width: 380px; margin-top:14px; font-size:14.5px; line-height:1.6; position: relative; z-index: 1; }
.login-visual .mono { text-shadow: 0 0 20px rgba(0,224,255,.3); }
.login-form-side { flex:1; display:flex; align-items:center; justify-content:center; background:#fff; padding: 40px; position: relative; }
.login-form-box { width: 100%; max-width: 360px; }
.login-form-box .brand-mark { box-shadow: 0 0 0 1px rgba(0,224,255,.25), 0 10px 26px rgba(0,224,255,.30); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .menu-toggle { display:block; }
  .login-visual { display:none; }
  .content-area { padding: 16px; }
  .topbar { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp, .id-card, .nav-card, .stat-card, .btn { animation: none !important; transition: none !important; }
}

.text-muted { color: var(--ink-500); }
.d-none { display:none !important; }


/* ============================================================
   RESPONSIVE LAYOUT
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }

.main-area { min-width: 0; width: calc(100% - 248px); margin-left: 248px; }
.content-area { min-width: 0; }
.panel { min-width: 0; }

.data-table-wrap { width: 100%; overflow-x: auto; }
.data-table { min-width: 760px; }

.table-responsive-fix {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-photo {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid #D6E0E2;
}

.actions-cell { white-space: nowrap; }

@media (max-width: 1100px) {
  .sidebar { width: 220px; }
  .main-area { width: calc(100% - 220px); margin-left: 220px; }
  .content-area { padding: 20px; }
}

@media (max-width: 900px) {
  .sidebar {
    width: 260px;
    transform: translateX(-100%);
    box-shadow: 12px 0 30px rgba(0,0,0,.35);
  }
  .sidebar.open { transform: translateX(0); }
  .main-area {
    width: 100%;
    margin-left: 0;
  }
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background:#fff; border:1px solid #E1E9EA; border-radius:8px; width:40px; height:40px; color:var(--navy-900);
  }
  .topbar {
    padding: 14px 18px;
  }
}

@media (max-width: 700px) {
  .content-area { padding: 14px; }
  .panel { padding: 16px; border-radius: 14px; }
  .topbar h2 { font-size: 18px; }
  .topbar .subtitle { font-size: 11px; }
  .stamp { font-size: 9px; }

  .modal-dialog {
    margin: 10px;
    max-width: calc(100% - 20px);
  }

  .modal-body { max-height: 72vh; overflow-y: auto; }

  .btn-block { width: 100%; }

  .login-shell {
    grid-template-columns: 1fr !important;
    min-height: 100vh;
  }
  .login-visual {
    display: none !important;
  }

  .stat-card { min-width: 0; }
  .nav-card { min-width: 0; }

  .row > [class*="col-"] {
    width: 100%;
  }

  .data-table-wrap, .table-responsive-fix {
    margin-right: -16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {
  .content-area { padding: 10px; }
  .panel { padding: 12px; }

  .topbar {
    padding: 12px 10px;
  }

  .topbar .stamp { display: none; }

  .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
  }
}

/* FINAL RESPONSIVE FIXES */
html,body{max-width:100%;overflow-x:hidden}
.main-area{width:calc(100% - 248px);margin-left:248px;min-width:0}
.content-area{width:100%;max-width:1400px}
.table-responsive-fix{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{min-width:760px}
.actions-cell{white-space:nowrap}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
@media(max-width:1100px){.sidebar{width:220px}.main-area{width:calc(100% - 220px);margin-left:220px}.content-area{padding:20px}}
@media(max-width:900px){.sidebar{width:270px;transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main-area{width:100%;margin-left:0}.menu-toggle{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #E1E9EA;border-radius:8px;width:40px;height:40px;color:var(--navy-900)}.topbar{padding:0 16px}.content-area{padding:16px}}
@media(max-width:700px){.topbar{height:auto;min-height:64px}.topbar .stamp{display:none}.panel{padding:15px;border-radius:14px}.content-area{padding:12px}.modal-dialog{margin:10px}.modal-body{max-height:70vh;overflow-y:auto}.row>[class*="col-"]{margin-bottom:4px}.btn-block{width:100%}.data-table{font-size:12px}.data-table th,.data-table td{padding:9px 10px}}
@media(max-width:480px){.content-area{padding:8px}.panel{padding:12px}.topbar h2{font-size:16px}.topbar .subtitle{font-size:10px}.modal-footer{flex-direction:column}.modal-footer .btn{width:100%}}