/* TTable - Dynamic Table Library v5 */
/* CSS Variables */
:root {
    --tt-primary: #6B21A8;
    --tt-primary-light: #A855F7;
    --tt-primary-dark: #581C87;
    --tt-success: #10B981;
    --tt-danger: #EF4444;
    --tt-warning: #F59E0B;
    --tt-info: #3B82F6;
    --tt-bg: #FFFFFF;
    --tt-bg-secondary: #F9FAFB;
    --tt-bg-hover: #F3F4F6;
    --tt-page-bg: #F5F7FB;
    --tt-page-bg-end: #EEF3F8;
    --tt-surface-gradient-start: #FFFFFF;
    --tt-surface-gradient-end: #FBFDFF;
    --tt-input-bg: #FFFFFF;
    --tt-border: #E5E7EB;
    --tt-border-strong: #DFE7F1;
    --tt-text: #111827;
    --tt-text-secondary: #6B7280;
    --tt-text-muted: #9CA3AF;
    --tt-canvas-header: #F8FAFC;
    --tt-canvas-frozen: #FBFDFF;
    --tt-canvas-row-alt: #FBFCFF;
    --tt-canvas-row-hover: #F5F8FF;
    --tt-canvas-group: #E8F0FF;
    --tt-canvas-group-soft: #EEF4FF;
    --tt-canvas-grid: #EDF2F7;
    --tt-canvas-grid-strong: #DBE3EF;
    --tt-canvas-resize: rgba(100, 116, 139, 0.24);
    --tt-canvas-selected: rgba(107, 33, 168, 0.08);
    --tt-canvas-selected-border: rgba(107, 33, 168, 0.38);
    --tt-canvas-checkbox: #FFFFFF;
    --tt-canvas-checkbox-border: #64748B;
    --tt-canvas-summary: #334155;
    --tt-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --tt-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --tt-radius: 8px;
    --tt-radius-sm: 4px;
    --tt-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Dark Mode */
[data-theme="dark"] {
    --tt-primary: #A855F7;
    --tt-primary-light: #C084FC;
    --tt-primary-dark: #7C3AED;
    --tt-bg: #111827;
    --tt-bg-secondary: #0B1220;
    --tt-bg-hover: #1F2937;
    --tt-page-bg: #020617;
    --tt-page-bg-end: #0F172A;
    --tt-surface-gradient-start: #111827;
    --tt-surface-gradient-end: #0B1220;
    --tt-input-bg: #0F172A;
    --tt-border: #334155;
    --tt-border-strong: #475569;
    --tt-text: #F9FAFB;
    --tt-text-secondary: #CBD5E1;
    --tt-text-muted: #94A3B8;
    --tt-canvas-header: #0F172A;
    --tt-canvas-frozen: #101827;
    --tt-canvas-row-alt: #0D1524;
    --tt-canvas-row-hover: #1E293B;
    --tt-canvas-group: #221C3A;
    --tt-canvas-group-soft: #1A2440;
    --tt-canvas-grid: rgba(148, 163, 184, 0.16);
    --tt-canvas-grid-strong: rgba(148, 163, 184, 0.26);
    --tt-canvas-resize: rgba(203, 213, 225, 0.28);
    --tt-canvas-selected: rgba(168, 85, 247, 0.16);
    --tt-canvas-selected-border: rgba(192, 132, 252, 0.55);
    --tt-canvas-checkbox: #0B1220;
    --tt-canvas-checkbox-border: #94A3B8;
    --tt-canvas-summary: #CBD5E1;
    --tt-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --tt-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Reset & Base */
.tt-container {
    font-family: var(--tt-font);
    font-size: 14px;
    color: var(--tt-text);
    background: var(--tt-bg);
    width: 100%;
    box-sizing: border-box;
}

.tt-container * {
    box-sizing: border-box;
}

/* Header */
.tt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--tt-bg);
    border-bottom: 1px solid var(--tt-border);
    flex-wrap: wrap;
    gap: 12px;
}

.tt-mobile-header-row {
    display: none;
}

.tt-mobile-menu-trigger {
    display: none;
}

.tt-mobile-toolbar-flyout {
    display: contents;
}

.tt-mobile-toolbar-backdrop,
.tt-mobile-toolbar-sheet-header {
    display: none;
}

.tt-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tt-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tt-toolbar-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tt-toolbar-group {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.tt-toolbar-group .tt-select {
    min-width: 160px;
}

.tt-toolbar-export {
    position: relative;
}

.tt-btn-caret {
    margin-left: 2px;
    color: var(--tt-text-secondary);
    font-size: 10px;
    line-height: 1;
}

.tt-toolbar-label {
    color: var(--tt-text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.tt-v5[data-density="compact"] {
    font-size: 13px;
}

.tt-v5[data-density="compact"] .tt-header {
    padding: 12px 16px;
}

.tt-v5[data-density="compact"] .tt-btn {
    min-height: 32px;
    padding: 6px 10px;
}

.tt-v5[data-density="spacious"] .tt-header {
    padding: 20px 24px;
}

.tt-v5[data-density="spacious"] .tt-btn {
    min-height: 42px;
    padding: 10px 16px;
}

.tt-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
}

.tt-count {
    font-size: 13px;
    color: var(--tt-text-secondary);
    background: var(--tt-bg-secondary);
    padding: 4px 10px;
    border-radius: 12px;
}

/* Search */
.tt-search {
    position: relative;
    justify-self: start;
    min-width: 0;
}

.tt-search-trigger,
.tasks-board-search-trigger {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 22%, var(--tt-border));
    border-radius: 999px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tt-bg) 92%, var(--tt-primary)), var(--tt-input-bg));
    color: var(--tt-primary);
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.tt-search-trigger svg,
.tasks-board-search-trigger svg {
    width: 17px;
    height: 17px;
}

.tt-search-trigger:hover,
.tt-search.is-open .tt-search-trigger,
.tasks-board-search-trigger:hover,
.tasks-board-search.is-open .tasks-board-search-trigger {
    border-color: color-mix(in srgb, var(--tt-primary) 62%, var(--tt-border));
    background: var(--tt-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-primary) 14%, transparent), 0 12px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(-1px);
}

.tt-search.has-value .tt-search-trigger::after,
.tasks-board-search.has-value .tasks-board-search-trigger::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--tt-bg);
    border-radius: 50%;
    background: var(--tt-primary);
}

.tt-search-popover,
.tasks-board-search-popover {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 940;
    display: none;
    width: min(360px, calc(100vw - 24px));
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 20%, var(--tt-border));
    border-radius: 18px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tt-bg) 96%, var(--tt-primary)), var(--tt-bg));
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.tt-search.is-open .tt-search-popover,
.tasks-board-search.is-open .tasks-board-search-popover {
    display: block;
}

.tt-search-popover label,
.tasks-board-search-popover label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 20%, var(--tt-border));
    border-radius: 13px;
    background: var(--tt-input-bg);
}

.tt-search-popover label:has(#ttSearch) {
    border-color: transparent;
}

.tt-search-popover label:focus-within,
.tasks-board-search-popover label:focus-within {
    border-color: color-mix(in srgb, var(--tt-primary) 62%, var(--tt-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-primary) 12%, transparent);
}

.tt-search-popover label > svg,
.tasks-board-search-popover label > svg {
    width: 17px;
    height: 17px;
    color: var(--tt-primary);
}

.tt-search input,
.tasks-board-search input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tt-text);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    box-shadow: none;
}

.tt-search input::placeholder,
.tasks-board-search input::placeholder {
    color: var(--tt-text-muted);
    font-weight: 700;
}

.tt-search-clear,
.tasks-board-search-popover button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tt-text) 8%, transparent);
    color: var(--tt-text-muted);
    cursor: pointer;
}

.tt-search-clear:hover,
.tasks-board-search-popover button:hover {
    background: color-mix(in srgb, var(--tt-primary) 15%, transparent);
    color: var(--tt-primary);
}

.tt-search-popover small,
.tasks-board-search-popover small {
    display: block;
    margin: 8px 4px 0;
    color: var(--tt-text-muted);
    font-size: 11px;
    font-weight: 750;
}

/* Buttons */
.tt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    background: var(--tt-bg);
    color: var(--tt-text);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tt-btn:hover {
    background: var(--tt-bg-hover);
    border-color: var(--tt-text-muted);
}

.tt-btn-icon {
    width: 16px;
    height: 16px;
}

.tt-btn-primary {
    background: var(--tt-primary);
    border-color: var(--tt-primary);
    color: white;
}

.tt-btn-primary:hover {
    background: var(--tt-primary-dark);
    border-color: var(--tt-primary-dark);
}

.tt-btn-secondary {
    background: var(--tt-bg);
    color: var(--tt-text);
}

.tt-btn-secondary:hover {
    border-color: color-mix(in srgb, var(--tt-primary) 34%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary-soft) 54%, var(--tt-bg));
    color: var(--tt-primary);
}

.secondary-button,
.primary-button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--tt-radius);
    font-family: var(--tt-font);
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.secondary-button {
    border: 1px solid var(--tt-border);
    background: var(--tt-bg);
    color: var(--tt-text);
}

.secondary-button:hover {
    border-color: color-mix(in srgb, var(--tt-primary) 36%, var(--tt-border));
    background: var(--tt-bg-hover);
    color: var(--tt-primary);
}

.primary-button {
    border: 1px solid var(--tt-primary);
    background: var(--tt-primary);
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(107, 33, 168, 0.22);
}

.primary-button:hover {
    border-color: var(--tt-primary-dark);
    background: var(--tt-primary-dark);
}

.secondary-button:disabled,
.primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.tt-btn:disabled,
.tt-select:disabled {
    cursor: not-allowed;
    opacity: 0.54;
}

.tt-filter-menu,
.td-filter-menu {
    position: relative;
    z-index: 35;
}

.td-filter-trigger,
.tt-filter-trigger {
    position: relative;
    max-width: 100%;
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
    white-space: nowrap;
}

.td-filter-trigger.is-active,
.tt-filter-trigger.is-active {
    border-color: color-mix(in srgb, var(--tt-primary) 42%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary) 10%, var(--tt-bg));
    color: var(--tt-primary);
}

.td-filter-trigger strong,
.tt-filter-trigger strong {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--tt-primary);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 900;
}

.tt-filter-trigger-icon {
    display: inline-grid;
    place-items: center;
}

.tt-view-toggle,
.tasks-view-toggle {
    min-width: 0;
    min-height: 34px;
    display: inline-grid;
    grid-template-columns: repeat(var(--tt-view-count, 2), minmax(72px, 1fr));
    overflow: hidden;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background: var(--tt-bg-secondary);
}

.tt-view-toggle button,
.tasks-view-toggle button {
    min-width: 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-right: 1px solid var(--tt-border);
    background: transparent;
    color: var(--tt-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
}

.tt-view-toggle button:last-child,
.tasks-view-toggle button:last-child {
    border-right: 0;
}

.tt-view-toggle button.is-active,
.tasks-view-toggle button.is-active {
    background: var(--tt-primary);
    color: #FFFFFF;
}

.tt-view-toggle button:not(.is-active):hover,
.tasks-view-toggle button:not(.is-active):hover {
    background: color-mix(in srgb, var(--tt-primary) 9%, var(--tt-bg));
    color: var(--tt-primary);
}

.td-filter-popover,
.tt-filter-popover {
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    width: min(780px, calc(100vw - 34px));
    max-height: min(78vh, 680px);
    display: grid;
    grid-template-rows: auto auto minmax(96px, 1fr) auto auto auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tt-border) 76%, var(--tt-primary));
    border-radius: 14px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tt-primary) 8%, transparent), transparent 44%),
        var(--tt-bg);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
    color: var(--tt-text);
}

.td-filter-popover *,
.tt-filter-popover * {
    box-sizing: border-box;
}

.tt-filter-menu .tt-filter-popover {
    left: 0;
    right: auto;
}

.td-filter-head,
.tt-filter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--tt-border);
    padding: 14px 16px 12px;
}

.td-filter-head div,
.tt-filter-head div {
    display: grid;
    gap: 3px;
}

.td-filter-head strong,
.tt-filter-head strong {
    color: var(--tt-text);
    font-size: 15px;
    font-weight: 900;
}

.td-filter-head span,
.tt-filter-head span {
    color: var(--tt-text-secondary);
    font-size: 11.5px;
    font-weight: 650;
}

.td-filter-head button,
.td-filter-icon-button,
.td-filter-saved-item > button:last-child,
.tt-filter-head button,
.tt-filter-icon-button,
.tt-filter-saved-item > button:last-child {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--tt-border);
    border-radius: 9px;
    background: var(--tt-bg-secondary);
    color: var(--tt-text-muted);
    cursor: pointer;
}

.td-filter-head button:hover,
.td-filter-icon-button:hover,
.td-filter-saved-item > button:last-child:hover,
.tt-filter-head button:hover,
.tt-filter-icon-button:hover,
.tt-filter-saved-item > button:last-child:hover {
    border-color: color-mix(in srgb, var(--tt-primary) 36%, var(--tt-border));
    color: var(--tt-primary);
}

.td-filter-toolbar,
.tt-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--tt-border);
    padding: 10px 12px;
}

.td-filter-toolbar label,
.td-filter-save-box label,
.tt-filter-toolbar label,
.tt-filter-save-box label {
    display: inline-grid;
    gap: 5px;
    color: var(--tt-text-secondary);
    font-size: 10.5px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.td-filter-toolbar select,
.td-filter-save-box input,
.td-filter-row select,
.td-filter-row input,
.tt-filter-toolbar select,
.tt-filter-save-box input,
.tt-filter-row select,
.tt-filter-row input {
    min-height: 34px;
    border: 1px solid var(--tt-border);
    border-radius: 9px;
    background: var(--tt-input-bg, var(--tt-bg));
    color: var(--tt-text);
    font-size: 12px;
    font-weight: 750;
    outline: none;
}

.td-filter-toolbar select,
.tt-filter-toolbar select {
    min-width: 190px;
    padding: 0 9px;
}

.td-filter-conditions,
.tt-filter-conditions {
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: auto;
    padding: 12px;
    background: color-mix(in srgb, var(--tt-bg-secondary) 52%, transparent);
}

.td-filter-row,
.tt-filter-row {
    display: grid;
    grid-template-columns: 30px minmax(150px, 1.2fr) minmax(130px, 0.9fr) minmax(130px, 1fr) 34px;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--tt-bg) 94%, var(--tt-bg-secondary));
    padding: 7px;
}

.td-filter-row > span,
.tt-filter-row > span {
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-primary) 12%, var(--tt-bg));
    color: var(--tt-primary);
    font-size: 11px;
    font-weight: 900;
}

.td-filter-row select,
.td-filter-row input,
.tt-filter-row select,
.tt-filter-row input {
    width: 100%;
    min-width: 0;
    padding: 0 9px;
}

.td-filter-row input:disabled,
.tt-filter-row input:disabled {
    opacity: 0.62;
    background: var(--tt-bg-secondary);
}

.td-filter-empty,
.tt-filter-empty {
    min-height: 140px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    border: 1px dashed color-mix(in srgb, var(--tt-primary) 34%, var(--tt-border));
    border-radius: 13px;
    background: color-mix(in srgb, var(--tt-bg) 72%, transparent);
    color: var(--tt-text-secondary);
    text-align: center;
    padding: 18px;
}

.tt-filter-empty-icon {
    color: var(--tt-primary);
    font-size: 28px;
    line-height: 1;
}

.td-filter-empty strong,
.tt-filter-empty strong {
    color: var(--tt-text);
    font-size: 13px;
    font-weight: 900;
}

.td-filter-empty p,
.tt-filter-empty p {
    max-width: 320px;
    margin: 0;
    font-size: 11.5px;
    font-weight: 650;
}

.td-filter-save-box,
.tt-filter-save-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    border-top: 1px solid var(--tt-border);
    padding: 11px 12px;
}

.td-filter-save-box input,
.tt-filter-save-box input {
    width: 100%;
    padding: 0 10px;
}

.td-filter-saved,
.tt-filter-saved {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    border-top: 1px solid var(--tt-border);
    padding: 9px 12px;
}

.td-filter-saved > strong,
.tt-filter-saved > strong {
    flex: 0 0 auto;
    color: var(--tt-text-secondary);
    font-size: 10.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.td-filter-saved-item,
.tt-filter-saved-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid var(--tt-border);
    border-radius: 999px;
    background: var(--tt-bg-secondary);
}

.td-filter-saved-item > button,
.tt-filter-saved-item > button {
    min-height: 28px;
    border: 0;
    background: transparent;
    color: var(--tt-text);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
}

.td-filter-saved-item > button:first-child,
.tt-filter-saved-item > button:first-child {
    padding: 0 8px 0 10px;
}

.td-filter-footer,
.tt-filter-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--tt-border);
    padding: 12px;
    background: var(--tt-bg);
}

.tt-btn-danger {
    color: var(--tt-danger);
}

.tt-btn-danger:hover {
    background: #FEE2E2;
    border-color: var(--tt-danger);
}

.tt-btn-sm {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 1;
}

.tt-btn-circle {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
}

/* Filter Tags */
.tt-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 6px 20px 10px;
    flex-wrap: wrap;
}

.tt-filters:empty {
    display: none;
}

.tt-filter-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: var(--tt-primary);
    color: white;
    border-radius: 999px;
}

.tt-filter-tag-remove {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: -3px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.tt-filter-tag-remove:hover {
    background: rgba(255, 255, 255, 0.18);
    opacity: 1;
}

/* Table Wrapper */
.tt-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: var(--tt-bg);
    position: relative;
}

.tt-empty-state {
    position: absolute;
    inset: 62px 20px auto;
    z-index: 5;
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 24px;
    border: 1px dashed var(--tt-border-strong);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-bg) 86%, transparent);
    color: var(--tt-text-secondary);
    text-align: center;
    pointer-events: none;
}

.tt-empty-state strong {
    color: var(--tt-text);
    font-size: 14px;
}

.tt-loading-state {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: color-mix(in srgb, var(--tt-bg) 78%, transparent);
    color: var(--tt-text);
    font-weight: 800;
}

.tt-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--tt-border);
    border-top-color: var(--tt-primary);
    border-radius: 50%;
    animation: ttSpin 0.8s linear infinite;
}

@keyframes ttSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Canvas Virtual Table */
.tt-canvas-table-panel {
    position: relative;
    width: 100%;
    min-height: 360px;
    overflow: hidden;
    background: var(--tt-bg);
    border-bottom: 1px solid var(--tt-border);
}

.tt-canvas-scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: transparent;
}

.tt-canvas-spacer {
    min-width: 100%;
    min-height: 100%;
}

.tt-canvas-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    touch-action: none;
    user-select: none;
}

.tt-canvas-dom-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
}

.tt-canvas-dom-cell {
    position: absolute;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 10px;
    overflow: hidden;
    color: var(--tt-text);
    font-family: var(--tt-font);
}

.tt-canvas-dom-cell > * {
    min-width: 0;
}

.tt-canvas-dom-cell .tt-records-more {
    pointer-events: auto;
}

.tt-canvas-dom-cell .tt-records-first {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-table-column-resizing,
.tt-table-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.tt-canvas-context-menu {
    position: absolute;
    z-index: 1200;
    min-width: 190px;
    padding: 6px;
    background: var(--tt-bg);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    font-family: var(--tt-font);
}

.tt-canvas-context-item {
    width: 100%;
    border: 0;
    border-radius: 6px;
    padding: 9px 10px;
    background: transparent;
    color: var(--tt-text);
    font: 700 12px/1.2 var(--tt-font);
    text-align: left;
    cursor: pointer;
}

.tt-canvas-context-item:hover {
    background: var(--tt-bg-hover);
    color: var(--tt-primary);
}

.tt-canvas-context-item:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.tt-canvas-context-item:disabled:hover {
    background: transparent;
    color: var(--tt-text);
}

.tt-render-info {
    font-variant-numeric: tabular-nums;
}

/* Table */
.tt-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.tt-table th,
.tt-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--tt-border);
    white-space: nowrap;
}

.tt-align-left {
    text-align: left !important;
    justify-content: flex-start;
}

.tt-align-center {
    text-align: center !important;
    justify-content: center;
}

.tt-align-right {
    text-align: right !important;
    justify-content: flex-end;
}

.tt-table th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tt-text-secondary);
    background: var(--tt-bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.tt-table th:hover {
    background: var(--tt-bg-hover);
}

.tt-table th.sorted {
    color: var(--tt-primary);
}

/* Sticky Columns */
.tt-table th.tt-sticky,
.tt-table td.tt-sticky {
    position: sticky;
    background: inherit;
    z-index: 5;
}

.tt-table tbody tr:not([class*='tt-row-highlight']) td.tt-sticky {
    background: var(--tt-bg);
}

.tt-table th.tt-sticky {
    z-index: 15;
    background: var(--tt-bg-secondary);
}

.tt-table th.tt-sticky-left,
.tt-table td.tt-sticky-left {
    left: 0;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.tt-table th.tt-sticky-right,
.tt-table td.tt-sticky-right {
    right: 0;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);
}

.tt-sort-icon {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    opacity: 0.5;
}

.tt-table th.sorted .tt-sort-icon {
    opacity: 1;
}

.tt-table tbody tr {
    transition: background 0.15s;
}

.tt-table tbody tr:hover {
    background: var(--tt-bg-hover);
}

.tt-table tbody tr.selected {
    background: rgba(107, 33, 168, 0.08);
}

/* Row Colors - Highlight */
.tt-table tbody tr.tt-row-highlight-success {
    background: rgba(16, 185, 129, 0.1);
}
.tt-table tbody tr.tt-row-highlight-success:hover {
    background: rgba(16, 185, 129, 0.15);
}

.tt-table tbody tr.tt-row-highlight-danger {
    background: rgba(239, 68, 68, 0.1);
}
.tt-table tbody tr.tt-row-highlight-danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.tt-table tbody tr.tt-row-highlight-warning {
    background: rgba(245, 158, 11, 0.1);
}
.tt-table tbody tr.tt-row-highlight-warning:hover {
    background: rgba(245, 158, 11, 0.15);
}

.tt-table tbody tr.tt-row-highlight-info {
    background: rgba(59, 130, 246, 0.1);
}
.tt-table tbody tr.tt-row-highlight-info:hover {
    background: rgba(59, 130, 246, 0.15);
}

.tt-table tbody tr.tt-row-highlight-primary {
    background: rgba(107, 33, 168, 0.1);
}
.tt-table tbody tr.tt-row-highlight-primary:hover {
    background: rgba(107, 33, 168, 0.15);
}

/* Checkbox */
.tt-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--tt-primary);
}

/* Avatar */
.tt-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tt-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Name Cell */
.tt-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent !important;
}

.tt-name-link {
    color: var(--tt-primary);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
}

.tt-name-link:hover {
    color: var(--tt-primary-dark);
    text-decoration: underline;
}

/* Badge */
.tt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    white-space: nowrap;
}

.tt-badge-success {
    background: #D1FAE5;
    color: #065F46;
}

.tt-badge-danger {
    background: #FEE2E2;
    color: #991B1B;
}

.tt-badge-warning {
    background: #FEF3C7;
    color: #92400E;
}

.tt-badge-info {
    background: #DBEAFE;
    color: #1E40AF;
}

.tt-badge-purple {
    background: #EDE9FE;
    color: #5B21B6;
}

.tt-badge-default {
    background: var(--tt-bg-secondary);
    color: var(--tt-text-secondary);
}

[data-theme="dark"] .tt-badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

[data-theme="dark"] .tt-badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

[data-theme="dark"] .tt-badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
}

[data-theme="dark"] .tt-badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

/* Icon Text Cell */
.tt-icon-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tt-icon-text svg {
    width: 14px;
    height: 14px;
    color: var(--tt-text-muted);
    flex-shrink: 0;
}

/* Text Subtext Cell */
.tt-text-subtext {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tt-text-subtext-title {
    font-weight: 500;
    color: var(--tt-text);
}

.tt-text-subtext-subtitle {
    font-size: 11px;
    color: var(--tt-text-muted);
}

/* Tasks Cell - Barrinhas Icon */
.tt-tasks-cell {
    display: inline-grid;
    grid-template-columns: 16px 3ch;
    align-items: center;
    gap: 7px;
    min-width: calc(16px + 7px + 3ch);
}

.tt-tasks-icon {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 16px;
    height: 16px;
    justify-content: center;
}

.tt-tasks-bar {
    width: 4px;
    background: var(--tt-success);
    border-radius: 1px;
}

.tt-tasks-bar:nth-child(1) {
    height: 6px;
}

.tt-tasks-bar:nth-child(2) {
    height: 10px;
}

.tt-tasks-bar:nth-child(3) {
    height: 14px;
}

.tt-tasks-value {
    min-width: 3ch;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: right;
    color: var(--tt-text);
}

/* Rating Stars */
.tt-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tt-rating-star {
    width: 16px;
    height: 16px;
    color: #E5E7EB;
}

.tt-rating-star.filled {
    color: #F59E0B;
}

.tt-rating-star.half {
    color: #F59E0B;
}

/* Donut Chart */
.tt-donut {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tt-donut-chart {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    overflow: visible;
}

.tt-donut-track,
.tt-donut-ring {
    fill: none;
    stroke-width: 5;
}

.tt-donut-track {
    stroke: var(--tt-bg-secondary);
}

.tt-donut-ring {
    stroke: var(--tt-primary);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.tt-donut-zero .tt-donut-ring {
    stroke: transparent;
}

.tt-donut-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--tt-text);
}

/* Progress Bar */
.tt-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.tt-progress {
    flex: 1;
    height: 16px;
    background: var(--tt-bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    position: relative;
    cursor: pointer;
}

.tt-progress-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.tt-progress-segment:first-child {
    border-radius: 8px 0 0 8px;
}

.tt-progress-segment:last-child {
    border-radius: 0 8px 8px 0;
}

.tt-progress-segment:only-child {
    border-radius: 8px;
}

.tt-progress-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--tt-text);
    min-width: 40px;
    text-align: right;
}

/* Progress Tooltip */
.tt-progress-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--tt-text);
    color: var(--tt-bg);
    padding: 8px 12px;
    border-radius: var(--tt-radius);
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    box-shadow: var(--tt-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.tt-progress-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--tt-text);
}

.tt-progress:hover .tt-progress-tooltip {
    opacity: 1;
    visibility: visible;
}

.tt-progress-tooltip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.tt-progress-tooltip-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Charts Dashboard */
.tt-charts-dashboard,
.td-charts-dashboard {
    min-height: min(640px, calc(100vh - 170px));
    max-height: max(640px, calc(100vh - 170px));
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 14px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tt-bg-secondary) 70%, var(--tt-bg)), var(--tt-bg));
}

.tt-charts-hero,
.td-charts-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--tt-border) 82%, var(--tt-primary));
    border-radius: 8px;
    background: linear-gradient(145deg, var(--tt-bg), color-mix(in srgb, var(--tt-bg-secondary) 76%, var(--tt-bg)));
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    padding: 14px;
}

.tt-charts-hero > div,
.td-charts-hero > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tt-charts-hero-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--tt-primary);
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 950;
}

.tt-charts-hero strong,
.td-charts-hero strong {
    color: var(--tt-text);
    font-size: 17px;
    font-weight: 950;
}

.tt-charts-hero p,
.td-charts-hero p {
    max-width: 760px;
    margin: 3px 0 0;
    color: var(--tt-text-secondary);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
}

.tt-charts-hero-actions,
.td-charts-hero-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.tt-charts-hero-actions .secondary-button,
.td-charts-hero-actions .secondary-button {
    min-height: 34px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 850;
    padding: 0 10px;
    white-space: nowrap;
}

.tt-charts-hero-actions .secondary-button span,
.td-charts-hero-actions .secondary-button span {
    color: var(--tt-primary);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.tt-chart-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tt-chart-kpis article,
.tt-chart-card,
.tt-number-card,
.tt-chart-empty,
.tt-chart-skip,
.tt-chart-constant-table {
    border: 1px solid color-mix(in srgb, var(--tt-border) 86%, var(--tt-primary));
    border-radius: 8px;
    background: var(--tt-bg);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.tt-chart-kpis article {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 14px;
}

.tt-chart-kpis span,
.tt-chart-kpis em,
.tt-chart-card header span,
.tt-chart-section > header span,
.tt-number-card header span {
    color: var(--tt-text-secondary);
    font-size: 11px;
    font-weight: 800;
}

.tt-chart-kpis strong {
    color: var(--tt-text);
    font-size: 24px;
    font-weight: 950;
}

.tt-chart-kpis em {
    font-style: normal;
}

.tt-chart-main-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    gap: 12px;
}

.tt-chart-section {
    display: grid;
    gap: 10px;
}

.tt-chart-section > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
}

.tt-chart-section > header strong {
    color: var(--tt-text);
    font-size: 14px;
    font-weight: 950;
}

.tt-text-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.tt-chart-card.is-bubble {
    grid-column: span 2;
}

.tt-chart-card,
.tt-number-card {
    min-width: 0;
    padding: 14px;
}

.tt-chart-card > header,
.tt-number-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tt-chart-card > header strong,
.tt-number-card > header strong {
    display: block;
    color: var(--tt-text);
    font-size: 14px;
    font-weight: 950;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.tt-chart-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-primary) 11%, var(--tt-bg));
    color: var(--tt-primary);
    font-size: 18px;
    font-weight: 950;
}

.tt-chart-pie-grid {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.tt-chart-pie-wrap {
    position: relative;
    display: grid;
    place-items: center;
}

.tt-chart-pie {
    width: 126px;
    height: 126px;
    transform: rotate(-90deg);
}

.tt-chart-pie-track,
.tt-chart-pie-segment {
    fill: none;
    stroke-width: 16;
}

.tt-chart-pie-track {
    stroke: color-mix(in srgb, var(--tt-border) 68%, var(--tt-bg));
}

.tt-chart-pie-segment {
    stroke-linecap: butt;
}

.tt-chart-pie-wrap strong {
    position: absolute;
    color: var(--tt-text);
    font-size: 18px;
    font-weight: 950;
}

.tt-chart-legend,
.tt-chart-bars {
    display: grid;
    gap: 8px;
}

.tt-chart-legend-row {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.tt-chart-legend-row > span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.tt-chart-legend-row strong,
.tt-chart-bar-row > span {
    min-width: 0;
    overflow: hidden;
    color: var(--tt-text);
    font-size: 11.5px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-chart-legend-row em {
    color: var(--tt-text-secondary);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 800;
}

.tt-chart-bar-row {
    display: grid;
    grid-template-columns: minmax(86px, 0.62fr) minmax(120px, 1fr) 58px;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
}

.tt-chart-bar-row > div {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tt-border) 72%, transparent);
}

.tt-chart-bar-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--tt-primary);
}

.tt-chart-bar-row strong {
    color: var(--tt-text);
    font-size: 11px;
    font-weight: 900;
    text-align: right;
}

.tt-chart-bubbles {
    min-height: 286px;
    max-height: min(520px, 58vh);
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    grid-auto-rows: 54px;
    grid-auto-flow: dense;
    align-items: center;
    justify-items: center;
    gap: 12px 10px;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background:
        radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--tt-primary-soft) 54%, transparent), transparent 34%),
        color-mix(in srgb, var(--tt-bg-secondary) 76%, var(--tt-bg));
    padding: 30px 22px 36px;
}

.tt-chart-bubble-wrap {
    position: relative;
    z-index: 1;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    transform: translate(var(--bubble-dx, 0), var(--bubble-dy, 0));
}

.tt-chart-bubble-wrap.is-active {
    z-index: 7;
}

.tt-chart-bubble {
    width: var(--bubble-size);
    height: var(--bubble-size);
    min-width: var(--bubble-size);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 36%),
        var(--bubble-color);
    box-shadow: inset 0 -10px 22px rgba(15, 23, 42, 0.12), 0 10px 20px rgba(15, 23, 42, 0.1);
    color: #FFFFFF;
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.tt-chart-bubble:hover,
.tt-chart-bubble:focus-visible,
.tt-chart-bubble[aria-expanded="true"] {
    filter: saturate(1.08);
    outline: none;
    transform: scale(1.07);
    box-shadow: inset 0 -10px 22px rgba(15, 23, 42, 0.14), 0 15px 28px color-mix(in srgb, var(--tt-primary) 28%, transparent);
}

.tt-chart-bubble strong {
    max-width: 86%;
    overflow: hidden;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-chart-bubble em,
.tt-chart-bubble span {
    max-width: 82%;
    overflow: hidden;
    font-size: 8.5px;
    font-style: normal;
    font-weight: 850;
    line-height: 1.05;
    opacity: 0.9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-chart-bubble.is-compact span {
    display: none;
}

.tt-chart-bubble-dropdown,
.td-chart-bubble-dropdown {
    position: fixed;
    z-index: 10050;
    display: grid;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 28%, var(--tt-border));
    border-radius: 12px;
    background: var(--tt-bg);
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
    padding: 12px;
}

.tt-chart-bubble-dropdown::before,
.td-chart-bubble-dropdown::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 12px;
    height: 12px;
    border-left: 1px solid color-mix(in srgb, var(--tt-primary) 28%, var(--tt-border));
    border-top: 1px solid color-mix(in srgb, var(--tt-primary) 28%, var(--tt-border));
    background: var(--tt-bg);
}

.tt-chart-bubble-dropdown.is-down::before,
.td-chart-bubble-dropdown.is-down::before {
    top: -7px;
    transform: translateX(-50%) rotate(45deg);
}

.tt-chart-bubble-dropdown.is-up::before,
.td-chart-bubble-dropdown.is-up::before {
    bottom: -7px;
    transform: translateX(-50%) rotate(225deg);
}

.tt-chart-bubble-dropdown header,
.td-chart-bubble-dropdown header {
    min-width: 0;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.tt-chart-bubble-dropdown header span,
.td-chart-bubble-dropdown header span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.tt-chart-bubble-dropdown header strong,
.td-chart-bubble-dropdown header strong {
    min-width: 0;
    overflow: hidden;
    color: var(--tt-text);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-chart-bubble-dropdown dl,
.td-chart-bubble-dropdown dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
}

.tt-chart-bubble-dropdown dl div,
.td-chart-bubble-dropdown dl div {
    min-width: 0;
    border: 1px solid var(--tt-border);
    border-radius: 9px;
    background: color-mix(in srgb, var(--tt-bg-secondary) 78%, var(--tt-bg));
    padding: 7px;
}

.tt-chart-bubble-dropdown dt,
.td-chart-bubble-dropdown dt {
    overflow: hidden;
    color: var(--tt-text-secondary);
    font-size: 9px;
    font-weight: 850;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.tt-chart-bubble-dropdown dd,
.td-chart-bubble-dropdown dd {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--tt-primary);
    font-size: 13px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-chart-bubble-dropdown p,
.td-chart-bubble-dropdown p {
    margin: 0;
    color: var(--tt-text-secondary);
    font-size: 11px;
    font-weight: 720;
    line-height: 1.35;
}

.tt-import-modal {
    width: min(1120px, calc(100vw - 28px));
    max-height: min(92vh, 920px);
    overflow: hidden;
}

.tt-import-modal > .tabular-import-wizard {
    min-height: 0;
    overflow: auto;
    padding: 0 18px 18px;
}

.tabular-import-wizard {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.tabular-import-wizard__header {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 22%, var(--tt-border));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tt-primary-soft) 74%, transparent), transparent 72%),
        color-mix(in srgb, var(--tt-bg-secondary) 82%, var(--tt-bg));
    padding: 14px 16px;
}

.tabular-import-wizard__header strong {
    display: block;
    color: var(--tt-text);
    font-size: 15px;
    font-weight: 950;
}

.tabular-import-wizard__header p,
.tabular-import-wizard__header span {
    margin: 4px 0 0;
    color: var(--tt-text-secondary);
    font-size: 12px;
    font-weight: 750;
}

.tabular-import-steps {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.tabular-import-step {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--tt-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tt-bg-secondary) 78%, var(--tt-bg));
    color: var(--tt-text-secondary);
    padding: 9px 11px;
    font-size: 11px;
    font-weight: 900;
}

.tabular-import-step span {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tt-border) 70%, transparent);
    color: inherit;
}

.tabular-import-step.active,
.tabular-import-step.done {
    border-color: color-mix(in srgb, var(--tt-primary) 44%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary-soft) 76%, var(--tt-bg));
    color: var(--tt-primary);
}

.tabular-import-alert {
    border: 1px solid color-mix(in srgb, var(--tt-danger) 34%, var(--tt-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-danger) 10%, var(--tt-bg));
    color: var(--tt-danger);
    padding: 12px 13px;
    font-size: 13px;
    font-weight: 800;
}

.tabular-import-content {
    min-width: 0;
    display: grid;
    gap: 14px;
}

.tabular-import-dropzone {
    min-height: 236px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    border: 1px dashed color-mix(in srgb, var(--tt-primary) 48%, var(--tt-border));
    border-radius: 12px;
    background:
        radial-gradient(circle at 22% 10%, color-mix(in srgb, var(--tt-primary-soft) 60%, transparent), transparent 36%),
        color-mix(in srgb, var(--tt-bg-secondary) 78%, var(--tt-bg));
    color: var(--tt-text-secondary);
    padding: 32px;
    text-align: center;
    cursor: pointer;
}

.tabular-import-dropzone:hover {
    border-color: var(--tt-primary);
}

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

.tabular-import-dropzone-icon,
.tabular-import-result-icon {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: var(--tt-primary-soft);
    color: var(--tt-primary);
    font-size: 24px;
    font-weight: 950;
}

.tabular-import-dropzone strong {
    color: var(--tt-text);
    font-size: 15px;
    font-weight: 950;
}

.tabular-import-dropzone span:not(.tabular-import-dropzone-icon) {
    max-width: 520px;
    color: var(--tt-text-secondary);
    font-size: 12px;
    font-weight: 760;
}

.tabular-import-sheet-list,
.tabular-import-header-list,
.tabular-import-map-table {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.tabular-import-sheet,
.tabular-import-header-row,
.tabular-import-map-row {
    min-width: 0;
    display: grid;
    gap: 10px;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background: var(--tt-bg);
    padding: 13px;
}

.tabular-import-sheet,
.tabular-import-header-row {
    grid-template-columns: auto minmax(140px, 0.35fr) minmax(0, 1fr);
    align-items: center;
}

.tabular-import-sheet.active,
.tabular-import-header-row.active,
.tabular-import-map-row.required {
    border-color: color-mix(in srgb, var(--tt-primary) 42%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary-soft) 58%, var(--tt-bg));
}

.tabular-import-header-row span,
.tabular-import-sheet span,
.tabular-import-map-row small {
    min-width: 0;
    color: var(--tt-text-secondary);
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 730;
}

.tabular-import-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tabular-import-section-head strong {
    display: block;
    color: var(--tt-text);
    font-size: 14px;
    font-weight: 950;
}

.tabular-import-section-head span {
    color: var(--tt-text-secondary);
    font-size: 12px;
    font-weight: 780;
}

.tabular-import-map-head,
.tabular-import-map-row {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    align-items: center;
}

.tabular-import-map-head {
    display: grid;
    gap: 10px;
    color: var(--tt-text-secondary);
    padding: 0 13px;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.tabular-import-map-row strong {
    display: block;
    color: var(--tt-text);
    font-size: 13px;
    font-weight: 900;
}

.tabular-import-map-row select,
.tabular-import-preview-table input {
    width: 100%;
    min-width: 0;
}

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

.tabular-import-summary-grid > div {
    min-width: 0;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-bg-secondary) 76%, var(--tt-bg));
    padding: 13px;
}

.tabular-import-summary-grid strong {
    display: block;
    color: var(--tt-text);
    font-size: 18px;
    font-weight: 950;
}

.tabular-import-summary-grid span {
    color: var(--tt-text-secondary);
    font-size: 11px;
    font-weight: 850;
}

.tabular-import-summary-grid .ok strong {
    color: var(--tt-success);
}

.tabular-import-summary-grid .bad strong {
    color: var(--tt-danger);
}

.tabular-import-preview-wrap {
    max-height: min(440px, 52vh);
    overflow: auto;
    border: 1px solid var(--tt-border);
    border-radius: 10px;
}

.tabular-import-preview-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: var(--tt-bg);
}

.tabular-import-preview-table th,
.tabular-import-preview-table td {
    border-bottom: 1px solid var(--tt-border);
    padding: 9px 10px;
    color: var(--tt-text);
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
}

.tabular-import-preview-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--tt-bg-secondary);
    color: var(--tt-text-secondary);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.tabular-import-preview-table tr.has-error td {
    background: color-mix(in srgb, var(--tt-danger) 9%, var(--tt-bg));
}

.tabular-import-preview-table input {
    border: 1px solid var(--tt-border);
    border-radius: 7px;
    background: var(--tt-bg);
    color: var(--tt-text);
    padding: 8px 9px;
    font: inherit;
}

.tabular-import-result {
    min-height: 260px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    border: 1px solid color-mix(in srgb, var(--tt-success) 32%, var(--tt-border));
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--tt-success) 10%, transparent), transparent),
        color-mix(in srgb, var(--tt-bg-secondary) 70%, var(--tt-bg));
    padding: 32px;
    color: var(--tt-success);
    text-align: center;
}

.tabular-import-result > strong {
    color: var(--tt-text);
    font-size: 16px;
    font-weight: 950;
}

.tabular-import-result-errors {
    width: min(100%, 760px);
    border: 1px solid color-mix(in srgb, var(--tt-danger) 34%, var(--tt-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-danger) 9%, var(--tt-bg));
    color: var(--tt-danger);
    padding: 13px;
    text-align: left;
}

.tabular-import-result-errors strong {
    display: block;
    margin-bottom: 7px;
}

.tabular-import-result-errors ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
}

.tabular-import-actions {
    position: sticky;
    bottom: -1px;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--tt-border);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tt-bg) 0%, transparent), var(--tt-bg) 28%),
        var(--tt-bg);
    padding: 14px 0 0;
}

.tt-number-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.tt-number-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.tt-number-card dl div {
    min-width: 0;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-bg-secondary) 72%, transparent);
    padding: 9px;
}

.tt-number-card dt {
    color: var(--tt-text-secondary);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.tt-number-card dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    color: var(--tt-text);
    font-size: 16px;
    font-weight: 950;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
}

.tt-chart-constant-table {
    overflow: hidden;
}

.tt-chart-constant-head,
.tt-chart-constant-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.3fr) 96px;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
}

.tt-chart-constant-head {
    border-bottom: 1px solid var(--tt-border);
    background: var(--tt-bg-secondary);
    color: var(--tt-text-secondary);
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.tt-chart-constant-row {
    min-height: 48px;
    border-bottom: 1px solid color-mix(in srgb, var(--tt-border) 70%, transparent);
}

.tt-chart-constant-row:last-child {
    border-bottom: 0;
}

.tt-chart-constant-row strong,
.tt-chart-constant-row span,
.tt-chart-constant-row em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-chart-constant-row strong {
    color: var(--tt-text);
    font-size: 12px;
    font-weight: 900;
}

.tt-chart-constant-row span {
    color: var(--tt-text);
    font-size: 12px;
    font-weight: 700;
}

.tt-chart-constant-row em {
    color: var(--tt-text-secondary);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    text-align: right;
}

.tt-chart-skip,
.tt-chart-empty {
    display: grid;
    gap: 4px;
    padding: 14px;
}

.tt-chart-skip strong,
.tt-chart-empty strong {
    color: var(--tt-text);
    font-size: 13px;
    font-weight: 950;
}

.tt-chart-skip p,
.tt-chart-empty p {
    margin: 0;
    color: var(--tt-text-secondary);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.4;
}

/* Calendar View */
.tt-calendar-dashboard {
    min-height: min(640px, calc(100vh - 170px));
    max-height: max(640px, calc(100vh - 170px));
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 14px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--tt-bg-secondary) 72%, var(--tt-bg)), var(--tt-bg));
}

.tt-calendar-hero,
.tt-calendar-topbar,
.tt-calendar-day-cell,
.tt-calendar-mini-month,
.tt-calendar-empty,
.tt-calendar-record-list {
    border: 1px solid color-mix(in srgb, var(--tt-border) 84%, var(--tt-primary));
    border-radius: 8px;
    background: var(--tt-bg);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.tt-calendar-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
}

.tt-calendar-hero-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tt-calendar-hero-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--tt-primary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.tt-calendar-hero strong {
    color: var(--tt-text);
    font-size: 17px;
    font-weight: 950;
}

.tt-calendar-hero p {
    max-width: 780px;
    margin: 3px 0 0;
    color: var(--tt-text-secondary);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.45;
}

.tt-calendar-actions,
.tt-calendar-view-buttons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.tt-calendar-nav,
.tt-calendar-today,
.tt-calendar-view-buttons button {
    min-height: 34px;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background: var(--tt-bg-secondary);
    color: var(--tt-text);
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    padding: 0 10px;
    cursor: pointer;
}

.tt-calendar-nav {
    width: 34px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
}

.tt-calendar-view-buttons button.is-active {
    border-color: color-mix(in srgb, var(--tt-primary) 70%, var(--tt-border));
    background: var(--tt-primary);
    color: #FFFFFF;
}

.tt-calendar-nav:hover,
.tt-calendar-today:hover,
.tt-calendar-view-buttons button:not(.is-active):hover {
    border-color: color-mix(in srgb, var(--tt-primary) 60%, var(--tt-border));
    color: var(--tt-primary);
}

.tt-calendar-topbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.tt-calendar-title-block {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.tt-calendar-title-block span,
.tt-calendar-total span {
    color: var(--tt-text-secondary);
    font-size: 11px;
    font-weight: 850;
}

.tt-calendar-title-block strong {
    color: var(--tt-text);
    font-size: 18px;
    font-weight: 950;
    line-height: 1.15;
}

.tt-calendar-total {
    min-width: 104px;
    display: grid;
    justify-items: end;
    gap: 2px;
}

.tt-calendar-total strong {
    color: var(--tt-text);
    font-size: 20px;
    font-weight: 950;
}

.tt-calendar-month,
.tt-calendar-mini-month {
    display: grid;
    gap: 8px;
}

.tt-calendar-weekdays,
.tt-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.tt-calendar-weekdays span {
    color: var(--tt-text-secondary);
    font-size: 10px;
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
}

.tt-calendar-day-cell {
    min-width: 0;
    min-height: 128px;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: hidden;
    position: relative;
    padding: 10px;
}

.tt-calendar-day-cell.is-muted {
    opacity: 0.48;
}

.tt-calendar-day-cell.is-today {
    border-color: color-mix(in srgb, var(--tt-primary) 68%, var(--tt-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tt-primary) 25%, transparent), 0 14px 34px rgba(15, 23, 42, 0.08);
}

.tt-calendar-day-cell.has-data::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tt-primary), color-mix(in srgb, var(--tt-primary) 45%, #16a34a));
}

.tt-calendar-day-cell header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tt-calendar-day-cell header span {
    color: var(--tt-text-secondary);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.tt-calendar-day-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background: var(--tt-bg-secondary);
    color: var(--tt-text);
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.tt-calendar-day-number:hover {
    border-color: var(--tt-primary);
    background: color-mix(in srgb, var(--tt-primary) 10%, var(--tt-bg));
    color: var(--tt-primary);
}

.tt-calendar-metric {
    display: grid;
    gap: 2px;
}

.tt-calendar-metric strong {
    color: var(--tt-text);
    font-size: 28px;
    font-weight: 950;
    line-height: 1;
}

.tt-calendar-metric span {
    color: var(--tt-text-secondary);
    font-size: 11px;
    font-weight: 800;
}

.tt-calendar-metric.is-compact strong {
    font-size: 16px;
}

.tt-calendar-variation {
    width: max-content;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    padding: 3px 7px;
}

.tt-calendar-variation.is-up {
    background: color-mix(in srgb, #16a34a 14%, var(--tt-bg));
    color: #15803d;
}

.tt-calendar-variation.is-down {
    background: color-mix(in srgb, #ef4444 14%, var(--tt-bg));
    color: #dc2626;
}

.tt-calendar-variation.is-flat {
    background: color-mix(in srgb, var(--tt-text-secondary) 12%, var(--tt-bg));
    color: var(--tt-text-secondary);
}

.tt-calendar-record-list {
    display: grid;
    gap: 6px;
}

.tt-calendar-records-button {
    min-width: 0;
    display: grid;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 16%, var(--tt-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-primary) 7%, var(--tt-bg));
    color: var(--tt-text);
    font: inherit;
    text-align: left;
    padding: 8px 9px;
    cursor: pointer;
}

.tt-calendar-records-button:hover {
    border-color: color-mix(in srgb, var(--tt-primary) 50%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary) 12%, var(--tt-bg));
}

.tt-calendar-records-button strong {
    display: block;
    overflow: hidden;
    color: var(--tt-text);
    font-size: 11.5px;
    font-weight: 950;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-calendar-records-button span {
    display: block;
    overflow: hidden;
    color: var(--tt-text-secondary);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-calendar-records-button.is-large {
    align-self: start;
    min-height: 74px;
    align-content: center;
    padding: 12px;
}

.tt-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 10px;
}

.tt-calendar-single-day {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1.15fr);
    gap: 12px;
}

.tt-calendar-record-list {
    align-content: start;
    padding: 12px;
}

.tt-calendar-record-list p {
    margin: 0;
    color: var(--tt-text-secondary);
    font-size: 12px;
    font-weight: 750;
}

.tt-calendar-records-modal {
    width: min(1320px, calc(100vw - 28px));
    height: min(860px, calc(100vh - 28px));
    max-height: calc(100vh - 28px);
    overflow: hidden;
}

.tt-calendar-records-body {
    min-height: 0;
    height: calc(100% - 104px);
    display: grid;
    grid-template-columns: minmax(230px, 20%) minmax(0, 80%);
    gap: 0;
    overflow: hidden !important;
    padding: 0;
}

.tt-calendar-records-list {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 6px;
    border-right: 1px solid var(--tt-border);
    background: color-mix(in srgb, var(--tt-bg-secondary) 62%, var(--tt-bg));
    padding: 12px;
}

.tt-calendar-record-list-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--tt-text);
    font: inherit;
    text-align: left;
    padding: 8px;
    cursor: pointer;
}

.tt-calendar-record-list-item:hover,
.tt-calendar-record-list-item.is-active {
    border-color: color-mix(in srgb, var(--tt-primary) 42%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary) 9%, var(--tt-bg));
}

.tt-calendar-record-list-item.is-active {
    box-shadow: inset 3px 0 0 var(--tt-primary);
}

.tt-calendar-record-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--tt-primary);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 950;
}

.tt-calendar-record-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.tt-calendar-record-copy strong,
.tt-calendar-record-copy em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-calendar-record-copy strong {
    color: var(--tt-text);
    font-size: 12px;
    font-weight: 950;
}

.tt-calendar-record-copy em {
    color: var(--tt-text-secondary);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 800;
}

.tt-calendar-record-preview {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 14px;
    background: var(--tt-bg);
    padding: 16px;
}

.tt-calendar-record-preview-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid color-mix(in srgb, var(--tt-border) 82%, var(--tt-primary));
    border-radius: 8px;
    background: linear-gradient(145deg, var(--tt-bg), color-mix(in srgb, var(--tt-bg-secondary) 78%, var(--tt-bg)));
    padding: 14px;
}

.tt-calendar-record-preview-hero .tt-modal-meta {
    margin-left: auto;
    justify-content: flex-end;
}

.tt-calendar-record-preview-grid {
    padding: 0;
}

.tt-calendar-record-empty {
    min-height: 260px;
    display: grid;
    place-items: center;
    color: var(--tt-text-secondary);
}

.tt-calendar-year {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 12px;
}

.tt-calendar-mini-month {
    padding: 10px;
}

.tt-calendar-mini-month > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tt-calendar-mini-month > header strong {
    color: var(--tt-text);
    font-size: 13px;
    font-weight: 950;
}

.tt-calendar-mini-month > header span {
    color: var(--tt-text-secondary);
    font-size: 11px;
    font-weight: 850;
}

.tt-calendar-mini-month .tt-calendar-grid,
.tt-calendar-mini-month .tt-calendar-weekdays {
    gap: 4px;
}

.tt-calendar-mini-month .tt-calendar-day-cell {
    min-height: 62px;
    gap: 4px;
    padding: 5px;
    box-shadow: none;
}

.tt-calendar-mini-month .tt-calendar-day-number {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

.tt-calendar-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 18px;
    color: var(--tt-text);
    text-align: center;
}

.tt-calendar-empty strong {
    max-width: 620px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.45;
}

/* Records Cell (N registros) */
.tt-records-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tt-records-first {
    color: var(--tt-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-records-more {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border: 0;
    font-size: 11px;
    font-weight: 500;
    font-family: var(--tt-font);
    background: var(--tt-primary);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.tt-records-more:hover {
    background: var(--tt-primary-dark);
}

/* Records Popover */
.tt-popover {
    position: absolute;
    background: var(--tt-bg);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow-lg);
    z-index: 10020;
    min-width: 200px;
    max-width: 300px;
    animation: ttFadeIn 0.2s ease;
}

.tt-popover-header {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tt-text-secondary);
    border-bottom: 1px solid var(--tt-border);
    background: var(--tt-bg-secondary);
    border-radius: var(--tt-radius) var(--tt-radius) 0 0;
}

.tt-popover-body {
    max-height: 250px;
    overflow-y: auto;
}

.tt-popover-item {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--tt-text);
    border-bottom: 1px solid var(--tt-border);
    transition: background 0.15s;
}

.tt-popover-item:last-child {
    border-bottom: none;
}

.tt-popover-item:hover {
    background: var(--tt-bg-hover);
}

/* Toggle Switch */
.tt-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--tt-bg-secondary);
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.tt-toggle.active {
    background: var(--tt-success);
    border-color: var(--tt-success);
}

.tt-toggle.is-loading {
    cursor: wait;
    opacity: 0.68;
    pointer-events: none;
}

.tt-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.tt-toggle.active .tt-toggle-knob {
    left: 22px;
}

/* Actions Cell */
.tt-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tt-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--tt-radius-sm);
    cursor: pointer;
    color: var(--tt-text-muted);
    transition: all 0.2s;
}

.tt-action-btn:hover {
    background: var(--tt-bg-hover);
    color: var(--tt-text);
}

.tt-action-btn.edit:hover {
    color: var(--tt-primary);
    background: rgba(107, 33, 168, 0.1);
}

.tt-action-btn.delete:hover {
    color: var(--tt-danger);
    background: rgba(239, 68, 68, 0.1);
}

.tt-action-btn svg {
    width: 16px;
    height: 16px;
}

.tt-custom-actions {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 0.375rem;
}

.tt-custom-action-btn {
    pointer-events: auto;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 14%, var(--tt-border));
    border-radius: 0.65rem;
    background: #ffffff;
    color: var(--tt-text-secondary);
    font: 800 0.72rem/1 var(--tt-font);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.tt-custom-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.tt-custom-action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.tt-custom-action-btn--icon {
    width: 2rem;
    padding: 0;
}

.tt-custom-action-btn--text {
    padding: 0 0.7rem;
}

.tt-custom-action-btn--primary {
    border-color: color-mix(in srgb, var(--tt-primary) 34%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary) 9%, #ffffff);
    color: var(--tt-primary);
}

.tt-custom-action-btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--tt-primary) 16%, #ffffff);
}

.tt-custom-action-btn--secondary {
    border-color: color-mix(in srgb, var(--tt-info) 28%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-info) 8%, #ffffff);
    color: #075985;
}

.tt-custom-action-btn--secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--tt-info) 14%, #ffffff);
}

.tt-custom-action-btn--danger {
    border-color: color-mix(in srgb, var(--tt-danger) 28%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-danger) 8%, #ffffff);
    color: var(--tt-danger);
}

.tt-custom-action-btn .g-icon {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1;
}

/* Group Header */
.tt-group-header {
    background: var(--tt-bg-secondary);
    border-bottom: 2px solid var(--tt-border);
}

.tt-group-header td {
    padding: 14px 20px;
    font-weight: 600;
    font-size: 14px;
    color: var(--tt-text);
}

.tt-group-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tt-group-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tt-text-muted);
    transition: transform 0.2s;
}

.tt-group-toggle.collapsed {
    transform: rotate(-90deg);
}

.tt-group-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--tt-text-secondary);
    background: var(--tt-bg);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Group Summary */
.tt-group-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.tt-summary-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tt-text-secondary);
}

.tt-summary-label {
    font-weight: 400;
}

.tt-summary-value {
    font-weight: 600;
    color: var(--tt-text);
}

/* Pagination */
.tt-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid var(--tt-border);
    background: var(--tt-bg);
}

.tt-pagination-info {
    font-size: 13px;
    color: var(--tt-text-secondary);
}

.tt-pagination-group-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.tt-group-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 20%, var(--tt-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--tt-primary) 6%, var(--tt-bg));
    color: var(--tt-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.tt-group-footer-btn:hover {
    border-color: color-mix(in srgb, var(--tt-primary) 58%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary) 11%, var(--tt-bg));
    box-shadow: 0 8px 18px rgba(107, 33, 168, 0.12);
    transform: translateY(-1px);
}

.tt-group-exit {
    border-color: color-mix(in srgb, var(--tt-danger) 24%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-danger) 6%, var(--tt-bg));
    color: color-mix(in srgb, var(--tt-danger) 82%, var(--tt-text));
}

.tt-group-exit:hover {
    border-color: color-mix(in srgb, var(--tt-danger) 52%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-danger) 10%, var(--tt-bg));
}

.tt-pagination-buttons {
    display: flex;
    gap: 4px;
}

.tt-page-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-sm);
    background: var(--tt-bg);
    color: var(--tt-text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.tt-page-btn:hover {
    background: var(--tt-bg-hover);
    border-color: var(--tt-text-muted);
}

.tt-page-btn.active {
    background: var(--tt-primary);
    border-color: var(--tt-primary);
    color: white;
}

.tt-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal */
.tt-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: ttFadeIn 0.2s ease;
}

.tt-modal {
    background: #FFFFFF;
    background-color: #FFFFFF !important;
    border-radius: var(--tt-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ttSlideIn 0.3s ease;
}

[data-theme="dark"] .tt-modal {
    background: #1F2937 !important;
    background-color: #1F2937 !important;
}

.tt-modal-default {
    width: 500px;
    max-width: 95vw;
}

.tt-modal-large {
    width: 800px;
    max-width: 95vw;
}

.tt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tt-border);
}

.tt-modal-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--tt-text);
}

.tt-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--tt-radius-sm);
    cursor: pointer;
    color: var(--tt-text-muted);
    transition: all 0.2s;
}

.tt-modal-close:hover {
    background: var(--tt-bg-hover);
    color: var(--tt-text);
}

.tt-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.tt-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--tt-border);
}

/* Modal Form Grid - 2 columns */
.tt-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.tt-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tt-form-group.full-width {
    grid-column: span 2;
}

.tt-form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--tt-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tt-form-value {
    font-size: 14px;
    color: var(--tt-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tt-form-input {
    padding: 10px 12px;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    font-size: 14px;
    background: var(--tt-bg);
    color: var(--tt-text);
    transition: all 0.2s;
}

.tt-form-input:focus {
    outline: none;
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.1);
}

.tt-form-input:disabled {
    background: var(--tt-bg-secondary);
    color: var(--tt-text-muted);
    cursor: not-allowed;
}

.tt-form-select {
    padding: 10px 12px;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    font-size: 14px;
    background: var(--tt-bg);
    color: var(--tt-text);
    cursor: pointer;
}

/* Bulk Actions Bar */
.tt-bulk-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tt-primary);
    color: white;
    padding: 12px 20px;
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow-lg);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    animation: ttSlideUp 0.3s ease;
}

.tt-bulk-count {
    font-weight: 500;
}

.tt-bulk-actions {
    display: flex;
    gap: 8px;
}

.tt-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--tt-radius);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.tt-bulk-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.tt-bulk-btn.danger {
    background: var(--tt-danger);
    border-color: var(--tt-danger);
}

.tt-bulk-btn.danger:hover {
    background: #DC2626;
}

/* Help Modal */
.tt-help-modal,
.tt-modal-xlarge {
    width: min(1180px, calc(100vw - 32px));
}

.tt-help-modal {
    max-height: calc(100dvh - 32px);
}

.tt-help-modal-header {
    align-items: center;
}

.tt-help-body {
    height: min(720px, calc(100dvh - 190px));
    min-height: min(520px, calc(100dvh - 190px));
    max-height: min(720px, calc(100dvh - 190px));
    display: grid;
    grid-template-columns: minmax(190px, 20%) minmax(0, 80%);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.tt-help-sidebar {
    min-width: 0;
    overflow: auto;
    border-right: 1px solid var(--tt-border);
    background: color-mix(in srgb, var(--tt-bg-secondary) 78%, var(--tt-bg));
    padding: 12px;
}

.tt-help-tabs {
    display: grid;
    gap: 8px;
}

.tt-help-tab {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--tt-text-secondary);
    font: inherit;
    padding: 9px;
    text-align: left;
    cursor: pointer;
}

.tt-help-tab:hover {
    background: color-mix(in srgb, var(--tt-primary) 8%, var(--tt-bg));
    color: var(--tt-primary);
}

.tt-help-tab.is-active {
    border-color: color-mix(in srgb, var(--tt-primary) 30%, var(--tt-border));
    background: color-mix(in srgb, var(--tt-primary) 12%, var(--tt-bg));
    color: var(--tt-primary);
}

.tt-help-tab-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--tt-bg);
    color: inherit;
    font-size: 14px;
    font-weight: 950;
}

.tt-help-tab-label {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 12.5px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-help-tab small {
    grid-column: 2;
    overflow: hidden;
    color: var(--tt-text-muted);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-help-panel-wrap {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    padding: 20px;
}

.tt-help-panel {
    display: grid;
    gap: 16px;
}

.tt-help-panel-header {
    display: grid;
    gap: 5px;
    border-bottom: 1px solid var(--tt-border);
    padding-bottom: 14px;
}

.tt-help-panel-kicker {
    color: var(--tt-primary);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tt-help-panel-header h2 {
    margin: 0;
    color: var(--tt-text);
    font-size: 22px;
    font-weight: 950;
    line-height: 1.12;
}

.tt-help-panel-header p {
    max-width: 780px;
    margin: 0;
    color: var(--tt-text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.tt-help-content-stack {
    display: grid;
    gap: 14px;
}

.tt-help-section {
    margin-bottom: 16px;
}

.tt-help-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--tt-text);
    margin-bottom: 6px;
}

.tt-help-section p {
    font-size: 13px;
    color: var(--tt-text-secondary);
    line-height: 1.5;
}

.tt-help-heading {
    margin: 0;
    color: var(--tt-text);
    font-size: 16px;
    font-weight: 900;
}

.tt-help-text,
.tt-help-html p {
    margin: 0;
    color: var(--tt-text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.58;
}

.tt-help-list-block {
    display: grid;
    gap: 8px;
}

.tt-help-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 18px;
}

.tt-help-list li {
    color: var(--tt-text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}

.tt-help-callout {
    display: grid;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--tt-primary) 24%, var(--tt-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--tt-primary) 8%, var(--tt-bg));
    padding: 12px;
}

.tt-help-callout strong {
    color: var(--tt-primary);
    font-size: 13px;
    font-weight: 950;
}

.tt-help-callout p {
    margin: 0;
    color: var(--tt-text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.tt-help-media {
    min-width: 0;
    display: grid;
    gap: 8px;
    margin: 0;
}

.tt-help-media img,
.tt-help-media video,
.tt-help-media iframe {
    width: 100%;
    max-height: 420px;
    display: block;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background: var(--tt-bg-secondary);
    object-fit: cover;
}

.tt-help-media iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

.tt-help-media figcaption {
    color: var(--tt-text-muted);
    font-size: 11px;
    font-weight: 750;
}

.tt-help-footer {
    border-top: 1px solid var(--tt-border);
}

/* Dropdown */
.tt-dropdown {
    position: relative;
    display: inline-block;
}

.tt-dropdown-menu {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    gap: 2px;
    padding: 6px;
    background: var(--tt-bg);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow-lg);
    min-width: 150px;
    z-index: 1300;
    animation: ttFadeIn 0.15s ease;
}

.tt-dropdown-item {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-family: var(--tt-font);
    text-align: left;
    color: var(--tt-text);
    cursor: pointer;
    transition: background 0.15s;
}

.tt-dropdown-item:hover {
    background: var(--tt-bg-hover);
}

.tt-dropdown-item.active {
    color: var(--tt-primary);
    font-weight: 500;
}

.tt-export-dropdown {
    min-width: 176px;
}

.tt-export-option {
    font-weight: 800;
}

/* Toast */
.tt-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--tt-text);
    color: var(--tt-bg);
    padding: 12px 20px;
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow-lg);
    z-index: 10000;
    animation: ttSlideUp 0.3s ease;
}

.tt-toast.success {
    background: var(--tt-success);
    color: white;
}

.tt-toast.error {
    background: var(--tt-danger);
    color: white;
}

/* Animations */
@keyframes ttFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ttSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ttSlideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Select */
.tt-select {
    padding: 8px 12px;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    font-size: 13px;
    background: var(--tt-bg);
    color: var(--tt-text);
    cursor: pointer;
}

.tt-select:focus {
    outline: none;
    border-color: var(--tt-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .tt-header {
        position: relative;
        min-height: 38px;
        display: block;
        padding: 5px 8px;
        border-radius: 0;
        overflow: visible;
    }

    .tt-mobile-header-row {
        min-height: 28px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .tt-mobile-menu-trigger {
        width: 32px;
        height: 28px;
        display: inline-grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--tt-primary) 18%, var(--tt-border));
        border-radius: 999px;
        background: var(--tt-input-bg);
        color: var(--tt-primary);
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
        cursor: pointer;
    }

    .tt-mobile-menu-trigger:hover,
    .tt-header.is-mobile-menu-open .tt-mobile-menu-trigger {
        border-color: color-mix(in srgb, var(--tt-primary) 52%, var(--tt-border));
        background: color-mix(in srgb, var(--tt-primary) 8%, var(--tt-bg));
    }

    .tt-mobile-toolbar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 928;
        display: none;
        background:
            radial-gradient(circle at 50% 100%, rgba(90, 66, 114, 0.2), transparent 42%),
            rgba(15, 23, 42, 0.48);
        backdrop-filter: blur(5px);
    }

    .tt-header.is-mobile-menu-open .tt-mobile-toolbar-backdrop {
        display: block;
    }

    .tt-mobile-toolbar-flyout {
        position: fixed;
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        z-index: 930;
        display: none;
        max-height: min(82dvh, 42rem);
        overflow: auto;
        overscroll-behavior: contain;
        padding: 0.875rem;
        border: 1px solid color-mix(in srgb, var(--tt-primary) 24%, rgba(255, 255, 255, 0.6));
        border-radius: 1.35rem;
        background:
            radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--tt-primary) 18%, transparent), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #fbf8fd 100%);
        box-shadow: 0 1.75rem 4.5rem rgba(15, 23, 42, 0.32);
        transform: translateY(1rem);
        opacity: 0;
    }

    .tt-header.is-mobile-menu-open .tt-mobile-toolbar-flyout {
        display: grid;
        gap: 0.75rem;
        transform: translateY(0);
        opacity: 1;
        animation: ttMobileSheetIn 180ms ease-out;
    }

    .tt-mobile-toolbar-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.25rem 0.25rem 0.75rem;
        border-bottom: 1px solid color-mix(in srgb, var(--tt-primary) 12%, var(--tt-border));
    }

    .tt-mobile-toolbar-sheet-header > div {
        min-width: 0;
        display: grid;
        gap: 0.125rem;
    }

    .tt-mobile-toolbar-eyebrow {
        color: var(--tt-text-secondary);
        font-size: 0.68rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .tt-mobile-toolbar-sheet-header strong {
        min-width: 0;
        color: var(--tt-text);
        font-size: 1.02rem;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .tt-mobile-toolbar-close {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        display: inline-grid;
        place-items: center;
        border: 1px solid color-mix(in srgb, var(--tt-primary) 18%, var(--tt-border));
        border-radius: 0.875rem;
        background: #ffffff;
        color: var(--tt-primary);
        box-shadow: 0 0.625rem 1.5rem rgba(15, 23, 42, 0.08);
        cursor: pointer;
    }

    .tt-mobile-toolbar-close:active {
        transform: translateY(1px);
    }

    .tt-header-left,
    .tt-header-right {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 0.5rem;
    }

    .tt-title-wrap,
    .tt-count,
    .tt-view-toggle,
    .tasks-view-toggle,
    .tt-search,
    .tt-toolbar-control,
    .tt-toolbar-group,
    .tt-btn,
    .secondary-button,
    .primary-button,
    .tt-import-btn {
        width: 100%;
        max-width: none;
    }

    .tt-toolbar-group {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .tt-mobile-toolbar-flyout .tt-title-wrap,
    .tt-mobile-toolbar-flyout .tt-count,
    .tt-mobile-toolbar-flyout .tt-view-toggle,
    .tt-mobile-toolbar-flyout .tasks-view-toggle,
    .tt-mobile-toolbar-flyout .tt-search,
    .tt-mobile-toolbar-flyout .tt-toolbar-control,
    .tt-mobile-toolbar-flyout .tt-toolbar-group,
    .tt-mobile-toolbar-flyout .tt-btn,
    .tt-mobile-toolbar-flyout .secondary-button,
    .tt-mobile-toolbar-flyout .primary-button,
    .tt-mobile-toolbar-flyout .tt-import-btn {
        min-height: 2.65rem;
        border-radius: 0.95rem;
    }

    .tt-mobile-toolbar-flyout .tt-toolbar-control,
    .tt-mobile-toolbar-flyout .tt-toolbar-group {
        padding: 0.625rem;
        border: 1px solid color-mix(in srgb, var(--tt-primary) 10%, var(--tt-border));
        background: rgba(255, 255, 255, 0.78);
    }

    .tt-mobile-toolbar-flyout .tt-toolbar-group {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        white-space: normal;
    }

    .tt-mobile-toolbar-flyout .tt-toolbar-label {
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .tt-mobile-toolbar-flyout .tt-select,
    .tt-mobile-toolbar-flyout .tt-search-input {
        min-height: 2.45rem;
        width: 100%;
        border-radius: 0.75rem;
    }

    .tt-mobile-toolbar-flyout .tt-icon-btn,
    .tt-mobile-toolbar-flyout .tt-btn {
        min-height: 2.5rem;
        justify-content: center;
    }

    .tt-mobile-toolbar-flyout .tt-view-toggle,
    .tt-mobile-toolbar-flyout .tasks-view-toggle {
        padding: 0.25rem;
        background: rgba(255, 255, 255, 0.78);
        border-radius: 1rem;
    }

    @keyframes ttMobileSheetIn {
        from {
            opacity: 0;
            transform: translateY(1.5rem) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    .tt-search-popover,
    .tasks-board-search-popover {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: 78px;
        left: 10px;
        width: auto;
    }

    .tt-view-toggle,
    .tasks-view-toggle {
        width: 100%;
    }

    .tt-charts-dashboard,
    .td-charts-dashboard,
    .tt-calendar-dashboard {
        max-height: none;
        min-height: 520px;
        padding: 10px;
    }

    .tt-pagination {
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }

    .tt-pagination-group-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .tt-charts-hero,
    .td-charts-hero,
    .tt-calendar-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .tt-charts-hero-actions,
    .td-charts-hero-actions,
    .tt-charts-hero-actions .secondary-button,
    .td-charts-hero-actions .secondary-button,
    .tt-calendar-actions {
        width: 100%;
    }

    .tt-calendar-actions,
    .tt-calendar-view-buttons {
        flex-wrap: wrap;
    }

    .tt-calendar-topbar,
    .tt-calendar-single-day,
    .tt-calendar-year,
    .tt-calendar-records-body {
        grid-template-columns: 1fr;
    }

    .tt-calendar-records-body {
        height: calc(100% - 118px);
        grid-template-rows: minmax(160px, 32%) minmax(0, 68%);
        overflow: hidden;
    }

    .tt-calendar-records-list {
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--tt-border);
    }

    .tt-calendar-record-preview {
        overflow: auto;
    }

    .tt-calendar-record-preview-hero {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tt-calendar-record-preview-hero .tt-modal-meta {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .tt-calendar-total {
        justify-items: start;
    }

    .tt-calendar-week,
    .tt-calendar-month .tt-calendar-grid {
        overflow-x: auto;
        grid-template-columns: repeat(7, minmax(138px, 1fr));
        padding-bottom: 3px;
    }

    .tt-calendar-weekdays {
        grid-template-columns: repeat(7, minmax(138px, 1fr));
        overflow: hidden;
    }

    .tt-chart-kpis,
    .tt-chart-main-grid,
    .tt-text-chart-grid,
    .tt-chart-pie-grid {
        grid-template-columns: 1fr;
    }

    .tt-chart-card.is-bubble {
        grid-column: span 1;
    }

    .tt-import-modal {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .tt-import-modal > .tabular-import-wizard {
        padding: 0 10px 10px;
    }

    .tabular-import-wizard__header,
    .tabular-import-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .tabular-import-steps,
    .tabular-import-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tabular-import-step {
        border-radius: 8px;
    }

    .tabular-import-map-head {
        display: none;
    }

    .tabular-import-map-row,
    .tabular-import-sheet,
    .tabular-import-header-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .tabular-import-actions {
        flex-direction: column-reverse;
    }

    .tabular-import-actions .tt-btn {
        width: 100%;
    }

    .tt-chart-pie-wrap {
        min-height: 136px;
    }

    .tt-chart-constant-head,
    .tt-chart-constant-row {
        grid-template-columns: minmax(90px, 0.9fr) minmax(120px, 1.2fr) 70px;
        gap: 8px;
        padding: 10px;
    }
    
    .tt-form-grid {
        grid-template-columns: 1fr;
    }
    
    .tt-form-group.full-width {
        grid-column: span 1;
    }
}


/* Records list in modal */
.tt-records-list-modal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tt-records-item-modal {
    background: var(--tt-bg-secondary);
    padding: 4px 10px;
    border-radius: var(--tt-radius-sm);
    font-size: 12px;
    color: var(--tt-text);
}

/* v5 canvas polish */
body {
    margin: 0;
    background: var(--tt-page-bg);
    color: var(--tt-text);
    font-family: var(--tt-font);
}

html.tt-page-dark,
body.tt-page-dark {
    background: var(--tt-page-bg);
    color-scheme: dark;
    scrollbar-color: #475569 #0B1220;
}

html.tt-page-dark::-webkit-scrollbar,
body.tt-page-dark::-webkit-scrollbar,
body.tt-page-dark *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html.tt-page-dark::-webkit-scrollbar-track,
body.tt-page-dark::-webkit-scrollbar-track,
body.tt-page-dark *::-webkit-scrollbar-track {
    background: #0B1220;
}

html.tt-page-dark::-webkit-scrollbar-thumb,
body.tt-page-dark::-webkit-scrollbar-thumb,
body.tt-page-dark *::-webkit-scrollbar-thumb {
    border: 3px solid #0B1220;
    border-radius: 999px;
    background: #475569;
    background-clip: padding-box;
}

html.tt-page-dark::-webkit-scrollbar-thumb:hover,
body.tt-page-dark::-webkit-scrollbar-thumb:hover,
body.tt-page-dark *::-webkit-scrollbar-thumb:hover {
    background: #64748B;
    background-clip: padding-box;
}

.main {
    min-height: 100vh;
    padding: 18px 22px;
    background:
        linear-gradient(180deg, var(--tt-page-bg) 0%, var(--tt-page-bg-end) 100%);
}

.tt-container {
    overflow: hidden;
    border: 1px solid var(--tt-border-strong);
    border-radius: var(--tt-radius);
    background: var(--tt-bg);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.tt-header {
    padding: 18px 20px;
    background: linear-gradient(180deg, var(--tt-surface-gradient-start) 0%, var(--tt-surface-gradient-end) 100%);
}

.tt-header-left {
    min-width: 0;
}

.tt-title {
    min-width: 170px;
    color: var(--tt-text);
    font-size: 15px;
    line-height: 1.15;
}

.tt-title-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 7px;
    border: 1px solid var(--tt-border-strong);
    border-radius: var(--tt-radius);
    background: var(--tt-input-bg);
    color: var(--tt-text);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.tt-count {
    border: 1px solid var(--tt-border);
    background: var(--tt-bg-secondary);
    font-weight: 700;
}

.tt-search input,
.tt-select,
.tt-btn {
    border-color: var(--tt-border-strong);
    background: var(--tt-input-bg);
    color: var(--tt-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.tt-btn:hover,
.tt-select:hover,
.tt-search input:focus {
    border-color: var(--tt-text-muted);
}

.tt-search-popover input,
.tasks-board-search-popover input,
.tt-search-popover input:focus,
.tasks-board-search-popover input:focus {
    border: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

#ttSearch,
#ttSearch:focus,
#ttSearch:hover {
    border: 0;
    border-color: transparent;
    box-shadow: none;
    outline: 0;
}

.tt-canvas-table-panel {
    background: var(--tt-bg);
    border-top: 1px solid var(--tt-canvas-grid);
    border-bottom: 1px solid var(--tt-border-strong);
}

.tt-canvas-scroll {
    scrollbar-color: #cbd5e1 transparent;
    scrollbar-width: thin;
}

.tt-canvas-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.tt-canvas-scroll::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: #cbd5e1;
    background-clip: padding-box;
}

.tt-canvas-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: padding-box;
}

.tt-pagination {
    min-height: 54px;
    padding: 12px 20px;
    background: var(--tt-surface-gradient-end);
}

.tt-pagination-info {
    font-weight: 700;
}

.tt-modal-overlay,
.tt-modal,
.tt-toast,
.tt-bulk-bar,
.tt-dropdown-menu,
.tt-popover {
    font-family: var(--tt-font);
}

.tt-modal-overlay {
    padding: clamp(12px, 3vw, 28px);
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(10px) saturate(1.08);
}

.tt-modal {
    color: var(--tt-text);
    width: min(1040px, calc(100vw - 56px));
    max-height: min(92dvh, 880px);
    border: 1px solid var(--tt-border-strong);
    background: var(--tt-bg) !important;
    border-radius: 12px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.34);
}

.tt-modal,
.tt-modal * {
    box-sizing: border-box;
}

.tt-modal-large {
    width: min(1040px, calc(100vw - 56px));
}

.tt-modal-default {
    width: min(540px, calc(100vw - 56px));
}

.tt-modal-header {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: start;
    gap: 18px;
    flex: 0 0 auto;
    min-height: 92px;
    padding: 22px 22px 22px;
    border-bottom: 1px solid var(--tt-border-strong);
    background: var(--tt-bg);
}

.tt-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tt-primary);
}

.tt-modal-header-content {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.tt-modal-header-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.tt-modal-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--tt-primary);
    color: white;
    font-size: 15px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(107, 33, 168, 0.25);
    flex: 0 0 auto;
}

.tt-modal-title-block {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.tt-modal-kicker {
    color: var(--tt-primary);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
}

.tt-modal-title {
    color: var(--tt-text);
    overflow: hidden;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-modal-subtitle {
    overflow: hidden;
    color: var(--tt-text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tt-modal-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin-top: 2px;
    padding-top: 2px;
    flex-wrap: wrap;
}

.tt-modal-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid var(--tt-border);
    border-radius: 999px;
    background: var(--tt-bg-secondary);
    color: var(--tt-text-secondary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.tt-modal-chip-status {
    border-color: rgba(16, 185, 129, 0.22);
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.tt-modal-close {
    align-self: start;
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--tt-bg-secondary);
    color: var(--tt-text-muted);
    font-size: 24px;
    line-height: 1;
}

.tt-modal-close:hover {
    border-color: var(--tt-border-strong);
    background: var(--tt-bg-hover);
}

.tt-modal-body {
    max-height: min(70dvh, 650px);
    padding: 22px 16px 18px;
    background: var(--tt-bg-secondary);
}

.tt-modal-footer {
    flex: 0 0 auto;
    min-height: 66px;
    padding: 14px 20px;
    background: var(--tt-bg);
    box-shadow: 0 -14px 30px rgba(15, 23, 42, 0.05);
}

.tt-modal-footer .tt-btn {
    min-height: 38px;
    padding: 0 15px;
    justify-content: center;
    font-weight: 800;
}

.tt-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.tt-form-section-title {
    grid-column: 1 / -1;
    padding: 8px 2px 0;
    color: var(--tt-primary);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.tt-form-group {
    grid-column: span 3;
    min-width: 0;
    min-height: 78px;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid var(--tt-border);
    border-radius: 8px;
    background: var(--tt-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

.tt-form-group:hover {
    border-color: var(--tt-border-strong);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.tt-modal-editing .tt-form-group:not(.tt-form-group-readonly) {
    border-color: rgba(107, 33, 168, 0.18);
    background: color-mix(in srgb, var(--tt-bg) 96%, var(--tt-primary) 4%);
}

.tt-modal-editing .tt-form-group-readonly {
    background: color-mix(in srgb, var(--tt-bg-secondary) 76%, var(--tt-bg) 24%);
}

.tt-form-group-type-progress {
    grid-column: span 6;
}

.tt-form-group-field-id {
    grid-column: span 2;
}

.tt-form-group-field-name {
    grid-column: span 4;
}

.tt-form-group-field-position,
.tt-form-group-field-email,
.tt-form-group-field-projects {
    grid-column: span 6;
}

.tt-form-group-field-phone,
.tt-form-group-field-company,
.tt-form-group-field-salary,
.tt-form-group-field-created_at,
.tt-form-group-field-active {
    grid-column: span 3;
}

.tt-form-label {
    color: var(--tt-text-secondary);
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.tt-form-group > :not(.tt-form-label) {
    min-width: 0;
    width: 100%;
}

.tt-form-value,
.tt-form-group > span,
.tt-form-group > div:not(.tt-form-subtext-inputs) {
    min-height: 30px;
    color: var(--tt-text);
    font-family: var(--tt-font);
    font-size: 13px;
    font-weight: 720;
}

.tt-form-input,
.tt-form-select {
    min-height: 42px;
    width: 100%;
    padding: 0 12px;
    border-color: var(--tt-border);
    border-radius: 8px;
    background: var(--tt-input-bg);
    color: var(--tt-text);
    font-family: var(--tt-font);
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.tt-form-input:hover,
.tt-form-select:hover {
    border-color: var(--tt-border-strong);
}

.tt-form-input:focus,
.tt-form-select:focus {
    outline: none;
    border-color: var(--tt-primary);
    box-shadow: 0 0 0 3px rgba(107, 33, 168, 0.10);
}

.tt-form-subtext-inputs {
    display: grid;
    gap: 8px;
}

.tt-form-subtext-inputs .tt-form-input {
    margin-top: 0 !important;
}

.tt-modal .tt-name-cell,
.tt-modal .tt-icon-text,
.tt-modal .tt-tasks-cell,
.tt-modal .tt-donut,
.tt-modal .tt-records-cell,
.tt-modal .tt-rating {
    min-height: 30px;
}

.tt-modal .tt-icon-text,
.tt-modal .tt-tasks-cell,
.tt-modal .tt-donut,
.tt-modal .tt-records-cell,
.tt-modal .tt-rating,
.tt-modal .tt-text-subtext {
    align-self: start;
    width: 100%;
}

.tt-modal .tt-name-cell {
    align-self: start;
    max-width: 100%;
}

.tt-modal .tt-name-link {
    color: var(--tt-text);
    cursor: default;
    font-weight: 850;
    pointer-events: none;
    text-decoration: none;
}

.tt-modal .tt-records-cell {
    width: 100%;
    max-width: 100%;
}

.tt-modal .tt-records-first {
    flex: 0 1 auto;
    max-width: calc(100% - 48px);
}

.tt-modal .tt-records-more {
    flex: 0 0 auto;
}

.tt-modal .tt-progress-wrapper {
    width: 100%;
    min-width: 0;
    align-self: center;
}

.tt-modal .tt-progress {
    height: 16px;
    background: var(--tt-bg-secondary);
}

.tt-modal .tt-badge {
    width: fit-content;
    font-weight: 800;
    align-self: start;
}

.tt-modal .tt-toggle {
    position: relative;
    align-self: start;
    flex: 0 0 54px;
    width: 54px !important;
    min-width: 54px;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px;
    margin-top: 2px;
    border-radius: 999px;
    border-color: var(--tt-border-strong);
    background: linear-gradient(180deg, var(--tt-bg-secondary), var(--tt-bg));
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.tt-modal .tt-toggle.active {
    border-color: rgba(16, 185, 129, 0.44);
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), 0 8px 18px rgba(16, 185, 129, 0.18);
}

.tt-modal .tt-toggle-knob {
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    min-height: 22px;
    background: #FFFFFF;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
}

.tt-modal .tt-toggle.active .tt-toggle-knob {
    left: 27px;
}

.tt-modal .tt-toggle::after {
    content: '';
    position: absolute;
    inset: 8px 9px auto auto;
    width: 5px;
    height: 9px;
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: rotate(45deg);
    transition: opacity 0.18s ease;
}

.tt-modal .tt-toggle.active::after {
    opacity: 1;
}

.tt-btn-primary {
    box-shadow: 0 8px 18px rgba(107, 33, 168, 0.22);
}

[data-theme="dark"] .tt-modal-chip-status {
    border-color: rgba(52, 211, 153, 0.28);
    background: rgba(16, 185, 129, 0.16);
    color: #6EE7B7;
}

[data-theme="dark"] .tt-modal-footer {
    box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.18);
}

@media (max-width: 980px) {
    .tt-modal,
    .tt-modal-large,
    .tt-modal-default {
        width: min(760px, calc(100vw - 28px));
    }

    .tt-form-group,
    .tt-form-group-field-email,
    .tt-form-group-field-position,
    .tt-form-group-field-projects {
        grid-column: span 6;
    }

    .tt-form-group-type-progress {
        grid-column: span 12;
    }
}

@media (max-width: 640px) {
    .tt-filter-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 945;
        display: block;
        background: rgba(15, 23, 42, 0.52);
        backdrop-filter: blur(5px);
    }

    .tt-filter-menu,
    .td-filter-menu,
    .tt-filter-trigger,
    .td-filter-trigger {
        width: 100%;
    }

    .tt-filter-popover,
    .td-filter-popover {
        position: fixed;
        inset: auto 10px 10px 10px;
        width: auto;
        max-width: calc(100vw - 20px);
        max-height: 82dvh;
        overflow: auto;
    }

    .tt-filter-popover--mobile,
    .td-filter-popover.tt-filter-popover--mobile {
        z-index: 946;
        grid-template-rows: auto auto minmax(6rem, 1fr) auto auto auto;
        overflow: hidden;
        border-radius: 1.25rem;
        box-shadow: 0 1.75rem 4.5rem rgba(15, 23, 42, 0.34);
    }

    .tt-filter-popover--mobile .tt-filter-conditions,
    .tt-filter-popover--mobile .td-filter-conditions {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .tt-filter-toolbar,
    .td-filter-toolbar,
    .tt-filter-save-box,
    .td-filter-save-box,
    .tt-filter-footer,
    .td-filter-footer {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .tt-filter-row,
    .td-filter-row {
        grid-template-columns: 28px 1fr;
    }

    .tt-filter-row select,
    .td-filter-row select,
    .tt-filter-row input,
    .td-filter-row input,
    .tt-filter-row button,
    .td-filter-row button {
        grid-column: 2;
    }

    .tt-modal,
    .tt-modal-large,
    .tt-modal-xlarge,
    .tt-help-modal,
    .tt-modal-default {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 10px;
    }

    .tt-help-body {
        min-height: 0;
        max-height: calc(100dvh - 178px);
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .tt-help-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--tt-border);
        padding: 10px;
    }

    .tt-help-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .tt-help-tab {
        width: min(220px, 72vw);
        flex: 0 0 auto;
    }

    .tt-help-panel-wrap {
        padding: 14px;
    }

    .tt-help-panel-header h2 {
        font-size: 19px;
    }

    .tt-modal-header {
        grid-template-columns: minmax(0, 1fr) 36px;
        gap: 10px;
        padding: 18px 16px 15px;
    }

    .tt-modal-avatar {
        width: 42px;
        height: 42px;
        font-size: 13px;
    }

    .tt-modal-title {
        font-size: 17px;
    }

    .tt-form-group,
    .tt-form-group[style],
    .tt-form-group-field-email,
    .tt-form-group-field-position,
    .tt-form-group-field-projects,
    .tt-form-group-type-progress {
        grid-column: span 12 !important;
    }

    .tt-modal-footer {
        justify-content: stretch;
    }

    .tt-modal-footer .tt-btn {
        flex: 1 1 0;
    }
}

@media (max-width: 768px) {
    .main {
        padding: 10px;
    }

    .tt-title {
        min-width: 0;
    }

    .tt-modal-overlay {
        padding: 10px;
    }

    .tt-modal-body {
        max-height: 72vh;
        padding: 14px;
    }

    .tt-header-left,
    .tt-header-right {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .tt-title {
        min-width: 0;
        flex: 1 1 auto;
    }

    .tt-view-toggle,
    .tasks-view-toggle {
        width: 100%;
        flex: 1 0 100%;
        grid-template-columns: repeat(var(--tt-view-count, 2), minmax(0, 1fr));
    }

    .tt-view-toggle button,
    .tasks-view-toggle button {
        width: 100%;
        padding: 0 8px;
    }
}

.tt-help-modal .tt-help-body {
    flex: 1 1 auto;
    height: min(720px, calc(100dvh - 190px));
    overflow: hidden;
    padding: 0;
}

.tt-help-modal .tt-help-sidebar,
.tt-help-modal .tt-help-panel-wrap {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tt-help-modal .tt-help-panel-wrap {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .tt-help-modal .tt-help-body {
        height: calc(100dvh - 178px);
        max-height: calc(100dvh - 178px);
    }

    .tt-help-modal .tt-help-sidebar {
        overflow-x: auto;
        overflow-y: hidden;
    }
}