/* 
|--------------------------------------------------------------------------
| Navbar Fixed Top Responsive Fix
|--------------------------------------------------------------------------
| 
| This CSS fixes the issue where content goes underneath the fixed navbar
| on small screens and ensures proper spacing across all device sizes.
|
*/

/* Base body styling to account for fixed navbar */
body {
    padding-top: 70px;
    /* Add padding to prevent content overlap */
}

/* Ensure the main container has proper spacing */
#container {
    margin-top: 0 !important;
    /* Remove existing margin since body now has padding */
    padding-top: 10px;
    /* Small additional spacing */
}

/* Fix for navbar height variations on different screen sizes */
.navbar-fixed-top {
    min-height: 50px;
    /* Ensure consistent minimum height */
}

/* Improve mobile navigation toggle */
.navbar-toggle {
    border: 2px solid #fff !important;
    margin-top: 12px;
    margin-bottom: 12px;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar-toggle .icon-bar {
    background-color: #fff !important;
    height: 3px !important;
    width: 24px !important;
}

.fa-search {
    color: #666 !important;
    left: 0px !important;
    position: relative !important;
}

.navbar .fa-times {
    color: #888 !important;
    left: 0px !important;
    position: relative;
    cursor: pointer;
}

.editable-buttons {
    margin-top: -5px !important;
}

.navbar .search-query:focus {
    background-color: #af2c14 !important;
    text-shadow: none !important;
    color: #fff !important;
    padding: 14px !important;
    padding-right: 35px !important;
}

/* Small screens - tablets and phones */
@media (max-width: 767px) {
    body {
        padding-top: 80px;
        /* Slightly more padding for mobile navigation */
    }

    /* When navbar is collapsed, ensure proper spacing */
    .navbar-collapse.in {
        margin-bottom: 10px;
    }

    /* Adjust container for smaller screens */
    #container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Mobile navigation improvements */
    .navbar-nav {
        margin: 0 !important;
    }

    .navbar-nav>li>a {
        padding: 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Hide dividers on mobile */
    .divider-vertical {
        display: none !important;
    }

    /* Improve search form on mobile */
    .navbar-form {
        margin: 10px 0 !important;
        padding: 0 15px !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Make navbar brand more prominent on mobile */
    .navbar-brand {
        font-size: 16px !important;
        padding: 17px 15px !important;
    }
}

/* Extra small screens - phones in portrait */
@media (max-width: 480px) {
    body {
        padding-top: 85px;
        /* Even more padding for very small screens */
    }

    /* Reduce sidebar width on very small screens if needed */
    #sidebar {
        width: 20% !important;
    }

    /* Adjust main content area */
    .col-sm-10 {
        width: 80% !important;
    }

    /* Further mobile optimizations */
    .navbar-brand {
        font-size: 14px !important;
        padding: 17px 10px !important;
    }

    .navbar-toggle {
        margin-right: 10px !important;
    }

    /* Stack navigation items more compactly */
    .navbar-nav>li>a {
        padding: 12px 15px !important;
        font-size: 14px;
    }
}

/* Large screens - ensure consistent spacing */
@media (min-width: 1200px) {
    body {
        padding-top: 65px;
        /* Optimal spacing for large screens */
    }
}

/* Fix for search results dropdown positioning */
.search-results-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1031;
    max-height: 720px !important;
    overflow-y: auto;
    background: linear-gradient(87deg, #f5365c 0%, #f56036 100%) !important;
    margin-top: 0px !important;

}

/* Search results content styling */
.search-results-content {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Search group styling */
.search-group {
    display: table-cell !important;
    vertical-align: top !important;

    width: 16.666% !important;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-top: 10px;
    /* 6 equal columns */
}

.search-group:last-child {
    border-right: none !important;
}

/* Header styling */
.search-group h4 {
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: #fff !important;
    border-bottom: 1px dotted #fff !important;
}

/* Search result items */
.search-result {
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #fff !important;
    border-bottom: 1px dotted #fff !important;
}

.search-result:hover {
    background-color: #af2c14 !important;
    color: #fff !important;
    border-left: 4px solid #333 !important;
    padding-left: 6px !important;
}

.search-result:last-child {
    border-bottom: none !important;
}

.search-result a {
    color: inherit !important;
    text-decoration: none !important;
    display: block !important;
}

.search-result .text-warning {
    color: #666 !important;
}

.search-result .text-info {
    color: #AF2E11;
}


/* Loading indicator styling */
.search-loading,
.no-results {
    text-align: center !important;
    padding: 50px !important;
    color: #fff !important;
    font-style: italic !important;
    font-size: 18px !important;
    background: linear-gradient(87deg, #f5365c 0%, #f56036 100%) !important;
}



/* Mobile search dropdown adjustments */
@media (max-width: 767px) {
    .search-results-container {
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
    }
}

/* Ensure navbar stays on top */
.navbar-fixed-top {
    z-index: 1030 !important;
}

/* Fix for any content that might still overlap */
.page-container {
    position: relative;
    z-index: 1;
}

/* Smooth transitions for responsive changes */
body,
#container {
    transition: padding-top 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}

/* Additional mobile menu enhancements */
@media (max-width: 767px) {

    /* Ensure collapsed menu has proper background */
    .navbar-collapse {
        background-color: inherit;
        border: none;
        box-shadow: none;
    }

    /* Animate the collapse */
    .navbar-collapse.collapsing {
        transition: height 0.35s ease;
    }

    /* Better spacing when menu is open */
    .navbar-collapse.in {
        overflow-y: visible;
        padding-bottom: 10px;
    }
}

/* Landscape phone adjustments */
@media (max-width: 767px) and (orientation: landscape) {
    body {
        padding-top: 70px;
        /* Less padding in landscape due to limited vertical space */
    }

    .navbar-collapse {
        max-height: 200px;
        overflow-y: auto;
    }
}

/* Fix for when navbar content wraps */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-nav>li>a {
        padding: 15px 8px;
        /* Reduce horizontal padding on medium screens */
        font-size: 13px;
    }
}

/*
|--------------------------------------------------------------------------
| Sidebar Positioning Fix
|--------------------------------------------------------------------------
| 
| Fix sidebar to properly position below the fixed navbar and show avatar
|
*/

/* Base sidebar positioning - account for navbar height */
#sidebar {
    top: 78px !important;
    /* Start below the navbar with small gap */
    padding-top: 0 !important;
    /* Remove extra padding since we're positioning correctly */
    height: calc(100vh - 78px) !important;
    /* Adjust height to fit remaining viewport */
    z-index: 1025 !important;
    /* Below navbar (1030) but above content, below notifications */
    transition: top 0.3s ease-in-out, height 0.3s ease-in-out, width 0.3s ease-in-out;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ensure sidebar user section is visible */
#sidebar-user {
    position: relative;
    z-index: 1;
}

/* Adjust sidebar channels positioning */
#sidebar-channels {
    top: 80px !important;
    /* Account for user section height */
    bottom: 60px !important;
    /* Account for tabs at bottom */
}

/* Small screens - tablets and phones */
@media (max-width: 767px) {
    #sidebar {
        top: 88px !important;
        /* Match body padding for small screens with gap */
        height: calc(100vh - 88px) !important;
    }

    /* Make sidebar narrower on mobile but still functional */
    #sidebar {
        width: 25% !important;
    }

    /* Adjust main content to account for narrower sidebar */
    .col-sm-10 {
        width: 75% !important;
    }

    /* Optimize sidebar content for mobile */
    #sidebar-user .user_info h4 {
        font-size: 12px !important;
    }

    #sidebar-user .user_options h5 {
        font-size: 11px !important;
        margin: 2px 0 !important;
    }
}

/* Extra small screens - phones in portrait */
@media (max-width: 480px) {
    #sidebar {
        top: 63px !important;
        /* Match body padding for extra small screens with gap */
        height: calc(100vh - 93px) !important;
        width: 42% !important;
        /* Slightly wider for better usability */
    }

    /* Adjust main content */
    .col-sm-10 {
        width: 70% !important;
        padding-left: 0 !important;
    }

    .col-sm-4,
    .col-sm-8 {
        padding-left: 0 !important;
    }

    /* Further optimize sidebar for very small screens */
    #sidebar-user img {
        width: 35px !important;
        height: 35px !important;
    }

    #sidebar-user .user_info h4 {
        font-size: 11px !important;
        margin: 2px 0 !important;
    }

    #tech-docs {
        margin: 10px !important;
        font-size: 11px !important;
    }

    #tech-docs a {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
}

/* Large screens - ensure optimal sidebar positioning */
@media (min-width: 1200px) {
    #sidebar {
        top: 50px !important;
        /* No gap on full screen - seamless connection with navbar */
        height: calc(100vh - 65px) !important;
        width: 20% !important;
    }
}

@media (min-width: 768px) {
    .col-sm-10 {
        width: 80% !important;
    }
}

/* Landscape phone adjustments for sidebar */
@media (max-width: 767px) and (orientation: landscape) {
    #sidebar {
        top: 78px !important;
        /* Match reduced navbar padding in landscape with gap */
        height: calc(100vh - 78px) !important;
    }

    /* Make sidebar more compact in landscape */
    #sidebar-user {
        padding: 5px !important;
    }

    #sidebar-user img {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Fix sidebar responsiveness with main content */
@media (max-width: 991px) {

    /* Adjust the grid system for better sidebar integration */
    .container-fluid .row {
        margin-right: 0;
        margin-left: 0;
    }
}


/* General alert notifications */
.alert {
    z-index: 900 !important;
    /* Above navbar and sidebar */
    position: relative;
}

/* Sweet alerts and modal overlays */
.sweet-alert {
    z-index: 1040 !important;
    /* Highest priority for modals */
}

.sweet-overlay {
    z-index: 1039 !important;
    /* Just below sweet alerts */
}

/* Bootstrap alerts and notification elements */
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
    z-index: 900 !important;
    position: relative;
}


/* Search results dropdown */
.search-results-container {
    z-index: 1031 !important;
    padding: auto;
    /* Above navbar but below notifications */
}

/* Ensure notifications in sidebar have proper z-index */
#sidebar .notifications,
#sidebar .notifications ul,
#sidebar .notifications ul li {
    z-index: 1026 !important;
    /* Above sidebar content but below main notifications */
}

/*
|--------------------------------------------------------------------------
| Full Screen Seamless Navbar-Sidebar Connection
|--------------------------------------------------------------------------
| 
| Remove gaps between navbar and sidebar on large screens
|
*/

/* Full screen displays - no gap between navbar and sidebar */
@media (min-width: 1400px) {
    #sidebar {
        top: 50px !important;
        /* Seamless connection - no gap */
        height: calc(100vh - 65px) !important;
    }


}

/* Custom navbar fix styles */
.navbar {
    /* existing navbar styles */
}

/* API Warning Styles */
.api-warnings-container {
    margin-bottom: 15px;
    z-index: 1000;
}

.api-warnings-container .alert-warning {
    margin-bottom: 10px;
    border-left: 4px solid #f0ad4e;
}

.warning-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.warning-content i.fa-exclamation-triangle {
    color: #f0ad4e;
    margin-right: 8px;
    margin-top: 2px;
}

.warning-details {
    font-size: 0.9em;
    color: #8a6d3b;
    margin-top: 5px;
}

.warning-actions {
    margin-top: 10px;
}

.warning-actions .btn-warning {
    background-color: #f0ad4e;
    border-color: #eea236;
    color: #fff;
}

.warning-actions .btn-warning:hover {
    background-color: #ec971f;
    border-color: #d58512;
}

/* Ensure warnings appear above content */
.api-warnings-container .alert {
    position: relative;
    z-index: 100;
}

/* Typeahead Dropdown Styling */
.tt-dropdown-menu {
    border: 1px solid #d44950 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 8px rgba(212, 73, 80, 0.25) !important;
    background: #fff !important;
    z-index: 9999 !important;
    padding: 8px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 400px !important;
    max-height: 350px !important;
    overflow-y: auto !important;
    margin-top: 2px !important;
    position: absolute !important;
    left: 0 !important;
}

/* Product name textarea styling */
textarea[product-search] {
    resize: none !important;
    overflow: hidden !important;
    min-height: 34px !important;
    height: auto !important;
    width: 100% !important;
    background-color: #f8f9fa !important;
    transition: all 0.3s ease !important;
}

/* Auto-grow textarea on focus */
textarea[product-search]:focus {
    min-height: 50px !important;
    border-color: #d44950 !important;
    box-shadow: 0 0 5px rgba(212, 73, 80, 0.3) !important;
}

/* Xero sync status styling */
.xero-status {
    display: inline-block;
    padding: 6px 12px;
    margin-top: 5px;
    border-radius: 4px;
    background: #f8f9fa;
}

.xero-status .fa {
    margin-right: 5px;
}

.xero-status .text-info {
    color: #17a2b8;
}

.xero-status .text-success {
    color: #28a745;
}

.xero-status .text-danger {
    color: #dc3545;
}

.margin-left-10 {
    margin-left: 10px;
}

/* Product name column styling */
.product-name-cell {
    width: 45% !important;
    min-width: 300px !important;
    position: relative !important;
}

.sales-basket table td:nth-child(3),
.sales-basket table .product-name-cell {
    width: 45% !important;
    min-width: 300px !important;
    position: relative !important;
}

/* Responsive adjustments for product column */
@media (max-width: 768px) {

    .product-name-cell,
    .sales-basket table td:nth-child(3) {
        width: 60% !important;
        min-width: 250px !important;
    }
}

.tt-suggestion {
    padding: 8px 12px !important;
    border-bottom: 1px solid #eee !important;
    color: #333 !important;
    background: #fff !important;
    cursor: pointer !important;
}

.tt-suggestion:last-child {
    border-bottom: none !important;
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    background-color: #d44950 !important;
    color: #fff !important;
    border-left: 4px solid #a83530 !important;
    padding-left: 8px !important;
}

.tt-suggestion:hover .product-details,
.tt-suggestion.tt-cursor .product-details {
    color: #f0f0f0 !important;
}

.tt-suggestion p {
    margin: 0 !important;
}

.tt-suggestion .product-name {
    font-weight: bold !important;
    margin-bottom: 2px !important;
}

.tt-suggestion .product-details {
    color: #666 !important;
    font-size: 12px !important;
}

/* Remove blue highlight from typeahead input */
.tt-input:focus {
    border-color: #d44950 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Messenger Notifications */

ul.messenger.messenger-fixed.messenger-on-top {
    top: 80px !important;
}


ul.messenger.messenger-fixed.messenger-on-top {
    top: 100px !important;
    width: auto;
    min-width: 400px !important;
}


@media (max-width: 480px) {
    ul.messenger.messenger-fixed.messenger-on-top {
        top: 55px !important;
        width: auto !important;
        min-width: 300px !important;
    }
}

#sidebar-user .user_options {
    border-radius: 4px !important;
    padding: 10px 20px !important;
}

.channels_header .notifications-btn {
    border-radius: 4px !important;
    padding: 4px !important;
}

#sidebar .notifications {
    padding-top: 5px !important;
    padding-right: 8px;
}

#sidebar .notifications ul li {
    background: #FCC !important;
    border-radius: 4px !important;
    cursor: pointer;
    margin: 5px !important;
    padding: 10px 10px !important;
    text-align: justify !important;
}

.clocking-component span {
    font-size: 16px;
}

@media (max-width: 480px) {
    #sidebar-user .user_options {
        width: 100% !important;
        margin-top: 5px;
        display: block !important;
    }
}

/* Make user_options stack vertically on small screens */
@media (max-width: 767px) {
    #sidebar-user .user_options {
        display: block !important;
        width: 100% !important;
        margin-top: 5px;
        text-align: center;
    }

    #sidebar-user .user_options h5 {
        margin: 5px 0 !important;
    }
}

@media (min-width: 768px) {
    .navbar-right {
        margin-right: 10px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Modal Backdrop Fix
|--------------------------------------------------------------------------
| 
| Fix for dark/black overlay issue on modals
|
*/

/* Remove the modal-backdrop since modal already has fade in classes */
.modal-backdrop {
    display: none !important;
}

/* Add semi-transparent background directly to modal with fade in classes */
.modal.fade.in {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure modals appear above backdrop */
.modal {
    z-index: 1050 !important;
    /* Above backdrop */
}

/* Prevent any other elements from interfering with modal display */
.modal-dialog {
    z-index: 1051 !important;
    /* Above modal container */
}

/* Nested modal support - ensure child modals appear above parent modals */
.modal-nested {
    z-index: 1060 !important;
    /* Higher than regular modals */
}

.modal-nested .modal-dialog {
    z-index: 1061 !important;
    /* Above nested modal container */
}

/* Nested modal backdrop fix */
.modal-nested.fade.in {
    background: rgba(0, 0, 0, 0.7) !important;
    /* Darker background for nested modals */
}

.media-list .media img {
    width: 50px;
}

a {
    cursor: pointer;
}

.text-lunch {
    color: rgb(184, 134, 11) !important;
}

.fa-undo {
    color: #666 !important;
}