/* ===========================================================
   RTF MENUISERIE 974 — App interne
   Palette dérivée du logo (lame de scie orange sur fond clair)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Archivo+Expanded:wght@600;700&display=swap');

:root{
  --ink:        #F2EDE4;
  --ink-soft:   #AFA697;
  --bg:         #0E0D0C;
  --surface:    #1B1916;
  --line:       #2E2A24;
  --line-strong:#453F36;
  --accent:     #F07C1A;
  --accent-dark:#FF9A45;
  --accent-wash:#3A2413;
  --wood:       #D4A26B;
  --success:    #6FBF7D;
  --success-wash:#17281B;
  --danger:     #E2795F;
  --danger-wash:#33190F;
  --warn:       #E3B750;
  --warn-wash:  #302408;
  --toast-bg:   #2A2620;
  --toast-text: #F2EDE4;

  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-nav: 0 -1px 0 var(--line);

  --nav-h: 64px;
  --rail-w: 216px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Archivo Expanded','Manrope',sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
}
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:15px; }

a{ color:inherit; }

/* ---------- Layout shell ---------- */
#app-shell{
  display:flex;
  min-height:100%;
}

.rail{
  display:none;
}

.main{
  flex:1;
  min-width:0;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: 900px;
  margin: 0 auto;
  width:100%;
}
body.kb-open .fab{ display:none; }

@media (min-width: 860px), (hover: hover) and (pointer: fine){
  .rail{
    display:flex;
    flex-direction:column;
    width:var(--rail-w);
    flex-shrink:0;
    background:var(--surface);
    border-right:1px solid var(--line);
    padding:20px 12px;
    position:sticky;
    top:0;
    height:100vh;
  }
  .main{ padding: 28px 32px 40px; max-width:1040px; }
}

/* ---------- Top brand bar (mobile) ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px 6px;
  max-width:900px;
  margin:0 auto;
  width:100%;
}
.topbar img{ height:30px; width:auto; max-width:150px; }
.topbar .brand-name{ font-size:14px; font-weight:800; letter-spacing:0.01em; }
.topbar .brand-tag{ font-size:11px; color:var(--wood); font-weight:600; }
@media (min-width: 860px), (hover: hover) and (pointer: fine){ .topbar{ display:none; } }

/* ---------- Rail (desktop/chromebook) ---------- */
.rail-brand{
  display:flex; align-items:center; justify-content:center;
  padding:10px 10px 22px;
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
}
.rail-brand img{ width:100%; max-width:168px; height:auto; }

.rail-link{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  border-radius:var(--radius-s);
  font-weight:700;
  font-size:14.5px;
  color:var(--ink-soft);
  cursor:pointer;
  border:1px solid transparent;
}
.rail-link .ic{ width:20px; text-align:center; }
.rail-link:hover{ background:var(--bg); }
.rail-link.active{
  background:var(--accent-wash);
  color:var(--accent-dark);
  border-color:#6B441F;
}
.rail-spacer{ flex:1; }
.rail-sync{
  font-size:11.5px; color:var(--ink-soft); padding:10px 12px; border-top:1px solid var(--line); margin-top:8px;
}

/* ---------- Menu galerie (mobile/tablette), remplace l'ancienne barre basse ---------- */
.mobile-menu-overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display:flex; flex-direction:column;
}
.mobile-menu-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
  font-weight:800; font-size:16px;
}
.mobile-menu-grid{
  flex:1; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
  padding:10px 12px calc(24px + env(safe-area-inset-bottom, 0px));
}
.mm-link{
  display:flex; flex-direction:row; align-items:center;
  gap:14px; padding:14px 12px;
  border:1px solid transparent; border-radius:var(--radius-m);
  background:transparent; color:var(--ink);
  font-size:15px; font-weight:700; text-align:left;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.mm-link .ic{ font-size:20px; line-height:1; width:24px; text-align:center; flex-shrink:0; }
.mm-link.active{ border-color:var(--accent); background:var(--accent-wash); color:var(--accent-dark); }
@media (min-width:860px), (hover: hover) and (pointer: fine){ .mobile-menu-overlay, #btn-menu-mobile{ display:none !important; } }

/* ---------- Page header ---------- */
.page-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.page-head h1{ font-size:22px; }
.page-sub{ color:var(--ink-soft); font-size:13.5px; margin-top:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--radius-s);
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--ink);
  font-weight:700;
  font-size:14px;
  padding:10px 16px;
  cursor:pointer;
  min-height:42px;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn-primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-ghost{ border-color:transparent; background:transparent; }
.btn-danger{ color:var(--danger); border-color:#5C2E22; }
.btn-sm{ padding:7px 11px; font-size:12.5px; min-height:34px; }
.btn-block{ width:100%; }

/* ---------- Menu d'actions secondaires (⋯), pour désencombrer les fiches ---------- */
.actions-more-wrap{ position:relative; display:inline-block; }
.actions-more-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:50;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-m);
  box-shadow:0 6px 20px rgba(0,0,0,.35); min-width:220px; overflow:hidden; display:none;
}
.actions-more-menu.open{ display:block; }
.actions-more-menu button, .actions-more-menu a{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 14px; background:none; border:none; color:var(--ink); font-size:14px; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.actions-more-menu button:hover, .actions-more-menu a:hover{ background:var(--bg); }
.actions-more-menu button.danger, .actions-more-menu a.danger{ color:var(--danger); }
.actions-more-menu hr{ border:none; border-top:1px solid var(--line); margin:4px 0; }
.fab{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:#fff; border:none;
  font-size:26px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(221,107,16,0.4);
  z-index:41; cursor:pointer;
}
@media (min-width:860px), (hover: hover) and (pointer: fine){ .fab{ display:none; } }

/* ---------- Cards / lists ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:14px;
}
.list{ display:flex; flex-direction:column; gap:8px; }
.row-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:13px 14px;
  display:flex; align-items:center; gap:12px;
  cursor:pointer;
}
.row-card:hover{ border-color:var(--line-strong); }
.row-main{ flex:1; min-width:0; }
.row-title{ font-weight:700; font-size:15px; }
.row-meta{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.row-amount{ font-weight:800; font-size:15px; white-space:nowrap; }
.row-pdf-btn{ flex-shrink:0; }

.badge{
  display:inline-block; font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px;
}
.badge-devis{ background:#242142; color:#B7B4F0; }
.badge-facture{ background:var(--accent-wash); color:var(--accent-dark); }
.badge-paid{ background:var(--success-wash); color:var(--success); }
.badge-late{ background:var(--danger-wash); color:var(--danger); }
.badge-acompte{ background:var(--warn-wash); color:var(--warn); }
.badge-solde{ background:var(--accent-wash); color:var(--accent-dark); }
.badge-soustraitance{ background:#0F2A2E; color:#5FD0C7; }
.badge-type-client{ background:var(--accent-wash); color:var(--accent-dark); }
.badge-statut-avenir{ background:var(--warn-wash); color:var(--warn); }
.badge-statut-encours{ background:var(--accent-wash); color:var(--accent-dark); }
.badge-statut-termine{ background:var(--success-wash); color:var(--success); }

/* ---------- Planning : toggle vues + calendrier ---------- */
.chip-row-toggle{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.row-itin-btn{ flex-shrink:0; align-self:center; }
.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-nav-label{ font-weight:700; font-size:14.5px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:4px; }
.cal-grid-head{ margin-bottom:6px; }
.cal-cell{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  min-height:56px; padding:4px; font-size:9.5px; cursor:pointer; overflow:hidden;
}
.cal-cell.cal-head{ background:transparent; border:none; min-height:auto; text-align:center; font-weight:700; color:var(--ink-soft); cursor:default; padding:2px; }
.cal-cell.cal-empty{ background:transparent; border:none; cursor:default; }
.cal-cell.cal-today{ border-color:var(--accent); }
.cal-cell.cal-selected{ border-color:var(--accent-dark); box-shadow:0 0 0 1px var(--accent-dark); }
.cal-daynum{ font-weight:700; font-size:11px; margin-bottom:2px; }
.cal-chip{
  border-radius:3px; padding:1px 3px; margin-bottom:2px; font-size:8.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-more{ font-size:8.5px; color:var(--ink-soft); }
.week-day-card{ padding:12px; }
.week-day-label{ font-weight:700; font-size:13px; margin-bottom:8px; color:var(--wood); text-transform:uppercase; letter-spacing:.02em; }
@media (min-width:640px){
  .cal-cell{ min-height:80px; font-size:11px; padding:6px; }
  .cal-daynum{ font-size:13px; }
  .cal-chip{ font-size:10px; padding:2px 5px; }
}

/* ---------- CFT : checklist travaux + signatures ---------- */
.cft-item-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.cft-item-row:last-child{ border-bottom:none; }
.cft-item-label{ font-size:12.5px; flex:1; }
.cft-item-btns{ display:flex; gap:4px; flex-shrink:0; }
.cft-val-btn{ border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); font-size:11px; font-weight:700; padding:5px 9px; border-radius:6px; cursor:pointer; }
.cft-val-btn.active-oui{ background:var(--success-wash); color:var(--success); border-color:var(--success); }
.cft-val-btn.active-non{ background:var(--danger-wash); color:var(--danger); border-color:var(--danger); }
.cft-val-btn.active-so{ background:var(--line); color:var(--ink-soft); border-color:var(--line-strong); }
.sig-pad-wrap{ border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; background:#fff; }
.sig-pad{ width:100%; height:150px; display:block; touch-action:none; }

.empty-state{
  text-align:center; padding:44px 20px; color:var(--ink-soft);
}
.empty-state .ic{ font-size:34px; margin-bottom:10px; }
.empty-state h3{ font-size:16px; color:var(--ink); margin-bottom:4px; }
.empty-state p{ font-size:13.5px; margin:0; }

/* ---------- Forms ---------- */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-s);
  padding:10px 11px;
  background:var(--surface);
  color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
.field-row{ display:flex; gap:10px; flex-wrap:wrap; }
.field-row > .field{ flex:1 1 140px; }
.uppercase-input{ text-transform:uppercase; }

/* ---------- Écran de connexion ---------- */
.auth-screen{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.auth-screen.visible{ display:flex; }
.auth-box{
  max-width:360px; width:100%; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.auth-box img{ height:64px; margin-bottom:6px; }
.auth-box h1{ font-size:20px; margin:0; }
.auth-box p{ color:var(--ink-soft); font-size:14px; margin:0 0 6px; }
.auth-error{ color:var(--danger); font-size:13px; margin-top:4px; }

/* ---------- Écran de chargement ---------- */
.loading-screen{
  position:fixed; inset:0; z-index:300;
  background:linear-gradient(160deg, var(--bg) 0%, var(--surface) 100%);
  display:flex; align-items:center; justify-content:center;
}
.loading-screen.hidden{ display:none; }
.loading-box{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.loading-box img{
  height:72px; animation:loading-pulse 1.8s ease-in-out infinite;
}
.loading-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--line-strong); border-top-color:var(--accent);
  animation:loading-spin 0.8s linear infinite;
}
.loading-text{ font-size:13px; font-weight:700; color:var(--ink-soft); letter-spacing:.03em; }
@keyframes loading-spin{ to{ transform:rotate(360deg); } }
@keyframes loading-pulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.75; transform:scale(0.94); }
}
.hint{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; }

/* ---------- Search ---------- */
.search-bar{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line-strong); border-radius:var(--radius-s);
  padding:9px 12px; margin-bottom:14px; background:var(--surface);
}
.search-bar input{ border:none; outline:none; flex:1; background:transparent; font-size:14.5px; }

/* ---------- Table (lignes devis/facture) ---------- */
.line-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.line-table th{ text-align:left; font-size:11px; text-transform:none; color:var(--ink-soft); font-weight:700; padding:6px 6px; border-bottom:1px solid var(--line); }
.line-table td{ padding:8px 6px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
.line-table td.num{ text-align:right; white-space:nowrap; }
.line-table input, .line-table textarea{ width:100%; }
.line-table textarea{ resize:vertical; }
.qte-unite-wrap{ display:flex; flex-direction:column; gap:3px; white-space:normal; }
.qte-unite-wrap select.l-unite{ width:100%; font-size:11px; padding:2px 3px; }
.desig-wrap{ position:relative; }
.desig-wrap .l-designation{ padding-right:22px; overflow:hidden; resize:none; transition:height .12s ease; }
.desig-resize-btn{
  position:absolute; right:2px; bottom:2px; width:18px; height:18px; padding:0;
  font-size:11px; line-height:18px; text-align:center; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:4px;
  cursor:ns-resize; touch-action:none; user-select:none;
}
.line-actions{ display:flex; gap:3px; }
.btn-icon{ padding:4px 5px; min-height:26px; min-width:26px; font-size:12px; line-height:1; }

/* Sur petit écran, la désignation prend toute la largeur ; qté/prix/total/actions
   passent sur une seconde ligne, plus compacts, plutôt que de se partager l'espace. */
@media (max-width: 640px){
  .line-table-edit colgroup{ display:none; }
  .line-table-edit thead{ display:none; }
  .line-table-edit, .line-table-edit tbody{ display:block; width:100%; }
  .line-table-edit tr{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:10px 0; border-bottom:1px solid var(--line); }
  .line-table-edit td{ display:block; padding:0; border-bottom:none; width:auto !important; }
  .line-table-edit td:nth-child(1){ flex:1 1 100%; }
  .line-table-edit td:nth-child(2){ flex:1 1 62px; }
  .line-table-edit td:nth-child(3){ flex:1 1 84px; }
  .line-table-edit td:nth-child(4){ flex:1 1 84px; }
  .line-table-edit td:nth-child(5){ flex:0 0 auto; margin-left:auto; }
  .line-table-edit td.num{ text-align:left; }
}

.totals-box{ margin-top:14px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:100%; }
.totals-row{ display:flex; justify-content:space-between; gap:14px; width:100%; max-width:320px; font-size:14px; }
.totals-row > span:first-child{ flex:1 1 auto; min-width:0; }
.totals-row > span:last-child{ white-space:nowrap; flex:0 0 auto; }
.totals-row.grand{ font-weight:800; font-size:17px; border-top:1px solid var(--line-strong); padding-top:8px; }

/* ---------- Toast / sync ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  background:var(--toast-bg); color:var(--toast-text); padding:10px 16px; border-radius:20px;
  font-size:13.5px; font-weight:600; z-index:60;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
@media (min-width:860px), (hover: hover) and (pointer: fine){ .toast{ bottom:20px; } }

.offline-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; color:var(--warn);
  background:var(--warn-wash); padding:4px 9px; border-radius:20px;
}
.offline-pill.online{ color:var(--success); background:var(--success-wash); }

/* ---------- Catalogue : groupes & fenêtre de sélection ---------- */
.cat-sub-title{
  font-size:12px; font-weight:700; color:var(--wood); text-transform:uppercase;
  letter-spacing:.02em; margin:12px 0 6px;
}
.cat-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.cat-chips:empty{ display:none; }
.chip{
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink-soft);
  padding:6px 12px; border-radius:20px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.chip.active{ background:var(--accent-wash); border-color:#6B441F; color:var(--accent-dark); }
.chip-sub{ font-size:12px; padding:5px 10px; }

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:640px){ .modal-overlay{ align-items:center; } }

.img-preview-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:210;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.img-preview-overlay img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; }
.modal{
  background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius-m) var(--radius-m) 0 0;
  width:100%; max-width:560px; max-height:85vh; display:flex; flex-direction:column;
}
@media (min-width:640px){ .modal{ border-radius:var(--radius-m); max-height:80vh; } }
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.modal-title{ font-weight:800; font-size:15px; }
.modal-body{ padding:16px 18px; overflow-y:auto; }
.mb-10{ margin-bottom:10px; }

/* ---------- Utility ---------- */
.stack{ display:flex; flex-direction:column; gap:12px; }
.hidden{ display:none !important; }
.mt-8{ margin-top:8px;} .mt-16{ margin-top:16px;} .mt-24{ margin-top:24px;}
.muted{ color:var(--ink-soft); }
.section-title{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin:22px 0 10px; }
.section-title:first-child{ margin-top:0; }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:860px), (hover: hover) and (pointer: fine){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px; }
.stat-card .n{ font-size:22px; font-weight:800; }
.stat-card .l{ font-size:12px; color:var(--ink-soft); font-weight:600; }

.ca-hero{
  background:linear-gradient(135deg, var(--accent-wash) 0%, var(--surface) 100%);
  border:1px solid #6B441F; border-radius:var(--radius-m);
  padding:20px; margin-bottom:16px;
}
.ca-hero-label{ font-size:13px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.ca-hero-value{ font-size:36px; font-weight:800; color:var(--accent-dark); margin:4px 0 2px; }
.ca-hero-sub{ font-size:13px; color:var(--ink-soft); font-weight:600; }

/* Natures d'intervention du planning */
.nat-chantier{ background:var(--accent-wash); color:var(--accent-dark); }
.nat-metrage{ background:#10243A; color:#6FB3F2; }
.nat-visite{ background:#1E2B14; color:#A5D86B; }
.nat-sav{ background:#3A1313; color:#FF7B72; }
.nat-border{ border-left:4px solid transparent; }
.nat-chantier-b{ border-left-color:var(--accent); }
.nat-metrage-b{ border-left-color:#6FB3F2; }
.nat-visite-b{ border-left-color:#A5D86B; }
.nat-sav-b{ border-left-color:#FF7B72; }
.nat-legend{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }