/* Modern Facelift for BugTracker.NET */
/* This CSS modernizes the interface while preserving functional color coding */

/* Global Typography and Base Styles */
/* Only apply background color to non-dark mode to prevent override */
body:not(.dark-mode) {
    font-family: verdana, arial;
    font-size: 11pt;
    color: #2d3436;
    background: #f8f9fa;
    line-height: 1.5;
}

/* Typography only for dark mode (background handled by btnet_modern_dark.css) */
body.dark-mode {
    font-family: verdana, arial;
    font-size: 11pt;
    line-height: 1.5;
    /* Background and color are set in btnet_modern_dark.css */
}

/* Remove harsh borders everywhere */
/* Global transitions removed to prevent accordion effect when navigating bugs */
/* * {
    transition: all 0.2s ease;
} */

/* Disable transitions for popup and its children for instant display */
.buglist_popup,
.buglist_popup * {
    transition: none !important;
}

/* Links */
a {
    text-decoration: none;
}

a:hover {
    color: #3046d5;
    text-decoration: none;
}

a:visited {
    color: #4361ee;
}

/* Main Menu Bar */
.menubar {
    /* Option 1: Subtle gradient for depth */
    background: linear-gradient(135deg, #3462D9 0%, #2952C9 100%) !important;
    /* Option 2: Solid color (uncomment to use) */
    /* background: #3462D9 !important; */
    padding: 8px 2px !important;
    border-bottom: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
    z-index: 100;
    top: 0;
    left: 0;
}

/* Ensure the entire menubar table has proper background */
/*.menubar, 
.menubar > tbody,
.menubar > tbody > tr,
.menubar table,
.menubar table > tbody,
.menubar table > tbody > tr {
    background: transparent !important;
}*/

.menubar table {
    width: 100%;
    background: transparent !important;
}

.menubar td {
    color: white !important;
    white-space: nowrap;
    padding: 0 5px;
    vertical-align: middle;
    background: transparent !important;
    border: none !important;
}

.menubar a {
    color: white !important;
    padding: 6px 6px;
    border-radius: 6px;
    margin: 0 2px;
    display: inline-block;
    white-space: nowrap;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    text-decoration: none;
}

.menubar a:hover {
    background: rgba(255,255,255,0.25);
    color: white !important;
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-1px);
}

/* Menu bar icons - ensure visibility */
.menubar i, 
.menubar .fa, 
.menubar .fas, 
.menubar .far, 
.menubar .fab,
.menubar [class^="icon-"],
.menubar [class*=" icon-"] {
    color: white !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Specific icon adjustments for better visibility */
.menubar .fa-bars,
.menubar .fa-list,
.menubar .fa-th-list,
.menubar .fa-home,
.menubar .fa-bug,
.menubar .fa-plus,
.menubar .fa-search,
.menubar .fa-user,
.menubar .fa-cog,
.menubar .fa-sign-out {
    font-size: 16px;
    margin-right: 4px;
}

/* Logo */
.logo {
    background: transparent !important;
    color: white !important;
    font-size: 12pt;
    padding: 5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Add logo image from logo.jpg */
.logo::before {
    content: '';
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url('../logo.jpg') no-repeat center;
    background-size: cover;
    margin-right: 10px;
    border-radius: 6px;
}

/* Hide the text when we have the image */
.logo {
    font-size: 0;
}

.logo::after {
    content: 'Bug Tracker';
    font-size: 12pt;
    margin-left: 10px;
}

/* Force menu items to stay on one line */
.menu_td {
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
}

/* ID and logged in user display */
.menubar .menu_td:last-child {
    text-align: right;
    padding-right: 10px;
    color: white;
    font-size: 9pt;
}

/* Orange/highlighted menu items (reports, admin) */
.menubar a[style*="color:#ff9900"],
.menubar a[style*="color: #ff9900"],
.menubar a[style*="color:orange"],
.menubar a[style*="color: orange"],
.menubar font[color="orange"] {
    color: #ffeb3b !important;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Ensure all menu text is visible */
.menubar font {
    color: white !important;
}

/* Fix popup positioning */
.buglist_popup {
    z-index: 111;
    border: 1px solid #dfe6e9;
    padding: 8px;
    position: absolute !important;
    background: white;
    color: #2d3436;
    display: none;
    max-width: 500px;
    max-height: 400px;
    font-size: 10pt;
    font-family: verdana, arial;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 4px;
    /*opacity: 0;
    animation: fadeIn 0.1s ease-in forwards;*/
}

/* Fade-in animation for popup */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Form Controls */
select, input[type="text"], input[type="password"], textarea {
    font-family: verdana, arial;
    font-size: 11pt;
    padding: 5px 5px 5px 5px;
    margin: 5px;
    margin-top: 0px;
    border: 1px solid #dfe6e9;
    border-radius: 4px;
    /*background: white;*/
    transition: all 0.2s ease;
    box-sizing: border-box;
}

select:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    outline: none;
    border-color: #4361ee;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

/* Filter Controls */
.bugs_filter, .bugs_filter_selected {
    border-radius: 4px;
    font-family: arial;
    /* font-size: 11pt;*/
    height: 30px;
    padding: 2px;
    margin: 0px !important;
    border: 1px solid #dfe6e9;
}

.bugs_filter {
    background: white;
    color: #2d3436;
}

.bugs_filter_selected {
    background: #6399e9;
    color: white;
    border-color: #4361ee;
}

/* Buttons */
.menubtn, .btn {
    font-size: 11pt;
    padding: 6px !important;
    margin: 0px !important;
    border-radius: 2px;
    border: none;
    background: #6399e9;
    color: white;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.menubtn:hover, .btn:hover {
    /*background: #3046d5;*/
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
}

/* Bug Table Modernization */
.bugt {
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    background: white;
    border-radius: 8px;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    /* Set a minimum total width based on sum of all column widths */
    /* From bug_list.cs: 50+70+80+70+60+60+80+80+250+75+70+60+60+80+60+80+80+100 = 1445px */
    /*min-width: 1445px !important;*/
    width: 100%;
    display: table;
    table-layout: fixed !important; /* This will now respect col widths since table has min-width */
    position: relative;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}


/* Ensure the wrapper allows horizontal scrolling */
.align {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
}

/* Table cells should not override colgroup widths */
.bugt th,
.bugt td {
    box-sizing: border-box;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    overflow: visible;
    text-wrap: auto;
}

/* Table Headers */
.bugh {
    background: #6399e9;
    color: white;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #cccccc;
    padding: 2px;
    font-size: 10pt;
    text-transform: none;
    white-space: nowrap;
}

/* Make the header row (second row) sticky - first row is pagination */
.bugt thead tr:first-child th,
.bugt tr:nth-child(2) .bugh {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    color: white;
    /*background: #6399e9;*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Exception for assignee-counts table - preserve colored headers */
.assignee-counts tr:nth-child(1) .bugh {
    color: inherit; /* Don't force white color for this specific table */
}

/* Light mode specific colors for assignee-counts headers */
body.light-mode .assignee-counts .bugh.status-opendev {
    color: #c117c1 !important;
}

body.light-mode .assignee-counts .bugh.status-openci {
    color: #4169E1 !important;
}

body.light-mode .assignee-counts .bugh.status-openqa {
    color: green !important;
}

body.light-mode .assignee-counts .bugh.status-opencd {
    color: #DAA520 !important;
}

body.light-mode .assignee-counts .bugh.status-closed {
    color: #333 !important;
}

body.light-mode .assignee-counts .bugh.status-waiting {
    color: red !important;
}

body.light-mode .assignee-counts .bugh.status-total {
    color: inherit !important;
}

.bugh:first-child {
    border-left: none;
}

    .bugh a {
        color: white;
        font-size: 10pt;
        text-decoration: none;
    }

.bugh a:hover {
    color: #ff6633;
    font-size: 10pt;
    text-decoration: none;
}

/* Table Cells */
.bugd {
    font-size: 10pt;
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 5px;
    white-space: nowrap;
    overflow:visible;
    text-wrap: auto;
}

/* Ensure table expands to show all columns */
.align {
    overflow-x: auto !important;
    width: 100% !important;
}

/* Medium screens (tablets/small laptops): Page scrollbar only */
@media (min-width: 769px) and (max-width: 1200px) {
    /* Remove grid scrollbar */
    .align {
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: none !important;
    }
    
    /* Ensure html and body can scroll horizontally */
    html {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
    
    body {
        overflow-x: visible !important; /* Let html handle the scrollbar */
        overflow-y: visible !important;
        min-width: min-content !important;
    }
    
    /* Ensure table can expand beyond viewport */
    .bugt {
        min-width: 1445px !important; /* Match the table's required width */
    }
}

/* Desktop view: Let page handle horizontal scrolling */
@media (min-width: 1201px) {
    /* Remove grid scrollbar */
    .align {
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: none !important;
    }
    
    /* Ensure html and body can scroll horizontally */
    html {
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
    
    body {
        overflow-x: visible !important; /* Let html handle the scrollbar */
        overflow-y: visible !important;
        min-width: min-content !important;
    }
    
    /* Ensure table can expand beyond viewport */
    /*.bugt {
        min-width: 1445px !important;*/ /* Match the table's required width */
    /*}*/
}

/* Mobile Filter Toggle - Unified Styles for All Themes */
#mobile-filter-toggle {
    /* Base styles that work across all themes */
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

#mobile-filter-panel {
    /* Base panel styles */
    position: relative !important;
    z-index: 1001 !important;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    #mobile-filter-toggle {
        margin-left: 0 !important;
        margin-right: 5px !important;
    }
}

/* Theme-specific color overrides */
/* Dark mode colors */
body.dark-mode #mobile-filter-panel {
    background: #2b2d30 !important;
    border-color: #3c3f41 !important;
    color: #abb2bf !important;
}

/* Classic mode inherits default styles */
/* Light mode uses default styles */

/* Paging section styling */
.buglist_paging {
    padding-left: 3px;
    height: 25px;
    font-size: 11pt;
}

/* Remove bottom border from last row */
tr:last-child .bugd {
    border-bottom: none;
}

/* Preserve functional colors but make them MUCH darker/more prominent */
.bugd_red {
    width: 180px;
    background: #ff8080 !important;
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 5px;
}

.bugd_purple {
    width: 180px;
    background: #b37beb !important;
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 5px;
}

.bugd_blue {
    width: 180px;
    background: #6399e9 !important;
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 5px;
}

.bugd_green {
    width: 180px;
    background: #46cd97 !important;
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 5px;
}

.bugd_yellow {
    width: 180px;
    background: #ffcc66 !important;
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 5px;
}

.bugd_dark-blue {
    width: 180px;
    background: #99ccff !important;
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 5px;
}

/* Status cells with MUCH darker colors for better visibility */
/* Red shades - for critical/blocked statuses */
td[bgcolor="#ff9999"] { background: #ff6666 !important; }
td[bgcolor="#ffcccc"] { background: #ff9999 !important; }
td[bgcolor="#ffdddd"] { background: #ffb3b3 !important; }

/* Green shades - for completed/good statuses */
td[bgcolor="#aaffaa"] { background: #66ff66 !important; }
td[bgcolor="#ccffcc"] { background: #99ff99 !important; }
td[bgcolor="#ddffdd"] { background: #b3ffb3 !important; }

/* Yellow shades - for warnings/in progress */
td[bgcolor="#ffff99"] { background: #ffff66 !important; }
td[bgcolor="#ffffcc"] { background: #ffff99 !important; }
td[bgcolor="#ffffdd"] { background: #ffffb3 !important; }

/* Blue/Purple shades - for various states */
td[bgcolor="#ccccff"] { background: #9999ff !important; }
td[bgcolor="#ddddff"] { background: #b3b3ff !important; }
td[bgcolor="#aaaaff"] { background: #8080ff !important; }
td[bgcolor="#ffccff"] { background: #ff99ff !important; }
td[bgcolor="#ffddff"] { background: #ffb3ff !important; }

/* Additional common colors */
td[bgcolor="#f0f0ff"] { background: #ccccff !important; }
td[bgcolor="#fff0f0"] { background: #ffcccc !important; }
td[bgcolor="#f0fff0"] { background: #ccffcc !important; }

/* Override any inline styles with style attribute containing background-color */
td[style*="background-color: #ffcccc"],
td[style*="background-color:#ffcccc"] { background: #ff9999 !important; }
td[style*="background-color: #ddddff"],
td[style*="background-color:#ddddff"] { background: #b3b3ff !important; }
td[style*="background-color: #ccccff"],
td[style*="background-color:#ccccff"] { background: #9999ff !important; }
td[style*="background-color: #ffffcc"],
td[style*="background-color:#ffffcc"] { background: #ffff99 !important; }
td[style*="background-color: #ccffcc"],
td[style*="background-color:#ccffcc"] { background: #99ff99 !important; }

/* Ensure text is readable on darker backgrounds */
td[bgcolor="#ff9999"],
td[bgcolor="#ffcccc"],
td[bgcolor="#aaffaa"],
td[bgcolor="#ffff99"],
td[bgcolor="#ccccff"],
td[bgcolor="#aaaaff"],
td[bgcolor="#9999ff"] {
    color: #000000 !important;
    font-weight: normal !important;
}

/* Description column - make it stand out */
.bugd_desc {
    max-width: 300px !important;
    white-space: normal !important;
}

.bugd_desc a {
    color: #262323;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bugd_desc a:hover {
    color: #ff6633;
}

/* Project and Store columns with custom font */
.bugd_project, .bugd_store {
    font-family: Bebas Neue;
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 3px;
    padding-left: 5px;
    font-size: 13pt;
    color: #353b72;
    max-width: 80px;
}

/* Pagination */
.buglist_paging {
    padding-left: 3px;
    height: 25px;
    font-size: 11pt;
    text-align: left;
}

.buglist_paging a {
    color: gray;
    font-size: 11pt;
    text-decoration: none;
}

.buglist_paging a:visited {
    color: black;
    font-size: 11pt;
    text-decoration: none;
}

/* Edit Bug Form */
.frm {
    background: white;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Labels */
.lbl {
    font-size: 9pt;
    vertical-align: middle;
}

/* Comments */
.cmt {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin: 8px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.cmt_selected {
    border: 2px solid #4361ee;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.cmt_text {
    font-family: 'Verdana';
    line-height: 1.5;
}

/* Bulk Edit */
.bulk_edit {
    border: 0px;
    font-family: arial;
    font-size: 9pt;
    background: #ffeeaa;
    color: #666666;
    padding: 2px;
    height: 30px;
}

/* Menu Items */
.menu_item {
    /*padding: 6px 12px;*/
    border-radius: 6px;
}

/* Light theme friendly warn styling */
body.light-mode .menu_item.warn,
body.light-mode a.warn {
    /*background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    padding: 6px 12px;*/
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    font-weight: 500;
}

body.light-mode .menu_item.warn:hover,
body.light-mode a.warn:hover {
   /* background: #ffe8a1;
    color: #704000;
    border-color: #ffd93d;*/
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Specific styling for prev/next navigation in light mode */
body.light-mode #prev_next a.warn {
    background: #e8f4fd;
    color: #004085;
    border: 1px solid #b8daff;
    padding: 8px 16px;
    margin: 0 4px;
}

body.light-mode #prev_next a.warn:hover {
    background: #cfe2ff;
    color: #002752;
    border-color: #9ec5fe;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Icon styling for navigation arrows */
body.light-mode #prev_next a.warn i {
    color: #004085;
    margin: 0 4px;
}

/* Search/Filter Bar */
.clearable input[type=text] {
    font-size: 11pt;
    padding-right: 24px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cccccc;
}

/* Dropdown menus */
.menuinput, .buginput {
    margin: 5px;
    margin-top: 0px;
    padding: 3px;
    font-size: 11pt;
    border: 1px solid #cccccc;
    vertical-align: middle;
    box-sizing: border-box;
}



.menuinput_selected, .buginput_selected {
    font-size: 11pt;
    margin: 5px;
    margin-top: 0px;
    padding: 3px;
    font-size: 11pt;
    border: 1px solid #cccccc;
    background: #6399e9;
    color: white;
    /*width: auto !important;*/
    vertical-align: middle;
}

/* Status badges - modernize while keeping colors recognizable */
.bugs_green {
    vertical-align: middle;
    border: 1px solid #e7e5e5;
    padding: 5px;
    color: white;
    background: #647ccf;
    white-space: nowrap;
    margin: 0px 5px 5px 5px;
}

/* Hover effects for table rows */
.bugt tr:hover .bugd {
    background: #f8f9fa;
}

/* Keep functional color hover states */
.bugt tr:hover .bugd_red { background: #ff9999; }
.bugt tr:hover .bugd_purple { background: #d9b3ff; }
.bugt tr:hover .bugd_blue { background: #99ccff; }
.bugt tr:hover .bugd_green { background: #99e6d1; }
.bugt tr:hover .bugd_yellow { background: #ffd999; }

/* Error messages */
.err {
    color: red;
    font-size: 10pt;
    font-weight: bold;
}

/* Success messages */
.success {
    color: #2f9e44;
    font-size: 14px;
    font-weight: 500;
    padding: 12px;
    background: #d3f9d8;
    border-radius: 6px;
    margin: 8px 0;
}


/* Ensure all columns are visible - NEVER HIDE ANY COLUMNS */
/*.bugd, .bugh {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
}*/

/* Force all nth-child columns to be visible */
/*th:nth-child(n), td:nth-child(n) {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
}*/

/* Specifically ensure these commonly hidden columns are visible */
/* Task, Ticket, Branch, Origin, Sprint, Notes */
/*.bugt tr th:nth-child(6),*/  /* Task */
/*.bugt tr td:nth-child(6),
.bugt tr th:nth-child(5),*/  /* Ticket */
/*.bugt tr td:nth-child(5),
.bugt tr th:nth-child(15),*/ /* Branch */
/*.bugt tr td:nth-child(15),
.bugt tr th:nth-child(16),*/ /* Origin */
/*.bugt tr td:nth-child(16),
.bugt tr th:nth-child(9),*/  /* Sprint */
/*.bugt tr td:nth-child(9),
.bugt tr th:nth-child(17),*/ /* Notes */
/*.bugt tr td:nth-child(17) {
    display: table-cell !important;
    visibility: visible !important;
    opacity: 1 !important;
}*/

/* Keep menu horizontal on desktop */
@media (min-width: 769px) {
    .menubar table {
        /* table-layout: auto; - Commented out to allow fixed table layout with column widths */
    }
    
    .menubar td {
        white-space: nowrap;
        padding: 0 8px;
    }
}

/* Ensure page info text is visible and properly aligned */
body > p {
    text-align: left !important;
    margin: 10px 0;
    padding-left: 10px;
}

/* Override any center alignment from parent elements */
center, .center, [align="center"] {
    text-align: left !important;
}

center .align, .center .align, [align="center"] .align {
    text-align: left !important;
    margin-left: 0 !important;
}

/* Specific override for the bugs.aspx page layout */
body > center {
    display: block;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive improvements */
@media (max-width: 1400px) {
    .bugd {
        padding: 4px 6px;
    }
    
    .bugh {
        padding: 6px 4px;
    }
    
    .menubar a {
        padding: 5px 10px;
    }
}

/* Tablet view */
@media (max-width: 1024px) {
    /* Don't hide columns - let them scroll horizontally */
    .bugd {
        padding: 3px 5px;
    }
    
    .bugd_desc {
        max-width: 200px !important;
    }
    
    /* Make table scrollable */
    .align {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile view - keep table format with scrolling */
@media (max-width: 768px), (orientation: landscape) and (max-height: 600px) {
    /* Keep table as-is, just enable horizontal scrolling */
    .align {
        overflow-x: auto;
        overflow-y: visible; /* Let page scroll vertically */
        -webkit-overflow-scrolling: touch;
        position: relative;
        left: 0;
        margin: 0;
        padding: 0;
    }
    
    /* Ensure the entire page scrolls naturally */
    body {
        overflow-x: auto; /* Changed from hidden to allow horizontal scroll on mobile */
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }
    
    html {
        overflow-y: auto;
    }
    
    .bugt {
        min-width: 1800px; /* Further increased to ensure ALL columns fit */
        display: table !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        /* table-layout: auto; - Commented out to allow fixed table layout with column widths */
        width: 100% !important;
    }
    
    /* Mobile menu - make it horizontally scrollable */
    .menubar {
        padding: 8px 0;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        display: block !important;
        width: 100%;
        max-width: 100vw;
        height: auto !important;
        
    }
    
    /* Remove gradient in mobile for light and dark themes */
    body:not(.classic-mode) .menubar {
        background: #3462D9 !important; /* Solid color, no gradient */
    }
    
    body.dark-mode .menubar {
        background: #21252b !important; /* Solid dark color, no gradient */
    }
    
    /* Remove any borders between menu cells */
    .menubar td,
    .menubar table {
        border: none !important;
        border-collapse: collapse !important;
    }
    
    /* Fix iframe height to match menubar */
    .menubar iframe {
        height: 50px !important; /* Match typical row height */
        vertical-align: middle !important;
        border: none !important;
    }
    
    /* Force single row layout */
    .menubar table {
        width: auto !important;
        table-layout: fixed !important;
        white-space: nowrap !important;
    }
    
    .menubar tbody,
    .menubar tr {
        display: table-row !important;
        white-space: nowrap !important;
    }
    
    .menubar td {
        display: table-cell !important;
        white-space: nowrap !important;
        padding: 0 8px;
        vertical-align: middle;
        float: none !important;
        height: auto !important;
    }
    
    /* Prevent any wrapping of content */
    .menubar * {
        white-space: nowrap !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    /* Keep table cells inline */
    .menubar td.menu_td {
        display: table-cell !important;
    }
    
    .menubar a {
        padding: 6px 10px;
        font-size: 11px;
        margin: 2px;
    }
    
    /* Show logo in mobile - same 40x40 size */
    .logo {
        display: flex !important;
        padding: 3px;
        font-size: 10pt;
    }
    
    .logo::before {
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }
    
    /* Show all menu items on mobile with horizontal scrolling */
    /* Override any hiding - all items should be visible */
    .menubar a,
    .menubar font,
    .menubar span {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }
    
    /* Ensure forms and inputs don't break the layout */
    .menubar form {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }
    
    .menubar input,
    .menubar select {
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 2px !important;
    }
    
    /* Specifically ensure admin menu items are visible */
    .menubar a[href*="reports.aspx"],
    .menubar a[href*="admin.aspx"],
    .menubar a[href*="settings.aspx"],
    .menubar a[href*="logoff.aspx"],
    .menubar a[href*="logout"],
    .menubar a[href*="admin/"],
    .menubar font[color="orange"],
    .menubar a[style*="color:#ff9900"],
    .menubar a[style*="color: #ff9900"],
    .menubar a[style*="color:orange"],
    .menubar a[style*="color: orange"] {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    /* Show the last table cell that contains user info and ID */
    .menubar .menu_td:last-child {
        display: table-cell !important;
    }
    
    /* Hamburger menu is removed - using horizontal scrolling instead */
    
    /* Ensure the search form stays inline */
    .menubar #lucene_form,
    .menubar form {
        display: inline-block !important;
        white-space: nowrap !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
    
    /* Visual scroll indicator for menubar */
    .menubar-scroll-hint {
        animation: scroll-hint 2s ease-in-out infinite;
    }
    
    @keyframes scroll-hint {
        0%, 100% { transform: translateY(-50%) translateX(0); }
        50% { transform: translateY(-50%) translateX(-5px); }
    }
    
    /* Remove gradient fade - causes white line issue on mobile */
    /* Gradient removed to fix white vertical line appearing on screen edge */
    
    /* Remove padding since header is not fixed */
    body {
        padding-top: 0;
    }
    
    /* Make menubar appear below hamburger when toggled */
    .menubar {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        width: 100%;
        max-height: none;
        overflow-y: visible;
    }
    
    /* Make filter controls more compact on mobile */
    select, input[type="text"] {
        /*font-size: 12px;*/
        padding: 10px;
        margin: 2px;
    }
    
    .bugs_filter, .bugs_filter_selected {
        font-size: 12px;
        height: 28px;
        padding: 2px 4px;
    }
    
    /* Ensure all table columns are visible - don't hide any */
    .bugt th, .bugt td {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Prevent any column from being hidden */
    .bugh:nth-child(n), .bugd:nth-child(n) {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force specific columns to show */
    .bugt tr > *:nth-child(5),  /* Ticket */
    .bugt tr > *:nth-child(6),  /* Task */
    .bugt tr > *:nth-child(9),  /* Sprint */
    .bugt tr > *:nth-child(15), /* Branch */
    .bugt tr > *:nth-child(16), /* Origin */
    .bugt tr > *:nth-child(17) /* Notes */ {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 50px;
    }
    
    /* Add visible scroll indicators - horizontal only */
    .align::-webkit-scrollbar {
        height: 12px;
    }
    
    .align::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .align::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 6px;
    }
    
    .align::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    
    /* Ensure filters scroll with the page */
    form > * {
        position: relative !important;
    }
}

/* Landscape orientation for mobile devices - including high-res phones like Galaxy S24 */
@media (orientation: landscape) and (max-height: 700px) {
    /* Show logo in landscape mobile - same 40x40 size */
    .logo {
        display: flex !important;
        padding: 3px;
        font-size: 10pt;
    }
    
    .logo::before {
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }
    
    .menubar a[href*="reports.aspx"],
    .menubar a[href*="admin.aspx"],
    .menubar a[href*="settings.aspx"],
    .menubar a[href*="logoff.aspx"],
    .menubar a[href*="logout"],
    .menubar a[href*="admin/"],
    .menubar font[color="orange"],
    .menubar a[style*="color:#ff9900"],
    .menubar a[style*="color: #ff9900"],
    .menubar a[style*="color:orange"],
    .menubar a[style*="color: orange"],
    .menubar .menu_td:last-child {
        display: none !important;
    }
    
    /* Wrapper for mobile header to match grid width */
    body {
        position: relative;
        padding-top: 0;
    }
    
    /* Create wrapper for blue background in landscape */
    /*#mobile-menu-toggle {
        position: relative;
        width: 100% !important;
        background: #3462D9 !important;
        z-index: 1000;
        margin: 0;
        padding: 0 !important;
        display: block !important;
    }*/
    
    /* Logo is handled by JavaScript */
    
    /* Hamburger menu handled by JavaScript */
    
    /* Match menubar width to grid width when shown */
    .menubar {
        position: relative;
        display: block;
        width: 100% !important;
        margin: 0 !important;
        background: #3462D9;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        z-index: 999;
        overflow-y: visible;
        max-height: none;
    }
    
    /* Constrain menubar content to grid width */
    .menubar table {
        width: 1000px !important;
        max-width: calc(100vw - 20px);
        margin: 0 auto;
    }
    
    /* Ensure the align container stays centered like the header */
    .align {
        max-width: 100vw;
        overflow-x: auto;
        margin: 0 auto;
    }
    
    /* Keep table scrollable with all columns visible */
    .bugt {
        min-width: 1400px; /* Increased to ensure all columns are visible */
        display: table;
        margin-left: 0 !important;
        margin-right: auto !important;
        /* table-layout: auto; - Commented out to allow fixed table layout with column widths */
    }
    
    /* Ensure no columns are hidden */
    .bugd, .bugh {
        display: table-cell !important;
    }
}

/* Very small mobile - same as mobile, just keep scrolling */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    
    /* Even smaller filters */
    select, input[type="text"] {
        padding: 3px;
        margin: 1px;
        padding: 10px;
    }
    
    .bugs_filter, .bugs_filter_selected {
        height: 26px;
        padding: 2px;
    }
    
    /* Keep table scrollable and left-aligned - page scrolls naturally */
    .align {
        text-align: left !important;
        margin-left: 0 !important;
        overflow-y: visible !important;
        height: auto !important;
    }
    
    .bugt {
        margin-left: 0 !important;
    }
    
    /* Show logo in very small mobile but even smaller */
    .logo {
        display: flex !important;
        padding: 2px;
        font-size: 0;
    }
    
    .logo::before {
        width: 40px;
        height: 40px;
        margin-right: 3px;
    }
    
    .logo::after {
        font-size: 9pt;
        margin-left: 5px;
    }
    
    .menubar a[href*="reports.aspx"],
    .menubar a[href*="admin.aspx"],
    .menubar a[href*="settings.aspx"],
    .menubar a[href*="logoff.aspx"],
    .menubar a[href*="logout"],
    .menubar a[href*="admin/"],
    .menubar font[color="orange"],
    .menubar a[style*="color:#ff9900"],
    .menubar a[style*="color: #ff9900"],
    .menubar a[style*="color:orange"],
    .menubar a[style*="color: orange"] {
        display: none !important;
    }
    
    .menubar .menu_td:last-child {
        display: none !important;
    }
}

/* Mobile view maintains regular table format - no card view needed */

/* Modern button-17 styles for Light theme */
body.light-mode .button-17 {
    background: #ffffff;
    border: 2px solid #e9ecef;
    color: #495057;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    border-radius: 8px; /* More squared to match menubar buttons */
    padding: 8px 20px; /* Adjusted padding for better proportions */
    height: 40px; /* Slightly reduced height */
}

body.light-mode .button-17:hover {
    background: #f8f9fa;
    border-color: #dee2e6;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

body.light-mode .button-17:active {
    background: #e9ecef;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transform: translateY(0);
}

body.light-mode .button-17:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15), 0 1px 3px rgba(0,0,0,0.08);
    border-color: #4361ee;
}

/* Pressed state for Light theme */
    body.light-mode .button-17.pressed {
        background: #50b76c;
        border-color: #50b76c;
        color: white;
        box-shadow: 0 2px 4px rgba(67, 97, 238, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
    }

        body.light-mode .button-17.pressed:hover {
            background: #50b76c;
            border-color: #50b76c;
            box-shadow: 0 3px 6px rgba(67, 97, 238, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
        }

body.light-mode .button-17.pressedFilter {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

body.light-mode .button-17.pressedFilter:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    box-shadow: 0 3px 6px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Light theme friendly smallnote styling */
body.light-mode .smallnote {
    color: white !important; /* Friendly gray color that's readable on light backgrounds */
    font-size: 0.675rem; /* 14px - more readable than 8pt */
    line-height: 1.5;
    opacity: 0.9;
}

/* Different contexts for smallnote in light theme */
/* Login/form hints */
body.light-mode form .smallnote,
body.light-mode .frm .smallnote {
    color: #4361ee !important; /* Blue for helpful hints */
    font-style: italic;
}

/* Character counters and metadata */
body.light-mode .char-counter.smallnote {
    color: #6c757d !important;
    font-size: 0.75rem; /* Smaller for counters */
    font-style: normal;
}

/* Navigation indicators (already styled above but ensuring consistency) */
body.light-mode #prev_next .smallnote {
    color: #495057 !important; /* Darker gray for better readability */
    font-size: 14px !important;
    font-weight: 500;
}

/* Warning or important notes */
body.light-mode .smallnote.warn,
body.light-mode .smallnote.important {
    color: #dc3545 !important; /* Red for warnings */
    font-weight: 500;
}

/* Success notes */
body.light-mode .smallnote.success {
    color: #28a745 !important; /* Green for success */
}

/* Mobile Filter Toggle Styles */
@media (max-width: 768px), (orientation: landscape) and (max-height: 600px) {
    /* Filter toggle button */
    .filter-toggle-btn {
        background: rgba(255,255,255,0.1);
        color: white;
        border: 1px solid rgba(255,255,255,0.2);
        padding: 6px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.3s ease;
        white-space: nowrap;
    }
    
    .filter-toggle-btn:hover,
    .filter-toggle-btn.active {
        background: rgba(255,255,255,0.25);
        border-color: rgba(255,255,255,0.4);
        transform: translateY(-1px);
    }
    
    .filter-toggle-btn i {
        font-size: 12px;
    }
    
    /* Mobile filter toggle cell in menubar */
    .mobile-filter-toggle-cell {
        padding: 0 5px !important;
        white-space: nowrap;
    }
    
    /* Remove gradient in mobile for light and dark themes */
    body:not(.classic-mode) .menubar {
        background: #3462D9 !important; /* Solid color, no gradient */
    }
    
    body.dark-mode .menubar {
        background: #21252b !important; /* Solid dark color, no gradient */
    }
    
    /* Remove the gradient fade indicator that causes white line */
    .menubar::after {
        display: none !important;
    }
    
    /* Fix iframe height to match menubar */
    .menubar iframe {
        height: 50px !important;
        vertical-align: middle !important;
        border: none !important;
    }
    
    /* Mobile filter panel */
    .mobile-filter-panel {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        margin: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Dark mode filter panel */
    body.dark-mode .mobile-filter-panel {
        background: #2b2d30;
        border-color: #3c3f41;
        color: #abb2bf;
    }
    
    /* Filter items */
    .mobile-filter-item {
        margin-bottom: 15px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .mobile-filter-label {
        font-weight: 600;
        font-size: 13px;
        color: #666;
        display: block;
        margin-bottom: 3px;
    }
    
    body.dark-mode .mobile-filter-label {
        color: #98c379;
    }
    
    /* Style filter inputs for mobile */
    .mobile-filter-panel select,
    .mobile-filter-panel input[type="text"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px; /* Prevent zoom on iOS */
        background-color: white;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    body.dark-mode .mobile-filter-panel select,
    body.dark-mode .mobile-filter-panel input[type="text"] {
        background-color: #3c3f41;
        border-color: #4b5263;
        color: #abb2bf;
    }
    
    /* Custom dropdown arrow for selects */
    .mobile-filter-panel select {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 16px;
        padding-right: 30px;
    }
    
    /* Search/Apply buttons */
    .mobile-filter-search,
    .mobile-filter-apply {
        margin-top: 20px;
        text-align: center;
    }
    
    .mobile-filter-search input[type="submit"],
    .mobile-filter-search input[type="button"],
    .mobile-filter-apply {
        background: #4361ee;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        transition: all 0.3s ease;
    }
    
    .mobile-filter-search input[type="submit"]:hover,
    .mobile-filter-search input[type="button"]:hover,
    .mobile-filter-apply:hover {
        background: #3046d5;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
    }
    
    /* Bug list filter toggle container */
    .buglist-filter-toggle-container {
        margin: 10px 0;
        text-align: left;
    }
    
    .buglist-filter-toggle {
        background: #4361ee;
        color: white;
        border: none;
        margin-bottom: 10px;
    }
    
    .buglist-filter-toggle:hover,
    .buglist-filter-toggle.active {
        background: #3046d5;
    }
    
    /* Bug list filter panel */
    .buglist-filter-panel {
        position: relative;
        z-index: 10;
        margin-bottom: 20px;
    }
    
    /* Mobile filter styles are handled by JavaScript */
    /* Column filters remain visible on mobile since toggle was removed */
    
    /* Fix the parent container on mobile */
    .EditBugTable td[width="180px"] {
        width: 100% !important;
        white-space: normal !important;
    }
    
    .EditBugTable td[width="180px"] .align {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Style Next/Prev navigation buttons on mobile */
    #prev_next {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 10px !important;
        padding-left: 10px !important;
    }
    
    /* Style the navigation links to match menubar button style */
    #prev_next a.warn {
        display: inline-block !important;
        background: rgba(67, 97, 238, 0.1) !important; /* Light blue background */
        color: #4361ee !important;
        border: 1px solid rgba(67, 97, 238, 0.2) !important;
        padding: 6px 16px !important;
        border-radius: 6px !important;
        font-size: 0 !important; /* Hide original text */
        text-decoration: none !important;
        margin: 0 !important;
        transition: all 0.2s ease !important;
        white-space: nowrap !important;
    }
    
    /* Add arrow icons */
    /*#prev_next a.warn:first-of-type::before {
        content: "\f060" !important;*/ /* Left arrow */
        /*font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 14px !important;
    }*/
    
    /*#prev_next a.warn:last-of-type::before {
        content: "\f061" !important;*/ /* Right arrow */
        /*font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 14px !important;
    }*/
    
    #prev_next a.warn:hover {
        background: rgba(67, 97, 238, 0.25) !important;
        border-color: rgba(67, 97, 238, 0.4) !important;
        transform: translateY(-1px) !important;
    }
    
    /* Dark mode colors */
    body.dark-mode #prev_next a.warn {
        background: rgba(152, 195, 121, 0.1) !important;
        color: #98c379 !important;
        border-color: rgba(152, 195, 121, 0.2) !important;
    }
    
    body.dark-mode #prev_next a.warn:hover {
        background: rgba(152, 195, 121, 0.25) !important;
        border-color: rgba(152, 195, 121, 0.4) !important;
    }
    
    /* Classic mode colors */
    body.classic-mode #prev_next a.warn {
        background: rgba(0, 102, 204, 0.1) !important;
        color: #0066cc !important;
        border-color: rgba(0, 102, 204, 0.2) !important;
    }
    
    body.classic-mode #prev_next a.warn:hover {
        background: rgba(0, 102, 204, 0.25) !important;
        border-color: rgba(0, 102, 204, 0.4) !important;
    }
    
    /* Hide the original arrow images */
    #prev_next a.warn img {
        display: none !important;
    }
    
    /* Style disabled navigation arrows */
    #prev_next font[color="#808080"] {
        display: inline-block !important;
        background: rgba(0, 0, 0, 0.05) !important;
        color: #999 !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        padding: 6px 16px !important;
        border-radius: 6px !important;
        font-size: 0 !important;
        margin: 0 !important;
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        white-space: nowrap !important;
    }
    
    /* Add arrow icons to disabled buttons */
    #prev_next font[color="#808080"]:first-of-type::before {
        content: "\f060" !important; /* Left arrow */
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 14px !important;
    }
    
    #prev_next font[color="#808080"]:last-of-type::before {
        content: "\f061" !important; /* Right arrow */
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 14px !important;
    }
    
    /* Style the position indicator */
    #prev_next .smallnote {
        display: block !important;
        margin-top: 10px !important;
        font-size: 14px !important;
        color: #666 !important;
    }
    
    /* Dark mode styles */
    body.dark-mode #prev_next .smallnote {
        color: #98c379 !important;
    }
}

/* Fix for mobile scrolling with sticky header */
@media (max-width: 768px) {
    /* Let page scroll naturally, filters will scroll away */
    .align {
        overflow-y: visible !important;
        height: auto !important;
    }
    
    /* Make sure the sticky header works with page scrolling */
    .bugh {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        /* Add shadow when stuck */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Ensure the table respects sticky positioning */
    .bugt {
        position: relative;
    }
}

/* Remove dotted outlines */
a:focus, select:focus, button:focus {
    outline: none;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* FINAL OVERRIDE - ENSURE NO COLUMNS ARE EVER HIDDEN */
@media all {
    .bugt tr > * {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Specifically force these columns to always show */
    .bugt tr > :nth-child(5),  /* Ticket */
    .bugt tr > :nth-child(6),  /* Task */
    .bugt tr > :nth-child(9),  /* Sprint */
    .bugt tr > :nth-child(15), /* Branch */
    .bugt tr > :nth-child(16), /* Origin */
    .bugt tr > :nth-child(17) /* Notes */ {
        display: table-cell !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Container alignment and scrolling fix */
.align {
    display: block;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible; /* Let page handle vertical scrolling */
    -webkit-overflow-scrolling: touch;
    position: relative;
    left: 0 !important;
}

/* Wrapper to enable sticky headers while page scrolls */
.bugt {
    position: relative;
}

/* Sticky header that works with page scroll - skip pagination row */
.bugt tr:nth-child(2) {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Ensure no fixed positioning on filter areas */
table:has(.bugs_filter), 
table:has(.bugs_filter_selected),
tr:has(.bugs_filter),
tr:has(.bugs_filter_selected) {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}

/* Keep filter controls left-aligned */
.align > table:first-child {
    margin: 0 !important;
    text-align: left !important;
    margin-left: 0 !important;
}

/* Ensure form doesn't break layout */
form {
    margin: 0;
    padding: 0;
}

/* Remove any conflicting margins and ensure left alignment */
body {
    margin: 0;
    padding: 0;
    text-align: left !important;
}

/* Ensure all content stays left-aligned */
    body > *, form > * {
        text-align: left !important;
        padding: 3px !important;
    }

/* Horizontal scroll for wide tables on smaller screens */
@media (max-width: 1600px) {
    .align {
        overflow-x: auto;
        overflow-y: visible; /* Page scrolls naturally */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .bugt {
        min-width: 1200px;
        width: 100%;
        /*margin: 20px 0;*/
    }
    
    /* Add visual indicator for horizontal scroll */
    .align::-webkit-scrollbar {
        height: 10px;
    }
    
    .align::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
    }
    
    .align::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }
    
    .align::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}
.buginput_selected {
    font-family: arial;
    background: #6399e9;
    color: white;
    padding: 3px;
    height: 30px;
}

/* Fix alignment for Waiting/Blocking input fields that are wrapped in tables */
input[name="dependsInput"] {
    margin-left: 2px !important;
}

/* Fix EditBugTable alignment in classic mode */
.EditBugTable {
    display: block;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 1000px !important;
}

/* Control highlighting for modern facelift theme */
body:not(.dark-mode):not(.classic-mode) .control-update-success {
    border: 4px solid #28a745 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.4) !important;
    /*background-color: rgba(40, 167, 69, 0.08) !important;*/
}

body:not(.dark-mode):not(.classic-mode) .control-update-failed {
    border: 4px solid #dc3545 !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.4) !important;
    /*background-color: rgba(220, 53, 69, 0.08) !important;*/
}

/* CKEditor comment field height - applies to all themes */
#cke_contents_comment {
    height: 150px;
}

/* Make the CKEditor wrapper resizable */
#cke_comment {
    resize: vertical !important;
}

/* Ensure the textarea itself is resizable when CKEditor is not active */
textarea#comment {
    min-height: 200px !important;
    resize: vertical !important;
}