.time-tracking-week-chart-layout { display: flex; flex-wrap: wrap; overflow: visible; }
.time-week-comparison { flex: 1 1 540px; min-width: 0; padding: 18px; border: 1px solid #dce4e1; border-radius: 8px; background: #fff; }
.time-week-comparison.is-weekend { flex-basis: 280px; }
.time-week-comparison header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.time-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: #61706b; }
.time-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.time-chart-legend i { width: 10px; height: 10px; border-radius: 2px; background: #20825b; }
.time-chart-legend i.absence { background: #679bc4; }
.time-chart-legend i.target { width: 2px; height: 13px; background: #34483f; border-radius: 0; }
.time-chart-axis { display: flex; justify-content: space-between; margin: 0 94px 4px 52px; color: #77847e; font-size: 10px; }
.time-chart-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 82px; align-items: start; gap: 12px; padding: 13px 0; border-bottom: 1px solid #eef2f0; }
.time-chart-row:last-child { border: 0; }
.time-chart-day strong { display: block; font-size: 12px; }
.time-chart-day small, .time-chart-measure small { display: block; color: #738079; font-size: 11px; margin-top: 5px; line-height: 1.4; }
.time-chart-track { position: relative; height: 16px; background: #f0f4f2; border-radius: 4px; margin-top: 2px; }
.time-chart-plan { position: absolute; height: 100%; background: #dfe7e3; border-radius: 4px; }
.time-chart-work, .time-chart-absence { position: absolute; height: 100%; background: #20825b; border-radius: 3px; }
.time-chart-absence { background: #679bc4; }
.time-chart-target { position: absolute; top: -4px; height: 24px; width: 2px; background: #34483f; transform: translateX(-2px); }
.time-chart-status { text-align: right; color: #20825b; font-size: 12px; line-height: 20px; white-space: nowrap; }
.time-chart-row.is-short .time-chart-status { color: #bd2634; }
.time-chart-row.is-neutral .time-chart-status { color: #79867f; font-weight: 500; }
@media(max-width:600px) { .time-week-comparison { padding: 12px; } .time-chart-row { grid-template-columns: 28px minmax(0,1fr) 66px; gap: 8px; } .time-chart-axis { margin-left: 36px; margin-right: 74px; } .time-chart-legend { gap: 9px; } }

.time-chart-legend i.pause, .time-chart-pause { background: repeating-linear-gradient(135deg,#fff 0 3px,#b08a46 3px 5px); }
.time-chart-pause { position:absolute; top:-3px; height:22px; width:8px; transform:translateX(-4px); border:1px solid #b08a46; border-radius:2px; box-sizing:border-box; }
.time-chart-measure .time-chart-pause-label { color:#80632f; }

.time-clock-axis { position:relative; height:15px; display:block; }
.time-clock-axis span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.time-clock-axis span:first-child { transform:none; }
.time-clock-axis span:last-child { transform:translateX(-100%); }
.time-clock-track { background:transparent; }
.time-clock-track .time-chart-pause { top:0; height:16px; transform:none; border:0; border-radius:0; }
.time-chart-open { position:absolute; top:-2px; height:20px; width:3px; background:#20825b; }
@media(max-width:600px) { .time-clock-axis span:nth-child(2), .time-clock-axis span:nth-child(4), .time-clock-axis span:nth-child(6), .time-clock-axis span:nth-child(7) { display:none; } }


.time-chart-legend i.core { background:none; border-left:1px dashed #8f9b95; width:1px; height:12px; border-radius:0; }

.time-absence-badge { display:inline-block; padding:2px 6px; margin:4px 2px 2px 0; border-radius:4px; font-size:10px; font-weight:600; }
.time-absence-badge.paidAbsence { background:#e0f2e6; color:#22653c; }
.time-absence-badge.unpaidAbsence { background:#fde7e8; color:#9b2635; }
.time-absence-badge.vacation { background:#dfeff8; color:#285c80; }
.time-absence-badge.specialAbsence { background:#fff3be; color:#765d08; }

.time-chart-days { position:relative; }
.time-chart-guides { position:absolute; top:0; bottom:0; left:52px; right:94px; pointer-events:none; }
.time-chart-guides i { position:absolute; top:0; bottom:0; border-left:1px dashed #b9c4be; }
.time-chart-days .time-chart-row { position:relative; border-bottom-color:#f3f5f4; }
.time-chart-measure small { position:relative; width:fit-content; max-width:100%; background:#fff; padding-right:5px; }
.time-clock-track { height:12px; margin-top:4px; }
.time-clock-track .time-chart-pause { height:12px; opacity:.65; }
.time-chart-work { border-radius:2px; }
@media(max-width:600px) { .time-chart-guides { left:36px; right:74px; } }

/* Compact weekly timeline. */
.time-chart-heading strong { font-size:15px; }
.time-chart-heading small { display:block; margin-top:5px; color:#819087; font-size:11px; }
.time-chart-days .time-chart-row { grid-template-columns:112px minmax(0,1fr) 88px; align-items:center; min-height:64px; padding:12px 0; }
.time-chart-axis { margin-left:124px; margin-right:100px; }
.time-chart-guides { left:124px; right:100px; }
.time-chart-day strong { font-size:12px; font-weight:600; }
.time-clock-track { height:18px; margin:0; }
.time-clock-track .time-chart-work { height:18px; border-radius:4px; }
.time-clock-track .time-chart-pause { height:18px; opacity:.4; }
.time-chart-result { text-align:right; }
.time-chart-result small { display:block; font-size:10px; color:#8a958e; margin-top:4px; }
.time-chart-status { display:inline-block; border-radius:5px; padding:2px 7px; background:#edf6f0; }
.is-short .time-chart-status { background:#fff0f0; }
.is-neutral .time-chart-status { background:#f3f5f4; }
.time-chart-empty-label { position:relative; display:inline-block; background:#f5f7f6; border-radius:4px; padding:2px 8px; color:#7c8981; font-size:11px; line-height:18px; max-width:100%; box-sizing:border-box; }
.time-chart-empty-label.vacation { background:#e9f3fa; color:#426b88; }
.time-chart-empty-label.specialAbsence { background:#fff7d7; color:#806d24; }
.time-chart-empty-label.paidAbsence { background:#eaf5ed; color:#426b4d; }
.time-chart-empty-label.unpaidAbsence { background:#fbeeee; color:#9b5353; }
.time-chart-track:has(.time-chart-empty-label) { height:auto; min-height:18px; }
@media(max-width:600px) {
 .time-chart-days .time-chart-row { grid-template-columns:66px minmax(0,1fr) 64px; gap:8px; }
 .time-chart-axis { margin-left:74px; margin-right:72px; }
 .time-chart-guides { left:74px; right:72px; }
 .time-chart-day strong { font-size:10px; }
 .time-chart-day small { font-size:9px; }
 .time-chart-status { font-size:10px; padding:2px 4px; }
 .time-chart-pause-label { font-size:9px!important; }
 .time-clock-axis span:nth-child(3),.time-clock-axis span:nth-child(5) { display:none; }
}

.time-chart-row.rule-alert .time-chart-work { background:#c34a50; }
.time-chart-row.rule-review .time-chart-work { background:#bd8831; }
.time-chart-measure small.time-rule-note { font-size:11px; margin-top:6px; padding:4px 7px; border-radius:4px; }
.time-rule-note.alert { color:#922e37; background:#fff0f1; }
.time-rule-note.review { color:#805813; background:#fff7e7; }
.time-rule-help { margin-top:14px; color:#748179; font-size:11px; line-height:1.5; }
.time-rule-help summary { cursor:pointer; }

.time-report-dialog { box-sizing:border-box; width:min(1400px,94vw); max-width:94vw; max-height:90vh; border:1px solid #dce4e1; border-radius:10px; padding:22px; color:#23382e; }
.time-report-dialog::backdrop { background:rgba(0,0,0,.35); }
.time-report-dialog header,.time-report-dialog form { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.time-report-dialog form { justify-content:flex-start; }
.time-report-dialog h2 { margin:0; }
.time-report-table-wrap { overflow:auto; }
.time-report-dialog table { width:100%; border-collapse:collapse; font-size:12px; }
.time-report-dialog th,.time-report-dialog td { padding:9px; border-bottom:1px solid #e4e9e6; text-align:left; vertical-align:top; }
.time-report-dialog tr.alert { background:#ffeded; }
.time-report-dialog tr.review { background:#fff7e5; }
.time-report-dialog tr.alert th { border-left:4px solid #bc3d49; }
.time-report-dialog tr.review th { border-left:4px solid #c38a2d; }
.time-report-explanation { font-size:11px; color:#6d7e73; }
@media print {
 body.printing-time-report > :not(.time-report-dialog) { display:none!important; }
 body.printing-time-report .time-report-dialog { position:static; display:block; width:100%; max-width:none; max-height:none; overflow:visible; border:0; padding:0; }
 .time-report-dialog form,.time-report-dialog [data-close] { display:none!important; }
 .time-report-table-wrap { overflow:visible; }
 .time-report-dialog { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
 .time-report-dialog tr { break-inside:avoid; }
}

.time-chart-guides i.time-core-band { background:rgba(111,151,182,.12); border:0; border-radius:3px; }
.time-chart-measure small { background:transparent; }

#timeMonthTable td.time-absence-detail { background:#eef5fa; }
#timeMonthTable th.time-absence-detail { background:#dceaf4; color:#365b75; border-top:2px solid #9bbcd3; }

.time-clock-in-control { display:block; margin:6px 0; text-transform:none; }
.time-clock-in-control button { display:block; margin-left:auto; padding:5px 12px; border:1px solid #c9d5ce; border-radius:5px; background:#edf2ef; color:#63736a; cursor:not-allowed; }
.time-clock-in-control small { display:block; margin-top:4px; font-size:10px; font-weight:400; line-height:1.4; color:#6d7e73; }

.time-tracking-title-actions { display:flex; align-items:flex-end; gap:12px; }
.time-tracking-title-actions #refreshTimeTrackingButton {
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
}
.time-tracking-person-switch[hidden] { display:none!important; }
#timeTrackingView > .topbar { flex-wrap:wrap; gap:12px; }
@media (max-width:720px) {
 .time-tracking-title-actions { max-width:100%; gap:10px; }
 .time-tracking-title-actions .time-tracking-person-switch { width:200px; max-width:calc(100vw - 120px); }
}

.time-clock-in-control button:not(:disabled) { background:#167b55; color:white; border-color:#167b55; cursor:pointer; }

/* Compact day cards use the available width, with today as the primary action. */
#timeTrackingContent .time-tracking-week-board { grid-template-columns:repeat(var(--day-count,5),minmax(0,1fr)); gap:12px; padding:3px 2px 12px; overflow:visible; }
#timeTrackingContent .time-tracking-week-card-placeholder { display:none; }
#timeTrackingContent .time-tracking-week-card { display:flex; flex-direction:column; gap:12px; min-width:0; min-height:0; padding:16px; border-color:#dce5df; border-radius:12px; }
#timeTrackingContent .time-tracking-week-card::before { display:none; }
#timeTrackingContent .time-tracking-week-card header { flex-wrap:wrap; gap:8px; min-height:52px; }
#timeTrackingContent .time-tracking-week-card header strong { font-size:15px; line-height:1.5; }
#timeTrackingContent .time-tracking-week-card header span { font-size:11px; }
#timeTrackingContent .time-tracking-week-chip { background:#f1f4f2; border:0; font-weight:600; padding:4px 8px; }
#timeTrackingContent .time-tracking-week-card.is-today { border:1px solid #278663; background:#f6fbf8; box-shadow:0 0 0 2px #27866312; }
.time-today-label { display:inline-block; font-size:10px; font-style:normal; color:#176445; background:#deeee5; border-radius:4px; padding:1px 5px; }
#timeTrackingContent .time-tracking-week-card.is-today .time-tracking-week-chip { color:#176445!important; background:#deeee5; }
#timeTrackingContent .time-tracking-week-card.is-future .time-tracking-week-mini,
#timeTrackingContent .time-tracking-week-card.is-today .time-tracking-week-mini { background:#e1e9e4; }
#timeTrackingContent .time-tracking-week-card.is-future .time-tracking-week-under,
#timeTrackingContent .time-tracking-week-card.is-today .time-tracking-week-under { display:none; }
#timeTrackingContent .time-tracking-week-target { margin:0; font-size:11px; line-height:1.5; }
#timeTrackingContent .time-tracking-week-card dl { gap:10px; }
#timeTrackingContent .time-tracking-week-card dl > div { min-height:53px; padding-top:10px; }
#timeTrackingContent .time-tracking-week-card dd { font-size:12px; }
#timeTrackingContent .time-tracking-week-card .time-pause-alert dt,
#timeTrackingContent .time-tracking-week-card .time-pause-alert dd { color:#b42331; }
#timeTrackingContent .time-tracking-week-card .time-pause-alert dd { font-weight:600; }
#timeTrackingContent .time-morning-heading { display:flex; justify-content:space-between; align-items:center; min-height:30px; gap:5px; }
#timeTrackingContent .time-clock-in-control { margin:0; }
#timeTrackingContent .time-clock-in-control button { font-size:12px; min-height:30px; padding:5px 12px; }
@media(max-width:1100px) { #timeTrackingContent .time-tracking-week-board { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:720px) { #timeTrackingContent .time-tracking-week-board { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:450px) { #timeTrackingContent .time-tracking-week-board { grid-template-columns:1fr; } }

#timeTrackingContent .time-tracking-week-card header .time-clock-in-control { flex:0 0 100%; margin:0; }

.time-entry-line { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.time-entry-line > span { display:inline-flex; align-items:center; min-width:0; }
#timeTrackingContent .time-entry-edit { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; padding:4px; min-height:24px; min-width:24px; border:0; border-radius:4px; background:transparent; color:#396b55; cursor:pointer; }
#timeTrackingContent .time-entry-edit:hover { background:#deeee5; }
.time-entry-dialog { width:420px; max-width:calc(100vw - 40px); box-sizing:border-box; border:1px solid #dce5df; border-radius:12px; padding:24px; color:#23382e; }
.time-entry-dialog::backdrop { background:#0005; }
.time-entry-dialog h2 { margin:0 0 10px; font-size:18px; }
.time-entry-fields { display:flex; gap:16px; margin:20px 0; }
.time-entry-fields label { display:grid; gap:6px; flex:1; }
.time-entry-fields input { width:100%; box-sizing:border-box; padding:8px; }
.time-entry-hint { font-size:12px; color:#617569; }
.time-entry-dialog [role="alert"] { color:#ae2535; }
.time-entry-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
@media (max-width:720px) {
  #timeTrackingContent .time-tracking-week-board:has(.time-tracking-week-card.is-today) { grid-template-columns:minmax(0,1fr); }
  #timeTrackingContent .time-tracking-week-board:has(.time-tracking-week-card.is-today) > .time-tracking-week-card:not(.is-today) { display:none; }
}

.time-entry-device { display:inline-flex; align-items:center; flex-shrink:0; gap:4px; margin-right:5px; vertical-align:middle; color:var(--muted); font-size:10px; font-weight:400; line-height:1.4; }

.time-external-label { display:inline-block; margin-left:5px; padding:1px 5px; border-radius:4px; background:#e7effa; color:#305c8a; font-size:10px; font-style:normal; font-weight:600; vertical-align:middle; }

.time-device-snippet { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; border-radius:4px; background:#e7eff1; color:#305c68; font-size:10px; font-weight:600; line-height:1; }

.time-entry-corrected { color:#c7192a; }

.time-morning-heading { display:flex; align-items:center; justify-content:space-between; }
#timeTrackingContent .time-entry-add { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:1px solid #dce4e0; border-radius:4px; background:white; color:#396b55; font-size:18px; cursor:pointer; }

.time-entry-dialog footer { flex-wrap:wrap; }
.time-entry-dialog .time-entry-delete { margin-right:auto; color:#c7192a; background:white; border:1px solid #efb8bf; }

.time-entry-dialog .time-pause-minutes { display:flex; flex-direction:column; gap:8px; margin:20px 0 24px; font-weight:600; }
.time-entry-dialog .time-pause-minutes-control { display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; padding:0 12px; border:1px solid #cddbd4; border-radius:6px; background:#f7faf8; }
.time-entry-dialog .time-pause-minutes-control:focus-within { border-color:#396b55; box-shadow:0 0 0 2px #396b5520; }
.time-entry-dialog .time-pause-minutes-control input { flex:1; width:0; min-width:0; min-height:42px; padding:10px 0; border:0; outline:0; box-shadow:none; background:transparent; font:inherit; }
.time-entry-dialog .time-pause-minutes-control > span { color:var(--muted); font-weight:400; }

/* External break dialog */
dialog.time-pause-dialog { width:520px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:0; border:1px solid #dce5df; border-radius:14px; box-shadow:0 20px 65px #10251c33; }
.time-pause-dialog .pause-dialog-header { display:block; padding:26px 28px 20px; border-bottom:1px solid #e4ebe7; }
.time-pause-dialog .pause-dialog-eyebrow { display:block; margin-bottom:8px; color:#687b71; font-size:10px; font-weight:600; letter-spacing:1.1px; }
.time-pause-dialog h2 { margin:0; font-size:23px; line-height:1.25; font-weight:600; color:#20372c; }
.time-pause-dialog .pause-dialog-body { padding:24px 28px; }
.time-pause-dialog .pause-dialog-notice { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:8px; background:#fff5e5; color:#795019; }
.time-pause-dialog .pause-dialog-notice > span { display:flex; align-items:center; justify-content:center; flex:none; width:19px; height:19px; border:1px solid #ba893c; border-radius:50%; font-size:12px; font-weight:700; }
.time-pause-dialog .pause-dialog-notice p { margin:0; font-size:13px; line-height:1.5; font-weight:600; }
.time-pause-dialog .pause-dialog-copy { margin:16px 0 24px; font-size:13px; line-height:1.6; color:#5b6c62; }
.time-pause-dialog .pause-dialog-entry > label { display:block; font-size:14px; font-weight:600; color:#23382e; }
.time-pause-dialog .pause-dialog-entry > p { margin:6px 0 14px; font-size:12px; line-height:1.5; color:#68786e; }
.time-pause-dialog .pause-dialog-input { display:flex; align-items:center; border:1px solid #becfc5; border-radius:7px; background:white; overflow:hidden; }
.time-pause-dialog .pause-dialog-input:focus-within { border-color:#396b55; box-shadow:0 0 0 3px #396b5518; }
dialog.time-pause-dialog .pause-dialog-input input { width:0!important; flex:1; min-width:0; height:48px; padding:10px 14px!important; border:0!important; border-radius:0!important; outline:none!important; box-shadow:none!important; background:transparent!important; font-size:19px; color:#23382e; }
.time-pause-dialog .pause-dialog-input > span { padding:0 16px; font-size:13px; color:#68786e; }
.time-pause-dialog .pause-dialog-entry > small { display:block; margin-top:8px; color:#78867e; font-size:11px; }
.time-pause-dialog footer { margin:0; padding:18px 28px; border-top:1px solid #e4ebe7; background:#f7f9f8; gap:10px; }
dialog.time-pause-dialog footer button { min-height:40px; padding:9px 14px; font-size:12px; border-radius:6px; }
@media(max-width:540px) { .time-pause-dialog .pause-dialog-header { padding:22px 20px 18px; } .time-pause-dialog .pause-dialog-body { padding:20px; } .time-pause-dialog footer { padding:16px 20px; } .time-pause-dialog footer button[type=submit] { flex:1; } .time-pause-dialog h2 { font-size:21px; } }

.time-device-snippet.is-warning { background:#fce8e8; color:#b4232c; }

.time-pause-dialog .pause-dialog-notice[hidden] { display:none; }