/**
 * FoodIQ Unified Button System
 * Version: 1.0.0
 *
 * This file contains ALL button styles for the application.
 * Based on design-system.css variables (CGP compliant).
 *
 * Button Types:
 * - .btn (base)
 * - .btn-primary (Forcap green)
 * - .btn-secondary (gray)
 * - .btn-danger (red for destructive actions)
 * - .btn-success (green for confirmations)
 * - .btn-warning (amber for cautions)
 * - .btn-info (blue for information)
 * - .btn-ghost (transparent with border)
 * - .btn-link (text only)
 *
 * Button Sizes:
 * - .btn-sm (small)
 * - .btn-md (medium - default)
 * - .btn-lg (large)
 *
 * Button States:
 * - :hover
 * - :active
 * - :focus
 * - :disabled
 * - .btn-loading
 */

/* ============================================
   BASE BUTTON STYLES
   ============================================ */

.btn,
button.btn,
a.btn {
    /* Typography - Using body text size for standard buttons */
    font-family: var(--font-family-primary);
    font-size: var(--font-size-body); /* 16px instead of 22px - more practical */
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    /* Layout - Reduced padding for better proportions */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 10px 20px; /* ~0.625rem 1.25rem - practical size */
    border-radius: var(--radius-md);
    border: 2px solid transparent;

    /* Visual */
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-sm);

    /* Interaction */
    cursor: pointer;
    user-select: none;
    transition: all var(--transition-fast) var(--ease-out);

    /* Prevent default button styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ============================================
   BUTTON SIZES
   ============================================ */

/* Small Button */
.btn-sm {
    font-size: 14px;
    padding: 6px 12px; /* Compact for secondary actions */
}

/* Medium Button (Default) */
.btn-md {
    font-size: var(--font-size-body); /* 16px */
    padding: 10px 20px; /* Standard size */
}

/* Large Button - for hero/CTA buttons */
.btn-lg {
    font-size: 18px;
    padding: 14px 28px; /* Prominent actions */
}

/* Extra Large Button - for main CTAs only */
.btn-xl {
    font-size: var(--font-size-button); /* 22px - CGP spec */
    padding: var(--spacing-4) var(--spacing-8);
}

/* ============================================
   PRIMARY BUTTON (Forcap Green)
   ============================================ */

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    background-color: var(--color-success-dark);
    transform: scale(0.98);
}

.btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ============================================
   SECONDARY BUTTON (Gray)
   ============================================ */

.btn-secondary {
    background-color: var(--color-gray-200);
    color: var(--color-text-primary);
    border-color: var(--color-gray-300);
}

.btn-secondary:hover {
    background-color: var(--color-gray-300);
    border-color: var(--color-gray-400);
}

.btn-secondary:active {
    background-color: var(--color-gray-400);
    transform: scale(0.98);
}

/* ============================================
   DANGER BUTTON (Red - Destructive Actions)
   ============================================ */

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
    border-color: var(--color-danger);
}

.btn-danger:hover {
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
    box-shadow: var(--shadow-md);
}

.btn-danger:active {
    background-color: var(--color-danger-dark);
    transform: scale(0.98);
}

/* ============================================
   SUCCESS BUTTON (Green - Confirmations)
   ============================================ */

.btn-success {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    border-color: var(--color-success);
}

.btn-success:hover {
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
    box-shadow: var(--shadow-md);
}

.btn-success:active {
    background-color: var(--color-success-dark);
    transform: scale(0.98);
}

/* ============================================
   WARNING BUTTON (Amber - Cautions)
   ============================================ */

.btn-warning {
    background-color: var(--color-warning);
    color: var(--color-text-inverse);
    border-color: var(--color-warning);
}

.btn-warning:hover {
    background-color: var(--color-warning-dark);
    border-color: var(--color-warning-dark);
    box-shadow: var(--shadow-md);
}

.btn-warning:active {
    background-color: var(--color-warning-dark);
    transform: scale(0.98);
}

/* ============================================
   INFO BUTTON (Blue - Information)
   ============================================ */

.btn-info {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
    border-color: var(--color-info);
}

.btn-info:hover {
    background-color: var(--color-info-dark);
    border-color: var(--color-info-dark);
    box-shadow: var(--shadow-md);
}

.btn-info:active {
    background-color: var(--color-info-dark);
    transform: scale(0.98);
}

/* ============================================
   GHOST BUTTON (Transparent with Border)
   ============================================ */

.btn-ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}

.btn-ghost:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.btn-ghost:active {
    transform: scale(0.98);
}

/* Ghost Variants */
.btn-ghost-danger {
    background-color: transparent;
    color: var(--color-danger);
    border-color: var(--color-danger);
    box-shadow: none;
}

.btn-ghost-danger:hover {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
}

/* ============================================
   LINK BUTTON (Text Only)
   ============================================ */

.btn-link {
    background-color: transparent;
    color: var(--color-primary);
    border-color: transparent;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover {
    color: var(--color-success-dark);
    background-color: transparent;
    text-decoration: underline;
}

.btn-link:active {
    transform: none;
}

/* ============================================
   DISABLED STATE
   ============================================ */

.btn:disabled,
.btn.disabled,
.btn[disabled] {
    background-color: var(--color-gray-200);
    color: var(--color-text-disabled);
    border-color: var(--color-gray-200);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

.btn:disabled:hover,
.btn.disabled:hover,
.btn[disabled]:hover {
    background-color: var(--color-gray-200);
    color: var(--color-text-disabled);
    transform: none;
}

/* ============================================
   LOADING STATE
   ============================================ */

.btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    border-top-color: currentColor;
    animation: button-loading-spinner 0.6s linear infinite;
}

@keyframes button-loading-spinner {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

/* ============================================
   BUTTON GROUPS
   ============================================ */

.btn-group {
    display: inline-flex;
    gap: var(--spacing-2);
}

.btn-group .btn {
    flex: 0 1 auto;
}

/* Attached buttons (no gap) */
.btn-group-attached {
    display: inline-flex;
    gap: 0;
}

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

.btn-group-attached .btn:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.btn-group-attached .btn:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.btn-group-attached .btn:not(:last-child) {
    border-right: 0;
}

/* ============================================
   ICON BUTTONS
   ============================================ */

.btn-icon {
    padding: var(--spacing-2);
    aspect-ratio: 1;
}

.btn-icon svg,
.btn-icon img {
    width: 20px;
    height: 20px;
}

/* ============================================
   FULL WIDTH BUTTONS
   ============================================ */

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

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .btn {
        font-size: 14px; /* Mobile: smaller for better fit */
        padding: 8px 16px;
    }

    .btn-sm {
        font-size: 12px;
        padding: 6px 10px;
    }

    .btn-lg {
        font-size: 16px;
        padding: 12px 24px;
    }

    .btn-xl {
        font-size: 18px; /* Mobile size from CGP */
        padding: 14px 28px;
    }

    /* Make buttons stack on mobile in groups */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
    }
}

/* ============================================
   LEGACY BUTTON CLASS SUPPORT
   ============================================ */

/* Support old class names for backward compatibility */
.cantina-btn-primary,
.meal-btn-primary,
.recipe-btn-primary {
    /* Redirect to new .btn-primary */
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-md);
    border: none;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast) var(--ease-out);
}

.cantina-btn-primary:hover,
.meal-btn-primary:hover,
.recipe-btn-primary:hover {
    background-color: var(--color-success-dark);
}

.cantina-btn-danger,
.meal-btn-danger,
.recipe-btn-danger,
.recipe-btn-delete {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-md);
    border: none;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast) var(--ease-out);
}

.cantina-btn-danger:hover,
.meal-btn-danger:hover,
.recipe-btn-danger:hover,
.recipe-btn-delete:hover {
    background-color: var(--color-danger-dark);
}

/* ============================================
   GUIDELINES BUTTON STATES
   ============================================ */

/* Base Guidelines Button */
.btn-guidelines {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
    border-color: var(--color-info);
}

.btn-guidelines:hover {
    background-color: var(--color-info-dark);
    border-color: var(--color-info-dark);
}

/* Success State - "Uspešno sledite" */
.btn-guidelines.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.btn-guidelines.btn-success:hover {
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
}

/* Warning State - "Ne sledite" */
.btn-guidelines.btn-warning {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-guidelines.btn-warning:hover {
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
}

/* Incomplete State - "Delno sledite" */
.btn-guidelines.btn-incomplete {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.btn-guidelines.btn-incomplete:hover {
    background-color: var(--color-warning-dark);
    border-color: var(--color-warning-dark);
}

/* Error State - "Napaka" */
.btn-guidelines.btn-error {
    background-color: var(--color-gray-400);
    border-color: var(--color-gray-400);
}

.btn-guidelines.btn-error:hover {
    background-color: var(--color-gray-500);
    border-color: var(--color-gray-500);
}

/* ============================================
   USAGE NOTES
   ============================================

   BASIC USAGE:
   <button class="btn btn-primary">Primary Button</button>
   <button class="btn btn-secondary">Secondary Button</button>
   <button class="btn btn-danger">Delete</button>

   WITH SIZES:
   <button class="btn btn-primary btn-sm">Small</button>
   <button class="btn btn-primary btn-lg">Large</button>

   WITH ICONS:
   <button class="btn btn-primary">
       <svg>...</svg>
       Button Text
   </button>

   ICON ONLY:
   <button class="btn btn-icon btn-primary">
       <svg>...</svg>
   </button>

   DISABLED:
   <button class="btn btn-primary" disabled>Disabled</button>

   LOADING:
   <button class="btn btn-primary btn-loading">Loading...</button>

   BUTTON GROUPS:
   <div class="btn-group">
       <button class="btn btn-primary">Save</button>
       <button class="btn btn-secondary">Cancel</button>
   </div>

   GUIDELINES BUTTON:
   <button class="btn btn-guidelines" id="checkGuidelinesBtn">
       <svg>...</svg>
       <span id="checkGuidelinesText">Preveri smernice</span>
   </button>

   ============================================ */