/* ============================================================
   Gestion heures LDT — feuille de décompte
   Couleurs héritées de la légende du classeur :
   jaune = saisie · gris = calcul automatique · vert = paramètre de référence · rouge = journée dérogatoire
   ============================================================ */
:root {
  --ink: #1c2430; --ink-2: #4a5566; --ink-3: #8a93a1;
  --paper: #f3f5f8; --card: #ffffff; --line: #dde2e9; --line-2: #eceff3;
  --rail: #24406b; --rail-2: #1a3157; --rail-tint: #e8eef8;
  --input: #fff4cc; --input-2: #f6c744; --calc: #eef1f4; --ref: #e3f2e7; --ref-2: #2e7d4f;
  --alert: #b42318; --alert-tint: #fdecea; --night: #4b3fa0; --night-tint: #ecebf7;
  --ok: #2e7d4f; --warn: #b7791f; --warn-tint: #fff7e0;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 6px; --shadow: 0 1px 2px rgba(20,30,50,.06), 0 6px 20px -8px rgba(20,30,50,.15);
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.45; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; margin: 0; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
p { margin: .4em 0; } .muted { color: var(--ink-3); } .small { font-size: .85rem; }
a { color: var(--rail); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rail); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Boutons */
.btn { display: inline-flex; align-items: center; gap: .4em; padding: .45em .9em; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer; font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--rail); color: var(--rail); }
.btn.primary { background: var(--rail); border-color: var(--rail); color: #fff; } .btn.primary:hover { background: var(--rail-2); }
.btn.danger { color: var(--alert); border-color: #f0c2bd; } .btn.danger:hover { background: var(--alert-tint); }
.btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--rail-tint); }
.btn.sm { padding: .25em .6em; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---- Formulaires */
label { display: block; font-family: var(--display); font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: .5rem 0 .25rem; }
label > input, label > select, label > textarea { display: block; width: 100%; margin-top: .25rem; }
input, select, textarea { padding: .45em .6em; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--rail); outline: none; box-shadow: 0 0 0 3px rgba(36,64,107,.15); }
input.time { font-family: var(--mono); width: 5.2em; text-align: center; padding: .3em .2em; }
input.num { font-family: var(--mono); text-align: right; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .25rem 1.25rem; }
.error { color: var(--alert); background: var(--alert-tint); padding: .5em .8em; border-radius: var(--r); }
.hint { font-size: .85rem; color: var(--ink-3); margin-top: .2rem; }
.check { display: inline-flex; align-items: center; gap: .5em; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: .95rem; margin: .35rem 0; }
.check input { width: 1.1em; height: 1.1em; }

/* ---- Connexion */
.login-body { display: grid; place-items: center; min-height: 100vh; margin: 0; }
.login-card { background: var(--card); padding: 2rem 2.2rem; border-radius: 10px; box-shadow: var(--shadow); width: min(420px, 92vw); }
.login-card h2 { margin: 1rem 0 .3rem; }
.login-card form { margin-top: .8rem; } .login-card .btn { margin-top: 1rem; width: 100%; justify-content: center; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-mark { font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: .12em; background: var(--rail); color: #fff; padding: .25em .5em; border-radius: 4px; }
.brand h1 { font-size: 1.35rem; white-space: nowrap; }

/* ---- Structure */
.topbar { background: var(--rail); color: #fff; display: flex; align-items: center; gap: 1.2rem; padding: 0 1.2rem; height: 54px; position: sticky; top: 0; z-index: 30; }
.topbar .brand-mark { background: #fff; color: var(--rail); }
.topbar .brand h1 { color: #fff; font-size: 1.15rem; }
.nav { display: flex; gap: .15rem; margin-left: auto; overflow-x: auto; }
.nav a { color: rgba(255,255,255,.8); text-decoration: none; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .92rem; padding: .45em .55em; border-radius: 4px; white-space: nowrap; }
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; } .nav a.active { background: #fff; color: var(--rail); }
.userbox { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: rgba(255,255,255,.85); }
.userbox .btn { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; font-size: .85rem; }
.main { padding: 1.2rem; max-width: 1600px; margin: 0 auto; }
.card { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.card-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.card-head h2 { margin-right: auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } .topbar { height: auto; flex-wrap: wrap; padding: .4rem .8rem; } .nav { margin-left: 0; width: 100%; } .userbox { margin-left: auto; } }
.toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.toolbar select { min-width: 12em; }
.monthnav { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.monthnav button { border: 0; background: transparent; padding: .4em .7em; cursor: pointer; font-size: 1.1rem; } .monthnav button:hover { background: var(--rail-tint); }
.monthnav .label { font-family: var(--display); font-weight: 600; font-size: 1.15rem; min-width: 10em; text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.badge { display: inline-block; padding: .15em .55em; border-radius: 99px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; background: var(--calc); color: var(--ink-2); }
.badge.open { background: var(--input); color: #7a5a00; } .badge.submitted { background: var(--rail-tint); color: var(--rail); } .badge.validated { background: var(--ref); color: var(--ref-2); }
.badge.warn { background: var(--warn-tint); color: var(--warn); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-2); margin: .5rem 0; }
.legend span::before { content: ""; display: inline-block; width: 1em; height: 1em; border-radius: 3px; vertical-align: -.15em; margin-right: .35em; border: 1px solid var(--line); }
.legend .l-in::before { background: var(--input); } .legend .l-calc::before { background: var(--calc); } .legend .l-ref::before { background: var(--ref); } .legend .l-alert::before { background: var(--alert-tint); border-color: var(--alert); } .legend .l-sun::before { background: var(--rail-tint); }

/* ---- Bandeau des soldes (signature) */
.balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.bal { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .8rem; position: relative; overflow: hidden; }
.bal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rail); }
.bal.night::before { background: var(--night); } .bal.chf::before { background: var(--ref-2); }
.bal .k { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--ink-3); }
.bal .v { font-family: var(--mono); font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.bal .v.neg { color: var(--alert); } .bal .v.pos { color: var(--ref-2); }
.bal .from { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
.bal .from b { color: var(--ink-2); font-weight: 500; }

/* ---- Tableaux */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .88rem; }
#sheetTbl { font-size: .84rem; } #sheetTbl td.num, #sheetTbl td.calc { padding: .25em .4em; }
th, td { padding: .3em .5em; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); white-space: nowrap; vertical-align: middle; }
th:last-child, td:last-child { border-right: 0; }
thead th { position: sticky; top: 0; z-index: 3; background: var(--card); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; color: var(--ink-2); text-align: center; border-bottom: 2px solid var(--line); line-height: 1.15; }
thead tr.group th { font-size: .78rem; color: var(--ink-3); border-bottom: 1px solid var(--line-2); background: var(--paper); }
td.num, th.num { font-family: var(--mono); text-align: right; }
td.calc { background: var(--calc); } td.in { background: var(--input); } td.ref { background: var(--ref); }
td.night { color: var(--night); } td.chf { color: var(--ref-2); }
td.zero { color: var(--ink-3); }
tbody tr:hover td { filter: brightness(.985); }
tr.total td { font-weight: 600; background: var(--paper); border-top: 2px solid var(--line); }
tr.carry td { background: var(--rail-tint); font-weight: 600; }
tr.report td { background: var(--ref); color: var(--ref-2); font-weight: 500; }
td.day { font-family: var(--mono); text-align: center; width: 4.2em; }
td.day b { display: inline-block; width: 1.6em; } td.day small { color: var(--ink-3); }
tr.sun td.day, tr.hol td.day { background: var(--rail-tint); color: var(--rail); font-weight: 600; }
tr.hol td.day small { color: var(--rail); }
tr.nonconf td { background: var(--alert-tint); } tr.nonconf td.day { box-shadow: inset 4px 0 var(--alert); }
tr.warn td.code { box-shadow: inset 0 0 0 2px var(--warn); }
td.code input { width: 6.8em; font-family: var(--mono); font-weight: 500; background: transparent; border: 1px solid transparent; padding: .2em .4em; }
td.code input:hover, td.code input:focus { border-color: var(--input-2); background: #fff; }
td.just input { width: 9em; background: transparent; border: 1px solid transparent; padding: .2em .4em; } td.just input:hover, td.just input:focus { border-color: var(--input-2); background: #fff; }
td.conf { text-align: center; }
td.conf .sw { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; font-family: var(--display); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
td.conf .sw button { border: 0; background: #fff; padding: .15em .55em; cursor: pointer; color: var(--ink-3); }
td.conf .sw button.on { background: var(--ref); color: var(--ref-2); } td.conf .sw button.on.non { background: var(--alert); color: #fff; }
td.conf .sw button:disabled { cursor: default; }
.tbl-compact td, .tbl-compact th { padding: .25em .45em; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--rail-tint); }
.status-cell { text-align: center; }

/* ---- Tiroir latéral (exception / éditeur) */
.drawer-bg { position: fixed; inset: 0; background: rgba(20,30,50,.35); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--card); z-index: 41; box-shadow: -8px 0 30px rgba(0,0,0,.2); display: flex; flex-direction: column; animation: slidein .18s ease-out; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin-right: auto; }
.drawer-body { padding: 1rem 1.2rem; overflow: auto; flex: 1; }
.drawer-foot { padding: .8rem 1.2rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; justify-content: flex-end; background: var(--paper); }
.slots { display: grid; gap: .3rem; }
.slot { display: grid; grid-template-columns: 2.2em 1fr auto 1fr auto; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .9rem; }
.slot .idx { color: var(--ink-3); text-align: right; }
.slot .arrow { color: var(--ink-3); }
.slot .ext { font-family: var(--display); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin-top: 1rem; }
.preview div { background: var(--calc); border-radius: var(--r); padding: .45rem .6rem; }
.preview .k { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--ink-3); }
.preview .v { font-family: var(--mono); font-size: 1.1rem; }
.preview .night .v { color: var(--night); } .preview .chf .v { color: var(--ref-2); }

/* ---- Récap / contrôle */
.control { display: grid; grid-template-columns: 1fr auto auto; gap: .2rem 1.5rem; align-items: baseline; font-size: .95rem; }
.control .v { font-family: var(--mono); text-align: right; } .control .u { color: var(--ink-3); }
.control .over { color: var(--alert); font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; font-size: .92rem; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; font-family: var(--mono); }

/* ---- Aide */
.help h3 { margin-top: 1.2rem; } .help ul { padding-left: 1.2rem; } .help li { margin: .25rem 0; }
.help code { font-family: var(--mono); background: var(--calc); padding: .05em .35em; border-radius: 3px; }

/* ---- Toast */
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: .6em 1.1em; border-radius: 99px; font-size: .92rem; opacity: 0; pointer-events: none; transition: .2s; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.err { background: var(--alert); }

/* ---- Impression : feuille de décompte signable */
@media print {
  .topbar, .toolbar, .legend, .noprint, .drawer, .drawer-bg, .toast { display: none !important; }
  body { background: #fff; } .main { padding: 0; max-width: none; } .card { box-shadow: none; padding: 0; }
  .tbl-wrap { border: 0; overflow: visible; } table { font-size: 8.5pt; } th, td { padding: .15em .3em; }
  thead th { position: static; }
  .balances { grid-template-columns: repeat(5, 1fr); } .bal { border-radius: 0; }
  .signatures { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-top: 2rem; }
  .signatures div { border-top: 1px solid #000; padding-top: .3rem; font-size: .85rem; }
  @page { size: A4 landscape; margin: 10mm; }
}
.signatures { display: none; }