.time-tracking,
.time-tracking-form-surface {
    --time-accent: var(--fta-theme-accent, #018574);
    --time-canvas: var(--taskmanager-light-canvas, #f4f8f7);
    --time-panel: var(--taskmanager-light-panel-raised, #fff);
    --time-soft: var(--taskmanager-light-panel, #eef5f3);
    --time-border: var(--taskmanager-light-border, #d6e3df);
    --time-text: var(--taskmanager-light-text, #243342);
    --time-muted: var(--taskmanager-light-muted, #637773);
    --time-danger: #b94b43;
    --time-warning: #99621b;
    color: var(--time-text);
    box-sizing: border-box;
}
.time-tracking { background: var(--time-canvas); border: 1px solid var(--time-border); border-radius: 1rem; padding: clamp(.85rem, 1.7vw, 1.4rem); min-width: 0; width: 100%; }
.time-tracking *, .time-tracking *::before, .time-tracking *::after,
.time-tracking-form-surface *, .time-tracking-form-surface *::before, .time-tracking-form-surface *::after { box-sizing: border-box; }
.time-tracking :is(button, input, select), .time-tracking-form-surface :is(button, input, select, textarea) { font: inherit; }
.time-tracking :is(button, input, select):focus-visible, .time-tracking-form-surface :is(button, input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--time-accent) 40%, transparent); outline-offset: 2px; }
.time-tracking button, .time-tracking-form-surface button { background: var(--time-panel); color: var(--time-text); border: 1px solid var(--time-border); border-radius: .55rem; min-height: 2.25rem; padding: .42rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.time-tracking button:hover:not(:disabled), .time-tracking-form-surface button:hover:not(:disabled) { background: var(--time-soft); border-color: var(--time-accent); }
.time-tracking button:disabled, .time-tracking-form-surface :is(button, input, select, textarea):disabled { opacity: .55; cursor: default; }
.time-tracking .time-tracking-primary, .time-tracking-form-surface .time-tracking-primary { background: var(--time-accent); border-color: var(--time-accent); color: #fff; }
.time-tracking .time-tracking-primary:hover:not(:disabled), .time-tracking-form-surface .time-tracking-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--time-accent) 85%, #111); }
.time-tracking-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.time-tracking h1 { font-size: clamp(1.6rem, 2.3vw, 2rem); font-weight: 720; letter-spacing: -.035em; margin: .15rem 0 .4rem; }
.time-tracking-header p:last-child { color: var(--time-muted); margin: 0; font-size: .9rem; }
.time-tracking-eyebrow { color: var(--time-accent); font-size: .67rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; margin: 0; }
.time-tracking-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }
.time-tracking .time-tracking-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; min-height: 2.3rem; font-size: 1.25rem; font-weight: 450; padding: .1rem; }
.time-tracking-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .85rem; background: var(--time-panel); border: 1px solid var(--time-border); border-radius: .85rem; padding: .8rem; margin-bottom: 1rem; }
.time-tracking-toolbar label, .time-tracking-custom-range label, .time-tracking-form label { display: grid; min-width: 0; gap: .3rem; }
.time-tracking-toolbar > label { flex: 1 1 13rem; max-width: 22rem; }
.time-tracking-toolbar label > span, .time-tracking-period > span { color: var(--time-muted); font-size: .72rem; font-weight: 650; }
.time-tracking select, .time-tracking input, .time-tracking-form :is(input, select, textarea) { border: 1px solid var(--time-border); border-radius: .5rem; background: var(--time-panel); color: var(--time-text); min-height: 2.35rem; width: 100%; padding: .45rem .6rem; }
.time-tracking select, .time-tracking-form select { padding-right: 1.3rem; max-width: 100%; }
.time-tracking-period { display: grid; gap: .3rem; }
.time-tracking-period > div { display: flex; padding: .15rem; background: var(--time-soft); border: 1px solid var(--time-border); border-radius: .6rem; gap: .15rem; }
.time-tracking-period button { border-color: transparent; background: transparent; color: var(--time-muted); min-height: 2rem; }
.time-tracking-period button.active { border-color: var(--time-border); background: var(--time-panel); color: var(--time-accent); }
.time-tracking-range { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-left: auto; min-height: 2.35rem; }
.time-tracking-range strong { font-variant-numeric: tabular-nums; font-size: .8rem; }
.time-tracking .time-tracking-text-button { background: transparent; border-color: transparent; color: var(--time-accent); }
.time-tracking-custom-range { width: 100%; display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; border-top: 1px solid var(--time-border); padding-top: .7rem; }
.time-tracking-kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .8rem; margin: 1rem 0; }
.time-tracking-kpi { background: var(--time-panel); border: 1px solid var(--time-border); border-radius: .8rem; padding: 1rem; display: flex; flex-direction: column; min-width: 0; gap: .3rem; }
.time-tracking-kpi.primary { background: color-mix(in srgb, var(--time-accent) 6%, var(--time-panel)); }
.time-tracking-kpi > span { color: var(--time-muted); font-size: .8rem; font-weight: 650; }
.time-tracking-kpi > strong { font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.time-tracking-kpi small { color: var(--time-muted); font-size: .7rem; letter-spacing: normal; font-weight: 400; }
.time-tracking-kpi strong > small { font-size: 1rem; }
.time-tracking-charts { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: .8rem; margin-bottom: 1rem; }
.time-tracking-card { background: var(--time-panel); border: 1px solid var(--time-border); border-radius: .85rem; padding: 1rem; min-width: 0; }
.time-tracking-card > header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.time-tracking-card h2 { font-size: 1.1rem; font-weight: 680; letter-spacing: -.015em; margin: .22rem 0 0; }
.time-tracking-card > header > span, .time-tracking-card > header p:not(.time-tracking-eyebrow) { color: var(--time-muted); font-size: .74rem; margin: .3rem 0 0; max-width: 50rem; }
/* DevExpress places outside tooltips above the plot; keep both tooltip lines visible. */
.time-tracking-chart { min-width: 0; overflow: visible; }
/* Axis labels carry inline SVG fills; use the active time-tracking theme in both views. */
.time-tracking :is(.dxc-arg-elements, .dxc-val-elements, .dxc-arg-title, .dxc-val-title) text { fill: var(--time-muted) !important; }
.time-tracking-tooltip { display: grid; gap: .25rem; padding: .6rem; max-width: 20rem; white-space: normal; overflow-wrap: anywhere; }
.time-tracking-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin-top: .75rem; max-height: 16rem; overflow: auto; }
.time-tracking-days button { display: grid; gap: .2rem; text-align: left; padding: .6rem .4rem; min-width: 0; }
.time-tracking-days span { color: var(--time-muted); font-size: .65rem; white-space: nowrap; }
.time-tracking-days strong { font-size: .78rem; font-variant-numeric: tabular-nums; white-space: normal; }
.time-tracking-days button.empty-day { background: var(--time-soft); border-style: dashed; }
.time-tracking-days button.empty-day strong { color: var(--time-muted); font-weight: 450; }
.time-tracking-days button.active { background: color-mix(in srgb, var(--time-accent) 10%, var(--time-panel)); border-color: var(--time-accent); }
.time-tracking-donut { position: relative; }
.time-tracking-donut-center { position: absolute; display: grid; place-items: center; gap: .2rem; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; width: 50%; text-align: center; }
.time-tracking-donut-center strong { font-size: 1.2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.25; }
.time-tracking-donut-center span { color: var(--time-muted); font-size: .7rem; }
.time-tracking-project-legend { display: grid; gap: .2rem; max-height: 12rem; overflow-y: auto; }
.time-tracking-project-legend button { display: grid; grid-template-columns: .6rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; border: 0; text-align: left; font-size: .74rem; font-weight: 450; padding: .3rem .2rem; }
.time-tracking-project-legend i { width: .5rem; height: .5rem; border-radius: 50%; }
.time-tracking-project-legend span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.time-tracking-project-legend strong { font-size: .74rem; font-variant-numeric: tabular-nums; }
.time-tracking-chart-empty, .time-tracking-empty { min-height: 16rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.5rem; text-align: center; color: var(--time-muted); }
.time-tracking-chart-empty > span, .time-tracking-empty > span { font-size: 2.2rem; color: var(--time-accent); }
.time-tracking-empty h3, .time-tracking-empty p, .time-tracking-chart-empty p { margin: 0; font-size: .85rem; }
.time-tracking-empty h3 { font-size: 1.05rem; color: var(--time-text); }
.time-tracking-week-totals { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.time-tracking-week-totals > span { display: grid; gap: .2rem; background: var(--time-panel); border: 1px solid var(--time-border); border-radius: .65rem; padding: .65rem .85rem; }
.time-tracking-week-totals small { color: var(--time-muted); font-size: .7rem; }
.time-tracking-week-totals strong { font-size: .9rem; font-variant-numeric: tabular-nums; }
.time-tracking .entries-card, .time-tracking .estimates-card { margin-top: 1rem; }
.time-tracking-grid { min-width: 0; max-width: 100%; }
.time-tracking-grid .time-tracking-issue-link { border: 0; padding: .15rem 0; min-height: 1.75rem; background: transparent; color: var(--time-accent); font-size: inherit; text-align: left; }
.time-tracking-grid .time-tracking-issue-link:hover { text-decoration: underline; background: transparent; }
.time-tracking-duration { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .8rem; }
.time-tracking-row-actions { display: flex; align-items: center; gap: .35rem; }
.time-tracking-row-actions button { font-size: .75rem; padding: .2rem .4rem; min-height: 1.9rem; }
.time-tracking-row-actions .danger { color: var(--time-danger); font-size: 1.1rem; min-width: 1.9rem; }
.time-tracking-list-total { color: var(--time-muted); margin: .8rem 0 0; font-size: .75rem; }
.time-tracking-list-total strong { color: var(--time-text); font-variant-numeric: tabular-nums; }
.time-tracking-notice { border: 1px solid var(--time-border); background: var(--time-soft); color: var(--time-text); border-radius: .65rem; padding: .75rem .85rem; font-size: .82rem; margin: 0 0 1rem; }
.time-tracking-notice.error { border-color: color-mix(in srgb, var(--time-danger) 40%, var(--time-border)); background: color-mix(in srgb, var(--time-danger) 7%, var(--time-panel)); color: var(--time-danger); }
.time-tracking-notice.warning { border-color: color-mix(in srgb, var(--time-warning) 40%, var(--time-border)); background: color-mix(in srgb, var(--time-warning) 7%, var(--time-panel)); color: var(--time-warning); }
.time-tracking-notice.success { color: var(--time-accent); }
.time-tracking-notice ul { margin: .5rem 0; padding-left: 1.2rem; }
.time-tracking-notice li + li { margin-top: .3rem; }
.time-tracking-notice p:last-child { margin: .5rem 0 0; }
.time-tracking-notice button { margin-left: .6rem; }
.time-tracking-loading { display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 20rem; color: var(--time-muted); }
.time-tracking-spinner { height: 1.5rem; width: 1.5rem; border: 2px solid var(--time-border); border-top-color: var(--time-accent); border-radius: 50%; animation: time-tracking-spin .8s linear infinite; }
.time-tracking-popup .dxbl-modal-body { overflow-y: auto; }
.time-tracking-form-surface { font-size: .875rem; }
.time-tracking-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: .25rem; }
.time-tracking-form .wide, .time-tracking-form .validation-errors, .time-tracking-author { grid-column: 1 / -1; }
.time-tracking-form label > span { font-size: .77rem; font-weight: 650; }
.time-tracking-form textarea { resize: vertical; min-height: 5rem; }
.time-tracking-author { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: .75rem; color: var(--time-muted); }
.time-tracking-quick-values { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.time-tracking-quick-values > span { color: var(--time-muted); font-size: .75rem; margin-right: .2rem; }
.time-tracking-quick-values button { min-height: 1.9rem; padding: .25rem .6rem; font-size: .75rem; }
.time-tracking-form-hint { color: var(--time-muted); margin: -.25rem 0 .1rem; font-size: .74rem; }
.time-tracking-form-hint strong { color: var(--time-text); }
.time-tracking-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; border-top: 1px solid var(--time-border); padding-top: .9rem; margin-top: .25rem; }
.time-tracking-form .time-tracking-notice { margin: 0; }
.time-tracking-form .validation-errors { color: var(--time-danger); font-size: .8rem; margin: 0; }
.time-tracking-form-surface .time-tracking-delete { background: var(--time-danger); border-color: var(--time-danger); color: #fff; }
.time-tracking-form-surface .time-tracking-delete:hover:not(:disabled) { background: color-mix(in srgb, var(--time-danger) 85%, #111); }
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) :is(.time-tracking, .time-tracking-form-surface) {
    --time-accent: color-mix(in srgb, var(--fta-theme-accent, #018574) 55%, #fff);
    --time-canvas: var(--taskmanager-dark-canvas, #1e2a35);
    --time-panel: var(--taskmanager-dark-panel, #253342);
    --time-soft: var(--taskmanager-dark-panel-raised, #2c3c4d);
    --time-border: var(--taskmanager-dark-border, #455462);
    --time-text: var(--taskmanager-dark-text, #e2eaf2);
    --time-muted: var(--taskmanager-dark-muted, #adbac8);
    --time-danger: #edaaa3;
    --time-warning: #e5b56d;
}
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) :is(.time-tracking-primary, .time-tracking-delete) { color: #17212b; }
@media (max-width: 1100px) { .time-tracking-charts { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .time-tracking-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } .time-tracking-range { margin-left: 0; } }
@media (max-width: 780px) { .time-tracking-charts { grid-template-columns: 1fr; } .time-tracking-kpis { grid-template-columns: 1fr 1fr; } .time-tracking-kpi.primary { grid-column: 1 / -1; } .time-tracking-days { grid-template-columns: repeat(7, minmax(0, 1fr)); } .time-tracking-card > header .time-tracking-actions { justify-content: flex-start; } .time-tracking-project-legend { max-height: 9rem; } }
@media (max-width: 540px) { .time-tracking-header > .time-tracking-actions { width: 100%; justify-content: flex-start; } .time-tracking-toolbar > label { max-width: none; } .time-tracking-range { width: 100%; gap: .3rem; } .time-tracking-range strong { flex: 1; text-align: center; font-size: .72rem; } .time-tracking-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } .time-tracking-card { padding: .75rem; } .time-tracking-form-actions { align-items: stretch; } .time-tracking-form-actions button { flex: 1 1 auto; } .time-tracking-custom-range label { flex: 1 1 8rem; } }
@keyframes time-tracking-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .time-tracking *, .time-tracking-form-surface * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.time-tracking-read-only { color: var(--time-muted); font-size: .8rem; margin: .2rem 0 1rem; }