/* ==========================================================================
   Button Component (.lm-btn)
   LIVMARLI HCP button component - uses .lm-btn prefix to avoid collision
   with DaisyUI .btn styles from the global theme CSS.
   
   Based on Figma design system with variants:
   branded, unbranded, algs, pfic, outlined, ko-outlined, map, text
   ========================================================================== */

/* ==========================================================================
   Brand Colors (LIVMARLI Design System)
   Based on Figma button specifications
   ========================================================================== */
:root {
  /* Branded button colors (dark navy) */
  --lm-color-branded: #003A70;
  --lm-color-branded-hover: #002E59;
  --lm-color-branded-pressed: #00594C;
  --lm-color-branded-disabled: #6C8FAD;
  
  /* Unbranded button colors (bright blue) */
  --lm-color-unbranded: #0077C8;
  --lm-color-unbranded-hover: #005FA3;
  --lm-color-unbranded-pressed: #003A70;
  --lm-color-unbranded-disabled: #6C8FAD;
  
  /* ALGS button colors (gold/yellow) */
  --lm-color-algs: #C5A900;
  --lm-color-algs-hover: #A68F00;
  --lm-color-algs-pressed: #5C5016;
  --lm-color-algs-disabled: #C9B87A;
  
  /* PFIC button colors (green) */
  --lm-color-pfic: #00A651;
  --lm-color-pfic-hover: #008040;
  --lm-color-pfic-pressed: #004D30;
  --lm-color-pfic-disabled: #6CAD8B;
  
  /* Outlined button colors */
  --lm-color-outlined: #0077C8;
  --lm-color-outlined-hover: #003A70;
  --lm-color-outlined-pressed: #00594C;
  --lm-color-outlined-disabled: #9B9B9B;
  
  /* MAP button colors (magenta/pink) */
  --lm-color-map: #D60080;
  --lm-color-map-hover: #B5006B;
  --lm-color-map-pressed: #003A70;
  --lm-color-map-disabled: #C482A8;
  
  /* Text link colors */
  --lm-color-text-link: #D60080;
  --lm-color-text-link-hover: #003A70;
  --lm-color-text-link-pressed: #00594C;
  --lm-color-text-link-disabled: #9B9B9B;
  
  /* Shared colors */
  --lm-color-white: #FFFFFF;
  --lm-color-navy: #003A70;
  --lm-color-focus: #0077C8;
}

/* ==========================================================================
   Base Button
   ========================================================================== */

.lm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 9999px;
  padding: 0.75em 1.5em;
  min-height: 44px;
  transition:
    background 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Override link states - prevent underline and visited color */
a.lm-btn,
a.lm-btn:link,
a.lm-btn:visited,
a.lm-btn:hover,
a.lm-btn:active,
a.lm-btn:focus,
a.lm-btn:focus-visible {
  text-decoration: none;
}

/* Prevent visited/focus color changes on white-text button variants */
a.lm-btn--branded,
a.lm-btn--branded:visited,
a.lm-btn--branded:focus,
a.lm-btn--branded:focus-visible,
a.lm-btn--unbranded,
a.lm-btn--unbranded:visited,
a.lm-btn--unbranded:focus,
a.lm-btn--unbranded:focus-visible,
a.lm-btn--algs,
a.lm-btn--algs:visited,
a.lm-btn--algs:focus,
a.lm-btn--algs:focus-visible,
a.lm-btn--map,
a.lm-btn--map:visited,
a.lm-btn--map:focus,
a.lm-btn--map:focus-visible,
a.lm-btn--ko-outlined,
a.lm-btn--ko-outlined:visited,
a.lm-btn--ko-outlined:focus,
a.lm-btn--ko-outlined:focus-visible {
  color: var(--lm-color-white);
}

/* Navy/dark text variants - preserve color */
a.lm-btn--pfic,
a.lm-btn--pfic:visited,
a.lm-btn--pfic:focus,
a.lm-btn--pfic:focus-visible {
  color: var(--lm-color-navy);
}

a.lm-btn--outlined,
a.lm-btn--outlined:visited,
a.lm-btn--outlined:focus,
a.lm-btn--outlined:focus-visible {
  color: #003A70;
}

/* Focus state - 2px blue outline with 2px offset per Figma */
.lm-btn:focus-visible {
  outline: 2px solid #0055B8;
  outline-offset: 2px;
}

/* Pressed/Active state */
.lm-btn:active:not(:disabled):not(.lm-btn--disabled) {
  transform: scale(0.98);
}

/* Disabled state */
.lm-btn:disabled,
.lm-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Sizes
   ========================================================================== */

.lm-btn--sm {
  font-size: 0.875rem;
  padding: 0.5em 1.25em;
  min-height: 36px;
  gap: 0.25rem;
}

.lm-btn--md {
  font-size: 1rem;
  padding: 0.75em 1.5em;
  min-height: 44px;
}

.lm-btn--lg {
  font-size: 1.125rem;
  padding: 0.875em 2em;
  min-height: 52px;
}

/* ==========================================================================
   Icons
   ========================================================================== */

.lm-btn__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  transition: transform 150ms ease;
}

.lm-btn__icon--left {
  order: -1;
}

.lm-btn__icon--right {
  order: 1;
}

/* Icon animation on hover */
.lm-btn:hover:not(:disabled):not(.lm-btn--disabled) .lm-btn__icon--right {
  transform: translateX(2px);
}

.lm-btn:hover:not(:disabled):not(.lm-btn--disabled) .lm-btn__icon--left {
  transform: translateX(-2px);
}

/* ==========================================================================
   Variant: Branded (Gradient to solid navy)
   Default/Focus: Gradient | Hover: Solid navy | Pressed: Darkened navy
   ========================================================================== */

.lm-btn--branded {
  color: var(--lm-color-white);
  background: linear-gradient(90deg, #005DA6 0%, #1B3D6D 100%);
  border-color: transparent;
  /* No transition on background - prevents white flash when switching from gradient to solid */
  transition:
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}

.lm-btn--branded:focus-visible {
  background: linear-gradient(90deg, #005DA6 0%, #1B3D6D 100%);
}

.lm-btn--branded:hover:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: #003A70;
  border-color: transparent;
}

.lm-btn--branded:active:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #003A70;
  border-color: transparent;
}

.lm-btn--branded:disabled,
.lm-btn--branded.lm-btn--disabled {
  color: var(--lm-color-white);
  background: linear-gradient(90deg, #005DA6 0%, #1B3D6D 100%);
  border-color: transparent;
  opacity: 0.64;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Variant: Unbranded (Dark blue filled)
   For unbranded/disease education content
   Default/Focus: Solid #003A70 | Hover: Light blue darkened | Pressed: More darkened
   ========================================================================== */

.lm-btn--unbranded {
  color: var(--lm-color-white);
  background: #003A70;
  border-color: transparent;
}

.lm-btn--unbranded:focus-visible {
  outline-color: #003A70;
}

.lm-btn--unbranded:hover:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), #009ED9;
  border-color: transparent;
}

.lm-btn--unbranded:active:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%), #009ED9;
  border-color: transparent;
}

.lm-btn--unbranded:disabled,
.lm-btn--unbranded.lm-btn--disabled {
  color: var(--lm-color-white);
  background: #003A70;
  border-color: transparent;
  opacity: 0.64;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Variant: ALGS (Green gradient)
   For ALGS-specific content
   Default/Focus: Green gradient | Hover: Solid green | Pressed: Darkened green
   ========================================================================== */

.lm-btn--algs {
  color: var(--lm-color-white);
  background: linear-gradient(90deg, #3F9D30 0%, #2D8A57 100%);
  border: 1.5px solid #0F8A00;
  /* No transition on background - prevents flash when switching from gradient to solid */
  transition:
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}

.lm-btn--algs:focus-visible {
  background: linear-gradient(90deg, #3F9D30 0%, #2D8A57 100%);
  outline-color: #0F8A00;
}

.lm-btn--algs:hover:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: #0F8A00;
  border-color: #0F8A00;
}

.lm-btn--algs:active:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #0F8A00;
  border-color: #0F8A00;
}

.lm-btn--algs:disabled,
.lm-btn--algs.lm-btn--disabled {
  color: var(--lm-color-white);
  background: linear-gradient(90deg, #3F9D30 0%, #2D8A57 100%);
  border-color: #0F8A00;
  opacity: 0.64;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Variant: PFIC (Yellow/Gold gradient)
   For PFIC-specific content
   Default/Focus/Disabled: Yellow gradient | Hover/Pressed: Navy (same as branded)
   ========================================================================== */

.lm-btn--pfic {
  color: var(--lm-color-navy);
  background: linear-gradient(90deg, #FEC35A 0%, #FBAA19 100%);
  border: 1.5px solid #C37F00;
  /* No transition on background - prevents flash when switching from gradient to solid */
  transition:
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}

.lm-btn--pfic:focus-visible {
  background: linear-gradient(90deg, #FEC35A 0%, #FBAA19 100%);
  outline-color: #C37F00;
}

.lm-btn--pfic:hover:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: #003A70;
  border-color: transparent;
}

.lm-btn--pfic:active:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), #003A70;
  border-color: transparent;
}

.lm-btn--pfic:disabled,
.lm-btn--pfic.lm-btn--disabled {
  color: var(--lm-color-navy);
  background: linear-gradient(90deg, #FEC35A 0%, #FBAA19 100%);
  border-color: #C37F00;
  opacity: 0.64;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Variant: Outlined (Transparent with navy border)
   Secondary actions, works on light backgrounds
   Default: 1.5px border | Hover: 3px border | Pressed: 3px border + light blue bg
   Border grows inward - padding compensates to keep button size constant
   ========================================================================== */

.lm-btn--outlined {
  color: #003A70;
  background-color: transparent;
  border: 1.5px solid #003A70;
}

.lm-btn--outlined:focus-visible {
  outline-color: #0055B8;
}

.lm-btn--outlined:hover:not(:disabled):not(.lm-btn--disabled) {
  color: #003A70;
  background-color: transparent;
  border: 3px solid #003A70;
  /* Reduce padding to compensate for thicker border - keeps button same size */
  padding: calc(0.75em - 1.5px) calc(1.5em - 1.5px);
}

.lm-btn--outlined:active:not(:disabled):not(.lm-btn--disabled) {
  color: #003A70;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.80) 100%), #0055B8;
  border: 3px solid #003A70;
  /* Reduce padding to compensate for thicker border - keeps button same size */
  padding: calc(0.75em - 1.5px) calc(1.5em - 1.5px);
}

.lm-btn--outlined:disabled,
.lm-btn--outlined.lm-btn--disabled {
  color: #003A70;
  background-color: transparent;
  border: 1.5px solid #003A70;
  opacity: 0.64;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Variant: KO Outlined (Knockout - white outline for dark backgrounds)
   Use on navy/dark backgrounds
   Default: 1.5px border | Hover: 3px border | Pressed: 3px border + dark blue bg
   Border grows inward - padding compensates to keep button size constant
   ========================================================================== */

.lm-btn--ko-outlined {
  color: var(--lm-color-white);
  background-color: transparent;
  border: 1.5px solid #FFF;
}

.lm-btn--ko-outlined:hover:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background-color: transparent;
  border: 3px solid #FFF;
  /* Reduce padding to compensate for thicker border - keeps button same size */
  padding: calc(0.75em - 1.5px) calc(1.5em - 1.5px);
}

.lm-btn--ko-outlined:active:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: rgba(0, 58, 112, 0.86);
  border: 3px solid #FFF;
  /* Reduce padding to compensate for thicker border - keeps button same size */
  padding: calc(0.75em - 1.5px) calc(1.5em - 1.5px);
}

/* Focus ring adjustment for dark backgrounds */
.lm-btn--ko-outlined:focus-visible {
  outline: 2px solid #FFF;
  outline-offset: 2px;
}

.lm-btn--ko-outlined:disabled,
.lm-btn--ko-outlined.lm-btn--disabled {
  color: var(--lm-color-white);
  background-color: transparent;
  border: 1.5px solid #FFF;
  opacity: 0.64;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Variant: MAP (Magenta/Pink filled)
   For MAP program content
   ========================================================================== */

.lm-btn--map {
  color: var(--lm-color-white);
  background: #D91C5C;
  border-color: transparent;
}

.lm-btn--map:focus-visible {
  outline-color: #17324D;
}

.lm-btn--map:hover:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), #D91C5C;
  border-color: transparent;
}

.lm-btn--map:active:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background: #17324D;
  border-color: transparent;
}

.lm-btn--map:disabled,
.lm-btn--map.lm-btn--disabled {
  color: var(--lm-color-white);
  background: #D91C5C;
  border-color: transparent;
  opacity: 0.64;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Variant: Text (Text link style)
   Minimal style for inline or low-emphasis actions
   ========================================================================== */

.lm-btn--text {
  color: #0055B8;
  background-color: transparent;
  border-color: transparent;
  padding-inline: 0.25rem;
  min-height: auto;
  border-radius: 0.25rem;
  font-weight: 500;
}

.lm-btn--text:focus-visible {
  outline: 2px solid #0055B8;
  outline-offset: 2px;
  border-radius: 50px;
}

.lm-btn--text:hover:not(:disabled):not(.lm-btn--disabled) {
  color: #003A70;
}

.lm-btn--text:active:not(:disabled):not(.lm-btn--disabled) {
  color: #003A70;
}

/* Text link disabled */
.lm-btn--text:disabled,
.lm-btn--text.lm-btn--disabled {
  color: #0055B8;
  opacity: 0.64;
  cursor: not-allowed;
  pointer-events: none;
}

/* Text link visited/focus state - prevent purple */
a.lm-btn--text:visited,
a.lm-btn--text:focus,
a.lm-btn--text:focus-visible {
  color: #0055B8;
}

/* Text variant on dark backgrounds */
.lm-btn--text.lm-btn--on-dark {
  color: var(--lm-color-white);
}

.lm-btn--text.lm-btn--on-dark:hover:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  opacity: 0.8;
}

a.lm-btn--text.lm-btn--on-dark:visited,
a.lm-btn--text.lm-btn--on-dark:focus,
a.lm-btn--text.lm-btn--on-dark:focus-visible {
  color: var(--lm-color-white);
}

/* ==========================================================================
   Outlined Size Variants - Padding Compensation
   When outlined buttons have size modifiers, compensate padding for
   border thickness change on hover/active states
   ========================================================================== */

/* Small outlined buttons */
.lm-btn--outlined.lm-btn--sm:hover:not(:disabled):not(.lm-btn--disabled),
.lm-btn--outlined.lm-btn--sm:active:not(:disabled):not(.lm-btn--disabled),
.lm-btn--ko-outlined.lm-btn--sm:hover:not(:disabled):not(.lm-btn--disabled),
.lm-btn--ko-outlined.lm-btn--sm:active:not(:disabled):not(.lm-btn--disabled) {
  padding: calc(0.5em - 1.5px) calc(1.25em - 1.5px);
}

/* Large outlined buttons */
.lm-btn--outlined.lm-btn--lg:hover:not(:disabled):not(.lm-btn--disabled),
.lm-btn--outlined.lm-btn--lg:active:not(:disabled):not(.lm-btn--disabled),
.lm-btn--ko-outlined.lm-btn--lg:hover:not(:disabled):not(.lm-btn--disabled),
.lm-btn--ko-outlined.lm-btn--lg:active:not(:disabled):not(.lm-btn--disabled) {
  padding: calc(0.875em - 1.5px) calc(2em - 1.5px);
}

/* ==========================================================================
   Utility: On dark background modifier
   Apply when button is placed on dark backgrounds
   ========================================================================== */

.lm-btn--on-dark.lm-btn--outlined {
  color: var(--lm-color-white);
  border-color: var(--lm-color-white);
}

.lm-btn--on-dark.lm-btn--outlined:hover:not(:disabled):not(.lm-btn--disabled) {
  color: var(--lm-color-white);
  background-color: var(--lm-color-outlined-hover);
  border-color: var(--lm-color-outlined-hover);
}