/* ════════════════════════════════════════════════════
   JSS CAR COLLECTION — style.css v3
   Aesthetic: Refined Utility / Mobile-first
   Font: Syne (display) + DM Sans (body)
════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:        #F7F6F3;
  --bg2:       #EEECEA;
  --surface:   #FFFFFF;
  --surface2:  #F3F2EF;
  --border:    #E4E2DC;
  --border2:   #D0CEC7;
  --text:      #111110;
  --text2:     #6B6965;
  --text3:     #A8A5A0;
  --red:       #D0190F;
  --red-soft:  #FEF0EF;
  --red-mid:   #F5CECE;
  --blue:      #1357D6;
  --blue-soft: #EDF2FE;
  --orange:    #C45C00;
  --orange-soft:#FEF4EB;
  --green:     #1A7F4B;
  --green-soft:#EDF7F2;
  --valid:     #1A7F4B;
  --valid-bg:  #EDF7F2;
  --warn:      #C45C00;
  --warn-bg:   #FEF4EB;
  --danger:    #D0190F;
  --danger-bg: #FEF0EF;
  --topbar-h:  58px;
  --r:         16px;
  --r-sm:      10px;
  --r-xs:      7px;
  --shadow:    0 1px 12px rgba(0,0,0,.07);
  --shadow-md: 0 4px 24px rgba(0,0,0,.11);
  --t:         .2s cubic-bezier(.4,0,.2,1);
  --font-d:    'Syne', sans-serif;
  --font-b:    'DM Sans', sans-serif;
}

[data-theme="dark"] {
  --bg:        #111110;
  --bg2:       #191917;
  --surface:   #1E1E1C;
  --surface2:  #272724;
  --border:    #2E2E2B;
  --border2:   #3A3A36;
  --text:      #F2F1EE;
  --text2:     #9A9893;
  --text3:     #5A5955;
  --red-soft:  #2A0A09;
  --red-mid:   #3A1514;
  --blue-soft: #0C1E40;
  --orange-soft:#2A1500;
  --green-soft:#0A2018;
  --valid-bg:  #0A2018;
  --warn-bg:   #2A1500;
  --danger-bg: #2A0A09;
  --shadow:    0 1px 12px rgba(0,0,0,.3);
  --shadow-md: 0 4px 24px rgba(0,0,0,.45);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t), color var(--t);
}
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input,select,textarea { font-family:inherit; }
a { color:inherit; text-decoration:none; }
.hidden { display:none !important; }

/* ════════════════════════════════════════════════════
   SPLASH
════════════════════════════════════════════════════ */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: #0D0D0D;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, transform .5s ease;
}
.splash.out { opacity:0; transform:scale(1.05); pointer-events:none; }

.splash-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  opacity:.4;
}

.splash-content {
  position: relative; z-index:1;
  display: flex; flex-direction:column; align-items:center;
  padding: 32px 24px; text-align:center;
  animation: splashIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes splashIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.splash-emblem {
  position: relative; width:96px; height:96px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.splash-ring {
  position:absolute; border-radius:50%;
  border: 1.5px solid rgba(208,25,15,.3);
  animation: pulse 2.5s ease infinite;
}
.r1 { width:96px; height:96px; animation-delay:0s; }
.r2 { width:72px; height:72px; animation-delay:.4s; }
@keyframes pulse {
  0%,100% { opacity:.3; transform:scale(1); }
  50%      { opacity:.8; transform:scale(1.05); }
}
.splash-car { font-size:48px; animation:drift 3s ease infinite alternate; }
@keyframes drift {
  from { transform:translateX(-4px) rotate(-1deg); }
  to   { transform:translateX(4px) rotate(1deg); }
}

.splash-words {
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:8px;
}
.s-brand {
  font-family:var(--font-d); font-size:52px; font-weight:800;
  color:#D0190F; letter-spacing:.04em; line-height:1;
}
.s-name {
  font-family:var(--font-d); font-size:28px; font-weight:600;
  color:#F2F1EE; letter-spacing:.08em; line-height:1.1;
}
.splash-tagline {
  font-size:13px; color:rgba(242,241,238,.4);
  font-weight:300; letter-spacing:.05em; margin-bottom:32px;
}

.splash-bar {
  width:160px; height:2px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden;
}
.splash-fill {
  height:100%; background:#D0190F; border-radius:99px;
  animation: loadUp 1.8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes loadUp { from{width:0} to{width:100%} }

/* ════════════════════════════════════════════════════
   APP SHELL
════════════════════════════════════════════════════ */
.app { display:flex; flex-direction:column; min-height:100dvh; }

/* ── TOPBAR ── */
.topbar {
  position:sticky; top:0; z-index:100;
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 8px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

.tb-left  { display:flex; align-items:center; gap:4px; }
.tb-right { display:flex; align-items:center; gap:2px; }

.tb-back {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text2); transition:background var(--t), color var(--t);
}
.tb-back:hover { background:var(--surface2); color:var(--text); }

.tb-brand { display:flex; align-items:baseline; gap:3px; padding:0 6px; }
.tb-jss   { font-family:var(--font-d); font-size:20px; font-weight:800; color:var(--red); letter-spacing:.04em; }
.tb-cars  { font-family:var(--font-d); font-size:16px; font-weight:600; color:var(--text2); letter-spacing:.06em; }

.tb-title {
  font-family:var(--font-d); font-size:18px; font-weight:700;
  color:var(--text); padding-left:4px; letter-spacing:.02em;
}

.tb-btn {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--text2);
  transition:background var(--t);
}
.tb-btn:hover { background:var(--surface2); color:var(--text); }

/* ── MAIN ── */
.main { flex:1; }

/* ── VIEWS ── */
.view {
  display:none;
  min-height:calc(100dvh - var(--topbar-h));
  animation:viewIn .28s cubic-bezier(.4,0,.2,1) both;
}
.view.active { display:block; }
@keyframes viewIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

.vpad { padding:16px; max-width:640px; margin:0 auto; }

/* ════════════════════════════════════════════════════
   HOME
════════════════════════════════════════════════════ */
.home-hero {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:24px 20px 20px;
}
.home-greeting { font-size:14px; color:var(--text3); font-weight:500; margin-bottom:4px; }
.home-title {
  font-family:var(--font-d); font-size:clamp(28px,7vw,36px);
  font-weight:800; line-height:1.1; margin-bottom:16px;
  color:var(--text);
}
.home-title em { color:var(--red); font-style:normal; }

.home-quick-stats { display:flex; gap:8px; flex-wrap:wrap; }
.qs-pill {
  display:flex; align-items:center; gap:6px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:99px; padding:5px 12px;
  font-size:13px; font-weight:500; color:var(--text2);
}
.qs-pill.qs-warn { background:var(--warn-bg); border-color:var(--warn); color:var(--warn); }
.qs-pill.qs-exp  { background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }
.qs-val { font-weight:700; font-size:15px; color:var(--text); }
.qs-warn .qs-val { color:var(--warn); }
.qs-exp .qs-val  { color:var(--danger); }

/* ── ACTION CARDS ── */
.home-actions {
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  max-width:640px; margin:0 auto;
}

.ac {
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:16px;
  text-align:left; width:100%;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
  position:relative; overflow:hidden;
}
.ac::before {
  content:''; position:absolute; inset:0;
  background:var(--surface2); opacity:0; transition:opacity var(--t);
}
.ac:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.ac:hover::before { opacity:1; }
.ac:active { transform:scale(.98); }

.ac-icon-wrap {
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; position:relative; z-index:1;
}
.ac--red    { background:var(--red-soft); }
.ac--blue   { background:var(--blue-soft); }
.ac--orange { background:var(--orange-soft); }
.ac--green  { background:var(--green-soft); }

.ac-text { flex:1; position:relative; z-index:1; }
.ac-title { font-family:var(--font-d); font-size:16px; font-weight:700; color:var(--text); margin-bottom:2px; }
.ac-sub   { font-size:13px; color:var(--text2); }
.ac-arrow { flex-shrink:0; color:var(--text3); position:relative; z-index:1; transition:transform var(--t); }
.ac:hover .ac-arrow { transform:translateX(3px); color:var(--text2); }

/* ── HOME ALERTS ── */
.home-alerts-section {
  padding:0 16px 24px;
  max-width:640px; margin:0 auto;
}
.section-label {
  font-size:12px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:10px; margin-top:4px;
}
.home-alert-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--border);
  border-radius:var(--r-sm); margin-bottom:8px;
  cursor:pointer;
  animation:fadeSlide .3s ease;
  transition:box-shadow var(--t);
}
.home-alert-item:hover { box-shadow:var(--shadow); }
.home-alert-item.warn { border-left-color:var(--warn); background:var(--warn-bg); }
.home-alert-item.exp  { border-left-color:var(--danger); background:var(--danger-bg); }
.ha-icon { font-size:20px; }
.ha-body { flex:1; min-width:0; }
.ha-title { font-weight:600; font-size:13px; }
.ha-sub   { font-size:12px; color:var(--text2); margin-top:1px; }

/* ════════════════════════════════════════════════════
   FORMS
════════════════════════════════════════════════════ */
.fh { margin-bottom:20px; }
.fh-title { font-family:var(--font-d); font-size:24px; font-weight:800; color:var(--text); margin-bottom:4px; }
.fh-sub   { font-size:14px; color:var(--text2); }
.fh-prev-dates { font-size:13px; color:var(--text3); margin-top:4px; font-style:italic; }

.fg { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.fg-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

label {
  font-size:11px; font-weight:600; color:var(--text2);
  text-transform:uppercase; letter-spacing:.06em;
  display:flex; align-items:center; gap:6px;
}
.label-hint {
  font-size:11px; font-weight:400; color:var(--text3);
  text-transform:none; letter-spacing:0;
}

input, select, textarea {
  width:100%; background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  padding:11px 13px;
  font-size:15px; color:var(--text);
  outline:none; -webkit-appearance:none;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
input:focus, select:focus, textarea:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(208,25,15,.1);
  background:var(--surface2);
}
input.err, select.err { border-color:var(--danger); box-shadow:0 0 0 3px rgba(208,25,15,.12); }
textarea { resize:vertical; }

select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8A5A0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:36px; cursor:pointer;
}

.plate-input {
  text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:17px;
}

.fa {
  display:flex; justify-content:flex-end; gap:10px; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--border);
}

/* Renew info box */
.renew-info-box {
  display:flex; align-items:flex-start; gap:8px;
  background:var(--blue-soft); border:1px solid var(--blue);
  border-radius:var(--r-sm); padding:12px 14px;
  font-size:13px; color:var(--blue);
  margin-bottom:20px; line-height:1.5;
}

/* ════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 20px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; font-family:var(--font-b);
  cursor:pointer; transition:all var(--t);
  white-space:nowrap;
}
.btn-primary {
  background:var(--red); color:#fff;
  box-shadow:0 2px 8px rgba(208,25,15,.25);
}
.btn-primary:hover { background:#B8140C; box-shadow:0 4px 16px rgba(208,25,15,.35); }
.btn-primary:active { transform:scale(.97); }
.btn-ghost {
  background:transparent; color:var(--text2);
  border:1.5px solid var(--border);
}
.btn-ghost:hover { background:var(--surface2); border-color:var(--border2); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#B8140C; }
.wf   { width:100%; }
.mt12 { margin-top:12px; }

/* ════════════════════════════════════════════════════
   CARS LIST
════════════════════════════════════════════════════ */
.list-bar {
  display:flex; gap:10px; margin-bottom:16px; align-items:center;
}
.search-wrap {
  flex:1; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:99px; padding:0 14px; height:42px;
  transition:border-color var(--t), box-shadow var(--t);
}
.search-wrap:focus-within {
  border-color:var(--red); box-shadow:0 0 0 3px rgba(208,25,15,.1);
}
.search-wrap svg { color:var(--text3); flex-shrink:0; }
.search-wrap input {
  flex:1; border:none; background:none; outline:none;
  font-size:14px; color:var(--text); padding:0;
  box-shadow:none !important;
}
.s-clear { font-size:12px; color:var(--text3); padding:4px; border-radius:50%; }
.sort-sel {
  height:42px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); padding:0 32px 0 10px;
  font-size:13px; font-weight:500; background:var(--surface);
  color:var(--text); cursor:pointer; flex-shrink:0; width:auto;
  min-width:110px;
}

/* CAR CARD */
.car-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden; margin-bottom:12px;
  transition:box-shadow var(--t), transform var(--t);
  animation:fadeSlide .3s ease;
}
.car-card:hover { box-shadow:var(--shadow-md); }

.cc-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.cc-left { display:flex; align-items:center; gap:12px; }
.cc-plate {
  font-family:var(--font-b); font-weight:700; font-size:18px;
  letter-spacing:.1em; color:var(--text);
  background:var(--surface2); border:1.5px solid var(--border2);
  padding:4px 10px; border-radius:var(--r-xs);
}
.cc-name  { font-size:13px; color:var(--text2); font-weight:500; margin-top:2px; }
.cc-year  { font-size:11px; color:var(--text3); }
.cc-actions { display:flex; gap:4px; }

.cc-body { padding:12px 16px; }
.cc-obs  { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }

.ob-tag {
  display:flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500;
  padding:4px 10px; border-radius:99px; border:1px solid;
}
.ob-tag.valid { color:var(--valid); background:var(--valid-bg); border-color:var(--valid); }
.ob-tag.warn  { color:var(--warn);  background:var(--warn-bg);  border-color:var(--warn); }
.ob-tag.exp   { color:var(--danger);background:var(--danger-bg);border-color:var(--danger); }
.ob-tag.none  { color:var(--text3); background:var(--surface2); border-color:var(--border); }

.ob-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ob-dot.valid { background:var(--valid); }
.ob-dot.warn  { background:var(--warn); }
.ob-dot.exp   { background:var(--danger); }
.ob-dot.none  { background:var(--text3); }

.cc-view-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--text2);
  padding:6px 0; border-top:1px solid var(--border); margin-top:8px;
  width:100%; transition:color var(--t);
}
.cc-view-btn:hover { color:var(--red); }

/* ── ICON BUTTONS ── */
.ic-btn {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--text2);
  transition:background var(--t), color var(--t);
}
.ic-btn:hover { background:var(--surface2); color:var(--text); }
.ic-btn.del:hover   { background:var(--danger-bg); color:var(--danger); }
.ic-btn.renew:hover { background:var(--blue-soft); }

/* ════════════════════════════════════════════════════
   CAR DETAIL
════════════════════════════════════════════════════ */
.cd-hero {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:20px; margin-bottom:16px;
}
.cd-plate { font-size:28px; font-weight:700; letter-spacing:.12em; color:var(--text); margin-bottom:4px; }
.cd-name  { font-family:var(--font-d); font-size:22px; font-weight:700; color:var(--text); }
.cd-meta  { font-size:13px; color:var(--text2); margin-top:4px; line-height:1.6; }
.cd-actions-row { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

.ob-section-title {
  font-family:var(--font-d); font-size:18px; font-weight:700;
  color:var(--text); margin-bottom:12px;
  display:flex; align-items:center; justify-content:space-between;
}

/* OB CARD */
.ob-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); margin-bottom:10px; overflow:hidden;
  animation:fadeSlide .3s ease;
}
.ob-card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
  gap:8px;
}
.ob-type-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ob-type-icon { font-size:22px; }
.ob-type-name { font-family:var(--font-d); font-size:17px; font-weight:700; }

/* Actions in ob card — new: renew + history + edit + del */
.ob-card-actions { display:flex; gap:2px; flex-shrink:0; }

.ob-card-body { padding:12px 16px; }
.ob-detail-row { display:flex; gap:16px; flex-wrap:wrap; }
.ob-detail-item { display:flex; flex-direction:column; gap:2px; }
.od-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.od-val   { font-size:14px; font-weight:600; color:var(--text); }
.ob-notes-row { margin-top:10px; font-size:13px; color:var(--text2); font-style:italic; }

/* History note in ob card */
.ob-history-note {
  margin-top:8px; font-size:12px; color:var(--text3);
  display:flex; align-items:center; gap:4px;
}

.status-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:99px; border:1px solid;
}
.status-badge.valid { color:var(--valid); background:var(--valid-bg); border-color:var(--valid); }
.status-badge.warn  { color:var(--warn);  background:var(--warn-bg);  border-color:var(--warn); }
.status-badge.exp   { color:var(--danger);background:var(--danger-bg);border-color:var(--danger); }

/* ════════════════════════════════════════════════════
   HISTORY VIEW
════════════════════════════════════════════════════ */
.history-entry {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:14px 16px;
  margin-bottom:10px; animation:fadeSlide .3s ease;
}
.history-entry.current {
  border-color:var(--valid); background:var(--valid-bg);
}
.he-type {
  font-family:var(--font-d); font-size:15px; font-weight:700;
  margin-bottom:6px;
}
.he-dates {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:14px; font-weight:500;
}
.he-val {
  font-size:13px; color:var(--text2);
  background:var(--surface2); padding:2px 8px;
  border-radius:99px; border:1px solid var(--border);
}
.he-notes {
  font-size:13px; color:var(--text2);
  font-style:italic; margin-top:6px;
}

/* ════════════════════════════════════════════════════
   ALL OBLIGATIONS VIEW
════════════════════════════════════════════════════ */
.filter-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.chip {
  padding:6px 14px; border-radius:99px; font-size:13px; font-weight:500;
  border:1.5px solid var(--border); background:var(--surface); color:var(--text2);
  transition:all var(--t); cursor:pointer;
}
.chip.active { background:var(--red); color:#fff; border-color:var(--red); }
.chip:hover:not(.active) { border-color:var(--border2); background:var(--surface2); }

.ob-list-item {
  background:var(--surface); border:1px solid var(--border);
  border-left:3px solid var(--border);
  border-radius:var(--r-sm); padding:14px 16px;
  margin-bottom:10px; cursor:pointer;
  transition:box-shadow var(--t), border-color var(--t);
  animation:fadeSlide .3s ease;
  display:flex; align-items:center; gap:14px;
}
.ob-list-item:hover { box-shadow:var(--shadow); }
.ob-list-item.valid { border-left-color:var(--valid); }
.ob-list-item.warn  { border-left-color:var(--warn); }
.ob-list-item.exp   { border-left-color:var(--danger); }

.oli-icon { font-size:24px; }
.oli-body { flex:1; min-width:0; }
.oli-type { font-weight:700; font-size:14px; }
.oli-car  { font-size:13px; color:var(--text2); margin-top:2px; }
.oli-date { font-size:12px; color:var(--text3); }
.oli-badge { flex-shrink:0; }

/* ════════════════════════════════════════════════════
   CALENDAR
════════════════════════════════════════════════════ */
.cal-nav {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.cal-title { font-family:var(--font-d); font-size:22px; font-weight:800; letter-spacing:.02em; }

.cal-legend {
  display:flex; gap:14px; margin-bottom:12px;
  font-size:12px; color:var(--text2); flex-wrap:wrap;
}
.cal-legend span { display:flex; align-items:center; gap:5px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.dot-v { background:var(--valid); }
.dot-w { background:var(--warn); }
.dot-e { background:var(--danger); }

.cal-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.cal-wd {
  display:grid; grid-template-columns:repeat(7,1fr);
  background:var(--surface2); border-bottom:1px solid var(--border);
}
.cal-wd span {
  text-align:center; padding:8px 4px;
  font-size:11px; font-weight:600; color:var(--text3); letter-spacing:.04em;
}

.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-day {
  aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  font-size:13px; padding:2px;
  border:0.5px solid var(--border); cursor:default;
  transition:background var(--t);
}
.cal-day.has-event { cursor:pointer; }
.cal-day.has-event:hover { background:var(--surface2); }
.cal-day.empty { opacity:.25; }

.cal-day-n { font-size:13px; font-weight:400; color:var(--text); }
.cal-day.today .cal-day-n {
  background:var(--red); color:#fff; border-radius:50%;
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}

.cal-dots { display:flex; gap:2px; flex-wrap:wrap; justify-content:center; }
.cal-dot  { width:5px; height:5px; border-radius:50%; }
.cal-dot.valid { background:var(--valid); }
.cal-dot.warn  { background:var(--warn); }
.cal-dot.exp   { background:var(--danger); }

.cal-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); margin-top:12px; overflow:hidden;
  animation:fadeSlide .2s ease;
}
.cal-panel-header {
  padding:12px 16px; border-bottom:1px solid var(--border);
  font-family:var(--font-d); font-size:16px; font-weight:700;
}
.cal-panel-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  transition:background var(--t);
}
.cal-panel-item:last-child { border-bottom:none; }
.cal-panel-item:hover { background:var(--surface2); }
.cpi-icon { font-size:22px; }
.cpi-body { flex:1; }
.cpi-type { font-weight:700; font-size:14px; }
.cpi-car  { font-size:12px; color:var(--text2); margin-top:2px; }

/* ════════════════════════════════════════════════════
   FAB
════════════════════════════════════════════════════ */
.fab {
  position:fixed; bottom:24px; right:20px; z-index:200;
  width:56px; height:56px; border-radius:50%;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(208,25,15,.4);
  transition:transform var(--t), box-shadow var(--t);
}
.fab:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(208,25,15,.55); }
.fab:active { transform:scale(.95); }

/* Evita que o FAB cubra o último item da lista */
#view-cars .vpad { padding-bottom:88px; }

/* ════════════════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════════════════ */
.empty-st {
  display:flex; flex-direction:column; align-items:center;
  padding:48px 24px; text-align:center;
  background:var(--surface); border:1px dashed var(--border);
  border-radius:var(--r); color:var(--text2);
}
.es-icon { font-size:48px; margin-bottom:12px; }
.empty-st p { font-size:14px; line-height:1.6; }

/* ════════════════════════════════════════════════════
   BOTTOM SHEET (confirm)
════════════════════════════════════════════════════ */
.sheet-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:oIn .2s ease;
}
@keyframes oIn { from{opacity:0} to{opacity:1} }

.sheet {
  background:var(--surface); width:100%; max-width:480px;
  border-radius:var(--r) var(--r) 0 0;
  padding:20px 20px 32px;
  animation:sIn .3s cubic-bezier(.22,1,.36,1);
  border-top:3px solid var(--danger);
}
@keyframes sIn { from{transform:translateY(100%)} to{transform:translateY(0)} }

.sheet-handle {
  width:36px; height:4px; border-radius:99px;
  background:var(--border2); margin:0 auto 16px;
}
.sheet-msg  { font-size:15px; color:var(--text); text-align:center; margin-bottom:20px; line-height:1.5; }
.sheet-btns { display:flex; flex-direction:column; gap:10px; }

/* ════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:2000;
  background:var(--text); color:var(--bg);
  padding:10px 20px; border-radius:99px;
  font-size:14px; font-weight:500; white-space:nowrap;
  box-shadow:var(--shadow-md);
  animation:tIn .3s cubic-bezier(.22,1,.36,1);
}
.toast.ok  { background:var(--valid); color:#fff; }
.toast.err { background:var(--danger); color:#fff; }
@keyframes tIn {
  from { opacity:0; transform:translateX(-50%) translateY(8px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ════════════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════════════ */
@keyframes fadeSlide {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════ */
@media (min-width:600px) {
  .sheet { border-radius:var(--r); margin-bottom:24px; }
  @keyframes sIn {
    from { opacity:0; transform:scale(.95) translateY(8px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }
  .sheet-overlay { align-items:center; }
  .home-actions { display:grid; grid-template-columns:1fr 1fr; }
}

@media (min-width:768px) {
  .vpad { padding:24px 20px; }
  .topbar { padding:0 20px 0 16px; }
  #view-cars .vpad { padding-bottom:100px; }
}

/* Scrollbar */
@media (pointer:fine) {
  ::-webkit-scrollbar { width:5px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
}

/* ════════════════════════════════════════════════════
   SERVICE BOOK
════════════════════════════════════════════════════ */

/* Stats row in hero */
.sb-stats-row {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
.sb-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 16px; min-width: 80px; flex: 1;
}
.sb-stat-icon { font-size: 20px; }
.sb-stat-val  { font-family: var(--font-d); font-size: 16px; font-weight: 700; color: var(--text); }
.sb-stat-lbl  { font-size: 11px; color: var(--text3); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

/* Service card */
.svc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); margin-bottom: 12px; overflow: hidden;
  animation: fadeSlide .3s ease;
  transition: box-shadow var(--t);
}
.svc-card:hover { box-shadow: var(--shadow-md); }

.svc-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); gap: 12px;
}
.svc-card-left  { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.svc-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

.svc-date {
  font-family: var(--font-d); font-size: 17px; font-weight: 700; color: var(--text);
}
.svc-km {
  font-size: 13px; font-weight: 600; color: var(--blue);
  background: var(--blue-soft); border: 1px solid var(--blue);
  border-radius: 99px; padding: 2px 10px; display: inline-block;
}
.svc-workshop { font-size: 13px; color: var(--text2); }
.svc-cost {
  font-family: var(--font-d); font-size: 18px; font-weight: 800; color: var(--text);
}
.svc-actions { display: flex; gap: 2px; }

.svc-card-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }

/* Work items grid */
.svc-items {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.svc-item-tag {
  display: flex; align-items: center; gap: 5px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 99px; padding: 4px 10px;
  font-size: 12px; font-weight: 500; color: var(--text2);
}

.svc-notes {
  font-size: 13px; color: var(--text2); font-style: italic;
  border-left: 3px solid var(--border2); padding-left: 10px;
}

/* Next service */
.svc-next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 12px;
  font-size: 13px;
}
.svc-next-label { font-weight: 600; color: var(--text2); }
.svc-next-val   { font-weight: 700; color: var(--text); }
.svc-next-alert {
  font-size: 12px; font-weight: 600; padding: 2px 10px;
  border-radius: 99px; border: 1px solid;
}
.svc-next-alert.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.svc-next-alert.exp  { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }

/* Checkbox grid for service form */
.svc-checks-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 12px;
}
@media (min-width: 480px) {
  .svc-checks-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.svc-check-label {
  display: flex; align-items: center; gap: 0;
  cursor: pointer; user-select: none;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 13px; color: var(--text2);
}
.svc-check-label input[type="checkbox"] {
  display: none;
}
.svc-check-box {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: var(--r-xs);
  border: 1.5px solid var(--border); width: 100%;
  transition: all var(--t); background: var(--surface);
  font-size: 12px;
}
.svc-check-label input:checked + .svc-check-box {
  background: var(--blue-soft); border-color: var(--blue);
  color: var(--blue); font-weight: 600;
}

/* Next service section divider */
.svc-next-section {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 14px; margin-top: 4px;
}
.svc-next-section-title {
  font-size: 13px; font-weight: 600; color: var(--text2);
  margin-bottom: 12px;
}
.svc-next-section .fg { margin-bottom: 0; }



/* ════════════════════════════════════════════════════
   NOTIFICAÇÕES — botão e indicador
════════════════════════════════════════════════════ */
.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1A7F4B;
  border: 2px solid var(--surface);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════
   CAR PICKER MODAL
════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom);
  animation: fadeIn .18s ease;
}
.modal-overlay.hidden { display: none; }

.modal-sheet {
  background: var(--surface);
  border-radius: var(--r) var(--r) 0 0;
  width: 100%; max-width: 600px;
  max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -4px 32px rgba(0,0,0,.25);
  animation: slideUp .22s ease;
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title  { font-size: 17px; font-weight: 700; color: var(--text); }
.modal-close  {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface2); border: none;
  font-size: 14px; color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t);
}
.modal-close:hover { background: var(--border); }

.modal-search-wrap {
  padding: 12px 16px 8px;
  flex-shrink: 0;
}
.modal-search {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface2); color: var(--text);
  font-size: 15px; outline: none;
  transition: border-color var(--t);
}
.modal-search:focus { border-color: var(--blue); }

.modal-list {
  overflow-y: auto; flex: 1;
  padding: 4px 0 12px;
}

.modal-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 32px 20px;
  font-size: 14px; color: var(--text2); text-align: center;
}
.modal-empty div { font-size: 36px; }
.modal-empty p   { margin: 0; }

/* Car item inside picker */
.cp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; cursor: pointer;
  transition: background var(--t);
  border-bottom: 1px solid var(--border);
}
.cp-item:last-child { border-bottom: none; }
.cp-item:hover, .cp-item:active { background: var(--surface2); }

.cp-icon  { font-size: 24px; flex-shrink: 0; }
.cp-info  { flex: 1; min-width: 0; }
.cp-plate { font-family: var(--font-d); font-size: 16px; font-weight: 700; color: var(--text); }
.cp-name  { font-size: 13px; color: var(--text2); margin-top: 2px; }
.cp-badges { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: flex-end; }
.cp-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 99px; border: 1px solid; white-space: nowrap;
}
.cp-badge.warn { color: var(--warn);   background: var(--warn-bg);   border-color: var(--warn); }
.cp-badge.exp  { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ════════════════════════════════════════════════════
   CONFIRM SERVICE + CAR DETAIL SERVICE SECTION
════════════════════════════════════════════════════ */

/* "Confirmar revisão realizada" bar on service card */
.svc-confirm-bar {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}
.btn-confirm {
  width: 100%;
  background: #1A7F4B; color: #fff;
  border: none; border-radius: var(--r-sm);
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background var(--t);
}
.btn-confirm:hover { background: #166040; }

/* Reference card (predicted date) */
.svc-confirm-ref {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--surface2); border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 13px; margin-bottom: 16px;
}
.svc-confirm-ref-label { font-weight: 600; color: var(--text2); }
.cal-empty {
  grid-column: 1 / -1;
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text3);
}

/* ════════════════════════════════════════════════════
   VISTAS GLOBAIS — Obrigações e Revisões
════════════════════════════════════════════════════ */
.global-view-header {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 4px; flex-wrap: wrap;
}
.global-view-header .filter-chips {
  flex: 1; margin-bottom: 0;
}
.btn-add-global {
  flex-shrink: 0; font-size: 13px; padding: 7px 14px;
  white-space: nowrap; align-self: flex-start;
}

/* Car group header in all-services */
.global-car-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 4px 8px;
  border-bottom: 2px solid var(--border);
  margin-top: 8px;
}
.global-car-header:first-child { margin-top: 0; }
.gch-plate {
  font-family: var(--font-d); font-size: 17px; font-weight: 800; color: var(--text);
}
.gch-name {
  font-size: 13px; color: var(--text2); flex: 1;
}
.gch-link {
  font-size: 12px; font-weight: 600; color: var(--blue);
  background: none; border: none; cursor: pointer; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.gch-link:hover { color: var(--text); }

/* ════════════════════════════════════════════════════
   REVISÃO EM ATRASO
════════════════════════════════════════════════════ */
.svc-card--overdue {
  border-color: var(--danger);
  border-left: 4px solid var(--danger);
}
.btn-confirm--overdue {
  width: 100%;
  background: var(--danger-bg); color: var(--danger);
  border: 1.5px solid var(--danger); border-radius: var(--r-sm);
  padding: 10px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all var(--t);
}
.btn-confirm--overdue:hover {
  background: var(--danger); color: #fff;
}

/* ════════════════════════════════════════════════════
   QUICK-ADD SEGURO / IPO NO REGISTO
════════════════════════════════════════════════════ */
.ob-quick-section {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.ob-quick-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  transition: background var(--t);
}
.ob-quick-toggle:hover { background: var(--surface2); }
.toggle-hint { font-size: 12px; color: var(--text2); font-weight: 400; }
.toggle-arrow { font-size: 16px; color: var(--text2); transition: transform var(--t); }
.ob-quick-fields {
  padding: 14px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.ob-quick-fields.hidden { display: none; }
.ob-quick-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text2);
  font-style: italic;
}

/* ════════════════════════════════════════════════════
   OBLIGATION CARD — RENEW BUTTON (labelled)
════════════════════════════════════════════════════ */
.ob-renew-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--primary-bg, rgba(208,25,15,0.08));
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.ob-renew-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* Field hint below select/input */
.field-hint {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--text2);
  font-style: italic;
  line-height: 1.5;
}

/* Date auto-fill hint in ob forms */
.ob-date-hint {
  padding: 10px 14px;
  background: rgba(var(--primary-rgb, 208,25,15), 0.06);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 12px;
}
.ob-date-hint.hidden { display: none; }

/* Renew calc hint */
.renew-calc-hint {
  padding: 10px 14px;
  background: rgba(var(--valid-rgb, 0,200,100), 0.08);
  border-left: 3px solid var(--valid);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 12px;
}
.renew-calc-hint.hidden { display: none; }

/* ════════════════════════════════════════════════════
   UX v4 — Melhorias
════════════════════════════════════════════════════ */

/* ── Botão danger outline (substituição de style.cssText) ── */
.btn-ghost--danger {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid var(--danger);
}
.btn-ghost--danger:hover {
  background: var(--danger-bg);
}

/* ── Botão pequeno inline (substituição de style.cssText) ── */
.btn-sm {
  font-size: 13px !important;
  padding: 7px 14px !important;
}

/* ── Empty state com padding (substituição de style.cssText) ── */
.empty-st--padded {
  padding: 20px;
}

/* ── Dias label com cor por estado (substituição de style.cssText) ── */
.ob-days-label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}
.ob-days-label--valid { color: var(--valid); }
.ob-days-label--warn  { color: var(--warn); }
.ob-days-label--exp   { color: var(--danger); }
.ob-days-label--none  { color: var(--text3); }

/* ── Calendar panel item clickable (substituição de style.cursor) ── */
.cp-item--clickable {
  cursor: pointer;
}

/* ── Offline banner ── */
.offline-banner {
  position: sticky;
  top: var(--topbar-h);
  z-index: 100;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn);
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 8px 16px;
  animation: slideDown .25s ease;
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── App loading bar (Firestore a carregar) ── */
.app-loading-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, transparent 100%);
  background-size: 200% 100%;
  animation: loadingPulse 1.4s ease infinite;
  position: sticky;
  top: var(--topbar-h);
  z-index: 99;
}
@keyframes loadingPulse {
  0%   { background-position: 100% 0; opacity: 1; }
  50%  { background-position: 0% 0;   opacity: .7; }
  100% { background-position: 100% 0; opacity: 1; }
}

/* ── Toast: cursor pointer + touch feedback ── */
#toast {
  cursor: pointer;
  user-select: none;
}

/* ── Form fields: shake animation on error ── */
input.err, select.err, textarea.err {
  animation: shakeErr .35s ease;
}
@keyframes shakeErr {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px); }
  40%     { transform: translateX(4px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(2px); }
}

/* ── Disabled submit button feedback ── */
.btn:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════
   v5 — NOVAS FUNCIONALIDADES
════════════════════════════════════════════════════ */

/* ── ODÓMETRO DO CARRO ── */
.odo-section {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 14px;
  margin-top: 10px;
}
.odo-icon { font-size: 20px; flex-shrink: 0; }
.odo-body { flex: 1; min-width: 0; }
.odo-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.odo-val {
  font-family: var(--font-b); font-size: 20px; font-weight: 700;
  color: var(--text); letter-spacing: .04em;
}
.odo-edit-btn {
  font-size: 12px; font-weight: 600; color: var(--text2);
  padding: 5px 10px; border-radius: var(--r-xs);
  border: 1.5px solid var(--border); background: var(--surface);
  transition: all var(--t); flex-shrink: 0;
}
.odo-edit-btn:hover { border-color: var(--border2); background: var(--surface2); color: var(--text); }
.odo-input-wrap { display: flex; align-items: center; gap: 8px; flex: 1; }
.odo-input-wrap input {
  flex: 1; padding: 6px 10px; font-size: 15px; font-weight: 700;
  border: 1.5px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface); color: var(--text);
  width: auto; max-width: 160px;
}
.odo-input-wrap input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(19,87,214,.1); }
.odo-save-btn {
  font-size: 12px; font-weight: 600; color: #fff;
  padding: 6px 12px; border-radius: var(--r-xs);
  background: var(--blue); border: none; transition: background var(--t);
  white-space: nowrap;
}
.odo-save-btn:hover { background: #0e47b3; }
.odo-history { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── FOTO DO CARRO ── */
.car-photo-wrap {
  position: relative; width: 72px; height: 72px;
  border-radius: 14px; overflow: hidden;
  border: 2px solid var(--border); flex-shrink: 0;
  cursor: pointer; transition: border-color var(--t);
}
.car-photo-wrap:hover { border-color: var(--border2); }
.car-photo-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.car-photo-placeholder {
  width: 100%; height: 100%;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--text3);
}
.car-photo-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--t);
  font-size: 18px;
}
.car-photo-wrap:hover .car-photo-overlay { opacity: 1; }
.car-photo-input { display: none; }

/* Hero com foto */
.cd-hero-top {
  display: flex; align-items: flex-start; gap: 14px;
}
.cd-hero-info { flex: 1; min-width: 0; }

/* ── ESTADO VAZIO ILUSTRADO ── */
.empty-illustrated {
  display: flex; flex-direction: column; align-items: center;
  padding: 52px 24px 40px; text-align: center;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--r); color: var(--text2);
  animation: fadeSlide .3s ease;
}
.ei-emoji { font-size: 56px; margin-bottom: 16px; line-height: 1; }
.ei-title { font-family: var(--font-d); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ei-sub   { font-size: 14px; line-height: 1.6; max-width: 280px; }
.ei-cta   {
  margin-top: 20px; padding: 10px 22px;
  background: var(--red); color: #fff;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; transition: background var(--t);
}
.ei-cta:hover { background: #b8140c; }

/* ── TEMA SINCRONIZADO — badge no topbar do hub ── */
.hub-theme-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: rgba(242,241,238,.5);
  transition: color var(--t), background var(--t);
}
.hub-theme-btn:hover { background: rgba(255,255,255,.07); color: rgba(242,241,238,.9); }

/* ── EXPORTAÇÃO PDF ── */
.export-menu {
  position: relative; display: inline-block;
}
.export-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden;
  box-shadow: var(--shadow-md); z-index: 50; min-width: 160px;
  animation: fadeSlide .15s ease;
}
.export-dropdown.hidden { display: none; }
.export-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; font-size: 13px; font-weight: 500;
  color: var(--text); cursor: pointer;
  transition: background var(--t);
  border: none; background: none; width: 100%; text-align: left;
}
.export-opt:hover { background: var(--surface2); }

/* ── RELATÓRIO PDF (janela de impressão) ── */
@media print {
  .topbar, .fab, .toast, .splash,
  .tb-btn, .ic-btn, .btn, .ob-card-actions,
  .cd-actions-row, .svc-confirm-bar,
  .home-actions, .filter-chips { display: none !important; }
  body { background: #fff; color: #000; }
  .car-card, .ob-card, .svc-card {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  .view { display: block !important; }
  #view-home, #view-register, #view-cars,
  #view-calendar, #view-obligations,
  #view-edit-car, #view-add-obligation,
  #view-edit-obligation, #view-renew-obligation,
  #view-add-service, #view-edit-service,
  #view-confirm-service, #view-ob-history,
  #view-all-services { display: none !important; }
  #view-car-detail, #view-service-book { display: block !important; }
}

/* ── PESQUISA GLOBAL ── */
.global-search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 0 14px; height: 44px;
  transition: border-color var(--t), box-shadow var(--t);
  margin-bottom: 16px;
}
.global-search-bar:focus-within {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(208,25,15,.1);
}
.global-search-bar input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 15px; color: var(--text); padding: 0;
  box-shadow: none !important;
}
.global-search-icon { font-size: 16px; color: var(--text3); flex-shrink: 0; }
.global-search-clear { font-size: 12px; color: var(--text3); padding: 4px; cursor: pointer; }

/* ── PAINEL DE HISTÓRICO DE KM ── */
.odo-log-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; margin-top: 8px;
}
.odo-log-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.odo-log-row:last-child { border-bottom: none; }
.odo-log-km { font-weight: 700; color: var(--text); font-family: var(--font-b); min-width: 80px; }
.odo-log-date { color: var(--text3); font-size: 12px; flex: 1; }
.odo-log-delta { font-size: 12px; font-weight: 600; color: var(--valid); }

/* ── QUICK STATS NA LISTA DE CARROS ── */
.cars-summary-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 0 14px; margin-bottom: 2px;
}
.csb-pill {
  display: flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; padding: 4px 12px;
  font-size: 12px; font-weight: 500; color: var(--text2);
}
.csb-pill.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.csb-pill.exp  { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.csb-n { font-weight: 700; color: var(--text); font-size: 13px; }
.csb-pill.warn .csb-n, .csb-pill.exp .csb-n { color: inherit; }

/* ── SWIPE TO DELETE (mobile) ── */
.car-card-swipe-wrap { position: relative; overflow: hidden; border-radius: var(--r); margin-bottom: 12px; }
.car-card-swipe-bg {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 80px; background: var(--danger);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; z-index: 0;
  border-radius: 0 var(--r) var(--r) 0;
}
.car-card-swipe-wrap .car-card {
  position: relative; z-index: 1;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  margin-bottom: 0;
  border-radius: var(--r);
}

/* ── DASHBOARD: LINK ESTILIZADO ── */
.dash-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--text2);
  padding: 6px 0; margin-bottom: 4px;
  transition: color var(--t); text-decoration: none;
}
.dash-back-link:hover { color: var(--text); }