/* ==========================================================================
   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; }
}

.checklist-kategori{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--teal); margin:16px 0 4px; padding-top:10px; border-top:1px solid var(--line);
}
.checklist-kategori:first-child{ margin-top:0; padding-top:0; border-top:none; }

/* ---------- Timer pengerjaan servis (siswa/mechanic) ---------- */
.timer-box{
  background:var(--surface); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:14px;
  box-shadow:0 10px 28px -16px rgba(23,32,58,.22);
}
.timer-box .timer-top{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:8px;
}
.timer-box .timer-clock{
  font-family:var(--font-mono); font-size:30px; font-weight:600;
  color:#111834; letter-spacing:.02em; text-align:center; margin:6px 0 10px;
}
.timer-box .timer-bar{
  width:100%; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden;
}
.timer-box .timer-bar-fill{
  height:100%; width:0%; background:var(--teal);
  box-shadow:0 0 10px 1px var(--teal-glow);
  transition:width 1s linear, background .3s ease;
}
.timer-box .timer-bar-fill.over{ background:var(--red); box-shadow:0 0 10px 1px var(--red-glow); }
.timer-box .timer-status{
  font-size:12px; color:var(--muted); margin-top:8px; text-align:center;
}
.timer-box.over{ border-color:rgba(244,81,30,.4); }
.timer-box.over .timer-clock{ color:#d8430f; }
.timer-box.over .timer-status{ color:#d8430f; font-weight:600; }

/* ---------- 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;}
}
/* V5 */
.ticket.paid,.paid-row{border-color:rgba(22,163,74,.35)!important;background:rgba(34,197,94,.10)!important}
.paid-row td{background:rgba(34,197,94,.10)!important}
.chat-box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px;min-height:180px;max-height:520px;overflow:auto;margin-bottom:12px}
.chat-msg{max-width:82%;padding:10px 12px;margin:8px 0;border-radius:14px;background:#eef1f9;color:var(--text)}
.chat-msg.mine{margin-left:auto;background:rgba(20,184,166,.14)}
.chat-msg small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.sub{color:var(--muted);font-size:12px;margin-top:5px}

/* V6 - return to homepage navigation */
.home-nav-link{border:1px solid rgba(255,255,255,.12)!important;margin-bottom:9px!important;background:rgba(255,255,255,.04)}
.portal-home-btn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:9px;background:#eaf2fb;color:#1e3a5f;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;border:1px solid #d5e2f0}
.portal-home-btn:hover{background:#dceaf8}
.back-home{display:inline-block;color:#1e5fae;font-weight:700;font-size:13px;text-decoration:none;padding:8px 13px;border:1px solid #d8e3ef;border-radius:8px;background:#fff}
.back-home:hover{background:#f1f6fb}
@media(max-width:899px){.portal-home-btn{display:none}}

.print-home-link{position:fixed;top:12px;right:14px;z-index:99}.print-home-link a{display:inline-block;padding:8px 12px;border-radius:8px;background:#0b1f43;color:#fff;text-decoration:none;font:700 12px Arial,sans-serif}@media print{.print-home-link{display:none}}

/* DSH V8 - KPI Raport Mekanik */
.kpi-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}.kpi-mechanic{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 8px 24px rgba(20,45,80,.06)}.kpi-mechanic-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.kpi-mechanic-head strong{font-size:15px}.kpi-mechanic-head span{font-size:11px;font-weight:800;color:#287b69;background:#eaf8f3;border:1px solid #cbe9df;padding:5px 9px;border-radius:99px}.kpi-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.kpi-item{border:1px solid #e3e9f0;border-radius:11px;padding:12px;background:linear-gradient(145deg,#fbfdff,#f2f6fa);display:grid;grid-template-columns:34px 1fr;column-gap:9px;align-items:center}.kpi-item>b{grid-row:1/4;width:34px;height:34px;border-radius:9px;background:#0c2340;color:#f2c75c;display:grid;place-items:center}.kpi-item strong{font-size:16px;color:#12233c}.kpi-item small{font-size:10px;color:#66758d}.kpi-item em{font-style:normal;font-size:9px;color:#8a97a8;line-height:1.3}@media(max-width:700px){.kpi-three{grid-template-columns:1fr}.kpi-item{grid-template-columns:40px 1fr}.kpi-item>b{width:40px;height:40px}}


/* Kinerja Mekanik - panduan 3 KPI */
.kpi-guide{margin-top:20px;border:1px solid rgba(18,35,60,.10);border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#fff,#f7fafc);box-shadow:0 12px 32px rgba(20,45,80,.08)}
.kpi-guide-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;background:linear-gradient(110deg,#0b223e,#123d5d);color:#fff;position:relative}
.kpi-guide-head:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#e2b94f,#f5d979,#e2b94f)}
.kpi-guide-eyebrow{display:inline-block;font-size:10px;font-weight:800;letter-spacing:1.5px;color:#f5d979;margin-bottom:5px}
.kpi-guide-head h2{margin:0;font-size:20px;line-height:1.2;color:#fff}
.kpi-guide-head p{margin:6px 0 0;color:#c9d7e5;font-size:12px;max-width:680px;line-height:1.55}
.kpi-guide-mark{width:58px;height:58px;flex:0 0 58px;border:1px solid rgba(245,217,121,.55);border-radius:14px;display:grid;place-items:center;align-content:center;text-align:center;color:#f5d979;font-weight:900;font-size:15px;line-height:1}
.kpi-guide-mark small{font-size:7px;letter-spacing:1px;margin-top:4px}
.kpi-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px}
.kpi-guide-card{display:flex;gap:12px;padding:15px;border:1px solid #e2e8ef;border-radius:14px;background:#fff;min-height:150px;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.kpi-guide-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,45,80,.08);border-color:#ccd7e2}
.kpi-guide-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.kpi-guide-card.rating:before{background:#e3b84d}.kpi-guide-card.wo:before{background:#3b82a0}.kpi-guide-card.frt:before{background:#2b9b76}
.kpi-guide-icon{width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;font-size:18px;font-weight:900;background:#102943;color:#f5d979;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.kpi-guide-card.wo .kpi-guide-icon{color:#8fd0e8}.kpi-guide-card.frt .kpi-guide-icon{color:#8be0bf}
.kpi-guide-card-body{min-width:0;flex:1}.kpi-number{font-size:9px;font-weight:900;letter-spacing:1px;color:#91a0b2}.kpi-guide-card h3{margin:2px 0 5px;font-size:14px;color:#12233c}.kpi-guide-card p{margin:0;color:#65758a;font-size:11px;line-height:1.55}.kpi-rule{margin-top:10px;padding-top:8px;border-top:1px dashed #dce3ea;color:#7c8998;font-size:9px;line-height:1.45}.kpi-rule b{color:#43556a}.kpi-rule span{color:#d2a62e;font-weight:900;margin:0 2px}
.kpi-guide-note{margin:0 16px 16px;padding:11px 13px;border:1px solid #dbe6ee;border-radius:12px;background:#f4f8fb;display:flex;gap:10px;align-items:flex-start;color:#546579}.kpi-guide-note>span{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;background:#0f3454;color:#fff;font-weight:800;font-size:12px}.kpi-guide-note b{font-size:11px;color:#1d344e}.kpi-guide-note small{font-size:10px;line-height:1.5}
@media(max-width:900px){.kpi-guide-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.kpi-guide-head{padding:17px}.kpi-guide-mark{display:none}.kpi-guide-grid{grid-template-columns:1fr;padding:12px}.kpi-guide-card{min-height:auto}.kpi-guide-note{margin:0 12px 12px}}

/* RAPORT MEKANIK - premium report view */
.report-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 26px;margin-bottom:14px;border-radius:18px;background:linear-gradient(120deg,#091e36 0%,#123b59 58%,#0b2942 100%);color:#fff;box-shadow:0 14px 34px rgba(9,30,54,.16);position:relative;overflow:hidden}.report-hero:after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(245,217,121,.18);border-radius:50%;right:-70px;top:-120px}.report-hero-copy{position:relative;z-index:1}.report-eyebrow{font-size:10px;letter-spacing:2px;font-weight:900;color:#f4d56d}.report-hero h1{margin:5px 0 6px;font-size:25px;color:#fff}.report-hero p{margin:0;max-width:690px;color:#c9d8e5;font-size:12px;line-height:1.6}.report-date{position:relative;z-index:1;min-width:155px;text-align:right;border-left:1px solid rgba(255,255,255,.14);padding-left:22px}.report-date span{display:block;font-size:8px;letter-spacing:1.4px;color:#a9c0d3;font-weight:800}.report-date strong{display:block;font-size:18px;color:#f4d56d;margin:4px 0}.report-date small{color:#d5e0e9;font-size:10px}.report-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 15px;border:1px solid #e0e7ee;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(20,45,80,.05);margin-bottom:18px}.filter-label{display:flex;align-items:center;gap:10px;flex:1;min-width:230px}.filter-label>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#edf4f8}.filter-label b{display:block;font-size:11px;color:#20364e}.filter-label small{display:block;color:#8a98a8;font-size:9px;margin-top:2px}.report-filter input{margin:0;min-width:155px}.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}.summary-card{min-height:88px;padding:14px;border:1px solid #e0e7ee;border-radius:14px;background:#fff;display:flex;align-items:center;gap:12px;box-shadow:0 7px 22px rgba(20,45,80,.05);position:relative;overflow:hidden}.summary-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#d4b04f}.summary-blue:before{background:#4a91b1}.summary-green:before{background:#2d9b78}.summary-navy:before{background:#294a69}.summary-icon{width:39px;height:39px;flex:0 0 39px;border-radius:11px;background:#102943;color:#f5d979;display:grid;place-items:center;font-size:17px;font-weight:900}.summary-blue .summary-icon{color:#91d3ec}.summary-green .summary-icon{color:#8de0bf}.summary-navy .summary-icon{color:#bdd1e7}.summary-card small{display:block;color:#8a98a8;font-size:8px;font-weight:900;letter-spacing:.8px}.summary-card strong{display:block;color:#172d46;font-size:19px;line-height:1.15;margin:2px 0}.summary-card em{font-style:normal;color:#8997a7;font-size:8px}.report-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px}.report-section-head>div:first-child span{font-size:8px;letter-spacing:1.5px;font-weight:900;color:#8a9aac}.report-section-head h2{margin:3px 0 0;color:#172d46;font-size:18px}.report-kpi-pill{padding:8px 12px;border-radius:99px;background:#eef7f4;border:1px solid #d3ebe2;color:#397c68;font-size:9px;font-weight:800}.report-kpi-pill b{font-size:13px;margin-left:4px}.mechanic-report-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}.mechanic-report-card{background:#fff;border:1px solid #dfe6ed;border-radius:17px;overflow:hidden;box-shadow:0 10px 28px rgba(20,45,80,.07)}.mechanic-card-top{display:flex;align-items:center;gap:11px;padding:16px 16px 13px;background:linear-gradient(145deg,#fff,#f7fafc);border-bottom:1px solid #edf1f5}.mechanic-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#102943,#1a4865);color:#f5d979;font-size:16px;font-weight:900}.mechanic-identity{min-width:0;flex:1}.mechanic-identity span{font-size:7px;color:#8c9aaa;font-weight:900;letter-spacing:1px}.mechanic-identity h3{margin:2px 0;color:#172d46;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mechanic-identity small{color:#8795a4;font-size:9px}.kpi-score{min-width:58px;text-align:center;padding:7px 8px;border-radius:11px;background:#edf7f3;border:1px solid #d2ebe1}.kpi-score strong{display:block;font-size:16px;color:#2b876c;line-height:1}.kpi-score small{font-size:7px;color:#679786;font-weight:900;letter-spacing:.5px}.kpi-score.mid{background:#fff8e9;border-color:#f0dfb1}.kpi-score.mid strong{color:#b8871d}.kpi-score.mid small{color:#9d7f39}.kpi-score.low{background:#fff0ef;border-color:#efd0cc}.kpi-score.low strong{color:#c3544c}.kpi-score.low small{color:#a8736e}.mechanic-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:13px 14px}.metric-block{position:relative;min-height:66px;border:1px solid #e5ebf0;border-radius:12px;padding:10px;display:flex;gap:9px;align-items:center;background:#fbfcfd}.metric-icon{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;background:#fff5d9;color:#b58a20;font-size:13px;font-weight:900}.metric-icon.blue{background:#edf7fb;color:#3d88a8}.metric-icon.green{background:#edf8f3;color:#2c9874}.metric-icon.navy{background:#edf2f7;color:#375878}.metric-main{min-width:0}.metric-main span{display:block;font-size:8px;color:#8b99a8;font-weight:800}.metric-main strong{display:block;font-size:15px;color:#172d46;line-height:1.15;margin:2px 0}.metric-main strong small{font-size:8px;color:#8795a4}.metric-main em{font-style:normal;font-size:7px;color:#98a4b0}.mini-progress{position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:9px;background:#e7edf1;overflow:hidden}.mini-progress i{display:block;height:100%;background:#d3ad43;border-radius:9px}.mechanic-card-footer{padding:11px 14px 14px;border-top:1px solid #edf1f4;background:#fbfcfd}.mechanic-card-footer>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px}.mechanic-card-footer span{font-size:7px;letter-spacing:1px;color:#8d9aa8;font-weight:900}.mechanic-card-footer b{font-size:8px;color:#526477;text-align:right}.progress-wide{height:6px;border-radius:99px;background:#e8edf1;overflow:hidden}.progress-wide i{display:block;height:100%;border-radius:99px;background:#d3ad43}.progress-wide i.good{background:#2b9874}.progress-wide i.mid{background:#d2a536}.progress-wide i.low{background:#c85a52}.report-empty{padding:45px 20px;text-align:center;border:1px dashed #d6e0e8;border-radius:16px;background:#fbfcfd;margin-bottom:20px}.report-empty div{font-size:30px;color:#8ba0b2}.report-empty h3{margin:8px 0 3px;color:#344b63;font-size:15px}.report-empty p{margin:0;color:#8a98a7;font-size:10px}.report-guide{margin-top:10px}
@media(max-width:980px){.report-summary{grid-template-columns:repeat(2,1fr)}.mechanic-report-grid{grid-template-columns:1fr}}
@media(max-width:620px){.report-hero{padding:19px;align-items:flex-start}.report-hero h1{font-size:20px}.report-date{min-width:auto;padding-left:12px}.report-date strong{font-size:14px}.report-summary{grid-template-columns:1fr 1fr;gap:8px}.summary-card{min-height:78px;padding:10px;gap:8px}.summary-icon{width:32px;height:32px;flex-basis:32px;font-size:14px}.summary-card strong{font-size:16px}.report-filter{align-items:stretch}.filter-label{min-width:100%}.report-filter input,.report-filter button{width:100%}.mechanic-metrics{grid-template-columns:1fr 1fr}.mechanic-card-top{padding:13px}.kpi-score{min-width:50px}.report-section-head{align-items:flex-end}.report-kpi-pill{font-size:8px}.mechanic-card-footer b{font-size:7px}}


/* ---------- Customer estimate / rating ---------- */
.estimate-box{
  margin:14px 0;
  padding:14px;
  border:1px solid rgba(59,130,246,.18);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(20,184,166,.07));
}
.estimate-box>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.estimate-box span{color:var(--muted)}
.estimate-box strong{font-weight:800}
.estimate-box .estimate-total{
  margin-top:8px;padding-top:10px;border-top:1px dashed var(--line);
  color:var(--text);font-size:16px
}
.estimate-box .estimate-total strong{font-size:18px;color:var(--teal)}
.estimate-box.compact{margin-top:10px}
.rating-card{
  margin:16px 0;padding:18px;border-radius:18px;
  background:linear-gradient(135deg,#fff7df,#ffffff);
  border:1px solid rgba(255,159,67,.28);
  box-shadow:0 8px 24px rgba(23,32,58,.07)
}
.rating-title{font-family:var(--font-display);font-weight:800;margin-bottom:12px}
.rating-result{display:flex;flex-direction:column;gap:5px}
.rating-result strong{font-size:22px;letter-spacing:2px;color:#f59e0b}
.bank-transfer-box{
  margin:10px 0;padding:14px;border-radius:14px;
  background:#f7f9ff;border:1px solid var(--line)
}
.bank-transfer-box strong{display:block;margin-bottom:8px}