/* ================================
   Salsan Enterprise – style.css
   Navy Duo Theme (Dark + Light)
   ================================ */

/* ---------- THEME TOKENS (default = DARK NAVY) ---------- */
:root{
  /* Core palette */
  --bg:#0b1220;
  --card:#0f1623;
  --text:#e9eef7;
  --muted:#9fb0c6;
  --brand:#6ea1ff;        /* primary / buttons */
  --accent:#22c178;       /* price green */

  /* Surfaces & borders */
  --border:#1b2a42;
  --surface-2:#0e1320;
  --input:#0f1422;
  --input-border:#243552;

  /* Focus / hero */
  --hero-start:#0d1b2a;
  --hero-end:#0b1220;
  --ring:#284a7b;

  /* Status */
  --danger:#ff6b6b;
  --warning:#f0ad4e;
}

/* ---------- BADGES ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem; border-radius:.5rem; font-size:.75rem; font-weight:700;
}
.badge.delivered{ background:#13351e; color:#baf3c0; border:1px solid #1e5d33; }

/* Optional overlay badge */
.detail-gallery{ position:relative; }
.detail-gallery .status-badge{ position:absolute; top:.5rem; left:.5rem; }
.card .img-wrap{ position:relative; }
.card .status-badge{ position:absolute; top:.5rem; left:.5rem; }

/* ---------- RESET / BASE ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background:var(--bg);
  color:var(--text);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- LAYOUT HELPERS ---------- */
.container{ max-width:1100px; margin:0 auto; padding:1rem; }
.flex{ display:flex; }
.between{ justify-content:space-between; }
.center{ align-items:center; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; }
@media (max-width:900px){ .grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; } }

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(180deg, rgba(23,34,56,.9), rgba(18,27,44,.9));
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(6px);
}
.header-row{
  display:grid; align-items:center; gap:.75rem;
  grid-template-columns:200px 1fr auto; /* brand | search | links/toggle */
}
.brand{ font-weight:700; font-size:1.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.search{ display:flex; gap:.5rem; }
.search input{
  flex:1; min-width:0; padding:.5rem .75rem;
  border-radius:.5rem; border:1px solid var(--input-border);
  background:var(--input); color:var(--text);
}
.search input:focus{
  outline:0; border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);
}
.search button,.btn{
  padding:.6rem 1rem; border-radius:.6rem; background:var(--brand);
  border:none; color:#07101e; font-weight:700; cursor:pointer;
}

.nav-links{ display:flex; gap:1rem; }
.nav-links a{ opacity:.9; }
.nav-links a:hover{ opacity:1; }

/* Theme toggle pill */
#themeToggle{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06));
  padding:.35rem .6rem; border-radius:999px; margin-left:.5rem;
}

/* Hamburger (hidden on desktop) */
.mobile-toggle{
  display:none; width:38px; height:34px; border:1px solid var(--input-border); border-radius:.5rem;
  background:var(--input); cursor:pointer; align-items:center; justify-content:center; gap:4px;
}
.mobile-toggle span{ display:block; width:18px; height:2px; background:var(--text); }

/* Mobile menu */
.mobile-menu{ display:none; background:var(--card); border-bottom:1px solid var(--border); }
.mobile-menu.open{ display:block; }
.mobile-menu a{
  display:block; padding:.9rem 1rem; border-top:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  opacity:.95;
}

@media (max-width:768px){
  .header-row{ grid-template-columns: 1fr auto; } /* brand | hamburger */
  .mobile-toggle{ display:inline-flex; }
  .nav-links{ display:none; }
  .search{ grid-column:1 / -1; order:3; margin:.5rem 0 0; }
  body.no-scroll{ overflow:hidden; }
  .search button{ padding:.5rem .8rem; }
}

/* ---------- BUTTONS ---------- */
.btn.small{ padding:.3rem .5rem; font-weight:600; }
.btn.secondary{ background:#24344d; color:#dae4f5; }
.btn.danger{ background:var(--danger); }
.btn.primary{ background:var(--brand); color:#081018; }
.btn.full{ width:100%; padding:.85rem 1rem; border-radius:.7rem; font-weight:800; }

/* ---------- TABLES ---------- */
.table{
  width:100%; border-collapse:collapse; background:var(--card);
  border-radius:1rem; overflow:hidden; border:1px solid var(--border);
}
.table th,.table td{ padding:.75rem .75rem; border-bottom:1px solid var(--border); text-align:left; }
.table thead{ background:var(--surface-2); }
.nowrap{ white-space:nowrap; }

/* ---------- FLASH MESSAGES ---------- */
.flash-wrap{ margin:1rem 0; }
.flash{ padding:.75rem 1rem; border-radius:.5rem; margin-bottom:.5rem; }
.flash.success{ background:#13351e; color:#baf3c0; }
.flash.warning{ background:#3b280e; color:#ffdca8; }
.flash.danger{ background:#3b1717; color:#ffb3b3; }
.flash.info{ background:#0e2a3b; color:#b3e5ff; }

/* ---------- HERO ---------- */
.hero{
  background:linear-gradient(135deg, var(--hero-start), var(--hero-end));
  border:1px solid var(--border); border-radius:1rem; padding:2rem; margin-top:1rem;
  box-shadow:0 10px 34px rgba(0,0,0,.35);
}
.hero-inner{ max-width:640px; }

/* ---------- CARDS / LISTINGS ---------- */
.cards{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:1rem; margin:1rem 0;
}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:1rem; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.card img{ width:100%; height:180px; object-fit:cover; background:var(--input); }
.card .card-body{ padding:1rem; }
.price{ color:var(--accent); font-weight:700; }
.big{ font-size:1.6rem; }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }
.card-cover{ width:100%; height:180px; object-fit:cover; display:block; border-radius:1rem 1rem 0 0; }

/* ---------- FILTERS & GENERIC FORMS ---------- */
.filters{
  background:var(--card); border:1px solid var(--border); padding:1rem;
  border-radius:1rem; display:grid; grid-template-columns:repeat(5,1fr);
  gap:.6rem; margin:1rem 0;
}
.filters input,.filters select,.contact-form input,.contact-form textarea{
  padding:.6rem .75rem; border-radius:.6rem; border:1px solid var(--input-border);
  background:var(--input); color:var(--text);
}
.filters button{ grid-column:span 1; }
@media (max-width:1000px){ .filters{ grid-template-columns:1fr; } }

/* ---------- DETAIL LAYOUT ---------- */
.detail{ display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:start; }
@media(max-width:900px){ .detail{ grid-template-columns:1fr; } }
@media(min-width:901px){ .detail-gallery{ position:sticky; top:80px; } }

.detail-gallery .main-image{
  width:100%; height:auto; max-height:420px; object-fit:cover;
  border-radius:1rem; border:1px solid var(--border);
}
.detail-gallery .thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:.5rem; }
.detail-gallery .thumbs img{
  height:90px; width:auto; object-fit:cover; border:1px solid var(--border);
  border-radius:.375rem; flex:0 0 auto;
}
.detail-info{
  background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem;
}

/* ---------- AUTH / ADMIN FORMS ---------- */
.auth-form,.car-form{
  background:var(--card); border:1px solid var(--border);
  border-radius:1rem; padding:1rem; display:grid; gap:1rem;
}

/* Admin live preview grid */
.preview-grid{
  display:grid; grid-template-columns:repeat(5, minmax(80px,1fr)); gap:10px; margin-bottom:10px;
}
.preview-grid img{
  width:auto; height:100px; object-fit:cover; border:1px solid var(--border); border-radius:.375rem;
}

/* ---------- STATS ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.stat{ background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem; text-align:center; }
.stat .num{ font-size:2rem; font-weight:800; color:var(--brand); }

/* ---------- FOOTER ---------- */
.site-footer{ border-top:1px solid var(--border); padding:2rem 0; margin-top:2rem; background:var(--card); }

/* Delivered list grayscale */
.delivered img{ filter:grayscale(1); opacity:.7; }

/* ---------- PAGINATION ---------- */
.pagination{ display:flex; gap:1rem; align-items:center; justify-content:center; margin:1rem 0; }

/* ---------- RESPONSIVE FOOTER + FORMS ---------- */
@media (max-width:768px){
  .site-footer .grid-2{ grid-template-columns:1fr !important; gap:.75rem; }
  .contact-form .grid-2{ grid-template-columns:1fr !important; gap:.5rem; }
  .contact-form input, .contact-form textarea{ width:100%; }
  .contact-form button{ width:100%; display:block; margin-top:.5rem; }
  .container{ padding:.75rem; }
  html,body{ overflow-x:hidden; }
}

/* ---------- ADMIN TABLE MOBILE SCROLL ---------- */
.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table.admin-list{ min-width:760px; }
.table.admin-list td img{ width:72px; height:54px; object-fit:cover; border-radius:.4rem; }
.table.admin-list th, .table.admin-list td{ white-space:nowrap; }
.table.admin-list td:nth-child(3), .table.admin-list th:nth-child(3){ white-space:normal; }
@media (max-width:480px){ .table.admin-list{ min-width:640px; } }
@media (max-width:480px){
  .table.admin-list th:nth-child(5),
  .table.admin-list td:nth-child(5),
  .table.admin-list th:nth-child(6),
  .table.admin-list td:nth-child(6){ display:none; }
}

/* ---------- ADMIN LOGIN POLISH ---------- */
.auth-wrap{ display:flex; justify-content:center; align-items:flex-start; min-height:40vh; }
.auth-card{
  width:100%; max-width:520px; margin:1rem auto 2rem;
  background:var(--card); border:1px solid var(--border); border-radius:1rem;
  padding:1.25rem 1.25rem 1.5rem; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.auth-title{ font-size:1.9rem; margin:0 0 .25rem; }
.auth-form.pretty .form-group{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.auth-form.pretty label{ font-weight:600; color:color-mix(in oklab, var(--text) 70%, var(--muted)); }
.auth-form.pretty input{
  width:100%; padding:.8rem .9rem; border-radius:.65rem;
  border:1px solid var(--input-border); background:var(--input); color:var(--text);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.auth-form.pretty input:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);
}
.pass-wrap{ position:relative; }
.pass-wrap .icon-btn{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:1rem;
}
.form-row{ display:flex; align-items:center; justify-content:space-between; margin:.25rem 0 1rem; }
.check{ display:flex; gap:.5rem; align-items:center; user-select:none; }
.check input{ width:18px; height:18px; }
@media (max-width:768px){ .auth-card{ margin-top:.5rem; padding:1rem; } .auth-title{ font-size:1.6rem; } }

/* ---------- CHAT UI ---------- */
.chat-wrap{ display:flex; justify-content:center; }
.chat-card{
  width:100%; max-width:760px; background:var(--card);
  border:1px solid var(--border); border-radius:1rem; padding:1rem;
}
.chat-title{ margin:.25rem 0 1rem; }
.chat-window{
  height:420px; overflow:auto; padding:10px; background:var(--input);
  border:1px solid var(--input-border); border-radius:.75rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.msg{ padding:.6rem .8rem; border-radius:.7rem; max-width:85%; white-space:pre-wrap; }
.msg.user{ align-self:flex-end; background:#1d2a43; }
.msg.assistant{ align-self:flex-start; background:#151f31; }
.chat-form{ display:flex; gap:.5rem; margin-top:.75rem; }
.chat-form input{
  flex:1; padding:.7rem .8rem; border-radius:.6rem; border:1px solid var(--input-border);
  background:var(--input); color:var(--text);
}
.chat-form button{ padding:.7rem 1rem; border-radius:.6rem; }

/* =========================================================
   LIGHT (DAY) THEME — cohesive with the navy dark
   ========================================================= */
[data-theme="light"]{
  /* Tokens */
  --bg:#f6f8fe;
  --card:#ffffff;
  --text:#0a1326;
  --muted:#65728b;
  --brand:#2b63f0;
  --accent:#12a26e;

  --border:#d6deec;
  --surface-2:#eef2fb;
  --input:#ffffff;
  --input-border:#c7d4ea;

  --hero-start:#eaf1ff;
  --hero-end:#f8fbff;
  --ring:#9ec0ff;
}

/* Base */
[data-theme="light"] body{ background:var(--bg); color:var(--text); }

/* Header */
[data-theme="light"] .site-header{
  background:linear-gradient(180deg,#ffffff, #f5f8ff);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(18,28,45,.06);
}
[data-theme="light"] #themeToggle{
  background:#f2f6ff; border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(18,28,45,.06);
}
[data-theme="light"] .mobile-menu{
  background:#ffffff; border-bottom:1px solid var(--border);
}

/* Fields */
[data-theme="light"] .search input,
[data-theme="light"] .filters input,
[data-theme="light"] .filters select,
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea,
[data-theme="light"] .auth-form input,
[data-theme="light"] .auth-form textarea,
[data-theme="light"] .car-form input,
[data-theme="light"] .car-form textarea{
  background:var(--input);
  color:var(--text);
  border:1px solid var(--input-border);
}
[data-theme="light"] .search input:focus,
[data-theme="light"] .filters input:focus,
[data-theme="light"] .filters select:focus,
[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form textarea:focus,
[data-theme="light"] .auth-form input:focus,
[data-theme="light"] .auth-form textarea:focus,
[data-theme="light"] .car-form input:focus,
[data-theme="light"] .car-form textarea:focus{
  outline:0; border-color:var(--ring);
  box-shadow:0 0 0 3px rgba(43,99,240,.18);
}

/* Panels / cards */
[data-theme="light"] .card,
[data-theme="light"] .filters,
[data-theme="light"] .detail-info,
[data-theme="light"] .auth-form,
[data-theme="light"] .car-form,
[data-theme="light"] .chat-card{
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 4px 14px rgba(18,28,45,.06);
}
[data-theme="light"] .card img{ background:#fff; }

/* Stats */
[data-theme="light"] .stat{ box-shadow:0 4px 14px rgba(18,28,45,.06); }

/* Tables */
[data-theme="light"] .table{
  background:var(--card); border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(18,28,45,.04);
}
[data-theme="light"] .table thead{ background:var(--surface-2); color:#273246; }
[data-theme="light"] .table tbody tr:hover{ background:#f7faff; }

/* Gallery */
[data-theme="light"] .detail-gallery .main-image,
[data-theme="light"] .detail-gallery .thumbs img{ border:1px solid var(--border); }

/* Hero */
[data-theme="light"] .hero{
  background:linear-gradient(135deg, var(--hero-start), var(--hero-end));
  border:1px solid var(--border);
  box-shadow:0 10px 34px rgba(17,28,45,.08);
}

/* Footer */
[data-theme="light"] .site-footer{
  background:#fdfefe; border-top:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(18,28,45,.04);
}

/* Text & buttons */
[data-theme="light"] .muted{ color:var(--muted); }
[data-theme="light"] .price{ color:var(--accent); }
[data-theme="light"] .btn,
[data-theme="light"] .search button{
  background:var(--brand); color:#ffffff; border:none;
  box-shadow:0 2px 8px rgba(43,99,240,.18);
}
[data-theme="light"] .btn.secondary{
  background:#e9efff; color:#28427a; border:1px solid #d7e2ff;
}

/* Chat */
[data-theme="light"] .chat-window{ background:#fbfdff; border-color:var(--border); }
[data-theme="light"] .msg.user{ background:#e9effb; color:#1c2540; }
[data-theme="light"] .msg.assistant{ background:#f1f5fb; color:#1a2236; }

/* ---------- CONTACT FORMS: neutral until submit ---------- */
.contact-form input,
.contact-form textarea{
  border:1px solid var(--input-border);
  background:var(--input);
  color:var(--text);
  border-radius:.6rem;
}

/* Keep neutral before submit (suppress built-in red) */
.contact-form input:required:invalid,
.contact-form textarea:required:invalid{
  border-color:var(--input-border);
  box-shadow:none;
}

/* After a failed submit, show errors */
.contact-form.show-errors input:required:invalid,
.contact-form.show-errors textarea:required:invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(255,107,107,.12);
}

/* Placeholder tone */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:color-mix(in oklab, var(--muted) 85%, transparent);
}

/* --- Mobile overflow guards for admin/auth forms --- */
.auth-form,
.car-form{
  max-width:100%;
  overflow:hidden;              /* clip anything misbehaving (safe default) */
}
@supports(overflow:clip){
  .auth-form,
  .car-form{ overflow:clip; }   /* better perf when available */
}

/* Make every input/select/textarea/button obey the parent width */
.car-form input,
.car-form select,
.car-form textarea,
.car-form button{
  width:100%;
  max-width:100%;
  box-sizing:border-box;        /* belt-and-suspenders */
}

/* Native file input can push width on some mobile engines */
.car-form input[type="file"]{
  display:block;
  inline-size:100%;
}

/* Keep the submit button from overflowing and match site styles */
.car-form .btn{
  width:100%;
}

/* Small screens: reduce side padding so inner shadows don’t appear clipped */
@media (max-width:768px){
  .container{ padding-inline:.75rem; }
  .car-form{ margin-inline:0; }
}

/* ===== WhatsApp Floating Widget ===== */
.wa-widget{ position:fixed; right:18px; bottom:18px; z-index:1000; }
.wa-fab{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff; border:none; cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.wa-fab:focus{ outline:0; box-shadow:0 0 0 3px rgba(37,211,102,.35); }

.wa-card{
  position:absolute; right:0; bottom:64px; width:min(320px, 92vw);
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; transform:translateY(8px);
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 18px 40px rgba(0,0,0,.38);
}
.wa-card.open{ opacity:1; transform:translateY(0); pointer-events:auto; }

.wa-head{ display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; background:var(--surface-2); border-bottom:1px solid var(--border); }
.wa-close{ background:transparent; border:0; color:var(--muted); font-size:1.2rem; cursor:pointer; }
.wa-close:hover{ color:var(--text); }

.wa-body{ padding:1rem; display:grid; gap:.6rem; }
.wa-body input, .wa-body textarea{
  width:100%; border:1px solid var(--input-border); background:var(--input);
  color:var(--text); border-radius:.6rem; padding:.6rem .75rem;
}
.wa-body .btn{ width:100%; }

@media (max-width:480px){
  .wa-widget{ right:14px; bottom:14px; }
  .wa-fab{ width:50px; height:50px; }
}

/* Light theme tweaks (keeps your palette) */
[data-theme="light"] .wa-card{ box-shadow:0 18px 40px rgba(18,28,45,.12); }

/* Centered call-to-action under sections (e.g., Latest Stock) */
.section-cta{
  display:flex;
  justify-content:center;
  margin:1rem 0 2rem;
}

/* Optional variant if you want it a bit bolder/larger */
.browse-btn{
  padding:.75rem 1.15rem;
  font-weight:800;
  border-radius:.7rem;
}