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

/* ============================================================
   LBC PLATFORM — Partner Dashboard — Design Tokens
   ============================================================ */
:root {
  /* Brand */
  --navy:        #14384E;
  --navy-deep:   #0E2A3B;
  --navy-line:   #234E66;
  --navy-soft:   #1E4A63;
  --cream:       #F5EFE3;
  --cream-dim:   #E7DECD;
  --brand:       #B63D24;
  --brand-hover: #A2351F;
  --brand-bright:#E0411F;

  /* Surfaces */
  --bg:          #F4F2ED;
  --card:        #FFFFFF;
  --ink:         #17262F;
  --ink-2:       #38505C;
  --muted:       #6A7882;
  --faint:       #98A2AB;
  --border:      #E8E3DA;
  --border-2:    #D9D3C8;
  --hover:       #F6F4EF;

  /* Status */
  --recu:        #6B7785;   --recu-bg:   #EEF0F2;
  --devis:       #2563EB;   --devis-bg:  #E7EEFE;
  --accepte:     #C77A0A;   --accepte-bg:#FBEFD9;
  --effectue:    #16965A;   --effectue-bg:#E1F4EA;
  --verse:       #A9791F;   --verse-bg:  #F7EED6;
  --perdu:       #94A3AE;   --perdu-bg:  #F0F1F2;

  --green:       #16965A;
  --amber:       #C77A0A;
  --blue:        #2563EB;

  /* Geometry */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 22px;
  --shadow-xs: 0 1px 2px rgba(20,40,60,.05);
  --shadow-card: 0 1px 2px rgba(20,40,60,.04), 0 4px 18px rgba(20,40,60,.05);
  --shadow-pop: 0 8px 30px rgba(15,42,59,.14), 0 2px 8px rgba(15,42,59,.08);
  --shadow-fab: 0 8px 24px rgba(182,61,36,.36);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font, 'Geist'), system-ui, sans-serif;
  background: #0B1F2B;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100vh; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(182,61,36,.18); }

/* numerals & mono */
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.tnum { font-variant-numeric: tabular-nums; }
.serif { font-family: 'Spectral', Georgia, 'Times New Roman', serif; }

/* ============================================================
   PROTOTYPE STAGE CHROME
   ============================================================ */
.stage { height: 100vh; display: flex; flex-direction: column; background: #0B1F2B; }
.chrome {
  height: 46px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 16px;
  background: linear-gradient(180deg,#0E2A3B,#0B1F2B);
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: var(--cream);
}
.chrome-brand { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .02em; color: rgba(245,239,227,.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chrome-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-bright); box-shadow: 0 0 0 3px rgba(224,65,31,.18); }
.chrome-controls { display: flex; align-items: center; gap: 12px; }
.seg { display: flex; background: rgba(255,255,255,.07); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  color: rgba(245,239,227,.6); padding: 5px 12px; border-radius: 6px; transition: all .18s var(--ease);
}
.seg button.on { background: rgba(245,239,227,.95); color: var(--navy-deep); }
.chrome-reset { font-size: 12px; color: rgba(245,239,227,.5); display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; transition: .18s; }
.chrome-reset:hover { color: var(--cream); background: rgba(255,255,255,.07); }

.stage-body { flex: 1; min-height: 0; position: relative; }
.stage-desktop { position: absolute; inset: 0; background: var(--bg); overflow: hidden; }
.stage-mobile {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #16384C 0%, #0B1F2B 70%);
  overflow: auto; padding: 24px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; border-radius: var(--r-sm); padding: 0 16px; height: 42px;
  transition: all .16s var(--ease); white-space: nowrap; }
.btn:active { transform: translateY(.5px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(182,61,36,.3); }
.btn-primary:hover { background: var(--brand-hover); box-shadow: 0 4px 14px rgba(182,61,36,.28); }
.btn-block { width: 100%; }
.btn-lg { height: 50px; font-size: 15px; }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--border-2); }
.btn-ghost:hover { background: var(--hover); border-color: var(--muted); }
.btn-navy { background: var(--navy); color: var(--cream); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-sm { height: 34px; font-size: 13px; padding: 0 12px; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .lead-icon { position: absolute; left: 13px; color: var(--faint); display: flex; pointer-events: none; }
.input, .select, .textarea {
  width: 100%; height: 44px; border: 1px solid var(--border-2); background: var(--card);
  border-radius: var(--r-sm); padding: 0 14px; font-size: 14px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.input.has-icon { padding-left: 40px; }
.textarea { height: auto; padding: 12px 14px; min-height: 92px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(182,61,36,.12); }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236A7882' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.hint { font-size: 12px; color: var(--muted); }
.field-error .input, .field-error .select { border-color: var(--brand); }
.err-msg { font-size: 12px; color: var(--brand); display: flex; align-items: center; gap: 5px; }

/* ============================================================
   CARDS
   ============================================================ */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.card-pad { padding: 22px; }
.card-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.section-title { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.page-title { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }

/* ============================================================
   BADGES
   ============================================================ */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-recu     { background: var(--recu-bg);     color: var(--recu); }
.b-devis    { background: var(--devis-bg);    color: var(--devis); }
.b-accepte  { background: var(--accepte-bg);  color: var(--accepte); }
.b-effectue { background: var(--effectue-bg); color: var(--effectue); }
.b-verse    { background: var(--verse-bg);    color: var(--verse); }
.b-perdu    { background: var(--perdu-bg);    color: var(--perdu); }
.b-simple   { background: #EEF0F2; color: var(--ink-2); }
.b-complete { background: #ECE7F7; color: #6B47B6; }

/* pulse for in-progress */
.badge.pulse .dot { animation: dotpulse 1.8s var(--ease) infinite; }
@keyframes dotpulse {
  0%,100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 4px transparent; opacity: .55; }
}

/* ============================================================
   TABLE
   ============================================================ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody td { font-size: 13.5px; color: var(--ink-2); padding: 15px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr { transition: background .12s; cursor: pointer; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.cell-client { font-weight: 600; color: var(--ink); font-size: 14px; }
.route { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ink-2); }
.route svg { color: var(--brand); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-up { animation: fadeUp .55s var(--ease) both; }
@keyframes fadeUp { from { transform: translateY(12px); } to { transform: translateY(0); } }
.fade-in { animation: fadeIn .4s var(--ease) both; }
@keyframes fadeIn { from { transform: translateY(6px); } to { transform: none; } }

/* skeleton */
.skel { background: linear-gradient(90deg,#ECE8E0 25%,#F4F1EA 37%,#ECE8E0 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* progress bar fill */
.prog { height: 8px; border-radius: 999px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 999px; transition: width 1.1s var(--ease); }

/* checkmark draw */
.check-circle { stroke-dasharray: 166; stroke-dashoffset: 166; animation: draw .5s var(--ease) .1s forwards; }
.check-tick { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .35s var(--ease) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* scrollbars */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(20,56,78,.16); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: rgba(20,56,78,.3); border: 3px solid transparent; background-clip: padding-box; }

/* timeline current-step pulsing ring */
.ring-pulse { animation: ringpulse 1.9s var(--ease) infinite; }
@keyframes ringpulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(199,122,10,.35); }
  50% { box-shadow: 0 0 0 6px rgba(199,122,10,0); }
}
@keyframes drive { from { left: -170px; } to { left: calc(100% + 40px); } }
.truck-anim { animation: drive 11s linear infinite; }
@keyframes wheel { to { transform: rotate(360deg); } }

@keyframes confetti {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(96px) rotate(240deg); opacity: 0; }
}
.pay-spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* hero — camion qui roule de l'adresse de départ à l'adresse d'arrivée */
@keyframes heroDrive {
  0%   { left: 11%; opacity: 0; }
  9%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 73%; opacity: 0; }
}
.hero-truck { animation: heroDrive 6.5s var(--ease) infinite; }
.hero-truck .wheel { animation: wheel .9s linear infinite; transform-origin: center; transform-box: fill-box; }

/* ============================================================
   ADDITIONS — density, panels, palette, print, charts, tour
   ============================================================ */

/* density */
.density-compact .card-pad { padding: 16px; }
.density-comfy   .card-pad { padding: 28px; }

/* popover (notifications) */
.pop {
  position: absolute; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-pop); z-index: 60; overflow: hidden;
  animation: popIn .16s var(--ease) both; transform-origin: top right;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.scrim { position: fixed; inset: 0; z-index: 50; }

/* command palette */
.cmdk-overlay { position: absolute; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; background: rgba(10,25,35,.42); backdrop-filter: blur(3px); animation: fadeIn .14s ease both; }
.cmdk { width: min(560px, 92%); background: var(--card); border-radius: 16px; box-shadow: var(--shadow-pop);
  overflow: hidden; animation: popUp .18s var(--ease) both; }
@keyframes popUp { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; }
.cmdk-item.sel { background: var(--hover); }
.kbd { font-family: 'Geist Mono', monospace; font-size: 11px; padding: 2px 6px; border-radius: 5px;
  background: var(--bg); border: 1px solid var(--border-2); color: var(--muted); }

/* doc modal + print */
.doc-overlay { position: absolute; inset: 0; z-index: 130; display: flex; align-items: flex-start; justify-content: center;
  padding: 28px; overflow: auto; background: rgba(10,25,35,.5); backdrop-filter: blur(3px); animation: fadeIn .15s ease both; }
.doc-paper { width: 100%; max-width: 760px; background: #fff; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.4);
  animation: popUp .2s var(--ease) both; }
@media print {
  .stage, .stage * { visibility: hidden !important; }
  #lbc-print, #lbc-print * { visibility: visible !important; }
  #lbc-print { position: fixed !important; inset: 0 !important; margin: 0 !important; box-shadow: none !important;
    border-radius: 0 !important; max-width: none !important; }
  .no-print { display: none !important; }
}

/* chart */
.chart-dot { transition: r .15s var(--ease); }
.donut-seg { transition: opacity .15s; cursor: pointer; }
.donut-seg:hover { opacity: .82; }

/* onboarding */
.tour-overlay { position: absolute; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(8,22,32,.62); backdrop-filter: blur(4px); animation: fadeIn .2s ease both; }
.tour-card { width: min(440px, 100%); background: var(--card); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-pop); animation: popUp .26s var(--ease) both; }

/* message thread */
.msg { max-width: 78%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.msg-them { background: var(--bg); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg-me { background: var(--navy); color: var(--cream); border-bottom-right-radius: 4px; align-self: flex-end; }

/* sortable th */
.th-sort { cursor: pointer; user-select: none; transition: color .12s; }
.th-sort:hover { color: var(--ink-2); }

/* unread dot row */
.notif-row:hover { background: var(--hover); }