/* ==============================================================
   Z Cares Stylesheet
   ============================================================== */

/* Fonts & base */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');

:root{
  --brand: #ff3fb5;              /* Primary pink */
  --brand-dark: #451934;         /* Pink hover */
  --ink: #111;
  --ink-muted: #5b6472;
  --blue: #0055aa;
  --blue-dark: #003366;
  --teal: #008080;
  --teal-weak: #e0f7f7;
  --border: #e3e3e3;
  --border-soft: #eee;
  --bg: #fefefe;
  --card: #fff;
  --shadow: 0 2px 6px rgba(0,0,0,0.05);
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body{
  padding: 0 1em;
  margin: 10px 0 0 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  line-height: 1.6;
}

h1, h2, h3{ color: var(--blue-dark); margin-top: 1.2em; }
ul{ padding-left: 1.2em; }
li{ margin-bottom: .5em; }

hr{ margin: 2em 0; border: 0; border-top: 1px solid #bf3b8c; }
/* reinstated soft divider */
hr.soft{ border: 0; border-top: 2px solid #96cdd6; margin: 12px 0; }
.hidden {
  display: none !important;
}

/* ==============================================================
   Links
   ============================================================== */
a{
  color: var(--blue);
  text-decoration: none;
}
a:hover{
  color: var(--blue-dark);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 3px;
  text-underline-offset: 2px;
}

/* Links that must not underline on hover (explicit) */
.nav-buttons a,
.family-tile,
.staff-card a,
.dropdown-content a,
.doc-action-link,
.calendar-link,
a.btn{ text-decoration: none; }

.doc-action-link{ color: var(--blue); font-weight: 600; }
.doc-action-link:hover{ color: var(--blue-dark); text-decoration: underline; }

/* ==============================================================
   Buttons
   ============================================================== */
button, a.btn{
  font: 1rem 'Manrope', sans-serif;
  padding: .5em 1.2em;
  margin: .3em .3em 0 0;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  line-height: 1.2;
  transition: background-color .2s ease-in-out, transform .12s ease;
}
button:hover, a.btn:hover{ background: var(--brand-dark); }
button:disabled, a.btn.disabled{ background: #ffccee; cursor: not-allowed; }
.tool-buttons{ display:flex; flex-wrap:wrap; gap: 10px; margin: 1em 0 2em; }

.dropbtn{
  background: var(--teal);
  color:#fff;
  font-weight:700;
  padding:.5em 1.2em;
  margin:.3em .3em 0 0;
  border:0; border-radius:6px;
  cursor:pointer;
  transition: background .2s ease;
}
.dropbtn:hover{ background:#006666; }

button[hidden]{ display:none !important; }

/* Base card look shared by all variants */
.notice, .success, .alerts {
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  backdrop-filter: blur(2px);
}

/* ==============================================================
   Notice — teal (general information)
   ============================================================== */
.notice {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;

  background: linear-gradient(135deg, var(--teal-weak) 0%, #ffffff 70%);
  border: 1px solid var(--teal);
  color: #003b3b;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

/* ==============================================================
   Welcome Notice 
   ============================================================== */
.welcome-notice {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;

  background: linear-gradient(135deg, var(--teal-weak) 0%, #ffffff 75%);
  border: 1px solid var(--teal);
  color: #003c3c;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(2px);

  /* Layout behaviour preserved */
  display: flow-root;
  flex: 1 1 0;
  min-width: 320px;
}

.welcome-notice h2, h3 {
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
  font-size: 1.35rem;
}

.welcome-notice p {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

/* ==============================================================
   Success — green
   ============================================================== */
.success {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;

  background: linear-gradient(135deg, #dff8e7 0%, #ffffff 70%);
  border: 1px solid #009e2a;
  color: #06380d;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.success h2, h3 {
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
  font-size: 1.35rem;
}
/* ==============================================================
   Alerts list (yellow) — used for admin notices
   ============================================================== */
.alerts {
  margin-bottom: 2rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;

  background: linear-gradient(135deg, #fff7d6 0%, #ffffff 70%);
  border: 1px solid #f5c000;
  color: #5a4400;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);

  list-style: none;
  padding-left: 1.25rem; /* keep a bit of indent for li text */
}

.alerts li {
  margin: 0.4rem 0;
}

.alerts a {
  color: #8a5f00;
  font-weight: 600;
}

.alerts a:hover {
  text-decoration: underline;
}
.alerts h2, h3 {
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
  font-size: 1.35rem;
}
/* ==============================================================
   Muted Info Card — soft grey gradient + subtle border
   ============================================================== */
.muted {
  padding: 0.65rem 0.85rem;
  margin: 0.75rem 0 1.25rem 0;
  background: linear-gradient(135deg, #f4f4f4, #ffffff);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  color: #555;
  font-size: 0.92rem;
  line-height: 1.45;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  backdrop-filter: blur(1px);
}

/* Links inside muted text */
.muted a {
  color: #333;
  text-decoration: underline;
}

.muted a:hover {
  color: #000;
}

/* ===================== pink box ==============================-*/
.pink-box {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, #ffe7f5);
  border: 1px solid #ff3fb5;
  box-shadow: 0px 4px 14px rgba(255, 63, 181, 0.15);
}
/* ==============================================================
   Header & logos
   ============================================================== */
.site-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 20px; background:#fff; border-bottom:2px solid #e5e5e5;
  margin-bottom:20px;
}
.logo-left, .org-logo{ max-height:100px; height:auto; width:auto; }
.logo-right{ display:flex; align-items:center; gap:10px; }
.org-name{ font-weight:700; font-size:1.2em; color:#333; }

.header-flex{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em; }
.header-flex img{ max-width:100%; height:auto; }
.header-flex a, .header-flex .org-header{ flex:1 1 150px; }

.header-top{ display:flex; justify-content:space-between; padding:10px 20px; }

/* centered previews */
.preview-img{
  display:block;
  max-width:200px;
  height:auto;
  margin:0 auto 1em;
  border:1px solid #ccc;
  padding:4px;
  background:#f9f9f9;
}

/* ==============================================================
   Layout
   ============================================================== */
.container{ max-width:1200px; margin:0 auto; }

.welcome-wrap{
  display:flex; gap:20px; align-items:flex-start; margin-bottom:1em; flex-wrap:nowrap;
}

.welcome-notice > :first-child{ margin-top:0; }
.welcome-notice > :last-child{ margin-bottom:0; }

.seasonal-image{ flex:0 0 260px; display:flex; justify-content:flex-end; }
.seasonal-image img{ max-width:100%; height:auto; border-radius:6px; }

@media (max-width:760px){
  .welcome-wrap{ flex-wrap:wrap; }
  .seasonal-image, .welcome-notice{ flex:1 1 100%; }
  .seasonal-image{ justify-content:flex-start; text-align:left; }
}

/* ==============================================================
   Cards & doc-card
   ============================================================== */
.doc-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
}
.doc-card h3{
  margin:0; padding:.6em 1em; background:#f8f8f8;
  font-size:1.05em; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}

/* Open by default globally */
.doc-card .section-body{ padding:.8em 1em; display:block; }

/* Accordion ONLY on registration pages */
.registration-form .doc-card .section-body{ display:none; }
.registration-form .doc-card.open .section-body{ display:block; }
.registration-form .doc-card h3{ cursor:pointer; }
.registration-form .doc-card h3::after{
  content:"▸"; font-size:.9em; margin-left:.5em; transition:transform .2s ease;
}
.registration-form .doc-card.open h3::after{ transform: rotate(90deg); }

/* Grid of cards */
.doc-card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:1.5em; margin-top:1em;
}

/* ==============================================================
   Forms
   ============================================================== */
input[type="text"], input[type="email"], input[type="url"],
input[type="date"], input[type="month"], input[type="password"],
textarea, select{
  font-family:'Manrope', sans-serif;
  width:100%; max-width:100%;
  padding:.5em; font-size:1rem; margin-bottom:1em;
  border:1px solid #ccc; border-radius:4px;
}

.field .label{ display:block; font-weight:600; margin-bottom:.35rem; color:#0b3a75; }
.help-text{ font-size:.85rem; color:var(--ink-muted); margin-top:.25rem; }

/* Inline delete (form as link) */
.inline-delete{ display:contents; }
.link-delete{
  background:none; border:0; color:#c00;
  text-decoration:underline; cursor:pointer; padding:0; margin:0; font:inherit;
}
.link-delete:hover{ color:#a00; text-decoration:none; }

/* ==============================================================
   Dropdown
   ============================================================== */
.dropdown{ position:relative; display:inline-block; }
.dropdown-content{
  display:none; position:absolute; background:#fff; min-width:160px;
  box-shadow:0 4px 8px rgba(0,0,0,0.1); z-index:10; right:0;
  border-radius:6px; overflow:hidden; border:1px solid var(--border);
}
.dropdown-content a{ display:block; padding:10px; color:var(--ink); }
.dropdown-content a:hover{ background:#f0f0f0; }
.dropdown:hover .dropdown-content{ display:block; }

/* ==============================================================
   Tables
   ============================================================== */
table.zebra{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid #878787; border-radius:var(--radius); overflow:hidden;
}
table.zebra th{
  background:#ffe0f3; color:var(--blue-dark); font-weight:600;
  padding:.6em; text-align:left; border-bottom:1px solid var(--brand);
}
table.zebra td{ padding:.6em; border-bottom:1px solid #878787; }
table.zebra tbody tr:nth-child(even){ background:#fafafa; }
table.zebra tbody tr:hover{ background:#f0f6ff; }
table.zebra tbody tr:last-child td{ border-bottom:none; }

/* Simple staff table */
.staff-table{
  width:100%; border-collapse:collapse; table-layout:fixed; margin-top:1em;
}
.staff-table th, .staff-table td{
  border:1px solid #ccc; padding:.5em; text-align:left; word-wrap:break-word;
}
.staff-table th{ background:#f4f4f4; }

/* Training highlights */
.training-overdue{ background:#ffe5e5; }
.training-notdone{ background:#fff5e0; }
.training-duesoon{ background:#fffbe5; }

/* Employment history table (single definition) */
#history-table{ width:100%; border-collapse:collapse; margin-top:1em; }
#history-table th, #history-table td{ padding:.5em; text-align:left; vertical-align:top; }
#history-table input{ width:100%; box-sizing:border-box; }
#history-table th:last-child, #history-table td:last-child{ width:3em; }

/* ==============================================================
   Calendar (compact)
   ============================================================== */
.calendar-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin:1rem 0;
}
.calendar{
  width:100%; border-collapse:collapse; table-layout:fixed; background:#fff;
  border:1px solid #ddd; border-radius:8px; overflow:hidden;
}
.calendar th, .calendar td{
  border:1px solid #eee; vertical-align:top; padding:.25rem .4rem;
}
.calendar th{ text-align:center; font-weight:600; background:#f7f7f9; }
.calendar-day{ height:120px; position:relative; }
.calendar-empty{ background:#fafafa; }
.calendar-date{ font-size:.9rem; font-weight:600; color:var(--blue-dark); margin-bottom:.25rem; }
.calendar a.calendar-item{ display:block; color:inherit; text-decoration:none; }
.calendar a.calendar-item:hover{
  text-decoration:underline; text-decoration-color:var(--brand);
  text-decoration-thickness:3px; text-underline-offset:2px;
}
.calendar-item{
  font-size:.9rem; line-height:1.3; padding:.15rem .3rem; margin:.15rem 0;
  border:1px solid #e9e9ee; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.calendar-item + .calendar-item{ margin-top:.25rem; }
.calendar-item.avail-chip{
  background:var(--teal-weak); border:1px solid #e2e8f0; border-radius:6px; padding:.2rem .35rem;
}
@media (max-width:720px){
  .calendar-day{ height:100px; }
  .calendar-item{ font-size:.85rem; }
}

/* ==============================================================
   Family tiles
   ============================================================== */
.family-tile{
  display:block; padding:1.2em; background:#dbeeff; border:2px solid var(--blue);
  border-radius:1em; text-align:center; font-weight:700; color:var(--blue-dark);
  transition: all .2s ease;
}
.family-tile:hover{ background:#cce5ff; transform:scale(1.02); }
.family-tile small{ display:block; margin-top:.5em; font-size:.9em; color:#333; }
.family-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1em; margin-top:2em;
}

/* ==============================================================
   Messages
   ============================================================== */
.messages-toolbar{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center; margin:.5rem 0 1rem; }
.filter-group{ display:flex; gap:.5rem; }
.filter-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem;
  border:1px solid #e5e7eb; border-radius:999px; background:#fff; font-weight:600; color:#0f172a;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.filter-chip:hover{ background:#f9fbfe; border-color:#d7e3ff; transform: translateY(-1px); }
.filter-chip.active{ background:#ffd3ef; border-color:var(--brand); color:#111; }

.search-sort-grid{
  display:grid; gap:.6rem .8rem; grid-template-columns:1fr 1fr auto auto; align-items:end; margin:.6rem 0 1rem;
}
@media (max-width:780px){ .search-sort-grid{ grid-template-columns:1fr; } }

.msg-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:.8rem .9rem; margin-bottom:.75rem; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.msg-card.routine-message{ border-left:6px solid #4caf50; }
.msg-card.unread-message { border-left:6px solid #f5c000; background:#fffbe5; }
.msg-card.urgent-message { border-left:6px solid #d93025; background:#fff5f5; }

.msg-head{ display:flex; gap:.6rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:.35rem; }
.msg-who{ display:flex; gap:.5rem; align-items:center; font-weight:700; color:#0b3a75; }
.msg-when{ font-size:.92rem; color:#475569; }
.badge-priority{ padding:.2rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700; background:#ffdede; color:#7a1111; border:1px solid #f5b4b4; }
.badge-unread{ display:inline-block; width:10px; height:10px; border-radius:999px; background:#f59e0b; box-shadow:0 0 0 2px #fff; }
.msg-subject{ font-weight:700; color:#111; margin:.2rem 0 .15rem; }
.msg-actions{ margin-top:.45rem; }
.msg-preview{
  font-size:.9rem; color:#444; margin-top:.2rem; line-height:1.4; max-height:2.6em;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.msg-preview::before{ content:"“"; color:#bbb; }
.msg-preview::after { content:"”"; color:#bbb; }
.pager{ display:flex; gap:.5rem; align-items:center; justify-content:center; margin:1rem 0; }
.pager .btn{ background:#fff; color:var(--blue); border:1px solid #cfd8e3; }
.pager .btn:hover{ background:#f5f9ff; }

/* ==============================================================
   Tags / chips
   ============================================================== */
.badge{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px;
  background:#eef3ff; color:var(--blue-dark); border:1px solid #d7e3ff;
}
.badge-category{ background:#f0f0f0; color:#333; border-radius:4px; padding:2px 8px; font-size:.8rem; margin-right:6px; display:inline-block; }
.badge-tag{ display:inline-block; padding:2px 6px; border-radius:6px; font-size:.75rem; margin:2px 4px 2px 0; }

.tag{
  display:inline-block; background:#8c63c7; color:#fff; border-radius:6px;
  padding:4px 9px; font-size:.9rem; font-weight:500; line-height:1.3; margin:2px 4px 2px 0;
  transition: background-color .15s ease;
}
.tag:hover{ background:#754bb0; }
.tag-box{ display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; }

/* ==============================================================
   Equality UI (cards)
   ============================================================== */
.eq-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); margin-top:.75rem; }
.eq-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  padding:1rem .9rem; box-shadow:0 1px 1px rgba(0,0,0,.03);
}
.eq-card h3{ margin:0 0 .6rem; font-size:1.05rem; }
.eq-summary{ display:flex; gap:.75rem; flex-wrap:wrap; margin:.5rem 0 1rem; }
.eq-pill{ padding:.35rem .7rem; border-radius:999px; background:#ffd3ef; color:#111; font-weight:600; }
.eq-row{
  display:grid; grid-template-columns:1fr auto auto; gap:.6rem .8rem; align-items:center;
  padding:.45rem 0; border-top:1px dashed #e5e7eb;
}
.eq-row:first-of-type{ border-top:0; }
.eq-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eq-count, .eq-pct{ font-variant-numeric: tabular-nums; color:#111; font-weight:600; }
.eq-bar{ grid-column:1 / -1; position:relative; height:8px; border-radius:999px; background:#ffd3ef; overflow:hidden; }
.eq-bar > span{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--brand); border-radius:999px; }
.eq-suppressed .eq-label{ color:#6b7280; font-style:italic; }

/* ==============================================================
   Module access grid
   ============================================================== */
.module-access{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:12px; margin:.5rem 0 1rem;
}
.module-tile{
  display:grid; place-items:center; gap:4px; padding:10px 12px;
  border:2px solid #ffd3ef; border-radius:12px; background:#fff7fc;
  font-size:1.15rem; line-height:1.1; box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.module-tile span{ font-size:.9rem; color:#333; }
.module-tile:hover{
  border-color:#ffb5e3; background:#ffe6f5;
  box-shadow:0 4px 10px rgba(255,63,181,.15);
  transform: translateY(-1px);
}

/* ==============================================================
   Modal (single pattern)
   ============================================================== */
.modal.hidden{ display:none; }
.modal{ position:fixed; inset:0; z-index:1000; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.4); }
.modal__dialog{
  position:relative; max-width:560px; width:92%; margin:8vh auto;
  background:#fff; border-radius:12px; padding:1rem; box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.modal textarea{ width:100%; }

/* ==============================================================
   Utilities
   ============================================================== */
.small{ font-size:12px; }
.nowrap{ white-space:nowrap; vertical-align:middle; }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.badge-grey{ background:#9aa0a6; color:#fff; }
.badge-green{ background:#1e8e3e; color:#fff; }
.badge-lime{ background:#34a853; color:#fff; }
.badge-amber{ background:#fbbc05; color:#222; }
.badge-orange{ background:#f29900; color:#fff; }
.badge-red{ background:#d93025; color:#fff; }

/* Progress (brand) */
progress{ appearance:none; width:100%; height:12px; border:0; border-radius:999px; overflow:hidden; background:#ffe0f3; }
progress::-webkit-progress-bar{ background:#ffe0f3; }
progress::-webkit-progress-value{ background:var(--brand); }
progress::-moz-progress-bar{ background:var(--brand); }

/* Compact nav mode tweaks */
body.compact-nav .nav-buttons .btn .btn-text{ display:none; }
body.compact-nav .nav-buttons .btn{
  min-width:44px; padding:.5rem .6rem; display:inline-flex; align-items:center; justify-content:center;
}
.nav-buttons .btn{ gap:.35rem; }

/* ==============================================================
   Training Matrix DO NOT DELETE OR EDIT
   ============================================================== */
.matrix-breakout{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background:#fff;
  padding:2rem 0;
}
.matrix-inner{ overflow-x:auto; padding:0; }

/* ==============================================================
   Meds Audit
   ============================================================== */
.audit-form fieldset{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1rem .75rem;
  margin:1rem 0;
  box-shadow:var(--shadow);
}
.audit-form legend{
  padding:0 .5rem; font-weight:700; color:var(--blue-dark);
}
.audit-badge{
  display:inline-block; margin:.25rem 0 .5rem; padding:.25rem .5rem; font-size:.9rem;
  color:var(--teal); background:var(--teal-weak);
  border:1px solid #c7f5ee; border-radius:8px;
}
.grid-2{
  display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; } }

.audit-form label{
  display:flex; align-items:flex-start; gap:.5rem; margin:.25rem 0; color:var(--ink);
}
.audit-form label > span{
  display:block; min-width:11rem; font-weight:600; color:var(--blue-dark);
}
.audit-form input[type="checkbox"]{
  width:1.05rem; height:1.05rem; margin-top:.15rem; accent-color:var(--teal);
}
.actions.audit-sticky{
  position:sticky; bottom:0; background:linear-gradient(to top, var(--card) 70%, rgba(255,255,255,0));
  padding:.75rem 0 1rem; margin-top:2rem; border-top:1px solid var(--border); backdrop-filter:blur(4px); z-index:5;
}
pre.code-block{
  background:#0b1020; color:#e5e7eb; padding:1rem; border-radius:10px; overflow:auto; font-size:.9rem; line-height:1.5;
}

/* Clock */
/* DO NOT DELETE THIS AGAIN FIVE YOU TWAT */
.clock {
  display: inline-block;
  padding: 4px 10px;
  background-color: #ffe6f0;
  border: 3px solid #ff3fb5;
  border-radius: 20px;
  font-weight: bold;
  color: #444;
}
/* -------- Staff & Manager dashboard: Message Alerts -------- */
/* -------- Staff & Manager dashboard: Message Alerts -------- */

.message-alerts {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffe7f5, #ffffff);
  border: 2px solid #ff3fb5; /* Zapp Pink */
  box-shadow: 0px 4px 14px rgba(255, 63, 181, 0.15);
}

/* Heading */
.message-alerts h2 {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: #ff3fb5;
  text-shadow: 0 0 2px rgba(255, 63, 181, 0.15);
}

/* Groups */
.message-alerts .alert-group + .alert-group {
  margin-top: 1.2rem;
  border-top: 1px dashed rgba(255, 63, 181, 0.35);
  padding-top: 1rem;
}

/* Headings inside groups */
.alert-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.alert-heading-urgent {
  color: #b00020;
}

.alert-heading-client {
  color: #444;
}

/* List */
.alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Items */
.alert-item {
  border-radius: 14px;
  margin-bottom: 0.6rem;
  padding: 0.75rem 0.9rem;

  /* Reverse gradient: white → soft pink, so it stands out inside the box */
  background: linear-gradient(90deg, #ffffff, #ffe7f5);
  border: 1px solid rgba(0, 0, 0, 0.05);

  /* Default left colour bar = staff (jewel tone) */
  border-left: 6px solid #9b5de5; /* amethyst staff colour */

  transition: box-shadow 0.2s ease, transform 0.12s ease, background 0.2s ease;
}

.alert-item:hover {
  transform: translateY(-1px);
  box-shadow: 0px 4px 10px rgba(255, 63, 181, 0.15);
}

/* Urgent item styling – overrides staff/client jewel/blue bar */
.alert-item-urgent {
  border-left-color: #b00020;
  /* Slightly warmer gradient for urgent, still readable */
  background: linear-gradient(90deg, #ffffff, #ffe5e9);
}

/* Client message styling – blue bar, same gradient */
.alert-item-client {
  border-left-color: #2266aa;
  background: linear-gradient(90deg, #ffffff, #e7f1ff);
}

/* Link wrapper */
.alert-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.alert-link:hover,
.alert-link:focus {
  background: rgba(255, 255, 255, 0.35); /* subtle highlight on top of gradient */
  border-radius: 12px;
}

/* Meta row */
.alert-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

/* Pills */
.alert-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.alert-pill-urgent {
  background: #b00020;
  color: #fff;
}

.alert-pill-client {
  background: #2266aa;
  color: #fff;
}

/* Time */
.alert-meta-time {
  color: #555;
}

/* Subject + body text */
.alert-subject {
  font-weight: 600;
  margin-bottom: 0.2rem;
  color: #333;
}

.alert-body {
  font-size: 0.9rem;
  color: #444;
}

/* Footer */
.alert-footer {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(255, 63, 181, 0.35);
  font-size: 0.92rem;
  color: #333;
}

.alert-footer-link {
  margin-left: 0.35rem;
  color: #ff3fb5;
  font-weight: 600;
  text-decoration: underline;
}
/* ==============================================================
   Events form styling
   ============================================================== */
.event-form fieldset{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1rem .75rem;
  margin: 1rem 0;
  box-shadow: var(--shadow);
}

.event-form legend{
  padding: 0 .5rem;
  font-weight: 700;
  color: var(--blue-dark);
}

/* Small helper text inside fieldsets */
.event-form .fieldset-help{
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
}
/* Event form collapsible sections */
details.event-section {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin: 0 0 0.9rem 0;
  background: #f9fafb;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.02);
}

details.event-section > summary {
  padding: .55rem .8rem;
  cursor: pointer;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0; /* override global summary margin */
}

details.event-section > summary span {
  font-size: 0.97rem;
}

details.event-section[open] {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

details.event-section > fieldset {
  margin: 0;
  border: 0;
  border-top: 1px solid #e5e7eb;
  padding: .75rem .8rem .9rem;
}

.event-form .fieldset-help {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: .6rem;
}
/* Shared status grid for daily / weekly dashboards */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .75rem;
  margin: .5rem 0 1rem;
}

.status-item {
  border-radius: .75rem;
  padding: .6rem .5rem;
  text-align: center;
  border: 1px solid #d5d9e2;
  background: #f7f8fa;
  font-size: .9rem;
  transition: background .2s, border-color .2s;
}

.status-item .emoji {
  font-size: 1.6rem;
  margin-bottom: .25rem;
}

.status-item .label {
  font-weight: 600;
}

.status-item .sub {
  font-size: .8rem;
  color: #5b6472;
  line-height: 1.2;
}

.status-item.status-done {
  background: #e6f7ea;
  border-color: #8fd19a;
}

.status-item.status-pending {
  background: #f4f5f7;
  border-color: #ccd0da;
  opacity: .75;
}

.status-item:hover {
  background: #eef0f4;
}

/* Layout: 3 columns with a stacked middle column */
.carehome-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(260px, 1fr) minmax(220px, 0.9fr);
  gap: 1rem;
  align-items: flex-start;
}

.doc-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* RotD photo circle */
.rotd-photo {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #d5d9e2;
}

/* --- Training Matrix view modes --- */
.matrix-breakout { margin-top: 10px; }

/* shared */
.matrix-inner { width: 100%; }
.matrix-inner table { width: 100%; border-collapse: collapse; }
.matrix-inner th, .matrix-inner td { padding: 10px; vertical-align: top; }

/* COMPACT: try to keep it all on screen */
.matrix-breakout.view-compact .matrix-inner {
  overflow-x: hidden;
}
.matrix-breakout.view-compact .staff-table {
  table-layout: fixed;            /* helps squeeze columns */
}
.matrix-breakout.view-compact .staff-table th,
.matrix-breakout.view-compact .staff-table td {
  white-space: normal;            /* allow wrapping */
  word-break: break-word;
}

/* SCROLL: readable fixed column widths + sideways scroll */
.matrix-breakout.view-scroll .matrix-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
}
.matrix-breakout.view-scroll .staff-table {
  table-layout: fixed;            /* fixed widths behave predictably */
  min-width: 900px;               /* ensures scroll engages when many columns */
}

/* set comfortable widths */
.matrix-breakout.view-scroll .staff-table th:first-child,
.matrix-breakout.view-scroll .staff-table td:first-child {
  width: 220px;
  min-width: 220px;
}
.matrix-breakout.view-scroll .staff-table th:not(:first-child),
.matrix-breakout.view-scroll .staff-table td:not(:first-child) {
  width: 220px;                   /* tweak to taste: 200–260 tends to read well */
  min-width: 220px;
}

/* sticky header + first column for usability */
.matrix-breakout.view-scroll .staff-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
}
.matrix-breakout.view-scroll .staff-table th:first-child,
.matrix-breakout.view-scroll .staff-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}

/* make top-left cell sit above both sticky layers */
.matrix-breakout.view-scroll .staff-table thead th:first-child {
  z-index: 4;
}
/* Frozen Staff column: add visible "freeze line" */
.matrix-breakout.view-scroll .staff-table th:first-child,
.matrix-breakout.view-scroll .staff-table td:first-child{
  border-right: 2px solid rgba(0,0,0,0.18);
  box-shadow: 8px 0 10px -10px rgba(0,0,0,0.35);
}

/* Optional: make freeze line match your theme a bit more */
@media (prefers-color-scheme: light){
  .matrix-breakout.view-scroll .staff-table th:first-child,
  .matrix-breakout.view-scroll .staff-table td:first-child{
    border-right-color: var(--border);
  }
}
/* ==============================================================
   Audit > Xmas (Post-Christmas Breakdown)
   ============================================================== */

/* LOVE sections: reflective vibe, still "Audit module" */
.audit-form fieldset.xmas-love{
  border-left: 6px solid var(--teal);
  background: linear-gradient(135deg, #f8fffe, #ffffff);
}

.audit-form fieldset.xmas-love legend{
  color: var(--teal);
}

/* Sticky actions: subtle dock effect */
.actions.audit-sticky{
  box-shadow: 0 -6px 12px rgba(0,0,0,0.06);
}

/* Cartoons */
.xmas-cartoons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 12px 0 18px;
}

.xmas-cartoons .xmas-cartoon{
  flex: 1 1 320px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}

.xmas-cartoons img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
/* ==============================================================
   Audit > Xmas header layout (intro + cartoons)
   ============================================================== */

.xmas-intro-wrap{
  display: grid;
  grid-template-columns: 3fr 7fr; /* 30 / 70 split */
  gap: 16px;
  align-items: start;
  margin: 1rem 0 1.25rem;
}

.xmas-intro-text{
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.xmas-intro-text p:last-child{
  margin-bottom: 0;
}

.xmas-cartoons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.xmas-cartoons img{
  width: 100%;
  max-height: 320px;       /* 👈 key constraint */
  object-fit: contain;     /* no cropping */
  border-radius: 12px;
  background: #fff;
}

/* Stack on smaller screens */
@media (max-width: 900px){
  .xmas-intro-wrap{
    grid-template-columns: 1fr;
  }
  .xmas-cartoons{
    grid-template-columns: 1fr;
  }
}