/* ── Reset & base ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#f0f4f8;color:#1a202c;min-height:100vh}

/* ── Variables ────────────────────────────────────────────────── */
:root{
  --blue:    #1565c0;
  --blue-lt: #e3f2fd;
  --green:   #2e7d32;
  --green-lt:#e8f5e9;
  --red:     #c62828;
  --red-lt:  #ffebee;
  --gray:    #757575;
  --gray-lt: #f5f5f5;
  --orange:  #e65100;
  --shadow:  0 2px 8px rgba(0,0,0,.12);
}

/* ── Layout ───────────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;min-height:100vh}
.navbar{background:var(--blue);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);position:sticky;top:0;z-index:100}
.navbar h1{font-size:1.15rem;font-weight:700;letter-spacing:.3px}
.nav-right{display:flex;gap:8px;align-items:center}
.main{flex:1;padding:16px;max-width:1400px;width:100%;margin:0 auto}

/* ── Cards ────────────────────────────────────────────────────── */
.card{background:#fff;border-radius:10px;box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
.card-title{font-size:1rem;font-weight:600;margin-bottom:16px;color:#1565c0;border-bottom:2px solid #e3f2fd;padding-bottom:8px}

/* ── Boutons ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:filter .15s,transform .1s;text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(1.1)}
.btn-primary{background:var(--blue);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn-sm{padding:4px 10px;font-size:.78rem;border-radius:4px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── Formulaires ──────────────────────────────────────────────── */
.form-group{margin-bottom:14px}
label{display:block;font-size:.82rem;font-weight:600;color:#374151;margin-bottom:4px}
input,select,textarea{width:100%;padding:8px 12px;border:1.5px solid #d1d5db;border-radius:6px;font-size:.9rem;transition:border-color .15s}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,192,.15)}
input.error{border-color:var(--red)}

/* ── Planning ─────────────────────────────────────────────────── */
.planning-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.planning-toolbar .nav-btns{display:flex;gap:4px}
.planning-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
.planning-table{border-collapse:collapse;min-width:100%;font-size:.78rem}
.planning-table th{background:#1565c0;color:#fff;padding:6px 8px;text-align:center;white-space:nowrap;position:sticky;top:0;z-index:10}
.planning-table th.post-header{background:#0d47a1;text-align:left;min-width:130px;max-width:160px}
.planning-table td{padding:3px;border:1px solid #e2e8f0;vertical-align:top}
.planning-table tr:nth-child(even) td{background:#fafafa}

/* Cellules planning */
.cell{border-radius:5px;padding:5px 7px;min-height:48px;display:flex;flex-direction:column;justify-content:center;font-size:.72rem;line-height:1.3;cursor:pointer;transition:filter .15s,transform .1s;user-select:none}
.cell:active{transform:scale(.96)}
.cell.free{background:var(--green-lt);color:var(--green);border:1.5px solid #a5d6a7}
.cell.free:hover{filter:brightness(.92)}
.cell.mine{background:#e8eaf6;color:#283593;border:1.5px solid #9fa8da;cursor:default}
.cell.taken{background:var(--red-lt);color:var(--red);border:1.5px solid #ef9a9a;cursor:default}
.cell.blocked{background:#f5f5f5;color:var(--gray);border:1.5px dashed #bdbdbd;cursor:default}
.cell .cell-name{font-weight:600}
.cell .cell-status{font-size:.65rem;opacity:.8}
.cell .cell-check{color:var(--green);font-size:.8rem}

/* ── Badges ───────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:700}
.badge-green{background:var(--green-lt);color:var(--green)}
.badge-red{background:var(--red-lt);color:var(--red)}
.badge-blue{background:var(--blue-lt);color:var(--blue)}
.badge-gray{background:#f5f5f5;color:var(--gray)}

/* ── Modals ───────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.overlay.hidden{display:none}
.modal{background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.25);max-width:460px;width:100%;max-height:90vh;overflow-y:auto}
.modal-header{padding:16px 20px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:1rem;font-weight:700}
.modal-body{padding:20px}
.modal-footer{padding:14px 20px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;gap:8px}

/* ── Toasts ───────────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:500;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 18px;border-radius:8px;color:#fff;font-size:.875rem;font-weight:600;box-shadow:var(--shadow);animation:slideIn .3s ease;max-width:320px}
.toast-success{background:#2e7d32}
.toast-error{background:#c62828}
.toast-info{background:#1565c0}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Loader ───────────────────────────────────────────────────── */
.spinner{width:36px;height:36px;border:3px solid #e2e8f0;border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Login ────────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1565c0 0%,#0d47a1 100%);padding:16px}
.login-card{background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.25);padding:32px;max-width:380px;width:100%}
.login-card h2{text-align:center;color:var(--blue);margin-bottom:8px;font-size:1.4rem}
.login-card .subtitle{text-align:center;color:var(--gray);font-size:.85rem;margin-bottom:24px}

/* ── Tabs ─────────────────────────────────────────────────────── */
.tabs{display:flex;gap:0;border-bottom:2px solid #e2e8f0;margin-bottom:16px;overflow-x:auto}
.tab-btn{padding:10px 18px;border:none;background:none;cursor:pointer;font-size:.875rem;font-weight:600;color:var(--gray);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:color .15s}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── Tables ───────────────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:.85rem}
.data-table th{background:#f0f4f8;font-weight:700;padding:8px 12px;text-align:left;border-bottom:2px solid #e2e8f0}
.data-table td{padding:8px 12px;border-bottom:1px solid #e2e8f0;vertical-align:middle}
.data-table tr:hover td{background:#f9fafb}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:640px){
  .navbar h1{font-size:1rem}
  .main{padding:8px}
  .card{padding:14px}
  .planning-table{font-size:.7rem}
  .cell{min-height:40px;padding:4px 5px}
  .modal{max-width:100%;margin:8px}
  .btn{padding:7px 12px;font-size:.82rem}
}

/* ── Divers ───────────────────────────────────────────────────── */
.text-center{text-align:center}
.text-muted{color:var(--gray);font-size:.82rem}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.flex{display:flex}
.gap-8{gap:8px}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.hidden{display:none!important}
.w-full{width:100%}
hr{border:none;border-top:1px solid #e2e8f0;margin:16px 0}