:root {
  --charcoal-950: #17222b;
  --charcoal-900: #202f3a;
  --charcoal-800: #2b3d49;
  --charcoal-700: #3c505d;
  --steel-blue: #3d7297;
  --steel-blue-dark: #315f7e;
  --steel-blue-soft: #dce8f0;
  --surface: #ffffff;
  --page: #edf2f5;
  --border: #d5dee4;
  --text: #243540;
  --muted: #6b7c87;
}

html { font-size: 14px; }

body {
  background: var(--page);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.navbar.bg-primary {
  background: linear-gradient(110deg, var(--charcoal-950), var(--charcoal-800)) !important;
  border-bottom: 3px solid var(--steel-blue);
}

.app-header { z-index: 1040; }
.demo-software-notice { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: .55rem 1rem; color: #dceaf2; background: linear-gradient(90deg, #29495e, #315f7e, #29495e); border-bottom: 1px solid rgba(255,255,255,.18); text-align: center; }
.demo-software-notice strong { margin-inline-end: .35rem; color: #fff; }
.demo-software-notice-icon { display: inline-grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; color: #24445a; background: #dcecf6; border-radius: 50%; font-family: Georgia, serif; font-weight: 800; }

.navbar-brand { letter-spacing: .015em; }
.company-navbar-brand { display: flex; align-items: center; gap: .65rem; font-weight: 650; }
.company-navbar-brand img { width: 48px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.22)); }

.sidebar {
  width: 250px;
  min-height: calc(100vh - 56px);
  background: var(--charcoal-900) !important;
  border-color: var(--charcoal-700) !important;
}

.sidebar .offcanvas-header,
.sidebar .offcanvas-header h5 { color: #f5f8fa; }
.sidebar .btn-close { filter: invert(1) grayscale(1); }

.sidebar .nav-link {
  color: #c9d5dc;
  border-radius: .45rem;
  padding: .68rem .85rem;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  color: #fff;
  background: var(--charcoal-800);
  transform: translateX(2px);
}

[dir="rtl"] .sidebar .nav-link:hover,
[dir="rtl"] .sidebar .nav-link:focus { transform: translateX(-2px); }
.sidebar hr { border-color: #526673; opacity: .7; }
.sidebar .contact-toggle { display: flex; width: 100%; align-items: center; gap: .65rem; border: 0; background: transparent; text-align: start; }
.contact-toggle-icon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; color: #dcecf6; background: rgba(143,192,223,.18); border-radius: 50%; }
.contact-toggle-chevron { margin-inline-start: auto; font-size: 1.1rem; transition: transform .3s ease; }
.contact-toggle:not(.collapsed) .contact-toggle-chevron { transform: rotate(180deg); }
.sidebar-contact-card { position: relative; margin: .45rem .2rem .35rem; padding: 1.15rem 1rem; overflow: hidden; color: #e8f0f5; background: linear-gradient(145deg, #2b4353, #1b2b36); border: 1px solid rgba(143,192,223,.35); border-radius: .75rem; box-shadow: 0 .8rem 1.6rem rgba(5,12,17,.25); animation: contactCardReveal .42s ease both; }
.sidebar-contact-glow { position: absolute; width: 110px; height: 110px; inset-block-start: -65px; inset-inline-end: -45px; background: rgba(92,161,204,.3); border-radius: 50%; filter: blur(2px); pointer-events: none; }
.sidebar-contact-kicker { display: block; position: relative; margin-bottom: .2rem; color: #8fc0df; font-size: .65rem; font-weight: 800; letter-spacing: .13em; }
.sidebar-contact-name { display: block; position: relative; margin-bottom: .8rem; color: #fff; font-size: 1.15rem; }
.sidebar-contact-item { display: flex; position: relative; align-items: center; gap: .65rem; margin-top: .55rem; padding: .55rem .6rem; color: #edf6fb; background: rgba(255,255,255,.06); border-radius: .5rem; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.sidebar-contact-item:hover, .sidebar-contact-item:focus { color: #fff; background: rgba(143,192,223,.18); transform: translateY(-2px); }
.sidebar-contact-item small { display: block; color: #a8c2d2; font-size: .67rem; }
.sidebar-contact-whatsapp { background: rgba(37,211,102,.11); border: 1px solid rgba(37,211,102,.22); }
.sidebar-contact-whatsapp:hover, .sidebar-contact-whatsapp:focus { background: rgba(37,211,102,.22); }
.whatsapp-mark { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; color: #fff; background: #25d366; border-radius: 50%; box-shadow: 0 .18rem .45rem rgba(0,0,0,.2); }
.whatsapp-mark svg { display: block; width: 21px; height: 21px; fill: currentColor; }
@keyframes contactCardReveal { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .sidebar-contact-card { animation: none; } .contact-toggle-chevron, .sidebar-contact-item { transition: none; } }
@media (max-width: 767.98px) { .demo-software-notice { align-items: flex-start; padding: .55rem .75rem; font-size: .78rem; text-align: start; } .demo-software-notice strong, .demo-software-notice span { display: block; } }
@media (max-width: 767.98px) { .visitor-log-heading { align-items: start; flex-direction: column; } .visitor-log-total { text-align: start; } .visitor-details[open] dl { position: fixed; inset: 15% 5% auto; width: 90%; max-height: 70vh; overflow: auto; } }
.content { min-width: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--charcoal-900); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .65rem;
  box-shadow: 0 .2rem .7rem rgba(28, 47, 59, .07);
}

.table { --bs-table-color: var(--text); --bs-table-hover-bg: #f1f6f9; }
.table thead th { color: var(--charcoal-700); background: #e7eef2; border-bottom-color: #c8d4dc; }
.table > :not(caption) > * > * { vertical-align: middle; }

.btn-primary,
.btn-success {
  --bs-btn-bg: var(--steel-blue);
  --bs-btn-border-color: var(--steel-blue);
  --bs-btn-hover-bg: var(--steel-blue-dark);
  --bs-btn-hover-border-color: var(--steel-blue-dark);
  --bs-btn-active-bg: var(--charcoal-700);
  --bs-btn-active-border-color: var(--charcoal-700);
}

.btn-outline-primary {
  --bs-btn-color: var(--steel-blue-dark);
  --bs-btn-border-color: var(--steel-blue);
  --bs-btn-hover-bg: var(--steel-blue);
  --bs-btn-hover-border-color: var(--steel-blue);
}

.nav-pills { --bs-nav-pills-link-active-bg: var(--steel-blue); }
a { color: var(--steel-blue-dark); }
a:hover { color: var(--charcoal-800); }

.form-control:focus,
.form-select:focus {
  border-color: #79a0ba;
  box-shadow: 0 0 0 .2rem rgba(61, 114, 151, .18);
}

.badge.bg-success { background-color: var(--steel-blue) !important; }
.alert-info { color: var(--charcoal-800); background: var(--steel-blue-soft); border-color: #bad0df; }
.text-muted { color: var(--muted) !important; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.print-only { display: none; }

.car-gallery-main {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--charcoal-950);
  border: 0;
  border-radius: .75rem;
  cursor: zoom-in;
}
.car-gallery-main img { display: block; width: 100%; max-height: 640px; object-fit: contain; }
.car-gallery-hint { position: absolute; inset-inline-end: 1rem; bottom: 1rem; padding: .45rem .7rem; color: #fff; background: rgba(23,34,43,.82); border-radius: .4rem; }
.car-gallery-thumbs { display: grid; grid-template-columns: repeat(6, minmax(85px, 1fr)); gap: .65rem; margin-top: .75rem; overflow-x: auto; }
.car-gallery-thumb { padding: 0; overflow: hidden; background: var(--charcoal-900); border: 3px solid transparent; border-radius: .5rem; opacity: .72; }
.car-gallery-thumb.active { border-color: var(--steel-blue); opacity: 1; }
.car-gallery-thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.car-lightbox { position: fixed; z-index: 2000; inset: 0; display: grid; grid-template: auto 1fr / auto 1fr auto; background: rgba(8,13,17,.96); color: #fff; }
.car-lightbox[hidden] { display: none; }
.car-lightbox-toolbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; background: rgba(23,34,43,.94); }
.car-lightbox-toolbar button { min-width: 42px; height: 42px; color: #fff; background: var(--charcoal-800); border: 1px solid var(--charcoal-700); border-radius: .4rem; font-size: 1.25rem; }
.car-lightbox-stage { overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pan-x pan-y; }
.car-lightbox-stage img { display: block; max-width: none; max-height: none; transform-origin: center; cursor: zoom-in; transition: width .12s ease; }
.car-lightbox-nav { align-self: center; z-index: 1; width: 52px; height: 70px; color: #fff; background: rgba(43,61,73,.85); border: 0; font-size: 2rem; }
body.gallery-open { overflow: hidden; }
.photo-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .85rem; }
.photo-manage-card { overflow: hidden; border: 2px solid var(--border); border-radius: .6rem; background: #f8fafb; transition: opacity .15s ease, border-color .15s ease; }
.photo-manage-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.photo-manage-card.marked-delete { opacity: .45; border-color: var(--bs-danger); }
.photo-new-preview { display: flex; flex-wrap: wrap; gap: .65rem; }
.photo-new-preview img { width: 150px; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid var(--steel-blue); border-radius: .5rem; }
.car-brand-cell { display: flex; align-items: center; gap: .65rem; min-width: 180px; }
.car-brand-cell img { width: 38px; height: 38px; object-fit: contain; }
.car-brand-logo { width: 58px; height: 58px; object-fit: contain; flex: 0 0 auto; }

.inventory-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin: -1rem -1rem 0;
  padding: 3.5rem clamp(1.25rem, 4vw, 4rem) 5.25rem;
  color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(89,147,185,.42), transparent 31%), linear-gradient(125deg, #14212a 0%, #223b4c 62%, #315f7e 100%);
  border-radius: 0 0 1.25rem 1.25rem;
}
.inventory-hero h1 { max-width: 760px; margin: .4rem 0 .65rem; color: #fff; font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 750; letter-spacing: -.035em; }
.inventory-hero p { margin: 0; color: #d8e5ec; font-size: 1.08rem; }
.inventory-hero-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; color: #fff; font-size: 1.05rem; font-weight: 700; }
.inventory-hero-brand img { width: 86px; height: 58px; object-fit: contain; filter: drop-shadow(0 .3rem .5rem rgba(0,0,0,.3)); }
.inventory-kicker { color: #8fc0df; font-size: .78rem; font-weight: 800; letter-spacing: .18em; }
.inventory-hero-count { display: flex; flex-direction: column; min-width: 130px; text-align: end; color: #d8e5ec; }
.inventory-hero-count strong { color: #fff; font-size: 2.5rem; line-height: 1; }
.demo-links { display: flex; position: relative; z-index: 3; align-items: center; justify-content: space-between; gap: 1rem; margin: -2.15rem auto 3rem; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--border); border-radius: .9rem; box-shadow: 0 .8rem 2rem rgba(20,36,47,.16); }
.demo-links-copy { display: flex; align-items: center; gap: .85rem; }
.demo-links-copy strong, .demo-links-copy span { display: block; }
.demo-links-copy strong { color: var(--charcoal-900); font-size: 1rem; }
.demo-links-copy span { color: var(--muted); font-size: .88rem; }
.demo-links-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; color: #fff; background: var(--steel-blue); border-radius: 50%; font-size: .85rem; }
.demo-links-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.inventory-search-panel { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(260px, 2fr) minmax(160px, 1fr) minmax(160px, 1fr) auto; align-items: end; gap: .8rem; margin: -2.1rem auto 2rem; padding: 1.15rem; background: #fff; border: 1px solid var(--border); border-radius: .9rem; box-shadow: 0 .8rem 2rem rgba(20,36,47,.16); }
.inventory-search-panel label { display: block; margin-bottom: .35rem; color: var(--charcoal-700); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.inventory-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.inventory-toolbar span { color: var(--muted); }
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.vehicle-card { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: .9rem; box-shadow: 0 .25rem .9rem rgba(28,47,59,.08); transition: transform .18s ease, box-shadow .18s ease; }
.vehicle-card:hover { transform: translateY(-4px); box-shadow: 0 .8rem 1.6rem rgba(28,47,59,.14); }
.vehicle-card-image { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--charcoal-900); }
.vehicle-photo { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.vehicle-card:hover .vehicle-photo { transform: scale(1.035); }
.vehicle-photo-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #aec0ca; }
.vehicle-brand-badge { position: absolute; z-index: 2; inset-block-start: .75rem; inset-inline-start: .75rem; display: grid; width: 54px; height: 54px; padding: .4rem; place-items: center; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; box-shadow: 0 .25rem .7rem rgba(11,21,28,.24); }
.vehicle-brand-badge img { width: 100%; height: 100%; object-fit: contain; }
.vehicle-status { position: absolute; z-index: 2; inset-block-start: .85rem; inset-inline-end: .75rem; padding: .35rem .65rem; color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.vehicle-status.available { background: #34745e; }
.vehicle-status.sold { background: #5c6670; }
.vehicle-photo-count { position: absolute; inset-inline-end: .75rem; bottom: .7rem; padding: .25rem .5rem; color: #fff; background: rgba(17,29,37,.75); border-radius: .35rem; font-size: .75rem; }
.vehicle-card-body { padding: 1rem 1.05rem 1.1rem; }
.vehicle-stock { color: var(--steel-blue); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.report-company-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding: 1rem 1.2rem; background: linear-gradient(120deg, #fff, #edf4f8); border: 1px solid var(--border); border-inline-start: 5px solid var(--steel-blue); border-radius: .75rem; box-shadow: 0 .25rem .8rem rgba(28,47,59,.08); }
.report-company-brand img { width: 92px; height: 62px; object-fit: contain; }
.report-company-brand strong, .report-company-brand span { display: block; }
.report-company-brand strong { color: var(--charcoal-900); font-size: 1.2rem; }
.report-company-brand span { color: var(--muted); }
.document-company-brand img { width: 135px; height: 88px; object-fit: contain; }
.document-company-brand h1 { margin: .35rem 0 .15rem; font-size: 1.65rem; }

.visitor-log-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding: 1.5rem; color: #fff; background: linear-gradient(125deg, var(--charcoal-950), var(--steel-blue-dark)); border-radius: .85rem; }
.visitor-log-heading h1 { margin: .2rem 0; color: #fff; }
.visitor-log-heading p { margin: 0; color: #d8e5ec; }
.visitor-log-kicker { color: #9fcae4; font-size: .7rem; font-weight: 800; letter-spacing: .13em; }
.visitor-log-total { display: flex; flex-direction: column; text-align: end; color: #d8e5ec; }
.visitor-log-total strong { color: #fff; font-size: 2rem; line-height: 1; }
.visitor-log-table-wrap { overflow: visible; }
.visitor-log-table { font-size: .86rem; }
.visitor-path { display: inline-block; max-width: 260px; overflow: hidden; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; }
.visitor-status { display: inline-block; min-width: 42px; padding: .25rem .45rem; color: #fff; border-radius: 999px; text-align: center; font-weight: 700; }
.visitor-status.ok { background: #34745e; }
.visitor-status.error { background: #a74646; }
.visitor-details { position: relative; }
.visitor-details summary { color: var(--steel-blue-dark); cursor: pointer; font-weight: 700; }
.visitor-details[open] dl { position: absolute; z-index: 10; inset-inline-end: 0; width: min(520px, 80vw); margin-top: .45rem; padding: 1rem; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: .65rem; box-shadow: 0 .8rem 2rem rgba(20,36,47,.2); }
.visitor-details dt { margin-top: .45rem; color: var(--charcoal-700); font-size: .72rem; text-transform: uppercase; }
.visitor-details dd { margin-bottom: .3rem; overflow-wrap: anywhere; }

@media print {
  .report-company-brand { margin-bottom: 8mm; padding: 3mm 4mm; box-shadow: none; break-inside: avoid; }
  .report-company-brand img { width: 28mm; height: 18mm; }
  .document-company-brand img { width: 36mm; height: 24mm; }
  .document-company-brand h1 { font-size: 18pt; }
}
.vehicle-card h2 { margin: .25rem 0 .7rem; font-size: 1.2rem; }
.vehicle-card h2 a { color: var(--charcoal-900); text-decoration: none; }
.vehicle-specs { display: flex; flex-wrap: wrap; gap: .4rem; }
.vehicle-specs span { display: flex; flex-direction: column; min-width: 72px; padding: .35rem .55rem; color: var(--charcoal-700); background: #edf3f6; border-radius: .35rem; font-size: .8rem; font-weight: 650; }
.vehicle-specs small { color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.vehicle-specs .vehicle-mileage { min-width: 110px; }
.vehicle-card-footer { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.vehicle-card-footer div { display: flex; flex-direction: column; }
.vehicle-card-footer small { color: var(--muted); }
.vehicle-card-footer strong { color: var(--charcoal-900); font-size: 1.05rem; }
.inventory-empty { padding: 4rem 1rem; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--border); border-radius: .9rem; }
.inventory-pagination { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }

@media (max-width: 991.98px) { .inventory-search-panel { grid-template-columns: 1fr 1fr; } .inventory-search-main { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .sidebar { min-height: auto; } .car-gallery-thumbs { grid-template-columns: repeat(6, 105px); } .car-lightbox-nav { width: 40px; } .inventory-hero { align-items: start; flex-direction: column; padding-top: 2.4rem; } .inventory-hero-count { text-align: start; } .demo-links { align-items: stretch; flex-direction: column; } .demo-links-actions .btn { flex: 1 1 150px; } .inventory-search-panel { grid-template-columns: 1fr; } .inventory-search-main { grid-column: auto; } }

@media print {
  header, .sidebar, .no-print, .btn, form.filters { display: none !important; }
  .content { padding: 0 !important; }
  .card { box-shadow: none; border-color: #bbb; }
  .print-only { display: block; }
  body { background: #fff; font-size: 11pt; }
}