/* --- Global Variables & Base Styles --- */
:root {
    /* Standard Colors */
    --primary-blue: #007bff;
    --primary-blue-dark: #0056b3;
    --primary-blue-light: #e6f2ff;
    --accent-green: #28a745;
    --accent-red: #dc3545;
    --text-dark: #343a40;
    --text-light: #f8f9fa;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --text-header: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    
    /* Input & UI Colors */
    --input-bg-dark: rgba(255, 255, 255, 0.05);
    --input-border-dark: rgba(255, 255, 255, 0.2);
    --input-placeholder-dark: #a0a0a0;
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    --transition-speed: 0.3s ease;
    
    /* Sidebar Configuration */
    --sidebar-width-open: 260px;
    --sidebar-width-closed: 75px;
    --sidebar-bg: rgba(15, 22, 36, 0.75);
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-link-color: rgba(255, 255, 255, 0.65);
    --sidebar-link-hover-bg: rgba(0, 123, 255, 0.1);
    --sidebar-link-hover-color: #ffffff;
    --sidebar-link-active-bg: rgba(0, 123, 255, 0.2);
    --sidebar-link-active-color: #ffffff;
    --sidebar-link-active-glow: 0 0 15px rgba(0, 123, 255, 0.4);
    --sidebar-transition-duration: 0.3s;
    --sidebar-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-hover-color-1: rgba(0, 123, 255, 0.15);
    --sidebar-hover-color-2: rgba(40, 167, 69, 0.15);
    --sidebar-hover-color-3: rgba(255, 193, 7, 0.15);
    --sidebar-hover-color-4: rgba(220, 53, 69, 0.15);
    --sidebar-border-color-1: #007bff;
    --sidebar-border-color-2: #28a745;
    --sidebar-border-color-3: #ffc107;
    --sidebar-border-color-4: #dc3545;
}

/* --- MASTER BACKGROUND ENGINE --- */
body {
    font-family: 'Poppins', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
    color: var(--text-light);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;

    /* 1. Use the Variable from PHP (or default to dark blue) */
    background: var(--portal-bg, #1a1a2e);

    /* 2. FORCE the Wave Settings (Overrides shorthand reset) */
    background-size: 200% 200% !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    animation: gradientAnimation 15s ease infinite alternate !important;
}

/* --- Diagonal Wave Animation --- */
@keyframes gradientAnimation {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* --- Login Page Specifics --- */
.login-body {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

/* --- Grid Overlay (The Lines) --- */
body::before, body::after {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    /* Subtle Grid Pattern */
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    /* Separate animation for grid movement */
    animation: gridMovement 60s linear infinite;
    z-index: -1; /* Behind content */
    pointer-events: none; /* Click-through */
}

body::after { 
    background-size: 70px 70px; /* Different size for depth */
    animation-direction: reverse;
    opacity: 0.2;
}

@keyframes gridMovement {
    from { background-position: 0 0; }
    to { background-position: 50px 50px; } 
}

/* --- NEW: Animated Border --- */

.login-logo {
            width: 80px;           /* Fixed width */
            height: 80px;          /* Fixed height */
            object-fit: contain;   /* Ensures logo doesn't stretch/distort */
            margin: 0 auto 20px auto !important; /* Center it and add space below */
            display: block;
        }

#splitInvoiceModal .modal-content {
    max-width: 1400px; /* You can adjust this value */
}

.login-header {
    margin-bottom: 35px;
}

.login-header h2 {
    font-size: 32px;
    font-weight: 700;
    margin-top: 10px; /* ADD THIS LINE - 10px is just a guess, change it to whatever you like */
    margin-bottom: 10px;
    color: var(--text-header);
}

.login-header p {
    font-size: 16px;
    color: var(--text-secondary); /* Uses new brighter color */
}

/* --- Form Groups --- */
.form-group {
    margin-bottom: 25px;
    position: relative;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 15px;
    color: var(--text-secondary); /* Uses new brighter color */
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    width: 100%;
    padding: 14px 45px 14px 18px;
    border: 1px solid var(--input-border-dark);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: var(--input-bg-dark);
    color: var(--text-light);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
}
.form-group input::placeholder {
    color: var(--input-placeholder-dark);
    opacity: 0.7;
}

.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- NEW: Custom Validation Styles --- */

/* This adds a red border to the input when it's invalid */
.form-group input.is-invalid {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.4); /* Red glow */
}

/* This is the new glassy error message bubble */
/* This is the new glassy error message bubble */
.form-error-message {
    display: none; /* Hidden by default */
    width: 100%;
    margin-top: 10px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    
    /* Our Glassy UI */
    background: rgba(220, 53, 69, 0.25); /* Red glass */
    border: 1px solid rgba(220, 53, 69, 0.6); /* Red border */
    border-radius: 6px;
    color: var(--text-header);
    backdrop-filter: blur(5px);
    
    /* Fade-in animation */
    animation: fadeIn 0.3s ease-out;

    /* THE FIX: This makes its 100% width behave the same as the input field */
    box-sizing: border-box; 
}
/* --- End of Custom Validation Styles --- */

.password-icon-toggle {
    position: absolute;
    top: 48px;
    right: 18px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}
.password-icon-toggle svg {
    width: 100%;
    height: 100%;
    fill: var(--input-placeholder-dark);
    transition: fill var(--transition-speed);
}
.password-icon-toggle:hover svg {
    fill: var(--primary-blue);
}


/* --- Form Options (Remember Me & Forgot) --- */
.form-options {
    display: flex;
    justify-content: space-between; /* UPDATED */
    align-items: center;
    margin-top: -10px;
    margin-bottom: 30px;
    font-size: 15px;
    color: var(--text-secondary);
}

/* NEW: Forgot Password Link Style */
.forgot-password a {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color var(--transition-speed);
}
.forgot-password a:hover {
    color: var(--primary-blue-dark);
    text-decoration: underline;
}

/* --- Toggle Switch CSS --- */
.toggle-switch-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.toggle-switch-container span {
    margin-left: 10px;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    transition: var(--transition-speed);
    border-radius: 28px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: var(--transition-speed);
    border-radius: 50%;
}
input:checked + .toggle-slider {
    background-color: var(--primary-blue);
}
input:checked + .toggle-slider:before {
    transform: translateX(21px);
}
/* --- END: Toggle Switch CSS --- */

/* --- NEW: Multi-Color, Seamless Trailing Border Animation --- */

/* --- Ensure this is your MAIN login wrapper style --- */
.login-wrapper {
    position: relative; 
    z-index: 10;
    width: 90%;
    max-width: 480px;
    
    /* RESTORE these */
    background: var(--glass-bg); 
    backdrop-filter: blur(10px); 
    
    border: 1px solid var(--glass-border); /* Keep original border for fallback */
    border-radius: 16px; 
    box-shadow: var(--card-shadow);
    padding: 0; /* Keep padding 0 */
    text-align: center;
    color: var(--text-light);
    overflow: hidden; /* Keep this */
}

/* --- Ensure this is your ::before pseudo-element style --- */
/* This is the rotating multi-color gradient layer */
.login-wrapper::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    width: 250%; 
    height: 250%; 
    
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 30%, 
        #00c6ff 50%, 
        #ffea00 75%, 
        #00ff80 90%, 
        transparent 100%
    );
    
    animation: rotate-multi-color-border 4s linear infinite;
    transform-origin: center center; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
}

/* --- Ensure this is your ::after pseudo-element style --- */
/* This is the crucial "mask" and content container layer */
.login-wrapper::after {
    content: '';
    position: absolute;
    top: 2px; 
    left: 2px; 
    right: 2px; 
    bottom: 2px; 
    
    /* CHANGE: Use the body's dark background for definite opacity */
    background: #1a1a2e; /* Match the color used in .login-body */
    
    border-radius: 14px; 
    z-index: 2; 
}

/* --- ADD THIS NEW RULE --- */
.login-content-for-padding {
    position: relative; /* Needed for z-index */
    z-index: 3; /* On top of the ::after mask */
    padding: 40px; /* Original padding */
}

@keyframes rotate-multi-color-border {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* --- End of Multi-Color, Seamless Trailing Border Animation --- */

/* --- Submit Button --- */
.btn-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(90deg, #007bff, #00c6ff);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
    letter-spacing: 0.8px;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}

.btn-submit:hover {
    background: linear-gradient(90deg, #0056b3, #0099cc);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.6);
}

/* --- UPDATED: Glassy Notifications --- */
.notification {
    width: calc(100% - 30px);
    padding: 15px;
    margin: 0 auto 25px auto;
    border-radius: 8px;
    font-weight: 500;
    box-sizing: border-box;
    text-align: center;
    animation: fadeIn 0.5s ease-out;
    
    /* NEW Glassy Style */
    backdrop-filter: blur(5px);
    color: var(--text-header); /* Bright white text */
    font-weight: 500;
}

.notification.error {
    background: rgba(220, 53, 69, 0.25); /* Red glass */
    border: 1px solid rgba(220, 53, 69, 0.6); /* Red border */
}

.notification.success {
    background: rgba(40, 167, 69, 0.25); /* Green glass */
    border: 1px solid rgba(40, 167, 69, 0.6); /* Green border */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    
.login-wrapper {
        width: 95%;
        padding: 0; /* Keep padding 0 */
        max-width: 400px;
    }
    .login-content-for-padding {
        padding: 30px 25px; 
    }
    .login-logo {
        max-width: 150px;
        margin-bottom: 25px;
    }
    .login-header h2 {
        font-size: 26px;
    }
    .login-header p {
        font-size: 14px;
    }
    .form-group label {
        font-size: 13px;
    }
    .form-group input {
        padding: 12px 40px 12px 15px;
        font-size: 15px;
    }
    .password-icon-toggle {
        top: 45px;
        right: 15px;
    }
    .btn-submit {
        padding: 13px;
        font-size: 16px;
    }
    .notification {
        width: calc(100% - 20px);
        margin-bottom: 20px;
        padding: 12px;
        font-size: 14px;
    }
    .form-options {
        font-size: 14px; /* Adjust font size on mobile */
    }
    .forgot-password a {
        font-size: 13px; /* Adjust font size on mobile */
    }
}


/* --- Dashboard/App Header Styles (Updated for Dark Theme Consistency) --- */
/* --- Header/Navbar Styles (Glass Effect) --- */
.navbar {
    /* 1. Glass Background Engine */
    /* We use a ::before element in the PHP file, but here we set the base properties */
    background: transparent !important; /* Let the blur shine through */
    
    /* 2. Layout & Positioning */
    position: sticky;
    top: 0;
    z-index: 900; /* Below sidebar (1000) but above content */
    width: 100%;
    box-sizing: border-box;
    
    padding: 15px 40px;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-light);
    
    /* 3. The Blur Magic */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Creates the semi-transparent background layer */
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* This variable comes from your PHP settings */
    background: var(--header-bg, #1a1a2e); 
    
    /* Force transparency so blur is visible */
    opacity: 0.65; 
    
    z-index: -1; /* Behind the text/search bar */
}
.navbar .logo {
    font-size: 28px;
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.8px;
}

.navbar .user-info {
    font-size: 15px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.navbar .user-info strong {
    color: var(--primary-blue);
    margin-right: 5px;
}

.navbar .user-info a {
    color: #ff6b6b;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 500;
    transition: color var(--transition-speed);
}

.navbar .user-info a:hover {
    color: #ff3838;
    text-decoration: underline;
}

.container {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    color: var(--text-light);
}
.container h1 {
    margin-top: 0;
    font-size: 38px;
    font-weight: 700;
    color: var(--text-header);
    margin-bottom: 20px;
}
.container p {
    font-size: 18px;
    color: var(--text-secondary);
}

/* --- NEW: Loader Wrapper Styles --- */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    
    /* FIX: Use the Master Variable so it matches your settings perfectly */
    background: var(--portal-bg, #1a1a2e);
    
    /* Keep the animation engine */
    background-size: 200% 200%;
    background-attachment: scroll; /* Matches body */
    animation: gradientWave 15s ease infinite alternate;
    
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.5s ease-out;
}

/* --- NEW: Animated grid lines for loader --- */
#loader-wrapper::before, #loader-wrapper::after {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    animation: gridMovement 60s linear infinite;
    z-index: 1; /* Below spinner (z-index 10) */
}

#loader-wrapper::after {
    background-size: 70px 70px; /* Different size for depth */
    animation-direction: reverse;
    opacity: 0.2;
}

#loader-wrapper.loaded {
    /* Hide it when the 'loaded' class is added */
    opacity: 0;
    pointer-events: none; /* Make it unclickable */
}


/* Loading Text (Optional) */

/* --- NEW: Loader Logo Animation --- */
.loader-logo {
    width: 200px; /* You can change this size */
    height: auto;
    position: relative;
    z-index: 10;
    /* This applies the new pulse animation */
    animation: pulse 1.5s ease-in-out infinite;
}

/* Loading Text */
.loader-text {
    color: var(--text-secondary);
    margin-top: 10px; /* Increased space for the logo */
    font-size: 18px;
    font-weight: 500;
    position: relative;
    z-index: 10;
}

/* The "breathing" pulse animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05); /* Gently scales up */
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/*
 *
 * --- SIDEBAR STYLES ---
 *
 */
/* --- SIDEBAR STYLES (Standardized Glass Engine) --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--sidebar-width-open);
    
    /* 1. Remove direct background & blur from here */
    background: transparent; 
    /* backdrop-filter moved to ::before to ensure it works with solid colors */
    
    border-right: 1px solid var(--sidebar-border);
    z-index: 1000;
    transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
    display: flex;
    flex-direction: column;
    overflow: visible; /* Changed to visible so shadows/glows don't get cut */
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3);
}

/* 2. Create the Glass Layer */
/* This forces transparency and blur, regardless of the color chosen in Settings */
.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Inject the Color from PHP */
    background: var(--sidebar-bg);
    
    /* FORCE Transparency (0.85 = 85% visible, 15% see-through) */
    opacity: 0.65; 
    
    /* FORCE the Blur Effect */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    z-index: -1; /* Sit behind the text/icons */
}

/* Collapsed State */
.sidebar.collapsed {
    width: var(--sidebar-width-closed);
}

.sidebar-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* Push close button to the right */
}


.sidebar-toggle-btn svg {
    width: 26px;
    height: 26px;
    stroke: var(--sidebar-link-color);
    transition: stroke 0.2s ease, transform 0.3s ease;
}

.sidebar-toggle-btn:hover svg {
    stroke: var(--sidebar-link-hover-color);
}

/* --- NEW: Sidebar Toggle Header --- */
.sidebar-toggle-header {
    display: flex;
    align-items: center;
    padding: 15px 10px; /* Padding when collapsed */
    min-height: 65px; 
    box-sizing: border-box;
    flex-shrink: 0; 
    border-bottom: 1px solid var(--sidebar-border);
    transition: padding var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}

.sidebar:not(.collapsed) .sidebar-toggle-header {
     padding:20px 20px; /* Padding when expanded */
     justify-content: flex-end; /* Push button to the right when expanded */
}

.hamburger-btn { /* Style the hamburger button */
     background: none;
     border: none;
     cursor: pointer;
     padding: 5px;
     display: flex; 
     align-items: center;
     justify-content: center;
     transition: transform 0.3s ease; /* Add rotation for effect */
}
.hamburger-btn svg {
    width: 26px; 
    height: 26px;
    stroke: var(--sidebar-link-color);
    transition: stroke 0.2s ease;
}
 .hamburger-btn:hover svg {
    stroke: var(--sidebar-link-hover-color);
}
/* Optional: Rotate hamburger slightly when sidebar is open */
.sidebar:not(.collapsed) .hamburger-btn {
     /* transform: rotate(90deg); */ /* Uncomment if you want rotation */
}
/* --- END NEW --- */

.sidebar-nav {
    flex-grow: 1;
    padding-top: 20px; /* Make sure this exists and adjust value if needed */
    overflow-y: auto; 
    overflow-x: hidden; 
}
/* Custom Scrollbar */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }


.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    position: relative;
    margin: 2px 0; /* Add small vertical margin */
}

/* Base style for all links */
.sidebar-nav li a {
    display: flex;
    align-items: center;
    height: 50px; /* Fixed height for consistent look */
    padding: 0 25px; /* Horizontal padding only */
    margin: 0 10px; /* Horizontal margin */
    color: var(--sidebar-link-color);
    text-decoration: none;
    font-size: 15px; /* Slightly smaller */
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    overflow: hidden; /* Crucial for hiding text */
    position: relative;
    box-sizing: border-box; /* ADD THIS */
}

/* Style icons */
.nav-icon {
    width: 22px; 
    height: 22px;
    margin-right: 18px; 
    flex-shrink: 0; /* Make sure this is present */
    stroke: var(--sidebar-link-color);
    transition: stroke 0.2s ease, transform 0.3s ease; 
}

/* Style text - hide when collapsed */
.menu-text {
    opacity: 1;
    transition: opacity 0.2s ease;
    transition-delay: 0.1s; /* Delay hiding text */
}
.sidebar.collapsed .menu-text {
    opacity: 0;
    width: 0;
    transition-delay: 0s; /* Hide text immediately */
}

/* Center icon when collapsed */
.sidebar.collapsed li a {
padding: 15px 10px; /* Keep vertical padding */
       padding-left: 5px; /* RE-ADD & ADJUST - Controls space from left edge */
       box-sizing: border-box; 
       display: flex; 
       /* justify-content: center; /* Ensure this is removed or set to flex-start */
       justify-content: flex-start; /* ADD THIS */
       align-items: center; 
       height: 50px; 
   }
   

.sidebar.collapsed .sidebar-toggle-header {
       padding: 15px 40px; /* Keep vertical padding */
       padding-left: 20px; /* Match the value used for li a */
       box-sizing: border-box; 
       justify-content: flex-start; /* Ensure this is flex-start */
       height: 77px; /* Keep height */
       max-height:77px;
       align-items: center; /* Keep vertical centering */
   }
.sidebar.collapsed .nav-icon {
    margin-right: 0; /* Remove margin when collapsed */
}


/* --- NEW: Icon Wrapper Styles --- */
.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Adjusted size */
    height: 44px; /* Adjusted size */
    border-radius: 8px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* ADD THIS */
    z-index: 1; /* ADD THIS */
    /* background-color: transparent !important; /* Ensure this is not set or transparent */
}

/* --- NEW: Pseudo-element for Collapsed Hover Border/Glow --- */
.icon-wrapper::before {
    content: '';
    position: absolute;
    top: -2px; /* Offset by border width */
    left: -2px; /* Offset by border width */
    right: -2px; /* Offset by border width */
    bottom: -2px; /* Offset by border width */
    border-radius: 10px; /* Slightly larger than wrapper's 8px */
    border: 2px solid transparent; /* Start transparent */
    box-shadow: none; /* Start with no shadow */
    opacity: 0; /* Start hidden */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    z-index: -1; /* Position behind the icon wrapper */
    pointer-events: none; /* Make it unclickable */
}

/* Show and style the pseudo-element on hover (Collapsed State) */

/* Color 1 */
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+1) > a:hover .icon-wrapper::before {
    border-color: var(--sidebar-border-color-1);
    /*box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.2);*/
    opacity: 1;
}
/* Color 2 */
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+2) > a:hover .icon-wrapper::before {
    border-color: var(--sidebar-border-color-2);
    /*box-shadow: 0 0 15px 5px rgba(40, 167, 69, 0.3);*/
    opacity: 1;
}
/* Color 3 */
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+3) > a:hover .icon-wrapper::before {
    border-color: var(--sidebar-border-color-3);
    /*box-shadow: 0 0 15px 5px rgba(255, 193, 7, 0.3);*/
    opacity: 1;
}
/* Color 4 */
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+4) > a:hover .icon-wrapper::before {
    border-color: var(--sidebar-border-color-4);
    /*box-shadow: 0 0 15px 5px rgba(220, 53, 69, 0.3);*/
    opacity: 1;
}
/* --- END NEW --- */
/* --- NEW: Add persistent border for ACTIVE collapsed icons (FIXED) --- */
/* Color 1 */
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+1) > a.active .icon-wrapper::before {
border-color: var(--sidebar-border-color-1);
opacity: 1;
}
/* Color 2 */
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+2) > a.active .icon-wrapper::before {
border-color: var(--sidebar-border-color-2);
opacity: 1;
}
/* Color 3 */
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+3) > a.active .icon-wrapper::before {
border-color: var(--sidebar-border-color-3);
opacity: 1;
}
/* Color 4 */
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+4) > a.active .icon-wrapper::before {
border-color: var(--sidebar-border-color-4);
opacity: 1;
}
/* --- END FIX --- */

/* Keep icon centered inside its wrapper */
.icon-wrapper .nav-icon {
    margin-right: 0 !important; /* Remove margin when inside wrapper */
}

/* Apply hover background TO THE WRAPPER when collapsed */
.sidebar.collapsed li a:hover .icon-wrapper {
    background-color: transparent !important;
}

/* Ensure wrapper doesn't affect expanded view */
.sidebar:not(.collapsed) .icon-wrapper {
    width: auto; /* Reset width */
    height: auto; /* Reset height */
    background-color: transparent !important; /* No background when expanded */
    box-shadow: none !important; /* No shadow when expanded */
    margin: 0; /* Reset margin */
    /* Re-apply margin to the icon itself when expanded */
    margin-right: 18px; 
}
 /* Re-apply margin specifically to the icon when expanded */
 .sidebar:not(.collapsed) .icon-wrapper .nav-icon {
    margin-right: 0 !important; /* Icon itself has no margin */
 }
 .sidebar:not(.collapsed) li a .icon-wrapper {
     margin-right: 18px; /* Wrapper provides space */
 }

/* --- END NEW --- */

/* Hover effect ONLY for EXPANDED links */
.sidebar:not(.collapsed) .sidebar-nav li a:hover { 
    /* background-color: var(--sidebar-hover-color-1); /* Removed */
    color: var(--sidebar-link-hover-color);
    /*box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.2);*/
    border: 2px solid var(--sidebar-border-color-1); 
}
.sidebar-nav li a:hover .nav-icon {
    stroke: var(--sidebar-link-hover-color);
    transform: scale(1.1); 
}

/* --- NEW: Consolidated Active/Hover Rules (FIXED) --- */

/* Active state for ALL links (Shared properties) */
.sidebar-nav li.active a,
.sidebar-nav li a.active {
    color: var(--sidebar-link-active-color);
    font-weight: 600;
}
.sidebar-nav li.active a .nav-icon,
.sidebar-nav li a.active .nav-icon {
    stroke: var(--primary-blue); 
}
/* Background color ONLY when EXPANDED */
.sidebar:not(.collapsed) .sidebar-nav li.active a,
.sidebar:not(.collapsed) .sidebar-nav li a.active {
    background-color: var(--sidebar-link-active-bg);
}


/* --- NEW: Rotating Hover Colors for Parent Items (FIXED) --- */

/* --- Color 1 (Blue) --- */
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+1) > a:hover {
    background-color: var(--sidebar-hover-color-1);
    border: 2px solid var(--sidebar-border-color-1);
}
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+1) > a:hover .icon-wrapper {
    background-color: var(--sidebar-hover-color-1);
    box-shadow: inset 0 0 10px 2px rgba(0, 123, 255, 0.5);
}
/* Active State (Icon Color) */
.sidebar-nav > ul > li:nth-child(4n+1).active > a .nav-icon,
.sidebar-nav > ul > li:nth-child(4n+1) > a.active .nav-icon {
    stroke: var(--primary-blue); 
}
/* Active State (Background & Border - EXPANDED ONLY) */
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+1).active > a,
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+1) > a.active {
    background-color: var(--sidebar-link-active-bg);
    border: 2px solid var(--sidebar-border-color-1); /* <-- ADDED THIS */
}

/* --- Color 2 (Green) --- */
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+2) > a:hover { 
    background-color: var(--sidebar-hover-color-2);
    border: 2px solid var(--sidebar-border-color-2); 
}
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+2) > a:hover .icon-wrapper {
    box-shadow: inset 0 0 10px 2px rgba(40, 167, 69, 0.5);
}
/* Active State (Icon Color) */
.sidebar-nav > ul > li:nth-child(4n+2).active > a .nav-icon,
.sidebar-nav > ul > li:nth-child(4n+2) > a.active .nav-icon {
    stroke: var(--accent-green); 
}
/* Active State (Background & Border - EXPANDED ONLY) */
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+2).active > a,
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+2) > a.active {
    background-color: rgba(40, 167, 69, 0.25); 
    border: 2px solid var(--sidebar-border-color-2); /* <-- ADDED THIS */
}
.sidebar-nav > ul > li:nth-child(4n+2).active > a::before,
.sidebar-nav > ul > li:nth-child(4n+2) > a.active::before {
    background-color: var(--accent-green); 
}

/* --- Color 3 (Yellow) --- */
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+3) > a:hover { 
    background-color: var(--sidebar-hover-color-3);
    border: 2px solid var(--sidebar-border-color-3); 
}
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+3) > a:hover .icon-wrapper {
    box-shadow: inset 0 0 10px 2px rgba(255, 193, 7, 0.5);
}
/* Active State (Icon Color) */
.sidebar-nav > ul > li:nth-child(4n+3).active > a .nav-icon,
.sidebar-nav > ul > li:nth-child(4n+3) > a.active .nav-icon {
    stroke: #ffc107; 
}
/* Active State (Background & Border - EXPANDED ONLY) */
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+3).active > a,
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+3) > a.active {
    background-color: rgba(255, 193, 7, 0.25); 
    border: 2px solid var(--sidebar-border-color-3); /* <-- ADDED THIS */
}
.sidebar-nav > ul > li:nth-child(4n+3).active > a::before,
.sidebar-nav > ul > li:nth-child(4n+3) > a.active::before {
    background-color: #ffc107; 
}

/* --- Color 4 (Red) --- */
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+4) > a:hover { 
    background-color: var(--sidebar-hover-color-4);
    border: 2px solid var(--sidebar-border-color-4); 
}
.sidebar.collapsed .sidebar-nav > ul > li:nth-child(4n+4) > a:hover .icon-wrapper {
    box-shadow: inset 0 0 10px 2px rgba(220, 53, 69, 0.5);
}
/* Active State (Icon Color) */
.sidebar-nav > ul > li:nth-child(4n+4).active > a .nav-icon,
.sidebar-nav > ul > li:nth-child(4n+4) > a.active .nav-icon {
    stroke: var(--accent-red); 
}
/* Active State (Background & Border - EXPANDED ONLY) */
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+4).active > a,
.sidebar:not(.collapsed) .sidebar-nav > ul > li:nth-child(4n+4) > a.active {
    background-color: rgba(220, 53, 69, 0.25); 
    border: 2px solid var(--sidebar-border-color-4); /* <-- ADDED THIS */
}
.sidebar-nav > ul > li:nth-child(4n+4).active > a::before,
.sidebar-nav > ul > li:nth-child(4n+4) > a.active::before {
    background-color: var(--accent-red); 
}

/* --- End Rotating Hover Colors --- */


/* Submenu Styles */
.sidebar-nav .has-submenu > a {
    justify-content: flex-start; /* Align icon and text normally */
}
.sidebar.collapsed .has-submenu > a {
    justify-content: center; /* Center icon when collapsed */
}


.submenu-arrow {
     width: 16px;
     height: 16px;
     margin-left: auto; /* Pushes to the far right */
     flex-shrink: 0; /* Prevents arrow shrinking */
     transition: transform 0.3s ease, opacity 0.2s ease;
     opacity: 1;
}
.sidebar.collapsed .submenu-arrow {
    opacity: 0; /* Hide arrow when collapsed */
    width: 0;
}

.sidebar-nav .has-submenu.open > a .submenu-arrow {
    transform: rotate(180deg);
}

.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Add padding transition */
    background-color: rgba(0, 0, 0, 0.2); /* Darker background */
    /* No margin or border-radius needed, contained within parent */
}

.sidebar.collapsed .sub-menu {
    /* This ensures submenus are hidden when collapsed, even if they have the .open class */
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.sidebar-nav .has-submenu.open > .sub-menu {
    max-height: 1000px;
    padding: 5px 0; /* Add vertical padding when open */
}

/* Submenu item links */
.sub-menu li a {
    height: 40px; /* Shorter height */
    padding: 0 25px 0 55px; /* Indent more */
    font-size: 14px;
    font-weight: 400;
    margin: 0 10px; /* Match parent horizontal margin */
    border-radius: 6px; /* Smaller radius */
    box-shadow: none;
}
.sub-menu li a:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-hover-color);
}
.sub-menu li.active a,
.sub-menu li a.active {
     background-color: transparent;
     color: var(--primary-blue);
     font-weight: 500;
     box-shadow: none;
}

/* Divider style */
.nav-divider {
    height: 1px;
    background-color: var(--sidebar-border);
    margin: 15px 25px; /* Add spacing around divider */
    transition: margin var(--sidebar-transition-duration) var(--sidebar-transition-timing);
}
.sidebar.collapsed .nav-divider {
    margin: 15px 10px; /* Reduce margin when collapsed */
}


/* --- Main Content Push --- */
.main-content {
    height: calc(100vh - 60px); /* Adjust 60px to your actual navbar height */
    overflow-y: auto;          /* Add vertical scroll only when needed */
    flex-grow: 1;
    transition: margin-left var(--sidebar-transition-duration) var(--sidebar-transition-timing);
    margin-left: var(--sidebar-width-closed); /* Start pushed by collapsed width */
    width: calc(100% - var(--sidebar-width-closed)); /* Adjust initial width */
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

.main-content.sidebar-open {
    margin-left: var(--sidebar-width-open);
    width: calc(100% - var(--sidebar-width-open));
}


.navbar .logo {
     flex-grow: 0;
     margin-right: auto;
     text-align: left;
}
.navbar .user-info {
    margin-left: 0;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .sidebar {
        /* On smaller screens, sidebar always overlays */
        transform: translateX(-100%); /* Start closed */
        width: var(--sidebar-width-open); /* Always full width when open */
    }
    .sidebar.collapsed { /* Collapsed state doesn't apply visually on mobile overlay */
         width: var(--sidebar-width-open);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.4);
    }
    /* Content does NOT get pushed */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Overlay */
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    /* Add this class to body via JS when sidebar opens on mobile */
    body.sidebar-mobile-open::after {
        opacity: 1;
        pointer-events: all;
    }
}

/* --- Settings Page Styles --- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* Space between header and paragraph */
}

.page-header h1 {
    margin-bottom: 0; /* Remove default bottom margin from h1 */
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-flex; /* Align icon and text if needed */
    align-items: center;
    gap: 8px; /* <-- ADD THIS LINE */
}
.btn:active {
    transform: scale(0.98); /* Click effect */
}

.btn-primary {
    background: linear-gradient(90deg, #007bff, #00c6ff);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}
.btn-primary:hover {
    background: linear-gradient(90deg, #0056b3, #0099cc);
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.5);
}

.table-container {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.05); /* Subtle background */
    overflow-x: auto; /* Allow horizontal scroll on small screens */
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-secondary);
}

.data-table th,
.data-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap; /* Prevent text wrapping */
}

.data-table thead th {
    font-weight: 600;
    color: var(--text-header);
    background-color: rgba(255, 255, 255, 0.08); /* Slightly different header bg */
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* --- Custom Data Table Checkboxes --- */

/* 1. Hide the default browser checkbox appearance */
.data-table input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none; /* For Safari/Chrome */
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-secondary); /* Nice visible grey border */
    border-radius: 4px; /* Slightly rounded corners */
    background-color: transparent; /* Glassy background */
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: all 0.2s ease;
    margin: 0; /* Remove default margins */
}

/* 2. Hover effect */
.data-table input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /* Subtle glow on hover */
}

/* 3. Checked State (Blue background) */
.data-table input[type="checkbox"]:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* 4. The Checkmark (created with pure CSS) */
.data-table input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 48%;
    left: 50%;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0; /* Creates the 'L' shape */
    transform: translate(-50%, -60%) rotate(45deg); /* Rotates it into a checkmark */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
}

/* Show the checkmark when checked */
.data-table input[type="checkbox"]:checked::after {
    opacity: 1;
}

/* 5. Disabled State (e.g., your 'Select All' currently) */
.data-table input[type="checkbox"]:disabled {
    border-color: var(--input-border-dark);
    background-color: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Action Buttons */
.btn-action {
    background: none;
    border: none;
    color: var(--sidebar-link-color);
    cursor: pointer;
    padding: 5px;
    margin: 0 3px;
    font-size: 18px; /* Adjust icon size */
    transition: color 0.2s ease;
    text-decoration: none; /* <-- THIS IS THE FIX */
}
.btn-action.edit:hover {
    color: var(--primary-blue);
}
.btn-action.delete:hover {
    color: var(--accent-red);
}

/* --- Modal Styles --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000; /* Above everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.6); /* Dimmed background */
    backdrop-filter: blur(5px);
    opacity: 0; /* Start invisible for fade-in */
    transition: opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;
    /* FIX: Add padding to the overlay itself */
    padding-top: 50px;    /* Space above the modal content */
    padding-bottom: 50px; /* Space below the modal content */
    box-sizing: border-box; /* Include padding in height calculation */
}

.modal.show {
    display: flex; /* Use flex to center */
    align-items: center;
    justify-content: center;
    opacity: 1; /* Fade in */
}

.modal-content {
    background: #1a1a2e; /* Match navbar/dark theme */
    color: var(--text-light);
    margin: auto;
    padding: 0; /* Remove padding, header/body/footer have it */
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    width: 90%;
    max-width: 500px; /* Limit modal width */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
    position: relative;
    transform: scale(0.95) translateY(20px); /* Start slightly smaller for scale-in */
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.modal.show .modal-content {
    /* CHANGE transform */
    transform: scale(1) translateY(0); /* Scale in AND slide up */
    opacity: 1; /* Fade in content */
}

.modal-content.large {
    max-width: 800px;
    padding-top: 40px;
    padding-bottom: 40px;
    max-height: 85vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* FIX: Add this separate rule specifically for WebKit browsers (Chrome, Safari, Edge new) */
.modal-content.large::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}


.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid var(--glass-border);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 2.0em; /* Larger close button */
    font-weight: bold;
    color: var(--sidebar-link-color);
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.2s ease;
}
.modal-close-btn:hover {
    color: var(--text-light);
}

.modal-body {
    padding: 25px;
}
.modal-body .form-group {
     margin-bottom: 20px; /* Adjust spacing */
}
.modal-body label {
    color: var(--text-secondary); /* Match form label colors */
    font-weight: 500;
}
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="email"],
.modal-body select,
.modal-body textarea, 
.form-group input[type="text"], 
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"], 
.form-group select,
.form-group textarea,
/* --- NEW SELECTORS ADDED --- */
.line-item-field input,
.line-item-field select,
.line-item-field textarea {
    width: 100%;
    padding: 12px 15px; /* Base padding */
    border: 1px solid var(--input-border-dark);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
    background-color: var(--input-bg-dark);
    color: var(--text-light);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
}
.modal-body input[type="text"]:focus,
.modal-body input[type="number"]:focus,
.modal-body input[type="email"]:focus,
.modal-body select:focus,
.modal-body textarea:focus, 
.form-group input[type="text"]:focus, 
.form-group input[type="number"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus,
.form-group textarea:focus,
/* --- NEW SELECTORS ADDED --- */
.line-item-field input:focus,
.line-item-field select:focus,
.line-item-field textarea:focus {
     outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- Specific Styles for SELECT element --- */
.modal-body select,
.form-group select,
.line-item-field select { /* ADD this selector */
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0a0a0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
     background-repeat: no-repeat;
     background-position: right 15px top 50%;
     background-size: .65em auto;
     padding-right: 40px;
     cursor: pointer;
}
/* --- End Specific SELECT Styles --- */


.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 15px 25px;
    border-top: 1px solid var(--glass-border);
    gap: 10px; /* Space between buttons */
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3);
}
.btn-secondary:hover {
    background-color: #5a6268;
     box-shadow: 0 6px 15px rgba(108, 117, 125, 0.5);
}
.modal-body select option,
 .form-group select option,
 .line-item-field select option { /* ADD this selector */
    color: #333;
    background-color: #fff;
}

/* --- Custom Notification Styles --- */
.custom-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999; /* Above everything */
    min-width: 250px;
    max-width: 400px;
    padding: 15px 40px 15px 20px; /* Space for close button */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    color: var(--text-header);
    font-size: 15px;
    font-weight: 500;
    
    /* Glassy Effect */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    
    opacity: 0; /* Start hidden */
    transform: translateX(100%); /* Start off-screen right */
    visibility: hidden; /* Ensure it's not interactive when hidden */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s; /* Delay visibility change */
}

.custom-notification.show {
    opacity: 1;
    transform: translateX(0); /* Slide in */
    visibility: visible;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0s;
}

/* Color variations */
.custom-notification.success {
    background: rgba(40, 167, 69, 0.35); /* Green glass */
    border-color: rgba(40, 167, 69, 0.7); 
}
.custom-notification.error {
     background: rgba(220, 53, 69, 0.35); /* Red glass */
    border-color: rgba(220, 53, 69, 0.7); 
}
.custom-notification.info { /* Optional: For general messages */
     background: rgba(0, 123, 255, 0.35); /* Blue glass */
    border-color: rgba(0, 123, 255, 0.7); 
}


.notification-close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.6em;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: color 0.2s ease;
}
.notification-close-btn:hover {
    color: var(--text-header);
}

/* Add style for delete button */
.btn-danger {
    background-color: var(--accent-red);
    color: white;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}
.btn-danger:hover {
    background-color: #c82333; /* Darker red */
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.5);
}

/* --- Filter & Pagination Styles --- */

.filter-controls {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.04); /* Slightly lighter than table container */
    border: 1px solid var(--glass-border);
    border-radius: 8px;
}

.filter-controls form {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 15px; /* Space between filter elements */
    align-items: center;
}

.filter-group {
    display: flex; /* Aligns label/input if needed later */
    flex-direction: column; /* Example stacking */
}
.filter-group:last-child {
     margin-left: auto; /* Push buttons to the right */
     flex-direction: row; /* Keep buttons side-by-side */
     align-items: center;
}


.filter-input,
.filter-select {
    padding: 10px 15px;
    border: 1px solid var(--input-border-dark);
    border-radius: 6px;
    background-color: var(--input-bg-dark);
    color: var(--text-light);
    font-size: 15px;
    min-width: 200px; /* Give inputs some width */
}
.filter-input::placeholder {
     color: var(--input-placeholder-dark);
     opacity: 0.7;
}

.filter-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0a0a0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
    padding-right: 40px;
    cursor: pointer;
}
.filter-select option {
     color: #333; /* Dark text for options */
     background-color: #fff;
}

.btn-link { /* Style for Clear button */
    background: none;
    border: none;
    color: var(--primary-blue);
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}
.btn-link:hover {
     color: var(--primary-blue-dark);
}

/* Pagination */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    color: var(--text-secondary);
    font-size: 14px;
}

.page-links {
    display: flex;
    gap: 5px;
}

.page-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--sidebar-link-color);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.page-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    border-color: rgba(255, 255, 255, 0.2);
}
.page-link.active {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
    font-weight: 600;
}
.page-link.disabled { /* For '...' */
     background-color: transparent;
     border-color: transparent;
     color: var(--sidebar-link-color);
     cursor: default;
}

/* Update Empty Table Message Style */
.data-table-empty {
    text-align: center !important; /* Force center */
    padding: 30px !important; /* More padding */
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Profile Dropdown Styles --- */
.user-info-dropdown {
    position: relative; /* Needed for absolute positioning of the menu */
    display: inline-block; /* Or flex, depending on your navbar layout */
}

.profile-trigger {
    background-color: transparent; /* Or match navbar background */
    color: var(--text-light); /* User name text color */
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    display: flex; /* Align items horizontally */
    align-items: center;
    border-radius: 4px;
    transition: background-color var(--transition-speed);
    display: none;
}

/* The new trigger button (circle) */
.profile-avatar-trigger {
    background-color: var(--input-bg-dark); /* Dark bg for placeholder */
    border: 2px solid var(--glass-border); /* Subtle border */
    border-radius: 50%;
    width: 40px; /* Adjust size */
    height: 40px;
    padding: 0;
    cursor: pointer;
    overflow: hidden; /* Clip image/initials */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow var(--transition-speed);
}

.profile-avatar-trigger:focus,
.profile-avatar-trigger:hover {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4); /* Use existing focus glow */
}

/* The <img> inside the trigger */
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit circle */
}

/* The initials <div> inside the trigger */
.profile-avatar-initials {
    color: var(--text-light);
    font-weight: 600;
    font-size: 14px;
    line-height: 40px; /* Center vertically */
    text-align: center;
    user-select: none; /* Not selectable */
}

/* Header inside the dropdown menu */
.dropdown-menu-header {
    padding: 12px 12px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 8px; /* Space below header */
}

.dropdown-menu-header .user-name {
    display: block;
    color: var(--text-light);
    font-weight: 600;
    font-size: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-menu-header .user-role {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-trigger:hover,
.profile-trigger:focus {
    background-color: rgba(255, 255, 255, 0.1); /* Slight highlight on hover */
    outline: none;
}

.profile-trigger .welcome-text {
    margin-right: 5px;
    color: var(--text-secondary); /* Lighter welcome text */
    font-size: 0.9em;
}

.profile-trigger .user-name {
    font-weight: 600; /* Make name slightly bolder */
}

.profile-trigger .user-role {
    margin-left: 5px;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.profile-trigger .dropdown-icon {
    margin-left: 10px;
    font-size: 0.8em;
    transition: transform var(--transition-speed);
}

/* Rotate icon when dropdown is open (JS will add .active class) */
.profile-trigger.active .dropdown-icon {
    transform: rotate(180deg);
}


.dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position below the trigger */
    right: 0; /* Align to the right */
    background-color: var(--sidebar-bg); /* Use a dark background, maybe sidebar color */
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 1001; /* Above other content */
    border-radius: 6px;
    padding: 8px 0; /* Vertical padding */
    margin-top: 5px; /* Small gap below trigger */
    border: 1px solid var(--glass-border); /* Subtle border */
    margin-top: 10px; /* More space for the avatar */
    min-width: 240px; /* Make it a bit wider for the header */
}

/* Show the menu when JS adds the .active class */
.dropdown-menu.active {
    display: block;
}

.dropdown-item {
    color: var(--text-light);
    padding: 15px; /* FIX: Adjusted padding */
    text-decoration: none;
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: flex-start; /* FIX: Align items to the left */
    font-size: 0.95em;
    white-space: nowrap; 
    transition: background-color var(--transition-speed), color var(--transition-speed);
    border-radius: 4px; /* FIX: Add radius for nicer hover */
}

.dropdown-item .menu-icon {
    margin-right: 12px; /* Space between icon and text */
    width: 16px; /* Fixed width for alignment */
    text-align: center;
    color: var(--text-secondary); /* Icon color */
}


.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Highlight on hover */
    color: var(--primary-blue-light); /* Optional: Change text color slightly */
}

.dropdown-item:hover .menu-icon {
    color: var(--primary-blue-light); /* Optional: Change icon color slightly */
}

.dropdown-divider {
    height: 1px;
    margin: 8px 0;
    overflow: hidden;
    background-color: var(--glass-border); /* Use border color for divider */
}

.logout-item .menu-icon {
    color: var(--accent-red); /* Make logout icon red */
}
.logout-item:hover {
     background-color: rgba(220, 53, 69, 0.2); /* Reddish hover for logout */
     color: var(--text-light); /* Keep text light on red hover */
}
.logout-item:hover .menu-icon {
    color: var(--accent-red); /* Keep icon red */
}

/* --- Custom File Input Styling --- */
.custom-file-input-wrapper {
    display: flex; /* Align button and filename */
    align-items: center;
    gap: 10px; /* Space between button and filename */
    margin-top: 5px; /* Space below the main label */
}

/* Style the label like a button (it already has .btn classes) */
.custom-file-input-wrapper label.btn {
    cursor: pointer; /* Indicate it's clickable */
    /* Add any specific overrides if needed, e.g., margin */
    margin-bottom: 0;
}

/* Style the filename display area */
.file-name-display {
    color: var(--text-secondary); /* Match placeholder text color */
    font-size: 0.9em;
    font-style: italic;
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ... if filename is too long */
    max-width: calc(100% - 150px); /* Adjust max-width based on button size */
}

/* --- Enhanced Profile Picture Upload --- */
.profile-picture-area {
    /* Adjust layout if needed, e.g., center items */
    /* display: flex; flex-direction: column; align-items: center; */
}

.profile-picture-container {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--input-border-dark);
    margin-bottom: 15px;
    cursor: pointer;
    background-color: var(--input-bg-dark); /* Background for placeholder state */
    display: inline-block; /* Or block with margin: auto */

    /* --- FIX: Add Flexbox centering --- */
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    text-align: center; /* Ensure text itself is centered if it wraps */
    /* --- End Fix --- */
}

/* Style for the placeholder text span */
.profile-picture-placeholder {
    display: none; /* Initially hidden (JS/PHP toggles this) */
    color: var(--text-secondary); /* Dimmed text color */
    font-size: 0.9em;
    padding: 5px; /* Add padding in case text wraps */
}

.profile-picture-display {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image nicely */
}

/* Overlay label to trigger file input */
.profile-picture-change-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Dark overlay on hover */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Hidden by default */
    transition: opacity var(--transition-speed);
    cursor: pointer;
    font-size: 1.5em; /* Icon size */
    border-radius: 50%;
}

.profile-picture-container:hover .profile-picture-change-overlay {
    opacity: 1; /* Show overlay on hover */
}

/* Remove button ('x') */
.profile-picture-remove-btn {
    position: absolute;
    top: 5px; /* Position top right */
    right: 5px;
    background-color: rgba(220, 53, 69, 0.8); /* Red background */
    color: white;
    border: none;
    border-radius: 50%; /* Make it round */
    width: 28px;
    height: 28px;
    font-size: 14px;
    line-height: 28px; /* Center icon vertically */
    text-align: center;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition-speed);
    z-index: 10; /* Ensure it's above the overlay */
}

.profile-picture-remove-btn:hover {
    background-color: rgba(200, 33, 49, 0.9); /* Darker red on hover */
}

/* Ensure hidden input stays hidden */
.custom-file-input {
    display: none !important; /* Force hide */
}

/* Hide default label if it remains */
label[for="profile_upload_picture"]:not(.profile-picture-change-overlay) {
    display: none;
}

/* --- Styles for Form Pages (Create/Edit Company) --- */
.form-container-centered {
    background-color: var(--glass-bg);
    padding: 30px 40px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 900px; /* Or your preferred max width */
    margin: 0 auto 40px auto; /* Center it */
}

.form-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 0; }
.form-group.half-width { flex: 1 1 calc(50% - 10px); min-width: 200px; }
.form-divider { border: none; border-top: 1px solid var(--input-border-dark); margin: 25px 0; }
fieldset { border: 1px solid var(--input-border-dark); border-radius: 6px; padding: 20px; margin-bottom: 25px; }
legend { padding: 0 10px; font-weight: bold; color: var(--text-light); font-size: 1.1em; }
fieldset .form-group { margin-bottom: 15px; }
fieldset .form-row .form-group { margin-bottom: 15px; }
.form-actions { margin-top: 30px; display: flex; justify-content: flex-end; gap: 15px; }

/* --- Tom Select (Searchable Dropdown) Dark Theme --- */
.ts-wrapper .ts-control {
    background-color: var(--input-bg-dark);
    border: 1px solid var(--input-border-dark);
    border-radius: 6px;
    padding: 10px 15px; /* Match your input padding */
    font-size: 16px;
    color: var(--text-light);
    height: auto; /* Allow wrap */
}
.ts-wrapper.multi .ts-control > div {
    background: var(--primary-blue);
    color: var(--text-light);
    border-radius: 4px;
    padding: 2px 6px;
}
.ts-wrapper .ts-control > input::placeholder { color: var(--input-placeholder-dark); }
.ts-wrapper.focus .ts-control {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
}
.ts-wrapper .ts-dropdown {
    /*background-color: var(--sidebar-bg);*/
    background-color: #000000;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-light);
}
.ts-wrapper .ts-dropdown .ts-option { padding: 10px 15px; }
.ts-wrapper .ts-dropdown .ts-option:hover,
.ts-wrapper .ts-dropdown .ts-option.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary-blue-light);
}

/* --- New Class for Consistent Full-Page Forms --- */
.form-container-box {
    /* Based on .modal-content styles */
    background-color: var(--modal-bg); /* Use the modal's dark bg */
    padding: 40px; /* Match the modal's large padding */
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    /* Layout for full pages */
    margin: 0 auto 40px auto; /* Center it and add bottom margin */
    max-width: 900px; /* Default max-width for large forms */
}

/* Tweak fieldset styles when inside this container */
.form-container-box fieldset {
    background-color: transparent; /* Ensure fieldset isn't overriding bg */
    border-color: var(--input-border-dark); /* Match input borders */
}

/* --- Styles for Main Content Full-Page Forms (e.g., Create Company) --- */
.main-form-content fieldset {
    background-color: var(--input-bg); /* Use the same dark background as inputs/modal fields */
    border: 1px solid var(--input-border-dark); /* Darker border for fieldsets */
    border-radius: 6px;
    padding: 20px 25px; /* Adjust padding as needed */
    margin-bottom: 25px; /* Spacing between fieldsets */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow like inputs */
}

.main-form-content legend {
    color: var(--text-color-light); /* Make legend text visible */
    padding: 0 10px;
    font-size: 1.1em;
    font-weight: 600;
    background-color: var(--input-bg); /* Match fieldset background */
    border-radius: 4px;
    margin-left: -5px; /* Adjust if needed to align with fieldset border */
}

/* Specific styles for form groups and labels within these fieldsets */
.main-form-content .form-group {
    margin-bottom: 20px;
}

.main-form-content label {
    color: var(--text-color-secondary); /* Adjust label color if needed */
    margin-bottom: 8px;
    display: block;
    font-weight: 500;
}

/* Ensure inputs, selects, textareas within this form content also match existing styles */
.main-form-content input[type="text"],
.main-form-content input[type="email"],
.main-form-content input[type="password"],
.main-form-content input[type="number"],
.main-form-content input[type="url"],
.main-form-content select,
.main-form-content textarea {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color-primary);
    padding: 10px 15px;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't add to total width */
}

.main-form-content input[type="text"]::placeholder,
.main-form-content input[type="email"]::placeholder,
.main-form-content input[type="password"]::placeholder,
.main-form-content input[type="number"]::placeholder,
.main-form-content input[type="url"]::placeholder,
.main-form-content select::placeholder,
.main-form-content textarea::placeholder {
    color: var(--text-color-placeholder);
}

/* --- Quill Rich Text Editor Dark Theme --- */
.ql-toolbar {
    border-radius: 6px 6px 0 0 !important;
    border: 1px solid var(--input-border-dark) !important;
    background: var(--input-bg-dark); /* Dark background for toolbar */
}
.ql-toolbar .ql-stroke {
    stroke: var(--text-secondary) !important; /* White icons */
}
.ql-toolbar .ql-fill {
    fill: var(--text-secondary) !important; /* White icons */
}
.ql-toolbar .ql-picker-label {
    color: var(--text-secondary) !important; /* White text for dropdowns */
}
.ql-toolbar .ql-picker-options {
    background-color: var(--sidebar-bg); /* Dark dropdown */
    border-color: var(--glass-border) !important;
}
.ql-toolbar .ql-picker-item {
    color: var(--text-light);
}
.ql-toolbar .ql-picker-item:hover,
.ql-toolbar .ql-picker-item.ql-selected {
    background-color: var(--primary-blue) !important;
    color: white !important;
}

.ql-container {
    border-radius: 0 0 6px 6px !important;
    border: 1px solid var(--input-border-dark) !important;
    border-top: 0 !important; /* Remove top border, toolbar has it */
    background: var(--input-bg-dark); /* Dark writing area */
    color: var(--text-light); /* White text */
    font-size: 16px; /* Match other inputs */
    min-height: 150px; /* Set a good default height */
}
.ql-editor {
    font-family: 'Poppins', sans-serif; /* Match your site's font */
}
.ql-editor.ql-blank::before {
    color: var(--input-placeholder-dark) !important; /* Placeholder text color */
    font-style: italic !important;
}

/* --- Styles for Create/Edit Quotation Page --- */

/* Read-only snapshot fields */
.snapshot-group {
    background-color: var(--input-bg-dark); /* Dark bg */
    border: 1px solid var(--input-border-dark);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}
.snapshot-group label {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-bottom: 2px;
    display: block;
    font-weight: 500;
}
.snapshot-group p {
    font-size: 1em;
    color: var(--text-light);
    margin: 0;
    white-space: pre-wrap; /* Preserve line breaks in address */
}



/* Quote Summary Box */

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    color: var(--text-secondary);
    padding: 8px 0;
}
.summary-row.grand-total {
    color: var(--text-light);
    font-weight: 700;
    font-size: 1.3em;
    border-top: 1px solid var(--glass-border);
    margin-top: 10px;
    padding-top: 15px;
}
.summary-row .summary-label {
    font-weight: 500;
}
.summary-row .summary-value {
    font-weight: 600;
    color: var(--text-light);
}

/* Line Item Card Styling */

.line-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: rgba(0,0,0,0.1);
    border-bottom: 1px solid var(--glass-border);
}
.line-item-header h5 {
    margin: 0;
    color: var(--text-light);
}
.line-item-body {
    padding: 20px;
}
/* Style for small labels in line items */
.line-item-body .form-group label {
    font-size: 0.85em;
    margin-bottom: 4px;
}
/* Smaller inputs for line items */
.line-item-body .form-group input,
.line-item-body .form-group select {
    font-size: 14px;
    padding: 8px 12px;
}
.line-item-body .form-group textarea {
    font-size: 14px;
    padding: 8px 12px;
    min-height: 60px; /* Smaller textarea */
}

/* --- NEW: Line Item Card Layout --- */

/* 1. The Header Row (Replaces <thead>) */
.line-item-header-row {
    display: flex;
    padding: 12px 10px;
    border-bottom: 2px solid var(--glass-border);
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.1);
}

.line-item-header-row .col-header {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9em;
    text-align: left;
}

/* 2. The Card (Replaces <tr>) */
/* We keep .line-item-card-row for JS/CSS compatibility */
.line-item-card {
    background-color: var(--input-bg-dark);
    border: 1px solid var(--input-border-dark);
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.line-item-card:focus-within {
     border-color: var(--primary-blue);
     box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
}

/* 3. The Card Header (Product Name & Delete) */
.line-item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid var(--glass-border);
}

.line-item-card-header h4 {
    margin: 0;
    font-size: 1.1em;
    color: var(--text-light);
}

.line-item-card-header .btn-action.delete {
    font-size: 1.2em;
}

/* 4. The Card Body (Inputs) */
.line-item-card-body {
    display: flex;
    flex-wrap: wrap; /* Allows fields to wrap on small screens */
    gap: 15px;
    padding: 15px;
}

/* 5. The individual fields */
.line-item-field {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fields will grow to fill space */
}

.line-item-field label {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-bottom: 5px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Ensure inputs/selects inside fields are styled correctly */


.line-item-field textarea {
    min-height: 40px;
    resize: vertical;
}

/* 6. Total cell styling */
.line-item-total-display {
    text-align: right;
    font-weight: 600;
    font-size: 1.5em;
    color: var(--text-light);
    flex-basis: 150px;
    min-width: 120px;
    padding-top: 15px; /* Align with inputs */
}

/* 7. Column Widths for the Header Row */
.line-item-header-row .col-prod-code { width: 120px; }
.line-item-header-row .col-product { flex-grow: 1; }
.line-item-header-row .col-qty { width: 80px; }
.line-item-header-row .col-price { width: 120px; }
.line-item-header-row .col-cost { width: 120px; }
.line-item-header-row .col-discount { width: 150px; }
.line-item-header-row .col-tax { width: 150px; }
.line-item-header-row .col-total { width: 130px; text-align: right; }
.line-item-header-row .col-actions { width: 50px; text-align: center; }

/* --- New Quotation Page Layout Styles --- */

/* The main form wrapper (replaces .form-container-box for this page) */
.quotation-form-container {
    background-color: var(--modal-bg); /* Use the modal's dark bg */
    padding: 30px 40px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 1700px; /* Make it wider for the new layout */
    margin: 0 auto 40px auto;
}

/* 1. The "Letterhead" Header */
.quotation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 30px;
}

.quotation-header .logo-area {
    /* Assuming you'll add your logo here */
    flex: 1;
}

.quotation-header .logo-area img {
    max-width: 200px; /* Adjust as needed */
    opacity: 0.9;
}

.quotation-header .branch-snapshot {
    flex: 1;
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.95em;
    line-height: 1.6;
}

.quotation-header .branch-snapshot h3 {
    margin: 0 0 10px 0;
    color: var(--text-light);
    font-weight: 600;
}
.quotation-header .branch-snapshot p {
    margin: 0;
}

/* 2. The Two-Column Layout */
.quote-main-layout {
    display: flex;
    flex-wrap: wrap; /* Allow stacking on small screens */
    gap: 30px;
    width: 100%; /* <-- THIS IS THE FIX */
}

/* Left column ("Billed To") */
.quote-col-left {
    flex: 1;
    min-width: 300px; /* Prevent it from getting too squished */
}

/* Right column ("Quotation Details" Form) */
.quote-col-right {
    flex: 2; /* Make it twice as wide as the left column */
    min-width: 400px;
}

/* Style for the "Billed To" read-only snapshot boxes */
.snapshot-box {
    background-color: var(--input-bg-dark);
    border: 1px solid var(--input-border-dark);
    border-radius: 6px;
    padding: 20px;
}
.snapshot-box h5 {
    color: var(--text-light);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 10px;
}
.snapshot-box .snapshot-line {
    margin-bottom: 8px;
}
.snapshot-box .snapshot-label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.75em; /* Made smaller */
    margin-bottom: 4px; /* Added more space */
    font-weight: 600; /* Made bolder */
    text-transform: uppercase; /* Made ALL CAPS */
    letter-spacing: 0.5px; /* Added letter spacing */
}
.snapshot-box .snapshot-value {
    display: block;
    color: var(--text-light);
    font-size: 1.05em; /* Made slightly larger */
    white-space: pre-wrap;
    font-weight: 400; /* Set to normal weight */
}

/* 3. The Line Item Table Grid */
.line-item-grid-wrapper {
    margin-top: 30px;
}

.line-item-grid {
    width: 100%;
    border-collapse: collapse;
}

.line-item-grid thead th {
    background-color: rgba(0,0,0,0.1);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9em;
    text-align: left;
    padding: 12px 10px;
    border-bottom: 2px solid var(--glass-border);
}

.line-item-grid tbody tr {
    border-bottom: 1px solid var(--input-border-dark);
}
.line-item-grid tbody tr:last-child {
    border-bottom: 2px solid var(--glass-border);
}

.line-item-grid tbody td {
    padding: 8px 5px;
    vertical-align: middle; /* <-- UPDATED */
}

/* Make inputs/selects inside the table fit */
.line-item-grid .form-group {
    margin-bottom: 0; /* Remove extra space */
}

/* --- Style for Bundle Items in Line Item Grid --- */
.line-item-grid tbody tr.is-bundle-item td {
    background-color: rgba(0, 86, 179, 0.1); /* Subtle dark blue tint */
}

/* --- Style for Bundle Items in Card Layout --- */
.line-item-card.is-bundle-item .line-item-card-header {
    background-color: rgba(0, 86, 179, 0.15); /* Darker blue tint for header */
}
.line-item-card.is-bundle-item .line-item-card-body {
    background-color: rgba(0, 86, 179, 0.08); /* Lighter blue tint for body */
}

.line-item-grid input[type="text"],
.line-item-grid input[type="number"],
.line-item-grid textarea,
.line-item-grid select {
    width: 100%;
    padding: 8px 10px; /* Smaller padding */
    font-size: 14px; /* Smaller font */
    background-color: var(--input-bg-dark);
    border: 1px solid var(--input-border-dark);
    color: var(--text-light);
    border-radius: 4px;
    box-sizing: border-box;
}
.line-item-grid textarea {
    resize: vertical;
    min-height: 40px;
}
.line-item-grid .col-prod-code { 
    width: 120px; 
    vertical-align: middle;
    font-weight: 600;
    color: var(--text-light);
}
/* Column width styles */
.line-item-grid .col-product { width: calc(25% - 120px); }
.line-item-grid .col-qty { width: 80px; }
.line-item-grid .col-price { width: 120px; }
.line-item-grid .col-cost { width: 120px; }
.line-item-grid .col-discount { width: 150px; }
.line-item-grid .col-tax { width: 150px; }
.line-item-grid .col-total { width: 130px; text-align: right; }
.line-item-grid .col-actions { width: 50px; text-align: center; }

/* Read-only total cell */
.line-item-grid .line-total-cell {
    padding: 10px 10px 0 0;
    font-weight: 600;
    font-size: 1.1em;
    color: var(--text-light);
    vertical-align: middle;
}

/* Item Adder Bar */
.line-item-adder {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--input-border-dark);
    padding-bottom: 20px;
}
.line-item-adder .form-group {
    flex-grow: 1;
    margin-bottom: 0;
}

/* 4. Final Summary Section */
.quote-final-summary {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.quote-col-remarks {
    flex: 2; /* Remarks take 2/3 width */
    min-width: 400px;
}

.quote-col-totals {
    flex: 1; /* Totals take 1/3 width */
    min-width: 300px;
}

/* Blue Summary Box (Image 2) */
.quote-summary-box {
    background-color: var(--primary-blue-dark); /* Use a distinct blue */
    border: 1px solid var(--primary-blue);
    border-radius: 6px;
    padding: 20px;
    color: var(--text-light);
}

.quote-summary-box h4 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 10px;
}
.quote-summary-box .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    color: var(--primary-blue-light); /* Lighter text on dark blue */
    padding: 8px 0;
}
.quote-summary-box .summary-row .summary-label {
    font-weight: 500;
}
.quote-summary-box .summary-row .summary-value {
    font-weight: 600;
    color: var(--text-light); /* White value */
}
.quote-summary-box .summary-row.grand-total {
    color: var(--text-light);
    font-weight: 700;
    font-size: 1.3em;
    border-top: 1px solid rgba(255,255,255,0.3);
    margin-top: 10px;
    padding-top: 15px;
}
.btn-action.pdf:hover {
    color: var(--accent-green);
}

/* --- Approvals Dashboard Styles (Corrected for Links) --- */
.tabs-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 20px;
    gap: 5px;
}

.tab-link {
    display: block;             /* Makes the link behave like a button box */
    padding: 12px 25px;         /* Nice big click area */
    color: var(--text-secondary);
    text-decoration: none;      /* Removes the default blue underline */
    font-size: 15px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.tab-link:hover {
    color: var(--text-light);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px 6px 0 0; /* Rounded top corners on hover */
}

.tab-link.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
    background-color: rgba(0, 123, 255, 0.05); /* Subtle blue background for active tab */
    border-radius: 6px 6px 0 0;
}

/* Status Badge for 'Pending' */
.status-badge.status-pending { 
    background-color: rgba(255, 193, 7, 0.2); 
    color: #ffc107; 
}

/* Action button specific to approvals */
.btn-action-approve {
    padding: 6px 12px;
    font-size: 14px;
    background: linear-gradient(90deg, #007bff, #00c6ff);
    border: none;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
}
.btn-action-approve:hover {
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.5);
    transform: translateY(-2px);
}
/* --- Fix for Sortable Table Headers --- */
.data-table th a {
    color: var(--text-header) !important; /* Forces them to be white like other headers */
    text-decoration: none;
    display: flex;           /* Keeps text and arrow aligned nice */
    align-items: center;
    gap: 5px;               /* Space between text and arrow */
}

/* Optional: Make them blue only when hovering so users know they are clickable */
.data-table th a:hover {
    color: var(--primary-blue-light) !important;
}

/* Optional: Keep the currently active sort column slightly different if you want */
.data-table th a.active-sort {
    font-weight: 700;      /* Make the active sorted column bolder */
    /* color: var(--primary-blue) !important; /* Uncomment if you STILL want the active one blue */
}

/* --- DEAL TYPE BADGES (Standardized) --- */
.type-badge {
    padding: 4px 10px;       /* Increased padding */
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;        /* Bolder text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-block;
    border: 1px solid transparent;
}

/* 1. Normal (Standard Blue) */
.type-normal {
    background-color: rgba(0, 123, 255, 0.15);
    color: #9ec5fe; 
    border-color: rgba(0, 123, 255, 0.3);
}

/* 2. Special (Purple) */
.type-special {
    background-color: rgba(111, 66, 193, 0.2);
    color: #e0cffc; 
    border-color: rgba(111, 66, 193, 0.3);
}

/* 3. Discount (Orange) */
.type-discount {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107; 
    border-color: rgba(255, 193, 7, 0.3);
}

/* 4. CSR (Green) */
.type-csr {
    background-color: rgba(40, 167, 69, 0.2);
    color: #a3ffb4; 
    border-color: rgba(40, 167, 69, 0.3);
}

/* 5. Contra Deals (Teal/Cyan) */
.type-semi-contra,
.type-full-contra {
    background-color: rgba(23, 162, 184, 0.2);
    color: #9efcd9; 
    border-color: rgba(23, 162, 184, 0.3);
}

/* 6. N/A or Default (Gray) */
.type-n-a {
    background-color: rgba(108, 117, 125, 0.2);
    color: #d1d1d1;
    border-color: rgba(108, 117, 125, 0.3);
}

/* --- Style for Read-Only Inputs --- */
.readonly-input {
    background-color: var(--input-bg-dark) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--input-border-dark) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

.dropdown-menu-content a.disabled-link {
        color: var(--text-secondary);
        opacity: 0.4;
        cursor: not-allowed;
        background-color: transparent !important;
    }
    .dropdown-menu-content a.disabled-link:hover {
        color: var(--text-secondary);
    }
    
/* --- NEW: Global Search Button (in Header) --- */
.global-search-btn {
    background-color: var(--input-bg-dark);
    border: 1px solid var(--input-border-dark);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    margin-right: 20px; /* Space from profile */
    min-width: 300px; /* <-- ADD THIS LINE */
}
.global-search-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-blue);
}
.global-search-btn svg {
    stroke: var(--text-secondary);
    width: 18px;
    height: 18px;
}
.global-search-btn .search-placeholder {
    font-size: 0.9em;
    opacity: 0.7;
}

/* --- NEW: Search Modal Overlay --- */
.search-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dimmed background */
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.2s ease-out;
    align-items: flex-start; /* Align modal to top */
    justify-content: center;
}
.search-modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* --- NEW: Search Modal Content Box --- */
.search-modal-content {
    /* Glassy Redesign */
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    width: 90%;
    max-width: 700px;
    margin-top: 10vh; /* 10% from the top */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transform: scale(0.98);
    opacity: 0;
    transition: all 0.2s ease-out;
}
.search-modal-overlay.show .search-modal-content {
    transform: scale(1);
    opacity: 1;
}

/* --- NEW: Search Input Container --- */
.search-modal-input-container {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
}
.search-modal-input-container svg {
    position: absolute;
    left: 25px;
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    opacity: 0.5;
}
.search-modal-input {
    width: 100%;
    padding: 20px 25px 20px 60px; /* Left padding for icon */
    font-size: 1.2em;
    background-color: transparent;
    color: var(--text-light);
    border: none;
    box-sizing: border-box;
}
.search-modal-input:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 0 var(--primary-blue);
}
.search-modal-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* --- NEW: Search Results Area --- */
.search-results-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}
.search-result-group h5 {
    font-size: 0.8em;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 15px 5px 15px;
    margin: 5px 0 0 0;
    border-bottom: 1px solid var(--glass-border);
}
.search-result-item a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--text-light);
    border-radius: 6px;
    transition: background-color 0.2s ease;
    gap: 15px;
}
.search-result-item a:hover,
.search-result-item a.is-focused {
    background-color: var(--primary-blue);
    color: white;
}
.search-result-item a .result-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    opacity: 0.8;
}
.search-result-item a:hover .result-icon,
.search-result-item a.is-focused .result-icon {
    stroke: white;
    opacity: 1;
}
.search-result-item .result-text {
    flex-grow: 1;
    overflow: hidden; /* For text ellipsis */
}
.search-result-item .result-title {
    font-size: 1em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-item .result-subtitle {
    font-size: 0.85em;
    color: var(--text-secondary);
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-item a:hover .result-subtitle,
.search-result-item a.is-focused .result-subtitle {
    color: white;
    opacity: 1;
}

/* --- NEW: Status Badge --- */
.search-result-item .result-status {
    flex-shrink: 0;
    /* We reuse the global .status-badge styles */
    transform: scale(0.9); /* Make it slightly smaller */
}
.search-result-item a:hover .status-badge,
.search-result-item a.is-focused .status-badge {
    /* Make badges look good on blue background */
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.search-no-results {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 30px;
}

/* --- NEW: Modal Footer --- */
.search-modal-footer {
    background-color: var(--input-bg-dark);
    border-top: 1px solid var(--glass-border);
    padding: 10px 15px;
    display: flex;
    gap: 15px;
    font-size: 0.8em;
    color: var(--text-secondary);
}
.search-modal-footer kbd {
    background-color: var(--glass-border);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 1.1em;
}
/* --- NEW: MASTER STATUS BADGE COLORS (Consolidated) --- */

/* Base Badge Shape */
.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-block;
}

/* 1. Green Group (Success, Active, Paid, Approved) */
.status-badge.status-active,
.status-badge.status-paid,
.status-badge.status-completed,
.status-badge.status-approved {
    background-color: rgba(40, 167, 69, 0.2);
    color: #4cd137; /* Bright Green */
    border: 1px solid rgba(40, 167, 69, 0.3);
}

/* 2. Gray Group (Draft, Pending Submission) */
/* Removed 'inactive' from here */
.status-badge.status-draft,
.status-badge.status-pending-submission,
.status-badge.status-pending {
    background-color: rgba(108, 117, 125, 0.2);
    color: #d1d1d1; /* Light Grey */
    border: 1px solid rgba(108, 117, 125, 0.3);
}

/* 3. Yellow/Orange Group (Warnings, In Progress) */
.status-badge.status-pending-validation,
.status-badge.status-pending-verification,
.status-badge.status-pending-director,
.status-badge.status-pending-finance,
.status-badge.status-in-progress,
.status-badge.status-partial {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107; /* Amber/Yellow */
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* 4. Red Group (Failure, Inactive, Unpaid) */
.status-badge.status-inactive, /* <--- MOVED HERE */
.status-badge.status-rejected,
.status-badge.status-lost,
.status-badge.status-unpaid,
.status-badge.status-paused,
.status-badge.status-void {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff6b6b; /* Soft Red */
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* --- SCROLLABLE SETTINGS MENU --- */

/* 1. Limit Height & Enable Scroll for Settings Only */
.sidebar-nav .has-submenu.open > #settingsSubmenu {
    max-height: 300px;  /* Adjust this height (e.g., 40vh or 300px) */
    overflow-y: auto;   /* Enable vertical scrolling */
    padding-right: 0;   /* Reset padding */
}

/* 2. Custom Slim Scrollbar for this menu */
#settingsSubmenu::-webkit-scrollbar {
    width: 5px; /* Very thin */
}

#settingsSubmenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Dark track */
}

#settingsSubmenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); /* Subtle white thumb */
    border-radius: 10px;
}

#settingsSubmenu::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue); /* Highlight on hover */
}