:root {
  --bg: #e7eaef;
  --bg-grad-a: rgba(120, 144, 188, 0.08);
  --bg-grad-b: rgba(36, 47, 71, 0.11);
  --card: #f5f7fb;
  --panel: #f2f4f8;
  --line: #d3dae4;
  --ink: #263248;
  --muted: #7b8da6;
  --accent: #215de8;
  --accent-strong: #142846;
  --danger: #df2a25;
  --danger-bg: #f7ebee;
  --paper-bg: #ffffff;
  --mar-bg: #334157;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 4px 22px rgba(26, 39, 64, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Manrope", "Source Sans 3", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 20% -10%, var(--bg-grad-a), transparent 68%),
    radial-gradient(900px 700px at 110% 20%, var(--bg-grad-b), transparent 75%),
    var(--bg);
}

button,
input {
  font: inherit;
}

input {
  border: 1px solid var(--line);
  border-radius: 5px;
  height: 48px;
  padding: 0 14px;
  background: #f6f8fc;
  color: var(--ink);
}

input::placeholder {
  color: #97a3b8;
}



.screen {
  display: none;
  animation: fade-in 240ms ease-out;
}

.screen.is-active {
  display: block;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-shell {
  width: min(1240px, 96%);
  margin: 16px auto 20px;
}

.header-card {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  min-height: 108px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
}

.brand-wrap {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.brand-copy {
  min-width: 0;
  padding-right: 10px;
}

.brand-wrap h1 {
  margin: 0;
  font-size: clamp(30px, 2.25vw, 46px);
  line-height: 1;
  text-transform: capitalize;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-wrap p {
  margin: 4px 0 0;
  color: #4b607f;
  font-size: clamp(16px, 1.35vw, 22px);
}

.brand-contact {
  margin: 8px 0 0;
  font-style: normal;
  color: #6f82a0;
  font-weight: 600;
  line-height: 1.35;
  font-size: clamp(12px, 0.9vw, 14px);
  max-width: 440px;
  text-align: left;
}

.logo-box,
.brand-pill {
  border: 1px solid var(--line);
  background: #f8faff;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(27, 40, 64, 0.1);
}

.logo-box {
  width: clamp(42px, 3.2vw, 52px);
  aspect-ratio: 1;
  border-radius: 14px;
}

.brand-pill {
  width: clamp(32px, 2.4vw, 40px);
  aspect-ratio: 0.75;
  border-radius: 999px;
  margin-right: 2px;
}

.logo-box svg,
.brand-pill svg {
  width: 58%;
  fill: #2c5ee4;
}

address {
  margin: 0;
  text-align: right;
  font-style: normal;
  color: #7f90a9;
  font-weight: 600;
  line-height: 1.45;
  font-size: clamp(14px, 1.1vw, 20px);
}

.stock-monitor {
  margin-top: 26px;
}

.section-label {
  align-items: center;
  color: #31425d;
  display: flex;
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 800;
  gap: 8px;
  letter-spacing: 0.01em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.section-label span {
  width: 20px;
  display: grid;
  place-items: center;
}

.section-label svg {
  fill: #33445e;
}

.stock-alert {
  width: min(410px, 100%);
  border: 1px solid #f2babd;
  border-radius: 6px;
  background: var(--danger-bg);
  padding: 16px 18px;
}

.stock-alert h3 {
  margin: 0;
  font-size: clamp(23px, 1.8vw, 30px);
  font-weight: 800;
}

.stock-alert .medicine {
  margin: 4px 0 6px;
  color: var(--danger);
  font-size: clamp(23px, 1.8vw, 30px);
  font-weight: 700;
}

.stock-alert .meta {
  margin: 0;
  color: #667894;
  font-size: clamp(17px, 1.3vw, 19px);
  letter-spacing: 0.12em;
}

.stock-empty {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

/* Stock Alert Cards */
.stock-alert-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid #e6a817;
  border-radius: 8px;
  background: #fef9e7;
}

.stock-alert-card .alert-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stock-alert-card .alert-info strong {
  font-size: 14px;
  color: #263248;
}

.stock-alert-card .alert-resident {
  font-size: 12px;
  color: var(--muted);
}

.stock-alert-card .alert-detail {
  font-size: 12px;
  color: #b8860b;
  font-weight: 600;
}

/* Critical stock alert (<=7 days) */
.stock-alert-card.stock-alert-critical {
  border-color: #e53e3e;
  background: #fff5f5;
}

.stock-alert-card.stock-alert-critical .alert-detail {
  color: #c53030;
}

.order-btn {
  background: #e6a817;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.order-btn:hover {
  background: #d49b15;
}

/* Activity Log Button */
.log-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-strong);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.log-btn svg {
  fill: #fff;
}

.log-btn:hover {
  background: var(--accent);
}

/* Log Modal */
#log-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 20, 31, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1100;
  justify-content: center;
  align-items: center;
}

.log-modal-container {
  width: min(1180px, 96vw);
  max-width: 1180px;
  max-height: 88vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.log-modal-body {
  max-height: 78vh;
  overflow-y: auto;
  overflow-x: auto;
  padding: 16px 18px 18px;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-entry {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.log-time {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  min-width: 120px;
}

.log-action {
  font-weight: 700;
  color: var(--accent-strong);
  min-width: 130px;
}

.log-details {
  color: var(--ink);
}

.log-empty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.workspace-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(312px, 1fr) minmax(520px, 2fr);
  margin-top: 38px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel {
  padding: 18px;
}

.panel-title {
  margin: 0 0 14px;
  font-size: clamp(24px, 1.8vw, 36px);
  font-weight: 800;
  align-items: center;
  display: flex;
  gap: 9px;
}

.panel-title svg {
  width: 21px;
  fill: #394f6f;
}

.form-grid {
  display: grid;
  gap: 11px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-field label {
  font-size: 13px;
  font-weight: 700;
  color: #4b607f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-field input {
  width: 100%;
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.form-grid .allergy {
  color: #ca211d;
  font-weight: 700;
}

.stock-empty {
  color: #7b8da6;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 600;
  margin: 0;
  padding: 14px 0;
}

.no-residents {
  color: #7b8da6;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 600;
  text-align: center;
  padding: 24px 16px;
  margin: 0;
}

.empty-mar {
  padding: 32px 16px !important;
  text-align: center !important;
  color: #7b8da6;
  font-size: 13px;
  font-style: italic;
}

.form-grid>button,
.med-form button {
  border: 0;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: clamp(20px, 1.4vw, 28px);
  font-weight: 700;
  height: 54px;
  background: #1f2f4a;
}

.residents-panel {
  margin-top: 20px;
  padding: 0;
}

.residents-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 16px;
}

.residents-head h3 {
  margin: 0;
  font-size: clamp(20px, 1.4vw, 28px);
}

.link-btn {
  border: 0;
  background: none;
  color: #1f59dc;
  cursor: pointer;
  font-weight: 800;
  font-size: clamp(14px, 1vw, 20px);
}

.resident-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  transition: background 150ms ease;
}

.resident-item:hover {
  background: rgba(33, 93, 232, 0.04);
}

.resident-item.is-selected {
  background: rgba(33, 93, 232, 0.08);
  box-shadow: inset 3px 0 0 #2864ea;
}

.resident-item strong {
  display: block;
  font-size: clamp(28px, 2vw, 34px);
}

.resident-item p {
  margin: 4px 0 0;
  color: #5b6f8b;
  font-size: clamp(18px, 1.3vw, 24px);
}

.archive-btn {
  align-items: center;
  background: #eef2f7;
  border: 1px solid #d8dee9;
  border-radius: 5px;
  color: #9ca8ba;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
}

.archive-btn svg {
  width: 15px;
  fill: #f4a114;
}

.is-selected {
  box-shadow: inset 0 0 0 2px #abc1ef, var(--shadow);
}

.empty-resident-card {
  align-items: center;
  border: 2px dashed #d6dde8;
  border-radius: var(--radius);
  color: #8c9ebb;
  display: grid;
  gap: 14px;
  min-height: 635px;
  place-content: center;
}

.empty-resident-card svg {
  width: 62px;
  fill: #8fa1bd;
  margin-inline: auto;
}

.empty-resident-card p {
  font-size: clamp(32px, 2.3vw, 40px);
  margin: 0;
  font-weight: 600;
}

.resident-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 116px;
  padding: 18px 22px;
}

.resident-header h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 1.8vw, 28px);
  line-height: 1;
}

.resident-header p {
  margin: 0;
  color: #52657f;
  font-size: clamp(24px, 1.7vw, 30px);
}

.resident-header strong {
  color: #1b53d3;
  margin-left: 8px;
}

.primary-cta {
  border: 0;
  border-radius: 10px;
  min-height: 66px;
  min-width: 270px;
  color: #fff;
  background: #2864ea;
  cursor: pointer;
  font-size: clamp(18px, 1.3vw, 25px);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.primary-cta svg {
  width: 19px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.medication-editor {
  margin-top: 20px;
  padding: 16px 16px 18px;
}

.medication-editor h3 {
  margin: 0 0 10px;
  font-size: clamp(20px, 1.5vw, 24px);
}

.med-form {
  display: grid;
  gap: 10px;
  grid-template-columns: 2fr 1fr 1fr;
}

.med-form input:nth-of-type(4),
.med-form input:nth-of-type(6),
.med-form button {
  grid-column: span 2;
}

.dose-block {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f6f8fc;
  height: 48px;
  align-items: center;
  display: grid;
  font-weight: 700;
  color: #667996;
  font-size: 12px;
  grid-template-columns: repeat(6, 1fr);
  letter-spacing: 0.09em;
  padding: 0 8px;
}

.dose-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
}

.dose-check input[type="checkbox"] {
  width: 12px;
  height: 12px;
  accent-color: #2864ea;
  cursor: pointer;
}

.dose-check span {
  font-size: 12px;
  font-weight: 700;
  color: #667996;
  letter-spacing: 0.09em;
}

.dose-check:has(input:checked) span {
  color: #2864ea;
}

.med-form button {
  grid-column: 1 / -1;
}

.medication-card {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  min-height: 134px;
  padding: 18px 16px 14px;
}

.medication-card h3 {
  margin: 0;
  font-size: clamp(30px, 2.2vw, 42px);
  line-height: 1.15;
}

.medication-card p {
  margin: 4px 0 10px;
  color: #4f6180;
  font-style: italic;
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 600;
}

.dose-tags {
  display: flex;
  gap: 8px;
}

.dose-tags span {
  min-width: 26px;
  height: 26px;
  background: #e9effc;
  color: #215ce3;
  border: 1px solid #d5dff5;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}

.medication-card small {
  margin-top: 8px;
  display: block;
  color: #8a98ac;
  font-size: clamp(16px, 1.1vw, 19px);
}

.card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  /* Center checkbox consistent with buttons */
}

/* Checkbox Styles */
.mar-include-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: auto;
  /* Push buttons to the right */
  height: 34px;
  padding: 0 4px;
}

.mar-include-cb {
  display: none;
}

.mar-include-check {
  width: 20px;
  height: 20px;
  border: 2px solid #d4dbe6;
  border-radius: 5px;
  background: #f7f8fb;
  display: grid;
  place-items: center;
  transition: all 0.2s;
}

.mar-include-cb:checked+.mar-include-check {
  background: #2864ea;
  border-color: #2864ea;
}

.mar-include-cb:checked+.mar-include-check::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(0px, -1px);
}

/* Action Buttons */
.card-actions button {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  border: 1px solid #d4dbe6;
  background: #f7f8fb;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Audit Table Styles */
.audit-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 14px;
}

.audit-table th,
.audit-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.audit-table th {
  background: #f8fafc;
  color: #4b607f;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
}

.audit-table tr:hover td {
  background: #f6fafe;
}

.log-time-cell {
  color: var(--muted);
  white-space: nowrap;
  width: 168px;
}

.log-action-cell {
  color: var(--accent-strong);
  font-weight: 600;
  width: 170px;
}

.log-user-cell {
  min-width: 180px;
}

.log-role-cell {
  min-width: 130px;
}

.log-details-cell {
  min-width: 260px;
  line-height: 1.45;
  color: #364152;
  word-break: break-word;
}

/* User Badge in Table */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.role-badge.role-supervisor {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}

.role-badge.role-staff {
  background: #ecfccb;
  color: #365314;
  border: 1px solid #d9f99d;
}

/* Updated nth-child because checkbox is now first child */
.card-actions button:nth-child(2) svg {
  fill: #ef9f12;
  /* Edit - Orange */
}

.card-actions button:nth-child(3) svg {
  fill: #2e69ea;
  /* Dup - Blue */
}

.card-actions button:nth-child(4) svg {
  fill: #e84a42;
  /* Del - Red */
}

.card-actions svg {
  width: 14px;
}

.floating-toolbox {
  position: fixed;
  right: 14px;
  bottom: 18px;
  width: 50px;
  height: 128px;
  border-radius: 24px;
  background: #11151e;
  box-shadow: 0 10px 20px rgba(9, 13, 20, 0.42);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
}

.floating-toolbox span {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 0 50%, #8d97a8 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, #8d97a8 2px, transparent 3px),
    radial-gradient(circle at 100% 50%, #8d97a8 2px, transparent 3px);
}

.mar-mode {
  background: var(--mar-bg);
  min-height: 100vh;
  padding: 20px 0 26px;
}

.mar-shell {
  width: min(1080px, 96%);
  margin: 0 auto;
}

.mar-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.mar-actions button {
  border: 0;
  border-radius: 6px;
  min-height: 42px;
  padding: 0 18px;
  font-weight: 700;
  font-size: 26px;
  color: #263146;
  background: #f2f4f8;
}

.mar-actions .download-btn {
  background: #205ce4;
  color: #fff;
  min-width: 284px;
}

/* ═══════════ MAR SHEET ═══════════ */

.mar-paper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: min(940px, 100%);
  background: var(--paper-bg);
  min-height: 1170px;
  box-shadow: 0 8px 28px rgba(18, 25, 36, 0.3);
  padding: 18px;
  font-family: "Source Sans 3", serif;
}

.mar-paper header {
  text-align: center;
  border-bottom: 2px solid #2a2a2a;
  padding-bottom: 4px;
}

.mar-paper header h1 {
  margin: 0;
  font-size: 43px;
  letter-spacing: 0.03em;
}

.mar-paper header p {
  margin: 0;
  font-size: 16px;
}

.resident-row {
  margin-top: 8px;
  border: 1px solid #222;
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1.6fr 1.5fr;
}

.resident-row div {
  border-right: 1px solid #222;
  min-height: 62px;
  padding: 6px 6px 4px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
}

.resident-row div:last-child {
  border-right: 0;
}

.resident-row span {
  color: #5b5b5b;
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}

.resident-row em {
  color: #da2018;
  font-style: normal;
}

/* DOB + NHS stacked in one MAR cell */
.mar-dob-nhs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mar-dob-nhs div {
  border-right: 0 !important;
  min-height: 28px !important;
  padding: 3px 6px !important;
}

.mar-dob-nhs div:first-child {
  border-bottom: 1px solid #222;
}

/* Unit dropdown */
#med-unit {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: #fff;
}

/* Table */
.mar-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 10px;
  table-layout: fixed;
  /* Enforce strict column widths */
}

/* Ensure month headers don't expand columns */
.month-header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  background: #f8f9fa;
  color: #4a5568;
}

.mar-table tbody td {
  height: 24px;
}

.mar-table tbody .med-footer-row td {
  height: auto;
}

.mar-table th,
.mar-table td {
  border: 1px solid #222;
  padding: 2px 3px;
  text-align: center;
}

/* Column Widths */
/* Column Widths */
.header-details,
.med-details-cell {
  min-width: 140px;
  width: 15%;
  text-align: left !important;
  vertical-align: top;
  white-space: normal !important;
  font-size: 12px;
  padding: 4px 6px !important;
}

.header-time,
.time-cell {
  width: 28px;
  font-weight: 700;
  font-size: 10px;
}

.header-dose,
.dose-cell {
  width: 42px;
  font-size: 9px;
  white-space: nowrap;
}

.day-col {
  width: 22px;
  min-width: 22px;
  max-width: 22px;
}

/* Headers */
.mar-table thead th {
  background: #f2f2f2;
  font-weight: 700;
}

.header-title {
  text-align: left !important;
  padding-left: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.header-cycle {
  font-size: 10px;
  text-align: right !important;
  padding-right: 6px;
}

.month-header {
  background: #f2f2f2 !important;
  font-size: 10px;
  text-transform: uppercase;
}

/* Med Details Content */
.med-info-top {
  margin-bottom: 6px;
}

.med-info-top strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 2px;
}

.med-info-top p {
  margin: 0;
  font-style: italic;
  font-size: 9px;
  line-height: 1.2;
}

.med-stock-info {
  margin-top: 6px;
}

.stock-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  margin-bottom: 1px;
}

.stock-row span:first-child {
  font-weight: 700;
}

.total-row {
  font-weight: 700;
  border-top: 1px solid #999;
  margin-top: 2px;
  padding-top: 2px;
}

.balance-row {
  margin-top: 4px;
  text-align: center;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 1px solid #999;
  padding-top: 3px;
}

/* Alternating Day Columns */
.mar-table tbody td.day-even {
  background: #e8e8e8 !important;
}

.mar-table tbody td.day-odd {
  background: #fff !important;
}

/* Unused cells - keep column color, just gray text */
.unused-time {
  color: #bbb;
}

/* Footer Row (per medication) */
.med-footer-row td {
  border-top: 2px solid #222;
  background: #fff;
  padding: 4px 6px;
  text-align: left !important;
  font-size: 9px;
}

.med-footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
}

.med-footer-content span {
  white-space: nowrap;
}

.med-footer-content strong {
  margin-right: 2px;
}

/* CODES Footer (pinned to bottom of page) */
.mar-codes-footer {
  margin-top: auto;
  border: 1px solid #222;
  padding: 4px 8px;
  font-size: 9px;
}

.mar-codes-footer .codes-lines {
  line-height: 1.5;
}

.mar-codes-footer .codes-line {
  white-space: nowrap;
}

/* Page Break Handling */
tr {
  page-break-inside: avoid;
}

/* Print-only header row: hidden on screen */
.print-header-row {
  display: none;
}

/* ═══════════ PDF CAPTURE MODE ═══════════
   Applied temporarily by JS during html2pdf capture so the
   rendered output matches the @media print layout exactly.
   Width is locked to A4 content area (210mm - 10mm margins = 200mm ≈ 756px)
   so the PDF is identical regardless of browser window size.          */
.pdf-capture {
  width: 756px !important;
  max-width: 756px !important;
  min-width: 756px !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: white !important;
  font-size: 10px !important;
}

.pdf-capture .mar-actions {
  display: none !important;
}

.pdf-capture>header,
.pdf-capture>.resident-row {
  display: none !important;
}

.pdf-capture .print-header-row {
  display: table-row !important;
}

.pdf-capture .mar-table thead {
  display: table-header-group;
}

.pdf-capture .mar-table {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.pdf-capture .mar-table th,
.pdf-capture .mar-table td {
  font-size: 8px !important;
  padding: 2px !important;
}

.pdf-capture .med-details-cell {
  width: 28% !important;
  font-size: 9px !important;
  padding: 3px 5px !important;
  white-space: normal !important;
}

.pdf-capture .time-cell,
.pdf-capture .header-time {
  width: 6% !important;
  font-size: 9px !important;
}

.pdf-capture .dose-cell,
.pdf-capture .header-dose {
  width: 6% !important;
  font-size: 8px !important;
}

.pdf-capture .day-col {
  width: 2.142857% !important;
  font-size: 7px !important;
  padding: 1px !important;
}

.pdf-capture .mar-table tbody td {
  height: 17px;
}

.pdf-capture .print-care-home h1 {
  font-size: 24px !important;
  margin: 0;
}

.pdf-capture .print-care-home p {
  font-size: 10px !important;
}

.pdf-capture .print-resident-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1.6fr 1.5fr;
  border: 1px solid #222;
  margin-bottom: 2px;
}

.pdf-capture .print-resident-grid>div {
  border-right: 1px solid #222;
  padding: 4px 6px;
  font-size: 10px;
}

.pdf-capture .print-resident-grid>div:last-child {
  border-right: none;
}

.pdf-capture .print-resident-grid span {
  font-size: 8px;
  text-transform: uppercase;
  color: #5b5b5b;
}

.pdf-capture .print-resident-grid strong {
  font-size: 11px;
  color: #1a2332;
}

.pdf-capture .print-care-home {
  text-align: center;
  border-bottom: 2px solid #2a2a2a;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.pdf-capture .mar-codes-footer {
  margin-top: auto !important;
  border-top: 1px solid #222;
  padding: 4px 0 0;
  font-size: 8px !important;
}

.pdf-capture .floating-toolbox {
  display: none !important;
}

/* ═══════════ REASON CODE MODAL ═══════════ */
.reason-modal-container {
  width: 90%;
  max-width: 600px;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.reason-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.reason-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.reason-btn strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #3b82f6;
  color: white;
  border-radius: 6px;
  font-weight: 700;
  font-size: 16px;
}

/* Not Taken / Refused styles for MAR sheet */
td.not-taken {
  color: #dc2626 !important;
  /* Red text */
  font-weight: 700;
  background-color: #fef2f2 !important;
  /* Very light red bg */
}

td.not-taken span {
  display: inline-block;
  border-bottom: 2px dotted #dc2626;
  /* Dotted underline to indicate tooltip */
  cursor: help;
}

/* ═══════════ PRINT STYLES ═══════════ */
@media print {
  @page {
    size: A4 portrait;
    margin: 5mm;
    /* Tighten margins */
  }

  body {
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide ALL screens first */
  .screen {
    display: none !important;
  }

  /* Only show the MAR preview */
  #mar-preview {
    display: block !important;
    background: white !important;
    padding: 0 !important;
    min-height: auto !important;
    margin: 0 !important;
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
  }

  #mar-preview .mar-shell {
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .mar-paper,
  .mar-paper * {
    visibility: visible;
  }

  .mar-paper {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: white;
    display: flex !important;
    flex-direction: column !important;
    min-height: 287mm !important;
    /* A4 minus top+bottom 5mm margins */
    height: auto !important;
    /* Let content determine actual height */
    overflow: visible !important;
  }

  /* Hide the on-screen header and resident row (replaced by thead print rows) */
  .mar-paper>header,
  .mar-paper>.resident-row {
    display: none !important;
  }

  /* Show the print-only header row in thead */
  .print-header-row {
    display: table-row !important;
  }

  /* Repeat thead on every printed page */
  .mar-table thead {
    display: table-header-group;
  }

  /* Print header cell: no borders, full width */
  .print-info-cell {
    border: none !important;
    padding: 0 0 4px !important;
    background: white !important;
    text-align: left !important;
    font-weight: normal !important;
  }

  /* Care home name */
  .print-care-home {
    text-align: center;
    border-bottom: 2px solid #2a2a2a;
    padding-bottom: 4px;
    margin-bottom: 6px;
  }

  .print-care-home h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: #1a2332;
    font-family: "Source Sans 3", sans-serif;
  }

  .print-care-home p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #333;
  }

  /* Resident info grid */
  .print-resident-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.6fr 1.5fr;
    border: 1px solid #222;
    margin-bottom: 2px;
  }

  .print-resident-grid>div {
    border-right: 1px solid #222;
    min-height: 40px;
    padding: 4px 6px 3px;
    font-size: 10px;
  }

  .print-resident-grid>div:last-child {
    border-right: none;
  }

  .print-resident-grid span {
    color: #5b5b5b;
    font-size: 8px;
    text-transform: uppercase;
  }

  .print-resident-grid strong {
    font-size: 11px;
    color: #1a2332;
  }

  .print-resident-grid .allergy-alert {
    color: #da2018 !important;
  }

  /* DOB + NHS stacked */
  .print-dob-nhs {
    display: flex;
    flex-direction: column;
  }

  .print-dob-nhs>div {
    border-right: none !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  .print-dob-nhs>div:first-child {
    margin-bottom: 2px;
  }

  /* wrapper resets */
  .mar-mode {
    padding: 0 !important;
    min-height: 100vh !important;
    background: white !important;
    display: block !important;
  }

  /* Codes footer */
  .mar-codes-footer {
    position: static;
    background: white;
    padding: 2mm 0 0;
    margin-top: auto !important;
    /* Push to bottom */
    border: none;
    border-top: 1px solid #222;
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-before: avoid;
  }

  /* Hide non-print elements */
  .floating-toolbox,
  .prototype-switcher,
  .header-card,
  .mar-actions,
  .switcher-bar,
  #custom-modal,
  #log-modal {
    display: none !important;
  }

  /* Force exact print colors (preserve gray day shading in PDF output) */
  .mar-table,
  .mar-table th,
  .mar-table td {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    forced-color-adjust: none !important;
  }

  /* ── Portrait print column sizing ──
     Keep day columns equal and give medication details extra room.
  */
  .mar-table colgroup col:nth-child(1) {
    width: 28% !important;
  }

  .mar-table colgroup col:nth-child(2) {
    width: 6% !important;
  }

  .mar-table colgroup col:nth-child(3) {
    width: 6% !important;
  }

  .mar-table colgroup col:nth-child(n + 4) {
    width: 2.142857% !important;
  }

  .mar-table {
    table-layout: fixed !important;
    width: 100% !important;
    margin-bottom: 0;
  }

  .mar-table tbody td {
    height: 17px;
  }

  /* Details column: slightly wider for medication name/instructions and stock info */
  .header-details,
  .med-details-cell {
    width: 28% !important;
    min-width: 28% !important;
    max-width: 28% !important;
    font-size: 9px !important;
    padding: 3px 5px !important;
    white-space: normal !important;
    overflow: hidden;
  }

  .header-time,
  .time-cell {
    width: 6% !important;
    min-width: 6% !important;
    max-width: 6% !important;
    font-size: 9px !important;
  }

  .header-dose,
  .dose-cell {
    width: 6% !important;
    min-width: 6% !important;
    max-width: 6% !important;
    font-size: 8px !important;
  }

  /* Day columns */
  .day-col {
    width: 2.142857% !important;
    min-width: 2.142857% !important;
    max-width: 2.142857% !important;
    font-size: 8px !important;
    padding: 1px !important;
  }

  .mar-table thead th.day-col {
    font-size: 7px !important;
    padding: 1px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .month-header {
    font-size: 8px !important;
    padding: 1px 2px !important;
  }

  /* Details column content sizing */
  .med-info-top strong {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .med-info-top p {
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  .stock-row {
    font-size: 8px !important;
  }

  .med-stock-info {
    margin-top: 3px !important;
  }

  .med-info-top {
    margin-bottom: 3px !important;
  }

  /* Medication group page-break rules */
  .med-footer-row {
    page-break-after: auto;
  }

  tr {
    page-break-inside: avoid;
  }

  /* Prevent orphan footer pages */
  .mar-table tbody {
    page-break-after: avoid;
  }
}

@media (max-width: 1260px) {
  .brand-wrap h1 {
    font-size: 38px;
  }

  .brand-wrap p {
    font-size: 20px;
  }

  .section-label {
    font-size: 24px;
  }

  .stock-alert h3,
  .stock-alert .medicine {
    font-size: 30px;
  }

  .panel-title {
    font-size: 33px;
  }

  .resident-item strong {
    font-size: 32px;
  }

  .empty-resident-card p {
    font-size: 34px;
  }

  .resident-header h2 {
    font-size: 52px;
  }
}

@media (max-width: 1060px) {
  .prototype-switcher {
    position: sticky;
    top: 0;
    width: fit-content;
    margin: 8px auto 0;
    right: auto;
  }

  .header-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .brand-contact {
    max-width: none;
    text-align: left;
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .empty-resident-card {
    min-height: 320px;
  }

  .resident-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .med-form {
    grid-template-columns: 1fr;
  }

  .med-form input:nth-of-type(4),
  .med-form input:nth-of-type(6) {
    grid-column: auto;
  }

  .medication-card {
    flex-direction: column;
    gap: 12px;
  }

  .mar-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mar-actions button {
    font-size: 16px;
  }
}

@media (max-width: 660px) {
  .switcher-btn {
    font-size: 11px;
    padding: 7px 11px;
  }

  .brand-wrap h1 {
    font-size: 29px;
  }

  .brand-wrap p {
    font-size: 15px;
  }

  .brand-contact {
    font-size: 12px;
  }

  .section-label {
    font-size: 19px;
  }

  .stock-alert h3,
  .stock-alert .medicine {
    font-size: 24px;
  }

  .stock-alert .meta {
    font-size: 14px;
  }

  .panel-title {
    font-size: 26px;
  }

  .resident-header h2 {
    font-size: 36px;
  }

  .resident-header p {
    font-size: 18px;
  }

  .primary-cta {
    min-width: 100%;
    font-size: 16px;
  }

  .medication-editor h3,
  .medication-card h3 {
    font-size: 27px;
  }

  .medication-card p {
    font-size: 17px;
  }

  .floating-toolbox {
    width: 44px;
    height: 110px;
    gap: 14px;
  }

  .mar-paper {
    min-height: 760px;
    padding: 8px;
  }

  .mar-paper header h1 {
    font-size: 30px;
  }

  .resident-row {
    grid-template-columns: 1fr;
  }

  .resident-row div {
    border-right: 0;
    border-bottom: 1px solid #222;
  }

  .resident-row div:last-child {
    border-bottom: 0;
  }

  .mar-table {
    font-size: 8px;
  }
}

.edit-med-btn svg {
  fill: #f59e0b;
}

.edit-med-btn svg {
  fill: #f59e0b;
}

/* ═══════════ MODAL ═══════════ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 20, 31, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  /* Make visible when 'is-open' class is added */
  pointer-events: auto;
  /* Enable interaction */
}

.modal-container {
  background: #fff;
  width: min(440px, 90%);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Keep Activity Log modal in wide landscape layout (don't inherit 440px modal width) */
.modal-container.log-modal-container {
  width: min(1220px, 96vw);
  max-width: 1220px;
  max-height: 88vh;
}

.modal-overlay.is-open .modal-container {
  transform: translateY(0);
  /* Animate in */
}

.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid #edf2f7;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: #2d3748;
}

.modal-body {
  padding: 24px 22px;
  font-size: 16px;
  line-height: 1.5;
  color: #4a5568;
}

.modal-footer {
  padding: 16px 22px;
  background: #f7fafc;
  border-radius: 0 0 12px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.modal-footer button {
  background: #3182ce;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.modal-footer button:hover {
  background: #2b6cb0;
}

.modal-footer .secondary-btn {
  background: #e2e8f0;
  color: #4a5568;
}

.modal-footer .secondary-btn:hover {
  background: #cbd5e0;
}

.modal-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
}

.modal-input:focus {
  border-color: #3182ce;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

/* Medication List Header (Select All) */
.med-list-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -10px;
  /* Pull closer to first card */
  padding: 0 4px;
  position: relative;
  z-index: 5;
}

.med-list-header .mar-include-label {
  margin-right: 0;
  /* Override default push */
  gap: 10px;
  flex-direction: row-reverse;
  /* Text on left, checkbox on right */
}

.select-all-text {
  font-size: 13px;
  font-weight: 600;
  color: #667996;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════
   NEW FEATURES STYLES
   ════════════════════════════════════════════════════════════ */

/* ═══════════ LOGIN SCREEN ═══════════ */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-container {
  width: 100%;
  max-width: 440px;
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.login-header .logo-box {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-header .logo-box svg {
  width: 36px;
  height: 36px;
  fill: white;
}

.login-header h1 {
  font-size: 28px;
  font-weight: 800;
  color: #1a202c;
  margin: 0 0 8px 0;
}

.login-header p {
  font-size: 14px;
  color: #718096;
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-form label {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
}

.login-form input {
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s;
}

.login-form input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.login-error {
  padding: 12px 16px;
  background: #fed7d7;
  border: 1px solid #fc8181;
  border-radius: 8px;
  color: #c53030;
  font-size: 14px;
  font-weight: 500;
}

.login-btn {
  padding: 14px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 8px;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.login-btn:active {
  transform: translateY(0);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-footer {
  margin-top: 32px;
  text-align: center;
}

.login-footer p {
  font-size: 12px;
  color: #a0aec0;
}

/* ═══════════ USER DISPLAY IN HEADER ═══════════ */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}

.user-display {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #f7fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.user-name {
  font-weight: 600;
  color: #2d3748;
  font-size: 14px;
}

.user-role {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
}

/* Global Logout Button */
.logout-btn,
.mar-actions .logout-btn,
button.logout-btn {
  padding: 6px 14px;
  background: #e53e3e !important;
  /* Force Red */
  color: white !important;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-block;
}

.logout-btn:hover,
.mar-actions .logout-btn:hover,
button.logout-btn:hover {
  background: #c53030 !important;
  transform: translateY(-1px);
}

/* ═══════════ USER MANAGEMENT SCREEN ═══════════ */
.user-management-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 24px;
}

.users-panel {
  max-height: none;
}

.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s;
}

.user-item:hover {
  border-color: #cbd5e0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-item strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 4px;
}

.user-item p {
  font-size: 13px;
  color: #718096;
  margin: 0;
}

.role-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.role-supervisor {
  background: #edf2f7;
  color: #2d3748;
}

.role-staff {
  background: #e6fffa;
  color: #047857;
}

.password-field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.small-action-btn {
  border: 1px solid #ced4e0;
  border-radius: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: #f8fafc;
  color: #25324a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.small-action-btn:hover {
  background: #eaf1fc;
}

.field-hint {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

#new-user-role {
  width: 100%;
  min-height: 50px;
  border: 1px solid #cdd8e7;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #25324a;
  background: #f8fbff;
}

.user-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.reset-password-btn,
.archive-user-btn,
.delete-user-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.reset-password-btn {
  background: #edf2f7;
  color: #2d3748;
}

.reset-password-btn:hover {
  background: #e2e8f0;
}

.archive-user-btn {
  background: #e9f0ff;
  color: #2859b8;
  border: 1px solid #c8d8ff;
}

.archive-user-btn:hover {
  background: #dce9ff;
}

.restore-user-btn {
  background: #e8fff2;
  color: #0e7a48;
  border: 1px solid #b6f0d0;
}

.restore-user-btn:hover {
  background: #d5f9e7;
}

.delete-user-btn {
  background: #fed7d7;
  color: #c53030;
}

.delete-user-btn:hover {
  background: #fc8181;
  color: white;
}

.current-user-label {
  font-size: 12px;
  color: #718096;
  font-weight: 600;
  font-style: italic;
}

.archive-badge {
  display: inline-block;
  margin-top: 8px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #dce5ef;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.is-archived-user {
  opacity: 0.9;
  border-style: dashed;
}

/* ═══════════ PAGE HEADER (for sub-screens) ═══════════ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: white;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 800;
  color: #1a202c;
  margin: 0;
}

.page-header-actions {
  display: flex;
  gap: 12px;
}

.secondary-btn {
  padding: 10px 20px;
  background: #edf2f7;
  color: #2d3748;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.secondary-btn:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

/* ═══════════ STOCK REPORT SCREEN ═══════════ */
.stock-report-container {
  padding: 24px;
}

.stock-report-table {
  width: 100%;
  background: white;
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stock-report-table table {
  width: 100%;
  border-collapse: collapse;
}

.stock-report-table th {
  background: #edf2f7;
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4a5568;
  border-bottom: 2px solid #cbd5e0;
}

.stock-report-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
  color: #2d3748;
}

.stock-report-table tr:hover {
  background: #f7fafc;
}

.stock-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.stock-status-low {
  background: #fed7d7;
  color: #c53030;
}

.stock-status-medium {
  background: #feebc8;
  color: #c05621;
}

.stock-status-ok {
  background: #c6f6d5;
  color: #22543d;
}

.stock-status-ordered {
  background: #dbeafe;
  color: #1e40af;
}

.inventory-layout {
  display: grid;
  grid-template-columns: minmax(300px, 340px) 1fr;
  gap: 18px;
  align-items: start;
}

.inventory-panel {
  background: #fff;
  border: 1px solid #d6deea;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.inventory-panel-head {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-bottom: 1px solid #e3eaf5;
  background: #f7faff;
}

.inventory-panel-head h2 {
  color: #263248;
  font-size: 18px;
  margin: 0;
}

.inventory-panel-head p {
  color: #5e6f8d;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.inventory-detail-head {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}

.inventory-detail-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inventory-resident-table-wrap,
.inventory-detail-table-wrap {
  box-shadow: none;
  border-radius: 0;
}

.inventory-resident-table-wrap table {
  min-width: 520px;
}

.inventory-detail-table-wrap table {
  min-width: 1040px;
}

.inventory-detail-table-wrap table th:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #edf2f7;
  box-shadow: 1px 0 0 #d0dae8;
}

.inventory-detail-table-wrap table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  box-shadow: 1px 0 0 #e2e8f0;
}

.inventory-detail-table-wrap tr.stock-row-critical td:first-child {
  background: #fff5f5;
}

.inventory-detail-table-wrap tr.stock-row-warning td:first-child {
  background: #fffaf0;
}

.inventory-resident-table th,
.inventory-resident-table td {
  padding: 12px;
}

.inventory-resident-row.is-selected {
  background: #ebf4ff;
}

.inventory-resident-link {
  background: transparent;
  border: none;
  color: #1f4b99;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  padding: 0;
  text-align: left;
}

.inventory-resident-link:hover {
  color: #173a77;
  text-decoration: underline;
}

.inventory-pill {
  border-radius: 999px;
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  text-transform: uppercase;
}

.inventory-pill.ok {
  background: #dcfce7;
  color: #166534;
}

.inventory-pill.needs-order {
  background: #ffedd5;
  color: #9a3412;
}

.inventory-pill.critical {
  background: #fee2e2;
  color: #b91c1c;
}

.inventory-scroll-hint {
  margin: 0;
  padding: 8px 18px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7c99;
  border-top: 1px solid #e8eef7;
  background: #f9fbff;
}

.stock-report-table::-webkit-scrollbar {
  height: 10px;
}

.stock-report-table::-webkit-scrollbar-track {
  background: #e7edf6;
  border-radius: 999px;
}

.stock-report-table::-webkit-scrollbar-thumb {
  background: #9eb0c9;
  border-radius: 999px;
}

.stock-report-table::-webkit-scrollbar-thumb:hover {
  background: #7f92ad;
}

/* ═══════════ SEARCH/FILTER ═══════════ */
.search-box {
  position: relative;
  margin-bottom: 16px;
}

.search-box input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.search-box input:focus {
  border-color: #3182ce;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: #a0aec0;
  pointer-events: none;
}

/* ═══════════ DARK MODE ═══════════ */
body.dark-mode {
  background: #1a202c;
  color: #e2e8f0;
}

.dark-mode .app-shell,
.dark-mode .card,
.dark-mode .login-card {
  background: #2d3748;
  color: #e2e8f0;
}

.dark-mode .header-card {
  background: #2d3748;
  border-color: #4a5568;
}

.dark-mode .resident-item,
.dark-mode .user-item,
.dark-mode .medication-card {
  background: #374151;
  border-color: #4a5568;
  color: #e2e8f0;
}

.dark-mode .resident-item:hover,
.dark-mode .medication-card:hover {
  border-color: #718096;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background: #374151;
  border-color: #4a5568;
  color: #e2e8f0;
}

.dark-mode input:focus,
.dark-mode select:focus {
  border-color: #667eea;
}

.dark-mode .page-header {
  background: #2d3748;
  border-color: #4a5568;
}

.dark-mode .stock-report-table th {
  background: #374151;
  color: #cbd5e0;
  border-color: #4a5568;
}

.dark-mode .stock-report-table td {
  border-color: #4a5568;
  color: #e2e8f0;
}

.dark-mode .stock-report-table tr:hover {
  background: #374151;
}

.dark-mode .inventory-panel {
  background: #2d3748;
  border-color: #4a5568;
}

.dark-mode .inventory-panel-head {
  background: #303b4f;
  border-color: #4a5568;
}

.dark-mode .inventory-panel-head h2 {
  color: #e2e8f0;
}

.dark-mode .inventory-panel-head p {
  color: #cbd5e0;
}

.dark-mode .inventory-scroll-hint {
  background: #2f3a4d;
  border-color: #4a5568;
  color: #c8d3e7;
}

.dark-mode .inventory-resident-row.is-selected {
  background: #2c3e57;
}

.dark-mode .inventory-resident-link {
  color: #9dc4ff;
}

.dark-mode .inventory-resident-link:hover {
  color: #c3ddff;
}

.dark-mode .inventory-detail-table-wrap table th:first-child {
  background: #374151;
  box-shadow: 1px 0 0 #4a5568;
}

.dark-mode .inventory-detail-table-wrap table td:first-child {
  background: #2d3748;
  box-shadow: 1px 0 0 #4a5568;
}

.dark-mode .inventory-detail-table-wrap tr.stock-row-critical td:first-child {
  background: #5a2b31;
}

.dark-mode .inventory-detail-table-wrap tr.stock-row-warning td:first-child {
  background: #5a4328;
}

.dark-mode .archive-user-btn {
  background: #334155;
  color: #c7dcff;
  border-color: #4a5f84;
}

.dark-mode .restore-user-btn {
  background: #1f3f32;
  color: #b9efd6;
  border-color: #32654f;
}

.dark-mode .archive-badge {
  background: #374151;
  color: #cbd5e0;
  border-color: #4b5563;
}

.dark-mode-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
  z-index: 9999;
}

.dark-mode-toggle:hover {
  transform: scale(1.1) rotate(15deg);
}

.dark-mode-toggle svg {
  width: 24px;
  height: 24px;
  fill: white;
}

/* ═══════════ ADMINISTRATION TRACKING ═══════════ */
.mar-table td.administered {
  background: #c6f6d5;
  text-align: center;
  font-weight: 700;
  color: #22543d;
  cursor: pointer;
  position: relative;
}

.mar-table td.administered:hover {
  background: #9ae6b4;
}

.mar-table td.clickable-cell {
  cursor: pointer;
  position: relative;
}

.mar-table td.clickable-cell:hover {
  background: #edf2f7;
}

.admin-signature {
  display: block;
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  color: #2d3748;
  line-height: 1;
  letter-spacing: -0.5px;
  overflow: hidden;
  white-space: nowrap;
}

/* ═══════════ EXPIRED ALERTS ═══════════ */
.expired-alert {
  background: #fed7d7;
  border-left: 4px solid #c53030;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.expired-alert-icon {
  width: 24px;
  height: 24px;
  fill: #c53030;
  flex-shrink: 0;
}

.expired-alert-content {
  flex: 1;
}

.expired-alert-title {
  font-weight: 700;
  color: #742a2a;
  margin: 0 0 4px 0;
  font-size: 14px;
}

.expired-alert-detail {
  font-size: 13px;
  color: #9b2c2c;
  margin: 0;
}

/* ═══════════ RESPONSIVE IMPROVEMENTS ═══════════ */
@media (max-width: 1200px) {
  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .user-management-grid {
    grid-template-columns: 1fr;
  }

  .inventory-layout {
    grid-template-columns: 1fr;
  }

  .stock-report-container {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .login-card {
    padding: 32px 24px;
  }

  .header-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .user-display {
    width: 100%;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .page-header-actions {
    width: 100%;
    flex-direction: column;
  }

  .stock-report-table {
    overflow-x: auto;
  }

  .inventory-panel-head {
    padding: 14px;
  }

  .inventory-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .stock-report-table th,
  .stock-report-table td {
    font-size: 13px;
    padding: 11px 12px;
  }

  .stock-mark-order-btn,
  .stock-cancel-order-btn {
    padding: 8px 12px;
  }

  .inventory-scroll-hint {
    padding: 8px 14px 10px;
  }

  .dark-mode-toggle {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
  }
}

/* ═══════════ PRINT STYLES (supplementary) ═══════════ */
@media print {

  .login-screen,
  .header-actions,
  .dark-mode-toggle,
  .log-btn,
  .user-management-btn,
  .logout-btn,
  .mar-actions,
  .floating-toolbox,
  .clear-sig-btn {
    display: none !important;
  }

  body {
    background: white;
  }

  .mar-paper {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
}

/* ═══════════ DASHBOARD STOCK NOTIFICATION ═══════════ */
#missed-dose-alerts-container {
  margin-bottom: 12px;
}

.missed-dose-notification {
  border-radius: 10px;
  border: 2px solid #d66a00;
  background: #fff4e8;
  padding: 14px 18px;
}

.missed-dose-notification.is-supervisor {
  border-color: #b45309;
  background: #fff1dd;
}

.missed-dose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.missed-dose-title {
  margin: 0;
  font-size: 15px;
  color: #263248;
}

.missed-dose-title strong {
  color: #9a3412;
}

.missed-dose-subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6f4b35;
}

.missed-dose-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  max-height: 156px;
  overflow-y: auto;
}

.missed-dose-list li {
  font-size: 12px;
  color: #3a465d;
  line-height: 1.4;
}

.missed-dose-item {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.missed-dose-item span {
  flex: 1;
}

.missed-dose-actions {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.missed-dose-sign-btn {
  border: 1px solid #0f4f9f;
  background: #1d6fd4;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  white-space: nowrap;
}

.missed-dose-sign-btn:hover {
  background: #185fb2;
}

.missed-dose-unlock-btn {
  border: 1px solid #c25800;
  background: #fff;
  color: #9a3412;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  white-space: nowrap;
}

.missed-dose-unlock-btn:disabled {
  border-color: #9ca3af;
  color: #6b7280;
  cursor: default;
  background: #f3f4f6;
}

.missed-dose-flag {
  color: #047857;
  font-style: normal;
  font-weight: 700;
}

.missed-dose-empty {
  color: #5d6c84;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.stock-notification {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 2px solid #e6a817;
  background: #fef9e7;
}

.stock-notification-critical {
  border-color: #e53e3e;
  background: #fff5f5;
}

.stock-notification-warning {
  border-color: #e6a817;
  background: #fef9e7;
}

.stock-notification-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e53e3e;
}

.stock-notification-icon svg {
  fill: #fff;
}

.stock-notification-warning .stock-notification-icon {
  background: #e6a817;
}

.stock-notification-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stock-notification-text strong {
  font-size: 15px;
  color: #263248;
}

.stock-notification-text span {
  font-size: 12px;
  color: #667894;
  font-weight: 600;
}

/* Blinking red animation for critical stock */
.blink-red {
  animation: blink-red-pulse 1s ease-in-out infinite;
}

@keyframes blink-red-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* View Full Report button inside notification */
.stock-view-report-btn {
  flex-shrink: 0;
  background: #263248;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.stock-view-report-btn:hover {
  background: #1a2332;
}

/* ═══════════ STOCK REPORT ROW HIGHLIGHTS ═══════════ */
.stock-row-critical {
  background: #fff5f5 !important;
}

.stock-row-critical td {
  color: #c53030 !important;
}

.stock-row-warning {
  background: #fffaf0 !important;
}

.stock-row-warning td {
  color: #c05621 !important;
}

/* Stock report action buttons */
.stock-mark-order-btn {
  background: #e53e3e;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.stock-mark-order-btn:hover {
  background: #c53030;
}

.stock-cancel-order-btn {
  background: #edf2f7;
  color: #2d3748;
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.stock-cancel-order-btn:hover {
  background: #e2e8f0;
  border-color: #a0aec0;
}

/* ═══════════ CLEAR SIGNATURES BUTTON ═══════════ */
.clear-sig-btn {
  background: #e53e3e !important;
  color: #fff !important;
  border: none;
  border-radius: 6px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 42px;
  transition: background 0.15s;
}

.clear-sig-btn:hover {
  background: #c53030 !important;
}

/* Dark Mode Toggle - REMOVED */
/* .dark-mode-toggle { display: none !important; } */