/* css/styles.css (THEME CLAIR - COMPACT & FONCTIONNEL) */
:root{
  --c-primary:#01AAC1;
  --c-navy:#12324a;

  --c-ink:#0f172a;
  --c-ink2:#334155;

  --c-bg:#f3f6fb;
  --c-card:#ffffff;
  --c-line:rgba(15,23,42,.12);
  --c-muted:rgba(15,23,42,.72);
  --c-muted2:rgba(15,23,42,.55);

  --c-ok:#16a34a;
  --c-warn:#f59e0b;
  --c-off:#ef4444;

  --r:12px;
  --shadow2: 0 6px 16px rgba(15,23,42,.08);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background: linear-gradient(180deg, var(--c-bg), #eef2f7);
  color:var(--c-ink);
  font-size:14px;
}

/* NAVBAR */
.kb-navbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 14px;
  border-bottom:1px solid var(--c-line);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}
.kb-navbar__left{display:flex; gap:12px; align-items:center;}
.kb-navbar__right{display:flex; align-items:center;}

.kb-brand{
  display:flex;
  gap:8px;
  align-items:center;
  text-decoration:none;
  color:var(--c-ink);
}
.kb-brand__logo{width:28px;height:28px;}
.kb-brand__logo--big{width:38px;height:38px;}
.kb-brand__name{font-weight:900; letter-spacing:.2px; font-size:14px;}
.kb-brand__apostrophe{color:var(--c-primary)}

.kb-navlinks{display:flex; gap:6px; align-items:center;}
.kb-link{
  text-decoration:none;
  color:var(--c-muted);
  padding:6px 8px;
  border-radius:10px;
  border:1px solid transparent;
  font-size:13px;
}
.kb-link:hover{
  color:var(--c-ink);
  border-color:rgba(1,170,193,.22);
  background:rgba(1,170,193,.08);
}
.kb-link.is-active{
  color:var(--c-ink);
  border-color:rgba(1,170,193,.32);
  background:rgba(1,170,193,.12);
}

.kb-user{display:flex; align-items:center; gap:10px;}
.kb-user__meta{line-height:1.15; text-align:right;}
.kb-user__name{font-weight:800; font-size:13px;}
.kb-user__role{font-size:11px; color:var(--c-muted2)}

/* LAYOUT (FULL WIDTH) */
.kb-container{
  max-width: 100%;
  width: 100%;
  margin: 12px 0 0;
  padding: 0 12px 18px;
}
.kb-pagehead{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
  margin:10px 0 10px;
}
h1{margin:0; font-size:18px; line-height:1.2}
.kb-subtitle{margin:4px 0 0; color:var(--c-muted2); font-size:12px}
.kb-actions{display:flex; gap:8px; align-items:center}

/* CARDS */
.kb-card{
  background: var(--c-card);
  border:1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding:10px;
  margin:10px 0;
}
.kb-card--soft{
  background: #ffffff;
  box-shadow:none;
}
.kb-sep{height:1px;background:var(--c-line); margin:10px 0;}

/* FORMS */
.kb-form{display:block}
.kb-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
.kb-grid--2{grid-template-columns: repeat(2, minmax(0, 1fr));}
.kb-grid--3{grid-template-columns: repeat(3, minmax(0, 1fr));}

.kb-field label{
  display:block;
  font-size:11px;
  color:var(--c-muted2);
  margin:0 0 4px;
}
.kb-input, .kb-select{
  width:100%;
  padding:8px 10px;
  border-radius: 10px;
  border:1px solid rgba(15,23,42,.14);
  background: #fff;
  color:var(--c-ink);
  outline:none;
  font-size:13px;
  height:34px;
}
.kb-input::placeholder{color: rgba(15,23,42,.38)}
.kb-input:focus, .kb-select:focus{
  border-color: rgba(1,170,193,.65);
  box-shadow: 0 0 0 3px rgba(1,170,193,.14);
}
.kb-help{font-size:11px;color:var(--c-muted2); margin-top:4px}

.kb-filters{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap:10px;
  align-items:end;
}
.kb-filterbtns{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
}

.kb-checkgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.kb-check{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid rgba(15,23,42,.12);
  border-radius: 10px;
  background: rgba(1,170,193,.05);
  font-size:13px;
}
.kb-check input{accent-color: var(--c-primary);}

/* BUTTONS */
.kb-btn{
  border:1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  color:var(--c-ink);
  padding:8px 10px;
  border-radius: 10px;
  cursor:pointer;
  transition: .12s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  user-select:none;
  white-space:nowrap;
  font-size:13px;
  height:34px;
}
.kb-btn:hover{transform: translateY(-1px); border-color: rgba(1,170,193,.28)}
.kb-btn--primary{
  background: rgba(1,170,193,.14);
  border-color: rgba(1,170,193,.45);
  color: var(--c-navy);
  box-shadow:none;
}
.kb-btn--secondary{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.14);
}
.kb-btn--ghost{background: transparent}
.kb-btn--danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
  color:#7a0b0b;
}
.kb-btn--sm{
  padding:6px 8px;
  border-radius: 10px;
  font-size:12px;
  height:30px;
}
.kb-btn--block{width:100%}

/* ICON BUTTONS (actions) */
.kb-iconbtn{
  width:34px;height:34px;
  border-radius: 10px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  color:var(--c-ink);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.12s ease;
  text-decoration:none;
}
.kb-iconbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(1,170,193,.28);
  background: rgba(1,170,193,.06);
}
.kb-iconbtn--sm{
  width:32px;height:32px;
  border-radius: 10px;
}
.kb-iconbtn--primary{
  background: rgba(1,170,193,.12);
  border-color: rgba(1,170,193,.35);
  color: var(--c-navy);
}
.kb-iconbtn--danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.28);
  color: #7a0b0b;
}
.kb-iconbtn i{font-size:15px; line-height:1}

/* TABLE */
.kb-tablewrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

/* Scrollbar (discret) */
.kb-tablewrap::-webkit-scrollbar,
.kb-scroll::-webkit-scrollbar{
  height:10px;
  width:10px;
}
.kb-tablewrap::-webkit-scrollbar-track,
.kb-scroll::-webkit-scrollbar-track{
  background: rgba(15,23,42,.06);
  border-radius:999px;
}
.kb-tablewrap::-webkit-scrollbar-thumb,
.kb-scroll::-webkit-scrollbar-thumb{
  background: rgba(1,170,193,.45);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.8);
}
.kb-tablewrap::-webkit-scrollbar-thumb:hover,
.kb-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(1,170,193,.65);
}

/* Firefox */
.kb-tablewrap,
.kb-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(1,170,193,.45) rgba(15,23,42,.08);
}

.kb-table{
  width:100%;
  border-collapse:collapse;
  min-width: 1200px;
}

/* sticky header */
.kb-table thead th{
  font-size:11px;
  color:var(--c-muted2);
  position:sticky;
  top:0;
  background: rgba(255,255,255,.98);
  z-index:1;
  border-bottom: 1px solid rgba(15,23,42,.12);
  padding:8px 10px;
}

/* 2ème ligne sticky (filtres) */
.kb-table thead tr.kb-filterrow th{
  top: 34px; /* header compact */
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(15,23,42,.10);
  padding:6px 10px;
}

/* inputs filtre head */
.kb-thfilter{
  width:100%;
  padding:6px 8px;
  border-radius: 10px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  outline:none;
  font-size:12px;
  height:30px;
}
.kb-thfilter:focus{
  border-color: rgba(1,170,193,.65);
  box-shadow: 0 0 0 3px rgba(1,170,193,.10);
}

/* tri: indicateurs (très discret) */
.kb-th-sort{
  user-select:none;
  position:relative;
  padding-right:22px !important;
}
.kb-th-sort.is-sort-asc::after,
.kb-th-sort.is-sort-desc::after{
  position:absolute;
  right:8px;
  top:50%;
  transform: translateY(-50%);
  font-size:10px;
  opacity:.85;
  color: rgba(15,23,42,.55);
}
.kb-th-sort.is-sort-asc::after{content:"▲";}
.kb-th-sort.is-sort-desc::after{content:"▼";}

/* lignes */
.kb-table tbody tr{
  border-bottom:1px solid rgba(15,23,42,.08);
}
.kb-table tbody tr:last-child{
  border-bottom:none;
}
.kb-table th, .kb-table td{
  text-align:left;
  padding:8px 10px;
  vertical-align:middle;
  font-size:13px;
}

/* compact */
.kb-table--compact th, .kb-table--compact td{padding:8px 10px}

/* actions col */
.kb-th-actions{width:210px}
.kb-actionscol{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

.kb-mini{line-height:1.15}
.kb-muted{color:var(--c-muted2)}
.kb-small{font-size:12px}
.kb-empty{text-align:center; color:var(--c-muted2); padding:14px !important;}

/* immat pill (mini) */
.kb-pill{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(1,170,193,.38);
  background: rgba(1,170,193,.10);
  font-weight:800;
  color:var(--c-navy);
  white-space:nowrap;
  font-size:12px;
}

/* badge ligne (compact) */
.kb-linebadge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius: 999px;
  font-size:11px;
  font-weight:900;
  border: 1px solid rgba(15,23,42,.10);
  white-space:nowrap;
}

/* STATUS (compact) */
.kb-status{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(15,23,42,.12);
  white-space:nowrap;
}
.kb-status--ok{border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.10); color:#0f6a2a}
.kb-status--warn{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); color:#7a4a00}
.kb-status--off{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); color:#7a0b0b}

/* MODAL */
.kb-modal{display:none}
.kb-modal.is-open{display:block}
.kb-modal__overlay{
  position:fixed; inset:0;
  background: rgba(15,23,42,.42);
  z-index: 9998;
}
.kb-modal__panel{
  position:fixed;
  inset: 3% 50% auto 50%;
  transform: translateX(-50%);
  width: min(1100px, 95vw);
  max-height: 94vh;
  overflow:auto;
  background: #fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15,23,42,.16);
  padding: 10px;
  z-index: 9999;
}

/* scrollbar modal (discret) */
.kb-modal__panel{
  scrollbar-width: thin;
  scrollbar-color: rgba(1,170,193,.45) rgba(15,23,42,.08);
}
.kb-modal__panel::-webkit-scrollbar{width:10px;height:10px}
.kb-modal__panel::-webkit-scrollbar-track{background: rgba(15,23,42,.06); border-radius:999px}
.kb-modal__panel::-webkit-scrollbar-thumb{
  background: rgba(1,170,193,.45);
  border-radius:999px;
  border:2px solid rgba(255,255,255,.8);
}
.kb-modal__panel::-webkit-scrollbar-thumb:hover{
  background: rgba(1,170,193,.65);
}

.kb-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(15,23,42,.10);
  padding-bottom:8px;
  margin-bottom:10px;
}
.kb-modal__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.10);
}
.kb-h3{margin:0; font-size:13px; letter-spacing:.2px}

/* ALERTS / AUTH */
.kb-alert{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  margin:10px 0;
  font-size:13px;
}
.kb-alert--danger{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); color:#7a0b0b}

.kb-authbody{display:grid; place-items:center; padding:14px;}
.kb-authcard{
  width:min(430px, 95vw);
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(15,23,42,.14);
  padding:14px;
}
.kb-authhead{display:flex; gap:10px; align-items:center; margin-bottom:10px;}
.kb-authhead h1{margin:0}

/* RESPONSIVE */
@media (max-width: 980px){
  .kb-filters{grid-template-columns: 1fr 1fr; }
  .kb-grid{grid-template-columns: 1fr 1fr;}
  .kb-grid--2{grid-template-columns:1fr}
  .kb-checkgrid{grid-template-columns:1fr}
  .kb-container{padding: 0 10px 16px;}
}
@media (max-width: 640px){
  .kb-navlinks{display:none}
  .kb-grid{grid-template-columns:1fr}
}
@media (max-width: 420px){
  .kb-container{padding: 0 8px 14px;}
}

/* ARCHIVED row hint (si utilisé) */
.kb-row--archived{
  opacity: 0.72;
  background: rgba(0,0,0,0.03);
}
.kb-row--archived td,
.kb-row--archived td *:not(.kb-btn):not(.kb-status):not(.kb-pill):not(.kb-iconbtn):not(i){
  color: #b42318 !important;
}