/* ============================================================================
   TASKIFY — DESIGN-SYSTEM HELPER  (tk-design-system.css)
   ----------------------------------------------------------------------------
   A reusable, PREFIXED component library so views can be built from classes
   instead of writing bespoke CSS in custom.css every time.

   • Every class is namespaced "tk-" so it can NEVER collide with Bootstrap /
     Sneat (whose .btn/.card/.input we intentionally leave alone).
   • Colours/spacing/radius come from the design tokens defined on :root in
     custom.css (--bg-*, --fg-*, --line, --signal, --ok/warn/err/info, --r-*,
     --fs-*, --shadow-*, --t-*). They are theme-aware, so every component here
     flips automatically in dark mode ([data-theme="dark"]).

   Load AFTER the Sneat/vendor CSS (it is, via layout.blade.php).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. FOUNDATION CONTRACT
   ----------------------------------------------------------------------------
   These tokens extend the existing theme values in custom.css. Fallbacks keep
   components safe on public and test surfaces with a partial application shell.
   ---------------------------------------------------------------------------- */
:root {
    --tk-font-sans: var(--font-sans, var(--bs-font-sans-serif, "Plus Jakarta Sans", "Segoe UI", sans-serif));
    --tk-font-mono: var(--font-mono, "JetBrains Mono", monospace);
    --tk-space-1: 4px;
    --tk-space-2: 8px;
    --tk-space-3: 12px;
    --tk-space-4: 16px;
    --tk-space-5: 20px;
    --tk-space-6: 24px;
    --tk-space-8: 32px;
    --tk-space-10: 40px;
    --tk-radius-sm: var(--r-1, 4px);
    --tk-radius-md: var(--r-2, 6px);
    --tk-radius-lg: var(--r-3, 8px);
    --tk-radius-xl: var(--r-4, 12px);
    --tk-radius-pill: 999px;
    --tk-control-sm: 32px;
    --tk-control-md: 40px;
    --tk-control-lg: 44px;
    --tk-target-min: 40px;
    --tk-text-xs: var(--fs-xs, 11px);
    --tk-text-sm: var(--fs-sm, 12px);
    --tk-text-base: var(--fs-base, 13px);
    --tk-text-md: var(--fs-md, 14px);
    --tk-text-lg: 16px;
    --tk-text-xl: 20px;
    --tk-text-2xl: 28px;
    --tk-surface-page: var(--bg-0, #ffffff);
    --tk-surface: var(--bg-1, #ffffff);
    --tk-surface-subtle: var(--bg-2, #f7f8fa);
    --tk-surface-strong: var(--bg-3, #eef0f3);
    --tk-text: var(--fg-0, #1f2937);
    --tk-text-secondary: var(--fg-1, #374151);
    --tk-text-muted: var(--fg-2, #6b7280);
    --tk-text-subtle: var(--fg-3, #9ca3af);
    --tk-border: var(--line, #e5e7eb);
    --tk-border-strong: var(--line-2, #d1d5db);
    --tk-brand: var(--signal, #5f61e6);
    --tk-success: var(--ok, #2e9d62);
    --tk-warning: var(--warn, #b7791f);
    --tk-danger: var(--err, #d64545);
    --tk-info: var(--info, #2b7bbb);
    --tk-focus-ring: var(--shadow-focus, 0 0 0 3px color-mix(in srgb, var(--tk-brand) 28%, transparent));
    --tk-shadow-sm: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, 0.06));
    --tk-shadow-md: var(--shadow-2, 0 4px 12px rgba(15, 23, 42, 0.08));
    --tk-shadow-lg: var(--shadow-3, 0 12px 28px rgba(15, 23, 42, 0.12));
    --tk-duration-fast: var(--t-1, 100ms);
    --tk-duration-base: var(--t-2, 160ms);
    --tk-ease: var(--ease, ease);
}

/* One sans family and body size for the application shell. Retain the
   deliberate heading, metric, badge and monospace hierarchy below. */
body.v2-shell {
    --bs-body-font-size: var(--fs-base, 13px);
    font-family: var(--tk-font-sans);
    font-size: var(--fs-base, 13px);
    line-height: var(--lh-base, 1.5);
}
body.v2-shell :is(button, input, select, textarea, .ts-wrapper, .ts-dropdown, .daterangepicker, .tribute-container) {
    font-family: var(--tk-font-sans);
}
body.v2-shell :is(.tox .tox-tbtn, .tox .tox-mbtn, .tox .tox-statusbar) {
    font-family: var(--tk-font-sans);
}

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

/* ----------------------------------------------------------------------------
   1. PRIMITIVES / UTILITIES
   ---------------------------------------------------------------------------- */
.tk-stack   { display: flex; flex-direction: column; gap: var(--tk-gap, 12px); }
.tk-cluster { display: flex; align-items: center; gap: var(--tk-gap, 8px); flex-wrap: wrap; }
.tk-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tk-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tk-grow    { flex: 1 1 auto; min-width: 0; }
.tk-spacer  { flex: 1 1 auto; }

.tk-mono    { font-family: var(--font-mono); }
.tk-muted   { color: var(--fg-3) !important; }
.tk-fg-1    { color: var(--fg-1) !important; }
.tk-fg-0    { color: var(--fg-0) !important; }
.tk-eyebrow {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--fg-3); font-weight: 600;
}
.tk-divider { border: 0; height: 1px; background: var(--line); margin: 16px 0; }
.tk-noscroll { scrollbar-width: none; -ms-overflow-style: none; }
.tk-noscroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ----------------------------------------------------------------------------
   2. SURFACES — panel / card / tile
   ---------------------------------------------------------------------------- */
.tk-panel {
    background: var(--bg-1); border: 1px solid var(--line);
    border-radius: var(--r-2); box-shadow: var(--shadow-1);
}
.tk-card {
    background: var(--bg-1); border: 1px solid var(--line);
    border-radius: var(--r-2); overflow: hidden;
    display: flex; flex-direction: column;
}
.tk-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 13px 14px 10px;
}
.tk-card-title { font-size: 13px; font-weight: 600; color: var(--fg-0); margin: 0; }
.tk-card-body { padding: 14px; }
.tk-card-foot {
    padding: 10px 14px; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
/* tile = compact elevated surface (a softer card, good for stat/meta blocks) */
.tk-tile {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: var(--r-2); padding: 11px 13px;
}
/* Dashboard date presets and the custom picker remain usable on narrow screens. */
#dashboard_custom_range { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }


/* Neutral surface outlines share one hairline. Keep semantic/colored cards
   and deliberate borderless surfaces in charge of their own appearance. */
body.v2-shell :is(.card, .tk-card, .tk-panel, .tk-tile):not(:where([class*="bg-"], [class*="border-"], .tk-list-wrap)) {
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--line);
    --bs-border-color: var(--line);
    border-width: 1px !important;
    border-color: var(--line) !important;
}

/* A flush table shares the card's outside edge. Do not draw a second line
   beside it during the table rows only (the toolbar/pagination have no such
   inner border). Inset and standalone tables retain their own outer edges. */
body.v2-shell :is(.card, .tk-card, .tk-panel):not(:where(.border-0, .tk-list-wrap)) > :is(.card-body, .tk-card-body).p-0 > :is(.table-responsive, .tk-table) > .bootstrap-table > .fixed-table-container,
body.v2-shell :is(.card, .tk-card, .tk-panel):not(:where(.border-0, .tk-list-wrap)) > :is(.table-responsive, .tk-table) > .bootstrap-table > .fixed-table-container {
    border-inline: 0 !important;
}

/* ----------------------------------------------------------------------------
   3. BUTTONS
   ---------------------------------------------------------------------------- */
.tk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--tk-control-md); padding: 0 13px;
    border: 1px solid transparent; border-radius: var(--r-2);
    font-size: var(--fs-base); font-weight: 500; line-height: 1; white-space: nowrap;
    cursor: pointer; user-select: none; text-decoration: none;
    transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease),
                border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
.tk-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.tk-btn[disabled], .tk-btn.is-disabled, .tk-btn[aria-disabled="true"] {
    opacity: 0.55; pointer-events: none; cursor: not-allowed;
}
.tk-btn.is-loading { position: relative; cursor: wait; }
.tk-btn.is-loading > :not(.tk-spinner) { opacity: 0.45; }
.tk-btn .tk-ic { width: 16px; height: 16px; }

.tk-btn-primary   { background: var(--signal); color: var(--signal-fg, #fff); }
.tk-btn-primary:hover { filter: brightness(1.05); color: var(--signal-fg, #fff); }
.tk-btn-secondary { background: var(--bg-2); border-color: var(--line); color: var(--fg-0); }
.tk-btn-secondary:hover { background: var(--bg-3); color: var(--fg-0); }
.tk-btn-ghost     { background: transparent; color: var(--fg-2); }
.tk-btn-ghost:hover { background: var(--bg-2); color: var(--fg-0); }
.tk-btn-danger    { background: var(--err); color: #fff; }
.tk-btn-danger:hover { filter: brightness(1.05); color: #fff; }
.tk-btn-outline   { background: transparent; border-color: var(--line); color: var(--fg-1); }
.tk-btn-outline:hover { background: var(--bg-2); color: var(--fg-0); }

/* Shared action hover contract across headers, forms, dialogs and tables.
   Outline primary/secondary are the same neutral action surface in Taskify.
   Keep semantic solid/danger/success colors and keyboard focus unchanged. */
body.v2-shell :is(.btn, .tk-btn):is(:hover, :active):not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]) {
    transform: none !important;
}

body.v2-shell :is(.btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-dark, .btn.btn-outline-light, .tk-btn.tk-btn-outline):hover:not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]):not(.active):not([aria-pressed="true"]):not(.btn-check:checked + .btn) {
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
    border-color: var(--line-2) !important;
    filter: none !important;
}

body.v2-shell :is(.btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-dark, .btn.btn-outline-light, .tk-btn.tk-btn-outline):hover:not(:focus-visible):not(:disabled):not(.disabled):not(.is-disabled):not([aria-disabled="true"]):not(.active):not([aria-pressed="true"]):not(.btn-check:checked + .btn) {
    box-shadow: none !important;
}

.tk-btn-sm { height: var(--tk-control-sm); padding: 0 10px; font-size: var(--fs-sm); }
.tk-btn-lg { height: var(--tk-control-lg); padding: 0 18px; font-size: var(--fs-md); }
.tk-btn-block { width: 100%; }

/* Row action menus follow the project list's borderless three-dot control. */
body.v2-shell table tbody .btn.btn-icon[data-bs-toggle="dropdown"] {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--fg-2) !important;
}
body.v2-shell table tbody .btn.btn-icon[data-bs-toggle="dropdown"]:not(:focus-visible) {
    box-shadow: none !important;
}
body.v2-shell table tbody .btn.btn-icon[data-bs-toggle="dropdown"]:hover,
body.v2-shell table tbody .btn.btn-icon[data-bs-toggle="dropdown"][aria-expanded="true"] {
    border-color: transparent !important;
    background: var(--bg-2) !important;
    color: var(--fg-0) !important;
}
body.v2-shell table tbody .btn.btn-icon[data-bs-toggle="dropdown"]:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}
body.v2-shell table tbody .btn.btn-icon[data-bs-toggle="dropdown"] .tk-ic {
    width: 16px;
    height: 16px;
}

/* icon-only button */
.tk-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tk-target-min); height: var(--tk-target-min); border: 0; background: transparent;
    border-radius: var(--r-1); color: var(--fg-2); cursor: pointer;
    transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.tk-iconbtn:hover { background: var(--bg-2); color: var(--fg-0); }
.tk-iconbtn:focus-visible { outline: none; box-shadow: var(--tk-focus-ring); }
.tk-iconbtn:active { transform: translateY(1px); }
.tk-iconbtn[disabled], .tk-iconbtn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.tk-iconbtn .tk-ic { width: 16px; height: 16px; }

/* ----------------------------------------------------------------------------
   4. FORM CONTROLS
   ---------------------------------------------------------------------------- */
.tk-field { display: flex; flex-direction: column; gap: var(--tk-space-1); }
.tk-label {
    font-size: var(--tk-text-sm); color: var(--fg-1); font-weight: 600;
}
.tk-required { color: var(--err); }
.tk-help { margin: 0; color: var(--fg-2); font-size: var(--tk-text-sm); line-height: 1.45; }
.tk-error { margin: 0; color: var(--err); font-size: var(--tk-text-sm); line-height: 1.45; }

.tk-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--tk-space-2);
    margin: var(--tk-space-6) calc(var(--tk-space-4) * -1) calc(var(--tk-space-4) * -1);
    padding: var(--tk-space-3) var(--tk-space-4);
    background: var(--bg-1);
    border-top: 1px solid var(--line);
}

@media (max-width: 575.98px) {
    .tk-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tk-form-actions .btn,
    .tk-form-actions .tk-btn {
        width: 100%;
        min-height: 32px;
    }
}
.tk-input, .tk-select, .tk-textarea {
    width: 100%; height: var(--tk-control-md); padding: 0 11px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2);
    color: var(--fg-0); font-size: var(--fs-base); font-family: inherit;
    transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease), background var(--t-1) var(--ease);
}
.tk-textarea { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; }
.tk-input::placeholder, .tk-textarea::placeholder { color: var(--fg-3); }
.tk-input:hover, .tk-select:hover, .tk-textarea:hover {
    border-color: var(--line-2);
}
.tk-input:focus, .tk-select:focus, .tk-textarea:focus {
    outline: none; border-color: var(--signal); box-shadow: var(--tk-focus-ring);
}
.tk-input[disabled], .tk-select[disabled], .tk-textarea[disabled],
.tk-input[readonly], .tk-textarea[readonly] {
    background: var(--bg-3); color: var(--fg-2); cursor: not-allowed; opacity: 0.8;
}
.tk-input.is-invalid, .tk-select.is-invalid, .tk-textarea.is-invalid,
.tk-input[aria-invalid="true"], .tk-select[aria-invalid="true"], .tk-textarea[aria-invalid="true"] {
    border-color: var(--err);
}
.tk-input.is-invalid:focus, .tk-select.is-invalid:focus, .tk-textarea.is-invalid:focus,
.tk-input[aria-invalid="true"]:focus, .tk-select[aria-invalid="true"]:focus, .tk-textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 24%, transparent);
}
/* input with a leading icon */
.tk-inputgroup {
    display: inline-flex; align-items: center; gap: 0; width: 100%;
    min-height: var(--tk-control-md); padding: 0 11px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2);
    transition: border-color var(--t-1) var(--ease);
}
.tk-inputgroup:hover {
    border-color: var(--line-2);
}
.tk-inputgroup:focus-within {
    border-color: var(--signal); box-shadow: var(--tk-focus-ring);
}
.tk-inputgroup .tk-ic { color: var(--fg-3); flex: none; }
.tk-inputgroup input { flex: 1; border: 0; background: transparent; outline: none; color: var(--fg-0); font-size: var(--fs-base); padding: 0; height: 100%; }
.tk-inputgroup > span { display: inline-flex; align-items: center; padding: 0 4px; color: var(--fg-3); flex: none; font-size: 1.1rem; }
.tk-inputgroup > span:hover { color: var(--fg-0); }

/* ----------------------------------------------------------------------------
   5. BADGES / TAGS / STATUS PILLS / CHIPS
   ---------------------------------------------------------------------------- */
.tk-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
    background: var(--bg-3); color: var(--fg-1);
}
.tk-badge-primary { background: oklch(from var(--signal) l c h / 0.16); color: var(--signal); }
.tk-badge-success { background: oklch(from var(--ok) l c h / 0.16);   color: var(--ok); }
.tk-badge-warning { background: oklch(from var(--warn) l c h / 0.16); color: var(--warn); }
.tk-badge-danger  { background: oklch(from var(--err) l c h / 0.16);  color: var(--err); }
.tk-badge-info    { background: oklch(from var(--info) l c h / 0.16); color: var(--info); }

.tk-badge-counter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px;
    height: 16px;
    padding: 0 4px !important;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 16px !important;
    letter-spacing: 0 !important;
    text-indent: 0 !important;
    text-align: center !important;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
    z-index: 3;
    flex: 0 0 auto !important;
}
body.v2-shell .tk-panel-item > .tk-badge-counter {
    align-self: center;
    overflow: visible;
    text-overflow: clip;
}
.tk-badge-counter-danger {
    background-color: var(--err, #ff3e1d) !important;
    color: #ffffff !important;
}
.tk-badge-counter-success {
    background-color: var(--ok, #71dd37) !important;
    color: #ffffff !important;
}
.tk-badge-counter-nav {
    position: absolute;
    top: 2px;
    right: 2px;
    border: 1.5px solid var(--bg-1, #ffffff) !important;
}
.tk-badge-counter-rail {
    position: absolute;
    top: 1px;
    right: 1px;
}

.tk-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border: 1px solid var(--line); border-radius: var(--r-1);
    font-size: var(--fs-sm); color: var(--fg-2); background: var(--bg-1);
}
.tk-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
    font-size: var(--fs-sm); color: var(--fg-1); background: var(--bg-1); cursor: pointer;
}
.tk-chip.is-active { background: oklch(from var(--signal) l c h / 0.14); border-color: transparent; color: var(--signal); }
.tk-chip-remove {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    margin: -2px -5px -2px 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
    color: inherit; font-size: 14px; line-height: 1; opacity: 0.65; cursor: pointer;
}
.tk-chip-remove:hover { background: color-mix(in srgb, currentColor 12%, transparent); opacity: 1; }
.tk-chip-remove:focus-visible { outline: none; box-shadow: var(--tk-focus-ring); opacity: 1; }

.tk-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-1); }
.tk-status .tk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); }
.tk-status-progress .tk-dot { background: var(--signal); }
.tk-status-done     .tk-dot { background: var(--ok); }
.tk-status-review   .tk-dot { background: var(--warn); }
.tk-status-blocked  .tk-dot { background: var(--err); }

/* Status pills have soft backgrounds, so never inherit the white foreground
   configured for solid primary buttons. Text follows the theme's readable
   foreground; the dot and existing soft fill retain the status colour. */
body.v2-shell .tk-status.status {
    color: var(--fg-1) !important;
}
body.v2-shell .tk-status.tk-status-progress .tk-dot { background: var(--bs-primary, var(--signal)); }
body.v2-shell .tk-status.tk-status-done .tk-dot { background: var(--ok); }
body.v2-shell .tk-status.tk-status-review .tk-dot { background: var(--warn); }
body.v2-shell .tk-status.tk-status-blocked .tk-dot { background: var(--err); }

/* ----------------------------------------------------------------------------
   6. TABS  (inset active indicator so it survives an overflow:hidden scroller)
   ---------------------------------------------------------------------------- */
.tk-tabs {
    display: flex; gap: 2px; border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
}
.tk-tabs::-webkit-scrollbar { display: none; }
.tk-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 11px; border: 0; background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
    color: var(--fg-2); border-radius: var(--r-1) var(--r-1) 0 0;
    transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.tk-tab:hover { color: var(--fg-0); background: var(--bg-2); }
.tk-tab.is-active {
    color: var(--fg-0); background: var(--bg-2);
    box-shadow: inset 0 -2px 0 0 var(--signal);
}
.tk-tab .tk-ic { width: 16px; height: 16px; }

/* ----------------------------------------------------------------------------
   7. META GRID  (label / value rows)  +  FACTS GRID (icon tiles)
   ---------------------------------------------------------------------------- */
.tk-meta { display: grid; grid-template-columns: 92px 1fr; gap: 9px 16px; align-items: center; font-size: var(--fs-base); }
.tk-meta dt, .tk-meta .tk-meta-k {
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--fg-3); font-weight: 600; margin: 0;
}
.tk-meta dd, .tk-meta .tk-meta-v { color: var(--fg-1); margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.tk-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tk-fact { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); }
.tk-fact > .tk-ic { color: var(--fg-3); flex: none; }
.tk-fact-txt { display: flex; flex-direction: column; min-width: 0; }
.tk-fact-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); font-weight: 600; }
.tk-fact-v { font-size: 13px; color: var(--fg-0); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----------------------------------------------------------------------------
   8. AVATARS
   ---------------------------------------------------------------------------- */
.tk-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
    background: var(--bg-3); color: var(--fg-2); font-size: 11px; font-weight: 600;
    flex: none; border: 1px solid var(--bg-1);
}
.tk-avatar img { width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
.tk-avstack { display: inline-flex; align-items: center; }
.tk-avstack > .tk-avatar { margin-left: -7px; }
.tk-avstack > .tk-avatar:first-child { margin-left: 0; }
.tk-avstack .tk-avatar-more { background: var(--bg-3); color: var(--fg-2); font-size: 10px; }

/* ----------------------------------------------------------------------------
   9. EMPTY STATE / SKELETON
   ---------------------------------------------------------------------------- */
.tk-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 28px 16px; text-align: center; color: var(--fg-3);
}
.tk-empty .tk-ic { opacity: 0.6; }
.tk-empty-title { margin: 0; color: var(--fg-0); font-size: var(--tk-text-md); font-weight: 600; }
.tk-empty-copy { margin: 0; max-width: 52ch; color: var(--fg-2); font-size: var(--tk-text-base); }
.tk-empty-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--tk-space-2); }
.tk-empty p { margin: 0; font-size: var(--fs-base); }
.tk-skel { height: 12px; border-radius: 6px; background: var(--bg-3); margin-bottom: 10px; animation: tkSkelPulse 1.1s ease-in-out infinite; }
@keyframes tkSkelPulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.85; } }

.tk-spinner {
    width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: tkSpin 700ms linear infinite; flex: none;
}
@keyframes tkSpin { to { transform: rotate(360deg); } }

/* Shared loading dots. Ownership is explicit; no descendant :has() scans. */
.skeleton-loader, .tk-skel,
.placeholder-glow > .placeholder, .placeholder-wave > .placeholder {
    background: transparent !important; background-image: none !important;
    border: 0 !important; outline: 0 !important; box-shadow: none !important;
    animation: none !important; opacity: 1 !important;
}
.tk-loading-skeleton .skel, .placeholder-glow > .placeholder,
.placeholder-wave > .placeholder { visibility: hidden; }
.placeholder-wave > .placeholder { mask-image: none !important; }
:is(.tk-spinner, .spinner-border, .spinner-grow, .bx-loader, .bx-loader-alt, .fa-spinner) {
    display: inline-block; position: relative; width: 28px; height: 18px;
    border: 0 !important; border-radius: 0; background: transparent !important;
    box-shadow: none !important; animation: none !important; font-size: 0;
    vertical-align: middle;
}
:is(.tk-spinner, .spinner-border, .spinner-grow, .bx-loader, .bx-loader-alt, .fa-spinner)::before,
:is(.tk-spinner, .spinner-border, .spinner-grow, .bx-loader, .bx-loader-alt, .fa-spinner)::after { content: none !important; }
:is(.tk-spinner, .spinner-border, .spinner-grow, .bx-loader, .bx-loader-alt, .fa-spinner) > svg { display: none !important; }
.tk-loading-state { position: relative; min-height: 48px; border: 0; box-shadow: none; background: transparent; }
.tk-loading-state[hidden] { display: none !important; }
.tk-filter-results { position: relative; min-height: 48px; }
#tk-view-content { min-width: 0; }
#tk-view-content:focus { outline: none; }
.tk-filter-results[aria-busy="true"] > :not(.tk-loading-dots) { opacity: .45; pointer-events: none; }
.tk-filter-error[hidden] { display: none !important; }
.tk-loading-state > :not(.tk-loading-dots) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.tk-loading-state > .tk-spinner { display: none !important; }
.tk-section-loading { position: relative !important; min-height: 48px; }
.tk-section-loading.tk-loading-inline { display: inline-block; min-height: 18px; }
.tk-section-loading[data-dashboard-summary] { min-height: 0; }
[data-loading-summary][aria-busy="true"] [data-loading-value] {
    position: relative; display: block; min-height: 32px;
    color: transparent !important;
}
[data-loading-value].tk-section-loading { min-height: 32px; }
.fixed-table-loading.tk-section-loading, .dataTables_processing.tk-section-loading,
.dt-processing.tk-section-loading { position: absolute !important; }
#dashboard_loading_state { min-height: 0; height: 0; }
.tk-loading-dots {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; gap: 5px; pointer-events: none; z-index: 1001;
}
.tk-loading-dots > span {
    display: block; width: 5px; height: 5px; flex: 0 0 5px;
    border-radius: 50%; background: var(--signal, #8754f6);
    opacity: .3; animation: tkLoadingDots 1.2s ease-in-out infinite;
}
.tk-loading-dots > span:nth-child(2) { animation-delay: .15s; }
.tk-loading-dots > span:nth-child(3) { animation-delay: .3s; }
@keyframes tkLoadingDots { 0%, 60%, 100% { opacity: .3; } 30% { opacity: .9; } }
.fixed-table-container .fixed-table-loading, .dataTables_processing, .dt-processing {
    background: var(--bg-1, #fff) !important; border: 0 !important;
    outline: 0 !important; box-shadow: none !important;
}
.fixed-table-loading .loading-wrap, .dataTables_processing > div,
.dt-processing > div { visibility: hidden; }
.dataTables_processing, .dt-processing { min-height: 48px; font-size: 0; }
@media (prefers-reduced-motion: reduce) {
    .tk-loading-dots > span { animation: none !important; opacity: .6; }
}

/* ----------------------------------------------------------------------------
   10. DRAWER / DOCK (sticky side panel)
   ---------------------------------------------------------------------------- */
.tk-dock {
    display: flex; flex-direction: column; align-self: stretch;
    background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-2);
    box-shadow: var(--shadow-1); overflow: hidden;
}
.tk-dock-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--line); flex: none;
}
.tk-dock-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg-0); }
.tk-dock-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; scrollbar-width: none; }
.tk-dock-body::-webkit-scrollbar { display: none; }

/* ----------------------------------------------------------------------------
   11. TABLE  — design-system skin for <x-tk-table> (over bootstrap-table).
   Scoped to .tk-table so it never touches other tables. !important is needed
   because the bootstrap-table vendor CSS loads after this file.
   ---------------------------------------------------------------------------- */
.tk-table { width: 100%; }

/* --- toolbar (search · refresh · column-toggle) --- */
.tk-table .fixed-table-toolbar { padding: 0 0 12px; min-height: var(--ctrl-h-md); }
.tk-table .fixed-table-toolbar .bs-bars,
.tk-table .fixed-table-toolbar .columns,
.tk-table .fixed-table-toolbar .search { margin: 0; }
.tk-table .fixed-table-toolbar .search { float: right; position: relative; }
.tk-table .fixed-table-toolbar .search .form-control,
.tk-table .fixed-table-toolbar .search input {
    height: var(--ctrl-h-md); min-width: 220px; padding: 0 12px !important;
    background: var(--bg-2) !important; border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important; color: var(--fg-0) !important;
    font-size: var(--fs-base) !important; box-shadow: none !important;
    transition: border-color var(--t-1) var(--ease) !important;
}
.tk-table .fixed-table-toolbar .search .form-control:hover,
.tk-table .fixed-table-toolbar .search input:hover {
    border-color: var(--line-2) !important;
}
.tk-table .fixed-table-toolbar .search .form-control:focus,
.tk-table .fixed-table-toolbar .search input:focus {
    border-color: var(--fg-1) !important; box-shadow: none !important; outline: none !important;
}
.tk-table .fixed-table-toolbar .btn,
.tk-table .fixed-table-toolbar .button > .btn {
    height: var(--ctrl-h-md); min-width: var(--ctrl-h-md); padding: 0 9px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--bg-2) !important; border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important; color: var(--fg-2) !important; box-shadow: none !important;
    font-size: var(--fs-base);
}
.tk-table .fixed-table-toolbar .btn:hover { background: var(--bg-3) !important; color: var(--fg-0) !important; }
.tk-table .fixed-table-toolbar .btn i { font-size: 17px; }

/* Table Toolbar Button Specific Overrides */
/* Shared action sizing also applies to card pages such as Notes. */
.tk-table .fixed-table-toolbar .btn.tk-toolbar-action,
body.v2-shell .btn.tk-toolbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px !important;
    height: 32px !important;
    min-height: 32px !important;
    min-width: 32px;
    padding: 0 10px !important;
    border: 1px solid var(--line);
    border-radius: 6px !important;
    font-family: var(--font-sans);
    font-size: var(--fs-base, 13px) !important;
    font-weight: 500;
    line-height: 1 !important;
    white-space: nowrap;
    box-shadow: none !important;
}
body.v2-shell .btn.tk-toolbar-action :is(.tk-ic, svg) { width: 16px; height: 16px; flex: none; }
body.v2-shell .btn.tk-toolbar-action i { margin: 0 !important; }
.tk-table .fixed-table-toolbar .btn.delete-selected,
body.v2-shell .btn.tk-toolbar-action-danger {
    background: transparent !important;
    border-color: oklch(from var(--err) l c h / 0.40) !important;
    color: var(--err) !important;
    transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease) !important;
}
.tk-table .fixed-table-toolbar .btn.delete-selected:hover,
body.v2-shell .btn.tk-toolbar-action-danger:hover {
    background: oklch(from var(--err) l c h / 0.10) !important;
    border-color: var(--err) !important;
    color: var(--err) !important;
}
.tk-table .fixed-table-toolbar .btn.delete-selected:focus,
body.v2-shell .btn.tk-toolbar-action-danger:focus {
    border-color: var(--err) !important;
    box-shadow: none !important;
    outline: none !important;
}

.tk-table .fixed-table-toolbar .btn.save-column-visibility,
body.v2-shell .btn.tk-toolbar-action-neutral {
    background: transparent !important;
    border-color: var(--line-2) !important;
    color: var(--fg-0) !important;
    transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease) !important;
}
.tk-table .fixed-table-toolbar .btn.save-column-visibility:hover,
body.v2-shell .btn.tk-toolbar-action-neutral:hover {
    background: var(--signal-soft) !important;
    border-color: var(--signal) !important;
    color: var(--fg-0) !important;
}
.tk-table .fixed-table-toolbar .btn.save-column-visibility:focus,
body.v2-shell .btn.tk-toolbar-action-neutral:focus {
    border-color: var(--signal) !important;
    box-shadow: none !important;
    outline: none !important;
}


/* --- container --- */
.tk-table .fixed-table-container {
    border: 1px solid var(--line) !important; border-radius: var(--r-2); overflow: hidden;
    background: var(--bg-1);
}
.tk-table .fixed-table-body { background: var(--bg-1); }

/* --- the table --- */
.tk-table table { width: 100%; margin: 0; color: var(--fg-1); border-collapse: collapse; }
.tk-table thead th {
    background: var(--bg-2) !important; color: var(--fg-3) !important;
    font-size: var(--fs-xs) !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 11px 14px !important; vertical-align: middle; white-space: nowrap;
    border: 0 !important; border-bottom: 1px solid var(--line) !important;
}
.tk-table thead th .th-inner { padding: 0 !important; }
.tk-table tbody td {
    padding: 11px 14px !important; color: var(--fg-1) !important; vertical-align: middle;
    background: transparent !important;
    border: 0 !important; border-bottom: 1px solid var(--line) !important;
}
.tk-table tbody tr { transition: background var(--t-1) var(--ease); }
.tk-table tbody tr:hover td { background: var(--bg-2) !important; }
.tk-table tbody tr:last-child td { border-bottom: 1px solid var(--line) !important; }
.tk-table tbody tr.selected td { background: oklch(from var(--signal) l c h / 0.10) !important; }

/* sort indicators */
.tk-table th.sortable { cursor: pointer; }
.tk-table th.sortable:hover { color: var(--fg-1) !important; }
.tk-table .sortable .both,
.tk-table .sortable .asc,
.tk-table .sortable .desc { opacity: 0.6; }

/* checkbox column */
.tk-table .bs-checkbox { width: 44px; text-align: center; }
.tk-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--signal); cursor: pointer; vertical-align: middle; }

/* empty state */
.tk-table .no-records-found td {
    color: var(--fg-3) !important; text-align: center; padding: 30px 14px !important; font-size: var(--fs-base);
}

.tk-table .fixed-table-loading {
    color: var(--fg-2);
    background: color-mix(in srgb, var(--bg-1) 92%, transparent);
}

@media (max-width: 767.98px) {
    .tk-table .fixed-table-toolbar {
        display: flex;
        align-items: stretch;
        gap: var(--tk-space-2);
        flex-wrap: wrap;
    }

    .tk-table .fixed-table-toolbar .search {
        float: none;
        flex: 1 1 100%;
        order: -1;
        width: 100%;
    }

    .tk-table .fixed-table-toolbar .search .form-control,
    .tk-table .fixed-table-toolbar .search input {
        min-width: 0;
        width: 100%;
    }

    .tk-table .fixed-table-toolbar .columns,
    .tk-table .fixed-table-toolbar .bs-bars {
        float: none;
        margin: 0 !important;
    }

    .tk-table .fixed-table-body {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .tk-table table {
        min-width: 720px;
    }

    .tk-table .fixed-table-pagination {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--tk-space-2);
    }

    .tk-table .fixed-table-pagination .pagination-detail,
    .tk-table .fixed-table-pagination .pagination {
        float: none !important;
        margin: 0 !important;
    }
}

/* --- pagination --- */
.tk-table .fixed-table-pagination { padding-top: 12px; font-size: var(--fs-sm); color: var(--fg-2); }
.tk-table .fixed-table-pagination .pagination-detail { color: var(--fg-3); }
.tk-table .fixed-table-pagination .page-list .dropdown-toggle {
    background: var(--bg-2) !important; border: 1px solid var(--line) !important;
    color: var(--fg-1) !important; border-radius: var(--r-1) !important; box-shadow: none !important;
}
.tk-table .pagination { gap: 3px; margin: 0; }
.tk-table .pagination .page-link {
    min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 7px; border: 1px solid var(--line) !important; background: var(--bg-1) !important;
    color: var(--fg-1) !important; border-radius: var(--r-1) !important; font-size: var(--fs-sm);
    transition: background var(--t-1) var(--ease);
}
.tk-table .pagination .page-link:hover { background: var(--bg-2) !important; color: var(--fg-0) !important; }
.tk-table .pagination .page-item.active .page-link {
    background: var(--signal) !important; border-color: var(--signal) !important; color: var(--signal-fg, #fff) !important;
}
.tk-table .pagination .page-item.disabled .page-link { color: var(--fg-3) !important; opacity: 0.5; }

/* ----------------------------------------------------------------------------
   12. PAGINATION
   ---------------------------------------------------------------------------- */
.tk-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.tk-pagination-btn {
    border: 1px solid var(--line);
    background: var(--bg-1);
    color: var(--fg-1);
    border-radius: var(--r-1);
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
    box-sizing: border-box;
    padding: 0 6px;
}
.tk-pagination-btn:hover:not([disabled]):not(.is-disabled) {
    background: var(--bg-2);
    color: var(--fg-0);
    border-color: var(--line-2);
}
.tk-pagination-btn.is-active,
.tk-pagination-btn.on {
    background: var(--signal) !important;
    border-color: var(--signal) !important;
    color: #ffffff !important;
    font-weight: 600;
}
.tk-pagination-btn[disabled],
.tk-pagination-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--bg-2);
    border-color: var(--line);
}

/* Legacy hosts now render the same SVG component as x-tk-icon, not a font/mask.
   Keep their utility classes, hit targets, animation and delegated events. */
body.v2-shell :is(i, span).tk-icon-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 1;
    vertical-align: middle;
}
body.v2-shell :is(i, span).tk-icon-host::before,
body.v2-shell :is(i, span).tk-icon-host::after { content: none !important; display: none !important; }
body.v2-shell :is(i, span).tk-icon-host > svg.tk-ic {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
    pointer-events: none;
}

/* Framed phone/password groups own one border and one focus ring. */
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)):has(> input, > .iti) {
    box-sizing: border-box;
    height: var(--ctrl-h-md, 32px) !important;
    min-height: var(--ctrl-h-md, 32px) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)) > input,
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)) > .iti > input.iti__tel-input {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
    min-block-size: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)) > .iti { height: 100%; min-width: 0; flex: 1 1 auto; }
body.v2-shell .input-group-merge:has(> input) > .input-group-text { border: 0 !important; box-shadow: none !important; }
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)):has(> input, > .iti):not(:is(.is-invalid, .is-valid, [aria-invalid="true"])):not(:has(.is-invalid, .is-valid, [aria-invalid="true"], input:disabled, input[readonly])):focus-within,
body.v2-shell .iti > input.iti__tel-input:not(:where(.tk-inputgroup input, .input-group-merge input, .input-group:has(> .iti) input)):not(:is(.is-invalid, .is-valid, [aria-invalid="true"], :disabled, [readonly])):focus {
    border: 2px solid var(--bs-primary) !important;
    box-shadow: var(--tk-focus-ring, var(--shadow-focus)) !important;
    outline: none !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)):has(> input, > .iti):is(.is-invalid, [aria-invalid="true"], :has(.is-invalid, [aria-invalid="true"])) {
    border-color: var(--bs-danger, var(--err)) !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)):has(> input, > .iti):is(.is-invalid, [aria-invalid="true"], :has(.is-invalid, [aria-invalid="true"])):focus-within {
    border-width: 2px !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-danger, var(--err)) 35%, transparent) !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)):has(> input, > .iti):is(.is-valid, :has(.is-valid)):not(:is(.is-invalid, [aria-invalid="true"])):not(:has(.is-invalid, [aria-invalid="true"])) { border-color: var(--bs-success, var(--ok)) !important; }
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)):has(> input, > .iti):is(.is-valid, :has(.is-valid)):not(:is(.is-invalid, [aria-invalid="true"])):not(:has(.is-invalid, [aria-invalid="true"])):focus-within {
    border-width: 2px !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-success, var(--ok)) 35%, transparent) !important;
}

/* Validation feedback occupies its own line below the visible field frame. */
body.v2-shell .tk-field-error {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Form completion actions: one right-aligned contract for pages and overlays. */
body.v2-shell :is(.tk-form-action-row, .tk-form-actions, .modal-footer, .offcanvas-footer, .offcanvas .offcanvas-foot) {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px;
    text-align: right !important;
}
body.v2-shell :is(.tk-form-action-row, .tk-form-actions, .modal-footer, .offcanvas-footer, .offcanvas .offcanvas-foot) > :is(.btn, .tk-btn, a) {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100%;
    margin-inline: 0 !important;
    white-space: normal;
}

/* Rich-text editors share native field geometry, not TinyMCE's 2px resting
   frame. Keep toolbar/status-bar separators inside the single outer frame. */
body.v2-shell .tox-tinymce {
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--r-2) !important;
    transition: border-color var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease);
}
body.v2-shell .tox-tinymce:not(:where(.tk-editor-focused, .is-invalid, .is-valid, [aria-invalid="true"])):not(:focus-within) {
    border-color: var(--line) !important;
}
body.v2-shell .tox-tinymce:not(.tox-tinymce--disabled):is(:focus-within, .tk-editor-focused) {
    border-width: 2px !important;
}
body.v2-shell .tox-tinymce:is(.is-invalid, [aria-invalid="true"]) {
    border-color: var(--bs-danger, var(--err)) !important;
}
body.v2-shell .tox-tinymce:is(.is-invalid, [aria-invalid="true"]):is(:focus-within, .tk-editor-focused) {
    border-color: var(--bs-danger, var(--err)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-danger, var(--err)) 35%, transparent) !important;
}
/* Enhanced fields and grouped inputs highlight the visible control, including
   forms that use Select2 or a standalone country/phone widget. */
body.v2-shell label.is-invalid,
body.v2-shell .btn-check + label.btn.is-invalid,
body.v2-shell .dropzone.is-invalid,
body.v2-shell .select2-container.is-invalid .select2-selection,
body.v2-shell .iti.is-invalid > input,
body.v2-shell .input-group.is-invalid:not(.input-group-merge):not(:has(> .iti)) > :is(.form-control, .form-select, .input-group-text) {
    border-color: var(--bs-danger, var(--err)) !important;
}
/* Switches and sliders have no resting border, so preserve their geometry and
   mark their visible native control with the same danger colour. */
body.v2-shell :is(.form-check-input, .form-range).is-invalid {
    outline: 1px solid var(--bs-danger, var(--err)) !important;
    outline-offset: 2px;
}
body.v2-shell :is(.tk-note-type-switch, .tk-note-type-display, .tk-note-editor).is-invalid {
    outline: 1px solid var(--bs-danger, var(--err)) !important;
    outline-offset: 2px;
}
body.v2-shell textarea.is-invalid:not(.form-control):not(.tk-textarea) {
    border-color: var(--bs-danger, var(--err)) !important;
}
body.v2-shell input.is-invalid:not(:where(.form-control, .tk-input, .form-check-input, .btn-check, [type="hidden"], .tk-inputgroup input, .input-group-merge input, .ts-control input)) {
    outline: 1px solid var(--bs-danger, var(--err)) !important;
    outline-offset: 2px;
}
body.v2-shell .select2-container.is-invalid:focus-within .select2-selection,
body.v2-shell .iti.is-invalid > input:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-danger, var(--err)) 35%, transparent) !important;
}
body.v2-shell .tox-tinymce.is-valid:not(.is-invalid):not([aria-invalid="true"]) {
    border-color: var(--bs-success, var(--ok)) !important;
}

/* Shared light field hover. Readonly display fields follow the same gray border;
   never replace focus, validation, disabled states or nested frames. */
body.v2-shell :is(.form-control, .form-select, .tk-input, .tk-select, .tk-textarea, .iti__tel-input):not(:where(.ts-wrapper, .ts-control, .dropdown-input, .items-placeholder, :disabled, .disabled, .readonly, .is-invalid, .is-valid, [aria-invalid="true"])):not(:where(.ts-control *, .tk-inputgroup *, .input-group-merge *)):not(:focus) {
    border-color: var(--line) !important;
}
body.v2-shell .input-group:not(.input-group-merge):not(:has(:is(input, select, textarea):disabled, .is-invalid, .is-valid, [aria-invalid="true"])):not(:focus-within) > .input-group-text {
    border-color: var(--line) !important;
}
body.v2-shell :is(.form-control, .form-select, .tk-input, .tk-select, .tk-textarea, .iti__tel-input):not(:where(.ts-wrapper, .ts-control, .dropdown-input, .items-placeholder, :disabled, .disabled, .readonly, .is-invalid, .is-valid, [aria-invalid="true"])):not(:where(.ts-control *, .tk-inputgroup *, .input-group-merge *)):hover:not(:focus) {
    border-color: var(--line-2) !important;
}
body.v2-shell .ts-wrapper:not(:where(.disabled, .readonly, .is-invalid, .is-valid, [aria-invalid="true"], .tk-work-select, .focus, .input-active, .dropdown-active, :focus-within)):hover > .ts-control:not(:where(.is-invalid, .is-valid, [aria-invalid="true"])) {
    border-color: var(--line-2) !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge, .input-group:has(> .iti)):not(:where(.disabled, .readonly, .is-invalid, .is-valid, [aria-invalid="true"])):not(:has(:is(input, select, textarea):disabled, .is-invalid, .is-valid, [aria-invalid="true"])):hover:not(:focus-within),
body.v2-shell .input-group:not(.input-group-merge):not(:has(:is(input, select, textarea):disabled, .is-invalid, .is-valid, [aria-invalid="true"])):hover:not(:focus-within) > :is(.form-control, .form-select, .input-group-text):not(.ts-wrapper) {
    border-color: var(--line-2) !important;
}
body.v2-shell .input-group-merge:not(:where(.disabled, .readonly, .is-invalid, .is-valid, [aria-invalid="true"])):not(:has(:is(input, select, textarea):disabled, .is-invalid, .is-valid, [aria-invalid="true"])):hover:not(:focus-within) > :is(.form-control, .form-select, .input-group-text):not(.ts-wrapper) {
    border-color: var(--line-2) !important;
}

body.v2-shell .tox-tinymce:not(:where(.tox-tinymce--disabled, .tk-editor-focused, .is-invalid, .is-valid, [aria-invalid="true"])):hover:not(:focus-within) {
    border-color: var(--line-2) !important;
}

/* Disabled fields share one light-theme surface, border and placeholder.
   Reset enhanced-select fading instead of fading its entire border and text.
   Dark mode and native disabled behavior remain unchanged. */
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell :is(.form-control, .form-select, .tk-input, .tk-select, .tk-textarea):disabled,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .tk-inputgroup :is(input, select, textarea):disabled,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .ts-wrapper.disabled > .ts-control,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .select2-container--disabled .select2-selection,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell :is(.input-group, .tk-inputgroup):has(:is(input, select, textarea):disabled) > .input-group-text {
    background-color: #ffffff !important;
    border-color: var(--line, #d9dee3) !important;
    opacity: 1 !important;
}

html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .ts-wrapper.disabled,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .ts-wrapper.disabled > .ts-control > input,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .select2-container--disabled {
    opacity: 1 !important;
}

html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell :is(input.form-control, textarea.form-control, .tk-input, .tk-textarea):disabled::placeholder,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .tk-inputgroup :is(input, textarea):disabled::placeholder,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .ts-wrapper.disabled > .ts-control > input::placeholder,
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .select2-container--disabled .select2-selection__placeholder {
    color: var(--fg-3, #697a8d) !important;
    opacity: 1 !important;
}

/* Locked-field cursor: native fields and enhanced select surfaces agree.
   CSS only: never enable a disabled control or prevent readonly text copying.
   Readonly picker inputs remain interactive and are not locked display fields. */
body.v2-shell :is(input, select, textarea):disabled,
body.v2-shell :is(input, select, textarea):is([aria-disabled="true"], [aria-readonly="true"]),
body.v2-shell :is(input, textarea)[readonly]:not(:where(.flatpickr-input, .flatpickr-range, .dt-date, [data-provide="datepicker"], [role="combobox"])),
body.v2-shell .ts-wrapper:is(.disabled, .readonly),
body.v2-shell .ts-wrapper:is(.disabled, .readonly) :is(.ts-control, .ts-control *),
body.v2-shell .select2-container--disabled,
body.v2-shell .select2-container--disabled :is(.select2-selection, .select2-selection *),
body.v2-shell :is(.tk-inputgroup, .input-group):has(> :is(input, select, textarea):disabled),
body.v2-shell :is(.tk-inputgroup, .input-group):has(> :is(input, textarea)[readonly]:not(:where(.flatpickr-input, .flatpickr-range, .dt-date, [data-provide="datepicker"], [role="combobox"]))),
body.v2-shell .iti:has(> input:disabled),
body.v2-shell .iti:has(> input:disabled) .iti__selected-country,
body.v2-shell .tox-tinymce--disabled {
    cursor: not-allowed !important;
}

/* Status/priority form selections are plain labels, matching the filters. */
body.v2-shell .ts-wrapper.single.tk-choice-select > .ts-control > .item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--fg-0) !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}

/* Selected-chip removal: centered red icon, without a coloured background. */
body.v2-shell .ts-wrapper .ts-control > .item > .remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box;
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    border: 0 !important;
    border-radius: var(--r-2, 5px) !important;
    background: transparent !important;
    color: var(--bs-danger, var(--err)) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
body.v2-shell .ts-wrapper .ts-control > .item > .remove::before,
body.v2-shell .ts-wrapper.single .ts-control .clear-button::before {
    content: "";
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.v2-shell .ts-wrapper .ts-control > .item > .remove:hover,
body.v2-shell .ts-wrapper .ts-control > .item > .remove:focus-visible {
    background: transparent !important;
    color: var(--bs-danger, var(--err)) !important;
}
body.v2-shell .ts-wrapper .ts-control > .item > .remove:focus-visible {
    outline: 2px solid var(--bs-primary, var(--signal));
    outline-offset: 1px;
}
body.v2-shell .ts-wrapper .clear-button,
body.v2-shell .ts-wrapper .clear-button:hover,
body.v2-shell .ts-wrapper .clear-button:focus-visible {
    color: var(--bs-danger, var(--err)) !important;
    background: transparent !important;
}
body.v2-shell .ts-wrapper :is(.clear-button, .ts-control > .item > .remove) :is(i, svg) {
    color: inherit !important;
}
/* A single value clears beside its label, like the per-chip multi-select action. */
body.v2-shell .ts-wrapper.single .ts-control > .item { order: 0; }
body.v2-shell .ts-wrapper.single .ts-control > input { order: 2; }
body.v2-shell .ts-wrapper.single .ts-control .clear-button {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    order: 1;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
body.v2-shell .ts-wrapper.single.has-items:not(.disabled):not(.readonly) .ts-control .clear-button {
    display: inline-flex !important;
    opacity: 1 !important;
}
body.v2-shell .ts-wrapper.single:is(:not(.has-items), .disabled, .readonly) .ts-control .clear-button {
    display: none !important;
}
body.v2-shell .ts-wrapper:is(.disabled, .readonly) .ts-control > .item > .remove {
    display: none !important;
}
/* Multi-select chips already have a remove action. Suppress the redundant
   field-wide clear control from legacy/direct initializers as well. */
body.v2-shell .ts-wrapper.multi.plugin-remove_button .ts-control .clear-button,
body.v2-shell .ts-wrapper.single.plugin-remove_button.has-items:not(.disabled):not(.readonly) .ts-control .clear-button {
    display: none !important;
}
body.v2-shell .ts-wrapper.multi.plugin-remove_button > .ts-control {
    padding-inline-end: var(--tk-field-padding-x, 12px) !important;
}

/* Shared single-line field sizing. Native/Taskify fields and Tom Select use
   the same compact control token. Textareas, uploads, colour swatches, native
   listboxes and the dashboard's intentionally borderless editors are excluded. */
body.v2-shell input:is(.form-control, .tk-input):not(:where(.dropdown-input, .items-placeholder, [type="hidden"], [type="file"], [type="color"], [type="checkbox"], [type="radio"], [type="range"])),
body.v2-shell select:is(.form-control, .form-select, .tk-select):not(.tomselected):not([multiple]):is(:not([size]), [size="1"]) {
    box-sizing: border-box;
    height: var(--ctrl-h-md, 32px) !important;
    min-height: var(--ctrl-h-md, 32px) !important;
    min-block-size: var(--ctrl-h-md, 32px) !important;
    padding-block: 0 !important;
    font-size: var(--fs-base, 13px) !important;
    line-height: 1.4;
}
body.v2-shell select:is(.form-select, .tk-select):not(.tomselected):not([multiple]) {
    padding-inline-end: 30px !important;
}
body.v2-shell .ts-wrapper:not(.tk-work-select) {
    height: auto !important;
    min-height: 0 !important;
    min-block-size: 0 !important;
}
body.v2-shell .ts-wrapper:not(.tk-work-select) > .ts-control {
    box-sizing: border-box !important;
    min-height: var(--ctrl-h-md, 32px) !important;
    min-block-size: var(--ctrl-h-md, 32px) !important;
    font-size: var(--fs-base, 13px) !important;
}
body.v2-shell .ts-wrapper.single:not(.tk-work-select) > .ts-control {
    height: var(--ctrl-h-md, 32px) !important;
    padding-block: 0 !important;
}
body.v2-shell .ts-wrapper.multi:not(.tk-work-select) > .ts-control {
    height: auto !important;
    padding-block: 3px !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge):not(:has(textarea)) {
    box-sizing: border-box;
    height: auto !important;
    min-height: var(--ctrl-h-md, 32px) !important;
    min-block-size: var(--ctrl-h-md, 32px) !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge):not(:has(textarea, select[multiple], .ts-wrapper.multi)) {
    height: var(--ctrl-h-md, 32px) !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge) > input:is(.form-control, .tk-input),
body.v2-shell :is(.tk-inputgroup, .input-group-merge) > .iti > input.iti__tel-input {
    height: 100% !important;
    min-height: 0 !important;
    min-block-size: 0 !important;
    padding-block: 0 !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge) > .iti { height: 100%; }
body.v2-shell .input-group:not(:has(> textarea)) > .input-group-text {
    box-sizing: border-box;
    height: var(--ctrl-h-md, 32px) !important;
    padding-block: 0 !important;
}
body.v2-shell :is(.tk-inputgroup, .input-group-merge) > .input-group-text { height: 100% !important; }

/* Editable profile uses the same full-width cards and field geometry as
   other account forms; photo and destructive actions retain separate forms. */
.tk-profile-page { padding-bottom: 24px; }
.tk-profile-page .tk-profile-card-title { margin: 0; padding: 24px 24px 0; font-size: 14px; font-weight: 600; }
.tk-profile-page .card-body { padding: 24px; }
.tk-profile-page .tk-profile-photo-controls { flex: 1; min-width: 0; max-width: 720px; }
.tk-profile-page .tk-profile-photo-form > .d-flex { flex-wrap: wrap; gap: 24px !important; }
.tk-profile-page #uploadedAvatar { width: 80px; height: 80px; flex: 0 0 auto; object-fit: cover; }
.tk-profile-page .tk-profile-upload { gap: 8px; flex-wrap: wrap; }
.tk-profile-page .tk-profile-upload > .form-control { min-width: 180px; border-radius: var(--r-2, 6px) !important; }
.tk-profile-page .tk-profile-upload > input[type="file"] { height: var(--ctrl-h-md, 32px); padding-block: 0; font-size: var(--fs-base, 13px); line-height: 30px; }
.tk-profile-page .tk-profile-upload > input[type="file"]::file-selector-button { height: 100%; margin-block: 0; padding-block: 0; }
.tk-profile-page .tk-profile-upload > .btn { border-radius: var(--r-2, 6px) !important; margin: 0 !important; }
.tk-profile-page .tk-profile-section-heading { margin-bottom: 16px; }
.tk-profile-page .tk-profile-section-heading:not(:first-child) { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line, #d9dee3); }
.tk-profile-page .tk-profile-section-heading h2 { margin: 0; font-size: 14px; font-weight: 600; }
.tk-profile-page .tk-profile-section-heading p { margin-top: 4px; font-size: 12px; }
@media (max-width: 575.98px) {
    .tk-profile-page .card-body { padding: 16px; }
    .tk-profile-page .tk-profile-card-title { padding: 16px 16px 0; }
    .tk-profile-page .tk-profile-photo-controls { flex-basis: 100%; }
    .tk-profile-page .tk-profile-upload > .form-control { flex-basis: 100%; width: 100%; }
}

/* Lead form builder: the same controls as page forms, with compact locked
   fields and one responsive layout for saved and newly appended fields. */
.tk-lead-form-builder { padding-bottom: 24px; }
.tk-lead-form-builder .tk-lead-section-heading { margin-bottom: 16px; }
.tk-lead-form-builder .tk-lead-section-heading h2 { margin: 0; font-size: 14px; font-weight: 600; }
.tk-lead-form-builder .tk-lead-section-heading p { margin: 4px 0 0; color: var(--fg-3, #697a8d); font-size: 12px; }
.tk-lead-form-builder .tk-lead-required-note { color: var(--fg-3, #697a8d); line-height: 1.5; }
.tk-lead-form-builder #mandatoryFields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tk-lead-form-builder #mandatoryFields .field-row { min-width: 0; margin: 0 !important; padding: 12px !important; background: var(--bg-2, #fafbfc) !important; border-color: var(--line, #d9dee3) !important; }
.tk-lead-form-builder #mandatoryFields .row { display: grid; gap: 4px; margin: 0; }
.tk-lead-form-builder #mandatoryFields .row > div { width: auto; padding: 0; min-width: 0; }
.tk-lead-form-builder #mandatoryFields strong { font-size: var(--fs-base, 13px); font-weight: 500; }
.tk-lead-form-builder .tk-lead-reorder-hint { margin-bottom: 16px; font-size: 12px; }
.tk-lead-form-builder #fieldsContainer { min-width: 0; }
.tk-lead-form-builder #fieldsContainer:empty::before { content: attr(data-empty-label); display: block; padding: 24px; margin-bottom: 16px; border: 1px dashed var(--line, #d9dee3); border-radius: var(--r-2, 6px); text-align: center; color: var(--fg-3, #697a8d); }
.tk-lead-form-builder #fieldsContainer > .field-row { min-width: 0; padding: 16px !important; background: var(--bg-1, #fff) !important; border-color: var(--line, #d9dee3) !important; }
.tk-lead-form-builder .tk-lead-field-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.tk-lead-form-builder .tk-lead-field-heading > .btn:last-child { margin-inline-start: auto; }
.tk-lead-form-builder .lead-field-drag-handle { cursor: grab; touch-action: none; }
.tk-lead-form-builder .lead-field-drag-handle:active { cursor: grabbing; }
.tk-lead-form-builder #fieldsContainer > .field-row > .row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .7fr); gap: 16px 1.625rem; margin: 0; }
.tk-lead-form-builder #fieldsContainer > .field-row > .row > div { width: auto; min-width: 0; padding: 0; margin: 0; }
.tk-lead-form-builder .options-container { border-top: 1px solid var(--line, #d9dee3); padding-top: 16px; }
.tk-lead-form-builder .options-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-lead-form-builder .options-list > .badge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; margin: 0 !important; padding: 6px 8px; color: var(--fg-1, #697a8d) !important; background: var(--bg-2, #fafbfc) !important; border: 1px solid var(--line, #d9dee3); }
.tk-lead-form-builder .options-list .btn-close { flex-shrink: 0; }
.tk-lead-form-builder .sortable-ghost { opacity: .45; }
@media (max-width: 991.98px) {
    .tk-lead-form-builder #fieldsContainer > .field-row > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .tk-lead-form-builder #fieldsContainer > .field-row > .row { grid-template-columns: minmax(0, 1fr); }
    .tk-lead-form-builder #mandatoryFields { grid-template-columns: minmax(0, 1fr); }
}

/* Add/edit pages share the standard field rhythm and completion actions. */
body.v2-shell .tk-entry-page > .d-flex:first-child {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px !important;
}
body.v2-shell :is(.tk-entry-form, .tk-profile-form) .row {
    --bs-gutter-x: 1.625rem;
}
body.v2-shell :is(.tk-entry-form, .tk-profile-form) :is(.mb-2, .mb-4):has(> .form-label, > input:not([type="hidden"]), > select, > textarea) {
    margin-bottom: 16px !important;
}
body.v2-shell :is(.tk-entry-form, .tk-profile-form) :is(.tk-entry-actions, .tk-form-action-row, .tk-payslip-actions) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: end;
}
body.v2-shell :is(.tk-entry-form, .tk-profile-form) :is(.tk-entry-actions, .tk-form-action-row, .tk-payslip-actions) > .btn,
body.v2-shell .tk-entry-page > .d-flex:first-child .btn {
    min-height: var(--ctrl-h-md, 32px);
    height: var(--ctrl-h-md, 32px);
    padding: 0 14px;
    font-size: var(--fs-base, 13px);
    margin-inline: 0 !important;
    max-width: 100%;
    white-space: normal;
}

/* Form overlays use the same padding, field rhythm and completion controls
   as full-page forms. Scope this to overlays containing forms so viewers,
   charts and other non-form dialogs keep their own layout. */
body.v2-shell :is(.modal, .offcanvas):has(form) {
    --tk-overlay-form-padding: 24px;
}
body.v2-shell :is(.modal, .offcanvas):has(form) > .offcanvas-header,
body.v2-shell .modal:has(form) .modal-header {
    padding: 16px var(--tk-overlay-form-padding);
}
body.v2-shell :is(.modal, .offcanvas):has(form) :is(.modal-body, .offcanvas-body) {
    padding: var(--tk-overlay-form-padding);
}
body.v2-shell :is(.modal, .offcanvas):has(form) :is(.modal-body, .offcanvas-body) :is(.mb-2, .mb-4):has(> .form-label, > input:not([type="hidden"]), > select, > textarea) {
    margin-bottom: 16px !important;
}
body.v2-shell :is(.modal, .offcanvas):has(form) :is(.modal-footer, .offcanvas-footer, .offcanvas-foot) {
    padding: 16px var(--tk-overlay-form-padding);
}
body.v2-shell :is(.modal, .offcanvas):has(form) .tk-form-actions {
    margin: 24px calc(-1 * var(--tk-overlay-form-padding)) calc(-1 * var(--tk-overlay-form-padding));
    padding: 16px var(--tk-overlay-form-padding);
}
body.v2-shell :is(.modal, .offcanvas):has(form) :is(.modal-footer, .offcanvas-footer, .offcanvas-foot, .tk-form-actions, .tk-form-action-row) > :is(.btn, .tk-btn) {
    height: var(--ctrl-h-md, 32px);
    min-height: var(--ctrl-h-md, 32px);
    padding: 0 14px;
    font-size: var(--fs-base, 13px);
    gap: 6px;
}
@media (max-width: 575.98px) {
    body.v2-shell :is(.modal, .offcanvas):has(form) {
        --tk-overlay-form-padding: 16px;
    }
}

/* Recruitment dialogs share a compact field rhythm and completion controls. */
.tk-candidate-modal-description,
.tk-recruitment-modal-description {
    margin: 4px 0 0;
    color: var(--fg-2);
    font-size: 12px;
    line-height: 1.5;
}
body.v2-shell :is(.tk-candidate-modal, .tk-recruitment-modal) .modal-header {
    align-items: flex-start;
}
body.v2-shell :is(.tk-candidate-modal, .tk-recruitment-modal) .modal-header .btn-close {
    margin: 0 0 0 16px;
    flex-shrink: 0;
}
body.v2-shell :is(.tk-candidate-fields, .tk-recruitment-fields) {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 16px;
}
body.v2-shell :is(.tk-candidate-fields, .tk-recruitment-fields) > div {
    min-width: 0;
}
body.v2-shell :is(.tk-candidate-fields, .tk-recruitment-fields) .form-select {
    text-align: start;
}
.tk-recruitment-field-help {
    margin: 6px 0 0;
    color: var(--fg-3);
    font-size: 11px;
    line-height: 1.5;
}

/* Leave dates and partial-day times share a stable grid without Bootstrap's
   percentage columns wrapping once the field gaps are added. */
body.v2-shell .tk-leave-request-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px 20px;
    margin: 0;
}
body.v2-shell .tk-leave-request-grid > div {
    grid-column: 1 / -1;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0;
}
/* Override the old modal-specific 20% widths, even in cached page CSS. */
body.v2-shell :is(#create_leave_request_modal, #edit_leave_request_modal) .tk-leave-request-grid > div {
    width: auto !important;
}
body.v2-shell .tk-leave-request-grid > :is(.leave-from-date-div, .leave-to-date-div) {
    grid-column: span 5;
}
body.v2-shell .tk-leave-request-grid > :is(.leave-from-time-div, .leave-to-time-div, .leave-days-div) {
    grid-column: span 2;
}
body.v2-shell .tk-leave-request-grid:has([name="partialLeave"]:checked) > :is(.leave-from-date-div, .leave-to-date-div) {
    grid-column: span 3;
}
body.v2-shell .tk-leave-request-grid .form-check {
    margin-block: 0 !important;
}
body.v2-shell .tk-leave-request-grid .leave-days-div input[readonly] {
    color: var(--fg-0) !important;
    -webkit-text-fill-color: var(--fg-0) !important;
    opacity: 1;
}
body.v2-shell .tk-leave-request-grid > .tk-leave-status-field {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.tk-leave-request-modal textarea[name="reason"] { min-height: 96px; }
.tk-leave-request-modal textarea[name="comment"] { min-height: 80px; }
.tk-leave-request-modal .leave-status-group { max-width: 100%; }
body.v2-shell .tk-leave-request-modal .leave-status-group .btn-check:checked + .btn {
    background: var(--signal) !important;
    color: #fff !important;
    border-color: var(--signal) !important;
    box-shadow: none !important;
}
@media (max-width: 575.98px) {
    body.v2-shell .tk-leave-request-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    body.v2-shell .tk-leave-request-grid > :is(.leave-from-date-div, .leave-to-date-div, .leave-from-time-div, .leave-to-time-div),
    body.v2-shell .tk-leave-request-grid:has([name="partialLeave"]:checked) > :is(.leave-from-date-div, .leave-to-date-div) { grid-column: span 1; }
    body.v2-shell .tk-leave-request-grid > .leave-days-div { grid-column: 1 / -1; }
}
.tk-candidate-interviews-modal .modal-header,
.tk-candidate-interviews-modal .modal-footer { padding: 16px 24px; }
.tk-candidate-interviews-modal .modal-body { padding: 20px 24px; }
.tk-candidate-interviews-modal .modal-header .btn-close { margin: 0; }
.tk-candidate-interviews-modal .modal-footer .btn { height: var(--ctrl-h-md, 32px); padding: 0 14px; margin: 0; }
.tk-interview-history-summary,
.tk-interview-history-person,
.tk-interview-history-heading { display: flex; align-items: center; gap: 12px; }
.tk-interview-history-summary { justify-content: space-between; padding-bottom: 20px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tk-interview-history-person { min-width: 0; }
.tk-interview-history-person > div { min-width: 0; overflow-wrap: anywhere; }
.tk-interview-history-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--r-2, 6px); background: var(--bg-2); color: var(--fg-2); border: 1px solid var(--line); }
.tk-interview-history-person h6 { font-size: 15px; line-height: 1.5; margin: 0; }
.tk-interview-history-person p { margin: 2px 0 0; font-size: 12px; color: var(--fg-2); }
.tk-interview-history-count { flex-shrink: 0; padding: 3px 8px; border-radius: 99px; background: var(--bg-2); color: var(--fg-2); font-size: 11px; }
.tk-interview-history-list { display: flex; flex-direction: column; gap: 12px; }
.tk-interview-history-item { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-2, 6px); }
.tk-interview-history-heading { justify-content: space-between; align-items: flex-start; }
.tk-interview-history-heading h6 { margin: 0; font-size: 13px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.tk-interview-history-heading .badge { flex-shrink: 0; }
.tk-interview-history-date { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 14px; font-size: 12px; color: var(--fg-2); }
.tk-interview-history-date .tk-ic { flex-shrink: 0; margin-top: 1px; }
.tk-interview-history-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.tk-interview-history-meta dt { font-size: 11px; font-weight: 400; color: var(--fg-3); margin-bottom: 2px; }
.tk-interview-history-meta dd { margin: 0; font-size: 12px; color: var(--fg-1); overflow-wrap: anywhere; }
.tk-interview-history-location { grid-column: 1 / -1; }
.tk-interview-history-note,
.tk-interview-history-feedback { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
.tk-interview-history-note p,
.tk-interview-history-feedback p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; }
.tk-interview-history-feedback summary { cursor: pointer; color: var(--fg-2); }
.tk-interview-history-feedback summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.tk-interview-history-outcome { margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.tk-interview-history-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; text-align: center; }
.tk-interview-history-state h6 { margin: 0; font-size: 14px; }
.tk-interview-history-state p { margin: 0; font-size: 12px; color: var(--fg-2); overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .tk-candidate-interviews-modal .modal-header,
    .tk-candidate-interviews-modal .modal-footer,
    .tk-candidate-interviews-modal .modal-body { padding: 16px; }
    .tk-interview-history-summary { flex-wrap: wrap; }
    .tk-interview-history-item { padding: 12px; }
    .tk-interview-history-meta { grid-template-columns: minmax(0, 1fr); }
}

.tk-candidate-attachments {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
body.v2-shell .tk-candidate-attachments input[type="file"] {
    height: var(--ctrl-h-md, 32px);
    padding-block: 0;
    line-height: 30px;
    font-size: var(--fs-base, 13px);
}
body.v2-shell .tk-candidate-attachments input[type="file"]::file-selector-button {
    height: 100%;
    margin-block: 0;
    padding-block: 0;
    font: inherit;
}
.tk-candidate-file-help {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: var(--fg-3);
}
.tk-candidate-attachments .file-names-list:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}
.tk-candidate-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-2, 6px);
    font-size: 12px;
}
.tk-candidate-file > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.tk-candidate-file .btn-close {
    flex-shrink: 0;
}

/* Shared field spacing. A merged group owns the frame: its adornments must
   fit INSIDE that frame, not cover the lower border with a second 32px box.
   Leave telephone-plugin offsets, select arrows and chip editors untouched. */
body.v2-shell { --tk-field-padding-x: 12px; }
body.v2-shell input:is(.form-control, .tk-input):not(:where(.iti__tel-input, .dropdown-input, .items-placeholder, [type="hidden"], [type="file"], [type="color"], [type="checkbox"], [type="radio"], [type="range"], .tk-inputgroup input, .input-group-merge input)),
body.v2-shell textarea:is(.form-control, .tk-textarea) {
    padding-inline: var(--tk-field-padding-x) !important;
    margin: 0;
}
body.v2-shell select:is(.form-control, .form-select, .tk-select):not(.tomselected) {
    padding-inline-start: var(--tk-field-padding-x) !important;
    margin: 0;
}
body.v2-shell textarea:is(.form-control, .tk-textarea) {
    padding-block: 8px;
}
body.v2-shell .tk-inputgroup {
    padding-inline: var(--tk-field-padding-x);
}
body.v2-shell .tk-inputgroup > input:not(.iti__tel-input) {
    min-width: 0;
    padding-inline: 0 !important;
    margin: 0 !important;
}
body.v2-shell .input-group.input-group-merge:has(> input) > .input-group-text {
    height: 100% !important;
    min-height: 0 !important;
    padding-inline: var(--tk-field-padding-x) !important;
    margin: 0 !important;
    background: transparent !important;
    flex-shrink: 0;
}
body.v2-shell .input-group.input-group-merge:has(> input) > input:not(.iti__tel-input) {
    min-width: 0;
    margin: 0 !important;
    padding-inline: var(--tk-field-padding-x) !important;
}
body.v2-shell .input-group.input-group-merge:has(> .input-group-text + input) > input:not(.iti__tel-input) {
    padding-inline-start: 0 !important;
}
/* Validation icons still need their own reserved space at the trailing end. */
body.v2-shell :is(input, textarea):is(.form-control, .tk-input, .tk-textarea):is(.is-invalid, .is-valid):not(:where(.iti__tel-input, .ts-control input)) {
    padding-inline-end: calc(var(--tk-field-padding-x) + 1.5em) !important;
}

/* Invoice/estimate rows must fit the content area, not add Bootstrap column
   percentages plus margins. Scope to the editor; document/PDF tables are untouched. */
body.v2-shell #estimate-invoice-items .finance-line-item-row {
    display: grid !important;
    grid-template-columns: minmax(120px, 1.3fr) minmax(150px, 1.6fr) minmax(72px, .7fr) minmax(80px, .8fr) minmax(95px, 1fr) minmax(80px, .8fr) minmax(100px, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    overflow: visible;
}
body.v2-shell #estimate-invoice-items .finance-line-item-row > div {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
}
body.v2-shell #estimate-invoice-items .finance-line-item-row .form-label { display: block; }
body.v2-shell #estimate-invoice-items .finance-line-item-row .btn { min-height: 32px; margin: 0 !important; }
body.v2-shell #estimate-invoice-items .finance-item-description {
    height: 64px;
    min-height: 64px;
    resize: vertical;
}
@media (max-width: 1399.98px) {
    body.v2-shell #estimate-invoice-items .finance-line-item-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    body.v2-shell #estimate-invoice-items .finance-line-item-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    body.v2-shell #estimate-invoice-items .finance-line-item-row { grid-template-columns: minmax(0, 1fr); }
}

/* Project details: a flat, spacious summary with one scrolling body.
   Scoped to the read-only detail drawer; create/edit drawers are unchanged. */
#project_detail_panel.tk-project-detail {
    width: min(960px, calc(100vw - 24px)) !important;
    max-width: 100vw !important;
}
#project_detail_panel .offcanvas-header { padding: 16px 24px; }
#project_detail_panel .offcanvas-body { padding: 24px; min-width: 0; }
#project_detail_panel .tk-project-reference {
    margin: 0 0 6px;
    color: var(--fg-3);
    font-size: var(--fs-sm);
}
#project_detail_panel .tk-project-detail-title {
    font-size: 22px;
    line-height: 1.35;
    color: var(--fg-0);
    flex-wrap: wrap;
}
#project_detail_panel .tk-project-title-text { overflow-wrap: anywhere; min-width: 0; }
#project_detail_panel .tk-project-detail-title > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    flex: 0 0 auto;
}
#project_detail_panel .tk-project-summary-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 24px;
    margin: 20px 0 !important;
}
#project_detail_panel .tk-project-summary-fields > div {
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0 !important;
}
#project_detail_panel .tk-project-summary-fields .form-label {
    font-size: var(--fs-sm);
    margin-bottom: 7px;
    color: var(--fg-2) !important;
}
#project_detail_panel .tk-project-people-block .users-list { gap: 8px 16px; }
#project_detail_panel .tk-project-person { margin: 0; max-width: 100%; }
#project_detail_panel .tk-project-person a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    color: var(--fg-1);
    font-size: var(--fs-sm);
}
#project_detail_panel .tk-project-person a:hover { color: var(--bs-primary, var(--signal)); }
#project_detail_panel .tk-project-person img { width: 26px; height: 26px; flex: 0 0 26px; }
#project_detail_panel .tk-project-person span { min-width: 0; overflow-wrap: anywhere; }
#project_detail_panel .tk-project-summary hr { display: none; }
#project_detail_panel .tk-project-detail-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
#project_detail_panel .tk-project-detail-facts .tk-fact {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    align-items: flex-start;
}
#project_detail_panel .tk-project-detail-facts .tk-fact > .tk-ic { margin-top: 3px; }
#project_detail_panel .tk-project-detail-facts .tk-fact-v {
    white-space: normal;
    overflow-wrap: anywhere;
    margin-top: 4px;
}
#project_detail_panel .tk-project-description-section { margin: 16px 0 0; }
#project_detail_panel .tk-project-description { color: var(--fg-1); line-height: 1.7; overflow-wrap: anywhere; }
#project_detail_panel .tk-project-description > :last-child { margin-bottom: 0; }
#project_detail_panel .tk-project-description :is(img, video, iframe, table) { max-width: 100%; }
#project_detail_panel .tk-project-extra {
    width: calc(100% - 24px);
    margin: 20px 12px 0;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}
#project_detail_panel .tk-project-extra > summary { color: var(--fg-2); font-weight: 500; cursor: pointer; }
#project_detail_panel .tk-project-detail-sections { margin-top: 24px; min-width: 0; }
#project_detail_panel .tk-project-detail-sections > .tk-child-tabs {
    position: sticky;
    top: -24px;
    z-index: 4;
    background: var(--bg-1);
    gap: 8px;
    padding-top: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
    flex-wrap: nowrap;
}
#project_detail_panel .tk-child-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    min-height: 42px;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    color: var(--fg-2) !important;
    box-shadow: none !important;
}
#project_detail_panel .tk-child-tabs .nav-link.active {
    color: var(--bs-primary, var(--signal)) !important;
    border-bottom-color: var(--bs-primary, var(--signal)) !important;
}
#project_detail_panel .tk-child-tabs .nav-link > .tk-ic { margin: 0 !important; }
#project_detail_panel .tab-content { padding: 0 !important; min-width: 0; }
#project_detail_panel .tab-pane > .col-12 > .d-flex {
    flex-wrap: wrap;
    gap: 12px;
}
#project_detail_panel .tab-pane > .col-12 > .card {
    border: 0 !important;
    box-shadow: none !important;
}
#project_detail_panel .tab-pane > .col-12 > .card > .card-body.p-3 { padding: 0 !important; }
#project_detail_panel .fixed-table-toolbar .columns-left { flex-wrap: wrap; }
#project_detail_panel .fixed-table-toolbar .search { flex: 1 1 180px; }
@media (max-width: 767.98px) {
    #project_detail_panel.tk-project-detail { width: 100vw !important; }
    #project_detail_panel .offcanvas-header { padding: 14px 16px; }
    #project_detail_panel .offcanvas-body { padding: 20px 16px; }
    #project_detail_panel .tk-project-detail-title { font-size: 20px; }
    #project_detail_panel .tk-project-summary-fields { gap: 18px 16px; }
    #project_detail_panel .tk-project-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    #project_detail_panel .tk-project-detail-sections > .tk-child-tabs { top: -20px; }
    #project_detail_panel .tk-child-tabs .nav-link { padding: 10px 8px; }
}
@media (max-width: 359.98px) {
    #project_detail_panel .tk-project-summary-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Date range Apply is a primary action, not a green success-state action.
   The existing picker uses btn-success by default; scope the override to its
   Apply button so genuine success controls elsewhere retain their meaning. */
body.v2-shell .daterangepicker .applyBtn.btn {
    background: var(--bs-primary, var(--signal)) !important;
    border-color: var(--bs-primary, var(--signal)) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.v2-shell .daterangepicker .applyBtn.btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bs-primary, var(--signal)) 90%, #000) !important;
    border-color: color-mix(in srgb, var(--bs-primary, var(--signal)) 90%, #000) !important;
}
body.v2-shell .daterangepicker .applyBtn.btn:focus-visible {
    outline: none;
    box-shadow: var(--tk-focus-ring) !important;
}

/* Shared table search/tools: one compact toolbar for modern and legacy tables.
   Keep the actual search input, refresh button and column menu in place so
   Bootstrap Table search, reload, column visibility and accessible names work. */
body.v2-shell .bootstrap-table .fixed-table-toolbar {
    align-items: center;
    gap: 8px;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .search {
    position: relative;
    order: 2;
    flex: 0 1 240px;
    width: 240px !important;
    min-width: 0;
    max-width: 100%;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .search input.form-control {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 32px !important;
    min-height: 32px !important;
    min-block-size: 32px !important;
    padding: 0 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    background: var(--bg-1) !important;
    color: var(--fg-0) !important;
    font-size: var(--fs-base) !important;
    box-shadow: none !important;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .search > input.form-control {
    padding-left: 32px !important;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .search > .tk-table-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
    color: var(--fg-3);
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right {
    order: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    flex: 0 0 auto;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right > .btn-group {
    margin: 0 !important;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right button:is([name="refresh"], [name="columns"], .keep-open > .dropdown-toggle) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    min-block-size: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    background: var(--bg-1) !important;
    color: var(--fg-1) !important;
    box-shadow: none !important;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right button:is([name="refresh"], [name="columns"], .keep-open > .dropdown-toggle) > :is(i, .icon, .caret, .tk-icon-host, span.bx, span.fa, span.fas, span.far, span.fab, span.fa-solid, span.fa-regular, svg:not(.tk-table-tool-icon)) {
    display: none !important;
}
/* Neutralize cached legacy pseudo-icons as well as the dropdown caret.
   Each toolbar button gets exactly one SVG from TaskifyIcons. */
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right button:is([name="refresh"], [name="columns"], .keep-open > .dropdown-toggle)::before,
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right button:is([name="refresh"], [name="columns"], .keep-open > .dropdown-toggle)::after {
    content: none !important;
    display: none !important;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right button:is([name="refresh"], [name="columns"], .keep-open > .dropdown-toggle) > svg.tk-table-tool-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0 !important;
    pointer-events: none;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar :is(.search input.form-control, .columns-right button[name="refresh"], .columns-right button[name="columns"], .columns-right .keep-open > button.dropdown-toggle):hover {
    border-color: var(--line-2) !important;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right button:is([name="refresh"], [name="columns"], .keep-open > .dropdown-toggle):is(:hover, [aria-expanded="true"]) {
    background: var(--bg-3) !important;
    color: var(--fg-0) !important;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar :is(.search input.form-control:focus, .columns-right button[name="refresh"]:focus-visible, .columns-right button[name="columns"]:focus-visible, .columns-right .keep-open > button.dropdown-toggle:focus-visible) {
    border-color: var(--bs-primary, var(--signal)) !important;
    box-shadow: var(--tk-focus-ring) !important;
    outline: none !important;
}
body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right button:is([name="refresh"], [name="columns"], .keep-open > .dropdown-toggle):disabled {
    opacity: 0.45;
}
@media (max-width: 575.98px) {
    body.v2-shell .bootstrap-table .fixed-table-toolbar {
        padding: 12px;
    }
    body.v2-shell .bootstrap-table .fixed-table-toolbar::before {
        display: none !important;
    }
    body.v2-shell .bootstrap-table .fixed-table-toolbar :is(.columns-left, .bs-bars) {
        flex-basis: 100%;
        flex-wrap: wrap;
    }
    body.v2-shell .bootstrap-table .fixed-table-toolbar .search {
        flex: 1 1 0;
        width: auto !important;
        order: 2;
    }
    body.v2-shell .bootstrap-table .fixed-table-toolbar .columns-right {
        flex-basis: auto;
    }
}

/* Shared pagination contract — Tasks is the reference for every table/grid.
   Cover Bootstrap Table, Laravel, TK grid pagers and DataTables without
   rebuilding markup, links, query parameters or server-side pagination. */
body.v2-shell :is(.pagination, .tk-pagination, .dt-paging, .dataTables_paginate) {
    gap: 4px !important;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
}

body.v2-shell :is(.pagination .page-link, .pagination > li > a, .pagination > li > span,
    nav.pagination > a, nav.pagination > button, .tk-pagination-btn,
    .dataTables_paginate a.paginate_button, .dataTables_paginate button.paginate_button, .dt-paging-button) {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px !important;
    min-inline-size: 38px !important;
    min-height: 38px !important;
    min-block-size: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2, 5px) !important;
    background: var(--bg-1) !important;
    color: var(--fg-1) !important;
    box-shadow: none !important;
    font-size: var(--fs-sm) !important;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
}

body.v2-shell :is(.pagination .page-link, .tk-pagination-btn, .dt-paging-button):hover {
    background: var(--bg-3) !important;
}

body.v2-shell :is(.bootstrap-table .fixed-table-pagination .pagination .page-item.active .page-link,
    .pagination .page-item.active .page-link, .pagination > li.active > a,
    .pagination > li.active > span, nav.pagination > .on, .tk-pagination-btn.on,
    .tk-pagination-btn.is-active, .dataTables_paginate .paginate_button.current,
    .dt-paging-button.current, .dt-paging-button[aria-current="page"]) {
    background: var(--bs-primary, var(--signal)) !important;
    border-color: var(--bs-primary, var(--signal)) !important;
    color: #ffffff !important;
    font-weight: 600;
}

body.v2-shell :is(.pagination .disabled > .page-link, .pagination > li.disabled > a,
    .pagination > li.disabled > span, nav.pagination > :disabled,
    .tk-pagination-btn:disabled, .tk-pagination-btn.is-disabled,
    .dataTables_paginate .paginate_button.disabled, .dt-paging-button.disabled,
    .dt-paging-button:disabled) {
    opacity: 0.45 !important;
    color: var(--fg-3) !important;
    cursor: not-allowed;
    pointer-events: none;
}

body.v2-shell :is(.pagination .page-link, .tk-pagination-btn, .dt-paging-button):focus-visible {
    outline: none;
    box-shadow: var(--tk-focus-ring) !important;
}

body.v2-shell .bootstrap-table .fixed-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
    font-size: var(--fs-base);
    color: var(--fg-3);
}

body.v2-shell .bootstrap-table .fixed-table-pagination > :is(.pagination-detail, .pagination) {
    float: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.v2-shell .bootstrap-table .fixed-table-pagination .page-list .dropdown-toggle {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2, 5px) !important;
    background: var(--bg-1) !important;
    color: var(--fg-1) !important;
    font-size: var(--fs-sm) !important;
}

@media (max-width: 575.98px) {
    body.v2-shell .bootstrap-table .fixed-table-pagination {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }
    body.v2-shell .bootstrap-table .fixed-table-pagination > :is(.pagination, .pagination-detail) {
        width: 100%;
        margin-left: 0 !important;
    }
    body.v2-shell .bootstrap-table .fixed-table-pagination > .pagination {
        justify-content: flex-end;
    }
    body.v2-shell .bootstrap-table .fixed-table-pagination .pagination-info {
        white-space: normal;
    }
}

/* iti phone input — match tk-input appearance */
.iti { width: 100%; }
.iti input.iti__tel-input {
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-2) !important;
    color: var(--fg-0) !important;
    font-size: var(--fs-base) !important;
    height: var(--ctrl-h-md) !important;
    box-shadow: none !important;
    transition: border-color var(--t-1) var(--ease) !important;
}
.iti input.iti__tel-input:hover {
    border-color: var(--line-2) !important;
}
.iti input.iti__tel-input:focus {
    border-color: var(--line-2) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ----------------------------------------------------------------------------
   13. FEEDBACK
   ---------------------------------------------------------------------------- */
.tk-alert {
    display: flex; align-items: flex-start; gap: var(--tk-space-2); padding: 12px 14px;
    border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2);
    color: var(--fg-1); font-size: var(--tk-text-base); line-height: 1.5;
}
.tk-alert .tk-ic { flex: none; margin-top: 2px; }
.tk-alert-body { flex: 1 1 auto; min-width: 0; }
.tk-alert-title { display: block; margin-bottom: 2px; color: var(--fg-0); font-weight: 600; }
.tk-alert-info { border-color: color-mix(in srgb, var(--info) 35%, var(--line)); background: color-mix(in srgb, var(--info) 9%, var(--bg-1)); }
.tk-alert-success { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 9%, var(--bg-1)); }
.tk-alert-warning { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--bg-1)); }
.tk-alert-danger { border-color: color-mix(in srgb, var(--err) 35%, var(--line)); background: color-mix(in srgb, var(--err) 9%, var(--bg-1)); }
.tk-alert-info > .tk-ic { color: var(--info); }
.tk-alert-success > .tk-ic { color: var(--ok); }
.tk-alert-warning > .tk-ic { color: var(--warn); }
.tk-alert-danger > .tk-ic { color: var(--err); }

/* ----------------------------------------------------------------------------
   14. OVERLAYS
   ---------------------------------------------------------------------------- */
.tk-menu {
    min-width: 190px; padding: var(--tk-space-1); background: var(--bg-1);
    border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--tk-shadow-lg);
}
.tk-menu-item {
    display: flex; align-items: center; gap: var(--tk-space-2); width: 100%; min-height: var(--tk-control-sm);
    padding: 7px 9px; border: 0; border-radius: var(--r-2); background: transparent;
    color: var(--fg-1); text-align: left; text-decoration: none; cursor: pointer;
}
.tk-menu-item:hover, .tk-menu-item:focus-visible { background: var(--bg-2); color: var(--fg-0); outline: none; }
.tk-menu-item-danger { color: var(--err); }
.tk-menu-divider { height: 1px; margin: var(--tk-space-1) 0; border: 0; background: var(--line); }
.tk-popover { max-width: 320px; color: var(--fg-1); }
.tk-dialog .modal-content, .tk-offcanvas.offcanvas {
    color: var(--fg-1); background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--tk-shadow-lg);
}
.tk-dialog .modal-header, .tk-dialog .modal-footer,
.tk-offcanvas .offcanvas-header, .tk-offcanvas .offcanvas-footer { border-color: var(--line); }

@media (max-width: 575.98px) {
    .tk-grid-2, .tk-grid-3, .tk-facts { grid-template-columns: 1fr; }
    .tk-btn:not(.tk-btn-inline) { min-height: 32px; }
    .tk-table .fixed-table-toolbar .search,
    .tk-table .fixed-table-toolbar .search .form-control,
    .tk-table .fixed-table-toolbar .search input { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-btn, .tk-iconbtn, .tk-input, .tk-select, .tk-textarea,
    .tk-table tbody tr, .tk-pagination-btn { transition-duration: 0.01ms !important; }
    .tk-skel, .tk-spinner { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Workspace assignment previews: four portraits followed by the remaining count. */
body.v2-shell :is(.tk-workspace-avatars, .tk-avatar-stack) { flex-wrap: nowrap; }
body.v2-shell :is(.tk-workspace-avatars, .tk-avatar-stack) > li { flex-shrink: 0; }
body.v2-shell :is(.tk-workspace-avatars, .tk-avatar-stack) .tk-avatar-overflow > span {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 2px solid var(--bg-1);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-primary, var(--signal)) 12%, var(--bg-1));
    color: var(--bs-primary, var(--signal));
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
body.v2-shell :is(.tk-workspace-avatars, .tk-avatar-stack) .tk-avatar-overflow {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
}
body.v2-shell :is(.tk-workspace-avatars, .tk-avatar-stack) .tk-avatar-overflow > span { min-width: max-content; padding-inline: 3px; }
body.v2-shell .tk-work-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 8px;
}
body.v2-shell .tk-work-people-group { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
body.v2-shell .tk-work-people-label { font-size: 11px; font-weight: 400; color: var(--fg-3); flex: 0 0 auto; white-space: nowrap; }
body.v2-shell .tk-work-table { min-width: 640px; }
body.v2-shell .tk-work-table td:first-child { min-width: 200px; }
body.v2-shell .tk-work-table :is(th, td:not(:first-child)) { white-space: nowrap; }
body.v2-shell .tk-work-people .avatar > span:not(.avatar-initial) { display: flex; width: 100%; height: 100%; }

/* Record quick actions always sit below the name, not in the title line. */
body.v2-shell .tk-record-title {
    font-family: var(--tk-font-sans);
    font-size: var(--fs-base, 13px);
    font-weight: 500 !important;
    line-height: var(--lh-base, 1.5);
}
body.v2-shell .tk-record-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
    white-space: normal;
}
body.v2-shell .tk-record-actions .tk-record-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--r-2, 5px);
    background: transparent;
    color: var(--fg-2);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
body.v2-shell .tk-record-actions .tk-record-action::before { content: none !important; }
body.v2-shell .tk-record-actions .tk-record-action .tk-ic {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    pointer-events: none;
}
body.v2-shell .tk-record-actions .favorite-icon[data-favorite="1"] {
    color: var(--bs-primary, var(--signal));
}
body.v2-shell .tk-record-actions .favorite-icon[data-favorite="1"] .tk-ic { fill: currentColor; }
body.v2-shell .tk-record-actions .pinned-icon[data-pinned="1"] { color: var(--bs-primary, var(--signal)); }
body.v2-shell .tk-record-actions .pinned-icon[data-pinned="1"] .tk-ic { fill: currentColor; }
body.v2-shell .tk-record-actions .tk-record-action:hover { background: var(--bg-3); color: var(--bs-primary, var(--signal)); }
body.v2-shell .tk-record-actions .tk-record-action:focus-visible {
    outline: 2px solid var(--bs-primary, var(--signal));
    outline-offset: 1px;
}

/* Shared lighter UI typography. Rich-text content keeps its authored weight. */
body.v2-shell { font-weight: 400; --bs-body-font-weight: 400; }
body.v2-shell :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
    .tk-page-title, .tk-card-title, .modal-title, .offcanvas-title, .fc-toolbar-title,
    .tk-project-detail-title, .tk-proj-title, .tk-insp-title,
     .tk-metric-value, .tk-auth-title,
    .tk-empty-title, .tk-alert-title):not(:where(.mce-content-body *, .tox *, .tk-project-description *, .task-description *, [contenteditable="true"] *)) {
    font-weight: 600 !important;
}
body.v2-shell :is(.fw-bold, .fw-bolder, .fw-semibold, .font-weight-bold,
    .btn, .tk-btn, .badge, .tk-status, .form-label, .dropdown-item,
    .menu-link, .nav-link, .card-title, .tcard-title, .tk-fact-v, .tk-dock-title,
    .comment-author, .invoice-detail-value, .dropdown-header-highlighted,
    .legend-title, .fixed-header span,
    .fc-col-header-cell-cushion, .fc-daygrid-day-number,
    .table th, .tk-table th, .fixed-table-container th,
    .table td strong, .table td b, .tk-table td strong, .tk-table td b,
    .fixed-table-container td strong, .fixed-table-container td b):not(:where(.mce-content-body *, .tox *, .tk-project-description *, .task-description *, [contenteditable="true"] *)) {
    font-weight: 500 !important;
}
body.v2-shell .fc :is(.fc-col-header-cell-cushion, .fc-daygrid-day-number) {
    font-weight: 500 !important;
}
/* Table row typography contract: the Projects list record title is the
   reference for every data table, including plain/client-side tables and
   uninitialized AJAX tables. Do not depend on formatter classes being present.
   Keep the reference table-header hierarchy and compact/icon controls separate. */
body.v2-shell :is(table.table, table[data-toggle="table"], table.dataTable, .tk-table > table):not([data-table-typography="preserve"]):not(:where(.mce-content-body table, .tox table, .tk-project-description table, .task-description table, [contenteditable="true"] table)) {
    --tk-table-text-family: var(--tk-font-sans);
    --tk-table-text-size: var(--fs-base, 13px);
    --tk-table-text-weight: 500;
    --tk-table-text-leading: var(--lh-base, 1.5);
}
body.v2-shell :is(table.table, table[data-toggle="table"], table.dataTable, .tk-table > table):not([data-table-typography="preserve"]):not(:where(.mce-content-body table, .tox table, .tk-project-description table, .task-description table, [contenteditable="true"] table)) > :is(tbody, tfoot) > tr > :is(td, th),
body.v2-shell :is(table.table, table[data-toggle="table"], table.dataTable, .tk-table > table):not([data-table-typography="preserve"]):not(:where(.mce-content-body table, .tox table, .tk-project-description table, .task-description table, [contenteditable="true"] table)) > :is(tbody, tfoot) > tr > :is(td, th) :where(a, span, small, strong, b, p, div, label, em, h1, h2, h3, h4, h5, h6):not(:where([data-table-typography="preserve"] *, .btn, .btn *, .tk-btn, .tk-btn *, .avatar, .avatar *, .tk-record-actions, .tk-record-actions *, .tk-icon-host, .bx, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .material-icons, .material-symbols-outlined, .tk-mono, .tk-mono *, code *, pre *, kbd *, samp *, .mce-content-body, .mce-content-body *, .tox, .tox *, .tk-project-description, .tk-project-description *, .task-description, .task-description *, [contenteditable="true"], [contenteditable="true"] *)) {
    font-family: var(--tk-table-text-family) !important;
    font-size: var(--tk-table-text-size) !important;
    font-weight: var(--tk-table-text-weight) !important;
    line-height: var(--tk-table-text-leading) !important;
}

/* Accessibility foundation ------------------------------------------------ */
.tk-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tk-skip-link {
  position: fixed;
  inset-block-start: var(--tk-space-3);
  inset-inline-start: var(--tk-space-3);
  z-index: 1100;
  padding: var(--tk-space-2) var(--tk-space-4);
  color: var(--tk-color-on-primary, #fff);
  background: var(--tk-color-primary, #566a7f);
  border-radius: var(--tk-radius-md, 8px);
  box-shadow: var(--tk-shadow-lg);
  transform: translateY(-160%);
  transition: transform 140ms ease;
}

.tk-skip-link:focus {
  color: var(--tk-color-on-primary, #fff);
  transform: translateY(0);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tk-color-primary, #566a7f) 42%, transparent);
  outline-offset: 2px;
}

:where(.btn-icon, .tk-icon-button, [data-bs-toggle="dropdown"].btn):not(.btn-sm) {
  min-width: 40px;
  min-height: 40px;
}

@media (pointer: coarse) {
  :where(.btn, .form-control, .form-select, .dropdown-item, .page-link) {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-skip-link {
    transition: none;
  }
}

/* Phase 3: application shell and navigation ----------------------------- */
body.v2-shell .tk-shell-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1040;
  width: calc(var(--rail-w) + var(--panel-w));
  background: transparent;
}

body.v2-shell,
body.v2-shell .layout-wrapper,
body.v2-shell .layout-container,
body.v2-shell .layout-page,
body.v2-shell .content-wrapper {
  min-width: 0;
  max-width: 100%;
}

body.v2-shell {
  overflow-x: hidden;
}

/* Phase 6: authentication and public access ---------------------------- */
.tk-auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--tk-space-6);
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 28rem),
    var(--bg-0);
}

.tk-auth-page .authentication-wrapper {
  min-height: auto;
}

.tk-auth-card {
  border: 1px solid var(--line);
  border-radius: var(--tk-radius-xl);
  box-shadow: var(--tk-shadow-lg);
}

.tk-auth-card .card-body {
  padding: clamp(1.25rem, 4vw, 2rem);
}

.tk-auth-logo {
  display: block;
  width: min(100%, 240px);
  max-height: 72px;
  object-fit: contain;
}

.tk-auth-title {
  margin: 0 0 var(--tk-space-2);
  color: var(--fg-0);
  font-size: var(--tk-text-xl);
  font-weight: 700;
  line-height: 1.3;
}

.tk-auth-copy {
  color: var(--fg-2);
  line-height: 1.55;
}

.tk-public-state-icon {
  display: inline-flex;
  margin-bottom: var(--tk-space-3);
  color: var(--signal);
  font-size: 2.5rem;
}

.tk-auth-card .form-control,
.tk-auth-card .form-select,
.tk-auth-card .input-group-text {
  min-height: 44px;
}

.tk-auth-card button.input-group-text {
  color: var(--fg-2);
  background: var(--bg-2);
  border-color: var(--line);
}

.tk-auth-card button.input-group-text:focus-visible {
  outline: none;
  box-shadow: var(--tk-focus-ring);
}

@media (max-width: 575.98px) {
  .tk-auth-page {
    justify-content: flex-start;
    padding: var(--tk-space-3);
  }

  .tk-auth-page .authentication-wrapper {
    padding-block: var(--tk-space-3);
  }

  .tk-auth-card {
    border-radius: var(--tk-radius-lg);
  }
}

/* Phase 4: shared page structure --------------------------------------- */
.tk-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tk-space-5);
}

.tk-page-header-main {
  min-width: 0;
}

.tk-page-breadcrumbs {
  margin-bottom: var(--tk-space-2);
}

.tk-page-title {
  margin: 0;
  color: var(--tk-text);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}

.tk-page-description {
  max-width: 68ch;
  margin: var(--tk-space-1) 0 0;
  color: var(--tk-text-muted);
  font-size: var(--tk-text-base);
  line-height: 1.5;
}

.tk-page-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tk-space-2);
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .tk-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--tk-space-3);
  }

  .tk-page-actions {
    justify-content: flex-start;
  }

  .tk-page-actions .btn {
    min-height: 32px;
  }
}

body.v2-shell .tk-shell-nav .tk-rail,
body.v2-shell .tk-shell-nav .tk-panel {
  position: relative;
  inset: auto;
  height: 100%;
  transform: none;
}

body.v2-shell .tk-shell-nav .tk-rail {
  flex: 0 0 var(--rail-w);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

body.v2-shell .tk-shell-nav .tk-panel {
  flex: 0 0 var(--panel-w);
  min-width: 0;
}

.tk-rail-btn,
.tk-panel-item {
  min-height: 40px;
}

.tk-rail-btn[aria-current="page"],
.tk-panel-item[aria-current="page"] {
  font-weight: 650;
}

.tk-panel-mobile-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--fg-0);
  font-weight: 650;
}

.tk-panel-close,
.tk-panel-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-2);
}

.tk-panel-close:hover,
.tk-panel-search-clear:hover {
  color: var(--fg-0);
  background: var(--bg-2);
}

.tk-panel-search {
  position: relative;
}

.tk-panel-search input {
  height: 40px;
  padding-inline-end: 42px;
}

.tk-panel-search-clear {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 12px;
  transform: translateY(-50%);
}

.tk-panel-search-clear[hidden] {
  display: none;
}

.tk-menu-empty {
  margin: var(--tk-space-4) var(--tk-space-2);
  padding: var(--tk-space-4);
  color: var(--fg-2);
  text-align: center;
  background: var(--bg-2);
  border-radius: var(--r-2);
}

.tk-cbar {
  min-height: 56px;
  height: auto;
}

.tk-cbar-search {
  min-height: 40px;
}

.tk-cbar-ws {
  max-width: 12rem;
}

.tk-notifications-menu {
  width: min(380px, calc(100vw - 24px));
  min-width: 0 !important;
  overflow: hidden;
}

.tk-notification-summary {
  color: var(--fg-2);
  font-size: var(--tk-text-xs);
  font-weight: 500;
  text-transform: none;
}

.tk-notification-heading {
  display: flex;
  align-items: center;
  color: var(--fg-1);
  font-size: var(--tk-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tk-notification-unread {
  position: relative;
}

.tk-notification-unread::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 0;
  width: 3px;
  background: var(--signal);
  border-radius: 0 3px 3px 0;
}

.tk-notification-empty {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tk-space-2);
  color: var(--fg-2);
}

.tk-notification-empty .bx {
  font-size: 1.75rem;
}

.tk-notifications-menu .fixed-footer {
  background: var(--bg-1);
}

.tk-language-menu {
  min-width: 220px;
  max-height: min(80vh, 560px);
  overflow-y: auto;
}

.tk-account-menu {
  min-width: 260px;
}

.tk-cbar-user {
  background: transparent;
}

.tk-footer {
  margin-top: var(--tk-space-6);
  padding-block: var(--tk-space-3);
  border-top: 1px solid var(--tk-border);
}

.tk-footer-meta,
.tk-footer-links {
  display: flex;
  align-items: center;
}

.tk-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tk-space-4);
  min-height: 48px;
}

.tk-footer-meta,
.tk-footer-links {
  flex-wrap: wrap;
  gap: var(--tk-space-3);
  min-width: 0;
}

.tk-footer-meta {
  justify-content: flex-start;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
}

.tk-footer-meta br {
  display: none;
}

.tk-footer-links {
  justify-content: flex-end;
  margin-inline-start: auto;
}

.tk-footer-version {
  color: var(--tk-text-muted);
  font-size: var(--tk-text-sm);
  font-weight: 600;
}

.tk-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  gap: var(--tk-space-1);
}

.tk-footer-links > nav {
  margin: 0 !important;
}

.tk-footer-links > nav,
.tk-footer-links > nav a {
  white-space: nowrap;
}

.timer-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0;
  overflow: hidden;
  background: var(--tk-surface);
}

/* The two global utility buttons share one surface and SVG treatment. */
body.v2-shell .tk-floating-utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 54px !important;
  height: 54px;
  padding: 0;
  border: 1px solid var(--tk-border, #dfe3eb) !important;
  border-radius: 50%;
  background: var(--tk-surface, #fff);
  color: var(--tk-text-secondary, #566a7f);
  box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  transition: border-color 150ms ease, color 150ms ease;
}

body.v2-shell .tk-floating-utility:hover {
  transform: none;
  color: var(--bs-primary, var(--signal, #7c4dff));
  border-color: var(--bs-primary, var(--signal, #7c4dff)) !important;
}

body.v2-shell .tk-floating-utility:focus-visible {
  outline: 2px solid var(--bs-primary, var(--signal, #7c4dff));
  outline-offset: 3px;
}

body.v2-shell .tk-floating-utility.tk-timer-running {
  color: var(--bs-primary, var(--signal, #7c4dff));
  border-color: currentColor !important;
}

@media (min-width: 768px) {
  .chat-img,
  .timer-img,
  .embed-icon {
    bottom: 84px;
  }

  .chat-iframe-container {
    bottom: 148px;
  }
}

@media (max-width: 1199.98px) {
  body.v2-shell .tk-shell-nav {
    z-index: 1050;
    width: min(320px, 100vw);
    height: 100dvh;
    max-height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--tk-duration-base) var(--tk-ease);
    overflow: hidden;
    background: var(--bg-1);
    box-shadow: var(--tk-shadow-lg);
  }

  [dir="rtl"] body.v2-shell .tk-shell-nav {
    transform: translateX(100%);
  }

  body.v2-shell.tk-panel-open .tk-shell-nav {
    transform: translateX(0);
  }

  body.v2-shell.tk-panel-open {
    overflow: hidden;
  }

  body.v2-shell .tk-shell-nav .tk-rail,
  body.v2-shell .tk-shell-nav .tk-panel {
    transform: none !important;
    top: auto;
    bottom: auto;
  }

  body.v2-shell .tk-shell-nav .tk-rail {
    width: var(--rail-w);
    min-width: var(--rail-w);
    flex-basis: var(--rail-w);
  }

  body.v2-shell .tk-shell-nav .tk-panel {
    width: calc(100% - var(--rail-w));
    max-width: none;
    flex: 1 1 auto;
    overflow: hidden;
  }

  body.v2-shell .layout-page {
    padding-inline-start: 0 !important;
  }

  .tk-panel-mobile-head {
    display: flex;
  }

  body.v2-shell.tk-panel-open::before {
    z-index: 1045;
  }
}

@media (max-width: 767.98px) {
  body.v2-shell .tk-shell-nav {
    width: min(320px, 100vw);
  }

  body.v2-shell .tk-shell-nav .tk-panel {
    width: auto;
    flex: 1 1 auto;
  }

  .tk-cbar {
    padding-inline: var(--tk-space-2);
  }

  .tk-cbar-actions {
    margin-inline-start: auto;
  }

  .tk-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--tk-space-2);
  }

  .tk-footer-links > nav {
    gap: var(--tk-space-2) !important;
  }

  .tk-footer-links {
    justify-content: flex-start;
    margin-inline-start: 0;
  }

  .tk-notifications-menu {
    position: fixed !important;
    inset-inline: 12px !important;
    inset-block-start: 60px !important;
    transform: none !important;
    max-height: calc(100dvh - 72px);
  }

  .chat-iframe-container {
    inset-inline: 12px;
    inset-block-end: 80px;
    width: auto;
    height: min(70dvh, 500px);
  }

  .chat-img {
    inset-inline-end: 76px;
  }

  .timer-img {
    inset-inline-end: 12px;
  }
}

@media (max-width: 479.98px) {
  .tk-footer-meta,
  .tk-footer-links {
    width: 100%;
  }

  .tk-footer-links > nav {
    justify-content: flex-start !important;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v2-shell .tk-shell-nav {
    transition: none;
  }
}

/* Phase 21: final responsive, accessibility, and shell regression pass. */
body.v2-shell .tk-panel,
body.v2-shell .tk-panel-body {
  min-height: 0;
}

body.v2-shell .tk-panel-body {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.v2-shell .tk-panel-mobile-head {
  display: none;
}

.tk-cbar-burger,
.tk-icon-btn,
.tk-cbar-user {
  min-width: var(--tk-target-min);
  min-height: var(--tk-target-min);
}

.tk-cbar-ws,
body.v2-shell .bg-primary,
body.v2-shell .text-bg-primary {
  color: var(--signal-fg, #fff) !important;
}

.tk-footer {
  margin-top: var(--tk-space-6);
  padding: var(--tk-space-3) 0;
  color: var(--tk-text-secondary);
  background: var(--tk-surface);
  border-top: 1px solid var(--tk-border);
}

.tk-footer-inner {
  width: 100%;
  min-width: 0;
}

.tk-footer-meta {
  flex: 0 1 auto;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.tk-footer-copy {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  line-height: 1.5;
}

.tk-footer-copy > :is(p, div),
.tk-footer-copy p {
  display: inline;
  margin: 0;
}

.tk-footer-copy br {
  display: none;
}

.tk-footer-version,
.tk-footer .demo-mode {
  flex: 0 0 auto;
}

.tk-footer-links,
.tk-footer-legal {
  align-items: center;
}

.tk-footer-links {
  flex-wrap: nowrap;
}

.tk-footer-legal {
  flex-wrap: nowrap !important;
}

.tk-footer a {
  overflow-wrap: anywhere;
}

.chat-img,
.timer-img,
.embed-icon {
  right: auto !important;
  bottom: calc(var(--tk-space-3) + env(safe-area-inset-bottom, 0px) + var(--tk-footer-lift, 0px)) !important;
}

.timer-img {
  inset-inline-end: var(--tk-space-4) !important;
}

.chat-img {
  inset-inline-end: calc(var(--tk-space-4) + 66px) !important;
}

.embed-icon {
  inset-inline-end: calc(var(--tk-space-4) + 132px) !important;
}

.chat-iframe-container {
  right: auto;
  inset-inline-end: var(--tk-space-3);
  bottom: calc(78px + env(safe-area-inset-bottom, 0px) + var(--tk-footer-lift, 0px)) !important;
  max-width: calc(100vw - (var(--tk-space-3) * 2));
  max-height: calc(100dvh - 100px - var(--tk-footer-lift, 0px));
}

@media (max-width: 1199.98px) {
  body.v2-shell .tk-panel-mobile-head {
    display: flex;
  }
}

@media (max-width: 991.98px) {
  .tk-footer-inner {
    align-items: stretch;
    flex-direction: column;
    gap: var(--tk-space-2);
  }

  .tk-footer-links {
    justify-content: flex-start;
    margin-inline-start: 0;
    flex-wrap: wrap;
  }

  .tk-footer-legal {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 575.98px) {
  body.v2-shell .modal-dialog {
    margin: var(--tk-space-2);
  }

  body.v2-shell .modal-content {
    max-height: calc(100dvh - (var(--tk-space-2) * 2));
  }

  body.v2-shell .modal-body,
  body.v2-shell .offcanvas-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.v2-shell .modal-footer,
  body.v2-shell .offcanvas-footer,
  body.v2-shell .offcanvas .offcanvas-foot {
    flex-wrap: wrap;
  }

  body.v2-shell .modal-footer .btn,
  body.v2-shell .offcanvas-footer .btn,
  body.v2-shell .offcanvas .offcanvas-foot .btn {
    flex: 1 1 auto;
    min-height: 32px;
  }

  body.v2-shell .offcanvas {
    max-width: 100vw;
  }

  .tk-footer-meta,
  .tk-footer-links {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-img,
  .timer-img,
  .embed-icon,
  .chat-iframe-container {
    transition: none !important;
  }
}

/* One interface-icon size across navigation, forms, buttons, tabs and tables.
   Only decorative glyphs are normalized; button hit areas and non-icon SVGs
   (charts, logos, flags) retain their dimensions. No parent font-size scaling. */
:root body svg.tk-ic,
:root body :is(i, span).tk-icon-host {
    box-sizing: border-box;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex: 0 0 16px !important;
}
body.v2-shell .tk-rail-btn:hover svg.tk-ic { transform: none; }
body.v2-shell .btn-close { background-size: 16px 16px !important; }

/* Favorite/pin/discussion controls: button and glyph share one 16px box.
   Covers table buttons, card/kanban anchors and legacy detail-page icon hosts.
   Discussion tabs with text are not compact icon-only buttons. */
body.v2-shell :is(.favorite-icon, .pinned-icon, .tk-record-actions .tk-record-action, a.tcard-ic[href$="#navs-top-discussions"]) {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-inline-size: 16px !important;
    min-block-size: 16px !important;
    flex: 0 0 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    gap: 0 !important;
    line-height: 1 !important;
    vertical-align: middle;
}
body.v2-shell :is(.favorite-icon, .pinned-icon, .tk-record-actions .tk-record-action, a.tcard-ic[href$="#navs-top-discussions"]):focus-visible {
    outline: 2px solid var(--bs-primary, var(--signal));
    outline-offset: 2px;
}
body.v2-shell :is(.tk-record-actions, .tcard-actions, .tcard-stats:has(> a.tcard-ic[href$="#navs-top-discussions"])) {
    align-items: center !important;
    gap: 4px !important;
}
body.v2-shell .tcard-stats:has(> a.tcard-ic[href$="#navs-top-discussions"]) { display: inline-flex; }

/* Task detail: shared project/client detail layout, compact context and work area. */
body.v2-shell .tk-detail-page { padding-bottom: 24px; }
body.v2-shell .tk-detail-page .breadcrumb { overflow-wrap: anywhere; }
body.v2-shell .tk-detail-page .tk-task-hero {
    margin: 20px 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-3, 8px);
    background: var(--bg-1);
    overflow: hidden;
}
body.v2-shell .tk-detail-page .tk-task-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 20px;
}
body.v2-shell .tk-detail-page .tk-task-heading-main { flex: 1; min-width: 0; }
body.v2-shell .tk-detail-page .tk-task-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--fg-3);
    font-size: 11px;
    overflow-wrap: anywhere;
}
body.v2-shell .tk-detail-page .tk-task-context a { color: var(--fg-2); }
body.v2-shell .tk-detail-page .tk-task-context a:hover { color: var(--bs-primary, var(--signal)); }
body.v2-shell .tk-detail-page .tk-task-reference { font-variant-numeric: tabular-nums; }
body.v2-shell .tk-detail-page .tk-task-title {
    margin: 8px 0 10px;
    font-size: clamp(20px, 1.65vw, 26px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
body.v2-shell .tk-detail-page .tk-task-heading-meta,
body.v2-shell .tk-detail-page .tk-task-heading-actions,
body.v2-shell .tk-detail-page .tk-task-list-label,
body.v2-shell .tk-detail-page .tk-task-summary-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
body.v2-shell .tk-detail-page .tk-task-heading-meta { gap: 16px; color: var(--fg-2); font-size: 12px; }
body.v2-shell .tk-detail-page .tk-task-heading-meta .tk-record-actions { margin-top: 0; }
body.v2-shell .tk-detail-page .tk-task-heading-actions { flex: 0 0 auto; justify-content: flex-end; }
body.v2-shell .tk-detail-page .tk-task-heading-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 500;
}
body.v2-shell .tk-detail-page .tk-task-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    border-top: 1px solid var(--line);
}
body.v2-shell .tk-detail-page .tk-task-summary-item { min-width: 0; padding: 14px 24px; }
body.v2-shell .tk-detail-page .tk-task-summary-item + .tk-task-summary-item { border-inline-start: 1px solid var(--line); }
body.v2-shell .tk-detail-page .tk-task-label {
    display: block;
    margin-bottom: 7px;
    color: var(--fg-3);
    font-size: 11px;
    font-weight: 500;
}
body.v2-shell .tk-detail-page .tk-task-summary-value { min-height: 20px; overflow-wrap: anywhere; }
body.v2-shell .tk-detail-page .tk-task-summary-value > :is(.badge, .tk-badge, .tk-status) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
body.v2-shell .tk-detail-page .tk-task-progress-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
body.v2-shell .tk-detail-page .tk-task-progress progress {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    margin-top: 6px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-3);
    overflow: hidden;
}
body.v2-shell .tk-detail-page .tk-task-progress progress::-webkit-progress-bar { background: var(--bg-3); border: 0; }
body.v2-shell .tk-detail-page .tk-task-progress progress::-webkit-progress-value { background: var(--bs-primary, var(--signal)); border-radius: 999px; }
body.v2-shell .tk-detail-page .tk-task-progress progress::-moz-progress-bar { background: var(--bs-primary, var(--signal)); border-radius: 999px; }
body.v2-shell .tk-detail-page .tk-task-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 16px; }
body.v2-shell .tk-detail-page :is(.tk-task-main, .tk-task-aside) { display: grid; gap: 16px; min-width: 0; }
body.v2-shell .tk-detail-page .tk-task-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-3, 8px); background: var(--bg-1); overflow: hidden; }
body.v2-shell .tk-detail-page .tk-task-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}
body.v2-shell .tk-detail-page .tk-task-section-title > :is(.tk-ic, .bx) { color: var(--fg-3); }
body.v2-shell .tk-detail-page .tk-task-panel-body { padding: 16px 18px; min-width: 0; overflow-wrap: anywhere; }
body.v2-shell .tk-detail-page .tk-task-richtext { font-size: 13px; line-height: 1.8; overflow-x: auto; }
body.v2-shell .tk-detail-page .tk-task-richtext > :last-child { margin-bottom: 0; }
body.v2-shell .tk-detail-page .tk-task-richtext :is(img, video, iframe) { max-width: 100%; }
body.v2-shell .tk-detail-page .tk-task-richtext img { height: auto; }
body.v2-shell .tk-detail-page .tk-task-automation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.v2-shell .tk-detail-page .tk-task-empty-inline { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--fg-3); font-size: 12px; }
body.v2-shell .tk-detail-page .tk-task-empty-inline p { margin: 0; }
body.v2-shell .tk-detail-page .tk-task-facts { margin: 0; padding: 4px 18px; }
body.v2-shell .tk-detail-page .tk-task-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; }
body.v2-shell .tk-detail-page .tk-task-facts > div + div { border-top: 1px solid var(--line); }
body.v2-shell .tk-detail-page .tk-task-facts dt { flex: 0 0 auto; font-size: 12px; font-weight: 400; color: var(--fg-3); }
body.v2-shell .tk-detail-page .tk-task-facts dd { margin: 0; text-align: end; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
body.v2-shell .tk-detail-page .tk-task-count { margin-inline-start: auto; padding: 1px 6px; border-radius: 4px; background: var(--bg-3); color: var(--fg-2); font-size: 11px; font-weight: 400; }
body.v2-shell .tk-detail-page .tk-task-people { display: grid; gap: 12px; }
body.v2-shell .tk-detail-page .tk-task-person { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--fg-1); font-size: 12px; }
body.v2-shell .tk-detail-page .tk-task-person:hover { color: var(--bs-primary, var(--signal)); }
body.v2-shell .tk-detail-page .tk-task-person img { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--bg-3); }
body.v2-shell .tk-detail-page .tk-task-person span { min-width: 0; overflow-wrap: anywhere; }
body.v2-shell .tk-detail-page .tk-task-more { color: var(--fg-3); font-size: 11px; }
body.v2-shell .tk-detail-page .tk-task-client-list { display: grid; gap: 8px; font-size: 12px; }
body.v2-shell .tk-detail-page .tk-task-workspace { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-3, 8px); box-shadow: none; }
body.v2-shell .tk-detail-page .tk-task-workspace-body { padding: 18px; min-width: 0; }
body.v2-shell .tk-detail-page .tk-task-workspace-title { margin: 0 0 12px; font-size: 14px; font-weight: 500; }
body.v2-shell .tk-detail-page .tk-task-workspace .tk-child-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 0; scrollbar-width: thin; }
body.v2-shell .tk-detail-page .tk-task-workspace .tk-child-tabs .nav-item { flex: 0 0 auto; }
body.v2-shell .tk-detail-page .tk-task-workspace .tab-content { padding: 18px 0 0; }
body.v2-shell .tk-detail-page .tk-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
body.v2-shell .tk-detail-page .tk-detail-custom-summary > summary { cursor: pointer; list-style: none; }
body.v2-shell .tk-detail-page .tk-detail-custom-summary > summary::-webkit-details-marker { display: none; }
body.v2-shell .tk-detail-page .tk-detail-custom-summary > summary::after { content: '+'; margin-inline-start: auto; color: var(--fg-3); }
body.v2-shell .tk-detail-page .tk-detail-custom-summary[open] > summary::after { content: '−'; }
body.v2-shell .tk-detail-page .tk-detail-custom-summary:not([open]) > summary { border-bottom: 0; }
body.v2-shell .tk-detail-page .tk-detail-workspace-heading { margin: 24px 0 12px; }
body.v2-shell .tk-project-overview-page > .tk-board-toolbar { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3, 8px); background: var(--bg-1); flex-wrap: wrap; }
body.v2-shell .tk-project-overview-page > .tk-board-toolbar .btn { display: inline-flex; align-items: center; gap: 6px; }
body.v2-shell .tk-detail-page .tk-detail-identity { display: flex; align-items: center; gap: 14px; }
body.v2-shell .tk-detail-page .tk-detail-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--bg-3); }
body.v2-shell .tk-detail-page .tk-detail-client-summary { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
body.v2-shell .tk-detail-page .tk-detail-metric { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; }
body.v2-shell .tk-detail-page .tk-detail-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
body.v2-shell .tk-detail-page .tk-detail-data-grid dt { color: var(--fg-3); font-size: 11px; font-weight: 400; margin: 0 0 6px; }
body.v2-shell .tk-detail-page .tk-detail-data-grid dd { margin: 0; color: var(--fg-1); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
body.v2-shell .tk-detail-page .tk-detail-wide { grid-column: 1 / -1; }
body.v2-shell .tk-detail-page .tk-detail-multiline { white-space: pre-wrap; }
body.v2-shell .tk-detail-page .tk-detail-contact { display: grid; gap: 18px; }
body.v2-shell .tk-detail-page .tk-detail-contact-value { display: block; font-size: 12px; color: var(--fg-1); overflow-wrap: anywhere; }
body.v2-shell .tk-detail-page .tk-detail-contact .iti { width: 100%; min-width: 0; }
body.v2-shell .tk-detail-page .tk-detail-contact input[readonly] { width: 100%; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; font-size: 12px; }
body.v2-shell .tk-client-detail-page .tk-task-workspace .tab-pane > .d-flex h4 { margin: 0 0 14px !important; font-size: 14px; font-weight: 500 !important; }
@media (max-width: 1100px) {
    body.v2-shell .tk-detail-page .tk-task-layout { grid-template-columns: minmax(0, 1fr) 260px; }
    body.v2-shell .tk-detail-page .tk-task-heading { flex-wrap: wrap; }
    body.v2-shell .tk-detail-page .tk-task-automation { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    body.v2-shell .tk-detail-page .tk-task-layout { grid-template-columns: minmax(0, 1fr); }
    body.v2-shell .tk-detail-page .tk-task-heading { padding: 18px; gap: 16px; }
    body.v2-shell .tk-detail-page .tk-task-heading-actions { width: 100%; justify-content: flex-end; }
    body.v2-shell .tk-detail-page .tk-task-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.v2-shell .tk-detail-page .tk-task-summary-item { padding: 12px 18px; }
    body.v2-shell .tk-detail-page .tk-task-summary .tk-task-progress { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--line); }
    body.v2-shell .tk-detail-page .tk-task-workspace-body { padding: 14px; }
    body.v2-shell .tk-detail-page .tk-detail-data-grid { grid-template-columns: minmax(0, 1fr); }
    body.v2-shell .tk-detail-page .tk-detail-client-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.v2-shell .tk-detail-page .tk-task-summary .tk-task-summary-item:nth-child(3) { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--line); }
}

/* Shared overview cards: dashboard-reference surfaces across summaries/reports.
   Only opted-in KPI/summary cards are affected, never record cards or controls. */
body.v2-shell .tk-overview-card {
    --tk-overview-background: var(--bg-1);
    --tk-overview-border: var(--line);
    min-width: 0;
    min-height: 132px;
    padding: 16px !important;
    border: 1px solid var(--tk-overview-border) !important;
    border-radius: 12px !important;
    background: var(--tk-overview-background) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}
html:not([data-theme="dark"]):not([data-bs-theme="dark"]) body.v2-shell .tk-overview-card {
    --tk-overview-background: #ffffff;
    --tk-overview-border: #e2e8f0;
}
body.v2-shell .tk-overview-card:is(:hover, :active, :focus-within) {
    border-color: var(--tk-overview-border) !important;
    background: var(--tk-overview-background) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.v2-shell .tk-overview-card:focus-visible {
    outline: 2px solid var(--bs-primary, var(--signal)) !important;
    outline-offset: 3px;
}
body.v2-shell .tk-overview-card:has(> .card-body) { padding: 0 !important; }
body.v2-shell .tk-overview-card > .card-body { padding: 16px !important; }
body.v2-shell .tk-overview-card :is(.tk-metric-label, .tk-overview-label, .tk-fact-k, .card-title, .tk-leave-metric-heading h3, .text-body-secondary) {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: normal;
    overflow-wrap: anywhere;
}
body.v2-shell .tk-overview-card :is(.tk-metric-value, .tk-overview-value, .tk-fact-v, .card-text, .tk-leave-metric-value) {
    color: var(--fg-0);
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
}
body.v2-shell .tk-overview-card :is(.tk-metric-value, .tk-overview-value, .tk-leave-metric-value) small { font-size: 12px !important; font-weight: 400 !important; }
body.v2-shell .tk-overview-card :is(.avatar, .tk-leave-metric-icon) { width: 32px; height: 32px; flex: 0 0 32px; }
body.v2-shell .tk-overview-card .avatar i { font-size: 18px; }
/* Report overview icons share the configured primary across every report. */
body.v2-shell .report-page .tk-overview-card .avatar,
body.v2-shell .report-page .tk-overview-card.tk-fact > i {
    color: var(--signal) !important;
    background: transparent !important;
}
body.v2-shell .report-page .tk-overview-card .avatar i,
body.v2-shell .report-page .tk-overview-card.tk-fact > i {
    color: var(--signal) !important;
    font-size: 18px !important;
}
body.v2-shell .tk-overview-card:not(.report-summary-card) > .card-body h6 { font-size: 12px; font-weight: 500; line-height: 1.5; }
body.v2-shell .tk-overview-card:not(.report-summary-card) > .card-body h4 { font-size: 26px; font-weight: 700; line-height: 1.2; }
body.v2-shell .tk-overview-card.tk-fact { align-items: flex-start; gap: 12px; }
body.v2-shell .tk-overview-card.tk-fact > i { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; }
body.v2-shell .tk-overview-card .tk-fact-v { margin-top: 4px; }
body.v2-shell .tk-overview-card.report-summary-card:not(.report-summary-card-legacy) > .card-body { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; align-content: start; }
body.v2-shell .tk-overview-card.report-summary-card:not(.report-summary-card-legacy) > .card-body > .d-flex { display: contents !important; }
body.v2-shell .tk-overview-card.report-summary-card:not(.report-summary-card-legacy) > .card-body > .d-flex > :first-child { grid-column: 2; grid-row: 1; }
body.v2-shell .tk-overview-card.report-summary-card:not(.report-summary-card-legacy) > .card-body > .d-flex > :last-child { grid-column: 1; grid-row: 1 / span 2; }
body.v2-shell .tk-overview-card.report-summary-card:not(.report-summary-card-legacy) h3 { grid-column: 2; grid-row: 2; margin: 0 !important; font-size: 26px !important; font-weight: 700 !important; }
body.v2-shell .tk-overview-card.report-summary-card-legacy > .card-body { align-items: flex-start; }
body.v2-shell .tk-overview-card.report-summary-card-legacy > .card-body > i { width: 32px; height: 32px; flex: 0 0 32px; font-size: 22px !important; }
body.v2-shell .tk-overview-remaining > .badge {
    display: inline-flex !important;
    align-self: flex-start;
    max-width: 100%;
    height: auto;
    min-height: 22px;
    padding: 3px 8px;
    line-height: 1.4;
    white-space: normal;
}
body.v2-shell .tk-overview-leave-preview > .badge { align-self: flex-start; max-width: 100%; white-space: normal; }

/* Leave balances: flat overview, compact analytics and a separate member list. */
.tk-leave-balances-page .tk-leave-section-heading { margin-bottom: 16px; }
.tk-leave-balances-page .tk-leave-section-heading h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.tk-leave-balances-page .tk-leave-section-heading p { margin: 5px 0 0; color: var(--fg-3); font-size: 12px; }
.tk-leave-balances-page .tk-leave-filters { border-radius: var(--r-3, 8px); }
.tk-leave-balances-page .tk-leave-filters .card-body { padding: 16px 20px !important; }
.tk-leave-balances-page .tk-leave-overview { margin-bottom: 24px; }
.tk-leave-balances-page .tk-leave-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tk-leave-balances-page .tk-leave-metric { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-3, 8px); background: var(--bg-1); }
.tk-leave-balances-page .tk-leave-metric-heading { display: flex; align-items: center; gap: 8px; }
.tk-leave-balances-page .tk-leave-metric-heading h3 { margin: 0; font-size: 12px; line-height: 1.5; font-weight: 500; }
.tk-leave-balances-page .tk-leave-metric-heading > button { margin-inline-start: auto; flex-shrink: 0; }
.tk-leave-balances-page .tk-leave-metric-icon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; display: inline-flex; justify-content: center; align-items: center; }
.tk-leave-balances-page .tk-leave-metric-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 12px; color: var(--fg-0); font-size: 27px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tk-leave-balances-page .tk-leave-metric-value small { font-size: 12px; font-weight: 400; color: var(--fg-3); }
.tk-leave-balances-page .tk-leave-metric-meta { display: grid; gap: 4px; margin-top: 10px; color: var(--fg-3); font-size: 11px; }
.tk-leave-balances-page .tk-leave-metric-description { margin: 8px 0 0; color: var(--fg-3); font-size: 11px; line-height: 1.6; }
.tk-leave-balances-page .tk-leave-progress { appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 999px; overflow: hidden; background: var(--bg-3); color: var(--bs-primary); }
.tk-leave-balances-page .tk-leave-progress::-webkit-progress-bar { background: var(--bg-3); }
.tk-leave-balances-page .tk-leave-progress::-webkit-progress-value { background: var(--bs-primary); }
.tk-leave-balances-page .tk-leave-progress::-moz-progress-bar { background: var(--bs-primary); }
.tk-leave-balances-page .tk-leave-chart > .tk-card-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 16px; padding: 20px 20px 0; border: 0; }
.tk-leave-balances-page .tk-leave-chart .tk-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.tk-leave-balances-page .tk-leave-chart .tk-card-title-sub { font-size: 12px; color: var(--fg-3); }
.tk-leave-balances-page .tk-leave-chart > .tk-card-body { padding: 12px 20px 20px; }
.tk-leave-balances-page .tk-leave-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-leave-balances-page .chart-legend-toggle { border: 1px solid var(--line) !important; background: transparent !important; color: var(--fg-2) !important; box-shadow: none !important; }
.tk-leave-balances-page .chart-legend-toggle.active { background: var(--bg-2) !important; }
.tk-leave-balances-page .chart-legend-toggle[aria-pressed="false"] { opacity: .5; }
.tk-leave-balances-page .chart-legend-toggle[data-series="used_paid_leaves"] i { color: var(--bs-primary) !important; }
.tk-leave-balances-page .chart-legend-toggle[data-series="remaining_paid_leaves"] i { color: #4aa888 !important; }
.tk-leave-balances-page .chart-legend-toggle[data-series="unpaid_leaves_taken"] i { color: #d5a029 !important; }
.tk-leave-balances-page .tk-leave-insights { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.tk-leave-balances-page .tk-leave-insights > div { width: auto; min-width: 0; margin: 0; padding: 0; }
.tk-leave-balances-page .tk-leave-insights .card { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.tk-leave-balances-page .tk-leave-insights .card-body { padding: 0 !important; }
.tk-leave-balances-page .tk-leave-insights h6 { font-size: 11px; letter-spacing: .04em; }
.tk-leave-balances-page .tk-leave-insights li { gap: 12px; padding-block: 4px; }
.tk-leave-balances-page .tk-leave-insights li > :last-child { text-align: end; overflow-wrap: anywhere; }
.tk-leave-balances-page .tk-leave-insights .alert { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--fg-1); }
.tk-leave-balances-page .tk-leave-insights .alert i { color: var(--fg-3); }
.tk-leave-balances-page .tk-leave-members > .tk-leave-section-heading { padding: 20px; margin: 0; border-bottom: 0; }
/* Keep page 1 visible when all members fit on one page. The plugin still hides
   the entire footer for empty results and disables unavailable page arrows. */
body.v2-shell .tk-leave-members .fixed-table-pagination > div.pagination { display: flex !important; }
/* A focused scroll region must not draw a purple frame around the whole list.
   Keep focus rings on its search, refresh and pagination controls unchanged. */
body.v2-shell .tk-leave-members :is(.table-responsive, .fixed-table-body):is(:focus, :focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
.tk-leave-balances-page #leaveBalancesChartEmptyState { padding: 36px 16px; margin-top: 0 !important; text-align: center; }
@media (max-width: 1199.98px) {
    .tk-leave-balances-page .tk-leave-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-leave-balances-page .tk-leave-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-leave-balances-page .tk-leave-insights > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .tk-leave-balances-page :is(.tk-leave-metrics, .tk-leave-insights) { grid-template-columns: minmax(0, 1fr); }
    .tk-leave-balances-page .tk-leave-chart > .tk-card-head { padding: 16px 16px 0; }
    .tk-leave-balances-page .tk-leave-chart > .tk-card-body { padding: 12px 16px 16px; }
}

/* Payslip editor: shared create/edit sections and responsive adjustment rows. */
.tk-payslip-editor { padding-bottom: 24px; }
.tk-payslip-editor > .card { border: 1px solid var(--line, #d9dee3) !important; background: var(--bg-1, var(--bs-body-bg, #fff)); box-shadow: none !important; overflow: visible; }
.tk-payslip-editor > .card > .card-body { padding: 0; }
.tk-payslip-editor .tk-payslip-section {
    min-width: 0;
    padding: 24px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line, var(--bs-border-color, #d9dee3));
    background: transparent;
}
.tk-payslip-editor .tk-payslip-section-heading { margin-bottom: 12px; }
.tk-payslip-editor .tk-payslip-section-heading h2 { margin: 0 !important; font-size: 14px; font-weight: 600; }
.tk-payslip-editor .form-control[readonly] { background-color: var(--bg-2, #fafbfc); }
.tk-payslip-editor .tk-payslip-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 1.625rem; }
.tk-payslip-editor .tk-payslip-fields > div { width: auto; min-width: 0; margin: 0 !important; }
.tk-payslip-editor .tk-payslip-attendance-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tk-payslip-editor .tk-payslip-earnings-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tk-payslip-editor .tk-payslip-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.tk-payslip-editor .tk-payslip-toolbar :is(.btn, .form-check) { margin-block: 0 !important; }
.tk-payslip-editor .tk-payslip-leave-details { margin-top: 16px; }
.tk-payslip-editor .tk-payslip-leave-details > summary { width: fit-content; cursor: pointer; color: var(--fg-3, #697a8d); padding-block: 4px; }
.tk-payslip-editor .tk-payslip-leave-details > summary:focus-visible { outline: 2px solid var(--bs-primary, var(--signal)); outline-offset: 3px; border-radius: 2px; }
.tk-payslip-editor #leave-summary { margin-top: 8px; border-color: var(--line, #d9dee3) !important; background: var(--bg-2, #fafbfc) !important; }
.tk-payslip-editor #leave-summary > .d-flex.small { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px !important; }
.tk-payslip-editor #leave-summary span { overflow-wrap: anywhere; }
.tk-payslip-editor .tk-payslip-adjustments { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; }
.tk-payslip-editor .tk-payslip-adjustment + .tk-payslip-adjustment { border-left: 1px solid var(--line, #d9dee3); }
.tk-payslip-editor .tk-payslip-picker { margin-bottom: 4px; }
.tk-payslip-editor :is(.tk-payslip-picker, .tk-payslip-fields) .mt-2 { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-payslip-editor .payslip-line-item-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) auto;
    align-items: end;
    gap: 12px;
    padding-block: 12px;
}
.tk-payslip-editor #payslip-deductions .payslip-line-item-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr) auto; }
.tk-payslip-editor .payslip-line-item-row + .payslip-line-item-row { border-top: 1px solid var(--line, #d9dee3); }
.tk-payslip-editor .payslip-line-item-row > div { width: auto !important; min-width: 0; margin: 0 !important; }
.tk-payslip-editor .payslip-line-item-row .btn { min-height: var(--ctrl-h-sm, 24px); margin: 0 !important; }
.tk-payslip-editor .payslip-line-item-row .form-label { display: block; }
.tk-payslip-editor .tk-payslip-adjustment-total { padding-top: 12px; text-align: end; }
.tk-payslip-editor .tk-payslip-adjustment-total .form-label { margin: 0; }
.tk-payslip-editor .tk-payslip-review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tk-payslip-editor .tk-payslip-review-metric { display: grid; gap: 6px; min-width: 0; }
.tk-payslip-editor .tk-payslip-review-metric > span { color: var(--fg-3, #697a8d); font-size: 12px; }
.tk-payslip-editor :is(.tk-payslip-review-metric, .tk-payslip-pay-totals) strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tk-payslip-editor .tk-payslip-pay-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.tk-payslip-editor .tk-payslip-pay-totals > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 6px; background: var(--bg-2, #fafbfc); }
.tk-payslip-editor .tk-payslip-pay-totals strong { font-size: 20px; }
.tk-payslip-editor .tk-payslip-net-total { color: var(--bs-primary, var(--signal)); }
.tk-payslip-editor .tk-payslip-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 24px; }
@media (max-width: 1399.98px) {
    .tk-payslip-editor .tk-payslip-adjustments { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .tk-payslip-editor .tk-payslip-adjustment + .tk-payslip-adjustment { border-left: 0; }
}
@media (max-width: 991.98px) {
    .tk-payslip-editor :is(.tk-payslip-fields, .tk-payslip-earnings-fields) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .tk-payslip-editor .tk-payslip-section { padding: 16px; }
    .tk-payslip-editor :is(.tk-payslip-fields, .tk-payslip-pay-totals),
    .tk-payslip-editor .payslip-line-item-row,
    .tk-payslip-editor #payslip-deductions .payslip-line-item-row { grid-template-columns: minmax(0, 1fr); }
    .tk-payslip-editor .tk-payslip-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-payslip-editor .payslip-line-item-row .btn { width: 100%; }
}

/* Native multiple selects must not expand into tall list boxes while the
   report's Tom Select scripts are loading. Keep the real control usable;
   the selector stops matching as soon as Tom Select takes ownership. */
body.v2-shell .report-page .report-filter-panel select[multiple]:not(.tomselected) {
    height: var(--ctrl-h-md, 32px) !important;
    min-height: var(--ctrl-h-md, 32px) !important;
    max-height: var(--ctrl-h-md, 32px);
    overflow-y: auto;
}

/* Every report uses the Projects report layout, controls and loading primitives. */
.report-page { padding-bottom: 24px; }
.report-page > .card, .report-page .tk-report-results { border: 1px solid var(--line); border-radius: 12px; box-shadow: none !important; }
.report-page .card-header { padding: 20px 20px 0; border: 0; background: transparent; }
.report-page .report-filter-panel > .card-body { padding: 20px; }
.report-page .report-filter-panel .form-label { display: block; margin-bottom: 6px !important; font-size: 12px; font-weight: 500; color: var(--tk-text-secondary) !important; }
.report-page .report-filter-panel .tk-inputgroup { margin: 0; }
.report-page .report-context { border: 0; padding: 12px 0 0; background: transparent; gap: 8px 16px; font-size: 12px; }
.report-page [data-loading-summary] { position: relative; }
.report-page [data-loading-summary] > [class*="col-"] { min-width: 0; }
.report-page [data-loading-summary][aria-busy="true"] .card-body { visibility: visible; }
.report-page [data-loading-summary] h3 { overflow-wrap: anywhere; }
.report-page [data-loading-summary] .avatar { display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, transparent); }
:is(.tk-project-report-error, .tk-task-report-error, .tk-report-error):not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
:is(.tk-project-report-error, .tk-task-report-error, .tk-report-error)[hidden] { display: none !important; }
:is(.tk-project-report-error, .tk-task-report-error, .tk-report-error) .btn { flex-shrink: 0; }
.report-page[data-report-state="error"] .no-records-found { visibility: hidden; }
.report-page :is(.tk-project-report-results, .tk-task-report-results, .tk-report-results) .fixed-table-pagination { padding: 12px 20px; }
.report-page :is(.tk-project-report-results, .tk-task-report-results, .tk-report-results) .fixed-table-pagination > div.pagination { display: flex !important; }
@media (max-width: 575.98px) {
    .report-page .card-header { padding: 16px 16px 0; }
    .report-page .report-filter-panel > .card-body { padding: 16px; }
    :is(.tk-project-report-error, .tk-task-report-error, .tk-report-error):not([hidden]) { align-items: flex-start; flex-direction: column; }
}

/* Diagram fullscreen controls share sizing, icons and keyboard affordances. */
.tk-panel-fullscreen .tk-fullscreen-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; white-space: nowrap; }
.tk-panel-fullscreen [data-fullscreen-enter-icon][hidden], .tk-panel-fullscreen [data-fullscreen-exit-icon][hidden] { display: none !important; }
.tk-panel-fullscreen.is-fullscreen { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 2500; width: 100%; height: 100dvh; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--bg-1, #fff); }
.tk-panel-fullscreen.is-fullscreen > .modal { z-index: 2600 !important; }
.tk-panel-fullscreen.is-fullscreen > .modal-backdrop { z-index: 2590 !important; }
.tk-panel-fullscreen .tk-fullscreen-toggle:focus-visible { outline: 2px solid var(--bs-primary, var(--signal)); outline-offset: 3px; }
@media (max-width: 767.98px) { .tk-panel-fullscreen .tk-fullscreen-toggle { min-height: 40px; } }


/* Project cards: compact editorial layout shared by grid and board. */
body.v2-shell .tcard.tk-project-card {
    padding: 14px;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-1);
    box-shadow: none;
    cursor: default;
    min-width: 0;
    transition: none;
}
body.v2-shell .tcard.tk-project-card:is(:hover, :active, :focus-within) {
    border-color: var(--line);
    background: var(--bg-1);
    box-shadow: none;
    transform: none;
}
body.v2-shell .kanban-card.tk-project-card { cursor: grab; }
body.v2-shell .kanban-card.tk-project-card:active { cursor: grabbing; }
body.v2-shell .tk-project-card .tcard-meta { align-items: flex-start; gap: 10px; }
body.v2-shell .tk-project-heading { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body.v2-shell .tk-project-card .tcard-title {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
body.v2-shell .tk-project-card .tcard-title a:hover { color: var(--fg-0); }
body.v2-shell .tk-project-card .tcard-code { font-size: 10px; font-weight: 400; color: var(--fg-3); }
body.v2-shell .tk-project-card .tcard-actions { flex: none; gap: 0; }
body.v2-shell .tk-project-card .tcard-ic { width: 22px; height: 22px; transition: none; }
body.v2-shell .tk-project-card .tcard-ic:hover { background: transparent; color: var(--fg-3); }
body.v2-shell .tk-project-badges { display: flex; flex-wrap: wrap; gap: 5px; }
body.v2-shell .tk-project-badges:empty { display: none; }
body.v2-shell .tk-project-badge {
    --project-badge-color: var(--fg-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 7px;
    border: 0;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--fg-1);
    background: color-mix(in srgb, var(--project-badge-color) 10%, var(--bg-1));
}
body.v2-shell .tk-project-badge-primary { --project-badge-color: var(--signal); }
body.v2-shell .tk-project-badge-secondary { --project-badge-color: var(--bs-secondary, #8592a3); }
body.v2-shell .tk-project-badge-success { --project-badge-color: var(--bs-success, #28a745); }
body.v2-shell .tk-project-badge-danger { --project-badge-color: var(--err); }
body.v2-shell .tk-project-badge-warning { --project-badge-color: var(--warn); }
body.v2-shell .tk-project-badge-info { --project-badge-color: var(--info); }
body.v2-shell .tk-project-badge-dark { --project-badge-color: var(--fg-0); }
body.v2-shell .tk-project-badge-light { --project-badge-color: var(--fg-3); }
body.v2-shell .tk-project-badge-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--project-badge-color); }
body.v2-shell .tk-project-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--fg-2);
    font-size: 11px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
body.v2-shell .tk-project-dates > span { min-width: 0; overflow-wrap: anywhere; }
body.v2-shell .tk-project-date-separator { color: var(--fg-3); }
body.v2-shell .tk-project-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; }
body.v2-shell .tk-project-amount { font-size: 13px; font-weight: 600; color: var(--fg-1); overflow-wrap: anywhere; min-width: 0; }
body.v2-shell .tk-project-task-link,
body.v2-shell .tk-project-task-link:hover {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 0;
    background: transparent;
    color: var(--fg-2);
    font-size: 11px;
    text-decoration: none;
}
body.v2-shell .tk-project-card .tk-pfoot {
    margin: 0 -14px -14px;
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    background: color-mix(in srgb, var(--fg-3) 4%, var(--bg-1));
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
}
body.v2-shell .tk-project-card .tk-pfoot-people { align-items: center; gap: 12px; }
body.v2-shell .tk-project-card .tk-pgroup { flex-direction: row; align-items: center; gap: 5px; }
body.v2-shell .tk-project-card .tk-pgroup-lbl { font-family: var(--font-sans); font-size: 9px; text-transform: none; letter-spacing: 0; }
body.v2-shell .tk-project-card .tk-av-stack .av { width: 22px; height: 22px; font-size: 9px; border-color: var(--bg-1); }
body.v2-shell .tk-project-card .tk-pfoot .tcard-stats { align-self: center; gap: 0; }
body.v2-shell .tk-project-card .tk-pgroup .small { font-size: 10px; }
body.v2-shell .tk-project-card :is(a, button, [role="button"]):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
body.v2-shell .tk-project-board .kcol { background: color-mix(in srgb, var(--fg-3) 5%, var(--bg-1)); border: 0; border-radius: 12px; box-shadow: none; transition: none; }
body.v2-shell .tk-project-board .kcol-head { padding: 12px; border: 0; }
body.v2-shell .tk-project-board .kcol-head .tk-project-badge { background: transparent; padding: 0; font-size: 11px; font-weight: 600; }
body.v2-shell .tk-project-board .kanban-tasks { padding: 0 8px 8px; gap: 10px; }
body.v2-shell .tk-project-board .kanban-footer { background: transparent; }
@media (max-width: 575px) {
    body.v2-shell .tcard.tk-project-card { padding: 12px; }
    body.v2-shell .tk-project-card .tk-pfoot { margin: 0 -12px -12px; padding: 9px 12px; }
}

/* Shared FullCalendar v4 presentation */
body.v2-shell .calendar-main { min-width: 0; }
body.v2-shell .calendar-main .fc-toolbar.fc-header-toolbar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 12px; margin-bottom: 22px;
}
body.v2-shell .calendar-main .fc-toolbar .fc-left,
body.v2-shell .calendar-main .fc-toolbar .fc-right { display: flex; align-items: center; float: none; }
body.v2-shell .calendar-main .fc-toolbar .fc-right { justify-content: flex-end; }
body.v2-shell .calendar-main .fc-toolbar .fc-center { float: none; text-align: center; }
body.v2-shell .calendar-main .fc-toolbar .fc-clear { display: none; }
body.v2-shell .calendar-main .fc-toolbar h2 { margin: 0; color: var(--fg-0); font-size: 1.35rem; font-weight: 650; }
body.v2-shell .calendar-main .fc-toolbar .fc-button {
    min-height: 34px; padding: 5px 11px !important; font-size: 12px !important;
    color: var(--fg-1) !important; background: var(--bg-0) !important;
    border: 1px solid var(--line) !important; box-shadow: none !important; text-transform: lowercase;
}
body.v2-shell .calendar-main .fc-toolbar .fc-button.fc-button-active {
    color: var(--fg-0) !important; background: var(--bg-2) !important; font-weight: 600 !important;
}
body.v2-shell .calendar-main .fc-toolbar .fc-button:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
body.v2-shell .calendar-main .fc th,
body.v2-shell .calendar-main .fc td { border-color: var(--line) !important; }
body.v2-shell .calendar-main .fc-day-header {
    padding: 11px 4px; background: var(--bg-2); color: var(--fg-1); font-size: 12px; font-weight: 600;
}
body.v2-shell .calendar-main .fc-day-top .fc-day-number { padding: 7px 9px; color: var(--fg-1); font-size: 11px; }
body.v2-shell .calendar-main .fc-day-top.fc-other-month { opacity: .45; }
body.v2-shell .calendar-main .fc-day.fc-today { background: var(--signal-glow) !important; }
body.v2-shell .calendar-main .fc-day-grid-event {
    margin: 2px 3px; padding: 7px 9px !important; border: 0 !important;
    border-radius: 3px !important; background: var(--tk-calendar-event-bg, #eeeafb) !important;
    color: var(--tk-calendar-event-fg, #172033) !important; box-shadow: none !important;
    transform: none !important; font-size: 12px; line-height: 1.35;
}
body.v2-shell .calendar-main .fc-day-grid-event:hover { transform: none !important; box-shadow: none !important; }
body.v2-shell .calendar-main .fc-day-grid-event .fc-content,
body.v2-shell .calendar-main .fc-day-grid-event .fc-title,
body.v2-shell .calendar-main .fc-day-grid-event .fc-time { color: var(--tk-calendar-event-fg, #172033) !important; }
body.v2-shell .calendar-main .fc-day-grid-event .fc-content { white-space: normal; overflow-wrap: anywhere; }
body.v2-shell .calendar-main .fc-day-grid-event .fc-title { font-weight: 600; }
body.v2-shell .calendar-main .fc-list-heading td { background: var(--bg-2) !important; color: var(--fg-0); }
@media (max-width: 767.98px) {
    body.v2-shell .calendar-main { padding: 14px !important; }
    body.v2-shell .calendar-main .fc-toolbar.fc-header-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; }
    body.v2-shell .calendar-main .fc-toolbar .fc-center { order: -1; width: 100%; }
    body.v2-shell .calendar-main .fc-toolbar .fc-button { padding: 5px 8px !important; }
    body.v2-shell .calendar-main .fc-view-container { overflow-x: auto; }
    body.v2-shell .calendar-main .fc-dayGridMonth-view { min-width: 560px; }
}

/* One compact action size across responsive pages, forms and dialogs.
   Auto height allows translated labels to wrap without clipping. */
@media (max-width: 767.98px) {
    body.v2-shell :is(.btn, .tk-btn):not(:where(.btn-icon, .btn-close, .tk-btn-inline, [data-view-switch-option], [data-view-switch-menu-option])) {
        min-height: 32px !important;
        height: auto !important;
        padding: 4px 12px !important;
        line-height: 1.25;
    }
}
/* Roles directory and role editor share the workspace access vocabulary. */
.tk-role-directory { border: 1px solid var(--tk-border); border-radius: 12px; background: var(--tk-surface); overflow: hidden; margin-bottom: 24px; }
.tk-role-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; background: var(--tk-surface-subtle); border-bottom: 1px solid var(--tk-border); }
.tk-role-directory-heading h2 { line-height: 1.5; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--tk-text); }
.tk-role-directory-heading p, .tk-role-meta { color: var(--tk-text-muted); font-size: 12px; line-height: 1.6; }
.tk-role-directory-heading p { margin: 0; }
.tk-role-count { line-height: 1.5; padding: 2px 8px; border: 1px solid var(--tk-border); background: var(--tk-surface); border-radius: 6px; font-size: 12px; }
.tk-role-directory-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tk-text-muted); white-space: nowrap; }
.tk-role-item { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr) auto; align-items: start; gap: 28px; padding: 24px; }
.tk-role-item + .tk-role-item { border-top: 1px solid var(--tk-border); }
.tk-role-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk-role-identity h3 { font-size: 14px; line-height: 1.5; font-weight: 600; margin: 0 0 3px; color: var(--tk-text); overflow-wrap: anywhere; }
.tk-role-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; height: 42px; border: 1px solid var(--tk-border); border-radius: 12px; background: var(--tk-surface-subtle); color: var(--tk-text-secondary); font-size: 21px; }
.tk-role-avatar-admin { color: var(--tk-brand); background: color-mix(in srgb, var(--tk-brand) 9%, var(--tk-surface)); border-color: color-mix(in srgb, var(--tk-brand) 20%, var(--tk-border)); }
.tk-role-access { display: grid; gap: 10px; min-width: 0; }
.tk-access-label { display: inline-flex; align-items: center; gap: 6px; color: var(--tk-text-secondary); font-size: 12px; font-weight: 600; }
.tk-access-full { color: var(--tk-success); }
.tk-role-permissions { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-permission-tag { display: inline-block; padding: 3px 8px; border: 1px solid var(--tk-border); border-radius: 5px; background: var(--tk-surface-subtle); color: var(--tk-text-secondary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.tk-role-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 38px; }
.tk-role-item-actions .btn { min-height: 36px; }
.tk-role-empty { padding: 64px 24px; text-align: center; color: var(--tk-text-muted); }
.tk-role-empty > i { font-size: 32px; margin-bottom: 12px; }
.tk-role-empty h3 { font-size: 16px; }
.tk-role-back { display: inline-flex; align-items: center; gap: 6px; color: var(--tk-text-muted); font-size: 12px; text-decoration: none; }
.tk-role-back:hover { color: var(--tk-brand); }
.tk-role-editor-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.tk-role-editor .card { border: 1px solid var(--tk-border); border-radius: 12px; box-shadow: none; overflow: hidden; }
.tk-role-editor .card-header { padding: 20px; min-height: 70px; gap: 4px; }
.tk-role-editor .card-header > .bx { font-size: 20px; color: var(--tk-text-muted); }
.tk-role-editor .card-header h6 { color: var(--tk-text); font-size: 14px; }
.tk-role-editor .card-body { padding: 20px; }
.tk-role-editor .tk-role-configuration { position: sticky; top: 90px; }
.tk-role-editor .tk-data-access-toggle { display: flex; flex-direction: column; gap: 10px; }
body.v2-shell .tk-role-editor .tk-data-access-toggle > label.btn { display: flex; align-items: flex-start; gap: 10px; padding: 14px !important; height: auto; min-height: 72px; border: 1px solid var(--tk-border) !important; border-radius: 8px !important; margin: 0; color: var(--tk-text-secondary); background: var(--tk-surface); text-align: start; white-space: normal; }
.tk-role-editor .tk-data-access-toggle > label > .bx { font-size: 19px; margin-top: 2px; flex-shrink: 0; }
.tk-role-editor .tk-data-access-toggle small { display: block; font-size: 11px; line-height: 1.6; font-weight: 400; margin-top: 4px; color: var(--tk-text-muted); }
.tk-role-editor .tk-access-check { margin-inline-start: auto; opacity: 0; }
.tk-role-editor .tk-data-access-toggle .btn-check:checked + label { border-color: var(--tk-brand) !important; background: color-mix(in srgb, var(--tk-brand) 6%, var(--tk-surface)); color: var(--tk-text); box-shadow: 0 0 0 1px var(--tk-brand); }
.tk-role-editor .btn-check:checked + label .tk-access-check { opacity: 1; color: var(--tk-brand); }
.tk-role-editor .btn-check:focus-visible + label { outline: 2px solid var(--tk-brand); outline-offset: 3px; }
.tk-role-editor .tk-permission-matrix { min-width: 0; margin: 0 !important; }
.tk-role-editor .tk-role-modules > .card-body { padding: 0; }
.tk-role-editor .tk-permission-matrix th { padding: 16px 20px; background: var(--tk-surface-subtle); }
.tk-role-editor .tk-permission-matrix td { padding: 15px 20px; }
.tk-role-editor .tk-permission-matrix td:first-child { position: static; width: 32% !important; min-width: 160px; background: transparent !important; box-shadow: none; }
.tk-role-editor .tk-permission-matrix .form-check { display: flex; align-items: center; gap: 8px; padding: 0; }
.tk-role-editor .tk-permission-matrix .form-check-input { float: none; margin: 0; flex: 0 0 16px; width: 16px; height: 16px; cursor: pointer; }
.tk-role-editor .tk-permission-matrix .form-check-label { cursor: pointer; font-size: 12px; }
.tk-permission-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-role-editor .tk-permission-options > .form-check { padding: 7px 10px; border: 1px solid var(--tk-border); border-radius: 6px; background: var(--tk-surface); }
.tk-role-editor .tk-permission-options > .form-check:has(:checked) { background: color-mix(in srgb, var(--tk-brand) 7%, var(--tk-surface)); border-color: color-mix(in srgb, var(--tk-brand) 35%, var(--tk-border)); }
.tk-role-editor .tk-role-save { grid-column: 1 / -1; margin-bottom: 24px; }
@media (max-width: 1199px) {
    .tk-role-editor-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 16px; }
    .tk-role-editor .tk-permission-matrix td { padding: 14px; }
    .tk-role-item { grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) auto; gap: 16px; }
}
@media (max-width: 991px) {
    .tk-role-editor-grid { grid-template-columns: minmax(0, 1fr); }
    .tk-role-editor .tk-role-configuration { position: static; }
    .tk-role-item { grid-template-columns: minmax(0, 1fr) auto; }
    .tk-role-access { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .tk-role-directory-heading, .tk-role-item { padding: 18px; }
    .tk-role-directory-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .tk-role-editor .tk-permission-matrix td { display: block; width: 100% !important; min-width: 0; border: 0; padding: 12px 16px; }
    .tk-role-editor .tk-permission-matrix td + td { padding-top: 0; }
    .tk-role-editor .tk-permission-matrix tr { border-bottom: 1px solid var(--tk-border); }
    .tk-role-editor .tk-permission-matrix-wrap { overflow: visible; }
    .tk-role-item-actions { gap: 4px; }
    .tk-role-item-actions .tk-role-meta { font-size: 11px; }
}

/* General and company settings: section navigation and consistent form panels. */
.tk-settings-editor { max-width: 1600px; padding-bottom: 12px; }
.tk-settings-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); align-items: start; gap: 28px; }
.tk-settings-rail { position: sticky; top: 88px; min-width: 0; }
.tk-settings-section-nav { display: grid; gap: 4px; padding: 8px 0; }
.tk-settings-nav-label { margin: 0 12px 12px; color: var(--tk-text-muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tk-settings-section-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; color: var(--tk-text-secondary); font-size: 12px; line-height: 1.5; text-decoration: none; }
.tk-settings-section-nav a .bx { flex-shrink: 0; font-size: 18px; color: var(--tk-text-muted); }
.tk-settings-section-nav a:hover, .tk-settings-section-nav a:focus-visible { color: var(--tk-brand); background: color-mix(in srgb, var(--tk-brand) 8%, var(--tk-surface)); }
.tk-settings-section-nav a:focus-visible { outline: 2px solid var(--tk-brand); outline-offset: 2px; }
.tk-settings-rail-note { display: flex; gap: 8px; margin: 20px 12px; padding-top: 20px; border-top: 1px solid var(--tk-border); color: var(--tk-text-muted); font-size: 11px; line-height: 1.7; }
.tk-settings-rail-note > .bx { margin-top: 2px; font-size: 16px; flex-shrink: 0; }
.tk-settings-rail-note p { margin: 0; }
.tk-settings-panels { display: grid; gap: 20px; min-width: 0; }
body.v2-shell .tk-settings-editor .tk-settings-panel { border: 1px solid var(--tk-border); border-radius: 12px; box-shadow: none; margin: 0; scroll-margin-top: 100px; min-width: 0; }
body.v2-shell .tk-settings-editor .tk-settings-panel-heading { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--tk-border); }
.tk-settings-section-icon { display: inline-flex; flex: 0 0 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--tk-border); border-radius: 9px; background: var(--tk-surface-subtle); color: var(--tk-text-secondary); font-size: 20px; }
body.v2-shell .tk-settings-panel-heading h2 { margin: 0 0 5px; color: var(--tk-text); font-size: 14px; font-weight: 600; line-height: 1.5; }
.tk-settings-panel-heading p { margin: 0; color: var(--tk-text-muted); font-size: 12px; line-height: 1.6; }
body.v2-shell .tk-settings-editor .tk-settings-panel > .card-body { padding: 24px !important; }
.tk-settings-panel .row { --bs-gutter-x: 24px; --bs-gutter-y: 4px; }
.tk-settings-panel .form-label { margin-bottom: 8px; }
.tk-settings-panel .form-text, .tk-settings-panel small { font-size: 11px; line-height: 1.6; }
.tk-settings-panel .form-control, .tk-settings-panel .form-select, .tk-settings-panel .ts-wrapper, .tk-settings-panel .iti { max-width: 100%; min-width: 0; }
.tk-settings-panel textarea { min-height: 100px; }
.tk-settings-brand-field { margin-top: 12px; }
.tk-settings-logo-preview { display: flex; align-items: center; justify-content: center; height: 92px; margin-bottom: 12px; padding: 16px; border: 1px dashed var(--tk-border-strong); border-radius: 8px; background: var(--tk-surface-subtle); }
.tk-settings-logo-preview img { display: block; max-height: 56px; max-width: 100%; object-fit: contain; }
body.v2-shell .tk-settings-editor .tk-settings-switch-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 0; margin: 0; }
.tk-settings-switch-row + .tk-settings-switch-row { border-top: 1px solid var(--tk-border); }
body.v2-shell .tk-settings-switch-row > .form-check-label { margin: 0 !important; color: var(--tk-text-secondary); font-size: 13px; }
.tk-settings-switch-row > .form-switch { flex-shrink: 0; margin: 0; }
.tk-settings-document-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border: 1px solid var(--tk-border); border-radius: 8px; background: var(--tk-surface-subtle); color: var(--tk-text-secondary); font-size: 12px; }
.tk-settings-document-note > .bx { margin-top: 2px; font-size: 18px; color: var(--tk-brand); flex-shrink: 0; }
.tk-settings-document-note p { margin: 0; }
@media (min-width: 1200px) {
    .tk-settings-brand-field { width: 33.333333%; }
}
@media (max-width: 1199px) {
    .tk-settings-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 991px) {
    .tk-settings-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .tk-settings-rail { position: static; }
    .tk-settings-section-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
    .tk-settings-section-nav a { border: 1px solid var(--tk-border); padding: 8px 10px; }
    .tk-settings-nav-label { flex-basis: 100%; margin: 0 0 4px; }
    .tk-settings-rail-note { display: none; }
}
@media (max-width: 575px) {
    body.v2-shell .tk-settings-editor .tk-settings-panel-heading { padding: 18px 16px; }
    body.v2-shell .tk-settings-editor .tk-settings-panel > .card-body { padding: 18px 16px !important; }
    .tk-settings-section-nav a { font-size: 11px; gap: 6px; }
    .tk-settings-section-nav a .bx { font-size: 16px; }
}

/* The remaining settings forms and management screens share the same panels. */
body.v2-shell .tk-settings-collection .tk-settings-panel { margin-bottom: 20px; overflow: visible; }
body.v2-shell .tk-settings-collection .tk-settings-panels > .tk-settings-panel { margin-bottom: 0; }
body.v2-shell .tk-settings-collection .tk-settings-panel > .card-header { padding: 22px 24px !important; border-bottom: 1px solid var(--tk-border); gap: 12px; }
body.v2-shell .tk-settings-collection .tk-settings-panel > .card-header :is(h5, h6) { margin: 0; color: var(--tk-text); font-size: 14px; font-weight: 600; line-height: 1.5; }
body.v2-shell .tk-settings-collection .tk-settings-panel > .card-header > .bx { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 !important; border: 1px solid var(--tk-border); border-radius: 9px; background: var(--tk-surface-subtle); font-size: 20px; }
.tk-settings-panel-title { flex: 1; min-width: 0; }
.tk-settings-panel-heading > .btn { flex-shrink: 0; margin-inline-start: auto; }
.tk-settings-section-icon > .bx { margin: 0 !important; color: inherit !important; font-size: 20px !important; }
body.v2-shell .tk-settings-collection .tk-entry-actions { position: static; inset: auto; z-index: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 0 !important; border-top: 0 !important; background: transparent; box-shadow: none; }
body.v2-shell .tk-settings-collection .tk-settings-panel .list-group-horizontal-md { display: flex; flex-wrap: wrap; gap: 8px !important; }
body.v2-shell .tk-settings-collection .tk-settings-panel .list-group-horizontal-md > .list-group-item { flex: 0 1 auto; width: auto; border: 1px solid var(--tk-border) !important; border-radius: 7px !important; padding: 8px 14px !important; background: var(--tk-surface); color: var(--tk-text-secondary); font-size: 12px; }
body.v2-shell .tk-settings-collection .tk-settings-panel .list-group-horizontal-md > .list-group-item.active { border-color: var(--tk-brand) !important; background: color-mix(in srgb, var(--tk-brand) 8%, var(--tk-surface)); color: var(--tk-text); }
.tk-settings-collection .table-responsive { border-radius: 8px; }
.tk-settings-collection .table th { background: var(--tk-surface-subtle); }
.tk-settings-collection .table td { vertical-align: middle; }
.tk-settings-collection .table td :is(.btn, a) { white-space: nowrap; }
.tk-settings-collection .alert { border-radius: 8px; font-size: 12px; line-height: 1.7; }
.tk-settings-collection .nav-tabs { flex-wrap: wrap; gap: 4px; }
.tk-settings-collection .nav-tabs .nav-link { border-radius: 7px; font-size: 12px; white-space: normal; }
.tk-settings-collection .tk-settings-panel input[type="file"] { max-width: 100%; }
@media (max-width: 575px) {
    body.v2-shell .tk-settings-collection .tk-settings-panel > .card-header { padding: 18px 16px !important; flex-wrap: wrap; }
    .tk-settings-collection .tk-settings-panel-heading > .tk-settings-panel-title { flex: 1 1 calc(100% - 48px); }
    .tk-settings-panel-heading > .btn { margin-inline-start: 48px; max-width: calc(100% - 48px); min-height: 32px; height: auto !important; white-space: normal !important; line-height: 1.4; text-align: start; }
    .tk-settings-collection .tk-page-actions, .tk-settings-collection .tk-page-actions > div { flex-wrap: wrap; }
    body.v2-shell .tk-settings-collection .tk-entry-actions { row-gap: 12px; }
    .tk-settings-collection .settings-unsaved-notice { flex-basis: 100%; text-align: end; }
}