:root{
  --dark:#0b2e3b;
  --dark-2:#124a5c;
  --primary:#0092c8;
  --primary-2:#00729c;
  --accent:#00c2ea;
  --bg:#ffffff;
  --bg-2:#e6f6fc;
  --text:#0b2e3b;
  --muted:#4d6d78;
  --ok:#2e9e5b;
  --ok-bg:#e8f6ee;
  --bad:#b02a2a;
  --bad-bg:#fdecec;
  --border:#c9e6f0;
  --shadow:0 18px 40px rgba(11,46,59,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-2);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
}
a{color:var(--primary)}
h1,h2,h3{margin:0 0 10px;line-height:1.25}
h1{font-size:21px}
h2{font-size:17px}
h3{font-size:15px}
p{margin:0 0 12px}

.container{max-width:1080px;margin:0 auto;padding:16px}
.container-narrow{max-width:480px;margin:0 auto;padding:16px}

.topbar{
  background:var(--dark);
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.topbar .brand{font-weight:800;color:#fff;text-decoration:none;font-size:16px;letter-spacing:.2px}
.topbar .brand small{display:block;font-weight:500;color:#9fb0ba;font-size:12px}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.topbar nav a{
  color:#dbe6ec;
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
}
.topbar nav a:hover,.topbar nav a.active{background:rgba(255,255,255,.12);color:#fff}
.topbar .badge-count{
  background:var(--accent);
  color:#08202c;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  padding:1px 7px;
  margin-left:6px;
}

.card{
  background:var(--bg);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:20px;
  margin-bottom:16px;
  border:1px solid var(--border);
}

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

label{display:block;font-weight:700;font-size:13px;margin:0 0 6px;color:var(--text)}
.field{margin-bottom:14px}
.field-hint{font-size:12px;color:var(--muted);margin-top:4px}

input,select,textarea,button{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:16px;
  background:#fff;
  font-family:inherit;
  color:var(--text);
}
input[readonly],input:disabled{background:#f4f6f7;color:var(--muted)}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,194,234,.18);
}
textarea{min-height:80px;resize:vertical}

button,.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  background:linear-gradient(135deg,#00b4e0 0%,#0092c8 100%);
  color:#fff;
  border:none;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  min-height:44px;
  padding:12px 20px;
  border-radius:8px;
  box-shadow:0 10px 22px rgba(0,146,200,.22);
  transition:filter .12s,opacity .12s;
}
button:hover,.btn:hover{filter:brightness(0.95)}
button:disabled,.btn:disabled,.btn[aria-disabled="true"]{
  background:#dde1e3!important;color:#8a9099!important;box-shadow:none!important;cursor:not-allowed;
}
.btn.secondary{background:var(--bg-2);color:var(--text);box-shadow:none;border:1px solid var(--border)}
.btn.secondary:hover{background:#d3edf8;filter:none}
.btn.success{background:linear-gradient(135deg,#2e9e5b 0%,#207a44 100%);box-shadow:0 10px 22px rgba(46,158,91,.2)}
.btn.danger{background:linear-gradient(135deg,#c0392b 0%,#962a20 100%);box-shadow:0 10px 22px rgba(192,57,43,.2)}
.btn-block{width:100%}
.btn-sm{min-height:34px;padding:7px 12px;font-size:13px}

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

.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;
  white-space:nowrap;
}
.badge-normale{background:var(--bg-2);color:var(--muted)}
.badge-reduite{background:var(--ok-bg);color:var(--ok)}
.badge-invite{background:#fff3e0;color:#a05a00}
.badge-actif{background:var(--ok-bg);color:var(--ok)}
.badge-desactive{background:var(--bad-bg);color:var(--bad)}
.badge-role{background:#d6f0f9;color:var(--primary)}

.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:600}
.flash-success{background:var(--ok-bg);color:var(--ok)}
.flash-error{background:var(--bad-bg);color:var(--bad)}
.flash-info{background:#d6f0f9;color:var(--primary)}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto}

.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.radio-group{display:flex;gap:16px;align-items:center}
.radio-group label{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px}
.radio-group input{width:auto;padding:0}

.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calendar-cell{
  border:1px solid var(--border);border-radius:6px;padding:3px 6px;
  min-height:30px;font-size:12px;background:#fff;position:relative;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:4px;
}
.calendar-cell .day-num{font-weight:700;color:var(--muted);line-height:1}
.calendar-cell.today{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,194,234,.18)}
.calendar-cell .count{color:var(--ok);font-weight:800;line-height:1}

.calendar-cell.has-reduced{background:var(--ok);border-color:var(--ok)}
.calendar-cell.has-reduced .day-num{color:#fff}

.calendar-cell-selectable{cursor:pointer;user-select:none;transition:border-color .12s,box-shadow .12s}
.calendar-cell-selectable:hover{border-color:var(--accent)}
.calendar-cell-selectable input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;flex-shrink:0;
  width:12px;height:12px;padding:0;margin:0;
  border:1.5px solid var(--border);border-radius:3px;background:#fff;
  box-sizing:border-box;cursor:pointer;position:relative;
}
.calendar-cell.has-reduced input[type="checkbox"]{border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.15)}
.calendar-cell-selectable input[type="checkbox"]:checked{background:var(--primary);border-color:var(--primary)}
.calendar-cell-selectable input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:3px;top:0.5px;width:3px;height:6px;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.calendar-cell-selectable:has(input:checked){box-shadow:0 0 0 2px var(--primary)}
.calendar-cell-locked{opacity:.55;background:var(--bg-2)}
.calendar-cell-locked.has-reduced{opacity:.75}

@media (max-width:640px){
  .calendar-grid{gap:3px}
  .calendar-cell{min-height:24px;padding:2px 4px;font-size:11px;border-radius:5px}
  .calendar-cell-selectable input[type="checkbox"]{width:10px;height:10px}
  .calendar-cell-selectable input[type="checkbox"]:checked::after{left:2.5px;top:0px;width:2.5px;height:5px}
  .nav-label{display:none}
}

.footer{text-align:center;color:var(--muted);font-size:12px;padding:24px 16px}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters .field{margin-bottom:0;min-width:160px}

.muted{color:var(--muted)}
.text-center{text-align:center}
.stack{display:flex;flex-direction:column;gap:10px}

@media (max-width:640px){
  .container{padding:12px}
  .card{padding:12px 14px;border-radius:12px}
  input,select,textarea,button{padding:10px 12px}

  .topbar{padding:8px 12px;gap:4px}
  .topbar .brand{font-size:13px}
  .topbar .brand small{font-size:10px}
  .topbar nav{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:2px;width:100%;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{padding:5px 8px;font-size:11.5px;white-space:nowrap;flex-shrink:0;border-radius:6px}
  .topbar .badge-count{font-size:10px;padding:0 5px;margin-left:3px}
}