@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

:root {
  --navy:    #0a1628;
  --navy2:   #0f1f3d;
  --orange:  #f97316;
  --orange2: #ea6a0a;
  --white:   #ffffff;
  --off:     #f8f9fb;
  --gray:    #94a3b8;
  --gray2:   #64748b;
  --border:  #e2e8f0;
  --border2: #d0d9e5;
  --text:    #1e293b;
  --cargo:   #2563eb;
  --truck:   #16a34a;
  --radius:  8px;
  --nav-h:   62px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Barlow',sans-serif; background:var(--off); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased; }

/* ── Nav ────────────────────────────────────────────────── */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
  background:var(--navy); display:flex; align-items:center;
  padding:0 max(20px,calc((100vw - 1280px)/2));
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.nav-logo {
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:18px;
  letter-spacing:.04em; text-transform:uppercase; color:white;
}
.nav-logo .mark { color:var(--orange); }
.nav-logo .sub  { font-size:11px; font-weight:600; letter-spacing:.15em; color:rgba(255,255,255,.4); margin-left:4px; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:2px; margin-left:28px; }
.nav-link {
  height:38px; padding:0 14px; border-radius:6px;
  color:rgba(255,255,255,.6); font-size:14px; font-weight:500;
  text-decoration:none; display:flex; align-items:center; gap:7px;
  transition:all .12s;
}
.nav-link:hover { color:white; background:rgba(255,255,255,.07); }
.nav-link.active { color:var(--orange); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-badge {
  background:var(--orange); color:white; border-radius:10px;
  font-size:11px; font-weight:700; padding:1px 6px; min-width:18px; text-align:center;
}
.btn-nav { height:36px; padding:0 16px; border-radius:6px; font-family:'Barlow',sans-serif; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; display:flex; align-items:center; border:none; transition:all .12s; }
.btn-nav-orange { background:var(--orange); color:white; }
.btn-nav-orange:hover { background:var(--orange2); color:white; }
.btn-nav-ghost  { background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); }
.btn-nav-ghost:hover { background:rgba(255,255,255,.14); color:white; }

/* ── Buttons ────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:42px; padding:0 22px; border-radius:7px; border:none; font-family:'Barlow',sans-serif; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; transition:all .15s; white-space:nowrap; }
.btn-orange { background:var(--orange); color:white; }
.btn-orange:hover { background:var(--orange2); color:white; transform:translateY(-1px); }
.btn-navy   { background:var(--navy); color:white; }
.btn-navy:hover { background:var(--navy2); color:white; }
.btn-outline { background:transparent; color:var(--navy); border:1.5px solid var(--border2); }
.btn-outline:hover { border-color:var(--navy); }
.btn-cargo  { background:rgba(37,99,235,.1); color:var(--cargo); border:1px solid rgba(37,99,235,.2); }
.btn-truck  { background:rgba(22,163,74,.1);  color:var(--truck); border:1px solid rgba(22,163,74,.2); }
.btn-sm { height:34px; padding:0 14px; font-size:13px; border-radius:6px; }
.btn-xs { height:28px; padding:0 10px; font-size:12px; border-radius:5px; }
.btn-danger { background:rgba(220,38,38,.08); color:#dc2626; border:1px solid rgba(220,38,38,.2); }
.btn-danger:hover { background:rgba(220,38,38,.15); }

/* ── Layout ─────────────────────────────────────────────── */
.page-wrap { padding-top:var(--nav-h); min-height:100vh; }
.container  { max-width:1280px; margin:0 auto; padding:0 20px; }

/* ── Listing type badges ────────────────────────────────── */
.type-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.type-cargo { background:rgba(37,99,235,.1); color:var(--cargo); border:1px solid rgba(37,99,235,.2); }
.type-truck { background:rgba(22,163,74,.1);  color:var(--truck); border:1px solid rgba(22,163,74,.2); }

/* ── Status badges ──────────────────────────────────────── */
.status-badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.s-active  { background:#f0fdf4; color:var(--truck); border:1px solid #bbf7d0; }
.s-expired { background:#fef9c3; color:#854d0e;       border:1px solid #fde68a; }
.s-closed  { background:#f1f5f9; color:var(--gray2);  border:1px solid var(--border); }
.s-pending { background:#fff7ed; color:var(--orange);  border:1px solid #fed7aa; }

/* ── Cards ──────────────────────────────────────────────── */
.listing-card {
  background:white; border:1px solid var(--border); border-radius:10px;
  padding:18px 20px; transition:border-color .15s, box-shadow .15s;
  display:block; text-decoration:none; color:var(--text);
  position:relative; overflow:hidden;
}
.listing-card:hover { border-color:var(--border2); box-shadow:0 4px 20px rgba(0,0,0,.07); color:var(--text); }
.listing-card.boosted { border-color:var(--orange); }
.listing-card.boosted::before { content:'★ PROMOVAT'; position:absolute; top:0; right:0; background:var(--orange); color:white; font-size:9px; font-weight:800; padding:3px 10px; border-bottom-left-radius:7px; letter-spacing:.1em; }
.lc-route { font-size:16px; font-weight:700; color:var(--navy); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.lc-arrow { color:var(--orange); font-size:14px; }
.lc-meta  { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--gray2); margin-top:10px; }
.lc-meta span { display:flex; align-items:center; gap:4px; }
.lc-company { display:flex; align-items:center; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); font-size:12px; color:var(--gray2); }
.verified-badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; color:var(--cargo); background:rgba(37,99,235,.08); padding:1px 7px; border-radius:10px; border:1px solid rgba(37,99,235,.2); }

/* ── Forms ──────────────────────────────────────────────── */
.form-field { margin-bottom:16px; }
.form-field label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--gray2); margin-bottom:6px; }
.f-input,.f-select,.f-textarea { width:100%; padding:10px 13px; background:white; border:1.5px solid var(--border); border-radius:7px; font-family:'Barlow',sans-serif; font-size:14px; color:var(--text); outline:none; transition:border-color .14s, box-shadow .14s; }
.f-input:focus,.f-select:focus,.f-textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(249,115,22,.1); }
.f-textarea { resize:vertical; min-height:100px; }
.f-select { cursor:pointer; }
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }

/* ── Alert ──────────────────────────────────────────────── */
.alert { padding:11px 15px; border-radius:7px; font-size:13px; display:none; margin-bottom:14px; }
.alert.error   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.alert.success { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
.alert.show    { display:block; }

/* ── Stars ──────────────────────────────────────────────── */
.stars { display:inline-flex; gap:2px; }
.star  { font-size:16px; cursor:pointer; color:#e2e8f0; transition:color .1s; }
.star.filled { color:#f59e0b; }
.star-display { color:#f59e0b; }

/* ── Messages thread ────────────────────────────────────── */
.msg-bubble { display:flex; flex-direction:column; margin-bottom:14px; }
.msg-bubble.mine { align-items:flex-end; }
.msg-bubble.theirs { align-items:flex-start; }
.msg-text { max-width:70%; padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.5; }
.msg-bubble.mine   .msg-text { background:var(--navy); color:white; border-bottom-right-radius:4px; }
.msg-bubble.theirs .msg-text { background:white; border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px; }
.msg-meta { font-size:11px; color:var(--gray); margin-top:4px; padding:0 4px; }

/* ── Dashboard layout ───────────────────────────────────── */
.dash-wrap { display:flex; min-height:100vh; padding-top:var(--nav-h); }
.dash-side { width:220px; flex-shrink:0; background:var(--navy); position:fixed; top:var(--nav-h); bottom:0; overflow-y:auto; padding:18px 12px; }
.dash-main { flex:1; margin-left:220px; padding:28px; }
.d-link { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; color:rgba(255,255,255,.5); font-size:13px; font-weight:500; text-decoration:none; transition:all .12s; margin-bottom:2px; }
.d-link:hover  { background:rgba(255,255,255,.07); color:white; }
.d-link.active { background:rgba(249,115,22,.15); color:var(--orange); }
.d-sec { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.25); padding:0 10px; margin:14px 0 5px; }

/* ── Stat cards ─────────────────────────────────────────── */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:24px; }
.stat-card  { background:white; border:1px solid var(--border); border-radius:9px; padding:18px 20px; }
.sc-num     { font-family:'Barlow Condensed',sans-serif; font-size:38px; font-weight:900; color:var(--navy); line-height:1; }
.sc-num.orange { color:var(--orange); }
.sc-lbl     { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--gray); margin-top:5px; font-weight:600; }

/* ── Table ──────────────────────────────────────────────── */
.d-table { width:100%; border-collapse:collapse; }
.d-table th { padding:9px 14px; text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gray); background:var(--off); border-bottom:1px solid var(--border); }
.d-table td { padding:11px 14px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
.d-table tr:last-child td { border-bottom:none; }
.d-table tr:hover td { background:#fafbfd; }

/* ── Profile / company ──────────────────────────────────── */
.company-logo { width:72px; height:72px; border-radius:12px; object-fit:cover; border:2px solid var(--border); background:var(--off); display:flex; align-items:center; justify-content:center; font-size:28px; overflow:hidden; }
.logo-placeholder { background:var(--navy); color:white; font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:900; }

/* ── Filter bar ─────────────────────────────────────────── */
.filter-bar { background:white; border:1px solid var(--border); border-radius:10px; padding:14px 18px; margin-bottom:16px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.filter-field { display:flex; flex-direction:column; gap:5px; min-width:140px; }
.filter-field label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--gray2); }
.filter-input { height:36px; padding:0 11px; background:var(--off); border:1.5px solid var(--border); border-radius:6px; font-family:'Barlow',sans-serif; font-size:13px; color:var(--text); outline:none; transition:border-color .12s; }
.filter-input:focus { border-color:var(--orange); }

/* ── Board columns ──────────────────────────────────────── */
.board { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.board-col-header { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:8px 8px 0 0; margin-bottom:0; }
.col-cargo { background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.15); border-bottom:none; }
.col-truck { background:rgba(22,163,74,.07);  border:1px solid rgba(22,163,74,.15);  border-bottom:none; }
.col-title { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.col-count { font-size:12px; font-weight:700; border-radius:20px; padding:2px 9px; margin-left:auto; }
.col-cargo .col-count { background:rgba(37,99,235,.1); color:var(--cargo); }
.col-truck .col-count { background:rgba(22,163,74,.1);  color:var(--truck); }
.board-list { border:1px solid var(--border); border-radius:0 0 8px 8px; overflow:hidden; }
.board-list .listing-card { border:none; border-bottom:1px solid var(--border); border-radius:0; }
.board-list .listing-card:last-child { border-bottom:none; }

/* ── Overlay / modal ────────────────────────────────────── */
.overlay { position:fixed; inset:0; background:rgba(10,22,40,.65); backdrop-filter:blur(4px); z-index:600; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s; }
.overlay.open { opacity:1; pointer-events:all; }
.modal { background:white; border-radius:12px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,.2); transform:translateY(8px); transition:transform .18s; }
.overlay.open .modal { transform:translateY(0); }
.modal-hd { padding:18px 22px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:white; z-index:1; }
.modal-hd h3 { font-size:16px; font-weight:700; color:var(--navy); }
.modal-x { width:28px; height:28px; background:var(--off); border:1px solid var(--border); border-radius:6px; color:var(--gray); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .1s; }
.modal-x:hover { color:var(--text); }
.modal-bd { padding:20px 22px; }
.modal-fd { padding:14px 22px 18px; border-top:1px solid var(--border); display:flex; gap:10px; }

/* scrollbar */
::-webkit-scrollbar       { width:5px; }
::-webkit-scrollbar-track { background:var(--off); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

@media(max-width:900px){
  .board { grid-template-columns:1fr; }
  .dash-side { display:none; }
  .dash-main { margin-left:0; padding:16px; }
  .f-row,.f-row-3 { grid-template-columns:1fr; }
}