/**
 * Ultra-Modern Bootstrap 3 Button Overrides
 * Inspired by modern frameworks like Tailwind CSS, with enhanced animations and shadows.
 * Version 2.1
 */

/* --- Import a modern font --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');

/* --- Root Variables for a Consistent Color Palette --- */
:root {
    --btn-primary-color: #4F46E5;
    --btn-success-color: #10B981;
    --btn-info-color: #0EA5E9;
    --btn-warning-color: #F59E0B;
    --btn-danger-color: #EF4444;
    --btn-default-bg: #F3F4F6;
    --btn-default-text: #1F2937;
    --btn-default-border: #D1D5DB;
}

/* --- Base Button Style --- */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    
    border: 1px solid transparent; /* Set transparent border for alignment */
    border-radius: 8px;
    padding: 12px 24px;
    
    /* A more refined transition for hover and focus effects */
    transition: all 0.2s ease-in-out;
    
    /* No default shadow, it will be applied on interaction */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    
    white-space: nowrap;
    outline: none !important;
}

/* --- Hover & Focus States --- */
.btn:hover {
    transform: translateY(-2px);
    /* A more complex, layered shadow for a realistic "lift" effect */
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.btn:active {
    transform: translateY(0px); /* Return to original position for a "press" feel */
}

/* --- Disabled State --- */
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}


/* ========================================================================
   SOLID BUTTONS (Default Bootstrap Classes)
   ======================================================================== */

/* Default */
.btn-default {
    background-color: var(--btn-default-bg);
    color: var(--btn-default-text);
    border-color: var(--btn-default-border);
}
.btn-default:hover, .btn-default:focus {
    background-color: #E5E7EB;
    border-color: #9CA3AF;
    color: var(--btn-default-text);
}

/* Primary */
.btn-primary { background-color: var(--btn-primary-color); color: white; }
.btn-primary:hover, .btn-primary:focus { background-color: #4338CA; color: white; }
.btn:focus.btn-primary { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4); }

/* Success */
.btn-success { background-color: var(--btn-success-color); color: white; }
.btn-success:hover, .btn-success:focus { background-color: #059669; color: white; }
.btn:focus.btn-success { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.4); }

/* Info */
.btn-info { background-color: var(--btn-info-color); color: white; }
.btn-info:hover, .btn-info:focus { background-color: #0284C7; color: white; }
.btn:focus.btn-info { box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.4); }

/* Warning */
.btn-warning { background-color: var(--btn-warning-color); color: white; }
.btn-warning:hover, .btn-warning:focus { background-color: #D97706; color: white; }
.btn:focus.btn-warning { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4); }

/* Danger */
.btn-danger { background-color: var(--btn-danger-color); color: white; }
.btn-danger:hover, .btn-danger:focus { background-color: #DC2626; color: white; }
.btn:focus.btn-danger { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4); }


/* ========================================================================
   NEW: OUTLINE BUTTONS
   Usage: <button class="btn btn-outline-primary">...</button>
   ======================================================================== */

.btn[class*="btn-outline-"] {
    background-color: transparent;
}
.btn.btn-outline-primary { color: var(--btn-primary-color); border-color: var(--btn-primary-color); }
.btn.btn-outline-primary:hover { background-color: var(--btn-primary-color); color: white; }

.btn.btn-outline-success { color: var(--btn-success-color); border-color: var(--btn-success-color); }
.btn.btn-outline-success:hover { background-color: var(--btn-success-color); color: white; }

.btn.btn-outline-info { color: var(--btn-info-color); border-color: var(--btn-info-color); }
.btn.btn-outline-info:hover { background-color: var(--btn-info-color); color: white; }

.btn.btn-outline-warning { color: var(--btn-warning-color); border-color: var(--btn-warning-color); }
.btn.btn-outline-warning:hover { background-color: var(--btn-warning-color); color: white; }

.btn.btn-outline-danger { color: var(--btn-danger-color); border-color: var(--btn-danger-color); }
.btn.btn-outline-danger:hover { background-color: var(--btn-danger-color); color: white; }


/* ========================================================================
   NEW: GHOST (TEXT) BUTTONS
   Usage: <button class="btn btn-ghost-primary">...</button>
   ======================================================================== */

.btn[class*="btn-ghost-"] {
    background-color: transparent;
    border-color: transparent;
}
.btn.btn-ghost-primary { color: var(--btn-primary-color); }
.btn.btn-ghost-primary:hover { background-color: rgba(79, 70, 229, 0.1); }

.btn.btn-ghost-success { color: var(--btn-success-color); }
.btn.btn-ghost-success:hover { background-color: rgba(16, 185, 129, 0.1); }

.btn.btn-ghost-info { color: var(--btn-info-color); }
.btn.btn-ghost-info:hover { background-color: rgba(14, 165, 233, 0.1); }

.btn.btn-ghost-warning { color: var(--btn-warning-color); }
.btn.btn-ghost-warning:hover { background-color: rgba(245, 158, 11, 0.1); }

.btn.btn-ghost-danger { color: var(--btn-danger-color); }
.btn.btn-ghost-danger:hover { background-color: rgba(239, 68, 68, 0.1); }

.btn.btn-ghost-default { color: var(--btn-default-text); }
.btn.btn-ghost-default:hover { background-color: rgba(107, 114, 128, 0.1); }


/* ========================================================================
   NEW: BUTTON SIZING
   ======================================================================== */

/* Large Button */
.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: 10px;
}

/* Small Button */
.btn-sm {
    padding: 8px 16px;
    font-size: 12px;
}

/* Extra Small Button */
.btn-xs {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
}


/* ========================================================================
   NEW: INPUT GROUP COMPATIBILITY
   ======================================================================== */
.input-group-btn > .btn {
    border-radius: 0;
}

.input-group-btn:first-child > .btn {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.input-group-btn:last-child > .btn {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Sizing compatibility */
.input-group-lg > .input-group-btn:first-child > .btn.btn-lg { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.input-group-lg > .input-group-btn:last-child > .btn.btn-lg { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }


/* Disable hover animations within input groups for a seamless look */
.input-group .btn:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/*
 * Height & Alignment Fix: Override custom padding and set a fixed height
 * on buttons within input groups to match form-control heights.
*/
.input-group-btn > .btn {
  height: 34px; /* Matches default .form-control height */
  padding-top: 0;
  padding-bottom: 0;
}

.input-group-lg > .input-group-btn > .btn {
  height: 46px; /* Matches large .form-control height */
}

.input-group-sm > .input-group-btn > .btn {
  height: 30px; /* Matches small .form-control height */
}