@import url('/fonts/fonts.css');

/* ============================================================
   Car Files — theme lifted from sxports.com
   Bebas Neue display / DM Sans body, navy + burnt orange on cream.
   ============================================================ */
:root{
  --white:#fff;
  --cream:#faf9f6;
  --sand:#f2efe9;
  --warm-gray:#e8e4dd;
  --mid-gray:#9a9590;
  --text:#1a1714;
  --text-light:#5a554e;
  --navy:#1b2d4a;
  --navy-deep:#0f1d33;
  --accent:#c8782a;
  --accent-light:#e09340;
  --accent-soft:rgba(200,120,42,0.08);
  --accent-border:rgba(200,120,42,0.2);
  --green:#2a9d6a;
  --green-soft:rgba(42,157,106,0.08);
  --green-border:rgba(42,157,106,0.2);
  --red:#c0392b;
  --red-soft:rgba(192,57,43,0.08);
  --red-border:rgba(192,57,43,0.2);
  --blue-soft:rgba(27,45,74,0.06);
  --shadow-soft:0 4px 30px rgba(0,0,0,0.04);
  --shadow-md:0 8px 32px rgba(0,0,0,0.06);
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:8px;
}

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

html{-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--cream);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

h1,h2,h3,.display{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;color:var(--navy-deep);line-height:1.02;font-weight:400}
h1{font-size:2.5rem}
h2{font-size:1.7rem}
h3{font-size:1.25rem}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-light)}

.mono{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---------------- shell ---------------- */
.topbar{
  background:var(--white);
  border-bottom:1px solid var(--warm-gray);
  position:sticky;top:0;z-index:50;
}
.topbar-in{
  max-width:1180px;margin:0 auto;padding:.85rem 1.25rem;
  display:flex;align-items:center;gap:1.4rem;
}
.brand{
  font-family:'Bebas Neue',sans-serif;font-size:1.45rem;letter-spacing:.12em;
  color:var(--navy);display:flex;align-items:center;gap:.55rem;white-space:nowrap;
}
.brand .mark{
  width:26px;height:26px;border-radius:7px;background:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent-light);font-size:.95rem;letter-spacing:.02em;
}
.brand small{
  font-family:'DM Sans',sans-serif;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid-gray);font-weight:600;
}
.nav{display:flex;gap:.2rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{
  color:var(--text-light);font-size:.83rem;font-weight:600;letter-spacing:.03em;
  padding:.5rem .8rem;border-radius:var(--radius-xs);white-space:nowrap;
}
.nav a:hover{background:var(--sand);color:var(--navy)}
.nav a.on{background:var(--navy);color:var(--white)}
.nav .pip{
  display:inline-block;min-width:17px;height:17px;line-height:17px;text-align:center;
  background:var(--accent);color:#fff;border-radius:9px;font-size:.66rem;
  margin-left:.35rem;padding:0 5px;font-weight:700;
}
/* EN / DE toggle */
.langswitch{display:inline-flex;margin-left:.5rem;border:1px solid var(--warm-gray);border-radius:var(--radius-xs);overflow:hidden}
.langswitch button{
  font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  padding:.36rem .5rem;border:none;background:var(--white);color:var(--mid-gray);cursor:pointer;
}
.langswitch button + button{border-left:1px solid var(--warm-gray)}
.langswitch button:hover{background:var(--sand);color:var(--navy)}
.langswitch button.on{background:var(--navy);color:#fff}

.who{font-size:.75rem;color:var(--mid-gray);border-left:1px solid var(--warm-gray);padding-left:.9rem;margin-left:.3rem}
.who b{display:block;color:var(--navy);font-size:.82rem}

.wrap{max-width:1180px;margin:0 auto;padding:1.6rem 1.25rem 4rem}
.wrap.narrow{max-width:760px}

/* ---------------- page head ---------------- */
.phead{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.phead .eyebrow{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:.25rem;
}
.phead h1{font-size:2.3rem}
.phead .sub{color:var(--text-light);font-size:.9rem;margin-top:.3rem}
.phead .right{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;justify-content:center;
  padding:.62rem 1.15rem;border-radius:var(--radius-xs);
  font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.03em;
  border:1px solid transparent;cursor:pointer;background:var(--white);
  color:var(--navy);border-color:var(--warm-gray);transition:.15s;
}
.btn:hover{border-color:var(--mid-gray);color:var(--navy)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-light);border-color:var(--accent-light);color:#fff}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-deep);color:#fff}
.btn-ghost{background:transparent;border-color:var(--warm-gray)}
.btn-danger{background:var(--white);color:var(--red);border-color:var(--red-border)}
.btn-danger:hover{background:var(--red-soft);color:var(--red)}
.btn-sm{padding:.4rem .75rem;font-size:.74rem}
.btn-lg{padding:.95rem 1.6rem;font-size:.95rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------------- cards ---------------- */
.card{
  background:var(--white);border:1px solid var(--warm-gray);
  border-radius:var(--radius);box-shadow:var(--shadow-soft);
}
.card-pad{padding:1.3rem}
.card-head{
  padding:1rem 1.3rem;border-bottom:1px solid var(--warm-gray);
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.card-head h2,.card-head h3{margin:0}
.card-head .right{margin-left:auto;display:flex;gap:.45rem;align-items:center}

/* ---------------- stat tiles ---------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.9rem}
@media(min-width:900px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{
  background:var(--white);border:1px solid var(--warm-gray);
  border-radius:var(--radius-sm);padding:1.05rem 1.15rem;
}
.tile .lbl{
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid-gray);font-weight:700;margin-bottom:.45rem;
}
.tile .val{
  font-family:'Bebas Neue',sans-serif;font-size:2.15rem;line-height:1;
  color:var(--navy-deep);letter-spacing:.01em;
}
.tile .val.green{color:var(--green)}
.tile .val.red{color:var(--red)}
.tile .val.accent{color:var(--accent)}
.tile .note{font-size:.76rem;color:var(--text-light);margin-top:.4rem;line-height:1.4}
.tile.link:hover{border-color:var(--accent-border);background:var(--accent-soft)}

/* ---------------- tables ---------------- */
.tbl{width:100%;border-collapse:collapse;font-size:.87rem}
.tbl th{
  text-align:left;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mid-gray);font-weight:700;padding:.7rem 1.3rem;
  background:var(--sand);border-bottom:1px solid var(--warm-gray);white-space:nowrap;
}
.tbl td{padding:.72rem 1.3rem;border-bottom:1px solid var(--warm-gray);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--cream)}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .dim{color:var(--text-light)}
.tbl tr.total td{background:var(--sand);font-weight:700;border-top:1px solid var(--warm-gray)}
.tbl tr.profit td{background:var(--green-soft);font-weight:700;color:#1d6b49;font-size:.95rem}
.tbl tr.loss td{background:var(--red-soft);font-weight:700;color:var(--red);font-size:.95rem}
.tbl a.rowlink{color:var(--navy);font-weight:600}
.tbl a.rowlink:hover{color:var(--accent)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* let wide tables scroll sideways rather than squeezing car names into a column
   one word wide */
.tbl-wrap .tbl{min-width:660px}
.tbl-wrap .tbl.wide{min-width:1020px}
.tbl td.car{white-space:nowrap}

/* ---------------- badges ---------------- */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:20px;border:1px solid transparent;
}
.badge-open{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}
.badge-sold{background:var(--green-soft);color:var(--green);border-color:var(--green-border)}
.badge-warn{background:var(--red-soft);color:var(--red);border-color:var(--red-border)}
.badge-flat{background:var(--sand);color:var(--text-light);border-color:var(--warm-gray)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

/* ---------------- forms ---------------- */
.field{margin-bottom:.95rem}
.field label,.lbl-top{
  display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mid-gray);font-weight:700;margin-bottom:.35rem;
}
input[type=text],input[type=number],input[type=date],input[type=password],
input[type=search],select,textarea{
  width:100%;font-family:'DM Sans',sans-serif;font-size:.95rem;color:var(--text);
  background:var(--white);border:1px solid var(--warm-gray);
  border-radius:var(--radius-xs);padding:.66rem .8rem;transition:.15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{min-height:110px;resize:vertical;line-height:1.55}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}
.hint{font-size:.74rem;color:var(--mid-gray);margin-top:.3rem}
.money-in{position:relative}
.money-in input{padding-left:1.7rem}
.money-in::before{
  content:'$';position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
  color:var(--mid-gray);font-size:.95rem;pointer-events:none;z-index:1;
}

/* ---------------- flash + empty ---------------- */
.flash{
  padding:.85rem 1.1rem;border-radius:var(--radius-sm);margin-bottom:1.2rem;
  font-size:.87rem;font-weight:500;border:1px solid transparent;
}
.flash-ok{background:var(--green-soft);color:#1d6b49;border-color:var(--green-border)}
.flash-err{background:var(--red-soft);color:var(--red);border-color:var(--red-border)}
.flash-info{background:var(--accent-soft);color:#96581c;border-color:var(--accent-border)}

.empty{padding:2.6rem 1.5rem;text-align:center;color:var(--text-light)}
.empty .big{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--navy);margin-bottom:.35rem}
.empty p{font-size:.88rem;max-width:34rem;margin:0 auto .9rem}

/* ---------------- car file header ---------------- */
.filehead{
  background:var(--navy);color:#fff;border-radius:var(--radius) var(--radius) 0 0;
  padding:1.25rem 1.3rem;
}
.filehead h2{color:#fff;font-size:1.9rem;margin-bottom:.15rem}
.filehead .meta{font-size:.78rem;color:rgba(255,255,255,.62);letter-spacing:.04em}
.filehead .right{margin-left:auto}
.filehead-row{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.filehead .badge-open{background:rgba(200,120,42,.22);color:var(--accent-light);border-color:rgba(200,120,42,.4)}
.filehead .badge-sold{background:rgba(42,157,106,.2);color:#6fd6a6;border-color:rgba(42,157,106,.4)}

.pl-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-bottom:1px solid var(--warm-gray)}
.pl-strip div{padding:.9rem 1.3rem;border-right:1px solid var(--warm-gray)}
.pl-strip div:last-child{border-right:none}
.pl-strip .k{font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mid-gray);font-weight:700}
.pl-strip .v{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--navy-deep);line-height:1.1}
.pl-strip .v.green{color:var(--green)}
.pl-strip .v.red{color:var(--red)}

/* ---------------- receipt thumbs ---------------- */
.thumb{
  width:34px;height:34px;border-radius:6px;object-fit:cover;
  border:1px solid var(--warm-gray);background:var(--sand);display:block;
}
.no-thumb{
  width:34px;height:34px;border-radius:6px;border:1px dashed var(--warm-gray);
  display:flex;align-items:center;justify-content:center;color:var(--mid-gray);font-size:.6rem;
}
.receipt-full{max-width:100%;border-radius:var(--radius-sm);border:1px solid var(--warm-gray)}

/* ---------------- capture (phone) ---------------- */
.cap-shell{max-width:520px;margin:0 auto}
.shot-zone{
  display:block;                      /* it's a <label> — inline by default, which
                                         paints its background in broken fragments */
  border:2px dashed var(--accent-border);background:var(--accent-soft);
  border-radius:var(--radius);padding:2.2rem 1rem;text-align:center;cursor:pointer;
  transition:.15s;
}
.shot-zone:hover{background:rgba(200,120,42,.13)}
.shot-zone .ico{font-size:2.2rem;line-height:1;margin-bottom:.5rem}
.shot-zone .t{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;color:var(--navy);letter-spacing:.03em}
.shot-zone .s{font-size:.8rem;color:var(--text-light);margin-top:.2rem}
#preview{max-width:100%;border-radius:var(--radius-sm);border:1px solid var(--warm-gray);display:none;margin-bottom:1rem}

.pick{display:grid;gap:.5rem}
.pick button{
  width:100%;text-align:left;background:var(--white);border:1px solid var(--warm-gray);
  border-radius:var(--radius-sm);padding:.85rem 1rem;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:.7rem;transition:.12s;
}
.pick button:hover{border-color:var(--accent-border);background:var(--accent-soft)}
.pick button.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}
.pick .nm{font-weight:700;color:var(--navy);font-size:.95rem}
.pick .sub{font-size:.74rem;color:var(--mid-gray)}
.pick .rt{margin-left:auto;text-align:right;font-size:.74rem;color:var(--text-light);white-space:nowrap}
.pick .biz{border-style:dashed}

/* sticky action bar on phones */
/* Action bar at the end of the capture form. Deliberately NOT sticky: on a
   phone a floating bar sits on top of the amount field you're trying to fill. */
.stickybar{
  border-top:1px solid var(--warm-gray);
  padding:1rem 0 calc(1rem + env(safe-area-inset-bottom));
  margin-top:1.4rem;
}
.stickybar .btn-lg{min-width:11rem}
@media(max-width:600px){
  .stickybar .row-split{flex-direction:column-reverse;align-items:stretch;gap:.7rem}
  .stickybar .btn-lg{width:100%}
  .stickybar .spacer{display:none}
}

/* ---------------- login ---------------- */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;background:
    radial-gradient(1100px 500px at 50% -180px, rgba(27,45,74,.10), transparent 70%),
    var(--cream);
}
.login-card{width:100%;max-width:390px}
.login-card .card{padding:1.9rem}
.login-brand{text-align:center;margin-bottom:1.6rem}
.login-brand .mk{
  width:52px;height:52px;border-radius:14px;background:var(--navy);color:var(--accent-light);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:1.6rem;margin-bottom:.7rem;letter-spacing:.04em;
}
.login-brand h1{font-size:2rem;letter-spacing:.06em}
.login-brand p{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mid-gray);font-weight:600}

/* ---------------- misc ---------------- */
.row-split{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.sec-lbl{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);font-weight:700;margin:1.7rem 0 .7rem;
}
.muted{color:var(--text-light)}
.small{font-size:.8rem}
.nowrap{white-space:nowrap}
.stack>*+*{margin-top:1rem}
.pos{color:var(--green);font-weight:700}
.neg{color:var(--red);font-weight:700}
hr.rule{border:none;border-top:1px solid var(--warm-gray);margin:1.3rem 0}

/* ---------------- responsive ---------------- */
@media(max-width:860px){
  .wrap{padding:1.1rem .9rem 5rem}
  .phead h1{font-size:1.85rem}
  .grid2,.grid3{grid-template-columns:1fr}
  .topbar-in{padding:.7rem .9rem;gap:.6rem}
  .brand small{display:none}
  .who{display:none}
  .nav{width:100%;order:3;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
       padding-bottom:.2rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .topbar-in{flex-wrap:wrap}
  .tbl th,.tbl td{padding:.6rem .8rem}
  .card-head{padding:.85rem .9rem}
  .card-pad{padding:1rem}
  .pl-strip div{padding:.75rem .9rem}
  .filehead{padding:1rem}
}

@media print{
  .topbar,.btn,.stickybar,.noprint{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border-color:#ccc}
  .wrap{padding:0}
}