/* --- START OF FILE featureDataManagement.css --- */

/* featureDataManagement.css */

.data-hub-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.data-hub-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-secondary);
}
.hub-tab-btn {
    padding: 10px 20px; font-size: 1.1rem; font-weight: 600; color: var(--text-secondary);
    background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer;
    transition: all .2s; margin-bottom: -1px;
}
.hub-tab-btn:hover { color: var(--text-primary); }
.hub-tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }

.data-controls-header {
    background-color: var(--bg-secondary); padding: 20px; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px; border: 1px solid var(--border-secondary); animation: fadeIn 0.3s;
}
.data-controls-header .form-field { margin: 0; }

.data-controls-header.advanced {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
}
.data-controls-header.advanced #customDateRangeContainer,
.data-controls-header.advanced #customDateRangeContainer2 {
    display: flex;
    flex-direction: column;
}
.data-controls-header.advanced #customDateRangeContainer label,
.data-controls-header.advanced #customDateRangeContainer2 label {
    font-size: 0.8rem;
    margin-bottom: 4px;
    color: var(--text-secondary);
}
.data-controls-header.advanced #exportCsvBtn {
    grid-column: -1 / -2; /* Place in last column */
    min-width: 150px;
}
@media (max-width: 1200px) {
    .data-controls-header.advanced {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}
@media (max-width: 900px) {
    .data-controls-header.advanced #exportCsvBtn {
        grid-column: 1 / -1; /* Full width on smaller screens */
    }
}

.active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    margin-top: -16px;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--accent-primary-light);
    color: var(--accent-primary);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
}
.filter-pill strong {
    color: var(--text-primary);
    font-weight: 600;
}
.remove-filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent-primary);
    opacity: 0.7;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0 4px;
}
.remove-filter-btn:hover {
    opacity: 1;
}
.clear-all-filters-btn {
    font-size: var(--font-size-sm);
    padding: 4px 8px;
    min-height: auto;
    text-decoration: underline;
}


.data-list-container {
    display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 768px) { .data-list-container { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } }
@media (min-width: 1400px) { .data-list-container { grid-template-columns: repeat(3, 1fr); } }

/* --- Base Card Style --- */
.data-card {
    background-color: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column;
    gap: 12px; cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--border-interactive);
}
.data-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-primary); }
.card-meta-info { font-size: var(--font-size-sm); color: var(--text-secondary); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-tertiary);
}


/* --- Shipment Card --- */
.shipment-list-card.is-active { border-left-color: var(--accent-primary); }
.shipment-list-card.is-green { border-left-color: var(--accent-secondary); }
.shipment-list-card.is-yellow { border-left-color: var(--accent-warning); }
.shipment-list-card.is-red { border-left-color: var(--accent-danger); }
.shipment-card-header h4 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.shipment-card-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background-color: var(--bg-primary); padding: 12px; border-radius: var(--radius-md); text-align: center; border: 1px solid var(--border-secondary); }
.shipment-card-metrics > div span { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); font-family: var(--font-monospace); }
.shipment-card-metrics > div label { display: block; font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.user-avatars { display: flex; }

/* --- Quick Count Card --- */
.qc-list-card.carrier-yodel { border-left-color: #6366F1; }
.qc-list-card.carrier-fedex { border-left-color: #A855F7; }
.qc-list-card.carrier-evri { border-left-color: #EC4899; }
.qc-list-card.carrier-default { border-left-color: var(--text-placeholder); }
.qc-card-header { display: flex; justify-content: space-between; align-items: baseline; }
.qc-card-header h4 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.qc-card-header span { font-size: 0.8rem; color: var(--text-secondary); }
.qc-card-body { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; background-color: var(--bg-primary); padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border-secondary); }
.qc-metric strong { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-family: var(--font-monospace); }
.qc-metric label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; }

/* --- Fleet Card --- */
.fleet-list-card.all-ok { border-left-color: var(--accent-secondary); }
.fleet-list-card.has-issues { border-left-color: var(--accent-danger); }
.fleet-card-header { display: flex; justify-content: space-between; align-items: baseline; }
.fleet-card-header h4 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.fleet-card-header span { font-size: 0.8rem; color: var(--text-secondary); }
.fleet-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; padding-top: 8px; }
.fleet-metric { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background-color: var(--bg-primary); padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border-secondary); }
.fleet-metric svg { width: 24px; height: 24px; color: var(--text-placeholder); }
.fleet-metric strong { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-family: var(--font-monospace); }
.fleet-metric label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; }
.fleet-list-card.has-issues .fleet-metric:last-child { color: var(--accent-danger); }
.fleet-list-card.has-issues .fleet-metric:last-child strong { color: var(--accent-danger); }
.fleet-list-card.has-issues .fleet-metric:last-child svg { color: var(--accent-danger); }

/* --- Skeleton Loader --- */
@keyframes skeleton-loading { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skeleton-card { cursor: default; }
.skeleton-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border-secondary); border-left-color: var(--border-interactive); }
.skeleton-line { background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-interactive-hover) 50%, var(--bg-tertiary) 75%); background-size: 200px 100%; border-radius: var(--radius-sm); animation: skeleton-loading 1.5s infinite linear; }
.skeleton-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; background-color: var(--bg-primary); padding: 12px; border-radius: var(--radius-md); }
.skeleton-metrics div { height: 40px; background-color: var(--bg-tertiary); border-radius: var(--radius-sm); animation: skeleton-loading 1.5s infinite linear; }

/* --- Summary Modals --- */
.summary-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.summary-kpi-card { background-color: var(--bg-primary); padding: 12px; border-radius: var(--radius-md); text-align: center; border: 1px solid var(--border-secondary); }
.summary-kpi-card .label { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; margin-bottom: 4px; display: block; }
.summary-kpi-card .value { font-size: 1.5rem; font-weight: 700; font-family: var(--font-monospace); color: var(--text-primary); }
.sku-summary-list ul { list-style: none; padding: 0; max-height: 280px; overflow-y: auto; border: 1px solid var(--border-secondary); border-radius: var(--radius-md); }
.sku-summary-header, .sku-summary-item { display: grid; grid-template-columns: 2fr 1fr 1.5fr 0.5fr; gap: 16px; padding: 8px 12px; align-items: center; }
.sku-summary-header { font-weight: 600; font-size: var(--font-size-sm); color: var(--text-secondary); border-bottom: 2px solid var(--border-secondary); position: sticky; top: 0; background-color: var(--bg-secondary); z-index: 1; }
.sku-summary-item { border-bottom: 1px solid var(--border-tertiary); }
.sku-summary-item:last-child { border-bottom: none; }
.sku-summary-item .sku-code { font-weight: 600; }
.sku-summary-item .sku-pallets, .sku-summary-item .sku-packed, .sku-summary-item .sku-status { text-align: right; font-family: var(--font-monospace); }
/* All Out Quick Count Modal Table */
.sku-summary-list table { width: 100%; border-collapse: collapse; }
.sku-summary-list th, .sku-summary-list td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-secondary); font-size: var(--font-size-sm); vertical-align: middle; }
.sku-summary-list th { background-color: var(--bg-tertiary); font-weight: 600; color: var(--text-secondary); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.sku-summary-list tbody tr:hover { background-color: var(--bg-interactive-hover); }

.detailed-session-checks-table { width: 100%; border-collapse: collapse; }
.detailed-session-checks-table th, .detailed-session-checks-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-secondary); font-size: var(--font-size-sm); vertical-align: middle; }
.detailed-session-checks-table th { background-color: var(--bg-tertiary); font-weight: 600; color: var(--text-secondary); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.detailed-session-checks-table tbody tr:hover { background-color: var(--bg-interactive-hover); }
.detailed-session-checks-table .status-text { text-transform: capitalize; font-weight: 500; }
.detailed-session-checks-table tr.status-ok .status-text { color: var(--text-success); }
.detailed-session-checks-table tr.status-issue .status-text, .detailed-session-checks-table tr.status-out_of_service .status-text { color: var(--text-danger); }
.detailed-session-checks-table .notes-cell { white-space: pre-wrap; word-break: break-word; max-width: 300px; }