/* --- Print-only layout for Absence Cover --- */


:root{
  --bg:#e9f3ff; --bg-soft:#f5f9ff; --brand:#1c6dd0; --brand-2:#0a4da2;
  --ink:#0d1b2a; --muted:#5b6b7a; --card:#fff; --card-b:#dbe7ff;
  --ring:0 0 0 3px rgba(28,109,208,.18); --shadow:0 10px 28px rgba(28,109,208,.14)
}
*{box-sizing:border-box}

body{
  margin:0; color:var(--ink);
  background: radial-gradient(1200px 600px at -10% -20%, #ffffff 0%, #f2f7ff 40%, var(--bg) 100%),
              linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
header{ position:sticky; top:0; z-index:10; backdrop-filter:saturate(160%) blur(6px);
  background:rgba(255,255,255,.80); border-bottom:1px solid #e3eeff; }
.header-inner{ max-width:1200px; margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--brand-2); font-weight:900 }
.logo{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--brand) 0%, #56a5ff 100%);
  color:#fff; display:grid; place-items:center; box-shadow:0 10px 28px rgba(28,109,208,.20) }
.container{ max-width:1100px; margin:18px auto; padding:0 16px 24px }
.card{ background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%); border:1px solid #e6f0ff;
  border-radius:16px; box-shadow:0 10px 28px rgba(28,109,208,.14); padding:16px }
.btn{ padding:10px 14px; border-radius:10px; border:1px solid #155ab0; background:#1c6dd0; color:#fff;
  text-decoration:none; display:inline-block; cursor:pointer; font-size:14px; box-shadow:0 4px 12px rgba(28,109,208,.20) }
.btn.secondary{ background:#f7f7f7; color:#0a4da2; border-color:#cfe1ff; box-shadow:none }
.btn.danger{ background:#ff4d4f; border-color:#d63b3d }
.btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(28,109,208,.18) }
.btn[disabled]{ opacity:.55; cursor:not-allowed }
.grid-cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px }
@media (max-width:1000px){ .grid-cards{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width:640px){ .grid-cards{ grid-template-columns: 1fr } }
.card h2{ margin:6px 0 8px; color:var(--brand-2) }
footer{ margin-top:16px; text-align:center; color:#173b6e; font-weight:700; padding:10px 0; border-top:1px dashed #cfe1ff;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(246,250,255,.7) 100%); }
.table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid #dbe7ff; border-radius:12px; overflow:hidden }
.table th, .table td{ border:1px solid #e5efff; padding:8px 10px; text-align:center; font-size:14px }
.table th{ background:#eef6ff; color:#0a4da2 }
.muted{ color:#5b6b7a; font-size:13px }
.input, select{ width:100%; padding:10px 12px; border:1px solid #cfe1ff; border-radius:10px; background:#fff; font-size:14px }
input:focus, select:focus{ outline:none; box-shadow:0 0 0 3px rgba(28,109,208,.18) }
.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.hero{ max-width:1100px; margin:28px auto; padding:0 16px; display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:center; }
@media (max-width:900px){ .hero{ grid-template-columns:1fr } }
.hero h1{ font-size:32px; color:var(--brand-2); margin:0 0 8px }
.hero p{ font-size:16px; color:#2a3a4a; line-height:1.6 }
.tag{ display:inline-block; background:#e7f1ff; color:#0a4da2; border:1px solid #cfe1ff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px }
.small{ font-size:12px; color:#5b6b7a }
.link{ color:#0a4da2; text-decoration:none }