/* =====================================================
   STAFF DASHBOARD WIDGETS
   Specialized widget styles for metrics, charts, celebrations
   ===================================================== */

/* =====================================================
   CHART CONTAINERS
   ===================================================== */
.chart-container {
    position: relative;
    height: 200px;
    margin-top: 1rem;
}

.chart-container canvas {
    max-height: 100%;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: center;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.chart-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* =====================================================
   METRICS MINI CARDS
   Small stat displays for quick glance
   ===================================================== */
.metrics-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.metrics-mini-card {
    background: var(--light-bg);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.metrics-mini-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.metrics-mini-label {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.metrics-mini-change {
    font-size: 0.6875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.metrics-mini-change.positive {
    color: var(--success);
}

.metrics-mini-change.negative {
    color: var(--danger);
}

/* =====================================================
   ORDER TYPE BREAKDOWN
   Pie/Bar chart display for order distribution
   ===================================================== */
.order-type-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.order-type-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--light-bg);
    border-radius: 6px;
}

.order-type-color {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

.order-type-info {
    flex: 1;
    min-width: 0;
}

.order-type-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.order-type-count {
    font-size: 0.6875rem;
    color: var(--text-light);
}

.order-type-revenue {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Order type colors */
.order-type-color.dtg { background: #3b82f6; }
.order-type-color.embroidery { background: #8b5cf6; }
.order-type-color.screen-print { background: #10b981; }
.order-type-color.cap-embroidery { background: #f59e0b; }
.order-type-color.transfers { background: #ec4899; }
.order-type-color.other { background: #6b7280; }

/* =====================================================
   CELEBRATIONS WIDGET
   Birthdays, anniversaries
   ===================================================== */
.celebrations-widget {
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.celebrations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.celebrations-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.celebrations-title i {
    color: #f59e0b;
}

.celebration-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.celebration-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 8px;
}

.celebration-item.birthday {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
}

.celebration-item.anniversary {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.celebration-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.celebration-info {
    flex: 1;
}

.celebration-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.celebration-detail {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.celebration-date {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-light);
}

/* Empty state */
.celebrations-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-light);
    font-size: 0.875rem;
}

/* =====================================================
   QUICK TIPS WIDGET
   ===================================================== */
.tips-widget {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--success);
    margin-bottom: 1rem;
}

.tips-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tips-header i {
    color: var(--success);
}

.tips-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #166534;
}

.tips-content {
    font-size: 0.8125rem;
    color: #15803d;
    line-height: 1.5;
}

.tips-content a {
    color: #166534;
    font-weight: 500;
}

/* =====================================================
   SHOPWORKS DATA INDICATOR
   Shows data source and freshness
   ===================================================== */
.data-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #059669;
}

.data-source-badge i {
    font-size: 0.625rem;
}

.data-source-badge.loading {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.data-source-badge.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

.data-freshness {
    font-size: 0.625rem;
    color: var(--text-light);
    margin-left: 0.5rem;
}

/* =====================================================
   EMPTY STATES
   ===================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    background: var(--light-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-state-icon i {
    font-size: 1.25rem;
    color: var(--text-light);
}

.empty-state-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.empty-state-message {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    max-width: 300px;
}

/* =====================================================
   ERROR STATES
   ===================================================== */
.error-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
}

.error-state-icon {
    width: 36px;
    height: 36px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.error-state-icon i {
    color: var(--danger);
}

.error-state-content {
    flex: 1;
}

.error-state-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--danger);
}

.error-state-message {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.error-state-retry {
    font-size: 0.8125rem;
    color: var(--wsu-crimson);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
    padding: 0;
}

.error-state-retry:hover {
    text-decoration: underline;
}

/* =====================================================
   SKELETON LOADERS
   ===================================================== */
.skeleton {
    background: linear-gradient(90deg, var(--border-light) 25%, var(--hover-bg) 50%, var(--border-light) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

.skeleton-value {
    height: 2rem;
    width: 50%;
    margin-bottom: 0.5rem;
}

.skeleton-bar {
    height: 8px;
    width: 100%;
}

.skeleton-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* =====================================================
   LEADERBOARD STYLES
   Rep ranking display
   ===================================================== */
.leaderboard-podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
}

.podium-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.podium-position.first { order: 2; }
.podium-position.second { order: 1; }
.podium-position.third { order: 3; }

.podium-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--wsu-crimson);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.podium-position.first .podium-avatar {
    width: 56px;
    height: 56px;
    font-size: 1.125rem;
}

.podium-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.podium-position.first .podium-badge {
    background: #fbbf24;
    color: #92400e;
}

.podium-position.second .podium-badge {
    background: #9ca3af;
    color: #374151;
}

.podium-position.third .podium-badge {
    background: #d97706;
    color: white;
}

.podium-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
}

.podium-revenue {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.podium-bar {
    width: 60px;
    margin-top: 0.5rem;
    border-radius: 4px 4px 0 0;
}

.podium-position.first .podium-bar {
    height: 80px;
    background: linear-gradient(to top, #fbbf24, #fcd34d);
}

.podium-position.second .podium-bar {
    height: 60px;
    background: linear-gradient(to top, #9ca3af, #d1d5db);
}

.podium-position.third .podium-bar {
    height: 40px;
    background: linear-gradient(to top, #d97706, #fbbf24);
}

/* =====================================================
   REFRESH CONTROLS
   ===================================================== */
.refresh-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.refresh-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--light-bg);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.refresh-btn:hover {
    background: var(--hover-bg);
    color: var(--wsu-crimson);
}

.refresh-btn.loading i {
    animation: spin 1s linear infinite;
}

.sync-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--light-bg);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
    margin-right: 4px;
}

.sync-btn:hover {
    background: var(--hover-bg);
    color: #2e7d32;
}

.sync-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.sync-btn i.fa-spin {
    animation: spin 1s linear infinite;
}

.sync-status {
    font-size: 0.6875rem;
    color: var(--text-light);
    margin-right: 8px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.last-updated {
    font-size: 0.6875rem;
    color: var(--text-light);
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 768px) {
    .metrics-mini-grid {
        grid-template-columns: 1fr 1fr;
    }

    .leaderboard-podium {
        flex-direction: column;
        align-items: center;
    }

    .podium-position {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
        gap: 1rem;
        padding: 0.75rem;
        background: var(--light-bg);
        border-radius: 8px;
    }

    .podium-position.first,
    .podium-position.second,
    .podium-position.third {
        order: unset;
    }

    .podium-bar {
        display: none;
    }

    .podium-avatar {
        margin-bottom: 0;
    }
}

/* =====================================================
   HEADER CELEBRATIONS WIDGET
   Birthday/Anniversary indicators in the top header
   ===================================================== */
.celebrations-widget {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.celebration-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-direction: row;
}

.celebration-item:hover {
    background: rgba(245, 158, 11, 0.2);
}

.celebration-item.staff-directory-btn {
    background: rgba(99, 102, 241, 0.1);
}

.celebration-item.staff-directory-btn:hover {
    background: rgba(99, 102, 241, 0.2);
}

.celebration-icon {
    font-size: 1rem;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
}

.celebration-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    background: white;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.celebration-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: none;
}

@media (min-width: 900px) {
    .celebration-label {
        display: inline;
    }
}

/* Celebration Dropdown */
.celebration-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.celebration-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.celebration-dropdown-header {
    padding: 0.75rem 1rem;
    background: var(--light-bg);
    border-radius: 8px 8px 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.celebration-dropdown-header i {
    color: var(--wsu-crimson);
}

.celebration-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
}

.celebration-entry {
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.celebration-entry:hover {
    background: var(--light-bg);
}

.celebration-entry.today {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.celebration-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.celebration-date {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.celebration-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-light);
    font-size: 0.8125rem;
}

.celebration-view-all {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--wsu-crimson);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: background 0.15s;
}

.celebration-view-all:hover {
    background: var(--light-bg);
}

/* Header Divider */
.header-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
}

/* Login Link */
.login-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--text-secondary);
    background: var(--light-bg);
    text-decoration: none;
    transition: all 0.2s;
}

.login-link:hover {
    background: var(--hover-bg);
    color: var(--wsu-crimson);
}

/* =====================================================
   STAFF DIRECTORY MODAL
   Full employee roster with filtering
   ===================================================== */
.staff-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.staff-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.staff-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.staff-modal-overlay.open .staff-modal {
    transform: scale(1);
}

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

.staff-modal-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.staff-modal-header h2 i {
    color: var(--wsu-crimson);
}

.staff-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--light-bg);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.staff-modal-close:hover {
    background: var(--hover-bg);
    color: var(--danger);
}

.staff-modal-filters {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--light-bg);
    flex-wrap: wrap;
}

.staff-filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.staff-filter-btn:hover {
    border-color: var(--wsu-crimson);
    color: var(--wsu-crimson);
}

.staff-filter-btn.active {
    background: var(--wsu-crimson);
    border-color: var(--wsu-crimson);
    color: white;
}

.staff-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
}

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

.staff-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--light-bg);
    position: sticky;
    top: 0;
}

.staff-table td {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.staff-table tr:hover {
    background: var(--light-bg);
}

.staff-table tr.row-former {
    opacity: 0.6;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.status-badge.status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-badge.status-leaving {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.status-badge.status-former {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.empty-message {
    text-align: center;
    padding: 2rem !important;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .staff-modal {
        width: 95%;
        max-height: 90vh;
    }

    .staff-modal-filters {
        padding: 0.75rem 1rem;
    }

    .staff-filter-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }

    .staff-table th,
    .staff-table td {
        padding: 0.5rem;
        font-size: 0.75rem;
    }

    .celebrations-widget {
        gap: 0.25rem;
    }

    .celebration-item {
        padding: 0.25rem 0.5rem;
    }
}

/* =====================================================
   GARMENT TRACKER WIDGET
   Premium garment tracking table for Nika and Taneisha
   ===================================================== */

/* Card styling - left column, row 2 in zone-metrics grid */
.garment-tracker-card {
    grid-column: 1;
    grid-row: 2;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.garment-tracker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.garment-tracker-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.garment-tracker-title i {
    color: var(--wsu-crimson);
}

.garment-tracker-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.garment-tracker-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Table wrapper */
.garment-tracker-table-wrapper {
    overflow-x: auto;
}

/* Table styling */
.garment-tracker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.garment-tracker-table th,
.garment-tracker-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.garment-tracker-table th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--light-bg);
}

/* Rep column headers */
.garment-tracker-table th.rep-col {
    /* Removed tooltip cursor - bonus now shown at bottom */
}

/* Column widths */
.garment-name-col {
    min-width: 200px;
}

.rep-col,
.total-col {
    text-align: center !important;
    min-width: 70px;
}

.total-col {
    font-weight: 600;
    background: var(--light-bg);
}

/* Garment info cell */
.garment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.garment-style {
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
}

.garment-name {
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

/* Quantity cells */
.garment-tracker-table td.has-qty {
    font-weight: 600;
    color: #059669;
}

.garment-tracker-table tr.no-data td {
    color: var(--text-light);
}

/* Richardson row highlight */
.garment-tracker-table tr.richardson-row {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.garment-tracker-table tr.richardson-row .garment-style {
    color: #7c3aed;
}

/* Expandable group rows */
.garment-tracker-table tr.garment-group-row {
    cursor: pointer;
    transition: background 0.15s;
}

.garment-tracker-table tr.garment-group-row:hover {
    background: var(--hover-bg);
}

.garment-group-toggle {
    font-size: 0.6rem;
    margin-right: 0.375rem;
    transition: transform 0.2s ease;
    display: inline-block;
    opacity: 0.6;
}

.garment-group-toggle.expanded {
    transform: rotate(90deg);
}

/* Child rows (individual items within a group) */
.garment-tracker-table tr.garment-child-row {
    cursor: default;
    background: rgba(255, 255, 255, 0.02);
}

.garment-tracker-table tr.garment-child-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.garment-tracker-table tr.garment-child-row td {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.75rem;
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

.garment-child-info {
    padding-left: 1.25rem;
}

.garment-child-info .garment-style {
    font-weight: 500;
    font-size: 0.7rem;
    opacity: 0.8;
}

.garment-child-info .garment-name {
    font-size: 0.675rem;
    opacity: 0.7;
}

/* Hover on rows to show tooltip info */
.garment-tracker-table tbody tr {
    cursor: help;
    transition: background 0.15s;
}

.garment-tracker-table tbody tr:hover {
    background: var(--hover-bg);
}

/* Bonus row doesn't need help cursor - has its own tooltip */
.garment-tracker-table tr.bonus-row {
    cursor: default;
}

.garment-tracker-table tr.bonus-row:hover {
    background: transparent;
}

/* Bonus totals row at bottom with $500 goal progress */
.garment-tracker-table tr.bonus-row {
    border-top: 2px solid var(--border-color);
}

.garment-tracker-table tr.bonus-row td {
    border-bottom: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Bonus cell with progress bar */
.garment-tracker-table td.bonus-cell {
    padding: 0.5rem 0.375rem;
    vertical-align: top;
}

.bonus-amount {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    text-align: center;
}

.bonus-progress {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.bonus-progress-bar {
    flex: 1;
    height: 10px;
    background: var(--border-light);
    border-radius: 5px;
    overflow: hidden;
}

.bonus-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 5px;
    transition: width 0.3s ease;
}

.bonus-progress-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 42px;
    text-align: right;
}

/* Goal reached state - celebration! */
.bonus-cell.goal-reached .bonus-amount {
    color: #059669;
}

.bonus-cell.goal-reached .bonus-progress-fill {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.bonus-cell.goal-reached .bonus-progress-label {
    color: #059669;
}

/* Footer */
.garment-tracker-footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
}

.garment-tracker-meta {
    font-size: 0.6875rem;
    color: var(--text-light);
}

/* Responsive */
@media (max-width: 768px) {
    .garment-tracker-card {
        padding: 1rem;
    }

    .garment-tracker-table {
        font-size: 0.75rem;
    }

    .garment-name-col {
        min-width: 150px;
    }

    .rep-col,
    .total-col {
        min-width: 50px;
    }

    .garment-tracker-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* =====================================================
   PRODUCTION SCHEDULE PREDICTOR
   Historical-based turnaround time estimates
   ===================================================== */

/* Widget header with season badge */
.widget-collapsible[data-widget="production"] .widget-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.widget-collapsible[data-widget="production"] .widget-title {
    flex: 1;
}

/* Season badge in header */
.season-badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-right: 0.5rem;
}

.season-badge.season-slow {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.season-badge.season-normal {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.season-badge.season-busy {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Predictor grid - auto-fit to adapt to container width */
.production-predictor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
    gap: 0.75rem;
}

/* Individual service card */
.production-card {
    background: var(--light-bg);
    border-radius: 8px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    cursor: help;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}

.production-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.production-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.production-card-header i {
    font-size: 1rem;
    color: var(--wsu-crimson);
}

.production-service-name {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

/* Days display */
.production-days {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.production-days-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.production-days-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Due date display */
.production-due-date {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--wsu-crimson);
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

/* Capacity indicator dot */
.production-capacity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0.5rem auto 0;
}

.production-capacity-dot.capacity-open {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.production-capacity-dot.capacity-moderate {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.production-capacity-dot.capacity-busy {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

/* Footer */
.production-footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.production-meta {
    font-size: 0.6875rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.production-meta i {
    font-size: 0.625rem;
}

/* Loading state */
.production-loading {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* Responsive - ensure minimum 2 columns on mobile */
@media (max-width: 576px) {
    .production-predictor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .production-days-number {
        font-size: 1.25rem;
    }
}

/* =====================================================
   POLICIES CATEGORY - COLLAPSIBLE IN QUICK ACCESS
   ===================================================== */

/* Make header clickable for collapse toggle */
.policies-category .collapsible-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    transition: opacity 0.2s ease;
}

.policies-category .collapsible-header:hover {
    opacity: 0.8;
}

/* Toggle icon rotation */
.policies-category .toggle-icon {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.policies-category .toggle-icon.rotated {
    transform: rotate(180deg);
}

/* Collapsible content area */
.policies-category .policies-content {
    max-height: 300px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    margin-top: 0.75rem;
}

.policies-category .policies-content.collapsed {
    max-height: 0;
    margin-top: 0;
    padding: 0;
}

/* Compact policy cards for Quick Access context */
.policies-category .policy-mini-card {
    padding: 0.625rem;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    border-radius: 6px;
}

.policies-category .policy-mini-title {
    font-size: 0.75rem;
}

.policies-category .policy-mini-date {
    font-size: 0.625rem;
}

.policies-category .policy-mini-badge {
    font-size: 0.5rem;
    padding: 0.125rem 0.375rem;
}