/**
 * Pharma Edge - Standardized Button System
 * =========================================
 * Centralized button sizing, spacing, and behavior.
 * All templates should include this file for consistent buttons.
 *
 * SIZE TOKENS (CSS custom properties):
 *   --btn-height-xs:  28px    (icon-only inline actions)
 *   --btn-height-sm:  32px    (table rows, compact toolbars)
 *   --btn-height-md:  38px    (default / forms / headers)
 *   --btn-height-lg:  44px    (primary CTAs, touch-friendly)
 *   --btn-height-xl:  50px    (hero / full-width mobile)
 *
 * CLASSES:
 *   .btn              — base reset + default (md) sizing
 *   .btn-xs           — extra-small modifier
 *   .btn-sm           — small modifier
 *   .btn-md           — medium (explicit, same as default)
 *   .btn-lg           — large modifier
 *   .btn-xl           — extra-large modifier
 *   .btn-icon          — square icon-only button (inherits size from modifier)
 *   .btn-block         — full-width
 *   .btn-primary       — primary color
 *   .btn-secondary     — secondary color
 *   .btn-success       — success color
 *   .btn-danger        — danger color
 *   .btn-warning       — warning color
 *   .btn-outline       — outline variant
 *   .btn-ghost         — transparent bg, text color only
 *
 * TOUCH ACCESSIBILITY:
 *   Minimum touch target is 44px on coarse-pointer devices,
 *   enforced via @media (pointer: coarse) on sm/xs buttons.
 *
 * RTL:
 *   Uses logical properties (margin-inline, padding-inline)
 *   so LTR/RTL adapts automatically. Icon gap uses flexbox gap.
 */

/* ===========================
   BUTTON SIZE TOKENS
   =========================== */
:root {
    /* Heights */
    --btn-height-xs: 28px;
    --btn-height-sm: 32px;
    --btn-height-md: 38px;
    --btn-height-lg: 44px;
    --btn-height-xl: 50px;

    /* Horizontal padding */
    --btn-px-xs: 8px;
    --btn-px-sm: 12px;
    --btn-px-md: 16px;
    --btn-px-lg: 20px;
    --btn-px-xl: 28px;

    /* Font sizes */
    --btn-fs-xs: 0.75rem;   /* 12px */
    --btn-fs-sm: 0.8125rem; /* 13px */
    --btn-fs-md: 0.875rem;  /* 14px */
    --btn-fs-lg: 0.9375rem; /* 15px */
    --btn-fs-xl: 1rem;      /* 16px */

    /* Icon sizes (match font-size + slight bump) */
    --btn-icon-xs: 0.875rem;  /* 14px */
    --btn-icon-sm: 1rem;      /* 16px */
    --btn-icon-md: 1.125rem;  /* 18px */
    --btn-icon-lg: 1.25rem;   /* 20px */
    --btn-icon-xl: 1.375rem;  /* 22px */

    /* Border radius */
    --btn-radius: 8px;
    --btn-radius-sm: 6px;
    --btn-radius-lg: 10px;
    --btn-radius-pill: 100px;

    /* Shared transition */
    --btn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================
   BASE BUTTON RESET
   =========================== */
.btn {
    /* Reset */
    margin: 0;
    border: none;
    outline: none;
    background: none;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;

    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    vertical-align: middle;
    white-space: nowrap;

    /* Default = md sizing */
    height: var(--btn-height-md);
    min-height: var(--btn-height-md);
    padding-block: 0;
    padding-inline: var(--btn-px-md);
    font-size: var(--btn-fs-md);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--btn-radius);
    transition: var(--btn-transition);

    /* Default appearance (neutral) */
    background: var(--bg-surface-secondary, #eef2f7);
    color: var(--text-primary, #334155);
    border: 1px solid var(--border-light, #e2e8f0);
}

.btn:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

.btn:focus-visible {
    outline: 2px solid var(--primary-lighter, #7ACEFF);
    outline-offset: 2px;
}

/* Icon inside button */
.btn i,
.btn svg {
    font-size: var(--btn-icon-md);
    line-height: 1;
    flex-shrink: 0;
}

/* ===========================
   SIZE MODIFIERS
   =========================== */

/* Extra Small */
.btn-xs,
.btn.btn-xs {
    height: var(--btn-height-xs);
    min-height: var(--btn-height-xs);
    padding-inline: var(--btn-px-xs);
    font-size: var(--btn-fs-xs);
    border-radius: var(--btn-radius-sm);
    gap: 4px;
}

.btn-xs i,
.btn-xs svg {
    font-size: var(--btn-icon-xs);
}

/* Small */
.btn-sm,
.btn.btn-sm {
    height: var(--btn-height-sm);
    min-height: var(--btn-height-sm);
    padding-inline: var(--btn-px-sm);
    font-size: var(--btn-fs-sm);
    border-radius: var(--btn-radius-sm);
    gap: 5px;
}

.btn-sm i,
.btn-sm svg {
    font-size: var(--btn-icon-sm);
}

/* Medium (explicit — same as default) */
.btn-md,
.btn.btn-md {
    height: var(--btn-height-md);
    min-height: var(--btn-height-md);
    padding-inline: var(--btn-px-md);
    font-size: var(--btn-fs-md);
    border-radius: var(--btn-radius);
    gap: 6px;
}

.btn-md i,
.btn-md svg {
    font-size: var(--btn-icon-md);
}

/* Large */
.btn-lg,
.btn.btn-lg {
    height: var(--btn-height-lg);
    min-height: var(--btn-height-lg);
    padding-inline: var(--btn-px-lg);
    font-size: var(--btn-fs-lg);
    border-radius: var(--btn-radius-lg);
    gap: 8px;
}

.btn-lg i,
.btn-lg svg {
    font-size: var(--btn-icon-lg);
}

/* Extra Large */
.btn-xl,
.btn.btn-xl {
    height: var(--btn-height-xl);
    min-height: var(--btn-height-xl);
    padding-inline: var(--btn-px-xl);
    font-size: var(--btn-fs-xl);
    border-radius: var(--btn-radius-lg);
    gap: 8px;
}

.btn-xl i,
.btn-xl svg {
    font-size: var(--btn-icon-xl);
}

/* ===========================
   ICON-ONLY BUTTONS
   =========================== */
.btn-icon {
    padding-inline: 0;
    aspect-ratio: 1;
    /* Width = height, set by size modifier or default md */
    width: var(--btn-height-md);
}

.btn-icon.btn-xs { width: var(--btn-height-xs); }
.btn-icon.btn-sm { width: var(--btn-height-sm); }
.btn-icon.btn-md { width: var(--btn-height-md); }
.btn-icon.btn-lg { width: var(--btn-height-lg); }
.btn-icon.btn-xl { width: var(--btn-height-xl); }

/* ===========================
   FULL-WIDTH BUTTON
   =========================== */
.btn-block {
    width: 100%;
}

/* ===========================
   COLOR VARIANTS
   =========================== */

/* Primary */
.btn-primary {
    background: var(--primary-gradient, linear-gradient(135deg, #173269 0%, #1F4699 100%));
    color: var(--text-white, #ffffff);
    border-color: transparent;
}

.btn-primary:hover {
    background: var(--primary-gradient-hover, linear-gradient(135deg, #1F4699 0%, #0F2B64 100%));
    filter: none;
    box-shadow: 0 4px 14px rgba(23, 50, 105, 0.35);
}

/* Secondary */
.btn-secondary {
    background: var(--secondary-gradient, linear-gradient(135deg, #475569 0%, #334155 100%));
    color: var(--text-white, #ffffff);
    border-color: transparent;
}

.btn-secondary:hover {
    background: var(--secondary-gradient-hover, linear-gradient(135deg, #64748b 0%, #475569 100%));
    filter: none;
    box-shadow: 0 4px 14px rgba(71, 85, 105, 0.3);
}

/* Success */
.btn-success {
    background: var(--success-gradient, linear-gradient(135deg, #27AE60 0%, #1E8449 100%));
    color: var(--text-white, #ffffff);
    border-color: transparent;
}

.btn-success:hover {
    background: var(--success-gradient-hover, linear-gradient(135deg, #2ecc71 0%, #27AE60 100%));
    filter: none;
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.35);
}

/* Danger */
.btn-danger {
    background: var(--danger-gradient, linear-gradient(135deg, #E74C3C 0%, #C0392B 100%));
    color: var(--text-white, #ffffff);
    border-color: transparent;
}

.btn-danger:hover {
    background: var(--danger-gradient-hover, linear-gradient(135deg, #f43f5e 0%, #E74C3C 100%));
    filter: none;
    box-shadow: 0 4px 14px rgba(231, 76, 60, 0.35);
}

/* Warning */
.btn-warning {
    background: var(--warning-gradient, linear-gradient(135deg, #F39C12 0%, #D68910 100%));
    color: var(--text-white, #ffffff);
    border-color: transparent;
}

.btn-warning:hover {
    background: var(--warning-gradient-hover, linear-gradient(135deg, #f59e0b 0%, #F39C12 100%));
    filter: none;
    box-shadow: 0 4px 14px rgba(243, 156, 18, 0.35);
}

/* Info */
.btn-info {
    background: var(--info-gradient, linear-gradient(135deg, #3498db 0%, #2980b9 100%));
    color: var(--text-white, #ffffff);
    border-color: transparent;
}

.btn-info:hover {
    background: var(--info-gradient-hover, linear-gradient(135deg, #60a5fa 0%, #3498db 100%));
    filter: none;
    box-shadow: 0 4px 14px rgba(52, 152, 219, 0.35);
}

/* ===========================
   OUTLINE VARIANTS
   =========================== */
.btn-outline {
    background: transparent;
    border: 1.5px solid var(--border-light, #e2e8f0);
    color: var(--text-primary, #334155);
}

.btn-outline:hover {
    background: var(--bg-surface-secondary, #eef2f7);
    border-color: var(--primary, #173269);
    color: var(--primary, #173269);
    filter: none;
}

.btn-outline-primary {
    background: transparent;
    border: 1.5px solid var(--primary, #173269);
    color: var(--primary, #173269);
}

.btn-outline-primary:hover {
    background: var(--primary, #173269);
    color: var(--text-white, #ffffff);
    filter: none;
}

.btn-outline-danger {
    background: transparent;
    border: 1.5px solid var(--danger, #E74C3C);
    color: var(--danger, #E74C3C);
}

.btn-outline-danger:hover {
    background: var(--danger, #E74C3C);
    color: var(--text-white, #ffffff);
    filter: none;
}

.btn-outline-success {
    background: transparent;
    border: 1.5px solid var(--success, #27AE60);
    color: var(--success, #27AE60);
}

.btn-outline-success:hover {
    background: var(--success, #27AE60);
    color: var(--text-white, #ffffff);
    filter: none;
}

/* ===========================
   GHOST VARIANT (no border)
   =========================== */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary, #64748b);
}

.btn-ghost:hover {
    background: var(--bg-surface-hover, #DDE5F0);
    color: var(--text-primary, #334155);
    filter: none;
    box-shadow: none;
}

/* ===========================
   BUTTON GROUPS
   =========================== */
.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-start-start-radius: var(--btn-radius);
    border-end-start-radius: var(--btn-radius);
}

.btn-group .btn:last-child {
    border-start-end-radius: var(--btn-radius);
    border-end-end-radius: var(--btn-radius);
}

.btn-group .btn + .btn {
    margin-inline-start: -1px;
}

/* ===========================
   TOOLBAR (spaced group)
   =========================== */
.btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ===========================
   DARK MODE OVERRIDES
   =========================== */
[data-theme="dark"] .btn {
    background: var(--bg-surface-secondary, #1e293b);
    color: var(--text-primary, #e2e8f0);
    border-color: var(--border-light, #334155);
}

[data-theme="dark"] .btn:hover {
    filter: brightness(1.15);
}

[data-theme="dark"] .btn-outline {
    border-color: var(--border-light, #475569);
    color: var(--text-primary, #e2e8f0);
}

[data-theme="dark"] .btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-light, #818cf8);
    color: var(--primary-lighter, #c7d2fe);
}

[data-theme="dark"] .btn-ghost {
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #e2e8f0);
}

/* Color variants don't change much in dark; gradients already look fine */

/* ===========================
   TOUCH / MOBILE OVERRIDES
   =========================== */

/* Ensure minimum 44px touch target on coarse-pointer devices */
@media (pointer: coarse) {
    .btn {
        min-height: var(--btn-height-lg); /* 44px */
        touch-action: manipulation;
    }

    /* xs and sm get promoted to lg touch target */
    .btn-xs,
    .btn-sm {
        min-height: var(--btn-height-lg); /* 44px */
    }

    .btn-icon {
        min-width: var(--btn-height-lg);
    }

    .btn-icon.btn-xs,
    .btn-icon.btn-sm {
        min-width: var(--btn-height-lg);
    }
}

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */

/* Tablet & below: slightly tighter horizontal padding */
@media (max-width: 768px) {
    :root {
        --btn-px-md: 14px;
        --btn-px-lg: 16px;
        --btn-px-xl: 22px;
    }

    /* Stack buttons in header actions on small screens */
    .header-actions .btn,
    .page-header .btn {
        flex: 1;
        min-width: 0;
    }
}

/* Extra-small screens */
@media (max-width: 480px) {
    :root {
        --btn-px-md: 12px;
        --btn-px-lg: 14px;
        --btn-px-xl: 18px;
        --btn-fs-md: 0.8125rem;
        --btn-fs-lg: 0.875rem;
        --btn-fs-xl: 0.9375rem;
    }
}

/* ===========================
   RTL SUPPORT (logical properties)
   =========================== */
/* All padding uses padding-inline / padding-block which auto-flip.
   Flexbox gap is direction-agnostic.
   Only manual fixes needed for icon margin in older patterns: */

html[dir="rtl"] .btn,
body.rtl .btn {
    direction: rtl;
}

html[dir="rtl"] .btn i,
html[dir="rtl"] .btn svg,
body.rtl .btn i,
body.rtl .btn svg {
    /* Gap handles spacing; reset any manual margins from legacy code */
    margin-inline-start: 0;
    margin-inline-end: 0;
}