/* ============================================
   GLASS THEME FOR MANTISBT - Complete Overhaul
   Modern, Functional, Beautiful UI/UX
   ============================================ */

/* === CSS VARIABLES === */
:root {
    --deep-space: #0a0e1a;
    --space-blue: #0d1b2a;
    --space-mid: #1b263b;
    --electric-blue: #00D4FF;
    --neon-cyan: #00F5FF;
    --text-primary: #FFFFFF;
    --text-secondary: #B8C5D6;
    --text-dim: #7B8CA3;
    --glass-bg: rgba(13, 27, 42, 0.9);
    --glass-bg-light: rgba(27, 38, 59, 0.8);
    --glass-border: rgba(0, 212, 255, 0.25);
    --glass-border-dim: rgba(0, 212, 255, 0.12);
    --success: #00FF88;
    --warning: #FFB800;
    --error: #FF4757;
    --info: #00D4FF;
    --resolved: #2ECC71;
    --assigned: #3498DB;
    --new-issue: #9B59B6;
    --feedback: #F39C12;
    --confirmed: #1ABC9C;
    --closed: #95A5A6;
}

/* === GLOBAL RESET === */
*, *::before, *::after {
    box-sizing: border-box;
}

/* === REMOVE ALL UNWANTED BORDERS/LINES === */
table, th, td, tr,
.table, .table th, .table td, .table tr,
.table-bordered, .table-bordered th, .table-bordered td,
.widget-box, .widget-header, .widget-body,
.form-group, .form-control,
fieldset, legend,
hr, .divider {
    border-color: transparent !important;
}

.table-bordered {
    border: none !important;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
    border: none !important;
}

hr {
    border-top-color: rgba(0, 212, 255, 0.1) !important;
}

/* Remove Bootstrap default borders */
.well, .panel, .panel-body, .panel-heading {
    border: none !important;
    background: transparent;
}

html {
    min-height: 100%;
    background: var(--deep-space);
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 70px 0 80px 0;
    background: linear-gradient(180deg, var(--deep-space) 0%, var(--space-blue) 50%, var(--deep-space) 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
}

/* === PARTICLE BACKGROUND === */
.bg-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.bg-particle {
    position: absolute;
    border-radius: 50%;
    animation: floatUp linear infinite;
}

.bg-particle.size-small {
    width: 3px;
    height: 3px;
    background: rgba(0, 212, 255, 0.5);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

.bg-particle.size-medium {
    width: 5px;
    height: 5px;
    background: rgba(0, 212, 255, 0.7);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.5), 0 0 24px rgba(0, 212, 255, 0.3);
}

.bg-particle.size-large {
    width: 7px;
    height: 7px;
    background: var(--electric-blue);
    box-shadow: 0 0 16px var(--electric-blue), 0 0 32px rgba(0, 212, 255, 0.5);
}

.bg-particle.glow {
    box-shadow: 0 0 25px var(--electric-blue), 0 0 50px var(--electric-blue), 0 0 75px rgba(0, 212, 255, 0.4);
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0.8;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateY(-20px) translateX(var(--drift-x, 0));
        opacity: 0;
    }
}

/* === WAGEROS LOGO === */
.wageros-logo-container {
    position: fixed;
    top: 0;
    left: 15px;
    z-index: 1050;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.wageros-logo-container a {
    display: flex;
    align-items: center;
    height: 100%;
}

.wageros-logo-container img {
    height: 32px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    aspect-ratio: auto;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));
    transition: filter 0.3s ease;
}

.wageros-logo-container img:hover {
    filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.6));
}

/* === NAVBAR - GLASS MATERIAL === */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(10, 22, 40, 0.75);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: none;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 1040;
    margin: 0;
    min-height: 60px;
}

.navbar .container-fluid {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px;
}

.navbar-header {
    display: flex;
    align-items: center;
    height: 60px;
    margin-left: 130px !important;  /* Space for WagerOS logo */
    padding-left: 0 !important;
    flex-shrink: 0;
}

.navbar-brand {
    display: inline-flex !important;
    align-items: center;
    height: 60px;
    padding: 0 15px;
    margin-left: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary) !important;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-brand:hover {
    color: var(--electric-blue) !important;
    text-decoration: none;
}

/* Hamburger toggle - SHOWN by default, hidden at larger screens */
.navbar-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 99999 !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    background: rgba(0, 212, 255, 0.2) !important;
    border: 1px solid rgba(0, 212, 255, 0.5) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.navbar-toggle .icon-bar {
    display: block !important;
    width: 22px !important;
    height: 3px !important;
    background: #00D4FF !important;
    border-radius: 2px !important;
    margin: 3px 0 !important;
}

/* Hide hamburger on desktop (>=769px) */
@media (min-width: 769px) {
    .navbar-toggle {
        display: none !important;
    }
}

/* Navbar collapse - Desktop: visible flex layout */
.navbar-collapse {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
    width: auto;
    flex-wrap: nowrap;
}

.navbar-collapse.collapse {
    display: flex;
}

/* Main nav on left - NO WRAP on desktop */
.navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 60px;
    overflow: hidden;
}

.navbar-nav > li {
    display: flex;
    align-items: center;
    position: relative;
    height: 60px;
    flex-shrink: 0;
}

.navbar-nav > li > a {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 12px;
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li.active > a {
    color: var(--electric-blue) !important;
    background: rgba(0, 212, 255, 0.1) !important;
}

.navbar-nav > li > a i {
    margin-right: 6px;
}

/* Right nav */
.navbar-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    height: 60px;
}

.navbar-nav.navbar-right {
    margin-left: auto;
}

/* === DROPDOWNS - GLASS MATERIAL === */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;
    min-width: 200px;
    padding: 8px 0;
    margin: 0;
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(0, 212, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    list-style: none;
}

.navbar-right .dropdown-menu {
    left: auto;
    right: 0;
}

/* DROPDOWN OPEN STATE - Maximum specificity for visibility */
.dropdown.open > .dropdown-menu,
.open > .dropdown-menu,
li.dropdown.open > .dropdown-menu,
.navbar-nav > li.dropdown.open > .dropdown-menu,
.dropdown-menu.glass-menu-visible,
.navbar .dropdown.open .dropdown-menu,
.navbar-default .navbar-nav > .open > .dropdown-menu,
.navbar-default .navbar-nav .open .dropdown-menu,
nav .dropdown.open > ul.dropdown-menu,
header .dropdown.open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 99999 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    clip: auto !important;
    /* Force proper positioning */
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 200px !important;
    min-height: 50px !important;
    background: rgba(10, 22, 40, 0.98) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 20px rgba(0,212,255,0.1) !important;
    margin-top: 2px !important;
}

/* Ensure dropdown toggle caret shows */
.dropdown-toggle .caret {
    display: inline-block !important;
    visibility: visible !important;
}

/* Make sure dropdown parent is positioned for absolute children */
.navbar-nav > li.dropdown,
.navbar .dropdown,
li.dropdown,
.dropdown {
    position: relative !important;
}

/* Ensure navbar doesn't clip dropdowns */
.navbar,
.navbar-default,
.navbar-nav,
.navbar-collapse {
    overflow: visible !important;
}

.dropdown-menu > li > a {
    display: block;
    padding: 10px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dropdown-menu > li > a:hover {
    color: var(--text-primary);
    background: rgba(0, 212, 255, 0.15);
}

.dropdown-menu .divider {
    height: 1px;
    margin: 8px 0;
    background: var(--glass-border-dim);
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* === MAIN CONTENT CONTAINER === */
.main-container {
    position: relative;
    z-index: 10;
    padding: 20px 30px;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}

/* Fix Bootstrap grid without row wrapper */
.main-container > .col-md-12,
.main-container > .col-xs-12,
.main-container > [class*="col-"] {
    float: none;
    width: 100%;
    padding: 0;
}

.main-container::after {
    content: "";
    display: table;
    clear: both;
}

/* === WIDGET BOXES - GLASS MATERIAL === */
.widget-box {
    background: rgba(13, 27, 42, 0.7);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    margin-bottom: 24px;
    overflow: hidden;
}

.widget-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 212, 255, 0.02) 100%);
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-title i,
.widget-title .ace-icon {
    color: var(--electric-blue);
}

.widget-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-body {
    padding: 20px;
}

.widget-main {
    padding: 0;
}

/* Collapsed state */
.widget-box.collapsed .widget-body {
    display: none;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary,
.btn-info {
    background: linear-gradient(135deg, var(--electric-blue) 0%, #0099CC 100%);
    color: #000 !important;
    border-color: var(--electric-blue);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.btn-primary:hover,
.btn-info:hover {
    background: linear-gradient(135deg, var(--neon-cyan) 0%, var(--electric-blue) 100%);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, #00CC6A 100%);
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}

.btn-success:hover {
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
    transform: translateY(-1px);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, #E6A700 100%);
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(255, 184, 0, 0.3);
}

.btn-danger {
    background: linear-gradient(135deg, var(--error) 0%, #E6304A 100%);
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}

.btn-default,
.btn-white {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary) !important;
    border-color: var(--glass-border);
}

.btn-default:hover,
.btn-white:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--electric-blue);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-xs {
    padding: 4px 8px;
    font-size: 11px;
}

.btn-round {
    border-radius: 20px;
}

/* === BUTTON GROUPS & TOOLBARS === */
.btn-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
    margin: 0;
}

.btn-group .btn:first-child {
    border-radius: 8px 0 0 8px;
}

.btn-group .btn:last-child {
    border-radius: 0 8px 8px 0;
}

.btn-group .btn:only-child {
    border-radius: 8px;
}

.btn-group .btn + .btn {
    margin-left: -1px;
}

/* Button Toolbar - Clean horizontal layout */
.btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}

.btn-toolbar .btn-group {
    margin: 0;
}

.btn-toolbar > .btn,
.btn-toolbar > .btn-group {
    margin: 0;
}

/* Hide bulk action toolbar on View Issues (optional - can be toggled) */
.widget-toolbox .btn-toolbar {
    flex-wrap: wrap;
}

.widget-toolbox .btn-toolbar select {
    min-width: 180px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border-dim);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
}

/* Clean up action buttons */
.widget-toolbox .form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.widget-toolbox .form-inline .btn {
    margin: 0;
}

/* === FORMS === */
.form-control {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border-dim);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-control:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--electric-blue);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-dim);
}

select.form-control {
    cursor: pointer;
}

label {
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

.form-group {
    margin-bottom: 20px;
}

/* === TABLES === */
.table {
    background: transparent;
    color: var(--text-primary);
    margin-bottom: 0;
}

.table th {
    background: rgba(0, 212, 255, 0.08);
    color: var(--electric-blue);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--glass-border);
}

.table td {
    padding: 12px;
    border-bottom: 1px solid var(--glass-border-dim);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02);
}

.table-hover > tbody > tr:hover {
    background: rgba(0, 212, 255, 0.05);
}

.table a {
    color: var(--electric-blue);
    text-decoration: none;
}

.table a:hover {
    color: var(--neon-cyan);
    text-decoration: underline;
}

/* === STATUS BADGES === */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* MantisBT Status Colors */
.status-new-color,
[class*="status"][class*="10"] {
    background: linear-gradient(135deg, var(--new-issue), #7D3C98) !important;
    color: #fff !important;
}

.status-feedback-color,
[class*="status"][class*="20"] {
    background: linear-gradient(135deg, var(--feedback), #D68910) !important;
    color: #000 !important;
}

.status-acknowledged-color,
[class*="status"][class*="30"] {
    background: linear-gradient(135deg, var(--info), #0099CC) !important;
    color: #000 !important;
}

.status-confirmed-color,
[class*="status"][class*="40"] {
    background: linear-gradient(135deg, var(--confirmed), #17A589) !important;
    color: #000 !important;
}

.status-assigned-color,
[class*="status"][class*="50"] {
    background: linear-gradient(135deg, var(--assigned), #2980B9) !important;
    color: #fff !important;
}

.status-resolved-color,
[class*="status"][class*="80"] {
    background: linear-gradient(135deg, var(--resolved), #27AE60) !important;
    color: #000 !important;
}

.status-closed-color,
[class*="status"][class*="90"] {
    background: linear-gradient(135deg, var(--closed), #7F8C8D) !important;
    color: #fff !important;
}

/* Priority Colors */
.priority-high,
.priority-urgent,
.priority-immediate {
    color: var(--error) !important;
}

.priority-normal {
    color: var(--text-secondary);
}

.priority-low {
    color: var(--text-dim);
}

/* === FOOTER - GLASS MATERIAL === */
.minimal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(10, 22, 40, 0.7);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(0, 212, 255, 0.1);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-text {
    color: var(--text-dim);
    font-size: 13px;
}

.footer-logo {
    height: 20px;
    opacity: 0.7;
}

/* === PAGE SPECIFIC STYLES === */

/* My View Page */
#my_view_page .widget-box {
    margin-bottom: 20px;
}

/* View Issues Page */
#filters .widget-body {
    display: none;
}

#filters.expanded .widget-body {
    display: block;
}

/* Issue List Styling */
.bug-list td {
    font-size: 13px;
}

.bug-list .column-id {
    font-weight: 600;
    color: var(--electric-blue);
}

.bug-list .column-summary {
    max-width: 400px;
}

/* Report Issue Page */
.bug-report-form .form-group {
    margin-bottom: 24px;
}

/* === LINKS === */
a {
    color: var(--electric-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--neon-cyan);
}

/* === PAGINATION === */
.pagination {
    display: flex;
    gap: 4px;
    margin: 20px 0;
}

.pagination > li > a,
.pagination > li > span {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-dim);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 6px;
}

.pagination > li > a:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: var(--electric-blue);
    color: var(--electric-blue);
}

.pagination > .active > a {
    background: var(--electric-blue);
    border-color: var(--electric-blue);
    color: #000;
}

/* === ALERTS === */
.alert {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.alert-success {
    border-color: var(--success);
    background: rgba(0, 255, 136, 0.1);
}

.alert-warning {
    border-color: var(--warning);
    background: rgba(255, 184, 0, 0.1);
}

.alert-danger {
    border-color: var(--error);
    background: rgba(255, 71, 87, 0.1);
}

.alert-info {
    border-color: var(--info);
    background: rgba(0, 212, 255, 0.1);
}

/* === TOOLTIPS === */
.tooltip {
    z-index: 1070;
}

.tooltip-inner {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
}

/* === MODALS === */
.modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
}

.modal-header {
    border-bottom: 1px solid var(--glass-border-dim);
    padding: 20px;
}

.modal-title {
    color: var(--text-primary);
    font-weight: 600;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    border-top: 1px solid var(--glass-border-dim);
    padding: 16px 20px;
}

/* === HIDE UNWANTED ELEMENTS === */
.ace-icon.fa::before {
    font-family: FontAwesome;
}

/* === RESPONSIVE - FULL MOBILE SUPPORT === */

/* Large tablet - compress slightly */
@media (max-width: 1200px) {
    .navbar-nav > li > a {
        padding: 0 10px;
        font-size: 12px;
    }

    .navbar-brand {
        font-size: 13px;
    }
}

/* Tablet breakpoint - compress more */
@media (max-width: 992px) {
    .navbar-header {
        margin-left: 120px !important;
    }

    .navbar-nav > li > a {
        padding: 0 8px;
        font-size: 11px;
    }

    /* Hide nav text, show only icons on tablet */
    .navbar-nav > li > a span,
    .navbar-nav > li > a .caret {
        display: none;
    }

    .navbar-nav > li > a i {
        margin-right: 0;
        font-size: 16px;
    }

    .navbar-brand {
        font-size: 12px;
    }

    /* Compress dropdowns */
    .navbar-nav.navbar-right > li > a {
        padding: 0 6px;
    }
}

/* Mobile breakpoint - Hamburger menu */
@media (max-width: 768px) {
    /* Main navbar container - fixed height */
    .navbar,
    .navbar-default,
    .navbar-fixed-top {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Container fluid - flex layout */
    .navbar .container-fluid {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 50px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        position: relative !important;
    }

    /* Navbar header - contains logo and brand */
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* WagerOS Logo - FIXED position (logo is outside navbar in HTML) */
    .wageros-logo-container {
        position: fixed !important;
        left: 8px !important;
        top: 0 !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        z-index: 1100 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .wageros-logo-container a {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .wageros-logo-container img {
        height: 26px !important;
        width: auto !important;
        max-width: 70px !important;
        object-fit: contain !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Issue Tracker text - centered in viewport */
    .navbar-brand {
        position: fixed !important;
        left: 50% !important;
        top: 0 !important;
        height: 50px !important;
        line-height: 50px !important;
        transform: translateX(-50%) !important;
        font-size: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        z-index: 1050 !important;
        color: #fff !important;
    }

    /* Hamburger button - FIXED, square, within navbar bounds */
    .navbar-toggle,
    .navbar .navbar-toggle,
    button.navbar-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 7px !important;
        right: 8px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(0, 212, 255, 0.15) !important;
        border: 1px solid rgba(0, 212, 255, 0.4) !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        z-index: 1100 !important;
    }

    .navbar-toggle .icon-bar {
        display: block !important;
        visibility: visible !important;
        width: 18px !important;
        height: 2px !important;
        background: #00D4FF !important;
        border-radius: 1px !important;
        margin: 0 !important;
        transition: all 0.2s ease !important;
    }

    .navbar-toggle:hover {
        background: rgba(0, 212, 255, 0.25) !important;
        border-color: rgba(0, 212, 255, 0.6) !important;
    }

    /* Collapse menu - COMPLETELY HIDDEN by default on mobile */
    .navbar-collapse,
    .navbar-collapse.collapse,
    .navbar-collapse.collapsing,
    #navbar-main {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        max-height: calc(100vh - 60px) !important;
        background: rgba(8, 18, 35, 0.98) !important;
        backdrop-filter: blur(30px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
        border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
        padding: 20px !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        z-index: 1050 !important;
        box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6) !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    /* SHOW menu when .in, .show, or .mobile-open class is added */
    .navbar-collapse.in,
    .navbar-collapse.show,
    .navbar-collapse.mobile-open,
    .navbar-collapse.collapse.in,
    #navbar-main.in,
    #navbar-main.show,
    #navbar-main.mobile-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
    }

    /* Vertical nav layout - MOBILE */
    .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .navbar-nav > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        flex-shrink: unset !important;
        border-bottom: 1px solid rgba(0, 212, 255, 0.08);
    }

    .navbar-nav > li:last-child {
        border-bottom: none;
    }

    .navbar-nav > li > a {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        padding: 16px 24px !important;
        font-size: 16px !important;
        justify-content: flex-start !important;
        color: rgba(255, 255, 255, 0.9) !important;
        white-space: normal !important;
        border-radius: 8px;
        margin: 4px 0;
        transition: all 0.2s ease;
    }

    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        background: rgba(0, 212, 255, 0.1) !important;
        color: var(--electric-blue) !important;
    }

    .navbar-nav > li.active > a {
        background: rgba(0, 212, 255, 0.15) !important;
        color: var(--electric-blue) !important;
    }

    /* Show text labels in mobile menu */
    .navbar-nav > li > a span,
    .navbar-nav > li > a .caret {
        display: inline !important;
    }

    .navbar-nav > li > a i {
        margin-right: 14px !important;
        width: 22px !important;
        font-size: 18px !important;
        display: inline-block !important;
        color: var(--electric-blue);
    }

    /* Right nav section */
    .navbar-nav.navbar-right {
        margin-top: 20px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(0, 212, 255, 0.15) !important;
    }

    /* Dropdowns in mobile */
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        background: rgba(0, 0, 0, 0.2);
        border: none;
        box-shadow: none;
        margin: 0;
        padding: 0 0 0 20px;
    }

    .navbar-nav .dropdown-menu > li > a {
        padding: 12px 20px;
        color: var(--text-secondary);
    }

    .navbar-nav .open .dropdown-menu {
        display: block;
    }

    /* Main container adjustments */
    .main-container {
        padding: 70px 10px 80px 10px;
    }

    /* Filter section mobile */
    #filter .widget-header {
        flex-wrap: wrap;
        padding: 10px;
    }

    #filter-bar-queries {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }

    #filter-bar-search-txt {
        width: 100%;
        min-width: unset;
    }

    /* Table responsive */
    .table-responsive {
        border: none;
    }

    .buglist td,
    .buglist th {
        padding: 8px 6px;
        font-size: 12px;
    }

    /* Hide less important columns on mobile */
    .column-category,
    .column-assigned-to {
        display: none;
    }

    /* Widget boxes mobile */
    .widget-box {
        border-radius: 12px;
        margin-bottom: 15px;
    }

    .widget-header {
        padding: 12px 15px;
    }

    .widget-body {
        padding: 15px;
    }

    /* Footer mobile */
    .minimal-footer {
        padding: 15px;
    }

    .footer-logo {
        height: 18px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .wageros-logo-container {
        left: 5px !important;
    }

    .wageros-logo-container img {
        height: 22px !important;
        max-width: 60px !important;
    }

    .navbar-brand {
        font-size: 12px !important;
    }

    .navbar-toggle {
        top: 8px !important;
        right: 5px !important;
        width: 34px !important;
        height: 34px !important;
    }

    /* Simplify table further */
    .column-last-modified,
    .column-status {
        display: none;
    }

    .column-summary {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Buttons stack */
    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .btn {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* === UTILITIES === */
.text-center { text-align: center; }
.text-right { text-align: right; }
.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }
.hidden { display: none !important; }
.glass-hidden,
span.glass-hidden,
small.glass-hidden,
div.glass-hidden,
p.glass-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* === Z-INDEX STACK === */
.bg-particles { z-index: 1; }
.main-container { z-index: 10; }
.minimal-footer { z-index: 1000; }
.navbar { z-index: 1040; }
.wageros-logo-container { z-index: 1050; }
.dropdown-menu { z-index: 1060; }
.tooltip { z-index: 1070; }
.modal { z-index: 1080; }

/* === LOGIN PAGE - GORGEOUS DESIGN === */
body.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
}

body.login-page .login-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* Remove nested containers */
body.login-page .col-md-offset-3,
body.login-page .col-md-6,
body.login-page .col-sm-10,
body.login-page .col-sm-offset-1 {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0;
    float: none;
}

body.login-page .position-relative {
    position: relative;
}

/* Login Card - Stunning glass effect */
body.login-page .widget-box,
body.login-page #login-box {
    background: linear-gradient(145deg, rgba(13, 27, 42, 0.95) 0%, rgba(10, 22, 40, 0.98) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 212, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

body.login-page .widget-body {
    padding: 0;
}

body.login-page .widget-main {
    padding: 40px;
}

/* Login Header */
body.login-page .header {
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

body.login-page .header i {
    color: var(--electric-blue);
    font-size: 32px;
}

/* Form fields */
body.login-page .input-icon {
    position: relative;
    display: block;
}

body.login-page .input-icon input {
    width: 100%;
    padding: 16px 50px 16px 20px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--glass-border-dim);
    border-radius: 12px;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

body.login-page .input-icon input:focus {
    border-color: var(--electric-blue);
    box-shadow:
        0 0 0 4px rgba(0, 212, 255, 0.15),
        0 0 30px rgba(0, 212, 255, 0.2);
    outline: none;
}

body.login-page .input-icon input::placeholder {
    color: var(--text-dim);
}

body.login-page .input-icon-right > i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 18px;
    pointer-events: none;
}

body.login-page .input-icon input:focus + i {
    color: var(--electric-blue);
}

/* Login Button - Glowing */
body.login-page input[type="submit"],
body.login-page .btn-success {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--electric-blue) 0%, #0099CC 100%);
    border: none;
    border-radius: 12px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 8px 30px rgba(0, 212, 255, 0.4),
        0 0 40px rgba(0, 212, 255, 0.2);
    margin-top: 20px;
    float: none !important;
}

body.login-page input[type="submit"]:hover,
body.login-page .btn-success:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 212, 255, 0.5),
        0 0 60px rgba(0, 212, 255, 0.3);
}

/* Alert styling */
body.login-page .alert {
    margin-top: 20px;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 13px;
}

body.login-page .alert-warning {
    background: rgba(255, 184, 0, 0.15);
    border: 1px solid rgba(255, 184, 0, 0.3);
    color: var(--warning);
}

/* Toolbar/Links */
body.login-page .toolbar {
    padding: 20px 40px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--glass-border-dim);
}

body.login-page .toolbar a {
    color: var(--electric-blue);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}

body.login-page .toolbar a:hover {
    color: var(--neon-cyan);
}

/* Space helpers */
body.login-page .space-10 { height: 10px; }
body.login-page .space-12 { height: 12px; }
body.login-page .space-24 { height: 24px; }

/* === REPORT ISSUE PAGE - MODERN FORM DESIGN === */
#report_bug_form,
.bug-report-form {
    max-width: 800px;
    margin: 0 auto;
}

#report_bug_form .widget-box {
    background: var(--glass-bg);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

#report_bug_form .widget-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.05) 100%);
    padding: 24px 30px;
    border-bottom: 1px solid var(--glass-border-dim);
}

#report_bug_form .widget-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

#report_bug_form .widget-body {
    padding: 30px;
}

/* Form table styling */
#report_bug_form table {
    width: 100%;
}

#report_bug_form td.category {
    width: 150px;
    padding: 16px 20px 16px 0;
    font-weight: 600;
    color: var(--electric-blue);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: top;
}

#report_bug_form td:not(.category) {
    padding: 12px 0;
}

/* Form inputs */
#report_bug_form input[type="text"],
#report_bug_form select,
#report_bug_form textarea {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--glass-border-dim);
    border-radius: 10px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

#report_bug_form input[type="text"]:focus,
#report_bug_form select:focus,
#report_bug_form textarea:focus {
    border-color: var(--electric-blue);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
    outline: none;
}

#report_bug_form textarea {
    min-height: 200px;
    resize: vertical;
    line-height: 1.6;
}

/* Summary field - make it prominent */
#report_bug_form input[name="summary"] {
    font-size: 18px;
    font-weight: 500;
    padding: 16px 20px;
}

/* Select dropdown */
#report_bug_form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300D4FF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 45px;
}

/* File upload area */
#report_bug_form .dropzone,
#report_bug_form .file-upload {
    background: rgba(0, 0, 0, 0.2);
    border: 2px dashed var(--glass-border);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
}

#report_bug_form .dropzone:hover {
    border-color: var(--electric-blue);
    background: rgba(0, 212, 255, 0.05);
}

/* Submit button */
#report_bug_form input[type="submit"],
#report_bug_form .btn-primary {
    padding: 16px 40px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--success) 0%, #00CC6A 100%);
    border: none;
    border-radius: 12px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3);
}

#report_bug_form input[type="submit"]:hover,
#report_bug_form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 255, 136, 0.4);
}

/* Form section headers */
#report_bug_form tr.spacer {
    height: 20px;
}

#report_bug_form tr.spacer td {
    border: none;
    padding: 0;
}

/* Required field indicator */
#report_bug_form .required {
    color: var(--error);
}

/* Help text */
#report_bug_form .help-block {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 6px;
}

/* ============================================
   MANTISBT-SPECIFIC ENHANCEMENTS
   ============================================ */

/* === FILTER BOX === */
.filter-box {
    margin-bottom: 24px;
}

.filter-box .widget-box {
    border-radius: 12px;
}

.filter-box .widget-header {
    cursor: pointer;
}

.filter-box .widget-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-box .widget-menu {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Filter Search Bar */
#filter-bar-search-txt,
#filter-search-txt {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border-dim);
    border-radius: 20px;
    color: var(--text-primary);
    padding: 6px 14px;
    font-size: 13px;
    outline: none;
}

#filter-bar-search-txt:focus,
#filter-search-txt:focus {
    border-color: var(--electric-blue);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

/* Filter Table */
.filters {
    background: transparent;
}

.filters .category,
.filters .small-caption.category {
    background: rgba(0, 212, 255, 0.06);
    color: var(--electric-blue);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filters .small-caption {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.15);
}

.filters a.dynamic-filter-expander {
    color: var(--electric-blue);
    text-decoration: none;
}

.filters a.dynamic-filter-expander:hover {
    color: var(--neon-cyan);
}

/* === BUG LIST TABLE - GORGEOUS PREVIEW STYLE === */
#buglist,
.buglist,
table.table[id*="buglist"] {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin-top: -6px;
}

#buglist th,
.buglist th,
.buglist-headers th {
    background: rgba(0, 212, 255, 0.08);
    color: var(--electric-blue);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 16px;
    border: none;
    white-space: nowrap;
    text-align: left;
}

#buglist th:first-child {
    border-radius: 8px 0 0 8px;
}

#buglist th:last-child {
    border-radius: 0 8px 8px 0;
}

#buglist th a {
    color: var(--electric-blue);
    text-decoration: none;
}

#buglist th a:hover {
    color: var(--neon-cyan);
}

#buglist td,
.buglist td {
    padding: 16px;
    border: none;
    font-size: 13px;
    vertical-align: middle;
    background: rgba(13, 27, 42, 0.5);
}

#buglist tbody tr td:first-child {
    border-radius: 10px 0 0 10px;
}

#buglist tbody tr td:last-child {
    border-radius: 0 10px 10px 0;
}

#buglist tbody tr,
.buglist tbody tr {
    transition: all 0.2s ease;
    cursor: pointer;
}

#buglist tbody tr:hover td,
.buglist tr:hover td {
    background: rgba(0, 212, 255, 0.12);
}

/* Bug ID - Prominent badge style */
#buglist td a[href*="view.php"],
.buglist .column-id a,
.buglist a.issue-link {
    color: var(--electric-blue);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.08) 100%);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 8px;
    display: inline-block;
    transition: all 0.2s ease;
}

#buglist td a[href*="view.php"]:hover,
.buglist .column-id a:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.25) 0%, rgba(0, 212, 255, 0.15) 100%);
    border-color: var(--electric-blue);
    color: #fff;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
}

/* Issue Summary - Clean and prominent */
#buglist .column-summary,
.buglist .column-summary {
    max-width: 400px;
}

#buglist .column-summary a,
.buglist .column-summary a,
.buglist td[width="50%"] a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}

#buglist .column-summary a:hover,
.buglist .column-summary:hover a,
.buglist td[width="50%"] a:hover {
    color: var(--neon-cyan);
}

/* Category styling */
#buglist .column-category,
.buglist .column-category {
    color: var(--text-secondary);
    font-size: 12px;
}

#buglist .column-category .project,
.buglist .column-category .project {
    color: var(--electric-blue);
    font-size: 11px;
    opacity: 0.8;
}

/* === STATUS BADGE STYLING - PREVIEW STYLE === */
#buglist .column-status,
.buglist .column-status,
td.column-status {
    white-space: nowrap;
}

/* Hide the icon square, show only text as badge */
#buglist .column-status .fa-status-box,
#buglist .column-status i.fa-square,
.column-status i.fa-square,
.column-status .fa-status-box {
    display: none !important;
}

/* Reset the wrapper div */
#buglist .column-status div,
.column-status .align-left {
    display: inline-block;
}

/* Style the status text as a badge */
#buglist .column-status span[title],
.column-status span[title] {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.3) 0%, rgba(0, 150, 255, 0.15) 100%);
    color: #4da6ff;
    border: 1px solid rgba(0, 150, 255, 0.4);
}

/* Status 10 - New (Blue) - Default above, specific via sibling selector */
.column-status i.status-10-fg + span[title],
#buglist .column-status i.status-10-fg + span {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.3) 0%, rgba(0, 150, 255, 0.15) 100%) !important;
    color: #4da6ff !important;
    border: 1px solid rgba(0, 150, 255, 0.4) !important;
}

/* Status 20 - Feedback (Orange/Amber) */
.column-status i.status-20-fg + span[title],
#buglist .column-status i.status-20-fg + span {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.3) 0%, rgba(255, 152, 0, 0.15) 100%) !important;
    color: #ffb347 !important;
    border: 1px solid rgba(255, 152, 0, 0.4) !important;
}

/* Status 30 - Acknowledged (Cyan) */
.column-status i.status-30-fg + span[title],
#buglist .column-status i.status-30-fg + span {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.3) 0%, rgba(0, 188, 212, 0.15) 100%) !important;
    color: #4dd0e1 !important;
    border: 1px solid rgba(0, 188, 212, 0.4) !important;
}

/* Status 40 - Confirmed (Purple) */
.column-status i.status-40-fg + span[title],
#buglist .column-status i.status-40-fg + span {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.3) 0%, rgba(156, 39, 176, 0.15) 100%) !important;
    color: #ce93d8 !important;
    border: 1px solid rgba(156, 39, 176, 0.4) !important;
}

/* Status 50 - Assigned (Yellow) */
.column-status i.status-50-fg + span[title],
#buglist .column-status i.status-50-fg + span {
    background: linear-gradient(135deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 235, 59, 0.15) 100%) !important;
    color: #fff176 !important;
    border: 1px solid rgba(255, 235, 59, 0.4) !important;
}

/* Status 80 - Resolved (Green) */
.column-status i.status-80-fg + span[title],
#buglist .column-status i.status-80-fg + span {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(76, 175, 80, 0.15) 100%) !important;
    color: #81c784 !important;
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
}

/* Status 90 - Closed (Gray) */
.column-status i.status-90-fg + span[title],
#buglist .column-status i.status-90-fg + span {
    background: linear-gradient(135deg, rgba(158, 158, 158, 0.3) 0%, rgba(158, 158, 158, 0.15) 100%) !important;
    color: #bdbdbd !important;
    border: 1px solid rgba(158, 158, 158, 0.4) !important;
}

/* Date column */
#buglist .column-last-modified,
.buglist .column-last-modified {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

/* Assigned To column */
#buglist .column-assigned-to,
.buglist .column-assigned-to {
    color: var(--text-secondary);
}

/* Checkbox styling */
#buglist input[type="checkbox"],
.buglist input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--electric-blue);
    border-radius: 4px;
}

#buglist .column-selection {
    width: 40px;
    text-align: center;
}

/* Selection checkbox container */
#buglist .checkbox,
.buglist .checkbox {
    margin: 0;
    padding: 0;
}

#buglist .checkbox label {
    padding-left: 0;
}

/* Action buttons row */
#buglist-action,
.buglist-footer {
    background: rgba(0, 212, 255, 0.05);
    padding: 16px;
    border-radius: 10px;
    margin-top: 10px;
}

/* === MY VIEW WIDGETS === */
.profile-activity {
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border-dim);
    display: flex;
    gap: 12px;
}

.profile-activity:last-child {
    border-bottom: none;
}

.profile-activity .thumbicon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.15);
    color: var(--electric-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-activity .action {
    flex: 1;
    color: var(--text-secondary);
    font-size: 13px;
}

.profile-activity .action .username a {
    color: var(--electric-blue);
    font-weight: 500;
}

.profile-activity .action .issue_id a {
    color: var(--text-primary);
    font-weight: 500;
}

.profile-activity .action .issue_id a.resolved {
    color: var(--resolved);
}

.profile-activity .time {
    color: var(--text-dim);
    font-size: 12px;
    white-space: nowrap;
}

/* Profile Feed Container */
.profile-feed {
    max-height: 500px;
    overflow-y: auto;
}

/* === ACE ICONS OVERRIDE === */
.ace-icon {
    font-family: FontAwesome;
}

.ace-icon.fa::before {
    font-family: FontAwesome;
}

/* === WIDGET COLOR VARIATIONS === */
.widget-color-blue,
.widget-color-blue2 {
    border-color: var(--glass-border);
}

.widget-color-blue > .widget-header,
.widget-color-blue2 > .widget-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 212, 255, 0.05) 100%);
    border-bottom: 1px solid var(--glass-border-dim);
}

/* === INPUT ELEMENTS (non form-control) === */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border-dim);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 8px 12px;
    font-size: 14px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--electric-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

/* Input Size Variations */
input.input-sm,
input.input-xs {
    padding: 5px 10px;
    font-size: 12px;
}

/* Select dropdown - prevent vertical text cropping */
select,
select.form-control,
select.input-sm {
    min-height: 32px !important;
    height: auto !important;
    padding: 6px 28px 6px 10px !important;
    line-height: 1.4 !important;
    font-size: 13px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 6px !important;
    color: var(--text-primary) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300D4FF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}

select:focus,
select.input-sm:focus {
    border-color: var(--electric-blue) !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.15) !important;
    outline: none !important;
}

select option {
    background: #1a2332 !important;
    color: var(--text-primary) !important;
    padding: 8px !important;
}

/* Inline select within forms */
.form-inline select,
.form-inline select.input-sm {
    display: inline-block !important;
    width: auto !important;
    vertical-align: middle !important;
}

/* === CHECKBOX & RADIO === */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--electric-blue);
}

/* === CATEGORY LABELS === */
td.category,
th.category {
    background: rgba(0, 212, 255, 0.06);
    color: var(--electric-blue);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

/* === SPACER ROWS === */
tr.spacer {
    height: 12px;
    background: transparent;
}

tr.spacer td {
    padding: 0;
    border: none;
}

/* === ISSUE VIEW PAGE === */
.bug-view-page .category {
    width: 15%;
    min-width: 120px;
}

/* Bug Details Table */
table.bug-view {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
}

table.bug-view td.category {
    background: rgba(0, 212, 255, 0.06);
    border-right: 1px solid var(--glass-border-dim);
}

/* === REPORT ISSUE FORM === */
#report_bug_form .form-group,
#bugnote_add_form .form-group {
    margin-bottom: 20px;
}

#report_bug_form textarea,
#bugnote_add_form textarea {
    min-height: 150px;
    resize: vertical;
}

/* === MANAGEMENT PAGES === */
.manage-page h4,
.manage-page h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 20px;
}

/* User Management Table */
.manage-user-table td {
    vertical-align: middle;
}

/* === PROJECT SELECTOR (in tables) === */
.project-selector {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
}

/* === BREADCRUMBS (if used) === */
.breadcrumb {
    background: transparent;
    padding: 10px 0;
    margin-bottom: 20px;
}

.breadcrumb > li + li::before {
    color: var(--text-dim);
    content: "›";
}

.breadcrumb > li > a {
    color: var(--electric-blue);
}

/* === LABEL STYLES === */
.label {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

.label-default,
.label-grey {
    background: rgba(123, 140, 163, 0.3);
    color: var(--text-secondary);
}

.label-primary {
    background: rgba(0, 212, 255, 0.2);
    color: var(--electric-blue);
}

.label-success {
    background: rgba(0, 255, 136, 0.2);
    color: var(--success);
}

.label-warning {
    background: rgba(255, 184, 0, 0.2);
    color: var(--warning);
}

.label-danger {
    background: rgba(255, 71, 87, 0.2);
    color: var(--error);
}

/* === TOOLBAR BUTTONS === */
.widget-toolbox {
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--glass-border-dim);
}

.widget-toolbox .btn-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* === DROPZONE FILE UPLOAD === */
.dropzone {
    background: rgba(0, 0, 0, 0.2);
    border: 2px dashed var(--glass-border);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.dropzone:hover {
    border-color: var(--electric-blue);
    background: rgba(0, 212, 255, 0.05);
}

.dropzone .dz-message {
    color: var(--text-secondary);
}

/* === TABLE RESPONSIVE === */
.table-responsive {
    border: none;
    border-radius: 0;
}

/* === COLUMN WIDTH OVERRIDES === */
.column-selection {
    width: 30px;
    text-align: center;
}

.column-edit-type {
    width: 60px;
}

.column-id {
    width: 80px;
}

.column-category {
    width: 120px;
}

/* === SCROLLBAR STYLING === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--electric-blue);
}

/* === SINGLE BUTTON FORMS - Remove ugly borders === */
.single-button-form,
.form-inline.inline,
form.inline {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
}

.single-button-form fieldset,
.form-inline.inline fieldset {
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
}

/* Bugnote action buttons */
.bugnote .single-button-form,
.bugnote-buttons .single-button-form {
    display: inline-block;
    margin-right: 4px;
}

.bugnote .single-button-form .btn,
td .single-button-form .btn {
    padding: 4px 10px;
    font-size: 11px;
}

/* === FILE UPLOAD AREA === */
.file-upload-section,
#dropzonediv,
.dropzone {
    background: rgba(0, 0, 0, 0.2);
    border: 2px dashed var(--glass-border);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.file-upload-section:hover,
#dropzonediv:hover,
.dropzone:hover {
    border-color: var(--electric-blue);
    background: rgba(0, 212, 255, 0.05);
}

/* Upload icon styling */
.dropzone .upload-icon,
.dropzone i.fa-cloud-upload {
    font-size: 48px;
    color: var(--electric-blue);
    margin-bottom: 15px;
    opacity: 0.8;
}

.dropzone .bigger-150 {
    font-size: 16px;
    color: var(--text-secondary);
}

/* === MAX FILE SIZE / DISK SPACE INFO === */
/* This displays the "Max. file size: XX KB" info */
th.category span.small,
td.category span.small,
.category span.small {
    display: block;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 6px;
    color: var(--electric-blue);
    font-size: 12px;
    font-weight: 500;
}

/* General small text in forms */
span.small,
.small {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Max file size info - prominent display */
label + span.small,
.dropzone + span.small,
form span.small[title],
#report_bug_form span.small {
    display: block !important;
    margin: 10px 0 !important;
    padding: 10px 15px !important;
    background: rgba(0, 212, 255, 0.15) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 8px !important;
    color: var(--electric-blue) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* File size info in tables */
td small,
.file-info small {
    color: var(--text-secondary);
    font-size: 12px;
}

/* === STORAGE INFO - MINIMAL === */
.storage-mini {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.8;
}

.storage-mini.storage-ok {
    color: var(--success);
}

.storage-mini.storage-warning {
    color: var(--warning);
}

.storage-mini.storage-critical {
    color: var(--error);
}

/* === GLASS DISK INDICATOR - DISCRETE === */
.glass-disk-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 12px;
    font-size: 11px;
    color: var(--text-dim);
}

.glass-disk-indicator .disk-max {
    color: var(--electric-blue);
    font-weight: 500;
}

.glass-disk-indicator .disk-used {
    color: var(--text-secondary);
}

.glass-disk-indicator .disk-percent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.glass-disk-indicator .disk-bar {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.glass-disk-indicator .disk-bar-fill {
    height: 100%;
    background: var(--electric-blue);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.glass-disk-indicator .disk-bar-fill.warning {
    background: var(--warning);
}

.glass-disk-indicator .disk-bar-fill.critical {
    background: var(--error);
}

/* Dropzone message area */
.dropzone .dz-message {
    color: var(--text-secondary);
}

.dropzone-previews {
    margin-top: 15px;
}

/* === BUGNOTE STYLING === */
.bugnote {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 12px;
}

.bugnote td {
    padding: 16px;
}

.bugnote .category {
    background: transparent !important;
}

.bugnote p {
    margin-bottom: 8px;
}

.bugnote .no-margin {
    margin: 4px 0;
}

/* Bugnote visible-on-hover controls */
.visible-on-hover-toggle .visible-on-hover {
    opacity: 0.3;
    transition: opacity 0.2s;
}

.visible-on-hover-toggle:hover .visible-on-hover {
    opacity: 1;
}

/* === ISSUE VIEW PAGE IMPROVEMENTS === */
.bug-view-page .widget-box {
    margin-bottom: 20px;
}

.bug-view-page td.category {
    width: 140px;
    background: rgba(0, 212, 255, 0.06) !important;
}

/* Bug relationships */
.bug-relationships {
    padding: 10px;
}

/* === ACTIVITY STREAM === */
.activity-stream,
.profile-activity {
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border-dim);
}

.activity-stream:last-child,
.profile-activity:last-child {
    border-bottom: none;
}

/* === FIX FIELDSET BORDERS === */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* ========================================
   FILTER SECTION - 2026 MINIMAL DESIGN
   Clean, simple, focused UX
   ======================================== */

/* Main filter container */
.filter-box {
    margin-bottom: 20px;
}

/* The filter widget box - minimal glass */
#filter.widget-box,
.filter-box .widget-box {
    background: rgba(13, 27, 42, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    border: 1px solid rgba(0, 212, 255, 0.12);
    overflow: hidden;
}

/* === FILTER HEADER - MINIMAL CLEAN === */
#filter .widget-header,
#filter.widget-box > .widget-header {
    background: transparent;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}

/* Filter title - small and subtle */
#filter .widget-header h4.widget-title,
#filter .widget-title {
    display: none !important; /* Hide title - not needed */
}

/* Hide unnecessary elements */
#filter .widget-toolbar > .widget-menu:has([data-action="settings"]),
#filter [data-action="settings"],
#filter .dropdown-menu.dropdown-yellow {
    display: none !important;
}

/* Toggle button - Simple pill */
#filter-toggle,
#filter a[data-action="collapse"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 18px;
    color: var(--electric-blue) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    flex-shrink: 0;
}

#filter-toggle i,
#filter a[data-action="collapse"] i {
    display: none !important;
}

#filter-toggle::after,
#filter a[data-action="collapse"]::after {
    pointer-events: none;
}

#filter.collapsed #filter-toggle::after,
#filter.collapsed a[data-action="collapse"]::after {
    content: "Filters ▼";
}

#filter:not(.collapsed) #filter-toggle::after,
#filter:not(.collapsed) a[data-action="collapse"]::after {
    content: "Filters ▲";
}

#filter-toggle:hover,
#filter a[data-action="collapse"]:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: var(--electric-blue);
}

/* === SEARCH BAR - INLINE MINIMAL === */
#filter-bar-queries {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* Reset button - small pill */
#filter-bar-queries .widget-menu a[href*="type=0"],
#filter-bar-queries a[title="Reset Filter"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    background: rgba(255, 100, 100, 0.1);
    border: 1px solid rgba(255, 100, 100, 0.25);
    border-radius: 18px;
    color: #ff6b6b !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
}

#filter-bar-queries .widget-menu a[href*="type=0"] i,
#filter-bar-queries a[title="Reset Filter"] i {
    display: none !important;
}

#filter-bar-queries .widget-menu a[href*="type=0"]::after,
#filter-bar-queries a[title="Reset Filter"]::after {
    content: "Reset";
}

#filter-bar-queries .widget-menu a[href*="type=0"]:hover,
#filter-bar-queries a[title="Reset Filter"]:hover {
    background: rgba(255, 100, 100, 0.2);
}

/* Search form */
#filter-bar-queries .widget-menu:has(form) {
    flex: 1;
    display: block !important;
}

#filter-bar-queries form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Search input - clean pill */
#filter-bar-search-txt {
    flex: 1;
    height: 36px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 18px;
    color: #fff;
    padding: 0 16px;
    font-size: 14px;
    min-width: 150px;
}

#filter-bar-search-txt::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#filter-bar-search-txt:focus {
    border-color: var(--electric-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}

/* Search button - minimal */
#filter-bar-search-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    background: var(--electric-blue);
    border: none;
    border-radius: 18px;
    color: #000 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 600;
}

#filter-bar-search-btn i {
    display: none !important;
}

#filter-bar-search-btn::after {
    content: "Go";
}

#filter-bar-search-btn:hover {
    background: var(--neon-cyan);
}

/* Widget toolbar layout */
#filter .widget-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* === FILTER BODY - MINIMAL === */
#filter .widget-body {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#filter:not(.collapsed) .widget-body {
    max-height: 2000px;
    padding: 16px;
}

/* Hide redundant toolbars */
#filter .widget-body > .widget-toolbox:first-child {
    display: none;
}

#filter .widget-main {
    padding: 0;
}

#filter .table-responsive {
    border: none;
    overflow: visible;
}

/* === FILTER TABLE - SIMPLE COMPACT GRID === */
#filter table.filters,
table.filters {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
}

/* All cells - minimal */
#filter table.filters td,
table.filters td,
table.filters td.small-caption {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.08);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-primary);
    vertical-align: middle;
}

/* Category cells - labels */
#filter table.filters td.category,
table.filters td.category,
table.filters td.small-caption.category {
    background: rgba(0, 212, 255, 0.05);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--electric-blue);
    padding: 8px 10px;
    width: 100px;
}

/* Filter links */
#filter table.filters td.category a,
table.filters td.category a,
a.dynamic-filter-expander {
    color: var(--electric-blue);
    text-decoration: none;
}

#filter table.filters td.category a:hover,
table.filters td.category a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Hover on rows */
#filter table.filters tr:hover td {
    background: rgba(0, 212, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.2);
}

/* Hide spacer rows */
table.filters tr.spacer {
    display: none;
}

/* ================================================
   SIMPLIFIED FILTERS - Clean minimal design
   JS handles showing only: Hide Status, Status, Resolution
   ================================================ */

/* Filter body - hidden when collapsed */
#filter.collapsed .widget-body {
    display: none !important;
}

/* Filter body - visible when expanded */
#filter:not(.collapsed) .widget-body {
    display: block !important;
    padding: 16px !important;
}

/* Clean filter table */
#filter table.filters {
    border-collapse: separate !important;
    border-spacing: 8px !important;
}

/* Style visible cells nicely */
#filter table.filters td {
    background: rgba(0, 212, 255, 0.04) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

#filter table.filters td.category a,
#filter table.filters td.small-caption.category a {
    color: var(--electric-blue) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
}

/* All toolboxes inside filter body hidden by default (JS will show Apply button) */
#filter .widget-body .widget-toolbox {
    display: none !important;
}

/* Show toolbox with Apply button */
#filter .widget-body .widget-toolbox:last-child {
    display: block !important;
    padding: 12px 0 0 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ================================================
   SIMPLE FILTER TOGGLE BUTTON
   Ultra clean Hide Resolved / Show All toggle
   ================================================ */

/* Hide the entire original filter widget */
#filter {
    display: none !important;
}

/* Hide the Print/Export toolbar - not needed */
.widget-toolbox.padding-8,
.widget-toolbox .btn-toolbar:has(a[href*="print_all"]),
.widget-toolbox .btn-toolbar:has(a[href*="csv_export"]),
.widget-toolbox:has(a[href*="print_all"]) {
    display: none !important;
}

/* Toggle container - both class and ID selectors */
#glass-filter-toggle,
.glass-filter-toggle-container {
    display: flex !important;
    visibility: visible !important;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.1);
}

/* Filter count display */
#glass-filter-toggle .filter-count,
.glass-filter-toggle-container .filter-count {
    color: var(--text-dim);
    font-size: 12px;
    opacity: 0.7;
}

/* The toggle button itself */
.glass-filter-btn {
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.2s ease;
    outline: none;
    font-family: inherit;
    position: relative;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.glass-filter-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.4);
    transform: translateY(-1px);
}

.glass-filter-btn:active,
.glass-filter-btn.toggled {
    transform: scale(0.97);
}

/* Toggle indicator dot */
.glass-filter-btn .toggle-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--electric-blue);
    transition: all 0.2s ease;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

/* When hiding resolved - blue/active */
.glass-filter-btn[data-hiding="true"] .toggle-indicator {
    background: var(--electric-blue);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}

/* When showing all - dimmer */
.glass-filter-btn[data-hiding="false"] .toggle-indicator {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.glass-filter-btn[data-hiding="false"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.glass-filter-btn[data-hiding="false"]:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Toggle text */
.glass-filter-btn .toggle-text {
    color: inherit;
    letter-spacing: 0.3px;
}

/* Loading state */
.glass-filter-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.glass-filter-btn.loading .toggle-indicator {
    animation: pulse 0.8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .glass-filter-toggle-container {
        margin: 12px 0;
        padding: 0;
    }

    .glass-filter-btn {
        padding: 8px 16px;
        font-size: 12px;
        gap: 8px;
    }

    .glass-filter-btn .toggle-indicator {
        width: 8px;
        height: 8px;
    }
}

/* ================================================
   ADVANCED ACTIONS TOGGLE - Issue Detail Page
   Collapses tfoot action buttons behind a button
   ================================================ */

.glass-advanced-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 8px 0;
}

.glass-advanced-btn:hover {
    background: rgba(100, 116, 139, 0.25);
    border-color: rgba(100, 116, 139, 0.5);
    color: var(--text-primary);
}

.glass-advanced-btn.active {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--electric-blue);
}

.glass-advanced-btn i {
    font-size: 14px;
}

/* Style the tfoot actions when visible */
tfoot .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}

tfoot .btn-group .pull-left {
    float: none !important;
    padding: 0 !important;
}

tfoot .btn-group .btn {
    margin: 0 !important;
}

/* Mobile styling for advanced actions */
@media (max-width: 768px) {
    .glass-advanced-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 14px;
        border-radius: 12px;
    }

    tfoot .btn-group {
        flex-direction: column;
        gap: 10px;
    }

    tfoot .btn-group .pull-left {
        width: 100%;
    }

    tfoot .btn-group .pull-left form {
        width: 100%;
    }

    tfoot .btn-group .btn {
        width: 100%;
        min-height: 44px;
    }

    tfoot .btn-group select {
        width: 100%;
        margin-top: 8px;
    }
}

/* ================================================
   QUICK RESOLVE BUTTON - Individual Issue Page
   Prominent action button at top of issue
   ================================================ */

.glass-quick-resolve-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 8px;
}

/* Main Resolve Button */
.glass-resolve-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.25) 0%, rgba(40, 167, 69, 0.15) 100%);
    border: 1px solid rgba(40, 167, 69, 0.5);
    border-radius: 50px;
    color: #4ade80;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
}

.glass-resolve-btn:hover {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.4) 0%, rgba(40, 167, 69, 0.25) 100%);
    border-color: rgba(40, 167, 69, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
    color: #6ee7a0;
}

.glass-resolve-btn:active {
    transform: translateY(0) scale(0.98);
}

.glass-resolve-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.glass-resolve-btn i {
    font-size: 16px;
}

/* Resolved Status Badge (when already resolved) */
.glass-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

.glass-status-badge.resolved {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: #4ade80;
}

.glass-status-badge.resolved i {
    color: #4ade80;
}

/* Resolved state container - show badge and re-open side by side */
.glass-quick-resolve-container.resolved-state {
    gap: 16px;
}

/* Re-open Button */
.glass-reopen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.1) 100%);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 50px;
    color: #fcd34d;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.glass-reopen-btn:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.35) 0%, rgba(255, 193, 7, 0.2) 100%);
    border-color: rgba(255, 193, 7, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.25);
    color: #fde68a;
}

.glass-reopen-btn:active {
    transform: translateY(0) scale(0.98);
}

.glass-reopen-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.glass-reopen-btn i {
    font-size: 14px;
}

/* Mobile adjustments for resolve button */
@media (max-width: 768px) {
    .glass-quick-resolve-container {
        padding: 12px 0;
    }

    .glass-resolve-btn {
        padding: 12px 24px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }

    .glass-status-badge {
        padding: 8px 16px;
        font-size: 13px;
    }

    .glass-quick-resolve-container.resolved-state {
        flex-wrap: wrap;
        gap: 10px;
    }

    .glass-reopen-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ================================================
   FILE UPLOAD / DROPZONE - Fix text cutoff
   ================================================ */

/* Hide broken glass-disk-indicator elements */
.glass-disk-indicator {
    display: none !important;
}

/* File upload area styling */
.dropzone {
    background: rgba(0, 212, 255, 0.05) !important;
    border: 2px dashed rgba(0, 212, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    min-height: 120px !important;
    overflow: visible !important;
}

.dropzone .upload-icon,
.dropzone .fa-cloud-upload {
    color: var(--electric-blue) !important;
    margin-bottom: 10px !important;
}

.dropzone .bigger-150,
.dropzone span {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    display: block !important;
}

/* Fallback file input styling */
.fallback {
    margin-top: 15px !important;
    text-align: center !important;
}

.fallback input[type="file"] {
    display: inline-block !important;
    padding: 10px 16px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
}

/* Max file size info - Glass Theme custom display */
.max-file-size,
span[class*="max"],
.file-size-info,
.glass-disk-info {
    display: block !important;
    color: var(--text-dim) !important;
    font-size: 12px !important;
    margin-top: 10px !important;
    text-align: center !important;
}

/* HIDE MantisBT's default upload size message - show only Glass Theme's */
#dropzonediv > span,
.dropzone + span,
.dropzone ~ span:not(.glass-disk-info),
#file-upload-max-size,
p:has(> span:contains("Maximum")),
span:contains("Maximum size"),
.file-upload span.small:not(.glass-disk-info),
#attachments span.small:not(.glass-disk-info),
form span.small:has-text("Maximum"),
#dropzonediv + span,
.dropzone-container > span:not(.glass-disk-info) {
    display: none !important;
}

/* Ensure Glass Theme disk info is visible */
.glass-disk-info {
    display: block !important;
    visibility: visible !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
    text-align: center !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.glass-disk-info .separator {
    color: rgba(0, 212, 255, 0.5) !important;
    margin: 0 4px !important;
}

/* === FILTER SELECTS - MODERN DROPDOWN STYLE === */
#filter select,
table.filters select,
.filters select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: rgba(0, 0, 0, 0.35) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300D4FF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 10px 36px 10px 14px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#filter select:hover,
table.filters select:hover {
    border-color: rgba(0, 212, 255, 0.4) !important;
    background-color: rgba(0, 0, 0, 0.45) !important;
}

#filter select:focus,
table.filters select:focus {
    border-color: var(--electric-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
    outline: none !important;
}

#filter select option,
table.filters select option {
    background: #0d1b2a !important;
    color: #fff !important;
    padding: 10px !important;
}

/* Multi-select styling */
#filter select[multiple],
table.filters select[multiple] {
    min-height: 100px !important;
    padding: 8px !important;
    background-image: none !important;
}

#filter select[multiple] option,
table.filters select[multiple] option {
    padding: 8px 12px !important;
    border-radius: 4px !important;
    margin: 2px 0 !important;
}

#filter select[multiple] option:checked,
table.filters select[multiple] option:checked {
    background: rgba(0, 212, 255, 0.3) !important;
    color: #fff !important;
}

/* === BOTTOM APPLY FILTER BAR === */
#filter .widget-body > .widget-toolbox:last-child,
#filter .widget-toolbox.padding-8 {
    display: block !important;
    background: rgba(0, 212, 255, 0.05);
    border-top: 1px solid rgba(0, 212, 255, 0.1);
    padding: 16px 20px;
}

#filter .widget-toolbox .btn-toolbar.pull-left {
    display: flex;
    align-items: center;
    gap: 12px;
    float: none;
}

#filter .widget-toolbox .form-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Bottom search input */
#filter-search-txt {
    height: 44px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    color: #fff;
    padding: 0 18px;
    font-size: 15px;
    min-width: 200px;
}

#filter-search-txt::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#filter-search-txt:focus {
    border-color: var(--electric-blue);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.15);
}

/* APPLY FILTER BUTTON - BIG AND PROMINENT */
#filter input[name="filter_submit"],
input[value="Apply Filter"] {
    height: 44px;
    background: linear-gradient(135deg, var(--electric-blue) 0%, #0099cc 100%);
    border: none;
    border-radius: 12px;
    padding: 0 30px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25);
}

#filter input[name="filter_submit"]:hover,
input[value="Apply Filter"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
}

/* === COLLAPSED STATE === */
#filter.collapsed .widget-body {
    display: none !important;
}

#filter:not(.collapsed) .widget-body {
    display: block !important;
}

#filter.collapsed .widget-header {
    border-bottom: none;
    border-radius: 16px;
}

/* Chevron rotation */
#filter.collapsed [data-action="collapse"] i {
    transform: rotate(0deg);
}

#filter:not(.collapsed) [data-action="collapse"] i {
    transform: rotate(180deg);
}

/* === CLEANUP === */
#filter .ace-icon {
    margin-right: 0;
}

#filter .margin-left-8,
#filter .margin-right-8 {
    margin: 0 !important;
}

#filter .widget-header-small {
    min-height: auto;
}

/* === HIDE PRINT/EXPORT BUTTONS === */
/* Hide the Print Reports, CSV Export, Excel Export, Summary buttons */
.filter-box ~ .btn-toolbar,
.filter-box + .btn-toolbar,
form[name="filters_open"] ~ .btn-toolbar:last-of-type,
.btn-toolbar a[href*="print_all_bug"],
.btn-toolbar a[href*="csv_export"],
.btn-toolbar a[href*="excel_xml_export"],
.btn-toolbar a[href*="summary=1"] {
    display: none !important;
}

/* Hide the entire export toolbar */
.widget-body > .btn-toolbar:has(a[href*="print_all"]),
.widget-body > .btn-toolbar:has(a[href*="csv_export"]) {
    display: none !important;
}

/* Fallback - hide any btn-toolbar after filter submit that contains export links */
#filters_form_open ~ .btn-toolbar,
form[name="filters_open"] + .btn-toolbar {
    display: none !important;
}

/* Keep the Apply Filter toolbar visible */
.btn-toolbar:has(#filter-search-txt),
.btn-toolbar:has(input[name="filter_submit"]),
.btn-toolbar.pull-left {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Apply Filter button styling */
input[name="filter_submit"],
.btn-toolbar input[type="submit"] {
    background: linear-gradient(135deg, var(--electric-blue) 0%, #0099cc 100%);
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[name="filter_submit"]:hover,
.btn-toolbar input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

/* Search input in filter */
#filter-search-txt,
.btn-toolbar input[type="text"] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 8px 14px;
    font-size: 13px;
    min-width: 200px;
}

#filter-search-txt:focus,
.btn-toolbar input[type="text"]:focus {
    border-color: var(--electric-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

/* Filter collapsed state */
.filter-box .widget-box.collapsed .widget-body {
    display: none;
}

.filter-box .widget-box.collapsed {
    border-radius: 12px;
}

/* Filter settings dropdown */
.filter-box .dropdown-menu {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
}

.filter-box .dropdown-menu li a {
    color: var(--text-secondary);
    padding: 10px 16px;
    font-size: 13px;
}

.filter-box .dropdown-menu li a:hover {
    background: rgba(0, 212, 255, 0.1);
    color: var(--electric-blue);
}

/* Saved queries / filter presets */
.filter-box .widget-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Reset filter link */
a[href*="view_all_set.php?type=0"],
a[href*="view_all_set.php?reset"] {
    color: var(--status-warning);
    font-size: 12px;
}

/* Filter expanded state - simple toggle */
.filter-box .widget-box:not(.collapsed) .widget-header {
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    border-radius: 11px 11px 0 0;
}

/* Simple filter count badge */
.filter-box .badge,
.filter-box .active-filter-count {
    background: var(--electric-blue);
    color: #fff;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

/* View Issues page specific - ensure full width */
.view-all-bugs-page .main-container,
body.view_all_bug_page .main-container {
    max-width: 100%;
    padding: 0 20px;
}

/* === PRINT STYLES === */
@media print {
    .bg-particles,
    .navbar,
    .wageros-logo-container,
    .minimal-footer {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        padding: 0;
    }

    .widget-box {
        background: #fff;
        border: 1px solid #ccc;
    }
}


/* Report Issue page - keep asterisk inline with label */
.required {
    display: inline !important;
    margin-right: 4px;
}

th.category,
td.category {
    white-space: nowrap;
}

th.category label {
    display: inline !important;
}

/* Fix asterisk position - ensure it's inline */
span.required {
    display: inline !important;
    vertical-align: baseline;
}

/* === ACCOUNT & PREFERENCES PAGE STYLING === */
/* Glass styling for account/preferences forms */
.form-container,
#account-page,
#preferences-page,
form[name="account_prefs_update_form"],
form[name="account_update_form"] {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(20px);
}

/* Form labels */
.form-container th,
.table th.category {
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    vertical-align: middle;
}

/* Form inputs */
.form-container input[type="text"],
.form-container input[type="password"],
.form-container input[type="email"],
.form-container select,
.form-container textarea {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease;
}

.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
    border-color: var(--electric-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
    outline: none !important;
}

/* Account page specific */
#main-container .widget-box,
.account-info-widget {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
}

/* Preferences page checkboxes */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--electric-blue);
}

/* Page titles */
.page-header h1,
.widget-title,
h4.widget-title {
    color: var(--text-primary);
    font-weight: 600;
}

/* === HIDE REDUNDANT FILTER SEARCH BOX === */
/* Hide the smaller search box inside filter widget - keep only the larger one in header */
#filter-search-txt,
input[id="filter-search-txt"],
#filter .widget-body input[name="search"] {
    display: none !important;
}

/* === NOTES & ATTACHMENTS COUNT COLUMNS === */
/* Force visibility on desktop */
.column-bugnotes-count,
.column-attachments,
.column-attachment-count {
    display: table-cell !important;
    visibility: visible !important;
    text-align: center !important;
    width: 70px !important;
    min-width: 70px !important;
}

/* Ensure attachments column header is visible */
th.column-attachments,
td.column-attachments {
    display: table-cell !important;
}

.column-bugnotes-count a,
.column-attachments a,
.column-attachment-count a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 12px;
    color: var(--electric-blue);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.column-bugnotes-count a:hover,
.column-attachments a:hover,
.column-attachment-count a:hover {
    background: rgba(0, 212, 255, 0.2);
    transform: scale(1.05);
}

/* Icon styling for counts */
.column-bugnotes-count a::before {
    content: "\f075";
    font-family: FontAwesome;
    font-size: 11px;
    margin-right: 3px;
}

.column-attachments a::before,
.column-attachment-count a::before {
    content: "\f0c6";
    font-family: FontAwesome;
    font-size: 11px;
    margin-right: 3px;
}

/* Zero counts - subtle styling */
.column-bugnotes-count:empty,
.column-attachments:empty,
.column-attachment-count:empty {
    opacity: 0.4;
}

/* === ISSUE DETAIL - BUGNOTES & ATTACHMENTS VISIBILITY === */
#bugnotes,
#attachments,
#bugnotes .widget-body,
#attachments .widget-body,
.bugnote,
.bugnote-note {
    display: block !important;
    visibility: visible !important;
}

/* Ensure bugnotes widget is expanded by default */
#bugnotes.widget-box .widget-body,
div[id="bugnotes"] .widget-body {
    display: block !important;
}

/* Bugnote styling */
.bugnote {
    background: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    padding: 12px;
}

.bugnote:hover {
    background: rgba(0, 212, 255, 0.03);
}

.bugnote-note {
    color: var(--text-primary);
    padding: 8px 0;
}

/* ================================================
   ATTACHMENTS - Full MantisBT Compatible Styling
   ================================================ */

/* Attachments Widget Container - FORCE VISIBLE */
#attachments,
#attachments.widget-box,
div#attachments {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Never collapse attachments widget */
#attachments.collapsed .widget-body,
#attachments .widget-body.collapsed {
    display: block !important;
    height: auto !important;
}

#attachments .widget-header {
    background: rgba(0, 212, 255, 0.08) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
}

#attachments .widget-header .widget-title {
    color: var(--text-primary) !important;
}

#attachments .widget-header .widget-title .fa,
#attachments .widget-header .widget-title i {
    color: var(--electric-blue) !important;
    margin-right: 8px;
}

#attachments .widget-body {
    display: block !important;
    padding: 0 !important;
}

/* Attachments Table */
#attachments table,
table.attachments,
.attachments-list table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

#attachments table tr,
table.attachments tr {
    border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
    transition: background 0.15s ease;
}

#attachments table tr:hover,
table.attachments tr:hover {
    background: rgba(0, 212, 255, 0.05) !important;
}

#attachments table td,
table.attachments td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
    color: var(--text-primary) !important;
    border: none !important;
}

/* Attachment filename/link cell */
#attachments table td:first-child,
table.attachments td:first-child,
.attachment-name {
    font-weight: 500;
}

#attachments table td a,
table.attachments td a,
.attachment a,
.attachment-name a {
    color: var(--electric-blue) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

#attachments table td a:hover,
table.attachments td a:hover,
.attachment a:hover {
    color: #4dd8ff !important;
    text-decoration: underline !important;
}

/* File type icon before filename */
#attachments table td a::before,
.attachment-name a::before {
    font-family: FontAwesome;
    font-size: 14px;
    opacity: 0.8;
}

/* Image files */
#attachments table td a[href*=".png"]::before,
#attachments table td a[href*=".jpg"]::before,
#attachments table td a[href*=".jpeg"]::before,
#attachments table td a[href*=".gif"]::before,
#attachments table td a[href*=".webp"]::before,
#attachments table td a[href*=".svg"]::before {
    content: "\f03e"; /* fa-image */
    color: #4ade80;
}

/* PDF files */
#attachments table td a[href*=".pdf"]::before {
    content: "\f1c1"; /* fa-file-pdf-o */
    color: #ef4444;
}

/* Document files */
#attachments table td a[href*=".doc"]::before,
#attachments table td a[href*=".docx"]::before {
    content: "\f1c2"; /* fa-file-word-o */
    color: #3b82f6;
}

/* Spreadsheet files */
#attachments table td a[href*=".xls"]::before,
#attachments table td a[href*=".xlsx"]::before,
#attachments table td a[href*=".csv"]::before {
    content: "\f1c3"; /* fa-file-excel-o */
    color: #22c55e;
}

/* Code/text files */
#attachments table td a[href*=".txt"]::before,
#attachments table td a[href*=".log"]::before,
#attachments table td a[href*=".json"]::before,
#attachments table td a[href*=".xml"]::before {
    content: "\f1c9"; /* fa-file-code-o */
    color: #f59e0b;
}

/* Archive files */
#attachments table td a[href*=".zip"]::before,
#attachments table td a[href*=".rar"]::before,
#attachments table td a[href*=".7z"]::before,
#attachments table td a[href*=".tar"]::before {
    content: "\f1c6"; /* fa-file-archive-o */
    color: #a855f7;
}

/* Default file icon */
#attachments table td a[href*="file_download"]::before {
    content: "\f016"; /* fa-file-o */
    color: var(--text-secondary);
}

/* File size styling */
.attachment-size,
#attachments table td.small,
#attachments table td:nth-child(2),
table.attachments td.filesize {
    color: var(--text-dim) !important;
    font-size: 12px !important;
    white-space: nowrap;
}

/* Upload date */
#attachments table td:nth-child(3),
.attachment-date {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
}

/* Uploader name */
#attachments table td a[href*="user"],
.attachment-user {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
}

/* Download button styling */
#attachments table td a.btn,
.attachment-download,
a[href*="file_download"].btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    border-radius: 6px !important;
    color: var(--electric-blue) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#attachments table td a.btn:hover,
.attachment-download:hover,
a[href*="file_download"].btn:hover {
    background: rgba(0, 212, 255, 0.2) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    transform: translateY(-1px);
}

/* Delete attachment button */
#attachments table td a.btn-danger,
#attachments table td a[href*="delete"],
.attachment-delete {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

#attachments table td a.btn-danger:hover,
#attachments table td a[href*="delete"]:hover,
.attachment-delete:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Image thumbnails/previews */
#attachments img,
.attachment-preview,
.attachment-thumbnail {
    max-width: 150px !important;
    max-height: 100px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    margin: 4px 0 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#attachments img:hover,
.attachment-preview:hover,
.attachment-thumbnail:hover {
    border-color: var(--electric-blue) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
    transform: scale(1.02);
}

/* Inline attachment display */
.attachment,
.bug-attachment {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    border-radius: 10px !important;
    margin: 8px 0 !important;
    transition: all 0.2s ease;
}

.attachment:hover,
.bug-attachment:hover {
    background: rgba(0, 212, 255, 0.05) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
}

/* Attachments list styling */
.attachments-list,
.bug-attachments,
#attachments-list {
    display: block !important;
    padding: 8px !important;
}

/* Empty attachments message */
#attachments .no-attachments,
.attachments-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
}

/* Upload section within attachments */
#attachments .file-upload,
#attachments .dropzone,
#attachments-upload {
    margin: 12px;
    background: rgba(0, 212, 255, 0.03) !important;
    border: 2px dashed rgba(0, 212, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    text-align: center;
    transition: all 0.2s ease;
}

#attachments .file-upload:hover,
#attachments .dropzone:hover {
    border-color: rgba(0, 212, 255, 0.4) !important;
    background: rgba(0, 212, 255, 0.06) !important;
}

/* Column count badges in issue list */
.column-attachments,
.column-attachment-count,
td.column-attachments {
    text-align: center !important;
    width: 70px !important;
}

.column-attachments a,
.column-attachment-count a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    background: rgba(0, 212, 255, 0.1) !important;
    border-radius: 20px !important;
    color: var(--electric-blue) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    min-width: 32px;
    transition: all 0.2s ease !important;
}

.column-attachments a:hover,
.column-attachment-count a:hover {
    background: rgba(0, 212, 255, 0.2) !important;
    transform: scale(1.05);
}

/* Attachment count icon */
.column-attachments a i,
.column-attachments a .fa {
    font-size: 11px !important;
}

/* Zero attachments - subtle */
.column-attachments a:empty,
.column-attachments:not(:has(a)) {
    opacity: 0.4;
}

/* === HIDE MONITORING SECTION === */
#monitoring,
.bug-monitor,
#bug-monitor-list,
tr[id*="monitor"],
.widget-box:has([href*="monitor"]) {
    display: none !important;
}

/* Hide monitoring row in issue details table */
tr:has(th:contains("Monitoring")),
tr:has(td a[href*="monitor"]) {
    display: none !important;
}

/* === HIDE RELATIONSHIPS SECTION === */
#relationships,
.bug-relationships,
#bug-relationships,
.widget-box:has([href*="relationship"]),
tr:has(th:contains("Relationships")),
tr:has(td:contains("Relationships")) {
    display: none !important;
}

/* === DISK SPACE INFO === */
.glass-disk-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-dim);
}

.glass-disk-info i {
    color: var(--text-secondary);
    font-size: 12px;
}

/* ============================================
   BULLETPROOF MOBILE CSS - 2026 UX
   Fixed hamburger, menu, filters, issue detail
   ============================================ */

/* === BODY STATES === */
body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* === HAMBURGER - BULLETPROOF SQUARE === */
.navbar-toggle {
    display: none !important;
    visibility: hidden !important;
}

@media (max-width: 768px) {
    .navbar-toggle {
        display: flex !important;
        visibility: visible !important;
        position: fixed !important;
        top: 7px !important;
        right: 8px !important;
        z-index: 1100 !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(0, 212, 255, 0.15) !important;
        border: 1px solid rgba(0, 212, 255, 0.4) !important;
        border-radius: 6px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        cursor: pointer !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        -webkit-tap-highlight-color: transparent !important;
        float: none !important;
    }

    .navbar-toggle:hover,
    .navbar-toggle:focus,
    .navbar-toggle:active {
        background: rgba(0, 212, 255, 0.2) !important;
        border-color: var(--electric-blue) !important;
        outline: none !important;
    }

    /* Hide sr-only text */
    .navbar-toggle .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
    }

    /* Hamburger bars */
    .navbar-toggle .icon-bar {
        display: block !important;
        width: 22px !important;
        height: 3px !important;
        background: var(--electric-blue) !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        margin: 0 !important;
    }

    /* X animation when active */
    .navbar-toggle.is-active .icon-bar:nth-child(2) {
        transform: rotate(45deg) translateY(8px) !important;
    }

    .navbar-toggle.is-active .icon-bar:nth-child(3) {
        opacity: 0 !important;
    }

    .navbar-toggle.is-active .icon-bar:nth-child(4) {
        transform: rotate(-45deg) translateY(-8px) !important;
    }
}

/* === MOBILE MENU === */
@media (max-width: 768px) {
    /* Navbar */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        z-index: 1000 !important;
    }

    .navbar .container-fluid {
        height: 60px !important;
        padding: 0 10px !important;
    }

    .navbar-header {
        display: flex !important;
        align-items: center !important;
        height: 60px !important;
        margin: 0 !important;
        padding-left: 85px !important;
        width: calc(100% - 60px) !important;
    }

    /* Mobile navbar styles are defined earlier - these are overrides if needed */

    /* Mobile menu panel */
    .navbar-collapse,
    #navbar-main,
    .navbar-collapse.collapse {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        max-height: none !important;
        background: rgba(8, 16, 32, 0.98) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        /* HIDDEN BY DEFAULT */
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* SHOW MENU WHEN OPEN */
    .navbar-collapse.mobile-open,
    #navbar-main.mobile-open {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Navigation list */
    .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 16px !important;
        margin: 0 !important;
        list-style: none !important;
        height: auto !important;
        float: none !important;
    }

    .navbar-nav > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 6px 0 !important;
        float: none !important;
    }

    .navbar-nav > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 56px !important;
        padding: 16px 20px !important;
        background: rgba(0, 212, 255, 0.06) !important;
        border: 1px solid rgba(0, 212, 255, 0.15) !important;
        border-radius: 14px !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:active,
    .navbar-nav > li.active > a {
        background: rgba(0, 212, 255, 0.15) !important;
        border-color: rgba(0, 212, 255, 0.4) !important;
        color: var(--electric-blue) !important;
    }

    .navbar-nav > li > a i {
        width: 28px !important;
        margin-right: 14px !important;
        font-size: 20px !important;
        color: var(--electric-blue) !important;
        text-align: center !important;
    }

    .navbar-nav > li > a span {
        display: inline !important;
    }

    .navbar-nav > li > a .caret {
        display: inline-block !important;
        margin-left: auto !important;
    }

    /* Right nav separator */
    .navbar-nav.navbar-right {
        margin-top: 20px !important;
        margin-left: 0 !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
        float: none !important;
    }

    /* Mobile dropdowns */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border: none !important;
        border-radius: 0 0 14px 14px !important;
        margin: -6px 0 10px 0 !important;
        padding: 10px 10px 10px 30px !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Mobile dropdowns - hidden by default */
    .navbar-nav .dropdown-menu {
        display: none;
    }

    /* Mobile dropdowns - show when open */
    .navbar-nav .dropdown.open > .dropdown-menu,
    .navbar-nav .dropdown-menu.glass-menu-visible,
    .dropdown.open > .dropdown-menu,
    .dropdown-menu.glass-menu-visible {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .navbar-nav .dropdown-menu > li {
        margin: 4px 0 !important;
    }

    .navbar-nav .dropdown-menu > li > a {
        display: block !important;
        padding: 14px 18px !important;
        color: var(--text-secondary) !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        background: rgba(0, 212, 255, 0.03) !important;
    }

    .navbar-nav .dropdown-menu > li > a:hover,
    .navbar-nav .dropdown-menu > li > a:active {
        background: rgba(0, 212, 255, 0.12) !important;
        color: var(--electric-blue) !important;
    }

    /* Main content */
    body {
        padding-top: 60px !important;
        padding-bottom: 70px !important;
    }

    .main-container {
        padding: 12px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Widget boxes */
    .widget-box {
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }

    .widget-header {
        padding: 14px !important;
    }

    .widget-body {
        padding: 12px !important;
    }

    /* Footer */
    .minimal-footer {
        height: 60px !important;
        z-index: 100 !important;
    }
}

/* === MOBILE FILTER - ULTRA MINIMAL === */
@media (max-width: 768px) {
    /* Filter container */
    #filter.widget-box,
    .filter-box .widget-box {
        border-radius: 12px !important;
        margin: 0 0 16px 0 !important;
    }

    /* Simple header row */
    #filter .widget-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    /* Hide filter title on mobile */
    #filter .widget-title {
        display: none !important;
    }

    /* Compact toolbar */
    #filter .widget-toolbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Toggle button - small pill */
    #filter-toggle,
    #filter [data-action="collapse"] {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Search bar inline */
    #filter-bar-queries {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    #filter-bar-queries .widget-menu {
        display: contents !important;
    }

    #filter-bar-queries form {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Search input - compact */
    #filter-bar-search-txt {
        flex: 1 !important;
        min-width: 80px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
    }

    /* Search button - small */
    #filter-bar-search-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 20px !important;
        flex-shrink: 0 !important;
    }

    #filter-bar-search-btn::after {
        content: "→" !important;
        font-size: 16px !important;
    }

    /* Reset button - icon only */
    #filter-bar-queries a[href*="type=0"],
    a[title="Reset Filter"] {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border-radius: 20px !important;
        flex-shrink: 0 !important;
    }

    #filter-bar-queries a[href*="type=0"]::after,
    a[title="Reset Filter"]::after {
        content: "×" !important;
        font-size: 18px !important;
    }

    /* Filter body - simple scroll */
    #filter .widget-body {
        padding: 12px !important;
        max-height: none !important;
    }

    #filter.collapsed .widget-body {
        display: none !important;
        padding: 0 !important;
    }

    #filter:not(.collapsed) .widget-body {
        max-height: none !important;
        padding: 12px !important;
    }

    /* Simple filter table */
    #filter table.filters {
        width: 100% !important;
        border-spacing: 0 8px !important;
    }

    #filter table.filters tr {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    #filter table.filters td {
        display: inline-block !important;
        width: auto !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    #filter table.filters td.category {
        width: 100% !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
        margin-bottom: 4px !important;
    }

    #filter table.filters td:not(.category) {
        flex: 1 !important;
        min-width: 120px !important;
    }

    #filter table.filters select {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 14px !important;
    }

    /* Apply button */
    #filter input[name="filter_submit"],
    input[value="Apply Filter"] {
        width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        margin-top: 8px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
}

/* === TOUCH-FRIENDLY FORMS === */
@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select,
    .form-control {
        min-height: 50px !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(0, 212, 255, 0.2) !important;
        color: var(--text-primary) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .form-control:focus {
        border-color: var(--electric-blue) !important;
        box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2) !important;
        outline: none !important;
    }

    textarea {
        min-height: 120px !important;
    }

    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300D4FF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        padding-right: 44px !important;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
    }

    /* Stacked form tables */
    table.width-100 tr,
    #report_bug_form tr {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 16px !important;
    }

    table.width-100 td.category,
    table.width-100 th.category,
    #report_bug_form td.category {
        width: 100% !important;
        padding: 10px 14px !important;
        background: rgba(0, 212, 255, 0.08) !important;
        border-radius: 10px 10px 0 0 !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
    }

    table.width-100 td:not(.category),
    #report_bug_form td:not(.category) {
        width: 100% !important;
        padding: 14px !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 0 0 10px 10px !important;
    }
}

/* === BUTTONS === */
@media (max-width: 768px) {
    .btn {
        min-height: 50px !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        touch-action: manipulation !important;
    }

    .btn-sm {
        min-height: 44px !important;
        padding: 12px 18px !important;
    }

    .btn-xs {
        min-height: 38px !important;
        padding: 10px 14px !important;
    }

    .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .btn-group .btn {
        flex: 1 1 auto !important;
        border-radius: 12px !important;
    }

    .btn-toolbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

/* === ISSUE DETAIL PAGE === */
@media (max-width: 768px) {
    /* Bug view tables */
    .bug-view-page .widget-box,
    #bug_view_page .widget-box {
        margin-bottom: 16px !important;
    }

    table.bug-view tr,
    .bug-view-page table tr {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 12px !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    table.bug-view td.category,
    .bug-view-page td.category {
        width: 100% !important;
        padding: 12px 16px !important;
        background: rgba(0, 212, 255, 0.08) !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        color: var(--electric-blue) !important;
    }

    table.bug-view td:not(.category),
    .bug-view-page td:not(.category) {
        width: 100% !important;
        padding: 14px 16px !important;
    }

    /* Bug notes section */
    #bugnotes .widget-box,
    #bugnotes.widget-box {
        margin-bottom: 16px !important;
    }

    #bugnotes .widget-body {
        padding: 12px !important;
    }

    /* Individual bug notes */
    .bugnote,
    .bugnote-public,
    .bugnote-private,
    table.bugnote {
        display: block !important;
        width: 100% !important;
        margin-bottom: 14px !important;
        padding: 14px !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border-radius: 14px !important;
        border: 1px solid rgba(0, 212, 255, 0.1) !important;
    }

    .bugnote tr,
    table.bugnote tr {
        display: flex !important;
        flex-direction: column !important;
    }

    .bugnote td,
    table.bugnote td {
        display: block !important;
        width: 100% !important;
        padding: 8px 0 !important;
        background: transparent !important;
    }

    .bugnote td.category,
    table.bugnote td.category {
        padding: 8px 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        color: var(--text-secondary) !important;
    }

    /* Bug note content - FULLY VISIBLE */
    .bugnote-note,
    .bugnote-text,
    .bugnote td p,
    .bugnote-note-public,
    .bugnote-note-private {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        padding: 12px !important;
        margin-top: 8px !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: var(--text-primary) !important;
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Bug note meta info */
    .bugnote-meta,
    .bugnote .small,
    .bugnote-time {
        font-size: 12px !important;
        color: var(--text-secondary) !important;
        margin-bottom: 8px !important;
    }

    /* Bug note buttons */
    .bugnote .btn,
    .bugnote-buttons .btn {
        margin: 4px !important;
        min-height: 40px !important;
    }

    /* ==============================
       MOBILE ATTACHMENTS
       ============================== */

    /* Attachments widget */
    #attachments {
        margin-bottom: 16px !important;
    }

    #attachments .widget-header {
        padding: 12px 16px !important;
    }

    #attachments .widget-body,
    .bug-attachments {
        padding: 12px !important;
    }

    /* Attachment table to cards */
    #attachments table {
        display: block !important;
    }

    #attachments table thead {
        display: none !important;
    }

    #attachments table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    #attachments table tr {
        display: flex !important;
        flex-direction: column !important;
        padding: 14px !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(0, 212, 255, 0.1) !important;
        border-radius: 12px !important;
        gap: 8px !important;
    }

    #attachments table td {
        display: block !important;
        padding: 4px 0 !important;
        width: 100% !important;
    }

    /* Filename link */
    #attachments table td:first-child,
    #attachments table td a[href*="file_download"] {
        font-size: 14px !important;
        font-weight: 500 !important;
        word-break: break-all !important;
    }

    /* File info row */
    #attachments table td:nth-child(2),
    #attachments table td:nth-child(3) {
        font-size: 12px !important;
        color: var(--text-dim) !important;
    }

    /* Individual attachment cards */
    .attachment,
    .attachment-details,
    .bug-attachment {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
        margin-bottom: 10px !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(0, 212, 255, 0.1) !important;
        border-radius: 12px !important;
    }

    .attachment a {
        word-break: break-all !important;
        font-size: 14px !important;
    }

    /* Attachment buttons */
    #attachments .btn,
    .attachment .btn,
    .attachment-download {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }

    /* Delete button */
    #attachments .btn-danger,
    .attachment-delete {
        margin-top: 4px !important;
    }

    /* Thumbnail preview */
    #attachments img,
    .attachment-thumbnail {
        max-width: 100% !important;
        max-height: 200px !important;
        width: auto !important;
        margin: 8px 0 !important;
        border-radius: 8px !important;
    }

    /* Dropzone upload area */
    #attachments .dropzone,
    .dropzone {
        padding: 20px !important;
        min-height: 100px !important;
    }

    .dropzone .fa-cloud-upload,
    .dropzone .upload-icon {
        font-size: 32px !important;
    }

    .dropzone .bigger-150,
    .dropzone span {
        font-size: 13px !important;
    }

    /* Fallback file input */
    .fallback input[type="file"] {
        width: 100% !important;
        padding: 12px !important;
    }

    /* Attachment count in issue list */
    .column-attachments,
    td.column-attachments {
        width: auto !important;
        text-align: left !important;
    }

    .column-attachments a {
        padding: 3px 8px !important;
        font-size: 11px !important;
    }
}

/* === VIEW ISSUES - MOBILE CARDS === */
@media (max-width: 768px) {
    .table-responsive {
        border: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Convert table to card layout */
    #buglist,
    .buglist {
        display: block !important;
        border-spacing: 0 !important;
    }

    #buglist thead,
    .buglist thead {
        display: none !important;
    }

    #buglist tbody,
    .buglist tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Each row = a card */
    #buglist tbody tr,
    .buglist tbody tr {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "id status"
            "summary summary"
            "meta meta" !important;
        gap: 8px !important;
        background: rgba(13, 27, 42, 0.5) !important;
        border: 1px solid rgba(0, 212, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    #buglist tbody tr:active,
    .buglist tbody tr:active {
        background: rgba(0, 212, 255, 0.1) !important;
    }

    #buglist tbody td,
    .buglist tbody td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    /* Hide checkbox */
    #buglist .column-selection,
    .buglist .column-selection {
        display: none !important;
    }

    /* Issue ID - top left badge */
    #buglist .column-id,
    .buglist .column-id {
        grid-area: id !important;
        align-self: center !important;
    }

    #buglist .column-id a,
    .buglist .column-id a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 50px !important;
        height: 28px !important;
        padding: 0 10px !important;
        background: rgba(0, 212, 255, 0.12) !important;
        border: 1px solid rgba(0, 212, 255, 0.25) !important;
        border-radius: 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: var(--electric-blue) !important;
    }

    /* Status - top right */
    #buglist .column-status,
    .buglist .column-status {
        grid-area: status !important;
        justify-self: end !important;
        align-self: center !important;
    }

    #buglist .column-status span[title],
    .buglist .column-status span[title] {
        padding: 4px 10px !important;
        font-size: 10px !important;
        border-radius: 10px !important;
    }

    /* Summary - full width middle */
    #buglist .column-summary,
    .buglist .column-summary {
        grid-area: summary !important;
    }

    #buglist .column-summary a,
    .buglist .column-summary a {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        color: #fff !important;
        display: block !important;
    }

    /* Category - bottom row meta */
    #buglist .column-category,
    .buglist .column-category {
        grid-area: meta !important;
        font-size: 11px !important;
        color: var(--text-dim) !important;
    }

    /* Last updated - append to meta area */
    #buglist .column-last-updated,
    .buglist .column-last-updated,
    #buglist .column-last-modified,
    .buglist .column-last-modified {
        position: absolute !important;
        visibility: hidden !important;
    }

    /* Show notes/attachments count inline */
    #buglist .column-bugnotes-count,
    .buglist .column-bugnotes-count {
        display: none !important;
    }

    #buglist .column-attachments,
    .buglist .column-attachments {
        display: none !important;
    }

    /* Hide other columns */
    #buglist .column-assigned-to,
    #buglist .column-reporter,
    #buglist .column-handler,
    #buglist .column-priority,
    #buglist .column-severity {
        display: none !important;
    }

    /* Make cards tappable */
    #buglist tbody tr {
        cursor: pointer !important;
        transition: all 0.15s ease !important;
    }

    #buglist tbody tr:hover {
        border-color: rgba(0, 212, 255, 0.3) !important;
    }

    /* Pagination */
    .buglist-pager,
    .pager {
        display: flex !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 16px 0 !important;
        flex-wrap: wrap !important;
    }

    .buglist-pager a,
    .pager a,
    .pager span {
        min-width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
    }
}

/* === LOGIN PAGE === */
@media (max-width: 768px) {
    body.login-page {
        padding: 20px 16px !important;
    }

    body.login-page .widget-box {
        border-radius: 20px !important;
    }

    body.login-page .widget-main {
        padding: 28px 20px !important;
    }

    body.login-page .header {
        font-size: 22px !important;
    }

    body.login-page input {
        min-height: 52px !important;
        font-size: 16px !important;
    }

    body.login-page .btn {
        min-height: 52px !important;
        width: 100% !important;
    }
}

/* === MODALS === */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px !important;
        width: calc(100% - 20px) !important;
    }

    .modal-content {
        border-radius: 18px !important;
    }

    .modal-header {
        padding: 18px !important;
    }

    .modal-body {
        padding: 18px !important;
    }

    .modal-footer {
        padding: 16px 18px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .modal-footer .btn {
        flex: 1 1 auto !important;
    }
}

/* === PAGINATION === */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .pagination > li > a,
    .pagination > li > span {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        border-radius: 10px !important;
    }
}

/* === SMALL MOBILE === */
@media (max-width: 480px) {
    .wageros-logo-container {
        left: 8px !important;
    }

    .wageros-logo-container img {
        height: 20px !important;
        max-width: 60px !important;
    }

    .navbar-header {
        padding-left: 75px !important;
    }

    .navbar-brand {
        font-size: 13px !important;
    }

    .navbar-toggle {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }

    .main-container {
        padding: 10px !important;
    }

    .widget-header {
        padding: 12px !important;
    }

    .widget-body {
        padding: 10px !important;
    }
}

/* === LANDSCAPE === */
@media (max-width: 768px) and (orientation: landscape) {
    .navbar {
        height: 50px !important;
    }

    body {
        padding-top: 50px !important;
    }

    .navbar-collapse,
    #navbar-main {
        top: 50px !important;
        height: calc(100vh - 50px) !important;
    }

    .navbar-toggle {
        top: 4px !important;
    }

    .wageros-logo-container {
        top: 8px !important;
    }

    .navbar-nav > li > a {
        min-height: 48px !important;
        padding: 12px 16px !important;
    }
}

/* === SAFE AREAS === */
@supports (padding: env(safe-area-inset-bottom)) {
    .minimal-footer {
        padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
    }

    @media (max-width: 768px) {
        body {
            padding-bottom: calc(env(safe-area-inset-bottom) + 70px) !important;
        }
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .bg-particles {
        display: none !important;
    }
}

:focus-visible {
    outline: 2px solid var(--electric-blue) !important;
    outline-offset: 2px !important;
}

/* ============================================
   INLINE ATTACHMENTS IN ACTIVITIES/BUGNOTES
   MantisBT renders attachments as inline links
   within bugnote table cells
   ============================================ */

/* Container for inline attachment links */
#bugnotes a[href*="file_download"],
.bugnote a[href*="file_download"],
table.bugnote a[href*="file_download"],
.bug-activity a[href*="file_download"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    margin: 6px 4px 6px 0 !important;
    background: rgba(0, 212, 255, 0.08) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 10px !important;
    color: var(--electric-blue) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    word-break: break-word !important;
    max-width: 100% !important;
}

#bugnotes a[href*="file_download"]:hover,
.bugnote a[href*="file_download"]:hover,
table.bugnote a[href*="file_download"]:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    transform: translateY(-1px);
}

/* File icon within attachment link */
#bugnotes a[href*="file_download"] img,
.bugnote a[href*="file_download"] img,
#bugnotes a[href*="file_download"] .fa,
.bugnote a[href*="file_download"] .fa {
    opacity: 0.8 !important;
    flex-shrink: 0 !important;
}

/* File size text after attachment link */
#bugnotes td:has(a[href*="file_download"]),
.bugnote td:has(a[href*="file_download"]) {
    color: var(--text-primary) !important;
}

/* Delete attachment button - inline with attachment */
#bugnotes a[href*="bug_file_delete"],
.bugnote a[href*="bug_file_delete"],
a.noprint[href*="bug_file_delete"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin-left: 8px !important;
    padding: 0 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    border-radius: 8px !important;
    color: #ef4444 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
}

#bugnotes a[href*="bug_file_delete"]:hover,
.bugnote a[href*="bug_file_delete"]:hover,
a.noprint[href*="bug_file_delete"]:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* File icon styling */
#bugnotes img[src*="file"],
.bugnote img[src*="file"],
img.file-icon,
.file-type-icon {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* Attachment activity type - entire row styling */
.activity-attachment,
tr.activity-attachment {
    background: rgba(0, 212, 255, 0.03) !important;
}

/* Image preview collapse section */
#bugnotes .collapse,
.bugnote .collapse,
.attachment-preview-collapse {
    margin-top: 12px !important;
    padding: 12px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}

/* Image preview within bugnotes - larger for better viewing */
#bugnotes img:not([src*="file"]):not(.file-icon),
.bugnote img.attachment-preview,
.bug-attachment-preview img,
.bug-attachment-preview-image img {
    max-width: 100% !important;
    max-height: 500px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    margin: 12px 0 !important;
    cursor: zoom-in !important;
    transition: all 0.2s ease !important;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Container for attachment preview */
.bug-attachment-preview-image {
    display: block !important;
    margin: 12px 0 !important;
    text-align: left !important;
}

.bug-attachment-preview-image a {
    display: inline-block !important;
}

#bugnotes img:not([src*="file"]):not(.file-icon):hover,
.bugnote img.attachment-preview:hover,
.bug-attachment-preview img:hover,
.bug-attachment-preview-image img:hover {
    border-color: var(--electric-blue) !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3) !important;
    transform: scale(1.02) !important;
}

/* Collapse toggle icon for attachments */
#bugnotes .collapse-link,
#bugnotes [data-toggle="collapse"],
.collapse-icon {
    color: var(--electric-blue) !important;
    margin-left: 8px !important;
    cursor: pointer;
}

/* ============================================
   BUGNOTES/ACTIVITIES TABLE - IMPROVED LAYOUT
   ============================================ */

/* Activities section header */
#bugnotes .widget-header,
#bugnotes.widget-box .widget-header {
    background: rgba(0, 212, 255, 0.08) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
    padding: 14px 18px !important;
}

#bugnotes .widget-title {
    color: var(--text-primary) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

#bugnotes .widget-title .fa,
#bugnotes .widget-title i {
    color: var(--electric-blue) !important;
    margin-right: 8px !important;
}

/* Activities table */
#bugnotes table,
table.bugnotes,
.bugnotes-list table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
}

#bugnotes table tr:not(.spacer),
table.bugnotes tr:not(.spacer) {
    background: rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

#bugnotes table tr:not(.spacer):hover,
table.bugnotes tr:not(.spacer):hover {
    background: rgba(0, 212, 255, 0.05) !important;
}

/* Hide spacer rows */
#bugnotes tr.spacer,
table.bugnotes tr.spacer {
    display: none !important;
}

/* Bugnote header cell - user info, date */
#bugnotes table td:first-child,
table.bugnotes td.bugnote-meta,
.bugnote-header {
    vertical-align: top !important;
    padding: 14px !important;
    width: 180px !important;
    min-width: 140px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px 0 0 12px !important;
}

/* Bugnote content cell */
#bugnotes table td:last-child,
table.bugnotes td.bugnote-content,
.bugnote-body {
    vertical-align: top !important;
    padding: 14px 18px !important;
    color: var(--text-primary) !important;
    line-height: 1.6 !important;
    border-radius: 0 12px 12px 0 !important;
}

/* Username in bugnote */
#bugnotes a[href*="view_user"],
.bugnote a[href*="view_user"],
.bugnote-user {
    color: var(--electric-blue) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#bugnotes a[href*="view_user"]:hover,
.bugnote a[href*="view_user"]:hover {
    text-decoration: underline !important;
}

/* Date/time in bugnote */
#bugnotes .small,
.bugnote .small,
.bugnote-time,
.bugnote-date {
    font-size: 11px !important;
    color: var(--text-dim) !important;
    margin-top: 4px !important;
}

/* Time tracking label */
.time-tracked.label,
div.time-tracked {
    display: inline-block !important;
    padding: 4px 10px !important;
    background: rgba(156, 163, 175, 0.15) !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    margin-bottom: 10px !important;
}

/* ============================================
   MOBILE RESPONSIVE - ISSUE DETAIL & BUGNOTES
   Comprehensive mobile optimization
   ============================================ */

@media (max-width: 768px) {
    /* Quick resolve button on mobile */
    #glass-quick-resolve.glass-quick-resolve-container {
        padding: 12px !important;
        margin-bottom: 16px !important;
    }

    .glass-resolve-btn {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    .glass-status-badge.resolved {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
    }

    /* Bug view main details - stacked layout */
    .bug-view-page table.width-100,
    table.bug-view,
    #bug_view_page table {
        display: block !important;
        width: 100% !important;
    }

    .bug-view-page table.width-100 tbody,
    table.bug-view tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .bug-view-page table.width-100 tr,
    table.bug-view tr {
        display: flex !important;
        flex-direction: column !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(0, 212, 255, 0.08) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .bug-view-page td.category,
    table.bug-view td.category,
    td.category {
        width: 100% !important;
        padding: 12px 16px !important;
        background: rgba(0, 212, 255, 0.1) !important;
        font-weight: 600 !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: var(--electric-blue) !important;
        border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
    }

    .bug-view-page td:not(.category),
    table.bug-view td:not(.category) {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Bugnotes/Activities section - Mobile optimized */
    #bugnotes {
        margin-top: 20px !important;
    }

    #bugnotes .widget-header {
        padding: 14px 16px !important;
    }

    #bugnotes .widget-body {
        padding: 12px !important;
    }

    #bugnotes table {
        display: block !important;
        border-spacing: 0 !important;
    }

    #bugnotes table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Each bugnote as a card */
    #bugnotes table tr:not(.spacer),
    table.bugnotes tr:not(.spacer) {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border: 1px solid rgba(0, 212, 255, 0.1) !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }

    /* Bugnote header - user and date */
    #bugnotes table td:first-child,
    table.bugnotes td.bugnote-meta {
        width: 100% !important;
        padding: 0 0 12px 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
        margin-bottom: 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Username on mobile */
    #bugnotes table td:first-child a[href*="view_user"],
    .bugnote-user {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* Date on mobile - inline with username */
    #bugnotes table td:first-child .small,
    #bugnotes table td:first-child br + span,
    .bugnote-time {
        font-size: 12px !important;
        color: var(--text-dim) !important;
        margin: 0 !important;
    }

    /* Hide line breaks in header cell */
    #bugnotes table td:first-child br {
        display: none !important;
    }

    /* Bugnote content cell */
    #bugnotes table td:last-child,
    table.bugnotes td.bugnote-content {
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    /* Note text content */
    #bugnotes table td:last-child p,
    .bugnote-note p,
    .bugnote-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        padding: 12px 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Inline attachments on mobile */
    #bugnotes a[href*="file_download"],
    .bugnote a[href*="file_download"] {
        display: flex !important;
        width: 100% !important;
        padding: 14px 16px !important;
        margin: 8px 0 !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

    /* Delete button on mobile */
    #bugnotes a[href*="bug_file_delete"],
    .bugnote a[href*="bug_file_delete"] {
        width: 40px !important;
        height: 40px !important;
        margin-top: 8px !important;
        margin-left: 0 !important;
    }

    /* Image previews on mobile */
    #bugnotes img:not([src*="file"]):not(.file-icon),
    .bug-attachment-preview-image img {
        max-width: 100% !important;
        max-height: 400px !important;
        width: auto !important;
        margin: 12px 0 !important;
    }

    /* Bugnote buttons container */
    #bugnotes .btn-group,
    .bugnote-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(0, 212, 255, 0.08) !important;
    }

    #bugnotes .btn,
    .bugnote-buttons .btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 44px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* Description field - full width, readable */
    td.bug-description,
    .bug-description-full,
    td[id*="description"] {
        padding: 16px !important;
    }

    td.bug-description p,
    .bug-description-full p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin: 0 !important;
    }

    /* Add bugnote form on mobile */
    #bugnote_add,
    .bugnote-add-form {
        padding: 16px !important;
    }

    #bugnote_add textarea,
    .bugnote-add-form textarea {
        min-height: 100px !important;
        font-size: 16px !important;
    }

    #bugnote_add .btn,
    .bugnote-add-form .btn {
        width: 100% !important;
        min-height: 50px !important;
        margin-top: 12px !important;
    }
}

/* ============================================
   VERY SMALL MOBILE (< 400px)
   ============================================ */
@media (max-width: 400px) {
    /* Tighter spacing */
    .bug-view-page td.category,
    table.bug-view td.category {
        padding: 10px 14px !important;
        font-size: 10px !important;
    }

    .bug-view-page td:not(.category),
    table.bug-view td:not(.category) {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    /* Bugnotes tighter */
    #bugnotes table tr:not(.spacer) {
        padding: 14px !important;
    }

    #bugnotes a[href*="file_download"] {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    /* Single column buttons */
    #bugnotes .btn {
        flex: 1 1 100% !important;
    }
}

/* ============================================
   BUGNOTE ACTION BUTTONS - Compact Control Bar
   Edit, Delete, Make Private buttons
   ============================================ */

/* Container for bugnote action buttons - discrete by default */
.bugnote .btn-group.visible-on-hover,
.bugnote-buttons,
td .btn-group.visible-on-hover {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 0.3 !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    transition: opacity 0.2s ease !important;
}

/* Show fully on row/parent hover */
tr:hover .btn-group.visible-on-hover,
.bugnote:hover .btn-group.visible-on-hover,
td:hover .btn-group.visible-on-hover {
    opacity: 1 !important;
}

/* Each button form in the group */
.bugnote .btn-group .pull-left,
.bugnote .btn-group .single-button-form,
td .btn-group.visible-on-hover .pull-left {
    float: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The actual buttons - minimal icon style */
.bugnote .btn-group .btn,
.bugnote .single-button-form .btn,
td .btn-group.visible-on-hover .btn,
.btn-group.visible-on-hover .btn,
.btn-group.visible-on-hover a.btn,
.btn-xs.btn-white.btn-round {
    display: inline-block !important;
    box-sizing: border-box !important;
    padding: 4px 10px !important;
    margin: 0 2px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 3px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    cursor: pointer !important;
}

.bugnote .btn-group .btn:hover,
.bugnote .single-button-form .btn:hover,
td .btn-group.visible-on-hover .btn:hover,
.btn-group.visible-on-hover .btn:hover,
.btn-group.visible-on-hover a.btn:hover,
.btn-xs.btn-white.btn-round:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    color: #00d4ff !important;
}

/* Delete button - subtle red styling */
.bugnote .btn-group a[href*="delete"],
td .btn-group.visible-on-hover a[href*="delete"],
.btn-group.visible-on-hover a[href*="delete"] {
    color: rgba(239, 68, 68, 0.6) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

.bugnote .btn-group a[href*="delete"]:hover,
td .btn-group.visible-on-hover a[href*="delete"]:hover,
.btn-group.visible-on-hover a[href*="delete"]:hover,
.bugnote .btn-group form[action*="delete"] .btn:hover,
td .btn-group.visible-on-hover form[action*="delete"] .btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}

/* Hide fieldset styling */
.bugnote .btn-group fieldset,
td .btn-group.visible-on-hover fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* ============================================
   BULK ACTIONS DROPDOWN - Clean minimal design
   Single dropdown for all tfoot actions
   ============================================ */

/* Hide the original tfoot btn-group (JS hides it, CSS backup) */
tfoot .btn-group:not(#glass-bulk-actions) {
    display: none !important;
}

/* Tfoot container - minimal */
tfoot,
tfoot tr,
tfoot tr td {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
}

/* Bulk actions container */
.glass-bulk-actions {
    position: relative;
    display: inline-block;
    margin: 8px 0;
}

/* Trigger button - compact pill */
.glass-bulk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.glass-bulk-trigger:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--electric-blue);
}

.glass-bulk-actions.open .glass-bulk-trigger {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--electric-blue);
    color: var(--electric-blue);
}

.trigger-icon {
    font-size: 14px;
}

.trigger-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.glass-bulk-actions.open .trigger-arrow {
    transform: rotate(180deg);
}

/* Dropdown menu */
.glass-bulk-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    max-width: 320px;
    background: rgba(10, 22, 40, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 212, 255, 0.1);
    padding: 8px;
    z-index: 10000;
    max-height: 400px;
    overflow-y: auto;
}

/* Menu items */
.glass-bulk-item {
    margin: 4px 0;
}

/* Simple action buttons in menu */
.glass-bulk-btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.glass-bulk-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    color: var(--electric-blue);
}

/* Select wrapper for Assign/Status */
.glass-bulk-select-wrapper {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin: 4px 0;
}

.glass-bulk-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.glass-bulk-select-wrapper select {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    margin-bottom: 8px;
}

.glass-bulk-submit {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, var(--electric-blue) 0%, #0099cc 100%);
    border: none;
    border-radius: 6px;
    color: #0A1628;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.glass-bulk-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
}

/* Divider between groups */
.glass-bulk-item + .glass-bulk-item .glass-bulk-select-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 8px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .glass-bulk-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        max-height: 60vh;
        border-radius: 16px 16px 0 0;
        padding: 12px;
    }

    .glass-bulk-trigger {
        padding: 12px 20px;
        font-size: 14px;
    }

    .glass-bulk-btn {
        padding: 14px 16px;
        font-size: 15px;
    }
}

/* ============================================
   PAGINATION - Ensure visible
   ============================================ */

.pager,
.pagination,
.buglist-pager,
nav.pagination,
.widget-toolbox .pagination {
    display: flex !important;
    visibility: visible !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 12px 0 !important;
    margin: 8px 0 !important;
    justify-content: center !important;
}

.pager a,
.pager span,
.pagination a,
.pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.pager a:hover,
.pagination a:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.4) !important;
    color: var(--electric-blue) !important;
}

.pager .current,
.pagination .active a,
.pagination .current {
    background: var(--electric-blue) !important;
    border-color: var(--electric-blue) !important;
    color: #000 !important;
    font-weight: 600 !important;
}

/* ============================================
   BUGNOTE EDIT PAGE & STATUS CHANGE PAGE
   Ensure submit/save buttons are visible
   ============================================ */

/* Force visibility of form buttons on edit pages */
form[action*="bugnote_update"],
form[action*="bugnote_edit"],
form[action*="bug_change_status"],
form[action*="bug_update"],
.widget-box form,
#bugnote_edit_form,
#bug_change_status_form {
    display: block !important;
}

/* Submit buttons for all forms */
form[action*="bugnote"] input[type="submit"],
form[action*="bug_change"] input[type="submit"],
form[action*="bug_update"] input[type="submit"],
.widget-body input[type="submit"],
.widget-main input[type="submit"],
.center input[type="submit"],
.center-block input[type="submit"],
td.center input[type="submit"],
.form-container input[type="submit"],
input[type="submit"].btn,
input[type="submit"].btn-primary,
input[type="submit"].btn-success,
button[type="submit"].btn,
button[type="submit"].btn-primary,
button[type="submit"].btn-success {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 14px 28px !important;
    margin: 12px 4px !important;
    background: linear-gradient(135deg, var(--electric-blue) 0%, #0099cc 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #0A1628 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
}

form[action*="bugnote"] input[type="submit"]:hover,
form[action*="bug_change"] input[type="submit"]:hover,
form[action*="bug_update"] input[type="submit"]:hover,
.widget-body input[type="submit"]:hover,
.widget-main input[type="submit"]:hover,
input[type="submit"].btn:hover,
button[type="submit"].btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4) !important;
}

/* Center container for buttons */
.center,
td.center,
.center-block,
.text-center {
    text-align: center !important;
}

/* Button group styling on forms */
.widget-toolbox .btn,
.form-container .btn,
tfoot .btn,
form .btn-white,
form .btn-default {
    display: inline-block !important;
    visibility: visible !important;
    margin: 4px !important;
}

/* Status change form specific */
form[name="update_bug_form"] input[type="submit"],
form[name="change_status_form"] input[type="submit"] {
    display: inline-block !important;
    visibility: visible !important;
}

/* Resolution dropdown on status change */
select[name="resolution"],
select[name="status"],
select[name="handler_id"],
form select.input-sm,
form select.form-control {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 12px 16px !important;
    margin: 8px 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
}

/* Form layout on edit pages */
.widget-box .widget-body form,
.widget-box .widget-main form {
    padding: 16px !important;
}

.widget-box .widget-body form .form-group,
.widget-box .widget-main form .form-group,
.widget-box form table tr {
    margin-bottom: 16px !important;
}

/* Textarea for note editing */
form textarea[name="bugnote_text"],
form textarea[name="note"],
form textarea.form-control {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 150px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

form textarea:focus {
    border-color: var(--electric-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15) !important;
    outline: none !important;
}

/* Widget footer with buttons */
.widget-box tfoot,
.widget-box .widget-toolbox,
form tfoot {
    display: block !important;
    visibility: visible !important;
    padding: 16px !important;
    text-align: center !important;
}

/* Ensure the widget-toolbox buttons are visible */
.widget-toolbox .btn-toolbar,
.widget-toolbox .form-inline {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* ============================================
   FINAL OVERRIDES - Highest specificity
   ============================================ */

/* Hide widget-toolbox left buttons (Send Reminder, Jump to Notes/History) */
.widget-toolbox .btn-group.pull-left {
    display: none !important;
}

/* Force attachment image preview - 4x larger (was 250px, now ~1000px) */
.bug-attachment-preview-image img[style],
.bug-attachment-preview-image img,
div.bug-attachment-preview-image img,
img[style*="max-height:250px"],
img[style*="max-height: 250px"] {
    max-width: 100% !important;
    max-height: 1000px !important;
    min-width: 400px !important;
    min-height: 300px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    cursor: zoom-in !important;
    display: block !important;
    margin: 20px 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.bug-attachment-preview-image {
    display: block !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
}

.bug-attachment-preview-image a {
    display: block !important;
}

/* File delete button - use 'all: unset' to reset Bootstrap */
.btn-group.visible-on-hover .pull-left a,
.btn-group.visible-on-hover a.btn,
a.btn[href*="bug_file_delete"] {
    all: unset !important;
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: rgba(220, 50, 50, 0.15) !important;
    border: 1px solid rgba(220, 50, 50, 0.4) !important;
    border-radius: 3px !important;
    color: #e57373 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

a.btn[href*="bug_file_delete"]:hover,
.btn-group.visible-on-hover a.btn:hover {
    background: rgba(220, 50, 50, 0.25) !important;
    border-color: rgba(220, 50, 50, 0.6) !important;
    color: #ef5350 !important;
}

/* ============================================
   LIVE SEARCH BAR - View Issues Page
   ============================================ */

.glass-live-search {
    display: flex !important;
    align-items: center;
    padding: 4px 0;
    max-width: 280px;
    min-width: 200px;
    z-index: 100;
}

/* Ensure widget header can contain absolute positioned search */
.widget-header {
    position: relative !important;
}

/* When in widget header - positioned on right */
.widget-header .glass-live-search {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.glass-live-search .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    transition: all 0.2s ease;
}

.glass-live-search .search-input-wrapper:focus-within {
    border-color: rgba(0, 212, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
}

.glass-live-search .search-icon {
    position: absolute;
    left: 12px;
    color: rgba(0, 212, 255, 0.6);
    font-size: 14px;
    pointer-events: none;
}

.glass-live-search .glass-search-input {
    width: 100%;
    padding: 8px 70px 8px 36px;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 14px;
    outline: none !important;
    box-shadow: none !important;
}

.glass-live-search .glass-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

.glass-live-search .glass-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.glass-live-search .search-clear {
    position: absolute;
    right: 70px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.glass-live-search .search-clear:hover {
    background: rgba(255, 100, 100, 0.3);
    color: #ff6666;
}

.glass-live-search .search-results-count {
    position: absolute;
    right: 12px;
    font-size: 11px;
    color: rgba(0, 212, 255, 0.8);
    white-space: nowrap;
    padding: 2px 8px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 10px;
}

/* Make toolbar flex for search + buttons layout */
.widget-toolbox .btn-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Responsive search bar */
@media (max-width: 768px) {
    /* On mobile, remove absolute positioning so it drops below title */
    .widget-header .glass-live-search {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 0 !important;
        padding: 0 !important;
    }

    /* Make widget header flex column on mobile to stack title and search */
    .widget-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-bottom: 8px !important;
    }

    /* Keep title full width */
    .widget-header .widget-title,
    .widget-header h4 {
        width: 100%;
    }

    .glass-live-search {
        max-width: 100%;
        margin: 8px 0;
        width: 100%;
    }

    .glass-live-search .glass-search-input {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .glass-live-search .glass-search-input::placeholder {
        font-size: 12px;
    }
}