/* ==========================================================================
   Keen Portal - Custom Stylesheet
   Extracted from backend.redesign.pages.home.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dashboard Shell & Layout
   -------------------------------------------------------------------------- */
.dashboard-root {
  position: relative;
  width: 100%;
  /* min-width: 1440px; */
  /* height: 100vh; */
  min-height: 100%;
  display: flex;
  background: #ffffff;
  overflow-x: hidden;
}

.dashboard-sidebar {
  width: 248px;
  flex: none;
  border-right: 1px solid rgba(31, 25, 21, 0.1);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 8px;
  background: #ffffff;
  min-height: 100vh;
}

.dashboard-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-topbar {
  height: 64px;
  flex: none;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: #ffffff;
}

.dashboard-content {
  padding: 26px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Site-wide attention banners (keen-attention-banners.blade.php) - the new
   UI's equivalent of the old layout's Bootstrap alert-warning strips
   (app.blade.php), redesigned to match this theme instead of reusing the
   boxy yellow Bootstrap look. Sits as the first child of .dashboard-content
   (its own flex gap:20px already spaces it from whatever page content
   follows, no extra margin needed here). Orange/warning tint throughout -
   all 3 real scenarios this drives are "needs your action" states, same
   color language as BOOKING_CANCELLED/DOCTOR_CHAT elsewhere in this theme. */
.keen-attention-banners {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.keen-attention-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff6ee;
  border: 1px solid rgba(245, 124, 0, 0.18);
}

.keen-attention-banner-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #ffe4cc;
  color: #f57c00;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.keen-attention-banner-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.keen-attention-banner-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.keen-attention-banner-desc {
  font-size: 13px;
  line-height: 1.45;
  color: #6a5a4a;
}

.keen-attention-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.keen-attention-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: #f57c00;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid #f57c00;
  cursor: pointer;
}
.keen-attention-banner-cta:hover {
  background: #d96c00;
  border-color: #d96c00;
  color: #ffffff;
}

.keen-attention-banner-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #9a8a78;
  cursor: pointer;
  flex: none;
  font-size: 18px;
  line-height: 1;
}
.keen-attention-banner-dismiss:hover {
  background: rgba(245, 124, 0, 0.12);
  color: #1f1915;
}

@media (max-width: 767.98px) {
  .keen-attention-banner {
    flex-wrap: wrap;
    padding: 14px;
  }
  .keen-attention-banner-actions {
    width: 100%;
    justify-content: flex-start;
    padding-left: 52px;
  }
}

/* --------------------------------------------------------------------------
   2. Sidebar Navigation & Components
   -------------------------------------------------------------------------- */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 18px;
}

.sidebar-logo {
  display: block;
}

.sidebar-toggle-icon {
  display: block;
  flex: none;
  color: #7d7873;
  cursor: pointer;
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7d7873;
  padding: 6px 14px 4px;
}

.sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-nav-item {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.sidebar-navitem,
a.sidebar-navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  /* height: 44px; */
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  color: #1f1915;
  text-decoration: none;
  width: 100%;
  /* font-weight: 600; */
}

a.sidebar-navitem:hover {
  text-decoration: none;
  color: #1f1915;
}

.sidebar-navitem.on,
a.sidebar-navitem.on {
  background: #4a6aff;
  color: #fff;
}

a.sidebar-navitem.on:hover {
  color: #fff;
}

.sidebar-nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff6b35;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sidebar-divider-spacer {
  height: 12px;
}

.sidebar-card {
  margin-top: auto;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

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

.sidebar-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7d7873;
}

.sidebar-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  font-size: 13px;
  line-height: 1.3;
  color: #1f1915;
  border-top: 1px solid rgba(31, 25, 21, 0.1);
}

.sidebar-card-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #4a6aff;
  padding-top: 4px;
}
.modal-custom {
  max-width: 540px;
}
.sidebar-card-button {
  height: 36px;
  border-radius: 10px;
  background: #eaeeff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3a56db;
  margin-top: 4px;
}

/* Mobile-only sidebar elements (hidden on desktop & tablet) */
.sidebar-mobile-section-title,
.sidebar-mobile-support-card,
.sidebar-mobile-signout {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Topbar Header Components
   -------------------------------------------------------------------------- */
.topbar-search {
  display: block;
  height: 40px;
  /* Stretches to fill the row instead of the template's fixed 320px -
     .dashboard-topbar is flex/space-between with only this and
     .topbar-actions as real children on desktop, so flex:1 here claims
     all the space between the logo and the icon/avatar cluster rather
     than leaving it empty. margin-right keeps it off the actions.
     !important because the template has its own fixed-width override at
     the ~1024px tablet breakpoint (width: 220px) that would otherwise win
     there by source order - this keeps it full-width at every size the
     search bar is actually shown at (it's hidden entirely below ~768px,
     untouched, unrelated to width). */
  width: auto !important;
  flex: 1 1 auto !important;
  margin-right: 24px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 14px 0 38px;
  color: #1f1915;
  font-size: 14px;
  font-family: inherit;
  background-color: #ffffff;
  background-image: url("../images/icons/icon-search-muted.svg");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px 18px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.topbar-search::placeholder {
  color: #7d7873;
  opacity: 1;
}

.topbar-search:focus {
  border-color: #4a6aff;
  box-shadow: 0 0 0 3px rgba(74, 106, 255, 0.15);
}

/* Search wrapper - now the direct flex child of .dashboard-topbar instead
   of the input itself (needed to host the results dropdown panel next to
   it), so it takes over the same flex:1-claims-the-row role; .topbar-search
   keeps its own existing `flex: 1 1 auto !important` rule above, which is
   meaningful again now that it's a flex child of THIS wrapper. .dropdown
   (Bootstrap base class, already on this element) supplies position:relative
   for the panel to anchor to, same as .topbar-notif-menu/.topbar-user-menu. */
.topbar-search-menu {
  display: flex;
  flex: 1 1 auto;
}

.keen-search-panel {
  left: 0;
  right: auto;
  min-width: 100%;
  width: 420px;
  max-width: min(480px, 90vw);
  max-height: 70vh;
  overflow-y: auto;
}

.keen-search-category {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a968f;
}

.keen-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.keen-search-row:hover,
.keen-search-row.is-active {
  background: #f8f6f1;
}

.keen-search-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #eaeeff;
  color: #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.keen-search-row-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.keen-search-row-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1f1915;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.keen-search-row-subtitle {
  font-size: 12px;
  color: #9a968f;
}

.keen-search-empty {
  padding: 16px 10px;
  text-align: center;
  font-size: 13px;
  color: #9a968f;
}

.keen-search-divider {
  height: 1px;
  background: rgba(31, 25, 21, 0.08);
  margin: 6px 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1f1915;
}

.topbar-badge-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b35;
  border: 2px solid #fff;
}

/* --------------------------------------------------------------------------
   User Dropdown Menu
   -------------------------------------------------------------------------- */
.topbar-user-menu {
  position: relative;
  display: inline-block;
}

.topbar-user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  transition: background-color 0.15s ease;
  user-select: none;
}

/* .topbar-user-trigger:hover,
.topbar-user-trigger:focus-visible,
.topbar-user-menu.show .topbar-user-trigger {
  background-color: #f8f6f1;
} */

.topbar-dropdown-chevron {
  transition: transform 0.2s ease;
}

.topbar-user-menu.show .topbar-dropdown-chevron,
.topbar-user-trigger[aria-expanded="true"] .topbar-dropdown-chevron {
  transform: rotate(180deg);
}

.topbar-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1050;
  min-width: 220px;
  margin-top: 8px !important;
  padding: 8px;
  border: 1px solid rgba(31, 25, 21, 0.1);
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 12px 36px rgba(31, 25, 21, 0.12),
    0 2px 8px rgba(31, 25, 21, 0.04);
  list-style: none;
}

.topbar-dropdown-menu.show,
.topbar-user-menu.show .topbar-dropdown-menu {
  display: block;
}

.topbar-dropdown-menu .dropdown-header {
  padding: 6px 12px 10px;
}

.dropdown-user-name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #1f1915;
  line-height: 1.2;
}

.dropdown-user-email {
  display: block;
  font-size: 12px;
  color: #7d7873;
  font-weight: 400;
  margin-top: 2px;
}

.topbar-dropdown-menu .dropdown-divider {
  margin: 6px 0;
  border: 0;
  border-top: 1px solid rgba(31, 25, 21, 0.08);
}

.topbar-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.topbar-dropdown-menu .dropdown-item:hover,
.topbar-dropdown-menu .dropdown-item:focus {
  background-color: #eaeeff;
  color: #4a6aff;
}

.topbar-dropdown-menu .dropdown-item.dropdown-item-danger:hover,
.topbar-dropdown-menu .dropdown-item.dropdown-item-danger:focus {
  background-color: #ffede6;
  color: #ff6b35;
}

.topbar-dropdown-menu .dropdown-item-icon {
  flex: none;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.topbar-dropdown-menu .dropdown-item:hover .dropdown-item-icon {
  opacity: 1;
}

.topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4a6aff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.topbar-user-details {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.topbar-user-name {
  font-size: 18px;
  font-weight: 700;
}

.topbar-user-role {
  font-size: 12px;
  color: #7d7873;
}

/* --------------------------------------------------------------------------
   4. Page Header
   -------------------------------------------------------------------------- */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.page-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}

.page-subtitle {
  font-size: 14px;
  color: #6a6662;
}

.page-header-status {
  font-size: 13px;
  color: #7d7873;
}

.page-header-date {
  color: #1f1915;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Hero Banner & Metrics Grid
   -------------------------------------------------------------------------- */
.hero-metrics-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(196px, auto);
  gap: 20px;
}

.hero-banner {
  grid-column: span 4;
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.38) 1.1px, transparent 1.6px),
    linear-gradient(170deg, #2f49c9 0%, #4a6aff 42%, #7c93ff 78%, #b7c3ff 100%);
  background-size:
    22px 22px,
    100% 100%;
}

.hero-circle-1 {
  position: absolute;
  right: -90px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

.hero-circle-2 {
  position: absolute;
  right: 20px;
  bottom: -140px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

.hero-top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-greeting {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.hero-heading {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}

.hero-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
  max-width: 280px;
}

.hero-bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-card-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.hero-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero-card-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.hero-card-title {
  font-size: 14px;
  font-weight: 600;
}

.hero-card-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.hero-status-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.hero-plan-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffd600;
  color: #1f1915;
}

/* Stacked, full-width buttons rather than trying to fit side by side - the
   hero card is narrow enough at every real width (desktop grid column,
   tablet, mobile alike) that "side by side" kept either wrapping text
   mid-word or, once that was fixed, wrapping into two left-aligned,
   inconsistently-sized buttons. Full width stacked is correct at any
   card width instead of depending on a breakpoint guess. */
.hero-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-btn-primary {
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: #fff;
  color: #3a56db;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  width: 100%;
}

.hero-btn-primary img { flex: none; }

.hero-btn-outline {
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
}
.hero-btn-outline:hover,
.hero-btn-outline:focus {
  border: 1px solid #4a6aff;
  color: #fff;
  background-color: #4a6aff;
}

/* --------------------------------------------------------------------------
   6. Metric Cards
   -------------------------------------------------------------------------- */
.grid-col-4 {
  grid-column: span 4;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

.metric-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-label-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.metric-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #eaeeff;
  color: #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.metric-card-title {
  font-size: 15px;
  font-weight: 600;
}

.metric-card-middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.metric-value-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.metric-number {
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1f1915;
}

.metric-unit {
  font-size: 15px;
  color: #6a6662;
}

.metric-pill-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eaeeff;
  color: #4a6aff;
  font-size: 12px;
  font-weight: 600;
}

.metric-ring-svg {
  display: block;
  flex: none;
}

/* stroke-dashoffset is now set as a direct attribute on each real
   .metric-ring-circle element (dashboard/index.blade.php), not here - a
   CSS declaration for it (even this one, via var(--dash)) would win over
   that attribute regardless of value (CSS always beats SVG presentation
   attributes), which is exactly what made every progress ring render
   fully filled no matter its real progress: var(--dash) wasn't resolving
   to each circle's own inline custom property and silently fell back to
   this rule's `, 0` default - dashoffset 0 draws the stroke at 100%
   regardless of the intended ring_fraction. Removed rather than fixed in
   place, since a plain attribute has no var() resolution step to fail. */

.metric-bottom-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4a6aff;
}

.metric-progress-bar {
  display: none;
  width: 100%;
  height: 6px;
  background: #eaeeff;
  border-radius: 999px;
  overflow: hidden;
}

.metric-progress-fill {
  height: 100%;
  border-radius: 999px;
}

.metric-progress-fill.fill-blue {
  width: 40%;
  background: #4a6aff;
}

.metric-progress-fill.fill-green {
  width: 66%;
  background: #1fa97c;
}

.metric-progress-fill.fill-orange {
  width: 75%;
  background: #f28b25;
}

.metric-progress-fill.fill-yellow {
  width: 70%;
  background: #e5a100;
}

.empty-state-info {
  display: contents;
}

.mobile-quick-actions-grid,
.activity-item-chevron,
.mobile-common-questions,
.mobile-topbar-brand,
.mobile-menu-toggle,
.sidebar-backdrop,
.sidebar-close-icon {
  display: none;
}

/* --------------------------------------------------------------------------
   7. Lower Dashboard Grid & Action Cards
   -------------------------------------------------------------------------- */
.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.section-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
  height: 100%;
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.section-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}

.section-header-action {
  font-size: 13px;
  color: #4a6aff;
  font-weight: 600;
}

/* Empty State / Book Appointment */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 18px 0;
  text-align: center;
}

.empty-state-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #eaeeff;
  color: #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-title {
  font-size: 15px;
  font-weight: 600;
}

.empty-state-desc {
  font-size: 13px;
  color: #6a6662;
  max-width: 260px;
  line-height: 1.4;
}

.empty-state-btn {
  margin-top: 4px;
  height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  background: #4a6aff;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.empty-state-btn:hover,
.empty-state-btn:focus {
  background: #3b57d4;
  color: #fff;
}

/* Quick Actions */
.quick-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-action-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: #4a6aff;
  color: #fff;
  border: 1px solid #4a6aff;
}
.quick-action-primary:hover,
.quick-action-primary:focus {
  background: #3b5ae2;
  color: #fff;
  border: 1px solid #3b5ae2;
}

.quick-action-outline {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
}

/* Recent Activity List */
.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.activity-item.activity-item-last {
  border-bottom: 0;
}

.activity-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.activity-icon-blue {
  background: #eaeeff;
  color: #4a6aff;
}

.activity-icon-green {
  background: #e7f3e8;
  color: #2e7d32;
}

.activity-icon-orange {
  background: #ffede6;
  color: #ff6b35;
}

.activity-icon-neutral {
  background: #f8f6f1;
  color: #1f1915;
}

/* Matches .billing-badge-cancelled's tokens - reserved for subscription
   cancellation, a more significant/final outcome than the existing orange
   (used for reschedules/consult-cancel, neither of which end the account). */
.activity-icon-red {
  background: #fbe7e7;
  color: #e5484d;
}

.activity-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.activity-title {
  font-size: 14px;
  font-weight: 600;
}

.activity-subtitle {
  font-size: 12px;
  color: #6a6662;
}

.activity-action-col {
  margin-left: auto;
  flex: none;
}

.activity-link {
  font-size: 12px;
  font-weight: 600;
  color: #4a6aff;
}

.activity-status-green {
  font-size: 12px;
  font-weight: 600;
  color: #2e7d32;
}

.activity-status-muted {
  font-size: 12px;
  font-weight: 600;
  color: #7d7873;
}

.activity-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b35;
  display: block;
}

/* --------------------------------------------------------------------------
   8. Floating Action Button
   -------------------------------------------------------------------------- */
.fab-button {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #4a6aff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(74, 106, 255, 0.38);
}

.fab-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff6b35;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* --------------------------------------------------------------------------
   9. Common SVG & Icon Utilities
   -------------------------------------------------------------------------- */
.icon-current {
  display: block;
  flex: none;
  color: currentColor;
}

.icon-blue {
  display: block;
  flex: none;
  color: #4a6aff;
}

.icon-muted {
  display: block;
  flex: none;
  color: #7d7873;
}

.icon-white {
  display: block;
  flex: none;
  color: #fff;
}

.icon-accent-blue {
  display: block;
  flex: none;
  color: #3a56db;
}

.icon-muted-end {
  display: block;
  flex: none;
  color: #7d7873;
  margin-left: auto;
}

.icon-white-end {
  display: block;
  flex: none;
  color: #fff;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   10. Metric Ring Progress Modifiers (Extracted from dynamic custom properties)
   -------------------------------------------------------------------------- */
.metric-ring-circle-1 {
  --dash: 102.326;
}

.metric-ring-circle-2 {
  --dash: 119.38;
}

.metric-ring-circle-3 {
  --dash: 149.226;
}

.metric-ring-circle-4 {
  --dash: 127.339;
}

/* --------------------------------------------------------------------------
   11. SVG Path Utility Styles (Extracted from internal <style> block)
   -------------------------------------------------------------------------- */
.st0 {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75px;
}

.st1 {
  fill: currentColor;
  stroke: none;
}

/* --------------------------------------------------------------------------
   12. Collapsed Sidebar State
   -------------------------------------------------------------------------- */
.dashboard-sidebar {
  transition:
    width 0.25s cubic-bezier(0.45, 0.05, 0.3, 1),
    padding 0.25s cubic-bezier(0.45, 0.05, 0.3, 1);
}

.sidebar-navitem img,
.sidebar-toggle-icon {
  transition:
    width 0.2s ease,
    height 0.2s ease,
    /* transform 0.2s ease, */ opacity 0.2s ease;
}

.sidebar-toggle-icon {
  cursor: pointer;
}

.sidebar-toggle-icon:hover {
  opacity: 0.75;
}

.dashboard-sidebar.collapsed {
  width: 76px;
  padding: 20px 12px;
}

.dashboard-sidebar.collapsed .sidebar-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 0 18px;
}

.dashboard-sidebar.collapsed .sidebar-logo {
  display: none;
}
.dashboard-sidebar .sidebar-logo-k {
  display: none;
}

.dashboard-sidebar.collapsed .sidebar-logo-k {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
}

.dashboard-sidebar.collapsed .sidebar-section-title {
  display: none;
}

.dashboard-sidebar.collapsed .sidebar-nav-list {
  align-items: center;
}

.dashboard-sidebar.collapsed .sidebar-nav-item {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dashboard-sidebar.collapsed .sidebar-navitem {
  justify-content: center;
  padding: 0;
  width: 44px;
  height: 44px;
  margin: 0 auto;
}

.dashboard-sidebar.collapsed .sidebar-navitem span {
  display: none;
}

.dashboard-sidebar.collapsed .sidebar-nav-badge {
  display: none;
}

.dashboard-sidebar.collapsed .sidebar-divider-spacer {
  height: 8px;
}

.dashboard-sidebar.collapsed .sidebar-card {
  display: none;
}

.dashboard-sidebar.collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

.dashboard-sidebar.collapsed .sidebar-navitem img,
.dashboard-sidebar.collapsed .sidebar-toggle-icon {
  width: 26px;
  height: 26px;
}

/* --------------------------------------------------------------------------
   13. Visits Page Styles (Base Desktop)
   -------------------------------------------------------------------------- */
.visits-container {
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.visits-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.visits-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.visits-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: #1f1915;
}

.visits-subtitle {
  font-size: 14px;
  color: #6a6662;
}

.visits-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.grid-col-7 {
  grid-column: span 7;
  min-width: 0;
}

.grid-col-5 {
  grid-column: span 5;
  min-width: 0;
}

.grid-col-12 {
  grid-column: span 12;
  min-width: 0;
}

.visit-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

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

.visit-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.visit-header-link {
  font-size: 13px;
  font-weight: 600;
  color: #4a6aff;
  cursor: pointer;
}

/* Upcoming Visit Card */
.upcoming-visit-body {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 0 2px;
}

.upcoming-visit-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eaeeff;
  color: #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.upcoming-visit-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.3;
}

.upcoming-visit-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.upcoming-visit-desc {
  font-size: 13px;
  color: #6a6662;
  max-width: 420px;
  line-height: 1.4;
}

.upcoming-visit-actions {
  display: flex;
  gap: 10px;
}

.upcoming-visit-completed-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #2e7d32;
}

.btn-schedule-visit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #4a6aff;
  color: #ffffff;
  border: 1px solid #4a6aff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* This class is also used on real <a> links (Join visit/Schedule a
   visit/Reschedule visit/Upload blood test), same bug pattern already
   fixed for .btn-modal-primary elsewhere in this file: Bootstrap's own
   a:hover rule (element+pseudo-class) otherwise outranks the plain
   .btn-schedule-visit base rule's color (class only), swapping the white
   text to Bootstrap's default link-hover blue on hover - on a blue
   background that made the text nearly invisible. class+pseudo-class
   here is higher specificity than a:hover, so it wins. */
.btn-schedule-visit:hover {
  background-color: #3b5bdb;
  color: #ffffff;
  cursor: pointer;
}

.btn-message-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Same a:hover specificity issue as .btn-schedule-visit above - this is
   also used as a real <a> link ("Message provider"). */
.btn-message-provider:hover {
  background: #f8f6f1;
  color: #1f1915;
  cursor: pointer;
}

/* Request Follow-Up Card */
.followup-metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.followup-metric-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.followup-number-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.followup-number {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1f1915;
}

.followup-unit {
  font-size: 14px;
  color: #6a6662;
}

.followup-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffede6;
  color: #ff6b35;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.followup-progress-bar {
  display: none;
  width: 100%;
  height: 5px;
  background: #ffe5db;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 12px;
}

.followup-progress-fill {
  height: 100%;
  width: 40%;
  background: #ff6b35;
  border-radius: 999px;
}

.followup-ring-svg {
  display: block;
  flex: none;
}

.followup-desc {
  font-size: 13px;
  color: #6a6662;
  line-height: 1.45;
}

.btn-request-followup-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  background: #f8f6f1;
  color: #7d7873;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(31, 25, 21, 0.1);
  cursor: not-allowed;
}

/* Visit History Card */
.visit-history-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

.visit-history-item-mb {
  margin-bottom: 14px;
}

.visit-history-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.visit-history-main-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.visit-history-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eaeeff;
  color: #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.visit-history-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.visit-history-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.visit-history-subtitle {
  font-size: 13px;
  color: #6a6662;
}

.visit-history-badges {
  display: flex;
  gap: 8px;
  flex: none;
}

.badge-confirmed {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7f3e8;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-prescribed {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaeeff;
  color: #3a56db;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Visit Details 4-Tile Grid */
.visit-details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.visit-detail-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8f6f1;
  grid-column: span 1;
}

.visit-detail-label {
  font-size: 11px;
  font-weight: 600;
  color: #7d7873;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.visit-detail-value {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f1915;
}

/* View Summary modal - stat tiles (reuses .visit-detail-tile/-label/-value
   styling, narrower grid than the page's 4-up .visit-details-grid since the
   modal itself is only 540px wide). */
.modal-visit-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* A status/outcome badge dropped inside a .visit-detail-tile is a flex
   item in a column flex container, which stretches it to the tile's full
   width by default (distorting the pill shape) - pin it to its own
   content width instead, scoped to this context only. */
.visit-detail-tile .badge-confirmed,
.visit-detail-tile .badge-cancelled,
.visit-detail-tile .badge-pending,
.visit-detail-tile .badge-prescribed,
.visit-detail-tile .badge-referred {
  align-self: flex-start;
}

@media (max-width: 480px) {
  .modal-visit-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Reference IDs Accordion */
.visit-reference-ids-section {
  border-top: 1px solid rgba(31, 25, 21, 0.1);
  padding-top: 10px;
}

.reference-ids-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6a6662;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.reference-ids-grid {
  padding-top: 6px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.reference-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  min-width: 0;
}

.reference-id-label {
  font-size: 12px;
  font-weight: 700;
  color: #7d7873;
  flex: none;
}

/* Same long-unbreakable-id truncation this app already uses for
   .med-reference-code (Medication/Labs) - a real UUID is much longer than
   this gets without a way to shrink, so let it ellipsize instead of
   forcing the row to overflow/wrap. */
.reference-id-code {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6a6662;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.id-desktop {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.id-mobile {
  display: none;
}

/* Shared hover tooltip - app-wide, CSS-only (no JS), used anywhere a
   truncated id (Master ID/Order ID/Visit ID/Med ID/Rx ID) needs its full
   value on hover instead of relying on the plain, unstyled native
   `title=""` tooltip. Add `data-tooltip="<full value>"` to any element
   (don't combine with `title` on the same element - showing both the
   native and this custom one at once looks like a bug). Styled to match
   this app's one existing popover, .modal-kit-tooltip-popover (dark
   #1f1915 bg, white text, rounded, soft shadow) for visual consistency. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  max-width: 320px;
  width: max-content;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1f1915;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  font-family: "Hanken Grotesk", sans-serif;
  line-height: 1.4;
  white-space: normal;
  word-break: break-all;
  text-align: center;
  box-shadow: 0 8px 20px rgba(31, 25, 21, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
  [data-tooltip]::after {
    max-width: 220px;
  }
}

.btn-copy-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.btn-copy-id:hover {
  opacity: 1;
}

/* Visit History Action Buttons */
.visit-history-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-visit-action-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
}

.btn-visit-action-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #4a6aff;
  color: #ffffff;
  border: 1px solid #4a6aff;
  cursor: pointer;
}

.btn-visit-action-disabled {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: #f8f6f1;
  color: #7d7873;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(31, 25, 21, 0.1);
  cursor: not-allowed;
}

/* ==========================================================================
   14. Medication Page - Base Desktop Styles
   ========================================================================== */
.medication-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.medication-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.medication-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.medication-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: #1f1915;
  margin: 0;
}

.medication-subtitle {
  font-size: 14px;
  color: #6a6662;
  margin: 0;
}

.medication-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

/* min-width:0 on these grid items overrides the browser's default
   min-width:auto, which otherwise refuses to let a CSS grid item shrink
   below its content's natural (min-content) width. A long unbreakable
   string like a master/order-id UUID has no spaces to wrap at, so its
   min-content width is its FULL width - without this, the ellipsis
   truncation on .med-reference-code-text never gets a chance to activate
   and the id visibly overflows/breaks the card instead of truncating. */
.medication-col-8 {
  grid-column: span 8;
  min-width: 0;
}

.medication-col-4 {
  grid-column: span 4;
  min-width: 0;
}

.medication-col-12 {
  grid-column: span 12;
}

/* Current Prescription Card */
.med-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

.med-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.med-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.med-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #eaeeff;
  color: #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.med-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.25;
}

.med-name {
  font-size: 18px;
  font-weight: 600;
  color: #1f1915;
}

.med-dose-desc {
  font-size: 13px;
  color: #6a6662;
}

.med-tags {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.med-tag-active {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffd600;
  color: #1f1915;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.med-tag-delivery {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7f3e8;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Delivery Status Banner */
.med-delivery-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 14px;
  margin: 12px 0;
  color: #ffffff;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.34) 1.1px, transparent 1.6px),
    linear-gradient(120deg, #3a56db 0%, #4a6aff 55%, #7c93ff 100%);
  background-size:
    16px 16px,
    100% 100%;
  box-shadow: 0 8px 22px rgba(74, 106, 255, 0.28);
}

.med-delivery-icon {
  color: #ffffff;
  display: flex;
  flex: none;
}

.med-delivery-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.load-more-btn {
  font-size: 13px;
  font-weight: 600;
}
.med-delivery-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.med-delivery-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.med-delivery-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.22);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Specification 10-Tile Grid */
.med-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.med-spec-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8f6f1;
  grid-column: span 1;
}

.med-spec-label {
  font-size: 11px;
  font-weight: 600;
  color: #7d7873;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.med-spec-value {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #1f1915;
}

/* Small muted explainer under a tile's value - e.g. "Refills left" on a
   3-month plan, where the value alone ("Not applicable") needs one line of
   context for why, same role .keen-dash-stat-detail already plays under
   the Dashboard's metric cards. */
.med-spec-subtext {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  color: #9a968f;
}

/* Reference IDs */
.med-reference-section {
  border-top: 1px solid rgba(31, 25, 21, 0.1);
  padding-top: 10px;
}

/* Shared "collapsible section header" look (icon-left, muted label, subtle
   hover highlight) - used by both the Reference IDs and desktop "How to
   apply" toggles so the two read as one consistent, stacked pattern rather
   than two differently-styled rows. Added alongside (not replacing)
   .med-reference-toggle/.med-apply-header so the mobile-only "How to apply"
   card - a different header design with its own icon badge - is untouched. */
.med-collapse-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6a6662;
  cursor: pointer;
  padding: 6px;
  margin: -6px;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.med-collapse-header:hover {
  background: #f8f6f1;
}

.med-reference-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6a6662;
  cursor: pointer;
}

.med-reference-grid {
  padding-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

.med-reference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  min-width: 0;
}

.med-reference-label {
  font-size: 12px;
  font-weight: 700;
  color: #7d7873;
  flex: none;
}

.med-reference-label::after {
  content: ":";
}

/* Real Rx/Med/Order IDs are long UUID-style strings (e.g. a 36-char order
   UUID), far longer than this template's short placeholder values - without
   a way to shrink, the code span forced the row (and its label) to wrap
   onto multiple misaligned lines. Letting the code span shrink and
   ellipsize keeps every row a single clean line; the full value is still
   in `title` and is still what gets copied (data-copy / .med-copy-code
   keep the untruncated string regardless of the visible ellipsis). */
.med-reference-code {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6a6662;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.med-reference-code-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.med-reference-code img {
  flex: none;
}

/* Action Buttons */
.med-actions {
  display: flex;
  gap: 10px;
  border-top: 1px solid rgba(31, 25, 21, 0.1);
  padding-top: 14px;
}

.med-btn-block {
  flex: 1 1 100%;
  width: 100%;
}

.med-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #4a6aff;
  color: #ffffff;
  border: 1px solid #4a6aff;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.med-btn-primary:hover {
  background: #3b5fe2;
  border-color: #3b5fe2;
  color: #ffffff;
}

.med-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.med-btn-outline:hover {
  background: #f8f6f1;
  color: #1f1915;
}

/* "How to apply" Section */
.med-apply-section {
  border-top: 1px solid rgba(31, 25, 21, 0.1);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

/* The desktop "How to apply" toggle carries both .med-apply-header (kept
   for the mobile-only card's own icon-badge layout) and .med-collapse-header
   (the shared icon-left collapsible look) - .med-apply-header's
   justify-content: space-between otherwise wins on source order and pushes
   the label to the far right, away from the chevron. This compound
   selector has higher specificity than either class alone, so it always
   wins regardless of where the rules sit in the file. */
.med-apply-header.med-collapse-header {
  justify-content: flex-start;
}

/* Reference IDs / How to apply - collapsible headers */
.med-collapsible-toggle {
  cursor: pointer;
  user-select: none;
}

.med-collapse-chevron {
  transition: transform 0.2s ease;
}

.med-collapsible-toggle.is-collapsed .med-collapse-chevron {
  transform: rotate(-90deg);
}

.med-apply-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.med-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.med-step-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.med-step-card-m {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.med-step-card-text-blk {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.35;
}
.med-sub-title {
  font-size: 14px;
  color: #6a6662;
  /* margin-top: -4px; */
  margin-bottom: 5px;
}

.med-step-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #eaeeff;
  color: #3a56db;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.med-step-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.med-step-desc {
  font-size: 12px;
  color: #6a6662;
  line-height: 1.4;
}
.med-card {
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
  border: none;
  margin-top: 16px;
}
/* Current Shipment Card */
.shipment-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

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

.shipment-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.shipment-status-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shipment-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shipment-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7f3e8;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
}

.shipment-badge-neutral {
  background: #eef0f5;
  color: #50545c;
}

.shipment-track-link {
  font-size: 13px;
  font-weight: 600;
  color: #4a6aff;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.shipment-track-link:hover {
  text-decoration: underline;
  color: #3b5fe2;
}

.shipment-carrier-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #6a6662;
}

.shipment-carrier-name {
  color: #1f1915;
  font-weight: 600;
}

.shipment-tracking-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Shipment Timeline */
.shipment-timeline {
  display: flex;
  flex-direction: column;
}

.shipment-timeline-step {
  display: flex;
  gap: 12px;
  min-height: 48px;
}

.shipment-timeline-step:last-child {
  min-height: auto;
}

.shipment-step-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex: none;
}

.shipment-step-node {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4a6aff;
  border: 2px solid #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.shipment-step-node.is-pending {
  background: #ffffff;
  border: 2px solid rgba(31, 25, 21, 0.18);
}

.shipment-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  display: block;
}

.shipment-step-node.is-pending .shipment-step-dot {
  background: transparent;
}

.shipment-step-line {
  flex: 1;
  width: 2px;
  background: #4a6aff;
  margin: 2px 0;
}

.shipment-step-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  line-height: 1.25;
}

.shipment-step-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.shipment-step-title.is-pending {
  color: #7d7873;
}

.shipment-step-time {
  font-size: 12px;
  color: #6a6662;
}

.shipment-footer {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 25, 21, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shipment-eta-date {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.shipment-eta-desc {
  font-size: 12px;
  color: #6a6662;
}

/* Shipment History Cards (older shipments, 3-per-row) */
.shipment-history-card {
  gap: 14px;
}

.shipment-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.shipment-history-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eaeeff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.shipment-history-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.shipment-history-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.shipment-history-kicker {
  font-size: 11px;
  font-weight: 700;
  color: #9a968f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shipment-history-date {
  font-size: 15px;
  font-weight: 600;
  color: #1f1915;
  white-space: nowrap;
}

.shipment-history-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shipment-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #6a6662;
}

.shipment-history-row img {
  flex: none;
}

.shipment-history-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 25, 21, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Past Prescriptions Card */
.past-prescriptions-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

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

.past-prescriptions-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.past-prescriptions-link {
  font-size: 13px;
  font-weight: 600;
  color: #4a6aff;
  text-decoration: none;
  cursor: pointer;
}

.past-prescriptions-link:hover {
  text-decoration: underline;
  color: #3b5fe2;
}

.past-prescription-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.past-prescription-row:last-child {
  border-bottom: none;
}

.past-prescription-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #f8f6f1;
  color: #7d7873;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.past-prescription-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.past-prescription-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.past-prescription-meta {
  font-size: 12px;
  color: #6a6662;
}

.past-prescription-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.past-prescription-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fde9ee;
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* A past-prescriptions row written under the same Beluga visit/cycle
   (master_id) as the currently active prescription isn't a genuinely
   expired treatment - it's an earlier write within the SAME ongoing
   cycle (e.g. a dosage revision before the current one). */
.past-prescription-badge-active {
  background: #e7f3e8;
  color: #2e7d32;
}

/* ==========================================================================
   15. Labs Page - Base Desktop Styles
   ========================================================================== */
.labs-mobile-view {
  display: none;
}

.labs-desktop-view {
  display: block;
}

.labs-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.labs-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.labs-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.labs-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: #1f1915;
  margin: 0;
}

.labs-subtitle {
  font-size: 14px;
  color: #6a6662;
  margin: 0;
}

.labs-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.labs-col-8 {
  grid-column: span 8;
  min-width: 0;
}

.labs-col-4 {
  min-width: 0;
  grid-column: span 4;
}

.labs-col-12 {
  grid-column: span 12;
}

.labs-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

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

.labs-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.labs-badge-alert {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fde9ee;
  color: #c62828;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.labs-panel-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #6a6662;
  padding-bottom: 2px;
}

.labs-badge-sample {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f8f6f1;
  color: #7d7873;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Metric Table Rows */
.labs-metric-row {
  display: grid;
  /* Real bug fixed: the badge column (3rd) used to be a flexible 0.9fr,
     which let "Out of range"/"Average" wrap mid-word at ordinary card
     widths - it's now `auto` so the pill always sizes to its own text
     instead of being squeezed. Name/value also widened slightly now that
     there's no percent-change badge taking up value-column space. */
  grid-template-columns: 1.7fr 0.85fr 1.7fr auto;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.labs-metric-row:last-child {
  border-bottom: none;
}

.labs-metric-name-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.labs-metric-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.labs-metric-desc {
  font-size: 12px;
  color: #6a6662;
}

.labs-metric-val-col {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.labs-metric-value {
  font-size: 15px;
  font-weight: 600;
  color: #1f1915;
}

.labs-metric-unit {
  font-size: 12px;
  color: #6a6662;
}

.labs-metric-pct {
  font-size: 11px;
  font-weight: 600;
  color: #6a6662;
  background: #f8f6f1;
  padding: 2px 7px;
  border-radius: 999px;
}

.labs-metric-bar-col {
  padding: 4px 0;
  min-width: 0;
}

/* Segmented Range Bar */
.labs-range-bar {
  position: relative;
  height: 8px;
  display: flex;
  gap: 3px;
}

.labs-bar-seg {
  height: 100%;
  border-radius: 999px;
}

.labs-bar-seg-1 {
  flex: 0.14;
  background: #fde9ee;
}

.labs-bar-seg-2 {
  flex: 0.18;
  background: #eceae6;
}

.labs-bar-seg-3 {
  flex: 0.36;
  background: #4a6aff;
}

.labs-bar-seg-4 {
  flex: 0.18;
  background: #eceae6;
}

.labs-bar-seg-5 {
  flex: 0.14;
  background: #fde9ee;
}

.seg-danger {
  background: #c62828 !important;
}

.seg-optimal {
  background: #4a6aff !important;
}

.seg-optimal-bg {
  background: #eaeeff !important;
}

.seg-average {
  background: #8a8580 !important;
}

.seg-neutral {
  background: #eceae6 !important;
}

.seg-light-danger {
  background: #fde9ee !important;
}

.labs-bar-pointer {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #1f1915;
}

.pointer-pos-52 {
  left: calc(52% - 1.5px);
}
.pointer-pos-27 {
  left: calc(27% - 1.5px);
}
.pointer-pos-58 {
  left: calc(58% - 1.5px);
}
.pointer-pos-55 {
  left: calc(55% - 1.5px);
}
.pointer-pos-8 {
  left: calc(8% - 1.5px);
}
.pointer-pos-91 {
  left: calc(91% - 1.5px);
}

/* Status Badges */
.labs-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.labs-status-optimal {
  background: #eaeeff;
  color: #4a6aff;
}

.labs-status-average {
  background: #f8f6f1;
  color: #7d7873;
}

.labs-status-out {
  background: #fde9ee;
  color: #c62828;
}

.labs-status-none {
  background: #f8f6f1;
  color: #7d7873;
}

.labs-metric-no-range {
  font-size: 12px;
  color: #7d7873;
}

.labs-metric-row[data-status="not_tested"] .labs-metric-name,
.labs-metric-row[data-status="not_tested"] .labs-metric-value {
  color: #7d7873;
}

/* Legend */
.labs-legend-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #6a6662;
}

.labs-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.labs-legend-dot {
  width: 18px;
  height: 6px;
  border-radius: 999px;
}

.dot-optimal {
  background: #4a6aff;
}

.dot-average {
  background: #8a8580;
}

.dot-out {
  background: #c62828;
}

.labs-legend-link {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #4a6aff;
  text-decoration: none;
  cursor: pointer;
}

.labs-legend-link:hover {
  text-decoration: underline;
  color: #3b5fe2;
}

/* Actions Row */
.labs-actions-row {
  display: flex;
  gap: 10px;
}

.btn-labs-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-labs-action:hover {
  background: #f8f6f1;
  color: #1f1915;
}

/* Lab Kit Purchase History - replaces a raw Bootstrap <table
   class="table table-bordered"> (QA-flagged as off-theme: plain system
   font, default borders, no Keen styling at all) with the same row
   component shape already established for this kind of list elsewhere in
   this redesign (Medication page's "Past prescriptions" -
   .past-prescription-*), independently named here per this page's own
   .labs-* convention rather than reusing that page's classes directly. */
.labkit-history-list {
  display: flex;
  flex-direction: column;
}

.labs-history-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.labs-history-row:last-child {
  border-bottom: none;
}

.labs-history-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #f8f6f1;
  color: #7d7873;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.labs-history-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.labs-history-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.labs-history-meta {
  font-size: 12px;
  color: #6a6662;
}

.labs-history-end {
  margin-left: auto;
  flex: none;
}

.labs-history-view-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #eaeeff;
  color: #4a6aff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.labs-history-view-btn:hover {
  background: #dde3ff;
}

/* Card 2: Your Lab Kit */
.labs-kit-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.labs-kit-carrier-text {
  font-size: 13px;
  color: #6a6662;
}

.labs-kit-track-link {
  font-size: 13px;
  font-weight: 600;
  color: #4a6aff;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.labs-kit-track-link:hover {
  text-decoration: underline;
  color: #3b5fe2;
}

.labs-timeline {
  display: flex;
  flex-direction: column;
}

.labs-timeline-step {
  display: flex;
  gap: 12px;
  min-height: 48px;
}

.labs-timeline-step:last-child {
  min-height: auto;
}

.labs-step-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex: none;
}

.labs-step-node {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.labs-step-node.is-completed {
  background: #4a6aff;
  border: 2px solid #4a6aff;
}

.labs-step-node.is-active {
  background: #eaeeff;
  border: 2px solid #4a6aff;
}

.labs-step-node.is-pending {
  background: #ffffff;
  border: 2px solid rgba(31, 25, 21, 0.18);
}

.labs-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.labs-step-dot.dot-white {
  background: #ffffff;
}

.labs-step-dot.dot-blue {
  background: #4a6aff;
}

.labs-step-dot.dot-transparent {
  background: transparent;
}

.labs-step-line {
  flex: 1;
  width: 2px;
  margin: 2px 0;
}

.labs-step-line.line-completed {
  background: #4a6aff;
}

.labs-step-line.line-pending {
  background: rgba(31, 25, 21, 0.1);
}

.labs-step-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  line-height: 1.25;
}

.labs-step-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.labs-step-title.is-pending {
  color: #7d7873;
}

.labs-step-desc {
  font-size: 12px;
  color: #6a6662;
}

.btn-order-kit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-order-kit:hover {
  background: #f8f6f1;
  color: #1f1915;
}

/* Card 3: Past Results */
.labs-past-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.labs-past-row:last-child {
  border-bottom: none;
}

.labs-past-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #e7f3e8;
  color: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.labs-past-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.labs-past-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.labs-past-meta {
  font-size: 12px;
  color: #6a6662;
}

.labs-past-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.btn-labs-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #4a6aff;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-labs-view:hover {
  background: #f8f6f1;
}

.btn-labs-download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   15. Tablet Responsive Layout (Sidebar Collapsed by Default)
   -------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------
   15. Tablet Responsive Layout (Sidebar Collapsed by Default)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-card-status {
    flex-wrap: wrap;
  }
  .hero-plan-badge {
    margin-left: 0;
  }
  .hero-banner {
    padding: 15px;
  }
  .hero-card-info {
    gap: 5px;
  }
  .hero-banner {
    grid-column: span 6;
  }
  .grid-col-4 {
    grid-column: span 6;
  }
}

/* ==========================================================================
   16. Documents Page - Base Desktop Styles
   ========================================================================== */
.documents-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.documents-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.documents-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.documents-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: #1f1915;
  margin: 0;
}

.documents-subtitle {
  font-size: 14px;
  color: #6a6662;
  margin: 0;
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.documents-col-8 {
  grid-column: span 8;
}

.documents-col-4 {
  grid-column: span 4;
}

.documents-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
  border: 1px solid rgba(31, 25, 21, 0.1);
}

/* Real bug: this was display:flex (row) trying to fit the title row, the
   240px search box, AND 4 filter pills on one line - that never actually
   fit at any practical width, so the pills' own flex-wrap silently wrapped
   mid-row instead, producing the cramped, misaligned two-row look. Stacked
   as a column instead (title row, then a dedicated toolbar row below for
   search+pills - see .documents-toolbar-row), which the mobile/tablet
   media queries already did for narrow widths but the base desktop rule
   never did. */
.documents-card-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.documents-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.documents-header-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.documents-toolbar-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.btn-mobile-search-toggle {
  display: none;
}

/* Search Box - full width on its own row above the filter pills, rather
   than sharing a row with them at a fixed 240px (cramped next to 4 pills
   at any practical width - see .documents-card-header's own comment). */
.documents-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  width: 100%;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 12px;
  color: #7d7873;
  font-size: 13px;
  background: #ffffff;
}

.documents-search-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  color: #1f1915;
  font-size: 13px;
  font-family: inherit;
}

.documents-search-input::placeholder {
  color: #7d7873;
}

/* Filter Pills */
.documents-filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.documents-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  user-select: none;
}

.documents-pill:hover {
  border-color: #4a6aff;
  color: #4a6aff;
}

.documents-pill.on {
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
}

/* Document Item Row */
.doc-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.doc-list-item:last-child {
  border-bottom: none;
}

.doc-item-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.doc-icon-green {
  background: #e7f3e8;
  color: #2e7d32;
}

.doc-icon-blue {
  background: #eaeeff;
  color: #4a6aff;
}

.doc-icon-orange {
  background: #ffede6;
  color: #ff6b35;
}

.doc-icon-neutral {
  background: #f8f6f1;
  color: #7d7873;
}

.doc-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.doc-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.doc-item-meta {
  font-size: 12px;
  color: #6a6662;
}

.doc-item-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.btn-doc-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-doc-view:hover {
  background: #f8f6f1;
  color: #1f1915;
}

.btn-doc-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.btn-doc-download:hover {
  background: #f8f6f1;
}

/* Card 2: Add a Document */
.documents-file-input {
  display: none;
}

.documents-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 16px;
  border: 1.5px dashed rgba(31, 25, 21, 0.18);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
  width: 100%;
  margin: 0;
}

.documents-dropzone:hover {
  border-color: #4a6aff;
  background: rgba(74, 106, 255, 0.02);
}

.documents-dropzone.is-dragover {
  border-color: #4a6aff;
  background: rgba(74, 106, 255, 0.08);
}

.dropzone-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eaeeff;
  color: #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropzone-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.dropzone-subtitle {
  font-size: 12px;
  color: #6a6662;
}

.documents-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.documents-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.documents-field-input {
  height: 44px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  color: #1f1915;
  font-size: 14px;
  width: 100%;
  outline: none;
  background: #ffffff;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.documents-field-input::placeholder {
  color: #7d7873;
}

.documents-field-input:focus {
  border-color: #4a6aff;
}

.btn-documents-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #4a6aff;
  color: #ffffff;
  border: 1px solid #4a6aff;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  width: 100%;
}

.btn-documents-upload:hover {
  background: #3b5fe2;
  border-color: #3b5fe2;
}

.documents-upload-notice {
  font-size: 12px;
  color: #6a6662;
  line-height: 1.45;
}

/* ==========================================================================
   17. Billing Page - Base Desktop Styles
   ========================================================================== */
.billing-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.billing-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.billing-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.billing-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: #1f1915;
  margin: 0;
}

.billing-subtitle {
  font-size: 14px;
  color: #6a6662;
  margin: 0;
}

.billing-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.billing-col-7 {
  grid-column: span 7;
}

.billing-col-5 {
  grid-column: span 5;
}

.billing-col-12 {
  grid-column: span 12;
}

.billing-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
  border: 1px solid rgba(31, 25, 21, 0.1);
}

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

.billing-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

/* Card 1: Your Plan */
.billing-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.billing-detail-row.no-border {
  border-bottom: 0;
}

.billing-detail-label {
  font-size: 14px;
  color: #6a6662;
}

.billing-detail-value {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: #1f1915;
}

.billing-badge-active {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffd600;
  color: #1f1915;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.billing-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-billing-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-family: inherit;
}

.btn-billing-action:hover {
  background: #f8f6f1;
}

.btn-billing-cancel {
  color: #6a6662;
}

/* Card 2: Payment Method */
.billing-payment-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(31, 25, 21, 0.1);
  border-radius: 14px;
}

.billing-payment-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f8f6f1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.billing-payment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.billing-payment-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1f1915;
}

.billing-badge-default {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaeeff;
  color: #3a56db;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.billing-payment-exp {
  font-size: 12px;
  color: #6a6662;
}

/* Card 3: Invoice History */
.billing-invoice-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.billing-invoice-row:last-child {
  border-bottom: none;
}

.billing-invoice-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #f8f6f1;
  color: #1f1915;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.billing-invoice-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.billing-invoice-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.billing-invoice-date {
  font-size: 12px;
  color: #6a6662;
}

.billing-invoice-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.billing-invoice-amount {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.billing-invoice-amount-mobile {
  display: none;
}

.billing-invoice-amount-desktop {
  display: inline-block;
}

.billing-badge-paid {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7f3e8;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* .billing-badge-inactive was referenced in the Blade template from an
   earlier round (both the plan status fallback and any non-"paid" invoice
   row) but never actually had a CSS definition anywhere - it rendered as
   plain unstyled text in both spots. Generic muted/neutral, since it
   covers several different non-final states (trialing, past_due, an
   'open' or 'void' invoice, ...), not just cancellation - that gets its
   own explicit red badge below instead of reusing this one. */
.billing-badge-inactive {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1eee8;
  color: #6a6662;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Current Plan card's cancelled state (item: "status as Cancelled in
   red"). */
.billing-badge-cancelled {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fbe7e7;
  color: #e5484d;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Change Plan's pending-transition state (Current Plan card, mid-plan-change
   only - SubscriptionController::resolveCurrentPlanState()'s has_next_plan).
   Nested/secondary box so "Next plan" reads as a distinct sub-section of
   the same card, not a second identical card. */
.billing-next-plan-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #f8f6f1;
  border: 1px solid rgba(31, 25, 21, 0.08);
}

.billing-next-plan-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4a6aff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.billing-next-plan-box .billing-detail-row {
  padding: 6px 0;
}

.btn-billing-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.btn-billing-download:hover {
  background: #f8f6f1;
}

/* ==========================================================================
   Section 18: Profile Page Styles
   ========================================================================== */

.profile-container {
  padding: 26px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.profile-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.profile-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: #1f1915;
}

.profile-subtitle {
  font-size: 14px;
  color: #6a6662;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}

.profile-col-7 {
  grid-column: span 7;
}

.profile-col-5 {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
  border: 1px solid rgba(31, 25, 21, 0.1);
  border: 1px solid rgba(31, 25, 21, 0.1);
}

.profile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.profile-card-title-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-card-title-text {
  font-size: 16px;
  font-weight: 600;
  color: #1f1915;
}

.profile-card-desc {
  font-size: 13px;
  color: #6a6662;
  line-height: 1.45;
}

/* Card 1: Personal Information */
.profile-pills {
  display: flex;
  gap: 6px;
  flex: none;
}
.labkit-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}
.labkit-btn-brd {
  border-left: 1px solid rgba(31, 25, 21, 0.1);
}
.profile-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  transition: all 0.2s ease;
}

.profile-pill:hover {
  border-color: #4a6aff;
  color: #4a6aff;
}

.profile-pill.on {
  background: #4a6aff;
  border-color: #4a6aff;
  color: #ffffff;
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar-box {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef1ea;
  flex: none;
}

.profile-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-photo-file-input {
  display: none;
}

.btn-photo-change {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  transition: all 0.2s ease;
}

.btn-photo-change:hover {
  background: #f8f6f1;
  border-color: rgba(31, 25, 21, 0.3);
}

.profile-photo-hint {
  font-size: 12px;
  color: #6a6662;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-form-col-1 {
  grid-column: span 1;
}

.profile-form-col-2 {
  grid-column: span 2;
}

.profile-form-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.profile-form-input {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: #1f1915;
  background: #ffffff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.profile-form-input:focus {
  border-color: #4a6aff;
  box-shadow: 0 0 0 3px rgba(74, 106, 255, 0.18);
}

.profile-form-input.is-muted {
  color: #7d7873;
}

.profile-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.profile-input-wrapper .profile-input-icon {
  position: absolute;
  left: 14px;
  pointer-events: none;
  flex: none;
  z-index: 1;
}

.profile-form-input.has-icon {
  padding-left: 38px;
}

.profile-form-field {
  height: 46px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1f1915;
  background: #ffffff;
}

.profile-form-field.is-muted {
  color: #7d7873;
}

.btn-profile-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #4a6aff;
  color: #ffffff;
  border: 1px solid #4a6aff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-profile-save:hover {
  background: #3b55d9;
  border-color: #3b55d9;
}

/* Card 2: Notifications */
.profile-notif-list {
  display: flex;
  flex-direction: column;
}

.profile-notif-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.profile-notif-item.no-border {
  border-bottom: none;
}

.profile-notif-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.profile-notif-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.profile-notif-desc {
  font-size: 12px;
  color: #6a6662;
}

.profile-toggle-switch {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d1cec9;
  position: relative;
  flex: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.profile-toggle-switch.is-active {
  background: #4a6aff;
}

.profile-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.profile-toggle-switch.is-active .profile-toggle-thumb {
  transform: translateX(18px);
}

/* Cards 3 & 4: Health details & Emergency contact */
.profile-detail-list {
  display: flex;
  flex-direction: column;
}

.profile-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.profile-detail-row.no-border {
  border-bottom: none;
}

.profile-detail-label {
  font-size: 14px;
  color: #6a6662;
}

.profile-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
  text-align: right;
}

.btn-profile-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
}

.btn-profile-secondary:hover {
  background: #f8f6f1;
  border-color: rgba(31, 25, 21, 0.3);
}

/* Card 5: One-handed use */
.profile-hand-seg {
  display: flex;
  background: #f8f6f1;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.profile-hand-btn {
  flex: 1;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #6a6662;
  border: none;
  background: transparent;
  transition: all 0.2s ease;
}

.profile-hand-btn.is-active {
  background: #ffffff;
  color: #1f1915;
  box-shadow: 0 1px 3px rgba(31, 25, 21, 0.14);
}

/* Card 6: Security */
.profile-security-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-security-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #ffffff;
  color: #1f1915;
  border: 1px solid rgba(31, 25, 21, 0.18);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-security-action:hover {
  background: #f8f6f1;
  border-color: rgba(31, 25, 21, 0.3);
}

.profile-signin-note {
  font-size: 12px;
  color: #6a6662;
}

/* ==========================================================================
   Section 19: Communication / Chat Page Styles
   ========================================================================== */

.chat-container {
  padding: 26px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.chat-header-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.chat-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: #1f1915;
  margin: 0;
}

.chat-subtitle {
  font-size: 14px;
  color: #6a6662;
}

.chat-box-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.chat-card {
  width: 100%;
  max-width: 720px;
  height: 660px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(31, 25, 21, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header-banner {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 14px;
  color: #ffffff;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.38) 1.1px, transparent 1.6px),
    linear-gradient(170deg, #2f49c9 0%, #4a6aff 42%, #7c93ff 78%, #b7c3ff 100%);
  background-size:
    22px 22px,
    100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-avatar-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.chat-avatar-badge img {
  display: block;
}

.chat-header-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.chat-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.chat-header-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd600;
  display: inline-block;
  flex: none;
}

.chat-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.chat-action-btn {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  transition: background 0.2s ease;
}

.chat-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.chat-tabs {
  display: flex;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
  padding: 0 8px;
  background: #ffffff;
}

.chat-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  font-size: 14px;
  font-weight: 600;
  color: #6a6662;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-tab.is-active {
  color: #4a6aff;
  border-bottom-color: #4a6aff;
}

.chat-tab-icon {
  display: block;
  flex: none;
}

.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
}

.chat-date-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #7d7873;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 4px 0;
}

.chat-date-line {
  flex: 1;
  height: 1px;
  background: rgba(31, 25, 21, 0.1);
}

.chat-msg-row {
  display: flex;
  gap: 8px;
}

.chat-msg-row.msg-incoming {
  align-items: flex-start;
  max-width: 100%;
}

.chat-msg-row.msg-outgoing {
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  max-width: 82%;
  align-self: flex-end;
}

.chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f8f6f1;
  border: 1px solid rgba(31, 25, 21, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a6662;
  flex: none;
}

.chat-msg-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  max-width: 82%;
}

.chat-bubble {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
}

.bubble-incoming {
  border-radius: 16px 16px 16px 4px;
  background: #eaeeff;
  color: #1f1915;
}

.bubble-outgoing {
  border-radius: 16px 16px 4px 16px;
  background: #4a6aff;
  color: #ffffff;
}

.chat-msg-time {
  font-size: 11px;
  color: #7d7873;
}

.msg-incoming .chat-msg-time {
  padding-left: 4px;
}

.msg-outgoing .chat-msg-time {
  padding-right: 4px;
}

.chat-instruction-card {
  margin-left: 36px;
  max-width: 82%;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

.chat-instruction-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.chat-instruction-desc {
  font-size: 13px;
  color: #6a6662;
  line-height: 1.45;
}

.chat-instruction-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4a6aff;
  text-decoration: none;
  width: fit-content;
}

.chat-instruction-link:hover {
  text-decoration: underline;
}

.chat-input-bar {
  border-top: 1px solid rgba(31, 25, 21, 0.1);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
}

.chat-attach-btn {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a6662;
  flex: none;
  transition: background 0.2s ease;
}

.chat-attach-btn:hover {
  background: #f8f6f1;
}

.chat-file-input {
  display: none;
}

.chat-text-input {
  flex: 1;
  height: 40px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 12px;
  font-size: 14px;
  color: #1f1915;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease;
}

.chat-text-input::placeholder {
  color: #7d7873;
}

.chat-text-input:focus {
  border-color: #4a6aff;
}

.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #4a6aff;
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.chat-send-btn:hover {
  background: #3a56db;
}

/* Real-chat additions (Chat page, backend/communication/index.blade.php) -
   the mockup only shipped the tab/bubble/input-bar chrome above; these cover
   states real messages actually hit: an unread dot per tab, an attached-file
   preview chip above the input row, inline image/file attachments inside a
   bubble, and the infinite-scroll-up loading row. */
.chat-tab { position: relative; }
.chat-tab-dot {
  position: absolute;
  top: 6px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  border: 1.5px solid #ffffff;
}

.chat-file-preview-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 14px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f8f6f1;
  border: 1px solid rgba(31, 25, 21, 0.1);
  font-size: 12px;
  color: #6a6662;
}

.chat-file-preview-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-file-preview-remove {
  flex: none;
  border: none;
  background: transparent;
  color: #6a6662;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.chat-media-img {
  display: block;
  max-width: 220px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.chat-file-link {
  display: inline-block;
  text-decoration: underline;
  word-break: break-word;
}

.bubble-outgoing .chat-file-link { color: #ffffff; }

.chat-loader-row,
.chat-thread-empty {
  text-align: center;
  font-size: 12px;
  color: #7d7873;
  padding: 8px 0;
}

/* Per-channel color scheme (item #2 of the Chat Functionality Adjustments
   round) - .chat-card[data-chat-theme] is toggled between "provider" and
   "support" by switchTab() in communication/index.blade.php. Provider keeps
   the template's original blue; Support gets a distinct emerald scheme so
   the two chat systems read as visually separate at a glance. */
.chat-card[data-chat-theme="support"] .chat-header-banner {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.38) 1.1px, transparent 1.6px),
    linear-gradient(170deg, #0b7d5e 0%, #12a37d 42%, #5cc9a4 78%, #b8ebd6 100%);
}

.chat-card[data-chat-theme="support"] .chat-tab.is-active {
  color: #0f9d76;
  border-bottom-color: #0f9d76;
}

.chat-card[data-chat-theme="support"] .bubble-outgoing {
  background: #0f9d76;
}

.chat-card[data-chat-theme="support"] .chat-text-input:focus {
  border-color: #0f9d76;
}

.chat-card[data-chat-theme="support"] .chat-send-btn {
  background: #0f9d76;
}

.chat-card[data-chat-theme="support"] .chat-send-btn:hover {
  background: #0b7d5e;
}

/* ==========================================================================
   Section 20: Login / Authentication Page Styles
   ========================================================================== */

.login-root {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.38) 1.1px, transparent 1.6px),
    linear-gradient(170deg, #2f49c9 0%, #4a6aff 42%, #7c93ff 78%, #b7c3ff 100%);
  background-size:
    22px 22px,
    100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.login-orb-top {
  right: -120px;
  top: -160px;
  width: 520px;
  height: 520px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

.login-orb-bottom {
  left: -180px;
  bottom: -220px;
  width: 560px;
  height: 560px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 10px 30px rgba(31, 25, 21, 0.1),
    0 2px 6px rgba(31, 25, 21, 0.06);
}

.login-card-outer {
  position: relative;
  padding: 16px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 100%;
  z-index: 1;
}

.login-card {
  width: 480px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 18px;
  padding: 40px 44px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 24px 60px rgba(31, 25, 21, 0.18);
}

.login-logo-wrap {
  display: flex;
  justify-content: center;
}

.login-logo {
  display: block;
}

.login-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}

.login-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: #1f1915;
  margin: 0;
}

.login-subtitle {
  font-size: 15px;
  color: #6a6662;
}

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

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

.login-label-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-label {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.login-input-wrap {
  height: 48px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.login-input-wrap:focus-within {
  border-color: #4a6aff;
  box-shadow: 0 0 0 3px rgba(74, 106, 255, 0.15);
}

.login-input-icon {
  display: block;
  flex: none;
}

.login-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  color: #1f1915;
  padding: 0;
}

.login-input::placeholder {
  color: #7d7873;
}

.btn-login-submit {
  height: 48px;
  border-radius: 12px;
  background: #4a6aff;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition:
    background 0.2s ease,
    transform 0.1s ease;
}

.btn-login-submit:hover {
  background: #3a56db;
}

.btn-login-submit:active {
  transform: scale(0.99);
}

.btn-login-submit img {
  display: block;
  flex: none;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7d7873;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(31, 25, 21, 0.1);
}

.btn-login-google {
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #1f1915;
  cursor: pointer;
  width: 100%;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.btn-login-google:hover {
  background: #f8f6f1;
  border-color: rgba(31, 25, 21, 0.3);
}

.btn-login-google img {
  display: block;
  flex: none;
}

.login-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #7d7873;
  padding-top: 8px;
  border-top: 1px solid rgba(31, 25, 21, 0.1);
}

.login-footer-link {
  color: #7d7873;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-footer-link:hover {
  color: #4a6aff;
  text-decoration: underline;
}

/* ==========================================================================
   Section 21: Modal Cancel Styles
   ========================================================================== */

.portal-modal-standalone {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}

.portal-modal-standalone[hidden] {
  display: none;
}

.portal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(31, 25, 21, 0.45);
  z-index: 40;
}

.modal-cancel-dialog {
  width: 520px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(31, 25, 21, 0.22);
  position: relative;
  z-index: 51;
}

.modal-cancel-header {
  padding: 6px 25px 6px 6px;
  position: relative;
}

.modal-cancel-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: #1f1915;
  margin: 0;
}

.modal-cancel-subtitle {
  font-size: 14px;
  color: #6a6662;
  padding-top: 4px;
  margin: 0;
}

.modal-cancel-body {
  padding: 18px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-cancel-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffede6;
  align-items: flex-start;
}

.modal-cancel-alert-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.modal-cancel-alert-text {
  font-size: 13px;
  color: #1f1915;
  line-height: 1.45;
}

.modal-cancel-prompt {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.modal-cancel-prompt-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.modal-cancel-radio-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.modal-cancel-radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid rgba(31, 25, 21, 0.18);
  border-radius: 13px;
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
  user-select: none;
  margin-bottom: 0;
}

.modal-cancel-radio-item:hover {
  border-color: rgba(74, 106, 255, 0.5);
}

.modal-cancel-radio-item.is-selected {
  border-color: #4a6aff;
  background: #eaeeff;
}

.modal-cancel-radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(31, 25, 21, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: border-color 0.15s ease;
}

.modal-cancel-radio-item.is-selected .modal-cancel-radio-circle {
  border-color: #4a6aff;
}

.modal-cancel-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a6aff;
  display: none;
}

.modal-cancel-radio-item.is-selected .modal-cancel-radio-dot {
  display: block;
}

.modal-cancel-radio-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  min-width: 0;
}

.modal-cancel-radio-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f1915;
}

.modal-cancel-radio-desc {
  font-size: 12px;
  color: #6a6662;
}

.modal-cancel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(31, 25, 21, 0.1);
}

.btn-cancel-keep {
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  background: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: #1f1915;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn-cancel-keep:hover {
  background-color: #f7f6f4;
  border-color: rgba(31, 25, 21, 0.28);
}

.btn-cancel-confirm {
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: 0;
  background: #4a6aff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.btn-cancel-confirm:hover {
  background-color: #3b5bdb;
}

/* ==========================================================================
   Section 22: Additional Modal Styles (Change Plan, Check-in, Lab Kit)
   ========================================================================== */

/* Shared Modal Container & Dialog Components */
.modal-dialog-box {
  width: 520px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(31, 25, 21, 0.22);
  position: relative;
  z-index: 51;
  display: flex;
  flex-direction: column;
}

.modal-dialog-scrollable {
  max-height: 90vh;
  overflow-y: auto;
}
.modal-custom .btn-close {
  position: absolute;
  top: 0;
  right: 0;
}

.modal-box-header {
  padding: 6px 25px 6px 6px;
  position: relative;
}

.modal-box-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: #1f1915;
  margin: 0;
}

.modal-box-subtitle {
  font-size: 14px;
  color: #6a6662;
  padding-top: 4px;
  margin: 0;
}

.modal-box-body {
  padding: 18px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-box-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(31, 25, 21, 0.1);
  background: #ffffff;
}

.modal-box-footer-sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.btn-modal-secondary {
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  background: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: #1f1915;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn-modal-secondary:hover {
  background-color: #f7f6f4;
  border-color: rgba(31, 25, 21, 0.28);
}

.btn-modal-primary {
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: 0;
  background: #4a6aff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

/* This class is also used on real <a> links (e.g. Download summary,
   Billing's "Back to Billing now") - Bootstrap's own a:hover rule
   (element+pseudo-class) otherwise outranks the plain .btn-modal-primary
   base rule's color (class only), which swapped the button text to
   Bootstrap's default link-hover blue on hover. .btn-modal-primary:hover
   is class+pseudo-class, higher specificity than a:hover, so setting
   color here explicitly wins. */
.btn-modal-primary:hover {
  background-color: #3b5bdb;
  color: #ffffff;
}

.btn-modal-primary:disabled {
  background: #f8f6f1;
  color: #7d7873;
  cursor: not-allowed;
}

.btn-modal-primary:disabled:hover {
  background: #f8f6f1;
}

/* Destructive variant of .btn-modal-primary (Remove payment method) - same
   shape/size, red instead of blue. Reuses the #e5484d red already used for
   the chat unread-tab dot, kept consistent rather than inventing a second
   red. */
.btn-modal-danger {
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: 0;
  background: #e5484d;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.btn-modal-danger:hover {
  background-color: #c93b40;
}

/* Small reusable confirm dialog (Payment Method's Remove / Set as default
   actions) - one shared modal driven by JS instead of two near-identical
   static ones, matching the icon-badge language the 2FA modal already
   established (colored circle + icon) rather than a plain confirm(). */
.modal-confirm-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-top: 4px;
}

.modal-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-bottom: 6px;
}

.modal-confirm-icon.variant-danger { background: #fbe7e7; }
.modal-confirm-icon.variant-primary { background: #e7f3e8; }
.modal-confirm-icon.variant-info { background: #eaeeff; }

.modal-confirm-title {
  font-size: 19px;
  font-weight: 600;
  color: #1f1915;
  margin: 0;
}

.modal-confirm-subtitle {
  font-size: 14px;
  color: #6a6662;
  margin: 0;
  line-height: 1.5;
}

.modal-confirm-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px 0 0;
  margin-top: 12px;
  border-top: 1px solid rgba(31, 25, 21, 0.1);
}

.modal-confirm-footer .btn-modal-secondary,
.modal-confirm-footer .btn-modal-primary,
.modal-confirm-footer .btn-modal-danger {
  flex: 1;
}

/* Shared Modal Radio Items */
.modal-radio-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.modal-radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1.5px solid rgba(31, 25, 21, 0.18);
  border-radius: 13px;
  background: #ffffff;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
  user-select: none;
  margin-bottom: 0;
}

.modal-radio-item:hover {
  border-color: rgba(74, 106, 255, 0.5);
}

.modal-radio-item.is-selected {
  border-color: #4a6aff;
  background: #eaeeff;
}

.modal-radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(31, 25, 21, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: border-color 0.15s ease;
}

.modal-radio-item.is-selected .modal-radio-circle {
  border-color: #4a6aff;
}

.modal-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a6aff;
  display: none;
}

.modal-radio-item.is-selected .modal-radio-dot {
  display: block;
}

.modal-radio-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  min-width: 0;
}

.modal-radio-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f1915;
}

.modal-radio-desc {
  font-size: 12px;
  color: #6a6662;
}

/* Shared Modal Info Alert Box */
.modal-info-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eaeeff;
  align-items: flex-start;
}

.modal-info-alert-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.modal-info-alert-text {
  font-size: 13px;
  color: #1f1915;
  line-height: 1.45;
}

/* Check-in Modal Progress & Question */
.modal-check-in-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-check-in-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #eaeeff;
  overflow: hidden;
}

.modal-check-in-progress-fill {
  width: 12.5%;
  height: 100%;
  border-radius: 999px;
  background: #4a6aff;
}

.modal-check-in-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: #6a6662;
}

.modal-check-in-question {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: #1f1915;
  margin: 0;
}

/* Lab Kit Modal Styles */
.modal-kit-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 13px;
  background: #f8f6f1;
  position: relative;
}

.modal-kit-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.modal-kit-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.modal-kit-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.modal-kit-tooltip-details {
  position: relative;
  display: inline-flex;
}

.modal-kit-tooltip-btn {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eaeeff;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
}

.modal-kit-tooltip-btn::-webkit-details-marker {
  display: none;
}

.modal-kit-tooltip-popover {
  position: absolute;
  z-index: 5;
  left: -14px;
  top: 36px;
  width: 250px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1f1915;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 10px 28px rgba(31, 25, 21, 0.28);
}

.modal-kit-subtitle {
  font-size: 12px;
  color: #6a6662;
}

.modal-kit-price {
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
  color: #1f1915;
}

.modal-kit-details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-kit-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-kit-status-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.modal-kit-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e7f3e8;
  color: #2e7d32;
  font-size: 11px;
  font-weight: 600;
}

.modal-kit-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(31, 25, 21, 0.14);
  border-radius: 13px;
  background: #ffffff;
}

.modal-kit-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
  min-width: 0;
}

.modal-kit-summary-label {
  font-size: 11px;
  font-weight: 600;
  color: #7d7873;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-kit-summary-val {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.modal-kit-summary-desc {
  font-size: 12px;
  color: #6a6662;
}

.modal-kit-accordion {
  border: 1px solid rgba(31, 25, 21, 0.14);
  border-radius: 13px;
  background: #f8f6f1;
  padding: 0 14px;
}

.modal-kit-accordion-summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: #3a56db;
}

.modal-kit-accordion-summary::-webkit-details-marker {
  display: none;
}

.modal-kit-accordion-content {
  padding: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-kit-form-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.modal-kit-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal-kit-form-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.modal-kit-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.modal-kit-input-wrap .modal-kit-input-icon {
  position: absolute;
  left: 14px;
  pointer-events: none;
  flex: none;
  z-index: 1;
}

.modal-kit-input {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  color: #1f1915;
  background: #ffffff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.modal-kit-input.has-icon {
  padding-left: 40px;
}

.modal-kit-input::placeholder {
  color: #7d7873;
}

.modal-kit-input:focus {
  border-color: #4a6aff;
  box-shadow: 0 0 0 3px rgba(74, 106, 255, 0.18);
}

.modal-kit-form-field {
  height: 46px;
  border: 1px solid rgba(31, 25, 21, 0.18);
  border-radius: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: #1f1915;
  background: #ffffff;
}

.modal-kit-form-field.is-optional {
  color: #7d7873;
}

.modal-kit-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-kit-field-icon {
  display: block;
  flex: none;
  width: 17px;
  height: 17px;
}

.modal-kit-notice-text {
  font-size: 12px;
  color: #6a6662;
  line-height: 1.45;
}

/* ==========================================================================
   Section 23: Modal Pause, Payment, Photo, and Refill Styles
   ========================================================================== */

/* Warning alert box */
.modal-warning-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffede6;
  align-items: flex-start;
}

.modal-warning-alert-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.modal-warning-alert-text {
  font-size: 13px;
  color: #1f1915;
  line-height: 1.45;
}

/* Modal Photo Components */
.modal-photo-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  user-select: none;
}

.modal-photo-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #4a6aff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  flex: none;
}

.modal-photo-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-photo-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f1915;
}

.modal-photo-desc {
  font-size: 12px;
  color: #6a6662;
}

/* Modal Refill Components */
.modal-refill-summary-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-refill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  border-bottom: 1px solid rgba(31, 25, 21, 0.1);
}

.modal-refill-row.no-border {
  border-bottom: 0;
}

.modal-refill-label {
  font-size: 14px;
  color: #6a6662;
}

.modal-refill-val {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: #1f1915;
}

.modal-refill-timing {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.modal-refill-timing-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

/* ==========================================================================
   Section 24: Modal Upload & Visit Summary Styles
   ========================================================================== */

/* Upload Modal Components */
.modal-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 16px;
  border: 1.5px dashed rgba(31, 25, 21, 0.18);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
  user-select: none;
}

.modal-upload-dropzone:hover {
  border-color: #4a6aff;
  background: rgba(234, 238, 255, 0.25);
}

.modal-upload-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #eaeeff;
  color: #4a6aff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.modal-upload-icon-wrap img {
  width: 24px;
  height: 24px;
  display: block;
}

.modal-upload-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f1915;
}

.modal-upload-desc {
  font-size: 12px;
  color: #6a6662;
}

/* Upload blood test modal (#uploadBloodTestModal, global - see
   keen-upload-blood-test-modal.blade.php) - dropzone drag state, same
   pattern as the Profile page's #idProofDropzone. .modal-upload-dropzone
   itself (above) is already global; only the JS-driven .is-dragover state
   needs its own rule, same as that page. */
#bloodTestDropzone { width: 100%; }
#bloodTestDropzone.is-dragover { border-color: #4a6aff; background: rgba(74, 106, 255, 0.08); }

/* Visit Summary Modal Components */
.modal-visit-note-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

.modal-visit-note-title {
  font-size: 13px;
  font-weight: 600;
  color: #1f1915;
}

.modal-visit-note-text {
  font-size: 14px;
  color: #6a6662;
  line-height: 1.5;
}

/* Success alert box (shared green alert) */
.modal-success-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e7f3e8;
  align-items: flex-start;
}

.modal-success-alert-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.modal-success-alert-text {
  font-size: 13px;
  color: #1f1915;
  line-height: 1.45;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .dashboard-root {
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* By default on tablet, sidebar is collapsed */
  .dashboard-sidebar {
    width: 76px;
    padding: 20px 12px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
  }
  .dashboard-main {
    margin-left: 76px;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  .dashboard-sidebar .sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 6px 0 18px;
  }

  .dashboard-sidebar .sidebar-logo {
    display: none;
  }

  .dashboard-sidebar .sidebar-logo-k {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto;
  }

  .dashboard-sidebar .sidebar-section-title {
    display: none;
  }

  .dashboard-sidebar .sidebar-nav-list {
    align-items: center;
  }

  .dashboard-sidebar .sidebar-nav-item {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .dashboard-sidebar .sidebar-navitem {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 44px;
    margin: 0 auto;
  }

  .dashboard-sidebar .sidebar-navitem span {
    display: none;
  }

  .dashboard-sidebar .sidebar-nav-badge {
    display: none;
  }

  .dashboard-sidebar .sidebar-divider-spacer {
    height: 8px;
  }

  .dashboard-sidebar .sidebar-card {
    display: none;
  }

  .dashboard-sidebar .sidebar-toggle-icon {
    transform: rotate(180deg);
  }

  .dashboard-sidebar .sidebar-navitem img,
  .dashboard-sidebar .sidebar-toggle-icon {
    width: 26px;
    height: 26px;
  }

  /* When user expands sidebar on tablet/mobile */
  .dashboard-sidebar.expanded {
    width: 248px;
    padding: 20px 16px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: #fdfcf9;
    z-index: 1050;
    box-shadow: 0 10px 30px rgba(31, 25, 21, 0.22);
  }

  .dashboard-sidebar.expanded .sidebar-header {
    flex-direction: row;
    justify-content: space-between;
    padding: 6px 14px 18px;
  }

  .dashboard-sidebar.expanded .sidebar-logo {
    display: block;
  }

  .dashboard-sidebar.expanded .sidebar-logo-k {
    display: none;
  }

  .dashboard-sidebar.expanded .sidebar-section-title {
    display: block;
  }

  .dashboard-sidebar.expanded .sidebar-nav-list {
    align-items: stretch;
  }

  .dashboard-sidebar.expanded .sidebar-nav-item {
    display: block;
    width: 100%;
  }

  .dashboard-sidebar.expanded .sidebar-navitem {
    justify-content: flex-start;
    padding: 0 14px;
    width: 100%;
    height: 44px;
    margin: 0;
  }

  .dashboard-sidebar.expanded .sidebar-navitem span {
    display: inline;
  }

  .dashboard-sidebar.expanded .sidebar-nav-badge {
    display: inline-flex;
  }

  .dashboard-sidebar.expanded .sidebar-card {
    display: flex;
    flex-direction: column;
  }

  .dashboard-sidebar.expanded .sidebar-mobile-section-title,
  .dashboard-sidebar.expanded .sidebar-mobile-support-card,
  .dashboard-sidebar.expanded .sidebar-mobile-signout {
    display: none !important;
  }

  .dashboard-sidebar.expanded .sidebar-toggle-icon {
    transform: none;
    cursor: pointer;
  }

  .dashboard-sidebar.expanded .sidebar-navitem img,
  .dashboard-sidebar.expanded .sidebar-toggle-icon {
    width: 20px;
    height: 20px;
  }

  /* Responsive grid & content layout on tablet */
  .dashboard-content {
    padding: 20px 16px;
    max-width: 100%;
  }

  .hero-metrics-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
  }

  .hero-banner {
    grid-column: span 6;
    grid-row: span 1;
    gap: 16px;
  }

  .grid-col-4 {
    grid-column: span 3;
  }
  .recent-activity {
    grid-column: span 6;
    grid-row: span 1;
  }

  .dashboard-bottom-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .topbar-search {
    width: 220px;
  }

  /* Visits page on tablet */
  .visits-container {
    padding: 24px 20px 60px;
    max-width: 100%;
    gap: 20px;
  }

  .grid-col-7,
  .grid-col-5,
  .grid-col-12 {
    grid-column: span 12;
    width: 100%;
  }

  .visit-details-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Medication page on tablet */
  .medication-col-8,
  .medication-col-4,
  .medication-col-12 {
    grid-column: span 12;
    width: 100%;
  }
  /* Labs page on tablet */
  .labs-container {
    padding: 24px 20px 60px;
    max-width: 100%;
    gap: 20px;
  }

  .labs-col-8,
  .labs-col-4,
  .labs-col-12 {
    grid-column: span 12;
    width: 100%;
  }

  /* Profile page on tablet */
  .profile-container {
    padding: 24px 20px 60px;
    max-width: 100%;
    gap: 20px;
  }

  .profile-col-7,
  .profile-col-5 {
    grid-column: span 12;
    width: 100%;
  }

  /* Chat page on tablet */
  .chat-container {
    padding: 24px 20px 60px;
    max-width: 100%;
  }

  .chat-card {
    max-width: 100%;
    height: 600px;
  }

  /* Login page on tablet */
  .login-card-outer {
    padding: 14px;
    border-radius: 24px;
  }

  .login-card {
    width: 440px;
    padding: 36px 36px 28px;
  }
  .dashboard-topbar {
    padding: 0 16px;
  }
}

@media (max-width: 767.98px) {
  /* Input fields 1rem font size on mobile devices */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
  textarea,
  select,
  .form-control,
  .form-select,
  .modal-kit-input,
  .modal-kit-form-field,
  .profile-form-input,
  .login-input,
  .chat-text-input,
  .documents-search-input,
  .documents-field-input,
  .topbar-search {
    font-size: 1rem !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"])::placeholder,
  textarea::placeholder,
  .form-control::placeholder,
  .modal-kit-input::placeholder,
  .profile-form-input::placeholder,
  .login-input::placeholder,
  .chat-text-input::placeholder,
  .documents-search-input::placeholder,
  .documents-field-input::placeholder,
  .topbar-search::placeholder {
    font-size: 1rem !important;
  }

  /* Layout container */
  .dashboard-root {
    width: 100%;
    /* min-height: 100vh; */
    overflow-x: hidden;
  }

  .dashboard-main {
    margin-left: 0 !important;
    width: 100%;
    min-width: 0;
  }

  /* Offcanvas Mobile Sidebar Drawer (Always Expanded when opened, never collapsed) */
  .dashboard-sidebar,
  .dashboard-sidebar.collapsed {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -300px !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1060 !important;
    background: #ffffff !important;
    padding: 20px 16px !important;
    box-shadow: 0 10px 30px rgba(31, 25, 21, 0.25) !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
  }

  .dashboard-sidebar.mobile-open,
  .dashboard-root.mobile-nav-open .dashboard-sidebar,
  .dashboard-sidebar.collapsed.mobile-open {
    left: 0 !important;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 10, 0.45);
    z-index: 1055;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .dashboard-root.mobile-nav-open .sidebar-backdrop,
  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* Restore full sidebar elements inside mobile drawer (never collapsed) */
  .dashboard-sidebar .sidebar-header,
  .dashboard-sidebar.collapsed .sidebar-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 14px 18px !important;
    gap: 0 !important;
  }

  .dashboard-sidebar .sidebar-logo,
  .dashboard-sidebar.collapsed .sidebar-logo {
    display: block !important;
    width: 58px !important;
    height: 18px !important;
  }

  .dashboard-sidebar .sidebar-logo-k,
  .dashboard-sidebar.collapsed .sidebar-logo-k {
    display: none !important;
  }

  .dashboard-sidebar .sidebar-section-title,
  .dashboard-sidebar.collapsed .sidebar-section-title {
    display: block !important;
    padding: 10px 14px 4px !important;
  }

  .dashboard-sidebar .sidebar-mobile-section-title,
  .dashboard-sidebar.collapsed .sidebar-mobile-section-title {
    display: block !important;
    margin-top: 6px;
  }

  .dashboard-sidebar .sidebar-nav-list,
  .dashboard-sidebar.collapsed .sidebar-nav-list {
    align-items: stretch !important;
  }

  .dashboard-sidebar .sidebar-nav-item,
  .dashboard-sidebar.collapsed .sidebar-nav-item {
    display: block !important;
    width: 100% !important;
  }

  .dashboard-sidebar .sidebar-navitem,
  .dashboard-sidebar.collapsed .sidebar-navitem {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 12px 14px !important;
    width: 100% !important;
    /* height: 44px !important; */
    margin: 0 !important;
    gap: 12px !important;
  }

  /* :not(.sidebar-nav-badge) - without this, this generic "every span
     inside a sidebar-navitem" rule also matches the Chat unread badge
     (itself a <span> inside .sidebar-navitem) and force-shows it on mobile
     even when its own inline style="display:none" (set by keen-footer's
     JS when count is 0) says otherwise. Nav-label spans still need this
     forced inline-flex for the mobile layout; the badge opts out so its
     own hidden-when-zero state is respected instead. */
  .dashboard-sidebar .sidebar-navitem span:not(.sidebar-nav-badge),
  .dashboard-sidebar.collapsed .sidebar-navitem span:not(.sidebar-nav-badge) {
    display: inline-flex !important;
  }

  /* No forced display here (was display: inline-flex !important) - the
     badge's own visibility is controlled by its inline style
     (style="display:none" in the blade + JS toggling it based on the
     live unread count), not by this stylesheet. */
  .dashboard-sidebar .sidebar-nav-badge,
  .dashboard-sidebar.collapsed .sidebar-nav-badge {
    margin-left: auto !important;
  }

  /* Hide the toggle menu item on mobile inside the sidebar */
  .dashboard-sidebar .sidebar-toggle-icon,
  .dashboard-sidebar.collapsed .sidebar-toggle-icon {
    display: none !important;
  }

  /* Show the cross icon on mobile inside the sidebar */
  .dashboard-sidebar .sidebar-close-icon,
  .dashboard-sidebar.collapsed .sidebar-close-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    opacity: 0.8;
    transition: opacity 0.2s ease;
  }

  .dashboard-sidebar .sidebar-close-icon:hover {
    opacity: 1;
  }

  .dashboard-sidebar .sidebar-navitem img,
  .dashboard-sidebar.collapsed .sidebar-navitem img {
    width: 20px !important;
    height: 20px !important;
  }

  .dashboard-sidebar .sidebar-divider-spacer,
  .dashboard-sidebar.collapsed .sidebar-divider-spacer {
    display: none !important;
  }

  /* Explicitly hide the sidebar card common question on mobile */
  .dashboard-sidebar .sidebar-card,
  .dashboard-sidebar.collapsed .sidebar-card,
  .dashboard-sidebar.expanded .sidebar-card {
    display: none !important;
  }

  /* Mobile Support Card ("Need a hand?") */
  .sidebar-mobile-support-card {
    display: flex !important;
    flex-direction: column;
    background: #edf2fe;
    border: 1px solid #dce4fc;
    border-radius: 16px;
    padding: 16px 14px;
    margin-top: 14px;
  }

  .sidebar-support-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  .sidebar-support-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .sidebar-support-title {
    font-size: 14px;
    font-weight: 600;
    color: #2d4fd8;
    line-height: 1.2;
  }

  .sidebar-support-desc {
    font-size: 13px;
    line-height: 1.45;
    color: #5a5550;
    margin-bottom: 14px;
    font-weight: 400;
  }

  .sidebar-support-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    background: #ffffff;
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #1f1915;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease;
  }

  .sidebar-support-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  /* Mobile Sign Out link */
  .sidebar-mobile-signout {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 18px 4px 10px;
    font-size: 15px;
    font-weight: 600;
    color: #5a5550;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .sidebar-mobile-signout:hover {
    color: #1f1915;
  }

  .sidebar-mobile-signout img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Mobile Topbar */
  .dashboard-topbar {
    height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-bottom: 1px solid #ebe8e2;
  }

  .mobile-topbar-brand {
    display: block;
    width: 52px;
    height: auto;
  }

  .topbar-search,
  .topbar-search-menu {
    display: none;
  }

  .topbar-actions {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
  }

  .topbar-user-details,
  .topbar-dropdown-chevron {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .mobile-menu-toggle img {
    filter: brightness(0);
  }

  .mobile-menu-toggle:active {
    background: #f0eee9;
  }

  /* Content area */
  .dashboard-content {
    padding: 16px 14px 80px;
    max-width: 100%;
  }

  .page-header {
    display: none;
  }

  /* Hero banner on mobile */
  .hero-banner {
    grid-column: span 2;
    padding: 20px 18px;
    border-radius: 20px;
    grid-row: inherit;
  }

  .hero-greeting {
    font-size: 13px;
    color: #ffffff;
  }

  .hero-heading {
    font-size: 26px;
    font-weight: 600;
    margin-top: 4px;
  }
  .hero-card-info {
    gap: 3px;
  }

  .hero-text {
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
    margin-top: 6px;
  }

  .hero-bottom {
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
  }

  .hero-card-status {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .hero-btn-group {
    display: none;
  }

  /* Metrics Grid (2x2) */
  .hero-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
    grid-auto-rows: inherit;
  }

  .hero-metrics-grid .grid-col-4 {
    grid-column: span 1;
  }

  .metric-card {
    padding: 14px 12px;
    border-radius: 16px;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(31, 25, 21, 0.05);
    border: 1px solid rgba(31, 25, 21, 0.1);
  }
  .hero-circle-2 {
    display: none;
  }

  .metric-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .metric-label-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .metric-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .metric-icon-box img {
    width: 18px;
    height: 18px;
  }

  .metric-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #55514e;
  }

  .metric-card-middle {
    align-items: flex-start;
  }

  .metric-value-col {
    width: 100%;
    gap: 6px;
  }

  .metric-number {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
  }

  .metric-unit {
    font-size: 13px;
    color: #6a6662;
  }

  .metric-progress-bar {
    display: block;
    width: 100%;
    height: 5px;
    background: #eef1f6;
    border-radius: 999px;
    margin: 4px 0 2px;
  }

  .metric-pill-tag {
    background: transparent;
    padding: 0;
    color: #78736f;
    font-size: 11px;
    font-weight: 600;
  }

  .metric-ring-svg {
    display: none;
  }

  .metric-bottom-link {
    display: none;
  }

  /* Bottom Grid & Sections */
  .dashboard-bottom-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
  }

  .dashboard-bottom-grid .grid-col-4 {
    grid-column: auto;
    width: 100%;
  }

  /* Reorder sections on mobile: Quick Actions -> Visits -> Activity -> Questions */
  .card-quick-actions {
    order: 1;
  }

  .card-upcoming-visits {
    order: 2;
  }

  .recent-activity {
    order: 3;
  }

  .mobile-common-questions {
    order: 4;
    display: block;
  }

  /* Quick Actions (4-Column Icon Grid) */
  .card-quick-actions .section-card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .card-quick-actions .section-card-header {
    margin-bottom: 8px;
  }

  .card-quick-actions .section-card-title {
    font-size: 15px;
    font-weight: 600;
  }

  .card-quick-actions .section-card-title img {
    display: none;
  }

  .quick-actions-list {
    display: none;
  }

  .mobile-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .mobile-action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 4px 12px;
    background: #ffffff;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(31, 25, 21, 0.05);
    cursor: pointer;
    transition: transform 0.15s ease;
    border: 1px solid rgba(31, 25, 21, 0.1);
    text-decoration: none;
    color: inherit;
  }

  .mobile-action-tile:active {
    transform: scale(0.97);
  }

  .mobile-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eaeeff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-action-label {
    font-size: 12px;
    font-weight: 600;
    color: #1f1915;
    line-height: 1.2;
  }

  /* Upcoming Appointments ("No visits booked") horizontal card */
  .card-upcoming-visits .section-card {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(31, 25, 21, 0.1);
  }

  .card-upcoming-visits .section-card-header {
    display: none;
  }

  .card-upcoming-visits .empty-state-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 0;
    gap: 12px;
  }

  .card-upcoming-visits .empty-state-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .card-upcoming-visits .empty-state-icon-box img {
    width: 22px;
    height: 22px;
  }

  .card-upcoming-visits .empty-state-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .card-upcoming-visits .empty-state-title {
    font-size: 14px;
    font-weight: 600;
  }

  .card-upcoming-visits .empty-state-desc {
    font-size: 12px;
    color: #6a6662;
    max-width: none;
    line-height: 1.3;
    white-space: normal;
  }

  .card-upcoming-visits .empty-state-btn {
    margin-top: 0;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    flex-shrink: 0;
  }

  /* Recent Activity card */
  .recent-activity .section-card {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(31, 25, 21, 0.1);
  }

  .activity-item {
    padding: 10px 0;
  }

  .activity-action-col {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .activity-item-chevron {
    display: block;
    opacity: 0.5;
  }

  /* Common Questions card on mobile */
  .mobile-common-questions .section-card {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(31, 25, 21, 0.1);
  }

  .mobile-question-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f2efeb;
    font-size: 13px;
    font-weight: 600;
    color: #1f1915;
    cursor: pointer;
  }

  .mobile-question-item-last {
    border-bottom: none;
    padding-bottom: 4px;
  }

  /* FAB pinned bottom-right */
  .fab-button {
    position: fixed;
    right: 18px;
    bottom: 20px;
    width: 52px;
    height: 52px;
    z-index: 1040;
    box-shadow: 0 6px 20px rgba(74, 106, 255, 0.4);
  }

  /* Documents Page on Tablet */
  .documents-grid {
    grid-template-columns: 1fr;
  }

  .documents-col-8,
  .documents-col-4 {
    grid-column: span 1;
  }

  .documents-card-header {
    flex-wrap: wrap;
  }

  .documents-search-box {
    width: 100%;
  }

  /* Billing Page on Tablet */
  .billing-grid {
    grid-template-columns: 1fr;
  }

  .billing-col-7,
  .billing-col-5,
  .billing-col-12 {
    grid-column: span 1;
  }
}

/* ==========================================================================
   16. Visits Page - Mobile Responsive Styles (under 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .sidebar-navitem {
    font-weight: 600;
    font-size: 16px;
  }
  /* Visits page on mobile */
  .visits-container {
    padding: 0;
    max-width: 100%;
    gap: 16px;
  }

  .visits-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f1915;
  }

  .visits-subtitle {
    font-size: 13px;
    color: #7d7873;
  }

  .visits-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .grid-col-7,
  .grid-col-5,
  .grid-col-12 {
    grid-column: span 12 !important;
    width: 100%;
  }

  .visit-card {
    padding: 18px 16px;
    border-radius: 16px;
    border: 1px solid rgba(31, 25, 21, 0.08);
    box-shadow: 0 4px 16px rgba(31, 25, 21, 0.04);
    gap: 14px;
  }

  .visit-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f1915;
    gap: 8px;
  }

  /* Upcoming Visit Mobile: Centered Content */
  .upcoming-visit-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 0 4px;
    gap: 10px;
  }

  .upcoming-visit-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #eef2ff;
    color: #4a6aff;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .upcoming-visit-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }

  .upcoming-visit-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f1915;
    text-align: center;
  }

  .upcoming-visit-desc {
    font-size: 13px;
    color: #7d7873;
    text-align: center;
    line-height: 1.45;
    max-width: 320px;
    margin: 0 auto;
  }

  .upcoming-visit-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 16px;
  }

  .btn-schedule-visit {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    background: #4a6aff;
    color: #ffffff;
    border: 1px solid #4a6aff;
  }

  .btn-message-provider {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    background: #ffffff;
    color: #1f1915;
    border: 1px solid rgba(31, 25, 21, 0.18);
  }

  /* Request a Follow-up Mobile: Horizontal Progress Bar */
  .followup-metric-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  .followup-metric-col {
    width: 100%;
    gap: 0;
  }

  .followup-number-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .followup-number {
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    color: #1f1915;
  }

  .followup-unit {
    font-size: 13px;
    color: #6a6662;
  }

  .followup-progress-bar {
    display: block;
    width: 100%;
    height: 5px;
    background: #ffe5db;
    border-radius: 999px;
    margin: 10px 0 12px;
    overflow: hidden;
  }

  .followup-progress-fill {
    height: 100%;
    width: 40%;
    background: #ff6b35;
    border-radius: 999px;
  }

  .followup-ring-svg {
    display: none !important;
  }

  .followup-tag {
    align-self: flex-start;
    background: #fff2ec;
    color: #ff6b35;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
  }

  .followup-desc {
    font-size: 13px;
    color: #7d7873;
    line-height: 1.45;
    margin-bottom: 14px;
  }

  .btn-request-followup-disabled {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    background: #f8f6f1;
    color: #7d7873;
    border: 1px solid rgba(31, 25, 21, 0.08);
  }

  /* Visit History Mobile */
  .visit-history-item {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(31, 25, 21, 0.1);
    box-shadow: none;
    gap: 12px;
    margin-bottom: 14px;
  }

  .visit-history-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .visit-history-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4a6aff;
  }

  .visit-history-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f1915;
  }

  .visit-history-subtitle {
    font-size: 12px;
    color: #7d7873;
  }

  .visit-history-badges {
    display: flex;
    gap: 8px;
  }

  .badge-confirmed {
    font-size: 11px;
    padding: 3px 9px;
    background: #e8f8ee;
    color: #1b873f;
    font-weight: 600;
    border-radius: 999px;
  }

  .badge-prescribed {
    font-size: 11px;
    padding: 3px 9px;
    background: #eaeeff;
    color: #4a6aff;
    font-weight: 600;
    border-radius: 999px;
  }

  .visit-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 4px 0;
  }

  .visit-detail-tile-hide-mobile {
    display: none !important;
  }

  .visit-detail-tile {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fbf9f5;
    gap: 3px;
  }

  .visit-detail-label {
    font-size: 10px;
    font-weight: 600;
    color: #7d7873;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .visit-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: #1f1915;
    line-height: 1.3;
  }

  .visit-reference-ids-section {
    padding-top: 8px;
    border-top: 1px solid rgba(31, 25, 21, 0.08);
    margin-top: 4px;
  }

  .reference-ids-trigger {
    font-size: 12px;
    font-weight: 600;
    color: #6a6662;
    gap: 6px;
  }

  .reference-ids-grid {
    grid-template-columns: 1fr;
    gap: 2px;
    padding-top: 6px;
  }

  .reference-id-row {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .reference-id-label {
    font-size: 12px;
    color: #7d7873;
  }

  .reference-id-code {
    font-size: 12px;
    color: #6a6662;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .id-desktop {
    display: none !important;
  }

  .id-mobile {
    display: inline !important;
  }

  .visit-history-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 6px;
  }

  .btn-visit-action-outline {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    background: #ffffff;
    color: #1f1915;
    border: 1px solid rgba(31, 25, 21, 0.18);
  }

  .btn-visit-action-primary {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    background: #4a6aff;
    color: #ffffff;
    border: 1px solid #4a6aff;
  }

  .btn-visit-action-disabled {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    justify-content: center;
    background: #f8f6f1;
    color: #7d7873;
    border: 1px solid rgba(31, 25, 21, 0.1);
  }

  .btn-show-request {
    display: none !important;
  }

  /* Medication Page on Mobile */
  .medication-container {
    padding: 0;
    max-width: 100%;
    gap: 16px;
  }

  .medication-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f1915;
  }

  .medication-subtitle {
    font-size: 13px;
    color: #7d7873;
  }

  .medication-col-8,
  .medication-col-4,
  .medication-col-12 {
    grid-column: span 12 !important;
    width: 100%;
  }

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

  .med-tags {
    width: 100%;
    flex-wrap: wrap;
  }

  .med-delivery-banner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .med-delivery-badge {
    margin-left: 0;
  }

  .med-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .med-reference-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .med-actions {
    flex-direction: column;
    gap: 8px;
  }

  .med-btn-primary,
  .med-btn-outline {
    width: 100%;
    justify-content: center;
  }

  .med-steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .med-apply-title {
    font-size: 17px;
  }

  /* Labs Page on Mobile (Matching Reference) */
  .labs-desktop-view {
    display: none !important;
  }

  .labs-mobile-view {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .labs-container {
    padding: 0;
    max-width: 100%;
    gap: 16px;
  }

  .labs-title {
    font-size: 24px;
    font-weight: 700;
    color: #1f1915;
    line-height: 1.15;
    margin: 0;
  }

  .labs-subtitle {
    font-size: 13px;
    color: #7d7873;
    margin-top: 4px;
  }

  /* 1. Kit Tracker Card */
  .m-labs-kit-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(31, 25, 21, 0.08);
    box-shadow: 0 4px 16px rgba(31, 25, 21, 0.04);
    overflow: hidden;
  }

  .m-labs-kit-body {
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

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

  .m-labs-kit-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eaeeff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .m-labs-kit-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    margin: 0 12px;
  }

  .m-labs-kit-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f1915;
    line-height: 1.25;
  }

  .m-labs-kit-sub {
    font-size: 12px;
    color: #7d7873;
  }

  .m-labs-kit-chevron {
    width: 14px;
    height: 14px;
    display: block;
    flex: none;
  }

  .m-labs-kit-progress {
    display: flex;
    gap: 4px;
    width: 100%;
  }

  .m-labs-kit-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #eaeeff;
  }

  .m-labs-kit-bar.is-active {
    background: #3a56db;
  }

  .m-labs-kit-footer {
    background: #f9f8f5;
    /* padding: 12px 16px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(31, 25, 21, 0.06);
    font-size: 13px;
    font-weight: 600;
  }

  .m-labs-kit-link-dark {
    color: #1f1915;
    text-decoration: none;
    cursor: pointer;
  }

  .m-labs-kit-link-blue {
    color: #4a6aff;
    text-decoration: none;
    cursor: pointer;
  }

  /* 2. Results Overview Card */
  .m-labs-results-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 16px;
    border: 1px solid rgba(31, 25, 21, 0.08);
    box-shadow: 0 4px 16px rgba(31, 25, 21, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .m-labs-results-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .m-labs-results-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .m-labs-results-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f1915;
    line-height: 1.2;
  }

  .m-labs-badge-sample {
    font-size: 11px;
    color: #7d7873;
    background: #f4f3f0;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
  }

  .m-labs-overview-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
    gap: 2px;
  }

  .m-labs-bar-optimal {
    flex: 58;
    background: #4a6aff;
    border-radius: 3px 0 0 3px;
  }

  .m-labs-bar-average {
    flex: 25;
    background: #9e9892;
  }

  .m-labs-bar-out {
    flex: 17;
    background: #e03e3e;
    border-radius: 0 3px 3px 0;
  }

  .m-labs-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .m-labs-breakdown-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
  }

  .m-labs-val-optimal {
    font-size: 18px;
    font-weight: 700;
    color: #4a6aff;
    min-width: 44px;
  }

  .m-labs-val-average {
    font-size: 18px;
    font-weight: 700;
    color: #5a5550;
    min-width: 44px;
  }

  .m-labs-val-out {
    font-size: 18px;
    font-weight: 700;
    color: #e03e3e;
    min-width: 44px;
  }

  .m-labs-breakdown-label {
    color: #7d7873;
    font-weight: 600;
  }

  /* 3. Controls Row (Toggle & Date) */
  .m-labs-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0;
  }

  .m-labs-view-toggle {
    background: #ebeae5;
    padding: 3px;
    border-radius: 999px;
    display: inline-flex;
    gap: 2px;
  }

  .m-labs-toggle-btn {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #7d7873;
    transition: all 0.2s ease;
  }

  .m-labs-toggle-btn.is-active {
    background: #ffffff;
    color: #1f1915;
    box-shadow: 0 2px 6px rgba(31, 25, 21, 0.08);
  }

  .m-labs-date-pill {
    background: #ffffff;
    border: 1px solid rgba(31, 25, 21, 0.12);
    border-radius: 999px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1f1915;
    box-shadow: 0 2px 6px rgba(31, 25, 21, 0.02);
  }

  .m-labs-date-pill img {
    width: 14px;
    height: 14px;
    display: block;
    cursor: pointer;
  }

  /* 4. Category Group Container */
  .m-labs-category-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px 16px;
    border: 1px solid rgba(31, 25, 21, 0.08);
    box-shadow: 0 4px 16px rgba(31, 25, 21, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .m-labs-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .m-labs-cat-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .m-labs-cat-badge.badge-purple {
    background: #f0eeff;
  }

  .m-labs-cat-badge.badge-yellow {
    background: #fff9e6;
  }

  .m-labs-cat-badge.badge-pink {
    background: #feecee;
  }

  .m-labs-cat-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f1915;
  }

  /* Sub-status header */
  .m-labs-substatus-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
  }

  .m-labs-substatus-head.is-optimal {
    color: #4a6aff;
  }

  .m-labs-substatus-head.is-average {
    color: #7d7873;
  }

  .m-labs-substatus-head.is-out {
    color: #e03e3e;
  }

  .m-labs-substatus-head img {
    width: 14px;
    height: 14px;
    display: block;
    flex: none;
  }

  /* Individual biomarker card */
  .m-labs-biomarker-card {
    background: #ffffff;
    border: 1px solid rgba(31, 25, 21, 0.1);
    border-radius: 14px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(31, 25, 21, 0.02);
  }

  .m-labs-bio-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .m-labs-bio-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .m-labs-bio-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f1915;
  }

  .m-labs-bio-desc {
    font-size: 12px;
    color: #7d7873;
  }

  .m-labs-bio-share {
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #7d7873;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .m-labs-bio-share img {
    width: 16px;
    height: 16px;
    display: block;
  }

  .m-labs-bio-vals {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .m-labs-bio-val {
    font-size: 16px;
    font-weight: 700;
    color: #1f1915;
  }

  .m-labs-bio-unit {
    font-size: 12px;
    color: #7d7873;
    font-weight: 600;
  }

  .m-labs-bio-delta {
    font-size: 11px;
    font-weight: 600;
    color: #7d7873;
    background: #f4f3f0;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 2px;
  }

  /* Range Slider Bar */
  .m-labs-range-bar {
    position: relative;
    display: flex;
    height: 6px;
    border-radius: 3px;
    gap: 4px;
    margin-top: 4px;
  }

  .m-labs-range-seg {
    flex: 1;
    border-radius: 2px;
  }

  .m-labs-range-seg.seg-pink {
    background: #feecee;
  }

  .m-labs-range-seg.seg-gray {
    background: #f0efea;
  }

  .m-labs-range-seg.seg-blue-light {
    background: #eaeeff;
  }

  /* Highlighted segments */
  .m-labs-range-seg.active-blue {
    background: #3a56db !important;
  }

  .m-labs-range-seg.active-gray {
    background: #5a5550 !important;
  }

  .m-labs-range-seg.active-red {
    background: #e03e3e !important;
  }

  .m-labs-pointer {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 14px;
    background: #1f1915;
    border-radius: 2px;
    transform: translateX(-50%);
  }

  .pos-seg-1 {
    left: 10%;
  }
  .pos-seg-2 {
    left: 30%;
  }
  .pos-seg-3 {
    left: 50%;
  }
  .pos-seg-4 {
    left: 70%;
  }
  .pos-seg-5 {
    left: 90%;
  }

  /* 5. All Panels Section */
  .m-labs-panels-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px 16px;
    border: 1px solid rgba(31, 25, 21, 0.08);
    box-shadow: 0 4px 16px rgba(31, 25, 21, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

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

  .m-labs-panels-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f1915;
  }

  .m-labs-download-all {
    font-size: 13px;
    font-weight: 600;
    color: #4a6aff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .m-labs-download-all img {
    width: 14px;
    height: 14px;
    display: block;
  }

  .m-labs-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(31, 25, 21, 0.06);
  }

  .m-labs-panel-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .m-labs-panel-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .m-labs-panel-num {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4a6aff 0%, #2f49c9 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .m-labs-panel-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .m-labs-panel-label {
    font-size: 11px;
    color: #7d7873;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .m-labs-panel-date {
    font-size: 14px;
    font-weight: 600;
    color: #1f1915;
  }

  .m-labs-panel-desc {
    font-size: 12px;
    color: #7d7873;
  }

  .m-labs-btn-open {
    background: #ffffff;
    border: 1px solid rgba(31, 25, 21, 0.14);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1f1915;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .m-labs-btn-open:hover {
    background: #f9f8f5;
    color: #1f1915;
  }

  /* Desktop rules for mobile fallback */
  .labs-col-8,
  .labs-col-4,
  .labs-col-12 {
    grid-column: span 12 !important;
    width: 100%;
  }

  .btn-labs-action,
  .btn-order-kit {
    width: 100%;
    justify-content: center;
  }

  /* Documents Page on Mobile */
  .documents-container {
    gap: 16px;
  }

  .documents-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .documents-col-8,
  .documents-col-4 {
    grid-column: span 1;
  }

  .documents-card {
    padding: 16px;
    border-radius: 14px;
  }

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

  .documents-header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .btn-mobile-search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(31, 25, 21, 0.18);
    font-size: 13px;
    font-weight: 600;
    color: #1f1915;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }

  .btn-mobile-search-toggle:hover,
  .btn-mobile-search-toggle.is-active {
    background: #f8f6f1;
    border-color: #4a6aff;
    color: #4a6aff;
  }

  .documents-search-box {
    display: none;
    width: 100%;
    margin-top: 2px;
  }

  .documents-search-box.is-open {
    display: flex;
  }

  .documents-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .documents-pill {
    flex-shrink: 0;
  }

  .documents-pill-chat {
    display: none;
  }

  .documents-pill-hide-mobile {
    display: none;
  }

  .doc-list-item {
    gap: 10px;
  }

  .doc-item-actions {
    gap: 6px;
  }

  .btn-doc-view {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    gap: 5px;
    display: none;
  }

  .btn-doc-download {
    width: 36px;
    height: 36px;
  }

  /* Billing Page on Mobile */
  .billing-container {
    gap: 16px;
  }

  .billing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .billing-col-7,
  .billing-col-5,
  .billing-col-12 {
    grid-column: span 1;
  }

  .billing-card {
    padding: 16px;
    border-radius: 14px;
  }

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

  .btn-billing-action {
    width: 100%;
    justify-content: center;
  }

  .btn-billing-change-plan {
    grid-column: span 2;
  }

  .btn-billing-pause,
  .btn-billing-cancel {
    grid-column: span 1;
  }

  /* Invoice history mobile layout matching design */
  .billing-card-header .load-more-btn {
    font-size: 14px;
    font-weight: 600;
    color: #4a6aff;
    text-decoration: none;
  }

  .billing-invoice-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: auto;
    padding: 14px 0;
    border-bottom: 1px solid rgba(31, 25, 21, 0.08);
  }

  .billing-invoice-row:last-child {
    border-bottom: none;
    padding-bottom: 4px;
  }

  .billing-invoice-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f8f6f1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .billing-invoice-icon-box img {
    width: 20px;
    height: 20px;
  }

  .billing-invoice-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .billing-invoice-amount-desktop {
    display: none;
  }

  .billing-invoice-name {
    display: none;
  }

  .billing-invoice-amount-mobile {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1f1915;
    line-height: 1.2;
  }

  .billing-invoice-date {
    font-size: 14px;
    color: #71717a;
    line-height: 1.2;
  }

  .billing-invoice-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
  }

  .billing-badge-paid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #e7f3e8;
    color: #2e7d32;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
  }

  .btn-billing-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .btn-billing-download img {
    width: 18px;
    height: 18px;
  }

  /* Profile Page on Mobile */
  .profile-container {
    padding: 16px;
    gap: 16px;
  }

  .profile-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .profile-col-7,
  .profile-col-5 {
    grid-column: span 1;
    width: 100%;
  }

  .profile-card {
    padding: 16px;
    border-radius: 14px;
  }

  .profile-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .profile-form-col-1,
  .profile-form-col-2 {
    grid-column: span 1;
  }

  .btn-profile-save,
  .btn-profile-secondary {
    width: 100%;
    justify-content: center;
  }

  .profile-security-actions {
    flex-direction: column;
    gap: 8px;
  }

  .btn-security-action {
    width: 100%;
    justify-content: center;
  }

  /* Chat page on mobile */
  .chat-container {
    padding: 16px;
    gap: 16px;
  }

  .chat-card {
    max-width: 100%;
    height: calc(100vh - 160px);
    min-height: 480px;
    border-radius: 16px;
  }

  .chat-msg-col,
  .chat-msg-row.msg-outgoing,
  .chat-instruction-card {
    max-width: 90%;
  }

  .chat-instruction-card {
    margin-left: 20px;
  }

  /* Login page on mobile */
  .login-root {
    padding: 16px;
    min-height: 100vh;
  }

  .login-orb-top {
    width: 320px;
    height: 320px;
    right: -80px;
    top: -100px;
  }

  .login-orb-bottom {
    width: 340px;
    height: 340px;
    left: -100px;
    bottom: -120px;
  }

  .login-card-outer {
    padding: 10px;
    border-radius: 20px;
    width: 100%;
  }

  .login-card {
    width: 100%;
    padding: 28px 20px 24px;
    border-radius: 16px;
    gap: 20px;
  }

  .login-form {
    gap: 20px;
  }

  /* Modal Cancel on Mobile */
  .modal-cancel-dialog {
    width: 100%;
    margin: 0 auto;
    border-radius: 16px;
  }

  .modal-cancel-header {
    padding: 18px 18px 4px;
  }

  .modal-cancel-body {
    padding: 16px 18px 20px;
    gap: 14px;
  }

  .modal-cancel-footer {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 16px 18px;
  }

  .btn-cancel-keep,
  .btn-cancel-confirm {
    width: 100%;
    justify-content: center;
  }

  /* Additional Modals on Mobile */
  .modal-dialog-box {
    width: 100%;
    margin: 0 auto;
    border-radius: 16px;
  }

  .modal-box-header {
    padding: 18px 18px 4px;
  }

  .modal-box-body {
    padding: 16px 18px 20px;
    gap: 14px;
  }

  .modal-box-footer {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 16px 18px;
  }

  .btn-modal-secondary,
  .btn-modal-primary {
    width: 100%;
    justify-content: center;
  }

  .modal-kit-tooltip-popover {
    left: auto;
    right: 0;
    width: 240px;
  }

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

/* --------------------------------------------------------------------------
   Added by the Keen UI rebuild (not part of the original template): none of
   the template's action-button classes define a :disabled state, so a
   disabled button (validation-gated or mid-AJAX) looks identical to an
   enabled one. This is a site-wide fix, not page-scoped, since these button
   classes are shared across every page/modal in this new UI.
   -------------------------------------------------------------------------- */
button:disabled,
button[disabled] {
  opacity: 0.55;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Notifications bell dropdown (Keen UI rebuild - not part of the original
   template, which only had a static bell icon with a bare dot). Reuses
   .topbar-dropdown-menu as the base panel style for visual consistency
   with the existing user-menu dropdown; this block only adds what's
   specific to a scrollable notification list.
   -------------------------------------------------------------------------- */
.keen-notif-panel {
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 0;
  overflow: hidden;
}

.keen-notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #1f1915;
  border-bottom: 1px solid rgba(31, 25, 21, 0.08);
}

.keen-notif-count-pill {
  font-size: 11px;
  font-weight: 700;
  color: #4a6aff;
  background: #eaeeff;
  border-radius: 999px;
  padding: 2px 8px;
}

.keen-notif-list {
  /* Deliberately shorter than the worst case (shortest) 5-item height, not
     just the typical one: a single-line message item is roughly 50-55px
     (20px padding + ~16px message line + ~13px time line + gap), so 5 of
     them can run as low as ~265px - if max-height were anywhere near or
     above that, as it originally was (360px), the list often wouldn't
     actually overflow with just the first page loaded, so no scrollbar
     would ever appear and scroll-triggered loading could never fire.
     Capping it comfortably under that floor guarantees the list always
     overflows once 5 items are in, so there's always a working, visible
     scrollbar to reach older/read history, regardless of message length. */
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(31, 25, 21, 0.25) transparent;
}

.keen-notif-list::-webkit-scrollbar {
  width: 6px;
}

.keen-notif-list::-webkit-scrollbar-thumb {
  background-color: rgba(31, 25, 21, 0.25);
  border-radius: 999px;
}

.keen-notif-list::-webkit-scrollbar-track {
  background: transparent;
}

.keen-notif-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: #7d7873;
}

.keen-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: #1f1915;
  transition: background-color 0.15s ease;
}

.keen-notif-item:hover {
  background-color: #f8f6f1;
  color: #1f1915;
}

.keen-notif-item-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a6aff;
  margin-top: 6px;
}

.keen-notif-item.is-read .keen-notif-item-dot {
  background: transparent;
}

.keen-notif-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.keen-notif-item-msg {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.keen-notif-item.is-read .keen-notif-item-msg {
  font-weight: 500;
  color: #6a6662;
}

.keen-notif-item-time {
  font-size: 11px;
  color: #7d7873;
}

/* Numbered unread-count badge on the bell icon itself (replaces the plain
   .topbar-badge-dot for this use - same absolute top-right anchor, sized
   to hold "9+" rather than being a bare dot, matching .sidebar-nav-badge's
   numbered-pill look for visual consistency with the sidebar's own
   unread-count badges). */
.topbar-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff6b35;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid #fff;
}

/* Infinite-scroll "loading more" row, appended at the bottom of
   .keen-notif-list while the next page fetches. */
.keen-notif-loading-row {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #7d7873;
}

/* ==========================================================================
   Toastr (master-assets/toastr) redesign for the Keen theme.
   toastr.min.css ships its own boxy, saturated full-color-block look with
   baked-in base64 PNG icons (see #toast-container>.toast-success etc.,
   all !important) - there was no existing toastr.options/CSS override
   anywhere in the app (old or new UI) to preserve, so this replaces it
   outright: white card + layered elevation shadow + a soft type-tinted glow
   + a tinted icon badge, matching the .modal-confirm-icon
   / .billing-badge-* pattern already used for status/severity elsewhere in
   this theme (light tint background behind a colored icon, not a solid
   color block), pushed further with a glow/accent treatment so the toast
   reads as a deliberately-designed floating card rather than a flat popup.
   Reuses the same status icon SVGs already shipped for those badges so the
   iconography stays consistent. Scoped here (keen-custom.css, only loaded
   by the new app-keen layout) rather than the shared
   toastr.min.css/footer.blade.php, so the old UI's toastr appearance is
   untouched. Companion toastr.options JS defaults live in
   keen-footer.blade.php.

   IMPORTANT load-order note: toastr.min.css must be linked BEFORE this file
   in keen-header.blade.php. Every rule below shares the same selector
   specificity as toastr.min.css's own #toast-container rules (opacity:.8,
   box-shadow:0 0 12px #999, background-image:...!important), so on a tie
   the stylesheet that appears LATER in <head> wins - this file relies on
   being that later stylesheet. opacity/box-shadow/background are also
   pinned with !important here as a second line of defense, since a
   previous version of this file (loaded before toastr.min.css) silently
   lost every one of those ties to toastr's own defaults, which is what
   made toasts look washed-out/transparent despite this override existing. */
#toast-container {
  z-index: 999999;
}

#toast-container > div {
  position: relative;
  /* toastr.min.css's own default is overflow:hidden - this override had
     flipped it to visible with no documented reason, and nothing here
     actually needs content to escape the card (the icon badge below sits
     well inside the card's bounds, box-shadow isn't affected by an
     element's own overflow). The real cost: with overflow:visible, the
     progress bar's bottom corners were never clipped TO the card's own
     16px radius, and a border-radius declared directly on a 3-4px-tall bar
     can't geometrically reproduce a matching curve at that height - it
     just looks like a diagonal cut, not a rounded corner that lines up
     with the card beneath it. Restoring overflow:hidden lets the card clip
     the bar (and anything else) to its exact rounded shape by definition,
     so the progress bar is guaranteed to sit flush against the card instead
     of needing its own radius to approximate it (removed below). */
  overflow: hidden;
  margin: 0 0 14px;
  padding: 16px 18px 16px 64px;
  width: 340px;
  border-radius: 16px;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(31, 25, 21, 0.09);
  box-shadow:
    0 2px 6px rgba(31, 25, 21, 0.1),
    0 14px 28px -6px rgba(31, 25, 21, 0.22),
    0 32px 64px -20px rgba(31, 25, 21, 0.32) !important;
  color: #1f1915;
  opacity: 1 !important;
  filter: none !important;
  font-family: "Hanken Grotesk", "DM Sans", sans-serif;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#toast-container > div:hover {
  transform: translateY(-2px);
  opacity: 1 !important;
  filter: none !important;
}

#toast-container > div:before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}

#toast-container > .toast-success {
  background-color: #ffffff !important;
  box-shadow:
    0 2px 6px rgba(31, 25, 21, 0.1),
    0 14px 28px -6px rgba(31, 25, 21, 0.22),
    0 0 0 1px rgba(31, 169, 124, 0.16),
    0 14px 32px -8px rgba(31, 169, 124, 0.4) !important;
}
#toast-container > .toast-success:before {
  background-color: #e7f3e8;
  background-image: url("../images/icons/icon-check-circle-green.svg") !important;
  box-shadow: 0 0 0 5px rgba(31, 169, 124, 0.12);
}

#toast-container > .toast-error {
  background-color: #ffffff !important;
  box-shadow:
    0 2px 6px rgba(31, 25, 21, 0.1),
    0 14px 28px -6px rgba(31, 25, 21, 0.22),
    0 0 0 1px rgba(229, 72, 77, 0.18),
    0 14px 32px -8px rgba(229, 72, 77, 0.42) !important;
}
#toast-container > .toast-error:before {
  background-color: #fbe7e7;
  background-image: url("../images/icons/icon-error-circle-red.svg") !important;
  box-shadow: 0 0 0 5px rgba(229, 72, 77, 0.12);
}

#toast-container > .toast-warning {
  background-color: #ffffff !important;
  box-shadow:
    0 2px 6px rgba(31, 25, 21, 0.1),
    0 14px 28px -6px rgba(31, 25, 21, 0.22),
    0 0 0 1px rgba(245, 124, 0, 0.18),
    0 14px 32px -8px rgba(245, 124, 0, 0.38) !important;
}
#toast-container > .toast-warning:before {
  background-color: #ffede6;
  background-image: url("../images/icons/icon-warning-orange.svg") !important;
  box-shadow: 0 0 0 5px rgba(245, 124, 0, 0.12);
}

#toast-container > .toast-info {
  background-color: #ffffff !important;
  box-shadow:
    0 2px 6px rgba(31, 25, 21, 0.1),
    0 14px 28px -6px rgba(31, 25, 21, 0.22),
    0 0 0 1px rgba(74, 106, 255, 0.18),
    0 14px 32px -8px rgba(74, 106, 255, 0.4) !important;
}
#toast-container > .toast-info:before {
  background-color: #eaeeff;
  background-image: url("../images/icons/icon-info-blue.svg") !important;
  box-shadow: 0 0 0 5px rgba(74, 106, 255, 0.12);
}

#toast-container > div .toast-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: #1f1915;
  margin-bottom: 2px;
}

#toast-container > div .toast-message {
  font-size: 13px;
  line-height: 1.5;
  color: #524e48;
}

#toast-container > div .toast-message a,
#toast-container > div .toast-message label {
  color: #4a6aff;
}
#toast-container > div .toast-message a:hover {
  color: #3a56db;
  text-decoration: underline;
}

#toast-container > div .toast-close-button {
  position: absolute;
  top: 10px;
  right: 12px;
  float: none;
  width: 22px;
  height: 22px;
  line-height: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #9a958f;
  text-shadow: none;
  opacity: 1;
  border-radius: 50%;
}
#toast-container > div .toast-close-button:hover,
#toast-container > div .toast-close-button:focus {
  color: #1f1915;
  background: #f1eee8;
  opacity: 1;
}

#toast-container > div .toast-progress {
  /* No border-radius here anymore - the card's own overflow:hidden now
     clips this to its exact 16px corner, which a radius on a 4px-tall bar
     could never reproduce on its own. A soft gradient (base color fading
     to a lighter tint at the leading/shrinking edge) reads as a more
     deliberate, polished bar than a flat color block. */
  height: 4px;
  background-color: #4a6aff;
  background-image: linear-gradient(90deg, #4a6aff 0%, #7d94ff 100%);
  opacity: 1;
}
#toast-container > .toast-success .toast-progress {
  background-color: #1fa97c;
  background-image: linear-gradient(90deg, #1fa97c 0%, #4dc497 100%);
}
#toast-container > .toast-error .toast-progress {
  background-color: #e5484d;
  background-image: linear-gradient(90deg, #e5484d 0%, #ed7579 100%);
}
#toast-container > .toast-warning .toast-progress {
  background-color: #f57c00;
  background-image: linear-gradient(90deg, #f57c00 0%, #f8a94d 100%);
}
#toast-container > .toast-info .toast-progress { background-color: #4a6aff; }

@media all and (max-width: 480px) {
  #toast-container > div {
    width: calc(100vw - 32px);
    padding: 16px 18px 16px 58px;
  }
}