/* =========================================================================
   Iron Night — fixes layered after iron-night.css.
   Kept in its own file so the colour fixes below survive if iron-night.css
   is edited or replaced. Loaded after iron-night.css in the app, guest and
   shared-dashboard layouts.
   ========================================================================= */

/* 1. Headings inside white cards / modals are always ink-black.
      (iron-night.css makes headings white on the dark page; that rule out-ranks
      a plain `.card h3`, which made card titles white-on-white.) */
.in-content main .card h1,
.in-content main .card h2,
.in-content main .card h3,
.in-content main .card h4,
.in-content main .card h5,
.in-content main .card h6,
.in-content main .card .h1,
.in-content main .card .h2,
.in-content main .card .h3,
.in-content main .card .h4,
.in-content main .card .h5,
.in-content main .card .h6,
.in-content main .card .card-title,
.in-content main .modal-content h1,
.in-content main .modal-content h2,
.in-content main .modal-content h3,
.in-content main .modal-content h4,
.in-content main .modal-content h5,
.in-content main .modal-content h6,
body.in-shared .card h1,
body.in-shared .card h2,
body.in-shared .card h3,
body.in-shared .card h4,
body.in-shared .card h5,
body.in-shared .card h6,
body.in-guest .card h1,
body.in-guest .card h2,
body.in-guest .card h3,
body.in-guest .card h4,
body.in-guest .card h5,
body.in-guest .card h6 {
  color: #0B0D12 !important;
}
.in-content main .card .text-dark { color: #0B0D12 !important; }

/* 2. Secondary / muted text inside white cards stays grey, whatever colour
      secondary text uses on the dark page. */
.in-content main .card .text-secondary,
.in-content main .card .text-muted,
.in-content main .modal-content .text-secondary,
.in-content main .modal-content .text-muted,
body.in-shared .card .text-secondary,
body.in-shared .card .text-muted {
  color: #5B6270 !important;
}

/* 3. Calendar grid (calendar/partials/calendar.blade.php): soft rounded day
      cells, a ring on today, and dose "pills" instead of a plain bordered table. */
.calendar-table {
  border-collapse: separate;
  border-spacing: 6px;
  width: 100%;
  table-layout: fixed;
  --bs-table-bg: transparent;
}
.calendar-table > :not(caption) > * > * {
  border-width: 0;
  box-shadow: none;
  background-color: transparent;
}
.calendar-table thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #5B6270;
  padding: .25rem 0 .1rem;
}
.calendar-table tbody td {
  background-color: #F7F8FB;
  border-radius: 12px;
  padding: .55rem .6rem;
  vertical-align: top;
}
.calendar-table tbody td > .small.fw-semibold {
  color: #0B0D12;
}
.calendar-table tbody td.bg-light {
  background-color: #F7F8FB !important;
  opacity: .45;
}
.calendar-table tbody td.calendar-today {
  background-color: #fff;
  box-shadow: 0 0 0 2px #E11D48;
}
.calendar-table tbody td.calendar-today > .small.fw-semibold {
  color: #B4122F;
}
.calendar-table .calendar-item {
  margin-bottom: 3px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(225, 29, 72, .12);
  color: #9F1239;
  font-size: .78rem;
  font-weight: 600;
}
.calendar-table .calendar-item.text-secondary {
  padding-left: 0;
  padding-right: 0;
  background: none;
  font-weight: 400;
}

/* 4. Calendar feed cards (calendar/edit.blade.php): monospace link box with an
      accent Copy button, and numbered accent steps for Google / Outlook. */
.cal-feed-link .form-control {
  background: #F5F6F9;
  border: 1px solid #DDE0E8;
  border-radius: 10px 0 0 10px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .8rem;
  font-weight: 600;
  color: #3A4150;
  padding: .6rem .8rem;
}
.cal-feed-link .btn {
  border-radius: 0 10px 10px 0;
  font-weight: 700;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.cal-steps {
  list-style: none;
  counter-reset: calstep;
  padding-left: 0;
}
.cal-steps > li {
  counter-increment: calstep;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .6rem;
  min-height: 1.5rem;
  line-height: 1.5;
}
.cal-steps > li::before {
  content: counter(calstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #E11D48;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
}

/* 5. Injection sites: tile grid showing every site and when it was last used;
      the least recently used one is tinted. */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .6rem;
}
.site-tile {
  padding: .7rem .85rem;
  border-radius: 12px;
  background: #F7F8FB;
  border: 1px solid #E8EBF1;
}
.site-tile .site-name {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  color: #0B0D12;
}
.site-tile small {
  display: block;
  font-size: .75rem;
  color: #5B6270;
}
.site-tile.is-oldest {
  background: #FFF1F4;
  border-color: #FDC5D1;
}
.site-tile.is-oldest small { color: #9F1239; }

/* 6. Tables inside cards: small-caps headers on a fine rule, soft row dividers,
      no striping. */
.in-content main .card .table:not(.calendar-table) > :not(caption) > * > * {
  background-color: transparent;
  box-shadow: none;
}
.in-content main .card .table:not(.calendar-table) thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5B6270;
  border-bottom: 1px solid #E3E6EE;
  white-space: nowrap;
}
.in-content main .card .table:not(.calendar-table) tbody td {
  border-bottom: 1px solid #F0F1F5;
  color: #1D2230;
}
.in-content main .card .table:not(.calendar-table) tbody tr:last-child td {
  border-bottom: 0;
}

/* 7. Pill badges (templates, protocol chips): soft grey pill with a fine border. */
.in-content main .card .badge.text-bg-light {
  background-color: #F5F6F9 !important;
  border: 1px solid #DDE0E8 !important;
  color: #4A5160 !important;
}

/* 8. Primary buttons: the rose glow the homepage previews show. */
.in-content main .card .btn-primary {
  box-shadow: 0 0 14px rgba(225, 29, 72, .35);
}

/* 9. Forms inside cards: bolder labels, softer corners. */
.in-content main .card .form-label,
.in-content main .card label.form-label {
  font-weight: 600;
  color: #0B0D12;
}
.in-content main .card .form-control,
.in-content main .card .form-select {
  border-radius: 8px;
  border-color: #CED4DA;
}

/* 10. Import: type options as selectable cards, and a dashed drop-zone file box. */
.in-content main .card .form-check.border.rounded {
  border-color: #DDE0E8 !important;
  border-radius: 12px !important;
  background: #FAFBFD;
}
.in-content main .card .form-check.border.rounded:has(.form-check-input:checked) {
  border-color: #E11D48 !important;
  background: #FFF1F4;
}
.in-content main .card input.form-control[type="file"] {
  border: 1.5px dashed #C9CEDA;
  border-radius: 11px;
  background: #FAFBFD;
  padding: .9rem .8rem;
  color: #5B6270;
}
.in-content main .card input.form-control[type="file"]:hover {
  border-color: #E11D48;
}

/* 11. Outline buttons in cards (export CSVs, provider links, etc.). */
.in-content main .card .btn-outline-secondary {
  background: #fff;
  border-color: #ADB5BD;
  color: #495057;
}
.in-content main .card .btn-outline-secondary:hover {
  border-color: #E11D48;
  color: #B4122F;
  background: #FFF1F4;
}
.in-content main .card .btn-group .btn-outline-secondary { border-radius: 8px; }
.in-content main .card .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.in-content main .card .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* 12. Dashboard: accent time-group headings, rounded rose timeline bars. */
.in-content main .card li.text-uppercase.text-secondary {
  color: #B4122F !important;
  font-weight: 700;
}
.tl-track { border-radius: 4px !important; }
.tl-bar { border-radius: 4px !important; transform-origin: 0 50%; }
.tl-dates { color: #B4122F !important; }
.in-content main .card .border-bottom { border-color: #F0F1F5 !important; }

/* 13. Tabs in cards (weekly totals): rose underline on the active tab. */
.in-content main .card .nav-tabs { border-bottom-color: #E3E6EE; }
.in-content main .card .nav-tabs .nav-link {
  color: #5B6270;
  font-weight: 600;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
}
.in-content main .card .nav-tabs .nav-link.active {
  color: #B4122F;
  border-bottom-color: #E11D48;
  background: none;
}

/* 14. Providers: logo placeholder as a soft tile. */
.in-content main .card .bg-light.border.rounded {
  background: #F0F1F5 !important;
  border-color: transparent !important;
  border-radius: 12px !important;
}

/* 15. Injection site picker on the cycle page: radio tiles, rose when selected. */
.site-pick .site-tile { cursor: pointer; margin: 0; }
.site-pick .site-tile:hover { border-color: #E11D48; }
.site-pick .site-tile:has(input:checked) {
  background: #FFF1F4;
  border-color: #E11D48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .15);
}
.site-pick .site-tile:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(225, 29, 72, .35); }
.site-pick { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.site-chip {
  display: inline-block;
  padding: .1rem .6rem;
  border-radius: 20px;
  background: #F5F6F9;
  border: 1px solid #DDE0E8;
  color: #4A5160;
  font-weight: 600;
  white-space: nowrap;
}

/* 16. Bloodwork: marker chart tiles and neutral change pills. */
.marker-tile {
  padding: .9rem 1rem;
  border-radius: 14px;
  background: #F7F8FB;
  border: 1px solid #E8EBF1;
}
.delta-pill {
  display: inline-block;
  padding: 0 .55rem;
  border-radius: 20px;
  background: #F5F6F9;
  border: 1px solid #DDE0E8;
  color: #4A5160;
  font-weight: 600;
  white-space: nowrap;
}

/* 17. Detail lists (cycle details): label left, value right, soft dividers. */
.detail-list { margin: 0; }
.detail-list dt,
.detail-list dd {
  display: inline-block;
  margin: 0;
  padding: .45rem 0;
  border-bottom: 1px solid #F0F1F5;
  vertical-align: top;
}
.detail-list dt { width: 45%; font-weight: 500; }
.detail-list dd { width: 55%; text-align: right; font-weight: 600; color: #0B0D12; }
.detail-list dd:last-child,
.detail-list dt:nth-last-child(2) { border-bottom: 0; }

/* 18. Protocol table time-slot rows (AM / PM / Any time): rose caption row. */
.in-content main .card .table td.slot-row {
  background: #FFF1F4 !important;
  color: #B4122F !important;
  border-bottom: 0 !important;
  font-weight: 700;
}

/* 19. Status pills (cycle list). */
.status-pill {
  display: inline-block;
  padding: .1rem .6rem;
  border-radius: 20px;
  background: #F5F6F9;
  border: 1px solid #DDE0E8;
  color: #4A5160;
  font-weight: 600;
  white-space: nowrap;
}
.status-pill.is-active {
  background: #FFE4EA;
  border-color: #FDC5D1;
  color: #9F1239;
}

/* 20. Table rows lift slightly on hover. */
.in-content main .card .table:not(.calendar-table) tbody tr:hover td { background-color: #FAFBFD; }

/* 21. Match the homepage previews: helper text inside cards is rose, not grey;
       links and row actions are rose; table body cells keep their grey. */
.in-content main .card p.text-secondary,
.in-content main .card p.small.text-secondary,
.in-content main .card .form-text,
.in-content main .card .text-accent {
  color: #B4122F !important;
}
.in-content main .card .btn-link,
.in-content main .card .btn-link.text-danger {
  color: #B4122F !important;
  font-weight: 600;
}
.in-content main .card .btn-link:hover { color: #E11D48 !important; }

/* Cycle details: small rose label above a bold value. */
.detail-list dt,
.detail-list dd { display: block; width: auto; border-bottom: 0; text-align: left; padding: 0; }
.detail-list dt {
  color: #B4122F !important;
  font-size: .75rem;
  font-weight: 600;
  margin-top: .75rem;
}
.detail-list dt:first-child { margin-top: 0; }
.detail-list dd { font-weight: 700; color: #0B0D12; }
.in-content main .card .detail-list dt.text-secondary { color: #B4122F !important; }

/* 23. Export page: label + rose Download link rows, outline-rose buttons. */
.dl-list { border-top: 1px solid #F0F1F5; }
.dl-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 0; border-bottom: 1px solid #F0F1F5;
  font-size: .9rem; font-weight: 600; color: #0B0D12; text-decoration: none;
}
.dl-row:last-child { border-bottom: 0; }
.dl-row .dl-go { color: #B4122F; font-weight: 600; font-size: .85rem; }
.dl-row:hover { background: #FAFBFD; color: #0B0D12; }
.dl-row:hover .dl-go { color: #E11D48; text-decoration: underline; }
.btn-line {
  background: #fff; color: #B4122F; border: 1.5px solid #E11D48; font-weight: 600;
}
.btn-line:hover { background: #FFE4EA; color: #9F1239; border-color: #E11D48; }

/* 24. Dashboard Today / Tomorrow redesign (grouped panels, dose pills, progress). */
.dose-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dose-head h3 { font-size: 1.35rem !important; }
.in-content main .card .dose-head p.small.text-secondary { color: #6B7280 !important; font-size: .8rem; }
.dose-ring {
  --p: 0; flex: none; position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(#E11D48 calc(var(--p) * 1%), #F0F1F5 0); display: grid; place-items: center;
}
.dose-ring::after { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 50%; }
.dose-ring b { position: relative; z-index: 1; font-size: .68rem; color: #0B0D12; }
.dose-bar { height: 5px; border-radius: 5px; background: #F0F1F5; margin: 10px 0 10px; overflow: hidden; }
.dose-bar u { display: block; height: 100%; background: linear-gradient(90deg, #E11D48, #FB7185); border-radius: 6px; }
.dose-bar.is-spacer { background: transparent; }
.dose-panel { background: #F7F8FB; border-radius: 12px; padding: 3px 12px 4px; margin-bottom: 6px; }
.dose-gh {
  display: flex; align-items: center; gap: 7px; padding: 4px 0 0;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B4122F;
}
.dose-gh svg { width: 15px; height: 15px; stroke: #E11D48; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dose-gh span { margin-left: auto; color: #8A92A3; letter-spacing: 0; font-weight: 600; text-transform: uppercase; }
.dose-r { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-top: 1px solid #E9ECF2; }
.dose-gh + .dose-r { border-top: 0; }
.dose-r .form-check-input {
  width: 17px; height: 17px; margin: 0; flex: none; border: 1.6px solid #C5CAD6; border-radius: 6px; cursor: pointer;
}
.dose-r .form-check-input:checked {
  background-color: #E11D48; border-color: #E11D48;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.dose-r .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(225,29,72,.2); border-color: #E11D48; }
.dose-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E11D48; flex: none; }
.dose-dot.is-sup { background: #C5CAD6; }
.dose-n { flex: 1; font-weight: 600; font-size: .88rem; color: #0B0D12; min-width: 0; }
.dose-n.is-sup { font-weight: 500; color: #5B6270; }
.dose-tag { margin-left: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A92A3; }
.dose-pill { font-weight: 700; font-size: .74rem; background: #fff; border: 1px solid #E3E6EE; border-radius: 20px; padding: 1px 9px; color: #333A48; white-space: nowrap; line-height: 1.5; }
.dose-r.is-missed .dose-n { text-decoration: line-through; opacity: .6; }
.dose-r.is-missed .dose-tag { text-decoration: none; display: inline-block; }
.dose-legend { display: flex; gap: 14px; font-size: .68rem; color: #8A92A3; padding: 0 4px; }
.dose-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* 25. Protocol timeline redesign: shared axis, grouped rows, today marker. */
.tl2 { --grid: none; --today: 0%; margin-bottom: 1.5rem; }
.tl2:last-of-type { margin-bottom: .25rem; }
.tl2-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tl2-name { font-weight: 700; font-size: .95rem; color: #0B0D12; }
.tl2-range { font-size: .75rem; font-weight: 600; color: #B4122F; }
.tl2-axis, .tl2-row { display: grid; grid-template-columns: minmax(8.5rem, 13rem) 1fr 8.2rem; column-gap: 12px; align-items: center; }
.tl2-axis-track { position: relative; grid-column: 2; height: 22px; }
.tl2-axis-track span { position: absolute; transform: translateX(-50%); bottom: 2px; font-size: .64rem; font-weight: 600; color: #8A92A3; white-space: nowrap; }
.tl2-axis-track b {
  position: absolute; transform: translateX(-50%); top: 0; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  background: #E11D48; color: #fff; padding: 1px 6px; border-radius: 10px; z-index: 2;
}
.tl2-group {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B4122F;
  margin: .6rem 0 .1rem; padding-top: .35rem; border-top: 1px solid #F0F1F5;
}
.tl2-row { min-height: 30px; }
.tl2-label { min-width: 0; line-height: 1.15; padding: 3px 0; }
.tl2-label b { display: block; font-size: .84rem; font-weight: 600; color: #0B0D12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl2-label small { display: block; font-size: .7rem; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl2-track {
  position: relative; align-self: stretch; min-height: 30px;
  background: var(--grid); background-repeat: no-repeat;
}
.tl2-track::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--today); width: 2px; margin-left: -1px; background: #E11D48; opacity: .55; z-index: 1; }
.tl2-bar { position: absolute; top: 8px; bottom: 8px; border-radius: 99px; z-index: 0; min-width: 6px; }
.tl2-bar.is-primary { background: linear-gradient(90deg, #E11D48, #F43F5E); box-shadow: 0 3px 10px -4px rgba(225,29,72,.7); }
.tl2-bar.is-sup { background: #B8BFCC; }
.tl2-bar.is-ongoing { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tl2-row.is-ended .tl2-bar { opacity: .45; }
.tl2-row.is-ended .tl2-label b { color: #6B7280; }
.tl2-row.is-upcoming .tl2-bar { opacity: .6; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); }
.tl2-dates { font-size: .72rem; font-weight: 600; color: #333A48; text-align: right; white-space: nowrap; }
.tl2-key { display: flex; gap: 14px; font-size: .72rem; color: #6B7280; }
.tl2-key span { display: inline-flex; align-items: center; gap: 6px; }
.tl2-key i { display: inline-block; width: 18px; height: 8px; border-radius: 99px; }
.tl2-key .k-primary { background: #E11D48; } .tl2-key .k-sup { background: #B8BFCC; }
.tl2-key .k-today { width: 2px; height: 12px; border-radius: 0; background: #E11D48; opacity: .7; }
@media (max-width: 767px) {
  .tl2-axis, .tl2-row { grid-template-columns: 7rem 1fr; }
  .tl2-dates { display: none; }
}

/* 26. Modal styling (weekly totals popup) */
.modal-content { border: 0; border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 60px rgba(225,29,72,.18); }
.modal-header { border-bottom: 1px solid #F0F1F5; padding: 20px 24px 14px; align-items: flex-start; }
.modal-title { font-family: var(--in-font-display, 'Barlow Condensed'); font-weight: 700; font-size: 1.35rem; letter-spacing: .05em; text-transform: uppercase; color: #0B0D12; }
.modal-header .text-secondary { color: #B4122F !important; }
.modal-body { padding: 16px 24px 22px; }
.modal-body thead th { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #5B6270; font-weight: 700; border-bottom: 1px solid #E3E6EE; }
.modal-body .text-secondary { color: #5B6270; }
.modal-body p.small.text-secondary { color: #B4122F; }
.modal-content { color: #0B0D12; }
.modal { z-index: 1060; } .modal-backdrop { z-index: 1055; }

/* 27. Expanded chart popup */
.ce-chart { position: relative; height: 380px; }
.ce-events-head { margin-top: 18px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B4122F; }
.ce-events { max-height: 220px; overflow-y: auto; margin-top: 6px; font-size: .85rem; color: #333A48; border-top: 1px solid #F0F1F5; }
.ce-day { padding: 8px 0; border-bottom: 1px solid #F0F1F5; }
.ce-day b { display: block; font-size: .78rem; color: #0B0D12; margin-bottom: 2px; }
.modal-xl .btn-group .btn.active { background: #E11D48; border-color: #E11D48; color: #fff; }

/* 28. Mobile pass (phones, <= 640px): tables become stacked cards, calendar
      week view becomes a day-by-day list, month view becomes a compact grid. */
@media (max-width: 640px) {
  /* --- generic tables -> cards (labels added by public/js/mobile-tables.js) --- */
  .in-content main .table-responsive:has(> table.mt-cards) { overflow: visible; }
  .in-content main table.mt-cards,
  .in-content main table.mt-cards tbody,
  .in-content main table.mt-cards tr,
  .in-content main table.mt-cards td { display: block; width: 100%; }
  .in-content main table.mt-cards thead { display: none; }
  .in-content main table.mt-cards tr {
    border: 1px solid #E3E6EE; border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; background: #FAFBFD;
  }
  .in-content main .card table.mt-cards tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    border: 0; padding: 5px 0; text-align: right; min-width: 0; overflow-wrap: anywhere;
  }
  .in-content main table.mt-cards td[data-label]::before {
    content: attr(data-label); flex: none; max-width: 42%; text-align: left;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5B6270;
  }
  .in-content main table.mt-cards td:not([data-label]) { display: block; text-align: left; }
  .in-content main table.mt-cards td:empty { display: none; }
  .in-content main table.mt-cards td.text-end form,
  .in-content main table.mt-cards td.text-end a { display: inline-block; }
  .in-content main table.mt-cards td .btn { white-space: nowrap; }

  /* --- calendar: week view = one row per day --- */
  .calendar-table.cal-week, .calendar-table.cal-week tbody, .calendar-table.cal-week tr,
  .calendar-table.cal-week td { display: block; width: 100% !important; }
  .calendar-table.cal-week { border-spacing: 0; }
  .calendar-table.cal-week thead { display: none; }
  .calendar-table.cal-week td { height: auto !important; margin-bottom: 8px; padding: .7rem .8rem; }
  .calendar-table.cal-week td > .small.fw-semibold { font-size: .9rem !important; margin-bottom: .4rem !important; }
  .calendar-table.cal-week td::before { content: attr(data-dow); display: block; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B4122F; }
  .calendar-table.cal-week .calendar-item { font-size: .86rem; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; padding: 5px 9px; }
  .calendar-table.cal-week .calendar-item .form-check-input { width: 1.15rem; height: 1.15rem; margin-top: 0; }

  /* --- calendar: month view = compact grid, items shown as small bars --- */
  .calendar-table.cal-month { border-spacing: 3px; }
  .calendar-table.cal-month tbody td { padding: .3rem .25rem; height: auto !important; min-height: 3.2rem; border-radius: 8px; }
  .calendar-table.cal-month tbody td > .small.fw-semibold { font-size: .78rem !important; text-align: center; }
  .calendar-table.cal-month .calendar-item {
    font-size: 0 !important; height: 5px; padding: 0; margin: 2px 2px 0; border-radius: 99px; background: #E11D48;
  }
  .calendar-table.cal-month .calendar-item.text-secondary { background: #B8BFCC; }

  .calendar-table.cal-month tbody td { cursor: pointer; }
  .calendar-table.cal-month tbody td.is-sel { background: #fff; box-shadow: 0 0 0 2px #E11D48; }
  .cal-detail { margin-top: 12px; padding: 12px 14px; border: 1px solid #E3E6EE; border-radius: 14px; background: #FAFBFD; }
  .cal-detail-h { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B4122F; margin-bottom: 6px; }
  .cal-detail-i { font-size: .9rem; font-weight: 600; color: #9F1239; background: rgba(225,29,72,.1); border-radius: 8px; padding: 6px 10px; margin-bottom: 5px; }
  .cal-detail-i.is-sup { color: #5B6270; background: #EEF0F5; font-style: italic; font-weight: 400; }
  .cal-detail-i.cal-none { color: #5B6270; background: none; font-weight: 400; padding-left: 0; }
}

/* 29. Tinted row panels (option B): table rows inside cards become soft rose panels
      with a rose edge, like the dashboard's dose panels. Opt out with class "no-panels". */
.in-content main .card .table:not(.calendar-table):not(.no-panels) { border-collapse: separate; border-spacing: 0 6px; }
.in-content main .card .table:not(.calendar-table):not(.no-panels) thead th { border-bottom: 0; color: #9F1239; }
.in-content main .card .table:not(.calendar-table):not(.no-panels) > tbody > tr > td {
  background-color: #FFF1F4; border-bottom: 0; padding-top: .6rem; padding-bottom: .6rem;
}
.in-content main .card .table:not(.calendar-table):not(.no-panels) > tbody > tr > td:first-child {
  border-left: 5px solid #E11D48; border-radius: 12px 0 0 12px;
}
.in-content main .card .table:not(.calendar-table):not(.no-panels) > tbody > tr > td:last-child { border-radius: 0 12px 12px 0; }
.in-content main .card .table:not(.calendar-table):not(.no-panels) > tbody > tr > td:only-child { border-radius: 12px; }
.in-content main .card .table:not(.calendar-table):not(.no-panels) > tbody > tr:hover > td { background-color: #FFE4EA; }
.in-content main .card .table:not(.calendar-table):not(.no-panels) > tbody > tr:has(> td[colspan]) > td {
  background-color: transparent; border-left: 0; border-radius: 0;
}
@media (max-width: 640px) {
  .in-content main table.mt-cards { border-spacing: 0; }
  .in-content main table.mt-cards > tbody > tr {
    background: #FFF1F4; border: 1px solid #F3C4D0; border-left: 5px solid #E11D48; border-radius: 14px;
  }
  .in-content main .card table.mt-cards > tbody > tr > td,
  .in-content main .card table.mt-cards > tbody > tr > td:first-child,
  .in-content main .card table.mt-cards > tbody > tr > td:last-child,
  .in-content main .card table.mt-cards > tbody > tr:hover > td {
    background-color: transparent !important; border: 0 !important; border-radius: 0 !important; padding-top: 5px; padding-bottom: 5px;
  }
  .in-content main table.mt-cards td[data-label]::before { color: #9F1239; }
}

/* 30. Option B list rows (Bloodwork panels, Cycles): rose-tinted panels with an edge,
      title chip, progress ring and pill actions. */
.rp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rp-title { display: flex; align-items: center; gap: 10px; }
.rp-title h3 { margin: 0; font-family: var(--in-font-display, 'Barlow Condensed'); font-weight: 700; font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; color: #0B0D12; }
.rp-chip { width: 34px; height: 34px; border-radius: 10px; background: #E11D48; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rp-list { display: flex; flex-direction: column; gap: 8px; }
.rp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #FFF1F4; border-radius: 14px; padding: 12px 14px 12px 0; overflow: hidden; }
.rp-edge { align-self: stretch; width: 5px; border-radius: 0 99px 99px 0; background: #E11D48; margin: -12px 0 -12px 0; flex: none; }
.rp-main { flex: 1 1 140px; min-width: 0; }
.rp-name { font-weight: 700; font-size: 1rem; color: #0B0D12; overflow-wrap: anywhere; }
.rp-sub { font-size: .78rem; font-weight: 600; color: #B4122F; }
.rp-ring { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(#E11D48 calc(var(--p, 0) * 1%), #F3C4D0 0); position: relative; }
.rp-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #FFF1F4; }
.rp-ring span { position: relative; font-size: .72rem; font-weight: 700; color: #9F1239; }
.rp-ring.is-open { background: #E11D48; }
.rp-ring.is-open::before { background: #FFF1F4; inset: 3px; }
.rp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rp-actions form { margin: 0; }
.rp-btn { display: inline-block; padding: 6px 14px; border-radius: 99px; border: 1px solid #F3C4D0; background: #fff; color: #9F1239;
  font-size: .8rem; font-weight: 700; text-decoration: none; line-height: 1.2; cursor: pointer; }
.rp-btn:hover { background: #FFE4EA; color: #881337; }
.rp-btn.is-primary { background: #E11D48; border-color: #E11D48; color: #fff; }
.rp-btn.is-primary:hover { background: #BE123C; color: #fff; }
.rp-btn.is-danger { color: #5B6270; border-color: #E3E6EE; }
.rp-row .status-pill { flex: none; }
@media (max-width: 640px) {
  .rp-title h3 { font-size: 1.3rem; }
  .rp-actions { margin-left: 0; width: 100%; padding-left: 17px; }
  .rp-btn { padding: 8px 16px; }
}
.in-content main .card a.rp-btn { color: #9F1239; text-decoration: none; }
.in-content main .card a.rp-btn.is-primary { color: #fff; }
.in-content main .card a.rp-btn.is-primary:hover { color: #fff; }
.in-content main .card .rp-btn.is-danger { color: #5B6270; }

/* ---- match the approved mockup (option B) ---- */
.rp-links { display: flex; gap: 14px; }
.in-content main .card .rp-links a { font-size: .82rem; font-weight: 700; color: #B4122F; text-decoration: none; }
.rp-marker { padding: 10px 14px 10px 0; flex-wrap: nowrap; }
.rp-marker .rp-edge { width: 6px; height: 30px; align-self: center; margin: 0 0 0 0; border-radius: 99px; background: #E11D48; margin-left: 12px; }
.rp-marker .rp-name { font-weight: 600; font-size: .95rem; }
.rp-range { margin-left: 8px; color: #5B6270; font-weight: 500; }
.rp-val { font-weight: 700; font-size: 1.05rem; color: #0B0D12; white-space: nowrap; text-align: right; }
.rp-val small { font-size: .72rem; font-weight: 500; color: #5B6270; }
.rp-delta { flex: none; min-width: 52px; text-align: center; background: #fff; border: 1px solid #F3C4D0; color: #9F1239; font-size: .78rem; font-weight: 700; border-radius: 99px; padding: 3px 10px; }
.rp-delta.is-none { border-color: #E3E6EE; color: #5B6270; }
/* cycles: grey panel + ring, plain text links underneath */
.rp-cycle { background: #F7F8FB; padding: 12px 14px; }
.rp-cycle .rp-ring::before { background: #F7F8FB; }
.rp-cycle .rp-sub { color: #5B6270; font-weight: 500; }
.rp-cycle .status-pill { margin-left: auto; }
.rp-cycle .rp-actions { margin-left: 0; flex-basis: 100%; }
.rp-list:has(.rp-cycle) { gap: 6px; }
.rp-actions.rp-text { gap: 18px; }
.rp-text .rp-btn, .in-content main .card .rp-text a.rp-btn, .in-content main .card .rp-text .rp-btn.is-danger {
  background: none !important; border: 0 !important; padding: 2px 0; color: #9F1239 !important; font-size: .82rem; }
.rp-text .rp-btn.is-danger { color: #9F1239 !important; }
.rp-marker .rp-main { flex: 1 1 110px; }
.rp-cycle .status-pill { font-size: .72rem; padding: 3px 11px; }
@media (max-width: 640px) {
  .rp-marker { padding: 9px 12px 9px 0; gap: 10px; }
  .rp-marker .rp-edge { margin-left: 10px; }
  .rp-actions.rp-text { padding-left: 0; }
}

/* 31. Card headings everywhere get the rose icon chip (set by mobile-tables.js on every
      page except the dashboard, which has its own card designs). */
.in-content main.chips .card h3.h6 { display: flex; align-items: center; gap: 10px; }
.in-content main.chips .card h3.h6:not(.rp-title h3)::before {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: #E11D48 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6.5%206.5v11M17.5%206.5v11M3.5%209v6M20.5%209v6M6.5%2012h11'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.in-content main.chips .card .rp-title h3::before { content: none; }
.in-content main.chips .card h3.h6 { font-size: 1.3rem; }

/* 32. Month calendar day details: bottom sheet pinned to the screen so it is always seen. */
.cal-sheet { display: none; }
@media (max-width: 640px) {
  .cal-sheet.is-open {
    display: block; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 1070; max-height: 46vh; overflow-y: auto;
    background: #fff; border-radius: 20px; padding: 14px 16px 16px; box-shadow: 0 -6px 40px rgba(0,0,0,.45), 0 0 0 2px #E11D48;
  }
  .cal-sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .cal-sheet .cal-detail-h { margin: 0; font-size: .85rem; }
  .cal-sheet-x { border: 0; background: #FFE4EA; color: #9F1239; width: 34px; height: 34px; border-radius: 50%; font-size: 1.4rem; line-height: 1; }
}

/* ---- Readable links on the dark public pages (home, blog, affiliates) ----
   Dark red on near-black was unreadable. Links on dark backgrounds are a light rose, underlined,
   and go white on hover. Links inside white cards keep the darker red. */
.pub-main a:not(.btn):not(.blog-tag):not(.page-link),
.lp-sec a:not(.btn):not(.page-link) { color: #FF8A9B; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.pub-main a:not(.btn):not(.blog-tag):not(.page-link):hover,
.pub-main a:not(.btn):not(.blog-tag):not(.page-link):focus-visible,
.lp-sec a:not(.btn):not(.page-link):hover,
.lp-sec a:not(.btn):not(.page-link):focus-visible { color: #fff; }
.pub-main .card a:not(.btn):not(.page-link),
.lp-sec .card a:not(.btn):not(.page-link) { color: #B4122F; }
.pub-main .card a:not(.btn):not(.page-link):hover,
.lp-sec .card a:not(.btn):not(.page-link):hover { color: #E11D48; }
.pub-main .text-secondary, .pub-main .text-muted, .pub-main .small.text-secondary { color: #C5CAD6 !important; }
.pub-main .card .text-secondary, .pub-main .card .text-muted { color: #5B6270 !important; }
.pub-main nav p, .pub-main nav .small { color: #C5CAD6; }

/* Pagination: red, never Bootstrap blue. */
.pagination {
  --bs-pagination-color: #B4122F;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: #E11D48;
  --bs-pagination-hover-border-color: #E11D48;
  --bs-pagination-focus-color: #B4122F;
  --bs-pagination-focus-bg: #FFE4EA;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(225, 29, 72, .3);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #E11D48;
  --bs-pagination-active-border-color: #E11D48;
}


/* Header buttons (Feature request / Report a bug / Refer a friend).
   Wide screens: top-right of the page header. Narrower screens: a normal row above the
   page title, so they never sit on top of the date or the heading. */
.in-hdr-actions { position: absolute; top: .9rem; right: 1.25rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.in-hdr-actions .btn { white-space: nowrap; }
@media (max-width: 1199.98px) {
  .in-hdr-actions { position: static; justify-content: flex-start; margin: 0 0 1rem; }
}


/* Sidebar brand now reads "BodyBuilding / Tracker.com": a touch smaller so the longer word fits the menu. */
.in-sidebar .in-brand-text { font-size: 19px; letter-spacing: 0.04em; line-height: 1; }