/* ===========================================================
   Punch App — Modern UI Theme
   Palette: deep navy sidebar + teal/cyan brand + emerald money
   Font: Plus Jakarta Sans
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#eef2f7;
  --surface:#ffffff;
  --ink:#0f1b2d;
  --muted:#6b7a90;
  --border:#e7ecf3;
  --brand:#0ea5b7;          /* teal-cyan */
  --brand-2:#13c2c2;
  --brand-strong:#0b7c8a;
  --brand-soft:#e0f7fa;
  --sidebar-1:#0c1424;
  --sidebar-2:#142036;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#3b82f6;
  --shadow-sm:0 1px 2px rgba(16,30,54,.06), 0 1px 3px rgba(16,30,54,.05);
  --shadow-md:0 4px 16px rgba(16,30,54,.08);
  --shadow-lg:0 18px 50px rgba(8,15,30,.18);
  --radius:16px;
}

*{ font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
body{ background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
a{ color:var(--brand-strong); }
.text-muted{ color:var(--muted) !important; }

/* ---------- Login ---------- */
.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:
    radial-gradient(900px 500px at 12% 18%, rgba(19,194,194,.20), transparent 60%),
    radial-gradient(800px 480px at 88% 88%, rgba(14,165,183,.22), transparent 55%),
    linear-gradient(135deg, #0a1120 0%, #0f1d33 55%, #12263f 100%);
}
.login-container{ width:100%; max-width:430px; }
.login-card{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.5);
  border-radius:22px; padding:2.6rem 2.4rem;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(6px);
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.login-logo{
  width:74px; height:74px; margin:0 auto; border-radius:20px;
  display:flex; align-items:center; justify-content:center; font-size:2.2rem;
  color:#fff; background:linear-gradient(135deg,var(--brand-2),var(--brand-strong));
  box-shadow:0 10px 24px rgba(14,165,183,.45);
}
.login-card h3{ font-weight:800; letter-spacing:-.02em; }
.login-card .btn-primary{ box-shadow:0 10px 22px rgba(14,165,183,.35); }

/* ---------- Layout ---------- */
.topbar{
  background:linear-gradient(90deg,var(--sidebar-1),var(--sidebar-2)) !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 14px rgba(8,15,30,.25);
  z-index:1040;
}
.topbar .navbar-brand{ font-weight:800; letter-spacing:-.01em; color:#fff; }
.brand-logo{
  width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff; background:linear-gradient(135deg,var(--brand-2),var(--brand-strong));
  box-shadow:0 4px 12px rgba(14,165,183,.5);
}
.app-layout{ display:flex; align-items:stretch; min-height:calc(100vh - 58px); }

.sidebar-panel{
  background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2));
  color:#fff; --bs-offcanvas-width:260px;
}
@media (min-width:768px){ .sidebar-panel{ width:260px; flex:0 0 260px; } }
.sidebar-nav{ padding:.85rem .65rem; gap:.18rem; }
.sidebar-nav .nav-link{
  color:#aab6c9; padding:.72rem .9rem; border-radius:12px; font-weight:600; font-size:.93rem;
  display:flex; align-items:center; transition:all .18s ease; border-left:0;
}
.sidebar-nav .nav-link i{ margin-right:.7rem; width:20px; font-size:1.05rem; opacity:.9; }
.sidebar-nav .nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sidebar-nav .nav-link.active{
  background:linear-gradient(135deg, rgba(14,165,183,.22), rgba(19,194,194,.10));
  color:#fff; box-shadow:inset 0 0 0 1px rgba(19,194,194,.35);
}
.sidebar-nav .nav-link.active i{ color:var(--brand-2); opacity:1; }

.main-area{ flex:1 1 auto; min-width:0; background:var(--bg); }
.main-area .container-fluid{ max-width:1400px; }

/* ---------- Cards ---------- */
.card{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--surface); }
.card-header{ background:transparent; border-bottom:1px solid var(--border); font-weight:700; padding:1rem 1.25rem; letter-spacing:-.01em; }
h4,h5{ font-weight:800; letter-spacing:-.02em; }

/* ---------- Stat cards ---------- */
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem 1.35rem; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:rise .45s ease both;
}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-card .stat-icon{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.45rem; }
.stat-card .stat-value{ font-size:1.8rem; font-weight:800; margin:0; letter-spacing:-.02em; color:var(--ink); }
.stat-card .stat-label{ color:var(--muted); font-size:.82rem; margin:0 0 .25rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.bg-blue-soft{ background:#e0f2fe; color:#0369a1; }
.bg-green-soft{ background:#dcfce7; color:#15803d; }
.bg-orange-soft{ background:#ffedd5; color:#c2410c; }
.bg-purple-soft{ background:#ede9fe; color:#6d28d9; }
.bg-red-soft{ background:#fee2e2; color:#b91c1c; }

/* ---------- Buttons ---------- */
.btn{ border-radius:11px; font-weight:600; letter-spacing:-.01em; padding:.5rem 1.05rem; transition:all .16s ease; }
.btn-lg{ border-radius:13px; }
.btn-primary{ background:linear-gradient(135deg,var(--brand-2),var(--brand)); border:none; color:#fff; }
.btn-primary:hover,.btn-primary:focus{ background:linear-gradient(135deg,var(--brand),var(--brand-strong)); transform:translateY(-1px); box-shadow:0 8px 20px rgba(14,165,183,.32); color:#fff; }
.btn-outline-primary{ border:1.5px solid var(--brand); color:var(--brand-strong); }
.btn-outline-primary:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-success{ background:linear-gradient(135deg,#34d399,#059669); border:none; }
.btn-success:hover{ background:linear-gradient(135deg,#10b981,#047857); transform:translateY(-1px); }
.btn-danger{ background:linear-gradient(135deg,#fb7185,#e11d48); border:none; }
.btn-danger:hover{ background:linear-gradient(135deg,#f43f5e,#be123c); transform:translateY(-1px); }
.btn-dark{ background:var(--sidebar-1); border:none; }
.btn-link{ color:var(--brand-strong); text-decoration:none; font-weight:600; }
.btn-sm{ border-radius:9px; }

/* ---------- Forms ---------- */
.form-control,.form-select{ border-radius:11px; border:1.5px solid var(--border); padding:.55rem .8rem; font-size:.95rem; background:#fff; }
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(14,165,183,.14); }
.form-control-lg{ border-radius:13px; padding:.7rem .95rem; }
.form-label{ font-weight:600; font-size:.88rem; color:#33425a; margin-bottom:.35rem; }

/* ---------- Tables ---------- */
.table{ margin:0; }
.table thead th{ background:#f7f9fc; color:#5a6b82; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); padding:.85rem 1rem; }
.table tbody td{ padding:.85rem 1rem; vertical-align:middle; border-color:#f0f3f8; font-size:.92rem; }
.table-hover tbody tr:hover{ background:#f6fbfc; }
.table-responsive{ border-radius:var(--radius); }

/* ---------- Badges ---------- */
.badge{ border-radius:999px; font-weight:700; padding:.4em .75em; font-size:.72rem; letter-spacing:.02em; }
.badge.bg-success{ background:#dcfce7 !important; color:#15803d !important; }
.badge.bg-danger{ background:#fee2e2 !important; color:#b91c1c !important; }
.badge.bg-warning{ background:#fef3c7 !important; color:#b45309 !important; }
.badge.bg-info{ background:#e0f2fe !important; color:#0369a1 !important; }
.badge.bg-secondary{ background:#eef1f6 !important; color:#5a6b82 !important; }

/* ---------- Alerts ---------- */
.alert{ border-radius:13px; border:none; font-weight:500; box-shadow:var(--shadow-sm); }
.alert-success{ background:#dcfce7; color:#166534; }
.alert-danger{ background:#fee2e2; color:#991b1b; }
.alert-info{ background:#e0f2fe; color:#075985; }

/* ---------- Punch page ---------- */
.punch-card{ text-align:center; padding:2.2rem 1.2rem; }
.punch-time{ font-size:3.2rem; font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--brand-strong),var(--brand-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.punch-date{ font-size:1.05rem; color:var(--muted); margin-bottom:1.4rem; font-weight:600; }
.camera-frame{ position:relative; width:100%; max-width:360px; margin:0 auto; aspect-ratio:4/3;
  background:linear-gradient(135deg,#1b2638,#0c1424); border-radius:18px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow-md); }
.camera-frame video,.camera-frame img,.camera-frame canvas{ width:100%; height:100%; object-fit:cover; }
.btn-punch{ font-size:1.2rem; font-weight:700; padding:.9rem 2.4rem; border-radius:16px; color:#fff; }
.btn-punch-in{ background:linear-gradient(135deg,#34d399,#059669); border:none; box-shadow:0 12px 26px rgba(16,185,129,.4); }
.btn-punch-in:hover{ background:linear-gradient(135deg,#10b981,#047857); }
.btn-punch-out{ background:linear-gradient(135deg,#fb7185,#e11d48); border:none; box-shadow:0 12px 26px rgba(244,63,94,.4); }
.btn-punch-out:hover{ background:linear-gradient(135deg,#f43f5e,#be123c); }
.status-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.status-active{ background:var(--success); box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.status-inactive{ background:#94a3b8; }

/* ---------- Misc ---------- */
code{ background:#eef2f7; color:var(--brand-strong); padding:.12em .45em; border-radius:6px; font-size:.85em; }
.offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.08); }

@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

@media (max-width:768px){
  .punch-time{ font-size:2.4rem; }
  .stat-card .stat-value{ font-size:1.45rem; }
  .login-card{ padding:2rem 1.5rem; }
}