@import 'css/variables.css';
@import 'css/reset.css';

/* Heading scope override: topbar h1 uses the display font. */
.tk-topbar h1 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Smooth theme switch: bg + text fade together so the dark/light toggle
   does not flash. Disabled under prefers-reduced-motion. */
html, body {
    transition: background-color 220ms ease, color 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
    html, body { transition: none; }
}

/* Buttons (override Bootstrap defaults to match design system) */
.btn {
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    border: 1px solid transparent;
}

.btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-md);
    border-radius: var(--radius-lg);
}

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

.btn-primary:hover,
.btn-primary:focus {
    color: var(--color-primary-fg);
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-primary:disabled,
.btn-primary[disabled] {
    background-color: color-mix(in srgb, var(--color-primary) 60%, #fff 40%);
    border-color: transparent;
    opacity: 0.85;
    cursor: not-allowed;
}

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-ghost:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.btn-ghost:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text) 18%, transparent);
}

/* ============================================================
   Shared backoffice layout — tk- design system
   Used by Dashboard, Tickets, and future authenticated pages
   ============================================================ */

.tk-shell {
    display: grid;
    grid-template-columns: var(--layout-sidebar-w) 1fr;
    grid-template-rows: var(--layout-appbar-h) 1fr;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    transition: grid-template-columns var(--transition-base);
}

.tk-shell.is-collapsed {
    grid-template-columns: var(--layout-sidebar-w-collapsed) 1fr;
}

/* Top app bar: right column only.  */
.tk-shell > .tk-appbar {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Sidebar — full height, left column */
.tk-sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    padding: 14px 14px 18px;
    gap: 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-fg);
    overflow: hidden;
}

/* Sidebar logo — light plate on dark sidebar, hidden when collapsed */
.tk-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--layout-appbar-h);
    margin: -14px -14px 4px;
    padding: 4px 12px;
    text-decoration: none;
    background: var(--color-surface);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.tk-sidebar-logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 32px;
}

/* Logo is a PNG with dark text on transparent — readable on light surfaces
   but invisible in dark theme. A pre-generated dark variant
   (tdl_middleware_manager_logo_dark.png) keeps the brand blue icon and the
   teal "MANAGER" word, only the "Tdl Middleware" text is inverted to white.
   We swap it in via `content: url()` so the markup stays unchanged. */
[data-theme="dark"] .tk-sidebar-logo-img,
[data-theme="dark"] .auth-logo {
    content: url("images/tdl_middleware_manager_logo_dark.png");
}

.tk-shell.is-collapsed .tk-sidebar-logo {
    display: none;
}

.tk-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.tk-sidebar-env {
    display: flex;
    justify-content: center;
    padding: 4px 2px 0;
}

.tk-sidebar-version {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px 2px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}

.tk-sidebar-version-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.tk-sidebar-version-value {
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.65);
}

.tk-shell.is-collapsed .tk-sidebar-version-label {
    display: none;
}

.tk-shell.is-collapsed .tk-sidebar-version {
    padding: 8px 0 2px;
}

.tk-shell.is-collapsed .tk-sidebar-env {
    display: none;
}

.tk-nav-link--primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(24, 138, 226, 0.7);
}

.tk-nav-link--primary svg {
    color: #fff;
    opacity: 1;
}

.tk-nav-link--primary:hover,
.tk-nav-link--primary:focus-visible,
.tk-nav-link--primary.is-active,
.tk-nav-link--primary.active {
    background: var(--color-primary-hover);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(24, 138, 226, 0.85);
}

.tk-nav-link--primary.is-active,
.tk-nav-link--primary.active {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25),
                0 8px 18px -8px rgba(24, 138, 226, 0.85);
}

.tk-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--color-sidebar-fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tk-nav-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.9;
}

.tk-nav-link:hover,
.tk-nav-link:focus-visible {
    /* Always-light fg (--color-surface flips to dark in dark theme — would
       become invisible on the dark sidebar bg). */
    background: var(--color-sidebar-hover);
    color: #fff;
}

.tk-nav-link.is-active,
.tk-nav-link.active {
    background: var(--color-sidebar-active);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tk-nav-link.is-active svg,
.tk-nav-link.active svg {
    color: #fff;
    opacity: 1;
}

.tk-nav-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-primary-bg-soft);
    color: var(--color-primary);
}

.tk-nav-sep {
    height: 1px;
    margin: 8px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
}

.tk-nav-group {
    margin: 16px 12px 4px;
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tk-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: var(--shadow-xs);
}

.tk-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.tk-user-meta strong {
    font-size: 13px;
    font-weight: 600;
}

.tk-user-meta span {
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.tk-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    background: var(--color-border);
    color: var(--color-text-strong);
    flex-shrink: 0;
}

.tk-avatar--me {
    width: 34px;
    height: 34px;
    font-size: 12px;
    background: linear-gradient(135deg, #ffd59e, #ffa95c);
    color: #6b3a00;
}

.tk-avatar--empty {
    background: var(--color-border-subtle);
    color: var(--color-text-subtle);
    border: 1px dashed #cbd2e0;
}

/* Main content area — right column, under topbar */
.tk-main {
    grid-column: 2;
    grid-row: 2;
    background: transparent;
    margin: 0;
    padding: 24px 28px 32px;
    overflow: hidden;
    min-width: 0;
    transition: margin-right var(--transition-base);
}

.tk-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.tk-topbar h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

.tk-sub {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13.5px;
}

.tk-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Pills / buttons */
.tk-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tk-pill svg {
    width: 15px;
    height: 15px;
}

.tk-pill:hover {
    background: var(--color-primary-bg-soft);
    border-color: var(--color-primary-border-soft);
}

.tk-pill--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(24, 138, 226, 0.25);
}

.tk-pill--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.tk-pill--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.22);
}

.tk-pill--danger:hover {
    background: var(--color-danger-fg);
    border-color: var(--color-danger-fg);
}

/* Toolbar */
.tk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.tk-tabs {
    display: inline-flex;
    gap: 6px;
    background: var(--color-border-subtle);
    padding: 4px;
    border-radius: 10px;
}

.tk-tab {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7489;
    cursor: pointer;
}

.tk-tab.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.tk-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tk-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-border-subtle);
    border-radius: 10px;
    padding: 8px 12px;
    width: 280px;
}

.tk-search svg {
    width: 15px;
    height: 15px;
    color: var(--color-text-subtle);
}

.tk-search input,
.tk-search select {
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13.5px;
    color: var(--color-text);
    width: 100%;
}

.tk-search input::placeholder {
    color: var(--color-text-subtle);
}

/* Focus visibility: outline:none above is replaced by a ring on the wrapper. */
.tk-search:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.tk-field-group > .tk-search {
    width: 100%;
    box-sizing: border-box;
}

/* Table grid */
.tk-table-wrap {
    margin-top: 10px;
    overflow-x: auto;
}

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

.tk-thead,
.tk-row {
    display: grid;
    grid-template-columns: 100px 1.5fr 1fr 0.8fr;
    align-items: center;
    gap: 12px;
    padding: 14px 6px;
}

.tk-thead {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    padding-top: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.tk-row {
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 13.5px;
    transition: background var(--transition-fast);
}

.tk-row:hover {
    background: var(--color-surface-sunken);
}

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

.tk-row--active {
    background: var(--color-primary-bg-soft);
    border-left: 3px solid var(--color-primary);
}

/* Inline sessions panel under an event row */
.tk-sessions-inline {
    grid-column: 1 / -1;
    padding: 0 8px 16px 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border-subtle);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface-sunken);
    border-radius: 0 0 0 12px;
}

.tk-sessions-inline .db-table {
    font-size: 13px;
}

.tk-sessions-inline .db-table thead th {
    background: transparent;
    padding: 10px 12px;
    font-size: 12.5px;
}

.tk-sessions-inline .db-table tbody td {
    padding: 10px 12px;
}

/* Session card list (replaces the grid under expanded events) */
.tk-session-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding: 12px 0;
}

.tk-session-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.tk-session-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.tk-session-card.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-bg-soft);
}

.tk-session-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.tk-session-card-title {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.tk-session-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.tk-session-card-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.tk-session-card-row svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tk-session-card-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-strong);
    line-height: 1.2;
}

.tk-session-card-date-sep {
    opacity: 0.55;
    font-weight: 500;
}

/* Inline prices panel under a session row */
.tk-prices-inline {
    padding: 12px 16px 16px;
    margin: 4px 0;
    background: var(--color-primary-bg-soft);
    border-left: 3px solid var(--color-primary-border-soft);
    border-radius: 0 0 0 10px;
}

.tk-prices-inline .db-table {
    font-size: 12.5px;
}

.tk-prices-inline .db-table thead th {
    background: transparent;
    padding: 8px 10px;
    font-size: 12px;
    border-bottom-color: var(--color-primary-border-soft);
}

.tk-prices-inline .db-table tbody td {
    padding: 8px 10px;
    border-bottom-color: var(--color-primary-bg-hover);
}

/* Session detail inline panel */
.tk-detail-inline {
    padding: 16px 20px;
    margin: 4px 0;
    background: var(--color-surface-sunken);
    border-left: 3px solid var(--color-primary-border-soft);
    border-radius: 0 0 0 10px;
}

.tk-section {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
}

/* Generic panel — used to frame filter and response zones */
.tk-panel {
    margin-top: 14px;
    padding: 14px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
}

.tk-panel--flush {
    margin-top: 0;
}

.tk-panel > .tk-toolbar {
    border-bottom: 0;
    padding-bottom: 0;
}

.tk-panel > .tk-toolbar:not(:only-child) {
    margin-bottom: 10px;
}

.tk-panel .db-table-wrap {
    border: 0;
    border-radius: 0;
}

.tk-panel > .tk-pagination {
    border-top-color: var(--color-border-subtle);
}

.tk-section-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tk-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 24px;
}

.tk-detail-grid + .tk-detail-grid {
    margin-top: 6px;
}

.tk-detail-section + .tk-detail-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-subtle);
}

.tk-detail-item {
    gap: 1px;
}

.tk-detail-section-title {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-strong);
}

.tk-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tk-detail-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tk-detail-value {
    font-size: 13.5px;
    color: var(--color-text);
    font-weight: 500;
}

.tk-id {
    font-weight: 600;
    color: var(--color-text);
}

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

.tk-muted {
    color: var(--color-text-muted);
}

/* Badges */
.tk-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-right: 4px;
}

.tk-badge--green  { background: var(--color-success-bg-soft); color: var(--color-success-fg); }
.tk-badge--yellow { background: var(--color-warning-bg-soft); color: var(--color-warning-fg); }
.tk-badge--orange { background: var(--color-warning-alt-bg-soft); color: var(--color-warning-alt-fg); }
.tk-badge--blue   { background: var(--color-info-bg-soft); color: var(--color-info-fg); }
.tk-badge--indigo { background: var(--color-secondary-bg-soft); color: var(--color-secondary-fg); }
.tk-badge--red    { background: var(--color-danger-bg-soft); color: var(--color-danger-fg); }
.tk-badge--gray   { background: var(--color-surface-alt); color: var(--color-text-strong); }
.tk-badge--slate  { background: var(--color-surface-alt); color: var(--color-text-muted); border: 1px dashed var(--color-text-disabled); }

/* Order status badges — aligned with filter toggle colors */
.tk-status-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    overflow: hidden;
    line-height: 1.3;
}

.tk-status-badge--confirmed {
    background: var(--color-success);
    box-shadow: 0 1px 2px rgba(16, 196, 105, 0.25);
}

.tk-status-badge--canceled {
    background: var(--color-danger);
    box-shadow: 0 1px 2px rgba(255, 91, 91, 0.25);
}

.tk-status-badge--cart {
    background: var(--color-warning);
    box-shadow: 0 1px 2px rgba(249, 200, 81, 0.25);
}

.tk-status-badge--neutral {
    background: var(--color-border);
    color: var(--color-text-strong);
}

.tk-status-badge--has-canceled {
    padding-right: 18px;
}

.tk-status-badge--has-canceled::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    background: var(--color-danger);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3);
}

/* Stacked table cell (label/value lines, one above the other) */
.tk-stack-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.35;
}

.tk-stack-primary {
    font-size: 13px;
    color: var(--color-text);
    font-weight: 500;
}

.tk-stack-secondary {
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.tk-stack-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.tk-stack-label:first-child {
    margin-top: 0;
}

.tk-stack-barcode {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

/* Print-to-PDF rules used by reporting export */
@media print {
    body { background: #fff !important; }
    .tk-appbar, .tk-sidebar, .tk-topbar, .tk-filters-panel, .tk-filters-actions,
    .pf-tabs, .db-loading, .tk-modal-backdrop, .tk-modal-close, .tk-modal-footer {
        display: none !important;
    }
    .tk-shell, .tk-main {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
    }
    .db-table { font-size: 11px; }
    .db-table thead { display: table-header-group; }
    .db-table tr { break-inside: avoid; }
    body.print-grid-only .reporting-chart-panel { display: none !important; }
    body.print-chart-only .reporting-grid-panel { display: none !important; }
    body.print-chart-only .reporting-chart-panel { height: auto !important; }
    body.print-chart-only canvas {
        width: 100% !important;
        height: auto !important;
        max-height: 80vh;
    }
}

/* Top app bar (right column, above main content) */
.tk-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 20px 4px 8px;
    margin: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
    min-height: var(--layout-appbar-h);
}

/* Hamburger toggle button */
.tk-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.tk-topbar-toggle svg {
    width: 20px;
    height: 20px;
}

.tk-topbar-toggle:hover {
    background: var(--color-border-subtle);
    color: var(--color-text);
}

/* User menu dropdown */
.tk-usermenu {
    position: relative;
}

.tk-usermenu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    color: var(--color-text);
}

.tk-usermenu-btn:hover,
.tk-usermenu-btn[aria-expanded="true"] {
    background: var(--color-surface-sunken);
    border-color: var(--color-border);
}

.tk-usermenu-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.tk-usermenu-meta strong {
    font-size: 13px;
    font-weight: 600;
}

.tk-usermenu-meta span {
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.tk-usermenu-chevron {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.tk-usermenu-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 40;
}

.tk-usermenu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
}

.tk-usermenu-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tk-usermenu-item svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.tk-usermenu-item:hover {
    background: var(--color-surface-sunken);
}

.tk-usermenu-item--danger {
    color: var(--color-danger-fg);
}

.tk-usermenu-item--danger svg {
    color: var(--color-danger-fg);
}

.tk-usermenu-item--danger:hover {
    background: var(--color-danger-bg-soft);
}

.tk-usermenu-sep {
    height: 1px;
    background: var(--color-border-subtle);
    margin: 4px 2px;
}

/* Logout button */
.tk-logout-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.tk-logout-btn svg {
    width: 16px;
    height: 16px;
}

.tk-logout-btn:hover {
    background: var(--color-danger-bg-soft);
    color: var(--color-danger-fg);
}

/* ============================================================
   Shared data display — db- styles
   Used by Dashboard, Tickets detail tables, etc.
   ============================================================ */

.db-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.db-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    animation: db-spin 700ms linear infinite;
}

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

.db-error {
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--color-danger-bg-subtle);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-fg);
    font-size: 14px;
    margin-bottom: 16px;
}

.db-success {
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--color-success-bg-subtle);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-fg);
    font-size: 14px;
    margin-bottom: 16px;
}

.db-section {
    margin-bottom: 28px;
}

.db-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 14px;
}

.db-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 20px;
    color: var(--color-text-muted);
    text-align: center;
}

.db-skeleton-table {
    pointer-events: none;
}

.db-skeleton-bar {
    display: inline-block;
    height: 12px;
    width: 60%;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--color-border-subtle) 0%,
        rgba(0, 0, 0, 0.06) 40%,
        var(--color-border-subtle) 80%
    );
    background-size: 200% 100%;
    animation: db-skeleton-shimmer 1.4s ease-in-out infinite;
}

.db-skeleton-bar--header {
    height: 10px;
    opacity: 0.7;
}

@keyframes db-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .db-skeleton-bar {
        animation: none;
        background: var(--color-border-subtle);
    }
}

.db-empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.db-empty-icon > svg {
    width: 100%;
    height: 100%;
}

.db-empty-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.db-empty-message {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
    max-width: 360px;
}

.db-empty-action {
    margin-top: 8px;
}

.db-sort-header {
    cursor: pointer;
    user-select: none;
}

.db-sort-header:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.db-sort-indicator {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.7;
}

.db-table-wrap {
    overflow: auto;
    max-height: calc(100vh - 240px);
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.db-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-border-subtle);
}

.db-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.db-table tbody tr:last-child td {
    border-bottom: 0;
}

.db-table tbody tr:hover {
    background: var(--color-surface-sunken);
}

.db-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 12px 16px;
    background: var(--color-surface-sunken);
    border-top: 1px solid var(--color-border-subtle);
    font-weight: 700;
}

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

.db-code {
    font-size: 12px;
    font-family: var(--font-mono);
    padding: 2px 8px;
    background: var(--color-border-subtle);
    border-radius: 6px;
    color: var(--color-text-strong);
}

/* Collapsed sidebar state (manual toggle) */
.tk-shell.is-collapsed .tk-nav-link span,
.tk-shell.is-collapsed .tk-nav-badge,
.tk-shell.is-collapsed .tk-nav-group,
.tk-shell.is-collapsed .tk-user-meta {
    display: none;
}

.tk-shell.is-collapsed .tk-nav-link {
    justify-content: center;
    padding: 10px;
}

.tk-shell.is-collapsed .tk-user {
    justify-content: center;
}

/* Responsive — auto-collapse on narrow screens */
@media (max-width: 1100px) {
    .tk-shell {
        grid-template-columns: var(--layout-sidebar-w-collapsed) 1fr;
    }

    .tk-nav-link span,
    .tk-nav-badge,
    .tk-nav-group,
    .tk-user-meta,
    .tk-sidebar-logo {
        display: none;
    }

    .tk-nav-link {
        justify-content: center;
        padding: 10px;
    }

    .tk-user {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .tk-shell {
        grid-template-columns: 60px 1fr;
    }

    .tk-sidebar {
        padding: 12px 6px;
    }
}

/* Pagination */
.tk-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-subtle);
}

.tk-pagination-info {
    font-size: 13.5px;
    color: var(--color-text-muted);
    font-weight: 500;
    min-width: 100px;
    text-align: center;
}

.tk-pill:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* System form card */
.sys-form-card {
    padding: 20px 24px;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
    border-radius: 14px;
    margin-bottom: 20px;
}

/* Password policy checklist */
.pwd-rules {
    list-style: none;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    background: var(--color-border-subtle);
    font-size: 12.5px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
}

.pwd-rules li {
    position: relative;
    padding-left: 18px;
    color: var(--color-text-muted);
}

.pwd-rules li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.pwd-rules li.ko {
    color: var(--color-text-muted);
}

.pwd-rules li.ko::before {
    content: "\2022";
    color: var(--color-text-subtle);
}

.pwd-rules li.ok {
    color: var(--color-success-fg, #15803d);
}

.pwd-rules li.ok::before {
    content: "\2713";
    color: var(--color-success-fg, #15803d);
}

/* Modal / popup */
.tk-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: tk-modal-fade 140ms ease-out;
}

.tk-modal {
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: tk-modal-pop 160ms ease-out;
}

.tk-modal--lg {
    max-width: 720px;
}

/* Shared tabs — content-width with underline row, blue top-border on active */
.pf-tabs {
    display: flex;
    gap: 2px;
    margin: 20px 0 0;
    border-bottom: 1px solid var(--color-primary-border-soft);
}

.pf-tab {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-top: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pf-tab:hover:not(.is-active) {
    color: var(--color-text);
    background: var(--color-border-subtle);
}

.pf-tab.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 700;
    border-color: var(--color-primary-border-soft);
    border-top-color: var(--color-primary);
}

.pf-tab-panel {
    margin-top: 0;
    padding: 16px;
    border: 1px solid var(--color-primary-border-soft);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: var(--color-surface);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.tk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.tk-modal-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
}

.tk-modal-close {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tk-modal-close:hover {
    background: var(--color-border-subtle);
    color: var(--color-text);
}

.tk-modal-close svg {
    width: 18px;
    height: 18px;
}

.tk-modal-nav {
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
    color: var(--color-text-muted);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.tk-modal-nav:hover:not(:disabled) {
    background: var(--color-border-subtle);
    color: var(--color-text);
    border-color: var(--color-border);
}

.tk-modal-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tk-modal-nav svg {
    width: 16px;
    height: 16px;
}

.tk-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
}

.tk-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
}

@keyframes tk-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tk-modal-pop {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.sys-form {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.sys-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 160px;
}

.sys-form-field label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sys-form-field input {
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sys-form-field input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(24, 138, 226, 0.15);
}

.sys-form-field input:disabled,
.sys-form-field select:disabled {
    background: var(--color-border-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.sys-form-field select {
    height: 40px;
    padding: 0 36px 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    font-size: 14px;
    color: var(--color-text);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sys-form-field select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(24, 138, 226, 0.15);
}

/* Required-field indicator: red asterisk after the label when the field's
   input/select has the `required` attribute. Uses :has() (supported in all
   evergreen browsers since 2023). */
.sys-form-field:has(> input[required], > select[required], > textarea[required]) > label::after {
    content: " *";
    color: var(--color-danger-fg);
    font-weight: 700;
    margin-left: 2px;
}

/* Language switcher (top-right in app + public layouts) */
.tk-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 12.5px;
    color: var(--color-text);
}

.tk-lang-switcher svg {
    width: 14px;
    height: 14px;
    color: var(--color-text-subtle);
}

.tk-lang-switcher select {
    border: 0;
    background: transparent;
    outline: none;
    font-size: 12.5px;
    color: var(--color-text);
    cursor: pointer;
}

.tk-lang-switcher:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 8px;
}

.tk-appbar-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.tk-env-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    user-select: none;
}

.tk-env-badge-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

.tk-env-badge-label {
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-weight: 500;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tk-env-badge-value {
    font-weight: 700;
}

.tk-env-badge--staging {
    color: #92400e;
    background: #fef3c7;
    border-color: #f59e0b;
}

.tk-env-badge--prod {
    color: #7f1d1d;
    background: #fee2e2;
    border-color: #dc2626;
}

@media (max-width: 720px) {
    .tk-env-badge-label { display: none; }
}

.auth-lang-topbar {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

/* Utility: strip the native up/down arrows on number inputs */
input[type="number"].tk-no-spin::-webkit-outer-spin-button,
input[type="number"].tk-no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].tk-no-spin {
    -moz-appearance: textfield;
    appearance: textfield;
}

.sys-form-actions {
    display: flex;
    gap: 8px;
    padding-bottom: 2px;
}

/* Profile promoter picker */
.pf-picker {
    margin-top: 10px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
}

.pf-picker .tk-search {
    border-radius: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 0;
}

.pf-picker-list {
    max-height: 280px;
    overflow-y: auto;
}

.pf-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13.5px;
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background var(--transition-fast);
}

.pf-picker-item:last-child {
    border-bottom: 0;
}

.pf-picker-item:hover {
    background: var(--color-surface-sunken);
}

.pf-picker-item--selected {
    background: var(--color-primary-bg-soft);
}

.pf-picker-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--color-text-disabled);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

.pf-picker-item--selected .pf-picker-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.pf-picker-name {
    color: var(--color-text);
    font-weight: 500;
}

/* Dual-list transfer picker (shared between profile and user edit) */
.pf-transfer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pf-transfer-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface-sunken);
}

.pf-transfer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-primary-bg-soft);
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

.pf-transfer-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--color-info-bg-soft);
    color: var(--color-info-fg);
    font-size: 12px;
    font-weight: 700;
}

.pf-transfer-count--allowed {
    background: var(--color-success-bg-soft);
    color: var(--color-success-fg);
}

.pf-transfer-search {
    margin: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.pf-transfer-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 6px 8px;
}

.pf-transfer-list--allowed {
    /* placeholder hook for future styling */
}

.pf-transfer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    border-bottom: 1px solid var(--color-border-subtle);
}

.pf-transfer-item:last-child {
    border-bottom: 0;
}

.pf-transfer-item:hover {
    background: var(--color-primary-bg-soft);
}

.pf-transfer-item--allowed:hover {
    background: var(--color-danger-bg-soft);
    color: var(--color-danger-fg);
}

.pf-transfer-item .pf-picker-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-transfer-arrow {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-subtle);
    flex-shrink: 0;
}

.pf-transfer-item:hover .pf-transfer-arrow {
    color: var(--color-primary);
}

.pf-transfer-item--allowed:hover .pf-transfer-arrow {
    color: var(--color-danger-fg);
}

.pf-transfer-empty {
    padding: 16px 12px;
    color: var(--color-text-subtle);
    font-size: 13px;
    text-align: center;
}

@media (max-width: 560px) {
    .pf-transfer {
        grid-template-columns: 1fr;
    }
}

/* Codification PDF viewer */
.codif-pdf-section {
    margin-top: 24px;
}

.codif-pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.codif-pdf-frame {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-border-subtle);
}

.codif-pdf-frame iframe {
    width: 100%;
    height: 75vh;
    border: 0;
    display: block;
}

@media (max-width: 780px) {
    .tk-main {
        margin: 0;
        padding: 20px;
    }

    .tk-appbar {
        padding: 8px 20px;
        margin: -20px -20px 18px;
    }

    .tk-usermenu-meta {
        display: none;
    }

    .tk-topbar {
        flex-direction: column;
    }

    .tk-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tk-search {
        width: 100%;
    }
}

/* Catalog modals — fixed size, body fills, PDF iframe full, tight action buttons */
.cat-modal {
    width: min(980px, 95vw);
    height: min(680px, 90vh);
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
}

.cat-modal.order-detail-modal {
    width: min(1240px, 96vw);
    height: min(820px, 92vh);
}

.cat-modal form {
    display: flex;
    flex-direction: column;
}

.cat-modal .tk-modal-header,
.cat-modal .tk-modal-footer {
    flex-shrink: 0;
}

.cat-modal .tk-modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.cat-modal .pf-tabs {
    margin: 0;
    padding: 0 16px;
}

.cat-modal .pf-tab-panel {
    overflow: auto;
    border: 0;
    border-radius: 0;
    padding: 12px 16px 16px;
}

/* Icon-only action button (table rows, modal headers) — no pill background.
   Sizing: 44×44 to meet WCAG/HIG strict touch target minimum (Apple HIG). */
.tk-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.tk-icon-action svg {
    width: 22px;
    height: 22px;
}

.tk-icon-action:hover {
    background: var(--color-primary-bg-soft);
    color: var(--color-primary);
}

.tk-icon-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.tk-icon-action--danger:hover {
    background: var(--color-danger-bg-soft);
    color: var(--color-danger-fg);
}

/* Sessions expand/collapse toggle: icon + label + rotating chevron */
.tk-sessions-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.tk-sessions-toggle:hover {
    background: var(--color-primary-bg-soft);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.tk-sessions-toggle.is-open {
    background: var(--color-primary-bg-soft);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.tk-sessions-toggle-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.tk-sessions-toggle-label {
    white-space: nowrap;
}

.tk-sessions-toggle-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.tk-sessions-toggle.is-open .tk-sessions-toggle-chevron {
    transform: rotate(90deg);
}

.cat-pdf-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--color-border-subtle);
}

/* Timeslots master-detail layout in the TDL session detail modal */
.tk-timeslots-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    min-height: 0;
}

.tk-timeslots-list {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
    border-right: 1px solid var(--color-border-subtle);
}

.tk-timeslot-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: 8px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text);
    transition: background 0.15s, border-color 0.15s;
}

.tk-timeslot-item:hover {
    background: var(--color-surface-sunken);
}

.tk-timeslot-item.is-active {
    background: var(--color-primary-bg-soft);
    border-color: var(--color-primary-border-soft);
    box-shadow: inset 2px 0 0 var(--color-secondary);
}

.tk-timeslot-item-name {
    font-size: 13px;
    font-weight: 600;
}

.tk-timeslot-item-dates {
    font-size: 11.5px;
    color: var(--color-text-muted);
}

.tk-timeslot-detail {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

/* Orders detail modal — per-item card wrapping ticket table */
.tk-order-item {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--color-surface);
}

.tk-order-item:last-child {
    margin-bottom: 0;
}

.tk-order-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.tk-order-item-title {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.tk-order-item-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

/* Orders cascading filters (event → sessions multi-select) */
.tk-filter-cascades {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tk-cascade {
    flex: 1 1 360px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 12px 12px;
    margin: 0;
    background: var(--color-surface);
}

.tk-cascade-legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-strong);
    padding: 0 6px;
}

.tk-cascade-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.tk-cascade-multi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.tk-cascade-multi-label {
    font-size: 12px;
    color: var(--color-text-muted);
}

.tk-cascade-multi select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 13px;
    background: var(--color-surface);
    color: var(--color-text);
}

.tk-cascade-multi select:focus {
    outline: none;
    border-color: var(--color-primary-border-soft);
    box-shadow: 0 0 0 3px rgba(91, 105, 188, 0.15);
}

/* Labeled inline field group (e.g. date range) */
.tk-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tk-field-group-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-strong);
    padding-left: 2px;
}

/* Required field with no value (e.g. the locked external-seller filter). */
.tk-field-group.is-invalid > .tk-search {
    box-shadow: 0 0 0 1.5px var(--color-danger-border);
}

.tk-field-group.is-invalid .tk-field-group-label {
    color: var(--color-danger-fg);
}

.tk-field-group-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tk-field-group-hint {
    font-size: 11.5px;
    color: var(--color-text-subtle);
    padding-left: 2px;
}

/* Middleware-session picker trigger (orders page) */
.tk-mw-picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tk-mw-picker-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 240px;
}

.tk-mw-picker-summary-label {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* Status toggle buttons */
.tk-toggle-group {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tk-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.tk-toggle svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.tk-toggle:hover {
    background: var(--color-primary-bg-soft);
    border-color: var(--color-primary-border-soft);
    color: var(--color-text);
}

.tk-toggle.is-active {
    color: #fff;
    border-color: transparent;
}

.tk-toggle.is-active svg {
    opacity: 1;
}

.tk-toggle--confirmed.is-active {
    background: var(--color-success);
    box-shadow: 0 4px 12px rgba(16, 196, 105, 0.25);
}

.tk-toggle--canceled.is-active {
    background: var(--color-danger);
    box-shadow: 0 4px 12px rgba(255, 91, 91, 0.25);
}

.tk-toggle--cart.is-active {
    background: var(--color-warning);
    box-shadow: 0 4px 12px rgba(249, 200, 81, 0.25);
}

/* Compact toggle group (e.g. statuses in the narrow Orders filter drawer). */
.tk-toggle-group--compact {
    gap: 5px;
}

.tk-toggle-group--compact .tk-toggle {
    padding: 4px 9px;
    font-size: 12px;
}

.tk-toggle-group--compact .tk-toggle svg {
    width: 12px;
    height: 12px;
}

/* Orders Filters panel */
.tk-filters-panel {
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    padding: 14px 18px 18px;
    margin: 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.tk-toolbar .tk-search {
    padding: 4px 10px;
    gap: 6px;
}

.tk-toolbar .tk-search input,
.tk-toolbar .tk-search select {
    font-size: 13px;
}

.tk-filters-panel .tk-toggle {
    padding: 4px 10px;
    font-size: 12.5px;
}

.tk-filters-panel .tk-toggle svg {
    width: 13px;
    height: 13px;
}

.tk-filters-legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    padding: 0 8px;
    letter-spacing: 0.01em;
}

.tk-filters-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
    .tk-filters-grid {
        grid-template-columns: 1fr;
    }
}

.tk-filters-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.tk-filters-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tk-filters-error {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--color-danger-bg-subtle);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger-fg);
    font-size: 13px;
}

.tk-filters-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    padding-bottom: 4px;
}

.tk-filters-actions .tk-pill {
    min-width: 180px;
    justify-content: center;
}

/* Filter-drawer layout: retractable drawer + results side by side. The container is
   the positioning context for the drawer's overlay mode under 1024px (see FilterDrawer). */
.tk-filter-layout {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tk-filter-content {
    flex: 1 1 0;
    min-width: 0;
}

/* Icon-only button (e.g. red trash for clear) */
.tk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-strong);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

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

.tk-icon-btn:hover {
    transform: translateY(-1px);
}

.tk-icon-btn--danger {
    color: var(--color-danger);
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg-subtle);
}

.tk-icon-btn--danger:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 91, 91, 0.25);
}

/* Modern click-to-toggle session picker */
.tk-session-picker {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tk-session-picker-header {
    display: flex;
    justify-content: flex-end;
    padding: 0 2px;
}

.tk-session-picker-count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tk-session-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-sidebar-fg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tk-session-item {
    display: grid;
    grid-template-columns: 22px auto auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    user-select: none;
}

.tk-session-item:hover {
    background: var(--color-primary-bg-soft);
}

.tk-session-item.is-selected {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.tk-session-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--color-text-disabled);
    background: var(--color-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tk-session-check svg {
    width: 13px;
    height: 13px;
}

.tk-session-item.is-selected .tk-session-check {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.tk-session-datetime {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.tk-session-id {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

.tk-session-title {
    color: var(--color-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* DatePicker */
.dp-root {
    position: relative;
    width: 100%;
}

.dp-root.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.dp-trigger {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.dp-trigger input {
    flex: 1;
    min-width: 0;
}

/* Compact (reduced-height) trigger for dense layouts (e.g. filter drawer). */
.dp-root--compact .dp-trigger {
    padding: 4px 10px;
}

.dp-clear-inline,
.dp-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.dp-clear-inline svg,
.dp-toggle svg {
    width: 16px;
    height: 16px;
}

.dp-clear-inline:hover {
    background: var(--color-surface-sunken);
    color: var(--color-danger);
}

.dp-toggle:hover {
    background: var(--color-primary-bg-soft);
    color: var(--color-primary);
}

.dp-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 40;
}

.dp-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1100;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dp-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dp-header-selects {
    flex: 1;
    display: flex;
    gap: 6px;
    min-width: 0;
}

.dp-select {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dp-select:focus {
    outline: none;
    border-color: var(--color-primary-border-soft);
    box-shadow: 0 0 0 3px rgba(91, 105, 188, 0.15);
}

.dp-select--year {
    flex: 0 0 auto;
    width: 80px;
}

.dp-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-strong);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.dp-nav svg {
    width: 14px;
    height: 14px;
}

.dp-nav:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 2px;
}

.dp-weekdays span {
    text-align: center;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 0;
}

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-day {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.dp-day:hover {
    background: var(--color-primary-bg-soft);
}

.dp-day.is-other {
    color: var(--color-text-disabled);
}

.dp-day.is-today {
    box-shadow: inset 0 0 0 1.5px var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.dp-day.is-selected {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(24, 138, 226, 0.25);
}

.dp-day.is-selected.is-today {
    box-shadow: 0 4px 12px rgba(24, 138, 226, 0.25);
}

.dp-footer {
    display: flex;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-surface-alt);
}

.dp-action {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.dp-action:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.dp-action--muted {
    color: var(--color-text-muted);
}

.dp-action--muted:hover {
    background: var(--color-danger-bg-subtle);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

/* ─── Mobile-collapse: shows a summary toggle button only under 768 px.
       Desktop always shows the full content (summary hidden, content forced
       visible even if the user previously collapsed on mobile then resized).
   Usage:
       <details class="tk-mobile-collapse" open>
           <summary class="tk-mobile-collapse-summary">
               <span>Filters</span>
               <svg class="tk-mobile-collapse-chevron" .../>
           </summary>
           ... actual content ...
       </details>
*/
.tk-mobile-collapse-summary {
    display: none;
}

@media (max-width: 768px) {
    .tk-mobile-collapse-summary {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        cursor: pointer;
        list-style: none;
        font-weight: 600;
        font-size: 14px;
        color: var(--color-text);
        user-select: none;
        background: var(--color-surface-sunken);
        border-radius: var(--radius-md);
        margin-bottom: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .tk-mobile-collapse-summary::-webkit-details-marker {
        display: none;
    }

    .tk-mobile-collapse-summary::marker {
        display: none;
    }

    .tk-mobile-collapse-chevron {
        margin-left: auto;
        width: 18px;
        height: 18px;
        transition: transform var(--transition-fast);
    }

    .tk-mobile-collapse[open] > .tk-mobile-collapse-summary .tk-mobile-collapse-chevron {
        transform: rotate(180deg);
    }
}

@media (min-width: 769px) {
    /* On desktop, ignore the details open/closed state and always show content. */
    .tk-mobile-collapse > *:not(summary) {
        display: revert !important;
    }
}