.staff-portal { min-height:70vh; padding:76px 0 110px; background:radial-gradient(circle at 84% 0,rgba(215,25,32,.22),transparent 31%),linear-gradient(125deg,#101318,#07090c 65%); }
.staff-portal-login { max-width:540px; margin:0 auto; padding:42px; border:1px solid rgba(215,25,32,.55); background:linear-gradient(145deg,#211015,#0b0d10); box-shadow:0 25px 60px rgba(0,0,0,.32); }
.staff-portal-login h1,.staff-dashboard-heading h1 { margin:0; font:800 clamp(3rem,5.4vw,5.5rem)/.86 "Barlow Condensed",sans-serif; letter-spacing:.01em; text-transform:uppercase; }.staff-portal-login h1 em,.staff-dashboard-heading h1 em { color:var(--red); font-style:normal; }.staff-portal-login > p:not(.eyebrow) { color:var(--muted); }
.staff-portal-login #loginform { display:grid; gap:14px; margin-top:26px; }.staff-portal-login #loginform p { display:grid; gap:6px; margin:0; color:#e7e7e7; font:800 .72rem Manrope,sans-serif; letter-spacing:.1em; text-transform:uppercase; }.staff-portal-login #loginform input[type="text"],.staff-portal-login #loginform input[type="password"] { min-height:47px; padding:11px 12px; border:1px solid #42454a; color:#fff; background:#15181d; font:inherit; }.staff-portal-login #loginform input[type="submit"] { min-height:47px; border:1px solid var(--red); background:var(--red); color:#fff; cursor:pointer; font:800 1rem "Barlow Condensed",sans-serif; letter-spacing:.1em; text-transform:uppercase; }.staff-portal-login .login-remember { display:flex !important; align-items:center; gap:9px; color:var(--muted) !important; font:600 .75rem Manrope,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; }.staff-portal-login .login-remember input { accent-color:var(--red); }.staff-portal-login .login-remember label { display:flex; align-items:center; gap:8px; }
.staff-dashboard-heading { display:flex; justify-content:space-between; gap:26px; align-items:end; padding-bottom:35px; border-bottom:1px solid var(--line); }.staff-dashboard-heading p:not(.eyebrow) { max-width:630px; margin:16px 0 0; color:var(--muted); }.staff-logout { flex:0 0 auto; }
.staff-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:30px 0 42px; }.staff-stat { padding:22px; border-top:2px solid var(--red); background:#111419; }.staff-stat b { display:block; margin-bottom:6px; font:800 2.65rem/.82 "Barlow Condensed",sans-serif; }.staff-stat span { color:var(--muted); font:800 .69rem Manrope,sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.staff-dashboard-grid { display:grid; grid-template-columns:1.16fr .84fr; gap:18px; align-items:start; }.staff-panel { padding:28px; border:1px solid var(--line); background:#101216; }.staff-panel-wide { grid-column:1/-1; }.staff-panel-head { display:flex; justify-content:space-between; gap:15px; align-items:end; margin-bottom:20px; }.staff-panel h2 { margin:0; font:800 2.15rem/.9 "Barlow Condensed",sans-serif; text-transform:uppercase; }.staff-panel-head p { margin:0; color:var(--muted); font-size:.8rem; }.staff-booking { padding:18px 0; border-top:1px solid var(--line); }.staff-booking:first-of-type { border-top:0; padding-top:0; }.staff-booking-top { display:flex; gap:12px; justify-content:space-between; align-items:flex-start; }.staff-booking h3 { margin:0; font:800 1.35rem/1 "Barlow Condensed",sans-serif; text-transform:uppercase; }.staff-booking p { margin:9px 0 0; color:var(--muted); font-size:.82rem; }.staff-booking strong { color:#fff; }.staff-status { display:inline-block; padding:5px 8px; border:1px solid rgba(215,25,32,.65); color:#ffd7d9; font:800 .62rem Manrope,sans-serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }.staff-status.confirmed,.staff-status.completed { border-color:rgba(109,184,101,.7); color:#d5efcc; }.staff-booking-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }.staff-booking-actions select { min-height:38px; padding:6px 9px; border:1px solid #3d4045; background:#171a1f; color:#fff; font:700 .74rem Manrope,sans-serif; }.staff-booking-actions .button { min-height:38px; padding:0 14px; font-size:.85rem; }
.staff-shift { padding:15px 0; border-top:1px solid var(--line); }.staff-shift:first-of-type { padding-top:0; border-top:0; }.staff-shift time { display:block; color:var(--red); font:800 .68rem Manrope,sans-serif; letter-spacing:.1em; text-transform:uppercase; }.staff-shift strong { display:block; margin:5px 0; font:800 1.3rem/1 "Barlow Condensed",sans-serif; text-transform:uppercase; }.staff-shift p { margin:0; color:var(--muted); font-size:.82rem; }.staff-doc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.staff-doc { display:flex; min-height:166px; flex-direction:column; justify-content:space-between; padding:20px; border:1px solid rgba(255,255,255,.13); background:#0a0c0f; transition:transform .2s ease,border-color .2s ease; }.staff-doc:hover { border-color:var(--red); transform:translateY(-4px); }.staff-doc span { color:var(--red); font:800 .65rem Manrope,sans-serif; letter-spacing:.1em; text-transform:uppercase; }.staff-doc h3 { margin:14px 0; font:800 1.32rem/.95 "Barlow Condensed",sans-serif; text-transform:uppercase; }.staff-doc a { color:#fff; font:800 .75rem Manrope,sans-serif; letter-spacing:.07em; text-transform:uppercase; }.staff-doc a:hover { color:var(--red); }.staff-notice { margin:0 0 24px; padding:13px 16px; border-left:3px solid #78b66d; background:#122014; color:#d4efca; font-size:.85rem; }
@media (max-width:850px) { .staff-dashboard-grid { grid-template-columns:1fr; }.staff-stat-grid { grid-template-columns:1fr 1fr; }.staff-doc-grid { grid-template-columns:repeat(2,1fr); }.staff-dashboard-heading { align-items:flex-start; flex-direction:column; }.staff-logout { width:100%; } }
@media (max-width:520px) { .staff-portal { padding:48px 0 72px; }.staff-portal-login,.staff-panel { padding:22px; }.staff-stat-grid,.staff-doc-grid { grid-template-columns:1fr; }.staff-booking-top { flex-direction:column; }.staff-booking-actions { align-items:stretch; flex-direction:column; }.staff-booking-actions .button { width:100%; } }