/* Compact activity evidence presentation. No tracking or payroll rules live here. */
#activity-pane, .review-panel {
    --review-ink: #101828;
    --review-muted: #667085;
    --review-border: #e4e7ec;
    --review-blue: #078fc7;
    --review-blue-soft: #eaf8fe;
    --review-amber: #b54708;
    color: var(--review-ink);
}

#activity-pane .activity-page-title { font-size: 15px; font-weight: 700; letter-spacing: -.03em; }
#activity-pane .activity-toolbar-button {
    min-height: 32px;
    padding: 6px 10px;
    color: var(--review-blue);
    background: #fff;
    border: 1px solid #b9e6f7;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
}
#activity-pane .activity-toolbar-button:hover { color: #fff; background: #18aeea; border-color: #18aeea; }
#activity-pane .activity-toolbar-button:focus-visible { outline: 2px solid var(--review-blue); outline-offset: 2px; }
#activity-pane .activity-date-field { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
#activity-pane .activity-date-field label { font-size: 10.5px; }
#activity-pane .activity-date-stepper {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
}
#activity-pane .activity-date-stepper .form-control {
    width: 132px !important;
    min-height: 32px;
    border: 0;
    border-right: 1px solid #e4e7ec;
    border-left: 1px solid #e4e7ec;
    border-radius: 0;
    box-shadow: none;
}
#activity-pane .activity-date-step {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    padding: 0;
    color: #475467;
    background: #fff;
    border: 0;
    font-size: 11px;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}
#activity-pane .activity-date-step:hover:not(:disabled) { color: var(--review-blue); background: var(--review-blue-soft); }
#activity-pane .activity-date-step:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--review-blue); outline-offset: -2px; }
#activity-pane .activity-date-step:disabled { color: #d0d5dd; background: #f9fafb; cursor: not-allowed; }

#activity-pane .activity-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--review-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
#activity-pane .activity-metric { min-width: 0; min-height: 86px; padding: 13px 16px; border-right: 1px solid var(--review-border); }
#activity-pane .activity-metric:last-child { border-right: 0; }
#activity-pane .activity-metric h3 { margin: 0 0 6px; color: var(--review-muted); font-size: 9.5px; font-weight: 650; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
#activity-pane .activity-metric-value { color: var(--review-ink); font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
#activity-pane .activity-metric-value.is-empty { font-size: 14px; letter-spacing: -.025em; }
#activity-pane .activity-metric-work .activity-metric-value { color: var(--review-blue); }
#activity-pane .activity-metric p { margin: 6px 0 0; color: var(--review-muted); font-size: 10px; line-height: 1.35; }

.review-panel {
    margin-bottom: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--review-border);
    border-radius: 14px;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.review-panel-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 15px 17px 0; gap: 12px; }
.review-panel-header h3 { margin: 0 0 2px; color: var(--review-ink); font-size: 13px; font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
.review-panel-header p { margin: 0; color: var(--review-muted); font-size: 10px; }
.review-approval { display: inline-flex; align-items: center; flex-shrink: 0; padding: 3px 7px; gap: 5px; color: var(--review-muted); background: #f9fafb; border: 1px solid var(--review-border); border-radius: 6px; font-size: 9px; font-weight: 550; }

.review-overview { display: grid; grid-template-columns: 1.15fr 1fr; padding: 15px 17px; gap: 24px; }
.review-workday { min-width: 0; }
.review-progress-label { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 7px; gap: 3px 10px; font-size: 10px; }
.review-progress-label span { color: var(--review-muted); }
.review-progress-label strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.review-progress { height: 5px; overflow: hidden; background: #eef2f5; border-radius: 3px; }
.review-progress > div { width: 0; height: 100%; background: #18aeea; border-radius: inherit; }
.review-workday > p { margin: 6px 0 0; color: var(--review-muted); font-size: 9.5px; }
.review-status-list { display: grid; align-content: center; min-width: 0; margin: 0; padding-left: 20px; gap: 8px; border-left: 1px solid var(--review-border); }
.review-status-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.review-status-list dt { color: var(--review-muted); font-size: 9.5px; font-weight: 400; }
.review-status-list dd { margin: 0; font-size: 9.5px; font-weight: 550; text-align: right; }
.review-status-list dd[data-tone="attention"] { color: var(--review-amber); }

.review-breakdown { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 12px 17px; gap: 0; background: #f9fafb; border-top: 1px solid var(--review-border); border-bottom: 1px solid var(--review-border); }
.review-breakdown > div { min-width: 0; padding: 0 10px; border-left: 1px solid var(--review-border); }
.review-breakdown > div:first-child { padding-left: 0; border-left: 0; }
.review-breakdown > div:last-child { padding-right: 0; }
.review-breakdown dt { margin-bottom: 4px; color: var(--review-muted); font-size: 9px; font-weight: 550; }
.review-breakdown dd { margin: 0 0 2px; color: var(--review-ink); font-size: 15px; font-weight: 650; line-height: 1.25; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.review-breakdown span { display: block; color: var(--review-muted); font-size: 8.5px; }

.review-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 11px 17px; gap: 10px; }
.review-footer p { margin: 0; color: var(--review-muted); font-size: 9.5px; }
.review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.review-panel .review-button { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 9px; color: var(--review-blue); background: #fff; border: 1px solid #b9e6f7; border-radius: 7px; font-size: 9.5px; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; }
.review-panel .review-button:hover { color: #fff; background: #18aeea; border-color: #18aeea; }
.review-panel .review-text-link { color: var(--review-muted); font-size: 9.5px; font-weight: 550; text-decoration: none; }
.review-panel .review-text-link span { padding-left: 3px; }
.review-panel .review-text-link:hover { color: var(--review-blue); }

.review-details { padding: 0 17px 11px; }
.review-details summary { display: flex; align-items: center; width: fit-content; gap: 7px; color: var(--review-muted); font-size: 9px; list-style: none; cursor: pointer; }
.review-details summary::-webkit-details-marker { display: none; }
.review-details summary i { font-size: 7px; }
.review-input summary { flex-wrap: wrap; }
.review-input summary span { font-weight: 600; }
.review-input [data-tone="attention"] { color: var(--review-amber); }
.review-input ul { padding-left: 16px; }
.review-details[open] summary i { transform: rotate(180deg); }
.review-details-content { max-width: 85ch; margin-top: 10px; padding-top: 10px; color: var(--review-muted); border-top: 1px solid var(--review-border); font-size: 10px; }
.review-details-content h4 { margin-bottom: 7px; color: var(--review-ink); font-size: 10.5px; font-weight: 650; }
.review-details-content p { margin: 0 0 7px; }
.review-details-content p:last-child { margin-bottom: 0; }
.review-panel :is(a, button, summary):focus-visible { outline: 2px solid var(--review-blue); outline-offset: 2px; }
#activity-pane > .row .card { border: 1px solid var(--review-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .03) !important; }
#activity-pane > .row .card-body > h2 { font-size: 13px; font-weight: 700; letter-spacing: -.025em; }

@media (max-width: 1100px) {
    .review-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 0; }
    .review-breakdown > div:nth-child(4) { padding-left: 0; border-left: 0; }
    .review-overview { gap: 18px; }
}
@media (max-width: 767px) {
    #activity-pane .activity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #activity-pane .activity-metric:nth-child(2) { border-right: 0; }
    #activity-pane .activity-metric:nth-child(-n+2) { border-bottom: 1px solid var(--review-border); }
    .review-panel-header { flex-direction: column; padding: 13px 13px 0; gap: 8px; }
    .review-overview { grid-template-columns: 1fr; padding: 13px; gap: 13px; }
    .review-status-list { padding: 12px 0 0; border-top: 1px solid var(--review-border); border-left: 0; }
    .review-breakdown { padding: 12px 13px; }
    .review-footer { padding: 10px 13px; }
    .review-details { padding: 0 13px 10px; }
}
@media (max-width: 480px) {
    #activity-pane .activity-metric { min-height: 78px; padding: 11px; }
    #activity-pane .activity-date-field { margin-left: 0; }
    .review-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-breakdown > div { padding: 0 9px; }
    .review-breakdown > div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .review-breakdown > div:nth-child(even) { padding-left: 9px; border-left: 1px solid var(--review-border); }
}