/* VMC Car - Viettel Manufacturing visual theme.
   Loaded after app.css so it changes only the visual layer, not business logic. */
:root{
  --vmc-red:#ed1b2f;
  --vmc-red-dark:#cf1733;
  --vmc-red-soft:#fff1f3;
  --vmc-navy:#0b2342;
  --vmc-ink:#15253a;
  --vmc-gray:#64748b;
  --vmc-line:#e3e8ee;
  --vmc-bg:#f5f7f9;
  --primary:#ed1b2f;
  --accent:#ed1b2f;
  --danger:#c8102e;
  --shadow:0 8px 24px rgba(11,35,66,.08);
}

body{background:var(--vmc-bg);color:var(--vmc-ink)}
h1,h2,h3{color:var(--vmc-navy)}
a{accent-color:var(--vmc-red)}

/* Header / navigation */
.topbar.vmc-topbar{
  min-height:68px;height:68px;background:#fff;color:var(--vmc-navy);
  border-bottom:1px solid #eadde0;box-shadow:0 3px 14px rgba(11,35,66,.07);
  padding:0 max(20px,calc((100vw - 1500px)/2));
}
.vmc-brand-block{display:flex;align-items:center;min-width:max-content}
.vmc-brand-logo{display:flex;align-items:center;gap:12px;text-decoration:none!important;color:var(--vmc-navy)!important}
.vmc-brand-logo img{width:104px;height:auto;display:block}
.vmc-brand-divider{width:1px;height:34px;background:#e5e9ee}
.vmc-brand-product{display:flex;flex-direction:column;line-height:1.05}
.vmc-brand-product strong{font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--vmc-navy)}
.vmc-brand-product small{font-size:10px;color:#77859a;margin-top:4px;font-weight:700}

.topbar.vmc-topbar nav.vmc-nav{margin-left:auto;display:flex;gap:3px;align-items:center;font-size:13px}
.topbar.vmc-topbar nav.vmc-nav>a{color:#27364a!important;text-decoration:none;border-radius:8px;padding:9px 9px;font-weight:750;transition:.15s ease}
.topbar.vmc-topbar nav.vmc-nav>a:hover{background:var(--vmc-red-soft);color:var(--vmc-red)!important}
.topbar.vmc-topbar nav.vmc-nav>a.active{background:var(--vmc-red-soft);color:var(--vmc-red)!important;box-shadow:inset 0 -2px 0 var(--vmc-red)}
.topbar.vmc-topbar nav.vmc-nav>a.vmc-logout-link{color:var(--vmc-red)!important;border:1px solid #f3c2c9;background:#fff}
.topbar.vmc-topbar nav.vmc-nav>a.vmc-logout-link:hover{background:var(--vmc-red);color:#fff!important}
.topbar.vmc-topbar nav.vmc-nav>a.vmc-utility-link{color:#53657a!important}
.vmc-user-pill{display:flex;align-items:center;gap:6px;margin-left:7px;border:1px solid #eadde0;border-radius:999px;padding:7px 10px;background:#fff;font-weight:800;color:var(--vmc-navy);white-space:nowrap}
.vmc-user-pill small{font-size:9px;color:#8793a3;font-weight:800;border-left:1px solid #e1e5ea;padding-left:6px}
.vmc-user-dot{color:var(--vmc-red);font-size:9px}
.vmc-menu-btn{color:var(--vmc-red)!important;background:#fff3f4!important;border:1px solid #f2c4ca!important;border-radius:8px!important;width:42px;height:42px}

/* General cards and controls */
.card{border-color:var(--vmc-line);box-shadow:0 8px 22px rgba(11,35,66,.06)}
.card:hover{border-color:#d9dfe6}
.btn.primary,.btn.xlarge.primary,.big-mobile-btn,.employee-scan-launch,.scan-confirm-btn{
  background:linear-gradient(90deg,var(--vmc-red),var(--vmc-red-dark))!important;
  border-color:var(--vmc-red)!important;color:#fff!important;
  box-shadow:0 6px 14px rgba(237,27,47,.16)
}
.btn.primary:hover,.big-mobile-btn:hover,.employee-scan-launch:hover,.scan-confirm-btn:hover{filter:brightness(.96)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(237,27,47,.10)!important;border-color:var(--vmc-red)!important}

/* Dashboard */
.stats-grid .stat{position:relative;overflow:hidden}
.stats-grid .stat:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--vmc-red),#ff6b78)}
.stats-grid .stat b{color:var(--vmc-navy)}
.page-head h1{font-weight:900;letter-spacing:-.02em}

/* Tables */
th{background:#fafafa;color:#43546a;border-bottom-color:#e1e6eb}
tbody tr:hover{background:#fff7f8}

/* Alerts / badges */
.badge.ok,.status-pill.active{background:#eef9f2;color:#17683b}
.alert.danger,.message-error{background:#fff0f2;color:#a90f2b;border:1px solid #f2c4cb}
.alert.warning{background:#fff9e9}

/* Employee/mobile features: replace blue highlights with Viettel red */
.qr-step>span{background:var(--vmc-red)!important}
.weekday-chip input:checked+span{background:#fff0f2!important;border-color:var(--vmc-red)!important;color:var(--vmc-red)!important}
.trip-direction.outbound,.big-direction.outbound{background:#fff0f2!important;color:var(--vmc-red)!important}
.trip-direction.return,.big-direction.return{background:#fff7e9!important;color:#9a5c00!important}
.employee-confirm{border-left-color:var(--vmc-red)!important;background:#fff7f8!important}
.qr-code-box.outbound{border-color:#ef97a4!important}
.outbound-field{border-left-color:var(--vmc-red)!important}
.scan-result-icon{background:#fff0f2!important;color:var(--vmc-red)!important}

/* Preserve gold stars for rating */
.star-buttons .star-btn.selected,.star-rating input:checked~label{color:#f4b400!important}

/* Subtle VMC identity stripe inside content */
.container:not(.login-shell):before{
  content:"";display:block;height:3px;width:78px;border-radius:999px;
  background:linear-gradient(90deg,var(--vmc-red),#ff7885);margin:0 0 18px 0;
}

@media(max-width:1120px){
  .vmc-brand-product small{display:none}
  .vmc-brand-logo img{width:92px}
  .topbar.vmc-topbar nav.vmc-nav>a{padding:8px 6px;font-size:12px}
  .vmc-user-pill small{display:none}
}

@media(max-width:900px){
  .topbar.vmc-topbar{height:auto;min-height:64px;padding:9px 14px;flex-wrap:wrap}
  .vmc-brand-logo img{width:88px}.vmc-brand-divider{height:30px}.vmc-brand-product strong{font-size:18px}
  .topbar.vmc-topbar nav.vmc-nav{display:none;width:100%;margin:9px 0 2px;flex-direction:column;align-items:stretch;gap:2px;border-top:1px solid #edf0f3;padding-top:8px}
  .nav-open .topbar.vmc-topbar nav.vmc-nav{display:flex}
  .topbar.vmc-topbar nav.vmc-nav>a{padding:11px 12px!important;border-bottom:0!important;border-radius:8px;font-size:14px}
  .topbar.vmc-topbar nav.vmc-nav>a.active{box-shadow:inset 3px 0 0 var(--vmc-red)}
  .vmc-user-pill{margin:6px 0 2px;border-radius:8px;justify-content:flex-start}
  .container:not(.login-shell):before{margin-top:0}
}

@media(max-width:520px){
  .vmc-brand-logo{gap:8px}.vmc-brand-logo img{width:78px}.vmc-brand-divider{height:27px}
  .vmc-brand-product strong{font-size:17px}.vmc-brand-product small{display:none}
}