* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: #f6f8fb; color: #222; }
a { color: #0a6cff; text-decoration: none; }
a:hover { text-decoration: underline; }
header { background: #0f1c3f; color: #fff; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
nav a { margin-right: 12px; color: #dce4ff; font-weight: 600; }
nav a.active { color: #fff; border-bottom: 2px solid #4fd1c5; padding-bottom: 4px; }
.container { padding: 20px; max-width: 1200px; margin: auto; }
.card { background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 16px; }
.flex { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.btn { background: #0a6cff; color: #fff; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer; }
.btn.secondary { background: #475569; }
.btn.danger { background: #dc2626; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
input, select, textarea { padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; width: 100%; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid #e2e8f0; padding: 8px; }
th { background: #f1f5f9; }
.badge { padding: 2px 6px; border-radius: 4px; background: #e2e8f0; font-size: 12px; }
.badge.success { background: #d1fae5; color: #047857; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.error { background: #fee2e2; color: #b91c1c; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal .content { background: #fff; border-radius: 8px; padding: 16px; width: min(600px, 90%); max-height: 90vh; overflow: auto; }
.toast { position: fixed; top: 16px; right: 16px; background: #0a6cff; color: #fff; padding: 10px 14px; border-radius: 6px; display: none; z-index: 1100; }
.alert { padding: 10px; border-radius: 6px; margin: 10px 0; }
.alert.info { background: #e0f2fe; color: #075985; }
.alert.success { background: #ecfdf3; color: #047857; }
.alert.warn { background: #fef3c7; color: #92400e; }
.alert.error { background: #fee2e2; color: #b91c1c; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.small { font-size: 12px; color: #475569; }
.small.muted { color: #6b7280; }
.section-title { margin: 12px 0 4px; font-weight: 700; }
.table-actions { display: flex; gap: 6px; }

/* Auth */
body.auth-body { background: radial-gradient(circle at 20% 20%, #e0edff, #f6f8fb 35%), radial-gradient(circle at 85% 30%, #f4e8ff, #f6f8fb 45%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; position: relative; overflow: hidden; color: #0f172a; }
.auth-accent { position: absolute; filter: blur(64px); opacity: 0.6; z-index: 0; }
.accent-1 { width: 320px; height: 320px; background: #d3e8ff; top: -60px; left: -80px; }
.accent-2 { width: 260px; height: 260px; background: #f2dcff; bottom: -80px; right: -40px; }
.auth-shell { width: min(1100px, 100%); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: stretch; position: relative; z-index: 1; }
.auth-info { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); border: 1px solid #e2e8f0; border-radius: 16px; padding: 32px; box-shadow: 0 20px 55px rgba(15,23,42,0.08); }
.auth-badge { display: inline-flex; align-items: center; gap: 6px; background: #0a6cff; color: #fff; padding: 6px 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.3px; }
.auth-info h1 { margin: 14px 0 10px; font-size: 28px; line-height: 1.2; }
.auth-subtitle { margin: 0 0 16px; color: #475569; line-height: 1.6; }
.auth-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; background: #f1f5f9; color: #0f172a; padding: 8px 12px; border-radius: 999px; font-weight: 600; border: 1px solid #e2e8f0; }
.auth-card { background: #fff; border-radius: 16px; padding: 28px; border: 1px solid #e2e8f0; box-shadow: 0 18px 48px rgba(15,23,42,0.08); display: flex; flex-direction: column; gap: 10px; }
.auth-card-header h2 { margin: 6px 0; }
.auth-card-header .eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: 1.4px; color: #334155; margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form label { font-weight: 600; color: #0f172a; }
.auth-form input { padding: 12px; border-radius: 10px; border: 1px solid #cbd5e1; font-size: 15px; }
.auth-form .btn { width: 100%; padding: 12px; border-radius: 10px; font-size: 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(10,108,255,0.25); }
.auth-form .alert { margin: 6px 0 0; }
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } .auth-info { order: 2; } .auth-card { order: 1; } }
@media (max-width: 600px) { body.auth-body { padding: 24px 14px; } .auth-card, .auth-info { padding: 22px; } .auth-form input { padding: 10px; } }

/* Leave calendar */
.leave-grid-wrapper { overflow-x: auto; margin-top: 10px; }
.leave-grid table { min-width: 860px; }
.leave-grid th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.leave-grid th, .leave-grid td { text-align: center; }
.leave-grid thead th { background: #f1f5f9; }
.summary-row th { background: #f8fafc; }
.leave-chip { border: none; font-weight: 700; padding: 6px 10px; }
.leave-annual { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.leave-study { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.leave-training { background: #ede9fe; color: #4338ca; border: 1px solid #ddd6fe; }
.leave-sick { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.week-nav { display: flex; gap: 8px; }

/* Rota weekly view */
.rota-weekly-wrapper { overflow-x: auto; margin-top: 10px; }
.rota-weekly table { min-width: 860px; }
.rota-weekly th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.rota-weekly thead th { background: #f1f5f9; text-align: center; }
.rota-weekly td, .rota-weekly th { text-align: center; }
.shift-chip { background: #e0f2fe; color: #0f172a; border: 1px solid #bae6fd; padding: 6px 10px; font-weight: 700; display: inline-block; }
.totals-row { background: #e5e7eb; font-weight: 700; }
.target-row { background: #dbeafe; font-weight: 700; }
.locum-row th, .locum-row td { background: #fffbeb; }