/* ==========================================================
   V2.8.9 — DESKTOP MEDICATION DRAWER HOTFIX
   Scope: presentation only. No medication logic, persistence,
   Firebase Functions, Firestore Rules, or clinical data changes.
   ========================================================== */

/*
  V2.8.8 regression:
  healthtech-ui.css globally forced every CV2 drawer to 410px with
  !important, overriding the dedicated 980px medication drawer.
  The medication calculator itself is a two-column desktop layout,
  so inside a 410px drawer the input column overflowed/clipped and
  only the result column remained visibly usable.

  Restore a dedicated wide desktop medication workspace while keeping
  the existing <=1023px bottom-sheet/mobile behavior untouched.
*/
@media (min-width:1024px){
  .cv2-drawer-panel.medication{
    width:min(980px,calc(100vw - 40px))!important;
    max-width:980px!important;
    overflow-x:hidden!important;
  }

  .cv2-drawer-panel.medication .cv2-drawer-body{
    overflow-x:hidden!important;
  }

  .cv2-drawer-panel.medication .cv2-med-layout{
    grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr)!important;
    gap:16px!important;
    align-items:start!important;
  }

  .cv2-drawer-panel.medication .cv2-med-input-panel,
  .cv2-drawer-panel.medication .cv2-med-output-panel{
    min-width:0!important;
  }

  .cv2-drawer-panel.medication .cv2-med-output-panel{
    position:sticky!important;
    top:82px!important;
  }
}

/* Slightly tighter desktop/tablet-landscape layout. */
@media (min-width:1024px) and (max-width:1199px){
  .cv2-drawer-panel.medication{
    width:min(900px,calc(100vw - 28px))!important;
  }

  .cv2-drawer-panel.medication .cv2-med-layout{
    grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr)!important;
    gap:12px!important;
  }
}