:root {
    --bg: #f5f6f8;
    --card-bg: #ffffff;
    --text: #1f2430;
    --muted: #6b7280;
    --border: #e2e5ea;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #dc2626;
    --success: #16a34a;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1, h2 { margin-top: 0; }

a { color: var(--primary); }

/* Auth */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}
.auth-form {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 320px;
}
@media (max-width: 400px) {
    .auth-form { padding: 1.75rem; }
}
.auth-form h1 { font-size: 1.4rem; margin-bottom: 0.2rem; }
.auth-logo {
    background: #0c0e12; border-radius: 8px; padding: 1rem 1.2rem;
    display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.auth-logo img { height: 40px; width: auto; display: block; }
.auth-form .subtitle { color: var(--muted); margin-top: 0; margin-bottom: 1.5rem; font-size: 0.9rem; text-align: center; }
.auth-form label { display: block; margin-bottom: 1rem; font-size: 0.9rem; }
.auth-form input {
    width: 100%; padding: 0.6rem; margin-top: 0.3rem;
    border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem;
}
.auth-form button {
    width: 100%; padding: 0.7rem; background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius); font-size: 1rem; cursor: pointer;
}
.auth-form button:hover { background: var(--primary-dark); }

.error { color: var(--danger); font-size: 0.9rem; }
.notice { color: var(--muted); font-size: 0.9rem; }

/* Nav */
.topnav {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    background: var(--card-bg); border-bottom: 1px solid var(--border);
    padding: 0.8rem 1.5rem; position: sticky; top: 0; z-index: 40;
}
.topnav .brand {
    font-weight: 700; display: flex; align-items: center; line-height: 0;
    background: #0c0e12; border-radius: 6px; padding: 0.5rem 0.9rem;
}
.brand-logo { height: 26px; width: auto; display: block; }
.nav-panel { display: flex; align-items: center; gap: 1.5rem; }
.topnav ul { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; }
.topnav ul a {
    text-decoration: none; color: var(--text); font-size: 0.95rem;
    display: inline-block; padding: 0.3rem 0;
}
.topnav ul a:hover { color: var(--primary); }
.user-menu { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--muted); }
.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); margin: 0 auto; }

@media (max-width: 720px) {
    .nav-toggle { display: flex; }
    .nav-panel {
        display: none; flex-direction: column; align-items: stretch; gap: 0;
        width: 100%; order: 3; margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.8rem;
    }
    .nav-panel.open { display: flex; }
    .topnav ul { flex-direction: column; gap: 0; }
    .topnav ul a { padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--border); font-size: 1rem; }
    .user-menu { justify-content: space-between; padding: 0.8rem 0.2rem 0; }
}

/* Layout */
.page, .dispatch-page { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.5rem; margin-bottom: 1.5rem;
}
.card.highlight { border-color: var(--primary); background: #eff6ff; }

/* Forms */
.form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.form-grid label, .modal label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.9rem; }
.form-grid input, .form-grid textarea,
.modal input, .modal select, .modal textarea {
    width: 100%; padding: 0.55rem; margin-top: 0.3rem;
    border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.95rem; color: var(--text);
    font-family: inherit;
}
.form-grid .span-2 { grid-column: span 2; }
.form-grid button, .modal button[type="submit"] {
    padding: 0.6rem 1.2rem; background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius); cursor: pointer; font-size: 0.95rem;
}
.form-grid button:hover, .modal button[type="submit"]:hover { background: var(--primary-dark); }
.form-row { display: flex; gap: 1rem; }
.form-row label { flex: 1; }

.inline-form { display: inline-flex; gap: 0.5rem; align-items: center; }
.inline-form select, .inline-form input[type="text"] {
    padding: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius);
}
.inline-form button {
    padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; cursor: pointer;
}
.inline-form .btn-on { background: #dcfce7; border-color: var(--success); color: #166534; }
.inline-form .btn-off { background: #fef2f2; border-color: var(--danger); color: #991b1b; }
.inline-form span.btn-on {
    display: inline-block; padding: 0.4rem 0.8rem; border: 1px solid var(--success);
    border-radius: var(--radius); font-weight: 600;
}
.inline-form .link-btn {
    border: none; background: none; padding: 0; color: var(--primary); text-decoration: underline;
    font-size: 0.85rem; cursor: pointer;
}

/* Tables */
.search-box {
    width: 100%; max-width: 320px; padding: 0.55rem 0.7rem; margin-bottom: 0.9rem;
    border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.9rem;
}
.data-table th { color: var(--muted); font-weight: 600; }

.tag { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; background: #eef1f5; }
.tag-ok { background: #dcfce7; color: #166534; }
.tag-pending { background: #fef3c7; color: #92400e; }

/* Dispatch board */
.board-toolbar {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;
}
.board-toolbar h1 { font-size: 1.2rem; text-transform: capitalize; flex: 1; text-align: center; }
.board-toolbar button, .board-toolbar a {
    padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; cursor: pointer; text-decoration: none; color: var(--text); font-size: 0.9rem;
}

.board {
    overflow-x: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.board-header, .board-row {
    display: grid; align-items: stretch; border-bottom: 1px solid var(--border);
}
.board-header { font-size: 0.8rem; color: var(--muted); }
.board-corner, .board-hour { padding: 0.5rem; border-right: 1px solid var(--border); text-align: center; }
/* La colonne camion reste visible pendant le défilement horizontal (utile sur mobile,
   où la timeline dépasse toujours la largeur de l'écran). */
.board-corner, .board-truck {
    position: sticky; left: 0; z-index: 2; background: var(--card-bg);
}
.board-corner { background: #fafbfc; }
.board-truck {
    display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    padding: 0.6rem; border-right: 1px solid var(--border); font-weight: 600; font-size: 0.9rem;
}
.add-btn {
    font-size: 0.75rem; padding: 0.2rem 0.5rem; border: 1px solid var(--border); border-radius: 999px;
    background: #fff; color: var(--muted); cursor: pointer;
}
.add-btn:hover { color: var(--primary); border-color: var(--primary); }
.trip-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.3rem; height: 1.3rem; border-radius: 4px; background: var(--primary);
    color: #fff; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
}
.day-note-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.5rem 0.9rem; margin-bottom: 0.6rem; border-radius: 8px;
    background: #fffbea; border: 1px solid #f1e2a0; font-size: 0.85rem;
}
.day-note-pin {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 0.35rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
    font-size: 0.7rem; color: var(--muted); cursor: pointer; flex-shrink: 0;
}
.day-note-pin.has-note { color: initial; }
.day-note-pin:not(.has-note):hover { background: var(--border); }
.notes-suivi-log {
    font-size: 0.78rem; color: var(--muted); white-space: pre-line; margin-bottom: 0.3rem;
    max-width: 16rem;
}
.board-track { min-height: 56px; position: relative; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px); background-size: 80px 100%; }

.trip-block {
    position: absolute; top: 6px; bottom: 6px; border-radius: 6px; padding: 0.3rem 0.5rem;
    display: flex; align-items: center; gap: 0.35rem;
    color: #fff; font-size: 0.78rem; cursor: pointer; overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.trip-block:hover { outline: 2px solid rgba(0,0,0,0.2); }
.trip-label { text-shadow: 0 1px 2px rgba(0,0,0,0.5); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.view-switch { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.view-switch button {
    padding: 0.5rem 0.9rem; border: none; background: #fff; cursor: pointer; font-size: 0.9rem; color: var(--muted);
}
.view-switch button.active { background: var(--primary); color: #fff; }

/* Vue mois */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-grid-head {
    background: #fafbfc; border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
}
.month-dow {
    padding: 0.5rem; text-align: center; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--muted); font-weight: 600;
}
.month-view .month-grid:not(.month-grid-head) {
    border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden;
}
.month-cell {
    background: var(--card-bg); border-top: 1px solid var(--border); border-right: 1px solid var(--border);
    min-height: 108px; padding: 0.4rem; cursor: pointer;
}
.month-cell:hover { background: #f8fafc; }
.month-cell:nth-child(7n) { border-right: none; }
.month-cell.other-month { background: #fafbfc; opacity: 0.55; }
.month-cell.is-today .day-num {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    background: var(--primary); color: #fff; border-radius: 50%;
}
.day-num-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.day-num { font-size: 0.82rem; font-weight: 600; }
.month-chip {
    display: block; font-size: 0.7rem; padding: 0.12rem 0.4rem; border-radius: 3px; margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.month-chip.confirme { color: #fff; font-weight: 600; }
.month-chip.en-attente { background: transparent; border: 1px dashed; font-weight: 500; }
.month-chip:hover { filter: brightness(0.92); }
.month-more { font-size: 0.65rem; color: var(--muted); }

/* Vue semaine */
.week-board { overflow-x: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.week-header, .week-row {
    display: grid; grid-template-columns: 160px repeat(7, minmax(120px, 1fr)); align-items: stretch;
    border-bottom: 1px solid var(--border);
}
.week-header { font-size: 0.78rem; color: var(--muted); background: #fafbfc; }
.week-corner, .week-dow {
    padding: 0.5rem; border-right: 1px solid var(--border); text-align: center;
}
.week-corner, .week-truck { position: sticky; left: 0; z-index: 2; background: var(--card-bg); }
.week-corner { background: #fafbfc; }
.week-truck {
    display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    padding: 0.6rem; border-right: 1px solid var(--border); font-weight: 600; font-size: 0.9rem;
}
.week-cell {
    padding: 0.35rem; border-right: 1px solid var(--border); cursor: pointer; min-height: 48px;
}
.week-cell:hover { background: #f8fafc; }
.week-cell .month-chip { cursor: pointer; }

.trajet-adresses {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; font-size: 0.82rem;
}
.trajet-adresses > div { display: flex; gap: 0.6rem; padding: 0.15rem 0; }
.trajet-adresses .k {
    font-size: 0.68rem; text-transform: uppercase; color: var(--muted); flex: 0 0 60px; letter-spacing: 0.02em;
    padding-top: 0.1rem;
}

/* Modal */
.modal {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
    align-items: center; justify-content: center; padding: 1rem; z-index: 50;
}
.modal.open { display: flex; }
.modal-content {
    background: #fff; border-radius: var(--radius); padding: 1.5rem; width: 480px; max-width: 100%;
    max-height: 90vh; overflow-y: auto;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.modal-header h2 { font-size: 1.1rem; }
#modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }

/* Devis — bloc de tarification */
.pricing-block {
    border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1rem 0.5rem; margin: 0 0 0.5rem;
}
.pricing-block legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.4rem; color: var(--text); }
.actions-cell { display: flex; gap: 0.8rem; align-items: center; white-space: nowrap; }

/* Lettre de confirmation imprimable */
.print-page { background: var(--bg); }
.print-toolbar {
    max-width: 720px; margin: 1.5rem auto 0; padding: 0 1.5rem; display: flex; gap: 1rem; align-items: center;
}
.print-toolbar button {
    padding: 0.5rem 1.2rem; background: var(--primary); color: #fff; border: none;
    border-radius: var(--radius); cursor: pointer;
}
.letter {
    max-width: 700px; margin: 1.5rem auto 3rem; padding: 2.75rem 3rem 2rem; line-height: 1.65; color: #171b22;
    background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border);
}
.letter-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding-bottom: 1.1rem; margin-bottom: 1.8rem; border-bottom: 3px solid var(--primary);
}
/* Le logo officiel est blanc/transparent (prévu pour un fond sombre, comme sur le site
   web de Turbo). brightness(0) le rend noir sans toucher sa transparence, pour qu'il
   ressorte sur le papier blanc de la lettre. */
.letter-logo-img { height: 40px; width: auto; display: block; filter: brightness(0); }
.letter-meta {
    text-align: right; font-size: 0.78rem; color: var(--muted); line-height: 1.6; white-space: nowrap;
}
.letter h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.4rem; letter-spacing: -0.01em; }
.letter .signature { margin-top: 1.5rem; }
.letter-total {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    background: #eff6ff; border: 1px solid #dbeafe; border-radius: var(--radius);
    padding: 0.9rem 1.2rem; margin: 1.4rem 0; font-size: 0.9rem; color: var(--primary-dark);
}
.letter-total strong { font-size: 1.25rem; }
.letter-foot {
    display: flex; align-items: center; gap: 0.9rem; margin-top: 2.5rem; padding-top: 1.2rem;
    border-top: 1px solid var(--border);
}
.letter-logo-img.small { height: 22px; opacity: 0.55; }
.letter-foot-info { font-size: 0.76rem; color: var(--muted); line-height: 1.5; }
.letter-foot-info strong { display: block; font-size: 0.82rem; color: var(--text); font-weight: 600; }

/* Mobile */
@media (max-width: 640px) {
    .page, .dispatch-page { padding: 1rem; }
    .card { padding: 1rem; }

    /* Formulaires : une seule colonne, cibles tactiles plus grandes */
    .form-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 0; }
    .form-grid label, .modal label { margin-bottom: 0.75rem; }
    .form-grid input, .form-grid select, .form-grid textarea,
    .modal input, .modal select, .modal textarea {
        padding: 0.7rem; font-size: 1rem; /* évite le zoom auto iOS sur les champs */
    }
    .form-grid button, .modal button[type="submit"] { width: 100%; padding: 0.85rem; }
    .pricing-block { padding: 0.85rem 0.85rem 0.4rem; }

    .inline-form { flex-wrap: wrap; }
    .actions-cell { flex-wrap: wrap; gap: 0.6rem 1rem; }

    /* Tableaux : cartes empilées plutôt que défilement horizontal */
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tr {
        border: 1px solid var(--border); border-radius: var(--radius);
        margin-bottom: 0.75rem; padding: 0.4rem 0.8rem; background: var(--card-bg);
    }
    .data-table td {
        border-bottom: 1px solid var(--border);
        padding: 0.5rem 0; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    }
    .data-table td:last-child { border-bottom: none; }
    .data-table td::before {
        content: attr(data-label); font-weight: 600; color: var(--muted); font-size: 0.72rem;
        text-transform: uppercase; letter-spacing: 0.02em; flex: 0 0 auto;
    }
    .data-table td:empty::before { content: none; }

    /* Dispatch board */
    .board-toolbar { gap: 0.5rem; flex-wrap: wrap; }
    .board-toolbar h1 { font-size: 1rem; order: 3; width: 100%; text-align: left; margin-top: 0.3rem; }
    .board-toolbar button { padding: 0.6rem 0.8rem; }
    .board-truck { font-size: 0.82rem; padding: 0.5rem; }
    .view-switch { margin-left: auto; }

    /* Vue mois : cases plus compactes, une seule puce visible */
    .month-cell { min-height: 64px; padding: 0.3rem; }
    .month-dow { font-size: 0.62rem; padding: 0.35rem 0.1rem; }
    .month-chip { font-size: 0.62rem; }

    /* Vue semaine : colonnes plus étroites, défilement horizontal */
    .week-header, .week-row { grid-template-columns: 110px repeat(7, minmax(90px, 1fr)); }
    .week-truck { font-size: 0.8rem; padding: 0.5rem; }
    .week-dow { font-size: 0.68rem; }

    /* Modale : profite de tout l'écran */
    .modal { padding: 0; align-items: flex-end; }
    .modal-content { width: 100%; border-radius: var(--radius) var(--radius) 0 0; max-height: 92vh; padding: 1.1rem; }
}

/* Fiche journalière par camion */
.journee-fiche { max-width: 720px; }
.camion-titre {
    margin: 1.8rem 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--text);
    font-size: 1.1rem; display: flex; align-items: baseline; gap: 0.6rem;
}
.camion-titre:first-of-type { margin-top: 0.5rem; }
.camion-taille { font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.fiche-devis { margin-bottom: 1.2rem; font-size: 0.82rem; page-break-inside: avoid; }
.fiche-devis th { white-space: nowrap; }

@media print {
    .no-print { display: none !important; }
    .topnav { display: none; }
    .letter { margin: 0 auto; box-shadow: none; border: none; border-radius: 0; padding: 0.5rem 0.25rem; }
    .camion-titre { page-break-after: avoid; }
}