/* Thèmes via variables CSS.
   - Par défaut: dark (valeurs :root)
   - Light: html[data-theme="light"] */
:root{
  --bg:#0b0f17;
  --card:#111827;
  --card2:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#1f2937;
  --btn:#2563eb;
  --btn2:#1f2937;
  --warn:#f59e0b;
  --danger:#ef4444;
  --link:#93c5fd;
  --shadow: rgba(0,0,0,.25);
}

html[data-theme="light"]{
  --bg:#f6f7fb;
  --card:#ffffff;
  --card2:#f3f4f6;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --btn:#2563eb;
  --btn2:#e5e7eb;
  --warn:#b45309;
  --danger:#dc2626;
  --link:#2563eb;
  --shadow: rgba(0,0,0,.08);
}

*{box-sizing:border-box}
body.page{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:linear-gradient(180deg,var(--bg), color-mix(in srgb, var(--bg) 85%, #000 15%));
  color:var(--text);
  padding:12px;
}

html[data-theme="light"] body.page{
  background:linear-gradient(180deg,var(--bg), #ffffff);
}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout helpers */
.container{
  max-width: none;
  width: 100%;
  margin: 0;
}

.app-shell{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.app-main{
  min-width:0;
  flex:1;
}

.app-sidebar{
  position:sticky;
  top:12px;
  flex:0 0 260px;
  width:260px;
  height:calc(100vh - 24px);
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb, var(--card) 92%, transparent 8%);
  box-shadow: 0 10px 28px var(--shadow);
  overflow:auto;
  z-index:20;
}

.sidebar-head{
  color:var(--muted);
  font-size:12px;
  margin:4px 4px 10px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:100%;
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card2) 84%, transparent 16%);
  color:var(--text);
  text-decoration:none;
}

.sidebar-link:hover{
  text-decoration:none;
  background:color-mix(in srgb, var(--btn2) 90%, transparent 10%);
}

.sidebar-link.active{
  border-color:color-mix(in srgb, var(--border) 60%, #64748b 40%);
  background:color-mix(in srgb, var(--btn) 18%, transparent 82%);
}

.sidebar-icon{
  color:var(--muted);
  width:16px;
  height:16px;
  text-align:center;
  flex:0 0 16px;
}

.sidebar-toggle{
  position:static;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card2) 88%, transparent 12%);
  color:var(--text);
  border-radius:8px;
  width:30px;
  height:30px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sidebar-mobile-toggle.icon-only{
  display:none;
  margin:0 0 10px 0;
}

.sidebar-backdrop{
  display:none;
}

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:color-mix(in srgb, var(--card) 88%, transparent 12%);
  border:1px solid var(--border);
  border-radius:16px;
  position:sticky;
  top:8px;
  backdrop-filter: blur(6px);
  z-index: 10;
  box-shadow: 0 6px 22px var(--shadow);
}

body.sidebar-collapsed .app-sidebar{
  flex-basis:78px;
  width:78px;
}

body.sidebar-collapsed .sidebar-label{
  display:none;
}

body.sidebar-collapsed .sidebar-title{
  display:none;
}

body.sidebar-collapsed .sidebar-head{
  display:flex;
  justify-content:center;
}

body.sidebar-collapsed .sidebar-link{
  justify-content:center;
}

@media(max-width: 1100px){
  .app-shell{
    display:block;
  }
  .app-sidebar{
    position:fixed;
    left:10px;
    top:10px;
    bottom:10px;
    width:min(320px,82vw);
    height:auto;
    transform:translateX(-120%);
    transition:transform .2s ease;
    z-index:60;
  }
  .sidebar-mobile-toggle.icon-only{
    display:inline-flex;
  }
  body.sidebar-open .app-sidebar{
    transform:translateX(0);
  }
  .sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:55;
    border:0;
    background:rgba(0,0,0,.45);
    display:none;
  }
  body.sidebar-open .sidebar-backdrop{
    display:block;
  }
  body.sidebar-collapsed .app-sidebar{
    flex-basis:auto;
    width:min(320px,82vw);
  }
  body.sidebar-collapsed .sidebar-label,
  body.sidebar-collapsed .sidebar-head{
    display:initial;
  }
}

.admin-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.spacer{flex:1}

i[data-lucide]{
  width:16px;
  height:16px;
  vertical-align:-2px;
}

.btn i[data-lucide],
.btn2 i[data-lucide],
.tab i[data-lucide],
a i[data-lucide]{
  margin-right:6px;
}

.icon-only{
  width:36px;
  min-width:36px;
  height:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.icon-only i[data-lucide]{
  margin-right:0 !important;
}

.icon-only-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card2) 88%, transparent 12%);
}

.icon-only-link:hover{
  text-decoration:none;
  background:color-mix(in srgb, var(--btn2) 90%, transparent 10%);
}

.icon-only-link i[data-lucide]{
  margin-right:0 !important;
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--card2) 85%, transparent 15%);
  font-size:13px;
  flex-wrap:wrap;
}

.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:14px 0;
}

.comp-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 12px 0;
}

.comp-nav .btn2.active{
  border-color:color-mix(in srgb, var(--border) 60%, #64748b 40%);
  background:color-mix(in srgb, var(--btn) 18%, transparent 82%);
}

.tab{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--card2) 85%, transparent 15%);
}
.tab.active{
  border-color:color-mix(in srgb, var(--border) 60%, #64748b 40%);
  background:color-mix(in srgb, var(--btn) 18%, transparent 82%);
}

.card{
  background:color-mix(in srgb, var(--card) 90%, transparent 10%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 14px;
  box-shadow: 0 10px 28px var(--shadow);
}

.mt8{margin-top:8px}
.mt10{margin-top:10px}
.mt16{margin-top:16px}
.mb6{margin-bottom:6px}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media(max-width: 980px){
  .grid2{grid-template-columns:1fr}
}

h3{
  margin:0 0 10px 0;
  font-size:18px;
}

.collapsible > summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}

.collapsible > summary::-webkit-details-marker{display:none}

.collapsible > summary::before{
  content:"▸";
  color:var(--muted);
  font-size:14px;
  transform:translateY(-1px);
}

.collapsible[open] > summary::before{
  content:"▾";
}

.collapsible > summary h3{
  margin:0;
}

.collapsed-summary{
  display:none;
}

.collapsible:not([open]) + .collapsed-summary{
  display:block;
}

.comp-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 10px 0;
}

.comp-logo{
  width:56px;
  height:56px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card2) 88%, transparent 12%);
}

.row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:10px;
  align-items:center;
  margin:8px 0;
}
@media(max-width: 720px){
  .row{grid-template-columns:1fr}
}

input[type="text"], input[type="number"], input[type="date"], select{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card2) 88%, transparent 12%);
  color:var(--text);
  outline:none;
}

textarea{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card2) 88%, transparent 12%);
  color:var(--text);
  outline:none;
  resize:vertical;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.btn{
  border:1px solid color-mix(in srgb, var(--btn) 40%, transparent 60%);
  background:color-mix(in srgb, var(--btn) 22%, transparent 78%);
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
}
.btn:hover{background:color-mix(in srgb, var(--btn) 30%, transparent 70%)}

.btn2{
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--btn2) 70%, transparent 30%);
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
}
.btn2:hover{background:color-mix(in srgb, var(--btn2) 90%, transparent 10%)}

.danger-link{
  color:var(--danger) !important;
  font-weight:600;
}

.btn2.danger-link{
  border-color: color-mix(in srgb, var(--danger) 45%, transparent 55%);
  background: color-mix(in srgb, var(--danger) 16%, transparent 84%);
}

.btn2.danger-link:hover{
  background: color-mix(in srgb, var(--danger) 24%, transparent 76%);
}

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
  min-width: 520px; /* permet le scroll horizontal sur mobile */
}
.table th, .table td{
  border-bottom:1px solid var(--border);
  padding:8px 10px;
  text-align:center;
  vertical-align:middle;
  font-size:13px;
}
.table th{
  background:color-mix(in srgb, var(--card2) 88%, transparent 12%);
  font-weight:600;
}
.table tr:nth-child(even) td{
  background:color-mix(in srgb, var(--card2) 50%, transparent 50%);
}

.left{text-align:left !important}
.preline{white-space:pre-line}

.muted{color:var(--muted); font-size:13px}
.subtle{color:var(--muted); font-size:12px; line-height:1.35}
.danger{color:var(--danger)}
.warn{color:var(--warn); font-weight:600}

.cell{min-width:140px}
.celllink{
  display:block;
  padding:6px 6px;
  border-radius:10px;
}
.celllink:hover{
  background:color-mix(in srgb, var(--btn) 10%, transparent 90%);
  text-decoration:none;
}

.sticky{
  position:sticky;
  top:90px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent 4%), color-mix(in srgb, var(--card) 86%, transparent 14%));
  padding-bottom:10px;
  z-index:5;
}
.modebar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Wrapper responsive pour tables (scroll horizontal) */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border-radius:14px;
}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--border) 70%, transparent 30%);
  border-radius:999px;
}

/* Toggle thème */
.theme-toggle{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:999;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--card) 92%, transparent 8%);
  color:var(--text);
  cursor:pointer;
  box-shadow: 0 10px 28px var(--shadow);
}
.theme-toggle:hover{
  background:color-mix(in srgb, var(--card2) 92%, transparent 8%);
}

.sidebar-feedback-link{
  margin-top:auto;
  width:100%;
  text-align:left;
  cursor:pointer;
  font:inherit;
}

.feedback-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
}

.feedback-modal.open{
  display:block;
}

.feedback-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.feedback-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(760px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 16px 40px var(--shadow);
}

.feedback-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.feedback-head h3{
  margin:0;
}

.feedback-close{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  width:34px;
  height:34px;
  border-radius:10px;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

.notice-ok,
.notice-error{
  border-radius:12px;
  border:1px solid var(--border);
  padding:10px 12px;
  margin:0 0 10px 0;
}

.notice-ok{
  background:color-mix(in srgb, #16a34a 14%, transparent 86%);
}

.notice-error{
  background:color-mix(in srgb, #dc2626 14%, transparent 86%);
}

/* ----------- Mobile / tablette: confort ----------- */
@media (max-width: 720px){
  body.page{ padding:12px; }

  .topbar{
    gap:10px;
    padding:10px 12px;
    top:10px;
  }

  .pill{ font-size:12px; padding:6px 8px; }
  h3{ font-size:16px; }

  .btn, .btn2{
    padding:10px 12px;
    border-radius:12px;
  }

  input[type="text"], input[type="number"], input[type="date"], select{
    padding:10px 12px;
  }

  .cell{ min-width: 170px; } /* pour les selects sur mobile */
}

/* ----------- Très petit écran ----------- */
@media (max-width: 420px){
  .theme-toggle{
    right:12px;
    bottom:12px;
    width:42px;
    height:42px;
  }

}