.hours-dashboard {
    padding: 16px;
    background: #F5F7FA;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.hd-loading,
.hd-empty {
    padding: 40px;
    text-align: center;
    color: #6B7280;
}

.hd-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 16px;
}

.hd-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

/* KPI row */
.hd-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.hd-kpi {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
}

.hd-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #EFF6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

.hd-icon-clock {
    background-color: #EFF6FF;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E88E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}

.hd-icon-users {
    background-color: #ECFDF5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343A047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

.hd-icon-average {
    background-color: #FFF7ED;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FB8C00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='16'/></svg>");
}

.hd-icon-pause {
    background-color: #F3F4F6;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23546E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='4' width='4' height='16'/><rect x='14' y='4' width='4' height='16'/></svg>");
}

.hd-kpi-body {
    flex: 1;
    min-width: 0;
}

.hd-kpi-title {
    font-size: 12px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.hd-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.hd-kpi-unit {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
}

.hd-kpi-trend {
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

.hd-trend-up {
    color: #059669;
}

.hd-trend-down {
    color: #DC2626;
}

/* Charts */
.hd-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.hd-charts-row:nth-child(3) {
    grid-template-columns: 1fr 1fr;
}

.hd-chart {
    min-height: 300px;
}

@media (max-width: 1200px) {
    .hd-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .hd-charts-row,
    .hd-charts-row:nth-child(3) {
        grid-template-columns: 1fr;
    }
}