/* inmediQ variables */
:root {
  /* Primary colours */
  --primary-color-1: #1C3968;
  --primary-color-2: #0076C0;
  --primary-color-3: #575757;
  --primary-color-4: #B6A310;
  --primary-color-1-light1: #465380;
  --primary-color-2-light1: #008DCE;
  --primary-color-3-light1: #878787;
  --primary-color-4-light1: #C5B348;
  --primary-color-1-light2: #71769B;
  --primary-color-2-light2: #6BA8DC;
  --primary-color-3-light2: #B2B2B2;
  --primary-color-4-light2: #D2C479;
  --primary-color-1-light3: #9FA0BB;
  --primary-color-2-light3: #A4C3E8;
  --primary-color-3-light3: #DADADA;
  --primary-color-4-light3: #E3D9A8;
  --primary-color-1-light4: #CECDDD;
  --primary-color-2-light4: #D3E1F4;
  --primary-color-3-light4: #EDEDED;
  --primary-color-4-light4: #F0EBD4;
  /* Secondary colours */
  --secondary-color-1: #E53B11;
  --secondary-color-2: #820B20;
  --secondary-color-3: #F39200;
  --secondary-color-4: #FECC00;
  --secondary-color-5: #009982;
  --secondary-color-6: #00567C;
  --secondary-color-1-light1: #EB6739;
  --secondary-color-2-light1: #9A373D;
  --secondary-color-3-light1: #F7A941;
  --secondary-color-4-light1: #FED633;
  --secondary-color-5-light1: #0AAB9A;
  --secondary-color-6-light1: #357996;
  --secondary-color-1-light2: #F19267;
  --secondary-color-2-light2: #B46563;
  --secondary-color-3-light2: #FAC075;
  --secondary-color-4-light2: #FEE066;
  --secondary-color-5-light2: #68C0B4;
  --secondary-color-6-light2: #6699AF;
  --secondary-color-1-light3: #F8B999;
  --secondary-color-2-light3: #CD9692;
  --secondary-color-3-light3: #FDD5A5;
  --secondary-color-4-light3: #FFEB9A;
  --secondary-color-5-light3: #A6D6CE;
  --secondary-color-6-light3: #99BBCB;
  --secondary-color-1-light4: #FCDECD;
  --secondary-color-2-light4: #E6C9C6;
  --secondary-color-3-light4: #FEEAD3;
  --secondary-color-4-light4: #FFFFC0;
  --secondary-color-5-light4: #D6E8E7;
  --secondary-color-6-light4: #CCDDE5;
  /* Limbs */
  --color-left-limb: #F39200;
  --color-right-limb: #02806D;
}

/* RightDrawer styles (SCSS)
   - Overlay and panel start exactly below notch + topbar
   - No extra gaps; both extend to the bottom edge
   - Footer keeps content above the home indicator via env(safe-area-inset-bottom)
*/
/* ---------- Existing component tokens (kept) ---------- */
:root {
  --rd-width: clamp(320px, 40vw, 540px);
  --rd-breakpoint: 768px;
  --rd-z: 1000;
  --rd-scrim-z: 900;
  --rd-scrim-bg: rgba(0, 0, 0, 0.35);
  --rd-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
  --rd-text: #111;
  --rd-card: #fff;
  --rd-accent: #4f46e5;
  --rd-muted: #6b7280;
  --rd-footer-base: 28px; /* base footer spacing */
  --rd-safe-bottom: 0px; /* optional JS-driven value (kept for compatibility) */
}

/* ---------- SCSS locals (compile-time only) ---------- */
/* Match your topbar metrics: 40px height + 0.2rem top/bottom padding */
/* 0.2rem + 0.2rem */
/* Single top offset: safe area + topbar height + vertical padding */
/* ---------- Overlay scrim ---------- */
.rd-overlay {
  /* Start below notch + topbar; cover full bottom (no premature stop) */
  position: fixed;
  top: calc(env(safe-area-inset-top) + 40px + 0.4rem);
  right: 0;
  bottom: 0; /* was a positive offset -> caused early stop */
  left: 0;
  z-index: var(--rd-scrim-z);
  background: var(--rd-scrim-bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  /* ---------- Drawer panel ---------- */
  /* Optional debug stripe for bottom safe area
  .rd-drawer.rd-debug-safe::after {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: env(safe-area-inset-bottom);
    background: rgba(255,0,0,.15);
    pointer-events: none;
  }
  */
}
.rd-overlay.rd-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease;
}
.rd-overlay .rd-drawer {
  /* Align with overlay top; do not exceed bottom edge */
  position: fixed;
  top: calc(env(safe-area-inset-top) + 40px + 0.4rem);
  right: 0;
  /* Height = viewport minus top offset (no bottom subtraction) */
  height: calc(100vh - calc(env(safe-area-inset-top) + 40px + 0.4rem));
  /* Prefer 100svh on WebKit to avoid PWA overshoot; place last to win there */
  width: var(--rd-width);
  max-width: 100vw;
  background: var(--rd-card);
  color: var(--rd-text);
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--rd-shadow);
  z-index: var(--rd-z);
  /* Keep content clear of the home indicator; total height remains unchanged */
  padding-bottom: env(safe-area-inset-bottom);
  /* Internal layout */
  display: grid;
  grid-template-rows: auto 1fr auto; /* header / body / footer */
  overflow: hidden;
  /* Slide-in */
  transform: translate3d(100%, 0, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint size style;
  /* Full width on small screens */
  /* ---------- Header ---------- */
  /* ---------- Body ---------- */
  /* ---------- Footer ---------- */
}
@supports (height: 100dvh) {
  .rd-overlay .rd-drawer {
    height: calc(100dvh - calc(env(safe-area-inset-top) + 40px + 0.4rem));
  }
}
@supports (height: 100svh) {
  .rd-overlay .rd-drawer {
    height: calc(100svh - calc(env(safe-area-inset-top) + 40px + 0.4rem));
  }
}
.rd-overlay .rd-drawer.rd-open {
  transform: translate3d(0, 0, 0);
}
@media (max-width: var(--rd-breakpoint)) {
  .rd-overlay .rd-drawer {
    width: 100vw;
    border-left: none;
  }
}
.rd-overlay .rd-drawer .rd-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 10px;
  background: var(--rd-card);
}
.rd-overlay .rd-drawer .rd-header .btn {
  display: inline-flex;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #575757;
  gap: 0.4rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rd-overlay .rd-drawer .rd-header .btn .text {
  padding-top: 3px;
}
.rd-overlay .rd-drawer .rd-header .btn:disabled {
  opacity: 0.2;
  cursor: default;
}
.rd-overlay .rd-drawer .rd-header .btn:not(:disabled):hover {
  background: rgb(249.75, 249.75, 249.75);
}
.rd-overlay .rd-drawer .rd-header .btn:not(:disabled):active {
  background: #0076C0;
  color: #fff;
}
.rd-overlay .rd-drawer .rd-header .btn:focus-visible {
  outline: none;
}
.rd-overlay .rd-drawer .rd-header .btn.close .icon {
  width: 14px !important;
  height: 14px !important;
  -webkit-mask-image: url("/images/close.svg");
  mask-image: url("/images/close.svg");
  background: currentColor;
}
.rd-overlay .rd-drawer .right-drawer-body {
  overflow: auto;
  min-height: 0; /* required for grid scroll */
  -webkit-overflow-scrolling: touch;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px 20px 12px 0px;
}
.rd-overlay .rd-drawer .rd-footer {
  background: var(--rd-card);
  padding: 12px 12px;
}

/* ---------- Global focus + reduced motion ---------- */
:where(button, a, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--rd-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .rd-drawer, .rd-overlay {
    transition: none;
  }
}