:root{
  --bg:#0b0f15; --panel:#111827; --panel-2:#0e1422;
  --muted:#8aa0c2; --text:#e6ecff;
  --accent:#7aa2ff;
  --ok:#22c55e; --danger:#ef4444; --gray:#63708a;
  --radius:18px; --shadow:0 12px 32px rgba(0,0,0,.45); --border:#1b2335;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;color:var(--text);
  background: radial-gradient(1000px 600px at 80% -10%, rgba(122,162,255,.12), transparent 60%), linear-gradient(180deg,#0b0f15,#0b0f15);
  display:flex;flex-direction:column}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.topbar{position:sticky;top:0;background:rgba(11,15,21,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10}
.navbar{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-link{color:var(--text);text-decoration:none;font-size:18px}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:12px}
.nav-links a:hover{background:var(--panel-2);color:var(--text)}
.main-centered{display:flex;flex-direction:column;gap:24px;padding:30px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
h1{margin:0 0 10px 0;font-size:28px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:#0b0f15;border:none;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;cursor:pointer;transition:transform .04s ease,filter .2s ease;box-shadow:0 4px 0 rgba(0,0,0,.25),0 0 0 1px rgba(122,162,255,.35) inset}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)} .btn.small{padding:6px 10px;font-size:12px;border-radius:10px} .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}
.table-wrap{overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 12px 6px}
.table tbody tr{background:var(--panel-2);border:1px solid var(--border)}
.table tbody tr.row-hover{transition:background .15s ease} .table tbody tr.row-hover:hover{background:#0f1729}
.table td{padding:14px 12px;border-top:1px solid var(--border)}
.table tbody tr td:first-child{border-left:1px solid var(--border);border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tbody tr td:last-child{border-right:1px solid var(--border);border-top-right-radius:12px;border-bottom-right-radius:12px}
.form{display:flex;flex-direction:column;gap:14px;max-width:100%}
.input{background:#0b1220;border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);outline:none}
.input:focus{border-color:#2a3d66;box-shadow:0 0 0 3px rgba(122,162,255,.2)}
.form-actions{display:flex;gap:10px;justify-content:flex-end}
.flash{padding:12px 14px;border-radius:12px;border:1px solid var(--border);margin-bottom:8px}
.flash.success{background:#0e1b12;border-color:#104d2b} .flash.error{background:#1b0e10;border-color:#5b1a2a}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:8px;vertical-align:middle}
.status-dot.unknown{background:var(--gray)} .status-dot.ok{background:var(--ok)} .status-dot.retour{background:var(--danger)}

/* ---- Footer layout fix (v3.3a2) ---- */
main.container.main-centered{flex:1 0 auto; display:flex; flex-direction:column}
.footer{margin-top:auto; position:relative; z-index:1}
/* Prevent child forms from stretching page width unexpectedly */
.card .form[style]{flex-wrap:wrap}



/* ---- Sticky Footer: robust (v3.3a3) ---- */
html, body { height: auto; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 1 auto; display: flex; flex-direction: column; }
.footer { position: relative; z-index: 1; }



/* === v3.3d: Footer + button/layout tweaks === */
html, body { height: auto; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 1 auto; display: flex; flex-direction: column; }

.footer { background: rgba(10, 14, 22, .85); border-top: 1px solid var(--border); padding: 14px 0; backdrop-filter: blur(8px); }
.footer .container { display: flex; flex-direction: column; gap: 6px; align-items: center; }

.btn.danger { background: var(--danger); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(239,68,68,.35) inset; }
.btn.danger:hover { filter: brightness(1.05); }

.form.inline { display: inline; }
.form .btn { align-self: flex-start; } /* prevent full width stretch inside flex containers */
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.section-sep { height: 1px; background: var(--border); margin: 16px 0; opacity: .6; }


/* === v3.4 Availability styles === */
.grid-cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.avail-card{ background: var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:12px; cursor:pointer; transition: transform .06s ease, background .15s ease; }
.avail-card:hover{ background:#0f1729; transform: translateY(-1px); }
.avail-row{ display:flex; align-items:center; gap:10px; justify-content:space-between }
.avail-row .name{ flex:1; font-weight:600 }
.status-dot.not_work{ background: var(--danger); }
.status-dot.work{ background: var(--ok); }
.status-dot.unknown{ background: var(--gray); }
.status-label{ font-size:12px; letter-spacing:.06em; opacity:.8 }


/* v3.4a: Availability toolbar spacing */
.card-head{ margin-bottom: 12px; }
.toolbar .hint{ font-size: 12px; }


/* v3.4b: Availability toolbar (search + save) */
.toolbar .input[type="date"]{ min-width: 180px; }


/* v3.4d: Availability toolbar alignment */
.toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.toolbar .form{ display:flex; align-items:center; gap:8px; margin:0 }
.toolbar .input, .toolbar .input[type="date"], .toolbar .btn.small{ height:36px; }
.toolbar .btn.small{ padding:6px 12px; line-height:1; }
.toolbar label.muted{ margin-right:4px; }


/* v3.5 Packages styles */
.summary.row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
.pill{ background: var(--panel-2); border:1px solid var(--border); border-radius: 999px; padding: 8px 12px; }


/* v3.5a Packages UI polish */
.toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.toolbar .form{ display:flex; gap:8px; align-items:center; margin:0 }
.toolbar .input, .toolbar .btn.small{ height:36px; }
.toolbar label.muted{ margin-right:4px; }

.table.table-grid thead th{ text-transform: uppercase; letter-spacing:.06em; font-size:12px; opacity:.7; }
.table.table-grid tbody td{ vertical-align: middle; }
.table .actions .btn.small{ margin-right:6px; }
.summary.row{ margin: 8px 0 14px; }


/* v3.5b: Packages topbar + colored numbers */
.topbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.topbar .left, .topbar .right{ display:flex; align-items:center; gap:12px; }
.topbar .left .form{ display:flex; gap:8px; align-items:center; margin:0 }
.topbar .left .input, .topbar .left .btn.small{ height:36px; }
td.ok, .num.ok { color: var(--ok); font-weight: 600; }
td.danger, .num.danger { color: var(--danger); font-weight: 600; }


/* v3.5b2: Packages header layout */
.pkg-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pkg-header .left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pkg-header .left .group{ display:flex; align-items:center; gap:8px; }
.pkg-header select.input{ height:36px; padding-right:28px; }
.pkg-header input.input[type="number"]{ height:36px; width:110px; }
.pkg-header .btn.small{ height:36px; }

.footer{padding:6px 0!important}.footer .container{gap:2px!important}

.ok{color:var(--ok)}.danger{color:var(--danger)}


/* v3.6a: ultra-thin footer */
.footer{ padding: 2px 0 !important; font-size: 11px; line-height: 1.2; }
.footer .container{ gap: 0 !important; }


/* v3.6b: single-line micro footer */
.footer{ padding: 0 !important; margin:0 !important; border-top: 1px solid var(--border); }
.footer .container{ display:flex; justify-content:center; align-items:center; gap:6px; padding:4px 0; font-size: 10.5px; line-height: 1.1; opacity:.85 }


/* v3.6c: Sticky footer — footer pinned to bottom, content fills the rest */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main, .main, .content, #content, .page { flex: 1 0 auto; }
.footer { margin-top: auto; }


/* v3.6d: footer as fixed bottom bar */
body { padding-bottom: 30px; } /* prevent overlap with fixed footer */
.footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--panel-1);
  border-top: 1px solid var(--border);
  z-index: 50;
}