/* Design tokens and base component styles shared by Tasko.Client and Tasko.Platform - the two
   apps' own css/app.css files hold only what genuinely differs between them (app-specific
   pages/features and a handful of intentionally divergent overrides). Loaded first in both
   apps' index.html, before their own app.css, so any real per-app override still wins by
   source order. */

:root {
    color-scheme: light;
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-muted: #f1f5f9;
    --surface-subtle: #fbfbfc;
    --surface-raised: #fbfcfd;
    --timesheet-disabled-bg: var(--surface-muted);
    --text: #111827;
    --muted: #64748b;
    --muted-strong: #334155;
    --line: #e5e7eb;
    --line-strong: #cbd5e1;
    --primary: #111827;
    --primary-strong: #020617;
    --primary-contrast: #ffffff;
    --danger: #b91c1c;
    --success-bg: #ecfdf5;
    --success-text: #047857;
    --error-bg: #fef2f2;
    --error-text: #b91c1c;
    --focus: rgba(15, 23, 42, 0.14);
    --nav-text: #5f6472;
    --nav-icon: #7a7f8c;
    --nav-active-bg: #eceef2;
    --nav-hover-bg: #f0f1f3;
    --row-control-hover-bg: rgba(15, 23, 42, 0.06);
    --topbar-bg: rgba(255, 255, 255, 0.94);
    --switch-bg: #e5e7eb;
    --shadow: rgba(15, 23, 42, 0.12);
    --status-backlog: #64748b;
    --status-todo: #2563eb;
    --status-inprogress: #d97706;
    --status-inreview: #7c3aed;
    --status-done: #16a34a;
    --status-canceled: #b91c1c;
    --radius: 6px;
    --control-height: 32px;
    --control-height-sm: 30px;
    --button-height: 32px;
    --button-height-sm: 30px;
    --table-row-height: 32px;
    --page-padding-x: 16px;
    --page-padding-y: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --font-size: 12px;
    --line-height: 1.35;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0f14;
    --surface: #121821;
    --surface-muted: #1a2330;
    --surface-subtle: #10161f;
    --surface-raised: #151d28;
    --timesheet-disabled-bg: var(--surface-muted);
    --text: #e5e7eb;
    --muted: #9aa4b2;
    --muted-strong: #cbd5e1;
    --line: #263241;
    --line-strong: #3b4a5f;
    --primary: #e5e7eb;
    --primary-strong: #f8fafc;
    --primary-contrast: #0b0f14;
    --danger: #f87171;
    --success-bg: #052e24;
    --success-text: #86efac;
    --error-bg: #3b1014;
    --error-text: #fca5a5;
    --focus: rgba(148, 163, 184, 0.22);
    --nav-text: #a1aab8;
    --nav-icon: #8b95a4;
    --nav-active-bg: #202a38;
    --nav-hover-bg: #1a2330;
    --row-control-hover-bg: rgba(148, 163, 184, 0.14);
    --topbar-bg: rgba(18, 24, 33, 0.94);
    --switch-bg: #334155;
    --shadow: rgba(0, 0, 0, 0.36);
    --status-backlog: #94a3b8;
    --status-todo: #60a5fa;
    --status-inprogress: #fbbf24;
    --status-inreview: #a78bfa;
    --status-done: #4ade80;
    --status-canceled: #f87171;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: var(--font-size);
    line-height: var(--line-height);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button:not(:disabled),
[role="button"]:not(:disabled) {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

h1 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
}

h1[tabindex="-1"]:focus {
    outline: none;
}

h2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

h3,
h4 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.app-shell {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    min-height: 100vh;
}

.app-shell-public {
    grid-template-columns: minmax(0, 1fr);
}

.brand {
    position: relative;
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}

.brand-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.brand-name {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 550;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-version {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.brand-user {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-mark {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-contrast);
    font-size: 13px;
    font-weight: 600;
}

.nav-link {
    position: relative;
    display: flex;
    min-height: 30px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius);
    color: var(--nav-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    transition: background-color 120ms ease, color 120ms ease;
}

.nav-link:hover,
.nav-link:focus-visible {
    background: var(--nav-hover-bg);
    color: var(--text);
    outline: none;
}

.nav-link.is-active {
    background: var(--nav-active-bg);
    color: var(--text);
}

.nav-link-child {
    min-height: 26px;
    padding-left: 32px;
    font-size: 12px;
}

.nav-link.is-active::before {
    position: absolute;
    left: -8px;
    width: 2px;
    height: 16px;
    border-radius: 999px;
    background: var(--primary);
    content: "";
}

.nav-section-label {
    display: block;
    padding: 14px 8px 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

.nav-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--nav-icon);
}

.nav-link:hover .nav-icon,
.nav-link:focus-visible .nav-icon,
.nav-link.is-active .nav-icon {
    color: currentColor;
}

.nav-icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.sortable-column-header-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 4px;
}

.sortable-column-header-label,
.sortable-column-header-sort-button,
.group-toggle-button {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.sortable-column-header-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sortable-column-header-label:hover,
.sortable-column-header-sort-button:hover {
    color: var(--text);
}

.sortable-column-header-sort-button {
    flex-shrink: 0;
}

.sortable-column-header-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.35;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.sortable-column-header-sort-button.is-asc .sortable-column-header-icon,
.sortable-column-header-sort-button.is-desc .sortable-column-header-icon {
    opacity: 1;
}

.sortable-column-header-sort-button.is-desc .sortable-column-header-icon {
    transform: rotate(180deg);
}

.group-toggle-button {
    flex-shrink: 0;
    color: var(--muted);
    opacity: 0.55;
}

.group-toggle-button:hover {
    opacity: 1;
    color: var(--text);
}

.group-toggle-button.is-active {
    opacity: 1;
    color: var(--primary);
}

.group-toggle-icon {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.main-column {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.settings-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    margin-bottom: -1px;
    border-bottom: 1px solid transparent;
    color: var(--muted);
    text-decoration: none;
}

.settings-tab:hover,
.settings-tab:focus-visible {
    color: var(--text);
}

.settings-tab.is-active {
    border-bottom-color: var(--text);
    color: var(--text);
}

.settings-option-row .ui-muted {
    margin-top: 3px;
}

.project-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.project-tab {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.project-tab:hover,
.project-tab:focus-visible {
    color: var(--text);
    outline: none;
}

.project-tab.is-active {
    border-bottom-color: var(--text);
    color: var(--text);
}

.project-empty-panel {
    display: flex;
    min-height: 120px;
    align-items: center;
    padding: 16px;
}

.toggle-row {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.toggle-title {
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
}

.ui-switch {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 20px;
    flex: 0 0 auto;
    align-items: center;
}

.ui-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ui-switch span {
    position: relative;
    display: block;
    width: 34px;
    height: 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--switch-bg);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.ui-switch span::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
    content: "";
    transition: transform 120ms ease;
}

.ui-switch input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
}

.ui-switch input:checked + span::after {
    transform: translateX(14px);
}

.ui-switch input:focus-visible + span {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.task-details-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.task-details-table th {
    width: 160px;
    color: var(--muted);
    font-weight: 500;
    text-align: left;
}

.topbar-title {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.topbar-title h1 {
    overflow: hidden;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-title p {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-actions,
.header-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

.topbar-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.topbar-stepper-label {
    min-width: 116px;
    color: var(--text);
    font-size: 13px;
    font-weight: 550;
    text-align: center;
    white-space: nowrap;
}

.topbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.content {
    width: 100%;
    max-width: none;
    padding: var(--page-padding-y) var(--page-padding-x);
}

.app-shell-public .content {
    min-height: calc(100vh - 56px);
    padding: 0;
}

.app-shell-auth .content {
    min-height: 100vh;
}

.page-header,
.work-header,
.project-admin-header {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.page-header p,
.work-header p,
.panel-title-row p,
.muted,
.ui-muted {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.eyebrow,
.ui-kicker {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.work-page {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.view-toolbar {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: flex-end;
}

.surface,
.auth-panel,
.empty-state,
.ui-panel,
.work-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}

.surface,
.auth-panel,
.empty-state,
.ui-panel:not(.ui-panel-flush) {
    padding: 12px;
}

.work-panel {
    min-width: 0;
    overflow: hidden;
}

.table-panel {
    min-width: 0;
}

.panel-overflow-visible,
.panel-overflow-visible .table-frame {
    overflow: visible;
}

.auth-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
    gap: 24px;
}

.setup-page {
    display: grid;
    min-height: inherit;
    place-items: start center;
    padding: clamp(48px, 9vh, 96px) 24px 24px;
}

.setup-form {
    display: grid;
    width: min(100%, var(--ui-container-width, 32rem));
    gap: 18px;
}

.setup-intro {
    display: grid;
    gap: 4px;
}

.setup-intro h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

.setup-form .button-primary {
    width: 100%;
}

.auth-center {
    display: grid;
    min-height: inherit;
    place-items: center;
    padding: 24px;
}

.auth-card {
    display: grid;
    width: min(100%, var(--ui-container-width, 32rem));
    gap: 16px;
}

.auth-card-header {
    display: grid;
    gap: 4px;
    text-align: center;
}

.auth-card-header p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.auth-submit {
    width: 100%;
}

.auth-links {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-top: 2px;
}

.ui-form,
.stack-form {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.ui-form > label,
.form-field {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.form-field > span,
.form-field > label {
    color: var(--muted);
}

.team-dialog-form {
    gap: 12px;
}

.form-page-readable {
    --ui-container-width: 100%;
}

.form-page-compact {
    --ui-container-width: 32rem;
}

.work-log-form {
    display: grid;
}

.work-log-form-content {
    display: grid;
    gap: 14px;
}

.work-log-range-toggle {
    align-self: end;
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: var(--control-height);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.work-log-range-toggle .toggle-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.work-log-range-toggle .ui-switch {
    min-height: var(--control-height);
}

.work-log-time-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, max-content) auto minmax(8.5rem, max-content) minmax(6rem, 8rem);
    align-items: end;
    gap: 12px;
}

.work-log-date-field {
    min-width: 8.5rem;
}

.work-log-description {
    min-height: 5rem;
    resize: vertical;
}

.work-log-date-field-muted {
    opacity: 0.58;
}

.work-log-date-field-muted .ui-input:disabled {
    background: var(--surface-muted);
    color: var(--muted);
}

.work-log-hours-field {
    min-width: 6rem;
}

.work-log-hours-field .ui-input {
    text-align: right;
}

.task-form-page .form-page-container {
    width: 100%;
}

.team-form-panel {
    border: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

.form-page {
    display: grid;
    min-width: 0;
    gap: 12px;
}

.form-page-container {
    width: min(100%, var(--ui-container-width, 72rem));
    margin-inline: auto;
}

.form-page-readable .form-page-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ui-grid-gap, 0.625rem);
}

.form-page-readable .form-page-container > * {
    grid-column: 3 / span 8;
    min-width: 0;
}

.page-form {
    display: grid;
    gap: 0;
    min-width: 0;
}

.page-form-stack {
    display: grid;
    gap: 10px;
}

.form-section {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.form-section-single {
    grid-template-columns: minmax(0, 1fr);
}

.form-section:last-of-type {
    border-bottom: 0;
}

.form-section-heading {
    display: grid;
    align-content: start;
    gap: 4px;
}

.form-section-heading h2 {
    font-size: 12px;
    font-weight: 550;
}

.form-section-heading p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.form-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 10px;
}

.field-inline-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.ui-container {
    width: min(100%, var(--ui-container-width, 90rem));
    margin-inline: auto;
}

.ui-container-readable {
    --ui-container-width: 72rem;
}

.ui-container-fluid {
    --ui-container-width: 100%;
}

.ui-layout-center {
    display: grid;
    justify-items: center;
}

.ui-grid {
    display: grid;
    min-width: 0;
    gap: var(--ui-grid-gap, 0.625rem);
}

.ui-grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.ui-col-1 {
    grid-column: span 1;
}

.ui-col-2 {
    grid-column: span 2;
}

.ui-col-3 {
    grid-column: span 3;
}

.ui-col-4 {
    grid-column: span 4;
}

.ui-col-5 {
    grid-column: span 5;
}

.ui-col-6 {
    grid-column: span 6;
}

.ui-col-7 {
    grid-column: span 7;
}

.ui-col-8 {
    grid-column: span 8;
}

.ui-col-9 {
    grid-column: span 9;
}

.ui-col-10 {
    grid-column: span 10;
}

.ui-col-11 {
    grid-column: span 11;
}

.ui-col-12 {
    grid-column: 1 / -1;
}

.ui-col-start-1 {
    grid-column-start: 1;
}

.ui-col-start-2 {
    grid-column-start: 2;
}

.ui-col-start-3 {
    grid-column-start: 3;
}

.ui-col-start-4 {
    grid-column-start: 4;
}

.ui-col-start-5 {
    grid-column-start: 5;
}

.ui-col-start-6 {
    grid-column-start: 6;
}

.ui-col-start-7 {
    grid-column-start: 7;
}

.ui-col-start-8 {
    grid-column-start: 8;
}

.ui-col-start-9 {
    grid-column-start: 9;
}

.ui-col-start-10 {
    grid-column-start: 10;
}

.ui-col-start-11 {
    grid-column-start: 11;
}

.ui-col-start-12 {
    grid-column-start: 12;
}

.team-form-choice-list {
    max-height: 260px;
}

.form-footer-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface-raised);
}

.choice-section {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.choice-section legend {
    padding: 0 3px;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
}

.choice-section p,
.choice-empty {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.choice-list {
    display: grid;
    max-height: 184px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.choice-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 34px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}

.choice-row:last-child {
    border-bottom: 0;
}

.choice-row:hover {
    background: var(--surface-muted);
}

.choice-row input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--primary);
}

.choice-row input:disabled {
    opacity: 0.45;
}

.choice-row span,
.choice-row label,
.choice-main label {
    min-width: 0;
    color: var(--text);
}

.choice-row strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.choice-row small {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite-project-list {
    max-height: 220px;
}

.invite-project-row {
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
}

.invite-project-team {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-user-choice-row {
    grid-template-columns: minmax(0, 1fr) 120px;
}

.choice-main {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
    color: var(--text);
}

.team-role-select {
    min-height: 28px;
}

.form-static-value {
    min-height: var(--control-height);
    margin: 0;
    padding: 5px 0;
    color: var(--text);
    font-size: 12px;
    line-height: 1.25;
    display: flex;
    align-items: center;
}

.form-static-value-block {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}

.form-static-value-right {
    justify-content: flex-end;
}

.form-date-input {
    width: min(100%, 17ch);
    min-width: 16ch;
    padding-right: 6px;
}

.input:focus,
.ui-input:focus {
    border-color: #94a3b8;
    outline: 3px solid var(--focus);
}

.ui-textarea {
    min-height: 82px;
    resize: vertical;
}

.rich-editor {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-weight: 400;
}

.rich-editor:focus-within {
    border-color: #94a3b8;
    outline: 3px solid var(--focus);
}

.rich-editor.is-disabled {
    opacity: 0.68;
}

.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    min-height: 32px;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-subtle);
}

.rich-editor-button {
    display: inline-flex;
    width: 26px;
    min-width: 26px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

.rich-editor-button:hover,
.rich-editor-button:focus-visible,
.rich-editor-button.is-active {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
    outline: none;
}

.rich-editor-button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.rich-editor-button svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.rich-editor-separator {
    width: 1px;
    height: 18px;
    margin: 0 3px;
    background: var(--line);
}

.rich-editor-surface {
    min-height: 150px;
    background: var(--surface);
}

.rich-editor-prosemirror {
    min-height: 150px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    line-height: var(--line-height);
    outline: none;
    resize: vertical;
    overflow-y: auto;
}

.task-comment-form .rich-editor-surface,
.task-comment-reply-form .rich-editor-surface,
.task-comment-edit-form .rich-editor-surface,
.task-comment-form .rich-editor-prosemirror,
.task-comment-reply-form .rich-editor-prosemirror,
.task-comment-edit-form .rich-editor-prosemirror {
    min-height: 64px;
}

.rich-editor-prosemirror *,
.rich-text-content * {
    letter-spacing: 0;
}

.rich-editor-prosemirror p,
.rich-editor-prosemirror li,
.rich-text-content p,
.rich-text-content li {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.rich-editor-prosemirror strong,
.rich-editor-prosemirror b,
.rich-text-content strong,
.rich-text-content b {
    font-weight: 550;
}

.rich-editor-prosemirror > * + *,
.rich-text-content > * + * {
    margin-top: 8px;
}

.rich-editor-prosemirror h1 {
    font-size: 13px;
    font-weight: 550;
    line-height: 1.35;
}

.rich-editor-prosemirror h2 {
    font-size: 12.5px;
    font-weight: 550;
    line-height: 1.35;
}

.rich-editor-prosemirror h3 {
    font-size: 12px;
    font-weight: 550;
    line-height: 1.35;
}

.rich-editor-prosemirror h4 {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.rich-text-content h1 {
    font-size: 19px;
    font-weight: 650;
    line-height: 1.3;
}

.rich-text-content h2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.rich-text-content h3 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.rich-text-content h4 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.rich-editor-prosemirror ul,
.rich-editor-prosemirror ol,
.rich-text-content ul,
.rich-text-content ol {
    margin-bottom: 0;
    padding-left: 18px;
}

.rich-editor-prosemirror blockquote,
.rich-text-content blockquote {
    margin: 0;
    padding-left: 10px;
    border-left: 2px solid var(--line);
    color: var(--muted);
}

.rich-editor-prosemirror a,
.rich-text-content a {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich-text-content {
    color: var(--text);
    overflow-wrap: anywhere;
}

.project-description-view,
.task-description-view {
    display: block;
    margin-bottom: 20px;
    color: var(--text);
}

.rich-editor-prosemirror img,
.rich-text-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 4px 0;
    border-radius: 6px;
    border: 1px solid var(--line);
}

.rich-editor-prosemirror img.is-broken,
.rich-text-content img.is-broken {
    display: inline-flex;
    min-width: 120px;
    min-height: 60px;
    align-items: center;
    justify-content: center;
    background: var(--surface-subtle);
    color: var(--muted);
    font-size: 11px;
}

.rich-editor-prosemirror img[data-resolved="done"],
.rich-text-content img[data-resolved="done"] {
    cursor: zoom-in;
}

.rich-text-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgba(2, 6, 23, 0.85);
    cursor: zoom-out;
}

.rich-text-lightbox-image {
    max-width: min(90vw, 1400px);
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}

.rich-editor-image-picker {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.rich-editor-image-picker.is-disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.rich-editor-image-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.password-input {
    position: relative;
    display: block;
}

.password-input .ui-input,
.password-input .input {
    padding-right: 34px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: var(--surface-muted);
    color: var(--text);
    outline: none;
}

.password-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.password-toggle svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.input-sm,
.ui-input-sm {
    min-height: var(--control-height-sm);
    padding: 4px 8px;
}

.ui-input-search,
.work-search {
    max-width: 280px;
}

.button,
.ui-button {
    display: inline-flex;
    min-height: var(--button-height);
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.button:disabled,
.ui-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.button-primary,
.ui-button-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-contrast);
}

.button-primary:hover,
.button-primary:focus-visible,
.ui-button-primary:hover,
.ui-button-primary:focus-visible {
    background: var(--primary-strong);
}

.button-secondary,
.button-ghost,
.ui-button-secondary {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
}

.button-secondary:hover,
.button-secondary:focus-visible,
.button-ghost:hover,
.button-ghost:focus-visible,
.ui-button-secondary:hover,
.ui-button-secondary:focus-visible,
.ui-button-ghost:hover,
.ui-button-ghost:focus-visible {
    background: var(--surface-muted);
}

.button-sm,
.ui-button-sm {
    min-height: var(--button-height-sm);
    padding: 0 10px;
    font-size: 12px;
}

.button-icon,
.ui-button-icon {
    width: var(--button-height);
    min-width: var(--button-height);
    min-height: var(--button-height);
    padding: 0;
}

.button-icon svg,
.ui-button-icon svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.button-leading-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.ui-button-danger {
    border-color: #fecaca;
    color: var(--danger);
}

.ui-button-primary.ui-button-danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #ffffff;
}

.ui-button-primary.ui-button-danger:hover,
.ui-button-primary.ui-button-danger:focus-visible {
    background: #991b1b;
}

.ui-icon-button {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--muted);
    text-decoration: none;
}

.ui-icon-button:hover,
.ui-icon-button:focus-visible {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
    outline: none;
}

.ui-icon-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.col-project-title {
    width: auto;
    min-width: 320px;
}

.col-project-state {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    white-space: nowrap;
}

.col-project-count {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    text-align: right;
    white-space: nowrap;
}

.col-project-team {
    width: 168px;
    min-width: 144px;
    max-width: 168px;
    white-space: normal;
}

.col-project-days {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: right;
    white-space: nowrap;
}

.work-table th.col-project-days,
.ui-table th.col-project-days {
    text-align: center;
    white-space: normal;
    line-height: 1.1;
}

.col-project-duration {
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    text-align: right;
    white-space: nowrap;
}

.col-date {
    width: 82px;
    min-width: 82px;
    max-width: 82px;
    white-space: nowrap;
}

.task-worklogs-author-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.work-table td.task-worklogs-author-col,
.work-table th.task-worklogs-author-col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-task-assignee-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    white-space: normal;
}

.project-task-key-col {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    white-space: nowrap;
}

.table-date-input {
    width: 96px;
    min-height: 24px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--text);
    font: inherit;
    line-height: 1.2;
    appearance: auto;
}

.table-date-input:hover,
.table-date-input:focus {
    border-color: var(--line);
    background: var(--surface);
    outline: none;
}

.table-date-input:focus {
    box-shadow: 0 0 0 2px var(--focus);
}

.table-date-input:disabled {
    cursor: progress;
    opacity: 0.65;
}

.table-date-input::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    cursor: pointer;
}

.table-date-input:hover::-webkit-calendar-picker-indicator,
.table-date-input:focus::-webkit-calendar-picker-indicator {
    opacity: 0.85;
}

.project-prefix {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

.table-state-text {
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.15rem;
    white-space: nowrap;
}

.col-team-name {
    width: auto;
    min-width: 280px;
}

.col-team-manager {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

.col-team-members {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
    text-align: right;
    white-space: nowrap;
}

.col-team-projects {
    width: 74px;
    min-width: 74px;
    max-width: 74px;
    text-align: right;
    white-space: nowrap;
}

.team-name-cell,
.project-name-cell {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.team-expand-button,
.row-expand-button {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--muted-strong);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.team-expand-placeholder,
.row-expand-placeholder {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.team-expand-button:hover,
.team-expand-button:focus-visible,
.row-expand-button:hover,
.row-expand-button:focus-visible {
    background: var(--row-control-hover-bg);
    color: var(--text);
    outline: none;
}

.team-expand-chevron,
.row-expand-chevron {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    transition: transform 120ms ease;
    transform: translateX(1px);
}

.team-expand-button[aria-expanded="true"] .team-expand-chevron,
.row-expand-button[aria-expanded="true"] .row-expand-chevron {
    transform: translateY(1px) rotate(90deg);
}

.work-table tr.team-main-row,
.work-table tr.project-main-row {
    border-bottom: 1px solid var(--line);
}

.work-table tr.team-main-row.is-expanded,
.work-table tr.project-main-row.is-expanded {
    border-bottom: 0;
    background: var(--surface-muted);
}

.work-table tbody tr.team-members-row:hover,
.work-table tbody tr.project-tasks-row:hover {
    background: transparent;
}

.work-table tr.team-members-row,
.work-table tr.project-tasks-row {
    border-bottom: 1px solid var(--line);
}

.work-table td.team-members-cell,
.work-table td.nested-cell {
    height: auto;
    padding: 0;
    background: var(--surface-raised);
}

.team-members-sublist,
.nested-sublist {
    width: 100%;
    max-width: none;
    overflow: visible;
    background: transparent;
}

.work-table .team-members-table,
.work-table .nested-table {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-top: 0;
    border-bottom: 0;
    border-radius: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--surface);
    overflow: visible;
}

.project-task-project-col {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}

.project-task-hours-col {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
}

.project-task-date-cell,
.project-task-hours-cell {
    white-space: nowrap;
}

.project-task-title-cell {
    min-width: 0;
}

.work-log-date-col {
    width: 104px;
}

.timesheet-frame {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.timesheet-table {
    min-width: 1320px;
    table-layout: fixed;
}

.work-logs-timesheet-table {
    width: 1562px;
    min-width: 1562px;
}

.timesheet-name-col {
    width: 260px;
}

.timesheet-day-col {
    width: 34px;
}

.work-logs-timesheet-table .timesheet-name-col {
    width: 260px;
}

.work-logs-timesheet-table .timesheet-day-col {
    width: 42px;
}

.work-logs-timesheet-table th:first-child,
.work-logs-timesheet-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
}

.work-logs-timesheet-table thead th:first-child {
    z-index: 4;
    background: var(--surface-raised);
}

.work-logs-timesheet-table .timesheet-project-row td:first-child {
    background: var(--surface-muted);
}

.work-logs-timesheet-table .timesheet-total-row td:first-child {
    background: var(--surface-raised);
}

.timesheet-day-cell {
    position: relative;
    padding-right: 4px;
    padding-left: 4px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.calendar-day-header {
    display: grid;
    justify-items: center;
    gap: 1px;
    line-height: 1.1;
}

.calendar-day-header-number {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted-strong);
}

.calendar-day-header-caption {
    font-size: 10px;
    color: var(--muted);
    text-transform: lowercase;
}

.timesheet-day-disabled .calendar-day-header-number,
.timesheet-day-disabled .calendar-day-header-caption {
    color: var(--muted);
}

.timesheet-cell-action-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    text-align: left;
    min-width: 260px;
    visibility: hidden;
}

.timesheet-day-disabled {
    background: var(--timesheet-disabled-bg);
    color: var(--muted);
}

.timesheet-table col.timesheet-day-col-disabled {
    background: var(--timesheet-disabled-bg);
}

.timesheet-table :is(th, td).timesheet-day-disabled {
    background: var(--timesheet-disabled-bg);
}

.work-table th.timesheet-day-disabled {
    color: var(--muted);
}

.timesheet-project-row {
    background: var(--surface-muted);
}

.timesheet-project-row strong {
    font-weight: 550;
}

.timesheet-task-row td:first-child {
    padding-left: 40px;
}

.work-logs-timesheet-table tbody tr.table-edit-row:hover {
    background: transparent;
}

.timesheet-task-name {
    display: block;
    overflow: hidden;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.timesheet-total-row {
    background: var(--surface-raised);
    border-top: 1px solid var(--line);
}

.timesheet-panel {
    min-width: 0;
    overflow: hidden;
}

.timesheet-summary-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.timesheet-summary-frame {
    width: fit-content;
    overflow: hidden;
}

.timesheet-summary-wrapper .timesheet-summary-table {
    width: fit-content;
    min-width: 0;
    table-layout: auto;
}

.timesheet-summary-wrapper .timesheet-summary-table td:first-child {
    color: var(--muted-strong);
    white-space: nowrap;
    padding-right: 24px;
}

.timesheet-summary-wrapper .timesheet-summary-table td.table-number-cell {
    white-space: nowrap;
}

.project-task-title-indent {
    display: inline-block;
    padding-left: calc(var(--task-level, 0) * 18px);
}

.work-table tr.task-row-colored td:not(.col-actions-menu),
.work-table tr.task-row-colored td:not(.col-actions-menu) strong,
.work-table tr.task-row-colored td:not(.col-actions-menu) span,
.work-table tr.task-row-colored .table-state-text,
.nested-table tr.task-row-colored td:not(.col-actions-menu),
.nested-table tr.task-row-colored td:not(.col-actions-menu) strong,
.nested-table tr.task-row-colored td:not(.col-actions-menu) span,
.nested-table tr.task-row-colored .table-state-text {
    color: var(--row-status-color);
}

.project-task-child-row td:first-child .project-prefix {
    opacity: 0.72;
}

.team-member-user-col {
    width: 34%;
}

.team-member-email-col {
    width: 44%;
}

.team-member-role-col {
    width: auto;
}

.team-member-actions-col,
.nested-actions-col {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
}

col.team-member-actions-col,
col.nested-actions-col {
    width: 42px;
}

.work-table .team-members-table th,
.work-table .team-members-table td,
.work-table .nested-table th,
.work-table .nested-table td {
    height: 28px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1rem;
    overflow-wrap: anywhere;
}

.work-table .team-members-table th:not(:last-child),
.work-table .team-members-table td:not(:last-child),
.work-table .nested-table th:not(:last-child),
.work-table .nested-table td:not(:last-child) {
    border-right: 1px solid var(--line);
}

.work-table .team-members-table th,
.work-table .nested-table th {
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-align: left;
}

.work-table .team-members-table th:first-child,
.work-table .team-members-table td:first-child {
    padding-left: 40px;
}

.work-table .team-members-table tbody tr:last-child td,
.work-table .nested-table tbody tr:last-child td {
    border-bottom: 0;
}

.work-table .team-members-table tbody tr:hover,
.work-table .nested-table tbody tr:hover {
    background: var(--surface-muted);
}

.text-link,
.row-action {
    color: var(--primary);
    font-weight: 500;
}

.user-pill,
.status-badge,
.ui-badge,
.ui-count {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.ui-badge-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.ui-badge-success {
    border-color: #bbf7d0;
    background: var(--success-bg);
    color: var(--success-text);
}

.ui-badge-danger {
    border-color: #fecaca;
    background: var(--error-bg);
    color: var(--error-text);
}

.alert,
.ui-alert {
    padding: 9px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    line-height: 1.35;
}

.ui-alert {
    margin: 8px;
}

.ui-alert-inline {
    margin: 0;
}

.alert-error,
.ui-alert-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.alert-success,
.ui-alert-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.app-notice {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12px;
    line-height: 1.35;
}

.app-notice:empty {
    display: none;
}

.app-notice-info {
    background: var(--surface-muted);
    color: var(--muted);
}

.app-notice-success {
    background: var(--success-bg);
    color: var(--success-text);
}

.app-notice-error {
    background: var(--error-bg);
    color: var(--error-text);
}

.app-notice-message {
    min-width: 0;
}

.app-notice-close {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: currentColor;
    opacity: 0.72;
}

.app-notice-close:hover,
.app-notice-close:focus-visible {
    background: rgba(15, 23, 42, 0.08);
    opacity: 1;
    outline: none;
}

.app-notice-close svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.table-frame {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.table-frame .work-table,
.table-frame .ui-table {
    border-radius: inherit;
}

.work-table,
.ui-table {
    width: 100%;
    caption-side: bottom;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    line-height: 1.15rem;
}

.work-table thead,
.ui-table thead {
    background: transparent;
}

.work-table tr,
.ui-table tr {
    border-bottom: 1px solid var(--line);
}

.work-table tbody tr:last-child,
.ui-table tbody tr:last-child {
    border-bottom: 0;
}

.work-table tfoot tr,
.ui-table tfoot tr {
    border-top: 1px solid var(--line);
}

.work-table th:not(:last-child),
.work-table td:not(:last-child),
.ui-table th:not(:last-child),
.ui-table td:not(:last-child) {
    border-right: 1px solid var(--line);
}

.work-table th,
.work-table td,
.ui-table th,
.ui-table td {
    height: var(--table-row-height);
    padding: 4px 8px;
    vertical-align: middle;
    color: var(--text);
    font-size: 12px;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
}

.work-table th,
.ui-table th {
    color: var(--muted-strong);
    font-weight: 500;
    text-align: inherit;
    text-transform: none;
}

.work-table td,
.ui-table td {
    font-weight: 400;
}

.work-table strong,
.ui-table strong,
.dense-row strong {
    font-weight: 500;
}

.work-table small,
.ui-table small,
.dense-row small,
.data-row small,
.project-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1rem;
}

.work-table tbody tr:hover,
.work-table tbody tr.is-selected,
.ui-table tbody tr:hover,
.ui-table tbody tr.is-selected {
    background: var(--surface-muted);
}

.work-table tbody tr.table-edit-row {
    cursor: pointer;
}

.work-table tbody tr.table-group-row {
    background: var(--surface-muted);
}

.work-table tbody tr.table-group-row td {
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: normal;
}

.work-table th.project-task-hours-col,
.ui-table th.project-task-hours-col,
.nested-table th.project-task-hours-col {
    line-height: 1.05rem;
    white-space: normal;
    text-align: center;
    vertical-align: middle;
}

.work-table td.table-number-cell,
.ui-table td.table-number-cell,
.nested-table td.table-number-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.work-table tr.project-task-foreign-row td,
.work-table tr.project-task-foreign-row td strong,
.work-table tr.project-task-foreign-row td span,
.work-table tr.project-task-foreign-row .table-state-text,
.nested-table tr.project-task-foreign-row td,
.nested-table tr.project-task-foreign-row td strong,
.nested-table tr.project-task-foreign-row td span,
.nested-table tr.project-task-foreign-row .table-state-text {
    color: var(--muted);
}

.task-list-section-pending .work-table tbody td:not(.col-actions),
.task-list-section-pending .work-table tbody td:not(.col-actions) strong,
.task-list-section-pending .work-table tbody td:not(.col-actions) span,
.task-list-section-pending .work-table .table-state-text {
    color: var(--muted-strong);
}

.non-working-days-table th:first-child,
.non-working-days-table td:first-child {
    width: 56px;
    color: var(--muted);
    text-align: right;
}

.non-working-days-table th:nth-child(2),
.non-working-days-table td:nth-child(2) {
    width: 150px;
}

.non-working-days-table th:last-child,
.non-working-days-table td:last-child {
    width: 116px;
}

.user-absences-table {
    width: calc(260px + (31 * 42px));
    min-width: calc(260px + (31 * 42px));
}

.user-absences-panel {
    max-width: 100%;
}

.user-absences-panel .timesheet-frame {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.user-absences-table .timesheet-name-col {
    width: 260px;
}

.user-absences-table .timesheet-day-col {
    width: 42px;
}

.user-absences-table th:first-child,
.user-absences-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
}

.user-absences-table thead th:first-child {
    z-index: 4;
    background: var(--surface-raised);
}

.user-absences-table .timesheet-project-row td:first-child {
    background: var(--surface-muted);
}

.user-absences-month-cell {
    z-index: 3;
    background: var(--surface-muted);
    box-shadow: 1px 0 0 var(--line);
    padding-left: 10px;
    text-align: left;
}

.user-absences-month-fill {
    background: var(--surface-muted);
    border-left: 0;
}

.user-absences-table .timesheet-total-row td:first-child {
    background: var(--surface-raised);
}

.user-absences-table th:first-child,
.user-absences-table td:first-child {
    box-shadow: 1px 0 0 var(--line);
}

.table-inline-add-row td {
    background: var(--surface-muted);
}

.table-inline-add-row .ui-input {
    height: 32px;
}

.system-projects-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.system-projects-list {
    display: grid;
    gap: 12px;
}

.system-projects-list-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.system-projects-list-items,
.system-project-add {
    display: grid;
    gap: 8px;
}

.system-project-list-item {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.system-project-list-item:hover,
.system-project-list-item.is-active {
    background: var(--surface-muted);
    border-color: var(--line-strong);
}

.system-project-list-item span {
    font-weight: 700;
}

.system-project-list-item small {
    color: var(--muted);
    font-size: 12px;
}

.system-project-editor {
    min-width: 0;
}

.system-project-form {
    gap: 1.125rem;
}

.system-project-form-section {
    display: grid;
    gap: 0.75rem;
    padding-bottom: 1.125rem;
    border-bottom: 1px solid var(--line);
}

.system-project-form-section:last-child {
    border-bottom: 0;
}

.system-project-form-heading {
    display: grid;
    gap: 0.25rem;
}

.system-project-form-heading h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
}

.system-project-form-heading p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.system-project-form-fields {
    display: grid;
    gap: 0.625rem;
}

.system-project-data-grid {
    --ui-grid-gap: 0.75rem;
}

.system-project-toggle-row {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
}

.system-project-toggle-copy {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.system-project-toggle-copy strong {
    font-size: 12px;
    font-weight: 650;
}

.system-project-toggle-copy small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.system-project-items-frame {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.system-project-items-table {
    table-layout: fixed;
}

.system-project-items-table .system-project-item-ordinal-col {
    width: 6ch;
}

.system-project-items-table .system-project-item-enabled-col {
    width: 14ch;
}

.system-project-items-table th:first-child,
.system-project-items-table td:first-child {
    text-align: center;
}

.system-project-items-table th:last-child,
.system-project-items-table td:last-child {
    text-align: center;
}

.system-project-items-table td:last-child .ui-switch {
    justify-content: center;
}

.system-project-add-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0.5rem;
}

.table-action-cell {
    text-align: right;
}

.col-actions,
.ui-cell-actions {
    width: 150px;
    text-align: right;
    white-space: nowrap;
}

.col-actions-menu {
    width: 42px;
    text-align: right;
    white-space: nowrap;
}

.work-table td.col-actions-menu,
.work-table th.col-actions-menu {
    overflow: visible;
}

.action-menu {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
}

.action-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: transparent;
}

.action-menu-trigger {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
}

.action-menu-trigger:hover,
.action-menu-trigger:focus-visible,
.action-menu-trigger[aria-expanded="true"] {
    border-color: var(--line);
    background: var(--surface);
    color: var(--text);
    outline: none;
}

.action-menu-trigger svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.action-menu-content {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 31;
    display: grid;
    width: min(268px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(320px, calc(100vh - 32px));
    overflow: visible;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    text-align: left;
}

.action-menu-item {
    display: grid;
    width: 100%;
    min-height: 44px;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 7px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.action-menu-item:hover,
.action-menu-item:focus-visible {
    background: var(--surface-muted);
    outline: none;
}

.action-menu-separator {
    height: 1px;
    margin: 4px 6px;
    background: var(--line);
}

.action-submenu {
    position: relative;
}

.action-submenu-trigger {
    grid-template-columns: 16px minmax(0, 1fr) 14px;
}

.action-submenu-arrow {
    align-self: center;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
}

.action-submenu-content {
    z-index: 32;
    display: grid;
    width: 236px;
    max-width: calc(100vw - 32px);
    max-height: min(320px, calc(100vh - 32px));
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.action-menu-item:disabled,
.action-menu-item[aria-disabled="true"] {
    color: var(--muted);
    cursor: not-allowed;
}

.action-menu-item:disabled:hover,
.action-menu-item[aria-disabled="true"]:hover {
    background: transparent;
}

.action-menu-item-danger {
    color: var(--danger);
}

.action-menu-item-compact {
    align-items: center;
}

.action-menu-item-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    fill: currentColor;
    color: var(--muted);
}

.action-menu-item-compact .action-menu-item-icon {
    margin-top: 0;
}

.action-menu-item-danger .action-menu-item-icon {
    color: var(--danger);
}

.action-menu-item-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    overflow-wrap: anywhere;
}

.action-menu-item-label {
    overflow: hidden;
    color: currentColor;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-menu-item-description {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
}

.action-menu-item-danger .action-menu-item-description {
    color: color-mix(in srgb, var(--danger) 72%, var(--muted));
}

.table-primary-link,
.table-action {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
}

.table-primary-link {
    font-weight: 500;
}

.table-action {
    margin-left: 8px;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 500;
}

.table-action:hover,
.table-primary-link:hover {
    text-decoration: underline;
}

.table-action.danger {
    color: var(--danger);
}

.table-action:disabled {
    opacity: 0.5;
    text-decoration: none;
}

.project-create-row,
.team-create-row,
.user-create-row,
.member-add-row,
.invite-row,
.inline-form,
.ui-inline-form {
    display: grid;
    gap: 8px;
}

.project-create-row,
.user-create-row,
.member-add-row,
.invite-row {
    padding: 8px;
    border-bottom: 1px solid var(--line);
}

.project-create-row {
    grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.2fr) 140px auto;
}

.team-create-row {
    grid-template-columns: minmax(180px, 260px) auto;
    padding: 8px;
    border-bottom: 1px solid var(--line);
}

.user-create-row {
    grid-template-columns: minmax(190px, 1fr) minmax(180px, 1fr) minmax(160px, 0.85fr) 150px auto;
}

.member-add-row {
    grid-template-columns: minmax(180px, 1fr) minmax(170px, 1fr) 120px auto;
}

.invite-row,
.inline-form,
.ui-inline-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.project-access-grid,
.project-management-grid,
.project-columns,
.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: 12px;
}

.panel-title-row,
.section-title,
.detail-heading,
.detail-section-title,
.panel-heading {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px;
    border-bottom: 1px solid var(--line);
}

.section-title,
.detail-heading,
.detail-section-title {
    padding: 0 0 8px;
    border-bottom: 0;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.details-grid div,
.feature-grid article,
.callout {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.details-grid dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.details-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.data-list,
.dense-list,
.project-list,
.feature-grid {
    display: grid;
    gap: 8px;
}

.feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
}

.data-row,
.dense-row,
.project-row {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.row-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.empty-state {
    display: grid;
    justify-items: start;
    gap: 10px;
}

.page-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 56px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
}

.page-empty-state p {
    max-width: 30rem;
    color: var(--muted);
}

.page-empty-state-compact {
    padding: 24px 16px;
}

.page-empty-state-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.project-meta-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.project-meta-strip span {
    display: grid;
    gap: 2px;
    max-width: 260px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.project-meta-strip strong {
    color: var(--text);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.project-overview {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    justify-items: stretch;
}

.project-overview-main {
    display: grid;
    grid-column: 3 / span 8;
    width: 100%;
    min-width: 0;
    gap: 14px;
}

.project-overview-heading {
    display: grid;
    gap: 4px;
}

.project-overview-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding-top: 4px;
}

.project-overview-meta div {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.project-overview-meta dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

.project-overview-meta dd {
    margin: 0;
    color: var(--text);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.project-overview-manager {
    display: grid;
    margin: 0;
    padding-top: 2px;
}

.project-overview-manager div {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
}

.project-overview-manager dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.project-overview-manager dd {
    margin: 0;
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.project-attachments-column {
    display: grid;
    grid-column: span 4;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px 14px 20px;
    border-left: 1px solid var(--line);
}

.project-overview-split > .project-overview-main {
    grid-column: 1;
    padding-right: 20px;
}

.project-overview-resizer {
    position: relative;
    grid-column: 2;
    align-self: stretch;
    width: 9px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
}

.project-overview-resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--line);
    transform: translateX(-50%);
    transition: background-color 120ms ease, width 120ms ease;
}

.project-overview-resizer:hover::before,
.project-overview-resizer:focus-visible::before,
.project-overview-resizer.is-dragging::before {
    width: 3px;
    background: var(--primary);
}

.project-overview-resizer:focus-visible {
    outline: none;
}

.project-overview-resizer:focus-visible::before {
    box-shadow: 0 0 0 2px var(--focus);
}

.project-overview-split > .project-attachments-column {
    grid-column: 3;
    padding: 14px 0 14px 16px;
    border-left: none;
}

.project-attachments-column-heading h2 {
    font-size: 12px;
    font-weight: 550;
}

.project-attachments-column-heading p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.project-attachment-form .ui-textarea {
    min-height: 88px;
}

.project-attachment-file-button {
    flex: 0 0 auto;
    pointer-events: none;
}

.project-attachment-file-name {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-attachment-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.project-attachment-row {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.project-attachment-row:last-child {
    border-bottom: 0;
}

.project-attachment-name {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 550;
    text-align: left;
    overflow-wrap: anywhere;
}

.project-attachment-name:hover,
.project-attachment-name:focus-visible {
    color: var(--ring);
    outline: none;
}

.project-attachment-size {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11px;
}

.project-attachment-description {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.gantt-panel {
    overflow: hidden;
}

.gantt-frame {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.gantt-grid {
    --gantt-day-width: 42px;
    display: grid;
    min-width: calc(260px + (var(--gantt-days) * var(--gantt-day-width)));
    grid-template-columns: 260px minmax(calc(var(--gantt-days) * var(--gantt-day-width)), 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.gantt-task-header,
.gantt-task-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
}

.gantt-task-header,
.gantt-days-header {
    min-height: var(--table-row-height);
    border-bottom: 1px solid var(--line);
    background: var(--surface-raised);
}

.gantt-task-header {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 500;
}

.gantt-days-header {
    display: grid;
    grid-template-columns: repeat(var(--gantt-days), minmax(var(--gantt-day-width), 1fr));
}

.gantt-day-header {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 3px 4px;
    border-left: 1px solid var(--line);
}

.gantt-day-header.is-month-start,
.gantt-day-line.is-month-start {
    border-left-color: var(--line-strong);
}

.gantt-task-name,
.gantt-task-track {
    min-height: 42px;
    border-bottom: 1px solid var(--line);
}

.gantt-task-name {
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 5px 10px 5px calc(10px + (var(--task-level, 0) * 18px));
}

.gantt-task-name strong {
    min-width: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.gantt-task-name small {
    color: var(--muted);
    font-size: 11px;
}

.gantt-task-name span {
    min-width: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.gantt-task-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--gantt-days), minmax(var(--gantt-day-width), 1fr));
    background: var(--surface);
}

.gantt-day-line {
    min-width: 0;
    border-left: 1px solid var(--line);
}

.gantt-bar {
    position: absolute;
    top: 50%;
    display: flex;
    min-width: 10px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    transform: translateY(-50%);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-contrast);
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.gantt-bar span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
}

.gantt-bar:hover,
.gantt-bar:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.gantt-bar-backlog {
    background: var(--status-backlog);
    border-color: var(--status-backlog);
}

.gantt-bar-todo {
    background: var(--status-todo);
    border-color: var(--status-todo);
}

.gantt-bar-inprogress {
    background: var(--status-inprogress);
    border-color: var(--status-inprogress);
}

.gantt-bar-inreview {
    background: var(--status-inreview);
    border-color: var(--status-inreview);
}

.gantt-bar-done {
    background: var(--status-done);
    border-color: var(--status-done);
}

.gantt-bar-canceled {
    background: var(--status-canceled);
    border-color: var(--status-canceled);
}

.gantt-bar-draggable {
    cursor: grab;
}

.gantt-bar-draggable:active {
    cursor: grabbing;
}

.gantt-bar-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    touch-action: none;
}

.gantt-bar-handle-start {
    left: 0;
}

.gantt-bar-handle-end {
    right: 0;
}

.gantt-drag-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    cursor: grabbing;
    touch-action: none;
}

.form-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.form-grid-four {
    display: grid;
    grid-template-columns: repeat(2, 112px) 144px minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    justify-content: start;
}

.form-field-date {
    width: 112px;
}

.form-field-narrow {
    max-width: 160px;
}

.project-form-heading {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.25;
}

.project-form-section {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.project-form-section:last-of-type {
    border-bottom: 0;
}

.project-form-administration-row {
    display: grid;
    grid-template-columns: max-content minmax(12rem, 18rem) minmax(12rem, 18rem);
    gap: 12px;
    align-items: end;
    justify-content: start;
    min-width: 0;
    max-width: 100%;
}

.project-prefix-input {
    width: 7rem;
}

.project-team-input {
    width: 18rem;
}

.project-manager-input {
    width: 18rem;
}

.project-form-planning-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 12px;
    align-items: end;
    min-width: 0;
    max-width: 100%;
}

.project-form-planning-fields .form-date-input,
.project-form-planning-fields .project-state-input {
    width: 100%;
    min-width: 0;
}

.project-state-grid {
    grid-template-columns: repeat(2, 144px);
    justify-content: start;
}

.project-state-input {
    width: 144px;
}

.task-planning-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
}

.task-assignee-field {
    grid-column: 1 / -1;
}

.task-plan-fields-row {
    display: grid;
    grid-template-columns: max-content max-content 16ch;
    gap: 12px;
    align-items: end;
    justify-content: start;
}

.task-date-field {
    width: max-content;
    min-width: 0;
}

.task-estimated-field {
    min-width: 0;
}

.task-estimated-field label {
    text-align: right;
}

.task-page-form {
    width: 100%;
}

.task-form-main-panel {
    width: 100%;
    min-width: 0;
}

.task-form-main-panel-centered {
    grid-column: 2 / span 10;
}

.task-form-main-panel-with-comments {
    grid-column: 2 / span 11;
}

.task-form-page .form-page-container > .task-form-main-panel-with-comments {
    grid-column: 2 / span 11;
}

.task-form-page .form-page-container > .task-form-main-panel-centered {
    grid-column: 2 / span 10;
}

.task-form-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
}

.task-form-split-with-comments {
    grid-template-columns: minmax(320px, 1fr) 9px minmax(280px, var(--task-comments-width, 420px));
    column-gap: 0;
    align-items: start;
}

.task-form-fields {
    width: 100%;
    min-width: 0;
}

.task-form-split-with-comments > .task-form-fields {
    grid-column: 1;
    padding-right: 20px;
}

.task-form-resizer {
    position: relative;
    grid-column: 2;
    align-self: stretch;
    width: 9px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
}

.task-form-resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--line);
    transform: translateX(-50%);
    transition: background-color 120ms ease, width 120ms ease;
}

.task-form-resizer:hover::before,
.task-form-resizer:focus-visible::before,
.task-form-resizer.is-dragging::before {
    width: 3px;
    background: var(--primary);
}

.task-form-resizer:focus-visible {
    outline: none;
}

.task-form-resizer:focus-visible::before {
    box-shadow: 0 0 0 2px var(--focus);
}

.task-comments-column {
    display: grid;
    grid-column: 3;
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 14px 0 14px 16px;
}

.task-estimated-input {
    width: 100%;
    text-align: right;
}

.task-comments-column-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.task-comments-column-heading-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.task-comments-column-heading h2 {
    font-size: 12px;
    font-weight: 550;
}

.task-comments-column-heading p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.task-comments-column-heading p[hidden] {
    display: none;
}

.task-comments {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.task-comment-form,
.task-comment-reply-form,
.task-comment-edit-form {
    display: grid;
    gap: 8px;
}

.task-comment-form[hidden] {
    display: none;
}

.task-comment-form .ui-textarea,
.task-comment-reply-form .ui-textarea {
    min-height: 72px;
}

.task-comment-form > .ui-button {
    justify-self: end;
}

.task-comments-list {
    display: grid;
    gap: 8px;
}

.task-comment {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin-left: calc(min(var(--comment-depth, 0), 6) * 14px);
    padding: 12px 0 0;
}

.task-comment-root {
    border-top: 1px solid var(--line);
}

.task-comment-reply {
    padding-left: 10px;
    border-left: 1px solid var(--line);
}

.task-comment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.task-comment-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.task-comment-body {
    min-width: 0;
}

.task-comment-header strong {
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.2;
}

.task-comment-header time {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
}

.task-comment-body p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.task-comment-replies-toggle {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted-strong);
    font-size: 12px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.task-comment-replies-toggle:hover,
.task-comment-replies-toggle:focus-visible {
    background: var(--row-control-hover-bg);
    color: var(--text);
    outline: none;
}

.task-comment-replies-toggle .row-expand-chevron {
    flex: 0 0 auto;
}

.task-comment-actions,
.task-comment-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.ui-link-button {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 500;
}

.ui-link-button:hover,
.ui-link-button:focus-visible {
    color: var(--text);
    text-decoration: underline;
    outline: none;
}

.ui-link-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
}

.ui-link-danger {
    color: var(--danger);
}

.ui-link-icon {
    padding: 2px;
}

.ui-link-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.panel-padding {
    padding: 8px;
}

.project-invitation-list {
    margin-top: 8px;
}

.dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgba(2, 6, 23, 0.68);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.dialog-panel {
    width: min(28rem, 100%);
    max-height: calc(100vh - (var(--space-4) * 2));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.dialog-panel-wide {
    width: min(620px, 100%);
}

.dialog-panel-transfer {
    width: min(44rem, 100%);
}

.dialog-panel-narrow {
    width: min(38rem, 100%);
}

.dialog-section {
    background: var(--surface-muted);
}

.dialog-header {
    display: flex;
    min-height: 46px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--line);
}

.dialog-header h2 {
    font-size: 13px;
    font-weight: 550;
}

.dialog-header p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.dialog-body {
    display: grid;
    gap: 14px;
    padding: 10px;
    background: var(--surface-subtle);
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--line);
}

.task-transfer-fields {
    display: grid;
    gap: var(--space-3);
}

.task-transfer-description {
    color: var(--muted);
    line-height: 1.45;
}

.dialog-delete-summary {
    display: grid;
    gap: 4px;
    font-size: 13px;
    line-height: 1.5;
}

.dialog-delete-summary p {
    margin: 0;
    color: var(--text);
}

.dialog-delete-summary-detail {
    color: var(--muted);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    max-width: 420px;
    padding: 10px 44px 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--error-text);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 8px;
    right: 12px;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--line);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: calc(20vh + 3.25rem) 0 auto 0;
    text-align: center;
    font-weight: 500;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
}