/* =================================================================== */
/* 1. ROOT VARIABLES & GLOBAL RESET                                    */
/* =================================================================== */
:root {
    --primary-color: #007bff;
    --primary-hover-color: #0056b3;
    --background-color: #f0f2f6;
    --container-bg-color: #ffffff;
    --text-color: #333;
    --text-light-color: #666;
    --border-color: #dee2e6;
    --success-color: #28a745;
    --info-color: #17a2b8;
    --error-color: #dc3545;
    --shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
    --input-bg-color: #ffffff;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    display: flex;
    background-color: var(--background-color);
    color: var(--text-color);
    height: 100vh;
    overflow: hidden;
    /* Prevent horizontal scroll */
}

/* =================================================================== */
/* 2. SIDEBAR & NAVIGATION                                             */
/* =================================================================== */
.sidebar {
    width: 280px;
    background-color: var(--container-bg-color);
    border-right: none;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

.sidebar-header {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1.2rem;
    /* Reduced to fit in one line */
    color: var(--primary-color);
    /* Fallback for browsers that don't support clip */
    background: -webkit-linear-gradient(45deg, var(--primary-color), var(--primary-hover-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -0.5px;
    white-space: nowrap;
    /* Prevent wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-nav {
    flex-grow: 1;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-item {
    display: flex;
    align-items: center;
    margin: 0 1rem;
    padding: 0.85rem 1rem;
    color: var(--text-light-color);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.nav-item i {
    width: 24px;
    text-align: center;
    font-size: 1.1rem;
    margin-right: 12px;
    transition: transform 0.3s ease;
}

.nav-item:hover {
    background-color: rgba(0, 123, 255, 0.05);
    color: var(--primary-color);
    transform: translateX(4px);
}

.nav-item:hover i {
    transform: scale(1.2) rotate(5deg);
}

.nav-item.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transform: scale(1);
}

.nav-item.active:hover {
    transform: none;
}

.nav-item.active i {
    transform: scale(1.1);
}

/* Sidebar Footer Buttons */
.sidebar-footer {
    padding: 1.5rem 1rem;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: var(--container-bg-color);
}

.sidebar-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    background-color: transparent;
    border-radius: 10px;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.sidebar-btn i {
    width: 24px;
    text-align: center;
    margin-right: 10px;
    font-size: 1rem;
    color: var(--text-light-color);
}

.sidebar-btn:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: var(--primary-color);
    transform: translateX(3px);
}

.sidebar-btn.logout:hover {
    background-color: rgba(220, 53, 69, 0.05);
    border-color: var(--error-color);
    color: var(--error-color);
}


/* =================================================================== */
/* 3. MAIN CONTENT STRUCTURE                                           */
/* =================================================================== */
.main-content {
    flex-grow: 1;
    padding: 6rem 3rem 2rem 3rem;
    overflow-y: auto;
    position: relative;
}

.top-bar-title {
    margin: 0;
    padding-top: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    position: absolute;
    left: 2rem;
    top: 1.5rem;
    z-index: 990;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: left 0.3s ease;
}

.top-bar-title.title-shifted {
    left: 6rem !important;
}

.page-header {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.page-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    animation: fadeInUp 0.3s ease-out forwards;
}

/* =================================================================== */
/* 4. GLOBAL CONTROLS (REFRESH, SEARCH, PROFILE)                      */
/* =================================================================== */
.top-header-controls {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 1001;
}

/* Global Refresh Button */
.btn-refresh {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--container-bg-color);
    border: 1px solid transparent;
    color: var(--text-light-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-refresh i {
    font-size: 1.1rem;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-refresh:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.25);
}

.btn-refresh:hover i {
    transform: rotate(360deg);
}

.btn-refresh::after {
    content: 'Refresh';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background-color: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-refresh:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Global Animated Search */
.search-wrapper-global {
    position: relative;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0.5rem;
}

.btn-search-trigger {
    position: relative;
    z-index: 10;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--container-bg-color);
    border: 1px solid transparent;
    color: var(--text-light-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#global-search-input {
    position: absolute;
    right: 0;
    width: 45px;
    height: 45px;
    background-color: var(--container-bg-color);
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 5;
    font-size: 1rem;
    color: var(--text-color);
}

.search-wrapper-global.active #global-search-input {
    width: 280px;
    opacity: 1;
    pointer-events: auto;
    padding-left: 1.2rem;
    padding-right: 50px;
    border-color: var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.search-wrapper-global.active .btn-search-trigger {
    background-color: transparent;
    box-shadow: none;
    color: var(--primary-color);
    transform: rotate(90deg);
}

/* Profile Dropdown */
.profile-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    cursor: pointer;
}

.profile-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 220px;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s;
}

.profile-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    text-decoration: none;
}

.dropdown-item:hover {
    background-color: var(--background-color);
}

/* =================================================================== */
/* 5. PAGE INFO & BID LIST CONTAINERS                                  */
/* =================================================================== */
.page-info {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--info-color);
    background-color: #e3f2fd;
    animation: fadeInUp 0.3s ease-out forwards;
}

.bid-list-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
    opacity: 0;
    animation: fadeInUp 0.4s ease-out 0.15s forwards;
}

/* =================================================================== */
/* 6. THE PREMIUM BID CARD                                             */
/* =================================================================== */
.bid-container {
    background: var(--container-bg-color);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
    /* Compact density */
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    animation: fadeInUp 0.4s ease-out forwards;
}

.bid-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-hover-color));
    opacity: 0.7;
    transition: height 0.3s ease;
}

.bid-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

.bid-container:hover::before {
    height: 6px;
    opacity: 1;
}

.bid-container h4 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.02em;
}

.bid-container .caption {
    font-size: 0.95rem;
    color: var(--text-light-color);
    margin-bottom: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Status Grid (Teaser) */
.bid-teaser-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding: 1.25rem;
    background-color: rgba(0, 123, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.teaser-stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.teaser-stat-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-light-color);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.teaser-stat-item .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
}

.teaser-stat-item .value.countdown {
    color: #d32f2f;
    /* Darker red for better contrast */
    font-feature-settings: "tnum";
}

/* =================================================================== */
/* 7. UPCOMING AUCTION SPECIFIC STYLES                                 */
/* =================================================================== */
.route-minimal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-color);
}

.route-minimal-point {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.icon-arrow-slim {
    color: var(--text-light-color);
    font-size: 0.8rem;
    padding: 0 5px;
    opacity: 0.6;
}

.details-minimal-row {
    display: flex;
    gap: 15px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-light-color);
}

.detail-minimal-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.03);
    padding: 4px 8px;
    border-radius: 4px;
}

.timer-minimal-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.timer-countdown-chip {
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
    padding: 4px 12px;
    border-radius: 50px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

/* =================================================================== */
/* 8. BUTTONS & NAVIGATION CONTROLS                                    */
/* =================================================================== */
button {
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:disabled,
.btn-primary.btn-disabled {
    background-color: #bdc3c7 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-back-floating {
    position: absolute;
    top: 1rem;
    left: 2rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--container-bg-color);
    border: 1px solid transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: var(--text-light-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 990;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-back-floating:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.25);
    color: var(--primary-color);
}

/* =================================================================== */
/* 9. SKELETON LOADERS (SHIMMER EFFECT)                                */
/* =================================================================== */
.skeleton-card {
    background: var(--container-bg-color);
    border-radius: 20px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.skeleton-shimmer {
    animation: shimmer 2s linear infinite forwards;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1200px 100%;
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }

    100% {
        background-position: 1200px 0;
    }
}

.sk-header {
    height: 24px;
    width: 40%;
    margin-bottom: 1.5rem;
    border-radius: 6px;
}

.sk-caption {
    height: 16px;
    width: 70%;
    margin-bottom: 2rem;
}

.sk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.sk-box {
    height: 40px;
    width: 100%;
    border-radius: 4px;
}

.sk-btn {
    height: 40px;
    width: 140px;
    border-radius: 50px;
    margin-left: auto;
    display: block;
}



/* =================================================================== */
/* 10. AUCTION DETAILS VIEW (GRID & INFO CARDS)                        */
/* =================================================================== */
.details-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    grid-template-areas:
        "status form"
        "details history";
}

.grid-item-status {
    grid-area: status;
}

.grid-item-form {
    grid-area: form;
}

.grid-item-details {
    grid-area: details;
}

.grid-item-history {
    grid-area: history;
}

.bid-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.info-card {
    background-color: var(--container-bg-color);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease;
}

.info-card h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: -0.5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

/* =================================================================== */
/* 11. LIVE STATUS DASHBOARD (REAL-TIME UPDATES)                       */
/* =================================================================== */
.live-status-card-dashboard {
    background: linear-gradient(135deg, #007bff, #006ce0);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(0, 91, 179, 0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.live-status-card-dashboard .header {
    color: white;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.live-status-card-dashboard .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.live-status-card-dashboard .info-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 0.75rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80px;
}

.live-status-card-dashboard .info-card .label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.live-status-card-dashboard .info-card .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

/* Status Dot Indicators */
.status-indicator-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.status-indicator-box .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-leading .dot {
    background-color: #28a745;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.7);
}

.status-leading .status-text {
    color: #1c7430;
}

.status-competitive .dot {
    background-color: #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
}

.status-competitive .status-text {
    color: #b98900;
}

.status-out-of-contention .dot {
    background-color: #dc3545;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.7);
}

.status-out-of-contention .status-text {
    color: #dc3545;
}

/* =================================================================== */
/* 12. BIDDING FORM & HISTORY TABLES                                   */
/* =================================================================== */
.form-container {
    padding: 1.5rem;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.form-container input {
    width: calc(100% - 1.2rem);
    padding: 0.6rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.form-container .attempts-info {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light-color);
    margin-bottom: 1rem;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    display: block;
    overflow-x: auto;
}

.history-table th,
.history-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.history-table th {
    background-color: #f8f9fa;
}


/* =================================================================== */
/* 13. NEGOTIATION LIST & COLLAPSIBLE CONTENT                          */
/* =================================================================== */
.negotiation-section {
    margin-bottom: 2.5rem;
}

.subsection-header {
    font-size: 1.4rem;
    color: var(--text-color);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.negotiation-bid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.negotiation-bid-header:hover h4 {
    color: var(--primary-color);
}

.toggle-icon {
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.bid-details-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding-top 0.4s ease-out, margin-top 0.4s ease-out, border-top 0.4s ease-out;
}

.bid-details-collapsible-content.show {
    max-height: 1000px;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.mini-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    margin: 1rem auto;
}

/* =================================================================== */
/* 14. NOTIFICATION BADGES & ANIMATIONS                                */
/* =================================================================== */
.btn-negotiate {
    position: relative;
    overflow: visible !important;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--error-color);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    border: 2px solid var(--container-bg-color);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.notification-badge.show {
    transform: scale(1);
    opacity: 1;
}

.nav-notification-dot {
    position: absolute;
    top: 50%;
    left: 145px;
    transform: translateY(-50%) scale(0);
    width: 9px;
    height: 9px;
    background-color: var(--error-color);
    border-radius: 50%;
    border: 1px solid var(--container-bg-color);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.nav-notification-dot.show {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

/* Live-open-bid cue on the "Open" sidebar tab. Toggled from JS whenever
   ListOngoingBids returns > 0 rows so the vendor can see "there is action
   right now" without having to click the tab. Suppressed when the user is
   already on Open (they don't need to be told to go somewhere they're at). */
.nav-item[data-page="Open"].has-live-bid:not(.active) {
    color: #dc2626;
    font-weight: 700;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0));
    animation: liveOpenBidBg 1.2s ease-in-out infinite;
}
.nav-item[data-page="Open"].has-live-bid:not(.active) i {
    color: #dc2626;
    animation: liveOpenBidIcon 0.9s ease-in-out infinite;
}
.nav-item[data-page="Open"].has-live-bid:not(.active) span:first-of-type {
    display: inline-block;
    animation: liveOpenBidText 1.2s ease-in-out infinite;
}
/* Red LIVE pill (Twitch/YouTube-style) appended to the label. Uses the
   label span's ::after so no HTML change is needed. */
.nav-item[data-page="Open"].has-live-bid:not(.active) span:first-of-type::after {
    content: "\25CF LIVE";
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px 2px 5px;
    background: #dc2626;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    border-radius: 3px;
    vertical-align: middle;
    animation: liveOpenBidBadge 1s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
}
@keyframes liveOpenBidBg {
    0%, 100% { background: linear-gradient(90deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0)); }
    50%      { background: linear-gradient(90deg, rgba(220, 38, 38, 0.28), rgba(220, 38, 38, 0)); }
}
@keyframes liveOpenBidIcon {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.2); opacity: 0.55; }
}
@keyframes liveOpenBidText {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(2px); }
}
@keyframes liveOpenBidBadge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}

.pulse-animation {
    animation: pulse 1.5s 2;
}

/* =================================================================== */
/* 15. MODAL & CHAT INTERFACE                                          */
/* =================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.modal-overlay.show {
    display: flex;
}

.modal {
    background-color: var(--container-bg-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.negotiation-modal {
    max-width: 600px;
    height: 70vh;
    max-height: 700px;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.chat-modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
}

.chat-messages {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Chat Bubbles */
.message-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    max-width: 80%;
    line-height: 1.4;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
}

.message-bubble .sender {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 4px;
    display: block;
}

.message-bubble.sent {
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.message-bubble.received {
    background-color: #e9ecef;
    color: var(--text-color);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.message-content {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    word-break: break-word;
}

.message-text {
    flex-grow: 1;
}

.message-time {
    font-size: 0.75rem;
    white-space: nowrap;
    align-self: flex-end;
    opacity: 0.8;
}

.chat-form {
    display: flex;
    padding: 15px;
    border-top: 1px solid var(--border-color);
    background-color: #f8f9fa;
}

#chatMessageInput {
    flex-grow: 1;
    border-radius: 20px;
    margin-right: 10px;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
}

#chatSendBtn {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =================================================================== */
/* 16. THE GOLDEN "WON" TAB THEME (PREMIUM UI)                         */
/* =================================================================== */

/* Active Page Highlights */
[data-active-page="Won"] .bid-container::before {
    background: linear-gradient(90deg, #DAA520, #FFD700) !important;
    height: 4px !important;
    opacity: 1 !important;
}

[data-active-page="Won"] .bid-container .btn-primary {
    background: linear-gradient(135deg, #B8860B, #FFD700) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.4) !important;
}

/* Light Mode Won Card */
[data-active-page="Won"] .bid-container {
    background-color: #fffdf5 !important;
    border: 1px solid rgba(218, 165, 32, 0.25) !important;
}

[data-active-page="Won"] .bid-container h4,
[data-active-page="Won"] .caption strong,
[data-active-page="Won"] .teaser-stat-item .value {
    color: #B8860B !important;
}

/* Red Pulse Animation for Pending Requirements */
@keyframes redPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.8);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.btn-pulse-red {
    animation: redPulse 1.5s infinite;
    border: 2px solid #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05) !important;
}

/* =================================================================== */
/* 17. WON TAB ACTION FORMS & MODALS                                   */
/* =================================================================== */
.won-modal {
    max-width: 1200px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
}

.won-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.action-card {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 12px;
    padding: 1.25rem;
}

.action-card label {
    display: block;
    margin-bottom: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
}

.action-card label i {
    color: #DAA520;
    margin-right: 8px;
}

.input-group-action {
    display: flex;
    gap: 10px;
}

.input-group-action input {
    flex-grow: 1;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* =================================================================== */
/* 18. DOCUMENT MANAGEMENT V2 (COLUMNS & CARDS)                        */
/* =================================================================== */
.doc-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.doc-column {
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.doc-column-header {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 0.5rem;
}

/* Document Card Object */
.doc-card-v2 {
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: transform 0.2s;
    position: relative;
    margin-bottom: 8px;
}

.doc-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.doc-icon-box {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: rgba(0, 123, 255, 0.1);
    color: var(--primary-color);
}

.doc-filename {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.doc-status-badge {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
}

.doc-status-badge.latest {
    background-color: #28a745;
    color: white;
}

.doc-status-badge.archived {
    background-color: #6c757d;
    color: white;
}

/* Greyout Archived Files */
.doc-card-v2.status-ARCHIVED {
    opacity: 0.6;
    filter: grayscale(100%);
}

/* =================================================================== */
/* 19. APP DOWNLOAD & QR CODE UI                                      */
/* =================================================================== */
.app-icon-wrapper {
    background: rgba(61, 220, 132, 0.1);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.app-icon-wrapper i {
    font-size: 2.5rem;
    color: #3DDC84;
}

.app-notes-box {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: left;
    margin-bottom: 1.5rem;
    max-height: 150px;
    overflow-y: auto;
}

.btn-download-app {
    width: 100%;
    padding: 0.9rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #3DDC84;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
}

.qr-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.qr-img {
    width: 140px;
    height: 140px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 5px;
    background: #fff;
}








/* =================================================================== */
/* 20. ACCOUNTS & SETTLEMENTS (DEBIT NOTES & CHALLANS)                 */
/* =================================================================== */
.sub-tabs-container {
    display: flex;
    gap: 10px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}

.sub-tab-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-light-color);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub-tab-btn.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

/* Trip Summary & Challan Cards */
.trip-summary-card {
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.05), rgba(88, 166, 255, 0.01));
    border: 1px solid rgba(88, 166, 255, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.trip-stat {
    display: flex;
    flex-direction: column;
}

.trip-stat-label {
    font-size: 0.75rem;
    color: var(--text-light-color);
    text-transform: uppercase;
}

.trip-stat-val {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.challan-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 10px;
}

.challan-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-PENDING {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.status-APPROVED {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.status-REJECTED {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

/* =================================================================== */
/* 21. CHALLAN CONTROL PANEL & SEARCH DROPDOWN                         */
/* =================================================================== */
.challan-control-panel {
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.panel-inputs {
    display: flex;
    gap: 15px;
    align-items: stretch;
    position: relative;
}

.panel-field {
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
    color: var(--text-color);
    width: 100%;
}

.searchable-dropdown-wrapper {
    position: relative;
    flex-grow: 1;
}

.custom-dropdown-list {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    display: none;
}

.custom-dropdown-list.show {
    display: block;
    animation: fadeInUp 0.2s ease-out;
}

.custom-dropdown-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.custom-dropdown-item:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* =================================================================== */
/* 22. SUPPORT & MODAL REFINEMENTS                                     */
/* =================================================================== */
.support-form-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0.5rem;
}

.upload-drop-zone {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 2.5rem 1rem;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-drop-zone:hover {
    border-color: var(--primary-color);
    background-color: rgba(0, 123, 255, 0.03);
}

.support-type-selector {
    display: flex;
    gap: 8px;
    background: var(--background-color);
    padding: 6px;
    border-radius: 12px;
}

.support-type-btn {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
}

.support-type-btn.active {
    background-color: var(--container-bg-color);
    color: var(--primary-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Dark Mode Support Dialog Fixes */
[data-theme="dark"] .support-form-container textarea,
[data-theme="dark"] .support-form-container input[type="text"] {
    background-color: #0d1117 !important;
    color: #e6edf3 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .support-form-container textarea::placeholder,
[data-theme="dark"] .support-form-container input::placeholder {
    color: #8b949e !important;
    opacity: 0.9 !important;
}

[data-theme="dark"] .support-type-btn:not(.active) {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .support-type-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .upload-drop-zone {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: #30363d;
}

[data-theme="dark"] .upload-drop-zone .file-name-display {
    color: #8b949e !important;
}

/* =================================================================== */
/* 23. DARK MODE - PREMIUM SLATE THEME                                 */
/* =================================================================== */
[data-theme="dark"] {
    --primary-color: #58a6ff;
    --background-color: #0d1117;
    --container-bg-color: #161b22;
    --text-color: #c9d1d9;
    --text-light-color: #8b949e;
    --border-color: #30363d;
    --input-bg-color: #010409;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] body {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .info-card,
[data-theme="dark"] .form-container,
[data-theme="dark"] .modal {
    background-color: var(--container-bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] .panel-field {
    background-color: #010409;
    border-color: #30363d;
    color: #c9d1d9;
}

[data-theme="dark"] .bid-container {
    background-color: var(--container-bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .bid-container:hover {
    background-color: #1c2128;
}

/* Dark Mode Won Tab */
[data-theme="dark"] [data-active-page="Won"] .bid-container {
    border: 1px solid rgba(218, 165, 32, 0.3) !important;
}

[data-theme="dark"] [data-active-page="Won"] .bid-container h4 {
    color: #FFD700 !important;
}

/* =================================================================== */
/* 24. RESPONSIVE DESIGN & MOBILE ADJUSTMENTS                          */
/* =================================================================== */
@media (max-width: 800px) {
    .sidebar {
        position: fixed;
        transform: translateX(-100%);
        z-index: 2000;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .overlay {
        display: block;
    }

    .main-content {
        padding: 1.5rem;
        padding-top: 90px;
    }

    .menu-toggle-btn {
        display: block;
    }

    .top-header-controls {
        position: fixed;
        top: 1rem;
        right: 1.5rem;
        z-index: 1002;
    }

    .top-bar-title {
        left: 70px;
        font-size: 1.2rem;
        top: 1.2rem;
        max-width: 40%;
    }

    .top-bar-title.title-shifted {
        left: 130px !important;
    }

    .details-layout-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "status" "form" "history" "details";
    }
}

/* Utilities */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(240, 242, 246, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 3000;
}

[data-theme="dark"] .spinner-overlay {
    background: rgba(18, 18, 18, 0.8);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================================================== */
/* 25. UTILITY & NAVIGATION FIXES                                      */
/* =================================================================== */

/* Credentials Expander in Sidebar */
.credentials-expander input[type="checkbox"] {
    display: none;
}

.expander-label {
    display: block;
    padding: 0.5rem;
    font-weight: 600;
    cursor: pointer;
}

.credentials-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.credentials-expander input[type="checkbox"]:checked+.expander-label+.credentials-content {
    max-height: 300px;
    padding-top: 0.5rem;
}

.credentials-content label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    display: block;
}

.credentials-content input {
    width: calc(100% - 1rem);
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* Hamburger Menu Spans */
.menu-toggle-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    margin: 4px 0;
    transition: all 0.3s;
}

/* Mobile Overlay */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Profile Caret & Dropdown Header */
.profile-caret {
    width: 20px;
    height: 20px;
    color: var(--text-light-color);
}

.dropdown-header {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--text-light-color);
}

.dropdown-header strong {
    color: var(--text-color);
}

.dropdown-divider {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}

/* Colored Logout Button in Dropdown */
#logout-link.dropdown-item {
    display: block;
    background-color: var(--primary-color);
    color: white;
    text-align: center;
    font-weight: 500;
    border-radius: 6px;
    margin: 0.5rem;
    padding: 0.75rem 1rem;
}

#logout-link.dropdown-item:hover {
    background-color: var(--primary-hover-color);
    color: white;
}

/* =================================================================== */
/* 26. PENALTY / DEBIT NOTE SPECIFIC STYLES                            */
/* =================================================================== */
.penalty-card {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.card-border-red {
    border-left: 5px solid var(--error-color) !important;
}

.card-border-green {
    border-left: 5px solid var(--success-color) !important;
}

.penalty-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.penalty-status {
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

.badge-issued {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--error-color);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.badge-fulfilled {
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.penalty-body {
    padding: 1.25rem;
    flex-grow: 1;
}

.penalty-reason {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    color: var(--text-color);
}

.penalty-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-light-color);
    margin-bottom: 2px;
}

.meta-value {
    font-size: 0.9rem;
    font-weight: 500;
}

.penalty-footer {
    padding: 1rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.02);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =================================================================== */
/* 27. CHALLAN & DOCUMENT ATTACHMENT EXTRAS                            */
/* =================================================================== */

/* Mode A Group Cards */
.challan-group-card {
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: transform 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.challan-group-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

.challan-group-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-color);
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.group-bid-id {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Rejection & Approval boxes in lists */
.rejection-text {
    color: var(--error-color);
    font-size: 0.85rem;
    padding: 4px 8px;
    background: rgba(220, 53, 69, 0.05);
    border-radius: 4px;
}

.approved-amount-box {
    text-align: right;
    font-size: 0.85rem;
    color: var(--success-color);
}

/* File Tags and Chips (Won Tab) */
.submitted-file-tag {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.btn-icon-action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-icon-action.view {
    color: var(--primary-color);
    background-color: rgba(0, 123, 255, 0.1);
}

.btn-icon-action.delete {
    color: var(--error-color);
    background-color: rgba(220, 53, 69, 0.1);
}

/* View Doc Button */
.btn-view-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 6px;
    background-color: rgba(0, 123, 255, 0.1);
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
}

/* Interactive Utility Icons */
.btn-icon-square {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    color: var(--text-light-color);
}

/* Flash Feedback */
.flash-update {
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.7);
    transform: scale(1.01);
}

/* Toast icon spacing */
.toast-icon {
    margin-right: 0.75rem;
}



/* =================================================================== */
/* 28. PREMIUM DARK MODE - COMPONENT OVERRIDES                         */
/* =================================================================== */

/* Dark Mode Tooltips (Refresh & Back Buttons) */
[data-theme="dark"] .btn-refresh::after,
[data-theme="dark"] .btn-back-floating::after {
    background-color: #f0f0f0;
    color: #333;
}

/* Dark Mode Scrollbars (Chrome/Safari) */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0d1117;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #58a6ff;
}

/* Dark Mode Inputs & Textareas Focus Glow */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .panel-field:focus {
    background-color: #0d1117;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
    outline: none;
}

/* Dark Mode Message Box Colors (Refined Transparency) */
[data-theme="dark"] .success-message {
    background-color: rgba(46, 160, 67, 0.1);
    border: 1px solid rgba(46, 160, 67, 0.4);
    color: #7ee787;
}

[data-theme="dark"] .error-message {
    background-color: rgba(248, 81, 73, 0.1);
    border: 1px solid rgba(248, 81, 73, 0.4);
    color: #ff7b72;
}

[data-theme="dark"] .page-info,
[data-theme="dark"] .warning-message {
    background-color: rgba(56, 139, 253, 0.1);
    border: 1px solid rgba(56, 139, 253, 0.4);
    color: #a5d6ff;
}

/* Dark Mode Won Tab Details */
[data-theme="dark"] [data-active-page="Won"] .bid-container {
    background-color: var(--container-bg-color) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(218, 165, 32, 0.05) !important;
}

[data-theme="dark"] [data-active-page="Won"] .bid-container:hover {
    background-color: #1c2128 !important;
    border-color: rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(218, 165, 32, 0.1) !important;
}

[data-theme="dark"] [data-active-page="Won"] .action-card label {
    color: #FFD700;
}

[data-theme="dark"] [data-active-page="Won"] .action-card {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 215, 0, 0.3);
}

/* Dark Mode Skeleton Adjustment */
[data-theme="dark"] .skeleton-shimmer {
    background: #161b22;
    background: linear-gradient(to right, #161b22 8%, #21262d 18%, #161b22 33%);
}

/* Dark Mode Sidebar Item Hover */
[data-theme="dark"] .nav-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* =================================================================== */
/* 29. REMAINING PAGE-SPECIFIC CARD LOGIC                              */
/* =================================================================== */

/* Dual Buttons in Won Card Footer */
.card-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 1.5rem;
    width: 100%;
}

.card-footer-actions .btn-primary,
.card-footer-actions .btn-gold-outline {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Gold Outline Button (Manage Requirements) */
.btn-gold-outline {
    background: transparent;
    border: 2px solid #DAA520;
    color: #DAA520;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-weight: 600;
    gap: 8px;
}

.btn-gold-outline:hover {
    background-color: #DAA520;
    color: white;
    box-shadow: 0 4px 10px rgba(218, 165, 32, 0.3);
}

/* History Table Headers in Dark Mode */
[data-theme="dark"] .history-table th {
    background-color: #1c2128;
    color: var(--text-color);
}

[data-theme="dark"] tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Chat Bubbles Dark Mode Adjustment */
[data-theme="dark"] .message-bubble.received {
    background-color: #21262d;
    color: #c9d1d9;
}

[data-theme="dark"] .chat-form {
    background-color: #1c2128;
    border-top: 1px solid var(--border-color);
}

/* QR Code Scanability */
[data-theme="dark"] .qr-img {
    filter: invert(0);
    background: #fff;
}

/* Spacer for Detailed Page Header */
.details-header-spacer {
    margin-top: 3rem;
}

/* Final Utility: Hide Hr in Cards */
.bid-container hr {
    display: none;
}



/* =================================================================== */
/* 30. REFINED BUTTON INTERACTIONS (HOVER ARROWS)                      */
/* =================================================================== */

/* The "→" arrow that slides in on hover for primary buttons */
.bid-container .btn-primary::after {
    content: '→';
    position: absolute;
    right: 1.2rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    font-weight: 800;
}

.bid-container .btn-primary:hover {
    padding-right: 2rem;
}

.bid-container .btn-primary:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Secondary & Back Button Specifics */
.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-back {
    font-size: 1.2rem;
    padding: 0.2rem 0.8rem;
    margin-right: 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

/* =================================================================== */
/* 31. DOCUMENT TYPE SPECIFIC COLORS (WON TAB)                         */
/* =================================================================== */
.doc-card-v2.type-CO_INVOICE .doc-icon-box {
    background: rgba(255, 215, 0, 0.15);
    color: #B8860B;
}

.doc-card-v2.type-LR_COPY .doc-icon-box {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.doc-meta {
    font-size: 0.75rem;
    color: var(--text-light-color);
    margin-top: 2px;
}

.btn-mini-action.delete:hover {
    color: var(--error-color);
}

.btn-mini-action.view:hover {
    color: var(--primary-color);
    background-color: rgba(0, 123, 255, 0.1);
}

/* Shared Doc Button Styles */
.btn-download-doc,
.btn-add-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    /* Soft rounded corners */
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-download-doc:hover,
.btn-add-doc:not(.disabled):hover {
    background-color: rgba(0, 123, 255, 0.08);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-add-doc.disabled {
    border-color: #ccc;
    color: #999;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.02);
}

/* =================================================================== */
/* 32. APP DOWNLOAD & SEARCH TYPOGRAPHY                                */
/* =================================================================== */
.app-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
}

.app-version {
    font-size: 0.95rem;
    color: var(--text-light-color);
    margin-bottom: 1.5rem;
}

.app-notes-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-light-color);
    letter-spacing: 0.5px;
}

.app-notes-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--text-color);
}

.highlight-text {
    color: var(--primary-color);
    font-weight: 800;
}

.item-main-text {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.item-sub-text {
    font-size: 0.8rem;
    color: var(--text-light-color);
}

/* =================================================================== */
/* 33. DEEP DARK MODE TYPOGRAPHY & FIXES                               */
/* =================================================================== */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #f0f6fc;
    /* Professional white-blue tint for headers */
}

/* Dark Mode Searchable Items */
[data-theme="dark"] .custom-dropdown-item:hover {
    background-color: #1f2428;
}

[data-theme="dark"] .item-main-text {
    color: #e0e0e0;
}

/* Dark Mode Won Tab Caption Refinement */
[data-theme="dark"] [data-active-page="Won"] .caption {
    color: #8b949e !important;
}

[data-theme="dark"] [data-active-page="Won"] .caption strong {
    color: #e0c060 !important;
}

/* Dark Mode Teaser Card Glass Effect */
[data-theme="dark"] .bid-teaser-status {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Dark Mode Profile Button */
[data-theme="dark"] .profile-button,
[data-theme="dark"] .btn-search-trigger {
    background-color: #21262d;
    border: 1px solid rgba(240, 246, 252, 0.1);
    color: #c9d1d9;
}

/* Ended Status Gray-out */
.teaser-stat-item .value.ended {
    font-size: 1rem;
    color: #6c757d;
}

/* Credentials Form Fix */
.credentials-content label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

/* Page Header Margin Adjustment */
.page-header-container .page-header {
    margin-bottom: 0;
}





/* =================================================================== */
/* 34. PRECISION TYPOGRAPHY & TIMER LOGIC                              */
/* =================================================================== */

/* Keeps timer numbers from "jumping" when they change */
.teaser-stat-item .value.countdown,
.timer-countdown-chip {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Specific styling for the Won Tab hover state in sidebar */
.nav-item[data-page="Won"]:hover {
    color: #DAA520;
}

/* =================================================================== */
/* 35. CHALLAN & ACCOUNT DETAIL MICRO-STYLES                           */
/* =================================================================== */

.group-count-badge {
    background: rgba(0, 123, 255, 0.1);
    color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Rejection text styling for Challans */
.rejection-text i {
    margin-right: 4px;
}

.approved-amount-box div {
    margin-bottom: 2px;
}

/* =================================================================== */
/* 36. FILE UPLOAD STAGING & PREVIEW AREAS                             */
/* =================================================================== */

.file-preview-area {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.file-tag {
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.staging-area {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.staged-file {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #eee;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
}

/* =================================================================== */
/* 37. FINAL INTERACTIVE FEEDBACK & ANIMATIONS                         */
/* =================================================================== */

/* Dark Mode Gold Pulse Animation (Distinct from Light Mode) */
@keyframes goldPulseDark {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

[data-theme="dark"] .btn-pulse-gold {
    animation: goldPulseDark 2s infinite;
}

/* Profile and Search Trigger Hover Scaling */
.profile-button:hover,
.btn-search-trigger:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

/* App Download Button Hover Details */
.btn-download-app:hover {
    background-color: #32b36b;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(61, 220, 132, 0.4);
}

/* Corrects button text color on bright green in Dark Mode */
[data-theme="dark"] .btn-download-app {
    color: #000;
}

/* =================================================================== */
/* 38. MISC LAYOUT TWEAKS                                              */
/* =================================================================== */

.info-card:hover {
    transform: translateY(-3px);
}

/* Ensure the message time in received bubbles doesn't disappear in dark mode */
.message-bubble.received .message-time {
    color: var(--text-light-color);
}

/* Clearer separation in the Profile Dropdown */
.dropdown-header strong {
    display: inline-block;
    margin-bottom: 2px;
}




/* =================================================================== */
/* 39. CHIP STYLE FILTER BUTTONS (DEBIT NOTES)                         */
/* =================================================================== */
.filter-btn {
    padding: 0.5rem 1rem;
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    /* Pill/Chip curve */
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-light-color);
}

.filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.filter-btn:hover:not(.active) {
    background-color: var(--background-color);
}

/* =================================================================== */
/* 40. PILL-SHAPED CURVES FOR ACTION BUTTONS                           */
/* =================================================================== */
.bid-container .btn-primary {
    width: auto;
    min-width: 140px;
    display: table;
    margin-left: auto;
    margin-top: 1.25rem;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    /* Full pill curve */
    font-size: 0.9rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    border: none;
    color: white;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* The Bounce */
    position: relative;
    overflow: hidden;
}

.bid-container .btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
}

/* =================================================================== */
/* 41. STATUS-SPECIFIC TEXT COLORS (DETAIL VIEW)                       */
/* =================================================================== */
.status-leading .status-text {
    color: #1c7430;
}

.status-competitive .status-text {
    color: #b98900;
}

.status-out-of-contention .status-text {
    color: #dc3545;
}

.status-not-bidding .status-text {
    color: #5a6268;
}

/* =================================================================== */
/* 42. PROFESSIONAL BEZIER TRANSITIONS                                 */
/* =================================================================== */
.btn-refresh,
.btn-back-floating {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-refresh i {
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* =================================================================== */
/* 43. DEEP DARK MODE FIXES (REMAINING)                                */
/* =================================================================== */
[data-theme="dark"] .sidebar {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .btn-refresh {
    background-color: #2c2c2c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .btn-refresh:hover {
    color: #4da3ff;
    box-shadow: 0 10px 20px rgba(77, 163, 255, 0.15);
}

[data-theme="dark"] .penalty-header,
[data-theme="dark"] .penalty-footer {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .filter-btn {
    background-color: #2c2c2c;
    border-color: #444;
}

/* =================================================================== */
/* 44. MOBILE INPUT FIXES                                              */
/* =================================================================== */
@media (max-width: 800px) {
    .form-container input {
        width: calc(100% - 1.2rem);
    }

    .top-header-controls {
        position: fixed;
    }
}



/* =================================================================== */
/* 45. PRECISION SIZING & SPACING (THE 60PX GAP & FLEX RATIOS)         */
/* =================================================================== */

/* The specific wide gap used in the Challan Management Panel */
.panel-inputs {
    display: flex;
    gap: 60px;
    /* Restored original wide spacing */
    align-items: stretch;
}

/* Flex ratios for the control panel fields */
.input-bid-id {
    flex: 1;
    /* Auction ID input takes 1 part */
    font-weight: 600;
}

.select-recent {
    flex: 2;
    /* Recent Trip dropdown takes 2 parts (wider) */
    cursor: pointer;
}

/* =================================================================== */
/* 46. ICON BOXES & BUTTON COMPONENT SIZING                            */
/* =================================================================== */

/* Profile Initials sizing */
.profile-initials {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Square Icon Button sizing (The 42px standard) */
.btn-icon-square {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

/* Search Trigger Button sizing (The 45px standard) */
.btn-search-trigger {
    width: 45px;
    height: 45px;
}

/* Document Icon box sizing (The 30px standard) */
.doc-icon-box {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Chat Send Button sizing */
#chatSendBtn {
    width: 45px;
    height: 45px;
}

/* =================================================================== */
/* 47. LAYOUT & HEIGHT CONSTRAINTS                                     */
/* =================================================================== */

/* Live Status cards need a consistent height for the dashboard look */
.live-status-card-dashboard .info-card {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Chat container padding and alignment */
.chat-messages {
    padding: 20px;
    gap: 15px;
}

.message-bubble {
    max-width: 80%;
    /* Ensures bubbles don't hit the far edge */
}

/* =================================================================== */
/* 48. ADDITIONAL CURVES & BUTTON SHAPES                               */
/* =================================================================== */

/* Support request type pills */
.support-type-selector {
    padding: 6px;
    border-radius: 12px;
}

.support-type-btn {
    border-radius: 8px;
}

/* Ensure global search input maintains the pill shape */
#global-search-input {
    border-radius: 50px;
    height: 45px;
}

/* Submit Claims and Download buttons */
.btn-download-app,
#btn-submit-challan,
#btn-submit-support,
.btn-view-doc {
    /* Added btn-view-doc here */
    border-radius: 8px;
}

/* Icon-only fix for specific requirement modal download buttons */
.btn-mini-action.download-icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* =================================================================== */
/* 49. REFINED DARK MODE STRUCTURAL COLORS                             */
/* =================================================================== */

[data-theme="dark"] .challan-group-card {
    background-color: var(--container-bg-color);
}

[data-theme="dark"] .challan-group-card:hover {
    background-color: #1c2128;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Ensures the divider in profile dropdown isn't too bright */
[data-theme="dark"] .dropdown-divider {
    border-top: 1px solid var(--border-color);
    opacity: 0.5;
}

/* =================================================================== */
/* 50. MOBILE TITLE & OVERLAP FIXES                                    */
/* =================================================================== */

@media (max-width: 800px) {
    .panel-inputs {
        flex-direction: column;
        gap: 15px;
        /* Collapse gap for vertical mobile layout */
    }

    .top-bar-title {
        max-width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}



/* =================================================================== */
/* 51. REQUIREMENT MODAL (WON ACTIONS) UI IMPROVEMENTS                 */
/* =================================================================== */

/* Ensures the grid of action cards (Vehicle, Tracking, Driver) is perfectly aligned */
.won-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Enhances the "Driver Details" input stack inside the Requirement Modal */
.action-card div[style*="flex-direction: column"] {
    gap: 12px !important;
}

/* Custom styling for document type labels in the grid */
.doc-column-header i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

/* Interactive File Chips - View/Delete alignment fix */
.submitted-file-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--background-color);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
    transition: transform 0.2s ease;
}

.submitted-file-tag:hover {
    transform: translateX(4px);
    border-color: var(--primary-color);
}

/* =================================================================== */
/* 52. DOWNLOAD APP MODAL & QR CODE REFINEMENTS                        */
/* =================================================================== */

/* Centers the icon and makes it pop */
.app-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem auto;
    background: rgba(61, 220, 132, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fixes the "What's New" box spacing and scrollbar */
.app-notes-box {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    margin: 1.5rem 0;
    text-align: left;
}

/* QR Code Section - Ensures readability in Dark Mode */
.qr-section {
    background: #ffffff;
    /* Always white background for QR contrast */
    padding: 1.5rem;
    border-radius: 16px;
    margin-top: 1.5rem;
    border: 1px solid #eee;
    color: #333;
    /* Always dark text for label */
}

.qr-img {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0.5rem auto 0 auto;
    filter: none !important;
    /* Never invert QR code colors */
}

/* =================================================================== */
/* 53. Z-INDEX & OVERLAY HIERARCHY (BUG FIX)                           */
/* =================================================================== */

/* The Modal (Popups) */
.modal-overlay {
    z-index: 2000;
    /* Higher than sidebar */
}

/* The Loading Spinner (MUST BE ON TOP OF EVERYTHING) */
.spinner-overlay {
    z-index: 3000 !important;
    background: rgba(0, 0, 0, 0.75);
    /* Darker background for better contrast */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#spinner-text {
    margin-top: 15px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Shadow for readability against any background */
}

/* =================================================================== */
/* 54. GLOBAL UI IMPROVEMENTS (USER EXPERIENCE)                        */
/* =================================================================== */

/* Makes inputs feel more "Premium" when typing */
input,
textarea {
    font-family: inherit;
    transition: all 0.2s ease;
}

/* Subtle background for the profile initials when no image */
.profile-initials {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

/* Smooth transition for the sidebar hamburger icon */
.menu-toggle-btn span {
    border-radius: 2px;
}

/* =================================================================== */
/* 55. FINAL DARK MODE TWEAKS FOR MODALS                               */
/* =================================================================== */

[data-theme="dark"] .modal__header {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .qr-section {
    background: #ffffff;
    /* Keep white for scanning */
    color: #000000;
}

[data-theme="dark"] .submitted-file-tag {
    background: #1c2128;
}

[data-theme="dark"] .app-notes-box {
    background-color: #0d1117;
}


/* =================================================================== */
/* 56. EMPTY STATE & MESSAGE BOX STYLING (MATCHING ORIGINAL)           */
/* =================================================================== */

/* This ensures that when a tab is empty, the message looks like a styled card */
.success-message,
.warning-message,
.error-message,
.page-info {
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: fadeInUp 0.3s ease-out;
}

/* Light Mode Colors */
.success-message {
    border: 1px solid #c3e6cb;
    background-color: #d4edda;
    color: #155724;
}

.warning-message {
    border: 1px solid #ffeeba;
    background-color: #fff3cd;
    color: #856404;
}

.error-message {
    border: 1px solid #f5c6cb;
    background-color: #f8d7da;
    color: #721c24;
}

.page-info {
    border: 1px solid #bee5eb;
    background-color: #e3f2fd;
    color: #0c5460;
}

/* Dark Mode Colors (Refined Transparency) */
[data-theme="dark"] .success-message {
    background-color: rgba(46, 160, 67, 0.15);
    border-color: rgba(46, 160, 67, 0.3);
    color: #7ee787;
}

[data-theme="dark"] .warning-message {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffdb7d;
}

[data-theme="dark"] .error-message {
    background-color: rgba(248, 81, 73, 0.15);
    border-color: rgba(248, 81, 73, 0.3);
    color: #ff7b72;
}

[data-theme="dark"] .page-info {
    background-color: rgba(56, 139, 253, 0.15);
    border-color: rgba(56, 139, 253, 0.3);
    color: #a5d6ff;
}

/* =================================================================== */
/* 57. POST-AUCTION REQUIREMENT MODAL (WON ACTIONS) MARGINS            */
/* =================================================================== */

/* Fixes the "Cramped" feeling by adding internal margins and padding */
#wonActionsModalBody {
    padding: 2rem !important;
    /* Extra breathing room around the edges */
    background-color: var(--container-bg-color);
}

.won-modal {
    max-width: 1100px;
    /* Refined width for better readability */
    width: 92%;
}

/* Adds a margin between the top cards (Vehicle/Driver) and the Document section */
.won-actions-container h3 {
    margin: 2.5rem 0 1.5rem 0 !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

/* =================================================================== */
/* 58. MODAL SCROLLBAR & OVERFLOW FIX                                  */
/* =================================================================== */

/* Ensures the modal doesn't cut off content on short screens */
.modal {
    overflow: hidden;
    /* Header stays fixed */
}

.modal__body {
    overflow-y: auto;
    padding: 1.5rem;
    max-height: calc(90vh - 70px);
    /* Adjust based on header height */
}

/* Custom Scrollbar for the Modal Body */
.modal__body::-webkit-scrollbar {
    width: 6px;
}

.modal__body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

[data-theme="dark"] .modal__body::-webkit-scrollbar-thumb {
    background: #444;
}

/* =================================================================== */
/* 59. TAB-SPECIFIC EMPTY STATE ALIGNMENT                             */
/* =================================================================== */

/* If there are no bids, center the message box slightly */
#bid-list:empty,
#negotiations-content:empty,
#challan-workspace:empty {
    padding: 2rem 0;
}



/* =================================================================== */
/* 60. FLEXBOX OVERFLOW FIX (UPDATE BUTTON BOUNDARY)                   */
/* =================================================================== */

/* This prevents the input from pushing the "Update" button out of the card */
.input-group-action {
    display: flex;
    width: 100%;
    gap: 10px;
    box-sizing: border-box;
    /* Ensures padding stays inside the width */
}

.input-group-action input {
    flex: 1;
    /* Allows the input to grow and take available space */
    min-width: 0;
    /* CRITICAL: Allows the input to shrink smaller than its content */
    box-sizing: border-box;
}

.input-group-action button {
    flex-shrink: 0;
    /* Prevents the button from getting squashed */
    white-space: nowrap;
    /* Keeps the "Update" text on one line */
}

/* =================================================================== */
/* 61. ACTION CARD & MODAL BOUNDARY PROTECTIONS                        */
/* =================================================================== */

.action-card {
    width: 100%;
    box-sizing: border-box;
    /* Fixes internal padding overflow */
    overflow: hidden;
    /* Safety measure */
}

/* Fixes the Driver Details card specifically */
.action-card div[style*="display: flex"] {
    width: 100%;
    box-sizing: border-box;
}

.action-card input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* =================================================================== */
/* 62. GLOBAL BOX-SIZING RESET (PREVENTS FUTURE OVERFLOWS)             */
/* =================================================================== */

/*
   The original file missed a global box-reset.
   Applying this ensures that padding + borders never push elements
   out of their containers again.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =================================================================== */
/* 63. WON MODAL RESPONSIVENESS FIX                                    */
/* =================================================================== */

@media (max-width: 600px) {

    /* On mobile, stack the input and buttons so they don't overflow */
    .input-group-action {
        flex-wrap: wrap;
    }

    .input-group-action input {
        width: 100%;
        flex: none;
    }

    .input-group-action button {
        flex: 1;
    }
}



/* =================================================================== */
/* 64. DOCUMENT CARD BOUNDARY & TEXT TRUNCATION FIX                    */
/* =================================================================== */

.doc-card-v2 {
    display: flex;
    flex-direction: column;
    /* Stack vertically for better name visibility */
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0.75rem;
}

/* THE MAGIC FIX: This allows the text container to shrink without breaking */
.doc-info-v2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Allow seeing full text */
}

.doc-filename {
    width: 100%;
    display: block;
    white-space: normal;
    /* Allow wrapping */
    word-break: break-all;
    /* Ensure long filenames wrap */
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Row for Metadata (Date) and Actions (Buttons) */
.doc-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 4px;
}

/* =================================================================== */
/* 65. BUTTON OVERLAP PREVENTION                                       */
/* =================================================================== */

.doc-actions-v2 {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.btn-mini-action {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =================================================================== */
/* 66. WON MODAL GRID COLUMN FIX                                       */
/* =================================================================== */

/* Prevents columns from overlapping on medium screens */
.doc-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
}

/* Ensures the columns don't stretch weirdly */
.doc-column {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* =================================================================== */
/* 67. RE-FIXING THE TOP ACTION CARDS (DRIVER/VEHICLE)                 */
/* =================================================================== */

.action-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.input-group-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Specific fix for the Driver card which has two inputs stacked */
.action-card div[style*="display: flex; flex-direction: column"] {
    width: 100%;
}

.action-card input {
    width: 100% !important;
    max-width: 100%;
}

/* =================================================================== */
/* 68. MODAL HEADER & BODY SYNC                                        */
/* =================================================================== */

.won-modal .modal__header {
    flex-shrink: 0;
    /* Header never shrinks */
}

#wonActionsModalBody {
    flex-grow: 1;
    overflow-x: hidden;
    /* Stop horizontal scroll in modal */
}


/* =================================================================== */
/* 69. SIDEBAR BRANDING & HEADER GRADIENT                              */
/* =================================================================== */

/* Restores the professional gradient look to your brand name */
.sidebar-header h3 {
    background: -webkit-linear-gradient(45deg, var(--primary-color), var(--primary-hover-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Makes text take the gradient */
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* =================================================================== */
/* 70. DOCUMENT STATUS & ARCHIVE FILTERS                               */
/* =================================================================== */

/* Grey-out effect for Archived/Old documents in the Won Modal */
.doc-card-v2.status-ARCHIVED {
    opacity: 0.5;
    /* More transparent */
    background-color: #f4f4f4;
    /* Light grey background */
    border-color: #e0e0e0;
    filter: grayscale(100%);
    /* Removes all color */
    transition: all 0.3s ease;
}

.doc-card-v2.status-ARCHIVED:hover {
    opacity: 0.9;
    filter: grayscale(0%);
    /* Restores color when user hovers to view */
    background-color: #fff;
}

/* Specific icon color for greyed out documents */
.doc-card-v2.status-ARCHIVED .doc-icon-box {
    background-color: #ddd;
    color: #888;
}

/* =================================================================== */
/* 71. PROFILE & MODAL NAVIGATION MICRO-UI                             */
/* =================================================================== */

/* The small arrow next to your name in the top right */
.profile-caret {
    width: 20px;
    height: 20px;
    color: var(--text-light-color);
    margin-left: 4px;
}

/* Modal Close Button (The 'X') - Clean and Professional */
.modal__close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 0.5rem;
    transition: color 0.2s;
}

.modal__close-btn:hover {
    color: var(--error-color);
}

/* =================================================================== */
/* 72. FORM INPUT SPECIAL CASES (TEL & NUMBER)                         */
/* =================================================================== */

/* Driver Details Phone Number input needs to look like the text inputs */
input[type="tel"],
input[type="number"] {
    font-family: inherit;
}

/* Hide the 'spinner' arrows in the Bid Amount input for a cleaner look */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =================================================================== */
/* 73. MINI LOADING SPINNERS (IN-LINE)                                 */
/* =================================================================== */

/* Used when loading specific sections like negotiation history or documents */
.mini-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    margin: 1rem auto;
}

/* =================================================================== */
/* 74. TOAST NOTIFICATION ICON SPACING                                 */
/* =================================================================== */

.toast-icon {
    margin-right: 0.75rem;
    font-size: 1.2rem;
}

/* =================================================================== */
/* 75. DARK MODE REFINEMENTS FOR ARCHIVES                              */
/* =================================================================== */

[data-theme="dark"] .doc-card-v2.status-ARCHIVED {
    background-color: #1a1a1a;
    border-color: #333;
    opacity: 0.4;
}

[data-theme="dark"] .doc-card-v2.status-ARCHIVED:hover {
    background-color: #252525;
}

/* =================================================================== */
/* 76. ARCHIVED DOCUMENTS TOGGLE LOGIC                                 */
/* =================================================================== */

/* HIDE archived documents by default */
.doc-card-v2.status-ARCHIVED {
    display: none !important;
}

/* SHOW archived documents only when the parent column has the 'show-archived' class */
.doc-column.show-archived .doc-card-v2.status-ARCHIVED {
    display: flex !important;
    animation: fadeInUp 0.3s ease-out;
}

/* =================================================================== */
/* 77. "SHOW HISTORY" BUTTON STYLING                                   */
/* =================================================================== */

.btn-show-history {
    background: transparent;
    border: none;
    color: var(--text-light-color);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 0;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}

.btn-show-history i {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.btn-show-history:hover {
    color: var(--primary-color);
}

/* Rotate the icon when history is shown */
.doc-column.show-archived .btn-show-history i {
    transform: rotate(180deg);
}

/* Dark Mode adjustment for the history button */
[data-theme="dark"] .btn-show-history {
    color: #8b949e;
}

[data-theme="dark"] .btn-show-history:hover {
    color: var(--primary-color);
}

/* =================================================================== */
/* 78. DOCUMENT LIST SPACING REFINEMENT                                */
/* =================================================================== */

.doc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Ensures the list has a minimum height even when empty */
    min-height: 20px;
}

/* Divider to separate current files from the 'Show History' button */
.history-divider {
    border-top: 1px dashed var(--border-color);
    margin: 10px 0;
    display: none;
    /* Only show via JS if archived files exist */
}

.doc-column.has-archives .history-divider {
    display: block;
}

/* =================================================================== */
/* 79. FILE IDENTIFIER OVERFLOW FIX                                    */
/* =================================================================== */

/* Prevents the 'latest/archived' tag from pushing the download button out */
.doc-info-v2 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.doc-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}


/* =================================================================== */
/* 80. MENU BUTTON (HAMBURGER) - MATCHING ORIGINAL EXACTLY             */
/* =================================================================== */

.menu-toggle-btn {
    display: none;
    /* Hidden on desktop, shown via Media Query */
    position: fixed;
    top: 15px;
    /* Exact positioning from original file */
    left: 15px;
    width: 40px;
    height: 40px;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    z-index: 1001;
    padding: 8px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Ensure the lines inside the menu button look right */
.menu-toggle-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    margin: 4px 0;
    transition: all 0.3s;
}

/* =================================================================== */
/* 81. REQUIREMENT MODAL - VERTICAL LAYOUT (INPUTS & BUTTONS SEPARATED) */
/* =================================================================== */

/* We change the 'input-group-action' to stack vertically */
.input-group-action {
    display: flex;
    flex-direction: column;
    /* Stack Input on top, Button on bottom */
    gap: 12px;
    /* Space between row elements */
    width: 100%;
}

/* The row containing the Input and the Copy button */
.input-group-action .input-with-copy {
    display: flex;
    gap: 8px;
    width: 100%;
}

.input-group-action input {
    flex: 1;
    min-width: 0;
    padding: 0.8rem;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Makes the "Update" button full width on its own row */
.input-group-action .btn-primary {
    width: 100% !important;
    margin-top: 5px;
    padding: 0.8rem;
    justify-content: center;
}

/* =================================================================== */
/* 82. FINAL DARK MODE & UTILITY LEFTOVERS                             */
/* =================================================================== */

/* Sidebar footer background fix for Dark Mode */
[data-theme="dark"] .sidebar-footer {
    background-color: var(--container-bg-color);
}

/* Exact padding for the credentials content when expanded */
.credentials-expander input[type="checkbox"]:checked+.expander-label+.credentials-content {
    max-height: 300px;
    padding: 0.5rem 1rem 1rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* Refined scale effect when clicking buttons (Active state) */
.btn-refresh:active,
.btn-back-floating:active,
.btn-primary:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Chat form background needs to be explicit for professional look */
.chat-form {
    background-color: #f8f9fa;
}

[data-theme="dark"] .chat-form {
    background-color: #1c2128;
}

/* Professional Monospace font for Bid ID numbers */
.group-bid-id,
.penalty-id {
    font-family: 'Inter', monospace;
    letter-spacing: -0.5px;
}



/* =================================================================== */
/* 83. MENU BUTTON VISIBILITY & MOBILE HIERARCHY                      */
/* =================================================================== */

/* Desktop State: Menu button is hidden because sidebar is open */
.menu-toggle-btn {
    display: none;
}

/* Mobile State: Show button and handle sidebar transition */
@media (max-width: 800px) {
    .menu-toggle-btn {
        display: block !important;
        /* Forces it to show on mobile */
        background-color: var(--container-bg-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 2001;
        /* Ensure it stays above the overlay */
    }

    /* Fixes the sidebar behavior on mobile */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        /* Start hidden */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2000;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        /* Slide in */
    }

    body.sidebar-open .overlay {
        display: block;
        /* Show the dark background click-away layer */
    }
}

/* =================================================================== */
/* 84. REQUIREMENT MODAL - INDEPENDENT ROWS (VEHICLE & TRACKING)       */
/* =================================================================== */

/* Forces the input and button to be on different rows as requested */
.won-action-grid .action-card .input-group-action {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Spacing between the input row and the button row */
}

/* The first row (Input + Copy button) */
.input-with-copy {
    display: flex;
    gap: 10px;
    width: 100%;
}

.input-with-copy input {
    flex: 1;
    height: 45px;
    /* Consistent height */
}

/* The second row (The big Update button) */
.won-action-grid .action-card .btn-primary {
    width: 100% !important;
    /* Full width for better reach */
    height: 45px;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    /* Slightly squarer modern look */
}

/* =================================================================== */
/* 85. MISSING CARD MICRO-STYLES (DEEP COMPARE)                       */
/* =================================================================== */

/* Restores the slightly larger padding from original bid cards */
.bid-container {
    padding: 1.75rem;
}

/* Restores the letter-spacing on stat labels */
.teaser-stat-item .label {
    letter-spacing: 1px;
    opacity: 0.8;
    font-size: 0.75rem;
}

/* Restores the hover icon animation */
.nav-item:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* =================================================================== */
/* 86. DARK MODE MENU BUTTON FIX                                       */
/* =================================================================== */

[data-theme="dark"] .menu-toggle-btn {
    background-color: #161b22;
    border-color: #30363d;
}

[data-theme="dark"] .menu-toggle-btn span {
    background-color: #c9d1d9;
}


/* =================================================================== */
/* 87. LIVE STATUS DASHBOARD - GLOWING INDICATORS                     */
/* =================================================================== */

/* Makes the status dots pulse/glow for a "Live" feel in the details page */
.status-indicator-box .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Specific glows for different bidding states */
.status-leading .dot {
    background-color: #28a745;
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.8);
    /* Strong green glow */
}

.status-competitive .dot {
    background-color: #ffc107;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
    /* Yellow glow */
}

.status-out-of-contention .dot {
    background-color: #dc3545;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.8);
    /* Red glow */
}

.status-not-bidding .dot {
    background-color: #6c757d;
    box-shadow: none;
}

/* =================================================================== */
/* 88. BID HISTORY TABLE - MOBILE RESPONSIVENESS                       */
/* =================================================================== */

.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    display: block;
    /* Required for horizontal scroll */
    overflow-x: auto;
    /* Allows table to swipe left/right on phones */
    -webkit-overflow-scrolling: touch;
}

.history-table th,
.history-table td {
    padding: 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    /* Prevents dates from breaking into two lines */
    font-size: 0.9rem;
}

.history-table th {
    background-color: rgba(0, 0, 0, 0.02);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

/* =================================================================== */
/* 89. BID FORM - ATTEMPTS COUNTER & LAYOUT                            */
/* =================================================================== */

.form-container .attempts-info {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--text-light-color);
}

/* Highlighting the counter when you have only 1 attempt left */
.attempts-info b {
    color: var(--primary-color);
    font-size: 1rem;
}

/* =================================================================== */
/* 90. DETAIL VIEW GRID AREAS (DESKTOP VS MOBILE)                      */
/* =================================================================== */

/* Desktop: 2x2 Grid */
.details-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
    grid-template-areas:
        "status form"
        "details history";
}

/* Mobile: Single Column Stack */
@media (max-width: 1000px) {
    .details-layout-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "status"
            "form"
            "history"
            "details";
        /* We move details to bottom on mobile for better flow */
    }
}

/* =================================================================== */
/* 91. DARK MODE DETAIL VIEW FIXES                                     */
/* =================================================================== */

[data-theme="dark"] .live-status-card-dashboard .info-card {
    background-color: #1c2128;
    /* Darker card inside the blue gradient */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .live-status-card-dashboard .info-card .value {
    color: #ffffff;
}

[data-theme="dark"] .history-table th {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Flash update animation for real-time bid changes */
.flash-update {
    animation: flashShadow 0.8s ease-out;
}

@keyframes flashShadow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }

    100% {
        box-shadow: 0 0 20px 10px rgba(0, 123, 255, 0);
    }
}

/* =================================================================== */
/* 92. TOAST NOTIFICATION (LOGOUT POPUP) - CENTERED AT BOTTOM          */
/* =================================================================== */

/* This fixes the "top-right corner" bug and centers it at the bottom */
.toast {
    position: fixed;
    bottom: 30px;
    /* 30px from the bottom edge */
    left: 50%;
    /* Move to middle */
    transform: translateX(-50%) translateY(20px);
    /* Start slightly lower for animation */
    padding: 1rem 1.75rem;
    background-color: #333;
    color: white;
    border-radius: 50px;
    /* Modern pill shape */
    z-index: 3001;
    /* Above modals and everything else */
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* When the toast is triggered via JS */
.toast.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    /* Bounce up into view */
}

.toast-icon {
    margin-right: 12px;
    font-size: 1.2rem;
}

/* =================================================================== */
/* 93. PROFILE DROPDOWN MENU - REFINED ALIGNMENT                      */
/* =================================================================== */

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    /* Slightly wider for longer names */
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 0;
    z-index: 1002;
}

/* The header inside the dropdown (Company ID/Transporter ID) */
.dropdown-header {
    padding: 0.8rem 1.2rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-light-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.dropdown-header strong {
    color: var(--text-color);
    font-weight: 700;
}

/* Specific blue styling for Logout link in the menu */
#logout-link.dropdown-item {
    margin: 0.5rem 0.75rem;
    background-color: var(--primary-color);
    color: white !important;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.2s;
}

#logout-link.dropdown-item:hover {
    background-color: var(--primary-hover-color);
}

/* =================================================================== */
/* 94. NEGOTIATION NOTIFICATION DOT POSITIONING                       */
/* =================================================================== */

/* Fixes the red dot position next to the word "Negotiations" in sidebar */
.nav-notification-dot {
    position: absolute;
    top: 50%;
    right: 20px;
    /* Locked to the right side of the nav pill */
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    background-color: var(--error-color);
    border-radius: 50%;
    border: 2px solid var(--container-bg-color);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-notification-dot.show {
    transform: translateY(-50%) scale(1);
}

/* =================================================================== */
/* 95. SIDEBAR FOOTER LOGOUT BUTTON - HOVER COLOR                     */
/* =================================================================== */

/* When hovering over the Logout button at the very bottom left */
.sidebar-btn.logout:hover {
    background-color: #fff5f5 !important;
    /* Very light red */
    color: var(--error-color) !important;
    border-color: #feb2b2 !important;
}

[data-theme="dark"] .sidebar-btn.logout:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
    border-color: var(--error-color) !important;
}

/* =================================================================== */
/* 96. DARK MODE TOAST ADJUSTMENT                                      */
/* =================================================================== */

[data-theme="dark"] .toast {
    background-color: #f0f0f0;
    color: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* =================================================================== */
/* 97. MULTI-LINE MESSAGE BOXES (FOR ERRORS & ACCESS DENIED)           */
/* =================================================================== */

/* This styles the boxes that show "Trip Not Found" or "Access Denied" */
.error-message,
.warning-message,
.success-message,
.page-info {
    display: block;
    /* Ensure it behaves as a container for multiple lines */
    text-align: left;
    padding: 1.5rem;
    /* Increased padding for better readability */
    border-radius: 12px;
    line-height: 1.6;
}

/* Styles the bold title (e.g., "Trip Not Found") */
.error-message strong,
.warning-message strong,
.success-message strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 700;
}

/* Styles the smaller hint text (e.g., "Ensure the ID is correct") */
.error-message small,
.warning-message small,
.page-info small {
    display: block;
    margin-top: 10px;
    opacity: 0.8;
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 400;
}

/* =================================================================== */
/* 98. WORKSPACE & TAB EMPTY STATE ALIGNMENT                           */
/* =================================================================== */

/* Centers these message boxes when they are the only thing on the page */
#challan-workspace .error-message,
#challan-workspace .page-info,
#bid-list .success-message {
    max-width: 600px;
    margin: 2rem auto;
    /* Centered with top/bottom margin */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* Specific fix for the 'Challan Not Found' view */
#challan-workspace {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* =================================================================== */
/* 99. DARK MODE TEXT CONTRAST FOR MESSAGES                            */
/* =================================================================== */

[data-theme="dark"] .error-message strong {
    color: #ff7b72;
}

[data-theme="dark"] .warning-message strong {
    color: #ffdb7d;
}

[data-theme="dark"] .success-message strong {
    color: #7ee787;
}

[data-theme="dark"] .page-info strong {
    color: #a5d6ff;
}

/* Ensures 'small' text remains readable in dark mode */
[data-theme="dark"] .error-message small,
[data-theme="dark"] .warning-message small,
[data-theme="dark"] .page-info small {
    color: var(--text-color);
    opacity: 0.7;
}

/* =================================================================== */
/* 100. FINAL MARGINS FOR BUTTONS IN MESSAGES                          */
/* =================================================================== */

/* If a message box has a button inside (like 'Try Again') */
.error-message button,
.warning-message button {
    margin-top: 15px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* =================================================================== */
/* 101. GLOBAL SEARCH ANIMATION REFINEMENTS                            */
/* =================================================================== */

/* The exact rotation and color change when search is open */
.search-wrapper-global.active .btn-search-trigger {
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--primary-color) !important;
    transform: rotate(90deg);
    /* Original rotation value */
}

/* Hover scale for the search button */
.btn-search-trigger:hover {
    color: var(--primary-color);
    transform: scale(1.05);
}

/* Mobile Search Width - Original was 180px */
@media (max-width: 800px) {
    .search-wrapper-global.active #global-search-input {
        width: 180px !important;
    }
}

/* =================================================================== */
/* 102. SUPPORT TICKET SUCCESS UI (MONOSPACE LOGIC)                    */
/* =================================================================== */

/* This styles the ticket ID shown after submitting support */
#final-ticket-id {
    font-size: 1.8rem !important;
    font-weight: 800;
    color: var(--primary-color);
    border: none;
    background: transparent;
    text-align: center;
    width: 220px;
    font-family: 'Courier New', Courier, monospace !important;
    /* Forces the mono look */
    letter-spacing: 1px;
}

/* =================================================================== */
/* 103. SKELETON SHIMMER - PERFORMANCE SIZE                            */
/* =================================================================== */

/* The original uses a specific 1200px size for the shimmer wave */
.skeleton-shimmer {
    background-size: 1200px 100% !important;
}

/* =================================================================== */
/* 104. MESSAGE BUBBLE - TIME ALIGNMENT                                */
/* =================================================================== */

/* Ensures time stays at the bottom right of the bubble */
.message-time {
    font-size: 0.75rem;
    white-space: nowrap;
    align-self: flex-end;
    margin-left: 8px;
}

/* Sent message time transparency */
.message-bubble.sent .message-time {
    color: rgba(255, 255, 255, 0.75);
}

/* Received message time muted color */
.message-bubble.received .message-time {
    color: var(--text-light-color);
}

/* =================================================================== */
/* 105. CHALLAN LIST - PRICE & ID TYPOGRAPHY                          */
/* =================================================================== */

.challan-item div[style*="font-weight:700"] {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.5px;
}

/* Ensuring the Vehicle number is always uppercase and stands out */
.trip-stat-val {
    text-transform: uppercase;
}

/* =================================================================== */
/* 106. FINAL DARK MODE CONTRAST OVERRIDES                             */
/* =================================================================== */

/* Forces the input background to be extra dark in Dark Mode */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea {
    background-color: #010409 !important;
}

/* Dark Mode Modal Header Border */
[data-theme="dark"] .modal__header {
    border-bottom: 1px solid var(--border-color);
}

/* Hover effect on table rows for readability */
[data-theme="dark"] tr:hover td {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* =================================================================== */
/* 107. MOBILE TITLE PADDING (HAMBURGER CLEARANCE)                     */
/* =================================================================== */

@media (max-width: 800px) {

    /* Exact 70px offset to clear the hamburger button */
    .top-bar-title {
        left: 70px !important;
    }
}


/* =================================================================== */
/* 108. GLOBAL SEARCH - SPECIFIC TIMING CURVES                         */
/* =================================================================== */

/* The original had a very specific "Ease-Out" curve for the search bar expansion */
#global-search-input {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Specific padding to ensure text doesn't overlap the search icon inside the input */
.search-wrapper-global.active #global-search-input {
    padding-left: 1.2rem;
    padding-right: 50px;
    /* Space for the magnifying glass */
}

/* =================================================================== */
/* 109. SIDEBAR NAVIGATION - ACTIVE STATE TWEAKS                       */
/* =================================================================== */

/* The glowing shadow for the active sidebar item */
.nav-item.active {
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

/* Ensures the icon stays perfectly centered even when scaled */
.nav-item i {
    display: inline-block;
    vertical-align: middle;
}

/* =================================================================== */
/* 110. WON TAB - "CREAM CERTIFICATE" & GOLD GLOW                      */
/* =================================================================== */

/* The specific off-white/cream color that makes Won auctions stand out */
[data-active-page="Won"] .bid-container {
    background-color: #fffdf5 !important;
}

/* Dark Mode Won Card Title Shadow - Adds depth to gold text */
[data-theme="dark"] [data-active-page="Won"] .bid-container h4 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Ensure the top accent strip on Won cards is fully opaque */
[data-active-page="Won"] .bid-container::before {
    opacity: 1 !important;
}

/* =================================================================== */
/* 111. CARD TYPOGRAPHY & SPACING REFINEMENTS                          */
/* =================================================================== */

/* Restores the specific bottom margin for auction route captions */
.bid-container .caption {
    margin-bottom: 1.5rem;
}

/* Tabular Numbers (tnum) for all Price displays and IDs */
.teaser-stat-item .value,
.penalty-amount,
.group-bid-id {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* =================================================================== */
/* 112. OVERLAY & MODAL PROTECTIONS                                    */
/* =================================================================== */

/* The dark background when the sidebar or modal is open */
.overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    /* Modern touch: slight blur */
}

/* Prevents tooltips from being clicked */
.btn-refresh::after,
.btn-back-floating::after {
    pointer-events: none;
}

/* =================================================================== */
/* 113. DARK MODE REFINED TRANSPARENCY                                 */
/* =================================================================== */

/* Sub-tab buttons (Debit Notes/Challans) in Dark Mode hover */
[data-theme="dark"] .sub-tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Document cards in Dark Mode */
[data-theme="dark"] .doc-card-v2 {
    background-color: #161b22;
    border-color: #30363d;
}

/* Hover state for Document columns in Dark Mode */
[data-theme="dark"] .doc-column {
    background-color: rgba(255, 255, 255, 0.03);
}

/* =================================================================== */
/* 114. SKELETON SHIMMER SPEED                                         */
/* =================================================================== */

/* The original shimmer speed was exactly 2 seconds */
.skeleton-shimmer {
    animation-duration: 2s !important;
}


/* =================================================================== */
/* 115. CHAT BUBBLE CORNER LOGIC (TAILORED RADII)                      */
/* =================================================================== */

/* This gives bubbles that "WhatsApp-style" flat corner on the bottom */
.message-bubble.sent {
    border-bottom-right-radius: 4px !important;
    align-self: flex-end;
}

.message-bubble.received {
    border-bottom-left-radius: 4px !important;
    align-self: flex-start;
}

/* Sender Name inside the bubble */
.message-bubble .sender {
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 4px;
    display: block;
}

/* =================================================================== */
/* 116. GLOBAL HR & SPACING DEFAULTS                                   */
/* =================================================================== */

/* Original file had a specific style for dividers */
hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

/* =================================================================== */
/* 117. SIDEBAR CREDENTIALS - CALC WIDTHS                              */
/* =================================================================== */

/* Ensures inputs inside the sidebar don't touch the edges */
.credentials-content input {
    width: calc(100% - 1rem);
    /* Original padding compensation */
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.credentials-content label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    display: block;
    font-weight: 500;
}

/* =================================================================== */
/* 118. SKELETON LINE DEFINITIONS                                      */
/* =================================================================== */

/* Missing skeleton line height found in original file */
.sk-line {
    height: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
}

/* =================================================================== */
/* 119. CHALLAN SEARCH BOX FLEX-END ALIGNMENT                          */
/* =================================================================== */

/* Original alignment for the search box container */
.challan-search-box {
    display: flex;
    gap: 10px;
    background: var(--container-bg-color);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    align-items: flex-end;
    /* Keeps items anchored to the bottom */
}

/* =================================================================== */
/* 120. MOBILE OVERLAY & BLUR (RE-SYNKED)                              */
/* =================================================================== */

@media (max-width: 800px) {
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
        /* Just below the sidebar (2000) */
        backdrop-filter: blur(2px);
    }
}

/* =================================================================== */
/* 121. DARK MODE BORDER FIXES                                         */
/* =================================================================== */

/* Ensures table rows have consistent borders in dark mode */
[data-theme="dark"] .history-table td {
    border-bottom: 1px solid var(--border-color);
}

/* Sub-tab icons spacing */
.sub-tab-btn i {
    font-size: 1rem;
}

/* =================================================================== */
/* 122. CHAT MESSAGE - OVERFLOW & WORD BREAK                           */
/* =================================================================== */

/* Prevents long links or words from breaking the chat bubble layout */
.message-content {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    word-break: break-word;
    /* Forces long words to wrap */
    overflow-wrap: anywhere;
}

.message-text {
    flex-grow: 1;
    line-height: 1.5;
}

/* =================================================================== */
/* 123. TEASER STATS - SPACING & OPACITY                               */
/* =================================================================== */

/* Original design had a very subtle transparency for stat labels */
.teaser-stat-item .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light-color);
    font-weight: 600;
    margin-bottom: 0.4rem;
    opacity: 0.8;
    /* Subtle "fade" for the label */
}

/* =================================================================== */
/* 124. GLOBAL SEARCH - MOBILE TRANSPARENCY                            */
/* =================================================================== */

@media (max-width: 800px) {

    /* Ensures the search bar doesn't look too heavy on small screens */
    .search-wrapper-global.active #global-search-input {
        background-color: var(--container-bg-color);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
}

/* =================================================================== */
/* 125. APP DOWNLOAD - ANDROID BRAND COLOR                             */
/* =================================================================== */

/* The specific "Android Green" used in your app modal icon */
.app-icon-wrapper i {
    font-size: 2.5rem;
    color: #3DDC84;
    /* Precision Android Green */
}

/* =================================================================== */
/* 126. COMPACT MINI-BUTTON SIZING                                     */
/* =================================================================== */

/* The 'trash' and 'view' icons in the document lists */
.btn-mini-action {
    padding: 4px;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s ease;
}

/* =================================================================== */
/* 127. DARK MODE - RICH SLATE BORDERS                                 */
/* =================================================================== */

/* Specific border color for cards in dark mode to provide "depth" */
[data-theme="dark"] .bid-container,
[data-theme="dark"] .info-card,
[data-theme="dark"] .doc-column {
    border-color: #30363d !important;
}

/* Dark Mode hover tint for table rows */
[data-theme="dark"] .history-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* =================================================================== */
/* 128. FINAL Z-INDEX REFINEMENT                                       */
/* =================================================================== */

/* Ensures the toast (popup) always beats the modal and sidebar */
.toast {
    z-index: 9999;
}

/* Ensures the sidebar is always above the main content on mobile */
@media (max-width: 800px) {
    .sidebar {
        z-index: 2000;
    }

    .overlay {
        z-index: 1999;
    }
}




/* =================================================================== */
/* 129. INPUT PLACEHOLDER STYLING (MICRO-CONTRAST)                     */
/* =================================================================== */

/* Ensures placeholders are visible but not distracting */
::placeholder {
    color: var(--text-light-color);
    opacity: 0.6;
}

[data-theme="dark"] ::placeholder {
    color: #8b949e;
    opacity: 0.5;
}

/* =================================================================== */
/* 130. DROPDOWN & MODAL SHADOW DEPTH                                  */
/* =================================================================== */

/* Original shadow values for the profile and searchable dropdowns */
.profile-dropdown-menu,
.custom-dropdown-list {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .profile-dropdown-menu,
[data-theme="dark"] .custom-dropdown-list {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* =================================================================== */
/* 131. INTERACTIVE TOGGLE ICONS (+ / -)                               */
/* =================================================================== */

/* The + and - icon in the Negotiations tab detail toggle */
.toggle-icon {
    display: inline-block;
    width: 24px;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =================================================================== */
/* 132. NAVIGATION SLIDE ANIMATION                                     */
/* =================================================================== */

/* The slight "bounce" when you hover over a sidebar menu item */
.nav-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-item:hover {
    transform: translateX(4px);
    /* Original slide-right value */
}

/* =================================================================== */
/* 133. MODAL HEADER & BORDER SPECIFICS                                */
/* =================================================================== */

.modal__header {
    border-bottom: 1px solid var(--border-color);
    min-height: 60px;
    display: flex;
    align-items: center;
}

/* =================================================================== */
/* 134. THE "WON" TAB - SUCCESS BOX REFINEMENT                         */
/* =================================================================== */

/* Extra padding and margin specifically when the Won tab success box appears */
[data-active-page="Won"] .success-message {
    border-left: 5px solid #28a745;
    background-color: #f0fff4;
    /* Slightly different tint found in audit */
}

[data-theme="dark"] [data-active-page="Won"] .success-message {
    border-left: 5px solid #2ea043;
    background-color: rgba(46, 160, 67, 0.1);
}

/* =================================================================== */
/* 135. UTILITY: HIDE ELEMENTS (LEGACY CLEANUP)                        */
/* =================================================================== */

/* For elements that are toggled via JS logic (like the history divider) */
.hidden {
    display: none !important;
}

/* =================================================================== */
/* 136. FINAL PERFORMANCE RENDERING                                    */
/* =================================================================== */

/* Standard across high-end portals for sharper text */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* =================================================================== */
/* 29. EMPTY STATE & ERROR RECOVERY UI                                 */
/* =================================================================== */
.empty-state-card {
    text-align: center;
    padding: 3rem;
    background: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.empty-state-card:hover {
    transform: translateY(-5px);
}

.empty-state-card h3,
.empty-state-card h4,
.empty-state-card h5 {
    margin-top: 0;
    color: var(--text-color);
}

.empty-state-card p {
    color: var(--text-light-color);
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.empty-state-card .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
}


/* =================================================================== */
/* NEW: RANKING BADGES (L1, L2, L3) TRAFFIC LIGHT SYSTEM               */
/* =================================================================== */

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Bid mode visual language — vendors need to spot Open vs Sealed on
   every list (Upcoming / Open / Won / History). Badge on the card
   header plus a left-border stripe on the container itself.
   Open   = blue  (bolt icon)    — live price race
   Sealed = amber (envelope icon) — blind quotes, buyer picks winner
*/
.mode-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 10px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3px;
    text-transform: uppercase; white-space: nowrap;
}
.mode-badge i { font-size: 0.75rem; }
.mode-badge.mode-open   { background: #dbeafe; color: #1e40af; }
.mode-badge.mode-sealed { background: #fff3cd; color: #856404; }

/* Left-edge stripe on the bid card so the mode is unmistakable even at
   a glance without reading the badge. */
.bid-container.bid-mode-open   { border-left: 4px solid #3b82f6; }
.bid-container.bid-mode-sealed { border-left: 4px solid #f59e0b; }

/* Rank Animations */
.rank-badge.pulse-rank {
    animation: rankPulse 0.5s ease-in-out;
}

@keyframes rankPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Status Colors based on Backend Instructions */
/* L1 - L3 (Leading) -> Green */
.rank-leading {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
    border: 2px solid #fff;
}

/* L4 - L5 (Competitive) -> Orange */
.rank-competitive {
    background: linear-gradient(135deg, #ffc107, #d39e00);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    color: #fff; /* White text looks better on the dark orange gradient */
    border: 2px solid #fff;
}

/* L6+ (Out of Contention) -> Red */
.rank-out {
    background: linear-gradient(135deg, #dc3545, #bd2130);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    border: 2px solid #fff;
}

/* N/A (Not Bidding) -> Grey */
.rank-none {
    background: linear-gradient(135deg, #6c757d, #545b62);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
    font-size: 1rem; /* Smaller font for "N/A" */
    width: auto;
    padding: 0 15px;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .rank-leading { border-color: #161b22; }
[data-theme="dark"] .rank-competitive { border-color: #161b22; }
[data-theme="dark"] .rank-out { border-color: #161b22; }

/* =================================================================== */
/*  Notifications Inbox (bell button + dropdown panel)                 */
/* =================================================================== */

.btn-notif-bell {
    position: relative;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--container-bg-color);
    border: 1px solid transparent;
    color: var(--text-light-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.btn-notif-bell:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-notif-bell.has-unread { color: var(--error-color); }

.notif-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: var(--error-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--container-bg-color);
}

.notif-panel {
    position: fixed;
    top: 4.5rem;
    right: 1.5rem;
    width: 380px;
    max-height: 520px;
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notif-panel__header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notif-panel__title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 14px;
}

.notif-panel__mark-all {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}

.notif-panel__mark-all:hover { text-decoration: underline; }

.notif-panel__list {
    flex: 1;
    overflow-y: auto;
    max-height: 420px;
}

.notif-panel__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-light-color);
    font-size: 13px;
}

.notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s;
    position: relative;
}

.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background-color: var(--background-color); }
.notif-item.unread { background-color: rgba(0, 123, 255, 0.06); }

.notif-item.unread::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.notif-item__title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 13px;
    margin-bottom: 4px;
    padding-left: 12px;
}

.notif-item__body {
    color: var(--text-light-color);
    font-size: 12px;
    line-height: 1.4;
    padding-left: 12px;
}

.notif-item__time {
    color: var(--text-light-color);
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
    padding-left: 12px;
}

.notif-panel__footer {
    padding: 8px 16px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.notif-panel__reload {
    background: none;
    border: none;
    color: var(--text-light-color);
    cursor: pointer;
    font-size: 12px;
}

.notif-panel__reload:hover { color: var(--text-color); }