/* Car Wash Manager - corporate UI layer on top of Bootstrap 5 */
:root {
  --cw-primary: #2563eb;
  --cw-indigo: #4f46e5;
  --cw-deep: #0b1b4d;
  --cw-ink: #0f172a;
  --cw-muted: #64748b;
  --cw-bg: #f4f6fb;
  --cw-line: #e5e9f2;
  --cw-radius: 16px;
  --cw-shadow: 0 8px 24px rgba(30, 41, 59, .06);
  --cw-gradient: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
  --bs-primary: #2563eb; --bs-primary-rgb: 37, 99, 235;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--cw-ink);
  --bs-border-color: var(--cw-line);
  --bs-link-color: #1d4ed8; --bs-link-hover-color: #1e40af;
  --bs-border-radius: 12px; --bs-border-radius-lg: 16px;
}
body { background: var(--cw-bg); color: var(--cw-ink); -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.02em; }
.text-muted { color: var(--cw-muted) !important; }

/* ---------- login ---------- */
#login-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .55), transparent 60%),
              radial-gradient(900px 500px at 100% 110%, rgba(37, 99, 235, .6), transparent 60%),
              linear-gradient(135deg, #0b1b4d 0%, #1d4ed8 55%, #6d28d9 100%); }
#login-view.d-none { display: none !important; }
.login-wrap { width: 100%; max-width: 420px; }
.login-logo { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.login-logo svg { width: 44px; height: 44px; }
.login-title { color: #fff; font-weight: 800; font-size: 1.85rem; letter-spacing: -.03em; text-align: center; margin: 0; }
.login-sub { color: rgba(255, 255, 255, .75); text-align: center; margin: 6px 0 26px; font-size: .95rem; }
.login-card { border: 0; border-radius: 26px; box-shadow: 0 30px 70px rgba(2, 6, 23, .4); }
.login-card .card-body { padding: 2rem !important; }
.login-card h2 { font-weight: 800; font-size: 1.5rem; margin: 0 0 4px; }
.field-icon { position: relative; }
.field-icon svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--cw-muted); pointer-events: none; }
.field-icon .form-control { padding-left: 42px; }
.login-foot { color: rgba(255, 255, 255, .6); text-align: center; font-size: .8rem; margin-top: 20px; }

/* ---------- layout / sidebar ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 262px; flex: 0 0 262px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, #0b1b4d 0%, #0a1438 100%) !important; border-right: 0; }
.brand-row { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--cw-gradient); box-shadow: 0 8px 20px rgba(79, 70, 229, .45); flex: 0 0 42px; }
.brand-mark svg { width: 24px; height: 24px; }
#brand { font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.15; }
#whoami { font-size: .78rem; color: rgba(255, 255, 255, .55); margin-top: 2px; }
.sidebar .nav { padding: 12px !important; gap: 2px; }
.sidebar .nav-link { color: rgba(255, 255, 255, .68); border-radius: 12px; padding: .62rem .9rem; font-size: .92rem; font-weight: 500; transition: background .15s, color .15s; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar .nav-link.active { color: #fff; background: var(--cw-gradient); box-shadow: 0 8px 18px rgba(79, 70, 229, .4); font-weight: 600; }
.nav-section { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .35); padding: 1.1rem .9rem .35rem; font-weight: 600; }
.sidebar-foot { padding: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar-foot .btn { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .85); border-radius: 12px; font-weight: 600; }
.sidebar-foot .btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.content { flex: 1; min-width: 0; padding: 28px 34px !important; max-width: 1500px; }
.mobile-bar { background: var(--cw-deep) !important; }
@media (max-width: 991.98px) {
  .sidebar { position: fixed; z-index: 1040; left: -280px; transition: left .22s ease; }
  .sidebar.open { left: 0; box-shadow: 0 0 0 100vmax rgba(2, 6, 23, .45); }
  .layout { display: block; }
  .content { padding: 18px 14px !important; }
}

/* ---------- cards, tables, forms ---------- */
.card { border: 1px solid var(--cw-line); border-radius: var(--cw-radius); box-shadow: var(--cw-shadow); background: #fff; }
.card-header { background: transparent; border-bottom: 1px solid var(--cw-line); font-weight: 700; padding: 1rem 1.25rem; }
.card-body { padding: 1.25rem; }
.list-group-item { border-color: var(--cw-line); }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .85rem 1rem; border-bottom-color: var(--cw-line); }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--cw-muted); font-weight: 700; background: #f8fafc; border-bottom: 1px solid var(--cw-line); }
.table-hover > tbody > tr:hover > * { background: #f8faff; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--cw-primary); }
.table td, .table th { vertical-align: middle; }
.form-label { font-weight: 600; font-size: .85rem; color: #334155; margin-bottom: .35rem; }
.form-control, .form-select { border-radius: 12px; border: 1px solid var(--cw-line); padding: .68rem .9rem; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--cw-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }
.btn { border-radius: 12px; font-weight: 600; padding: .6rem 1.1rem; letter-spacing: -.005em; transition: transform .06s, box-shadow .15s, background .15s; }
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .38rem .8rem; border-radius: 10px; }
.btn-primary { background: var(--cw-gradient); border: 0; box-shadow: 0 8px 18px rgba(79, 70, 229, .28); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%); box-shadow: 0 10px 22px rgba(79, 70, 229, .36); }
.btn-primary:disabled { opacity: .6; }
.btn-success { background: #16a34a; border-color: #16a34a; }
.btn-outline-primary { color: var(--cw-primary); border-color: #c7d6fb; }
.btn-outline-primary:hover { background: var(--cw-primary); border-color: var(--cw-primary); }
.btn-touch { min-height: 44px; }
.modal-content { border: 0; border-radius: 22px; box-shadow: 0 30px 70px rgba(2, 6, 23, .3); }
.modal-header, .modal-footer { border-color: var(--cw-line); padding: 1.1rem 1.4rem; }
.modal-body { padding: 1.4rem; }
.toast { border-radius: 14px; border: 0; box-shadow: 0 16px 40px rgba(2, 6, 23, .25); }
.alert { border: 0; border-radius: 14px; }

/* ---------- KPI tiles ---------- */
.stat { position: relative; border: 1px solid var(--cw-line); border-left: 1px solid var(--cw-line) !important; overflow: hidden; }
.stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cw-primary); }
.stat.green::before { background: #16a34a; } .stat.amber::before { background: #f59e0b; } .stat.red::before { background: #dc2626; } .stat.grey::before { background: #94a3b8; }
.stat .v { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.stat .card-body, .stat.card-body { padding: 1.1rem 1.25rem 1.1rem 1.5rem; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- status badges (soft) ---------- */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .02em; padding: .4em .8em; font-size: .72em; }
.badge.text-bg-primary { background: rgba(37, 99, 235, .12) !important; color: #1d4ed8 !important; }
.badge.text-bg-success { background: rgba(22, 163, 74, .13) !important; color: #15803d !important; }
.badge.text-bg-danger { background: rgba(220, 38, 38, .12) !important; color: #b91c1c !important; }
.badge.text-bg-warning { background: rgba(245, 158, 11, .17) !important; color: #b45309 !important; }
.badge.text-bg-info { background: rgba(14, 165, 233, .14) !important; color: #0369a1 !important; }
.badge.text-bg-secondary { background: rgba(100, 116, 139, .14) !important; color: #475569 !important; }
.badge.text-bg-dark { background: rgba(15, 23, 42, .1) !important; color: #0f172a !important; }
.badge-status { font-weight: 700; }

/* ---------- job progress ---------- */
.job-steps { gap: 8px; }
.job-steps .step { flex: 1; text-align: center; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .55rem .2rem; border-radius: 10px; background: #f1f5f9; color: #94a3b8; }
.job-steps .step.done { background: rgba(22, 163, 74, .12); color: #15803d; }
.job-steps .step.now { background: var(--cw-gradient); color: #fff; box-shadow: 0 8px 16px rgba(79, 70, 229, .3); }
.nav-pills .nav-link, .nav-tabs .nav-link { border-radius: 10px; font-weight: 600; color: var(--cw-muted); }
.nav-pills .nav-link.active { background: var(--cw-primary); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }