/**
 * Professional Modern Monochrome Button System
 * Theme: Obsidian / Dark Onyx Gradient (Preserving Black & White Aesthetic)
 */

/* Global button base enhancements */
.btn {
    font-weight: 600;
    letter-spacing: 0.015em;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.btn:hover {
    text-decoration: none;
}

/* ==========================================================================
   PRIMARY BUTTON & BLACK BUTTON: Obsidian / Titanium Dark Metallic Gradient
   ========================================================================== */
.btn-primary,
.btn-black {
    color: #ffffff !important;
    background: linear-gradient(180deg, #2e3138 0%, #1a1c22 55%, #0d0e12 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 
                0 2px 4px rgba(0, 0, 0, 0.3), 
                0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-black:hover,
.btn-black:focus,
.btn-check:focus + .btn-primary {
    color: #ffffff !important;
    background: linear-gradient(180deg, #404550 0%, #292d36 55%, #181b21 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1.5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 
                0 6px 16px rgba(0, 0, 0, 0.4), 
                0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-black:active,
.btn-black.active,
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
    color: #ffffff !important;
    background: linear-gradient(180deg, #14161b 0%, #08090b 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5),
                0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: rgba(255, 255, 255, 0.6) !important;
    background: #27272a !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

/* ==========================================================================
   OUTLINE PRIMARY & OUTLINE DARK BUTTON
   ========================================================================== */
.btn-outline-primary,
.btn-outline-dark {
    color: #18181b !important;
    background: transparent !important;
    border: 1.5px solid #27272a !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-outline-primary:hover,
.btn-outline-dark:hover,
.btn-outline-primary:focus,
.btn-outline-dark:focus {
    color: #ffffff !important;
    background: linear-gradient(180deg, #2e3138 0%, #1a1c22 55%, #0d0e12 100%) !important;
    border-color: #18181b !important;
    transform: translateY(-1.5px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}

.btn-outline-primary:active,
.btn-outline-dark:active,
.btn-outline-primary.active,
.btn-outline-dark.active {
    color: #ffffff !important;
    background: linear-gradient(180deg, #14161b 0%, #08090b 100%) !important;
    transform: translateY(0);
}

/* ==========================================================================
   DARK BUTTON: Deep Carbon Gradient
   ========================================================================== */
.btn-dark {
    color: #ffffff !important;
    background: linear-gradient(180deg, #24272e 0%, #121418 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.btn-dark:hover,
.btn-dark:focus {
    color: #ffffff !important;
    background: linear-gradient(180deg, #323640 0%, #1c1f25 100%) !important;
    transform: translateY(-1.5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.btn-dark:active,
.btn-dark.active {
    background: #0d0f12 !important;
    transform: translateY(0);
}

/* ==========================================================================
   SECONDARY & LIGHT BUTTON: Monochrome Crisp Silver / Clean White Gradient
   ========================================================================== */
.btn-secondary,
.btn-light {
    color: #27272a !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4f4f6 100%) !important;
    border: 1px solid #d4d4d8 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-secondary:focus,
.btn-light:focus {
    color: #09090b !important;
    background: linear-gradient(180deg, #fafafa 0%, #e4e4e8 100%) !important;
    border-color: #a1a1aa !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

.btn-secondary:active,
.btn-light:active,
.btn-secondary.active,
.btn-light.active {
    background: #e4e4e7 !important;
    transform: translateY(0);
}

/* ==========================================================================
   MODERN CONTEXTUAL BUTTONS (Status Actions)
   Enhanced with subtle gradients & soft glow
   ========================================================================== */
/* SUCCESS: Emerald Gradient */
.btn-success {
    color: #ffffff !important;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(16, 185, 129, 0.3) !important;
}

.btn-success:hover,
.btn-success:focus {
    color: #ffffff !important;
    background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
    transform: translateY(-1.5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px rgba(16, 185, 129, 0.4) !important;
}

/* DANGER: Crimson / Rose Gradient */
.btn-danger {
    color: #ffffff !important;
    background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(225, 29, 72, 0.3) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    color: #ffffff !important;
    background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%) !important;
    transform: translateY(-1.5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px rgba(225, 29, 72, 0.4) !important;
}

/* WARNING: Warm Amber Gradient */
.btn-warning {
    color: #1c1917 !important;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px rgba(245, 158, 11, 0.3) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    color: #1c1917 !important;
    background: linear-gradient(180deg, #fcd34d 0%, #d97706 100%) !important;
    transform: translateY(-1.5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(245, 158, 11, 0.35) !important;
}

/* INFO: Sky / Cyan Gradient */
.btn-info {
    color: #ffffff !important;
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(14, 165, 233, 0.3) !important;
}

.btn-info:hover,
.btn-info:focus {
    color: #ffffff !important;
    background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
    transform: translateY(-1.5px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px rgba(14, 165, 233, 0.4) !important;
}

/* ==========================================================================
   BUTTON GROUPS & SPECIAL BUTTONS
   ========================================================================== */
.btn-group > .btn:hover {
    z-index: 2;
}

/* Active sidebar item gradient match */
.sidebar-wrapper .menu .sidebar-item.active .sidebar-link {
    background: linear-gradient(180deg, #27272a 0%, #18181b 55%, #09090b 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}