#root,
#guest,
#dashboard,
#full {
    margin: 0;
    padding: 0;
    width: 100%;
}

#full {
    background-color: #f0f0f0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 4rem 0;
}

#guest #full #login {
    margin: 2rem;
    width: 28rem;
    text-align: center;
}

#guest #full #login img {
    width: 18rem;
    height: auto;
}

#guest #full #login h3 {
    color: #b8e8d2;
}

#guest #full #login h5 {
    margin-bottom: 1rem;
    color: #b8d6e8;
}

#guest #full #login #form {
    text-align: center;
    background: #fff;
    padding: 2rem;
    border-radius: .5rem;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

#guest #full #login #form form {
    text-align: left;
}

#guest #full #login #form label {
    border: none;
    font-weight: bold;
    display: block;
    padding: 0;
    margin: 0;
    min-height: auto;
    margin-bottom: 0.5rem;
}

#guest #full #login #form #u,
#guest #full #login #form #p {
    margin-bottom: 1rem;
    width: 100%;
}

#guest #full #login #form #s {
    display: block;
    width: 100%;
    font-weight: bold;
    background-color: #4f39f6;
    color: #fff;
    border: none;
}

#guest #full #login #form p.or {
    display: flex;
    align-items: center;
    text-align: center;
    color: #aaa;
    margin: 1.5rem 0;
    font-weight: bold;
    font-size: 1rem;
}

#guest #full #login #form p.or::before,
#guest #full #login #form p.or::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ddd;
    margin: 0 1rem;
}

#guest #full #login #form p.or::before {
    margin-left: 0;
}

#guest #full #login #form p.or::after {
    margin-right: 0;
}

#guest #left {
    display: inline-block;
    width: 50%;
    height: 100%;
}

#guest #right {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-color: lightgreen;
}

#dashboard nav {
    width: 100%;
    padding: 2rem;
    background-color: #fff;
    border-bottom: 1px solid #dedede;
}

#dashboard nav a.logo {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background: #4f39f6;
    border-radius: 1rem;
}

#dashboard nav .main_menu {
    display: inline-block;
    background: #fafafa;
    width: calc(100% - 15rem);
    margin-left: 1rem;
    text-align: center;
    vertical-align: top;
}

#dashboard nav .main_menu li {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: inline-block;
}

#dashboard nav .main_menu li a {
    display: inline-block;
    font-weight: bold;
    color: #111;
    padding: 1rem 2rem;
    line-height: 2rem;
}

#dashboard nav.d a.d,
#dashboard nav.p a.p,
#dashboard nav.v a.v,
#dashboard nav.s a.s,
#dashboard nav.e a.e {
    border-bottom: 2px solid #4f39f6;
}

#dashboard nav .user {
    position: absolute;
    right: 2rem;
    top: 2rem;
    width: 9rem;
    height: 4rem;
}

#dashboard nav .user .g-drop.mm {
    display: none;
}

#dashboard nav .user .drop {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background-color: lightgreen;
    border-radius: 1rem;
    margin-right: 1rem;
    text-align: center;
    line-height: 4rem;
    color: #111;
    font-size: 1.5rem;
}

#dashboard nav .user .g-drop>.menu {
    right: 1rem;
}

#dashboard nav .user .notification {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background-color: lightblue;
    border-radius: 1rem;
    margin-right: 1rem;
}

#dashboard nav .user .avatar {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background-color: orangered;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    text-align: center;
    line-height: 4rem;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
}

#dashboard #full {
    background-image: repeating-linear-gradient(135deg, #dedede 0px, #eee 1px, transparent 1px, transparent 10px);
}

@media (max-width: 1279px) {
    #dashboard nav .main_menu {
        width: calc(100% - 20rem);
    }

    #dashboard nav .user {
        width: 14rem;
    }

    #dashboard nav .user .g-drop.mm {
        display: inline-block;
    }

    #dashboard nav .main_menu {
        display: none;
    }
}

/* Vendors Table Styling */
.vendors-table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #fff;
    border-radius: 0.5rem;
    overflow: visible;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    table-layout: auto;
}

.vendors-table th,
.vendors-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e5e5e5;
    font-size: 0.875rem;
    white-space: nowrap;
}

.vendors-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Fixed first column styling */
.vendors-table th:first-child,
.vendors-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    white-space: normal;
    min-width: 180px;
    max-width: 220px;
    border-left: 3px solid transparent;
    transition: border-left-color 0.2s ease, background-color 0.2s ease;
}

.vendors-table th:first-child {
    z-index: 15;
    background-color: #f8f9fa;
}

.vendors-table td:first-child:hover {
    border-left-color: #007bff;
    background-color: #f8f9fa;
}

/* Name link styling */
.vendors-table td .name-link {
    color: #123;
    text-decoration: none;
    display: block;
    transition: color 0.2s;
    font-size: 0.95rem;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.vendors-table td .name-link:hover {
    color: #007bff;
    text-decoration: none;
    background: transparent;
}

.vendors-table tr:hover {
    background-color: #f5f5f5;
}

.vendors-table tr:hover td:first-child {
    background-color: #f5f5f5;
}

.vendors-table tr:last-child td {
    border-bottom: none;
}

.vendors-table td button {
    padding: 0.25rem 0.5rem;
    margin: 0 0.125rem;
    font-size: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.vendors-table td button:hover {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.vendors-table td a {
    padding: 0.25rem 0.5rem;
    margin: 0 0.125rem;
    font-size: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.vendors-table td a:hover {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
    text-decoration: none;
}

.vendors-table td:first-child {
    font-weight: 500;
    color: #333;
}

.vendors-table td:last-child {
    text-align: center;
    white-space: nowrap;
}

/* Center align specific columns: Type, Available, Prefer, Trial, Notes, Entry Date */
.vendors-table td:nth-child(2),
/* Type */
.vendors-table td:nth-child(4),
/* Available */
.vendors-table td:nth-child(5),
/* Prefer */
.vendors-table td:nth-child(6),
/* Trial */
.vendors-table td:nth-child(7),
/* Notes */
.vendors-table td:nth-child(14)

/* Entry Date */
    {
    text-align: center;
}

/* Check Columns Styling - center align only, no width constraints */
.vendors-table td:nth-child(8),
/* AG (Agreement) */
.vendors-table td:nth-child(9),
/* AC (Accounts) */
.vendors-table td:nth-child(10),
/* MT (MT Policy) */
.vendors-table td:nth-child(12),
/* Interests */
.vendors-table td:nth-child(13)

/* Experience */
    {
    text-align: center;
    white-space: nowrap;
    padding: 0.75rem 0.5rem;
}

.vendors-table th:nth-child(8),
/* AG (Agreement) */
.vendors-table th:nth-child(9),
/* AC (Accounts) */
.vendors-table th:nth-child(10)

/* MT (MT Policy) */
    {
    text-align: center;
    white-space: nowrap;
}

/* Actions column - dimmed, no filter/sort */
.vendors-table th:last-child {
    color: #999;
    font-size: 1.125rem;
    line-height: 1.25em;
}

/* Responsive table */
@media (max-width: 1200px) {
    .vendors-table {
        font-size: 0.8rem;
    }

    .vendors-table th,
    .vendors-table td {
        padding: 0.5rem;
    }
}

/* Filter Bar Styling */
.vendors-container {
    width: 100%;
}

.filter-bar {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.results-count {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0rem;
    position: relative;
}

.saved-filters-icons {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.icon-btn {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    transition: all 0.2s;
    padding: 0;
    font-weight: bold;
    min-height: auto;
}

.icon-btn:hover {
    background: #f8f9fa;
    border-color: #6c47ff;
}

.save-icon-btn {
    color: #28a745;
}

.save-icon-btn:hover {
    background: #e6f9ea;
    border-color: #28a745;
}

.menu-icon-btn {
    color: #6c47ff;
}

.menu-icon-btn:hover {
    background: #f0edff;
}

.clear-all-btn {
    padding: 0.375rem 0.75rem;
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 500;
}

.clear-all-btn:hover {
    background: #c82333;
}

.active-filters-display {
    margin-top: 0rem;
}

.filter-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

/* Saved Filters Dropdown (using g-drop framework styles) */
.saved-filters-icons .g-drop .menu {
    min-width: 250px;
    max-width: 350px;
}

.saved-filter-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.saved-filter-name {
    flex: 1;
}

.saved-filter-delete {
    background: transparent;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.saved-filter-delete:hover {
    background: #ffe6e6;
}

/* Save Filter Modal */
.save-filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.save-filter-modal-content {
    background: #fff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
}

.save-filter-modal-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: #333;
}

.save-filter-modal-content label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
    border: none;
    padding: 0;
    min-height: auto;
}

.save-filter-modal-content input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.save-filter-modal-content input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.125rem rgba(0, 123, 255, 0.25);
}

.save-filter-modal-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.save-filter-modal-buttons button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.save-filter-modal-buttons .btn-cancel {
    background: #6c757d;
    color: #fff;
}

.save-filter-modal-buttons .btn-cancel:hover {
    background: #5a6268;
}

.save-filter-modal-buttons .btn-save {
    background: #28a745;
    color: #fff;
}

.save-filter-modal-buttons .btn-save:hover {
    background: #218838;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    background: #85a1be;
    color: #fff;
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.813rem;
    font-weight: 500;
    white-space: nowrap;
}

.filter-tag.sort-tag {
    background: #72a87e;
}

/* Legacy filter controls - keep for backward compatibility but hide */
.filter-controls {
    display: none;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
    display: none;
}

.filter-group input,
.filter-group select {
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    background-color: #fff;
    transition: border-color 0.2s;
    width: 9rem;
}

#nameSearch {
    width: 14rem;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.125rem rgba(0, 123, 255, 0.25);
}

.filter-group button {
    padding: 0.5rem 1rem;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.filter-group button:hover {
    background: #5a6268;
}

.table-container {
    background: #fff;
    border-radius: 0.5rem;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
}

.table-container.ofv {
    overflow-y: visible;
}

/* Responsive filter bar */
@media (max-width: 768px) {
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        min-width: auto;
        width: 100%;
    }
}

/* Vendor Type Badges */
.vendor-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vendor-badge.freelancer {
    background-color: #a2d69e;
    border-radius: 4px;
}

.vendor-badge.lsp {
    background-color: #4714fd;
    border-radius: 50%;
}

.vendor-badge.unknown {
    background-color: #fff;
    color: #6c757d;
    border: 2px solid #dee2e6;
    border-radius: 50%;
}

.vendor-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Tooltip Styling - Dynamic positioning to avoid overflow issues */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

/* Tooltip container appended to body */
.tooltip-container {
    position: fixed;
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tooltip-container.show {
    opacity: 1;
}

.tooltip-container::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Skills Dropdown Styling */
.skills-dropdown {
    position: relative;
    display: inline-block;
    min-width: fit-content;
    background: #fff;
    padding: 0.5rem;
    border: 1px solid #eee;
    border-radius: 0.5rem;
    margin: -0.5rem;
}

.skills-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 0.5rem;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0.5rem;
    margin: -0.5rem;
}

.skills-single {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 0.5rem;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0.5rem;
    margin: -0.5rem;
}

.dropdown-arrow {
    font-size: 10px;
    color: #6c757d;
    margin-left: auto;
    padding-left: 8px;
    border-left: 1px solid #dee2e6;
    transition: transform 0.2s;
}

.skills-dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    min-width: 100%;
    width: max-content;
}

.skill-row {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-row:last-child {
    border-bottom: none;
}

.skill-row:hover {
    background-color: #f8f9fa;
}

/* Language Pair Badges */
.lang-badge {
    background-color: #007bff;
    color: #fff;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 2px;
    white-space: nowrap;
    display: inline-block;
}

/* Field Badges */
.field-badge {
    background-color: #28a745;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-right: 2px;
    white-space: nowrap;
    display: inline-block;
}

/* Price Badges */
.price-badge {
    background-color: #6c757d;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    display: inline-block;
}

/* Native Speaker Gold Styling */
.price-badge.native {
    background: linear-gradient(135deg, #ffd700, #ffed4a);
    color: #8b4513;
    border: 1px solid #ffed4a;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

.price-badge.native::before {
    content: '🏆';
    margin-right: 2px;
    font-size: 10px;
}

/* Matching Skill Combinations (when filters are active) */
.skill-matching {
    background-color: #e7f3ff !important;
    border-left: 3px solid #007bff;
}

.skill-row.skill-matching {
    background-color: #e7f3ff !important;
    border-left: 3px solid #007bff;
    padding-left: 5px;
}

.skill-row.skill-matching:hover {
    background-color: #d4e9ff !important;
}

.price-badge.matching {
    background-color: #007bff;
    box-shadow: 0 0 6px rgba(0, 123, 255, 0.5);
    animation: pulse-matching 2s infinite;
}

.price-badge.native.matching {
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.8), 0 2px 4px rgba(255, 215, 0, 0.3);
}

@keyframes pulse-matching {

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

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

/* Account Check Marks */
.check-favro {
    color: #007bff;
    font-size: 14px;
    font-weight: bold;
    margin-right: 8px;
    cursor: pointer;
}

.check-memoq {
    color: #28a745;
    font-size: 14px;
    font-weight: bold;
    margin-right: 8px;
    cursor: pointer;
}

.check-slack {
    color: #fd7e14;
    font-size: 14px;
    font-weight: bold;
    margin-right: 8px;
    cursor: pointer;
}

.check-vpn {
    color: #ffc107;
    font-size: 14px;
    font-weight: bold;
    margin-right: 8px;
    cursor: pointer;
}

.check-favro:hover,
.check-memoq:hover,
.check-slack:hover,
.check-vpn:hover {
    opacity: 0.7;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* General Check Marks */
.check-agreement,
.check-mt-policy,
.check-yes {
    color: #28a745;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
}

.check-no {
    color: #dc3545;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
}

/* Legacy - keep for backward compatibility */
.check-interests {
    color: #28a745;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
}

.check-experience {
    color: #dc3545;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
}

.check-agreement:hover,
.check-mt-policy:hover,
.check-yes:hover,
.check-no:hover,
.check-interests:hover,
.check-experience:hover {
    opacity: 0.7;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Trial Status Indicators */
.trial-completed {
    color: #28a745;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.trial-progress {
    color: #fd7e14;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.trial-empty {
    color: #6c757d;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.trial-completed:hover,
.trial-progress:hover,
.trial-empty:hover {
    opacity: 0.7;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Notes Icon */
.notes-icon {
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.notes-icon:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}

/* Preference Badges */
.preference-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
}

.pref-0 {
    background-color: #6c757d;
    /* Gray - Never */
}

.pref-1 {
    background-color: #dc3545;
    /* Red - Lowest Possibility */
}

.pref-2 {
    background-color: #fd7e14;
    /* Orange - Low Possibility */
}

.pref-3 {
    background-color: #ffc107;
    /* Yellow - Medium Possibility */
    color: #333;
    /* Dark text for better contrast */
}

.pref-4 {
    background-color: #007bff;
    /* Blue - Highest Possibility */
}

.pref-5 {
    background-color: #28a745;
    /* Green - Current Vendor */
}

.preference-badge:hover {
    opacity: 0.8;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* CAT Tool Badges */
td.ct {
    padding: 0.75rem 0.5rem;
    white-space: wrap;
    width: 9.5rem;
}

.cat-tool-badge {
    display: inline-block;
    padding: 2px 6px;
    margin: 1px 2px;
    font-size: 10px;
    background-color: #a89dbb;
    color: white;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    vertical-align: middle;
}

.cat-tool-badge:hover {
    background-color: #5a32a3;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/* Availability Badges */
.availability-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    min-width: 45px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.availability-badge:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Stage 1: 0% - Dark Gray/Black */
.avail-0 {
    background-color: #343a40;
    color: #fff;
}

/* Stage 2: 1-49% - Red */
.avail-low {
    background-color: #dc3545;
    color: #fff;
}

/* Stage 3: 50-99% - Orange/Yellow */
.avail-medium {
    background-color: #ffc107;
    color: #333;
}

/* Stage 4: 100% - Green */
.avail-100 {
    background-color: #007bff;
    color: #fff;
}

/* Stage 5: 101-200% - Purple/Violet with glow and shine effect */
.avail-high {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 50%, #a569bd 100%);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(155, 89, 182, 0.6), 0 0 25px rgba(155, 89, 182, 0.3);
    animation: purple-pulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.avail-high::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 70%);
    animation: shine 3s ease-in-out infinite;
}

.avail-high:hover {
    box-shadow: 0 0 20px rgba(155, 89, 182, 0.8), 0 0 35px rgba(155, 89, 182, 0.5);
}

@keyframes purple-pulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(155, 89, 182, 0.6), 0 0 25px rgba(155, 89, 182, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(155, 89, 182, 0.8), 0 0 35px rgba(155, 89, 182, 0.5);
    }
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%);
    }

    100% {
        transform: translateX(100%) translateY(100%);
    }
}

/* Sortable Column Headers */
.sortable-header {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.sortable-header:hover .header-label {
    color: #0066cc;
}

.sortable-header.header-active {
    background: #f0f7ff;
}

.header-indicator {
    color: #bc00cc;
    font-size: 1rem;
    margin-left: 4px;
    vertical-align: middle;
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    line-height: 0.8em;
}

/* Filter/Sort Bubble */
.filter-bubble {
    position: fixed;
    transform: translateX(-50%);
    margin-top: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    min-width: 200px;
    animation: bubbleFadeIn 0.2s ease-out;
}

.filter-bubble::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
}

.filter-bubble::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #ddd;
    z-index: -1;
}

.bubble-content {
    padding: 12px 16px;
    font-size: 0.875rem;
    color: #666;
}

.bubble-section {
    margin-bottom: 12px;
}

.bubble-section:last-child {
    margin-bottom: 0;
}

.bubble-section label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    font-size: 0.8rem;
    border: none;
    padding: 0;
    min-height: auto;
}

.bubble-section input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.bubble-section input[type="text"]:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.bubble-section input[type="number"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.bubble-section input[type="number"]:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.bubble-section select {
    width: 100%;
    padding: 6px 1.8rem 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    box-sizing: border-box;
    background-color: white;
    cursor: pointer;
}

.bubble-section select:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.sort-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.sort-link {
    display: inline-block;
    padding: 4px 6px;
    color: #0066cc;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.sort-link:hover {
    background: #f0f7ff;
    border-color: #0066cc;
}

.sort-link.active {
    background: #0066cc;
    color: white;
    border-color: #0066cc;
}

.clear-column-btn {
    width: 100%;
    padding: 6px 12px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-column-btn:hover {
    background: #c82333;
}

/* Checkbox styling for AC filters */
.filter-bubble .bubble-section input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    cursor: pointer;
    accent-color: #0066cc;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    opacity: 1 !important;
    position: relative !important;
    flex-shrink: 0;
}

.filter-bubble .bubble-section label {
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    color: #333;
    margin: 0 !important;
}

/* Details and Summary elements inside bubble - override global font-size:0 */
.filter-bubble .bubble-section details {
    font-size: 0.875rem !important;
}

.filter-bubble .bubble-section summary {
    font-size: 0.875rem !important;
    color: #333 !important;
    cursor: pointer;
    user-select: none;
    padding: 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

.filter-bubble .bubble-section summary:hover {
    background: #e9ecef;
}

.filter-bubble .bubble-section summary::marker {
    font-size: 1rem;
}

.filter-bubble .bubble-section div {
    font-size: 0.875rem !important;
}

.filter-bubble .bubble-section details>div {
    font-size: 0.875rem !important;
}

/* Remove checkbox pseudo-elements and padding inside bubble */
.filter-bubble .bubble-section input[type="checkbox"]+label::before,
.filter-bubble .bubble-section input[type="checkbox"]+label::after {
    display: none !important;
}

.filter-bubble .bubble-section input[type="checkbox"]+label {
    padding-left: 0 !important;
}

/* Tom-select styling inside filter bubble */
.filter-bubble .bubble-section .ts-wrapper {
    width: 100% !important;
}

.filter-bubble .bubble-section .ts-control {
    min-height: 38px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
}

.filter-bubble .bubble-section .ts-control:focus {
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.filter-bubble .bubble-section .ts-dropdown {
    font-size: 0.85rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10001 !important;
}

.filter-bubble .bubble-section .ts-dropdown [data-selectable].option,
.filter-bubble .bubble-section .ts-wrapper.multi .ts-control>div {
    font-size: 0.85rem;
}

@keyframes bubbleFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.remove-filter {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    padding: 0 0 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
    min-height: auto;
}

.remove-filter:hover {
    opacity: 1;
}