/* ==========================================================================
   Digital Service Hub — TeFa Bengkel
   Direction: "soft-futuristic HUD", bright variant — same glass-panel /
   live-pulse language as before, rebuilt on a light, airy base so it reads
   fresh and energetic instead of dark-mode. Vivid blue is the "live" signal
   color; amber/teal/coral stay as the status semantics.
   ========================================================================== */

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

:root{
  /* -- surface & base -- */
  --bg:#f3f5fc;
  --bg-glow-1: rgba(59,130,246,.14);
  --bg-glow-2: rgba(255,159,67,.14);
  --surface: rgba(255,255,255,.75);
  --surface-solid:#ffffff;
  --surface-2: #eef1f9;
  --line: rgba(23,32,58,.09);
  --line-soft: rgba(23,32,58,.06);

  /* -- text -- */
  --text:#171f38;
  --muted:#6b7488;

  /* -- semantic accents (bright) -- */
  --amber:#ff9f43;
  --amber-glow: rgba(255,159,67,.30);
  --teal:#14b8a6;
  --teal-glow: rgba(20,184,166,.28);
  --red:#f4511e;
  --red-glow: rgba(244,81,30,.26);

  /* -- signature glow: the "live" accent, used for focus / active / pulse -- */
  --glow:#3b82f6;
  --glow-soft: rgba(59,130,246,.24);

  --radius:18px;
  --radius-sm:12px;
  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:
    radial-gradient(680px 420px at 12% -8%, var(--bg-glow-1), transparent 60%),
    radial-gradient(560px 380px at 108% 10%, var(--bg-glow-2), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  padding-bottom:84px;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
.container{max-width:520px; margin:0 auto; padding:16px;}

/* -- focus states: visible blue ring for keyboard users -- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- Top bar ---------- */
header.topbar{
  display: flex;
  align-items: center;
  gap: 14px;
  padding:20px 16px 16px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  position:sticky; top:0; z-index:10;
}
header.topbar .logo-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eef4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
header.topbar .logo-box img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
header.topbar .logo-box .logo-fallback {
  color: #3b82f6;
  font-weight: 800;
  font-size: 15px;
}
header.topbar .brand-text { line-height: 1.3; }
header.topbar .eyebrow{
  margin: 0;
  font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.16em; color:var(--glow);
  text-transform:uppercase; font-weight:600;
}
header.topbar h1{
  margin: 2px 0 0;
  font-family:var(--font-display);
  font-size:21px; font-weight:700;
  letter-spacing:-.01em;
  color:#111834;
}
@media (max-width: 480px) {
  header.topbar .logo-box { width: 38px; height: 38px; }
  header.topbar h1 { font-size: 20px; }
}

/* ---------- Ticket card (Work Order) ---------- */
.ticket{
  background:var(--surface);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:17px 18px;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 28px -16px rgba(23,32,58,.22);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ticket:hover{box-shadow:0 14px 32px -14px rgba(23,32,58,.26);}
.ticket::before{
  content:"";
  position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:3px;
  background:var(--amber);
  box-shadow:0 0 10px 1px var(--amber-glow);
}
.ticket.teal::before{background:var(--teal); box-shadow:0 0 10px 1px var(--teal-glow);}
.ticket.red::before{background:var(--red); box-shadow:0 0 10px 1px var(--red-glow);}

.ticket .row{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:10px;}
.ticket .label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em;}
.ticket .value{font-size:14px; font-weight:600; text-align:right; color:#111834;}
.wo-num{font-family:var(--font-mono); color:#c9700a; font-size:12.5px; letter-spacing:.03em;}

/* ---------- Status badge, with the "live pulse" signature ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; padding:4px 11px 4px 9px; border-radius:20px; font-weight:600;
  border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
}
.badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
}
.badge.amber{color:#c9700a; border-color:rgba(255,159,67,.45); background:rgba(255,159,67,.14);}
.badge.teal{color:#0d8f80; border-color:rgba(20,184,166,.45); background:rgba(20,184,166,.14);}
.badge.red{color:#d8430f; border-color:rgba(244,81,30,.4); background:rgba(244,81,30,.13);}
.badge.amber::before, .badge.teal::before, .badge.red::before{
  animation:pulse-ring 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .badge::before{animation:none;}
}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 currentColor;}
  70%{box-shadow:0 0 0 6px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}

/* ---------- Forms ---------- */
label{font-size:12px; color:var(--muted); display:block; margin:14px 0 6px; font-weight:500;}
input,select,textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  color:var(--text);
  padding:12px 13px;
  border-radius:var(--radius-sm);
  font-size:14.5px;
  font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--glow);
  box-shadow:0 0 0 3px var(--glow-soft);
}
input::placeholder{color:#9aa2b5;}

/* ---------- Buttons ---------- */
.btn{
  display:block; width:100%; text-align:center; padding:14px; border-radius:var(--radius-sm);
  background:var(--amber); color:#2a1400; font-weight:700; font-size:15px;
  border:none; margin-top:18px; cursor:pointer;
  box-shadow:0 10px 22px -10px var(--amber-glow);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  min-height:46px;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn:hover{filter:brightness(1.04);}
.btn.secondary{
  background:#fff; border:1px solid var(--line); color:var(--text);
  box-shadow:0 4px 14px -8px rgba(23,32,58,.15);
}
.btn.teal{background:var(--teal); color:#00281f; box-shadow:0 10px 22px -10px var(--teal-glow);}
.btn.red{background:var(--red); color:#2a0a00; box-shadow:0 10px 22px -10px var(--red-glow);}
.btn-row{display:flex; gap:10px; margin-top:18px;}
.btn-row .btn{margin-top:0;}

/* ---------- Lists / sections ---------- */
.section-title{
  font-family:var(--font-mono);
  font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  margin:22px 0 9px;
}
.list-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:14px;
}
.empty{
  text-align:center; color:var(--muted); padding:48px 20px; font-size:13px;
  border:1px dashed var(--line); border-radius:var(--radius); margin-top:10px;
  background:rgba(255,255,255,.5);
}

/* ---------- Section title with print button ---------- */
.section-title-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin:22px 0 9px;
}
.section-title-row .section-title{ margin:0; }

.btn-print{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body);
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  padding:6px 13px 6px 10px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.35);
  background:rgba(59,130,246,.08);
  color:#1d5fd6;
  cursor:pointer; white-space:nowrap;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease,
             box-shadow .15s ease, transform .1s ease;
}
.btn-print svg{
  width:13px; height:13px; flex-shrink:0;
  stroke:currentColor; fill:none;
}
.btn-print:hover{
  background:rgba(59,130,246,.14);
  border-color:rgba(59,130,246,.55);
  box-shadow:0 4px 12px -6px var(--glow-soft);
}
.btn-print:active{
  transform:translateY(1px) scale(.97);
}
.btn-print:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:2px;
}

@media (max-width:400px){
  .section-title-row{ flex-wrap:wrap; }
  .btn-print{ font-size:11px; padding:5px 11px 5px 9px; }
}

/* ---------- Alerts ---------- */
.alert{
  padding:13px 15px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:13px;
}
.alert.success{background:rgba(20,184,166,.13); color:#0d8f80; border:1px solid rgba(20,184,166,.35);}
.alert.error{background:rgba(244,81,30,.12); color:#d8430f; border:1px solid rgba(244,81,30,.32);}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{padding:10px 6px; border-bottom:1px solid var(--line-soft); text-align:left;}
th{color:var(--muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;}

/* ---------- Dark table header option ---------- */
table.table-dark{
  background:#fff; border-radius:var(--radius-sm); overflow:hidden;
  box-shadow:0 8px 20px -14px rgba(23,32,58,.2);
}
table.table-dark th{
  background:#1e293b; color:#fff; font-size:11px;
  padding:10px 12px; letter-spacing:.04em;
}
table.table-dark td{ padding:10px 12px; }

/* ---------- Dashboard stats ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:18px;}
.stat-card{
  background:var(--surface); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:15px;
  box-shadow:0 8px 20px -14px rgba(23,32,58,.2);
}
.stat-card .num{font-family:var(--font-display); font-size:24px; font-weight:700; color:#c9700a;}
.stat-card .lbl{font-size:11px; color:var(--muted); margin-top:3px;}

/* ---------- Stat card color variants ---------- */
.stat-card.blue   { background:#3d7bc9; border-color:#3d7bc9; }
.stat-card.orange { background:#e0932a; border-color:#e0932a; }
.stat-card.red    { background:#c0392b; border-color:#c0392b; }
.stat-card.green  { background:#27ae60; border-color:#27ae60; }
.stat-card.blue .num, .stat-card.blue .lbl,
.stat-card.orange .num, .stat-card.orange .lbl,
.stat-card.red .num, .stat-card.red .lbl,
.stat-card.green .num, .stat-card.green .lbl {
  color:#fff;
}
.stat-card.blue .lbl, .stat-card.orange .lbl,
.stat-card.red .lbl, .stat-card.green .lbl { opacity:.9; }

/* ---------- Bottom navigation (mobile) ---------- */
nav.bottom-nav{
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-soft);
  display:flex; padding:9px 4px calc(9px + env(safe-area-inset-bottom));
  z-index:20;
  box-shadow:0 -8px 24px -18px rgba(23,32,58,.3);
}
nav.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px;
  color:var(--muted); padding:6px 2px; border-radius:12px; transition:color .15s ease;
}
nav.bottom-nav a .dot{width:7px; height:7px; border-radius:50%; background:#d7dbe6; transition:box-shadow .2s ease, background .2s ease;}
nav.bottom-nav a.active{color:var(--glow);}
nav.bottom-nav a.active .dot{background:var(--glow); box-shadow:0 0 8px 1px var(--glow-soft);}

/* ---------- Sidebar (desktop only) ---------- */
.app-shell{ display:block; }
.sidebar{ display:none; }

@media (min-width:900px){
  .app-shell{ display:flex; align-items:flex-start; }
  .sidebar{
    display:flex; flex-direction:column;
    width:220px; flex-shrink:0; min-height:100vh;
    background:#1e293b; padding:20px 14px; position:sticky; top:0;
  }
  .sidebar .brand{ color:#fff; font-family:var(--font-display); font-weight:700;
    font-size:15px; margin-bottom:4px; }
  .sidebar .brand small{ display:block; color:#94a3b8; font-size:11px; font-weight:500; }
  .sidebar .nav-group{ margin-top:22px; display:flex; flex-direction:column; }
  .sidebar .nav-group a{
    display:flex; align-items:center; gap:10px; color:#cbd5e1;
    padding:10px 12px; border-radius:10px; font-size:14px; margin-bottom:2px;
  }
  .sidebar .nav-group a:hover{ background:rgba(255,255,255,.06); }
  .sidebar .nav-group a.active{ background:var(--glow); color:#fff; font-weight:600; }
  .sidebar .nav-group a.logout-link{
    margin-top:16px; border-top:1px solid #334155; padding-top:14px;
  }

  .container{ max-width:none; flex:1; padding:28px 32px; }
  body{ padding-bottom:0; }
  nav.bottom-nav{ display:none; }
}

/* ---------- Auth (login / register) ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{
  width:100%; max-width:380px;
  background:var(--surface);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px 26px;
  box-shadow:0 24px 60px -24px rgba(23,32,58,.3);
}
.auth-card h1{font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.01em; color:#111834;}
.auth-card p.sub{font-size:13px; color:var(--muted); margin-bottom:20px; margin-top:4px;}

/* ---------- Responsive ---------- */
@media (max-width:360px){
  .container{padding:13px;}
  .ticket{padding:14px 15px;}
  header.topbar h1{font-size:19px;}
}
@media (min-width:640px){
  .container{padding:24px;}
  .auth-wrap{padding:32px;}
}