/* ═══════════════════════════════════════════════════════════
   IGLIS WATCH — styles.css  (v34)
   ═══════════════════════════════════════════════════════════ */

:root {
  --navy:    #ece7d8;
  --navy2:   #e2daca;
  --navy3:   #d4c9b4;
  --navy4:   #c4b49e;
  --gold:    #b08030;
  --gold2:   #c89840;
  --gold3:   #8a6020;
  --cream:   #1e1608;
  --cream2:  #2e2010;
  --text:    #3a2c14;
  --muted:   #7a6848;
  --border:  #c0af90;
  --border2: #a89070;
  --card:    #e6dece;
  --surface: #f0eade;
  --surface2: #ddd6c4;
  --red:     #a02820;
  --green:   #307050;
  --purple:  #5040a0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background:  var(--navy);
  color:       var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size:   14px;
  min-height:  100vh;
}

/* ═══ LAYOUT ═══ */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ═══ SIDEBAR ═══ */
.sidebar {
  background:     var(--surface);
  border-right:   1px solid var(--border);
  display:        flex;
  flex-direction: column;
  position:       sticky;
  top:            0;
  height:         100vh;
  overflow-y:     auto;
}

.sidebar-logo {
  padding:       24px 20px 20px;
  border-bottom: 1px solid var(--border);
}

.logo-name {
  font-family:    'Libre Baskerville', serif;
  font-size:      15px;
  color:          var(--cream);
  letter-spacing: 1px;
  margin-bottom:  2px;
}
.logo-dot { color: var(--gold); }
.logo-sub { font-size: 10px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; }

/* ─── SYNC INDICATOR ─────────────────────────────────────── */
.sync-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity .2s, color .2s, border-color .2s;
  letter-spacing: 0;
}
.sync-indicator:hover { color: var(--gold3); border-color: var(--gold3); }
.sync-idle  { opacity: 0.45; }
.sync-saving, .sync-loading { opacity: 1; color: var(--gold3); border-color: var(--gold3); animation: sync-pulse 0.8s ease-in-out infinite alternate; }
.sync-ok    { opacity: 1; color: #5a9070; border-color: #5a9070; }
.sync-error { opacity: 1; color: var(--red); border-color: var(--red); }
@keyframes sync-pulse { from { opacity: 0.5; } to { opacity: 1; } }

.nav-section { padding: 16px 0 8px; }

.nav-label {
  font-size:      9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--gold3);
  padding:        0 20px;
  margin-bottom:  6px;
}

.nav-item {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      9px 20px;
  cursor:       pointer;
  transition:   all 0.15s;
  font-size:    13px;
  color:        var(--muted);
  border-left:  2px solid transparent;
  user-select:  none;
}
.nav-item:hover  { color: var(--cream); background: rgba(200,160,70,0.06); }
.nav-item.active { color: var(--gold); border-left-color: var(--gold); background: rgba(200,160,70,0.08); }
.nav-icon { font-size: 15px; width: 18px; text-align: center; }

.badge {
  margin-left:   auto;
  background:    var(--gold3);
  color:         #f8f2e8;
  font-size:     9px;
  padding:       2px 6px;
  border-radius: 10px;
  min-width:     18px;
  text-align:    center;
}

.recent-list { padding: 4px 12px; }
.no-recents  { padding: 8px 20px; font-size: 11px; color: var(--border2); }

.recent-item {
  padding:       6px 8px;
  font-size:     11px;
  color:         var(--muted);
  cursor:        pointer;
  border-radius: 3px;
  transition:    all 0.15s;
  display:       flex;
  align-items:   center;
  gap:           6px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.recent-item:hover   { color: var(--gold); background: rgba(200,160,70,0.06); }
.recent-item::before { content: '↺'; font-size: 10px; flex-shrink: 0; }

/* ═══ MAIN ═══ */
.main { display: flex; flex-direction: column; min-height: 100vh; }

/* ═══ TOP BAR ═══ */
.topbar {
  background:    var(--navy2);
  border-bottom: 1px solid var(--border);
  padding:       0 32px;
  height:        58px;
  display:       flex;
  align-items:   center;
  gap:           16px;
  position:      sticky;
  top:           0;
  z-index:       20;
}

.search-input-wrap { flex: 1; max-width: 540px; position: relative; }

#mainSearch {
  width:       100%;
  background:  var(--surface);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   14px;
  padding:     9px 42px 9px 16px;
  outline:     none;
  transition:  border-color 0.2s;
}
#mainSearch:focus        { border-color: var(--gold); }
#mainSearch::placeholder { color: var(--muted); }

.search-hint {
  position:  absolute;
  right:     50px;
  top:       50%;
  transform: translateY(-50%);
  font-size: 10px;
  color:     var(--border2);
  pointer-events: none;
  user-select: none;
}

.search-go-btn {
  position:   absolute;
  right: 0; top: 0; bottom: 0;
  background: var(--gold);
  border:     none;
  color:      #1e1606;
  padding:    0 14px;
  cursor:     pointer;
  font-size:  14px;
  transition: background 0.15s;
}
.search-go-btn:hover { background: var(--gold2); }

.tab-pills { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }

.tab-pill {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    'DM Sans', sans-serif;
  font-size:      11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding:        6px 12px;
  cursor:         pointer;
  transition:     all 0.15s;
}
.tab-pill:hover  { border-color: var(--gold3); color: var(--cream); }
.tab-pill.active { border-color: var(--gold); color: var(--gold); background: rgba(200,160,70,0.08); }

/* ═══ PANELS ═══ */
.panel        { display: none; padding: 28px 32px 60px; }
.panel.active { display: block; animation: slideUp 0.22s ease; }

/* ═══ SECTION HEADERS ═══ */
.section-hdr { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.section-hdr h2 {
  font-family: 'Libre Baskerville', serif;
  font-size:   22px;
  font-weight: 400;
  color:       var(--cream);
}
.section-hdr p { font-size: 12px; color: var(--muted); }

/* ═══ FILTER BAR ═══ */
.filter-bar {
  display:        flex;
  flex-wrap:      wrap;
  gap:            8px;
  margin-bottom:  24px;
  padding-bottom: 20px;
  border-bottom:  1px solid var(--border);
}
.filter-group { display: flex; gap: 4px; flex-wrap: wrap; }

.filter-label {
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold3);
  display:        flex;
  align-items:    center;
  margin-right:   4px;
}

.f-btn {
  background:  transparent;
  border:      1px solid var(--border);
  color:       var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size:   11px;
  padding:     5px 10px;
  cursor:      pointer;
  transition:  all 0.15s;
}
.f-btn:hover, .f-btn.on { border-color: var(--gold3); color: var(--gold); background: rgba(200,160,70,0.07); }

/* ═══ SITES GRID ═══ */
.sites-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   10px;
  margin-bottom:         32px;
}
.sites-grid-label {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold3); margin-bottom: 12px;
}

.site-card {
  background:      var(--card);
  border:          1px solid var(--border);
  padding:         18px;
  text-decoration: none;
  display:         block;
  transition:      all 0.15s;
  position:        relative;
}
.site-card:hover { border-color: var(--gold3); background: var(--navy3); }

.site-card-tag   { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold3); margin-bottom: 6px; }
.site-card-name  { font-family: 'Libre Baskerville', serif; font-size: 17px; color: var(--cream); margin-bottom: 5px; }
.site-card-desc  { font-size: 11px; color: var(--muted); line-height: 1.6; }
.site-card-arrow { position: absolute; top: 14px; right: 14px; color: var(--border2); font-size: 14px; transition: all 0.15s; }
.site-card:hover .site-card-arrow { color: var(--gold); transform: translate(2px,-2px); }

/* Cousins direct */
.cousins-cats    { margin-bottom: 32px; }
.cousins-cats h3 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold3); margin-bottom: 12px; }
.cousins-grid    { display: flex; flex-wrap: wrap; gap: 6px; }

.cousins-btn {
  background:      var(--surface);
  border:          1px solid var(--border);
  color:           var(--text);
  font-family:     'DM Sans', sans-serif;
  font-size:       11px;
  padding:         7px 13px;
  cursor:          pointer;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  transition:      all 0.15s;
}
.cousins-btn:hover { border-color: var(--gold); color: var(--gold); }
.ccat-icon { font-size: 13px; }

/* ═══ MOVEMENTS GRID ═══ */
.movements-filter-bar {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 20px;
  align-items:   center;
  position:      sticky;
  top:           0;
  z-index:       15;
  background:    var(--navy);
  padding:       8px 0 10px;
  margin-top:    -8px;
  box-shadow:    0 2px 8px rgba(30,22,8,0.06);
}

.mov-search {
  background:  var(--surface);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   13px;
  padding:     7px 12px;
  outline:     none;
  transition:  border-color 0.2s;
  width:       200px;
}
.mov-search:focus        { border-color: var(--gold); }
.mov-search::placeholder { color: var(--muted); }

.movements-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   8px;
}

.mov-card {
  background: var(--card);
  border:     1px solid var(--border);
  padding:    16px 16px 32px;
  cursor:     pointer;
  transition: all 0.15s;
  position:   relative;
}
.mov-card:hover     { border-color: var(--gold3); background: var(--navy3); }
.mov-card.favorited { border-left: 3px solid var(--gold); }
.mov-card.mov-active {
  background:   var(--navy2) !important;
  border-color: var(--gold2) !important;
  border-left:  3px solid var(--gold) !important;
  box-shadow:   0 2px 14px rgba(176,128,48,0.18), 0 0 0 1px rgba(176,128,48,0.1);
}
.mov-card.mov-active .mov-ref { color: var(--gold); font-weight: 600; }

.mov-ref      { font-size: 14px; color: var(--gold); font-weight: 500; margin-bottom: 3px; letter-spacing: 0.5px; }
.mov-brand    { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin-bottom: 5px; }
.mov-type     { font-size: 11px; color: var(--text); }
.mov-origin   { font-size: 9px; color: var(--muted); margin-top: 4px; }
.mov-last-seen { font-size: 9px; color: var(--border2); margin-top: 5px; letter-spacing: 0.5px; }

.mov-status-dot {
  position:      absolute;
  bottom:        10px; right: 26px;
  width:         8px; height: 8px;
  border-radius: 50%;
}
.mov-status-dot.status-needed  { background: var(--red); }
.mov-status-dot.status-ordered { background: var(--gold); }
.mov-status-dot.status-instock { background: var(--green); }

/* ─── SERVICE INTERVAL BADGE ─── */
.svc-badge {
  position:      absolute;
  top:           10px; left: 10px;
  font-size:     9px;
  font-weight:   500;
  padding:       2px 6px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}
.svc-green  { background: rgba(90,144,112,0.18); color: var(--green); border: 1px solid rgba(90,144,112,0.3); }
.svc-yellow { background: rgba(200,160,70,0.18); color: var(--gold);  border: 1px solid rgba(200,160,70,0.3); }
.svc-red    { background: rgba(192,96,80,0.18);  color: var(--red);   border: 1px solid rgba(192,96,80,0.3);  }

/* Inline service status inside popup */
.svc-inline {
  font-size:     11px;
  padding:       3px 8px;
  border-radius: 2px;
}
.svc-none { font-size: 11px; color: var(--muted); font-style: italic; }

/* Log card service line */
.log-card-svc { font-size: 11px; margin-bottom: 5px; }
.log-card-qty { font-size: 11px; color: var(--text); margin-bottom: 5px; }

.fav-btn {
  position:   absolute;
  top: 4px; right: 3px;
  background: none;
  border:     none;
  color:      var(--border2);
  font-size:  14px;
  cursor:     pointer;
  transition: color 0.15s;
  padding:    8px;
  min-width:  44px;
  min-height: 44px;
  display:    flex;
  align-items: center;
  justify-content: center;
}
.fav-btn:hover   { color: var(--gold3); }
.fav-btn.starred { color: var(--gold); }

/* ═══ POPUP MEKANIZMI ═══ */
.overlay, .popup-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(6,12,26,0.88);
  z-index:         100;
  align-items:     center;
  justify-content: center;
  padding:         16px;
  backdrop-filter: blur(1px);
}
.overlay.open,
.popup-overlay.active { display: flex; animation: fadeIn 0.18s ease; }

.overlay.open    > .popup,
.popup-overlay.active > .popup,
.popup-overlay.active > div > .popup {
  animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.popup {
  background:  var(--navy2);
  border:      1px solid var(--border2);
  max-width:   660px;
  width:       100%;
  max-height:  92vh;
  overflow-y:  auto;
  position:    relative;
}

.popup-header {
  background:      var(--navy3);
  border-bottom:   1px solid var(--border);
  padding:         20px 24px;
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             12px;
}

.popup-close       { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; }
.popup-close:hover { color: var(--cream); }
.popup-body        { padding: 24px; }

.popup-tag      { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold3); margin-bottom: 6px; }
.popup-title    { font-family: 'Libre Baskerville', serif; font-size: 28px; color: var(--cream); font-weight: 400; margin-bottom: 2px; }
.popup-subtitle { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }

.specs-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--border);
  border:                1px solid var(--border);
  margin:                20px 0;
}
.spec-item  { background: var(--card); padding: 12px 14px; }
.spec-label { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin-bottom: 4px; }
.spec-val   { font-size: 13px; color: var(--cream); }

.popup-section-title {
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold3);
  margin-bottom:  10px;
  margin-top:     20px;
}

.compat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.compat-tag {
  background: rgba(200,160,70,0.1);
  border:     1px solid var(--gold3);
  color:      var(--gold);
  font-size:  11px;
  padding:    4px 10px;
}

/* Compatible parts inside popup */
.compat-parts-grid { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.compat-part-chip {
  display:     flex;
  align-items: center;
  gap:         9px;
  background:  rgba(96,80,192,0.07);
  border:      1px solid rgba(96,80,192,0.22);
  color:       var(--cream);
  font-size:   12px;
  line-height: 1.4;
  padding:     8px 12px;
  cursor:      pointer;
  transition:  all 0.15s;
}
.compat-part-chip:hover { background: rgba(96,80,192,0.16); border-color: #9080d8; color: #fff; }
.compat-part-icon { font-size: 15px; flex-shrink: 0; }

.uses-text {
  font-size:     12px;
  color:         var(--text);
  line-height:   1.7;
  background:    var(--surface);
  border:        1px solid var(--border);
  padding:       12px 14px;
  margin-bottom: 20px;
}

.popup-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }

.p-btn {
  background:     transparent;
  border:         1px solid var(--border2);
  color:          var(--text);
  font-family:    'DM Sans', sans-serif;
  font-size:      11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding:        8px 13px;
  cursor:         pointer;
  text-decoration:none;
  display:        inline-block;
  transition:     all 0.15s;
}
.p-btn:hover   { border-color: var(--gold3); color: var(--gold); }
.p-btn.primary { background: var(--gold); border-color: var(--gold); color: #1e1606; font-weight: 500; }
.p-btn.primary:hover { background: var(--gold2); border-color: var(--gold2); }

/* ─── NOTE / SERVICE AREA ─── */
.note-area {
  margin-top:    16px;
  border-top:    1px solid var(--border);
  padding-top:   16px;
}

.note-input {
  width:         100%;
  background:    var(--surface);
  border:        1px solid var(--border2);
  color:         var(--cream);
  font-family:   'DM Sans', sans-serif;
  font-size:     12px;
  padding:       10px 12px;
  outline:       none;
  resize:        vertical;
  min-height:    70px;
  transition:    border-color 0.2s;
  margin-bottom: 10px;
}
.note-input:focus { border-color: var(--gold3); }

/* Service date row */
.service-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  flex-wrap:     wrap;
  margin-bottom: 10px;
  padding:       10px 12px;
  background:    var(--surface);
  border:        1px solid var(--border);
}

.service-label {
  font-size:      10px;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space:    nowrap;
}

.service-date-input {
  background:  var(--navy3);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   12px;
  padding:     5px 8px;
  outline:     none;
  cursor:      pointer;
  transition:  border-color 0.2s;
}
.service-date-input:focus { border-color: var(--gold); }

/* Quantity row */
.qty-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  flex-wrap:     wrap;
  margin-bottom: 10px;
  padding:       10px 12px;
  background:    var(--surface);
  border:        1px solid var(--border);
}

.qty-controls {
  display:     flex;
  align-items: center;
  gap:         0;
  border:      1px solid var(--border2);
}

.qty-btn {
  background:  var(--navy3);
  border:      none;
  color:       var(--gold);
  font-size:   16px;
  width:       30px;
  height:      30px;
  cursor:      pointer;
  transition:  background 0.15s;
  display:     flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.qty-btn:hover { background: var(--navy4); }

.qty-display {
  min-width:   36px;
  text-align:  center;
  font-size:   14px;
  color:       var(--cream);
  font-weight: 500;
  padding:     0 6px;
  background:  var(--surface);
  height:      30px;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border2);
  border-right:1px solid var(--border2);
}

.status-row    { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.status-label  { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.status-btn {
  background:  var(--surface);
  border:      1px solid var(--border);
  color:       var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size:   11px;
  padding:     5px 10px;
  cursor:      pointer;
  transition:  all 0.15s;
}
.status-btn:hover      { border-color: var(--border2); color: var(--text); }
.status-btn.s-needed   { border-color: var(--red);   color: var(--red);   background: rgba(192,96,80,0.1); }
.status-btn.s-ordered  { border-color: var(--gold);  color: var(--gold);  background: rgba(200,160,70,0.1); }
.status-btn.s-instock  { border-color: var(--green); color: var(--green); background: rgba(90,144,112,0.1); }

.save-note-btn {
  margin-left: auto;
  background:  var(--gold);
  border:      none;
  color:       #1e1606;
  font-family: 'DM Sans', sans-serif;
  font-size:   11px;
  font-weight: 500;
  padding:     6px 14px;
  cursor:      pointer;
  transition:  background 0.15s;
}
.save-note-btn:hover { background: var(--gold2); }

/* ═══ AI ASSISTANT AREA ═══ */
.ai-area {
  margin-top:    20px;
  border-top:    1px solid var(--border);
  padding-top:   16px;
}

.ai-messages {
  background:    var(--surface);
  border:        1px solid var(--border);
  padding:       14px;
  min-height:    80px;
  max-height:    280px;
  overflow-y:    auto;
  margin-bottom: 8px;
  display:       flex;
  flex-direction:column;
  gap:           10px;
}

.ai-welcome {
  font-size:   12px;
  color:       var(--muted);
  font-style:  italic;
  line-height: 1.6;
  text-align:  center;
  padding:     12px 0;
}

.ai-msg { display: flex; flex-direction: column; gap: 3px; }

.ai-msg-user      { align-items: flex-end; }
.ai-msg-assistant { align-items: flex-start; }

.ai-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-msg-label {
  font-size:      9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--muted);
}

.ai-copy-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.5;
  transition: opacity .15s;
}
.ai-copy-btn:hover, .ai-copy-btn:active { opacity: 1; color: var(--gold3); }

.ai-msg-text {
  font-size:     12px;
  line-height:   1.7;
  padding:       8px 12px;
  max-width:     92%;
  border-radius: 2px;
}

.ai-msg-user .ai-msg-text {
  background: rgba(200,160,70,0.12);
  border:     1px solid rgba(200,160,70,0.25);
  color:      var(--cream);
}

.ai-msg-assistant .ai-msg-text {
  background: rgba(96,80,192,0.12);
  border:     1px solid rgba(96,80,192,0.25);
  color:      var(--text);
}

.ai-msg-text {
  user-select: text;
  -webkit-user-select: text;
}

/* Typing indicator */
.ai-typing {
  display:     flex;
  align-items: center;
  gap:         5px;
  padding:     4px 0;
}
.ai-typing span {
  display:          block;
  width:            7px;
  height:           7px;
  border-radius:    50%;
  background:       var(--gold3);
  animation:        aiDot 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40%           { transform: scale(1);   opacity: 1;   }
}

.ai-input-row {
  display: flex;
  gap:     6px;
}

.ai-input {
  flex:        1;
  background:  var(--surface);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   13px;
  padding:     9px 12px;
  outline:     none;
  transition:  border-color 0.2s;
}
.ai-input:focus        { border-color: var(--gold); }
.ai-input::placeholder { color: var(--muted); }
.ai-input:disabled     { opacity: 0.5; }

.ai-send-btn {
  background:  var(--gold);
  border:      none;
  color:       #1e1606;
  font-size:   16px;
  padding:     0 16px;
  cursor:      pointer;
  font-weight: 500;
  transition:  background 0.15s;
}
.ai-send-btn:hover { background: var(--gold2); }

/* ═══ PANELI I PJESËVE ═══ */
/* Desktop: hide mobile-only controls */
.parts-cat-select  { display: none; }
.parts-ai-toggle   { display: none; }
.parts-ai-row      { display: flex; }
.wiki-toggle-btn   { display: none; }   /* only shown on mobile */
#wikiSearchArea    { display: block; }  /* always visible on desktop */

.parts-cat-bar {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 20px;
}

.parts-search-row {
  display:       flex;
  gap:           8px;
  margin-bottom: 20px;
}

.parts-search-row input {
  flex:        1;
  max-width:   400px;
  background:  var(--surface);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   13px;
  padding:     9px 14px;
  outline:     none;
  transition:  border-color 0.2s;
}
.parts-search-row input:focus        { border-color: var(--gold); }
.parts-search-row input::placeholder { color: var(--muted); }

.parts-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   10px;
  margin-bottom:         32px;
}

.part-card         { background: var(--card); border: 1px solid var(--border); padding: 18px; transition: all 0.15s; }
.part-card:hover   { border-color: var(--gold3); background: var(--navy3); }

.part-card-header  { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.part-cat-icon     { font-size: 16px; }
.part-cat-label    { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold3); }

.part-name         { font-size: 14px; color: var(--cream); font-weight: 500; margin-bottom: 4px; line-height: 1.4; }
.part-brand        { font-size: 10px; color: var(--muted); margin-bottom: 6px; letter-spacing: 1px; }
.part-dim          { font-size: 11px; color: var(--text); margin-bottom: 10px; }
.part-section-lbl  { font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold3); margin-bottom: 6px; }

.part-fits         { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.part-fit-tag {
  background: rgba(200,160,70,0.08);
  border:     1px solid var(--gold3);
  color:      var(--gold);
  font-size:  10px;
  padding:    3px 8px;
  cursor:     pointer;
  transition: all 0.15s;
}
.part-fit-tag:hover { background: rgba(200,160,70,0.18); }

.part-notes {
  font-size:     11px;
  color:         var(--muted);
  line-height:   1.7;
  background:    rgba(200,160,70,0.04);
  border-left:   2px solid var(--gold3);
  padding:       8px 10px;
  margin-bottom: 12px;
}

.part-search-links { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══ WIKIPEDIA BOX ═══ */
.wiki-search-area {
  background:    var(--card);
  border:        1px solid var(--border);
  padding:       20px;
  margin-bottom: 24px;
}

.wiki-search-area h3 {
  font-family:   'Libre Baskerville', serif;
  font-size:     16px;
  color:         var(--cream);
  font-weight:   400;
  margin-bottom: 4px;
}
.wiki-search-area p {
  font-size:     11px;
  color:         var(--muted);
  margin-bottom: 12px;
  line-height:   1.6;
}

.wiki-input-row { display: flex; gap: 8px; }

#wikiInput {
  flex:        1;
  max-width:   380px;
  background:  var(--surface);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   13px;
  padding:     9px 14px;
  outline:     none;
  transition:  border-color 0.2s;
}
#wikiInput:focus        { border-color: var(--gold); }
#wikiInput::placeholder { color: var(--muted); }

.wiki-btn {
  background:     var(--navy3);
  border:         1px solid var(--border2);
  color:          var(--cream);
  font-family:    'DM Sans', sans-serif;
  font-size:      11px;
  font-weight:    500;
  padding:        9px 16px;
  cursor:         pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:     all 0.15s;
}
.wiki-btn:hover { border-color: var(--gold3); color: var(--gold); }

#wikiResult         { margin-top: 16px; }
#wikiResult.open    { animation: slideUp 0.2s ease; }
.wiki-loading       { font-size: 12px; color: var(--muted); padding: 8px 0; }
.wiki-empty         { font-size: 12px; color: var(--muted); padding: 8px 0; font-style: italic; }

.wiki-box { background: var(--surface); border: 1px solid var(--border2); padding: 16px 20px; }

.wiki-box-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   12px;
}

.wiki-box-source { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold3); margin-bottom: 4px; }
.wiki-box-title  { font-family: 'Libre Baskerville', serif; font-size: 18px; color: var(--cream); font-weight: 400; }

.wiki-close-btn       { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0; }
.wiki-close-btn:hover { color: var(--cream); }

.wiki-extract { font-size: 12px; color: var(--text); line-height: 1.8; margin-bottom: 14px; }
.wiki-footer  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.wiki-suggestions     { display: flex; flex-direction: column; gap: 4px; }
.wiki-suggestion {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         8px 10px;
  background:      rgba(200,160,70,0.04);
  border:          1px solid var(--border);
  cursor:          pointer;
  font-size:       12px;
  color:           var(--text);
  transition:      all 0.15s;
}
.wiki-suggestion:hover { border-color: var(--gold3); color: var(--gold); }
.wiki-arrow            { color: var(--gold3); }
.wiki-also             { font-size: 11px; color: var(--muted); }
.wiki-suggestion-small {
  display:     inline-block;
  font-size:   11px;
  color:       var(--gold3);
  cursor:      pointer;
  margin-left: 4px;
}
.wiki-suggestion-small:hover { color: var(--gold); }

/* ═══ LOG ═══ */
.log-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

.log-card {
  background: var(--card);
  border:     1px solid var(--border);
  padding:    16px;
  position:   relative;
}

.log-card-name { font-size: 15px; color: var(--gold); font-weight: 500; margin-bottom: 4px; }
.log-card-note { font-size: 12px; color: var(--text); line-height: 1.6; margin-bottom: 8px; }

.log-status   { display: inline-block; font-size: 10px; padding: 3px 8px; letter-spacing: 1px; text-transform: uppercase; }
.ls-ordered   { background: rgba(200,160,70,0.12); color: var(--gold);  border: 1px solid var(--gold3); }
.ls-instock   { background: rgba(90,144,112,0.12); color: var(--green); border: 1px solid var(--green); }
.ls-needed    { background: rgba(192,96,80,0.12);  color: var(--red);   border: 1px solid var(--red);   }

.log-del       { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--border2); cursor: pointer; font-size: 14px; transition: color 0.15s; }
.log-del:hover { color: var(--red); }

/* ═══ REVERSE ═══ */
.reverse-input-area {
  background:    var(--card);
  border:        1px solid var(--border);
  padding:       24px;
  margin-bottom: 24px;
}
.reverse-input-area h3 { font-family: 'Libre Baskerville', serif; font-size: 18px; color: var(--cream); font-weight: 400; margin-bottom: 6px; }
.reverse-input-area p  { font-size: 12px; color: var(--muted); margin-bottom: 16px; line-height: 1.6; }

.reverse-search-row { display: flex; gap: 8px; }

#reverseInput {
  flex:        1;
  background:  var(--surface);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   14px;
  padding:     10px 14px;
  outline:     none;
  transition:  border-color 0.2s;
}
#reverseInput:focus        { border-color: var(--gold); }
#reverseInput::placeholder { color: var(--muted); }

.reverse-btn       { background: var(--gold); border: none; color: #1e1606; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; padding: 10px 20px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; transition: background 0.15s; }
.reverse-btn:hover { background: var(--gold2); }

.reverse-count        { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold3); margin-bottom: 12px; }
.reverse-count em     { color: var(--gold); font-style: normal; }
.reverse-section-lbl  { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }

.reverse-match {
  background:    var(--card);
  border:        1px solid var(--border);
  border-left:   3px solid var(--gold);
  padding:       14px 16px;
  margin-bottom: 6px;
  cursor:        pointer;
  transition:    background 0.15s;
}
.reverse-match:hover         { background: var(--navy3); }
.reverse-match-part          { border-left-color: var(--purple); }
.reverse-match-ref           { font-size: 14px; color: var(--gold); font-weight: 500; margin-bottom: 3px; }
.reverse-match-part .reverse-match-ref { color: #b0a8e8; }
.reverse-match-info          { font-size: 11px; color: var(--muted); }
.reverse-empty               { font-size: 12px; color: var(--muted); padding: 20px; font-style: italic; }

/* ═══ BATERITË ═══ */
.battery-table { width: 100%; border-collapse: collapse; }
.battery-table th {
  background:    var(--navy3);
  color:         var(--gold);
  font-size:     10px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:       10px 14px;
  text-align:    left;
  font-weight:   400;
  border-bottom: 1px solid var(--border2);
}
.battery-table td { padding: 10px 14px; font-size: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.battery-table tr:hover td { background: rgba(200,160,70,0.04); }
.bat-ref    { color: var(--gold); font-weight: 500; }
.bat-compat { color: var(--muted); font-size: 11px; line-height: 1.6; }

/* ═══ DIAGNOZE ═══ */
/* ─── FAULT SEARCH BAR ─── */
.fault-search-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 12px;
}
.fault-search-input {
  flex:          1;
  background:    var(--card);
  border:        1px solid var(--border);
  color:         var(--cream);
  font-family:   'DM Sans', sans-serif;
  font-size:     13px;
  padding:       9px 14px;
  outline:       none;
  transition:    border-color .15s;
}
.fault-search-input:focus { border-color: var(--gold3); }
.fault-count-label {
  font-size:     11px;
  color:         var(--muted);
  white-space:   nowrap;
  flex-shrink:   0;
}

/* ─── FAULT ACCORDION ─── */
.fault-cards {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.fault-card {
  background: var(--card);
  border:     1px solid var(--border);
  overflow:   hidden;
  transition: border-color .15s;
}
.fault-card.open { border-color: var(--gold3); }

.fault-header {
  background:  var(--navy3);
  padding:     13px 16px;
  display:     flex;
  align-items: center;
  gap:         12px;
  cursor:      pointer;
  user-select: none;
  transition:  background .15s;
}
.fault-header:hover { background: var(--navy2); }
.fault-card.open .fault-header { background: rgba(176,128,48,.06); border-bottom: 1px solid var(--border); }

.fault-icon    { font-size: 20px; flex-shrink: 0; }
.fault-symptom { font-size: 13px; color: var(--cream); font-weight: 600; flex: 1; line-height: 1.35; }
.fault-cause-count {
  font-size:     10px;
  color:         var(--muted);
  background:    var(--surface);
  border:        1px solid var(--border);
  padding:       2px 7px;
  flex-shrink:   0;
  letter-spacing: .3px;
}
.fault-card.open .fault-cause-count { display: none; }
.fault-arrow   { color: var(--gold3); font-size: 14px; transition: transform 0.2s; flex-shrink: 0; }
.fault-card.open .fault-arrow { transform: rotate(90deg); }

.fault-body { display: none; }
.fault-card.open .fault-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
}

.fault-cause {
  padding:       14px 16px;
  border-right:  1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fault-cause:last-child { border-right: none; }

.fault-cause-name  { font-size: 12px; color: var(--gold); margin-bottom: 5px; font-weight: 600; }
.fault-cause-parts { font-size: 11px; color: var(--text); line-height: 1.7; margin-bottom: 8px; }

.fault-cause-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fault-search-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  background:      transparent;
  border:          1px solid var(--border);
  color:           var(--muted);
  font-family:     'DM Sans', sans-serif;
  font-size:       10px;
  letter-spacing:  .3px;
  padding:         4px 9px;
  cursor:          pointer;
  transition:      all 0.15s;
  text-decoration: none;
  white-space:     nowrap;
}
.fault-search-btn:hover { border-color: var(--gold3); color: var(--gold); }
.fault-search-btn.primary { border-color: var(--gold3); color: var(--gold3); }

.fault-no-results {
  text-align:  center;
  color:       var(--muted);
  padding:     32px 16px;
  font-size:   13px;
  grid-column: 1/-1;
}

/* ═══ KONVERTER ═══ */
.converter-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   12px;
  margin-bottom:         32px;
}

.conv-card {
  background: var(--card);
  border:     1px solid var(--border);
  padding:    20px;
}

.conv-card-title {
  font-size:      10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--gold3);
  margin-bottom:  14px;
  display:        flex;
  align-items:    center;
  gap:            8px;
}

.conv-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 10px;
  flex-wrap:     wrap;
}

.conv-label {
  font-size:   11px;
  color:       var(--muted);
  min-width:   80px;
  flex-shrink: 0;
}

.conv-input {
  background:  var(--surface);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   14px;
  padding:     7px 10px;
  outline:     none;
  width:       110px;
  transition:  border-color 0.2s;
}
.conv-input:focus { border-color: var(--gold); }

.conv-arrow {
  color:     var(--gold3);
  font-size: 14px;
  flex:      0 0 auto;
}

.conv-output {
  font-size:   15px;
  color:       var(--gold);
  font-weight: 500;
  min-width:   130px;
  padding:     4px 0;
  cursor:      pointer;
  user-select: all;
  transition:  color 0.15s;
}
.conv-output:hover { color: var(--gold2); }

.conv-output-sub {
  font-size: 11px;
  color:     var(--muted);
  margin-top: 3px;
}

.conv-btn-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }

.conv-quick {
  background:  var(--surface);
  border:      1px solid var(--border);
  color:       var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size:   10px;
  padding:     4px 8px;
  cursor:      pointer;
  transition:  all 0.15s;
}
.conv-quick:hover { border-color: var(--gold3); color: var(--gold); }

.conv-ref-table {
  width:           100%;
  border-collapse: collapse;
  margin-top:      6px;
}
.conv-ref-table th {
  font-size:      9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--gold3);
  padding:        6px 10px;
  text-align:     left;
  font-weight:    400;
  border-bottom:  1px solid var(--border);
  background:     var(--navy3);
}
.conv-ref-table td {
  font-size:    11px;
  color:        var(--text);
  padding:      7px 10px;
  border-bottom:1px solid var(--border);
}
.conv-ref-table tr:hover td { background: rgba(200,160,70,0.04); }
.conv-ref-hl { color: var(--gold); font-weight: 500; }

/* ═══ EMPTY STATE ═══ */
.empty-state      { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.empty-state p    { font-size: 13px; }

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

/* ═══ STATISTIKA ═══ */
.stats-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   10px;
  margin-bottom:         28px;
}
.stat-card {
  background:    var(--card);
  border:        1px solid var(--border);
  padding:       18px 16px;
  text-align:    center;
  transition:    border-color 0.15s;
}
.stat-card.stat-warn   { border-color: var(--gold3); }
.stat-card.stat-danger { border-color: var(--red); }
.stat-card.stat-info   { border-color: var(--purple); }
.stat-icon  { font-size: 22px; margin-bottom: 6px; }
.stat-val   { font-size: 28px; font-weight: 500; color: var(--cream); margin-bottom: 4px; }
.stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; }
.stat-section-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold3); margin: 16px 0 8px; }
.stat-order-row {
  background:    var(--card);
  border:        1px solid var(--border);
  border-left:   3px solid var(--gold3);
  padding:       10px 14px;
  font-size:     12px;
  color:         var(--text);
  cursor:        pointer;
  margin-bottom: 5px;
  transition:    background 0.15s;
}
.stat-order-row:hover { background: var(--navy3); }

/* ═══ STATS CHART CARDS ═══ */
.stat-chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 16px 14px;
  margin-top: 14px;
}
.stat-chart-card-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold3);
  margin-bottom: 14px;
}

/* ═══ REVENUE CHART ═══ */
/* FIX: align-items:stretch (was flex-end) lets columns fill the container height
   so flex:1 on rchart-bar-outer has a reference and bars render at correct height */
.rchart-wrap {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: 160px;
  padding: 0 2px;
  border-bottom: 1.5px solid var(--border2);
  border-left: 1.5px solid var(--border2);
  position: relative;
}
.rchart-col  { flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
.rchart-bar-outer { width:100%; flex:1; display:flex; align-items:flex-end; padding:0 1px; }
.rchart-bar-total {
  width: 100%; border-radius: 3px 3px 0 0;
  background: rgba(184,147,10,0.18);
  border: 1px solid rgba(184,147,10,0.28); border-bottom: none;
  position: relative; min-height: 2px;
  align-self: flex-end; transition: height 0.4s ease;
}
.rchart-bar-coll {
  position: absolute; bottom:0; left:0; right:0;
  background: var(--gold); border-radius: 3px 3px 0 0;
  min-height: 0; transition: height 0.4s ease;
}
.rchart-lbl { font-size:9px; color:var(--muted); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-align:center; flex-shrink:0; }
.rchart-legend { display:flex; gap:16px; font-size:11px; color:var(--muted); margin-top:12px; align-items:center; }
.rchart-legend span { display:flex; align-items:center; gap:5px; }
.rchart-legend-dot { width:11px; height:11px; border-radius:3px; display:inline-block; flex-shrink:0; }

/* ═══ KLIENTËT ═══ */
.customer-list { display:flex; flex-direction:column; gap:6px; }
.customer-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-left:   3px solid var(--border2);
  padding:       12px 14px;
  border-radius: 4px;
  cursor:        pointer;
  transition:    border-color 0.15s, background 0.15s;
}
.customer-card:hover { border-left-color:var(--gold3); background:var(--navy3); }
.customer-name { font-size:14px; color:var(--cream); font-weight:500; margin-bottom:4px; }
.customer-phone { color:var(--gold3); font-size:12px; }
.customer-meta  { display:flex; gap:12px; font-size:11px; color:var(--muted); flex-wrap:wrap; }
.customer-detail-job {
  background:    var(--card);
  border:        1px solid var(--border);
  border-left:   3px solid var(--border2);
  padding:       10px 14px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.customer-detail-job.status-collected { border-left-color:var(--green,#4caf50); }
.customer-detail-job.status-ready     { border-left-color:var(--gold); }
.customer-detail-job.status-working   { border-left-color:var(--purple); }
.customer-detail-job.status-waiting   { border-left-color:var(--border2); }
.cust-job-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.cust-job-watch  { font-size:13px; color:var(--cream); font-weight:500; }
.cust-job-price  { font-size:13px; color:var(--gold); }
.cust-job-meta   { font-size:11px; color:var(--muted); }

/* ─── ACTIVITY LOG ──────────────────────────────────────── */
.activity-log { display:flex; flex-direction:column; gap:4px; }
.activity-row {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       9px 12px;
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 4px;
}
.activity-icon  { font-size:16px; flex-shrink:0; line-height:1.3; }
.activity-body  { flex:1; min-width:0; }
.activity-label { font-size:12px; font-weight:600; color:var(--cream); margin-bottom:1px; }
.activity-detail{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-time  { font-size:10px; color:var(--border2); flex-shrink:0; white-space:nowrap; }

/* ─── SEASONAL HEATMAP ──────────────────────────────────── */
/* FIX: JS generates .shm-header/.shm-lbl/.shm-row (not table markup)
   Old .shm-table / .shm-hdr rules were orphaned and did nothing. */
.shm-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.shm-header,
.shm-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(26px, 1fr)) 38px;
  gap: 3px;
  align-items: center;
  min-width: 360px;
}
.shm-header { margin-bottom: 4px; }
.shm-row    { margin-bottom: 3px; }
.shm-lbl { font-size: 9px; color: var(--muted); text-align: center; line-height: 1; }
.shm-yr  { font-size: 10px; color: var(--gold3); font-weight: 600; text-align: right; white-space: nowrap; padding-right: 2px; }
.shm-cell {
  height: 26px;
  border-radius: 4px;
  background: rgba(176,128,48,calc(var(--pct) * 0.88 + 0.06));
  border: 1px solid rgba(176,128,48,calc(var(--pct) * 0.5 + 0.10));
  text-align: center;
  font-size: 9px;
  font-weight: 500;
  color: rgba(212,175,55,calc(var(--pct) + 0.3));
  cursor: default;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, border-color .15s;
}
.shm-cell:hover { border-color: var(--gold3); transform: scale(1.18); z-index: 1; }

/* ═══ PUNËT (JOBS) ═══ */
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 10px; }

.job-card {
  background: var(--card);
  border:     1px solid var(--border);
  border-left: 3px solid var(--border2);
  padding:    16px;
  transition: border-color 0.15s;
}
.job-card.status-waiting   { border-left-color: var(--muted); }
.job-card.status-working   { border-left-color: var(--purple); }
.job-card.status-ready     { border-left-color: var(--green); }
.job-card.status-collected { border-left-color: var(--border2); opacity: 0.75; }
.job-card.job-overdue      { border-left-color: var(--red); }
.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.job-client  { font-size: 15px; color: var(--gold); font-weight: 500; }
.job-watch   { font-size: 12px; color: var(--cream); margin-top: 2px; }
.job-movref  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.job-meta    { font-size: 11px; color: var(--muted); margin-bottom: 4px; line-height: 1.5; }
.job-notes   { font-size: 11px; color: var(--text); line-height: 1.6; background: var(--surface); border-left: 2px solid var(--border2); padding: 6px 10px; margin: 8px 0; }
.job-actions { display: flex; gap: 6px; margin-top: 12px; }

.job-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}
.job-field { display: flex; flex-direction: column; gap: 4px; }

/* ─── JOB STATUS PILLS (inline quick-change) ─────────────── */
.job-status-row {
  display:       flex;
  gap:           4px;
  margin-top:    8px;
  margin-bottom: 4px;
}
.job-status-pill {
  cursor:      pointer;
  font-size:   18px;
  padding:     4px 8px;
  border-radius: 6px;
  opacity:     0.35;
  transition:  opacity 0.15s, background 0.15s;
  border:      1px solid transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.job-status-pill:hover { opacity: 0.65; }
.job-status-pill.active {
  opacity:    1;
  background: rgba(200,160,70,0.1);
  border-color: var(--gold3);
}

/* ═══ LOG CONTROLS ═══ */
.log-controls {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           8px;
  margin-bottom: 16px;
}

/* ═══ SERVICE HISTORY ═══ */
.svc-history {
  background:    var(--surface);
  border:        1px solid var(--border);
  margin-bottom: 10px;
  max-height:    180px;
  overflow-y:    auto;
}
.svc-history-empty { padding: 10px 14px; font-size: 11px; color: var(--muted); font-style: italic; }
.svc-history-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       8px 14px;
  border-bottom: 1px solid var(--border);
  font-size:     12px;
}
.svc-history-row:last-child { border-bottom: none; }
.svc-history-date { color: var(--gold); font-weight: 500; flex-shrink: 0; min-width: 90px; }
.svc-history-note { color: var(--text); flex: 1; }
.svc-del-btn       { background: none; border: none; color: var(--border2); cursor: pointer; font-size: 12px; flex-shrink: 0; transition: color 0.15s; }
.svc-del-btn:hover { color: var(--red); }

.svc-add-row {
  display:       flex;
  gap:           6px;
  flex-wrap:     wrap;
  margin-bottom: 6px;
}
.svc-note-input {
  flex:        1;
  min-width:   120px;
  background:  var(--surface);
  border:      1px solid var(--border2);
  color:       var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size:   12px;
  padding:     6px 10px;
  outline:     none;
  transition:  border-color 0.2s;
}
.svc-note-input:focus { border-color: var(--gold3); }

/* ═══ TIMEGRAPHER ═══ */
.timegrapher-row {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.tg-field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

/* ═══ DESKTOP — sidebar is nav, hide redundant tab-pills ═══ */
@media (min-width: 901px) {
  .tab-pills { display: none !important; }
  /* Topbar becomes search-only bar — keep it slim */
  .topbar { min-height: 52px; padding: 0 20px; }
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb { background: var(--border2); }

/* ═══ TOUCH BASE ═══ */
button, a, [onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ═══ MOBILE BOTTOM NAV (hidden by default) ═══ */
.mobile-bottom-nav { display: none; }
#moreOverlay       { display: none; }
#moreDrawer        { display: none; }

/* ═══ RESPONSIVE — TABLET (≤ 900px) ═══ */
@media (max-width: 900px) {
  .app            { grid-template-columns: 1fr; }
  .sidebar        { display: none; }
  .topbar         { padding: 0 12px; height: auto; min-height: 52px; flex-wrap: wrap;
                    gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .panel          { padding: 16px 12px 72px; }
  .tab-pills      { gap: 3px; order: 2; width: 100%; }
  .tab-pill       { font-size: 10px; padding: 5px 9px; }

  /* Split view is desktop-only */
  .split-toggle-btn { display: none; }
  #splitPanelBar    { display: none !important; }
  .split-panel-area { display: none !important; }
  .specs-grid     { grid-template-columns: repeat(2, 1fr); }
  .movements-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .parts-grid     { grid-template-columns: 1fr; }
  .converter-grid { grid-template-columns: 1fr; }
  .search-hint    { display: none; }
  .ai-msg-text    { max-width: 100%; }
  .ai-clear-btn   { font-size: 11px; padding: 6px 14px; }
  .fault-body     { grid-template-columns: 1fr; }
  .log-grid       { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  /* Popup: slide up from bottom on tablet */
  .overlay, .popup-overlay { padding: 0; align-items: flex-end; }
  .popup          { max-width: 100%; max-height: 94vh; }

  /* Bigger touch targets */
  .qty-btn        { width: 38px; height: 38px; font-size: 18px; }
  .f-btn          { min-height: 34px; }
  .p-btn          { min-height: 34px; }
}

/* ═══ RESPONSIVE — PHONE (≤ 640px) ═══ */
@media (max-width: 640px) {

  /* Bottom nav */
  .mobile-bottom-nav {
    display:      flex;
    position:     fixed;
    bottom:       0; left: 0; right: 0;
    background:   var(--surface);
    border-top:   1px solid var(--border2);
    z-index:      50;
    height:       58px;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* notch phones */
  }
  .mbn-item {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2px;
    cursor:          pointer;
    color:           var(--muted);
    transition:      color 0.15s;
    padding:         6px 2px;
    -webkit-tap-highlight-color: transparent;
  }
  .mbn-item.active  { color: var(--gold); }
  .mbn-item:active  { background: rgba(200,160,70,0.06); }
  .mbn-icon         { font-size: 19px; line-height: 1; }
  .mbn-label        { font-size: 10px; letter-spacing: 0.3px; text-transform: uppercase; }
  .mbn-badge {
    position:      absolute;
    top:           4px;
    background:    var(--gold3);
    color:         #f8f2e8;
    font-size:     8px;
    padding:       1px 5px;
    border-radius: 10px;
    min-width:     16px;
    text-align:    center;
  }

  /* Hide desktop nav pills — bottom nav takes over */
  .tab-pills { display: none; }

  /* Hide desktop-only topbar controls on phone */
  .panel-hist-btn,
  .split-toggle-btn { display: none !important; }
  #splitPanelBar    { display: none !important; }
  .split-panel-area { display: none !important; }

  /* Topbar: compact — only search + bell remain */
  .topbar { height: 52px; flex-wrap: nowrap; padding: 0 10px; gap: 8px; }
  .search-input-wrap { max-width: 100%; }

  /* Bell: snug circle, no oversized gap */
  #notifBellBtn { width: 44px; height: 44px; font-size: 17px; border-radius: 50%; }

  /* RTE toolbar: bigger touch targets */
  .rte-btn { min-height: 34px; padding: 6px 10px; font-size: 12px; }

  /* Panels: extra bottom padding for bottom nav */
  .panel { padding: 14px 10px 78px; }

  /* Popup: full-screen on phone */
  .overlay { padding: 0; align-items: flex-end; }
  .popup   { max-width: 100%; height: 96vh; max-height: 96vh; }
  .popup-body   { padding: 14px; }
  .popup-header { padding: 12px 14px; }
  .popup-title  { font-size: 20px; }
  .popup-close  { font-size: 24px; padding: 4px 6px; }

  /* Specs: 2 wide columns */
  .specs-grid { grid-template-columns: repeat(2, 1fr); }

  /* Movements: 2 column grid */
  .movements-grid  { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  /* Sticky filter bar — offset below 52px topbar, no overlap */
  .movements-filter-bar { flex-direction: column; align-items: stretch; gap: 5px; top: 52px; z-index: 16; }
  .mov-search      { width: 100%; }
  /* Type/origin filter groups: wrap naturally, no horizontal swiping */
  .mov-type-group,
  .mov-origin-group {
    flex-wrap: wrap !important;
    overflow-x: unset !important;
    -webkit-overflow-scrolling: unset !important;
    scrollbar-width: unset !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    gap: 4px !important;
    padding-bottom: 0 !important;
  }
  /* Service filter group (last filter-group in movements bar) also wraps */
  .movements-filter-bar > .filter-group {
    flex-wrap: wrap !important;
    overflow-x: unset !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  /* Favoritet button: left-aligned, not stretched across full width */
  .movements-filter-bar > .f-btn { align-self: flex-start; margin-left: 0 !important; }

  /* Parts search full width */
  .parts-search-row        { flex-direction: column; }
  .parts-search-row input  { max-width: 100%; }

  /* Battery table: horizontal scroll */
  .battery-table {
    display:   block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Wiki input */
  .wiki-input-row { flex-direction: column; }
  #wikiInput      { max-width: 100%; }
  .wiki-btn       { width: 100%; }

  /* Reverse search */
  .reverse-search-row { flex-direction: column; }
  .reverse-btn        { width: 100%; }

  /* Log single column */
  .log-grid { grid-template-columns: 1fr; }

  /* Fault cards single column */
  .fault-cards { grid-template-columns: 1fr; }

  /* Section header */
  .section-hdr h2 { font-size: 17px; }

  /* Larger touch targets */
  .f-btn        { min-height: 40px; padding: 8px 11px; }
  .p-btn        { min-height: 40px; padding: 8px 12px; }
  .status-btn   { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  .qty-btn      { width: 44px; height: 44px; font-size: 20px; }
  .qty-display  { height: 44px; min-width: 48px; font-size: 16px; }
  .save-note-btn { padding: 10px 18px; font-size: 13px; }
  .ai-send-btn  { padding: 0 18px; min-height: 46px; font-size: 18px; }
  .popup-btns .p-btn { font-size: 11px; }

  /* AI chat area */
  .ai-messages  { max-height: 300px; }
  .ai-input     { font-size: 16px; padding: 12px; }

  /* Prevent iOS input zoom (font < 16px triggers it) */
  input, textarea, select { font-size: 16px !important; }

  /* Converter: full width inputs */
  .conv-input { width: 100%; }
  .conv-row   { flex-wrap: wrap; }

  /* Prevent page-level horizontal sliding from any overflowing element */
  html, body { overflow-x: hidden; }
  #panel-parts { overflow-x: clip; }

  /* Filter bars: horizontal scroll for panels that haven't been converted */
  .filter-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    gap: 5px;
  }
  .filter-group::-webkit-scrollbar { display: none; }

  /* Section descriptions: hide to save vertical space */
  .section-hdr p { display: none; }

  /* Mov card */
  .mov-card { padding: 12px 12px 28px; }
  .mov-ref  { font-size: 13px; }

  /* More drawer */
  #moreOverlay {
    display: none;
    position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,0.35);
  }
  #moreOverlay.open { display: block; }
  #moreDrawer {
    display:       block;
    position:      fixed;
    bottom:        0; left: 0; right: 0;
    background:    var(--navy);
    border-top:    2px solid var(--border2);
    border-radius: 22px 22px 0 0;
    z-index:       60;
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    transform:     translateY(100%);
    transition:    transform 0.30s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:    0 -8px 40px rgba(0,0,0,0.22);
  }
  #moreDrawer.open { transform: translateY(0); }
  #moreDrawerHandle {
    width: 38px; height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 14px auto 0;
  }
  .mdr-title {
    text-align:     center;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--gold3);
    padding:        10px 0 14px;
  }
  .mdr-scroll {
    overflow-y:  auto;
    max-height:  66vh;
    padding:     0 14px 8px;
    -webkit-overflow-scrolling: touch;
  }
  .mdr-group-label {
    font-size:      8px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color:          var(--muted);
    padding:        8px 4px 4px;
  }
  .mdr-group {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 14px;
    overflow:      hidden;
    margin-bottom: 8px;
  }
  .more-drawer-item.mdr-row {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     11px 14px;
    cursor:      pointer;
    border-top:  1px solid var(--border);
    transition:  background 0.12s;
    -webkit-tap-highlight-color: transparent;
  }
  .mdr-group .mdr-row:first-child { border-top: none; }
  .more-drawer-item.mdr-row:active { background: rgba(176,128,48,.1); }
  .more-drawer-item.mdr-row.active .mdr-row-name { color: var(--gold); font-weight: 700; }
  .more-drawer-item.mdr-row.active .mdr-chevron  { color: var(--gold2); }
  .mdr-icon {
    width:          32px;
    height:         32px;
    border-radius:  8px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      17px;
    flex-shrink:    0;
  }
  .mdr-row-name {
    flex:        1;
    font-size:   13px;
    font-weight: 500;
    color:       var(--cream);
    line-height: 1;
  }
  .mdr-chevron {
    font-size: 20px;
    color:     var(--border2);
    line-height: 1;
    font-weight: 300;
  }
  .mdr-sync-btn {
    width:         100%;
    margin-top:    4px;
    padding:       13px 16px;
    border-radius: 14px;
    background:    var(--surface);
    border:        1px solid var(--border2);
    color:         var(--muted);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           8px;
    -webkit-tap-highlight-color: transparent;
    transition:    background .15s;
  }
  .mdr-sync-btn:active { background: rgba(176,128,48,.1); color: var(--gold3); }
  #mbnMore.active { color: var(--gold); }
}

/* ─── UX / MOBILE IMPROVEMENTS ───────────────────────────── */

/* 1-column movement grid on very small phones */
@media (max-width: 400px) {
  .movements-grid { grid-template-columns: 1fr !important; }
  .mov-card       { padding: 14px 14px 28px; }
}

/* iOS momentum scrolling */
.popup       { -webkit-overflow-scrolling: touch; }
.popup-body  { -webkit-overflow-scrolling: touch; }
.ai-messages { -webkit-overflow-scrolling: touch; }

/* Compat tag hover — make clickability obvious */
.compat-tag {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.compat-tag:hover  { background: rgba(200,160,70,0.2); border-color: var(--gold); color: var(--gold2); }
.compat-note       { font-size: 11px; color: var(--muted); font-style: italic; align-self: center; }

/* Wikipedia result: bounded height */
.wiki-extract {
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Wikipedia loading pulse */
@keyframes wikiPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}
.wiki-loading { animation: wikiPulse 1.2s ease infinite; }

/* Gold pulse on movement card after save */
@keyframes goldSavePulse {
  0%   { box-shadow: 0 0 0 0   rgba(176,128,48,0.7); }
  45%  { box-shadow: 0 0 0 7px rgba(176,128,48,0.18); border-color: var(--gold); }
  100% { box-shadow: 0 0 0 0   rgba(176,128,48,0);   border-color: var(--gold3); }
}
.mov-card.save-flash { animation: goldSavePulse 0.75s ease forwards; }

/* Movement type: colored left border */
.mov-card[data-movtype="auto"]   { border-left: 3px solid var(--gold3); }
.mov-card[data-movtype="manual"] { border-left: 3px solid var(--green); }
.mov-card[data-movtype="quartz"] { border-left: 3px solid var(--purple); }
.mov-card.favorited { border-left: 3px solid var(--gold) !important; }

/* popup-section-title with action button inline */
.popup-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* AI clear button */
.ai-clear-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.ai-clear-btn:hover { color: var(--red); border-color: var(--red); }

.ai-export-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 12px;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.ai-export-btn:hover { color: var(--gold3); border-color: var(--gold3); }

/* ─── COMPAT NOTE ────────────────────────────────────────── */
.compat-note { cursor: default; }

/* ─── MOV-REF OVERFLOW ───────────────────────────────────── */
.mov-ref {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── FAULT SYMPTOM FLEX ─────────────────────────────────── */
.fault-symptom {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

/* ─── POPUP HEADER STICKY ────────────────────────────────── */
.popup-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
}

/* ─── MOBILE LAYOUT IMPROVEMENTS ────────────────────────── */
@media (max-width: 640px) {
  /* #63 — filter groups wrap on mobile, no scroll fade needed */
  .mov-type-group,
  .mov-origin-group { -webkit-mask-image: none !important; mask-image: none !important; }

  /* #65 — Status row: single grid row on mobile */
  .status-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 6px;
    align-items: center;
  }
  .status-label { display: none; }

  /* #66 — Search links vertical on mobile */
  .popup-btns {
    flex-direction: column;
  }
  .popup-btns .p-btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* #67 — Timegrapher stacks vertically */
  .timegrapher-row { flex-direction: column; gap: 10px; }
  .tg-field        { width: 100%; }
  .tg-field .conv-input { width: 100% !important; }

  /* #70 — Service history row: 2-line grid */
  .svc-history-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 8px;
    align-items: start;
  }
  .svc-history-date { grid-column: 1; grid-row: 1; font-weight: 600; }
  .svc-history-note { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 11px; }
  .svc-del-btn      { grid-column: 2; grid-row: 1 / 3; align-self: center; }

  /* #71 — Add service row: stacked */
  .svc-add-row { flex-direction: column; gap: 8px; }
  .svc-add-row input,
  .svc-add-row .p-btn { width: 100%; }

  /* #75 — Fault symptom doesn't clip */
  .fault-header { align-items: flex-start; }


  /* #80 — Sticky battery reference column */
  .battery-table td:first-child,
  .battery-table th:first-child {
    position: sticky;
    left: 0;
    background: var(--navy2);
    z-index: 1;
  }

  /* #119 — Wikipedia result bounded height */
  .wiki-box { max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ─── Global: parts category divider — hidden on desktop ─── */
.pcat-divider { display: none; }

/* ═══════════════════════════════════════════════════════════
   MOBILE: Kërko · Pjesët · Bateri — app-quality mobile UX
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── KËRKO PANEL ─────────────────────────────────────── */

  /* Sticky category filter bar — sits below the 52px topbar */
  #panel-search .filter-bar {
    position: sticky;
    top: 52px;
    z-index: 16;
    background: var(--navy);
    padding: 6px 0 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(30,22,8,0.15);
  }
  #panel-search .filter-label { display: none; }

  /* Category filter: 2×4 grid — no horizontal scroll, all 8 buttons visible */
  #panel-search .filter-group {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    flex-wrap: unset !important;
    overflow-x: unset !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    gap: 4px !important;
    padding-bottom: 0 !important;
  }
  #panel-search .filter-group .f-btn {
    min-height: 38px !important;
    font-size: 11px !important;
    padding: 6px 4px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Quick-search strip: wrapping card — no horizontal scroll */
  .quick-search-row {
    flex-wrap: wrap !important;
    overflow-x: unset !important;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 14px !important;
    gap: 6px;
  }
  .quick-search-row > span { display: none; }
  .quick-search-row .f-btn {
    min-height: 34px !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  /* Cousins UK: card container + 2-column tap grid (not horizontal scroll) */
  .cousins-cats {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 14px;
  }
  .cousins-cats h3 { display: none; }
  .cousins-cats::before {
    content: "🔗 Cousins UK — Kategori Direkte";
    display: block;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold3);
    margin-bottom: 8px;
  }
  .cousins-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-wrap: unset !important;
    overflow-x: unset !important;
    -webkit-overflow-scrolling: unset !important;
    gap: 5px !important;
  }
  .cousins-btn {
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 9px 10px !important;
    font-size: 11px !important;
    min-height: 42px;
    white-space: normal;
    line-height: 1.2;
    border-radius: 8px;
    justify-content: flex-start;
  }
  .ccat-icon { font-size: 15px; flex-shrink: 0; }

  /* Hide "Hap kërkimin" label — redundant on mobile */
  .sites-grid-label { display: none; }

  /* Sites grid: 2-column app-home layout */
  .sites-grid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 20px;
  }
  .site-card       { padding: 11px 10px 10px; min-height: 60px; }
  .site-card-desc  { display: none; }
  .site-card-name  { font-size: 13px; margin-bottom: 2px; }
  .site-card-tag   { font-size: 8px; letter-spacing: 1px; margin-bottom: 3px; }
  .site-card-arrow { font-size: 11px; top: 8px; right: 8px; }


  /* ── PJESËT PANEL ────────────────────────────────────── */

  /* Clip ALL overflow — nothing can push the panel wider than the viewport */
  #panel-parts { overflow-x: clip; max-width: 100vw; }

  /* AI toggle button: visible on mobile, hidden on desktop */
  .parts-ai-toggle {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  .parts-ai-toggle-arrow { transition: transform 0.2s; }
  .parts-ai-toggle.open .parts-ai-toggle-arrow { transform: rotate(180deg); }

  /* AI row: hidden by default, shown when toggle is open */
  .parts-ai-row {
    display: none !important;
    flex-direction: column;
    gap: 6px;
  }
  .parts-ai-row.open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 8px;
  }
  .parts-ai-row input  { min-width: 0 !important; width: 100%; max-width: 100%; box-sizing: border-box; }
  .parts-ai-row button { width: 100%; }

  /* Sticky search bar */
  #panel-parts .parts-search-row {
    flex-direction: row;
    position: sticky;
    top: 52px;
    z-index: 16;
    background: var(--navy);
    padding: 6px 0 4px;
    margin-top: 0;
    box-shadow: 0 2px 10px rgba(30,22,8,0.12);
    max-width: 100%;
    box-sizing: border-box;
  }
  #panel-parts .parts-search-row input {
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
    box-sizing: border-box;
  }

  /* Mobile category select: replaces the 31-button grid */
  .parts-cat-select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1.5px solid var(--gold3);
    border-radius: 8px;
    color: var(--cream);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    padding: 10px 14px;
    margin-bottom: 10px;
    appearance: auto;
    -webkit-appearance: auto;
    outline: none;
  }
  .parts-cat-select:focus { border-color: var(--gold); }

  /* Hide the 31-button grid on mobile */
  #panel-parts .parts-cat-bar { display: none !important; }

  /* Parts grid: 2 columns, tight gap */
  .parts-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Compact part cards — clipped so nothing bleeds outside */
  .part-card {
    padding: 10px 9px;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  .part-card-header     { margin-bottom: 3px; gap: 3px; }
  .part-cat-icon        { font-size: 12px; }
  .part-cat-label       { font-size: 8px; }
  .part-name            { font-size: 11px; line-height: 1.3; margin-bottom: 2px; word-break: break-word; }
  .part-brand           { font-size: 9px; margin-bottom: 2px; }
  .part-dim             { font-size: 9px; margin-bottom: 4px; }
  .part-section-lbl     { display: none; }
  .part-fits            { gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
  .part-fit-tag         { font-size: 8px; padding: 2px 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .part-notes           { display: none; }  /* hidden by renderParts on mobile */
  .part-search-links    { display: flex; flex-wrap: wrap; gap: 3px; max-width: 100%; }
  .part-search-links .p-btn {
    min-height: 30px !important;
    padding: 4px 5px !important;
    font-size: 9px !important;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Wikipedia toggle: visible on mobile, wraps the wiki area */
  .wiki-toggle-btn {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  .wiki-toggle-btn.open .parts-ai-toggle-arrow { transform: rotate(180deg); }

  /* Wikipedia area: hidden by default on mobile, shown when toggle open */
  #wikiSearchArea {
    display: none !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  #wikiSearchArea.open {
    display: block !important;
  }
  #wikiSearchArea     { padding: 12px; margin-top: 0; }
  #wikiSearchArea p   { display: none; }
  #wikiSearchArea h3  { font-size: 12px; margin-bottom: 8px; }
  .wiki-input-row     { flex-direction: column !important; gap: 6px !important; }
  .wiki-input-row input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  .wiki-btn           { width: 100% !important; box-sizing: border-box; }

  /* Compact prompt when no search active */
  .parts-empty-prompt { padding: 24px 0 8px; text-align: center; }


  /* ── BATERI PANEL ────────────────────────────────────── */

  /* Sticky search bar */
  .bat-search-row {
    position: sticky;
    top: 52px;
    z-index: 16;
    background: var(--navy);
    padding: 6px 0 4px;
    margin-top: -6px;
    box-shadow: 0 2px 10px rgba(30,22,8,0.12);
    margin-bottom: 10px !important;
  }
  .bat-search-row #batFilter { width: 100% !important; }

  /* ── Battery table → card layout ── */

  /* Remove old horizontal-scroll behaviour */
  .battery-table        { display: block; overflow-x: unset; -webkit-overflow-scrolling: unset; }
  .battery-table thead  { display: none; }
  .battery-table tbody  { display: block; }

  /* Each row becomes an independent card */
  .battery-table tr {
    display:    block;
    background: var(--card);
    border:     1px solid var(--border);
    margin-bottom: 8px;
    padding:    0;
    transition: border-color 0.15s;
  }
  .battery-table tr:hover     { border-color: var(--gold3); }
  .battery-table tr:hover td  { background: transparent; }

  /* All cells: block by default */
  .battery-table td {
    display:       block;
    padding:       4px 12px;
    border-bottom: none;
    font-size:     12px;
  }

  /* Col 1 — Reference: large gold, visually dominant */
  .battery-table td:nth-child(1) {
    padding:       12px 12px 9px;
    border-bottom: 1px solid var(--border2);
  }
  .battery-table td:nth-child(1) .bat-ref {
    font-size:     20px;
    letter-spacing: 0.5px;
  }

  /* Col 2 — Equivalents */
  .battery-table td:nth-child(2) { padding: 8px 12px 2px; }
  .battery-table td:nth-child(2) .bat-compat { font-size: 12px; color: var(--text); line-height: 1.5; }
  .battery-table td:nth-child(2)::before { content: "≡  "; color: var(--gold3); font-size: 12px; }

  /* Col 3+4 — Dimensions and Voltage: inline side-by-side */
  .battery-table td:nth-child(3),
  .battery-table td:nth-child(4) {
    display:    inline-block;
    padding:    3px 12px;
    font-size:  11px;
    color:      var(--muted);
  }
  .battery-table td:nth-child(3)::before { content: "📐  "; }
  .battery-table td:nth-child(4)::before { content: "⚡  "; }

  /* Col 5 — Uses: full-width footer of the card */
  .battery-table td:nth-child(5) {
    display:    block;
    border-top: 1px solid var(--border2);
    padding:    7px 12px 10px;
    margin-top: 2px;
  }
  .battery-table td:nth-child(5) .bat-compat {
    font-size:  11px;
    color:      var(--muted);
    line-height: 1.5;
  }

  /* Override the old sticky-first-column rule (no longer a table) */
  .battery-table td:first-child,
  .battery-table th:first-child {
    position:   static !important;
    background: transparent !important;
    z-index:    auto !important;
    left:       auto !important;
  }

  /* ── PUNËT (JOBS) ─────────────────────────────────────── */
  /* 6 status buttons → 3×2 grid, no horizontal scroll */
  #panel-jobs .filter-group {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-x: unset !important;
    flex-wrap: unset !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    gap: 6px !important;
  }
  #panel-jobs .filter-group .f-btn { justify-content: center; text-align: center; font-size: 11px !important; }

  /* ── POROSITË (ORDERS) ────────────────────────────────── */
  /* 4 filter buttons → flex-wrap, no scroll */
  #panel-orders .filter-group {
    flex-wrap: wrap !important;
    overflow-x: unset !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    gap: 6px !important;
  }
  #panel-orders .filter-group .f-btn { flex: 1 1 auto; text-align: center; }

  /* ── SHPENZIMET (EXPENSES) ───────────────────────────── */
  /* Search full-width, filter buttons wrap (already have inline flex-wrap) */
  #panel-expenses .mov-search { width: 100% !important; min-width: 0 !important; }

  /* ── KONVERTER ────────────────────────────────────────── */
  /* Reference tables: scroll if they overflow, smaller text */
  .conv-card     { overflow-x: auto; }
  .conv-ref-table { font-size: 11px; min-width: 260px; }
  .conv-ref-table th, .conv-ref-table td { padding: 5px 7px; }

  /* Crystal guide table */
  .crystal-guide-table { font-size: 11px; min-width: 260px; }

  /* ── MEKANIZMAT (MOVEMENTS) ──────────────────────────── */
  /* Movement cards: tighter on mobile */
  .mov-card { padding: 10px 11px 26px; }
  .mov-ref  { font-size: 12px; }
  .mov-brand { font-size: 8px; }
  .mov-type  { font-size: 10px; }
  .mov-origin { font-size: 8px; }

  /* ── KLIENTËT (CUSTOMERS) ────────────────────────────── */
  .search-input { width: 100%; font-size: 16px !important; }

  /* ── GENERAL PANEL IMPROVEMENTS ──────────────────────── */
  /* Section headings: tighter on mobile */
  .section-hdr { margin-bottom: 12px; }
  /* Expense + orders top row: stack on very small screens */
  #panel-expenses > .section-hdr { flex-direction: column; align-items: flex-start; gap: 8px; }
  #panel-orders   > .section-hdr { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── ADDITIONAL MOBILE POLISH ─────────────────────────────── */
@media (max-width: 640px) {
  /* Job card: action buttons wrap (7–9 possible buttons) */
  .job-actions          { flex-wrap: wrap !important; gap: 5px !important; }
  .job-actions .p-btn   { flex: 1 1 auto; text-align: center; min-width: 76px; font-size: 10px !important; padding: 6px 7px !important; }

  /* Job form: single-column on mobile instead of 2-col grid */
  .job-form-grid { grid-template-columns: 1fr !important; }

  /* Stats grid: 2 columns on mobile (was auto-fill 3+) */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Stat chart cards: tighter padding on mobile */
  .stat-chart-card { padding: 12px 12px 10px; margin-top: 10px; }
  .stat-chart-card-title { margin-bottom: 10px; }

  /* Revenue chart: slightly shorter on mobile */
  .rchart-wrap { height: 130px; gap: 2px; }
  .rchart-lbl  { font-size: 8px; }
  .rchart-legend { font-size: 10px; gap: 12px; }

  /* Heatmap: smaller cells to fit more on screen */
  .shm-cell { height: 20px; font-size: 8px; }
  .shm-lbl  { font-size: 8px; }

  /* Inventory filter row: wrap instead of scroll */
  .inv-filter-row        { flex-wrap: wrap !important; overflow-x: unset !important; -webkit-mask-image: none !important; mask-image: none !important; gap: 6px !important; }
  #panel-inventory .filter-group { gap: 6px !important; }
  .inv-filter-row .f-btn { flex: 1 1 auto; text-align: center; }

  /* Inventory grid: single column for readability */
  .inventory-grid { grid-template-columns: 1fr !important; }

  /* Customers: ensure search is full width */
  #customerListView .search-input { width: 100%; }
  .customer-card { padding: 12px !important; }

  /* Expenses grid: single column on mobile */
  .expenses-grid { grid-template-columns: 1fr !important; }

  /* Orders grid: single column */
  .orders-grid { grid-template-columns: 1fr !important; }

  /* Section headers: stack vertically on mobile (h2 above buttons) */
  #panel-jobs > .section-hdr,
  #panel-inventory > .section-hdr { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Popup action buttons: adequate touch targets */
  .popup-btns { gap: 5px !important; }
  .popup-btns .p-btn { min-height: 44px !important; }
}

/* ─── PRINT ──────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .mobile-bottom-nav,
  #moreOverlay, #moreDrawer, #splitPanelBar, .split-panel-area,
  .panel-hist-btn, .split-toggle-btn, #panelTransFlash,
  .popup-btns, .note-area, .ai-area, .svc-add-row,
  .fav-btn, .log-del, .job-actions, .pin-btn { display: none !important; }
  body { background: white !important; color: black !important; }
  .overlay, .popup-overlay { position: static !important; background: none !important; padding: 0 !important; display: block !important; }
  .popup { border: none !important; max-height: none !important; overflow: visible !important; box-shadow: none !important; }
  .specs-grid { background: #ddd !important; }
  .spec-item  { background: white !important; }
  .main, .panel { display: block !important; }
  .panel { padding: 0 !important; }
}

/* ─── LOGIN GATE ─────────────────────────────────────────── */
#loginGate {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 40% 40%, #0f2050 0%, #080f20 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
  transition: opacity .26s ease, transform .26s ease;
}

/* Decorative concentric rings in the background */
.login-bg-rings {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.login-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(200,160,70,0.07);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.login-ring-1 { width: 340px; height: 340px; }
.login-ring-2 { width: 560px; height: 560px; border-color: rgba(200,160,70,0.05); }
.login-ring-3 { width: 800px; height: 800px; border-color: rgba(200,160,70,0.03); }

/* Main card */
.login-box {
  position: relative;
  background: rgba(15, 28, 60, 0.92);
  border: 1px solid rgba(200,160,70,0.25);
  border-radius: 16px;
  padding: 44px 40px 36px;
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,160,70,0.08);
  backdrop-filter: blur(12px);
  transition: opacity .26s ease, transform .26s ease;
}

/* Header: emblem + logo */
.login-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.login-emblem {
  font-size: 44px; line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(200,160,70,0.4));
}
.login-logo-name {
  font-family: 'Libre Baskerville', serif;
  font-size: 22px; letter-spacing: 5px;
  color: var(--gold); text-transform: uppercase;
}
.login-logo-sub {
  font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted);
}

.login-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,160,70,0.3), transparent);
}

/* Error banner */
.login-error {
  display: flex; align-items: center; gap: 8px;
  background: rgba(192,80,64,0.18);
  border: 1px solid rgba(192,80,64,0.5);
  color: #e89080;
  font-size: 13px; padding: 10px 14px;
  border-radius: 8px;
  animation: loginErrorIn .2s ease;
}
.login-error-icon { font-size: 14px; flex-shrink: 0; }
@keyframes loginErrorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shake animation for wrong password */
@keyframes loginShake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-7px); }
  30%      { transform: translateX(7px); }
  45%      { transform: translateX(-5px); }
  60%      { transform: translateX(5px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(3px); }
}
.login-shake { animation: loginShake .5s ease; }

/* Fields */
.login-fields { display: flex; flex-direction: column; gap: 16px; }
.login-field  { display: flex; flex-direction: column; gap: 7px; }
.login-label  {
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
  padding-left: 2px;
}

.login-input {
  background: rgba(10, 20, 45, 0.8);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 9px;
  width: 100%;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.login-input::placeholder { color: rgba(120,140,180,0.45); }
.login-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,160,70,0.12);
}

.login-pass-wrap { position: relative; }
.login-pass-wrap .login-input { padding-right: 46px; }
.login-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 6px;
  color: var(--muted); opacity: 0.7;
  transition: opacity .15s;
}
.login-eye:hover { opacity: 1; }

/* Login button */
.login-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #b88e38 100%);
  color: var(--navy);
  border: none; border-radius: 9px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 600;
  padding: 14px;
  cursor: pointer;
  transition: filter .15s, transform .1s, background .25s, color .25s;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(200,160,70,0.25);
}
.login-btn:hover:not(:disabled)  { filter: brightness(1.1); }
.login-btn:active:not(:disabled) { transform: scale(0.98); }
.login-btn:disabled { cursor: default; opacity: 0.7; }

.login-hint {
  font-size: 10px; color: rgba(120,140,180,0.5);
  text-align: center; letter-spacing: 0.5px;
}

/* Mobile */
@media (max-width: 420px) {
  .login-box    { padding: 32px 22px 28px; gap: 16px; }
  .login-emblem { font-size: 38px; }
  .login-logo-name { font-size: 18px; letter-spacing: 4px; }
  .login-input  { font-size: 16px; padding: 14px 16px; } /* prevent iOS zoom */
  .login-btn    { font-size: 16px; padding: 16px; }      /* larger tap target */
  .login-ring-1 { width: 260px; height: 260px; }
  .login-ring-2 { width: 420px; height: 420px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE COMMAND PALETTE BUTTON
   ═══════════════════════════════════════════════════════════ */
#mobileCmd {
  display: none;
  position: fixed;
  bottom: 70px;
  left: 16px;
  z-index: 100;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4a84e 0%, #a07030 100%);
  border: none;
  color: #fff;
  font-size: 22px;
  box-shadow:
    0 4px 20px rgba(176,128,48,0.5),
    0 1px 4px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 640px) {
  #mobileCmd { display: flex; }
}
#mobileCmd:active { opacity: 0.7; }

#mobileCmd .cmd-badge {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: #e05050;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--surface);
  line-height: 1;
}
#mobileCmd.has-badge .cmd-badge { display: flex; }

/* ═══════════════════════════════════════════════════════════
   TOAST SYSTEM
   ═══════════════════════════════════════════════════════════ */
#toastContainer {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9900;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  min-width: 240px;
}
@media (min-width: 769px) {
  #toastContainer { bottom: 28px; }
}
.toast {
  background: var(--cream);
  color: var(--navy);
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 24px rgba(30,22,8,0.3);
  pointer-events: all;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s;
  max-width: 380px;
  text-align: center;
  white-space: pre-line;
}
.toast.visible     { opacity: 1; transform: translateY(0); }
.toast-success     { background: var(--green); color: #fff; }
.toast-ok          { background: var(--green); color: #fff; }
.toast-error       { background: var(--red);   color: #fff; }
.toast-warn        { background: #9a6010;       color: #fff; }
.toast-info        { background: var(--navy3);  color: var(--text); border: 1px solid var(--border); }
.toast-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  max-width: 320px;
}
.toast-msg  { font-size: 13px; line-height: 1.5; }
.toast-btns { display: flex; gap: 8px; justify-content: center; }
.toast-btn  {
  padding: 7px 18px; border-radius: 8px; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: 'DM Sans', sans-serif; letter-spacing: 0.5px;
  transition: filter .15s;
}
.toast-btn:hover            { filter: brightness(1.12); }
.toast-btn-ok               { background: var(--gold); color: var(--cream); }
.toast-btn-cancel           { background: var(--navy3); color: var(--text); border: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════
   COMMAND PALETTE
   ═══════════════════════════════════════════════════════════ */
.cmd-palette-backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; /* explicit — inset:0 unsupported on Safari <14.1 */
  z-index: 9000;
  background: rgba(30,22,8,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.cmd-palette-backdrop.open {
  opacity: 1;
  pointer-events: all;
}
.cmd-palette {
  width: 100%;
  max-width: 560px;
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(30,22,8,0.3);
  overflow: hidden;
  transform: translateY(-14px) scale(0.97);
  transition: transform .18s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
}
.cmd-palette-backdrop.open .cmd-palette {
  transform: translateY(0) scale(1);
}
.cmd-drag-handle {
  display: none;
}
.cmd-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cmd-search-icon { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.cmd-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  outline: none;
  font-family: 'DM Sans', sans-serif;
}
.cmd-input::placeholder { color: var(--muted); }
.cmd-esc {
  font-size: 10px;
  padding: 3px 7px;
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.cmd-list {
  max-height: 380px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 0;
  flex: 1;
}
.cmd-section { padding: 2px 0; }
.cmd-section-label {
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold3);
  padding: 6px 16px 3px;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .1s;
  font-size: 13px;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cmd-item:hover,
.cmd-item.selected { background: rgba(176,128,48,0.1); }
.cmd-item-icon  { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.cmd-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-item-sub   { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.cmd-key {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-family: 'DM Sans', monospace;
  flex-shrink: 0;
}
.cmd-footer {
  display: flex;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  background: var(--navy2);
  flex-shrink: 0;
}

/* ── Mobile: bottom sheet ── */
@media (max-width: 640px) {
  .cmd-palette-backdrop {
    padding: 0;
    align-items: flex-end;
    /* Remove backdrop-filter on mobile — it causes iOS GPU compositing flushes
       that make fixed-position elements (the ⌘ button) flicker/jump */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,16,32,0.72); /* slightly more opaque to compensate for no blur */
  }
  .cmd-palette {
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: 20px 20px 0 0;
    max-height: 82vh;
    transform: translateY(100%);
    border-bottom: none;
  }
  .cmd-palette-backdrop.open .cmd-palette {
    transform: translateY(0);
  }
  .cmd-drag-handle {
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 2px;
    flex-shrink: 0;
  }
  .cmd-list {
    max-height: none;
    flex: 1;
  }
  .cmd-input { font-size: 16px; } /* prevent iOS auto-zoom */
  .cmd-input-row { padding: 10px 16px; }
  .cmd-esc { display: none; }
  .cmd-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }
  .cmd-footer .cmd-hint-desktop { display: none; }
  .cmd-item { padding: 13px 16px; font-size: 14px; }
  .cmd-item-icon { font-size: 17px; width: 26px; }
  .cmd-section-label { padding: 8px 16px 4px; }
}

/* ═══════════════════════════════════════════════════════════
   COPY-REF BUTTON & PIN BUTTON ON CARDS
   ═══════════════════════════════════════════════════════════ */
.mov-card-actions {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  flex-direction: row;
  gap: 3px;
  opacity: 0;
  transition: opacity .15s;
}
.mov-card:hover .mov-card-actions { opacity: 1; }

.ref-copy-btn {
  position: static;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  font-size: 13px;
  padding: 3px 5px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
  white-space: nowrap;
}
.ref-copy-btn:hover { background: var(--navy2); border-color: var(--border); color: var(--gold); }

.pin-btn {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: none;
  border: none;
  padding: 3px 4px;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.mov-card:hover .pin-btn { opacity: 0.65; }
.mov-card:hover .pin-btn:hover { opacity: 1; }
.pin-btn.pinned { opacity: 1; color: var(--gold); }
.mov-card.pinned-card { border-left: 2px solid var(--gold3); }
@media (pointer: coarse) { .pin-btn { opacity: 0.35; } }

.mov-note-preview {
  font-size:     10px;
  color:         var(--muted);
  margin-top:    5px;
  font-style:    italic;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  border-top:    1px solid var(--border);
  padding-top:   4px;
}

/* ─── TOOLS PANEL ──────────────────────────────────────── */
.tool-level-badge {
  font-size:     9px;
  font-weight:   700;
  padding:       2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-left:   auto;
}
.tool-level-starter     { background: #1a3a2a; color: #4caf82; }
.tool-level-inter       { background: #2a2a10; color: #d4b84a; }
.tool-level-pro         { background: #2a1020; color: #e06090; }

.tool-desc {
  font-size:   11px;
  color:       var(--muted);
  margin-top:  4px;
  line-height: 1.4;
}
.tool-price {
  font-size:   12px;
  color:       var(--gold);
  font-weight: 600;
  margin-top:  5px;
}
.tool-suppliers {
  font-size:  10px;
  color:      var(--muted);
  margin-top: 3px;
}

.tools-budget-table   { margin-bottom: 14px; }
.tools-budget-grid    {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.tools-budget-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       10px 12px;
}
.tbc-label {
  font-size:   11px;
  font-weight: 700;
  color:       var(--text);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tbc-price {
  font-size:   16px;
  font-weight: 700;
  color:       var(--gold);
  margin:      4px 0 3px;
}
.tbc-desc {
  font-size:  11px;
  color:      var(--muted);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   MANUAL PANEL
   ═══════════════════════════════════════════════════════════ */

/* Layout */
.manual-container {
  display:   flex;
  gap:       20px;
  min-height: 600px;
}
.manual-toc {
  flex-shrink:    0;
  width:          180px;
  background:     var(--card);
  border:         1px solid var(--border);
  border-radius:  10px;
  padding:        12px 0;
  height:         fit-content;
  position:       sticky;
  top:            60px;
}
.manual-toc-title {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--gold3);
  padding:        0 14px 10px;
  border-bottom:  1px solid var(--border);
  margin-bottom:  6px;
}
.manual-toc-search {
  padding:       6px 10px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.manual-toc-search input {
  width:         100%;
  background:    var(--navy2);
  border:        1px solid var(--border);
  border-radius: 7px;
  color:         var(--text);
  font-family:   inherit;
  font-size:     11px;
  padding:       6px 9px;
  outline:       none;
  transition:    border-color .15s;
}
.manual-toc-search input:focus { border-color: var(--gold3); }
.manual-toc-search input::placeholder { color: var(--muted); font-size: 11px; }
.manual-toc-item {
  display:         block;
  padding:         7px 14px;
  font-size:       11px;
  color:           var(--text);
  cursor:          pointer;
  border-left:     3px solid transparent;
  transition:      all 0.15s;
  text-decoration: none;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}
.manual-toc-item.no-match { display: none; }
.manual-toc-item.match    { display: block; }
.manual-toc-item:hover  { background: var(--navy2); color: var(--gold); }
.manual-toc-item.active {
  display:           block;
  border-left-color: var(--gold);
  background:        var(--navy2);
  color:             var(--gold);
  font-weight:       600;
}

/* TOC Groups — headers removed, items always accessible as flat list */
.manual-toc-group     { margin-bottom: 0; }
.manual-toc-group-hdr { display: none !important; }
.manual-toc-group-items { display: block; padding-left: 0; margin-bottom: 0; }

/* Prev/Next navigation */
.manual-prev-next { display:flex; justify-content:space-between; gap:10px; margin-top:32px; padding-top:18px; border-top:1px solid var(--border); }
.manual-nav-btn {
  padding: 10px 20px;
  background: transparent;
  border: 1.5px solid var(--gold3);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold3);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.15px;
}
.manual-nav-btn:hover:not(.disabled):not(:disabled) {
  background: rgba(212,175,55,.1);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.08);
}
.manual-nav-btn:active:not(.disabled):not(:disabled) { background: rgba(212,175,55,.18); }
/* "Para →" (next) — primary action, visually heavier */
.manual-prev-next .manual-nav-btn:last-child:not(:disabled):not(.disabled) {
  background: rgba(212,175,55,.09);
  border-color: var(--gold2);
  color: var(--gold);
}
.manual-prev-next .manual-nav-btn:last-child:not(:disabled):not(.disabled):hover {
  background: rgba(212,175,55,.2);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.1);
}
.manual-nav-btn.disabled, .manual-nav-btn:disabled { opacity:.25; cursor:default; border-color:var(--border); color:var(--muted); }

/* Content area */
.manual-content { flex: 1; min-width: 0; }
.manual-section { display: none; }
.manual-section.active { display: block; }

/* Section hero */
.manual-section-hero {
  display:       flex;
  align-items:   center;
  gap:           16px;
  margin-bottom: 20px;
  padding:       16px 20px;
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 10px;
}
.manual-hero-icon {
  font-size:   36px;
  line-height: 1;
  flex-shrink: 0;
}
.manual-section-title { font-size: 20px; color: var(--cream); margin: 0 0 4px; }
.manual-section-sub   { font-size: 12px; color: var(--muted); margin: 0; }

/* Sub-headings */
.manual-sub-title {
  font-size:     13px;
  font-weight:   700;
  color:         var(--gold3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin:        22px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}

/* Callouts */
.manual-callout {
  display:       flex;
  gap:           12px;
  padding:       12px 14px;
  border-radius: 8px;
  margin:        12px 0;
  font-size:     12px;
  line-height:   1.6;
  border:        1px solid transparent;
}
.manual-callout-tip {
  background: rgba(48, 112, 80, 0.08);
  border-color: rgba(48, 112, 80, 0.25);
  color: var(--text);
}
.manual-callout-warning {
  background: rgba(160, 40, 32, 0.07);
  border-color: rgba(160, 40, 32, 0.25);
  color: var(--text);
}
.manual-callout-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── Manual CTA bar ── */
.manual-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, var(--card) 0%, rgba(212,175,55,.10) 100%);
  border: 1.5px solid var(--gold3);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.manual-cta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.manual-cta-text strong { font-size: 13px; color: var(--gold); font-weight: 700; }
.manual-cta-btn {
  flex-shrink: 0;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: 9px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(212,175,55,.28);
}
.manual-cta-btn:hover  { opacity: .9; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(212,175,55,.38); }
.manual-cta-btn:active { opacity: 1;  transform: translateY(0);   box-shadow: 0 2px 10px rgba(212,175,55,.28); }
@media (max-width: 520px) {
  .manual-cta { flex-direction: column; align-items: stretch; }
  .manual-cta-btn { width: 100%; }
}

/* ─── TIMEGRAPHER TREND CHART ─────────────────────────── */
.tg-trend-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.tg-chart-col { display:flex; flex-direction:column; gap:4px; flex:1; min-width:110px; }
.tg-chart-label { font-size:10px; font-weight:600; color:var(--text); }
.tg-trend-legend { display:flex; align-items:center; gap:5px; font-size:9px; color:var(--muted); margin-top:5px; }
.tg-leg-before { display:inline-block; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--muted); background:transparent; flex-shrink:0; }
.tg-leg-after  { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* ─── SERVICE PROCEDURE ───────────────────────────────── */
.svc-proc-body { background:var(--surface2); border-radius:8px; padding:10px 12px; margin-top:4px; max-height:300px; overflow-y:auto; }
.svc-proc-phase { font-size:10px; font-weight:700; color:var(--gold); margin-top:10px; margin-bottom:2px; letter-spacing:0.5px; }
.svc-proc-phase:first-child { margin-top:0; }
.svc-proc-step { font-size:12px; color:var(--text); padding:2px 0 2px 4px; border-left:2px solid transparent; line-height:1.55; transition:border-color .1s, background .1s; }
.svc-proc-step:hover { border-left-color:var(--gold); background:rgba(212,175,55,.06); border-radius:0 4px 4px 0; }
.svc-proc-footer { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.svc-proc-loading { font-size:12px; color:var(--muted); padding:6px 0; }
.svc-proc-err { font-size:12px; color:#c0392b; padding:6px 0; }

/* ─── LUBRICANT MAP ───────────────────────────────────── */
.lub-map-body { background:var(--surface2); border-radius:8px; padding:8px 12px; margin-top:4px; }
.lub-map-phase { font-size:10px; font-weight:700; color:var(--gold); margin-top:8px; margin-bottom:2px; letter-spacing:0.5px; }
.lub-map-phase:first-child { margin-top:0; }
.lub-map-row { display:flex; gap:8px; align-items:baseline; padding:3px 0; border-bottom:1px solid rgba(0,0,0,.05); font-size:11px; line-height:1.4; }
.lub-map-row:last-child { border-bottom:none; }
.lub-map-zone { flex:0 0 38%; color:var(--text); font-weight:500; }
.lub-map-oil { flex:1; color:var(--gold); font-size:11px; }
.lub-map-note { font-size:11px; color:var(--muted); padding:2px 0; font-style:italic; }

/* ─── WORKSHOP TIMER WIDGET ───────────────────────────── */
.wt-panel-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px 20px;
  max-width: 380px;
  margin: 0 auto 28px;
  text-align: center;
}
.wt-panel-card .wt-display { font-size: 72px; letter-spacing: 4px; margin-bottom: 10px; }
.wt-panel-card .wt-label   { font-size: 14px; min-height: 20px; margin-bottom: 16px; }
.wt-panel-card .wt-controls { justify-content: center; gap: 12px; }
.wt-panel-presets { max-width: 380px; margin: 0 auto; }
.wt-display { font-size:38px; font-weight:800; color:var(--gold); text-align:center; font-variant-numeric:tabular-nums; letter-spacing:2px; margin-bottom:4px; }
.wt-display.wt-done { color:#4caf50; }
.wt-progress { height:4px; background:var(--border); border-radius:2px; margin-bottom:4px; overflow:hidden; }
.wt-bar { height:100%; background:var(--gold); border-radius:2px; width:0%; transition:width .9s linear; }
.wt-label { font-size:10px; color:var(--muted); text-align:center; min-height:14px; margin-bottom:10px; }
.wt-presets { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.wt-group { display:flex; flex-direction:column; gap:3px; }
.wt-group-label { font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.wt-preset-row { display:flex; gap:4px; align-items:center; }
.wt-preset { flex:1; padding:5px 4px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; font-size:11px; font-weight:600; color:var(--text); cursor:pointer; transition:background .1s; }
.wt-preset:hover { background:var(--gold); color:#000; border-color:var(--gold); }
.wt-custom-input { width:52px; padding:5px 6px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; font-size:11px; color:var(--text); text-align:center; }
.wt-controls { display:flex; gap:6px; }
.wt-controls .p-btn { flex:1; font-size:12px; padding:6px; }
/* timer panel presets — larger targets in panel context */
.wt-panel-presets .wt-preset { padding: 10px 8px; font-size: 13px; }
.wt-panel-presets .wt-group-label { font-size: 10px; margin-top: 12px; }
.wt-panel-presets .wt-custom-input { width: 70px; font-size: 13px; padding: 8px; }

/* ─── GUIDED FAULT DIAGNOSIS ──────────────────────────── */
.guided-symp-grid { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.guided-symp-btn { padding:6px 11px; background:var(--surface2); border:1px solid var(--border); border-radius:20px; font-size:11px; color:var(--text); cursor:pointer; transition:background .12s, border-color .12s; white-space:nowrap; }
.guided-symp-btn:hover { background:rgba(212,175,55,.12); border-color:var(--gold); }
.guided-symp-btn.on { background:rgba(212,175,55,.18); border-color:var(--gold); color:var(--gold); font-weight:600; }
.gd-cat-label { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; margin-top:12px; margin-bottom:4px; }
.gd-diag-input-row { display:flex; gap:8px; margin-top:12px; align-items:center; flex-wrap:wrap; }
.gd-caliber-row { display:flex; gap:6px; align-items:center; }
.gd-caliber-label { font-size:11px; color:var(--muted); white-space:nowrap; }
/* Result card */
.gd-result-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:4px; }
.gd-result-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:12px; }
.gd-result-title { font-size:13px; font-weight:700; color:var(--text); line-height:1.4; }
.gd-caliber-tag { display:inline-block; background:rgba(212,175,55,.15); color:var(--gold); border-radius:12px; padding:1px 8px; font-size:10px; margin-left:6px; font-weight:600; }
.gd-diff-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:12px; white-space:nowrap; flex-shrink:0; margin-top:1px; }
.gd-diff-easy { background:rgba(72,199,142,.18); color:#48c78e; }
.gd-diff-med  { background:rgba(255,190,40,.18); color:#ffbe28; }
.gd-diff-hard { background:rgba(240,80,80,.18); color:#f05050; }
/* Sections */
.gd-section { margin-bottom:12px; }
.gd-section-title { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.4px; text-transform:uppercase; margin-bottom:6px; }
/* Causes */
.gd-cause-item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.gd-cause-item:last-child { border-bottom:none; }
.gd-cause-text { font-size:12px; color:var(--text); flex:1; line-height:1.4; }
.gd-prob-tag { font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; flex-shrink:0; }
.gd-prob-high { background:rgba(240,80,80,.18); color:#f05050; }
.gd-prob-med  { background:rgba(255,190,40,.18); color:#ffbe28; }
.gd-prob-low  { background:rgba(120,120,120,.2); color:var(--muted); }
/* Tools */
.gd-tools-row { font-size:11px; color:var(--muted); background:rgba(255,255,255,.04); border-radius:6px; padding:7px 10px; margin-bottom:12px; line-height:1.5; }
.gd-tools-label { font-weight:700; color:var(--text); margin-right:5px; }
/* Progress */
.gd-progress-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.gd-progress-label { font-size:11px; color:var(--muted); white-space:nowrap; }
.gd-progress-track { flex:1; height:4px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.gd-progress-fill { height:100%; background:var(--gold3); border-radius:4px; transition:width .3s ease; }
/* Steps */
.gd-steps-section { border:1px solid var(--border); border-radius:8px; padding:4px 10px; }
.gd-step-row { display:flex; gap:8px; align-items:flex-start; padding:7px 0; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.04); }
.gd-step-row:last-child { border-bottom:none; }
.gd-check { margin-top:3px; flex-shrink:0; accent-color:var(--gold); width:14px; height:14px; }
.gd-step-content { display:flex; gap:8px; align-items:flex-start; flex:1; }
.gd-step-num { font-size:11px; font-weight:700; color:var(--gold); min-width:18px; margin-top:1px; flex-shrink:0; }
.gd-step-body { flex:1; }
.gd-step-main { font-size:12px; color:var(--text); line-height:1.5; display:block; }
.gd-step-result { font-size:11px; color:var(--muted); line-height:1.4; display:block; margin-top:2px; }
.gd-step-row:has(.gd-check:checked) .gd-step-main,
.gd-step-row:has(.gd-check:checked) .gd-step-result { text-decoration:line-through; opacity:.5; }
.gd-step-text { font-size:12px; color:var(--text); line-height:1.5; }
.gd-step-row:has(.gd-check:checked) .gd-step-text { text-decoration:line-through; color:var(--muted); }
/* Fallback section rendering */
.gd-phase { font-size:10px; font-weight:700; color:var(--gold); margin-top:10px; margin-bottom:2px; letter-spacing:.5px; }
.gd-phase:first-child { margin-top:0; }
.gd-note { font-size:11px; color:var(--muted); padding:2px 0; font-style:italic; }
/* Verdict */
.gd-verdict { background:rgba(212,175,55,.08); border-left:3px solid var(--gold3); border-radius:0 6px 6px 0; padding:9px 12px; font-size:12px; color:var(--text); margin-top:12px; line-height:1.6; }
.gd-verdict-label { font-weight:700; margin-right:4px; color:var(--gold); }
/* Actions */
.gd-result-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
/* History */
.gd-hist-title { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; margin-top:20px; border-top:1px solid var(--border); padding-top:14px; }
.gd-hist-item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.gd-hist-item:last-child { border-bottom:none; }
.gd-hist-info { flex:1; min-width:0; }
.gd-hist-sym { font-size:12px; color:var(--text); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:2px; }
.gd-hist-cal { font-size:10px; color:var(--gold); font-weight:600; margin-right:8px; }
.gd-hist-time { font-size:10px; color:var(--muted); }

/* ─── STRAP REFERENCE ─────────────────────────────────── */
.strap-table { display:flex; flex-direction:column; gap:0; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.strap-thead { display:grid; grid-template-columns:1fr 1fr 1fr 2fr; gap:0; padding:8px 12px; background:var(--surface2); font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.strap-row { display:grid; grid-template-columns:1fr 1fr 1fr 2fr; gap:0; padding:9px 12px; border-top:1px solid var(--border); font-size:12px; color:var(--text); transition:background .1s; }
.strap-row:hover { background:rgba(212,175,55,.06); }
.strap-popular { background:rgba(212,175,55,.07); }
.strap-popular:hover { background:rgba(212,175,55,.13); }
.strap-lug { font-weight:700; color:var(--gold); }
.strap-mat { color:var(--muted); font-size:11px; }
.strap-ai-result { background:var(--surface2); border-radius:8px; padding:10px 12px; font-size:12px; color:var(--text); line-height:1.6; margin-top:4px; }
@media (max-width: 480px) {
  .strap-thead, .strap-row { grid-template-columns:60px 1fr 1fr; }
  .strap-mat { display:none; }
}
.manual-callout-mini {
  font-size:   11px;
  color:       var(--muted);
  background:  var(--navy2);
  border-radius: 6px;
  padding:     8px 10px;
  margin-top:  8px;
  line-height: 1.5;
}

/* Feature grid */
.manual-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.manual-feature-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       12px;
}
.manual-feature-icon  { font-size: 22px; display: block; margin-bottom: 6px; }
.manual-feature-name  { font-size: 12px; font-weight: 700; color: var(--cream); margin-bottom: 4px; }
.manual-feature-desc  { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* Keyboard shortcuts */
.manual-shortcut-table { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.manual-shortcut-row   {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   12px;
  color:       var(--text);
}
.manual-kbd {
  display:       inline-block;
  background:    var(--navy3);
  border:        1px solid var(--border2);
  border-bottom: 2px solid var(--border2);
  border-radius: 4px;
  padding:       3px 8px;
  font-size:     10px;
  font-family:   monospace;
  color:         var(--cream);
  white-space:   nowrap;
  flex-shrink:   0;
  min-width:     70px;
  text-align:    center;
}

/* Steps */
.manual-steps         { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.manual-step          { display: flex; gap: 12px; align-items: flex-start; }
.manual-step-num {
  flex-shrink:   0;
  width:         26px;
  height:        26px;
  background:    var(--gold);
  color:         #fff;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     11px;
  font-weight:   700;
  margin-top:    1px;
}
.manual-step-content { font-size: 12px; color: var(--text); line-height: 1.6; padding-top: 3px; }
.manual-step-content strong { color: var(--cream); }

/* Color guide */
.manual-color-guide { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.manual-color-card  {
  display:    flex;
  align-items: center;
  gap:        12px;
  padding:    10px 14px;
  background: var(--card);
  border:     1px solid var(--border);
  border-radius: 8px;
  font-size:  12px;
}

/* Timegrapher display */
.manual-timegrapher-display {
  background:    var(--cream);
  border:        2px solid var(--gold3);
  border-radius: 10px;
  padding:       16px;
  margin:        14px 0;
  max-width:     500px;
}
.tg-display-header {
  text-align:    center;
  font-size:     9px;
  letter-spacing: 3px;
  color:         var(--gold);
  margin-bottom: 14px;
}
.tg-readings         { display: flex; align-items: center; justify-content: center; gap: 0; }
.tg-reading          { flex: 1; text-align: center; padding: 0 8px; }
.tg-reading-val      { font-size: 28px; font-weight: 700; font-family: monospace; line-height: 1; }
.tg-reading-unit     { font-size: 10px; color: var(--navy3); margin: 2px 0; }
.tg-reading-label    { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted2, #888); }
.tg-reading-divider  { width: 1px; background: var(--gold3); height: 50px; flex-shrink: 0; opacity: 0.4; }
.tg-trace-line       {
  display:        flex;
  align-items:    center;
  gap:            4px;
  margin-top:     12px;
  justify-content: center;
}
.tg-trace-dot        { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.tg-trace-line-inner { flex: 1; max-width: 300px; height: 2px; background: linear-gradient(90deg, var(--gold) 0%, transparent 30%, var(--gold) 50%, transparent 70%, var(--gold) 100%); }

/* Value cards */
.manual-value-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.manual-value-card  {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       14px 16px;
}
.manual-value-card p         { font-size: 12px; color: var(--text); margin: 6px 0 10px; line-height: 1.6; }
.manual-value-card-title     { font-size: 13px; font-weight: 700; color: var(--cream); }
.manual-value-targets        { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.manual-target               { font-size: 11px; padding: 4px 10px; border-radius: 4px; }
.manual-target.best          { background: rgba(48, 112, 80, 0.15); color: var(--green); }
.manual-target.great         { background: rgba(48, 112, 80, 0.08); color: var(--green); }
.manual-target.good          { background: rgba(176, 128, 48, 0.1); color: var(--gold3); }
.manual-target.bad           { background: rgba(160, 40, 32, 0.1); color: var(--red); }

/* 6-position grid */
.manual-position-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.manual-pos-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       10px;
  text-align:    center;
}
.manual-pos-icon  { font-size: 22px; margin-bottom: 4px; }
.manual-pos-name  { font-size: 11px; font-weight: 700; color: var(--cream); margin-bottom: 4px; line-height: 1.3; }
.manual-pos-note  { font-size: 10px; color: var(--muted); line-height: 1.4; }

/* Problem / reference tables */
.manual-problem-table,
.manual-ref-table,
.manual-lube-table {
  border:        1px solid var(--border);
  border-radius: 8px;
  overflow:      hidden;
  margin-bottom: 14px;
  font-size:     11px;
}
.manual-problem-row,
.manual-ref-row,
.manual-lube-row {
  display: grid;
  padding: 8px 12px;
  gap:     8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.4;
}
.manual-problem-row:last-child,
.manual-ref-row:last-child,
.manual-lube-row:last-child { border-bottom: none; }
.manual-problem-row.header,
.manual-ref-row.header,
.manual-lube-row.header {
  background:     var(--navy3);
  font-weight:    700;
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          var(--gold3);
}
.manual-problem-row { grid-template-columns: 1.2fr 1.5fr 1.5fr; }
.manual-ref-row     { grid-template-columns: 2fr 1fr 1fr 1fr; }
.manual-lube-row    { grid-template-columns: .8fr 1.2fr 2fr 1fr; }
.lube-name          { font-weight: 700; color: var(--gold3); font-size: 12px; }
.manual-problem-row:not(.header):hover,
.manual-ref-row:not(.header):hover,
.manual-lube-row:not(.header):hover { background: var(--navy2); }

/* Symptom list */
.manual-symptom-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.manual-symptom {
  display:    flex;
  gap:        10px;
  align-items: flex-start;
  font-size:  12px;
  color:      var(--text);
  padding:    8px 12px;
  background: var(--card);
  border:     1px solid var(--border);
  border-radius: 6px;
}

/* Cleaning grid */
.manual-clean-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.manual-clean-card {
  padding:    12px 14px;
  border-radius: 8px;
  font-size:  11px;
  line-height: 1.6;
}
.manual-clean-card.can     { background: rgba(48,112,80,.1); border: 1px solid rgba(48,112,80,.3); color: var(--text); }
.manual-clean-card.cannot  { background: rgba(160,40,32,.08); border: 1px solid rgba(160,40,32,.25); color: var(--text); }

/* Workflow flow */
.manual-flow {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  margin:      14px 0;
  flex-wrap:   wrap;
}
.manual-flow-step {
  flex:          1;
  min-width:     100px;
  text-align:    center;
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       12px 8px;
}
.manual-flow-num   { font-size: 24px; margin-bottom: 4px; }
.manual-flow-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold3); margin-bottom: 6px; }
.manual-flow-desc  { font-size: 10px; color: var(--muted); line-height: 1.4; }
.manual-flow-arrow { font-size: 20px; color: var(--border2); align-self: center; flex-shrink: 0; }

/* Video section */
.manual-video-featured {
  background:    var(--card);
  border:        2px solid var(--gold);
  border-radius: 12px;
  padding:       16px;
  margin-bottom: 20px;
  position:      relative;
}
.manual-video-badge {
  position:      absolute;
  top:           -10px;
  left:          16px;
  background:    var(--gold);
  color:         #fff;
  font-size:     9px;
  font-weight:   700;
  letter-spacing: 1px;
  padding:       3px 10px;
  border-radius: 10px;
}
.manual-video-featured-inner { display: flex; gap: 16px; align-items: flex-start; }
.manual-video-thumb {
  flex-shrink:   0;
  width:         100px;
  height:        70px;
  background:    var(--navy3);
  border-radius: 8px;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.featured-thumb { background: linear-gradient(135deg, #1a1008 0%, #2a1810 100%); }
.manual-video-play {
  font-size:   28px;
  text-decoration: none;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: opacity .15s;
}
.manual-video-play:hover { opacity: .75; }
.manual-video-featured-info { flex: 1; }
.manual-video-tag   { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold3); margin-bottom: 4px; }
.manual-video-title { font-size: 15px; font-weight: 700; color: var(--cream); margin-bottom: 6px; }
.manual-video-desc  { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.manual-video-btn {
  display:       inline-block;
  background:    var(--gold);
  color:         #fff;
  font-size:     11px;
  font-weight:   700;
  padding:       6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition:    opacity .15s;
}
.manual-video-btn:hover { opacity: .8; }
.manual-video-link {
  display:     inline-block;
  margin-top:  6px;
  color:       var(--gold);
  font-weight: 700;
  font-size:   12px;
  text-decoration: none;
}
.manual-video-link:hover { text-decoration: underline; }

/* Video grid */
.manual-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.manual-video-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       12px;
  display:       flex;
  flex-direction: column;
  gap:           6px;
}
.manual-video-card-header  {}
.manual-video-cat-badge {
  font-size:   9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background:  var(--navy3);
  color:       var(--gold3);
  padding:     2px 7px;
  border-radius: 4px;
}
.manual-video-card-title { font-size: 12px; font-weight: 700; color: var(--cream); line-height: 1.3; }
.manual-video-card-desc  { font-size: 11px; color: var(--muted); line-height: 1.5; flex: 1; }
.manual-link-btn {
  display:       inline-block;
  background:    var(--navy3);
  border:        1px solid var(--border2);
  color:         var(--gold3);
  font-size:     10px;
  font-weight:   700;
  padding:       5px 10px;
  border-radius: 5px;
  text-decoration: none;
  align-self:    flex-start;
  transition:    all .15s;
}
.manual-link-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

/* ─── RESOURCE DIRECTORY ──────────────────────────────── */
.res-filter-nav {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin:    12px 0 16px;
}
.res-filter-btn {
  background:    var(--navy3);
  border:        1px solid var(--border2);
  color:         var(--muted);
  font-size:     11px;
  font-weight:   600;
  padding:       5px 11px;
  border-radius: 20px;
  cursor:        pointer;
  transition:    all .15s;
}
.res-filter-btn:hover  { border-color: var(--gold3); color: var(--gold3); }
.res-filter-btn.active { background: var(--gold3); border-color: var(--gold3); color: #fff; }

.res-section       { margin-bottom: 6px; }
.res-section-hdr {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--gold3);
  padding:        8px 0 6px;
  border-bottom:  1px solid var(--border);
  margin-bottom:  8px;
}
.res-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   8px;
  margin-bottom:         6px;
}
.res-grid-tight {
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 5px;
}
.res-card,
a.res-card {
  background:      var(--card);
  border:          1px solid var(--border);
  border-left:     3px solid var(--border2);
  border-radius:   8px;
  padding:         10px 13px;
  display:         flex;
  flex-direction:  column;
  gap:             5px;
  text-decoration: none !important;
  color:           var(--text) !important;
  transition:      border-color .15s, background .15s, box-shadow .15s;
  box-shadow:      0 1px 3px rgba(0,0,0,.06);
}
a.res-card:hover,
.res-card:hover {
  border-left-color: var(--gold3);
  background:        var(--surface);
  box-shadow:        0 2px 8px rgba(0,0,0,.10);
}
.res-card.res-starred,
a.res-card.res-starred { border-left-color: var(--gold2); }
.res-card.res-no-link { cursor: default; opacity: .75; }
.res-card.res-no-link:hover { border-left-color: var(--border2); background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.res-card-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.res-card-name { font-size: 12px; font-weight: 700; color: var(--cream) !important; line-height: 1.3; }
.res-card-desc { font-size: 11px; color: var(--muted) !important; line-height: 1.5; }
.res-star { font-size: 11px; color: var(--gold2) !important; line-height: 1; font-weight: 700; }

/* Compact single-row card */
.res-card.res-compact,
a.res-card.res-compact {
  flex-direction: row;
  align-items:    center;
  gap:            7px;
  padding:        7px 10px;
}
.res-compact-name { font-size: 11px; font-weight: 600; color: var(--cream) !important; }

/* Category badges */
.res-badge {
  font-size:      8px;
  font-weight:    700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding:        2px 6px;
  border-radius:  3px;
  white-space:    nowrap;
  flex-shrink:    0;
}
.badge-yt       { background: rgba(200,50,50,.15); color: #c83232; border: 1px solid rgba(200,50,50,.3); }
.badge-forum    { background: rgba(50,80,180,.12); color: #3050b8; border: 1px solid rgba(50,80,180,.3); }
.badge-reddit   { background: rgba(210,90,30,.12); color: #d25a1e; border: 1px solid rgba(210,90,30,.3); }
.badge-org      { background: rgba(176,128,48,.15); color: var(--gold3); border: 1px solid rgba(176,128,48,.3); }
.badge-db       { background: rgba(60,130,100,.12); color: #3a8060; border: 1px solid rgba(60,130,100,.3); }
.badge-fb       { background: rgba(60,100,180,.12); color: #3c64b4; border: 1px solid rgba(60,100,180,.3); }
.badge-discord  { background: rgba(90,80,200,.12); color: #5a50c8; border: 1px solid rgba(90,80,200,.3); }
.badge-tg       { background: rgba(30,160,200,.12); color: #1ea0c8; border: 1px solid rgba(30,160,200,.3); }
.badge-regional { background: rgba(80,140,80,.12);  color: #508c50; border: 1px solid rgba(80,140,80,.3); }

/* Reference quick table */
.manual-quick-table {
  border:        1px solid var(--border);
  border-radius: 8px;
  overflow:      hidden;
  margin-bottom: 14px;
  font-size:     11px;
}
.manual-quick-row {
  display:       grid;
  padding:       7px 12px;
  gap:           8px;
  border-bottom: 1px solid var(--border);
  color:         var(--text);
  line-height:   1.4;
  align-items:   center;
}
.manual-quick-row:last-child  { border-bottom: none; }
.manual-quick-row.header      { background: var(--navy3); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold3); }
.manual-quick-row:not(.header):hover { background: var(--navy2); }
.manual-quick-row.mov-row     { grid-template-columns: 1.6fr 1fr 1fr .8fr 1fr; }
.manual-quick-row.bph-row     { grid-template-columns: 2fr 1fr 1fr; }
.mqr-name  { font-weight: 600; color: var(--cream); }
.mqr-good  { color: var(--green); font-weight: 600; }
.mqr-warn  { color: var(--gold); font-weight: 600; }
.mqr-bad   { color: var(--red); font-weight: 600; }

/* ── Mobile manual section picker ───────────────────────── */
.mob-manual-bar { display: none; }

@media (max-width: 640px) {
  .manual-toc    { display: none !important; }
  .manual-container { flex-direction: column; }

  .mob-manual-bar {
    display: block;
    position: sticky; top: 52px; z-index: 10;
    padding: 8px 0 10px;
    background: var(--navy);
    border-bottom: 1px solid var(--border2);
    box-shadow: 0 2px 10px rgba(30,22,8,0.15);
    margin-bottom: 8px;
  }
  #mobileManualSelect {
    width: 100%; box-sizing: border-box;
    padding: 14px 42px 14px 16px;
    font-size: 16px; font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background-color: var(--surface);
    border: 2px solid var(--gold3);
    border-radius: 10px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a6020' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer; min-height: 54px;
  }
  #mobileManualSelect:focus { outline: none; border-color: var(--gold); }

  .manual-content { padding-top: 0; }
  .manual-position-grid  { grid-template-columns: repeat(2, 1fr); }
  .manual-clean-grid     { grid-template-columns: 1fr; }
  .manual-problem-row    { grid-template-columns: 1fr 1fr; }
  .manual-problem-row > div:last-child { grid-column: 1/-1; color: var(--muted); }
  .manual-flow           { gap: 4px; }
  .manual-flow-arrow     { font-size: 14px; }
  .manual-video-featured-inner { flex-direction: column; }
  .manual-lube-row       { grid-template-columns: 1fr 1fr; }
  .manual-lube-row > div:nth-child(3), .manual-lube-row > div:last-child { grid-column: 1/-1; }
  .manual-ref-row        { grid-template-columns: 2fr 1fr; }
  .manual-ref-row > div:nth-child(3), .manual-ref-row > div:last-child { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   TOOL SUPPLIER LINKS
   ═══════════════════════════════════════════════════════════ */
.tool-supplier-link {
  color:           var(--gold3);
  text-decoration: none;
  font-size:       10px;
  border-bottom:   1px dotted var(--gold3);
  transition:      color .15s;
}
.tool-supplier-link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   PARTNERS PANEL
   ═══════════════════════════════════════════════════════════ */
/* ─── SETTINGS PANEL ─────────────────────────────────────── */
.settings-form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }
.settings-group { display: flex; flex-direction: column; gap: 5px; }
.settings-separator { border-top: 1px solid var(--border2); margin: 8px 0; }

.partner-section-title {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--gold3);
  margin:         22px 0 10px;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--border);
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.partner-card {
  background:    var(--card);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       14px 16px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
  transition:    border-color .15s, background .15s;
}
.partner-card:hover { border-color: var(--gold3); background: var(--surface); }
.partner-featured {
  border-color:  var(--gold);
  border-width:  2px;
  background:    var(--surface);
}
.partner-card-top {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.partner-icon {
  font-size:   26px;
  flex-shrink: 0;
  line-height: 1;
}
.partner-name     { font-size: 14px; font-weight: 700; color: var(--cream); line-height: 1.2; }
.partner-subtitle { font-size: 10px; color: var(--muted); margin-top: 2px; }
.partner-badge {
  margin-left:   auto;
  font-size:     9px;
  font-weight:   700;
  letter-spacing: .5px;
  padding:       3px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  flex-shrink:   0;
  background:    var(--navy3);
  color:         var(--gold3);
  border:        1px solid var(--border);
}
.partner-badge-b2b     { background: rgba(80,64,160,.12); color: var(--purple); border-color: rgba(80,64,160,.3); }
.partner-badge-primary { background: rgba(48,112,80,.12); color: var(--green);  border-color: rgba(48,112,80,.3); }
.partner-badge-pro     { background: rgba(176,128,48,.12); color: var(--gold);  border-color: rgba(176,128,48,.3); }
.partner-desc {
  font-size:   12px;
  color:       var(--text);
  line-height: 1.6;
}
.partner-tags  { display: flex; flex-wrap: wrap; gap: 4px; }
.partner-tag   {
  font-size:     9px;
  padding:       2px 7px;
  background:    var(--navy3);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--muted);
  letter-spacing: .3px;
}
.partner-links { display: flex; flex-wrap: wrap; gap: 6px; }
.partner-btn {
  font-size:     11px;
  font-weight:   600;
  padding:       5px 12px;
  border-radius: 6px;
  text-decoration: none;
  background:    var(--navy3);
  border:        1px solid var(--border2);
  color:         var(--gold3);
  transition:    all .15s;
  white-space:   nowrap;
}
.partner-btn:hover        { background: var(--gold3); color: #fff; border-color: var(--gold3); }
.partner-btn-primary      { background: var(--gold); color: #fff; border-color: var(--gold); }
.partner-btn-primary:hover { background: var(--gold2); border-color: var(--gold2); color: #fff; }

@media (max-width: 640px) {
  .partner-grid { grid-template-columns: 1fr; }
}

/* ─── MANUAL PRICING TEMPLATES ─── */
.manual-template-box {
  margin-top:    8px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-left:   3px solid var(--gold3);
  padding:       12px 14px;
  font-size:     12px;
  color:         var(--text);
  line-height:   1.8;
  font-family:   'DM Sans', sans-serif;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — MANUAL, TOOLS, PARTS IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

/* Manual hero: compact on small screens */
@media (max-width: 640px) {
  .manual-section-hero  { padding: 12px 14px; gap: 12px; }
  .manual-hero-icon     { font-size: 26px; }
  .manual-section-title { font-size: 16px; }

  /* Steps: tighter padding */
  .manual-step          { padding: 10px 12px; gap: 10px; }
  .manual-step-num      { width: 24px; height: 24px; font-size: 11px; flex-shrink: 0; }
  .manual-step-content  { font-size: 12px; }

  /* Callouts: tighter */
  .manual-callout       { padding: 10px 12px; gap: 10px; }
  .manual-callout-icon  { font-size: 16px; }

  /* Sub-headings */
  .manual-sub-title     { font-size: 11px; }

  /* Timegrapher display: compact */
  .manual-timegrapher-display { padding: 12px 10px; }
  .tg-display-header    { font-size: 9px; }
  .tg-readings          { gap: 0; }
  .tg-reading-val       { font-size: 22px; }
  .tg-reading-label     { font-size: 7px; }

  /* Reference tables: 2-col layout, hide extra cols */
  .manual-quick-row.bph-row                    { grid-template-columns: 1fr auto auto; }
  .manual-quick-row.mov-row                    { grid-template-columns: 1fr auto; }
  .manual-quick-row.mov-row > div:nth-child(3),
  .manual-quick-row.mov-row > div:nth-child(4) { display: none; }

  /* Lubrication table: 2 col */
  .manual-lube-row                             { grid-template-columns: 1fr 1fr; font-size: 11px; }
  .manual-lube-row > div:nth-child(3)          { grid-column: 1/-1; }
  .manual-lube-row > div:last-child            { grid-column: 1/-1; color: var(--muted); }

  /* Position grid: 2-col stays but smaller cards */
  .manual-pos-card      { padding: 10px 8px; }
  .manual-pos-icon      { font-size: 20px; }
  .manual-pos-name      { font-size: 11px; }
  .manual-pos-note      { font-size: 10px; }

  /* Value cards */
  .manual-value-card    { padding: 12px; }
  .manual-value-card p  { font-size: 11px; }
  .manual-target        { font-size: 10px; padding: 4px 8px; }
  .manual-callout-mini  { font-size: 10px; }

  /* Video grid: 1 column */
  .manual-video-grid    { grid-template-columns: 1fr; }
  .manual-video-card    { padding: 12px; }
  .res-grid             { grid-template-columns: 1fr 1fr; }
  .res-grid-tight       { grid-template-columns: 1fr 1fr; }
  .res-filter-nav       { gap: 4px; }
  .res-filter-btn       { font-size: 10px; padding: 4px 8px; }

  /* Flow diagram: more compact */
  .manual-flow-step     { padding: 8px 6px; min-width: 0; }
  .manual-flow-num      { font-size: 18px; }
  .manual-flow-label    { font-size: 9px; }
  .manual-flow-desc     { font-size: 9px; display: none; }

  /* Clean grid: already 1-col via 640 rule */
  .manual-clean-card    { padding: 10px 12px; font-size: 11px; }

  /* TOC: slightly tighter on small screens, keeps pill shape from 640px block */
  .manual-toc-item      { font-size: 10px; padding: 6px 11px; }

  /* Tools budget grid: single column */
  .tools-budget-grid    { grid-template-columns: 1fr; }

  /* Tool cards: ensure full width */
  #toolsGrid .part-card { padding: 14px 12px; }

  /* Tools filter bars: horizontal scroll  */
  .tbc-filters          { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tbc-filters::-webkit-scrollbar { display: none; }
}

/* Fault search mobile */
@media (max-width: 640px) {
  .fault-search-row   { flex-direction: column; align-items: stretch; gap: 6px; }
  .fault-count-label  { text-align: center; }
  .fault-cause-links  { flex-direction: column; }
  .fault-search-btn   { width: 100%; text-align: center; justify-content: center; min-height: 38px; }
  .fault-header       { padding: 12px 14px; }
  .fault-symptom      { font-size: 12px; }
  .manual-template-box { font-size: 11px; line-height: 1.7; }
}

/* Very small phones */
@media (max-width: 400px) {
  .tg-reading-val       { font-size: 18px; }
  .tg-reading-divider   { height: 36px; }
  .manual-position-grid { grid-template-columns: 1fr; }
  .compat-part-chip     { font-size: 11px; padding: 7px 10px; }
}

/* ══════════════════════════════════════════
   INVENTARI
══════════════════════════════════════════ */
.inv-low-banner {
  background: #fff3cd;
  border: 1px solid #e0a800;
  color: #7a5600;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.inv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s;
}
.inv-card:hover { border-color: var(--gold); }
.inv-card.inv-low  { border-color: #e0a800; background: #fffdf0; }
.inv-card.inv-out  { border-color: var(--red); background: #fff5f5; }

.inv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.inv-cat-badge {
  font-size: 11px;
  background: var(--navy3);
  color: var(--cream2);
  border-radius: 20px;
  padding: 2px 9px;
  font-weight: 600;
  letter-spacing: .3px;
}

.inv-status-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: .5px;
}
.inv-status-low { background: #fff3cd; color: #7a5600; }
.inv-status-out { background: #fde8e8; color: var(--red); }

.inv-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.3;
}

.inv-meta {
  font-size: 12px;
  color: var(--muted);
}
.inv-notes-text { font-style: italic; }

.inv-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
}

.inv-qty-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--navy2);
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.inv-qty-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }

.inv-qty-display {
  font-size: 20px;
  font-weight: 800;
  color: var(--cream);
  min-width: 60px;
  text-align: center;
}
.inv-qty-low { color: #b07700; }
.inv-qty-out { color: var(--red); }

.inv-min-label {
  font-size: 11px;
  color: var(--muted);
}

.inv-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ══════════════════════════════════════════
   KALKULUESI
══════════════════════════════════════════ */
.calc-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
}

.calc-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}

.calc-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 12px;
}

.calc-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc-part-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.calc-result-box {
  background: var(--navy2);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 18px 20px;
}

.calc-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
}
.calc-result-row:last-of-type { border-bottom: none; }

.calc-result-grand {
  font-size: 20px;
  font-weight: 800;
  color: var(--gold);
  padding: 10px 0 0;
  border-bottom: none !important;
}

/* ══════════════════════════════════════════
   PARTNER NOTES
══════════════════════════════════════════ */
.partner-note-section {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.partner-note-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
  transition: color .15s;
}
.partner-note-toggle:hover { color: var(--gold); }
.partner-note-toggle.has-note { color: var(--gold3); font-weight: 700; }

.partner-note-body {
  display: none;
  margin-top: 6px;
}
.partner-note-body.open { display: block; }

.partner-note-ta {
  width: 100%;
  min-height: 70px;
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  resize: vertical;
  font-family: inherit;
}
.partner-note-ta:focus { outline: none; border-color: var(--gold); }

/* ══════════════════════════════════════════
   POROSITË (PARTS ORDER TRACKER)
══════════════════════════════════════════ */
.orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.ord-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: border-color .15s;
}
.ord-card:hover { border-color: var(--gold); }
.ord-card.ord-late { border-color: var(--red); background: #fff5f5; }

.ord-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.ord-part-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.3;
}

.ord-supplier {
  font-size: 12px;
  color: var(--muted);
}

.ord-status-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ord-status-pending   { background: #fff3cd; color: #7a5600; }
.ord-status-arrived   { background: #d4edda; color: #1a5928; }
.ord-status-cancelled { background: var(--navy3); color: var(--muted); }

.ord-meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.ord-dates {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.ord-notes {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  border-left: 2px solid var(--border);
  padding-left: 8px;
}

.ord-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ══════════════════════════════════════════
   FOTO PER PUNË (JOB PHOTOS)
══════════════════════════════════════════ */
.job-photo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.job-photo-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--gold);
  cursor: pointer;
  transition: transform .15s;
}
.job-photo-preview:hover { transform: scale(1.05); }

.job-photo-placeholder {
  width: 80px;
  height: 80px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  padding: 4px;
  transition: border-color .15s, color .15s;
}
.job-photo-placeholder:hover { border-color: var(--gold); color: var(--gold); }

.job-photo-thumb {
  font-size: 18px;
  cursor: pointer;
  opacity: .8;
  transition: opacity .15s, transform .15s;
  line-height: 1;
}
.job-photo-thumb:hover { opacity: 1; transform: scale(1.15); }

/* ══════════════════════════════════════════
   KALKULUES KRISTALI
══════════════════════════════════════════ */
.crystal-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
}

.crystal-mode-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.crystal-mode-section { }

.crystal-input {
  font-size: 22px;
  font-weight: 700;
  width: 130px;
  text-align: center;
  letter-spacing: 1px;
}

.crystal-results {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 8px;
}

.crystal-result-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.crystal-result-row:last-child { border-bottom: none; }

.crystal-result-type  { font-weight: 600; color: var(--cream); }
.crystal-result-range { font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.crystal-result-sizes { font-size: 11px; color: var(--muted); }
.crystal-result-note  { font-size: 11px; color: var(--muted); text-align: right; }

.crystal-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 4px;
}
.crystal-guide-table th {
  background: var(--navy3);
  color: var(--cream2);
  padding: 7px 10px;
  text-align: left;
  font-size: 11px;
  letter-spacing: .5px;
}
.crystal-guide-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.crystal-guide-table tr:last-child td { border-bottom: none; }
.crystal-guide-table tr:nth-child(even) td { background: var(--navy2); }

@media (max-width: 500px) {
  .crystal-result-row { grid-template-columns: 1fr 1fr; }
  .crystal-result-note { display: none; }
}

/* ═══ EXPENSE TRACKER ═══ */
.expense-summary-bar {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.exp-summary-total { font-weight: 700; font-size: 15px; color: var(--cream2); margin-right: 6px; }
.exp-summary-cats  { display: flex; flex-wrap: wrap; gap: 6px; }

.expenses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.expense-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exp-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.exp-amount  { font-size: 18px; font-weight: 700; color: var(--cream2); }
.exp-desc    { font-size: 14px; font-weight: 600; color: var(--text); }
.exp-meta    { font-size: 12px; color: var(--muted); }
.exp-actions { display: flex; gap: 6px; margin-top: 6px; }

.expense-cat-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--navy3);
  color: var(--cream2);
}
.expense-cat-badge.tools    { background: #3b6ca8; color: #e8f0ff; }
.expense-cat-badge.parts    { background: #5a7a3a; color: #e8f4e0; }
.expense-cat-badge.fixed    { background: #8a6020; color: #f8f0e0; }
.expense-cat-badge.shipping { background: #6040a0; color: #ede8ff; }
.expense-cat-badge.other    { background: var(--navy4); color: var(--cream2); }

/* ═══ LUBE GUIDE ═══ */
.lube-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lube-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.lube-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  transition: background .15s;
}
.lube-card-header:hover { background: var(--navy2); }

.lube-card-title  { display: flex; flex-direction: column; gap: 2px; }
.lube-ref         { font-size: 15px; font-weight: 700; color: var(--cream2); }
.lube-brand-type  { font-size: 12px; color: var(--muted); }
.lube-toggle-icon { font-size: 12px; color: var(--muted); transition: transform .2s; }

.lube-card-body {
  display: none;
  padding: 0 16px 14px;
}
.lube-card.open .lube-card-body   { display: block; }
.lube-card.open .lube-toggle-icon { transform: rotate(180deg); }

.lube-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.lube-points-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 10px;
}
.lube-points-table th {
  background: var(--navy3);
  color: var(--cream2);
  padding: 7px 10px;
  text-align: left;
  font-size: 11px;
  letter-spacing: .4px;
}
.lube-points-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.lube-points-table tr:last-child td { border-bottom: none; }
.lube-points-table tr:nth-child(even) td { background: var(--navy2); }

.lube-oil-badge {
  display: inline-block;
  background: var(--gold3);
  color: #fff8e8;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: .5px;
}

/* ═══ INTERCHANGE ═══ */
.interchange-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.interchange-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ic-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.ic-ref  { font-size: 15px; font-weight: 700; color: var(--cream2); }
.ic-meta { font-size: 12px; color: var(--muted); }

.ic-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ic-table th {
  background: var(--navy3);
  color: var(--cream2);
  padding: 7px 12px;
  text-align: left;
  font-size: 11px;
  letter-spacing: .4px;
}
.ic-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ic-table tr:last-child td { border-bottom: none; }
.ic-table tr:nth-child(even) td { background: var(--navy2); }

.fit-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.fit-dropin  { background: #307050; color: #e8f8f0; }
.fit-approx  { background: #9a7020; color: #fdf5e0; }
.fit-no      { background: #a02820; color: #fde8e8; }

/* ═══ CONDITION BADGE ═══ */
.job-condition-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-left: 4px;
}
.cond-mint  { background: #307050; color: #e8f8f0; }
.cond-vg    { background: #3b6ca8; color: #e8f0ff; }
.cond-good  { background: #9a7020; color: #fdf5e0; }
.cond-fair  { background: #b06018; color: #fff3e8; }
.cond-poor  { background: #a02820; color: #fde8e8; }

.job-test-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.job-test-badge { font-size: 10px; background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 2px 7px; color: var(--muted); }

/* ═══ TIMEGRAPHER LOG FIELDS ═══ */
.tg-log-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 4px;
}
.tg-log-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 80px;
}
.tg-log-label {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tg-log-input {
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  width: 100%;
}
.tg-log-input:focus { outline: none; border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMISATIONS — all panels  (≤ 640px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Inventory ──────────────────────────────────────────── */
  .inv-grid { grid-template-columns: 1fr; gap: 10px; }
  .inv-qty-btn { width: 44px; height: 44px; font-size: 20px; }
  .inv-qty-display { font-size: 22px; }
  .inv-actions { gap: 8px; }
  .inv-actions .p-btn { flex: 1; text-align: center; }
  /* Two-col card header for cat + status badges */
  .inv-card-top { flex-wrap: wrap; gap: 4px; }
  /* Cat filter bar horizontal scroll */
  .inv-cat-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .inv-cat-bar::-webkit-scrollbar { display: none; }

  /* ── Calculator ─────────────────────────────────────────── */
  .calc-container { max-width: 100%; }
  .calc-section   { padding: 14px 12px; }
  .calc-part-row  { flex-wrap: wrap; gap: 6px; }
  .calc-part-row input     { flex: 1; min-width: 100px; }
  .calc-part-row .p-btn    { flex-shrink: 0; }
  .calc-result-row { font-size: 13px; }
  .calc-result-grand { font-size: 16px; }
  /* Repair type select full width */
  #calcRepairType { width: 100%; }
  /* Action buttons full width */
  #calcActionRow  { flex-direction: column; gap: 8px; }
  #calcActionRow .p-btn { width: 100%; text-align: center; }

  /* ── Orders ─────────────────────────────────────────────── */
  .orders-grid { grid-template-columns: 1fr; gap: 10px; }
  .ord-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .ord-actions .p-btn { flex: 1; text-align: center; min-width: 80px; }
  /* Order filter pills horizontal scroll */
  .ord-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .ord-filter-bar::-webkit-scrollbar { display: none; }

  /* ── Crystal Calculator ──────────────────────────────────── */
  .crystal-container { max-width: 100%; }
  .crystal-mode-toggle { gap: 6px; }
  .crystal-mode-toggle .p-btn { flex: 1; text-align: center; }
  .crystal-input { font-size: 20px; width: 110px; }
  .crystal-result-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .crystal-result-note { display: none; }
  .crystal-guide-table { font-size: 11px; display: block; overflow-x: auto; }

  /* ── Expense Tracker ─────────────────────────────────────── */
  .expenses-grid { grid-template-columns: 1fr; gap: 10px; }
  .expense-summary-bar { flex-direction: column; gap: 6px; padding: 10px 12px; }
  .exp-summary-cats { gap: 5px; }
  .exp-actions { flex-wrap: wrap; gap: 6px; }
  .exp-actions .p-btn { flex: 1; text-align: center; }
  /* Expense cat filter horizontal scroll */
  .exp-cat-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .exp-cat-filter-bar::-webkit-scrollbar { display: none; }
  /* Month + search row stack vertically */
  #expenseMonthFilter { width: 100%; }

  /* ── Lube Guide ──────────────────────────────────────────── */
  .lube-grid { gap: 8px; }
  .lube-card-header { padding: 14px 12px; min-height: 56px; }
  .lube-ref { font-size: 14px; }
  /* Table: horizontal scroll */
  .lube-card-body { padding: 0 10px 12px; }
  .lube-points-table { min-width: 480px; }

  /* ── Interchange ─────────────────────────────────────────── */
  .interchange-grid { gap: 10px; }
  .ic-header { padding: 12px 12px; flex-wrap: wrap; gap: 6px; }
  .ic-ref { font-size: 14px; }
  /* Table: horizontal scroll */
  .ic-table { min-width: 400px; }

  /* ── Job Form — new fields ───────────────────────────────── */
  /* Timegrapher rows: stack to 1 column on very small screens */
  .tg-log-row { gap: 6px; }
  .tg-log-field { min-width: 0; flex: 1 1 calc(33% - 6px); }
  /* Photo placeholder: bigger tap target */
  .job-photo-placeholder { min-height: 80px; font-size: 14px; }
  .job-photo-preview { max-height: 160px; }

  /* ── Job Cards — condition + timegrapher mini ────────────── */
  .job-condition-badge { font-size: 9px; padding: 2px 6px; }
  .tg-mini { font-size: 10px; }

  /* ── Partners ────────────────────────────────────────────── */
  .partner-btns { flex-wrap: wrap; gap: 6px; }
  .partner-btns .partner-btn { flex: 1; text-align: center; min-width: 90px; }

  /* ── Section headers: new panels ───────────────────────────── */
  #panel-expenses .section-hdr,
  #panel-lube .section-hdr,
  #panel-interchange .section-hdr { flex-direction: column; align-items: flex-start; gap: 8px; }
  #panel-expenses .section-hdr button,
  #panel-inventory .section-hdr button { width: 100%; text-align: center; }

  /* ── Inventory form overlay ─────────────────────────────── */
  #invOverlay .job-form-grid { grid-template-columns: 1fr; }

  /* ── Order form overlay ─────────────────────────────────── */
  #orderOverlay .job-form-grid { grid-template-columns: 1fr; }

  /* ── Expense form overlay ───────────────────────────────── */
  #expenseOverlay .job-form-grid { grid-template-columns: 1fr; }
}

/* ── Very small phones (≤ 400px) ─────────────────────────── */
@media (max-width: 400px) {
  .tg-log-row       { flex-direction: column; }
  .tg-log-field     { flex: unset; width: 100%; }
  .crystal-input    { font-size: 18px; width: 100px; }
  .lube-points-table { min-width: 420px; }
  .ic-table          { min-width: 340px; }
  .exp-card-top      { flex-direction: column; align-items: flex-start; gap: 4px; }
  .exp-amount        { font-size: 15px; }
}

/* ── Tablet (≤ 900px, > 640px) ──────────────────────────── */
@media (max-width: 900px) and (min-width: 641px) {
  .expenses-grid  { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .orders-grid    { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .inv-grid       { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .interchange-grid, .lube-grid { gap: 10px; }
  .crystal-container { max-width: 100%; }
}

/* ═══ MOBILE TOUCH FIX ═══════════════════════════════════════
   touch-action:manipulation removes the 300ms tap delay.
   cursor:pointer is required on iOS for click to fire on
   non-button/anchor elements (spans, divs with data-action).
   IMPORTANT: only target leaf interactive elements — never
   overlay or container divs, or their display gets broken.
   ══════════════════════════════════════════════════════════ */

/* Leaf interactive elements that need iOS click fix */
.job-status-pill,
.f-btn,
.p-btn,
.fav-btn,
.pin-btn,
.ref-copy-btn,
.lr-card,
.mov-card,
.site-card,
.partner-card,
.bat-row,
.log-row,
.customer-row,
.customer-detail-job,
.svc-del-btn,
.ai-copy-btn,
.popup-close,
.manual-toc-item,
.mbn-item,
.tab-pill,
.cousins-btn,
.fault-item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 44px minimum touch targets on mobile — only small controls */
@media (max-width: 900px) {
  .job-status-pill { min-height: 44px; min-width: 44px; font-size: 20px; }
  .fav-btn, .pin-btn, .ref-copy-btn, .svc-del-btn, .chk-del { min-height: 36px; min-width: 36px; }
  .f-btn  { min-height: 44px; padding: 8px 12px; }
  .p-btn  { min-height: 44px; padding: 8px 14px; }
  .popup-close { min-height: 44px; min-width: 44px; }
  .mbn-item    { min-height: 52px; }
}

/* ═══ LOCAL SEARCH RESULTS ═══════════════════════════════ */
.local-results {
  margin-bottom: 20px;
  border: 1px solid var(--gold3);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.lr-title {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold3);
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--border);
}
.lr-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  cursor: pointer;
}
.lr-card:last-child  { border-bottom: none; }
.lr-card:hover, .lr-card:active { background: rgba(200,160,70,0.07); }
.lr-type  { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); flex-shrink: 0; min-width: 36px; }
.lr-name  { flex: 1; font-size: 13px; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-badge { font-size: 10px; color: var(--gold3); white-space: nowrap; }

/* ═══ BATCH ACTION BAR ═══════════════════════════════════ */
.batch-action-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(200,160,70,0.08);
  border: 1px solid var(--gold3);
  border-radius: 8px;
  margin-bottom: 10px;
  position: sticky;
  top: 52px;
  z-index: 15;
}
.batch-count {
  font-size: 12px;
  color: var(--gold);
  font-weight: 500;
  margin-right: 4px;
}

/* ═══ JOB SELECT CHECKBOX ════════════════════════════════ */
.job-select-cb {
  width:  22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
  touch-action: manipulation;
}

/* Highlight selected job cards */
.job-card:has(.job-select-cb:checked) {
  border-left-color: var(--gold);
  background: rgba(200,160,70,0.06);
}

@media (max-width: 640px) {
  .batch-action-bar { gap: 4px; padding: 6px 8px; }
  .batch-action-bar .p-btn { font-size: 10px !important; padding: 5px 8px !important; }
}

/* ═══ OFFLINE BANNER ══════════════════════════════════════ */
#offlineBanner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9990;
  background: #a02820;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 7px 16px;
  letter-spacing: 0.3px;
  transition: transform 0.25s ease;
  transform: translateY(-100%);
}
#offlineBanner.visible {
  display: block;
  transform: translateY(0);
}

/* ═══ DESKTOP-ONLY HEADER BUTTONS ════════════════════════ */
@media (max-width: 640px) { .btn-desktop-only { display: none !important; } }

/* ═══ JOB AGING BADGES ════════════════════════════════════ */
.job-aging-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  color: var(--muted);
  white-space: nowrap;
}
.job-aging-badge.aging-yellow { background: rgba(176,128,48,0.15); color: var(--gold3); }
.job-aging-badge.aging-red    { background: rgba(160,40,32,0.12);  color: var(--red);   }

/* Subtle card tint for aging */
.job-aging-yellow { border-left: 3px solid var(--gold); }
.job-aging-red    { border-left: 3px solid var(--red);  }

/* ═══ ACTION TOAST ════════════════════════════════════════ */
.toast-action {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--green);
}
.toast-action-msg { flex: 1; }

/* ═══ UNDO TOAST ══════════════════════════════════════════ */
.toast-undo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  color: var(--navy);
  border: 1px solid var(--gold3);
}
.toast-undo-msg { flex: 1; }
.toast-undo-btn {
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  flex-shrink: 0;
}

/* ═══ PULL-TO-REFRESH INDICATOR ══════════════════════════ */
.ptr-indicator {
  position: sticky;
  top: 0;
  z-index: 50;
  text-align: center;
  font-size: 12px;
  color: var(--gold3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.ptr-indicator.visible { opacity: 1; }

/* ═══ DASHBOARD PANEL ════════════════════════════════════ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.dash-card-icon { font-size: 22px; margin-bottom: 6px; }
.dash-card-val  { font-size: 22px; font-weight: 700; color: var(--cream); }
.dash-card-label{ font-size: 11px; color: var(--muted); margin-top: 2px; }
.dash-info      { border-left: 3px solid var(--gold); }
.dash-ok        { border-left: 3px solid var(--green); }
.dash-danger    { border-left: 3px solid var(--red);   }
.dash-warn      { border-left: 3px solid var(--gold3); }
.dash-revenue   { border-left: 3px solid var(--green); }
.dash-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold3);
  margin: 16px 0 8px;
  font-weight: 600;
}
.dash-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.dash-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
}
.dash-list-row:active { background: rgba(200,160,70,0.07); }
.dash-list-icon  { flex-shrink: 0; }
.dash-list-name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list-meta  { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ═══ JOB DATE RANGE ROW ══════════════════════════════════ */
#jobDateFrom, #jobDateTo {
  font-size: 12px;
  height: 36px;
}

/* ═══ CUSTOMER LOYALTY TAGS ══════════════════════════════ */
.cust-loyalty {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 2px;
}
.cust-vip     { background: rgba(176,128,48,0.18); color: var(--gold3); }
.cust-regular { background: rgba(48,112,80,0.15);  color: var(--green); }
.cust-new     { background: rgba(80,64,160,0.12);  color: var(--purple); }

/* Inv usage last entry */
.inv-usage-last {
  font-size: 10px;
  color: var(--muted);
  font-style: italic;
}

/* ═══ MOVEMENT COMPARISON ════════════════════════════════ */
#cmpIndicator {
  position: fixed;
  bottom: calc(var(--mbn-h, 64px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--gold2);
  border-radius: 24px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold3);
  z-index: 900;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  white-space: nowrap;
}
#cmpIndicator button {
  background: var(--gold2);
  color: var(--bg);
  border: none;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
#cmpIndicator button:disabled { opacity: 0.4; cursor: default; }
#cmpIndicator button:last-child { background: transparent; color: var(--muted); font-size: 14px; padding: 2px 6px; }

.cmp-popup { max-width: 600px; width: 96vw; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; }
.cmp-body  { overflow-y: auto; padding: 12px 16px 16px; flex: 1; }

.cmp-heads { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.cmp-head-label { font-size: 11px; color: var(--muted); }
.cmp-head-m { font-size: 14px; font-weight: 700; color: var(--gold3); text-align: center; background: var(--surface2); border-radius: 8px; padding: 6px 4px; }

.cmp-compat-note { font-size: 12px; padding: 7px 10px; border-radius: 8px; margin-bottom: 10px; }
.cmp-compat-yes  { background: rgba(48,160,80,0.12); color: var(--green); }
.cmp-compat-no   { background: rgba(200,120,40,0.12); color: var(--orange,#e09040); }

.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
.cmp-table tr { border-bottom: 1px solid var(--border); }
.cmp-table tr.cmp-row-diff { background: rgba(176,128,48,0.06); }
.cmp-label { width: 110px; padding: 6px 4px; color: var(--muted); font-size: 12px; }
.cmp-val   { padding: 6px 8px; text-align: center; font-size: 13px; }
.cmp-table .cmp-row-diff .cmp-val { font-weight: 600; }

.cmp-uses-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 14px; }
.cmp-uses-label { color: var(--muted); font-size: 11px; padding-top: 2px; }
.cmp-uses-val   { background: var(--surface); border-radius: 6px; padding: 6px 8px; line-height: 1.4; }

.cmp-footer { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-footer button { flex: 1; min-width: 120px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--gold2); color: var(--bg); border: none; }
.cmp-footer .btn-secondary { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }

@media (max-width: 480px) {
  .cmp-heads, .cmp-uses-row { grid-template-columns: 80px 1fr 1fr; gap: 4px; }
  .cmp-label { width: 80px; font-size: 11px; }
  .cmp-val   { font-size: 12px; padding: 5px 4px; }
}

/* ═══ PANEL ERROR BOUNDARY ═══════════════════════════════ */
.panel-error {
  background: rgba(200,40,40,0.1);
  border: 1px solid rgba(200,40,40,0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #e07070;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-error code { font-family: monospace; font-size: 11px; opacity: 0.85; }
.panel-error button { margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; padding: 0 4px; }

/* ═══ MOVEMENTS LIST VIEW ════════════════════════════════ */
.mov-list-view { display: block !important; }
.mov-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mov-list-table thead th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.mov-list-row {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.mov-list-row:hover { background: var(--surface2); }
.mov-list-row.favorited .ml-ref { color: var(--gold3); }
.mov-list-row td { padding: 7px 8px; vertical-align: middle; }
.ml-ref   { font-weight: 600; min-width: 100px; }
.ml-brand { color: var(--muted); font-size: 12px; }
.ml-type, .ml-orig { font-size: 14px; text-align: center; }
.ml-dim, .ml-freq, .ml-res { font-size: 12px; white-space: nowrap; }
.ml-svc   { text-align: center; }
.svc-dot  { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.svc-dot.svc-green  { background: var(--green); }
.svc-dot.svc-yellow { background: #d4b800; }
.svc-dot.svc-red    { background: #e04040; }

@media (max-width: 480px) {
  .ml-brand, .ml-freq { display: none; }
  .mov-list-table { font-size: 12px; }
}

/* ═══ JOB CHECKLIST ══════════════════════════════════════ */
.chk-list { display: flex; flex-direction: column; gap: 4px; min-height: 20px; }
.chk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--surface2);
  border-radius: 7px;
  font-size: 13px;
  cursor: default;
  transition: background 0.12s;
}
.chk-item.chk-done .chk-text { text-decoration: line-through; opacity: 0.5; }
.chk-cb   { accent-color: var(--gold2); width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
.chk-text { flex: 1; }
.chk-del  { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; opacity: 0.6; }
.chk-del:hover { opacity: 1; color: var(--red); }

.job-chk-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(80,80,160,0.15);
  color: var(--purple, #a080f0);
  white-space: nowrap;
}
.job-chk-badge.chk-all-done { background: rgba(48,160,80,0.15); color: var(--green); }

/* ═══ JOBS TABLE VIEW ════════════════════════════════════ */
.jobs-table-view { display: block !important; }
.job-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.job-list-table thead th {
  text-align: left;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.job-list-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.job-list-row:hover { background: var(--surface2); }
.job-list-row.job-list-overdue { border-left: 3px solid var(--red); }
.job-list-row td { padding: 7px 8px; vertical-align: middle; }
.jl-client .jl-name  { font-weight: 600; }
.jl-client .jl-phone { font-size: 11px; color: var(--muted); }
.jl-watch .jl-ref    { font-size: 11px; color: var(--muted); }
.jl-watch .jl-chk    { font-size: 11px; color: var(--purple, #a080f0); }
.jl-date  { font-size: 12px; white-space: nowrap; }
.jl-overdue { color: var(--red); font-weight: 600; }
.jl-price { font-size: 12px; white-space: nowrap; color: var(--gold3); }
.jl-status-pills { display: flex; gap: 2px; }
.jl-actions { white-space: nowrap; }
.jl-actions .p-btn { padding: 3px 6px; font-size: 12px; }

@media (max-width: 480px) {
  .jl-date, .jl-price { display: none; }
  .job-list-table { font-size: 12px; }
}

/* ═══ SATISFACTION STARS ════════════════════════════════ */
.star-rating-row { display: flex; gap: 6px; margin-top: 4px; }
.star-rating-row .star {
  font-size: 24px;
  cursor: pointer;
  color: var(--border);
  transition: color 0.1s;
  user-select: none;
}
.star-rating-row .star.on { color: var(--gold2); }
.star-rating-row .star:hover,
.star-rating-row .star:hover ~ .star { color: var(--gold2); }
/* reverse sibling trick for hover fill */
.star-rating-row:hover .star { color: var(--gold2); }
.star-rating-row .star:hover ~ .star { color: var(--border); }

.job-sat-badge  { font-size: 10px; color: var(--gold3); white-space: nowrap; letter-spacing: 1px; }
.job-time-badge { font-size: 10px; color: var(--muted); white-space: nowrap; }

/* ═══ PARTS WISHLIST ══════════════════════════════════════ */
.wish-list { display: flex; flex-direction: column; gap: 4px; min-height: 16px; }
.wish-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--surface2);
  border-radius: 7px;
  font-size: 13px;
}
.wish-item.wish-done { opacity: 0.5; }
.wish-item.wish-done .wish-name { text-decoration: line-through; }
.wish-prio  { font-size: 12px; flex-shrink: 0; }
.wish-name  { flex: 1; font-weight: 500; }
.wish-qty   { font-size: 11px; color: var(--muted); background: var(--surface); padding: 1px 5px; border-radius: 5px; }
.wish-note  { font-size: 11px; color: var(--muted); font-style: italic; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ COMMUNICATION LOG ══════════════════════════════════ */
.comm-log-box { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.comm-entry {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 4px 8px;
  background: var(--surface2);
  border-radius: 6px;
  font-size: 12px;
}
.comm-ts   { color: var(--muted); font-size: 10px; white-space: nowrap; flex-shrink: 0; }
.comm-text { flex: 1; }

/* ═══ ARCHIVE OVERLAY ════════════════════════════════════ */
.arch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.arch-client { font-weight: 600; flex: 1; }
.arch-watch  { color: var(--muted); flex: 1; }
.arch-meta   { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ═══ NOTIFICATION BELL (topbar inline) ══════════════════ */
#notifBellBtn {
  position: relative;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
#notifBellBtn:hover { background: var(--surface2); }
#notifBadge {
  position: absolute;
  top: 0; right: 0;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}
.notif-overlay {
  display: none;
  position: fixed;
  top: 60px; right: 12px;
  z-index: 9000;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  min-width: 280px;
  max-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px;
  animation: fadeIn 0.15s ease;
}
.notif-overlay.open { display: block; }
.notif-overlay h3 { margin: 0 0 10px; font-size: 14px; }
.notif-group { margin-bottom: 12px; }
.notif-group-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.notif-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--surface2);
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
}
.notif-item:hover { background: var(--surface3, var(--surface)); }
.notif-item-icon { flex-shrink: 0; font-size: 14px; }
.notif-item-text { flex: 1; }
.notif-item-name { font-weight: 600; }
.notif-item-sub  { color: var(--muted); font-size: 11px; }

/* ═══ BULK SERVICE DATE BAR ══════════════════════════════ */
#bulkSvcBar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
#bulkSvcBar label { font-size: 12px; color: var(--muted); }
#bulkSvcBar .service-date-input { font-size: 12px; }
#bulkSvcBtn.on { background: var(--blue, #3a7ad5); color: #fff; }

/* ═══ MOVEMENT SPECS PANEL ═══════════════════════════════ */
.mov-specs-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
  margin-top: 0;
}
.mov-card.specs-open .mov-specs-panel { max-height: 260px; }
.specs-tbl { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 8px; }
.specs-tbl td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.specs-tbl td:first-child { color: var(--muted); width: 48%; }

/* ═══ INVENTORY HISTORY OVERLAY ══════════════════════════ */
.inv-hist-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.inv-hist-table th { text-align: left; padding: 4px 8px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); }
.inv-hist-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.inv-hist-table tr:hover td { background: var(--surface2); }

/* ═══ PARTS SUGGEST SPAN ════════════════════════════════ */
#jMovRefSuggest {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  min-height: 16px;
}
#jMovRefSuggest strong { color: var(--text); }

/* ═══ JOB PROGRESS BAR ═══════════════════════════════════ */
.job-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin: 6px 0 4px;
  overflow: hidden;
}
.job-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue, #3a7ad5), var(--green));
  border-radius: 2px;
  transition: width 0.4s ease;
}
.job-overdue .job-progress-fill { background: linear-gradient(90deg, var(--gold), var(--red)); }

/* ═══ STICKY JOB TOTALS BAR ══════════════════════════════ */
.jobs-totals-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: var(--surface2);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.jt-item { display: flex; align-items: center; gap: 3px; }
.jt-ready { color: var(--green); }
.jt-overdue { color: var(--red); font-weight: 600; }

/* ═══ CONFETTI ════════════════════════════════════════════ */
.confetti-piece {
  position: fixed;
  top: -10px;
  z-index: 99999;
  pointer-events: none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0)   rotate(0deg);   opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ═══ MOVEMENT EXTRA BADGES ══════════════════════════════ */
.mov-pop-badge {
  display: inline-block;
  font-size: 10px;
  background: var(--surface2);
  color: var(--muted);
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 2px;
}
.mov-retired-badge {
  display: inline-block;
  font-size: 10px;
  background: rgba(220,60,60,.15);
  color: var(--red);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-top: 2px;
}
.mov-cond-badge {
  display: inline-block;
  font-size: 11px;
  color: var(--gold2);
  margin-top: 2px;
  letter-spacing: 1px;
}
.mov-wanted-btn { color: var(--muted); }
.mov-wanted-btn.wanted-on { color: var(--gold); }

/* ═══ MOVEMENT WANTED LIST ═══════════════════════════════ */
.mov-wanted-section {
  margin-top: 20px;
  padding: 14px;
  background: var(--surface2);
  border-radius: 10px;
}
.mov-wanted-section h3 { font-size: 13px; margin: 0 0 10px; }
.mov-wanted-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.mov-wanted-item:last-child { border-bottom: none; }
.mov-wanted-ref  { flex: 1; font-weight: 600; cursor: pointer; color: var(--gold); text-decoration: underline dotted; }
.mov-wanted-date { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ═══ INVENTORY EXPIRY ═══════════════════════════════════ */
.inv-status-expired { background: rgba(220,60,60,.18); color: var(--red); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; }
.inv-card.inv-expired { border-color: var(--red) !important; }

/* ═══ BRAND HINT CHIPS ══════════════════════════════════ */
.brand-hint-chip {
  display: inline-block;
  background: var(--gold);
  color: #111;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  margin: 1px 2px;
  transition: opacity .15s;
}
.brand-hint-chip:hover { opacity: .8; }

/* ═══ SYMPTOM AUTOCOMPLETE ══════════════════════════════ */
.symptom-ac-item {
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid var(--border);
}
.symptom-ac-item:last-child { border-bottom: none; }
.symptom-ac-item:hover { background: var(--surface2); }

/* ═══ PARTS AVAILABILITY BADGE ══════════════════════════ */
.mov-avail-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 2px;
  font-weight: 600;
}
.mov-avail-green  { background: rgba(72,200,120,.15); color: var(--green); }
.mov-avail-yellow { background: rgba(230,180,60,.15);  color: var(--gold);  }
.mov-avail-red    { background: rgba(220,60,60,.15);   color: var(--red);   }

/* ═══ STATUS PILL MICRO-ANIMATION ═══════════════════════ */
@keyframes pillPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.job-status-pill.pill-pop { animation: pillPop .28s ease; }

/* ═══ MOVEMENT COMPLEXITY BADGE ════════════════════════════ */
.mov-complexity-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 2px;
  font-weight: 600;
}
.mov-cx-1 { background: rgba(72,200,120,.15); color: var(--green); }
.mov-cx-2 { background: rgba(230,180,60,.15);  color: var(--gold);  }
.mov-cx-3 { background: rgba(220,60,60,.15);   color: var(--red);   }

/* complexity selector buttons in popup */
.complexity-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.complexity-btn.on { border-color: var(--gold); background: rgba(230,180,60,.18); color: var(--gold); font-weight: 700; }
.complexity-btn:hover { border-color: var(--gold2); }

/* ═══ MOVEMENT REMINDER BADGE ══════════════════════════════ */
.mov-reminder-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  margin-top: 2px;
  background: rgba(100,160,255,.15);
  color: #7ab4ff;
  font-weight: 600;
}
.mov-reminder-badge.reminder-overdue {
  background: rgba(220,60,60,.15);
  color: var(--red);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

/* ═══ JOB TAG BUTTONS (form) & BADGES (cards) ══════════════ */
.j-tag-btn {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.j-tag-btn.on          { background: rgba(230,180,60,.18); border-color: var(--gold); color: var(--gold); font-weight: 700; }
.j-tag-btn:hover       { border-color: var(--gold2); color: var(--text); }

.job-tags-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; }
.j-tag-badge  { font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.j-tag-urgent        { background: rgba(220,60,60,.15);   color: var(--red);   }
.j-tag-vip           { background: rgba(230,180,60,.15);  color: var(--gold);  }
.j-tag-warranty      { background: rgba(72,200,120,.15);  color: var(--green); }
.j-tag-waiting-parts { background: rgba(100,160,255,.15); color: #7ab4ff;      }
.j-tag-external      { background: rgba(180,130,255,.15); color: #b47dff;      }

/* ═══ PARTS STOCK BADGE ════════════════════════════════════ */
.part-stock-badge {
  font-size: 10px;
  margin: 3px 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(72,200,120,.12);
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.part-stock-zero { background: rgba(220,60,60,.12); color: var(--red); }

/* ═══ MANUAL PERSONAL NOTES ════════════════════════════════ */
.manual-personal-notes {
  margin-top: 28px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}
.manual-pnotes-toggle {
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  user-select: none;
}
.manual-pnotes-toggle:hover { color: var(--gold); }
.manual-pnote-ta { width: 100%; box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════
   IGLIS WATCH — VISUAL ELEVATION PACK (v48)
   Aesthetics · Micro-interactions · Palette · Calculators
   ═══════════════════════════════════════════════════════════ */

/* ─── CASEBACK CIRCULAR REVEAL ──────────────────────────── */
@keyframes casebackReveal {
  from { clip-path: circle(28px at 50% 44px); opacity: 0.6; transform: scale(0.97); }
  to   { clip-path: circle(130% at 50% 44px); opacity: 1;   transform: scale(1);    }
}
.overlay.open .popup {
  animation: casebackReveal 0.18s cubic-bezier(0.34, 1.1, 0.64, 1);
}

/* ─── SAPPHIRE CRYSTAL GLARE ────────────────────────────── */
.popup-header { position: relative; overflow: hidden; }
@keyframes sapphireGlare {
  0%         { left: -100%; opacity: 0; }
  5%         { opacity: 1;  }
  45%        { left: 140%;  opacity: 1; }
  46%, 100%  { left: 140%;  opacity: 0; }
}
.popup-header::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.07) 50%, transparent 65%);
  animation: sapphireGlare 6s ease-in-out infinite 2s;
  pointer-events: none;
}

/* ─── ENGRAVED SECTION HEADERS ──────────────────────────── */
.popup-section-title {
  text-shadow: 0 1px 0 rgba(255,255,255,0.45), 0 -1px 0 rgba(0,0,0,0.07);
}
.manual-section-title,
.section-hdr h2 {
  text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 -1px 0 rgba(0,0,0,0.05);
}

/* ─── VIP GOLD SHIMMER ──────────────────────────────────── */
@keyframes goldShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.job-card:has(.j-tag-vip) {
  background: linear-gradient(135deg, var(--card) 0%, rgba(200,160,70,0.08) 50%, var(--card) 100%);
  background-size: 200% 200%;
  animation: goldShimmer 3.5s ease-in-out infinite;
}

/* ─── CÔTES DE GENÈVE ON SIDEBAR ────────────────────────── */
.sidebar {
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent, transparent 10px,
    rgba(176,128,48,0.028) 10px, rgba(176,128,48,0.028) 11px
  );
}

/* ─── GUILLOCHE CROSSHATCH ON CARDS ─────────────────────── */
.mov-card::before,
.job-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient( 45deg, transparent, transparent 15px, rgba(176,128,48,0.018) 15px, rgba(176,128,48,0.018) 16px),
    repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(176,128,48,0.018) 15px, rgba(176,128,48,0.018) 16px);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.job-card { position: relative; }
.mov-card > *, .job-card > * { position: relative; z-index: 1; }

/* ─── BLUEPRINT GRID IN POPUP ───────────────────────────── */
.popup {
  background-color: var(--navy2);
  background-image:
    linear-gradient(rgba(176,128,48,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,128,48,0.022) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ─── TACHYMETER TICKS ON PROGRESS BAR ──────────────────── */
.job-progress-bar { position: relative; }
.job-progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent, transparent 9.3%,
    rgba(0,0,0,0.1) 9.3%, rgba(0,0,0,0.1) 10%
  );
  pointer-events: none;
  z-index: 2;
}

/* ─── CLICK RIPPLE ──────────────────────────────────────── */
@keyframes rippleGo {
  0%   { transform: scale(0); opacity: 0.55; }
  100% { transform: scale(22); opacity: 0; }
}
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  width: 12px; height: 12px;
  background: rgba(176,128,48,0.3);
  transform: scale(0);
  animation: rippleGo 0.52s ease-out forwards;
  pointer-events: none;
  margin-left: -6px;
  margin-top: -6px;
  z-index: 9999;
}

/* ─── ERROR SHAKE ────────────────────────────────────────── */
@keyframes errorShake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-7px); }
  30%     { transform: translateX(7px); }
  45%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px); }
  75%     { transform: translateX(-2px); }
}
.error-shake { animation: errorShake 0.42s ease; }

/* ─── CRYSTAL CRACK (error animation) ───────────────────── */
@keyframes crystalCrack {
  0%   { filter: brightness(1);   }
  8%   { filter: brightness(1.5) saturate(1.8); }
  16%  { filter: brightness(0.7); }
  24%  { filter: brightness(1.4); }
  100% { filter: brightness(1);   }
}
.crystal-crack { animation: crystalCrack 0.55s ease; }

/* ─── ENHANCED HOVER LIFT ────────────────────────────────── */
.mov-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.job-card { transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s; }
.job-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}

/* ─── STAGGER FADE-IN ────────────────────────────────────── */
.stagger-item {
  animation: slideUp 0.22s ease both;
  animation-delay: calc(var(--stagger-i, 0) * 42ms);
}

/* ─── SUNBURST ON ACTIVE/PINNED CARDS ───────────────────── */
.mov-card.pinned {
  background: radial-gradient(ellipse at 50% -10%, rgba(200,160,70,0.13) 0%, var(--card) 65%);
}
.stat-card.stat-warn {
  background: radial-gradient(ellipse at 50% 0%, rgba(200,160,70,0.09) 0%, var(--card) 70%);
}
.stat-card.stat-danger {
  background: radial-gradient(ellipse at 50% 0%, rgba(192,80,70,0.09) 0%, var(--card) 70%);
}

/* ─── WATCH HANDS LOADER ─────────────────────────────────── */
@keyframes whMinute { to { transform: rotate(360deg); } }
@keyframes whHour   { to { transform: rotate(360deg); } }
.watch-hands-loader {
  display: inline-block;
  position: relative;
  width: 30px; height: 30px;
  border: 2px solid var(--border2);
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.watch-hands-loader::before,
.watch-hands-loader::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 50%;
  transform-origin: bottom center;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
}
.watch-hands-loader::before {
  width: 2px; height: 36%;
  margin-left: -1px;
  animation: whMinute 2s linear infinite;
}
.watch-hands-loader::after {
  width: 2px; height: 24%;
  margin-left: -1px;
  background: var(--red);
  animation: whHour 24s linear infinite;
}

/* ─── TYPEWRITER CURSOR ──────────────────────────────────── */
@keyframes blinkCursor { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.ai-typewriter-cursor::after {
  content: '▌';
  font-size: 0.85em;
  color: var(--gold);
  animation: blinkCursor 0.7s step-end infinite;
  vertical-align: baseline;
}

/* ─── APPLIED INDICES DIVIDERS ───────────────────────────── */
.popup-section-title::before {
  content: '│';
  margin-right: 6px;
  color: var(--gold);
  opacity: 0.55;
  font-weight: 400;
}

/* ─── SMOOTH COUNTER ANIMATION ───────────────────────────── */
.stat-val.counting { transition: none; }

/* ─── MILESTONE TOAST ────────────────────────────────────── */
.toast-milestone {
  background: linear-gradient(135deg, #7a5010, #b08030) !important;
  border-color: var(--gold2) !important;
  font-size: 14px !important;
  padding: 14px 22px !important;
}

/* ─── PANEL HISTORY BUTTONS ──────────────────────────────── */
.panel-hist-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 14px;
  padding: 4px 9px;
  cursor: pointer;
  border-radius: 3px;
  transition: color .15s, border-color .15s;
  line-height: 1;
}
.panel-hist-btn:hover:not(:disabled)  { color: var(--gold); border-color: var(--gold3); }
.panel-hist-btn:disabled { opacity: 0.3; cursor: default; }

/* ─── REGULATION CALCULATOR ──────────────────────────────── */
.reg-calc-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 20px;
  margin: 16px 0;
}
.reg-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.reg-calc-result {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--gold);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.7;
  min-height: 60px;
}
.reg-calc-result b { color: var(--cream); }
.reg-result-good  { border-left-color: var(--green) !important; }
.reg-result-warn  { border-left-color: var(--gold3) !important; }
.reg-result-bad   { border-left-color: var(--red) !important; }

/* ─── MAINSPRING POWER CALCULATOR ───────────────────────── */
.ms-calc-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 20px;
  margin: 16px 0;
}
.ms-power-bar-outer {
  background: var(--border);
  border-radius: 4px;
  height: 14px;
  margin: 10px 0 4px;
  overflow: hidden;
  position: relative;
}
.ms-power-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease, background 0.4s;
  min-width: 2px;
}

/* ─── PALETTE SWITCHER ───────────────────────────────────── */
.palette-swatch {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  vertical-align: middle;
  margin-right: 4px;
}
.palette-swatch.on,
.palette-swatch:hover { transform: scale(1.2); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,128,48,0.25); }
.palette-swatch.swatch-default  { background: linear-gradient(135deg, #ece7d8, #b08030); }
.palette-swatch.swatch-rose     { background: linear-gradient(135deg, #f5eae8, #b85050); }
.palette-swatch.swatch-rhodium  { background: linear-gradient(135deg, #e8ecf0, #4870a8); }
.palette-swatch.swatch-patina   { background: linear-gradient(135deg, #e4ede0, #3a7848); }

/* Rose Gold */
body.palette-rose {
  --navy: #f5eae8; --navy2: #edddd8; --navy3: #e0cec8; --navy4: #d4b8b0;
  --gold: #b85050; --gold2: #c86868; --gold3: #904040;
  --border: #d4b0a8; --border2: #bc9088;
  --card: #eeddd8; --surface: #f8f0ec;
  --text: #3a1818; --muted: #7a4848;
}
/* Rhodium / Steel */
body.palette-rhodium {
  --navy: #e8ecf0; --navy2: #dde1e6; --navy3: #cdd4da; --navy4: #b8c1c8;
  --gold: #4870a8; --gold2: #5880b8; --gold3: #2858a0;
  --border: #b8c4d0; --border2: #a0b0bc;
  --card: #dee4ea; --surface: #f0f3f6;
  --text: #1a2838; --muted: #5870a0;
}
/* Patina / Bronze-Green */
body.palette-patina {
  --navy: #e4ede0; --navy2: #d4e4ce; --navy3: #c2d8bc; --navy4: #aec8a8;
  --gold: #3a7848; --gold2: #4a8858; --gold3: #286038;
  --border: #a8c8a0; --border2: #90b888;
  --card: #dce8d8; --surface: #ecf4e8;
  --text: #182e18; --muted: #4a7050;
}

/* ─── LUME GLOW (dark system theme) ─────────────────────── */
@media (prefers-color-scheme: dark) {
  .mov-card .mov-ref     { text-shadow: 0 0 10px rgba(176,128,48,0.5); }
  .job-client            { text-shadow: 0 0 10px rgba(176,128,48,0.4); }
  .logo-name             { text-shadow: 0 0 12px rgba(176,128,48,0.35); }
  .popup-title           { text-shadow: 0 0 14px rgba(176,128,48,0.25); }
}

/* ─── AUTO-DRAFT INDICATOR ───────────────────────────────── */
#jobDraftBadge {
  display: none;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  animation: fadeIn .3s ease;
}
#jobDraftBadge.visible { display: inline; }

/* ─── TAB PANEL EXIT FLASH ───────────────────────────────── */
#panelTransFlash {
  position: fixed;
  inset: 0;
  background: var(--navy);
  opacity: 0;
  pointer-events: none;
  z-index: 99;
  transition: opacity 0.09s ease;
}

/* ─── PARALLAX TILT ──────────────────────────────────────── */
.mov-card, .stat-card {
  will-change: transform;
  transform-style: preserve-3d;
}

/* ─── RICH TEXT NOTES TOOLBAR ────────────────────────────── */
.rte-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.rte-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 3px 7px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 1.4;
  transition: background .12s, color .12s;
  min-width: 26px;
  text-align: center;
}
.rte-btn:hover { background: var(--card); color: var(--gold); border-color: var(--gold3); }
.rte-btn b { font-weight: 700; }
.rte-btn i { font-style: italic; }

/* ─── JOB STATUS DONUT CHART ─────────────────────────────── */
.status-donut-wrap { margin: 8px 0 16px; }
.status-donut-wrap svg circle {
  transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease;
}

/* ─── MOVEMENT FREQUENCY BAR CHART ──────────────────────── */
.mov-freq-chart { padding: 4px 0; }
.mov-freq-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.mov-freq-label { width: 100px; text-align: right; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
.mov-freq-bar-wrap { flex: 1; background: var(--border); border-radius: 2px; height: 13px; overflow: hidden; }
.mov-freq-bar-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 0.5s cubic-bezier(.34,1.2,.64,1); }
.mov-freq-count { width: 24px; text-align: right; color: var(--cream); font-weight: 500; flex-shrink: 0; }

/* ─── SPLIT PANEL VIEW ───────────────────────────────────── */
.split-toggle-btn {
  background: none;
  border: 1px solid var(--border2);
  color: var(--muted);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}
.split-toggle-btn:hover, .split-toggle-btn.on { color: var(--gold); border-color: var(--gold3); background: rgba(176,128,48,0.07); }

#splitPanelBar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
#splitPanelBar.visible { display: flex; }

.split-panel-area {
  display: none;
  position: fixed;
  top: 58px; /* start below sticky topbar */
  right: 0;
  width: 46%;
  bottom: 0;
  border-left: 2px solid var(--border2);
  overflow-y: auto;
  background: var(--navy);
  z-index: 18; /* below topbar z:20 but above panels */
  padding: 12px 16px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}
.split-panel-area.visible { display: block; }

/* ─── MAINSPRING TABLE ──────────────────────────────────── */
.ms-table { display:flex; flex-direction:column; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.ms-thead { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 2fr; gap:0; padding:8px 12px; background:var(--surface2); font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.ms-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 2fr; gap:0; padding:9px 12px; border-top:1px solid var(--border); font-size:12px; color:var(--text); }
.ms-row:hover { background:rgba(212,175,55,.06); }
.ms-diam { font-weight:700; color:var(--gold); }
.ms-ex { color:var(--muted); font-size:11px; }
.ms-ai-result { background:var(--surface2); border-radius:8px; padding:10px 12px; font-size:12px; color:var(--text); line-height:1.6; }
.gasket-ai-result { background:var(--surface2); border-radius:8px; padding:10px 12px; font-size:12px; color:var(--text); line-height:1.6; margin-top:4px; }
@media (max-width:600px) { .ms-thead, .ms-row { grid-template-columns:80px 1fr 1fr 1fr; } .ms-ex { display:none; } }

/* ─── WORKSHOP PANEL ────────────────────────────────────── */
.ws-section-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:10px; }
.ws-lub-row, .ws-maint-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface2); border-radius:8px; border:1px solid var(--border); }
.ws-add-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ws-add-form .mov-search { min-width:0; }
.lub-badge, .maint-badge { flex-shrink:0; font-size:10px; font-weight:700; padding:3px 8px; border-radius:12px; white-space:nowrap; }
.lub-status-ok, .maint-status-ok { background:rgba(76,175,80,.15); color:#2e7d32; }
.lub-status-soon, .maint-status-warn { background:rgba(212,175,55,.2); color:#7a5c00; }
.lub-status-expired, .maint-status-overdue { background:rgba(211,47,47,.12); color:#c62828; }

/* ─── CALIBER COMPARE ───────────────────────────────────── */
.compare-inputs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:4px; }
.compare-sug-wrap { position:relative; }
.compare-suggestions { position:absolute; top:100%; left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.15); z-index:50; max-height:200px; overflow-y:auto; margin-top:2px; }
.compare-sug-item { padding:7px 12px; font-size:12px; cursor:pointer; color:var(--text); }
.compare-sug-item:hover { background:rgba(212,175,55,.12); color:var(--gold); }
.compare-grid { border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.compare-thead { display:grid; grid-template-columns:120px 1fr 1fr; padding:8px 12px; background:var(--surface2); font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; }
.compare-row { display:grid; grid-template-columns:120px 1fr 1fr; padding:8px 12px; border-top:1px solid var(--border); font-size:12px; color:var(--text); }
.compare-row:nth-child(even) { background:rgba(0,0,0,.02); }
.compare-label { font-weight:600; color:var(--muted); font-size:11px; }
.compare-diff { color:var(--gold); font-weight:600; }
@media (max-width:500px) { .compare-inputs { grid-template-columns:1fr; } .compare-thead, .compare-row { grid-template-columns:90px 1fr 1fr; } }

/* ─── SCREW TABLE ───────────────────────────────────────── */
.screw-table { display:flex; flex-direction:column; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.screw-thead { display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:0; padding:8px 12px; background:var(--surface2); font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.screw-row { display:grid; grid-template-columns:2fr 1fr 1fr 2fr; gap:0; padding:9px 12px; border-top:1px solid var(--border); font-size:12px; color:var(--text); }
.screw-row:hover { background:rgba(212,175,55,.06); }
.screw-fam { font-weight:600; color:var(--text); }
.screw-driver { font-weight:700; color:var(--gold); }
.screw-notes { color:var(--muted); font-size:11px; }
@media (max-width:600px) { .screw-thead, .screw-row { grid-template-columns:2fr 1fr 2fr; } .screw-row span:nth-child(3) { display:none; } .screw-thead span:nth-child(3) { display:none; } }

/* ─── VALUE ESTIMATOR ───────────────────────────────────── */
.value-disclaimer { font-size:11px; color:var(--muted); font-style:italic; padding:8px 12px; background:var(--surface2); border-radius:6px; margin-bottom:12px; border-left:3px solid var(--gold); }
.value-result { background:var(--surface2); border-radius:8px; padding:12px 14px; font-size:13px; color:var(--text); line-height:1.7; }

/* ─── GASKET TABLE ──────────────────────────────────────── */
.gasket-table { display:flex; flex-direction:column; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.gasket-thead { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0; padding:8px 12px; background:var(--surface2); font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.gasket-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0; padding:9px 12px; border-top:1px solid var(--border); font-size:12px; color:var(--text); }
.gasket-row:hover { background:rgba(212,175,55,.06); }
.gasket-range { font-weight:700; color:var(--gold); }
@media (max-width:520px) { .gasket-thead, .gasket-row { grid-template-columns:80px 1fr 1fr; } .gasket-row span:nth-child(4), .gasket-thead span:nth-child(4) { display:none; } }

/* ─── CASEBACK TABLE ─────────────────────────────────────── */
.caseback-thead { display:grid; grid-template-columns:2fr 1fr 1.5fr 2fr; gap:0; padding:8px 12px; background:var(--surface2); border-radius:10px 10px 0 0; border:1px solid var(--border); font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.caseback-row { display:grid; grid-template-columns:2fr 1fr 1.5fr 2fr; gap:0; padding:9px 12px; border:1px solid var(--border); border-top:none; font-size:12px; color:var(--text); transition:background .1s; }
.caseback-row:last-child { border-radius:0 0 10px 10px; }
.caseback-row:hover { background:rgba(212,175,55,.06); }
.cb-brand { font-weight:600; color:var(--text); }
.cb-method { color:var(--gold); font-size:11px; font-weight:600; }
.cb-tool { color:var(--muted); font-size:11px; }
.cb-notes { color:var(--muted); font-size:11px; font-style:italic; }
@media (max-width:600px) { .caseback-thead, .caseback-row { grid-template-columns:1.5fr 1fr; } .caseback-thead span:nth-child(3), .caseback-thead span:nth-child(4), .caseback-row .cb-tool, .caseback-row .cb-notes { display:none; } }

/* ─── ADHESIVE TABLE ─────────────────────────────────────── */
.adh-thead { display:grid; grid-template-columns:1.5fr .8fr 2fr 1.2fr 2fr; gap:0; padding:8px 12px; background:var(--surface2); border-radius:10px 10px 0 0; border:1px solid var(--border); font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.adh-row { display:grid; grid-template-columns:1.5fr .8fr 2fr 1.2fr 2fr; gap:0; padding:9px 12px; border:1px solid var(--border); border-top:none; font-size:12px; color:var(--text); align-items:start; transition:background .1s; }
.adh-row:last-child { border-radius:0 0 10px 10px; }
.adh-row:hover { background:rgba(212,175,55,.06); }
.adh-product { font-weight:700; color:var(--text); font-size:12px; }
.adh-strength { font-size:10px; font-weight:700; padding:3px 7px; border-radius:10px; white-space:nowrap; align-self:start; }
.adh-use { font-size:11px; color:var(--text); }
.adh-safe { font-size:11px; color:var(--muted); }
.adh-notes { font-size:11px; color:var(--muted); font-style:italic; }
@media (max-width:700px) { .adh-thead, .adh-row { grid-template-columns:1.5fr .8fr 2fr; } .adh-thead span:nth-child(4), .adh-thead span:nth-child(5), .adh-row .adh-safe, .adh-row .adh-notes { display:none; } }

/* ─── RADAR CHART ────────────────────────────────────────── */
.radar-layout { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.radar-inputs-col { flex-shrink:0; min-width:190px; }
.radar-inputs-title { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.radar-inputs-grid { display:flex; flex-direction:column; gap:6px; }
.radar-inp-row { display:flex; align-items:center; gap:8px; }
.radar-lbl { font-size:12px; font-weight:700; color:var(--gold); min-width:28px; display:flex; flex-direction:column; gap:1px; }
.radar-lbl-desc { font-size:9px; color:var(--muted); font-weight:400; white-space:nowrap; }
.radar-inp { width:90px; padding:5px 8px; background:var(--surface2); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; text-align:center; }
.radar-inp:focus { border-color:var(--gold3); outline:none; }
.radar-chart-col { flex:1; min-width:240px; display:flex; justify-content:center; }
.radar-chart-box { display:flex; justify-content:center; align-items:center; }
.radar-stats-box { margin-top:14px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.radar-stat-row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.radar-stat-lbl { font-size:11px; color:var(--muted); }
.radar-stat-val { font-size:12px; font-weight:700; color:var(--text); }
.radar-stat-status { font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; }
.radar-ok   { background:rgba(72,199,142,.18); color:#48c78e; }
.radar-good { background:rgba(100,180,100,.15); color:#5cb85c; }
.radar-warn { background:rgba(255,190,40,.18); color:#ffbe28; }
.radar-bad  { background:rgba(240,80,80,.18);  color:#f05050; }
@media (max-width:560px) { .radar-layout { flex-direction:column; } .radar-chart-col { width:100%; } }