body.tc-app-body,
body.tc-app-body input,
body.tc-app-body select,
body.tc-app-body textarea,
body.tc-app-body button,
body.tc-app-body .tc-button,
body.tc-app-body .btn,
body.tc-app-body .dropdown-menu,
body.tc-app-body .dropdown-item,
body.tc-app-body .tc-combo-input,
body.tc-app-body .tc-combo-option {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
    --tc-page-bg: #f8fafc;
    --tc-page-header-bg: #ffffff;
    --tc-soft-surface: #f8fafc;
    --tc-sidebar-bg: linear-gradient(180deg, #0a1420 0%, #14283d 100%);
    --tc-sidebar-border: rgba(255, 255, 255, 0.08);
    --tc-sidebar-text: #ffffff;
    --tc-sidebar-muted: rgba(255, 255, 255, 0.5);
    --tc-sidebar-link: rgba(255, 255, 255, 0.72);
    --tc-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --tc-sidebar-active-bg: rgba(26, 127, 143, 0.22);
    --tc-sidebar-active-indicator: #2dd4bf;
    --tc-component-control-bg: #ffffff;
    --tc-component-control-border: #cbd5e1;
    --tc-component-control-focus: rgba(26, 127, 143, 0.14);
    --tc-component-control-height: 36px;
    --tc-component-control-height-compact: 32px;
    --tc-component-control-radius: 6px;
    --tc-component-control-text: #0f172a;
    --tc-component-grid-header-bg: #f8fafc;
    --tc-component-grid-border: #eef2f7;
    --tc-component-grid-row-bg: #ffffff;
    --tc-component-grid-row-alt-bg: #fcfdff;
    --tc-component-grid-row-hover-bg: #f8fafc;
    --tc-component-grid-text: #334155;
    --tc-component-grid-header-text: #475569;
    --tc-component-drawer-bg: var(--tc-surface);
    --tc-component-drawer-context-bg: #f8fafc;
}

/* =========================================================
   TimeCount Dark Theme Tokens
   Disabled by default. Activated only when body has
   tc-theme-dark.
   ========================================================= */

body.tc-theme-dark {
    --tc-bg: #0f172a;
    --tc-surface: #172033;
    --tc-border: #334155;
    --tc-text: #e5edf6;
    --tc-muted: #a9b6c7;
    --tc-primary: #38bdf8;
    --tc-primary-dark: #7dd3fc;
    --tc-danger-bg: #4c1d23;
    --tc-danger-text: #fda4af;
    --tc-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    --tc-page-bg: #0b1220;
    --tc-page-header-bg: #172033;
    --tc-soft-surface: #111827;
    --tc-sidebar-bg: linear-gradient(180deg, #020617 0%, #0f172a 100%);
    --tc-sidebar-border: rgba(148, 163, 184, 0.2);
    --tc-sidebar-text: #f8fafc;
    --tc-sidebar-muted: rgba(203, 213, 225, 0.68);
    --tc-sidebar-link: rgba(226, 232, 240, 0.78);
    --tc-sidebar-hover-bg: rgba(56, 189, 248, 0.12);
    --tc-sidebar-active-bg: rgba(56, 189, 248, 0.2);
    --tc-sidebar-active-indicator: #67e8f9;
    --tc-component-control-bg: #111827;
    --tc-component-control-border: #475569;
    --tc-component-control-focus: rgba(56, 189, 248, 0.22);
    --tc-component-control-text: #e5edf6;
    --tc-component-grid-header-bg: #1e293b;
    --tc-component-grid-border: #334155;
    --tc-component-grid-row-bg: #172033;
    --tc-component-grid-row-alt-bg: #111c2e;
    --tc-component-grid-row-hover-bg: #203047;
    --tc-component-grid-text: #dbe6f3;
    --tc-component-grid-header-text: #cbd5e1;
    --tc-component-drawer-bg: #111827;
    --tc-component-drawer-context-bg: #172033;
}

body.tc-theme-dark .tc-content,
body.tc-theme-dark .tc-app-main {
    background: var(--tc-page-bg);
}

body.tc-theme-dark .tc-page-header,
body.tc-theme-dark .tc-screen-header,
body.tc-theme-dark .tc-filter-card,
body.tc-theme-dark .tc-grid-card,
body.tc-theme-dark .tc-grid-shell,
body.tc-theme-dark .tc-card {
    background: var(--tc-page-header-bg);
    border-color: var(--tc-border);
    box-shadow: var(--tc-shadow);
    color: var(--tc-text);
}

body.tc-theme-dark .tc-page-header .tc-kicker,
body.tc-theme-dark .tc-screen-header .tc-kicker,
body.tc-theme-dark .tc-dashboard-section-header h2,
body.tc-theme-dark .tc-page-title,
body.tc-theme-dark .tc-page-title-sm,
body.tc-theme-dark .tc-drawer-title,
body.tc-theme-dark .tc-fieldset legend,
body.tc-theme-dark .tc-form-section h2 {
    color: var(--tc-primary-dark);
}

body.tc-theme-dark .tc-page-header h1,
body.tc-theme-dark .tc-screen-header h1,
body.tc-theme-dark .tc-form-label,
body.tc-theme-dark .tc-field-readonly,
body.tc-theme-dark .tc-grid-summary-value {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-muted,
body.tc-theme-dark .tc-page-header .tc-muted,
body.tc-theme-dark .tc-screen-header .tc-muted,
body.tc-theme-dark .tc-label-sm,
body.tc-theme-dark .tc-grid-empty,
body.tc-theme-dark .tc-grid-footer,
body.tc-theme-dark .tc-grid-footer .tc-page-size label,
body.tc-theme-dark .tc-filter-card .tc-grid-toolbar .tc-muted,
body.tc-theme-dark .tc-grid-summary-label {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-dashboard-card-note,
body.tc-theme-dark .tc-filter-row-advanced,
body.tc-theme-dark .tc-column-chooser,
body.tc-theme-dark .tc-grid-summary,
body.tc-theme-dark .tc-drawer-context,
body.tc-theme-dark .tc-location-current-summary,
body.tc-theme-dark .tc-department-context,
body.tc-theme-dark .tc-assignment-note,
body.tc-theme-dark .tc-assignment-toggle {
    background: var(--tc-soft-surface);
    border-color: var(--tc-border);
    color: var(--tc-text);
}

/* Dashboard dark-mode readability fixes (scoped, no global inversion) */
body.tc-theme-dark .tc-dash-compact-title h1 {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-compact-subtitle {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-dash-stats-bar {
    background: var(--tc-soft-surface);
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-dash-stat-label {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-dash-stat-value {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-stat-muted {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-dash-stat-divider {
    background: var(--tc-border);
}

body.tc-theme-dark .tc-dash-scope-toggle {
    background: var(--tc-component-control-bg);
}

body.tc-theme-dark .tc-dash-scope-label {
    color: var(--tc-muted);
}

body.tc-theme-dark #tcDashTeamScope:checked ~ .tc-dash-stats-bar .tc-dash-scope-label[for="tcDashTeamScope"],
body.tc-theme-dark #tcDashSelfScope:checked ~ .tc-dash-stats-bar .tc-dash-scope-label[for="tcDashSelfScope"] {
    background: var(--tc-component-control-bg);
    box-shadow: none;
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-action-shell {
    background: var(--tc-soft-surface);
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-dash-action-head h2 {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-updated {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-dash-attention-badge {
    background: rgba(239, 68, 68, 0.18);
    color: var(--tc-danger-text);
}

body.tc-theme-dark .tc-dash-action-compact {
    background: var(--tc-soft-surface);
    border-color: var(--tc-border);
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-action-compact.is-active,
body.tc-theme-dark a.tc-dash-action-compact.is-active,
body.tc-theme-dark .tc-dash-action-compact[aria-disabled="false"] {
    background: linear-gradient(135deg, var(--tc-soft-surface) 0%, rgba(239, 68, 68, 0.12) 100%);
    border-color: rgba(239, 68, 68, 0.35);
}

body.tc-theme-dark .tc-dash-action-compact-count {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-action-compact-label {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-dash-count-muted {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-dash-action-progress {
    background: rgba(239, 68, 68, 0.18);
}

body.tc-theme-dark .tc-dash-action-progress-fill {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.95) 0%, rgba(248, 113, 113, 0.95) 100%);
}

body.tc-theme-dark .tc-dash-remarks-breakdown {
    background: var(--tc-soft-surface);
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-dash-breakdown-title {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-breakdown-chip {
    background: var(--tc-component-control-bg);
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-dash-breakdown-chip span:first-child {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-dash-breakdown-chip label,
body.tc-theme-dark .tc-dash-breakdown-chip > span + span {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-breakdown-chip-active {
    border-color: rgba(239, 68, 68, 0.55);
}

body.tc-theme-dark .tc-dash-breakdown-chip-active span:first-child {
    color: var(--tc-danger-text);
}

body.tc-theme-dark .tc-dash-breakdown-chip-active > span + span {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-process-all {
    background: var(--tc-component-control-bg);
    color: var(--tc-text);
}

body.tc-theme-dark .tc-dash-process-all:hover {
    background: var(--tc-component-grid-row-hover-bg);
}

body.tc-theme-dark .tc-snapshot-card .tc-snapshot-main {
    border-right: 1px solid var(--tc-border);
}

body.tc-theme-dark .tc-snapshot-card .tc-device-panel {
    border-top-color: var(--tc-border);
}

body.tc-theme-dark .tc-snapshot-card .tc-snapshot-panel {
    background: var(--tc-soft-surface);
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-snapshot-card h3 {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-snapshot-card .tc-snapshot-legend span {
    background: var(--tc-component-control-bg);
    border-color: var(--tc-border);
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-snapshot-card .tc-donut {
    border-color: rgba(148, 163, 184, 0.22);
}

body.tc-theme-dark .tc-snapshot-card .tc-donut > div {
    background: var(--tc-soft-surface);
}

body.tc-theme-dark .tc-snapshot-card .tc-donut label,
body.tc-theme-dark .tc-snapshot-card .tc-donut span:first-child {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-snapshot-card .tc-donut span {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-snapshot-card .tc-device-row > span {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-snapshot-card .tc-device-row > span:last-child {
    color: var(--tc-text);
    font-weight: 700;
}

body.tc-theme-dark .tc-snapshot-card .tc-device-track {
    background: var(--tc-component-grid-header-bg);
}

body.tc-theme-dark .tc-snapshot-card .tc-status-grid div,
body.tc-theme-dark .tc-snapshot-card .tc-infra-grid div,
body.tc-theme-dark .tc-snapshot-card .tc-designation-list li {
    background: var(--tc-component-control-bg);
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-snapshot-card .tc-status-grid div > span:first-child,
body.tc-theme-dark .tc-snapshot-card .tc-infra-grid div > span:first-child,
body.tc-theme-dark .tc-snapshot-card .tc-designation-list li > span:first-child {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-snapshot-card .tc-status-grid div > span:last-child,
body.tc-theme-dark .tc-snapshot-card .tc-infra-grid div > span:last-child,
body.tc-theme-dark .tc-snapshot-card .tc-designation-list li > span:last-child {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-snapshot-card .tc-infra-grid div:nth-child(1) {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(125, 211, 252, 0.26);
}

body.tc-theme-dark .tc-snapshot-card .tc-infra-grid div:nth-child(2) {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(110, 231, 183, 0.26);
}

body.tc-theme-dark .tc-snapshot-card .tc-infra-grid div:nth-child(3) {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.26);
}

body.tc-theme-dark .tc-filter-card .tc-grid-toolbar,
body.tc-theme-dark .tc-drawer,
body.tc-theme-dark .tc-location-drawer,
body.tc-theme-dark .tc-location-current-summary .tc-field-readonly {
    background: var(--tc-component-drawer-bg);
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-input,
body.tc-theme-dark .tc-select,
body.tc-theme-dark .tc-input-sm,
body.tc-theme-dark .tc-combo-input,
body.tc-theme-dark .tc-filter-card input[type="text"],
body.tc-theme-dark .tc-filter-card input[type="date"],
body.tc-theme-dark .tc-filter-card input[type="time"],
body.tc-theme-dark .tc-filter-card input[type="number"],
body.tc-theme-dark .tc-filter-card select,
body.tc-theme-dark .tc-grid-toolbar select,
body.tc-theme-dark .tc-table-sm.tc-table input,
body.tc-theme-dark .tc-table-sm.tc-table select,
body.tc-theme-dark .tc-table-sm.tc-table textarea {
    background: var(--tc-component-control-bg);
    border-color: var(--tc-component-control-border);
    color: var(--tc-component-control-text);
}

body.tc-theme-dark .tc-combo-list {
    background: var(--tc-component-control-bg);
    border-color: var(--tc-component-control-border);
    box-shadow: var(--tc-shadow);
    color: var(--tc-component-control-text);
}

body.tc-theme-dark .tc-combo-option:hover,
body.tc-theme-dark .tc-combo-option.is-active {
    background: var(--tc-component-grid-row-hover-bg);
    color: var(--tc-primary-dark);
}

body.tc-theme-dark .tc-input:focus,
body.tc-theme-dark .tc-select:focus,
body.tc-theme-dark .tc-input-sm:focus,
body.tc-theme-dark .tc-filter-card input[type="text"]:focus,
body.tc-theme-dark .tc-filter-card input[type="date"]:focus,
body.tc-theme-dark .tc-filter-card input[type="time"]:focus,
body.tc-theme-dark .tc-filter-card input[type="number"]:focus,
body.tc-theme-dark .tc-filter-card select:focus,
body.tc-theme-dark .tc-grid-toolbar select:focus {
    border-color: var(--tc-primary);
    box-shadow: 0 0 0 3px var(--tc-component-control-focus);
}

body.tc-theme-dark .tc-grid-wrap table th,
body.tc-theme-dark .tc-grid-card table th,
body.tc-theme-dark .tc-grid-shell table th,
body.tc-theme-dark table.tc-data-grid th,
body.tc-theme-dark table.tc-grid th,
body.tc-theme-dark .tc-table-sm.tc-table th,
body.tc-theme-dark .tc-data-grid th {
    background: var(--tc-component-grid-header-bg);
    border-bottom-color: var(--tc-component-grid-border);
    color: var(--tc-component-grid-header-text);
}

body.tc-theme-dark .tc-grid-wrap table td,
body.tc-theme-dark .tc-grid-card table td,
body.tc-theme-dark .tc-grid-shell table td,
body.tc-theme-dark table.tc-data-grid td,
body.tc-theme-dark table.tc-grid td,
body.tc-theme-dark .tc-table-sm.tc-table td,
body.tc-theme-dark .tc-data-grid td {
    background: var(--tc-component-grid-row-bg);
    border-bottom-color: var(--tc-component-grid-border);
    color: var(--tc-component-grid-text);
}

body.tc-theme-dark .tc-grid-wrap table tr:nth-child(even) td,
body.tc-theme-dark .tc-grid-card table tr:nth-child(even) td,
body.tc-theme-dark .tc-grid-shell table tr:nth-child(even) td,
body.tc-theme-dark table.tc-data-grid tr:nth-child(even) td,
body.tc-theme-dark table.tc-grid tr:nth-child(even) td,
body.tc-theme-dark .tc-table-sm.tc-table tr:nth-child(even) td {
    background: var(--tc-component-grid-row-alt-bg);
}

body.tc-theme-dark .tc-grid-wrap table tr:hover td,
body.tc-theme-dark .tc-grid-card table tr:hover td,
body.tc-theme-dark .tc-grid-shell table tr:hover td,
body.tc-theme-dark table.tc-data-grid tr:hover td,
body.tc-theme-dark table.tc-grid tr:hover td,
body.tc-theme-dark .tc-table-sm.tc-table tr:hover td {
    background: var(--tc-component-grid-row-hover-bg);
}

body.tc-theme-dark .tc-grid-footer,
body.tc-theme-dark .tc-pager,
body.tc-theme-dark .tc-table-pager,
body.tc-theme-dark .tc-recalc-queue-pager,
body.tc-theme-dark .tc-drawer-header,
body.tc-theme-dark .tc-drawer-section,
body.tc-theme-dark .tc-drawer-footer {
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-table-pager,
body.tc-theme-dark .tc-pager,
body.tc-theme-dark .tc-pager a,
body.tc-theme-dark .tc-table-pager a,
body.tc-theme-dark .tc-pager-button,
body.tc-theme-dark .tc-grid-footer .tc-page-size select {
    background: var(--tc-component-control-bg);
    border-color: var(--tc-component-control-border);
    color: var(--tc-component-control-text);
}

body.tc-theme-dark .tc-pager a:hover,
body.tc-theme-dark .tc-pager a:focus,
body.tc-theme-dark .tc-table-pager a:hover,
body.tc-theme-dark .tc-table-pager a:focus,
body.tc-theme-dark .tc-pager-button:hover,
body.tc-theme-dark .tc-pager-button:focus,
body.tc-theme-dark .tc-button-secondary:hover,
body.tc-theme-dark .tc-button-secondary:focus,
body.tc-theme-dark .tc-context-action:hover,
body.tc-theme-dark .tc-context-action:focus,
body.tc-theme-dark .tc-drawer-close:hover,
body.tc-theme-dark .tc-drawer-close:focus {
    background: var(--tc-component-grid-row-hover-bg);
    border-color: var(--tc-primary);
    color: var(--tc-primary-dark);
}

body.tc-theme-dark .tc-button-secondary,
body.tc-theme-dark .tc-context-action,
body.tc-theme-dark .tc-drawer-close,
body.tc-theme-dark .tc-action-icon-button {
    background: var(--tc-component-control-bg);
    border-color: var(--tc-component-control-border);
    color: var(--tc-primary-dark);
}

body.tc-theme-dark .tc-button-danger {
    background: var(--tc-danger-bg);
    border-color: var(--tc-danger-text);
    color: var(--tc-danger-text);
}

body.tc-theme-dark .tc-selected-row > td {
    background: var(--tc-component-grid-row-hover-bg);
}

body.tc-theme-dark .tc-status-pill,
body.tc-theme-dark .tc-verification-pill,
body.tc-theme-dark .tc-exception-pill {
    background: rgba(56, 189, 248, 0.14);
    border-color: rgba(125, 211, 252, 0.34);
    color: var(--tc-primary-dark);
}

body.tc-theme-dark .tc-row-error,
body.tc-theme-dark .tc-attendance-alert-value {
    color: var(--tc-danger-text);
}

body.tc-theme-dark .tc-attendance-status-weekoff {
    color: #86efac;
}

body.tc-theme-dark .tc-sidebar {
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.3);
}

body.tc-app-body {
    height: 100vh;
    overflow: hidden;
}

body.tc-app-body > form {
    height: 100%;
}

.tc-shell {
    height: 100vh;
    overflow: hidden;
}

.tc-brand,
.tc-login-header {
    align-items: center;
    color: var(--tc-text);
    display: flex;
    gap: 12px;
}

.tc-brand:hover,
.tc-brand:focus {
    color: var(--tc-text);
    text-decoration: none;
}

.tc-brand small,
.tc-login-header p {
    color: var(--tc-muted);
    display: block;
    font-size: 0.8rem;
    margin: 0;
}

.tc-brand-mark {
    align-items: center;
    background: var(--tc-primary);
    border-radius: 6px;
    color: #ffffff;
    display: inline-flex;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.tc-user {
    color: #ffffff;
}

.tc-logout {
    font-weight: 600;
}

.tc-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.tc-sidebar {
    background: var(--tc-sidebar-bg);
    border-right: 0;
    box-shadow: 10px 0 28px rgba(10, 20, 32, 0.16);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding: 0;
    transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 260px;
    z-index: 100;
}

.tc-sidebar-header {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    min-height: 72px;
    padding: 16px 20px;
}

.tc-sidebar-brand {
    align-items: center;
    color: #ffffff;
    display: flex;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.tc-sidebar-brand:hover,
.tc-sidebar-brand:focus {
    color: #ffffff;
    text-decoration: none;
}

.tc-sidebar-logo {
    align-items: center;
    background: #1a7f8f;
    border-radius: 10px;
    color: #ffffff;
    display: flex;
    flex: 0 0 40px;
    font-size: 0.9rem;
    font-weight: 800;
    height: 40px;
    justify-content: center;
    letter-spacing: 0.02em;
    width: 40px;
}

.tc-sidebar-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    max-inline-size: 220px;
    transform: translateX(0);
    visibility: visible;
    transition:
        opacity 180ms ease,
        max-inline-size 240ms ease,
        transform 240ms ease,
        visibility 0s linear;
}

.tc-sidebar-title strong {
    color: #ffffff;
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.tc-sidebar-title small {
    color: rgba(255, 255, 255, 0.5);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-top: 4px;
    text-transform: uppercase;
}

.tc-sidebar-toggle {
    align-items: center;
    background: rgba(26, 127, 143, 0.22);
    border: 1px solid rgba(45, 212, 191, 0.38);
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    height: 34px;
    justify-content: center;
    line-height: 1;
    margin-left: auto;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: 34px;
}

.tc-sidebar-toggle:hover,
.tc-sidebar-toggle:focus {
    background: rgba(26, 127, 143, 0.34);
    border-color: rgba(45, 212, 191, 0.58);
    color: #ffffff;
    outline: none;
}

html[data-sidebar-mode="auto"] .tc-sidebar-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
}

html[data-sidebar-mode="auto"] .tc-sidebar-toggle:hover,
html[data-sidebar-mode="auto"] .tc-sidebar-toggle:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.tc-sidebar-toggle:focus-visible {
    outline: 3px solid rgba(14, 116, 144, 0.18);
    outline-offset: 2px;
}

.tc-sidebar-toggle-icon {
    display: inline-flex;
    line-height: 0;
}

.tc-sidebar-toggle-icon svg {
    display: none;
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    width: 17px;
}

html[data-sidebar-mode="auto"] .tc-sidebar-toggle-icon-auto,
html:not([data-sidebar-mode]) .tc-sidebar-toggle-icon-pinned,
html[data-sidebar-mode="pinned"] .tc-sidebar-toggle-icon-pinned {
    display: block;
}

/* Pinned icon: fill the pin head circle for visual weight */
.tc-sidebar-toggle-icon-pinned circle {
    fill: currentColor;
}

.tc-nav {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px 12px;
    transition: opacity 0.15s ease;
}

.tc-nav-link {
    align-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    font-size: 0.875rem;
    font-weight: 400;
    gap: 12px;
    margin-bottom: 4px;
    min-height: 42px;
    padding: 11px 16px;
    position: relative;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.tc-nav-label {
    color: rgba(255, 255, 255, 0.44);
    display: flex;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 18px 16px 8px;
    text-transform: uppercase;
}

.tc-nav-link:hover,
.tc-nav-link:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    text-decoration: none;
}

.tc-nav-link.is-active {
    background: rgba(26, 127, 143, 0.22);
    color: #ffffff;
    font-weight: 500;
}

.tc-nav-link.is-active::before {
    background: #2dd4bf;
    border-radius: 0 3px 3px 0;
    bottom: 18%;
    content: "";
    left: 0;
    position: absolute;
    top: 18%;
    width: 3px;
}

/* Active parent (group containing active child) - stronger visual weight */
.tc-nav-group[open] > .tc-nav-toggle.tc-nav-section-label {
    background: rgba(26, 127, 143, 0.28);
    color: #ffffff;
    font-weight: 500;
}

.tc-nav-group[open] > .tc-nav-toggle.tc-nav-section-label::before {
    background: #2dd4bf;
    border-radius: 0 3px 3px 0;
    bottom: 15%;
    content: "";
    left: 0;
    position: absolute;
    top: 15%;
    width: 4px;
}

.tc-nav-group[open] > .tc-nav-toggle.tc-nav-section-label .tc-nav-text {
    color: #ffffff;
}

/* Child active state - subordinate to parent */
.tc-nav-group-items .tc-nav-link.is-active {
    background: rgba(26, 127, 143, 0.12);
    font-weight: 400;
}

.tc-nav-group-items .tc-nav-link.is-active::before {
    background: rgba(45, 212, 191, 0.55);
    border-radius: 0 2px 2px 0;
    bottom: 22%;
    top: 22%;
    width: 2px;
}

.tc-nav-link.is-disabled {
    color: rgba(255, 255, 255, 0.34);
}

.tc-nav-icon {
    align-items: center;
    display: inline-flex;
    flex: 0 0 18px;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.tc-nav-icon svg {
    display: block;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 18px;
}

.tc-nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    max-inline-size: 220px;
    transform: translateX(0);
    visibility: visible;
    transition:
        opacity 180ms ease,
        max-inline-size 240ms ease,
        transform 240ms ease,
        visibility 0s linear;
}

.tc-sidebar-session {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    padding: 16px 20px;
}

.tc-user-avatar {
    align-items: center;
    background: linear-gradient(135deg, #1a7f8f 0%, #2dd4bf 100%);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    flex: 0 0 36px;
    font-size: 0.875rem;
    font-weight: 700;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.tc-user-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    max-inline-size: 220px;
    transform: translateX(0);
    visibility: visible;
    transition:
        opacity 180ms ease,
        max-inline-size 240ms ease,
        transform 240ms ease,
        visibility 0s linear;
}

.tc-sidebar-user-name {
    color: #ffffff;
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-sidebar-user-role {
    color: rgba(255, 255, 255, 0.5);
    display: block;
    font-size: 0.6875rem;
    margin-top: 2px;
}

.tc-sidebar-logout {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    padding: 8px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    width: 34px;
}

.tc-sidebar-logout:hover,
.tc-sidebar-logout:focus {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    text-decoration: none;
}

.tc-sidebar-logout svg {
    display: block;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 18px;
}

.tc-sidebar-theme-toggle {
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    gap: 0;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.tc-sidebar-theme-toggle:hover,
.tc-sidebar-theme-toggle:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    outline: none;
}

.tc-sidebar-theme-toggle:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.65);
    outline-offset: 2px;
}

.tc-sidebar-theme-toggle[aria-pressed="true"] {
    background: rgba(26, 127, 143, 0.22);
    border-color: rgba(45, 212, 191, 0.45);
    color: #ffffff;
}

.tc-sidebar-theme-toggle-icon {
    display: block;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 18px;
}

.tc-sidebar-theme-toggle-icon-moon {
    display: block;
}

.tc-sidebar-theme-toggle-icon-sun {
    display: none;
}

/* aria-pressed is toggled by timecount-app.js */
.tc-sidebar-theme-toggle[aria-pressed="true"] .tc-sidebar-theme-toggle-icon-sun {
    display: block;
}

.tc-sidebar-theme-toggle[aria-pressed="true"] .tc-sidebar-theme-toggle-icon-moon {
    display: none;
}

.tc-sidebar-theme-toggle-text {
    display: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: none;
}

.tc-content {
    background: #f8fafc;
    height: 100vh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
}

/* ── Mobile shell scaffolding (hidden on desktop >1024px) ─────────────── */
/* R5A: the off-canvas mobile shell elements exist in the markup for every
   page but only render at <=1024px (see the shared mobile shell block). */
.tc-mobile-bar {
    display: none;
}

.tc-drawer-backdrop {
    display: none;
}

.tc-sidebar-drawer-close {
    display: none;
}

.tc-app-main {
    background: #f8fafc;
}

.tc-screen,
.tc-page,
.tc-card {
    display: grid;
    font-size: var(--tc-font-size-body);
    font-weight: var(--tc-font-weight-body);
    gap: 18px;
}

.tc-page-header,
.tc-screen-header {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    margin-bottom: 18px;
    max-width: none;
    padding: 18px 22px;
}

.tc-page-header-sm {
    padding: 16px 20px;
}

.tc-page-header .tc-kicker,
.tc-screen-header .tc-kicker {
    color: #0f766e;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.tc-page-header h1,
.tc-screen-header h1,
.tc-page-title {
    color: #0f172a;
    font-size: var(--tc-font-size-page-title);
    font-weight: var(--tc-font-weight-page-title);
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0;
}

.tc-page-header .tc-muted,
.tc-screen-header .tc-muted {
    color: #64748b;
    font-size: 0.8125rem;
    margin: 6px 0 0;
}

.tc-grid:not(table) {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tc-card {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    box-shadow: var(--tc-shadow);
    min-height: 150px;
    min-width: 0;
    padding: 20px;
}

.tc-card h2 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.tc-card p {
    color: var(--tc-muted);
    margin-bottom: 0;
}

.tc-dashboard-section {
    margin-top: 18px;
}

.tc-dashboard-section-header {
    margin-bottom: 12px;
    max-width: 760px;
}

.tc-dashboard-section-header h2 {
    color: #475569;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 0.35rem;
    text-transform: none;
}

.tc-remarks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-dashboard-count-card {
    display: grid;
    gap: 18px;
    min-height: 210px;
}

.tc-dashboard-count {
    color: var(--tc-primary-dark);
    display: block;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.tc-dashboard-card-note {
    align-self: end;
    background: #f8fafc;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    color: var(--tc-muted);
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    justify-self: start;
    min-height: 34px;
    padding: 6px 10px;
}

.tc-form-panel {
    display: grid;
    gap: 18px;
}

.tc-form-actions {
    display: flex;
    justify-content: flex-end;
}

.tc-employee-add-panel {
    position: relative;
}

.tc-employee-add-panel > .tc-profile-actions {
    gap: 10px;
    position: absolute;
    right: 20px;
    top: 20px;
}

.tc-employee-add-panel .tc-form-grid {
    padding-top: 2px;
}

.tc-button-svg {
    fill: none;
    flex-shrink: 0;
    height: 16px;
    margin-right: 6px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
}

.tc-button-small .tc-button-svg {
    height: 14px;
    margin-right: 4px;
    width: 14px;
}

.tc-filter-actions .tc-button > .tc-button-svg,
.tc-page-header-actions .tc-button > .tc-button-svg,
.tc-actions-cell .tc-button > .tc-button-svg {
    margin-right: 0;
}

.tc-page-header-actions .tc-button,
.tc-actions-cell .tc-button {
    gap: 6px;
}

.tc-form-grid {
    display: grid;
    gap: 18px;
}

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

.tc-fieldset {
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    margin: 0;
    padding: 16px;
}

.tc-fieldset legend {
    color: var(--tc-primary-dark);
    font-weight: 700;
    padding: 0 6px;
}

.tc-form-section {
    border-top: 1px solid var(--tc-border);
    display: grid;
    gap: 14px;
    padding-top: 16px;
}

.tc-form-section:first-child {
    border-top: 0;
    padding-top: 0;
}

.tc-form-section h2 {
    color: var(--tc-primary-dark);
    font-size: 1rem;
    line-height: 1.25;
    margin: 0;
}

.tc-field-label-action {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.tc-context-action {
    align-items: center;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    color: var(--tc-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 4px;
    line-height: 1;
    min-height: 28px;
    padding: 0 8px;
    text-decoration: none;
}

.tc-context-action:hover,
.tc-context-action:focus {
    background: #eef6f8;
    border-color: var(--tc-primary);
    color: var(--tc-primary-dark);
    text-decoration: none;
}

.tc-context-action-icon {
    fill: none;
    height: 14px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 14px;
}

.tc-location-drawer-shell {
    inset: 0;
    position: fixed;
    z-index: 50;
}

.tc-location-drawer-backdrop {
    background: rgba(15, 23, 42, 0.34);
    inset: 0;
    position: fixed;
}

.tc-location-drawer {
    background: var(--tc-surface);
    border-left: 1px solid var(--tc-border);
    box-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: min(420px, calc(100vw - 32px));
    overflow: hidden;
    padding: 22px;
    position: fixed;
    right: 0;
    top: 0;
    width: 420px;
}

.tc-location-drawer-header {
    align-items: center;
    border-bottom: 1px solid var(--tc-border);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    justify-content: space-between;
    padding-bottom: 14px;
}

.tc-location-drawer-header h2 {
    color: var(--tc-primary-dark);
    font-size: 1.1rem;
    line-height: 1.25;
    margin: 0;
}

.tc-drawer-close {
    align-items: center;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    color: var(--tc-text);
    display: inline-flex;
    flex: 0 0 auto;
    height: 36px;
    justify-content: center;
    text-decoration: none;
    width: 36px;
}

.tc-drawer-close:hover,
.tc-drawer-close:focus {
    background: #eef6f8;
    border-color: var(--tc-primary);
    color: var(--tc-primary-dark);
    text-decoration: none;
}

.tc-location-drawer-body {
    display: grid;
    flex: 1 1 auto;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tc-location-current-summary {
    background: #f8fafc;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    padding: 12px;
}

.tc-location-current-summary .tc-field-readonly {
    background: var(--tc-surface);
    min-height: 36px;
}

.tc-location-drawer-actions {
    border-top: 1px solid var(--tc-border);
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 16px;
}

.tc-list-panel {
    min-height: 0;
}

.tc-filter-bar {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
}

.tc-filter-row {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.tc-filter-row-primary {
    align-items: end;
    grid-template-columns: minmax(160px, 0.85fr) minmax(220px, 1.2fr) minmax(160px, 0.85fr) auto;
}

.tc-filter-row .tc-field {
    margin-bottom: 0;
}

.tc-field {
    min-width: 0;
}

.tc-field-actions {
    align-items: end;
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.tc-filter-row-advanced {
    background: #f8fafc;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    padding: 12px;
}

.tc-filter-row-advanced.is-hidden {
    display: none;
}

.tc-column-chooser {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
}

.tc-column-chooser.is-hidden {
    display: none;
}

.tc-column-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-column-list label {
    font-weight: 600;
}

.tc-column-list input {
    margin-right: 6px;
}

.tc-column-list input:disabled + label {
    color: var(--tc-muted);
}

.tc-filter-toggle {
    font-weight: 700;
    justify-self: start;
}

.tc-list-actions {
    align-items: center;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 0;
}

.tc-list-actions .tc-button {
    border-radius: 9px;
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    line-height: 1;
    min-height: 36px;
    padding: 0 13px;
}

.tc-icon-button {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}

.tc-list-actions .tc-icon-button {
    min-width: 33px;
    padding: 0 8px;
}

.tc-export-text {
    display: inline-block;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.tc-export-icon {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 17px;
}

.tc-list-actions .tc-icon-button.tc-button-secondary {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    color: #334155;
}

.tc-list-actions .tc-icon-button.tc-button-secondary:hover,
.tc-list-actions .tc-icon-button.tc-button-secondary:focus {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.tc-result-count {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.tc-sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.tc-grid-summary,
.tc-grid-toolbar {
    align-items: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 12px 16px;
}

.tc-grid-toolbar-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.tc-column-chooser-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    color: var(--tc-text);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    text-decoration: none;
    width: 36px;
}

.tc-column-chooser-button:hover,
.tc-column-chooser-button:focus {
    border-color: var(--tc-primary);
    color: var(--tc-primary-dark);
}

.tc-columns-icon {
    fill: none;
    height: 17px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 17px;
}

.tc-page-size {
    align-items: center;
    display: flex;
    gap: 8px;
}

.tc-page-size label {
    color: var(--tc-muted);
    font-weight: 600;
}

.tc-table-wrap {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    width: 100%;
}

/* ── Base table — minimum width removed for shared layout ── */
/* Previously had min-width:980px which forced unnecessary
   horizontal scroll on small master/list tables. Tables inside
   .tc-grid-wrap now use content-based sizing; report tables
   opt in with .tc-data-grid--wide if needed. */
.tc-table:not(.tc-recalc-queue-grid) {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tc-font-size-body);
    font-weight: var(--tc-font-weight-body);
    width: 100%;
}

.tc-table th,
.tc-table td {
    border-bottom: 1px solid #eef2f7;
    padding: 9px 10px;
    text-align: left;
    vertical-align: middle;
}

.tc-table th {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
    color: #475569;
    font-size: 0.875rem;
    font-weight: var(--tc-font-weight-grid-header);
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
    white-space: nowrap;
}

.tc-table th a {
    color: inherit;
    text-decoration: none;
}

.tc-table th a:hover,
.tc-table th a:focus {
    color: var(--tc-primary-dark);
    text-decoration: underline;
}

.tc-employees-grid th.tc-sortable-header a {
    align-items: center;
    display: inline-flex;
    white-space: nowrap;
}

.tc-employees-grid th.tc-sortable-header a::after {
    content: "\2195";
    font-size: 11px;
    line-height: 1;
    margin-left: 6px;
    opacity: 0.35;
}

.tc-employees-grid th.tc-sort-active.tc-sort-asc a::after {
    content: "\25B2";
    opacity: 0.95;
}

.tc-employees-grid th.tc-sort-active.tc-sort-desc a::after {
    content: "\25BC";
    opacity: 0.95;
}

.tc-employees-grid {
    table-layout: fixed;
}

.tc-employees-grid th:first-child,
.tc-employees-grid td:first-child {
    max-width: 56px;
    min-width: 44px;
    width: 48px;
}

.tc-table td {
    color: #334155;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.tc-table tr:hover td {
    background: #f8fafc;
}

.tc-status-icon {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    height: 20px;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    width: 20px;
}

.tc-status-active {
    background: #dcfce7;
    color: #15803d;
}

.tc-status-active::before {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    height: 9px;
    margin-top: -2px;
    transform: rotate(45deg);
    width: 5px;
}

.tc-status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.tc-status-inactive::before {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 2px;
    width: 10px;
}

body.tc-app-body.tc-login-page {
    background: #ffffff;
    margin: 0 !important;
    min-height: 100vh !important;
    overflow-x: hidden;
    padding: 0 !important;
    width: 100%;
}

body.tc-app-body.tc-login-page form#LoginForm.tc-login-shell {
    display: flex !important;
    flex-direction: row !important;
    margin: 0 !important;
    min-height: 100vh !important;
    padding: 0 !important;
    width: 100vw !important;
}

body.tc-app-body.tc-login-page .aspNetHidden {
    display: none !important;
}

body.tc-app-body.tc-login-page .tc-login-brand-panel {
    align-items: center !important;
    background: linear-gradient(135deg, #0a1420 0%, #0f1e2e 50%, #14283d 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    flex: 1 1 50% !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 100vh;
    overflow: hidden;
    padding: 60px !important;
    position: relative;
}

.tc-login-brand-panel::before,
.tc-login-brand-panel::after {
    border: 1px solid rgba(14, 116, 144, 0.12);
    border-radius: 50%;
    content: "";
    position: absolute;
}

.tc-login-brand-panel::before {
    height: 420px;
    right: -120px;
    top: -120px;
    width: 420px;
}

.tc-login-brand-panel::after {
    bottom: -110px;
    height: 320px;
    left: -100px;
    width: 320px;
}

body.tc-app-body.tc-login-page .tc-login-brand-content {
    color: #ffffff !important;
    max-width: 420px;
    position: relative;
    text-align: center;
    z-index: 1;
}

body.tc-app-body.tc-login-page .tc-login-logo-wrap {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

body.tc-app-body.tc-login-page .tc-login-logo,
body.tc-app-body.tc-login-page .tc-login-brand-panel img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block;
    height: auto !important;
    max-width: 220px !important;
}

body.tc-app-body.tc-login-page .tc-login-feature-list {
    display: grid;
    gap: 12px;
    margin-top: 30px;
    text-align: left;
}

body.tc-app-body.tc-login-page .tc-login-feature-list div {
    align-items: center;
    color: rgba(255, 255, 255, 0.86) !important;
    display: flex;
    font-size: 0.94rem;
    gap: 12px;
}

body.tc-app-body.tc-login-page .tc-login-brand-panel,
body.tc-app-body.tc-login-page .tc-login-brand-panel p,
body.tc-app-body.tc-login-page .tc-login-brand-panel span,
body.tc-app-body.tc-login-page .tc-login-brand-panel h1,
body.tc-app-body.tc-login-page .tc-login-brand-panel h2,
body.tc-app-body.tc-login-page .tc-login-brand-panel li {
    color: #ffffff !important;
}

body.tc-app-body.tc-login-page .tc-login-feature-icon {
    align-items: center;
    background: rgba(30, 144, 200, 0.15) !important;
    border: 1px solid rgba(30, 144, 200, 0.3) !important;
    border-radius: 8px;
    color: #4db8d4 !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    width: 34px;
}

body.tc-app-body.tc-login-page .tc-login-card {
    align-items: center !important;
    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex: 1 1 50% !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 100vh;
    padding: 60px !important;
}

body.tc-app-body.tc-login-page .tc-login-demo-notice,
body.tc-app-body.tc-login-page .tc-login-title,
body.tc-app-body.tc-login-page .tc-alert,
body.tc-app-body.tc-login-page .tc-login-field,
body.tc-app-body.tc-login-page .tc-login-actions,
body.tc-app-body.tc-login-page .tc-login-footer {
    max-width: 380px;
    width: 100%;
}

body.tc-app-body.tc-login-page .tc-login-demo-notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 24px;
    padding: 14px 16px;
}

body.tc-app-body.tc-login-page .tc-login-demo-notice strong {
    color: #78350f;
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

body.tc-app-body.tc-login-page .tc-login-demo-notice p {
    margin: 0;
}

.tc-login-title {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-bottom: 34px;
}

.tc-login-small-mark {
    display: block;
    flex: 0 0 auto;
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.tc-login-title h2 {
    color: #1a2332;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 6px;
}

.tc-login-title p {
    color: #6b7b8c;
    font-size: 0.98rem;
    margin: 0;
}

.tc-login-field {
    gap: 8px;
    margin-bottom: 20px;
}

body.tc-app-body.tc-login-page .tc-login-field label {
    color: #334155;
    font-size: 0.88rem;
    font-weight: 600;
}

.tc-login-field input {
    background: #fafbfc;
    border: 2px solid #e8ecf0;
    border-radius: 8px;
    min-height: 48px;
    padding: 10px 14px;
}

body.tc-app-body.tc-login-page .tc-password-input-wrap {
    position: relative;
    width: 100%;
}

body.tc-app-body.tc-login-page .tc-password-input-wrap input {
    padding-right: 50px;
    width: 100%;
}

body.tc-app-body.tc-login-page .tc-password-toggle {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #536579;
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
}

body.tc-app-body.tc-login-page .tc-password-toggle:hover {
    background: #eef2f6;
    color: #14283d;
}

body.tc-app-body.tc-login-page .tc-password-toggle:focus {
    background: #eef2f6;
    color: #14283d;
    outline: 2px solid #14283d;
    outline-offset: 1px;
}

body.tc-app-body.tc-login-page .tc-password-toggle-icon {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 20px;
}

body.tc-app-body.tc-login-page .tc-password-toggle-icon[hidden] {
    display: none;
}

.tc-login-field input:focus {
    background: #ffffff;
    border-color: #14283d;
    box-shadow: 0 0 0 4px rgba(20, 40, 61, 0.08);
    outline: none;
}

.tc-login-actions {
    margin-top: 4px;
}

.tc-login-button {
    background: linear-gradient(135deg, #14283d 0%, #0a1420 100%);
    border-color: #14283d;
    border-radius: 8px;
    min-height: 48px;
    width: 100%;
}

.tc-login-button:hover,
.tc-login-button:focus {
    background: linear-gradient(135deg, #183554 0%, #0a1420 100%);
    border-color: #0a1420;
    box-shadow: 0 8px 24px rgba(20, 40, 61, 0.25);
}

.tc-login-footer {
    color: #9aa7b5;
    font-size: 0.82rem;
    margin: 34px 0 0;
    text-align: center;
}

.tc-field {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.tc-employee-add-panel .tc-field {
    align-content: start;
    margin-bottom: 0;
}

.tc-field label {
    color: var(--tc-text);
    font-weight: 600;
}

.tc-label-row {
    align-items: baseline;
    display: flex;
    gap: 4px;
}

.tc-label-row label {
    margin: 0;
}

.tc-employee-add-panel .tc-label-row,
.tc-employee-add-panel .tc-field > label {
    align-items: center;
    min-height: 20px;
}

.tc-required-star {
    color: var(--tc-danger-text);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
}

.tc-field-helper {
    color: var(--tc-muted);
    font-size: 0.78rem;
    line-height: 1.2;
}

.tc-field input,
.tc-field select,
.tc-page-size select {
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    color: var(--tc-text);
    font: inherit;
    min-height: 42px;
    padding: 8px 10px;
    width: 100%;
}

.tc-check input {
    min-height: 0;
    width: auto;
}

.tc-radio-list {
    min-height: 42px;
}

.tc-radio-list td {
    padding-right: 18px;
}

.tc-radio-list input {
    margin-right: 6px;
    min-height: 0;
    width: auto;
}

.tc-field input:focus,
.tc-field select:focus,
.tc-page-size select:focus {
    border-color: var(--tc-primary);
    outline: 2px solid #cdebf2;
}

.tc-field input.tc-invalid,
.tc-field select.tc-invalid {
    border-color: #fda4af;
    outline: 2px solid #ffe4e6;
}

.tc-shift-details {
    background: #f8fafc;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    margin-top: 4px;
    padding: 12px;
}

.tc-shift-details-header {
    align-items: center;
    display: flex;
    font-weight: 700;
    justify-content: space-between;
    margin-bottom: 10px;
}

.tc-shift-badge {
    background: #e7f2f5;
    border: 1px solid #cdebf2;
    border-radius: 999px;
    color: var(--tc-primary-dark);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
}

.tc-detail-grid {
    display: grid;
    gap: 10px 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.tc-detail-grid div {
    border-top: 1px solid #dbe4ee;
    min-width: 0;
    padding-top: 8px;
}

.tc-detail-grid dt {
    color: var(--tc-muted);
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.tc-detail-grid dd {
    color: var(--tc-text);
    font-weight: 700;
    margin: 0;
}

.tc-alert {
    background: var(--tc-danger-bg);
    border: 1px solid #fecdd3;
    border-radius: 6px;
    color: var(--tc-danger-text);
    margin-bottom: 16px;
    padding: 10px 12px;
}

.tc-alert-success {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #166534;
}

.tc-alert-success::before {
    content: "✓";
    display: inline-block;
    font-weight: 800;
    margin-right: 8px;
}

.tc-alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.tc-alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

@media (max-width: 900px) {
    body.tc-app-body.tc-login-page {
        overflow-y: auto;
    }

    body.tc-app-body.tc-login-page form#LoginForm.tc-login-shell {
        flex-direction: column !important;
        min-height: 100vh !important;
        width: 100% !important;
    }

    body.tc-app-body.tc-login-page .tc-login-brand-panel,
    body.tc-app-body.tc-login-page .tc-login-card {
        flex: 1 1 auto !important;
        min-height: 50vh;
        padding: 36px 22px !important;
        width: 100%;
    }

    body.tc-app-body.tc-login-page .tc-login-logo {
        max-width: 180px !important;
    }

    body.tc-app-body.tc-login-page .tc-login-title {
        margin-bottom: 28px;
    }

    body.tc-app-body.tc-login-page .tc-login-title h2 {
        font-size: 1.65rem;
    }
}

/* ── Shared mobile / tablet shell (<=1024px) — off-canvas navigation ──────
   R5A (Owner OD-1..OD-6). This is the ONLY shell/navigation breakpoint
   introduced by R5A. At widths >1024px the accepted desktop rail is
   unchanged. At <=1024px the sidebar becomes an off-canvas drawer opened by
   .tc-mobile-menu-toggle; the page occupies the full viewport width and no
   rail offset is reserved. Page/component breakpoints (800/720/480/900/1180)
   remain in their own blocks and are not replaced here. */
@media (max-width: 1024px) {
    body.tc-app-body {
        height: 100vh;
        height: 100dvh;
    }

    .tc-shell {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }

    .tc-mobile-bar {
        align-items: center;
        background: var(--tc-sidebar-bg);
        border-bottom: 1px solid var(--tc-sidebar-border);
        color: var(--tc-sidebar-text);
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
        min-height: 56px;
        padding: 6px 12px;
    }

    .tc-mobile-menu-toggle {
        align-items: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        color: #ffffff;
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        height: 44px;
        justify-content: center;
        padding: 0;
        width: 44px;
    }

    .tc-mobile-menu-toggle:hover,
    .tc-mobile-menu-toggle:focus {
        background: rgba(255, 255, 255, 0.16);
        outline: none;
    }

    .tc-mobile-menu-toggle:focus-visible {
        outline: 3px solid rgba(45, 212, 191, 0.65);
        outline-offset: 2px;
    }

    .tc-mobile-menu-toggle svg {
        display: block;
        fill: none;
        height: 22px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
        width: 22px;
    }

    .tc-mobile-bar-brand {
        align-items: center;
        color: #ffffff;
        display: inline-flex;
        gap: 10px;
        min-width: 0;
        text-decoration: none;
    }

    .tc-mobile-bar-brand:hover,
    .tc-mobile-bar-brand:focus {
        color: #ffffff;
        text-decoration: none;
    }

    .tc-mobile-bar-title {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Content column: full viewport width, no rail reservation. */
    .tc-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .tc-content {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        padding: 22px 18px;
    }

    /* Off-canvas drawer: the single existing navigation, repositioned. */
    .tc-sidebar {
        border-bottom: 0;
        border-right: 0;
        bottom: 0;
        box-shadow: 12px 0 32px rgba(2, 6, 23, 0.42);
        flex: 0 0 auto;
        height: 100vh;
        height: 100dvh;
        left: 0;
        max-height: none;
        position: fixed;
        top: 0;
        transform: translateX(-100%);
        transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
        width: min(300px, 86vw);
        will-change: transform;
        z-index: 300;
    }

    html.tc-mobile-nav-open .tc-sidebar {
        transform: translateX(0);
    }

    .tc-sidebar-header {
        min-height: 64px;
        padding: 12px 16px;
    }

    .tc-sidebar-session {
        padding: 12px 16px;
    }

    /* The desktop collapse toggle is irrelevant in the drawer. */
    .tc-sidebar-toggle {
        display: none;
    }

    .tc-sidebar-drawer-close {
        align-items: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        color: #ffffff;
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        height: 44px;
        justify-content: center;
        margin-left: auto;
        padding: 0;
        width: 44px;
    }

    .tc-sidebar-drawer-close:hover,
    .tc-sidebar-drawer-close:focus {
        background: rgba(255, 255, 255, 0.16);
        outline: none;
    }

    .tc-sidebar-drawer-close:focus-visible {
        outline: 3px solid rgba(45, 212, 191, 0.65);
        outline-offset: 2px;
    }

    .tc-sidebar-drawer-close svg {
        display: block;
        fill: none;
        height: 20px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2;
        width: 20px;
    }

    /* Navigation scrolls independently inside the drawer; nested <details>
       groups stay reachable even when the menu exceeds the viewport. */
    .tc-nav {
        flex: 1 1 auto;
        max-height: none;
        overflow-y: auto;
    }

    /* Shell-level controls get ~44px touch targets (Owner OD-4). */
    .tc-sidebar-theme-toggle,
    .tc-sidebar-logout {
        min-height: 44px;
        min-width: 44px;
    }

    /* Restrained backdrop, only interactive while the drawer is open. */
    .tc-drawer-backdrop {
        background: rgba(15, 23, 42, 0.5);
        bottom: 0;
        display: block;
        left: 0;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity 220ms ease, visibility 0s linear 220ms;
        visibility: hidden;
        z-index: 250;
    }

    html.tc-mobile-nav-open .tc-drawer-backdrop {
        opacity: 1;
        transition: opacity 220ms ease;
        visibility: visible;
    }

    /* Prevent background scroll/interaction while the drawer is open. */
    html.tc-mobile-nav-open .tc-content {
        overflow: hidden;
    }
}

@media (max-width: 800px) {
    /* R5A: the shell/navigation rules that used to stack the sidebar as a top
       panel were removed here and replaced by the shared <=1024px off-canvas
       mobile shell block above. The component/page responsive rules below are
       unchanged and still apply at <=800px. */
    .tc-grid:not(table) {
        grid-template-columns: 1fr;
    }

    .tc-filter-row-primary,
    .tc-filter-row-advanced,
    .tc-form-grid-two,
    .tc-detail-grid,
    .tc-remarks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-column-chooser {
        align-items: flex-start;
        flex-direction: column;
    }

    .tc-grid-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .tc-employee-add-panel > .tc-profile-actions {
        position: static;
    }

    .tc-employee-add-panel .tc-form-grid {
        padding-top: 0;
    }

    .tc-list-actions {
        grid-column: 1 / -1;
    }

    .tc-location-drawer {
        max-width: min(420px, calc(100vw - 18px));
        padding: 20px;
    }
}
@media (max-width: 480px) {
    .tc-content {
        padding: 18px 12px;
    }

    .tc-page-header {
        margin-bottom: 18px;
    }

    .tc-page-header h1 {
        font-size: 1.2rem;
    }

    .tc-card {
        padding: 16px;
    }

    .tc-filter-row-primary,
    .tc-filter-row-advanced,
    .tc-form-grid-two,
    .tc-detail-grid,
    .tc-remarks-grid {
        grid-template-columns: 1fr;
    }

    .tc-list-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tc-field-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tc-list-actions .tc-button {
        width: 100%;
    }

    .tc-list-actions .tc-icon-button {
        width: auto;
    }

    /* R5B: the global `.tc-table { min-width: 980px }` phone override was
       removed. It contradicted the grid contract ("no forced min-width on
       narrow grids") and forced even small master/list tables to 980px.
       The scroll container owns the overflow; genuinely wide operational
       grids keep their required width through the bounded, opt-in
       `.tc-data-grid--wide` contract class (and their own grid modifiers). */

    .tc-grid-summary {
        align-items: stretch;
        display: grid;
    }

    .tc-auth-body {
        align-items: flex-start;
        padding: 24px 12px;
    }

    .tc-login-panel {
        padding: 22px;
    }

    .tc-location-drawer {
        max-width: 100vw;
        width: 100vw;
    }

    .tc-location-drawer-actions {
        display: grid;
    }
}

/* ── Actions column — content-driven width ─────────────────── */
/* Previously had max-width:56px/width:48px which clipped
   multiple action buttons (e.g. Main Departments Edit+Deactivate).
   Now uses content-driven sizing via width:1% + white-space:nowrap. */
.tc-edit-cell,
.tc-grid-action-col,
.tc-employees-grid th.tc-grid-action-col,
.tc-employees-grid td.tc-grid-action-col {
    padding: 4px 8px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
}

.tc-edit-header,
th.tc-grid-action-col {
    width: 1%;
    white-space: nowrap;
}

.tc-button-small {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    justify-content: center;
    min-height: 30px;
    padding: 0 8px;
}

.tc-button-edit {
    background: transparent;
    border: 1px solid var(--tc-border);
    color: var(--tc-muted);
}

.tc-button-edit:hover,
.tc-button-edit:focus {
    background: #e7f2f5;
    border-color: var(--tc-primary);
    color: var(--tc-primary-dark);
    text-decoration: none;
}

/* ── Shared compact row-action icon ───────────────────────────── */
/* .tc-icon-action owns the common compact row-action behavior:
   32px target, 16px SVG, padding 0, inline-flex centering,
   Standard48 border/radius, hover, focus-visible, disabled.
   .tc-icon-action-edit is the semantic hook for Edit only. */
.tc-icon-action {
    align-items: center;
    background: transparent;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    color: var(--tc-muted);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    min-height: 32px;
    padding: 0;
    position: relative;
    width: 32px;
}

.tc-icon-action .tc-button-svg {
    height: 16px;
    margin-right: 0;
    width: 16px;
}

.tc-icon-action:hover,
.tc-icon-action:focus-visible {
    background: #e7f2f5;
    border-color: var(--tc-primary);
    color: var(--tc-primary-dark);
    text-decoration: none;
}

.tc-icon-action:focus-visible {
    outline: 2px solid var(--tc-primary);
    outline-offset: 1px;
}

.tc-icon-action[disabled],
.tc-icon-action.tc-is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* ── Shared row-action tooltip (hover + keyboard focus) ──────── */
/* The visible label is rendered by the shared tooltip module into
   document.body so it is never clipped by the table/card wrapper.
   This element is created by timecount-app.js from data-tooltip. */
.tc-tooltip {
    background: #1e2933;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    left: 0;
    line-height: 1.4;
    max-width: 260px;
    opacity: 0;
    padding: 6px 10px;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    visibility: hidden;
    white-space: nowrap;
    z-index: 9999;
}

.tc-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.tc-field-readonly {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    color: var(--tc-text);
    display: flex;
    font-weight: 600;
    min-height: 42px;
    padding: 8px 10px;
    width: 100%;
}

.tc-field input[readonly],
.tc-field select[readonly],
.tc-field textarea[readonly],
.tc-field input:disabled,
.tc-field select:disabled,
.tc-field textarea:disabled {
    background: #f0f2f5;
    border-color: #d0d5dd;
    color: #667085;
    cursor: default;
}

.tc-field input[readonly]:focus,
.tc-field select[readonly]:focus,
.tc-field textarea[readonly]:focus,
.tc-field input:disabled:focus,
.tc-field select:disabled:focus,
.tc-field textarea:disabled:focus {
    border-color: #d0d5dd;
    outline: none;
}

/* ── Sidebar collapsible groups ────────────────────────────────────────── */

.tc-nav-group {
    border: 0;
    margin: 0;
    padding: 0;
}

.tc-nav-group[open] {
    padding-bottom: 2px;
}

.tc-nav-toggle {
    align-items: center;
    border-radius: 8px;
    gap: 12px;
    min-height: 38px;
    cursor: pointer;
    display: flex;
    list-style: none;
    padding: 8px 16px;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
    user-select: none;
}

.tc-nav-arrow {
    color: rgba(255, 255, 255, 0.5);
    flex: 0 0 auto;
    height: 14px;
    margin-left: auto;
    transition: transform 0.2s ease, color 0.2s ease;
    width: 14px;
}

.tc-nav-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.tc-nav-toggle:hover,
.tc-nav-toggle:focus {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tc-sidebar-text);
}

.tc-nav-group[open] > .tc-nav-toggle .tc-nav-arrow {
    color: #5eead4;
    transform: rotate(90deg);
}

.tc-nav-group[open] > .tc-nav-toggle {
    background: rgba(26, 127, 143, 0.2);
    color: #ffffff;
}

.tc-nav-group[open] > .tc-nav-toggle::before {
    background: #2dd4bf;
    border-radius: 0 3px 3px 0;
    bottom: 20%;
    content: "";
    left: 0;
    position: absolute;
    top: 20%;
    width: 3px;
}

/* Remove the default browser disclosure triangle (works in Chrome/Safari/Firefox/Edge) */
.tc-nav-toggle::-webkit-details-marker {
    display: none;
}

.tc-nav-toggle::marker {
    display: none;
    content: "";
}

.tc-nav-toggle:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.65);
    outline-offset: -2px;
}

/* Section toggle override: consistent icon + text + arrow alignment */
.tc-nav-section-label.tc-nav-toggle {
    align-items: center;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 0;
    padding: 8px 16px;
    text-transform: none;
}

.tc-nav-section-label.tc-nav-toggle .tc-nav-text {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    max-inline-size: 220px;
    transform: translateX(0);
    visibility: visible;
    transition:
        opacity 180ms ease,
        max-inline-size 240ms ease,
        transform 240ms ease,
        visibility 0s linear;
}

.tc-nav-group-items {
    display: grid;
    gap: 2px;
    padding-left: 0;
}

.tc-nav-group-items .tc-nav-link {
    font-size: 0.88rem;
    padding: 10px 16px 10px 30px;
}

/* ── Sidebar shell collapse ────────────────────────────────────────────── */
/* R5A: the collapse/rail model is a DESKTOP (>1024px) shell feature. It is
   scoped to min-width:1025px so a persisted collapsed state can never shrink
   or hide the <=1024px mobile off-canvas drawer or its nested groups. */

@media (min-width: 1025px) {
    html.is-sidebar-collapsed .tc-sidebar {
        width: 72px;
    }

    html.is-sidebar-collapsed .tc-sidebar-header {
        align-items: center;
        justify-content: center;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Brand stays left-aligned; only text children animate out */
    html.is-sidebar-collapsed .tc-sidebar-brand {
        justify-content: flex-start;
    }

    /* ── Animatable text collapse ──────────────────────────────── */
    /* Text elements fade, slide, and shrink in sync with the rail. */
    html.is-sidebar-collapsed .tc-sidebar-title,
    html.is-sidebar-collapsed .tc-nav-text,
    html.is-sidebar-collapsed .tc-nav-section-label .tc-nav-text,
    html.is-sidebar-collapsed .tc-user-info,
    html.is-sidebar-collapsed .tc-sidebar-theme-toggle-text {
        opacity: 0;
        max-inline-size: 0;
        transform: translateX(-4px);
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 140ms ease,
            max-inline-size 220ms ease,
            transform 220ms ease,
            visibility 0s linear 220ms;
    }

    html.is-sidebar-collapsed .tc-sidebar-toggle {
        margin-left: 0;
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    html.is-sidebar-collapsed .tc-nav {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Stable layout: nav links keep flex-start, icon stays in fixed track */
    html.is-sidebar-collapsed .tc-nav-link,
    html.is-sidebar-collapsed .tc-nav-toggle {
        justify-content: flex-start;
        padding-left: 8px;
        padding-right: 8px;
    }

    html.is-sidebar-collapsed .tc-nav-toggle .tc-nav-arrow {
        display: none;
    }

    html.is-sidebar-collapsed .tc-nav-group-items {
        display: none;
    }

    /* Stable layout: session keeps row orientation */
    html.is-sidebar-collapsed .tc-sidebar-session {
        flex-direction: row;
        gap: 4px;
        justify-content: center;
        padding-left: 8px;
        padding-right: 8px;
    }

    html.is-sidebar-collapsed .tc-sidebar-theme-toggle {
        padding-left: 0;
        padding-right: 0;
        width: 32px;
        justify-content: center;
    }

    /* Logout remains reachable as icon-only button in collapsed mode */
    html.is-sidebar-collapsed .tc-sidebar-logout {
        display: inline-flex;
    }
}

/* ── Reduced motion ────────────────────────────────────────── */
/* Collapse/expand snaps instantly when the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .tc-sidebar,
    .tc-sidebar-title,
    .tc-nav-text,
    .tc-nav-section-label .tc-nav-text,
    .tc-user-info,
    .tc-sidebar-theme-toggle-text {
        transition-duration: 0.01ms !important;
    }
}

.tc-dashboard-hero {
    display: none;
}

.tc-dash-compact-shell {
    display: grid;
    gap: 12px;
}

.tc-dash-compact-header {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.tc-dash-compact-title {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.tc-dash-compact-title h1 {
    color: #0f172a;
    font-size: var(--tc-font-size-page-title);
    font-weight: var(--tc-font-weight-page-title);
    line-height: 1.2;
    margin: 0;
}

.tc-dash-compact-subtitle {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
}

.tc-dash-stats-bar {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px 16px;
}

.tc-dash-stats-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.tc-dash-stat {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.tc-dash-stat-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.tc-dash-stat-value {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
}

.tc-dash-stat-muted {
    color: #94a3b8;
    font-weight: 700;
}

.tc-dash-stat-pending {
    color: #dc2626;
}

.tc-dash-stat-divider {
    background: #e2e8f0;
    display: inline-block;
    height: 16px;
    width: 1px;
}

.tc-dash-scope-input {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.tc-dash-scope-toggle {
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px;
}

.tc-dash-scope-label {
    border-radius: 6px;
    color: #475569;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 52px;
    padding: 6px 12px;
    text-align: center;
}

#tcDashTeamScope:checked ~ .tc-dash-stats-bar .tc-dash-scope-label[for="tcDashTeamScope"],
#tcDashSelfScope:checked ~ .tc-dash-stats-bar .tc-dash-scope-label[for="tcDashSelfScope"] {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

.tc-dash-action-shell {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-top: 0;
    padding: 16px;
}

.tc-dash-action-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tc-dash-action-head-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tc-dash-action-head h2 {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 700;
    margin: 0;
}

.tc-dash-attention-badge {
    background: #fef2f2;
    border-radius: 999px;
    color: #dc2626;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
}

.tc-dash-updated {
    color: #94a3b8;
    font-size: 0.72rem;
    white-space: nowrap;
}

.tc-dash-action-grid-compact {
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    margin-bottom: 12px;
}

.tc-dash-action-compact {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: default;
    display: grid;
    font-size: 0.875rem;
    gap: 6px;
    min-height: 88px;
    padding: 12px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tc-dash-submission-card {
    grid-column: span 2;
}

.tc-dash-action-compact.is-active,
a.tc-dash-action-compact.is-active,
.tc-dash-action-compact[aria-disabled="false"] {
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    border-color: #fecaca;
    box-shadow: 0 2px 12px -2px rgba(239, 68, 68, 0.15);
    cursor: pointer;
}

.tc-dash-action-compact:hover.is-active,
a.tc-dash-action-compact.is-active:hover {
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.tc-dash-action-compact.is-disabled {
    cursor: default;
    opacity: 0.68;
    pointer-events: none;
}

.tc-dash-action-compact-top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.tc-dash-status-badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.tc-dash-status-active {
    align-items: center;
    color: #dc2626;
    display: inline-flex;
    gap: 4px;
}

.tc-dash-status-active::before {
    animation: tc-dash-pulse 2s infinite;
    background: #ef4444;
    border-radius: 999px;
    content: "";
    height: 6px;
    width: 6px;
}

.tc-dash-status-clear {
    color: #94a3b8;
}

@keyframes tc-dash-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.tc-dash-action-compact-count {
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.tc-dash-count-muted {
    color: #cbd5e1;
}

.tc-dash-action-compact-label {
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0;
}

.tc-dash-action-progress {
    background: #fee2e2;
    border-radius: 999px;
    height: 4px;
    margin-top: 2px;
    overflow: hidden;
}

.tc-dash-action-progress-fill {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
    border-radius: 999px;
    display: block;
    height: 100%;
}

.tc-dash-remarks-breakdown {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-top: 4px;
    padding: 12px;
}

.tc-dash-breakdown-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
}

.tc-dash-breakdown-title-wrap {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
}

.tc-dash-breakdown-accent {
    background: #ef4444;
    border-radius: 999px;
    height: 16px;
    width: 2px;
}

.tc-dash-breakdown-title {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 700;
}

.tc-dash-breakdown-chips {
    align-items: center;
    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    min-width: 220px;
}

.tc-dash-team-breakdown,
.tc-dash-self-breakdown {
    display: none;
}

#tcDashTeamScope:checked ~ .tc-dash-action-shell .tc-dash-team-breakdown {
    display: inline-flex;
}

#tcDashSelfScope:checked ~ .tc-dash-action-shell .tc-dash-self-breakdown {
    display: inline-flex;
}

.tc-dash-breakdown-chip {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: inherit;
    display: inline-flex;
    gap: 6px;
    padding: 6px 10px;
    text-decoration: none;
}

.tc-dash-breakdown-chip span:first-child {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
}

.tc-dash-breakdown-chip label,
.tc-dash-breakdown-chip > span + span {
    color: #cbd5e1;
    font-size: 0.95rem;
    font-weight: 700;
}

.tc-dash-breakdown-chip-active {
    border-color: #fecaca;
    border-width: 2px;
}

.tc-dash-breakdown-chip-active span:first-child {
    color: #dc2626;
    font-weight: 600;
}

.tc-dash-breakdown-chip-active > span + span {
    color: #0f172a;
}

.tc-dash-process-all {
    align-items: center;
    background: #0f172a;
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 6px;
    padding: 8px 12px;
    text-decoration: none;
    transition: background-color 160ms ease;
}

.tc-dash-process-all:hover {
    background: #1e293b;
    color: #ffffff;
}

.tc-dashboard-hero--legacy {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px 14px;
}

.tc-dashboard-hero h1 {
    color: #111827;
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.2rem;
}

.tc-dashboard-hero .tc-kicker {
    display: none;
}

.tc-dashboard-hero .tc-muted {
    font-size: 0.78rem;
    margin: 0;
}

.tc-role-badge,
.tc-open-badge {
    align-items: center;
    background: #eef6f8;
    border: 1px solid #cdebf2;
    border-radius: 999px;
    color: var(--tc-primary-dark);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    min-height: 24px;
    padding: 4px 9px;
    text-transform: uppercase;
}

.tc-role-badge {
    background: #eff6ff;
    border-color: #bfdbfe;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
    color: #1d4ed8;
    font-size: 0.72rem;
    gap: 7px;
    text-transform: none;
}

.tc-role-badge::before {
    background: #3b82f6;
    border-radius: 999px;
    content: "";
    height: 6px;
    width: 6px;
}

.tc-action-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tc-action-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    display: grid;
    gap: 8px;
    min-height: 96px;
    overflow: hidden;
    padding: 12px 12px 11px 16px;
    position: relative;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tc-action-card::before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px;
}

.tc-action-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
}

.tc-action-card[aria-disabled="false"],
a.tc-action-card {
    background: linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
    border-color: #fecaca;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.08);
    cursor: pointer;
}

.tc-action-card.is-disabled {
    cursor: default;
    opacity: 0.68;
    pointer-events: none;
}

.tc-action-card.is-disabled .tc-open-badge {
    background: #f1f5f9;
    color: #94a3b8;
}

.tc-action-card.is-disabled .tc-action-chevron {
    color: #cbd5e1;
}

.tc-accent-cyan::before {
    background: #f43f5e;
}

.tc-accent-emerald::before {
    background: #f59e0b;
}

.tc-accent-amber::before {
    background: #10b981;
}

.tc-accent-indigo::before {
    background: #4f46e5;
}

.tc-action-card-main,
.tc-action-card-footer,
.tc-card-heading-row {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.tc-dashboard-label {
    color: #475569;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 6px;
    text-transform: none;
}

.tc-action-count {
    color: #111827;
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.tc-action-card-footer {
    align-items: center;
    align-self: end;
    color: var(--tc-muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.tc-action-chevron {
    align-items: center;
    background: #f8fafc;
    border: 0;
    border-radius: 6px;
    color: #94a3b8;
    display: inline-flex;
    font-size: 1.15rem;
    height: 26px;
    justify-content: center;
    line-height: 1;
    width: 26px;
}

.tc-remarks-workspace-card {
    border-color: #e2e8f0;
    border-radius: 8px;
    min-height: 0;
    padding: 16px;
}

.tc-card-heading-row {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.tc-card-heading-row h2 {
    color: #111827;
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.tc-tab-shell {
    margin-top: 12px;
}

.tc-tab-input {
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.tc-tab-list {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid rgba(203, 213, 225, 0.55);
    border-radius: 10px;
    display: inline-flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
}

.tc-tab-list-static {
    margin-top: 18px;
}

.tc-tab-label {
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    justify-content: center;
    min-height: 32px;
    padding: 7px 16px;
}

.tc-tab-label.is-active,
#tcRemarksTeamTab:checked ~ .tc-tab-list label[for="tcRemarksTeamTab"],
#tcRemarksSelfTab:checked ~ .tc-tab-list label[for="tcRemarksSelfTab"] {
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    color: #111827;
}

.tc-tab-panel {
    display: none;
}

#tcRemarksTeamTab:checked ~ .tc-team-panel,
#tcRemarksSelfTab:checked ~ .tc-self-panel {
    display: block;
}

.tc-mini-count-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tc-mini-count-box {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    color: inherit;
    display: grid;
    gap: 8px;
    min-height: 98px;
    padding: 16px;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tc-mini-count-link:hover,
.tc-mini-count-link:focus {
    background: #ffffff;
    border-color: #bae6fd;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
    outline: none;
    transform: translateY(-1px);
}

.tc-mini-count-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22), 0 12px 22px rgba(15, 23, 42, 0.08);
}

.tc-mini-count-box span {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
}

.tc-mini-count-box label,
.tc-mini-count-box .aspNetDisabled,
.tc-mini-count-box > span + span {
    color: #111827;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
}

.tc-snapshot-card {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
    min-height: 0;
    padding: 24px;
}

.tc-snapshot-main {
    align-items: center;
    border-right: 1px solid #f1f5f9;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(210px, 0.9fr) minmax(280px, 1.2fr);
    padding-right: 28px;
}

.tc-snapshot-side {
    display: grid;
    gap: 18px;
}

.tc-snapshot-panel {
    background: rgba(248, 250, 252, 0.7);
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    display: grid;
    gap: 14px;
    padding: 16px;
}

.tc-snapshot-card h3 {
    color: #475569;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
}

.tc-snapshot-visual-column {
    display: grid;
    gap: 18px;
    justify-items: center;
}

.tc-donut-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0 2px;
}

.tc-donut {
    align-items: center;
    background: conic-gradient(#38bdf8 0% 45%, #2dd4bf 45% 60%, #475569 60% 75%, #fbbf24 75% 85%, #f87171 85% 95%, #c084fc 95% 100%);
    border: 16px solid #f1f5f9;
    border-radius: 999px;
    display: flex;
    height: 164px;
    justify-content: center;
    width: 164px;
}

.tc-donut > div {
    align-items: center;
    background: #ffffff;
    border-radius: 999px;
    display: grid;
    height: 106px;
    justify-items: center;
    line-height: 1.1;
    padding: 20px;
    width: 106px;
}

.tc-donut label,
.tc-donut span:first-child {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 700;
}

.tc-donut span {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: none;
}

.tc-snapshot-legend {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.tc-snapshot-legend span {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    color: #475569;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 650;
    gap: 8px;
    min-height: 30px;
    padding: 6px 8px;
}

.tc-snapshot-legend i {
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 10px;
    width: 10px;
}

.tc-dot-sky {
    background: #38bdf8;
}

.tc-dot-teal {
    background: #2dd4bf;
}

.tc-dot-slate {
    background: #475569;
}

.tc-dot-amber {
    background: #fbbf24;
}

.tc-dot-rose {
    background: #f87171;
}

.tc-dot-violet {
    background: #c084fc;
}

.tc-device-bars,
.tc-designation-list,
.tc-infra-grid {
    display: grid;
    gap: 12px;
}

.tc-device-panel {
    border-top: 1px solid #f1f5f9;
    display: grid;
    gap: 16px;
    padding-top: 18px;
}

.tc-device-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(110px, 0.9fr) minmax(120px, 1fr) 42px;
}

.tc-device-row > span,
.tc-designation-list span,
.tc-status-grid span,
.tc-infra-grid span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
}

.tc-device-track {
    background: #e2e8f0;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.tc-device-track span {
    display: block;
    height: 100%;
}

.tc-device-fill-teal {
    background: #2dd4bf;
}

.tc-device-fill-slate {
    background: #475569;
}

.tc-device-fill-rose {
    background: #f43f5e;
}

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

.tc-status-grid div,
.tc-infra-grid div,
.tc-designation-list li {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: grid;
    gap: 4px;
    padding: 12px;
}

.tc-status-grid div > span:first-child,
.tc-infra-grid div > span:first-child,
.tc-designation-list li > span:first-child {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: none;
}

.tc-status-grid div > span:last-child,
.tc-infra-grid div > span:last-child,
.tc-designation-list li > span:last-child {
    color: #111827;
    font-size: 1.2rem;
    font-weight: 700;
}

.tc-designation-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-designation-list li {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.tc-infra-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tc-infra-grid div:nth-child(1) {
    background: #eff6ff;
    border-color: #dbeafe;
}

.tc-infra-grid div:nth-child(2) {
    background: #ecfdf5;
    border-color: #d1fae5;
}

.tc-infra-grid div:nth-child(3) {
    background: #fff1f2;
    border-color: #ffe4e6;
}

@media (max-width: 1180px) {
    .tc-dash-action-grid-compact,
    .tc-action-grid,
    .tc-mini-count-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-dash-stats-bar,
    .tc-dash-breakdown-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .tc-dash-submission-card {
        grid-column: span 2;
    }

    .tc-snapshot-card,
    .tc-snapshot-main {
        grid-template-columns: 1fr;
    }

    .tc-snapshot-main {
        border-right: 0;
        border-bottom: 1px solid #f1f5f9;
        padding: 0 0 24px;
    }
}

@media (max-width: 720px) {
    .tc-dash-compact-header,
    .tc-dashboard-hero,
    .tc-card-heading-row {
        align-items: flex-start;
        display: grid;
    }

    .tc-dash-action-grid-compact,
    .tc-action-grid,
    .tc-mini-count-grid,
    .tc-snapshot-card,
    .tc-snapshot-main,
    .tc-status-grid,
    .tc-infra-grid {
        grid-template-columns: 1fr;
    }

    .tc-dash-submission-card {
        grid-column: span 1;
    }

    .tc-snapshot-card {
        gap: 20px;
        padding: 18px;
    }

    .tc-tab-list {
        width: 100%;
    }

    .tc-tab-label {
        justify-content: center;
        width: 100%;
    }

    .tc-device-row {
        grid-template-columns: 1fr;
    }
}

/* ── Global UI consolidation: compact form controls ─────────── */
/* Mirrors the compact density from Attendance Remarks as a shared pattern */

.tc-control-sm {
    font-size: 0.82rem;
    min-height: 36px;
    padding: 7px 10px;
}

.tc-input-sm,
.tc-field .tc-input-sm,
.tc-field input.tc-input-sm,
.tc-field select.tc-input-sm,
body.tc-app-body .tc-combo-input,
body.tc-app-body .tc-combo-option {
    border-color: #cbd5e1;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
}

.tc-input-sm,
.tc-field .tc-input-sm,
.tc-field input.tc-input-sm,
.tc-field select.tc-input-sm,
body.tc-app-body .tc-combo-input {
    min-height: 36px;
    padding: 7px 10px;
}

.tc-label-sm,
.tc-field .tc-label-sm,
.tc-field label.tc-label-sm {
    color: #475569;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tc-field-gap-sm {
    gap: 4px;
}

.tc-btn-sm,
.tc-list-actions .tc-btn-sm,
.tc-grid-toolbar-actions .tc-btn-sm {
    border-radius: 9px;
    font-size: 0.8125rem;
    min-height: 36px;
    padding: 0 12px;
}

/* ── Filter card (compact card variant) ─────────────────────── */

.tc-filter-card {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    font-size: var(--tc-font-size-body);
    font-weight: var(--tc-font-weight-body);
    overflow: hidden;
    padding: 18px;
}

.tc-filter-card .tc-filter-bar {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-bottom: 14px;
    padding: 0;
}

.tc-filter-card .tc-filter-bar:last-child {
    margin-bottom: 0;
}

.tc-filter-card .tc-grid-toolbar {
    background: #ffffff;
    margin: 0 -18px;
}

.tc-filter-card .tc-grid-toolbar .tc-muted {
    color: #475569;
    font-size: 0.875rem;
    font-weight: 600;
}

.tc-filter-card .tc-page-size {
    gap: 6px;
}

.tc-filter-card .tc-page-size label {
    font-size: 0.875rem;
}

.tc-filter-card input[type="text"],
.tc-filter-card input[type="date"],
.tc-filter-card input[type="time"],
.tc-filter-card input[type="number"],
.tc-filter-card select,
.tc-grid-toolbar select {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    color: #0f172a;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 36px;
    padding: 7px 10px;
}

.tc-input-sm:focus,
.tc-filter-card input[type="text"]:focus,
.tc-filter-card input[type="date"]:focus,
.tc-filter-card input[type="time"]:focus,
.tc-filter-card input[type="number"]:focus,
.tc-filter-card select:focus,
.tc-grid-toolbar select:focus {
    border-color: #1a7f8f;
    box-shadow: 0 0 0 3px rgba(26, 127, 143, 0.14);
    outline: none;
}

/* ── Compact table (matches Attendance Remarks table density) ─ */

.tc-grid-card,
.tc-grid-shell {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    font-size: var(--tc-font-size-body);
    font-weight: var(--tc-font-weight-body);
    max-width: 100%;
    min-width: 0;
    /* overflow:hidden removed — it clipped the scroll wrapper's
       scrollbar and right edge. The grid-wrap handles overflow. */
}

.tc-grid-wrap {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

/* ── Grid table minimum width — content-driven for shared layout ── */
/* Previously had min-width:min(100%,1180px) which forced ALL tables
   to be at least 1180px wide, causing unnecessary horizontal scrollbars.
   Now uses min-width:0 so small master/list tables fit naturally.
   Report tables with genuinely wide columns opt in with .tc-data-grid--wide. */
.tc-grid-wrap table:not(.tc-recalc-queue-grid),
.tc-grid-card table:not(.tc-recalc-queue-grid),
.tc-grid-shell table:not(.tc-recalc-queue-grid),
table.tc-data-grid:not(.tc-recalc-queue-grid),
table.tc-grid:not(.tc-recalc-queue-grid),
.tc-table-sm {
    min-width: 0;
    width: 100%;
}

.tc-grid-wrap table,
.tc-grid-card table,
.tc-grid-shell table,
table.tc-data-grid,
table.tc-grid,
.tc-table-sm.tc-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tc-font-size-body);
    font-weight: var(--tc-font-weight-body);
    width: 100%;
}

.tc-grid-wrap table th,
.tc-grid-card table th,
.tc-grid-shell table th,
table.tc-data-grid th,
table.tc-grid th,
.tc-table-sm.tc-table th,
.tc-table-sm.tc-table td {
    border-bottom-color: #eef2f7;
    padding: 9px 10px;
}

.tc-grid-wrap table th,
.tc-grid-card table th,
.tc-grid-shell table th,
table.tc-data-grid th,
table.tc-grid th,
.tc-table-sm.tc-table th {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
    color: #475569;
    font-size: 0.875rem;
    font-weight: var(--tc-font-weight-grid-header);
    letter-spacing: 0;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    vertical-align: middle;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.tc-grid-wrap table th.tc-action-col,
.tc-grid-wrap table th.tc-grid-action-col,
.tc-grid-wrap table th.tc-select-col,
.tc-grid-wrap table th:first-child,
.tc-grid-card table th.tc-action-col,
.tc-grid-card table th.tc-grid-action-col,
.tc-grid-card table th.tc-select-col,
.tc-grid-card table th:first-child,
.tc-grid-shell table th.tc-action-col,
.tc-grid-shell table th.tc-grid-action-col,
.tc-grid-shell table th.tc-select-col,
.tc-grid-shell table th:first-child,
table.tc-data-grid th.tc-action-col,
table.tc-data-grid th.tc-grid-action-col,
table.tc-data-grid th.tc-select-col,
table.tc-data-grid th:first-child,
table.tc-grid th.tc-action-col,
table.tc-grid th.tc-grid-action-col,
table.tc-grid th.tc-select-col,
table.tc-grid th:first-child {
    overflow-wrap: normal;
    white-space: nowrap;
}

.tc-grid-wrap table td,
.tc-grid-card table td,
.tc-grid-shell table td,
table.tc-data-grid td,
table.tc-grid td,
.tc-table-sm.tc-table td {
    border-bottom: 1px solid #eef2f7;
    color: #334155;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    vertical-align: middle;
}

.tc-grid-wrap table tr:nth-child(even) td,
.tc-grid-card table tr:nth-child(even) td,
.tc-grid-shell table tr:nth-child(even) td,
table.tc-data-grid tr:nth-child(even) td,
table.tc-grid tr:nth-child(even) td,
.tc-table-sm.tc-table tr:nth-child(even) td {
    background: #fcfdff;
}

.tc-grid-wrap table tr:hover td,
.tc-grid-card table tr:hover td,
.tc-grid-shell table tr:hover td,
table.tc-data-grid tr:hover td,
table.tc-grid tr:hover td,
.tc-table-sm.tc-table tr:hover td {
    background: #f8fafc;
}

.tc-table-sm.tc-table input,
.tc-table-sm.tc-table select,
.tc-table-sm.tc-table textarea {
    border: 1px solid #d7dee8;
    border-radius: 7px;
    color: #1f2937;
    font-family: inherit;
    font-size: 0.78rem;
}

.tc-grid-empty {
    color: #64748b;
    font-size: 0.8125rem;
    padding: 18px;
    text-align: center;
}

.tc-grid-footer {
    align-items: center;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 16px;
}

.tc-grid-footer-left {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.tc-grid-footer-right {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.tc-grid-footer .tc-page-size {
    align-items: center;
    display: flex;
    gap: 6px;
}

.tc-grid-footer .tc-page-size label {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.tc-grid-footer .tc-page-size select {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 28px;
    padding: 2px 6px;
}

/* ── Button variants (consolidated) ─────────────────────────── */

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

.tc-button-primary:hover,
.tc-button-primary:focus {
    background: var(--tc-primary-dark);
    border-color: var(--tc-primary-dark);
    color: #ffffff;
}

.tc-button-danger {
    background: var(--tc-danger-bg);
    border-color: #f5c2c7;
    color: var(--tc-danger-text);
}

.tc-button-danger:hover,
.tc-button-danger:focus {
    background: var(--tc-danger-text);
    border-color: var(--tc-danger-text);
    color: #ffffff;
}

.tc-button-compact,
.tc-control-compact {
    min-height: var(--tc-component-control-height-compact);
    padding: 0 12px;
}

.tc-input,
.tc-select {
    background: var(--tc-component-control-bg);
    border: 1px solid var(--tc-component-control-border);
    border-radius: var(--tc-component-control-radius);
    color: #0f172a;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: var(--tc-component-control-height);
    padding: 7px 10px;
    width: 100%;
}

.tc-input:focus,
.tc-select:focus {
    border-color: var(--tc-primary);
    box-shadow: 0 0 0 3px var(--tc-component-control-focus);
    outline: none;
}

.tc-input.tc-control-compact,
.tc-select.tc-control-compact {
    font-size: 0.875rem;
    min-height: var(--tc-component-control-height-compact);
    padding: 4px 8px;
}

.tc-form-row {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tc-form-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.tc-form-label {
    color: var(--tc-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.tc-form-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tc-data-grid {
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tc-font-size-body);
    font-weight: var(--tc-font-weight-body);
    width: 100%;
}

.tc-data-grid th,
.tc-data-grid td {
    border-bottom: 1px solid #eef2f7;
    padding: 9px 10px;
    vertical-align: middle;
}

.tc-data-grid th {
    background: var(--tc-component-grid-header-bg);
    color: #475569;
    font-size: 0.6875rem;
    font-weight: var(--tc-font-weight-grid-header);
    letter-spacing: 0;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
}

.tc-drawer {
    background: var(--tc-surface);
    border-left: 1px solid var(--tc-border);
    box-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

.tc-drawer-header {
    align-items: center;
    border-bottom: 1px solid var(--tc-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.tc-drawer-title {
    color: var(--tc-primary-dark);
    font-size: 1.1rem;
    line-height: 1.25;
    margin: 0;
}

.tc-drawer-close.tc-button-compact {
    height: var(--tc-component-control-height-compact);
    min-height: var(--tc-component-control-height-compact);
    padding: 0;
    width: var(--tc-component-control-height-compact);
}

.tc-drawer-body {
    display: grid;
    gap: 14px;
    min-width: 0;
    overflow-x: hidden;
}

.tc-drawer-context {
    background: #f8fafc;
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 12px;
}

.tc-drawer-section {
    border-top: 1px solid var(--tc-border);
    display: grid;
    gap: 10px;
    padding-top: 16px;
}

.tc-drawer-section-header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.tc-drawer-table {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.tc-drawer-action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
}

.tc-drawer-footer {
    border-top: 1px solid var(--tc-border);
    margin-top: auto;
    padding-top: 16px;
}

/* ── Compact drawer modifier ──────────────────────────────── */
/* Reduces vertical spacing for data-dense drawers such as the
   Department assignment drawer. Applied via .tc-drawer--compact
   on the root drawer element. */

.tc-drawer--compact {
    gap: 0;
    padding: 0;
}

.tc-drawer--compact .tc-drawer-header {
    padding: 14px 16px;
}

.tc-drawer--compact .tc-drawer-body {
    padding: 16px;
}

.tc-drawer--compact .tc-drawer-footer {
    padding: 10px 16px;
}

.tc-drawer--compact .tc-form-section {
    gap: 10px;
}

.tc-drawer--compact .tc-form-section + .tc-form-section {
    margin-top: 16px;
    padding-top: 14px;
}

.tc-drawer--compact .tc-field {
    gap: 4px;
}

/* TC-STANDARD-PROJECTS-DEVICE-DRAWER-UX-001 — Projects Assign Device drawer.
   The drawer body is a grid with flex: 1 1 auto inside the 100dvh flex
   drawer; with no align-content the grid's default (normal = stretch)
   distributed all leftover height into the field rows, and each .tc-field
   (also an unaligned grid) re-distributed it into its label/control rows,
   inflating the select and date inputs to ~100-120px on desktop. Pack both
   grids to content and drop the redundant per-field margin so the body gap
   owns vertical spacing. Scoped to this drawer only. */
.tc-project-device-drawer .tc-location-drawer-body {
    align-content: start;
}

.tc-project-device-drawer .tc-field {
    align-content: start;
    margin-bottom: 0;
}

.tc-button-outline {
    /* alias for .tc-button-secondary, kept for semantic clarity */
}

/* ── Soft slate page title (shared heading hierarchy) ───────── */

.tc-page-header.tc-page-header-sm h1,
.tc-page-title-sm {
    color: #0f172a;
    font-size: var(--tc-font-size-page-title);
    font-weight: var(--tc-font-weight-page-title);
    margin-bottom: 0;
}

.tc-page-header.tc-page-header-sm .tc-muted {
    font-size: 0.8125rem;
}

/* ── Responsive filter row improvements ─────────────────────── */
/* Prevents horizontal clipping on report filter rows with many columns */

@media (max-width: 1520px) {
    .tc-filter-row-primary.tc-filter-row-wide {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tc-filter-row-primary.tc-filter-row-wide .tc-list-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1200px) {
    .tc-filter-row-primary.tc-filter-row-wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .tc-filter-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .tc-filter-row-primary.tc-filter-row-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .tc-filter-row {
        grid-template-columns: 1fr;
    }

    .tc-field-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .tc-filter-row-primary.tc-filter-row-wide {
        grid-template-columns: 1fr;
    }
}

.tc-daily-attendance-report-panel .tc-filter-row-primary.tc-filter-row-wide {
    grid-template-columns:
        minmax(130px, 0.72fr)
        minmax(130px, 0.72fr)
        minmax(130px, 0.72fr)
        minmax(270px, 1.65fr)
        minmax(132px, 0.72fr)
        minmax(132px, 0.72fr)
        minmax(150px, 0.8fr)
        auto;
}

@media (max-width: 1520px) {
    .tc-daily-attendance-report-panel .tc-filter-row-primary.tc-filter-row-wide {
        grid-template-columns:
            minmax(120px, 0.75fr)
            minmax(120px, 0.75fr)
            minmax(120px, 0.75fr)
            minmax(240px, 1.55fr);
    }

    .tc-daily-attendance-report-panel .tc-filter-row-primary.tc-filter-row-wide .tc-list-actions {
        grid-column: auto;
    }
}

@media (max-width: 980px) {
    .tc-daily-attendance-report-panel .tc-filter-row-primary.tc-filter-row-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-daily-attendance-report-panel .tc-filter-row-primary.tc-filter-row-wide .tc-list-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .tc-daily-attendance-report-panel .tc-filter-row-primary.tc-filter-row-wide {
        grid-template-columns: 1fr;
    }
}

/* ── Events Report filter rows (9.5LZ-R) ─────────────────────── */

.tc-events-report-panel .tc-events-filter-row-1 {
    grid-template-columns:
        minmax(140px, 0.8fr)
        minmax(150px, 0.85fr)
        minmax(150px, 0.85fr)
        minmax(240px, 1.45fr)
        minmax(140px, 0.75fr);
}

.tc-events-report-panel .tc-events-filter-row-2 {
    grid-template-columns: minmax(150px, 210px) minmax(150px, 210px) 1fr;
}

.tc-events-report-panel .tc-events-filter-row-2 .tc-list-actions {
    justify-content: flex-end;
    justify-self: end;
    margin-left: auto;
}

@media (max-width: 1200px) {
    .tc-events-report-panel .tc-events-filter-row-1 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tc-events-report-panel .tc-events-filter-row-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-events-report-panel .tc-events-filter-row-2 .tc-list-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .tc-events-report-panel .tc-events-filter-row-1,
    .tc-events-report-panel .tc-events-filter-row-2 {
        grid-template-columns: 1fr;
    }
}

.tc-events-report-panel .tc-events-grid th.tc-col-employee-id,
.tc-events-report-panel .tc-events-grid td.tc-col-employee-id {
    max-width: 96px;
    min-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 88px;
}

.tc-events-report-panel table.tc-data-grid.tc-events-grid {
    min-width: 0;
    table-layout: fixed;
}

.tc-events-report-panel .tc-events-grid th,
.tc-events-report-panel .tc-events-grid td {
    overflow-wrap: anywhere;
    white-space: normal;
}

/* ── Standard grid screen layout contract (9.5LR) ───────────── */
/* Reference: Employees.aspx — see docs/ui/timecount-standard-grid-screen-contract.md */

.tc-screen,
.tc-page {
    margin: 0 auto;
    max-width: 1680px;
    width: 100%;
}

.tc-screen > .tc-page-header,
.tc-screen > .tc-screen-header,
.tc-page > .tc-page-header,
.tc-page > .tc-screen-header {
    margin-bottom: 0;
}

/* ===============================================================
   SHARED MASTER LIST LAYOUT CONTRACT (Phase 2)
   Reusable classes for consistent list-page layout across modules.
   =============================================================== */

/* ── tc-list-page — page-level wrapper for master/list pages ── */
/* Applied to the outer container of list pages. Inherits from
   .tc-page/.tc-screen but without forcing every page to opt in.
   Ensures the content uses available workspace width correctly
   with both expanded and collapsed sidebar modes. */
.tc-list-page {
    max-width: 1680px;
    margin: 0 auto;
    width: 100%;
}

.tc-list-page > .tc-page-header,
.tc-list-page > .tc-screen-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 0;
}

.tc-page-header-text {
    min-width: 0;
}

.tc-page-header-actions {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tc-breadcrumb {
    color: #0f766e;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

/* tc-list-header - page header inside a list page */
.tc-list-header {
    margin-bottom: 18px;
}

/* tc-filter-panel - filter container for list pages */
/* Wraps filter fields and action buttons. Replaces page-specific
   .tc-filter-bar usage with a consistent responsive grid. */
.tc-filter-panel {
    display: grid;
    gap: 14px;
}

/* tc-filter-grid - responsive filter field grid */
/* Uses auto-fit with minmax so fields wrap cleanly at narrower
   widths without empty columns. Replaces the rigid 3-column
   .tc-filter-row-primary for list pages. */
.tc-filter-grid {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tc-filter-grid .tc-field {
    margin-bottom: 0;
    min-width: 0;
}

/* tc-filter-actions - filter action button area */
.tc-filter-actions {
    align-items: center;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
}

.tc-filter-actions .tc-button {
    border-radius: 9px;
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    line-height: 1;
    min-height: 36px;
    padding: 0 13px;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .tc-list-panel .tc-filter-row-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tc-list-panel .tc-filter-row-primary .tc-list-actions {
        grid-column: 1 / -1 !important;
        justify-self: start;
    }
}

@media (max-width: 760px) {
    .tc-list-panel .tc-filter-row-primary {
        grid-template-columns: 1fr !important;
    }
}

.tc-textarea {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--tc-text);
    display: block;
    font: inherit;
    min-height: 80px;
    min-width: 0;
    padding: 10px 12px;
    resize: vertical;
    width: 100%;
}

.tc-textarea:focus {
    border-color: #1a7f8f;
    box-shadow: 0 0 0 3px rgba(26, 127, 143, 0.14);
    outline: none;
}

/* tc-result-summary - result count directly above grid.
   Base rule is block/inline text so bare text + <strong> markup
   stays a single left-aligned sentence. Use --split only when
   the page supplies explicit left/right child blocks. */
.tc-result-summary {
    border-top: 1px solid var(--tc-border);
    color: var(--tc-muted);
    font-size: var(--tc-font-size-body);
    font-weight: 600;
    min-height: 42px;
    padding: 10px 20px;
}

.tc-result-summary--split {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

/* tc-grid-shell - shared grid shell for list pages */
/* Extends .tc-grid-card without overflow:hidden. The scroll
   wrapper inside handles its own overflow. */
.tc-grid-shell {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    font-size: var(--tc-font-size-body);
    font-weight: var(--tc-font-weight-body);
    max-width: 100%;
    min-width: 0;
}

.tc-grid-shell .tc-grid-toolbar {
    margin: 0;
}

.tc-grid-shell .tc-grid-wrap {
    border-top: 0;
}

/* tc-grid-scroll - consistent scroll wrapper */
.tc-grid-scroll {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

/* tc-data-grid - already defined; this reinforces width */
/* Ensures the data grid fills its container without forced
   min-width that would cause unnecessary horizontal scroll. */

/* tc-data-grid--wide - opt-in modifier for report grids */
/* Use on pages where the dataset is genuinely wide and controlled
   horizontal scrolling is expected (e.g. Daily Attendance Report,
   Events Report). */
.tc-data-grid--wide {
    min-width: 980px;
}

.tc-grid-scroll .tc-data-grid--wide,
.tc-grid-wrap .tc-data-grid--wide {
    min-width: 980px;
}

.tc-col-status,
.tc-data-grid th.tc-col-status,
.tc-data-grid td.tc-col-status,
.tc-col-date,
.tc-data-grid th.tc-col-date,
.tc-data-grid td.tc-col-date,
.tc-col-actions,
.tc-data-grid th.tc-col-actions,
.tc-data-grid td.tc-col-actions {
    width: 1%;
    white-space: nowrap;
}

.tc-col-actions,
.tc-data-grid th.tc-col-actions,
.tc-data-grid td.tc-col-actions {
    text-align: right;
}

/* ── Sticky right-column modifier ─────────────────────────── */
/* Used on wide grids (tc-data-grid--wide) so the Actions column
   remains pinned to the right edge during horizontal scroll. */
.tc-col-actions--sticky {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--tc-component-grid-row-bg);
    box-shadow: -8px 0 12px -12px rgba(0, 0, 0, 0.35);
}

.tc-data-grid th.tc-col-actions--sticky {
    z-index: 3;
    background: var(--tc-component-grid-header-bg);
}

.tc-data-grid tbody tr:hover td.tc-col-actions--sticky {
    background: var(--tc-component-grid-row-hover-bg);
}

.tc-status {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 6px;
    line-height: 1.2;
    padding: 4px 10px 4px 8px;
    white-space: nowrap;
}

.tc-status-dot {
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 6px;
    width: 6px;
}

.tc-status--active {
    background: #dcfce7;
    color: #15803d;
}

.tc-status--active .tc-status-dot {
    background: #15803d;
}

.tc-status--inactive {
    background: #fee2e2;
    color: #991b1b;
}

.tc-status--inactive .tc-status-dot {
    background: #991b1b;
}

.tc-status--online {
    background: #dcfce7;
    color: #15803d;
}

.tc-status--online .tc-status-dot {
    background: #15803d;
}

.tc-status--offline {
    background: #fee2e2;
    color: #991b1b;
}

.tc-status--offline .tc-status-dot {
    background: #991b1b;
}

.tc-status--device-inactive {
    background: #e2e8f0;
    color: #475569;
}

.tc-status--device-inactive .tc-status-dot {
    background: #64748b;
}

.tc-status--unknown {
    background: #fef3c7;
    color: #92400e;
}

.tc-status--unknown .tc-status-dot {
    background: #d97706;
}

.tc-device-runtime-status {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.tc-device-monitoring-note {
    color: var(--tc-muted);
    font-size: .72rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* tc-actions-cell - action column button container */
/* Uses compact flex layout so multiple action buttons (Edit,
   Deactivate) stay visible without clipping. Buttons wrap as a
   group only when the viewport is genuinely narrow. */
.tc-actions-cell {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}

.tc-actions-cell .tc-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tc-actions-cell a,
.tc-actions-cell button,
.tc-actions-cell input {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Device Master: compact entitlement columns and non-colliding icon actions. */
.tc-device-filter-grid {
    grid-template-columns: minmax(180px, 1.2fr) minmax(130px, .7fr) minmax(220px, 1.5fr) auto;
}

.tc-device-grid {
    min-width: 1800px;
}

.tc-device-actions-column {
    min-width: 292px;
    width: 292px;
}

.tc-device-actions-column .tc-actions-cell {
    justify-content: flex-start;
}

.tc-device-photo-column {
    min-width: 92px;
    text-align: center;
    width: 92px;
}

.tc-device-photo-fallback {
    align-items: center;
    color: var(--tc-muted);
    display: inline-flex;
    flex-direction: column;
    font-size: .7rem;
    gap: 3px;
    line-height: 1;
}

.tc-device-photo-fallback svg {
    fill: none;
    height: 38px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    width: 48px;
}

.tc-device-warning-icon {
    align-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    font-weight: 700;
    height: 20px;
    justify-content: center;
    margin-right: 8px;
    width: 20px;
}

.tc-device-info-icon {
    align-items: center;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 800;
    height: 20px;
    justify-content: center;
    margin-right: 8px;
    width: 20px;
}

.tc-device-entitlement-summary {
    background: var(--tc-surface-muted, #f8fafc);
    border: 1px solid var(--tc-border, #e2e8f0);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px;
}

.tc-device-entitlement-summary div {
    display: grid;
    gap: 3px;
}

.tc-device-entitlement-summary span {
    color: var(--tc-muted);
    font-size: .75rem;
}

.tc-device-entitlement-summary strong {
    font-size: .875rem;
}

@media (max-width: 900px) {
    .tc-device-filter-grid,
    .tc-device-entitlement-summary {
        grid-template-columns: 1fr;
    }
}

.tc-empty-state {
    color: var(--tc-muted);
    padding: 24px;
    text-align: center;
}

/* Contract master drawer (slide-in). Scoped so .tc-location-drawer shells stay unchanged. */
.tc-drawer-backdrop {
    background: rgba(15, 23, 42, 0.4);
    inset: 0;
    opacity: 0;
    position: fixed;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    z-index: 1000;
}

.tc-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.tc-drawer.tc-master-drawer {
    background: #fff;
    bottom: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100vw;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 480px;
    z-index: 1001;
}

.tc-drawer.tc-master-drawer.is-open {
    transform: translateX(0);
}

.tc-drawer.tc-master-drawer .tc-drawer-header {
    border-bottom: 1px solid var(--tc-border);
    flex-shrink: 0;
    padding: 18px 20px;
}

.tc-drawer.tc-master-drawer .tc-drawer-header h2 {
    color: var(--tc-text);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.tc-drawer-subtitle {
    color: var(--tc-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

.tc-drawer.tc-master-drawer .tc-drawer-body {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
}

.tc-drawer.tc-master-drawer .tc-drawer-footer {
    align-items: center;
    background: #f8fafc;
    border-top: 1px solid var(--tc-border);
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 0;
    padding: 14px 20px;
}

.tc-section-title {
    color: var(--tc-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.tc-required {
    color: #dc3545;
    margin-left: 2px;
}

.tc-hint {
    color: var(--tc-muted);
    font-size: 0.6875rem;
    margin-top: 2px;
}

.tc-readonly-value {
    color: var(--tc-text);
    display: block;
    font-weight: 500;
    padding: 8px 0;
}

.tc-cell-primary {
    color: var(--tc-text);
    font-weight: 500;
}

.tc-cell-muted {
    color: var(--tc-muted);
}

.tc-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.tc-switch {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    position: relative;
    user-select: none;
}

.tc-switch input[type="checkbox"] {
    height: 1px;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 1px;
}

.tc-switch-track {
    background: #ced4da;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
    height: 20px;
    position: relative;
    transition: background 0.2s;
    width: 36px;
}

.tc-switch-track::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    content: "";
    height: 16px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 16px;
}

.tc-switch input[type="checkbox"]:checked + .tc-switch-track,
.tc-switch:has(input[type="checkbox"]:checked) .tc-switch-track {
    background: #198754;
}

.tc-switch input[type="checkbox"]:checked + .tc-switch-track::after,
.tc-switch:has(input[type="checkbox"]:checked) .tc-switch-track::after {
    transform: translateX(16px);
}

.tc-switch-label {
    color: var(--tc-text);
    font-size: 0.8125rem;
    font-weight: 500;
}

body.tc-drawer-open {
    overflow: hidden;
}

@media (max-width: 1024px) {
    .tc-drawer.tc-master-drawer {
        width: 100vw;
    }
}

/* tc-grid-footer - already defined; consistent footer */
/* The existing .tc-grid-footer with flexbox layout handles
   pager + page-size rows correctly. No additional changes needed. */

/* tc-page-size - already defined */
/* The existing .tc-page-size class handles the rows-per-page
   selector. No additional changes needed. */

.tc-filter-card + .tc-grid-card,
.tc-page-header + .tc-filter-card,
.tc-screen-header + .tc-filter-card,
.tc-alert + .tc-filter-card,
.tc-alert + .tc-grid-card {
    margin-top: 0;
}

.tc-filter-card .tc-filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    width: 100%;
}

.tc-filter-card .tc-filter-actions .tc-list-actions {
    margin-left: auto;
}

.tc-recalc-filter-row {
    grid-template-columns: repeat(6, minmax(130px, 1fr));
}

@media (max-width: 1200px) {
    .tc-recalc-filter-row {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 760px) {
    .tc-recalc-filter-row {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 520px) {
    .tc-recalc-filter-row {
        grid-template-columns: 1fr;
    }
}

.tc-grid-card .tc-grid-shell {
    display: grid;
    gap: 0;
}

.tc-grid-summary {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 10px 16px;
}

.tc-grid-summary-item {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tc-grid-summary-label {
    color: var(--tc-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.tc-grid-summary-value {
    color: var(--tc-text);
    font-size: 0.82rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tc-grid-card .tc-grid-toolbar {
    margin: 0;
}

.tc-grid-card .tc-grid-wrap {
    border-top: 0;
}

.tc-grid-card .tc-grid-wrap + .tc-table-pager,
.tc-grid-wrap .tc-table-pager,
.tc-grid-wrap table .tc-table-pager {
    margin-top: 0;
}

/* Queue grid: content-sized columns, no forced min-width; pager must not expand table */
.tc-recalc-queue-grid {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.tc-recalc-queue-grid > tbody > tr > td,
.tc-recalc-queue-grid > tfoot > tr > td,
.tc-recalc-queue-grid > tbody > tr > th {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-recalc-queue-grid .tc-table-pager {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
    overflow-x: auto;
}

.tc-recalc-queue-grid th.tc-select-col,
.tc-recalc-queue-grid td.tc-select-col {
    text-align: center;
    width: 52px;
}

.tc-recalc-queue-grid th.tc-row-num-col,
.tc-recalc-queue-grid td.tc-row-num-col {
    color: var(--tc-muted);
    text-align: center;
    width: 44px;
}

.tc-recalc-queue-grid th,
.tc-recalc-queue-grid td {
    white-space: nowrap;
}

.tc-recalc-queue-grid th:nth-child(4),
.tc-recalc-queue-grid td:nth-child(4) {
    max-width: 120px;
    min-width: 80px;
}

.tc-recalc-queue-grid th:nth-child(5),
.tc-recalc-queue-grid td:nth-child(5) {
    max-width: 200px;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-recalc-queue-grid th:nth-child(6),
.tc-recalc-queue-grid td:nth-child(6) {
    width: 110px;
}

.tc-recalc-status {
    color: var(--tc-primary-dark);
    font-weight: 700;
}

.tc-grid-wrap .tc-recalc-queue-grid,
.tc-grid-card .tc-recalc-queue-grid {
    border-bottom: 1px solid #eef2f7;
    min-width: 0;
}

.tc-button[disabled],
.tc-button.aspNetDisabled,
input[type="submit"][disabled].tc-button {
    background: #e2e8f0;
    border-color: #cbd5e1;
    box-shadow: none;
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
}

/* Shared, opt-in server-action busy presentation. */
.tc-busy-host {
    align-items: stretch;
    display: inline-flex;
    max-width: 100%;
    position: relative;
    vertical-align: middle;
}

.tc-busy-host .tc-busy-presentation {
    align-items: center;
    display: none;
    font: inherit;
    font-weight: 600;
    gap: 7px;
    justify-content: center;
    min-height: inherit;
    padding: 0 12px;
    pointer-events: none;
    white-space: nowrap;
}

.tc-busy-host.is-busy .tc-is-busy {
    pointer-events: none;
    visibility: hidden;
}

.tc-busy-host.is-busy .tc-busy-presentation {
    display: inline-flex;
}

.tc-busy-host.is-busy .tc-is-busy,
.tc-busy-host.is-busy .tc-busy-presentation {
    grid-area: 1 / 1;
}

.tc-busy-host.is-busy {
    display: inline-grid;
}

.tc-busy-spinner {
    animation: tc-busy-spin 0.75s linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    flex: 0 0 auto;
    height: 14px;
    opacity: 0.78;
    width: 14px;
}

.tc-busy-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes tc-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-busy-spinner {
        animation: none;
        border-style: dotted;
    }
}

/* ── GridView pager (Employee Master / standard grid screens) ─ */

.tc-pager,
.tc-table-pager:not(tr) {
    align-items: center;
    background: #ffffff;
    border-top: 1px solid #eef2f7;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    padding: 10px 16px;
}

.tc-data-grid tr.tc-table-pager,
.tc-grid tr.tc-table-pager,
.tc-grid-wrap table tr.tc-table-pager,
.tc-grid-card table tr.tc-table-pager,
.tc-grid-shell table tr.tc-table-pager {
    display: table-row;
}

.tc-data-grid tr.tc-table-pager > td,
.tc-grid tr.tc-table-pager > td,
.tc-grid-wrap table tr.tc-table-pager > td,
.tc-grid-card table tr.tc-table-pager > td,
.tc-grid-shell table tr.tc-table-pager > td {
    background: #ffffff;
    border-top: 1px solid #eef2f7;
    padding: 10px 16px;
    text-align: left;
    white-space: normal;
}

.tc-table-pager table {
    border: 0;
    display: inline-table;
    margin: 0;
    table-layout: auto;
    width: auto;
}

tr.tc-table-pager > td > table,
tr.tc-table-pager > td > table > tbody,
tr.tc-table-pager > td > table > tbody > tr {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    justify-content: flex-start;
    width: auto !important;
}

tr.tc-table-pager > td > table > tbody > tr > td {
    display: inline-flex;
    padding: 0;
    width: auto !important;
}

.tc-table-pager td {
    border: 0;
    padding: 2px;
    white-space: nowrap;
}

.tc-pager span,
.tc-pager a,
.tc-table-pager span,
.tc-table-pager a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #475569;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    min-width: 28px;
    padding: 0 6px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.tc-pager a,
.tc-table-pager a {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #334155;
}

.tc-pager a:hover,
.tc-pager a:focus,
.tc-table-pager a:hover,
.tc-table-pager a:focus {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
    text-decoration: none;
}

.tc-pager span.aspNetDisabled,
.tc-table-pager span.aspNetDisabled {
    background: transparent;
    border-color: transparent;
    color: #94a3b8;
    cursor: default;
}

/* Current page number (non-link span, not disabled nav control) */
.tc-pager span:not(.aspNetDisabled),
.tc-table-pager td span:not(.aspNetDisabled) {
    background: #1a7f8f;
    border-color: #1a7f8f;
    color: #ffffff;
    font-weight: 700;
}

/* External recalculate queue pager (not GridView-emitted table) */
.tc-recalc-queue-pager {
    align-items: center;
    border-top: 1px solid #eef2f7;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
}

.tc-pager-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #334155;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    justify-content: center;
    line-height: 1;
    min-height: 28px;
    min-width: 28px;
    padding: 0 6px;
    text-align: center;
    text-decoration: none;
}

.tc-pager-button:hover,
.tc-pager-button:focus {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
    text-decoration: none;
}

.tc-pager-button.is-active {
    background: #1a7f8f;
    border-color: #1a7f8f;
    color: #ffffff;
    font-weight: 700;
}

.tc-pager-button.is-disabled,
.tc-pager-button.aspNetDisabled,
span.tc-pager-button.aspNetDisabled {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: default;
    opacity: 0.7;
    pointer-events: none;
}

.tc-pager-button.is-navigation {
    min-width: auto;
    padding-left: 9px;
    padding-right: 9px;
}

.tc-pager-ellipsis {
    align-items: center;
    color: #64748b;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
    min-height: 28px;
    min-width: 22px;
    padding: 0 2px;
    user-select: none;
}

body.tc-theme-dark .tc-pager-ellipsis {
    color: var(--tc-component-control-text);
}


/* ── Holidays grid compact — no forced min-width ────────────── */

.tc-holidays-grid {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.tc-holidays-grid th.tc-row-num-col,
.tc-holidays-grid td.tc-row-num-col {
    color: var(--tc-muted);
    text-align: center;
    width: 44px;
}

.tc-holidays-grid td:nth-child(2),
.tc-holidays-grid th:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-holidays-grid th:nth-child(3),
.tc-holidays-grid td:nth-child(3) {
    width: 100px;
}

.tc-holidays-grid th:nth-child(4),
.tc-holidays-grid td:nth-child(4),
.tc-holidays-grid th:nth-child(5),
.tc-holidays-grid td:nth-child(5) {
    width: 110px;
}

.tc-holidays-grid th:nth-child(6),
.tc-holidays-grid td:nth-child(6) {
    text-align: center;
    width: 56px;
}

.tc-holidays-grid th.tc-grid-action-col,
.tc-holidays-grid td.tc-grid-action-col {
    max-width: 72px;
    min-width: 60px;
    padding: 4px 6px !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: 68px;
}

.tc-holidays-grid .tc-grid-action-col .tc-button {
    font-size: 0.75rem;
    min-height: 30px;
    padding: 0 8px;
}

/* ── Leave Transactions grid — explicit column widths (table-layout: fixed) ── */

/*
 * NOTE: In table-layout: fixed mode, the browser divides space based on
 * explicit width declarations from the first row.  max-width is NOT reliably
 * honored in fixed-layout tables, so we use fixed width for columns that
 * must stay compact.  Columns without width (Remarks) flex to fill remaining
 * space naturally.
 */

/* Col 1 — Row number (#) */
.tc-leave-transactions-grid th:nth-child(1),
.tc-leave-transactions-grid td:nth-child(1) {
    text-align: center;
    width: 44px;
}

/* Col 2 — Employee  e.g. "0112 - AMAN KHAN" (~150 px) */
.tc-leave-transactions-grid th:nth-child(2),
.tc-leave-transactions-grid td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 170px;
}

/* Col 3 — Leave Type  e.g. "AL - Annual Leave" (~160 px) */
.tc-leave-transactions-grid th:nth-child(3),
.tc-leave-transactions-grid td:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 170px;
}

/* Col 4 — From Date */
.tc-leave-transactions-grid th:nth-child(4),
.tc-leave-transactions-grid td:nth-child(4) {
    width: 120px;
}

/* Col 5 — To Date */
.tc-leave-transactions-grid th:nth-child(5),
.tc-leave-transactions-grid td:nth-child(5) {
    width: 120px;
}

/* Col 6 — Days */
.tc-leave-transactions-grid th:nth-child(6),
.tc-leave-transactions-grid td:nth-child(6) {
    text-align: center;
    width: 56px;
}

/* Col 7 — Remarks — flex to fill remaining space */
.tc-leave-transactions-grid th:nth-child(7),
.tc-leave-transactions-grid td:nth-child(7) {
    min-width: 140px;
}

/* Col 8 — Status */
.tc-leave-transactions-grid th:nth-child(8),
.tc-leave-transactions-grid td:nth-child(8) {
    text-align: center;
    width: 72px;
    white-space: nowrap;
}

/* Col 9 — Actions */
.tc-leave-transactions-grid th:nth-child(9),
.tc-leave-transactions-grid td:nth-child(9) {
    text-align: center;
    white-space: nowrap;
    width: 72px;
}

.tc-attend-queue-notice {
    bottom: 20px;
    max-width: min(320px, calc(100vw - 32px));
    position: fixed;
    right: 20px;
    z-index: 60;
}

.tc-attend-queue-notice-link,
.tc-attend-queue-notice-text {
    background: #fff8e6;
    border: 1px solid #f0c36d;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    color: #7a4b00;
    display: block;
    font-size: 0.82rem;
    line-height: 1.35;
    padding: 10px 12px;
    text-decoration: none;
}

.tc-attend-queue-notice-link:hover,
.tc-attend-queue-notice-link:focus {
    background: #fff3d6;
    color: #5c3700;
    text-decoration: none;
}

.tc-attend-queue-notice-link strong,
.tc-attend-queue-notice-text strong {
    color: #5c3700;
    display: block;
    font-size: 0.86rem;
    margin-bottom: 2px;
}

.tc-attend-queue-notice-link span,
.tc-attend-queue-notice-text span {
    display: block;
}

/* ── Modify Attendance punch grid — blank state fits card (no forced min-width) ── */

.tc-grid-wrap table.tc-modify-attendance-punch-grid:not(:has(th)),
.tc-grid-wrap table.tc-modify-attendance-punch-grid:has(td[colspan]) {
    min-width: 0;
}

.tc-grid-wrap table.tc-modify-attendance-punch-grid:not(:has(th)) td,
.tc-grid-wrap table.tc-modify-attendance-punch-grid td[colspan] {
    color: #64748b;
    font-size: 0.8125rem;
    padding: 18px;
    text-align: center;
}

/* ── Modify Attendance action-first grid (9.5LZ-L/N) ── */

.tc-modify-attendance-page .tc-modify-attendance-filter-row {
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(160px, 1.1fr) minmax(125px, 0.7fr) minmax(125px, 0.7fr) minmax(130px, 0.85fr);
}

@media (max-width: 1200px) {
    .tc-modify-attendance-page .tc-modify-attendance-filter-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .tc-modify-attendance-page .tc-modify-attendance-filter-row {
        grid-template-columns: 1fr;
    }
}

.tc-modify-attendance-page .tc-grid-summary-value.tc-summary-ok {
    color: #146c43;
}

.tc-modify-attendance-page .tc-grid-summary-value.tc-summary-warn {
    color: #8a5a00;
}

.tc-modify-attendance-page .tc-grid-summary-value.tc-summary-note {
    font-size: 0.78rem;
    font-weight: 600;
}

.tc-modify-attendance-page .tc-modify-attendance-notice {
    background: #fffbeb;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    color: #92400e;
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
    padding: 10px 16px;
}

.tc-modify-attendance-page .tc-grid-wrap table.tc-modify-attendance-grid:not(:has(th)),
.tc-modify-attendance-page .tc-grid-wrap table.tc-modify-attendance-grid:has(td[colspan]) {
    min-width: 0;
}

.tc-modify-attendance-page .tc-grid-wrap table.tc-modify-attendance-grid:not(:has(th)) td,
.tc-modify-attendance-page .tc-grid-wrap table.tc-modify-attendance-grid td[colspan] {
    color: #64748b;
    font-size: 0.8125rem;
    padding: 18px;
    text-align: center;
}

.tc-modify-attendance-page .tc-modify-attendance-grid {
    min-width: 1040px;
    table-layout: auto;
}

.tc-modify-attendance-page .tc-modify-attendance-grid th {
    white-space: normal;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-select {
    text-align: center;
    width: 40px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-action {
    min-width: 108px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-date {
    min-width: 88px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-emp {
    min-width: 130px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-org {
    min-width: 150px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-exception {
    min-width: 88px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-time {
    min-width: 68px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-leave {
    min-width: 100px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-remarks {
    min-width: 120px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-approval {
    min-width: 100px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-hours {
    min-width: 88px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-col-updated {
    text-align: center;
    width: 48px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid input[type="checkbox"] {
    height: 14px;
    width: 14px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-in-time,
.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-out-time {
    max-width: 72px;
    min-height: 30px;
    padding: 4px 7px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-action,
.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-leave-type {
    max-width: 108px;
    min-height: 30px;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-remarks {
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 140px;
    min-height: 30px;
    padding: 4px 7px;
    resize: vertical;
}

.tc-modify-attendance-page .tc-exception-pill {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 999px;
    color: #155e75;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    padding: 3px 8px;
    white-space: nowrap;
}

.tc-modify-attendance-page .tc-status-pill {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #9a3412;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    padding: 3px 8px;
    white-space: nowrap;
}

.tc-modify-attendance-page .tc-status-pill.tc-status-ok {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}

.tc-modify-attendance-page .tc-status-pill.tc-status-warn {
    background: #fffaeb;
    border-color: #fedf89;
    color: #b54708;
}

.tc-modify-attendance-page .tc-modify-attendance-grid tr.tc-ma-row-editing td {
    background: #eff7fb;
}

.tc-modify-attendance-page .tc-modify-attendance-grid tr.tc-ma-row-editing > td:first-child {
    box-shadow: inset 4px 0 0 #7ab8d6;
}

.tc-modify-attendance-page .tc-modify-attendance-grid tr.tc-ma-row-modified td {
    background: #fffdf6;
}

.tc-modify-attendance-page .tc-modify-attendance-grid tr.tc-ma-row-locked td {
    color: #64748b;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-changed-marker {
    color: #b54708;
    display: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
}

.tc-modify-attendance-page .tc-modify-attendance-grid tr.tc-ma-row-modified .tc-ma-changed-marker {
    display: inline;
}

.tc-modify-attendance-page .tc-modify-attendance-grid .tc-ma-approval-lock {
    color: #b42318;
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: 3px;
}

.tc-modify-attendance-page .tc-modify-attendance-rules {
    margin-top: 16px;
}

.tc-modify-attendance-page .tc-modify-attendance-rules .tc-label-sm {
    margin-bottom: 8px;
}

.tc-modify-attendance-page .tc-modify-attendance-rules-list {
    color: #475569;
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0 0 10px;
    padding-left: 1.2rem;
}

.tc-modify-attendance-page .tc-modify-attendance-rules-list li {
    margin-bottom: 6px;
}

.tc-modify-attendance-page .tc-modify-attendance-rules-list strong {
    color: #334155;
    font-weight: 600;
}

.tc-modify-attendance-page .tc-modify-attendance-rules .tc-muted {
    font-size: 0.75rem;
    margin: 0;
}

/* ── Attendance Remarks compact workspace (9.5MB-G) ─────────── */

body.tc-remarks-workspace .tc-content {
    overflow-x: hidden;
    padding: 16px 20px 20px;
}

body.tc-remarks-workspace {
    overflow-x: hidden;
}

.tc-remarks-compact-screen.tc-screen,
.tc-remarks-compact-screen.tc-page {
    gap: 12px;
    max-width: none;
    min-height: 0;
}

.tc-remarks-compact-screen > .tc-page-header,
.tc-remarks-compact-screen > .tc-screen-header {
    margin-bottom: 0;
    padding: 12px 16px;
}

.tc-remarks-compact-panel.tc-filter-card.tc-grid-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 14px 16px 0;
}

.tc-remarks-compact-panel .tc-filter-bar {
    gap: 8px;
    margin-bottom: 10px;
}

.tc-remarks-compact-panel .tc-filter-row-primary {
    gap: 8px 10px;
    grid-template-columns: minmax(150px, 1fr) minmax(200px, 1.2fr) minmax(128px, 0.72fr) minmax(128px, 0.72fr) minmax(140px, 0.78fr) minmax(160px, 0.85fr) auto;
}

.tc-remarks-compact-panel .tc-list-actions .tc-button {
    min-height: 32px;
    padding: 0 12px;
}

.tc-remarks-compact-panel .tc-grid-toolbar {
    background: #f8fafc;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    flex: 0 0 auto;
    margin: 0 -16px;
    padding: 8px 14px;
}

.tc-remarks-compact-panel .tc-grid-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0 -16px;
    min-height: 0;
    min-width: 0;
}

.tc-remarks-compact-panel .tc-grid-wrap {
    flex: 1 1 auto;
    max-height: clamp(240px, calc(100vh - 300px), 72vh);
    max-height: clamp(240px, calc(100dvh - 300px), 72dvh);
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
}

.tc-remarks-compact-panel .tc-grid-footer {
    flex: 0 0 auto;
    margin: 0 -16px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid thead th,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th,
.tc-remarks-compact-panel .tc-attendance-remarks-grid td,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td {
    font-size: 0.73rem;
    line-height: 1.2;
    overflow: hidden;
    padding: 5px 5px;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th {
    overflow-wrap: anywhere;
    white-space: normal;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid td,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td {
    white-space: nowrap;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(1),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(1),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(1),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(1) {
    width: 42px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(2),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(2),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(2),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(2) {
    width: 78px;
    white-space: normal;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(3),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(3),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(3),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(3) {
    width: 54px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(4),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(4),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(4),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(4) {
    width: 96px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(5),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(5),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(5),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(5) {
    width: 104px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(6),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(6),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(6),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(6) {
    width: 70px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(n+7):nth-child(-n+17),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(n+7):nth-child(-n+17) {
    width: 45px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(18),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(18) {
    width: 92px;
    white-space: normal;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(19),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(19) {
    width: 92px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th:nth-child(20),
.tc-remarks-compact-panel .tc-attendance-remarks-grid td:nth-child(20) {
    width: 148px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(n+7):nth-child(-n+14),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(n+7):nth-child(-n+14) {
    width: 52px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(15),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(15) {
    width: 76px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(16),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(16) {
    width: 156px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(17),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(17),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(18),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(18),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th:nth-child(19),
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td:nth-child(19) {
    width: 88px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid tr.tc-table-pager > td,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid tr.tc-table-pager > td {
    background: #ffffff;
    bottom: 0;
    position: sticky;
    z-index: 2;
}

.tc-remarks-compact-panel .tc-col-frozen {
    background: #ffffff;
    box-shadow: none;
    position: static;
    right: auto;
    z-index: 1;
}

.tc-remarks-compact-panel thead .tc-col-frozen {
    background: #f8fafc;
    z-index: 3;
}

.tc-remarks-compact-panel tr:hover .tc-col-frozen,
.tc-remarks-compact-panel tr:hover td.tc-col-frozen {
    background: #f8fafc;
}

.tc-remarks-compact-panel tr.tc-selected-row .tc-col-frozen,
.tc-remarks-compact-panel tr.tc-selected-row td.tc-col-frozen {
    background: #eff7fb;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid th.tc-select-col,
.tc-remarks-compact-panel .tc-attendance-remarks-grid td.tc-select-col,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid th.tc-select-col,
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid td.tc-select-col {
    box-sizing: border-box;
    max-width: 44px;
    min-width: 38px;
    text-align: center;
    width: 42px;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid input[type="checkbox"],
.tc-remarks-compact-panel .tc-attendance-remarks-approval-grid input[type="checkbox"] {
    height: 14px;
    width: 14px;
}

.tc-remarks-compact-panel .tc-submission-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.tc-remarks-compact-panel .tc-submission-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tc-remarks-compact-panel .tc-submission-block label,
.tc-remarks-compact-panel .tc-submission-label {
    color: #475569;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}

.tc-remarks-compact-panel .tc-submission-details textarea,
.tc-remarks-compact-panel .tc-submission-details select,
.tc-remarks-compact-panel .tc-submission-details input {
    box-sizing: border-box;
    width: 100%;
}

.tc-remarks-compact-panel .tc-remarks-input {
    font-size: 0.78rem;
    line-height: 1.25;
    min-height: 32px;
    padding: 4px 6px;
    resize: vertical;
}

.tc-remarks-compact-panel .tc-punch-input {
    max-width: 100%;
}

.tc-remarks-compact-panel .tc-attendance-remarks-grid input[id*="ApprovedOtTextBox"] {
    max-width: 58px;
    min-height: 28px;
    padding: 3px 5px;
    text-align: right;
}

.tc-remarks-compact-panel .tc-approval-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.tc-remarks-compact-panel .tc-approval-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tc-remarks-compact-panel .tc-approval-block label {
    color: #36515a;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
}

.tc-remarks-compact-panel .tc-approval-block textarea,
.tc-remarks-compact-panel .tc-approval-block select {
    box-sizing: border-box;
    width: 100%;
}

.tc-remarks-compact-panel .tc-approval-remarks-input {
    font-size: 0.78rem;
    line-height: 1.25;
    min-height: 32px;
    padding: 4px 6px;
    resize: vertical;
}

.tc-remarks-compact-panel .tc-row-error {
    color: #b42318;
    display: block;
    font-size: 0.78rem;
    margin-top: 4px;
    max-width: 240px;
}

.tc-remarks-compact-panel .tc-status-pill {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    color: #9a3412;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    max-width: 100%;
    padding: 3px 6px;
    white-space: normal;
}

.tc-remarks-compact-panel .tc-verification-pill {
    background: #e8f4f7;
    border-radius: 999px;
    color: #145766;
    display: inline-block;
    font-weight: 600;
    padding: 3px 8px;
    white-space: nowrap;
}

.tc-remarks-compact-panel .tc-verification-pill.tc-not-verified {
    background: #fff4e5;
    color: #8a4b0f;
}

.tc-remarks-compact-panel .tc-selected-row {
    background-color: #eff7fb;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tc-remarks-compact-panel .tc-selected-row > td {
    border-left: 4px solid #7ab8d6;
}

.tc-remarks-compact-panel .tc-exception-pill {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-radius: 999px;
    color: #155e75;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
    padding: 3px 8px;
    white-space: nowrap;
}

.tc-remarks-compact-panel.tc-attendance-remarks-approval-panel .tc-exception-pill {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #803f16;
    font-weight: 700;
    padding: 0;
    white-space: nowrap;
}

@media (max-width: 1320px) {
    .tc-remarks-compact-panel .tc-filter-row-primary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tc-remarks-compact-panel .tc-list-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .tc-remarks-compact-panel .tc-filter-row-primary {
        grid-template-columns: 1fr;
    }

    .tc-remarks-compact-panel .tc-grid-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

body.tc-theme-dark .tc-remarks-compact-panel .tc-grid-toolbar {
    background: var(--tc-soft-surface);
}

body.tc-theme-dark .tc-remarks-compact-panel .tc-col-frozen {
    background: var(--tc-component-grid-row-bg);
}

body.tc-theme-dark .tc-remarks-compact-panel thead .tc-col-frozen {
    background: var(--tc-component-grid-header-bg);
}

body.tc-theme-dark .tc-remarks-compact-panel tr:hover .tc-col-frozen,
body.tc-theme-dark .tc-remarks-compact-panel tr:hover td.tc-col-frozen {
    background: var(--tc-component-grid-row-hover-bg);
}

body.tc-theme-dark .tc-remarks-compact-panel tr.tc-selected-row .tc-col-frozen,
body.tc-theme-dark .tc-remarks-compact-panel tr.tc-selected-row td.tc-col-frozen {
    background: rgba(56, 189, 248, 0.12);
}

body.tc-theme-dark .tc-remarks-compact-panel .tc-attendance-remarks-grid tr.tc-table-pager > td,
body.tc-theme-dark .tc-remarks-compact-panel .tc-attendance-remarks-approval-grid tr.tc-table-pager > td {
    background: var(--tc-component-grid-row-bg);
}

/* ============================================================
   Department Master � assignment drawer + combo (shared contract)
   Moved from DepartmentMaster.aspx HeadContent. No page-specific
   master-list width hacks; drawer width is content-driven for
   assignment grids only.
   ============================================================ */

.tc-department-drawer-backdrop {
    background: rgba(15, 23, 42, 0.38);
}

.tc-department-drawer-shell {
    z-index: 110;
}

.tc-department-drawer {
    animation: tc-department-drawer-enter 0.24s ease-out;
    border-left: 1px solid var(--tc-border);
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.18);
    gap: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    max-width: min(720px, 100vw);
    padding: 0;
    width: 720px;
}

@keyframes tc-department-drawer-enter {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.tc-department-drawer .tc-location-drawer-header {
    align-items: flex-start;
    flex: 0 0 auto;
    padding: 16px 20px 12px;
}

.tc-department-drawer .tc-drawer-title {
    font-size: 1.0625rem;
    font-weight: 700;
}

.tc-department-drawer .tc-drawer-subtitle {
    color: var(--tc-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-top: 2px;
}

.tc-department-drawer .tc-drawer-close {
    height: 30px;
    width: 30px;
}

.tc-department-drawer .tc-drawer-close .tc-button-svg {
    height: 16px;
    width: 16px;
}

.tc-department-context {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: grid;
    gap: 0;
    padding: 8px 14px;
}

.tc-department-context-row {
    align-items: baseline;
    display: grid;
    font-size: 0.8125rem;
    grid-template-columns: 120px minmax(0, 1fr);
    line-height: 1.4;
    padding: 4px 0;
}

.tc-department-context-label {
    color: var(--tc-text);
    font-weight: 500;
}

.tc-department-context-label::after {
    content: ":";
    float: right;
    padding-right: 10px;
}

.tc-department-context-value {
    color: var(--tc-text);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.tc-assignment-section {
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: grid;
    gap: 0;
    min-width: 0;
}

.tc-assignment-section-header {
    align-items: center;
    border-bottom: 1px solid var(--tc-border);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 44px;
    padding: 8px 14px 8px 10px;
}

.tc-assignment-section--timekeeper .tc-assignment-section-header {
    background: linear-gradient(135deg, rgba(15, 76, 92, 0.08), rgba(15, 76, 92, 0.03));
    border-left: 4px solid var(--tc-primary-dark);
}

.tc-assignment-section--approver .tc-assignment-section-header {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.03));
    border-left: 4px solid #7c3aed;
}

.tc-assignment-section h3 {
    align-items: center;
    color: var(--tc-primary-dark);
    display: flex;
    font-size: 0.9375rem;
    gap: 8px;
    line-height: 1.25;
    margin: 0;
}

.tc-assignment-section--approver h3 {
    color: #6d28d9;
}

.tc-assignment-section-icon {
    align-items: center;
    background: var(--tc-primary-dark);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.tc-assignment-section--approver .tc-assignment-section-icon {
    background: #7c3aed;
}

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

.tc-assignment-toggle {
    align-items: center;
    background: var(--tc-soft-surface);
    border: 1px solid var(--tc-border);
    border-radius: 5px;
    color: var(--tc-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.6875rem;
    gap: 6px;
    line-height: 1.2;
    min-height: 26px;
    padding: 4px 8px;
}

.tc-assignment-toggle:hover,
.tc-assignment-toggle:focus {
    border-color: var(--tc-primary);
    color: var(--tc-primary-dark);
    outline: none;
}

.tc-assignment-toggle[disabled] {
    color: var(--tc-muted);
    cursor: default;
}

.tc-assignment-toggle[disabled]:hover,
.tc-assignment-toggle[disabled]:focus {
    border-color: var(--tc-border);
    color: var(--tc-muted);
}

.tc-assignment-toggle-arrow {
    font-size: 0.75rem;
    line-height: 1;
}

.tc-assignment-add-row {
    align-items: flex-end;
    background: var(--tc-soft-surface);
    border-top: 1px solid var(--tc-border);
    display: flex;
    gap: 10px;
    padding: 10px 14px;
}

.tc-assignment-add-row .tc-field {
    flex: 1 1 0;
    margin-bottom: 0;
    min-width: 0;
}

.tc-assignment-add-row .tc-select,
.tc-assignment-add-row .tc-combo {
    width: 100%;
}

.tc-assignment-add-row .tc-combo-input {
    font-size: 0.8125rem;
    min-height: var(--tc-component-control-height-compact);
    padding: 4px 8px;
}

.tc-assignment-add-action {
    flex: 0 0 auto;
}

.tc-department-drawer .tc-assignment-action-btn {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    line-height: 1;
    min-height: 32px;
    min-width: 68px;
    padding: 0 12px;
    white-space: nowrap;
}

.tc-department-drawer .tc-assignment-add-btn {
    font-weight: 600;
}

.tc-department-drawer .tc-assignment-grid {
    table-layout: fixed;
    min-width: 0;
    width: 100%;
}

.tc-department-drawer .tc-grid-wrap .tc-drawer-table {
    min-width: 0;
}

.tc-department-drawer .tc-assignment-grid th,
.tc-department-drawer .tc-assignment-grid td {
    overflow-wrap: anywhere;
    padding: 7px 14px;
    white-space: normal;
    word-break: break-word;
}

.tc-department-drawer .tc-assignment-grid th {
    background: var(--tc-soft-surface);
    color: var(--tc-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tc-department-drawer .tc-assignment-grid td {
    font-size: 0.8125rem;
}

.tc-department-drawer .tc-assignment-employee-col {
    width: auto;
}

.tc-department-drawer .tc-assignment-location-col {
    width: 30%;
}

.tc-department-drawer .tc-assignment-action-col {
    text-align: center;
    white-space: nowrap;
    width: 88px;
}

.tc-department-drawer .tc-assignment-action-col .tc-button {
    justify-content: center;
    min-width: 68px;
    white-space: nowrap;
}

.tc-assignment-row-hidden {
    display: none;
}

.tc-assignment-empty td {
    color: var(--tc-muted);
    font-style: italic;
}

.tc-assignment-empty td::before {
    content: "i";
    border: 1px solid currentColor;
    border-radius: 999px;
    display: inline-flex;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    height: 15px;
    justify-content: center;
    line-height: 13px;
    margin-right: 6px;
    vertical-align: 1px;
    width: 15px;
}

.tc-assignment-note {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    color: var(--tc-muted);
    display: flex;
    margin: 0 0 14px;
    padding: 10px 12px;
}

.tc-assignment-note-icon {
    flex: 0 0 auto;
    height: 17px;
    margin-right: 8px;
    width: 17px;
}

.tc-assignment-section .tc-assignment-note {
    background: #f0f9ff;
    border: 0;
    border-bottom: 1px solid #e0f2fe;
    border-radius: 0;
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
    padding: 8px 14px;
}

body.tc-theme-dark .tc-assignment-section .tc-assignment-note {
    background: rgba(14, 116, 144, 0.14);
    border-bottom-color: rgba(56, 189, 248, 0.24);
    color: var(--tc-text);
}

body.tc-theme-dark .tc-assignment-section--approver h3 {
    color: #c4b5fd;
}

.tc-department-drawer .tc-location-drawer-actions {
    background: var(--tc-surface);
    flex: 0 0 auto;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-top: 0;
    padding: 10px 20px;
}

.tc-department-drawer .tc-location-drawer-body {
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    gap: 14px;
    padding: 14px 20px 20px;
}

.tc-combo {
    position: relative;
    width: 100%;
}

.tc-combo select {
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.tc-combo-input {
    background: #fff;
    cursor: text;
    padding-right: 34px;
    text-overflow: ellipsis;
}

.tc-combo-list {
    background: #fff;
    border: 1px solid var(--tc-border);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    display: none;
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 70;
}

.tc-combo.is-open .tc-combo-list {
    display: block;
}

.tc-combo-option {
    cursor: pointer;
    line-height: 1.25;
    overflow: hidden;
    padding: 9px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-combo-option:hover,
.tc-combo-option.is-active {
    background: #e8f4f7;
}

.tc-combo-option.is-active {
    color: var(--tc-primary-dark);
    font-weight: 700;
}

.tc-combo-empty {
    color: var(--tc-muted);
    padding: 9px 10px;
}

.tc-data-grid th.tc-sortable-header a {
    align-items: center;
    display: inline-flex;
    white-space: nowrap;
}

.tc-data-grid th.tc-sortable-header a::after {
    color: var(--tc-primary-dark);
    content: "\2195";
    font-size: 12px;
    line-height: 1;
    margin-left: 6px;
    opacity: 0.65;
}

.tc-data-grid th.tc-sort-active.tc-sort-asc a::after {
    content: "\25B2";
    opacity: 1;
}

.tc-data-grid th.tc-sort-active.tc-sort-desc a::after {
    content: "\25BC";
    opacity: 1;
}

@media (max-width: 800px) {
    .tc-department-drawer {
        max-width: 100vw;
        width: 100vw;
    }
}

@media (max-width: 560px) {
    .tc-department-drawer {
        height: 100vh;
        height: 100dvh;
        max-height: none;
    }

    .tc-department-drawer .tc-location-drawer-header {
        padding: 14px 14px 11px;
    }

    .tc-department-drawer .tc-location-drawer-body {
        flex: 1 1 auto;
        gap: 12px;
        padding: 12px 12px 16px;
    }

    .tc-department-context-row {
        grid-template-columns: 1fr;
    }

    .tc-department-context-label::after {
        content: none;
    }

    .tc-department-context-value {
        margin-top: 1px;
    }

    .tc-assignment-add-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-assignment-add-action,
    .tc-department-drawer .tc-assignment-add-btn {
        width: 100%;
    }

    .tc-department-drawer .tc-assignment-action-col {
        width: 74px;
    }

    .tc-department-drawer .tc-assignment-grid th,
    .tc-department-drawer .tc-assignment-grid td {
        padding: 7px 8px;
    }

    .tc-department-drawer .tc-location-drawer-actions {
        padding: 10px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-department-drawer {
        animation: none;
    }
}

.tc-entry-panel {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    container-type: inline-size;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 20px;
}

.tc-entry-panel-header {
    display: flex;
    gap: 4px;
}

.tc-entry-panel-header > div {
    flex: 1;
    min-width: 0;
}

.tc-entry-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.tc-entry-panel-description {
    color: var(--tc-muted);
    font-size: 0.8125rem;
    margin: 0;
}

.tc-entry-grid {
    align-items: end;
    display: grid;
    gap: 14px 16px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.tc-entry-span-2 {
    grid-column: span 2;
}

.tc-entry-span-3 {
    grid-column: span 3;
}

.tc-entry-span-4 {
    grid-column: span 4;
}

.tc-entry-span-6 {
    grid-column: span 6;
}

.tc-entry-span-12 {
    grid-column: 1 / -1;
}

.tc-entry-actions-grid {
    align-items: center;
    align-self: end;
    display: flex;
    gap: 8px;
    grid-column: span 4;
    justify-content: flex-end;
    min-height: var(--tc-component-control-height);
}

.tc-entry-actions-grid .tc-button {
    align-items: center;
    block-size: var(--tc-component-control-height);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    min-height: var(--tc-component-control-height);
    padding: 0 13px;
    white-space: nowrap;
}

.tc-entry-weekly-grid .tc-entry-actions-grid {
    grid-column: span 3;
}

.tc-entry-subsection {
    border-top: 1px solid var(--tc-border);
    display: grid;
    gap: 10px;
    padding-top: 12px;
}

.tc-entry-subsection-title {
    color: var(--tc-muted);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0;
}

.tc-entry-preview-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tc-entry-preview-strip {
    background: var(--tc-bg);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

.tc-entry-preview-item {
    background: transparent;
    border: 0;
    border-inline-start: 1px solid var(--tc-border);
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 8px 12px;
}

.tc-entry-preview-item:first-child {
    border-inline-start: 0;
}

.tc-entry-preview-label {
    color: var(--tc-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.tc-entry-preview-value {
    color: var(--tc-text);
    font-size: 0.95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tc-entry-context {
    align-items: center;
    background: var(--tc-bg);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 10px 12px;
}

.tc-entry-context span {
    min-width: 0;
}

.tc-entry-panel .tc-field {
    align-content: end;
    gap: 6px;
    margin-bottom: 0;
}

.tc-entry-panel .tc-label-row,
.tc-entry-panel .tc-field > label {
    align-items: center;
    min-height: 18px;
}

.tc-field--compact-number {
    max-width: 110px;
    min-width: 90px;
}

.tc-entry-panel .tc-input,
.tc-entry-panel .tc-select,
.tc-entry-panel input[type="text"],
.tc-entry-panel input[type="date"],
.tc-entry-panel input[type="time"],
.tc-entry-panel input[type="number"] {
    box-sizing: border-box;
    block-size: var(--tc-component-control-height);
    min-block-size: var(--tc-component-control-height);
    padding: 7px 10px;
}

body.tc-theme-dark .tc-entry-panel {
    background: var(--tc-page-header-bg);
    border-color: var(--tc-border);
}

body.tc-theme-dark .tc-entry-panel-title {
    color: var(--tc-text);
}

body.tc-theme-dark .tc-entry-panel-description {
    color: var(--tc-muted);
}

body.tc-theme-dark .tc-entry-preview-strip,
body.tc-theme-dark .tc-entry-subsection {
    border-color: var(--tc-border);
}

.tc-shift-section-grid {
    align-items: start;
    display: grid;
    gap: 20px 16px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tc-shift-subsection {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.tc-shift-subsection--full {
    grid-column: 1 / -1;
}

.tc-shift-subsection-title {
    align-items: center;
    background: color-mix(in srgb, var(--tc-soft-surface) 86%, var(--tc-primary) 14%);
    border-inline-start: 4px solid var(--tc-primary);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--tc-text);
    display: flex;
    font-size: 0.875rem;
    font-weight: 700;
    inline-size: 100%;
    line-height: 1.25;
    margin: 0 0 2px;
    min-height: 36px;
    padding: 8px 12px;
}

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

.tc-shift-main-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: var(--tc-space-1, 0.25rem);
}

@container (max-width: 920px) {
    .tc-entry-span-3 {
        grid-column: span 6;
    }

    .tc-entry-span-6 {
        grid-column: span 12;
    }

    .tc-entry-span-2 {
        grid-column: span 3;
    }

    .tc-entry-actions-grid {
        grid-column: span 9;
    }

    .tc-shift-main-actions {
        grid-column: 1 / -1;
    }

    .tc-entry-weekly-grid .tc-entry-actions-grid {
        grid-column: 1 / -1;
    }

    .tc-entry-preview-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-entry-preview-item:nth-child(odd) {
        border-inline-start: 0;
    }

    .tc-entry-preview-item:nth-child(n + 3) {
        border-top: 1px solid var(--tc-border);
    }
}

@container (max-width: 760px) {
    .tc-shift-section-grid {
        grid-template-columns: 1fr;
    }
}

@container (max-width: 620px) {
    .tc-entry-span-2,
    .tc-entry-span-3,
    .tc-entry-span-4,
    .tc-entry-span-6,
    .tc-entry-span-12,
    .tc-entry-actions-grid {
        grid-column: 1 / -1;
    }

    .tc-field--compact-number {
        max-width: 110px;
        min-width: 90px;
    }

    .tc-entry-actions-grid {
        justify-content: flex-end;
        width: 100%;
    }

    .tc-entry-preview-strip {
        grid-template-columns: 1fr;
    }

    .tc-entry-preview-item,
    .tc-entry-preview-item:nth-child(n + 3) {
        border-inline-start: 0;
        border-top: 1px solid var(--tc-border);
    }

    .tc-entry-preview-item:first-child {
        border-top: 0;
    }
}

/* Opt-in compact header for operational workspaces. */
.tc-page-header.tc-compact-page-header,
.tc-screen-header.tc-compact-page-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: 76px;
    padding: 4px 16px;
}

.tc-compact-page-header .tc-kicker {
    margin-bottom: 2px;
}

.tc-page-header.tc-compact-page-header h1,
.tc-screen-header.tc-compact-page-header h1 {
    font-size: 1.5rem;
    line-height: 1.05;
}

.tc-compact-page-header .tc-muted {
    margin-top: 3px;
}

@media (max-width: 800px) {
    .tc-page-header.tc-compact-page-header,
    .tc-screen-header.tc-compact-page-header {
        align-items: flex-start;
        flex-direction: column;
        height: auto;
    }
}

/* Exceptional day schedules - Edit Shift only */
.tc-exceptional-day-section {
    margin-top: var(--tc-space-4, 1rem);
    position: relative;
}

.tc-exceptional-day-section .tc-entry-panel-header {
    align-items: flex-start;
    gap: var(--tc-space-3, 0.75rem);
    justify-content: space-between;
}

.tc-exceptional-day-section .tc-entry-panel-actions {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-left: auto;
}

.tc-exceptional-inline-form {
    margin-top: var(--tc-space-4, 1rem);
    padding-top: var(--tc-space-4, 1rem);
    border-top: 1px solid var(--tc-border);
}

.tc-exceptional-form-grid {
    align-items: start;
    display: grid;
    gap: var(--tc-space-4, 1rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tc-exceptional-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.tc-exceptional-fieldset > legend {
    float: left;
    margin: 0 0 14px;
}

.tc-exceptional-group-grid {
    clear: both;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.tc-exceptional-subsection {
    display: grid;
    gap: 12px;
}

.tc-exceptional-subsection--full {
    grid-column: 1 / -1;
}

.tc-field-checkbox {
    justify-content: flex-start;
}

.tc-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    color: var(--tc-text);
    font-weight: 500;
}

.tc-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--tc-primary);
}

.tc-exceptional-schedule-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
}

.tc-exceptional-schedule-stack > span:first-child {
    font-weight: 500;
}

.tc-exceptional-note {
    margin: var(--tc-space-3, 0.75rem) 0 var(--tc-space-4, 1rem);
    color: var(--tc-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.tc-exceptional-day-section .tc-input-readonly,
.tc-input.tc-input-readonly {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--tc-surface-muted, var(--tc-surface));
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm, 0.375rem);
    color: var(--tc-text);
}

.tc-exceptional-day-section .tc-entry-actions-grid {
    margin-top: var(--tc-space-3, 0.75rem);
    justify-content: flex-end;
}

.tc-exceptional-focus-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: color-mix(in srgb, var(--tc-bg) 60%, transparent);
    pointer-events: auto;
}

.tc-exceptional-focus-active .tc-exceptional-day-section.is-exceptional-focus-active {
    z-index: 90;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--tc-text) 18%, transparent);
}

.tc-exceptional-focus-active .tc-exceptional-day-section.is-exceptional-focus-active,
.tc-exceptional-focus-active .tc-exceptional-day-section.is-exceptional-focus-active * {
    pointer-events: auto;
}

.tc-exceptional-focus-active [data-tc-inert-fallback="true"] {
    pointer-events: none;
    user-select: none;
}

body.tc-theme-dark .tc-exceptional-inline-form {
    border-top-color: var(--tc-border);
}

body.tc-theme-dark .tc-input.tc-input-readonly {
    background: var(--tc-surface-muted, var(--tc-soft-surface));
    border-color: var(--tc-border);
    color: var(--tc-text);
}

body.tc-theme-dark .tc-shift-subsection-title {
    background: color-mix(in srgb, var(--tc-soft-surface) 78%, var(--tc-primary) 22%);
    border-inline-start-color: var(--tc-primary-dark);
    color: var(--tc-text);
}

body.tc-theme-dark .tc-exceptional-fieldset {
    border-color: var(--tc-border);
}

@container (max-width: 760px) {
    .tc-exceptional-form-grid {
        grid-template-columns: 1fr;
    }
}

@container (max-width: 560px) {
    .tc-exceptional-day-section .tc-entry-panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .tc-exceptional-day-section .tc-entry-panel-actions {
        width: 100%;
    }

    .tc-exceptional-day-section .tc-entry-panel-actions .tc-button {
        width: 100%;
    }
}

@container (max-width: 620px) {
    .tc-exceptional-day-section .tc-grid-shell .tc-col-actions .tc-actions-cell {
        flex-direction: column;
        align-items: stretch;
    }
}

/* TC-DEVICE-GEOFENCE-001 R5B: Projects / Worksite / Geofence / Policy configuration UI.
   Narrow, additive rules only; reuses existing tc-card/tc-drawer/tc-status/tc-button
   conventions. No new visual framework or external dependency is introduced. */
.tc-cell-link {
    background: none;
    border: 0;
    color: var(--tc-primary-dark);
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    text-align: left;
    text-decoration: none;
}

.tc-cell-link:hover,
.tc-cell-link:focus {
    text-decoration: underline;
}

tr.tc-row-selected > td {
    background: #eff7fb;
}

body.tc-theme-dark tr.tc-row-selected > td {
    background: var(--tc-component-grid-row-hover-bg);
}

.tc-requirement-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 3px 9px;
    white-space: nowrap;
}

.tc-requirement-badge--required {
    background: #dbeafe;
    color: #1d4ed8;
}

.tc-requirement-badge--notrequired {
    background: #e2e8f0;
    color: #475569;
}

.tc-requirement-badge--mixed {
    background: #fef3c7;
    color: #92400e;
}

.tc-status--project-scheduled {
    background: #e0e7ff;
    color: #4338ca;
}

.tc-status--project-scheduled .tc-status-dot {
    background: #4338ca;
}

.tc-status--project-notconfigured {
    background: #e2e8f0;
    color: #475569;
}

.tc-status--project-notconfigured .tc-status-dot {
    background: #64748b;
}

.tc-status--project-warning {
    background: #fef3c7;
    color: #92400e;
}

.tc-status--project-warning .tc-status-dot {
    background: #d97706;
}

.tc-status--project-configured {
    background: #dcfce7;
    color: #15803d;
}

.tc-status--project-configured .tc-status-dot {
    background: #15803d;
}

.tc-project-workspace {
    margin-top: 18px;
}

/* ── Projects Setup: two-state UX (project list ↔ selected-project workspace) ──
   Scoped to the Projects page only. When the server renders a selected project
   (data-tc-projects-state="workspace"), the project-list area is removed from
   the active working view so the selected project's workspace becomes the
   primary page content. Other pages are unaffected. */
.tc-project-page[data-tc-projects-state="workspace"] > .tc-list-panel {
    display: none;
}

.tc-project-page[data-tc-projects-state="workspace"] > .tc-project-workspace {
    margin-top: 0;
}

/* Shared transient notifications. Kept separate from legacy .tc-alert panels. */
.tc-notification-host {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100vh - 40px);
    pointer-events: none;
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    top: max(20px, env(safe-area-inset-top));
    width: min(380px, calc(100vw - 40px));
    z-index: 1050;
}

.tc-notification {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-left: 5px solid #2563eb;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
    color: #1e293b;
    display: grid;
    gap: 10px;
    grid-template-columns: 24px minmax(0, 1fr) 28px;
    max-height: min(320px, calc(100vh - 64px));
    opacity: 0;
    overflow: auto;
    padding: 14px 12px 14px 14px;
    pointer-events: auto;
    position: relative;
    transform: translateY(-8px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.tc-notification.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tc-notification.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}

.tc-notification-success {
    border-left-color: #15803d;
}

.tc-notification-info {
    border-left-color: #2563eb;
}

.tc-notification-warning {
    border-left-color: #b45309;
}

.tc-notification-error {
    border-left-color: #be123c;
}

.tc-notification-progress {
    animation-fill-mode: forwards;
    animation-name: tc-notification-countdown;
    animation-timing-function: linear;
    background: #2563eb;
    bottom: 0;
    height: 3px;
    left: 0;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    right: 0;
    transform: scaleX(1);
    transform-origin: left center;
    z-index: 1;
}

/* Neutral track so the accent fill shrinking to zero is perceptible against something,
   instead of reading as static card chrome. Present only while a countdown is running. */
.tc-notification-has-countdown::after {
    background: rgba(15, 23, 42, 0.12);
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.tc-notification-success .tc-notification-progress {
    background: #15803d;
}

.tc-notification-info .tc-notification-progress {
    background: #2563eb;
}

.tc-notification-warning .tc-notification-progress {
    background: #b45309;
}

.tc-notification-error .tc-notification-progress {
    background: #be123c;
}

.tc-notification.is-timer-paused .tc-notification-progress {
    animation-play-state: paused;
}

@keyframes tc-notification-countdown {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

.tc-notification-icon {
    color: #2563eb;
    display: inline-flex;
    margin-top: 1px;
}

.tc-notification-success .tc-notification-icon {
    color: #15803d;
}

.tc-notification-warning .tc-notification-icon {
    color: #b45309;
}

.tc-notification-error .tc-notification-icon {
    color: #be123c;
}

.tc-notification-icon svg {
    fill: none;
    height: 22px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 22px;
}

.tc-notification-content {
    min-width: 0;
}

.tc-notification-label {
    color: inherit;
    display: block;
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 3px;
}

.tc-notification-message {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.tc-notification-close {
    align-items: center;
    align-self: start;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1.4rem;
    height: 28px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    pointer-events: auto;
    width: 28px;
}

.tc-notification-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.tc-notification-close:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28);
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.tc-notification-more {
    align-self: flex-end;
    background: #334155;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 5px 10px;
}

body.tc-theme-dark .tc-notification {
    background: #172033;
    border-color: #475569;
    color: #f1f5f9;
}

body.tc-theme-dark .tc-notification-success {
    border-left-color: #4ade80;
}

body.tc-theme-dark .tc-notification-info {
    border-left-color: #60a5fa;
}

body.tc-theme-dark .tc-notification-warning {
    border-left-color: #fbbf24;
}

body.tc-theme-dark .tc-notification-error {
    border-left-color: #fb7185;
}

body.tc-theme-dark .tc-notification-success .tc-notification-progress {
    background: #4ade80;
}

body.tc-theme-dark .tc-notification-info .tc-notification-progress {
    background: #60a5fa;
}

body.tc-theme-dark .tc-notification-warning .tc-notification-progress {
    background: #fbbf24;
}

body.tc-theme-dark .tc-notification-error .tc-notification-progress {
    background: #fb7185;
}

body.tc-theme-dark .tc-notification-has-countdown::after {
    background: rgba(226, 232, 240, 0.18);
}

body.tc-theme-dark .tc-notification-success .tc-notification-icon {
    color: #4ade80;
}

body.tc-theme-dark .tc-notification-info .tc-notification-icon {
    color: #60a5fa;
}

body.tc-theme-dark .tc-notification-warning .tc-notification-icon {
    color: #fbbf24;
}

body.tc-theme-dark .tc-notification-error .tc-notification-icon {
    color: #fb7185;
}

body.tc-theme-dark .tc-notification-message,
body.tc-theme-dark .tc-notification-close {
    color: #cbd5e1;
}

body.tc-theme-dark .tc-notification-close:hover {
    background: #263249;
    color: #ffffff;
}

@media (max-width: 520px) {
    .tc-notification-host {
        left: max(12px, env(safe-area-inset-left));
        max-height: calc(100vh - 24px);
        right: max(12px, env(safe-area-inset-right));
        top: max(12px, env(safe-area-inset-top));
        width: auto;
    }

    .tc-notification {
        max-height: min(280px, calc(100vh - 48px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-notification,
    .tc-notification.is-visible,
    .tc-notification.is-leaving {
        transform: none;
        transition: opacity 1ms linear;
    }

    .tc-notification-progress,
    .tc-notification-has-countdown::after {
        display: none;
    }
}

.tc-project-workspace-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.tc-project-workspace-header h2 {
    margin: 2px 0 4px;
}

.tc-project-tabs {
    border-bottom: 1px solid var(--tc-border);
    display: flex;
    gap: 4px;
    margin: 14px 0 16px;
}

.tc-project-tab-button {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--tc-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 12px;
}

.tc-project-tab-button:hover {
    color: var(--tc-primary-dark);
}

.tc-project-tab-button.is-active {
    border-bottom-color: var(--tc-primary);
    color: var(--tc-primary-dark);
}

.tc-project-section {
    display: grid;
    gap: 14px;
}

.tc-project-section-actions {
    display: flex;
    justify-content: flex-end;
}

.tc-project-overview-grid {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    padding: 14px;
}

.tc-project-overview-grid > div {
    display: grid;
    gap: 3px;
}

.tc-project-overview-label {
    color: var(--tc-muted);
    font-size: 0.75rem;
}

.tc-project-health-list {
    display: grid;
    gap: 8px;
}

.tc-project-health-items {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-project-health-items .tc-alert {
    margin-bottom: 0;
}

.tc-policy-card {
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 12px 14px;
}

.tc-policy-card-header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.tc-policy-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 900px) {
    .tc-project-overview-grid {
        grid-template-columns: 1fr;
    }

    .tc-project-workspace-header {
        flex-direction: column;
    }
}

/* ============================================================
   TC-STANDARD-UX-FIXES-001-R5B — Shared mobile component remediation
   ------------------------------------------------------------
   Mobile/tablet only (<=1024px). Desktop (>1024px) is unchanged.
   Remediates the R5 shared-component findings:
     S2-08  drawer height / reachable footer   (rules inline at .tc-drawer,
            .tc-location-drawer and the location-drawer flex children)
     S2-01  global `.tc-table { min-width }` ownership (rule removed inline
            inside the existing max-width:480px block)
     S2-02  horizontal-scroll affordance for operational grids
     S2-06  sub-44px shared touch targets
     S2-07  sub-16px editable controls (iOS Safari focus zoom)
   The application-navigation drawer (R5A) is a separate concern and is not
   modified here. The standalone Login layout (`tc-login-page`) is excluded.
   ============================================================ */

/* --- S2-02: grid horizontal-scroll affordance (JS-assisted) -----------
   The controller appends two aria-hidden overlay spans to the grid's
   positioning host and toggles .tc-has-scroll-x / .tc-scroll-can-left /
   .tc-scroll-can-right from the live scroll state. This is purely
   supplementary: the native scroll container and scrollbar are untouched,
   and no affordance is shown when the grid does not overflow. */
.tc-scroll-host {
    position: relative;
}

.tc-scroll-affordance {
    display: none;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.18s ease;
    z-index: 3;
}

.tc-scroll-affordance-left {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0));
}

.tc-scroll-affordance-right {
    background: linear-gradient(to left, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0));
}

.tc-scroll-host.tc-has-scroll-x > .tc-scroll-affordance {
    display: block;
}

.tc-scroll-host.tc-scroll-can-left > .tc-scroll-affordance-left {
    opacity: 1;
}

.tc-scroll-host.tc-scroll-can-right > .tc-scroll-affordance-right {
    opacity: 1;
}

body.tc-theme-dark .tc-scroll-affordance-left {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

body.tc-theme-dark .tc-scroll-affordance-right {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

@media (prefers-reduced-motion: reduce) {
    .tc-scroll-affordance {
        transition: none;
    }
}

/* --- S2-06 + S2-07: mobile/tablet shared control remediation ---------- */
@media (max-width: 1024px) {
    /* S2-07: editable controls at >=16px prevent iOS Safari focus zoom.
       Only editable controls are raised; table text, labels, badges and
       buttons keep their typography, and desktop is unchanged. */
    body.tc-app-body:not(.tc-login-page) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]),
    body.tc-app-body:not(.tc-login-page) select,
    body.tc-app-body:not(.tc-login-page) textarea {
        font-size: 16px;
    }

    /* S2-06: shared close / icon / pager / option hit areas ~44px.
       The compact visual box is preserved where possible; a larger
       min-height/min-width only enlarges the interactive area. Dense
       in-row grid action buttons (.tc-icon-action, .tc-button-small) are
       an explicit R5B exception (see 06-mobile-input-touch-targets.md). */
    body.tc-app-body .tc-drawer-close,
    body.tc-app-body .tc-drawer-close.tc-button-compact,
    body.tc-app-body .tc-department-drawer .tc-drawer-close {
        height: 44px;
        min-height: 44px;
        min-width: 44px;
        width: 44px;
    }

    body.tc-app-body .tc-notification-close {
        height: 44px;
        min-height: 44px;
        min-width: 44px;
        width: 44px;
    }

    body.tc-app-body .tc-icon-button {
        min-height: 44px;
    }

    body.tc-app-body .tc-pager a,
    body.tc-app-body .tc-pager span,
    body.tc-app-body .tc-table-pager a,
    body.tc-app-body .tc-table-pager span,
    body.tc-app-body .tc-pager-button {
        min-height: 44px;
        min-width: 44px;
    }

    body.tc-app-body .tc-pager-button.is-navigation {
        min-width: auto;
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Checkbox / radio / searchable-option rows get a comfortable tap row. */
    body.tc-app-body .tc-check,
    body.tc-app-body .tc-check label,
    body.tc-app-body .tc-radio-list label,
    body.tc-app-body .tc-combo-option {
        min-height: 44px;
    }
}

/* ============================================================
   TC-STANDARD-UX-FIXES-001-R5C — Projects grid width contract
   ------------------------------------------------------------
   Projects-scoped only (Projects list, Project Devices, Project
   Geofences). The shared scroll container (.tc-grid-wrap /
   .tc-table-wrap / .tc-grid-scroll) and the R5B scroll affordance are
   unchanged, and no other page's tables are affected.

   Why this block exists
   ---------------------
   The shared rule `table.tc-data-grid th { white-space: normal;
   overflow-wrap: anywhere }` lets a header's min-content shrink to a
   single character. The Projects grids had no minimum width of their
   own, so whenever the grid's content min-width was smaller than the
   mobile content column, `width:100%` won, auto layout distributed the
   deficit, and flexible columns were squeezed until headings broke
   character-by-character (measured: "Project Name" rendered as 9 lines
   of ~12px at 393x852). R5B's removal of the global
   `.tc-table { min-width: 980px }` phone override revealed this
   missing Projects-level ownership rather than causing it.

   Minimum widths below are derived from measured single-line column
   widths taken in headless Chromium at 360x800 and 393x852
   (R5C evidence: 03/04/05 column contracts). The heading-only sums are
   the floor at which no Projects heading needs to wrap at all.
   ============================================================ */

/* Headings wrap at word boundaries only — never mid-word, never per
   character. Overrides the shared `overflow-wrap: anywhere` for
   Projects grids only. */
.tc-table.tc-projects-grid th {
    overflow-wrap: normal;
    white-space: normal;
    word-break: normal;
}

/* Identifiers, counts, coordinates, badges, dates and the action cell
   stay on one line so values such as 25-C-017, 9014261300001,
   53.4807571 and "Not Required" can never fragment. The column set is
   named explicitly (rather than relying on the shared
   `.tc-col-status` / `.tc-col-actions` rules) because the
   `white-space: normal` reset above has the same specificity as those
   shared rules and would otherwise win by source order. */
.tc-table.tc-projects-grid th:is(.tc-col-code, .tc-col-nowrap, .tc-col-status, .tc-col-actions, .tc-col-date),
.tc-table.tc-projects-grid td:is(.tc-col-code, .tc-col-nowrap, .tc-col-status, .tc-col-actions, .tc-col-date) {
    overflow-wrap: normal;
    white-space: nowrap;
}

/* Descriptive name columns get a useful floor and wrap at word
   boundaries. `break-word` breaks a single over-long word only as a
   last resort and does not inflate min-content, so it can never make
   the grid wider than its contract. */
.tc-table.tc-projects-grid th.tc-col-name,
.tc-table.tc-projects-grid td.tc-col-name {
    min-width: 150px;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: normal;
}

/* Date columns keep the shared .tc-col-date contract (width:1%;
   nowrap) — covered by the one-line column rule above. Presentation
   only; no date semantics are involved. */

/* --- Per-grid minimum width (evidence-based) ------------------ */
/* Selector specificity must exceed the shared
   `table.tc-data-grid:not(.tc-recalc-queue-grid) { min-width: 0 }`
   rule, so each Projects variant is named in full. */
/* Projects list — 7 columns: Code 103 + Name 160 + Devices 88 +
   Geofence Status 163 + Geofence Required 143 + Status 96 +
   Actions 246. */
table.tc-data-grid.tc-projects-grid.tc-projects-list-grid {
    min-width: 1000px;
}

/* Project Devices — 7 columns: Device Name 170 + Serial Number 130 +
   Device Mode 110 + Effective From 115 + Effective To 105 +
   Status 110 + Actions 228. */
table.tc-data-grid.tc-projects-grid.tc-projects-devices-grid {
    min-width: 968px;
}

/* Project Geofences — 7 columns: Geofence Name 170 + Code 90 +
   Latitude 95 + Longitude 95 + Radius (m) 90 + Status 110 +
   Actions 206. */
table.tc-data-grid.tc-projects-grid.tc-projects-geofence-grid {
    min-width: 856px;
}

/* --- Bounded Projects row-action touch targets (mobile only) ---- */
/* R5B deferred the dense in-row controls (.tc-icon-action /
   .tc-button-small) because a global 44px change would damage grid
   density everywhere. Within Projects only, and only at <=1024px, the
   hit box is raised to the standard 44px target. The visual box grows
   with it, so row height increases; the alternative (a transparent
   hit-area overlay) was rejected as more fragile. */
@media (max-width: 1024px) {
    .tc-table.tc-projects-grid .tc-button-small {
        min-height: 44px;
    }

    .tc-table.tc-projects-grid .tc-icon-action {
        min-height: 44px;
        min-width: 44px;
    }

    /* NOTE (R5C): the Projects detail tabs were measured at 34px tall on
       mobile — a sub-44px hit box. They are deliberately NOT changed here:
       section G of the R5C brief permits a tab change only when a fit or
       wrapping defect is proven, and the four tabs fit on one line at
       360/375/390/393/844/1024/1025/1366/1920 with no wrapping. The
       34px hit box is recorded as a measured residual for the Owner. */
}

/* ============================================================
   TC-STANDARD-UX-FIXES-001-R5D — Login short-viewport vertical flow
   ------------------------------------------------------------
   Login-scoped only (`body.tc-login-page`). No shared shell, drawer,
   grid, form or Projects rule is modified, and no new stylesheet is
   created: the Login rules already live in this file.

   Proven cause (see 02/03 — measured, not assumed)
   ------------------------------------------------
   At <=900px the stacked Login panels were floored with
   `min-height: 50vh`. The sign-in card needs ~350px of content
   (~380px when a validation message is shown). 50vh is smaller than
   that whenever the viewport height is under ~700px, so the card's
   vertically-centred content spilled ABOVE the card box. The brand
   panel is `position: relative` and therefore paints over that
   overflow, clipping "Welcome back".

   Measured at 375x667 before the fix: card box 334px vs 350px needed;
   heading top y=317 while the card box starts at y=334; brand-panel
   overlap with the heading 5,355px^2; document.elementFromPoint() at
   the heading centre returned `section.tc-login-brand-panel`.
   At 393x852 50vh = 426px >= 350px, so the identical markup passed.
   This is a constrained-HEIGHT defect, not a general mobile defect.

   Correction
   ----------
   Let the panels take equal shares of the viewport when it is tall
   enough, and refuse to shrink below their own content when it is not,
   so the page flows and scrolls vertically instead of overlapping.
   Equal halves are preserved wherever they fit, so 390x844, 393x852,
   768x1024 and every desktop width are visually unchanged.
   ============================================================ */

/* (1) The Login document has no .tc-shell, so R5A's fixed body height
       serves no purpose here; releasing it lets the document — rather
       than a height-locked body — become the scroll container when the
       content is taller than a short viewport. */
@media (max-width: 1024px) {
    body.tc-app-body.tc-login-page {
        height: auto;
    }
}

/* (2) Replace the viewport-proportional 50vh floors with content-driven
       flow. `flex: 1 1 0px` keeps the two panels equal while there is
       room; a content-based minimum stops either panel being squeezed
       below its own content, which is what removed the upward spill. */
@media (max-width: 900px) {
    body.tc-app-body.tc-login-page .tc-login-brand-panel,
    body.tc-app-body.tc-login-page .tc-login-card {
        flex: 1 1 0px !important;
        min-height: fit-content;
    }

    body.tc-app-body.tc-login-page form#LoginForm.tc-login-shell {
        height: auto;
    }
}

/* (3) Login inputs measured 15px on mobile — below the 16px threshold
       that stops iOS Safari zooming on focus. R5B's shared rule
       deliberately excludes `.tc-login-page`, so the correction is made
       in Login-scoped CSS and only at <=1024px, leaving desktop
       typography untouched. */
@media (max-width: 1024px) {
    body.tc-app-body.tc-login-page .tc-login-field input {
        font-size: 16px;
    }
}

/* ── R3 (TC-DEMO-MODE-001-R3): Reports Demo data-availability notice ──
   Rendered only from Site.master on the four approved report pages when
   DemoMode=true. Palette mirrors the login tc-login-demo-notice so it
   reads as Demo information, not an application error. */

.tc-report-demo-notice {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 18px;
    padding: 10px 14px;
}

.tc-report-demo-notice strong {
    color: #78350f;
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.tc-report-demo-notice span {
    display: block;
}

/* ── R4 (TC-DEMO-MODE-001-R4): Device Management Demo snapshot notice ──
   Rendered only from DeviceMaster.aspx when DemoMode=true. Same palette as
   the R1 login and R3 report Demo notices so it reads as Demo information,
   not an application error. */

.tc-device-demo-snapshot {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 18px;
    padding: 10px 14px;
}

.tc-device-demo-snapshot strong {
    color: #78350f;
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.tc-device-demo-snapshot p {
    margin: 0;
}