/* Updated: 2025-11-25 14:12 - Navbar search bar positioning fix */

@font-face {
    font-family: Ubuntu-Regular;
    src: url('../fonts/ubuntu/Ubuntu-Regular.ttf');
}

@font-face {
    font-family: Ubuntu-Bold;
    src: url('../fonts/ubuntu/Ubuntu-Bold.ttf');
}

.navbar {
    padding: 0.3rem 1.5rem;
    top: 0;
    position: fixed;
    width: 100%;
    background: #827ffe;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.navbar-heading {
    font-family: Ubuntu-Bold;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.125rem;
    /* 18px */
    margin: 0;
    text-decoration: none;
    transition: transform 0.2s ease;
    text-shadow: none;
}

.navbar-heading h1 {
    font-family: Ubuntu-Bold;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.125rem;
    /* 18px */
    margin: 0;
    text-shadow: none;
}

.navbar-heading:hover {
    background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    transform: scale(1.05);
}

.navbar-heading:hover h1 {
    background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-content {
    font-family: Ubuntu-Regular;
    color: white !important;
    font-weight: 500;
    font-size: 0.9375rem;
    /* 15px */
    padding: 0.35rem 0.9rem !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.2;
}

.navbar-content i {
    width: 24px;
    text-align: center;
    display: inline-block;
}

.navbar-content:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
}


.navbar-item {
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.navbar-logout {
    padding-left: 0;
    padding-right: 0;
}

.navbar-logout-form {
    width: 100%;
}

/* ============================================
   FINANCIAL YEAR SELECTOR
   ============================================ */
.financial-year-wrapper {
    margin: 0;
    cursor: pointer;
}

.financial-year-text {
    font-family: 'Ubuntu-Regular', sans-serif !important;
    font-weight: 500 !important;
    font-size: inherit !important;
    margin-left: 4px;
    color: white;
}

.financial-year-wrapper.dropdown-toggle::after {
    display: none;
}

.financial-year-dropdown {
    max-height: 150px !important;
    overflow-y: auto;
}

.financial-year-select:focus {
    background: transparent;
    border: none;
    box-shadow: none;
    color: white;
}

.financial-year-select option {
    color: #333;
}

.navbar .navbar-nav form {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

/* Form-inline styles are defined in media queries below for desktop and mobile */
.navbar .form-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}



.navbar .form-inline .form-control {
    height: 36px;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
}

.navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}

.navbar-toggler:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar-toggler-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
}

.navbar-toggler-icon i {
    transition: transform 0.3s ease, opacity 0.2s ease;
    font-size: 28px;
    color: #fff;
}

/* Make the cross look less bold/heavy */
.navbar-toggler-icon i.fa-times {
    font-weight: 300;
    /* Try to make it lighter if font supports it, or scale it down slightly */
    transform: rotate(90deg);
    font-size: 24px;
    /* Slightly smaller to match visual weight of bars */
}

.navbar-nav {
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.navbar-nav .nav-item {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.navbar .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
    box-shadow: none;
    border: none;
    transition: all 0.2s ease;
}

.navbar .btn-danger:hover,
.navbar .btn-danger:focus {
    background: linear-gradient(135deg, #fda4af 0%, #fb7185 100%);

    outline: none;
}

/* Modal Polish - Refined Style (Purple Header) */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background-color: #ffffff;
}

/* Vertical Centering Fix */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fix for mobile horizontal alignment */
    min-height: calc(100% - 3.5rem);
}

@media (min-width: 768px) {
    .modal-dialog-centered {
        padding-bottom: 5rem;
        /* Pushes content up visually on desktop */
    }
}

.modal-header {
    background: #827ffe;
    /* Reverted to Purple per user image */
    color: white;
    padding: 1rem 1.5rem;
    /* Reduced height/padding */
    border-bottom: none;
    align-items: center;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.modal-title {
    font-family: 'Ubuntu-Bold', sans-serif;
    font-size: 1.25rem;
    margin: 0;
    letter-spacing: 0.3px;
    color: white;
    /* White text on purple */
}

/* Close Button - White on Purple */
.modal-header .close {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
    text-shadow: none;
    outline: none;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    border: none;
    box-shadow: none;
}

.modal-header .close:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-50%);
    /* Keep centered */
}

.modal-header .close span {
    font-size: 1.5rem;
    line-height: 1;
    display: block;
    margin-top: -2px;
}

/* Body - Flowing from Header */
.modal-body {
    padding: 1.5rem 2rem 1rem;
    /* More breathing room top since header color differs */
    background-color: #ffffff;
}

#universalFinancialModal form {
    margin: 0;
    padding: 0;
    width: 100%;
}

.modal-body p {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: #334155;
    font-weight: 500;
}

.modal-body label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Input Fields - Totally Flat / No Nested Look */
#fyPasswordModal .form-control,
#universalFinancialModal .form-control {
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #1e293b;
    background-color: #ffffff;
    /* pure white, no contrast box */
    height: auto;
    box-shadow: none !important;
    /* Remove any inset shadow */
}

#fyPasswordModal .form-control:focus,
#universalFinancialModal .form-control:focus {
    border-color: #827ffe;
    box-shadow: 0 0 0 2px rgba(130, 127, 254, 0.1) !important;
    /* Very subtle glow */
}

.modal-footer {
    border-top: none;
    padding: 0 2rem 2rem;
    /* Adjusted to pull buttons closer to content if needed, but 2rem matches body side padding */
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
}

/* RESTORED BUTTONS (Removed Ghost Style overrides) */
/* The global .navbar .btn-danger styles will apply if inside .navbar,
   but the modal is moved to body on open usually?
   Bootstrap modals attach to body. So we need to re-apply the desired styles here
   since they might lose the .navbar parent context if the modal isn't inside it visually.
   (Actually in HTML structure it IS inside nav, but bootstrap moves it? No, bootstrap 4 moves the backdrop, not necessarily the modal markup unless appended.)
   Let's assume we want the filled look. */

#fyPasswordModal .btn-danger,
#universalFinancialModal .btn-danger {
    /* Replicating the "filled" look */
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2);
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
}

#fyPasswordModal .btn-danger:hover,
#universalFinancialModal .btn-danger:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.25);
}

/* Primary "Switch Year" Button - Blue Theme */
#fyPasswordModal .btn-primary,
#universalFinancialModal .btn-primary {
    /* Replicating the "filled" look */
    background: #827ffe;
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(130, 127, 254, 0.3);
    padding: 0.6rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

#fyPasswordModal .btn-primary:hover,
#universalFinancialModal .btn-primary:hover {
    background: #6d6af0;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(130, 127, 254, 0.35);
}

/* Desktop-specific styles for search bar positioning - v2 */
@media screen and (min-width: 1200px) {
    .navbar .form-inline {
        margin: 0 1rem 0 auto !important;
        /* top right bottom left */
        padding: 0 !important;
        width: auto !important;
        order: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Fix for Ledger page: When search bar is present, don't let collapse grow */
    .navbar .form-inline+.navbar-collapse {
        flex-grow: 0 !important;
        flex-basis: auto !important;
        width: auto !important;
    }
}

@media screen and (max-width: 1199.98px) {
    .navbar {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem;
    }

    .navbar-heading,
    .navbar-heading h1 {
        font-size: 1.25rem;
    }

    .navbar-content {
        font-size: 0.95rem !important;
        padding: 0.5rem 0.9rem !important;
        width: 100%;
        text-align: left;
        justify-content: flex-start;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.08);
    }

    .navbar-content:hover {
        background-color: rgba(255, 255, 255, 0.18);
        transform: none;
    }

    .navbar-brand {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-right: auto;
        /* Push search and links to the right */
    }

    /* Make search bar visible and full-width on mobile */
    .navbar .form-inline {
        width: 100%;
        margin: 0.2rem 0 !important;
        padding: 0 !important;
        gap: 0.5rem;
        align-items: stretch;
        display: flex !important;
        /* Position after toggler - Removed order: 3 to prevent jumping */
    }

    .navbar .form-inline .form-control {
        width: 100%;
        height: 40px;
        font-size: 1rem;
        /* prevent iOS zoom */
    }

    .navbar-toggler-icon i {
        transition: transform 0.3s ease, opacity 0.2s ease;
        font-size: 22px;
        /* Reduced from 28px */
        color: #fff;
    }

    /* Make the cross look less bold/heavy */
    .navbar-toggler-icon i.fa-times {
        font-weight: 300;
        /* Try to make it lighter if font supports it, or scale it down slightly */
        transform: rotate(90deg);
        font-size: 20px;
        /* Reduced from 24px */
        /* Slightly smaller to match visual weight of bars */
    }

    .navbar-expand-xl .navbar-toggler {
        display: block;
        border: 2px solid rgba(255, 255, 255, 0.3);



        padding: 0.4rem 0.6rem;
        /* Slightly reduced padding */
        margin-left: auto;
        margin-bottom: 0;
    }

    .navbar-expand-xl .navbar-collapse {
        display: none;
        flex-direction: column;
        flex-basis: 100%;
        flex-grow: 0;
        width: 100%;
        margin-top: 0.4rem;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .navbar-expand-xl .navbar-collapse.show {
        display: flex;
    }

    .navbar-expand-xl .navbar-collapse.collapsing {
        display: block;
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }

    .navbar-item,
    .navbar-nav .nav-item,
    .navbar-nav .navbar-item {
        width: 100%;
        padding: 0.15rem 0;
        align-items: center;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.35rem;
        padding: 0;
        margin: 0;
    }

    /* Add spacing to body to prevent navbar overlap on mobile */
    body {
        padding-top: 54px !important;
        /* Reduced from 60px to fix spacing on Order page */
        /* Standard spacing, Ledger page will need more */
    }

    .navbar .btn-danger {
        width: 100%;
        padding: 0.55rem 0.95rem;
        font-size: 0.95rem;
        margin: 0;
        align-self: stretch;
        box-shadow: 0 7px 16px rgba(244, 63, 94, 0.25);
        justify-content: flex-start;
        text-align: left;
    }

    .navbar .btn-danger:hover,
    .navbar .btn-danger:focus {
        box-shadow: 0 9px 18px rgba(244, 63, 94, 0.25);
    }

    /* Removed manual child toggling to allow bootstrap transition */

    /* Ensure dropdowns appear inline on mobile, not floating absolutely */
    /* Ensure financial year dropdown appears inline on mobile - ULTRA SPECIFICITY */
    #mobileFyMenu {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 0 !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 0 0 1.5rem !important;
        border-radius: 0 !important;
        display: block;
        /* Ensure it takes up space when open */
    }

    /* Ensure only the active dropdown shows (Bootstrap adds 'show' class) */
    #mobileFyMenu.dropdown-menu {
        display: block !important;
        /* Always in DOM for transition */
        max-height: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        transition: all 0.3s ease-in-out;
        border: 0 !important;
    }

    #mobileFyMenu.dropdown-menu.show {
        max-height: 500px !important;
        opacity: 1 !important;
        /* Removed background color individually to match theme seamlessly */
        background-color: transparent !important;
    }

    /* Styling for items inside mobile FY dropdown */
    #mobileFyMenu .dropdown-item {
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 0.75rem 1rem !important;
        /* Increased padding */
        white-space: normal !important;
        border-radius: 8px;
        margin-bottom: 2px;
    }

    #mobileFyMenu .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    /* Highlight the active year if needed - assuming generic link for now */

    /* Hide the header inside mobile dropdown if needed, or style it */
    #mobileFyMenu .dropdown-header {
        display: none !important;
        /* Hide header to make list cleaner */
    }

    /* Fix Toggler Width and Caret Position on Mobile */
    #mobileFyDropdown {
        width: 100% !important;
        display: flex !important;
        /* Override inline-flex to ensure full width */
        justify-content: space-between !important;
        /* Push caret to end */
        background: rgba(255, 255, 255, 0.1);
        /* Match other buttons style if needed */
    }

    /* Ensure caret (::after) is visible and pushed */
    #mobileFyDropdown::after {
        margin-left: auto !important;
        /* Push to right */
        display: inline-block !important;
        /* Ensure visibility */
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }

    /* Ensure the parent list item is full width */
    .mobile-fy-li {
        width: 100% !important;
        display: block !important;
    }
}

/* Removed 1024-1199 block as it is now covered by mobile styles */

/* ============================================
   DROPDOWN POLISH
   ============================================ */

/* Fix spacing in dropdown - tighter dividers */
.dropdown-divider {
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dropdown-menu {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding-top: 0;
    padding-bottom: 0;
    /* Remove bottom padding to fix white gap */
    background-color: #ffffff;
    /* Explicit white */
    font-family: 'Ubuntu-Regular', sans-serif;
    /* Explicit font */
    text-align: left;
    /* Ensure left align */
    overflow: hidden;
    /* Clip children (like hover bg) to border radius */
}

/* Generic Item Styling */
/* Generic Item Styling */
.dropdown-item {
    font-family: 'Ubuntu-Regular', sans-serif;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    color: #334155;
    transition: all 0.2s ease;
    width: 100%;
    /* Force full width */
    display: block;
    /* Ensure block level */
    clear: both;
    font-weight: 400;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, #827ffe 0%, #a78bfa 100%);
    color: #ffffff;
    text-decoration: none;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 2px;
    color: #827ffe;
    display: inline-block;
}

.dropdown-item:hover i {
    color: #ffffff !important;
}


.dropdown-header {
    font-family: 'Ubuntu-Bold', sans-serif;
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Global removal, moved to media query below */

/* Specific desktop override to kill ghost lines */
@media screen and (min-width: 1200px) {
    .mobile-fy-header {
        display: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

@media screen and (max-width: 1199.98px) {
    /* ... existing mobile styles ... */

    /* Mobile FY Header - Active here */
    .mobile-fy-header {
        display: block;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        margin-top: 0.35rem;
        padding-top: 0.75rem;
    }
}

/* Logout Dropdown Item - Red Scheme (Placed LAST for specificity) */
.dropdown-item-danger {
    color: #dc3545 !important;
    font-weight: 500;
    display: flex;
    /* Flex layout */
    align-items: center;
    gap: 0.1rem;
    /* Reduced gap to match standard item spacing essentially */
    width: 100%;
    /* Ensure padding matches generic item exactly */
    padding: 0.6rem 1.25rem;

    /* Match font metrics of standard items to ensure exact same height */
    font-family: 'Ubuntu-Regular', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
}

.dropdown-item-danger:hover,
.dropdown-item-danger:active,
.dropdown-item-danger:focus {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* Ensure icon turns white too */
/* Specific ID override to guarantee precedence */
#logout-item {
    color: #dc3545 !important;
}

#logout-item:hover,
#logout-item:focus,
#logout-item:active {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
    color: white !important;
}

#logout-item i {
    color: #dc3545 !important;
}

#logout-item:hover i {
    color: white !important;
}

/* Override generic icon color for danger item normal state */
.dropdown-item-danger i {
    color: #dc3545 !important;
}

/* Refactored Utility Classes (Moving inline styles to CSS) */

.fy-modal-body {
    max-height: 200px !important;
    overflow-y: auto !important;
}

.profile-nav-link {
    color: white !important;
}

.profile-icon-large {
    font-size: 24px !important;
}

.dropdown-divider-top {
    border-top: 1px solid #e2e8f0;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}