/* Helper Classes and Utilities */

/* Text Utilities */
.truncated {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Display Utilities */
.show {
    display: block;
}

/* State Utilities */
.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.exporting {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    border-color: #9ca3af !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Status State Classes */
.status-loading {
    background: linear-gradient(90deg, #fff3cd 0%, #fef3c7 50%, #fff3cd 100%);
    background-size: 200% 100%;
    border-color: #f59e0b;
}

.status-loading .status-text {
    color: #d97706;
    position: relative;
}

.status-loading .status-text::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid #f59e0b;
    border-top: 2px solid transparent;
    border-radius: 50%;
    vertical-align: middle;
}

.status-error .status-text {
    color: #dc2626;
}

.status-success {
    background: linear-gradient(90deg, #d1fae5 0%, #a7f3d0 50%, #d1fae5 100%);
    background-size: 200% 100%;
    border-color: #059669;
}

.status-success .status-text {
    color: #059669;
    position: relative;
}

.status-success .status-text::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid #059669;
    border-top: 2px solid transparent;
    border-radius: 50%;
    vertical-align: middle;
}

/* Toggle State Classes */
.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: white;
}

/* Status Toggle Active States */
.active[data-status="perfect-match"] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #059669;
}

.active[data-status="missing-quickbooks"] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #dc2626;
}

.active[data-status="quantity-mismatch"] {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #d97706;
}

.active[data-status="extra-quickbooks"] {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    color: #7c3aed;
}

/* Row Status Classes */
.row-perfect-match,
.row-quantity-mismatch,
.row-nights-mismatch,
.row-service-mismatch,
.row-missing-quickbooks,
.row-extra-quickbooks {
    background-color: white !important;
    border-left: none !important;
    color: #374151 !important;
}

.row-perfect-match td,
.row-quantity-mismatch td,
.row-nights-mismatch td,
.row-service-mismatch td,
.row-missing-quickbooks td,
.row-extra-quickbooks td {
    color: #374151 !important;
}

.row-perfect-match:hover,
.row-quantity-mismatch:hover,
.row-nights-mismatch:hover,
.row-service-mismatch:hover,
.row-missing-quickbooks:hover,
.row-extra-quickbooks:hover {
    background-color: #f0f9ff !important;
    color: #374151 !important;
}

.row-perfect-match:hover td,
.row-quantity-mismatch:hover td,
.row-nights-mismatch:hover td,
.row-service-mismatch:hover td,
.row-missing-quickbooks:hover td,
.row-extra-quickbooks:hover td {
    color: #374151 !important;
}

/* Clickable Row Utility */
.clickable-row {
    cursor: pointer;
}

/* Expanded Row Utility */
.expanded td {
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
    position: relative;
    z-index: 5;
}

/* Sorting Classes */
.sortable {
    cursor: pointer;
    padding-right: 2rem;
}

.sortable::after {
    content: '↕';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.8rem;
    opacity: 0.6;
}

.sortable:hover::after {
    opacity: 1;
    color: #4f46e5;
}

.sortable.sort-asc::after {
    content: '↑';
    color: #4f46e5;
    opacity: 1;
}

.sortable.sort-desc::after {
    content: '↓';
    color: #4f46e5;
    opacity: 1;
}

/* Column Resizer Utility */
.column-resizer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    z-index: 11;
}

.column-resizer:hover {
    background: #4f46e5;
}

.column-resizer.resizing {
    background: #4f46e5;
}

/* User Selection Utilities */
.-webkit-user-select-none {
    -webkit-user-select: none;
}

.user-select-none {
    -webkit-user-select: none;
    user-select: none;
}