/* ── CSS VARIABLES (light only) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #f4f5f9;
  --surface:   #ffffff;
  --surface2:  #eef0f5;
  --border:    rgba(0,0,0,0.09);
  --accent:    #7cb800;
  --accent-d:  rgba(124,184,0,0.08);
  --accent-b:  rgba(124,184,0,0.25);
  --text:      #111827;
  --muted:     #9ca3af;
  --muted2:    #6b7280;
  --danger:    #dc2626;
  --danger-d:  rgba(220,38,38,0.08);
  --success:   #16a34a;
  --success-d: rgba(22,163,74,0.08);
  --warn:      #d97706;
  --noise-opacity: 0;
  --row-hover: rgba(0,0,0,0.02);
  --select-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

html, body { 
  width:100%; 
  height:100%; 
  font-family:'Outfit', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  background:var(--bg); 
  color:var(--text); 
  overflow:hidden; 
  transition: background 0.3s, color 0.3s; 
}

/* noise */
body::before {
  content:''; position:fixed; inset:0; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:var(--noise-opacity); pointer-events:none;
}

/* ── LAYOUT ── */
.app-shell { display:flex; width:100%; height:100vh; position:relative; z-index:1; }

/* ── SIDEBAR ── */
.sidebar {
  width:220px; flex-shrink:0; height:100vh;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
  transition: background 0.3s, border-color 0.3s;
}
.sidebar--client { width:200px; }

.sidebar__top { padding:28px 20px 20px; border-bottom:1px solid var(--border); }

.sidebar__brand {
  font-family:'Bebas Neue',sans-serif; font-size:1.3rem;
  letter-spacing:0.1em; color:var(--accent);
  display:flex; align-items:center; gap:8px;
}

.sidebar__brand-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
}

.sidebar__sub { font-size:0.68rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

.sidebar__nav { flex:1; padding:16px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }

.sidebar__section { font-size:0.6rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); padding:14px 8px 6px; }

.sidebar__link {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:6px; color:var(--muted2); text-decoration:none;
  font-size:0.88rem; font-weight:400;
  transition:background 0.2s, color 0.2s; position:relative;
}
.sidebar__link:hover { background:rgba(128,128,128,0.08); color:var(--text); }
.sidebar__link.active { background:var(--accent-d); color:var(--accent); font-weight:500; }
.sidebar__link.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:18px; background:var(--accent); border-radius:0 2px 2px 0;
}
.sidebar__link-icon { font-size:0.9rem; opacity:0.6; }
.sidebar__link.active .sidebar__link-icon { opacity:1; }

.sidebar__bottom { padding:12px 12px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }

/* ── BACK / HOME BUTTONS ── */
.sidebar__back {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:6px; font-size:0.75rem; font-weight:500; letter-spacing:0.06em;
  color:var(--muted2); text-decoration:none; text-transform:uppercase;
  transition:background 0.2s, color 0.2s;
}
.sidebar__back:hover { background:rgba(128,128,128,0.08); color:var(--text); }
.sidebar__back-icon { font-size:0.85rem; opacity:0.7; }

/* ── SIDEBAR IMPORT ── */
.sidebar-import {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:4px 0;
}

.sidebar-import__btn {
  width:100%;
  justify-content:center;
}

.sidebar-import__controls {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sidebar-import .form-select {
  font-size:0.78rem;
  padding:6px 8px;
}

/* ── AG TABLE (Golda-style results) ── */
.ag-table {
  width:100%;
  border-collapse:collapse;
  font-size:0.83rem;
}
.ag-table th {
  background:var(--surface2);
  font-weight:600;
  padding:8px 10px;
  text-align:left;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
  font-size:0.63rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted2);
}
.ag-table td {
  padding:9px 10px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.ag-table tr:hover td {
  background:var(--row-hover);
}
.ag-table tr.row-error td {
  background:rgba(239, 68, 68, 0.06);
}

.ag-table .col-check {
  width:36px;
  text-align:center;
  vertical-align:middle;
  padding-left:10px;
  padding-right:6px;
}

.ag-table .row-check {
  width:15px;
  height:15px;
  accent-color:var(--accent);
  cursor:pointer;
}

/* ── MAIN ── */
.main { flex:1; overflow-y:auto; overflow-x:hidden; padding:32px 36px; scrollbar-width:thin; scrollbar-color:var(--surface2) transparent; }

/* ── PAGE HEADER ── */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--border); }

.page-header__eyebrow {
  font-size:0.65rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px; display:flex; align-items:center; gap:8px;
}
.page-header__eyebrow::before { content:''; display:block; width:16px; height:1px; background:var(--accent); }

.page-header__title {
  font-family:'Bebas Neue',sans-serif;
  font-size:2.2rem; letter-spacing:0.04em; color:var(--text); line-height:1;
}

.page-header__actions { display:flex; align-items:center; gap:10px; padding-top:4px; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px;
  border-radius:6px; font-family:'Outfit',sans-serif; font-size:0.82rem;
  font-weight:500; cursor:pointer; border:1px solid transparent;
  text-decoration:none; transition:all 0.2s; white-space:nowrap; line-height:1;
}
.btn:disabled { opacity:0.4; pointer-events:none; }
.btn-primary   { background:var(--accent); color:#0a0a0a; border-color:var(--accent); }
.btn-primary:hover { filter:brightness(1.1); }
.btn-secondary { background:var(--surface2); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { border-color:rgba(128,128,128,0.3); background:rgba(128,128,128,0.1); }
.btn-danger    { background:var(--danger-d); color:var(--danger); border-color:rgba(255,71,87,0.2); }
.btn-danger:hover { background:rgba(255,71,87,0.15); }
.btn-outline-primary { background:transparent; color:var(--accent); border-color:var(--accent-b); }
.btn-outline-primary:hover { background:var(--accent-d); }
.btn-sm { padding:5px 10px; font-size:0.78rem; }

/* ── FORMS ── */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-label { font-size:0.78rem; font-weight:600; letter-spacing:0.06em; color:var(--muted2); text-transform:uppercase; }
.form-control, .form-select {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; color:var(--text);
  font-family:'Outfit',sans-serif; font-size:0.88rem; padding:9px 12px;
  outline:none; transition:border-color 0.2s, box-shadow 0.2s; width:100%;
}
.form-control:focus, .form-select:focus { border-color:var(--accent-b); box-shadow:0 0 0 3px var(--accent-d); }
.form-control::placeholder { color:var(--muted); }
textarea.form-control { resize:vertical; min-height:80px; }
.form-select { appearance:none; background-image:var(--select-bg); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.form-check { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:6px; border:1px solid var(--border); background:var(--surface2); cursor:pointer; transition:border-color 0.2s; }
.form-check:hover { border-color:rgba(128,128,128,0.15); }
.form-check-input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.form-check-label { font-size:0.88rem; color:var(--text); cursor:pointer; }
.form-help { font-size:0.75rem; color:var(--muted); margin-top:6px; }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; }
thead th { background:var(--surface2); padding:11px 16px; font-size:0.63rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted2); border-bottom:1px solid var(--border); white-space:nowrap; text-align:left; }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--row-hover); }
tbody td { padding:13px 16px; font-size:0.875rem; color:var(--text); vertical-align:middle; }
.td-muted { color:var(--muted2); font-size:0.82rem; }
.td-mono { font-family:'Courier New',monospace; font-size:0.8rem; color:var(--muted2); }
.td-actions { display:flex; align-items:center; gap:8px; }
.td-empty { text-align:center; color:var(--muted); padding:40px 16px !important; font-size:0.85rem; }

/* ── BADGE ── */
.badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:3px; font-size:0.63rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.badge-accent { background:var(--accent-d); color:var(--accent); border:1px solid var(--accent-b); }
.badge-muted  { background:rgba(128,128,128,0.08); color:var(--muted2); border:1px solid var(--border); }
.badge-danger { background:var(--danger-d); color:var(--danger); border:1px solid rgba(220,38,38,0.2); }
.badge-success{ background:var(--success-d); color:var(--success); border:1px solid rgba(22,163,74,0.2); }

/* ── ALERT ── */
.alert { padding:12px 16px; border-radius:6px; font-size:0.875rem; margin-bottom:16px; }
.alert-success { background:var(--success-d); border:1px solid rgba(22,163,74,0.2); color:var(--success); }
.alert-danger  { background:var(--danger-d);  border:1px solid rgba(220,38,38,0.2);  color:var(--danger); }
.alert-info    { background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.2); color:#00d4ff; }

/* ── STAT CARD ── */
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px 24px; position:relative; overflow:hidden; transition:border-color 0.3s, background 0.3s; }
.stat-card:hover { border-color:var(--accent-b); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0; transition:opacity 0.3s; }
.stat-card:hover::before { opacity:0.5; }
.stat-card__label { font-size:0.63rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted2); margin-bottom:8px; }
.stat-card__value { font-family:'Bebas Neue',sans-serif; font-size:3rem; letter-spacing:0.05em; color:var(--text); line-height:1; }
.stat-card__link { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); text-decoration:none; transition:gap 0.2s; }
.stat-card__link:hover { gap:10px; }

/* ── SECTION TITLE ── */
.section-title { font-size:0.65rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted2); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.section-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── GRID ── */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:900px) { .grid-3,.grid-2 { grid-template-columns:1fr; } }

/* ── FORM SECTION ── */
.form-section { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:24px; margin-bottom:16px; transition:background 0.3s, border-color 0.3s; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }

/* ── CHIP ── */
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; background:var(--surface2); border:1px solid var(--border); border-radius:4px; font-size:0.78rem; color:var(--text); margin:2px; }
.chip-remove { background:none; border:none; color:var(--muted); cursor:pointer; padding:0; font-size:0.9rem; line-height:1; transition:color 0.2s; }
.chip-remove:hover { color:var(--danger); }

/* ── SEARCH BAR ── */
.filter-bar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.filter-bar .form-control, .filter-bar .form-select { width:auto; }
.filter-bar__search { flex:0 1 320px; min-width:200px; max-width:420px; }
.filter-bar__actions { margin-left:0; }

/* ── PAGINATION ── */
.pagination { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.pagination__info { font-size:0.78rem; color:var(--muted2); }
.pagination__buttons { display:flex; gap:8px; }

/* ── INLINE FORM ── */
.inline-form { display:inline; }

.toggle-section.hidden { display: none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--surface2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(128,128,128,0.15); }

/* ── ENTRY ANIMATION ── */
.main { animation:mainIn 0.5s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes mainIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ── BRAND BAR ── */
.brand-bar {
  display:flex; align-items:center; gap:12px; margin-bottom:1.5rem;
}
.brand-bar img {
  height:36px; width:36px; object-fit:contain; border-radius:6px;
  background:var(--surface); display:none;
}
.brand-bar span {
  font-size:20px; font-weight:700; color:var(--text);
}

/* ── CORNER BUTTONS ── */
.corner-buttons {
  position:fixed; top:20px; right:20px;
  display:flex; gap:10px; z-index:1000;
}
.corner-btn {
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); padding:8px 12px;
  border-radius:5px; cursor:pointer; font-size:12px;
  transition:background 0.2s;
}
.corner-btn:hover { background:var(--surface2); }

/* ── CONTAINER ── */
.container {
  max-width:1200px; margin:2rem auto; padding:0 1rem;
}

/* ── MODAL (base) ── */
.modal {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.7); justify-content:center; align-items:center;
  z-index:1050; overflow-y:auto; padding:20px;
}
.modal.active { display:flex; }
.modal-content {
  background:#fff; padding:30px; border-radius:12px;
  width:100%; max-width:500px; box-shadow:0 10px 40px rgba(0,0,0,0.3);
  position:relative; animation:modalFadeIn 0.3s ease-out;
  color:#212529;
}
.modal-content.wide { max-width:900px; }
.modal-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;
  padding-bottom:15px; border-bottom:1px solid #e0e0e0;
}
.modal-header h3 { color:#212529; margin:0; }
.close-btn, .modal-close {
  background:none; border:none; font-size:28px; font-weight:bold; cursor:pointer; color:#999;
  padding:0; line-height:1; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  transition:all 0.2s; position:absolute; top:15px; right:15px; z-index:10;
}
.close-btn:hover, .modal-close:hover { background:#f5f5f5; color:#333; }
.modal-body {
  max-height:70vh; overflow-y:auto; padding-right:10px;
}
.modal-footer {
  display:flex; justify-content:flex-end; gap:10px; margin-top:20px;
  padding-top:15px; border-top:1px solid #e0e0e0;
}

@keyframes modalFadeIn {
  from { opacity:0; transform:translateY(-20px); }
  to { opacity:1; transform:translateY(0); }
}

/* ── Bootstrap-like utilities (product cards + modal) ── */
.row { display:flex; flex-wrap:wrap; margin-left:-0.5rem; margin-right:-0.5rem; }
.row > * { padding-left:0.5rem; padding-right:0.5rem; box-sizing:border-box; }
.row.g-2 { --g:0.5rem; margin-left:calc(var(--g) * -0.5); margin-right:calc(var(--g) * -0.5); }
.row.g-2 > * { padding-left:calc(var(--g) * 0.5); padding-right:calc(var(--g) * 0.5); }
.col-3 { flex:0 0 25%; max-width:25%; }
.col-4 { flex:0 0 33.333%; max-width:33.333%; }
.col-6 { flex:0 0 50%; max-width:50%; }
.col-8 { flex:0 0 66.666%; max-width:66.666%; }
.col-12 { flex:0 0 100%; max-width:100%; }
@media (min-width:768px) {
  .col-md-6 { flex:0 0 50%; max-width:50%; }
}
.d-flex { display:flex !important; }
.d-block { display:block !important; }
.flex-column { flex-direction:column !important; }
.flex-wrap { flex-wrap:wrap !important; }
.flex-grow-1 { flex-grow:1 !important; }
.flex-shrink-0 { flex-shrink:0 !important; }
.align-items-start { align-items:flex-start !important; }
.align-items-center { align-items:center !important; }
.align-self-stretch { align-self:stretch !important; }
.justify-content-center { justify-content:center !important; }
.justify-content-between { justify-content:space-between !important; }
.gap-1 { gap:0.25rem !important; }
.gap-2 { gap:0.5rem !important; }
.gap-3 { gap:1rem !important; }
.w-100 { width:100% !important; }
.h-100 { height:100% !important; }
.min-width-0 { min-width:0 !important; }
.text-center { text-align:center !important; }
.text-muted { color:#6c757d !important; }
.text-dark { color:#212529 !important; }
.text-primary { color:#0d6efd !important; }
.text-break { word-break:break-word !important; }
.text-nowrap { white-space:nowrap !important; }
.text-uppercase { text-transform:uppercase !important; }
.fw-normal { font-weight:400 !important; }
.fw-medium { font-weight:500 !important; }
.fw-semibold { font-weight:600 !important; }
.fw-bold, .fw-bolder { font-weight:700 !important; }
.fs-4 { font-size:1.25rem !important; }
.fs-6 { font-size:1rem !important; }
.small { font-size:0.875em !important; }
.mb-0 { margin-bottom:0 !important; }
.mb-1 { margin-bottom:0.25rem !important; }
.mb-3 { margin-bottom:1rem !important; }
.mt-0 { margin-top:0 !important; }
.mt-1 { margin-top:0.25rem !important; }
.mt-2 { margin-top:0.5rem !important; }
.me-1 { margin-right:0.25rem !important; }
.me-2 { margin-right:0.5rem !important; }
.ms-1 { margin-left:0.25rem !important; }
.ms-2 { margin-left:0.5rem !important; }
.px-2 { padding-left:0.5rem !important; padding-right:0.5rem !important; }
.px-3 { padding-left:1rem !important; padding-right:1rem !important; }
.py-0 { padding-top:0 !important; padding-bottom:0 !important; }
.py-1 { padding-top:0.25rem !important; padding-bottom:0.25rem !important; }
.py-2 { padding-top:0.5rem !important; padding-bottom:0.5rem !important; }
.py-3 { padding-top:1rem !important; padding-bottom:1rem !important; }
.p-0 { padding:0 !important; }
.border-start { border-left:1px solid var(--border) !important; }
.border { border:1px solid #dee2e6 !important; }
.border-primary { border-color:#0d6efd !important; border-width:2px !important; }
.rounded { border-radius:0.375rem !important; }
.rounded-3 { border-radius:0.5rem !important; }
.shadow-sm { box-shadow:0 0.125rem 0.25rem rgba(0,0,0,0.075) !important; }
.img-fluid { max-width:100%; height:auto; }
.img-thumbnail { padding:0.15rem; background:#fff; border:1px solid #dee2e6; border-radius:0.25rem; }
.align-middle { vertical-align:middle !important; }
.table { width:100%; margin-bottom:0; border-collapse:collapse; color:#212529; }
.table-sm td, .table-sm th { padding:0.35rem 0.5rem; }
.table-bordered td, .table-bordered th { border:1px solid #dee2e6; }
.table-borderless td, .table-borderless th { border:0; }
.table-hover tbody tr:hover { background:#f8f9fa; }
.table-light { background:#f8f9fa; }
.sticky-top { position:sticky; top:0; z-index:5; }
.bg-light { background-color:#f8f9fa !important; }
.bg-warning { background-color:#ffc107 !important; }
.bg-primary { background-color:#0d6efd !important; }
.bg-secondary { background-color:#6c757d !important; }
.bg-success { background-color:#198754 !important; }
.text-white { color:#fff !important; }
.badge.bg-warning { color:#000 !important; font-weight:600; }
.badge.bg-primary, .badge.bg-secondary, .badge.bg-success { color:#fff !important; }
code { background:#f5f5f5; padding:2px 6px; border-radius:4px; font-size:0.9em; color:#0d6efd; }
.form-control-sm { padding:6px 16px; font-size:0.875rem; border-radius:20px; }
.btn-light { background:#f8f9fa; color:#212529; border:1px solid #dee2e6; }
.btn-light:hover { background:#e9ecef; }
.btn-outline-primary { background:transparent; color:#0d6efd; border:1px solid #0d6efd; }
.btn-outline-primary:hover { background:#0d6efd; color:#fff; }
.btn-outline-primary:disabled { opacity:0.45; pointer-events:none; }

/* ── Product enhanced modal (Odoo catalogue pièce) ── */
.modal.product-enhanced-modal-backdrop {
  overflow:hidden; align-items:center; justify-content:center;
  padding:min(16px, 3vh);
}
.modal-content.product-enhanced-modal.modal-xl,
.modal-content.product-enhanced-modal {
  max-width:1400px;
  height:min(88vh, 94dvh);
  max-height:min(94vh, calc(100dvh - 20px));
  display:flex; flex-direction:column;
  padding:12px 16px 14px;
  overflow:hidden !important;
  border:2px solid #e0e0e0;
  background:#fff;
  color:#212529;
}
.product-enhanced-modal #modalBody,
.product-enhanced-modal #vehiclesModalBody {
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden;
}
.product-enhanced-modal-title {
  display:flex; align-items:center; flex-wrap:wrap; gap:4px;
  font-size:1.25rem; font-weight:600; color:#212529;
}
.product-enhanced-modal-subtitle {
  line-height:1.25; color:#6c757d; font-weight:400;
}
.product-enhanced-modal .badge {
  display:inline-flex; align-items:center; padding:6px 12px;
  font-size:0.85em; font-weight:500; border-radius:6px;
  letter-spacing:normal; text-transform:none;
}
.product-enhanced-modal .nav-tabs {
  display:flex; list-style:none; margin:0 0 0.35rem; padding:0;
  border-bottom:2px solid #dee2e6; flex-shrink:0;
}
.product-enhanced-modal .nav-tabs .nav-item { margin-bottom:-2px; }
.product-enhanced-modal .nav-tabs .nav-link {
  border:none; color:#6c757d; padding:6px 14px; font-size:0.9rem;
  cursor:pointer; background:none; position:relative;
  font-family:inherit; transition:color 0.2s, background 0.2s;
}
.product-enhanced-modal .nav-tabs .nav-link:hover { color:#0d6efd; background:#f8f9fa; }
.product-enhanced-modal .nav-tabs .nav-link.active {
  color:#0d6efd; font-weight:600;
}
.product-enhanced-modal .nav-tabs .nav-link.active::after {
  content:""; position:absolute; bottom:-2px; left:0; right:0;
  height:3px; background:#0d6efd;
}
.product-enhanced-modal .nav-tabs .badge {
  font-size:0.75em; padding:3px 6px; margin-left:4px;
}
.product-enhanced-tab-shell {
  flex:1 1 auto; display:flex; flex-direction:column;
  min-height:0; overflow:hidden; padding-top:4px; width:100%;
}
.product-enhanced-tab-shell > .tab-pane {
  flex:1 1 auto; display:flex; flex-direction:column;
  min-height:0; overflow:hidden; animation:fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
.product-enhanced-info-grid {
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column;
}
.product-enhanced-grid-row-top {
  flex:1 1 0%; flex-shrink:0;
  min-height:clamp(220px, 34vh, 400px); overflow:hidden;
}
.product-enhanced-grid-row-bottom { flex:0 0 auto; }
.product-enhanced-gallery-col,
.product-enhanced-info-col {
  display:flex; flex-direction:column; min-height:0; min-width:0;
  align-self:stretch; flex:1 1 0%;
}
.product-enhanced-modal .card {
  border:1px solid #e0e0e0; border-radius:8px; overflow:hidden;
  background:#fff; box-shadow:none; padding:0; margin:0;
}
.product-enhanced-modal .card-header {
  border-bottom:1px solid #e0e0e0; font-weight:600;
}
.product-enhanced-modal .card-header h6 {
  margin:0; font-size:0.85rem; color:#212529;
}
.product-enhanced-gallery-card {
  min-height:0; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden;
}
.product-enhanced-gallery-card .product-enhanced-gallery-block {
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
}
.product-enhanced-info-card-scroll {
  display:flex; flex-direction:column; flex:1 1 auto;
  min-height:0; height:100%; overflow:hidden;
}
.product-enhanced-info-card-scroll .product-enhanced-info-card-body {
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:10px 12px;
}
.product-enhanced-info-table { border-collapse:collapse; width:100%; }
.product-enhanced-info-table tbody tr { border-bottom:1px solid #e9ecef; }
.product-enhanced-info-table .product-enhanced-info-label {
  width:42%; padding-right:0.5rem; vertical-align:top;
}
.product-enhanced-info-table.table-sm td {
  padding:0.45rem 0.65rem 0.45rem 0; vertical-align:top;
  font-size:0.875rem; line-height:1.4; color:#212529;
}
.product-enhanced-info-desc {
  white-space:pre-wrap; line-height:1.45; font-size:0.875rem;
  max-height:min(40vh, 320px); overflow-y:auto;
}
.product-enhanced-oem-fill.card {
  display:flex; flex-direction:column; overflow:hidden;
  max-height:260px;
}
.product-enhanced-oem-body {
  padding:0; min-height:0; flex:1 1 auto;
  display:flex; flex-direction:column; overflow:hidden;
}
.product-oem-table-scroll,
.product-criteria-grid-table-scroll {
  flex:1 1 auto; min-height:0;
  max-height:min(42vh, 420px);
  overflow-y:auto; overflow-x:hidden;
}
.product-oem-table td,
.product-criteria-table td {
  font-size:0.875rem; padding:0.35rem 0.5rem; color:#212529;
}
.product-enhanced-criteria-grid-cell { align-self:flex-start; min-width:0; }
.product-enhanced-criteria-grid-card {
  display:flex; flex-direction:column; width:100%;
}
.product-enhanced-subtab-fill {
  flex:1 1 auto; min-height:0; overflow:hidden;
  display:flex; flex-direction:column;
}
.product-enhanced-vehicles-scroll {
  flex:1 1 auto; min-height:0; max-height:100%;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.product-enhanced-vehicles-scroll .table thead th {
  font-weight:600; text-transform:uppercase; font-size:0.85em;
  letter-spacing:0.5px; color:#495057; background:#f8f9fa;
  box-shadow:0 2px 4px rgba(0,0,0,0.06);
}
.product-enhanced-vehicles-scroll .table td {
  font-size:0.875rem; color:#212529; padding:8px 12px;
}
.vehicle-title strong { color:#007bff; margin-right:4px; }
.vehicle-search-input {
  border:1px solid #dee2e6; background:#fff; color:#212529;
  max-width:300px;
}
.no-image-placeholder {
  width:150px; height:150px; background:#f8f9fa; color:#6c757d;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; margin:0 auto; font-size:0.85rem;
}

@media (max-width:768px) {
  .modal-content.product-enhanced-modal {
    max-width:95vw; height:min(94vh, 96dvh); padding:12px;
  }
  .product-enhanced-modal .nav-tabs .nav-link {
    padding:8px 10px; font-size:0.85em;
  }
  .col-3, .col-6 { flex:0 0 100%; max-width:100%; }
}

/* ── PASSWORD TOGGLE ── */
.password-container { position:relative; }
.password-toggle {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:14px; padding:5px;
}
.password-toggle:hover { color:var(--text); }

/* ── MESSAGE ── */
.message {
  padding:10px; border-radius:5px; margin-bottom:20px; display:none;
}
.message.error {
  background:var(--danger-d); color:var(--danger); border:1px solid var(--danger);
}
.message.success {
  background:var(--success-d); color:var(--success); border:1px solid var(--success);
}
.message.info {
  background:rgba(0,212,255,0.08); color:#00d4ff; border:1px solid rgba(0,212,255,0.2);
}

/* ── LOADING & EMPTY STATES ── */
.loading { text-align:center; padding:20px; color:var(--muted); }
.empty-state { text-align:center; padding:40px; color:var(--muted); }

/* ── ROLE BADGES ── */
.role-badge {
  padding:5px 10px; border-radius:15px; font-size:12px; font-weight:600;
}
.role-admin { background:var(--accent-d); color:var(--accent); }
.role-client { background:rgba(128,128,128,0.08); color:var(--muted2); }

/* ── ACTIVE BADGES ── */
.active-badge {
  padding:5px 10px; border-radius:15px; font-size:12px; font-weight:600;
}
.active-yes { background:var(--success-d); color:var(--success); }
.active-no { background:var(--danger-d); color:var(--danger); }

/* ── ACTION BUTTONS ── */
.action-btn {
  padding:5px 10px; border:none; border-radius:5px; cursor:pointer;
  margin-right:5px; font-size:12px; transition:background 0.3s;
}
.edit-btn { background:var(--accent-d); color:var(--accent); }
.edit-btn:hover { background:var(--accent-b); }
.delete-btn { background:var(--danger-d); color:var(--danger); }
.delete-btn:hover { background:rgba(255,71,87,0.15); }

/* ── COMPANY CARD ── */
.companies-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px; margin-top:10px;
}
.company-card {
  border-radius:10px; padding:18px; cursor:pointer;
  color:var(--text); box-shadow:0 2px 10px rgba(0,0,0,0.15);
  transition:transform 0.15s; position:relative; min-height:100px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.company-card:hover { transform:translateY(-3px); }
.company-card .company-logo {
  width:32px; height:32px; border-radius:6px;
  background:rgba(255,255,255,0.9); object-fit:contain;
  margin-bottom:8px; display:none;
}
.company-card .company-name { font-size:16px; font-weight:700; }
.company-card .company-meta { font-size:12px; opacity:0.85; margin-top:6px; }
.company-card-add {
  border:2px dashed var(--border); background:var(--surface2);
  color:var(--text); display:flex; align-items:center; justify-content:center;
  font-weight:600; border-radius:10px; cursor:pointer; min-height:100px;
}
.company-card-add:hover { background:var(--surface); }

/* ── CARD ── */
.card {
  background:var(--surface); border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1); padding:30px; margin-bottom:20px;
}
.card h2 { color:var(--text); margin-bottom:20px; font-size:20px; }

/* ── UPLOAD AREA ── */
.upload-area {
  border:2px dashed var(--border); border-radius:10px; padding:40px;
  text-align:center; cursor:pointer; transition:border-color 0.3s, background 0.3s;
}
.upload-area:hover { border-color:var(--accent); background:var(--surface2); }
.upload-area.dragover { border-color:var(--accent); background:var(--accent-d); }
.upload-area p { color:var(--muted); margin-bottom:10px; }
.upload-area input { display:none; }

/* ── FILE INFO ── */
.file-info {
  margin-top:20px; padding:15px; background:var(--surface2);
  border-radius:5px; display:none;
}
.file-info.active { display:block; }
.file-info p { color:var(--text); margin-bottom:5px; }

/* ── PROGRESS BAR ── */
.progress-bar {
  width:100%; height:30px; background:var(--surface2);
  border-radius:5px; overflow:hidden; margin-bottom:10px;
}
.progress-fill {
  height:100%; background:var(--accent); transition:width 0.3s;
  display:flex; align-items:center; justify-content:center; color:var(--bg);
  font-size:12px;
}
.progress-text { color:var(--muted); font-size:14px; }

/* ── STATUS BADGE ── */
.status-badge {
  padding:4px 8px; border-radius:12px; font-size:11px; font-weight:600;
}
.status-pending { background:#fff3e0; color:#e65100; }
.status-processing { background:#e3f2fd; color:#1976d2; }
.status-completed { background:var(--success-d); color:var(--success); }
.status-error { background:var(--danger-d); color:var(--danger); }

/* ── PREVIEW DATA ── */
.preview-data {
  max-height:300px; overflow-y:auto; margin-top:15px;
  border:1px solid var(--border); border-radius:5px;
}
.preview-table { width:100%; border-collapse:collapse; }
.preview-table th, .preview-table td {
  padding:8px; text-align:left; border-bottom:1px solid var(--border);
  font-size:12px;
}
.preview-table th {
  background:var(--surface2); font-weight:600; position:sticky; top:0;
}

/* ── LOGIN CONTAINER ── */
.login-container {
  background:var(--surface); padding:40px; border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1); width:100%; max-width:400px;
}
.login-header { text-align:center; margin-bottom:30px; }
.login-header h1 { color:var(--text); font-size:28px; margin-bottom:10px; }
.login-header p { color:var(--muted); font-size:14px; }
.login-btn {
  width:100%; padding:12px; background:var(--accent); color:var(--bg);
  border:none; border-radius:5px; font-size:16px; font-weight:600;
  cursor:pointer; transition:background 0.2s;
}
.login-btn:hover { filter:brightness(1.1); }
.login-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

/* ── LOADING SPINNER ── */
.loading-spinner {
  display:inline-block; width:20px; height:20px; border:2px solid var(--accent);
  border-radius:50%; border-top-color:transparent;
  animation:spin 0.8s linear infinite; margin-right:10px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── PRODUCT CARDS (Odoo-style) ── */
.products-container {
  display:flex; flex-direction:column; gap:12px; margin-top:16px;
}

.product-card {
  animation:cardIn 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.product-card .card {
  background:#fff; border:1px solid #e0e0e0;
  border-radius:8px; padding:0; margin-bottom:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.08); transition:box-shadow 0.2s, border-color 0.2s;
  color:#212529;
}
.product-card .card:hover {
  box-shadow:0 4px 12px rgba(0,0,0,0.12); border-color:#c5c9d1;
}
.product-card .card-body {
  padding:12px 16px;
}
.product-card .text-dark { color:#212529 !important; }
.product-card .text-muted { color:#6c757d !important; }

.product-card.error-card .card {
  background:var(--danger-d); border-color:rgba(220,38,38,0.2);
}

/* Product details column */
.product-details {
  padding:0;
}

.image-container {
  position:relative;
}

.image-controls {
  display:flex; gap:3px; margin-left:2px; margin-top:4px;
}

.image-button {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:3px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:background 0.2s, border-color 0.2s;
}
.image-button:hover {
  background:var(--accent-d); border-color:var(--accent-b);
}

.product-image {
  cursor:pointer; transition:opacity 0.2s;
}
.product-image:hover {
  opacity:0.85;
}

.product-title-link {
  color:#3A59D1; transition:text-decoration 0.2s;
}
.product-title-link:hover {
  text-decoration:underline;
}

/* Specs container (similar to Odoo's specs-container) */
.specs-container {
  margin-top:8px; padding:8px 12px;
  background:var(--surface2); border-radius:4px;
  border:1px solid var(--border);
}

.spec-row {
  margin-bottom:4px; font-size:0.75rem; line-height:1.4;
  color:var(--text);
}
.spec-row:last-child {
  margin-bottom:0;
}
.spec-row strong {
  color:var(--muted2); font-weight:600;
}

/* Article criteria inline (similar to Odoo's article-criteria-inline) */
.article-criteria-inline {
  display:flex; flex-wrap:wrap; gap:8px;
  text-align:justify; line-height:1.4;
}

.article-criteria-pair {
  display:inline; font-size:0.75rem; color:var(--text);
}

.article-criteria-pair strong {
  font-weight:600; color:var(--muted2);
}

/* Responsive adjustments */
@media (max-width:768px) {
  .product-card .card-body .row {
    flex-direction:column;
  }
  .product-card .card-body .col-6,
  .product-card .card-body .col-3 {
    width:100%; border:none !important;
    padding:8px 0;
  }
  .product-card .card-body .col-3 {
    border-top:1px solid var(--border) !important;
    padding-top:12px;
  }
}