/* =========================================================
   VVC SMART REPAIR — Design System
   Font: Kanit (หัวข้อ/แสดงผล) + Prompt (เนื้อหา)
   Palette: Deep Tech Navy + Signal Teal + Warm Amber
   ========================================================= */

:root {
  --vvc-navy-950: #0A1E33;
  --vvc-navy-900: #0F2942;
  --vvc-navy-800: #16375C;
  --vvc-navy-700: #1F4A74;
  --vvc-teal-500: #00B4A6;
  --vvc-teal-400: #00D9C0;
  --vvc-teal-100: #E3FBF7;
  --vvc-amber-500: #FF9F43;
  --vvc-amber-100: #FFF1E1;
  --vvc-red-500: #FF5D5D;
  --vvc-red-100: #FFE7E7;
  --vvc-green-500: #2ECC71;
  --vvc-green-100: #E5F9ED;
  --vvc-ink-900: #182634;
  --vvc-ink-600: #4A5B6B;
  --vvc-ink-400: #8598A8;
  --vvc-bg: #F2F6F9;
  --vvc-card: #FFFFFF;
  --vvc-border: #E3EAF0;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-soft: 0 8px 24px rgba(15, 41, 66, 0.08);
  --shadow-pop: 0 14px 34px rgba(15, 41, 66, 0.14);
}

* { box-sizing: border-box; }

body {
  font-family: 'Prompt', sans-serif;
  background: var(--vvc-bg);
  color: var(--vvc-ink-900);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Kanit', sans-serif;
  font-weight: 600;
  color: var(--vvc-navy-900);
}

a { text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #C7D4DE; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- Layout Shell ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 268px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--vvc-navy-900) 0%, var(--vvc-navy-950) 100%);
  color: #fff;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  overflow-y: auto;
  z-index: 1030;
  transition: transform .25s ease;
}

.app-sidebar .brand {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-sidebar .brand .logo-badge {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--vvc-teal-400), var(--vvc-teal-500));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--vvc-navy-950); font-weight: 700;
  box-shadow: 0 6px 14px rgba(0,217,192,.35);
}
.app-sidebar .brand .brand-text { font-family:'Kanit',sans-serif; line-height:1.2; }
.app-sidebar .brand .brand-text strong { display:block; font-size:16px; color:#fff; }
.app-sidebar .brand .brand-text span { font-size:11.5px; color: rgba(255,255,255,.55); }

.sidebar-section-label {
  font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.35);
  padding: 18px 20px 6px; text-transform: uppercase;
}

.sidebar-nav { padding: 4px 12px 24px; }
.sidebar-nav .nav-link {
  color: rgba(255,255,255,.75);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 2px;
  transition: all .15s ease;
}
.sidebar-nav .nav-link i { font-size: 17px; width: 20px; text-align: center; }
.sidebar-nav .nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.sidebar-nav .nav-link.active {
  background: linear-gradient(90deg, rgba(0,217,192,.18), rgba(0,217,192,.02));
  color: var(--vvc-teal-400);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--vvc-teal-400);
}
.sidebar-nav .badge-count {
  margin-left: auto; background: var(--vvc-amber-500); color: #fff;
  font-size: 10.5px; padding: 2px 7px; border-radius: 20px;
}

.app-main { margin-left: 268px; width: 100%; min-height: 100vh; display:flex; flex-direction:column; }

.app-topbar {
  height: 72px; background: var(--vvc-card);
  border-bottom: 1px solid var(--vvc-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; position: sticky; top: 0; z-index: 1020;
}
.app-topbar .page-title { font-family:'Kanit',sans-serif; font-size: 19px; margin:0; }
.app-topbar .page-sub { font-size: 12.5px; color: var(--vvc-ink-400); }

.topbar-clock {
  font-size: 13px; color: var(--vvc-ink-600);
  background: var(--vvc-teal-100); padding: 7px 14px; border-radius: 30px;
  display:flex; align-items:center; gap:8px; font-weight:500;
}
.topbar-clock i { color: var(--vvc-teal-500); }

.app-content { padding: 26px; flex: 1; }

.sidebar-toggle-btn { display:none; }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.show { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .app-main { margin-left: 0; }
  .sidebar-toggle-btn { display:inline-flex; }
}

/* ---------------- Cards & Stat Widgets ---------------- */
.stat-card {
  background: var(--vvc-card);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--vvc-border);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  margin-bottom: 14px;
}
.stat-card .stat-value { font-family:'Kanit',sans-serif; font-size: 30px; font-weight:700; color: var(--vvc-navy-900); line-height:1; }
.stat-card .stat-label { font-size: 13px; color: var(--vvc-ink-600); margin-top: 6px; }
.stat-card::after {
  content:''; position:absolute; right:-30px; bottom:-30px; width:110px; height:110px;
  border-radius:50%; background: rgba(0,180,166,.06);
}

.tone-teal  .stat-icon { background: var(--vvc-teal-100); color: var(--vvc-teal-500); }
.tone-amber .stat-icon { background: var(--vvc-amber-100); color: var(--vvc-amber-500); }
.tone-red   .stat-icon { background: var(--vvc-red-100); color: var(--vvc-red-500); }
.tone-green .stat-icon { background: var(--vvc-green-100); color: var(--vvc-green-500); }
.tone-navy  .stat-icon { background: #E7EDF3; color: var(--vvc-navy-800); }

.card-soft {
  background: var(--vvc-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--vvc-border);
  box-shadow: var(--shadow-soft);
}
.card-soft .card-header {
  background: transparent; border-bottom: 1px solid var(--vvc-border);
  font-family:'Kanit',sans-serif; font-weight:600; padding: 16px 20px;
}
.card-soft .card-body { padding: 20px; }

/* ---------------- Badges ---------------- */
.badge-status { padding: 6px 13px; border-radius: 30px; font-size: 12.5px; font-weight: 500; display:inline-flex; align-items:center; gap:6px; }
.badge-status-pending  { background: #EAF0F6; color: var(--vvc-navy-800); }
.badge-status-progress { background: var(--vvc-teal-100); color: #007A70; }
.badge-status-waiting  { background: var(--vvc-amber-100); color: #B15E00; }
.badge-status-done     { background: var(--vvc-green-100); color: #1D9A50; }
.badge-status-cancel   { background: var(--vvc-red-100); color: #D6393B; }

.badge-urgency { padding: 4px 11px; border-radius: 30px; font-size: 12px; font-weight: 500; }
.badge-urgency-low      { background:#EEF2F5; color:#5B6B78; }
.badge-urgency-medium   { background:#E8F0FE; color:#2A64D6; }
.badge-urgency-high     { background: var(--vvc-amber-100); color:#C0631A; }
.badge-urgency-critical { background: var(--vvc-red-100); color:#D6393B; font-weight:600; }

/* ---------------- Buttons ---------------- */
.btn-vvc-primary {
  background: linear-gradient(135deg, var(--vvc-teal-400), var(--vvc-teal-500));
  border: none; color: #fff; font-weight: 500;
  box-shadow: 0 8px 18px rgba(0,180,166,.3);
}
.btn-vvc-primary:hover { color:#fff; filter: brightness(1.05); }
.btn-vvc-navy { background: var(--vvc-navy-900); border:none; color:#fff; }
.btn-vvc-navy:hover { background: var(--vvc-navy-800); color:#fff; }

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--vvc-border);
  padding: 10px 14px;
  font-family: 'Prompt', sans-serif;
}
.form-control:focus, .form-select:focus {
  border-color: var(--vvc-teal-400);
  box-shadow: 0 0 0 3px rgba(0,217,192,.15);
}
.form-label { font-size: 13.5px; font-weight: 500; color: var(--vvc-ink-600); margin-bottom: 6px; }

.table-vvc thead th {
  background: #F7FAFC; font-size: 12.5px; text-transform: uppercase; letter-spacing:.03em;
  color: var(--vvc-ink-400); border-bottom: 1px solid var(--vvc-border); font-weight:600;
}
.table-vvc td { vertical-align: middle; font-size: 14px; }
.table-vvc tbody tr:hover { background: #FAFDFF; }

/* ---------------- Login Page ---------------- */
.login-wrap {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 15% 20%, #133B5C 0%, var(--vvc-navy-950) 55%, #071522 100%);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 920px; background: var(--vvc-card);
  border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.4);
  display: flex;
}
.login-visual {
  flex: 1.05; background: linear-gradient(155deg, var(--vvc-navy-900), var(--vvc-navy-950));
  color:#fff; padding: 46px; position: relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
}
.login-visual::before {
  content:''; position:absolute; width:260px; height:260px; border-radius:50%;
  background: rgba(0,217,192,.12); top:-80px; right:-80px;
}
.login-visual::after {
  content:''; position:absolute; width:180px; height:180px; border-radius:50%;
  background: rgba(255,159,67,.10); bottom:-60px; left:-40px;
}
.login-form-side { flex: 1; padding: 46px 44px; }
@media (max-width: 767.98px) { .login-visual { display:none; } .login-card{border-radius:20px;} }

.input-icon-group { position: relative; }
.input-icon-group i {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color: var(--vvc-ink-400);
}
.input-icon-group .form-control { padding-left: 40px; }

/* ---------------- Timeline (ประวัติสถานะ) ---------------- */
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content:''; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background: var(--vvc-border); }
.timeline-item { position: relative; padding-bottom: 22px; }
.timeline-item::before {
  content:''; position:absolute; left:-28px; top:2px; width:16px; height:16px; border-radius:50%;
  background: var(--vvc-teal-400); border:3px solid #fff; box-shadow:0 0 0 2px var(--vvc-teal-400);
}
.timeline-item.done::before { background: var(--vvc-green-500); box-shadow:0 0 0 2px var(--vvc-green-500); }
.timeline-item.cancel::before { background: var(--vvc-red-500); box-shadow:0 0 0 2px var(--vvc-red-500); }
.timeline-item .t-time { font-size: 12px; color: var(--vvc-ink-400); }
.timeline-item .t-status { font-weight:600; font-family:'Kanit',sans-serif; color: var(--vvc-navy-900); }

/* ---------------- Star rating ---------------- */
.star-rating { display:flex; gap:6px; flex-direction: row-reverse; justify-content:flex-end; }
.star-rating input { display:none; }
.star-rating label { font-size: 30px; color: #D9E2E8; cursor:pointer; transition: color .15s; }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: var(--vvc-amber-500); }

/* ---------------- Empty state ---------------- */
.empty-state { text-align:center; padding: 50px 20px; color: var(--vvc-ink-400); }
.empty-state i { font-size: 52px; color: #D6E1E8; }

/* ---------------- Misc ---------------- */
.avatar-circle {
  width:38px; height:38px; border-radius:50%; background: var(--vvc-teal-100);
  color: var(--vvc-teal-500); display:flex; align-items:center; justify-content:center; font-weight:600;
  font-family:'Kanit',sans-serif;
}
.dropzone-upload {
  border: 2px dashed var(--vvc-border); border-radius: var(--radius-md);
  padding: 26px; text-align:center; color: var(--vvc-ink-400); cursor:pointer; transition:.15s;
}
.dropzone-upload:hover { border-color: var(--vvc-teal-400); background: var(--vvc-teal-100); }

.step-indicator { display:flex; align-items:center; gap:8px; margin-bottom: 26px; }
.step-indicator .step {
  flex:1; height:6px; border-radius:10px; background: var(--vvc-border);
}
.step-indicator .step.active { background: var(--vvc-teal-400); }

/* ---------------- Print (รายงาน / PDF) ---------------- */
.print-only { display: none; }
@media print {
  .app-sidebar, .app-topbar, .no-print, footer, .sidebar-toggle-btn { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .app-content { padding: 0 !important; }
  .print-only { display: block !important; }
  body { background: #fff !important; }
  .card-soft { box-shadow: none !important; border: none !important; }
  .table { font-size: 11px; }
}