/* Premium UI Modernization Stylesheet */
/* Author: AI Agent */

/* ==========================================================================
   1. Dynamic Depth & Hover Effects
   ========================================================================== */

/* Elevate cards on hover */
.card {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
    z-index: 10;
}

/* Primary buttons glow effect */
.btn-primary {
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.3) !important;
}

.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(255, 102, 0, 0.5) !important;
}

.btn-danger {
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 10px rgba(231, 54, 107, 0.3) !important;
}

.btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(231, 54, 107, 0.5) !important;
}

/* ==========================================================================
   2. Glassmorphism Aesthetics
   ========================================================================== */

/* Top Navigation Bar frosted glass effect */
.topbar-custom, #page-topbar, .navbar-custom {
    background: rgba(30, 30, 30, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Dropdown menus frosted glass effect */
.dropdown-menu {
    background: rgba(42, 42, 42, 0.85) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px !important;
}

/* ==========================================================================
   3. Softer, App-like Geometry
   ========================================================================== */

/* Smoother border radiuses for modern feel */
.card, .modal-content {
    border-radius: 16px !important;
}

.btn {
    border-radius: 10px !important;
}

.form-control, .form-select {
    border-radius: 10px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.form-control:focus, .form-select:focus {
    border-color: #FF6600 !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.25) !important;
}

/* ==========================================================================
   4. Vibrant Micro-interactions & Custom Scrollbar
   ========================================================================== */

/* Custom sleek scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 102, 0, 0.5);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 102, 0, 0.8);
}

/* Sidebar styling */
.metismenu li a {
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    margin: 0 8px !important;
}

.metismenu li a:hover {
    background: rgba(255, 102, 0, 0.1) !important;
    transform: translateX(5px) !important;
}

.metismenu li.mm-active > a {
    background: rgba(255, 102, 0, 0.15) !important;
    color: #FF6600 !important;
    font-weight: 600 !important;
}