:root{
  --blue:#0a74ff;
  --blue-600:#085add;
  --theme:#0a74ff;
  --theme2:#085add;
  --bg:#f0f4f8;
  --card:#ffffff;
  --line:#e5e7eb;
  --muted:#94a3b8;
  --text:#0b1220;
  --danger:#d92d20;
  --c_user:#01CA4E;
  --c_admin:#f59e0b;
  --c_ouverte:#bcd5c1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color:#0f172a;
}
.center {
	text-align: center;
}
/* Layout */
.container {
    max-width: 1200px;
    margin: 18px auto;
    padding: 0 16px;
}

.page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.page-title h1 {
    margin: 0 auto; /* Centre le titre dans l'espace disponible */
    font-size: 20px;
}

.logo-ss {
    height: 44px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    flex-shrink: 0; /* Empêche le logo de rétrécir */
}

.page-nav { display: flex; align-items: center; gap: 12px; }

/* Buttons */
.btn{
  padding:8px 12px;border:0;border-radius:10px;background:var(--blue);color:#fff;cursor:pointer;font-weight:600
}
.btn:hover{background:var(--blue-600)}
.btn-ghost{
  background:#eef3ff;color:var(--blue)
}
.btn-danger{
  background:var(--danger); color:#fff;
}

/* Cards */
.card{
  background:var(--card);border-radius:14px;box-shadow:0 6px 18px rgba(16,24,40,.06);padding:14px;margin:14px 0
}
.card h2{margin:0 0 12px;color:var(--blue)}

/* Forms & Tables */
.toolbar{display:flex;gap:10px;margin-bottom:10px}
.toolbar input[type="text"]{
  flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff
}
/* Tableau */
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  border:1px solid var(--line); padding:1px 4px 1px 4px; text-align:right
}
.table th{background:#e6f0fa}
.table-scroll{overflow:auto; border:1px solid var(--line); border-radius:12px}

.table-add input, .table-add select,
.table td input, .table td select{
  width:100%; padding:8px; border:1px solid var(--line); border-radius:8px; background:#fff
}
.table th.first-col,
.table td.first-col {
  width: 15%;
}

.row-actions{white-space:nowrap}
.muted{color:var(--muted)}
.info{color: #0033f9;}

/* Toggle switch */
.toggle{position:relative;display:inline-block;width:50px;height:24px}
.toggle input{display:none}
.toggle .slider{
  position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.25s
}
.toggle .slider:before{
  content:""; position:absolute; left:3px; top:2px; width:20px; height:20px;
  background:#fff; border-radius:999px; transition:.25s
}
.toggle input:checked + .slider{background:var(--blue)}
.toggle input:checked + .slider:before{transform:translateX(26px)}

/* Alerts */
.alert{
  padding:10px 12px; border-radius:10px; margin:10px 0; font-weight:600
}
.alert.success{background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0}
.alert.error{background:#fef2f2; color:#991b1b; border:1px solid #fecaca}

/* Footer */
.site-footer{margin:20px 0 30px}
.site-footer .container{display:flex;justify-content:center;color:var(--muted)}

/* Bouton icône & menu popup (déjà utilisés en saisie) */
.icon-btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}
.menu{position:relative}
.menu-popup{position:absolute;right:0;top:42px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 24px rgba(16,24,40,.12);min-width:220px;z-index:50;padding:8px}
.menu-popup a{display:block;padding:10px 12px;border-radius:10px;color:#0b1a33;text-decoration:none}
.menu-popup a:hover{background:#f5f7fb}

/* Utilitaires */
.topbar{display:flex;align-items:center;justify-content:space-between}
.hide-sm{display:inline-flex}

.kpis {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:16px;
  margin:20px 0;
}
.kpi {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 4px 10px rgba(16,24,40,.06);
  padding:14px;
  text-align:center;
  text-decoration:none;
  transition:.2s ease-in-out;
}
.kpi:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(16,24,40,.12); }
.kpi .label { font-size:14px; color:#4b5563; margin-bottom:6px; }
.kpi .value { font-size:22px; font-weight:700; color:#1a73e8; }

.filters { display: flex; align-items: center; gap: 8px; }

.filters label { font-size: 14px; font-weight: 600; }
.filters .btn.small {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 8px;
}
.week-select {
  max-height: 200px;   /* hauteur max */
  overflow-y: auto;    /* scroll si dépasse */
}

.filters .btn.accent {
  background:#1a73e8;
  color:#fff;
}
.filters .btn.accent:hover {
  background:#1558b0;
}

/* bleu */
.status-open{
	background:#e6f0ff;
	border-color:#bcd4ff;
}    
/* vert */
.status-user{
	background:var(--c_user);
	border-color:#14BD55;
	}
	
/* orange */	
.status-admin{
	background:#fff1e6;
	border-color:#ffd2ad;
	}  

@media (max-width: 768px){
  .hide-sm{display:none}
}

.icon-link{font-size:18px;text-decoration:none}
.icon-link:hover{opacity:.8}

/* Header global */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #1a73e8; /* theme_1 bleu */
  color: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  justify-content:space-between;
  margin:8px 0 12px
}

/* Bouton Hamburger */
.menu-btn {
  background: none; border: none; font-size: 22px; cursor: pointer; color: #fff; padding: 0px 0px 0px 20px;
}

/* Bouton bouton retour export */
.btn-outline{background:#fff;color:#0b5ed7;border-color:#0b5ed7;border-radius:8px;padding:8px 12px;}
.btn-outline:hover{filter:brightness(0.98);background: #9dc7ff;}

/* Selecteur de date */
.select-annee {
  background-color: #e6f2ff; 
  /*padding: 2px 2px;  Espace intérieur pour agrandir */
  border: 1px solid #b3d9ff; /* Bordure bleu clair */
  border-radius: 4px; /* Coins légèrement arrondis */
  font-size: 16px; /* Taille de police un peu plus grande */
  color: #333; /* Couleur du texte */
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none; /* Caché par défaut */
  position: absolute;
  right: 0;
  background: #fff;
  min-width: 180px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1000;
}

.dropdown-content a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #1a1a1a;
}

.dropdown-content a:hover {
  background: #e0e7ff;
}

/* Conteneur fixe, le canvas remplit 100% */
.chart-box {
  position: relative;
  height: 320px;        /* <<< ajuste ici la hauteur souhaitée */
  width: 100%;
}
.chart-box canvas {
  position: absolute;   /* occupe tout le conteneur */
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.chart-box.h240 { height: 240px; }
.chart-box.h400 { height: 400px; }

/* Synthese_user : couleurs d'état */
.table.synth td.center a { text-decoration: none; color: inherit; display: inline-block; padding: 6px 8px; border-radius: 8px; }
.cell-empty { color: #9ca3af; }

.cell-gray   a { background: #f3f4f6; color: #374151; }/* */
.cell-blue   a { background: var(--c_ouverte); color: #FFFD61; }/* */
.cell-green  a { background: var(--c_user); color: #14BD55; }/* */
.cell-orange a { background: var(--c_admin); color: #F54927; }/* */

/* Petites pastilles de légende */
.legend-item { display:flex; align-items:center; gap:6px; color:#374151 }
.legend-dot { width:14px; height:14px; border-radius:4px; display:inline-block; }
.legend-dot.cell-gray   { background:#f3f4f6 }
.legend-dot.cell-blue   { background:var(--c_ouverte) }
.legend-dot.cell-green  { background:var(--c_user) }
.legend-dot.cell-orange { background:var(--c_admin) }

.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 10px;
}
.user-left { font-weight: 600; font-size: 1.05rem; }
.user-right .btn.btn-outline {
  border: 1px solid #1e66ff;
  padding: 4px 10px;
  border-radius: 8px;
  text-decoration: none;
}
.user-right .btn.btn-outline:hover { background: rgba(30,102,255,.08); }

.pay-in { font-weight: 900;text-align:right; background-color: #FFF0D3 !important;}

.decalage-gauche {
padding-right: 30px !important;}

/* Popup erreur */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 9998; transition: opacity .2s ease;
}
.modal {
  position: fixed; left: 50%; top: 18%;
  transform: translateX(-50%);
  width: min(520px, 92vw);
  background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
  z-index: 9999; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-weight: 600;
  background: #ffe9e9; color: #b00020; /* teinte erreur */
  border-bottom: 1px solid #f2caca;
}
.modal-header.error i { margin-right: 8px; }
.modal-header .modal-close {
  background: transparent; border: 0; font-size: 1.1rem; cursor: pointer; color: inherit;
}
.modal-body { padding: 14px 16px; line-height: 1.4; }
.modal-footer { display:flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #eee; }
.modal.hide, .modal-backdrop.hide { opacity: 0; pointer-events: none; }

/* Bouton primaire déjà dans ta page, rappel au cas où */
.btn.btn-primary { background: transparent; border:1px solid #007bff; border-radius:8px; padding:6px 10px; color:#007bff; }
.btn.btn-primary:hover { color:#0056b3; border-color:#0056b3; }