:root {
    --bx-red: #e61e1e;      /* Logo wala Red */
    --bx-white: #ffffff;
    --bx-light-red: #fff5f5; /* Hover effects ke liye */
    --bx-border: #f0f0f0;    /* Halka gray border (Black nahi) */
    --bx-text: #444444;      /* Dark gray text (Pure black nahi) */
}

body {
    background-color: #fdfdfd;
    color: var(--bx-text);
}

/* Sidebar Styling */
.bx-sidebar-section {
    background: var(--bx-white);
    border-right: 1px solid var(--bx-sky-border);
    height: 100%;
}

.bx-heading {
    color: var(--bx-sky-primary);
    font-size: 11px;
    font-weight: 800;
    padding: 15px 20px 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Sidebar Buttons */
.bx-tool-link {
    display: flex;
    align-items: center;
    padding: 10px 25px;
    color: var(--bx-text-main);
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
    border-left: 3px solid transparent;
}

.bx-tool-link i {
    margin-right: 12px;
    font-size: 18px;
    color: var(--bx-sky-primary);
}

.bx-tool-link:hover {
    background: #f0f7ff;
    color: var(--bx-sky-primary);
    border-left: 3px solid var(--bx-sky-primary);
}

/* Property Panel Inputs */
.bx-prop-group {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f1f1;
}

.bx-prop-label {
    font-size: 12px;
    color: var(--bx-text-light);
    margin-bottom: 5px;
    display: block;
}

.bx-input-sm {
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--bx-sky-border);
}

/* Canvas Area */
.bx-canvas-container {
    background: #e9eff5;
    overflow: auto;
    position: relative;
}

/* Drawing Board with Grid */
.bx-drawing-board {
    background-color: white;
    background-image: 
        linear-gradient(to right, #f1f1f1 1px, transparent 1px),
        linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);
    background-size: 20px 20px; /* Grid size */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #ccc;
    position: relative;
    margin: auto;
}
/* Custom Button for Label Settings */
.bx-btn-sky {
    background-color: var(--bx-sky-primary);
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 8px;
    transition: 0.3s;
}

.bx-btn-sky:hover {
    background-color: #007bbd;
    box-shadow: 0 4px 12px rgba(0, 149, 218, 0.2);
}
/* Layer Item Styling */
.bx-layer-item {
    background: transparent;
    border-bottom: 1px solid var(--bx-sky-border) !important;
    font-size: 13px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.2s;
}

.bx-layer-item:hover {
    background-color: var(--bx-sky-light);
}

.bx-layer-item.active {
    background-color: #eef7ff;
    border-left: 3px solid var(--bx-sky-primary);
}

.bx-layer-actions i {
    margin-left: 8px;
    cursor: pointer;
    color: var(--bx-text-light);
}

.bx-layer-actions i:hover {
    color: var(--bx-sky-primary);
}
/* Professional Context Menu Styling */
.bx-context-menu {
    position: fixed;
    z-index: 10000;
    background: white;
    border: 1px solid #d1e3f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
    border-radius: 4px; /* Thore sharp corners zyada professional lagte hain */
    width: 150px;       /* Width kam kar di */
    padding: 3px 0;    /* Top/Bottom padding bilkul kam */
}

.bx-context-menu li {
    padding: 5px 12px;  /* Items ke beech ka fasla kam kar diya */
    font-size: 12px;    /* Font size chota kar diya */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;           /* Icon aur text ka gap kam kar diya */
    color: #34495e;
}


.bx-context-menu li:hover {
    background-color: #f0f7ff;
    color: #0095da;
}

.bx-context-menu li i {
    font-size: 14px;    /* Icons chote kar diye */
    color: #95a5a6;
}
.bx-context-menu hr {
    margin: 3px 0 !important; /* Separator lines ka gap kam */
    opacity: 0.1;
}

/* Layer Item Clean Look */
.bx-layer-item {
    background: white !important;
    border-bottom: 1px solid #f1f4f8 !important;
    padding: 12px 15px !important;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bx-layer-item.active {
    background-color: #eef7ff !important;
    border-left: 4px solid #0095da !important;
}
/* Smart & Compact Dropdown for Sidebar */
.bx-sidebar-dropdown {
    border: 1px solid var(--bx-sky-border) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    border-radius: 6px !important;
    min-width: 150px !important;
    padding: 4px 0 !important;
    margin-left: 10px !important; /* Sidebar se thora hat kar khulega */
    background-color: white !important;
    transform: translateY(-150px) !important;
}

.bx-sidebar-dropdown .dropdown-item {
    font-size: 13px;
    color: var(--bx-text-main);
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
}

.bx-sidebar-dropdown .dropdown-item:hover {
    background-color: #f0f7ff; /* Light sky hover */
    color: var(--bx-sky-primary);
}

.bx-sidebar-dropdown .dropdown-item i {
    font-size: 15px;
    color: #7f8c8d; /* Icons ka default rang halka */
}

.bx-sidebar-dropdown .dropdown-item:hover i {
    color: var(--bx-sky-primary);
}

/* Arrow (Caret) ko chota karne ke liye */
.dropdown-toggle::after {
    font-size: 10px;
    vertical-align: middle;
    color: #aab0b6;
}
/* 1. Shapes Dropdown Arrow Fix */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: 0.25em;
    content: "";
    border-top: 0.4em solid;
    border-right: 0.4em solid transparent;
    border-bottom: 0;
    border-left: 0.4em solid transparent;
    color: var(--bx-sky-primary); /* Arrow ka rang sky blue */
}

/* 2. Sidebar Scroll Fix (Lock khatam karne ke liye) */
aside.col-md-3 {
    height: calc(100vh - 60px); /* Top navbar ki height nikaal kar */
    overflow-y: auto !important; /* Scroll enable karein */
    padding-bottom: 50px;
}

/* 3. Input Group Styling */
.input-group-text {
    font-size: 10px;
    border-color: var(--bx-sky-border);
}/* Right Sidebar Layout Fix */
aside.col-md-3 {
    height: calc(100vh - 90px); /* Top Navbar aur Footer ki height nikaal kar */
    overflow-y: auto !important;
    padding-bottom: 150px !important; /* Ye neechay 150px ki khali jagah chor dega */
    background-color: white;
}

/* Har property group ke beech thora fasla */
.bx-prop-group {
    margin-bottom: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f4f8;
}

/* Scrollbar ko sleek banane ke liye (Optional) */
aside.col-md-3::-webkit-scrollbar {
    width: 4px;
}
aside.col-md-3::-webkit-scrollbar-thumb {
    background: var(--bx-sky-border);
    border-radius: 10px;
}
/* Tiny Alignment Buttons (Figma Standard) */
.bx-btn-tiny {
    background: transparent;
    border: none;
    padding: 4px 6px;
    font-size: 15px; /* Icon size */
    color: #7f8c8d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bx-btn-tiny:hover {
    background-color: #f0f7ff;
    color: var(--bx-sky-primary);
}

.bx-btn-tiny:active {
    background-color: #e0efff;
    transform: translateY(1px);
}
.bx-navbar {
    background-color: var(--bx-white) !important;
    border-bottom: 2px solid var(--bx-red);
    height: 65px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 2. Sidebar Tools: Red Icons, White Background */
.bx-sidebar-section {
    background: var(--bx-white);
    border-right: 1px solid var(--bx-border);
}

.bx-tool-link {
    color: var(--bx-text);
}

.bx-tool-link i {
    color: var(--bx-red); /* Saare icons Red */
}

.bx-tool-link:hover {
    background-color: var(--bx-light-red);
    color: var(--bx-red);
}

/* 3. Buttons: Red background, White text */
.bx-btn-sky, .btn-primary {
    background-color: var(--bx-red) !important;
    color: var(--bx-white) !important;
    border: none !important;
    border-radius: 4px;
}

/* 4. Active Elements */
.bx-layer-item.active {
    background-color: var(--bx-light-red) !important;
    border-left: 4px solid var(--bx-red) !important;
    color: var(--bx-red);
}

.bx-heading {
    color: var(--bx-red);
    font-weight: 700;
}
/* Professional Input Styling (No Black, Only Red/White/Gray) */

/* 1. Labels ko thora bold aur professional karein */
.bx-prop-label {
    font-size: 11px;
    font-weight: 700;
    color: #666; /* Halka gray taake likhayi saaf ho */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    display: block;
}

/* 2. Asli Input Box ki styling */
.form-control.bx-input-sm, .form-select.bx-input-sm {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Halka border */
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    color: #333;
    transition: all 0.2s ease-in-out;
}

/* 3. Jab user dabba par click kare (Red Highlight) */
.form-control.bx-input-sm:focus, .form-select.bx-input-sm:focus {
    border-color: var(--bx-red); /* Click karne par Laal border */
    box-shadow: 0 0 0 3px rgba(230, 30, 30, 0.1); /* Halka laal saya */
    outline: none;
    background-color: #fff;
}

/* 4. Group dabba ko thori padding dein */
.bx-prop-group {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5;
    background-color: #ffffff;
}
/* --- BANEXCITE RED THEME HOVER SYSTEM --- */

/* 1. Sidebar Tool Buttons Hover */
.bx-tool-link:hover {
    background-color: #fff5f5 !important; /* Halka Red Tint */
    color: var(--bx-red) !important;
    border-left: 3px solid var(--bx-red);
}

.bx-tool-link:hover i {
    color: var(--bx-red) !important;
}

/* 2. Dropdown Items Hover (Barcodes, Shapes, Units) */
.dropdown-item:hover, .dropdown-item:focus {
    background-color: #fff5f5 !important;
    color: var(--bx-red) !important;
}

/* 3. Right-Click Context Menu Hover */
.bx-context-menu li:hover {
    background-color: #fff5f5 !important;
    color: var(--bx-red) !important;
}

.bx-context-menu li:hover i {
    color: var(--bx-red) !important;
}

/* 4. Layer List Items Hover & Active */
.bx-layer-item:hover {
    background-color: #fffafa !important;
}

.bx-layer-item.active {
    background-color: #fff5f5 !important; /* Active selected layer */
    border-left: 4px solid var(--bx-red) !important;
    color: var(--bx-red);
}

/* 5. Compact Buttons (Alignment buttons) */
.bx-btn-tiny:hover {
    background-color: #fff5f5 !important;
    color: var(--bx-red) !important;
}
/* --- 1. DROPDOWN & SELECT FOCUS FIX --- */
.form-select:focus, .form-control:focus {
    border-color: var(--bx-red) !important;
    box-shadow: 0 0 0 3px rgba(230, 30, 30, 0.15) !important; /* Halka red glow */
}

/* Dropdown ke andar jo selection ka rang hota hai (kuch browsers mein) */
select.bx-input-sm {
    accent-color: var(--bx-red);
}

/* --- 2. ORIENTATION BUTTONS FIX (Blue Border khatam) --- */
.btn-outline-primary {
    border-color: var(--bx-red) !important;
    color: var(--bx-red) !important;
}

.btn-outline-primary:hover, 
.btn-outline-primary:active, 
.btn-outline-primary:focus {
    background-color: var(--bx-red) !important;
    border-color: var(--bx-red) !important;
    color: white !important;
}

/* Jab button select ho (Active state) */
.btn-check:checked + .btn-outline-primary, 
.btn-outline-primary.active {
    background-color: var(--bx-red) !important;
    color: white !important;
    border-color: var(--bx-red) !important;
}

/* Icons ka rang bhi red rakhein buttons ke andar */
.btn-outline-primary i {
    color: var(--bx-red);
}
.btn-outline-primary:hover i, 
.btn-outline-primary:active i {
    color: white !important;
}
/* --- POINT 2 & 9: RULER SYSTEM STYLING --- */

:root {
    --bx-ruler-size: 25px; /* Paimana ki chorai */
}

/* Poora workspace container */
.bx-ruler-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: var(--bx-ruler-size) 1fr;
    grid-template-rows: var(--bx-ruler-size) 1fr;
    background-color: #ffffff;
    border: 1px solid var(--bx-border);
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
}

/* Ruler General Style */
.bx-ruler {
    background-color: #fdfdfd;
    color: #999;
    font-size: 9px;
    position: relative;
    overflow: hidden;
}

/* Horizontal Ruler */
.bx-ruler-h {
    grid-column: 2;
    grid-row: 1;
    border-bottom: 1px solid var(--bx-border);
    width: 100%;
    height: var(--bx-ruler-size);
}

/* Vertical Ruler */
.bx-ruler-v {
    grid-column: 1;
    grid-row: 2;
    border-right: 1px solid var(--bx-border);
    width: var(--bx-ruler-size);
    height: 100%;
}

/* Corner Intersection */
.bx-ruler-corner {
    grid-column: 1;
    grid-row: 1;
    background-color: #f5f5f5;
    border-right: 1px solid var(--bx-border);
    border-bottom: 1px solid var(--bx-border);
}

/* Canvas Area within Rulers */
.bx-canvas-workspace {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    overflow: auto; /* Agar label bada ho to scroll ho jaye */
    background-color: var(--bx-editor-bg);
}

.bx-drawing-board {
    margin: 0; /* JS se handle hoga */
    background-color: white;
}
/* Ruler Mouse Indicators */
.bx-ruler-indicator-h {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #e61e1e; /* Red color */
    display: none;
    z-index: 10;
}

.bx-ruler-indicator-v {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e61e1e; /* Red color */
    display: none;
    z-index: 10;
}
/* --- POINT 1: DASHBOARD OVERLAY STYLES --- */

.bx-dashboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Pure White */
    z-index: 99999; /* Sab se upar */
    transition: transform 0.5s ease-in-out;
}

/* Jab dashboard chhupana ho */
.bx-dashboard-hidden {
    transform: translateY(-100%); /* Screen se upar nikal jayega */
}

/* Action Cards */
.bx-dash-card {
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #fdfdfd;
}

.bx-dash-card:hover {
    border-color: var(--bx-red);
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(230, 30, 30, 0.1) !important;
}

.bx-dash-card i {
    transition: transform 0.3s ease;
}

.bx-dash-card:hover i {
    transform: scale(1.1);
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Dashboard container ko clickable rakhein */
.bx-dashboard-overlay {
    pointer-events: all !important;
}

/* Jab dashboard chhup jaye toh clicks allow karein peeche wali screen par */
.bx-dashboard-hidden {
    pointer-events: none !important;
    transform: translateY(-100%);
    opacity: 0;
}
.bx-dashboard-overlay {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth sliding */
    pointer-events: all; /* Taake click ho sakay */
}

/* Jab dashboard hat jaye toh neechay wala designer kaam kare */
.bx-dashboard-hidden {
    transform: translateY(-100%);
    pointer-events: none; 
}
/* Sidebar Select Styling */
.form-select.bx-input-sm {
    border: 1px solid var(--bx-border);
    border-radius: 4px;
    font-size: 13px;
    padding: 6px 12px;
    background-color: #ffffff;
    cursor: pointer;
}

/* Jab dabba click ho (Focus) */
.form-select.bx-input-sm:focus {
    border-color: var(--bx-red) !important;
    box-shadow: 0 0 0 3px rgba(230, 30, 30, 0.1) !important;
    outline: none;
}

/* optgroup (Dropdown ke andar headings) ka style */
optgroup {
    font-size: 11px;
    font-weight: 700;
    color: var(--bx-red);
    background: #fdfdfd;
}

option {
    color: #444;
    padding: 5px;
}
/* assets/css/style.css mein ye check karein */
.bx-dashboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 99999;
    
    /* --- YE SAB SE ZAROORI LINE HAI --- */
    pointer-events: all !important; 
    /* ---------------------------------- */
    
    display: flex;
    transition: transform 0.6s ease-in-out;
}
/* =========================================
   BANEXCITE - ZOOM CONTROLS
   ========================================= */

.bx-zoom-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;

    display: flex;
    align-items: center;
    gap: 4px;

    background: #ffffff;
    padding: 5px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.bx-zoom-controls button {
    width: 32px;
    height: 30px;

    border: none;
    background: transparent;

    color: #333;
    font-size: 18px;
    font-weight: 600;

    border-radius: 6px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.bx-zoom-controls button:hover {
    background: #f1f1f1;
}

.bx-zoom-controls #zoom-level {
    min-width: 52px;
    text-align: center;

    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.bx-zoom-controls #btn-zoom-reset {
    width: auto;
    padding: 0 8px;
    font-size: 12px;
    border-left: 1px solid #e5e5e5;
    border-radius: 0 6px 6px 0;
}

/* Zoom controls screen par hain,
   print mein nazar nahi aayenge */
@media print {
    .bx-zoom-controls {
        display: none !important;
    }
}
/* =========================================
   BANEXCITE - PROFESSIONAL SHADOW UI
   ========================================= */

.bx-shadow-panel {
    background: #ffffff;
    border: 1px solid #e8e8ec;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bx-shadow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f2;
}

.bx-shadow-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #2f3035;
}

.bx-shadow-title i {
    font-size: 14px;
    color: #6c63ff;
}

/* Small setting rows */
.bx-shadow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.bx-shadow-label {
    font-size: 11px;
    font-weight: 500;
    color: #70727a;
    min-width: 48px;
}

/* Number/value boxes */
.bx-shadow-value {
    width: 52px !important;
    height: 27px !important;
    padding: 2px 6px !important;
    border: 1px solid #dedee4 !important;
    border-radius: 6px !important;
    background: #fafafa !important;
    font-size: 11px !important;
    text-align: center;
    color: #303138;
}

.bx-shadow-value:focus {
    border-color: #8b85ff !important;
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.10) !important;
    outline: none;
}

/* Color picker */
.bx-shadow-color {
    width: 40px !important;
    height: 27px !important;
    padding: 3px !important;
    border: 1px solid #dedee4 !important;
    border-radius: 6px !important;
    cursor: pointer;
}

/* Range slider */
.bx-shadow-slider {
    flex: 1;
    height: 4px !important;
    margin: 0 !important;
    cursor: pointer;
}

/* X / Y boxes */
.bx-shadow-xy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 4px;
}

.bx-shadow-xy-box {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    background: #fafafa;
    border: 1px solid #ededf0;
    border-radius: 7px;
}

.bx-shadow-xy-label {
    font-size: 10px;
    font-weight: 600;
    color: #85868d;
}

.bx-shadow-xy-box input {
    width: 100%;
    height: 24px;
    border: 0;
    background: transparent;
    font-size: 11px;
    text-align: center;
    outline: none;
}

/* Plus button */
.bx-shadow-add {
    width: 25px;
    height: 25px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    color: #6c63ff !important;
    background: #f5f3ff !important;
    border: 1px solid #e5e1ff !important;
}

.bx-shadow-add:hover {
    background: #ece9ff !important;
}

/* Switch */
.bx-shadow-switch .form-check-input {
    width: 30px;
    height: 17px;
    margin: 0;
    cursor: pointer;
}

.bx-shadow-switch .form-check-input:checked {
    background-color: #6c63ff;
    border-color: #6c63ff;
}

/* Smooth hover */
.bx-shadow-panel input,
.bx-shadow-panel button {
    transition: all 0.15s ease;
}
/* =========================================================
   BANEXCITE — PROFESSIONAL COLOR / GRADIENT PANEL
   ========================================================= */

.bx-color-panel {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 7px;
    padding: 8px;
    font-size: 11px;
}

/* -----------------------------
   Color Type Tabs
----------------------------- */

.bx-color-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 8px;
}

.bx-color-tab {
    flex: 1;
    border: 1px solid #e5e5e5;
    background: #f8f8f8;
    color: #666;
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 10px;
    cursor: pointer;
    transition: .15s ease;
}

.bx-color-tab:hover {
    background: #f1f1f1;
}

.bx-color-tab.active {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}


/* -----------------------------
   Main Color Row
----------------------------- */

.bx-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bx-color-picker {
    width: 28px;
    height: 28px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.bx-color-hex {
    height: 28px;
    min-width: 82px;
    padding: 3px 6px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 10px;
    color: #333;
    background: #fff;
    outline: none;
}

.bx-color-hex:focus {
    border-color: #dc3545;
}


/* -----------------------------
   Opacity
----------------------------- */

.bx-opacity-box {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
}

.bx-opacity-label {
    width: 42px;
    color: #777;
    font-size: 10px;
}

.bx-opacity-range {
    flex: 1;
    height: 3px;
    accent-color: #dc3545;
    cursor: pointer;
}

.bx-opacity-value {
    width: 35px;
    height: 24px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 10px;
    padding: 2px;
    outline: none;
}

.bx-opacity-value:focus {
    border-color: #dc3545;
}

.bx-opacity-percent {
    font-size: 10px;
    color: #777;
}


/* -----------------------------
   Plus / Minus Color Stops
----------------------------- */

.bx-gradient-stop-actions {
    display: flex;
    gap: 3px;
    margin-top: 7px;
}

.bx-gradient-stop-btn {
    width: 25px;
    height: 23px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
}

.bx-gradient-stop-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.bx-gradient-stop-btn.add:hover {
    color: #198754;
    border-color: #198754;
}

.bx-gradient-stop-btn.remove:hover {
    color: #dc3545;
    border-color: #dc3545;
}


/* =========================================================
   GRADIENT PANEL
   ========================================================= */

.bx-gradient-panel {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}


/* Gradient Preview */

.bx-gradient-preview {
    width: 100%;
    height: 32px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            #ff0000 0%,
            #0000ff 100%
        );
}


/* -----------------------------
   Gradient Type
----------------------------- */

.bx-gradient-type {
    display: flex;
    gap: 4px;
    margin-bottom: 7px;
}

.bx-gradient-type button {
    flex: 1;
    border: 1px solid #ddd;
    background: #fafafa;
    border-radius: 4px;
    padding: 4px;
    font-size: 10px;
    color: #666;
    cursor: pointer;
}

.bx-gradient-type button.active {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}


/* -----------------------------
   Gradient Stops
----------------------------- */

.bx-gradient-stops {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bx-gradient-stop {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid #eee;
    border-radius: 5px;
    background: #fafafa;
}

.bx-gradient-stop-color {
    width: 25px;
    height: 25px;
    padding: 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.bx-gradient-stop-hex {
    flex: 1;
    height: 25px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 10px;
    outline: none;
}

.bx-gradient-stop-hex:focus {
    border-color: #dc3545;
}

.bx-gradient-stop-position {
    width: 45px;
    height: 25px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 10px;
    text-align: center;
    outline: none;
}

.bx-gradient-stop-position:focus {
    border-color: #dc3545;
}

.bx-gradient-stop-delete {
    width: 23px;
    height: 23px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #aaa;
    border-radius: 4px;
    cursor: pointer;
}

.bx-gradient-stop-delete:hover {
    background: #ffe8eb;
    color: #dc3545;
}


/* -----------------------------
   Gradient Direction / Angle
----------------------------- */

.bx-gradient-direction {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.bx-gradient-direction label {
    width: 45px;
    font-size: 10px;
    color: #777;
}

.bx-gradient-angle {
    flex: 1;
    height: 3px;
    accent-color: #dc3545;
}

.bx-gradient-angle-value {
    width: 38px;
    height: 24px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-size: 10px;
    outline: none;
}

.bx-gradient-angle-value:focus {
    border-color: #dc3545;
}


/* =========================================================
   CANVAS COLOR PICKER
   ========================================================= */

.bx-canvas-picker-btn {
    width: 25px;
    height: 25px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #777;
    padding: 0;
    cursor: pointer;
}

.bx-canvas-picker-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
}


/* =========================================================
   HIDE / SHOW
   ========================================================= */

.bx-color-section {
    display: none;
}

.bx-color-section.active {
    display: block;
}


/* =========================================================
   SMALL SCREEN CLEANUP
   ========================================================= */

@media (max-width: 768px) {

    .bx-color-panel {
        padding: 7px;
    }

    .bx-color-hex {
        min-width: 70px;
    }

    .bx-gradient-stop-position {
        width: 40px;
    }

}
/* =========================================================
   BANEXCITE — PROFESSIONAL FILL EDITOR
   White + Red Theme
   ========================================================= */

.bx-fill-editor {
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #eeeeee;
}


/* =========================================================
   FILL HEADER
   ========================================================= */

.bx-fill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.bx-fill-header .bx-prop-label {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.bx-fill-type {
    width: 125px;
    height: 30px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    font-size: 11px;
    color: #333;
    background-color: #fff;
    box-shadow: none !important;
}

.bx-fill-type:focus {
    border-color: #dc3545;
}


/* =========================================================
   SOLID FILL
   ========================================================= */

.bx-solid-fill {
    width: 100%;
}

.bx-fill-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}


/* Color Picker */

.bx-color-picker {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    padding: 2px !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 4px !important;
    background: #fff;
    cursor: pointer;
    box-shadow: none !important;
}

.bx-color-picker:hover {
    border-color: #dc3545 !important;
}

.bx-color-picker:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .10) !important;
}


/* HEX */

.bx-color-hex {
    height: 28px !important;
    flex: 1;
    min-width: 0;
    padding: 4px 8px !important;
    border: 1px solid #dddddd !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    color: #333;
    background: #fff;
    box-shadow: none !important;
}

.bx-color-hex:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .08) !important;
}


/* =========================================================
   OPACITY ROW
   ========================================================= */

.bx-opacity-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.bx-color-opacity {
    width: 65px !important;
    height: 28px !important;
    padding: 4px 7px !important;
    border: 1px solid #dddddd !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    color: #333;
    box-shadow: none !important;
}

.bx-color-opacity:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .08) !important;
}

.bx-opacity-percent {
    font-size: 10px;
    color: #777;
    margin-right: 3px;
}


/* =========================================================
   PLUS / MINUS BUTTONS
   ========================================================= */

.bx-color-action {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #bdbdbd;
    background: #fff;
    color: #444;
    border-radius: 3px;
    font-size: 17px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    transition: all .15s ease;
}

.bx-color-action:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

.bx-color-action:active {
    transform: scale(.95);
}


/* =========================================================
   PICK FROM CANVAS
   ========================================================= */

.bx-eyedropper-btn {
    width: 100%;
    height: 28px;
    margin-top: 6px;
    padding: 0 8px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 10px;
    text-align: left;
    transition: all .15s ease;
}

.bx-eyedropper-btn i {
    color: #dc3545;
    margin-right: 5px;
}

.bx-eyedropper-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: #fff8f8;
}


/* =========================================================
   GRADIENT SECTION
   ========================================================= */

#bx-gradient-fill {
    width: 100%;
}

.bx-gradient-preview {
    width: 100%;
    height: 34px;
    margin-bottom: 8px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        #ff0000 0%,
        #0000ff 100%
    );
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}


/* =========================================================
   GRADIENT STOPS
   ========================================================= */

.bx-gradient-stops {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bx-gradient-stop {
    padding: 7px;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    background: #fafafa;
}

.bx-gradient-stop:hover {
    border-color: #d6d6d6;
}

.bx-gradient-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}


/* =========================================================
   ADD STOP
   ========================================================= */

.bx-gradient-add-btn {
    width: 100%;
    height: 28px;
    margin-top: 7px;
    padding: 0 8px;
    border: 1px dashed #dc3545;
    border-radius: 4px;
    background: #fff;
    color: #dc3545;
    font-size: 10px;
    font-weight: 500;
    transition: all .15s ease;
}

.bx-gradient-add-btn i {
    font-size: 11px;
    margin-right: 3px;
}

.bx-gradient-add-btn:hover {
    background: #fff5f5;
    border-style: solid;
}


/* =========================================================
   GRADIENT CONTROLS
   ========================================================= */

.bx-gradient-controls {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #eeeeee;
}

.bx-gradient-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.bx-angle-value {
    font-size: 10px;
    color: #dc3545;
    font-weight: 600;
}

.bx-gradient-range {
    height: 16px;
    margin: 0;
    accent-color: #dc3545;
}


/* =========================================================
   GRADIENT DIRECTION
   ========================================================= */

.bx-gradient-direction {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 88px;
    margin: 8px auto 0;
}

.bx-gradient-direction button {
    width: 27px;
    height: 25px;
    padding: 0;
    border: 1px solid #dedede;
    border-radius: 3px;
    background: #fff;
    color: #555;
    font-size: 13px;
    line-height: 22px;
    cursor: pointer;
    transition: all .15s ease;
}

.bx-gradient-direction button:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: #fff7f7;
}

.bx-gradient-direction button.active {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
}


/* =========================================================
   RADIAL POSITION
   ========================================================= */

.bx-radial-position {
    display: flex;
    gap: 6px;
    margin-top: 5px;
}

.bx-radial-input {
    display: flex;
    align-items: center;
    flex: 1;
    height: 28px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.bx-radial-input span {
    width: 24px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: #dc3545;
}

.bx-radial-input input {
    width: 100%;
    height: 26px;
    border: 0;
    outline: none;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}

.bx-radial-input small {
    padding-right: 5px;
    font-size: 9px;
    color: #777;
}


/* =========================================================
   CORNER ROUNDNESS
   ========================================================= */

.bx-corner-editor {
    padding: 9px 12px;
    border-top: 1px solid #eeeeee;
    background: #fff;
}

.bx-corner-editor .bx-prop-label {
    display: block;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #555;
}

.bx-corner-editor .bx-input-sm {
    height: 28px !important;
    font-size: 10px !important;
    border: 1px solid #dddddd;
    border-radius: 4px;
    box-shadow: none !important;
}

.bx-corner-editor .bx-input-sm:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .08) !important;
}


/* =========================================================
   BOOTSTRAP OVERRIDES
   ========================================================= */

.bx-fill-editor input,
.bx-fill-editor select,
.bx-fill-editor button {
    font-family: "Poppins", sans-serif;
}

.bx-fill-editor input[type="number"]::-webkit-inner-spin-button,
.bx-fill-editor input[type="number"]::-webkit-outer-spin-button {
    opacity: .5;
}

.bx-fill-editor input[type="range"] {
    accent-color: #dc3545;
}


/* =========================================================
   HIDDEN STATES
   ========================================================= */

#bx-solid-fill.d-none,
#bx-gradient-fill.d-none,
#bx-linear-controls.d-none,
#bx-radial-controls.d-none {
    display: none !important;
}


/* =========================================================
   SMALL SCREEN / SIDEBAR COMPACT
   ========================================================= */

@media (max-width: 1200px) {

    .bx-fill-editor {
        padding: 9px 10px;
    }

    .bx-fill-type {
        width: 115px;
    }

    .bx-color-opacity {
        width: 58px !important;
    }

}
/* ==========================================
   BANEXCITE — IMAGE FILL
   ========================================== */

.bx-image-fill-panel {
    padding: 10px 12px;
    border-top: 1px solid #eee;
}

.bx-image-preview {
    width: 100%;
    height: 70px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 10px;
    color: #999;
}

.bx-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#image-scale-value,
#image-rotation-value,
#image-opacity-value {
    font-size: 10px;
    color: #888;
}
.bx-sidebar-dropdown {
    transform: translateY(-25px);
}
/* =========================================================
   BANEXCITE - PROFESSIONAL BARCODE DROPDOWN
   ========================================================= */

.bx-sidebar-dropdown {
    min-width: 210px !important;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px !important;
    border: 1px solid #eeeeee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
}

/* Section Heading */
.bx-sidebar-dropdown .dropdown-header {
    padding: 7px 10px 5px !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #999999 !important;
}

/* Barcode Items */
.bx-sidebar-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px !important;
    margin: 2px 0;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500;
    color: #333333 !important;
    transition: all .15s ease;
}

/* Hover */
.bx-sidebar-dropdown .dropdown-item:hover {
    background: #fff1f1 !important;
    color: #e61e1e !important;
    transform: translateX(2px);
}

/* Active / Click */
.bx-sidebar-dropdown .dropdown-item:active {
    background: #e61e1e !important;
    color: #ffffff !important;
}

/* Divider */
.bx-sidebar-dropdown .dropdown-divider {
    margin: 6px 4px !important;
    border-top: 1px solid #eeeeee !important;
}

/* QR */
.bx-sidebar-dropdown #add-qrcode {
    color: #e61e1e !important;
    font-weight: 600 !important;
}

.bx-sidebar-dropdown #add-qrcode:hover {
    background: #fff1f1 !important;
}

/* Scrollbar */
.bx-sidebar-dropdown::-webkit-scrollbar {
    width: 5px;
}

.bx-sidebar-dropdown::-webkit-scrollbar-thumb {
    background: #dddddd;
    border-radius: 10px;
}

.bx-sidebar-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
/* =========================================================
   BARCODE DROPDOWN - NAVBAR GAP & FLOATING LOOK
   ========================================================= */

.bx-sidebar-dropdown {
    margin-top: 90px !important;
    margin-left: 6px !important;

    border-radius: 10px !important;

    /* Navbar se separate floating effect */
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.06),
        0 12px 25px rgba(0, 0, 0, 0.12) !important;

    border: 1px solid #eeeeee !important;
}

/* Dropdown ka top thora soft */
.bx-sidebar-dropdown::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 18px;

    width: 10px;
    height: 10px;

    background: #ffffff;

    border-left: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;

    transform: rotate(45deg);
}
/* BARCODE SECTION HEADINGS */
.dropdown-menu .bx-barcode-section-title {
    color: #e61e1e !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
/* MODULE 3: DATA SOURCE STYLES */
.bx-data-plus-btn i {
    font-size: 1.2rem;
}

.bx-data-status-text {
    font-style: italic;
    font-size: 11px;
}

.bx-data-field-label {
    font-size: 10px;
    letter-spacing: 0.5px;
}

.bx-data-fields-scroll {
    max-height: 150px;
}

/* Modal Styles */
.bx-modal-danger-header {
    background-color: #dc3545 !important;
}

.bx-excel-card {
    border: 2px dashed #ddd !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bx-excel-card:hover {
    border-color: #dc3545 !important;
    background-color: #fff8f8;
}
/* MODULE 3: DATA PREVIEW SWITCH STYLING */
.bx-preview-row {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 10px 0;
    border: 1px solid #eee;
}

.bx-preview-label {
    font-size: 11px;
    font-weight: 700;
    color: #dc3545; /* Red Theme */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    margin-left: 8px;
}

/* Bootstrap switch ko Red rang mein badalna */
.bx-switch-red .form-check-input:checked {
    background-color: #dc3545;
    border-color: #dc3545;
}

.bx-switch-red .form-check-input {
    cursor: pointer;
    width: 2.2em;
    height: 1.1em;
}
/* BANEXCITE SMART DROPDOWN */
.bx-smart-dropdown {
    max-height: 180px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #dee2e6 !important;
}

.gs1-option-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f8f9fa;
}

.gs1-option-item:hover {
    background-color: #fff5f5;
    color: #dc3545;
}

.gs1-option-item.active {
    background-color: #dc3545 !important;
    color: white !important;
}

.gs1-option-item .ai-badge {
    font-weight: bold;
    color: #dc3545;
    background: #fdf2f2;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.gs1-option-item.active .ai-badge {
    color: white;
    background: rgba(255,255,255,0.2);
}

/* Scrollbar */
.bx-smart-dropdown::-webkit-scrollbar { width: 4px; }
.bx-smart-dropdown::-webkit-scrollbar-thumb { background: #dc3545; border-radius: 10px; }/* GS1 SMART LIST STYLING */
#gs1-smart-list .gs1-item {
    padding: 10px 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    border-bottom: 1px solid #eee !important;
    color: #333 !important;
    font-size: 13px !important;
}

#gs1-smart-list .gs1-item:hover {
    background-color: #fff5f5 !important;
    color: #dc3545 !important;
}

#gs1-smart-list .gs1-item.active {
    background-color: #dc3545 !important;
    color: white !important;
}

#gs1-smart-list .ai-number {
    font-weight: bold !important;
    background: #f8f9fa !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    color: #dc3545 !important;
    font-size: 11px !important;
}

#gs1-smart-list .gs1-item.active .ai-number {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
}
/* ==========================================================
   BANEXCITE SMART GS1 LIST STYLING
   ========================================================== */

/* 1. List ka main dabba (Container) */
#gs1-smart-list {
    max-height: 220px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    padding: 0 !important;
    margin-top: 5px !important;
}

/* 2. Har aik item (Row) ki styling */
.gs1-option-row {
    padding: 10px 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f8f9fa !important;
    font-size: 13px !important;
    color: #333 !important;
    transition: all 0.2s ease !important;
}

/* 3. Mouse le jaane par (Hover) effect */
.gs1-option-row:hover {
    background-color: #fff5f5 !important; /* Light Red background */
    color: #dc3545 !important; /* BanExcite Red text */
}

/* 4. Jo item select ho chuka hai (Active) */
.gs1-option-row.active {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

/* 5. AI Number wala badge (Small bold text) */
.gs1-option-row b.text-danger {
    font-weight: 700 !important;
    background: #fdf2f2 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    border: 1px solid #fee2e2 !important;
}

/* 6. Active row ke badge ka color badalna */
.gs1-option-row.active b.text-danger {
    background: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* 7. Scrollbar ko professional banana (Thin Red Scrollbar) */
#gs1-smart-list::-webkit-scrollbar {
    width: 5px !important;
}

#gs1-smart-list::-webkit-scrollbar-thumb {
    background: #dc3545 !important;
    border-radius: 10px !important;
}

#gs1-smart-list::-webkit-scrollbar-track {
    background: #f8f9fa !important;
}
/* BANEXCITE CUSTOM DROPDOWN STYLE */
.bx-custom-list-panel {
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #dc3545 !important; /* Red Border */
}

.gs1-custom-row {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fa;
    font-size: 13px;
    transition: 0.2s;
}

.gs1-custom-row:hover {
    background-color: #fff5f5; /* Light Red */
}

.gs1-custom-row.active {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

.ai-code-badge {
    font-weight: bold;
    color: #dc3545;
    background: #fdf2f2;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
}

.gs1-custom-row.active .ai-code-badge {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* Red Scrollbar */
.bx-custom-list-panel::-webkit-scrollbar { width: 5px; }
.bx-custom-list-panel::-webkit-scrollbar-thumb { background: #dc3545; border-radius: 10px; }