/* rh/assets/style.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #1a1a2e; --bg2: #16213e; --bg3: #0f3460;
  --gold: #f59e0b; --red: #e63946; --blue: #3b82f6;
  --text: #f1f5f9; --text2: #94a3b8; --border: #334155;
  --radius: 12px; --shadow: 0 4px 20px rgba(0,0,0,.4);
}
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
/* Auth pages */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.auth-box { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 400px; box-shadow: var(--shadow); }
.auth-logo { font-size: 2.5rem; text-align: center; margin-bottom: .5rem; }
.auth-title { font-size: 1.4rem; font-weight: 700; text-align: center; color: var(--gold); margin-bottom: .25rem; }
.auth-subtitle { font-size: .85rem; color: var(--text2); text-align: center; margin-bottom: 1.5rem; }
/* PIN keyboard */
.pin-display { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.5rem; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); background: transparent; transition: background .15s; }
.pin-dot.filled { background: var(--gold); border-color: var(--gold); }
.pin-keyboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pin-key { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; font-size: 1.3rem; font-weight: 600; cursor: pointer; text-align: center; color: var(--text); transition: background .15s; user-select: none; }
.pin-key:active, .pin-key:hover { background: var(--border); }
.pin-key.del { color: var(--red); }
/* Layout admin */
.app-layout { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--bg2); border-right: 1px solid var(--border); padding: 1.5rem 0; flex-shrink: 0; }
.sidebar-logo { padding: .75rem 1.5rem 1.5rem; font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.sidebar-nav a { display: flex; align-items: center; gap: .75rem; padding: .65rem 1.5rem; color: var(--text2); text-decoration: none; font-size: .9rem; transition: all .15s; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: var(--bg3); color: var(--text); border-right: 3px solid var(--gold); }
.main-content { flex: 1; padding: 2rem; overflow-x: hidden; }
/* Cards */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.card-title { font-size: 1rem; font-weight: 600; color: var(--text2); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; }
/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.25rem; border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; border: none; text-decoration: none; transition: all .15s; }
.btn-primary { background: var(--gold); color: #1a1a2e; }
.btn-primary:hover { background: #d97706; }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #c0303b; }
.btn-sm { padding: .4rem .85rem; font-size: .8rem; }
.btn-full { width: 100%; }
/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .85rem; color: var(--text2); margin-bottom: .4rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: .7rem 1rem; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .9rem; font-family: inherit;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--gold); }
/* Alerts */
.alert { padding: .75rem 1rem; border-radius: 8px; font-size: .85rem; margin-bottom: 1rem; }
.alert-danger { background: rgba(230,57,70,.15); border: 1px solid var(--red); color: #fca5a5; }
.alert-success { background: rgba(16,185,129,.15); border: 1px solid #10b981; color: #6ee7b7; }
.alert-warning { background: rgba(245,158,11,.15); border: 1px solid var(--gold); color: #fcd34d; }
/* Badges */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge-gold { background: rgba(245,158,11,.2); color: var(--gold); }
.badge-red { background: rgba(230,57,70,.2); color: var(--red); }
.badge-green { background: rgba(16,185,129,.2); color: #10b981; }
.badge-gray { background: rgba(148,163,184,.2); color: var(--text2); }
/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; padding: .75rem 1rem; color: var(--text2); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
tr:hover td { background: rgba(255,255,255,.02); }
/* Couleur poste dans planning */
.poste-chip { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
/* ── Mobile layout helpers ─────────────────────── */
.mobile-header { display:none; position:sticky; top:0; z-index:200; background:var(--bg2); border-bottom:1px solid var(--border); padding:.6rem 1rem; align-items:center; gap:.75rem; }
.mobile-header-title { flex:1; font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hamburger-btn { background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding:.2rem .4rem; line-height:1; flex-shrink:0; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:300; }
.sidebar { position:relative; }
.sidebar-close-btn { display:none; }
/* Bottom nav */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg2); border-top:1px solid var(--border); padding:.6rem .1rem; padding-bottom:calc(.8rem + env(safe-area-inset-bottom, 20px)); z-index:200; }
.bottom-nav-items { display:flex; justify-content:stretch; }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:.2rem; color:var(--text2); text-decoration:none; font-size:.65rem; font-weight:600; padding:.55rem .05rem; border-radius:8px; flex:1; min-width:0; text-align:center; background:none; border:none; cursor:pointer; font-family:inherit; }
.bottom-nav-item .bn-icon { font-size:1.65rem; line-height:1; }
.bottom-nav-item.active, .bottom-nav-item:hover { color:var(--gold); }
/* Quantity queries — taille adaptée selon nombre d'items */
.bottom-nav-item:first-child:nth-last-child(4),
.bottom-nav-item:first-child:nth-last-child(4) ~ .bottom-nav-item { font-size:.75rem; }
.bottom-nav-item:first-child:nth-last-child(4) .bn-icon,
.bottom-nav-item:first-child:nth-last-child(4) ~ .bottom-nav-item .bn-icon { font-size:1.9rem; }
.bottom-nav-item:first-child:nth-last-child(5),
.bottom-nav-item:first-child:nth-last-child(5) ~ .bottom-nav-item { font-size:.67rem; }
.bottom-nav-item:first-child:nth-last-child(5) .bn-icon,
.bottom-nav-item:first-child:nth-last-child(5) ~ .bottom-nav-item .bn-icon { font-size:1.7rem; }
.bottom-nav-item:first-child:nth-last-child(6),
.bottom-nav-item:first-child:nth-last-child(6) ~ .bottom-nav-item { font-size:.55rem; }
.bottom-nav-item:first-child:nth-last-child(6) .bn-icon,
.bottom-nav-item:first-child:nth-last-child(6) ~ .bottom-nav-item .bn-icon { font-size:1.45rem; }
/* ── Responsive ≤ 900px ─────────────────────────── */
/* Banderole mobile (planning, comptable) */
.mobile-note { display:none; background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35); border-radius:8px; padding:.65rem 1rem; font-size:.83rem; color:var(--gold); margin-bottom:1rem; }
@media (max-width: 900px) { .mobile-note { display:block; } }

@media (max-width: 640px) {
  /* Inline grids → 2 colonnes max sur mobile */
  .main-content div[style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  .main-content div[style*="repeat(3,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  .main-content div[style*="1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  /* Grilles 2 colonnes → 1 colonne */
  .main-content div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .main-content div[style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  /* Tableaux : défilement horizontal */
}
@media (max-width: 900px) {
  .mobile-header { display:flex; }
  .sidebar { position:fixed; top:0; left:-260px; bottom:0; z-index:400; transition:left .25s cubic-bezier(.4,0,.2,1); overflow-y:auto; width:240px; padding-top:.25rem; }
  .sidebar.open { left:0; }
  .sidebar-overlay.open { display:block; }
  .sidebar-close-btn { display:block; position:absolute; top:.6rem; right:.6rem; background:none; border:none; color:var(--text2); font-size:1.2rem; cursor:pointer; padding:.3rem; line-height:1; }
  .app-layout { display:block; }
  .main-content { padding:1rem; }
  body { padding-bottom: 80px; }
  .auth-box { padding:1.5rem; }
  .bottom-nav { display:block; }
  /* Danger mode disabled on mobile/tablet */
  body.danger-active .danger-btn { display:none !important; }
  #logo-btn { pointer-events:none !important; opacity:.5; }
}