/* =====================================================================
   Facturation Taxi — thème back-office
   Direction : outil métier calme et lisible, accent bleu-vert "santé".
   ===================================================================== */
:root {
    --ink:        #14252b;   /* texte principal, ardoise profonde */
    --ink-soft:   #4a5c63;   /* texte secondaire */
    --line:       #dfe6e6;   /* filets et bordures */
    --bg:         #f2f5f5;   /* fond général, gris très clair froid */
    --surface:    #ffffff;   /* cartes, tableaux */
    --primary:    #1f7a6d;   /* bleu-vert principal */
    --primary-dk: #16594f;
    --primary-bg: #e5f1ef;
    --warn:       #b5761b;   /* à signer */
    --warn-bg:    #fbf0dc;
    --ok:         #1f7a4d;   /* signée */
    --ok-bg:      #e2f2e8;
    --danger:     #b23b3b;   /* refusée / annulée */
    --danger-bg:  #f8e5e5;
    --radius:     10px;
    --shadow:     0 1px 2px rgba(20,37,43,.06), 0 4px 16px rgba(20,37,43,.05);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.5;
}
a { color: var(--primary-dk); }

/* ---- Ossature ------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    flex: 0 0 240px;
    background: var(--ink);
    color: #cfdad9;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    padding: 20px 20px 16px;
    font-weight: 700; color: #fff;
    letter-spacing: .2px;
}
.brand-mark { color: var(--primary); font-size: 20px; }
.brand-text { font-size: 15px; }

.sidebar nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
.sidebar nav a {
    color: #b8c6c5;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
}
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar nav a.is-active { background: var(--primary); color: #fff; font-weight: 600; }

.sidebar-foot { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.who { display: flex; flex-direction: column; margin-bottom: 8px; }
.who strong { color: #fff; font-size: 14px; }
.who .role { font-size: 12px; color: #8fa3a1; text-transform: capitalize; }
.logout { color: #cfdad9; font-size: 13px; text-decoration: none; }
.logout:hover { color: #fff; text-decoration: underline; }

.content { flex: 1; padding: 28px 32px; max-width: 1200px; }

.nav-toggle {
    display: none;
    position: fixed; top: 12px; left: 12px; z-index: 30;
    background: var(--ink); color: #fff; border: 0;
    width: 42px; height: 42px; border-radius: 8px; font-size: 20px; cursor: pointer;
}

/* ---- Titres et entêtes de page ------------------------------------ */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head h1 { font-size: 22px; margin: 0; letter-spacing: -.2px; }
.page-head .sub { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--primary-dk); font-weight: 600; }

/* ---- Cartes -------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.card h2 { font-size: 16px; margin: 0 0 14px; }
.card-title-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.card-title-row h2 { margin: 0; }

/* ---- Statistiques -------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .num { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
.stat .lbl { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.stat.accent .num { color: var(--warn); }

/* ---- Tableaux ------------------------------------------------------ */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data thead th { background: #f7faf9; color: var(--ink-soft); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.data tbody tr:hover { background: #f7faf9; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: 0; }

/* ---- Badges de statut ---------------------------------------------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.badge.muted  { background: #eceff0; color: #5a6b6f; }
.badge.warn   { background: var(--warn-bg);   color: var(--warn); }
.badge.ok     { background: var(--ok-bg);     color: var(--ok); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }

/* ---- Boutons ------------------------------------------------------- */
.btn { display: inline-block; border: 1px solid transparent; border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.2; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dk); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary-dk); }
.btn-danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Formulaires --------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field .hint { font-size: 12px; color: var(--ink-soft); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time],
input[type=number], select, textarea {
    font-family: inherit; font-size: 14px; color: var(--ink);
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); }
textarea { resize: vertical; min-height: 70px; }
.checkbox { display: flex; align-items: center; gap: 8px; }
.checkbox input { width: 18px; height: 18px; }
.checkbox label { font-weight: 500; color: var(--ink); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 20px; }
fieldset legend { font-weight: 600; padding: 0 8px; font-size: 14px; color: var(--primary-dk); }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---- Messages flash ------------------------------------------------ */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; font-weight: 500; }
.flash-success { background: var(--ok-bg); color: var(--ok); }
.flash-error   { background: var(--danger-bg); color: var(--danger); }
.flash-info    { background: var(--primary-bg); color: var(--primary-dk); }

/* ---- Grille des montants ------------------------------------------- */
.montants { width: 100%; border-collapse: collapse; font-size: 14px; }
.montants th, .montants td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.montants thead th { font-size: 12px; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.montants thead th:first-child { text-align: left; }
.montants td:first-child { font-weight: 600; }
.montants input { text-align: right; max-width: 130px; }
.montants tfoot td { font-weight: 700; border-top: 2px solid var(--line); }

/* ---- Trajets (lignes dynamiques) ----------------------------------- */
.trajet-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: #fafcfc; }
.trajet-row .row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.trajet-row .row-head strong { font-size: 13px; color: var(--primary-dk); }

/* ---- États vides --------------------------------------------------- */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-soft); }
.empty p { margin: 0 0 14px; }

/* ---- Signature (aperçu) -------------------------------------------- */
.sig-preview { border: 1px solid var(--line); border-radius: 8px; background: #fff; max-width: 320px; padding: 8px; }
.sig-preview img { max-width: 100%; display: block; }

.inline-note { font-size: 13px; color: var(--ink-soft); }
.text-right { text-align: right; }

/* ---- Login --------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--ink); padding: 20px; }
.login-card { background: #fff; border-radius: 14px; padding: 32px; width: 100%; max-width: 380px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.login-card .brand { color: var(--ink); padding: 0 0 20px; }
.login-card .brand-text { color: var(--ink); }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 860px) {
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 25;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    body.nav-open .sidebar { transform: translateX(0); }
    .nav-toggle { display: block; }
    .content { padding: 68px 18px 24px; }
    .form-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Éditeur de zones
   =================================================================== */
.editor-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg-btn{border:0;background:#fff;color:var(--ink-soft);padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.seg-btn.is-on{background:var(--primary);color:#fff}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);
        background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer}
.switch input{width:18px;height:18px}
.pager{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft)}
.stage-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
            box-shadow:var(--shadow);padding:14px;display:flex;justify-content:center;overflow:auto}
#stage{position:relative;line-height:0;touch-action:none;box-shadow:0 0 0 1px var(--line)}
#pdfCanvas{display:block;max-width:100%}
#overlay{position:absolute;inset:0;cursor:crosshair}
.doc-preview{display:flex;flex-direction:column;gap:14px;align-items:center}
.doc-preview img{max-width:100%;border:1px solid var(--line);border-radius:6px}

/* ===================================================================
   Application mobile (chauffeur)
   =================================================================== */
body.mobile{background:var(--bg)}
.m-top{position:sticky;top:0;z-index:10;background:var(--ink);color:#fff;display:flex;align-items:center;
       justify-content:space-between;padding:14px 16px}
.m-brand{color:#fff;text-decoration:none;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.m-brand .brand-mark{color:var(--primary)}
.m-logout{color:#cfdad9;text-decoration:none;font-size:13px}
.m-main{max-width:640px;margin:0 auto;padding:16px 16px 40px}
.m-h1{font-size:20px;margin:8px 0 4px}
.m-h2{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin:26px 0 10px}
.m-note{color:var(--ink-soft);font-size:14px;margin:0 0 16px}
.m-back{display:inline-block;color:var(--primary-dk);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:4px}
.m-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:36px 20px;
         text-align:center;color:var(--ink-soft)}
.m-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.m-list li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.m-list li a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 10px;
             padding:14px 16px;text-decoration:none;color:var(--ink);align-items:center}
.m-title{font-weight:600;font-size:16px}
.m-meta{grid-column:1;color:var(--ink-soft);font-size:13px}
.m-go{grid-column:2;grid-row:1 / span 2;font-size:24px;color:var(--primary);align-self:center}
.m-list.muted li{padding:12px 16px}
.m-list.muted .m-title{font-weight:500;font-size:15px;color:var(--ink-soft)}
.m-list li.done{opacity:.75}

.m-doc{display:flex;flex-direction:column;gap:12px;margin:8px 0 16px}
.m-page{position:relative;line-height:0}
.m-page img{width:100%;border:1px solid var(--line);border-radius:8px}
.m-sigzone{position:absolute;border:2px dashed var(--primary);background:rgba(31,122,109,.10);
           border-radius:4px;display:flex;align-items:flex-start;justify-content:flex-start}
.m-sigzone span{font-size:11px;color:var(--primary-dk);background:#fff;padding:1px 5px;border-radius:0 0 4px 0}

.m-actions{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 70%,transparent);padding:12px 0}
.btn-block{width:100%;padding:14px;font-size:16px}

.m-modal{position:fixed;inset:0;background:rgba(20,37,43,.55);display:flex;align-items:flex-end;z-index:50}
.m-modal[hidden]{display:none}
.m-modal-card{background:#fff;width:100%;border-radius:16px 16px 0 0;padding:18px 16px 22px}
.m-modal-card h2{margin:0 0 12px;font-size:16px}
.pad-wrap{border:1px dashed var(--line);border-radius:10px;background:#fbfdfd}
#pad{display:block;width:100%;touch-action:none}
.pad-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap}

.m-list .m-badge{grid-column:2;grid-row:1;justify-self:end;background:var(--warn-bg);color:var(--warn);
                 font-weight:700;font-size:13px;min-width:24px;text-align:center;border-radius:999px;padding:2px 8px}
.m-list li a{grid-template-columns:1fr auto auto}
.m-list .m-go{grid-column:3;grid-row:1 / span 2}

/* En-tête de groupe patient dans les tableaux */
table.data tr.group td{background:var(--primary-bg);color:var(--primary-dk);font-weight:700;
                       font-size:13px;text-transform:uppercase;letter-spacing:.03em;padding:9px 14px}
table.data tr.group .group-count{float:right;font-weight:600;text-transform:none;letter-spacing:0;
                                 color:var(--ink-soft);font-size:12px}

/* Groupes repliables + décalage des documents */
table.data.groupable tr.group td{cursor:pointer}
table.data tr.group .group-caret{display:inline-block;width:14px;color:var(--primary);transition:transform .15s ease}
table.data tr.group.collapsed .group-caret{transform:rotate(-90deg)}
table.data tr.doc-row td.doc-title{padding-left:30px;font-weight:400}
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.btn.is-disabled{opacity:.45;pointer-events:none}

/* Barre de téléchargement de la sélection */
.dl-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
table.data tr.doc-row td:first-child{padding-left:14px}
table.data td input[type=checkbox]{width:17px;height:17px}