/* Custom CSS for Khidmah Order Management System */

/* Sidebar Logo Centering and Sizing */
.brand-link-center {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.brand-link-center .brand-image {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-height: 50px !important; /* Increased size */
    width: auto;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

/* Custom CSS for Khidmah Order Management System */

/* Centered Navbar Title */
.navbar-center-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}
.navbar-center-title a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1a4d29; /* Darker, more corporate green */
    font-size: 1.1rem;
    transition: color 0.3s ease;
}
.navbar-center-title:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    transform: translateX(-50%) translateY(-2px);
}
.navbar-center-title a:hover {
    color: #28a745; 
    text-decoration: none;
}

/* Adjust sidebar logo padding and size */
.brand-link-center {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.brand-link-center .brand-image {
    max-height: 65px !important; /* Further increased size */
}
/* Hover Effects for Navigation Links */
.nav-sidebar .nav-item .nav-link {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Light background on hover */
    color: #ffffff !important; /* White text on hover */
}

/* Hover Effects for Buttons */
.btn:not(.btn-link) {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

.btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-danger:hover, .btn-secondary:hover {
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Enhanced shadow on hover */
    filter: brightness(110%); /* Slightly brighter */
}

/* Hover for general links */
a:not(.btn):hover {
    text-decoration: underline;
    color: #007bff; /* Standard Bootstrap primary color */
}

/* Specific hover for service cards */
.service-card:hover {
    background-color: #f8f9fa; /* Light grey background on hover */
    border-color: #007bff; /* Highlight border */
}

/* Navbar links hover */
.main-header .navbar-nav .nav-item .nav-link:hover {
    color: #007bff; /* Use primary color for navbar links */
    text-decoration: none;
}
/* Hover effect for Dashboard Info Boxes */
.info-box, .small-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-box:hover, .small-box:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Deeper shadow on hover */
}

/* New Login Page v2 Styles with Particles.js Background */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #1a4d29; /* Dark green background */
    z-index: -1;
}

.login-page-v2 .login-box {
    width: 450px; /* Further increased width */
    padding-top: 30px; /* Space from top */
    z-index: 10; /* Ensure login box is above background */
}

.login-page-v2 .login-logo {
    margin-bottom: 0; /* Remove default margin */
}


.login-page-v2 .card-outline.card-primary {
    border-top: 3px solid #ffffff;
}

.login-page-v2 .card {
    border-radius: .5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.login-page-v2 .btn-primary {
    background-color: #28a745;
    border-color: #28a745;
}

.login-page-v2 .icheck-primary > input:first-child:checked + label::before,
.login-page-v2 .icheck-primary > input:first-child:checked + input[type=hidden] + label::before {
    background-color: #28a745;
    border-color: #28a745;
}