/* Purpose-built time, reporting and management components. */
.time-display, .duration { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
.time-display { font-size: 21px; font-weight: 600; white-space: nowrap; }
.tracker-heading { margin-bottom: 16px; }
.tracker-heading h1 { font-size: 21px; }
.timer-surface { border: 1px solid var(--line); background: var(--surface); border-radius: 3px; }
.timer-bar { display: flex; align-items: center; min-height: 74px; padding: 12px 16px; gap: 0; }
.timer-description { flex: 1; min-width: 120px; border: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: 14px; padding: 10px 8px; }
.timer-description:focus { outline-offset: -2px; }
.timer-description::placeholder { color: #8d9aa2; }
.timer-control { border-left: 1px dotted var(--line); padding: 0 12px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.project-picker { max-width: 240px; min-width: 130px; }
.project-trigger { border: 0; background: transparent; color: var(--accent); display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 7px 2px; font-size: 13px; }
.project-trigger .project-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-menu { width: 340px; max-width: calc(100vw - 36px); padding: 14px; }
.picker-menu label { margin-top: 12px; }
.project-options { width: 100%; min-height: 160px; border: 0; padding: 5px; font-size: 13px; }
.project-options option { padding: 7px; }
.project-options optgroup { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.tag-button { padding: 8px; }
.billable-toggle { position: relative; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 22px; font-weight: 300; cursor: pointer; margin: 0; width: 30px; }
.billable-toggle:has(input:checked) { color: var(--accent); }
.billable-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.billable-toggle:focus-within { outline: 2px solid var(--jem-cyan); outline-offset: 2px; }
.timer-clock { min-width: 116px; text-align: center; }
.timer-action { min-width: 96px; min-height: 40px; text-transform: uppercase; font-size: 13px; font-weight: 500; }
.timer-mode-button { display: flex; flex-direction: column; gap: 7px; margin-left: 10px; }
.timer-mode-button button { border: 0; background: transparent; color: var(--muted); padding: 0 4px; line-height: 1; }
.timer-mode-button button.active { color: var(--accent); }
.timer-mode-button svg { width: 15px; height: 15px; }
.timer-options-toggle { display: flex; justify-content: flex-end; padding: 6px 14px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.timer-options-toggle .btn { padding: 3px 5px; min-height: 24px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.timer-advanced { padding: 2px 20px 20px; border-top: 1px solid var(--line); }
.manual-controls { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 20px 16px; align-items: flex-end; }
.manual-controls label { margin-top: 0; }
.manual-controls .form-control { max-width: 170px; }
.manual-controls .zone-note { margin-left: auto; color: var(--muted); font-size: 11.5px; padding-bottom: 8px; }
.tracker-period { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 25px 0 12px; font-size: 13px; }
.tracker-period strong { font-size: 16px; margin-left: 5px; }
.tracker-period .text-muted { font-size: 12px; }
.entry-day { border: 1px solid var(--line); margin-bottom: 15px; background: var(--surface); border-radius: 2px; }
.day-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; background: var(--group); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.day-heading strong { font-size: 14px; color: var(--ink); margin-left: 7px; font-weight: 500; }
.entry-row { display: grid; grid-template-columns: minmax(170px,1.5fr) minmax(130px,.9fr) auto 35px 135px 85px 84px; align-items: center; min-height: 64px; padding: 8px 14px; gap: 12px; border-bottom: 1px solid var(--line); }
.entry-row:last-child { border-bottom: 0; }
.entry-row:hover { background: var(--hover); }
.entry-description { display: flex; gap: 10px; align-items: center; min-width: 0; }
.entry-description > div { min-width: 0; }
.entry-description strong { font-weight: 400; display: block; overflow-wrap: anywhere; }
.entry-description input { opacity: .45; }
.entry-row:hover .entry-description input, .entry-description input:checked { opacity: 1; }
.entry-project { min-width: 0; font-size: 12.5px; }
.entry-project .project-name { max-width: 100%; }
.entry-project small { color: var(--muted); font-size: 11px; display: block; padding-left: 16px; }
.entry-tags { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; max-width: 170px; }
.entry-billable { font-size: 19px; color: var(--accent); text-align: center; font-weight: 300; border-right: 1px dotted var(--line); }
.entry-billable.muted { color: var(--muted); }
.entry-times { font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: center; }
.entry-duration { text-align: right; font-size: 17px; font-weight: 500; }
.entry-actions { display: flex; justify-content: flex-end; gap: 2px; }
.entry-actions .icon-button { padding: 7px; }
.entry-actions .dropdown-menu form { display: block; }
.bulk-toolbar { padding: 10px 14px; background: var(--accent-soft); border: 1px solid var(--line); margin-bottom: 15px; }
.bulk-toolbar .filter-row { margin: 0; }
.favourite-strip { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 14px; }
.favourite-strip > span { color: var(--muted); font-size: 12px; margin-right: 5px; }
.favourite-strip form { display: inline-flex; border: 1px solid var(--line); background: var(--surface); border-radius: 3px; }
.favourite-strip .btn { font-weight: 400; }
.extra-timer { display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--line); margin-top: 12px; }
.sheet-grid { min-width: 930px; table-layout: fixed; }
.sheet-grid th, .sheet-grid td { text-align: center; padding: 15px 8px; }
.sheet-grid th:first-child, .sheet-grid td:first-child { width: 240px; text-align: left; padding-left: 20px; }
.sheet-grid th:last-child, .sheet-grid td:last-child { width: 85px; font-variant-numeric: tabular-nums; }
.sheet-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--group); line-height: 1.8; text-transform: none; }
.sheet-grid .sheet-today { background: var(--accent-soft); }
.sheet-grid input[type="number"] { width: 76px; max-width: 100%; min-width: 60px; text-align: center; margin: auto; background: var(--surface); min-height: 34px; font-variant-numeric: tabular-nums; }
.sheet-grid input:read-only { background: var(--surface-soft); color: var(--muted); cursor: not-allowed; }
.sheet-grid .sheet-total th { background: var(--group); color: var(--ink); font-size: 13px; text-transform: none; }
.sheet-scroller { max-height: 650px; overflow: auto; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 16px; }
.sheet-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.period-navigation { display: flex; align-items: center; gap: 0; }
.period-navigation .btn { border-radius: 0; }
.period-navigation > :first-child { border-radius: 3px 0 0 3px; }
.period-navigation > :last-child { border-radius: 0 3px 3px 0; }
.period-navigation input { width: 145px; border-radius: 0; }
.report-filter { padding: 0; }
.report-filter-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 8px 10px; }
.filter-cell { min-width: 110px; flex: 1; padding: 3px 10px; border-right: 1px dotted var(--line); }
.filter-cell label { font-size: 10.5px; margin: 0 0 1px; color: var(--muted); }
.filter-cell .form-control, .filter-cell .form-select { border: 0; min-height: 28px; font-size: 12px; padding: 2px 20px 2px 0; background-color: transparent; }
.filter-date { min-width: 265px; flex: 1.3; }
.filter-date-inputs { display: flex; align-items: center; gap: 8px; }
.filter-date-inputs input { width: 113px; min-width: 0; padding-right: 0 !important; }
.filter-actions { display: flex; gap: 8px; align-items: center; padding-left: 12px; }
.report-more { padding: 16px 20px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.report-results-heading { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--group); gap: 12px; }
.report-results-heading h2 { margin: 0; font-size: 13px; }
.report-summary { border-radius: 3px 3px 0 0; margin-bottom: 0; border-bottom: 0; }
.report-summary .kpi { padding: 12px 18px; }
.report-summary .kpi-value { font-size: 22px; }
.report-chart { padding: 20px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 20px; }
.saved-report-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.saved-report-row:last-child { border-bottom: 0; }
.schedule-capacity { display: grid; grid-template-columns: repeat(7,minmax(100px,1fr)); min-width: 800px; }
.capacity-day { padding: 14px; border-right: 1px solid var(--line); }
.capacity-day:last-child { border: 0; }
.capacity-day > small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.capacity-day strong { font-size: 18px; font-weight: 400; }
.capacity-day .progress { margin: 10px 0 7px; }
.capacity-day.over { background: color-mix(in srgb, #e15b68 7%, var(--surface)); --project-color: #e15b68; }
.capacity-day .capacity-info { font-size: 11px; color: var(--muted); }
.schedule-assignment { display: flex; align-items: center; gap: 8px; }
.workspace-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(290px,1fr)); gap: 18px; }
.workspace-card { display: flex; gap: 14px; flex-direction: column; }
.workspace-card.current { border-color: var(--jem-cyan); }
.workspace-card-head { display: flex; gap: 12px; align-items: center; }
.workspace-card-head h2 { margin: 0 0 4px; }
.integration-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; }
.integration-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); }
.notification-row { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-bottom: 1px solid var(--line); }
.notification-row .notification-message { flex: 1; }
.notification-row.unread { background: var(--accent-soft); }
.notification-row:last-child { border: 0; }
@media (max-width: 1279px) {
    .timer-bar { padding: 10px 12px; }
    .timer-control { padding: 0 9px; }
    .project-picker { min-width: 110px; max-width: 175px; }
    .project-trigger { max-width: 155px; }
    .timer-clock { min-width: 104px; font-size: 19px; }
    .entry-row { grid-template-columns: minmax(140px,1.2fr) minmax(115px,.8fr) auto 25px 115px 76px 74px; gap: 8px; }
    .entry-times { font-size: 11px; }
    .entry-tags { max-width: 100px; }
}
@media (max-width: 1023px) {
    .entry-row { grid-template-columns: minmax(160px,1fr) 145px 28px 80px 72px; }
    .entry-tags { grid-column: 1 / 3; grid-row: 2; max-width: none; padding-left: 25px; }
    .entry-times { grid-column: 3 / 6; grid-row: 2; text-align: right; }
    .timer-description { min-width: 100px; }
    .timer-control { padding: 0 7px; }
    .timer-action { min-width: 75px; }
    .timer-clock { min-width: 96px; font-size: 17px; }
    .project-picker { max-width: 155px; }
    .project-trigger { max-width: 135px; }
    .filter-cell { min-width: 135px; flex-basis: 25%; border-bottom: 1px dotted var(--line); }
    .filter-date { flex-basis: 50%; }
    .filter-actions { padding: 8px 10px; }
}
@media (max-width: 768px) {
    .timer-bar { flex-wrap: wrap; gap: 8px 0; }
    .timer-description { flex-basis: 100%; width: 100%; border-bottom: 1px solid var(--line); padding: 10px 5px 15px; }
    .project-picker { flex: 1; max-width: none; border-left: 0; justify-content: flex-start; padding-left: 5px; }
    .project-trigger { max-width: 220px; }
    .timer-clock { margin-left: auto; }
    .timer-mode-button { margin-left: 5px; }
    .entry-row { grid-template-columns: minmax(100px,1fr) 24px 76px 68px; gap: 7px; padding: 11px 10px; }
    .entry-description { grid-column: 1; grid-row: 1; }
    .entry-project { grid-column: 1; grid-row: 2; padding-left: 25px; }
    .entry-billable { grid-column: 2; grid-row: 1; }
    .entry-duration { grid-column: 3; grid-row: 1; font-size: 15px; }
    .entry-actions { grid-column: 4; grid-row: 1; }
    .entry-times { grid-column: 2 / 5; grid-row: 2; text-align: right; }
    .entry-tags { grid-column: 1 / 5; grid-row: 3; padding-left: 25px; }
    .manual-controls { padding: 4px 12px 14px; gap: 8px; }
    .manual-controls > div { flex: 1; min-width: 80px; }
    .manual-controls .form-control { max-width: 100%; width: 100%; }
    .manual-controls .zone-note { width: 100%; text-align: left; }
    .filter-cell { flex-basis: 50%; min-width: 0; padding: 6px 9px; }
    .filter-date { flex-basis: 100%; }
    .filter-date-inputs input { width: auto; flex: 1; }
    .filter-actions { width: 100%; justify-content: flex-end; }
    .report-filter-main { padding: 4px; }
    .tracker-period { font-size: 12px; }
    .tracker-period strong { font-size: 14px; }
    .day-heading { padding: 8px 12px; }
    .sheet-actions > div { width: 100%; }
    .extra-timer { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 450px) {
    .timer-bar .project-picker { flex-basis: calc(100% - 90px); min-height: 36px; }
    .timer-bar .timer-clock { border-left: 0; margin-left: 0; flex: 1; justify-content: flex-start; padding-left: 5px; }
    .timer-bar .timer-action { min-width: 115px; }
    .timer-bar .timer-mode-button { flex-direction: row; gap: 14px; padding-left: 10px; }
    .timer-bar .timer-control:nth-of-type(3) { padding-right: 0; }
    .notification-row { padding: 16px; gap: 12px; }
}
.resource-table { min-width: 1140px; }
.resource-table td { vertical-align: top; padding: 14px 12px; border-right: 1px dotted var(--line); }
.resource-table td:last-child { border-right: 0; }
.resource-cell { background: color-mix(in srgb,#8fc469 5%,var(--surface)); }
.resource-over { background: color-mix(in srgb,#e15b68 8%,var(--surface)); }
.resource-over .progress-bar { background: #e15b68; }
.resource-assignment { display: flex; gap: 5px; align-items: flex-start; border-left: 2px solid var(--project-color); padding: 6px; margin-top: 6px; background: color-mix(in srgb,var(--project-color) 12%,var(--surface)); font-size: 11px; }
.resource-assignment .project-dot { width: 5px; height: 5px; margin-top: 5px; }
.resource-assignment small { font-size: 10px; color: var(--muted); }
.password-control { position: relative; }
.password-control input { padding-right: 44px; }
.password-control .icon-button { position: absolute; right: 5px; top: 5px; }
.auth-divider { text-align: center; margin: 20px 0; display: flex; gap: 15px; align-items: center; color: var(--muted); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.setting-row strong { font-size: 13px; }
.setting-row p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.setting-row .check { white-space: nowrap; }
.settings-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
.settings-links a { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.settings-links svg { width: 15px; color: var(--muted); }
@media(max-width:768px) { .setting-row { align-items: flex-start; flex-direction: column; gap: 6px; } .settings-links { grid-template-columns: 1fr; } }
.logo-preview { height: 120px; display: grid; place-items: center; background: var(--surface-soft); border: 1px dashed var(--line); margin-bottom: 16px; }
.logo-preview img { max-width: 180px; max-height: 85px; object-fit: contain; }
.audit-reference { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace,Consolas,monospace; font-size: 11px; color: var(--muted); }
.fc .fc-timegrid-event { background: color-mix(in srgb,var(--event-color,var(--jem-cyan)) 14%,var(--surface)); border: 0; border-left: 3px solid var(--event-color,var(--jem-cyan)); color: var(--ink); }
.fc .fc-timegrid-event .fc-event-main { color: var(--ink); padding: 3px; }
.integration-endpoint { overflow-wrap: anywhere; max-width: 350px; }
.permission-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 16px; }
@media(max-width:768px) { .permission-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.kiosk-console { max-width: 850px; margin: auto; padding: 30px; }
.kiosk-console-heading { text-align: center; margin-bottom: 24px; }
.kiosk-console-heading .avatar { width: 50px; height: 50px; margin-bottom: 15px; }
.kiosk-console-heading h2 { font-size: 22px; font-weight: 400; margin-bottom: 6px; }
.kiosk-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.kiosk-actions .btn { padding: 16px 12px; font-size: 14px; }
.kiosk-pin { letter-spacing: 4px; }
.job-error { font-size: 11px; display: block; max-width: 350px; overflow-wrap: anywhere; }
.kpi-grid:has(> .kpi:nth-child(3):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width:1023px){.kpi-grid:has(> .kpi:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:768px){.kiosk-console{padding:18px}.kiosk-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.kiosk-actions .btn{font-size:12px}}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #102632; --bs-btn-hover-color: #102632; --bs-btn-active-color: #102632; color: #102632; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-color: #102632; --bs-btn-active-color: #102632; }
[data-bs-theme="dark"] .badge-submitted, [data-bs-theme="dark"] .badge-pending, [data-bs-theme="dark"] .badge-review, [data-bs-theme="dark"] .badge-onhold { color: #f0c06a; }
[data-bs-theme="dark"] .project-name { color: color-mix(in srgb,var(--project-color,var(--jem-cyan)) 72%,#fff); }
.kpi-grid:has(> .kpi:only-child) { grid-template-columns: minmax(0,1fr); max-width: 380px; }
.resource-assignment > span:last-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.header-workspace { max-width: 240px; min-width: 0; overflow: hidden; }
/* FullCalendar's embedded icon font is unnecessary under the existing CSP. */
.fc .fc-timegrid-event { background-color: color-mix(in srgb,var(--event-color,var(--jem-cyan)) 14%,var(--surface)) !important; }
@media(max-width:768px) {
    .entry-project { grid-column: 1 / 5; grid-row: 2; }
    .entry-times { grid-column: 1 / 5; grid-row: 3; text-align: left; padding-left: 25px; }
    .entry-tags { grid-column: 1 / 5; grid-row: 4; }
    .entry-tags:empty { display: none; }
}