:root{
  --navy:#010B37;
  --navy-soft:#151F4B;
  --green:#35EA53;
  --green-soft:#E6FBEA;
  --paper:#F5F6F8;
  --card:#FFFFFF;
  --line:#E4E6EC;
  --ink:#20222E;
  --ink-mute:#6B7080;
  --amber:#B87F1F;
  --amber-soft:#FBF1E0;
  --brick:#B23B33;
  --brick-soft:#FBEAE8;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;}
.mono{font-family:'IBM Plex Mono',monospace; font-variant-numeric: tabular-nums;}
button{font-family:inherit;cursor:pointer;border:none;}
input,select,textarea{font-family:inherit;}
a{color:inherit;}

header.top{
  background:var(--navy); color:#fff; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  position:sticky; top:0; z-index:20; border-bottom:3px solid var(--green);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand .mark{
  width:44px; height:32px; border-radius:8px; background:#fff; padding:4px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.brand .mark img{width:100%; height:100%; object-fit:contain;}
.brand h1{font-size:17px;}
.brand span{display:block; font-size:11px; color:#aab0d9; font-weight:500; letter-spacing:.4px; text-transform:uppercase;}

.nav-tabs{display:flex; gap:4px; background:var(--navy-soft); border-radius:999px; padding:3px;}
.nav-tabs a{padding:7px 14px; border-radius:999px; color:#c7cbe6; font-size:13px; font-weight:600; text-decoration:none;}
.nav-tabs a.active{background:var(--green); color:var(--navy);}

.identity{display:flex; align-items:center; gap:10px; font-size:13px; color:#c7cbe6;}
.identity .logout{font-size:12px; color:#8b90b8; text-decoration:underline;}

main{max-width:900px; margin:0 auto; padding:24px 18px 80px;}

.login-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px; max-width:420px; margin:40px auto; text-align:center;}
.login-logo{max-width:220px; height:auto; margin:0 auto 20px; display:block;}
.login-card select{width:100%; padding:10px; border-radius:8px; border:1px solid var(--line); margin:16px 0;}
.muted{color:var(--ink-mute); font-size:13.5px;}

.flash{background:var(--amber-soft); color:var(--amber); padding:10px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px;}

.section-title{display:flex; align-items:baseline; gap:10px; margin:28px 0 12px;}
.section-title h2{font-size:15px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-mute);}
.section-title .count{background:var(--line); color:var(--ink-mute); font-size:12px; padding:2px 8px; border-radius:999px; font-weight:600;}

.empty{border:1.5px dashed var(--line); border-radius:14px; padding:34px 20px; text-align:center; color:var(--ink-mute); font-size:14px;}

.draft-card{background:var(--card); border-radius:16px; border:1px solid var(--line); padding:20px; box-shadow:0 1px 2px rgba(24,28,54,.04);}
.draft-head{margin-bottom:14px;}
.draft-head h3{font-size:18px;}

.btn{padding:10px 16px; border-radius:10px; font-weight:600; font-size:13px; display:inline-block;}
.btn-primary{background:var(--green); color:var(--navy);}
.btn-outline{background:#fff; border:1.5px solid var(--line); color:var(--ink);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-danger{background:var(--brick-soft); color:var(--brick);}

.scan-row{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.scan-row form{margin:0;}
label.file-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--green-soft); color:var(--green);
  border:1.5px dashed var(--green); padding:10px 16px; border-radius:10px; font-weight:600; font-size:13px; cursor:pointer;
}
label.file-btn input[type=file]{display:none;}

.items-grid{
  display:grid; grid-template-columns: 1.3fr .9fr 1.2fr 1.3fr .8fr 32px;
  gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid #F0F1F5;
}
.items-grid.header{
  font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-mute); border-bottom:1px solid var(--line);
}
.items-grid select, .items-grid input{
  border:1px solid transparent; background:transparent; border-radius:6px; padding:6px; width:100%; font-size:13.5px;
}
.items-grid select:hover, .items-grid input:hover, .items-grid select:focus, .items-grid input:focus{
  border-color:var(--line); background:#fafbfc; outline:none;
}
.items-grid input.amt{text-align:right;}
.del-btn{background:none; color:var(--ink-mute); font-size:16px;}
.del-btn:hover{color:var(--brick);}

.totals{display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.totals .amount{font-size:22px; font-weight:600;}
.draft-actions{display:flex; gap:10px; margin-top:16px; justify-content:flex-end;}
.draft-actions form{margin:0;}

.report-card{background:var(--card); border-radius:16px; border:1px solid var(--line); padding:18px 20px; margin-bottom:14px; box-shadow:0 1px 2px rgba(24,28,54,.04);}
.report-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap;}
.report-top .who{font-weight:600; font-size:15px;}
.report-top .meta{font-size:12px; color:var(--ink-mute); margin-top:2px;}
.report-top .amount{font-size:20px; font-weight:700;}

.badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.2px;}
.b-soumis{background:var(--amber-soft); color:var(--amber);}
.b-envoye_rh{background:var(--green-soft); color:var(--green);}
.b-refuse{background:var(--brick-soft); color:var(--brick);}
.b-traite{background:#EAEAF4; color:var(--navy);}

.lines-toggle{font-size:12.5px; color:var(--green); font-weight:600; cursor:pointer; margin-top:10px;}
.line-row{display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--ink-mute);}
.line-row span:first-child{color:var(--ink);}

.decision-row{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.decision-row form{margin:0;}
.reject-details summary{list-style:none; cursor:pointer;}
.reject-details summary::-webkit-details-marker{display:none;}
.reject-details form{margin-top:10px;}
.comment-box{width:100%; border:1px solid var(--line); border-radius:8px; padding:8px; font-size:13px; resize:vertical; min-height:50px; margin-bottom:8px;}

.note{font-size:12.5px; padding:8px 10px; border-radius:8px; margin-top:10px;}
.note.reject{background:var(--brick-soft); color:var(--brick);}
.note.rh{background:var(--green-soft); color:var(--green);}

.auth-form{display:flex; flex-direction:column; gap:14px; text-align:left; margin-top:10px;}
.auth-form label{font-size:12.5px; font-weight:600; color:var(--ink-mute); display:flex; flex-direction:column; gap:5px;}
.auth-form input, .auth-form select{
  padding:10px; border-radius:8px; border:1px solid var(--line); font-size:14px; font-weight:400; color:var(--ink);
}

.roles-form{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);}
.role-check{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-mute); text-transform:capitalize;}

.km-details{position:relative;}
.km-details summary{list-style:none; cursor:pointer;}
.km-details summary::-webkit-details-marker{display:none;}
.km-form{
  position:absolute; z-index:10; background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px; margin-top:8px; min-width:260px; box-shadow:0 4px 16px rgba(24,28,54,.12);
}
.plafond-warning{font-size:12px; color:var(--brick); margin:-4px 0 8px 0; padding-left:2px;}
.over-plafond{color:var(--brick); font-weight:700;}

.justif-row{display:flex; align-items:center; gap:12px; margin:2px 0 12px; font-size:12.5px; flex-wrap:wrap;}
.justif-link{color:var(--green); font-weight:600; text-decoration:none;}
.justif-link:hover{text-decoration:underline;}
.justif-add, .justif-replace{color:var(--green); font-weight:600; cursor:pointer;}
.justif-add input[type=file], .justif-replace input[type=file]{display:none;}
.justif-replace{color:var(--ink-mute); font-weight:500;}
.justif-missing{color:var(--amber); font-weight:600;}

.journal-filter{display:flex; gap:10px; align-items:center; margin-bottom:16px;}
.journal-filter select{padding:8px 10px; border-radius:8px; border:1px solid var(--line); font-size:13px;}
.journal-table{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.journal-head, .journal-line{
  display:grid; grid-template-columns: 1.3fr 1.4fr 1.5fr 1.3fr 1.8fr 1fr; gap:10px;
  padding:10px 14px; font-size:12.5px; align-items:start;
}
.journal-head{background:var(--paper); font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-mute); font-weight:700;}
.journal-line{border-top:1px solid #F0F1F5;}
.journal-line span{word-break:break-word;}
.action-tag{font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; display:inline-block;}
.action-ok{background:var(--green-soft); color:var(--green);}
.action-warn{background:var(--brick-soft); color:var(--brick);}
.action-neutral{background:#EAEAF4; color:var(--navy);}
.journal-pagination{display:flex; gap:14px; align-items:center; justify-content:center; margin-top:18px;}

@media (max-width:760px){
  .journal-head{display:none;}
  .journal-line{grid-template-columns:1fr 1fr; gap:4px;}
}

.bareme-row{
  display:grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap:8px; align-items:end;
  padding:10px 0; border-bottom:1px solid #F0F1F5; font-size:12px;
}
.bareme-row label{display:flex; flex-direction:column; gap:4px; color:var(--ink-mute); font-weight:600;}
.bareme-row input{padding:6px; border-radius:6px; border:1px solid var(--line); font-size:13px; font-weight:400; color:var(--ink);}

@media (max-width:640px){
  .bareme-row{grid-template-columns:1fr 1fr;}
  .items-grid{grid-template-columns:1fr; gap:4px; padding:12px 0;}
  .items-grid.header{display:none;}
  .items-grid{border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px;}
}