/* Staff panel — reuses tokens from style.css */
.panel-shell{ display:grid; grid-template-columns:230px 1fr; min-height:100vh; margin-inline:-20px; }
@media (min-width:900px){ .panel-shell{ margin-inline:-48px; } }
@media (max-width:800px){ .panel-shell{ grid-template-columns:1fr; } }

.panel-side{ background:var(--navy); color:#c7ccd1; padding:24px 18px; display:flex; flex-direction:column; gap:4px; }
.panel-side .brand-word{ color:#f6f4ef; margin-bottom:18px; display:block; }
.panel-side a{ display:flex; align-items:center; gap:10px; padding:10px 12px; text-decoration:none; color:#c7ccd1; font-size:.88rem; border-radius:4px; }
.panel-side a:hover, .panel-side a.active{ background:rgba(255,255,255,0.07); color:#fff; }
.panel-side .section-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#6d7680; margin:18px 12px 6px; }
.panel-side .who{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line-dark); font-size:.8rem; }

.panel-main{ padding:32px clamp(20px,4vw,48px); background:var(--cloud); }
.panel-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.panel-head h1{ font-family:var(--font-body); font-weight:800; font-size:1.7rem; }

.flash{ padding:12px 16px; margin-bottom:20px; font-size:.9rem; border-left:3px solid; }
.flash.success{ background:#eaf6ec; border-color:#3d9a52; color:#22582e; }
.flash.error{ background:#fbeae7; border-color:#c1401f; color:#7a2a13; }

.panel-card{ background:#fff; border:1px solid var(--line); padding:22px; margin-bottom:22px; }
.panel-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.panel-table th{ text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); padding:9px 10px; border-bottom:1px solid var(--line); }
.panel-table td{ padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.panel-table tr:hover td{ background:var(--cloud-2); }

.form-grid{ display:grid; gap:16px; }
.form-row label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:6px; color:var(--ink); }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=number], .form-row input[type=datetime-local], .form-row select, .form-row textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); background:#fff; font:inherit; font-size:.9rem;
}
.form-row textarea{ min-height:120px; resize:vertical; }
.form-row .hint{ font-size:.76rem; color:var(--steel); margin-top:4px; }

.perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.perm-check{ display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); padding:10px 12px; font-size:.84rem; }
.perm-check input{ margin-top:3px; }
.perm-check .k{ display:block; font-family:var(--font-mono); font-size:.72rem; color:var(--steel); }

.btn-sm{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; padding:7px 12px; border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; cursor:pointer; display:inline-block; }
.btn-sm.primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-sm.danger{ border-color:var(--ember); color:var(--ember); }
.btn-sm.danger:hover{ background:var(--ember); color:#fff; }

.status-pill{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:2px; display:inline-block; }
.status-pill.active, .status-pill.in_service, .status-pill.published{ background:#eaf6ec; color:#22582e; }
.status-pill.scheduled, .status-pill.development{ background:#fdf2e0; color:#8a5a10; }
.status-pill.boarding{ background:#e6f0fb; color:#1a4d8f; }
.status-pill.landed, .status-pill.retired, .status-pill.suspended, .status-pill.cancelled{ background:#f0f0ee; color:#6b7278; }

.auth-shell{ min-height:80vh; display:flex; align-items:center; justify-content:center; padding-block:60px; }
.auth-card{ width:100%; max-width:420px; background:#fff; border:1px solid var(--line); padding:36px; }
.auth-card .brand-word{ display:flex; align-items:center; gap:10px; margin-bottom:24px; }

.dot-live{ width:8px; height:8px; border-radius:50%; background:#3d9a52; display:inline-block; box-shadow:0 0 6px #3d9a52; }