/*
 * Mobile Responsive Enhancements for CLMS v2
 *
 * This file provides mobile-specific improvements without breaking existing functionality.
 * All rules are additive and use progressive enhancement principles.
 *
 * Loading order: After clms.css, before page-specific CSS
 */

/* ===================================================================
   MOBILE TABLE IMPROVEMENTS
   =================================================================== */

/* Enhanced mobile table scrolling with visual indicators */
@media (max-width: 768px) {
    .table-responsive-sm {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: #005ea9 #f1f1f1; /* Firefox */
    }

    /* Mobile Pagination Improvements */
    .fixed-table-pagination {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fixed-table-pagination .pagination {
        flex-wrap: nowrap;
        justify-content: center;
        margin: 0;
        padding: 8px 0;
    }

    /* Reduce visible pagination buttons on mobile */
    .fixed-table-pagination .pagination .page-item {
        min-width: 32px;
        margin: 0 1px;
    }

    .fixed-table-pagination .pagination .page-link {
        padding: 6px 8px;
        font-size: 14px;
        border-radius: 4px;
        white-space: nowrap;
    }

    /* Hide specific pagination elements on very small screens */
    @media (max-width: 480px) {
        .fixed-table-pagination .pagination .page-item:nth-child(n+6):nth-child(-n+20) {
            display: none;
        }

        /* Keep first, last, prev, next and current page visible */
        .fixed-table-pagination .pagination .page-item:first-child,
        .fixed-table-pagination .pagination .page-item:last-child,
        .fixed-table-pagination .pagination .page-item:nth-child(2),
        .fixed-table-pagination .pagination .page-item:nth-last-child(2),
        .fixed-table-pagination .pagination .page-item.active {
            display: flex !important;
        }
    }

    /* Improve pagination container */
    .fixed-table-pagination .float-end,
    .fixed-table-pagination .float-right {
        float: none !important;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Bootstrap Table pagination info text */
    .fixed-table-pagination .pagination-info {
        font-size: 12px;
        margin: 8px 0;
        text-align: center;
        width: 100%;
        order: -1;
    }

    /* Custom scrollbar for webkit browsers */
    .table-responsive-sm::-webkit-scrollbar {
        height: 8px;
    }

    .table-responsive-sm::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .table-responsive-sm::-webkit-scrollbar-thumb {
        background: #005ea9;
        border-radius: 4px;
    }

    .table-responsive-sm::-webkit-scrollbar-thumb:hover {
        background: #004080;
    }

    /* Scroll indicator shadow for better UX */
    .table-responsive-sm::before,
    .table-responsive-sm::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        pointer-events: none;
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    .table-responsive-sm::before {
        left: 0;
        background: linear-gradient(to right, rgba(255,255,255,0.8), transparent);
    }

    .table-responsive-sm::after {
        right: 0;
        background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
    }

    /* Table cell improvements for mobile */
    .table td, .table th {
        white-space: nowrap;
        min-width: 120px; /* Ensure readable cell width */
        padding: 12px 8px; /* Increase touch target size */
    }

    /* Priority-based column hiding for mobile */
    .table th:nth-child(n+5),
    .table td:nth-child(n+5) {
        display: none; /* Hide columns beyond 4th on mobile */
    }

    /* Make first column sticky for better context */
    .table th:first-child,
    .table td:first-child {
        position: sticky;
        left: 0;
        background: inherit;
        z-index: 2;
        box-shadow: 2px 0 4px rgba(0,0,0,0.1);
    }
}

/* ===================================================================
   DEVICEMENU RESPONSIVE IMPROVEMENTS - ALL SCREEN SIZES
   =================================================================== */

/* Fix deviceMenu overflow for longer text like "O2Control" */
@media (max-width: 1200px) {
    .deviceMenu li {
        width: auto !important; /* Override fixed 170px width */
        flex: 1 1 auto !important; /* Equal distribution of available space */
        min-width: 0 !important; /* Allow items to shrink */
        max-width: none !important; /* Remove any max-width constraints */
    }

    /* Hide spacer elements that are used to fill remaining width */
    .deviceMenu li[style*="width: 100%"] {
        display: none !important; /* Hide the spacer li elements completely */
    }

    .deviceMenu li a {
        padding: 0.75rem 0.5rem !important; /* Reduce horizontal padding on smaller screens */
        font-size: 22px !important; /* Slightly smaller font to fit better */
        white-space: nowrap !important; /* Keep text on one line */
        overflow: hidden !important; /* Hide overflow */
        text-overflow: ellipsis !important; /* Show ... if text is too long */
        width: 100% !important; /* Full width of parent li */
        text-align: center !important; /* Center the text */
    }
}

/* For medium tablets and small desktops */
@media (min-width: 769px) and (max-width: 1200px) {
    .deviceMenu li a {
        font-size: 19px !important; /* Slightly larger than mobile but smaller than desktop */
    }
}

/* ===================================================================
   MOBILE CONTENT CONTAINER IMPROVEMENTS
   =================================================================== */

@media (max-width: 768px) {
    .content-container {
        margin: 15px !important; /* Reduce from 40px for more screen real estate */
        margin-bottom: 100px !important; /* Extra space for mobile footer */
    }

    /* Improve button spacing for touch */
    .btn {
        min-height: 44px; /* iOS touch target recommendation */
        padding: 12px 16px;
        margin: 4px;
    }

    /* Stack action buttons vertically on very small screens */
    .d-flex.justify-content-end .btn {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* ===================================================================
   MOBILE NAVIGATION IMPROVEMENTS
   =================================================================== */

@media (max-width: 768px) {
    /* Fix deviceMenu text positioning on mobile */
    .deviceMenu {
        margin-top: 0.5rem !important; /* Reduce from Bootstrap's mt-3 (1rem) */
        padding: 0.5rem 0 !important; /* Add vertical padding for better text positioning */
        min-height: auto !important;
    }

    .deviceMenu ul {
        margin: 0 !important;
        padding: 0 !important;
        min-height: auto !important;
        align-items: center !important; /* Center align items vertically */
    }

    .deviceMenu li {
        min-height: auto !important;
        display: flex !important;
        align-items: center !important; /* Center text vertically within each tab */
        justify-content: center !important;
        width: auto !important; /* Override fixed 170px width */
        flex: 1 1 auto !important; /* Flexible width based on content */
        min-width: 0 !important; /* Allow shrinking */
    }

    /* Hide spacer elements on mobile that are used to fill remaining width */
    .deviceMenu li[style*="width: 100%"] {
        display: none !important; /* Hide the spacer li elements completely on mobile */
    }

    .deviceMenu li a {
        padding: 0.75rem 1rem !important; /* Consistent padding for better touch targets */
        line-height: 1.2 !important; /* Better line height for mobile */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important; /* iOS touch target recommendation */
        text-decoration: none !important;
    }

    /* Improve header navigation for mobile */
    .perfo-header {
        padding: 8px 15px;
        height: auto;
        min-height: 50px;
    }

    .global-search-container {
        width: 100%;
        max-width: 300px;
        margin: 8px 0;
    }

    /* Better dropdown positioning on mobile */
    .dropdown-menu {
        max-width: calc(100vw - 30px);
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Improve company dropdown for mobile */
    #companyDropdown {
        max-height: 60vh !important;
        min-width: calc(100vw - 30px) !important;
    }
}

/* ===================================================================
   MOBILE SIDEBAR ENHANCEMENTS
   =================================================================== */

@media (max-width: 768px) {
    /* Enhanced mobile sidebar - completely hidden by default */
    #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 100vw !important; /* Full screen width */
        height: 100vh !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        z-index: 1050; /* Above other content */
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        background-color: #ffffff;
        display: none; /* Completely hidden by default */
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0 !important;
        padding: 0 !important;
    }

    #sidebar:not(.mobile-active) {
        transform: translateX(-100%);
        visibility: hidden;
        display: none !important;
    }

    #sidebar.mobile-active {
        display: block !important;
        transform: translateX(0) !important;
        visibility: visible;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Mobile navigation overlay */
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-nav-overlay.show {
        display: block;
        opacity: 1;
    }

    /* Content takes full width on mobile - no sidebar interaction */
    #content {
        width: 100% !important;
        margin-left: 0 !important;
        position: relative;
        z-index: 1;
    }

    /* No content shift on mobile since sidebar is overlay */
    #content.sidebar-open {
        transform: translateX(0);
    }

    /* Mobile Sidebar Header (PerfoTec style) */
    .mobile-sidebar-header {
        background: linear-gradient(135deg, #005ea9, #004080);
        border-bottom: 1px solid rgba(255,255,255,0.2);
        position: sticky;
        top: 0;
        z-index: 1051;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mobile-sidebar-close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 20px;
        padding: 8px;
        border-radius: 4px;
        transition: background-color 0.2s ease;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-sidebar-close-btn:hover,
    .mobile-sidebar-close-btn:focus {
        background-color: rgba(255,255,255,0.2);
        color: white;
        outline: none;
    }

    .mobile-global-search-container {
        position: relative;
        flex-grow: 1;
        max-width: 300px;
        margin: 0 15px;
    }

    .mobile-global-search-container .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #666;
        z-index: 1;
    }

    .mobile-global-search-input {
        width: 100%;
        padding: 8px 12px 8px 35px;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 20px;
        background: rgba(255,255,255,0.9);
        font-size: 14px;
        color: #333;
    }

    .mobile-global-search-input:focus {
        outline: none;
        border-color: rgba(255,255,255,0.8);
        background: white;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
    }

    .mobile-company-link {
        color: white !important;
        text-decoration: none;
        font-size: 14px;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background-color 0.2s ease;
        display: block;
    }

    .mobile-company-link:hover {
        background-color: rgba(255,255,255,0.2);
        color: white !important;
    }

    .mobile-company-name {
        color: white;
        font-size: 14px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    .mobile-user-btn {
        color: white !important;
        font-size: 22px;
        padding: 10px;
        border-radius: 4px;
        transition: background-color 0.2s ease;
        text-decoration: none;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-user-btn:hover,
    .mobile-user-btn:focus {
        background-color: rgba(255,255,255,0.2);
        color: white !important;
        outline: none;
    }

    .mobile-company-dropdown,
    .mobile-user-dropdown {
        min-width: 200px;
        max-height: 60vh;
        overflow-y: auto;
    }

    .mobile-company-item {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* ===================================================================
   DESKTOP SIDEBAR HEADER
   =================================================================== */

/* Desktop Sidebar Header (visible on desktop only) */
.desktop-sidebar-header {
    background: linear-gradient(135deg, #005ea9, #004080);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 20px;
}

.desktop-toggle-btn {
    background: none !important;
    border: none !important;
    color: white;
    font-size: 20px;
    padding: 8px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none !important;
    box-shadow: none !important;
}

.desktop-toggle-btn:hover,
.desktop-toggle-btn:focus {
    color: rgba(255,255,255,0.8);
    transform: scale(1.1);
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.desktop-toggle-btn:active {
    color: rgba(255,255,255,0.6);
    transform: scale(0.95);
    background: none !important;
}

.desktop-logo-container {
    margin-right: 20px;
}

.desktop-logo-link {
    display: inline-block;
    transition: transform 0.2s ease;
}

.desktop-logo-link:hover {
    transform: scale(1.05);
}

.desktop-logo {
    width: 200px;
    height: 70px;
    object-fit: contain;
}

/* Dark theme support for desktop header */
[data-bs-theme="dark"] .desktop-sidebar-header {
    background: linear-gradient(135deg, #2c3136, #1a1e22);
}

/* Light theme support for desktop header */
[data-bs-theme="light"] .desktop-sidebar-header,
:root:not([data-bs-theme]) .desktop-sidebar-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Light theme support for desktop toggle button */
[data-bs-theme="light"] .desktop-toggle-btn,
:root:not([data-bs-theme]) .desktop-toggle-btn {
    color: #6c757d !important;
    background: transparent !important;
}

[data-bs-theme="light"] .desktop-toggle-btn:hover,
[data-bs-theme="light"] .desktop-toggle-btn:focus,
:root:not([data-bs-theme]) .desktop-toggle-btn:hover,
:root:not([data-bs-theme]) .desktop-toggle-btn:focus {
    color: #495057 !important;
    background: transparent !important;
}

[data-bs-theme="light"] .desktop-toggle-btn:active,
:root:not([data-bs-theme]) .desktop-toggle-btn:active {
    color: #343a40 !important;
    background: transparent !important;
}

/* ===================================================================
   SIDEBAR NAVIGATION LINK STYLING
   =================================================================== */

/* Compact nav-link styling for headerside elements */
#sidebar .nav-link.active.headerside,
#sidebar .nav-link.headerside {
    padding: 3px 10px !important;
    height: 30px !important;
    max-height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

/* Smaller icons for headerside nav-links */
#sidebar .nav-link.headerside .sidebaricon {
    font-size: 16px !important;
    min-width: 20px !important;
    width: 20px !important;
    margin-right: 8px !important;
}

/* Desktop-specific compact text styling - MOVED TO CENTRALIZED SECTION */


    /* Improve sidebar touch targets - but exclude headerside elements */
    #sidebar ul li a:not(.headerside) {
        padding: 22px 20px; /* Larger touch area */
        font-size: 22px !important; /* Larger text size for mobile */
        border-radius: 0;
        margin: 2px 0;
        transition: background-color 0.2s ease;
        min-height: 56px;
        display: flex !important;
        align-items: center;
        color: inherit !important;
    }

    #sidebar ul li a:hover {
        background-color: rgba(0,94,169,0.1);
        color: #005ea9 !important;
    }

    #sidebar .sidebaricon {
        /* font-size moved to centralized section */
        min-width: 40px !important;
        width: 40px !important;
        text-align: center;
        margin-right: 20px !important;
        display: inline-block !important;
        visibility: visible !important;
    }

    #sidebar .sidebartext {
        /* font-size moved to centralized section */
        font-weight: 500;
        display: inline-block !important; /* Always show text on mobile */
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Target all sidebar links and their text content on mobile */
    #sidebar ul li a {
        font-size: 22px !important;
    }

    /* NOTE: font-sizes for sidebartext and hide-text-side moved to centralized typography section */

    /* Force sidebar to always show text and icons on mobile, regardless of any other classes */
    #sidebar.mobile-active .hide-text-side,
    #sidebar.mobile-active .sidebartext,
    #sidebar.mobile-active .sidebaricon,
    #sidebar.mobile-active .sidebarheadertext,
    #sidebar.mobile-active .sidebarheadericon {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure sidebar content is not minimized on mobile - override all possible classes */
    #sidebar.mobile-active,
    #sidebar.mobile-active.active {
        min-width: 100vw !important;
        width: 100vw !important;
        padding: 0 !important;
    }

    /* Override any minimized state classes on mobile */
    #sidebar.mobile-active.active .hide-text-side,
    #sidebar.mobile-active.active .sidebartext,
    #sidebar.mobile-active.active .sidebaricon {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        width: auto !important;
    }

    /* Make sure sidebar content wrapper doesn't interfere */
    #sidebar.mobile-active #sidebarContents {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        transform: none !important;
    }

    /* Override any existing positioning on mobile */
    #sidebar.mobile-active,
    #sidebar.mobile-active.active {
        transform: translateX(0) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
    }

    /* All navigation items expanded by default on mobile */
    #sidebar .collapse {
        display: block !important; /* Force all dropdowns to be expanded */
        height: auto !important;
        visibility: visible !important;
    }

    /* Hide dropdown toggle indicators on mobile since all items are expanded */
    #sidebar .dropdown-toggle::after {
        display: none !important;
    }

    /* Disable collapsing functionality on mobile */
    #sidebar .dropdown-toggle {
        pointer-events: none;
        cursor: default;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ensure navigation headers are still visible but not clickable */
    #sidebar .dropdown-toggle .sidebar-heading {
        cursor: default;
        background: transparent !important;
    }

    /* Fix header section styling on mobile */
    #sidebar .sidebar-heading {
        background: transparent !important;
        border: none !important;
    }

    /* Improve sidebar section headers */
    .sidebar-heading {
        padding: 15px 20px 8px 20px !important;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #666666;
        margin: 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        background-color: #f8f9fa;
    }

    /* Mobile-specific sidebar scrolling */
    #sidebarContents {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100vh;
        padding-bottom: 80px; /* Space for footer */
        -webkit-overflow-scrolling: touch;
    }

    /* Hide sidebar completely when not needed */
    .mobile-sidebar-hidden {
        display: none !important;
    }

    /* Mobile navigation button in header */
    .mobile-nav-button {
        display: block;
        background: none;
        border: none;
        color: #D9D9D9;
        font-size: 20px;
        padding: 12px;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.2s ease;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-button:hover,
    .mobile-nav-button:focus {
        background-color: rgba(255,255,255,0.15);
        color: #ffffff;
        outline: none;
        transform: scale(1.05);
    }

    .mobile-nav-button:active {
        transform: scale(0.95);
        background-color: rgba(255,255,255,0.2);
    }

    /* Animation for hamburger icon */
    .mobile-nav-button i {
        transition: transform 0.3s ease;
    }

    .mobile-nav-button.active i {
        transform: rotate(90deg);
    }

    /* Improve logo visibility on mobile */
    #perfotecLogoImage {
        max-width: 100px !important;
        height: auto;
    }
}

/* ===================================================================
   MOBILE FORM IMPROVEMENTS
   =================================================================== */

@media (max-width: 768px) {
    /* Prevent iOS zoom on form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Improve form spacing */
    .form-group,
    .mb-3 {
        margin-bottom: 1.5rem;
    }

    /* Full-width form controls on mobile */
    .form-control,
    .form-select {
        width: 100%;
        padding: 12px;
    }
}

/* ===================================================================
   MOBILE FOOTER IMPROVEMENTS
   =================================================================== */

@media (max-width: 768px) {
    .footer {
        position: relative; /* Change from fixed to prevent overlay issues */
        width: 100% !important;
        padding: 15px;
        height: auto;
        line-height: 1.4;
    }

    .footer .d-flex {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .footerCircleImage {
        display: none; /* Hide decorative images on mobile */
    }

    #socialIcons {
        justify-content: center;
    }

    #socialIcons a {
        margin: 0 8px;
        font-size: 22px;
    }
}

/* ===================================================================
   MOBILE-SPECIFIC UTILITIES
   =================================================================== */

/* Hide elements that are not mobile-friendly */
@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }

    .mobile-show {
        display: block !important;
    }
}

/* Mobile-first loading states */
@media (max-width: 768px) {
    .loading-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        font-size: 16px;
        color: #666;
    }
}

/* ===================================================================
   MOBILE ACCESSIBILITY IMPROVEMENTS
   =================================================================== */

@media (max-width: 768px) {
    /* Improve focus indicators for mobile keyboard navigation */
    *:focus {
        outline: 2px solid #005ea9;
        outline-offset: 2px;
    }

    /* Better link styling for touch */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        text-decoration: underline;
    }

    /* Improve table link accessibility */
    .table a {
        display: inline;
        min-height: auto;
    }
}

/* ===================================================================
   DARK THEME MOBILE SUPPORT
   =================================================================== */

[data-bs-theme="dark"] {
    @media (max-width: 768px) {
        .table-responsive-sm::before {
            background: linear-gradient(to right, rgba(44,49,54,0.8), transparent);
        }

        .table-responsive-sm::after {
            background: linear-gradient(to left, rgba(44,49,54,0.8), transparent);
        }

        .table th:first-child,
        .table td:first-child {
            background: #2c3136;
        }

        /* Dark theme mobile sidebar */
        #sidebar {
            background-color: #2c3136 !important;
        }

        #sidebar.mobile-active {
            background-color: #2c3136 !important;
        }

        .mobile-nav-overlay.show {
            background: rgba(0,0,0,0.6);
        }

        /* Dark theme mobile sidebar header */
        .mobile-sidebar-header {
            background: linear-gradient(135deg, #2c3136, #1a1e22);
        }

        .mobile-global-search-input {
            background: rgba(255,255,255,0.1);
            color: white;
            border-color: rgba(255,255,255,0.3);
        }

        .mobile-global-search-input:focus {
            background: rgba(255,255,255,0.2);
            border-color: rgba(255,255,255,0.5);
        }

        .mobile-global-search-input::placeholder {
            color: rgba(255,255,255,0.7);
        }

        /* Dark theme deviceMenu mobile fixes */
        .deviceMenu {
            background-color: #2c3136 !important;
        }

        .deviceMenu li a {
            color: #c4c4c4 !important;
        }

        .deviceMenu li.active a {
            color: #d3983f !important;
        }

        .deviceMenu li a:hover {
            color: #d3983f !important;
        }
    }
}

/* Dark theme support for responsive deviceMenu on all screen sizes */
[data-bs-theme="dark"] {
    @media (max-width: 1200px) {
        .deviceMenu {
            background-color: #2c3136 !important;
        }

        .deviceMenu li a {
            color: #c4c4c4 !important;
        }

        .deviceMenu li.active a {
            color: #d3983f !important;
        }

        .deviceMenu li a:hover {
            color: #d3983f !important;
        }

        .deviceMenu li {
            border-bottom-color: rgba(196, 196, 196, 0.3) !important;
        }

        .deviceMenu li.active {
            border-bottom-color: #d3983f !important;
        }
    }
}

/* ===================================================================
   MOBILE FEEDBACK BUTTON HEIGHT OVERRIDE
   =================================================================== */

@media (max-width: 768px) {
    /* Reduce feedback button height to half for mobile */
    #feedback-widget .feedback-btn {
        height: 52px !important;
        padding: 0px 16px !important; /* Half the vertical padding (12px -> 6px) */
        min-height: auto !important;
        font-size: 14px !important; /* Slightly smaller font for better fit */
        max-height: 52px !important;
    }

    #feedback-widget .feedback-btn i {
        font-size: 14px !important; /* Smaller icon */
    }

    #feedback-widget .feedback-text {
        font-size: 13px !important; /* Smaller text */
    }

    /* Additional override for hover state */
    #feedback-widget .feedback-btn:hover {
        height: 52px !important;
        max-height: 52px !important;
    }
}

/* ===================================================================
   SIDEBAR TYPOGRAPHY - CENTRALIZED RESPONSIVE FONT SIZES
   =================================================================== */

/* Mobile sidebar typography (≤768px) */
@media (max-width: 768px) {
    /* Sidebar header text */
    #sidebar .sidebarheadertext {
        font-size: 18px !important;
    }

    /* Main sidebar text */
    #sidebar .sidebartext {
        font-size: 18px !important;
    }

    /* Headerside navigation text (compact nav items) */
    #sidebar .nav-link.headerside .sidebartext {
        font-size: 18px !important;
    }

    /* Sidebar icons */
    #sidebar .sidebaricon {
        font-size: 24px !important;
    }

    /* Headerside icons (compact nav items) */
    #sidebar .nav-link.headerside .sidebaricon {
        font-size: 16px !important;
    }
}

/* Desktop sidebar typography (≥769px) */
@media (min-width: 769px) {
    /* Sidebar header text */
    #sidebar .sidebarheadertext {
        font-size: 12px !important;
    }

    /* Main sidebar text */
    #sidebar .sidebartext {
        font-size: 12px !important;
    }

    /* Headerside navigation text (compact nav items) */
    #sidebar .nav-link.headerside .sidebartext {
        font-size: 18px !important;
    }

    /* Sidebar icons */
    #sidebar .sidebaricon {
        font-size: 16px !important;
    }

    /* Headerside icons (compact nav items) */
    #sidebar .nav-link.headerside .sidebaricon {
        font-size: 16px !important;
    }
}