@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v20/UcCm3FwrK3iLTcvnUwkT9nA2.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
    --font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --text-xs-plus: 0.8125rem;
    --text-sm-plus: 0.9375rem;
    --text-tiny-plus: 0.6875rem;
    --shadow-soft: rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);
    /* Tailux dual-rail tokens (see local-only/demo/src/styles/layouts.css) */
    --main-panel-width: 4.5rem;
    --prime-panel-width: 230px;
    --header-height: 65px;
    --margin-x: 1rem;
    --tlx-border: #e5e7eb;
    --tlx-dt-cell-bg: #ffffff;
    --tlx-dt-head-bg: #f8fafc;
    --tlx-dt-cell-border: #f1f5f9;
    --tlx-dt-head-border: #e2e8f0;
    --tlx-dt-loading-overlay: rgba(255, 255, 255, 0.88);
    --tlx-dt-spinner-track: #e5e7eb;
    --color-dark-50: #f8fafc;
    --color-dark-100: #f1f5f9;
    --color-dark-200: #e2e8f0;
    --color-dark-300: #cbd5e1;
    --color-dark-400: #94a3b8;
    --color-dark-500: #64748b;
    --color-dark-600: #475569;
    --color-dark-700: #334155;
    --color-dark-800: #1e293b;
    --color-dark-900: #0f172a;
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-primary-950: #172554;
    --color-error-light: #ff6933;
    --color-error: #ff4f1a;
    --color-error-darker: #e52e00;
}

/* The Tailwind CDN doesn't know about our `primary` colour token, so utility
   classes like `bg-primary-600` / `text-primary-600` silently no-op. Define
   the handful of `primary-*` and `dark-*` utilities the admin templates
   actually use so they render the same colour the CSS vars provide. */
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.border-primary-500 { border-color: var(--color-primary-500); }
.border-primary-600 { border-color: var(--color-primary-600); }
.hover\:bg-primary-50:hover { background-color: var(--color-primary-50); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }
.hover\:text-primary-600:hover { color: var(--color-primary-600); }
.hover\:text-primary-700:hover { color: var(--color-primary-700); }
.dark\:text-primary-300:where(.dark, .dark *) { color: var(--color-primary-300); }
.dark\:text-primary-400:where(.dark, .dark *) { color: var(--color-primary-400); }
.dark\:bg-primary-500\/20:where(.dark, .dark *) { background-color: rgba(59, 130, 246, 0.2); }

@media (min-width: 768px) {
    :root {
        --margin-x: 1.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --main-panel-width: 5rem;
        --prime-panel-width: 240px;
    }
}

html,
body,
body[data-layout] {
    font-family: var(--font-sans);
    color: #1e293b;
    background: #f8fafc;
}

[data-layout="main-layout"] {
    min-height: 100vh;
    background: #f8fafc;
    font-family: var(--font-sans);
}

[data-layout="main-layout"] .main-panel {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--main-panel-width);
    z-index: 40;
    overflow: visible;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.2s ease-in, visibility 0.2s ease-in;
}

@media (min-width: 768px) {
    [data-layout="main-layout"] .main-panel {
        visibility: visible;
        transform: translateX(0);
        z-index: 60;
    }
}

[data-layout="main-layout"].is-sidebar-open .main-panel {
    visibility: visible;
    transform: translateX(0);
}

/* Left icon rail — white Tailux dual-rail (see local-only/demo/.../MainPanel) */
.tlx-main-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    padding: 0.875rem 0 0.625rem;
    box-sizing: border-box;
    background: #ffffff;
    border-right: 1px solid var(--tlx-border);
}

.tlx-main-rail__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.tlx-main-rail__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    padding: 1.25rem 0 0.5rem;
}

.tlx-main-rail__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    width: 100%;
    padding-top: 0.625rem;
}

.tlx-rail-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.tlx-rail-btn:hover,
.tlx-rail-btn:focus-visible {
    color: var(--color-primary-600);
    background: color-mix(in srgb, var(--color-primary-600) 20%, transparent);
    outline: none;
}

.tlx-rail-btn:active {
    background: color-mix(in srgb, var(--color-primary-600) 25%, transparent);
}

.tlx-rail-btn__icon {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

/* Boxicons — shared admin icon library */
i.bx {
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    font-style: normal;
}

i.bx.h-3 { font-size: 0.75rem; }
i.bx.h-3\.5 { font-size: 0.875rem; }
i.bx.h-4 { font-size: 1rem; }
i.bx.h-5 { font-size: 1.25rem; }
i.bx.h-7 { font-size: 1.75rem; }
i.bx.h-16 { font-size: 4rem; }
i.bx.h-20 { font-size: 5rem; }
i.bx.w-3 { font-size: 0.75rem; }
i.bx.size-3\.5 { font-size: 0.875rem; }

.tlx-rail-btn__icon.bx {
    font-size: 1.75rem;
    width: auto;
    height: auto;
}

.tlx-rail-btn--brand,
.tlx-rail-btn--brand:hover,
.tlx-rail-btn--brand:focus-visible,
.tlx-rail-btn--brand:active {
    color: var(--color-primary-600);
    background: transparent;
    width: 2.5rem;
    height: 2.5rem;
}

.tlx-rail-btn--brand .tlx-rail-btn__icon {
    width: 2.5rem;
    height: 2.5rem;
}

.tlx-rail-btn--brand .tlx-rail-btn__icon.bx {
    font-size: 2.5rem;
    width: auto;
    height: auto;
}

.tlx-rail-btn--active {
    color: var(--color-primary-600) !important;
    background: color-mix(in srgb, var(--color-primary-600) 10%, transparent) !important;
}

.tlx-rail-btn--avatar {
    overflow: hidden;
    border-radius: 9999px;
    width: 2.25rem;
    height: 2.25rem;
    background: #e5e7eb;
}

.tlx-rail-btn--avatar:hover,
.tlx-rail-btn--avatar:focus-visible {
    background: #e5e7eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

.tlx-rail-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.tlx-rail-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    background: linear-gradient(145deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
}

.tlx-rail-btn--logout {
    color: #94a3b8;
}

.tlx-rail-btn--logout:hover,
.tlx-rail-btn--logout:focus-visible {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

/* Icon rail: hover / focus tooltips */
.tlx-rail-tooltip-wrap {
    position: relative;
}

.tlx-rail-tooltip {
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.35rem 0.6rem;
    border-radius: 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: #f8fafc;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}

.tlx-rail-tooltip-wrap:hover .tlx-rail-tooltip,
.tlx-rail-tooltip-wrap:focus-within .tlx-rail-tooltip {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1023px) {
    .tlx-rail-tooltip {
        display: none;
    }
}

[data-layout="main-layout"] .prime-panel {
    position: fixed;
    inset: 0 auto 0 0;
    width: calc(var(--main-panel-width) + var(--prime-panel-width));
    box-sizing: border-box;
    padding-left: var(--main-panel-width);
    background: #ffffff;
    border-right: 1px solid var(--tlx-border);
    z-index: 30;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.25s ease-in 0.15s, visibility 0.25s ease-in 0.15s;
}

@media (min-width: 768px) {
    [data-layout="main-layout"] .prime-panel {
        transition-delay: 0s;
    }
}

[data-layout="main-layout"].is-sidebar-open .prime-panel {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.25s ease-out, visibility 0.25s ease-out;
}

.tlx-prime-panel__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    height: var(--header-height);
    padding: 0 0.25rem 0 1rem;
    flex-shrink: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    letter-spacing: 0.05em;
}

.tlx-prime-panel__brand-mark {
    display: none;
}

.tlx-prime-panel__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

@media (min-width: 1280px) {
    .tlx-prime-panel__back {
        display: none;
    }
}

.tlx-prime-panel__back:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.tlx-prime-panel__segment {
    padding: 0 1rem 1.5rem;
}

.tlx-prime-panel__heading {
    display: none;
}

.tlx-prime-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tlx-prime-panel__link {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-height: 34px;
    margin: 0;
    padding: 0.5rem 0;
    border: none;
    background: transparent;
    font: inherit;
    text-align: start;
    font-size: var(--text-xs-plus);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.025em;
    color: #4b5563;
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}

.tlx-prime-panel__link:hover,
.tlx-prime-panel__link:focus-visible {
    outline: none;
    color: #111827;
}

.tlx-prime-panel__link--active {
    color: var(--color-primary-600);
    font-weight: 500;
}

.tlx-prime-panel__link--has-children[aria-expanded="true"] {
    color: #1f2937;
    font-weight: 600;
}

.tlx-prime-panel__badge {
    flex-shrink: 0;
    min-width: 1.25rem;
    justify-content: center;
    padding: 0.15rem 0.45rem;
    font-size: 0.6875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    background: #e2e8f0;
    color: #475569;
}

.tlx-prime-panel__link--active .tlx-prime-panel__badge {
    background: color-mix(in srgb, var(--color-primary-600) 12%, white);
    color: var(--color-primary-700);
}

/* Collapsible sub-section (e.g. Site Settings → config groups) */
.tlx-prime-panel__item {
    list-style: none;
}

.tlx-prime-panel__divider {
    margin: 0.5rem 0;
    height: 1px;
    border: none;
    background: #e2e8f0;
}

.tlx-prime-panel__toggle-icon {
    color: #9ca3af;
    transition: transform 0.3s ease-in-out;
}

.tlx-prime-panel__link--has-children[aria-expanded="true"] .tlx-prime-panel__toggle-icon {
    transform: rotate(90deg);
}

/* Animated collapse: max-height keeps closed state at exactly 0 so the gap below
   matches sibling list items. The cap is large enough for any reasonable sublist. */
.tlx-prime-panel__sublist-wrap {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.tlx-prime-panel__sublist-wrap.is-open {
    max-height: 60rem;
}

.tlx-prime-panel__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tlx-prime-panel__sublink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 34px;
    padding: 0 0.5rem;
    font-size: var(--text-xs-plus);
    line-height: 1;
    letter-spacing: 0.025em;
    color: #4b5563;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease-in-out;
}

.tlx-prime-panel__sublink:hover,
.tlx-prime-panel__sublink:focus-visible {
    color: #111827;
    padding-left: 1rem;
    outline: none;
}

.tlx-prime-panel__sublink--active {
    color: var(--color-primary-600);
    font-weight: 500;
}

.tlx-prime-panel__sublink .tlx-prime-panel__badge {
    margin-left: auto;
}

.tlx-prime-panel__sublink--active .tlx-prime-panel__badge {
    background: color-mix(in srgb, var(--color-primary-600) 12%, white);
    color: var(--color-primary-700);
}

.tlx-prime-panel__sublink-bullet {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    border: 1px solid currentColor;
    opacity: 0.5;
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.tlx-prime-panel__sublink--active .tlx-prime-panel__sublink-bullet {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    opacity: 0.8;
}

[data-layout="main-layout"] .app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-left: 0;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
}

@media (min-width: 768px) {
    [data-layout="main-layout"] .app-header {
        margin-left: var(--main-panel-width);
    }
}

[data-layout="main-layout"] .app-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    padding: 0 var(--margin-x);
}

[data-layout="main-layout"] .app-header__title {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    letter-spacing: 0.025em;
}

.tlx-header-search {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: calc(2.25rem - 2px);
    width: 16rem;
    padding: 0 0.75rem;
    border-radius: 9999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #6b7280;
    font-size: var(--text-xs-plus);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.tlx-header-search:hover {
    border-color: #9ca3af;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.tlx-header-search__inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
}

.tlx-header-search__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #9ca3af;
}

.tlx-header-search__hint-icon {
    display: block;
    width: 1.375rem;
    height: 1.25rem;
}

html.dark .tlx-header-search__hint {
    color: #94a3b8;
}

@media (max-width: 767px) {
    .tlx-header-search {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        justify-content: center;
        gap: 0;
        border: none;
        box-shadow: none;
    }
    .tlx-header-search:hover {
        border: none;
        box-shadow: none;
    }
    .tlx-header-search__inner > span,
    .tlx-header-search__hint {
        display: none;
    }
}

.tlx-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: transparent;
    color: #6b7280;
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.tlx-header-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

.tlx-header-btn--avatar {
    position: relative;
    overflow: visible;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: #e5e7eb;
}

.tlx-header-btn--avatar > * {
    border-radius: 9999px;
    overflow: hidden;
}

.tlx-header-btn--avatar:hover {
    background: #e5e7eb;
}

.tlx-header-btn--avatar::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: #16a34a;
    border: 2px solid #fff;
}

.tlx-header-avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9999px;
}

.tlx-header-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
}

[data-layout="main-layout"] .app-header,
[data-layout="main-layout"] .main-content,
[data-layout="main-layout"] .right_col {
    transition: margin-left 0.25s ease;
}

[data-layout="main-layout"] .main-content {
    margin-left: 0;
    padding: 1.25rem var(--margin-x) calc(var(--margin-x) + 0.5rem);
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
}

@media (min-width: 768px) {
    [data-layout="main-layout"] .main-content {
        margin-left: var(--main-panel-width);
    }
}

/* List-page DataTables card grows to fill remaining viewport height. */
[data-layout="main-layout"] .main-content .transition-content.flex.grow .tlx-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.right_col {
    margin-left: 0;
    padding: 1.25rem var(--margin-x) calc(var(--margin-x) + 0.5rem);
    min-height: calc(100vh - var(--header-height));
}

@media (min-width: 768px) {
    [data-layout="main-layout"] .right_col {
        margin-left: var(--main-panel-width);
    }
}

@media (min-width: 1280px) {
    [data-layout="main-layout"].is-sidebar-open .app-header,
    [data-layout="main-layout"].is-sidebar-open .main-content,
    [data-layout="main-layout"].is-sidebar-open .right_col {
        margin-left: calc(var(--main-panel-width) + var(--prime-panel-width));
    }
}

/* Routes with no sub-menu (e.g. dashboard): show only the thin rail. Never reveal the
   (empty) prime panel and never shift content for it, even if JS marks the sidebar "open". */
[data-layout="main-layout"][data-no-submenu] .prime-panel {
    display: none;
}

@media (min-width: 768px) {
    /* Thin rail already provides navigation, so the expand burger is redundant here. */
    [data-layout="main-layout"][data-no-submenu] .tlx-sidebar-toggle {
        display: none;
    }
}

@media (min-width: 1280px) {
    [data-layout="main-layout"][data-no-submenu].is-sidebar-open .app-header,
    [data-layout="main-layout"][data-no-submenu].is-sidebar-open .main-content,
    [data-layout="main-layout"][data-no-submenu].is-sidebar-open .right_col {
        margin-left: var(--main-panel-width);
    }
}

/* Sidebar toggle — bars-3 (hamburger) in primary color */
.tlx-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-primary-600);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.tlx-sidebar-toggle:hover,
.tlx-sidebar-toggle:focus-visible {
    color: var(--color-primary-700);
    background: transparent;
    outline: none;
}

.tlx-card {
    background: #fff;
    border-radius: 0.5rem;
}

html[data-card-skin="bordered"] .tlx-card,
html:not([data-card-skin]) .tlx-card {
    border: 1px solid #e2e8f0;
    box-shadow: none;
}

html[data-card-skin="shadow"] .tlx-card {
    border: 1px solid transparent;
    box-shadow: var(--shadow-soft);
}

html.dark[data-card-skin="shadow"] .tlx-card {
    box-shadow: none;
}

html[data-card-skin="bordered"] [data-layout="main-layout"] .prime-panel,
html:not([data-card-skin]) [data-layout="main-layout"] .prime-panel {
    box-shadow: none;
}

html[data-card-skin="shadow"] [data-layout="main-layout"] .prime-panel {
    box-shadow: var(--shadow-soft);
}

html.dark[data-card-skin="shadow"] [data-layout="main-layout"] .prime-panel {
    box-shadow: none;
}

.tlx-card__title {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: var(--text-sm-plus);
    font-weight: 600;
    color: #0f172a;
}

.tlx-card__body {
    padding: 1.25rem;
}

.tlx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.65rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    padding: 0.625rem 0.9rem;
    transition: all 0.15s var(--ease-elastic);
}

.tlx-btn--primary {
    color: #fff;
    background: var(--color-primary-600);
}

.tlx-btn--primary:hover {
    background: var(--color-primary-700);
}

.tlx-btn--outlined {
    color: #334155;
    border-color: #cbd5e1;
    background: #fff;
}

.tlx-btn--outlined:hover {
    color: var(--color-primary-600);
    border-color: var(--color-primary-300);
    background: var(--color-primary-50);
}

.tlx-btn--flat,
.tlx-btn--ghost {
    color: #334155;
    background: transparent;
}

.tlx-btn--danger {
    color: #fff;
    background: #dc2626;
}

.tlx-btn--danger:hover {
    background: #b91c1c;
}

.tlx-btn--icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.tlx-input,
.tlx-select,
.tlx-textarea {
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    background: #fff;
    min-height: 2.5rem;
    width: 100%;
}

.tlx-input {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
}

.tlx-input input {
    border: 0;
    outline: 0;
    width: 100%;
    background: transparent;
}

.tlx-input__prefix {
    color: #64748b;
    display: inline-flex;
}

.tlx-select,
.tlx-textarea {
    padding: 0.625rem 0.75rem;
}

.tlx-checkbox,
.tlx-radio,
.tlx-switch {
    accent-color: var(--color-primary-600);
}

/* Yes/no toggle — matches ref theme form-switch default (w-10 h-5). */
.tlx-yes-no-toggle {
    --tlx-yes-no-thumb-border: 2px;
    display: inline-flex;
    align-items: center;
}

.tlx-yes-no-toggle__label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.tlx-yes-no-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tlx-yes-no-toggle__track {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 2.5rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #d1d5db;
    transition: background-color 0.2s ease-in-out;
}

.tlx-yes-no-toggle__thumb {
    position: absolute;
    top: var(--tlx-yes-no-thumb-border);
    left: var(--tlx-yes-no-thumb-border);
    width: calc(50% - (var(--tlx-yes-no-thumb-border) * 2));
    height: calc(100% - (var(--tlx-yes-no-thumb-border) * 2));
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.12), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
    transition: transform 0.2s ease-in-out;
}

.tlx-yes-no-toggle__input:checked + .tlx-yes-no-toggle__track {
    background: var(--color-primary-600);
}

.tlx-yes-no-toggle__input:checked + .tlx-yes-no-toggle__track .tlx-yes-no-toggle__thumb {
    transform: translateX(calc(100% + (var(--tlx-yes-no-thumb-border) * 2)));
}

.tlx-yes-no-toggle__input:focus-visible + .tlx-yes-no-toggle__track {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 50%, transparent);
}

html.dark .tlx-yes-no-toggle__track {
    background: #4b5563;
}

html.dark .tlx-yes-no-toggle__thumb {
    background: #f8fafc;
}

html.dark .tlx-yes-no-toggle__input:checked + .tlx-yes-no-toggle__track {
    background: var(--color-primary-400);
}

/* Advertising "Adverts Shown To" highlight callout. */
.tlx-adverts-shown-callout a {
    color: var(--color-primary-600);
    font-weight: 500;
    text-decoration: underline;
}

html.dark .tlx-adverts-shown-callout {
    border-left-color: var(--color-primary-400);
    background: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
}

html.dark .tlx-adverts-shown-callout p:first-child {
    color: var(--color-dark-50);
}

html.dark .tlx-adverts-shown-callout p + p {
    color: var(--color-dark-200);
}

html.dark .tlx-adverts-shown-callout a {
    color: var(--color-primary-300);
}

/* Monetization slot rows (admin advertising settings): standard code, with its
   adult counterpart shown beside it (50/50) when "Different Ads For Adult
   Content" is enabled, and the standard field spanning full width when off.
   Class names avoid "ad"/"banner-ad" so ad blockers do not cosmetic-hide them. */
.tlx-slot-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

.tlx-slot-col--adult {
    display: none;
}

.tlx-slots-paired .tlx-slot-col--adult {
    display: block;
}

@media (min-width: 1024px) {
    .tlx-slots-paired .tlx-slot-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Multi-select checkbox groups (account type targeting, etc.). */
.tlx-checkbox-group__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.tlx-checkbox-group__option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #334155;
}

/* --- Tailux table system (admin DataTables) --- */

/* Cancel Bootstrap-DT's mandatory 6px top/bottom margin on .dataTable
   (it ships as `margin-top:6px !important;margin-bottom:6px !important`).
   Switch cell box-sizing to border-box so the column-percentage widths
   (set via aoColumns sWidth) include padding instead of adding to it
   (otherwise the percentages sum to 100% then padding pushes the table
   ~10-12px wider than its container). Width/overflow is handled by
   .tlx-table-scroll so the table body can scroll horizontally when needed. */
.tlx-card table.dataTable,
table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: #334155;
}

/* Horizontal scroll on table data only when columns don't fit (see syncTableScrollOverflow). */
.tlx-table-scroll {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
}

.tlx-table-scroll::-webkit-scrollbar {
    height: 6px;
}

.tlx-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.tlx-table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.tlx-table-scroll > table.dataTable,
.tlx-table-scroll > table.tlx-table {
    width: 100% !important;
    max-width: 100% !important;
    /* Let columns size naturally; avoids "tower" wrapping in narrow fixed layouts. */
    table-layout: auto !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.tlx-card table.dataTable td,
.tlx-card table.dataTable th {
    box-sizing: border-box !important;
}

.tlx-card table.dataTable tbody td,
.tlx-card table.dataTable thead th,
.tlx-table tbody td,
.tlx-table thead th,
table.dataTable tbody td {
    font-family: inherit;
}

table.dataTable tbody td {
    background: var(--tlx-dt-cell-bg);
    border-bottom-color: var(--tlx-dt-cell-border);
}

.tlx-table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

/* Database browser table list: single-line cell values (header labels may wrap). */
#databaseTablesTable tbody td {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

#databaseTablesTable tbody td > a,
#databaseTablesTable tbody td > span,
#databaseTablesTable tbody td > div {
    white-space: inherit;
    overflow-wrap: inherit;
    word-break: inherit;
}

/* Opt-in utilities for DataTables columns. */
.dt-nowrap {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* For URLs/hashes/paths that must wrap even without spaces. */
.dt-wrap-anywhere {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: none !important;
}

.tlx-table thead th,
.tlx-table th,
table.dataTable thead th {
    background: var(--tlx-dt-head-bg);
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Tailux table.css: px-4 py-3 on th/td */
    padding: 0.75rem 1rem;
    text-align: start;
    /* Wrap header labels at spaces only — never break words mid-token. */
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    line-height: 1.35;
    vertical-align: bottom;
    border-bottom: 1px solid var(--tlx-dt-head-border);
}

/* Detail/key-value tables in modals: th is a label column, not a header row.
   Use --tlx-dt-cell-bg so label cells match value cells in both light and dark mode. */
.tlx-table.tlx-table--detail th {
    background: var(--tlx-dt-cell-bg);
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    vertical-align: middle;
    border-bottom-color: var(--tlx-dt-cell-border);
}

/* Replace Bootstrap-DataTables Glyphicon sort indicators (their font isn't loaded
   here so they render as missing-glyph boxes) with inline SVG chevrons. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 1.75rem !important;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    content: '' !important;
    position: absolute !important;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem !important;
    height: 0.875rem !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.55;
    font-family: inherit !important;
}

table.dataTable thead .sorting:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4-4 4 4'/><path d='M16 15l-4 4-4-4'/></svg>");
}

table.dataTable thead .sorting_asc:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 14l4-4 4 4'/></svg>");
    opacity: 0.9;
}

table.dataTable thead .sorting_desc:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 10l4 4 4-4'/></svg>");
    opacity: 0.9;
}

/* Checkboxes inside tables — Tailux dualicon style: rounded square with a
   filled square + white check/dash on check/indeterminate. Row checkboxes are
   primary blue; the table-header "select all" (#selectAllCB) is error-red. */
.tlx-table input[type="checkbox"],
.bulk_action input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    border: 1px solid #cbd5e1;
    border-radius: 0.25rem;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    outline: none;
    box-shadow: none;
}

.tlx-table input[type="checkbox"]:focus,
.tlx-table input[type="checkbox"]:focus-visible,
.bulk_action input[type="checkbox"]:focus,
.bulk_action input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: none;
}

.tlx-table input[type="checkbox"]:hover,
.bulk_action input[type="checkbox"]:hover {
    border-color: var(--color-primary-600);
}

.tlx-table input[type="checkbox"]:checked,
.bulk_action input[type="checkbox"]:checked {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='white' d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.tlx-table input[type="checkbox"]:indeterminate,
.bulk_action input[type="checkbox"]:indeterminate {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='white' d='M12.0625 7H3.9375C3.41973 7 3 7.44772 3 8C3 8.55228 3.41973 9 3.9375 9H12.0625C12.5803 9 13 8.55228 13 8C13 7.44772 12.5803 7 12.0625 7Z'/%3e%3c/svg%3e");
}

/* Override row-checkbox blue with error-red for the header "select all" only. */
.tlx-table input#selectAllCB:hover,
.bulk_action input#selectAllCB:hover {
    border-color: var(--color-error);
}

.tlx-table input#selectAllCB:checked,
.tlx-table input#selectAllCB:indeterminate,
.bulk_action input#selectAllCB:checked,
.bulk_action input#selectAllCB:indeterminate {
    background-color: var(--color-error);
    border-color: var(--color-error);
}

/* Small avatar circle used in row cells (e.g. owner column). Sized to fit a ~39px
   circle with single-character initial (40% larger than original 28px). */
.tlx-row-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 9999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.9625rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
    overflow: hidden;
}

.tlx-row-avatar--photo {
    background: #e2e8f0;
    padding: 0;
}

.tlx-row-avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tlx-row-stack {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.tlx-row-stack__primary {
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.tlx-row-stack__secondary {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-top: 0.125rem;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.tlx-row-stack--column {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
}

.tlx-row-stack--column > .tlx-row-stack__secondary {
    margin-top: 0;
}

.tlx-row-stack--center {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Mini bar chart (server manage uploads sparkline; colours match dashboard / ApexCharts primary). */
.tlx-mini-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
    max-width: 8.5rem;
    height: 2rem;
    padding: 0 0.125rem;
}

.tlx-mini-bar-chart__bar {
    position: relative;
    flex: 1 1 0;
    min-width: 3px;
    max-width: 0.5rem;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: color-mix(in srgb, var(--color-primary-600) 28%, #e2e8f0);
    transition: background-color 0.15s ease;
    cursor: default;
}

.tlx-mini-bar-chart__bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: max(100%, 12px);
    transform: translateX(-50%);
}

.tlx-mini-bar-chart__bar:hover {
    z-index: 1;
    background: var(--color-primary-600);
}

/* Fixed layer tooltip (positioned by admin-tailux.js; not inside chart DOM). */
.tlx-mini-bar-chart-tip {
    position: fixed;
    z-index: 10050;
    padding: 0.3rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    max-width: 16rem;
    color: #f8fafc;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
    pointer-events: none;
}

.tlx-mini-bar-chart-tip--below {
    white-space: normal;
    max-width: 11rem;
}

.tlx-mini-bar-chart-tip[hidden] {
    display: none !important;
}

.tlx-mini-bar-chart__bar--peak {
    background: var(--color-primary-600);
}

.tlx-table td .tlx-row-stack--center .tlx-row-stack__secondary {
    margin-top: 0;
    text-align: center;
    white-space: nowrap;
}

.tlx-table thead th:first-child {
    border-top-left-radius: 0.5rem;
}

.tlx-table thead th:last-child {
    border-top-right-radius: 0.5rem;
}

.tlx-table tbody td,
.tlx-table td {
    background: var(--tlx-dt-cell-bg);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #334155;
    vertical-align: middle;
    border-bottom: 1px solid var(--tlx-dt-cell-border);
}

/* Default DataTable cell wrapping: by words only (break on spaces). */
.tlx-table tbody td:not(.center),
.tlx-card table.dataTable tbody td:not(.center),
table.dataTable tbody td:not(.center) {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.tlx-table tbody td:not(.center) > a,
.tlx-table tbody td:not(.center) > span,
.tlx-table tbody td:not(.center) > div,
.tlx-card table.dataTable tbody td:not(.center) > a,
.tlx-card table.dataTable tbody td:not(.center) > span,
.tlx-card table.dataTable tbody td:not(.center) > div,
table.dataTable tbody td:not(.center) > a,
table.dataTable tbody td:not(.center) > span,
table.dataTable tbody td:not(.center) > div {
    white-space: inherit;
    overflow-wrap: inherit;
    word-break: inherit;
    hyphens: inherit;
}

/* Icon, badge, checkbox, and action columns stay on one line. */
.tlx-table tbody td.center,
.tlx-card table.dataTable tbody td.center {
    overflow-wrap: normal;
    word-break: normal;
}

.tlx-table tbody tr {
    cursor: default;
}

.tlx-table tbody tr:hover td {
    background: inherit;
}

/* Opt-in row click (file_manage edit, or primary action e.g. view/info). */
.tlx-table.tlx-table--row-clickable tbody tr:not(.tlx-row-no-action):not(.file-row-static) {
    cursor: pointer;
}

.tlx-table.tlx-table--row-clickable tbody tr:not(.tlx-row-no-action):not(.file-row-static):hover td {
    background: #f8fafc;
}

/* Server-rendered cell utilities (DataTables HTML) — do not rely on Tailwind scanning AJAX rows. */
.tlx-table .text-gray-400,
.tlx-card table.dataTable .text-gray-400 {
    color: #94a3b8;
}

.tlx-table .text-gray-500,
.tlx-card table.dataTable .text-gray-500 {
    color: #64748b;
}

.tlx-table .text-gray-600,
.tlx-card table.dataTable .text-gray-600 {
    color: #475569;
}

.tlx-table a.text-gray-400:hover,
.tlx-card table.dataTable a.text-gray-400:hover {
    color: #475569;
}

.tlx-card table.dataTable td.dataTables_empty {
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    background: var(--tlx-dt-cell-bg);
}

.tlx-table tbody tr.selected td {
    background: rgba(37, 99, 235, 0.05);
}

.tlx-table tbody tr.selected td:first-child {
    box-shadow: inset 3px 0 0 var(--color-primary-600);
}

.tlx-table--dense th,
.tlx-table--dense td {
    padding: 0.5rem 0.75rem;
}

/* First/last column checkbox + icon columns — slightly tighter horizontal padding. */
.tlx-table thead th:first-child,
.tlx-table tbody td:first-child {
    padding-left: 1rem;
    padding-right: 0.75rem;
}

.tlx-table .center,
.tlx-table th.center,
.tlx-table td.center {
    text-align: center;
}

.tlx-table .align-left,
.tlx-table th.align-left,
.tlx-table td.align-left {
    text-align: start;
}

/* Status badges (legacy `.statusTextX` rendered server-side and any new .tlx-status).
   Shape modelled on img_3.png — rounded square with comfortable padding, not full pill. */
.tlx-status,
[class^="statusText"],
[class*=" statusText"] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    white-space: nowrap;
    background: #e5e7eb;
    color: #374151;
}

.tlx-status--shipping,
.statusTextActive {
    background: #ddd6fe;
    color: #5b21b6;
}

.tlx-status--processing,
.statusTextTrash {
    background: #fef3c7;
    color: #b45309;
}

.tlx-status--completed,
.statusTextSuccess {
    background: #dcfce7;
    color: #15803d;
}

.tlx-status--cancelled,
.statusTextDeleted {
    background: #fee2e2;
    color: #b91c1c;
}

.statusTextExpired {
    background: #fef3c7;
    color: #b45309;
}

.statusTextDownloading {
    background: #dbeafe;
    color: #1d4ed8;
}

.statusTextPending {
    background: #fef3c7;
    color: #b45309;
}

.statusTextProcessing {
    background: #dbeafe;
    color: #1d4ed8;
}

.statusTextComplete {
    background: #dcfce7;
    color: #15803d;
}

.statusTextFailed {
    background: #fee2e2;
    color: #b91c1c;
}

.statusTextCancelled {
    background: #f3f4f6;
    color: #6b7280;
}

.statusTextAccepted {
    background: #dcfce7;
    color: #15803d;
}

#abuseReportsTable thead th:first-child,
#abuseReportsTable tbody td:first-child {
    width: 2.5rem;
    min-width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}

.tlx-status--info {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Action icon buttons — circular pill pair matching Tailux orders-datatable style. */
.admin-dt-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.admin-dt-actions--single {
    justify-content: center;
}

.admin-dt-more-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.admin-dt-actions__menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    margin-top: 0.5rem;
    width: 10rem;
    padding: 0.25rem 0;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1), 0 1px 4px rgba(15, 23, 42, 0.06);
    text-align: left;
}

.admin-dt-actions__menu.hidden {
    display: none;
}

.admin-dt-actions__menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-dt-actions__menu li {
    margin: 0;
}

.admin-dt-actions__menu a,
.admin-dt-actions__menu a.btn,
.admin-dt-actions__menu a.btn.btn-sm,
.admin-dt-actions__menu a.btn.btn-default.btn-sm,
.tlx-table td .admin-dt-actions__menu a,
.tlx-table td .admin-dt-actions__menu a.btn.btn-sm {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #374151;
    font-size: 0.8125rem;
    font-weight: normal;
    letter-spacing: 0.025em;
    text-decoration: none;
    white-space: nowrap;
    overflow: visible;
    flex-shrink: 1;
    gap: 0.75rem;
    transition: background 0.1s ease, color 0.1s ease;
}

.admin-dt-actions__menu a:hover,
.admin-dt-actions__menu a.btn:hover,
.tlx-table td .admin-dt-actions__menu a:hover {
    background: #f3f4f6;
    color: #111827;
}

.admin-dt-actions__menu a.admin-dt-action--danger,
.admin-dt-actions__menu a.admin-dt-action--danger .admin-dt-menu-icon {
    color: var(--color-error);
}

.admin-dt-actions__menu a.admin-dt-action--danger:hover {
    background: rgba(255, 79, 26, 0.08);
    color: var(--color-error-darker);
}

.admin-dt-actions__menu .admin-dt-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    color: #6b7280;
}

.admin-dt-actions__menu .admin-dt-menu-icon svg,
.admin-dt-actions__menu i.admin-dt-menu-icon {
    width: auto;
    height: auto;
    font-size: 1.125rem;
    line-height: 1;
}

.admin-dt-actions__menu a:hover .admin-dt-menu-icon,
.admin-dt-actions__menu a:hover > i.bx {
    color: #111827;
}

.admin-dt-actions__menu .admin-dt-menu-icon-svg,
.admin-dt-actions__menu a > svg,
.admin-dt-actions__menu a > i.bx {
    width: auto;
    height: auto;
    font-size: 1.125rem;
    flex-shrink: 0;
    color: #6b7280;
    line-height: 1;
}

.admin-dt-actions__menu a:hover > svg,
.admin-dt-actions__menu a:hover > i.bx,
.admin-dt-actions__menu a:hover .admin-dt-menu-icon-svg {
    color: #374151;
}

.admin-dt-actions__menu a.admin-dt-action--danger > svg,
.admin-dt-actions__menu a.admin-dt-action--danger > i.bx,
.admin-dt-actions__menu a.admin-dt-action--danger .admin-dt-menu-icon-svg {
    color: var(--color-error);
}

.tlx-table td .btn.btn-sm,
.tlx-table td .btn.btn-default.btn-sm,
.admin-dt-actions > .btn,
.admin-dt-actions > .btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.875rem;
    transition: background 0.12s ease, color 0.12s ease;
}

.tlx-table td .btn.btn-sm:hover,
.tlx-table td .btn.btn-default.btn-sm:hover,
.admin-dt-actions > .btn:hover,
.tlx-table td .btn.btn-sm:focus,
.admin-dt-actions > .btn:focus {
    background: #e5e7eb;
    color: #111827;
    outline: none;
}

.admin-dt-actions > .btn svg,
.admin-dt-actions > .btn i.bx {
    width: auto;
    height: auto;
    font-size: 1rem;
    line-height: 1;
}

.admin-dt-actions > .admin-dt-more-btn .admin-dt-more-icon {
    width: auto;
    height: auto;
    font-size: 1.125rem;
    line-height: 1;
}

.tlx-table td .btn .text-danger,
.admin-dt-actions > .btn .text-danger {
    color: var(--color-error);
}

/* Non-clickable file_manage rows (trash/deleted): no pointer, no hover highlight. */
.tlx-table.tlx-table--row-clickable tbody tr.file-row-static:hover td {
    background: inherit;
}

/* Filename + listing decorations from server-rendered file_manage rows. */
.file-listing-view {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.file-listing-type {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.file-listing-type img {
    margin: 0 !important;
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* List/table icon cells — always 16×16 (file types, queue status, etc.). */
.tlx-list-icon,
.tlx-file-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tlx-list-icon img,
.tlx-file-type-icon img {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    display: block;
}

.tlx-list-icon--avatar {
    width: 32px;
    height: 32px;
}

.tlx-list-icon--avatar img {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    border-radius: 9999px;
    object-fit: cover;
}

#currentDownloadsTable thead th:first-child,
#currentDownloadsTable tbody td:first-child,
#fileActionTable thead th:first-child,
#fileActionTable tbody td:first-child,
#pluginTable thead th:first-child,
#pluginTable tbody td:first-child {
    width: 2.5rem;
    min-width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}

/* File action queue: wrap long paths by character (~30ch) so they don't expand the table. */
#fileActionTable thead th.dt-wrap-anywhere,
#fileActionTable tbody td.dt-wrap-anywhere {
    min-width: 30ch;
    max-width: 30ch;
    width: 30ch;
}

#userActionLogTable thead th:first-child,
#userActionLogTable tbody td:first-child {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
    vertical-align: middle;
}

#userActionLogTable thead th.ual-options-col,
#userActionLogTable tbody td.ual-options-col {
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.file-listing-name {
    color: var(--color-primary-600);
    font-weight: 500;
    text-decoration: none;
}

.file-listing-name:hover {
    color: var(--color-primary-700);
    text-decoration: underline;
}

.file-listing-download {
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.file-listing-download:hover {
    color: var(--color-primary-600);
}

/* Tabbed forms — matches Tailux demo tab strip (Controlled / WithIcon) */
.tlx-tabbed {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tlx-tabbed__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tlx-tabbed__scroll::-webkit-scrollbar {
    height: 4px;
}

.tlx-tabbed__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.tlx-tabbed__scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.tlx-tabbed__scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.tlx-tabbed__track {
    width: max-content;
    min-width: 100%;
    border-bottom: 2px solid #e5e7eb;
}

.tlx-tabbed--in-card .tlx-tabbed__scroll {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.tlx-tabbed__panels {
    margin-top: 0.75rem;
    min-width: 0;
}

.tlx-tabbed--in-card .tlx-tabbed__panels {
    margin-top: 1.25rem;
}

.tlx-tabs {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: -2px;
    border-bottom: 0;
}

/* Legacy tabbed blocks without .tlx-tabbed wrapper */
[data-tlx-tabs]:not(.tlx-tabbed) > .tlx-tabs,
[data-tlx-tabs]:not(.tlx-tabbed) > .-mb-px.border-b .tlx-tabs,
[data-tlx-tabs]:not(.tlx-tabbed) > div > .tlx-tabs {
    overflow-x: auto;
    border-bottom: 2px solid #e5e7eb;
    -webkit-overflow-scrolling: touch;
}

.tlx-tabs__btn,
.admin-tw-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.75rem;
    background: transparent;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    transition: color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.tlx-tabs__btn:hover,
.admin-tw-tab-btn:hover {
    color: #334155;
}

.tlx-tabs__btn:focus,
.admin-tw-tab-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.tlx-tabs__btn:focus-visible,
.admin-tw-tab-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
}

.tlx-tabs__btn--active,
.admin-tw-tab-btn[aria-selected="true"],
.admin-tw-tab-btn.tlx-tabs__btn--active {
    color: var(--color-primary-600, #3b82f6);
    border-bottom-color: var(--color-primary-600, #3b82f6);
}

.tlx-form-panel,
[data-tlx-tabs]:not(.tlx-tabbed) > [role="tabpanel"] {
    min-width: 0;
}

[data-tlx-tabs]:not(.tlx-tabbed) > .tlx-form-panel,
[data-tlx-tabs]:not(.tlx-tabbed) > [role="tabpanel"]:not(.hidden) {
    padding-top: 0.75rem;
}

.tlx-tabbed .tlx-form-panel {
    padding-top: 0;
}

.tlx-form-panel .dataTables_wrapper {
    position: relative;
}

.tlx-form-panel .tlx-tb-foot {
    padding: 0.875rem 0;
}

/* Definition list (file info tab, etc.) */
.admin-dl-list {
    font-size: 0.875rem;
}

.admin-dl-list__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.admin-dl-list__row:first-child {
    padding-top: 0;
}

.admin-dl-list__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.admin-dl-list__row dt {
    width: 220px;
    flex-shrink: 0;
    color: #64748b;
}

.admin-dl-list__row dd {
    font-weight: 500;
    color: #334155;
    min-width: 0;
}

/* User edit — avatar area in left summary sidebar */
.user-edit-sidebar__preview {
    height: auto;
    min-height: 10rem;
    padding: 1.5rem 1rem;
}

.user-edit-sidebar__preview img {
    height: 7.5rem;
    width: 7.5rem;
    border-radius: 0.5rem;
    object-fit: cover;
    border: 1px solid #e2e8f0;
}

.user-edit-sidebar__identity {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    text-align: center;
    word-break: break-word;
}

.user-edit-sidebar__identity-sub {
    margin: -0.5rem 0 0.75rem;
    font-size: 0.8125rem;
    color: #64748b;
    text-align: center;
    word-break: break-word;
}

.user-edit-sidebar__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

a.file-view-sidebar__action-btn,
button.file-view-sidebar__action-btn {
    text-decoration: none;
}

/* File view — left summary sidebar */
.file-view-sidebar__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 300px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0.5rem 0.5rem 0 0;
}

.file-view-sidebar__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #94a3b8;
}

.file-view-sidebar__ext {
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
}

.file-view-sidebar__meta {
    font-size: 0.875rem;
}

.file-view-sidebar__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.file-view-sidebar__meta-row dt {
    color: #64748b;
}

.file-view-sidebar__meta-row dd {
    font-weight: 500;
    color: #334155;
    text-align: right;
}

.file-view-sidebar__meta-row dd a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.file-view-sidebar__meta-row dd a:hover {
    text-decoration: underline;
}

.file-view-sidebar__meta-sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: #64748b;
}

.file-view-sidebar__meta-muted {
    font-weight: 400;
    color: #94a3b8;
}

.file-view-sidebar__divider {
    margin: 1rem 0;
    height: 1px;
    background: #e2e8f0;
}

.file-view-sidebar__section-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.file-view-sidebar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    color: #64748b;
    transition: color 0.15s, background-color 0.15s;
}

.file-view-sidebar__icon-btn:hover {
    color: #2563eb;
    background: #f1f5f9;
}

.file-view-sidebar__actions {
    margin: 0 -0.5rem;
    font-size: 0.875rem;
    list-style: none;
    padding: 0;
}

.file-view-sidebar__action-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    text-align: left;
    color: #475569;
    cursor: pointer;
    transition: background-color 0.15s;
}

.file-view-sidebar__action-btn:hover {
    background: #f1f5f9;
}

.file-view-sidebar__action-btn svg,
.file-view-sidebar__action-btn i.bx,
.file-view-sidebar__icon-btn i.bx {
    font-size: 1rem;
    line-height: 1;
    color: #94a3b8;
}

.file-view-sidebar__action-btn--danger {
    color: #dc2626;
}

.file-view-sidebar__action-btn--danger:hover {
    background: #fef2f2;
}

/* File view sidebar — dark mode (tokens follow the active dark scheme) */
html.dark .file-view-sidebar__preview {
    background: var(--color-dark-800);
    border-bottom-color: var(--color-dark-600);
}

html.dark .file-view-sidebar__placeholder {
    color: var(--color-dark-400);
}

html.dark .file-view-sidebar__ext {
    background: var(--color-dark-600);
    border-color: var(--color-dark-500);
    color: var(--color-dark-200);
}

html.dark .file-view-sidebar__meta-row dt {
    color: var(--color-dark-300);
}

html.dark .file-view-sidebar__meta-row dd {
    color: var(--color-dark-100);
}

html.dark .file-view-sidebar__meta-row dd a.text-primary-600 {
    color: var(--color-primary-400);
}

html.dark .file-view-sidebar__meta-sub,
html.dark .file-view-sidebar__section-label,
html.dark .file-view-sidebar__meta-muted {
    color: var(--color-dark-400);
}

html.dark .file-view-sidebar__divider {
    background: var(--color-dark-600);
}

html.dark #fileSummaryShortUrl a.text-primary-600 {
    color: var(--color-primary-400);
}

html.dark .file-view-sidebar__icon-btn {
    color: var(--color-dark-300);
}

html.dark .file-view-sidebar__icon-btn:hover {
    color: var(--color-primary-400);
    background: var(--color-dark-600);
}

html.dark .file-view-sidebar__action-btn {
    color: var(--color-dark-200);
}

html.dark .file-view-sidebar__action-btn:hover {
    background: var(--color-dark-600);
}

html.dark .file-view-sidebar__action-btn svg,
html.dark .file-view-sidebar__action-btn i.bx,
html.dark .file-view-sidebar__icon-btn i.bx {
    color: var(--color-dark-400);
}

html.dark .file-view-sidebar__action-btn--danger {
    color: #f87171;
}

html.dark .file-view-sidebar__action-btn--danger:hover {
    background: color-mix(in srgb, #dc2626 18%, var(--color-dark-600));
}

/* File details tabs — lighten the red "Remove" link (artifacts) for dark mode contrast */
html.dark .tlx-form-panel a.text-red-600 {
    color: #f87171;
}

html.dark .tlx-form-panel a.text-red-600:hover {
    color: #fca5a5;
}

/* File stats tab */
.tlx-stat-tile {
    border-radius: 0.5rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    padding: 1rem;
}

.tlx-stat-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tlx-stat-tile__label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.tlx-stat-tile__value {
    margin-top: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.tlx-stat-tile__value--sm {
    font-size: 1rem;
}

.file-stats-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.file-stats-empty svg,
.file-stats-empty i.bx {
    color: #cbd5e1;
}

.file-stats-empty i.bx {
    font-size: 4rem;
    line-height: 1;
}

.file-stats-empty h3 {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #334155;
}

.file-stats-empty p {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #64748b;
    max-width: 24rem;
}

.file-stats-country-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.file-stats-country-list > li + li {
    margin-top: 0.75rem;
}

.file-stats-country-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.file-stats-country-list__name {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: #334155;
}

.file-stats-country-list__count {
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: #64748b;
}

.file-stats-country-list__pct {
    font-size: 0.75rem;
    color: #94a3b8;
}

.file-stats-country-list__bar {
    margin-top: 0.25rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #f1f5f9;
    overflow: hidden;
}

.file-stats-country-list__bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: #3b82f6;
}

.form-control:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--color-primary-600, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

.dark .form-control:disabled,
.dark .form-control[readonly] {
    background-color: #1f2937;
    color: #6b7280;
}

.tlx-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
}

.tlx-modal.hidden {
    display: none;
}

.tlx-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.tlx-modal__panel {
    position: relative;
    margin: 3rem auto;
    max-width: 56rem;
    background: #fff;
    border-radius: 0.9rem;
    border: 1px solid #cbd5e1;
    box-shadow: var(--shadow-soft);
    z-index: 2;
}

.tlx-modal__header,
.tlx-modal__footer {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.tlx-modal__footer {
    border-bottom: 0;
    border-top: 1px solid #e2e8f0;
}

.tlx-modal__body {
    padding: 1.25rem;
    max-height: min(70vh, 780px);
    overflow-y: auto;
}

/* Shift-up entrance for the confirm modal (matches the demo `/components/modal`
   "Shift Up Animation" example): panel rises 1rem and fades in; backdrop fades. */
@keyframes tlx-modal-shift-up {
    from { opacity: 0; transform: translate3d(-50%, calc(-50% + 1rem), 0); }
    to   { opacity: 1; transform: translate3d(-50%, -50%, 0); }
}

@keyframes tlx-modal-backdrop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tlx-modal:not(.hidden) .tlx-modal__panel--confirm {
    animation: tlx-modal-shift-up 300ms cubic-bezier(0, 0, 0.2, 1) both;
}

.tlx-modal:not(.hidden) .tlx-modal__panel--confirm ~ .tlx-modal__backdrop,
.tlx-modal:not(.hidden):has(.tlx-modal__panel--confirm) .tlx-modal__backdrop {
    animation: tlx-modal-backdrop-fade-in 300ms cubic-bezier(0, 0, 0.2, 1) both;
}

/* Confirm modal — matches the Tailux demo `/components/modal/modal` confirm pattern.
   Centered card, big icon at top, title + description, centered action buttons. */
.tlx-modal__panel--confirm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: calc(100% - 2rem);
    max-width: 28rem;
    text-align: center;
    padding: 1.5rem 1.25rem;
}

.tlx-modal__panel--confirm .tlx-modal__header {
    display: none;
}

.tlx-modal__panel--confirm .tlx-modal__body {
    padding: 0;
    overflow: visible;
    max-height: none;
}

.tlx-modal__panel--confirm .tlx-modal__footer {
    border-top: 0;
    padding: 0;
    margin-top: 3rem;
    justify-content: center;
}

/* Vertically and horizontally centered modal variant (used by genericModalContainer). */
.tlx-modal__panel--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: calc(100% - 3rem);
    max-width: 44rem;
}

.tlx-confirm__icon {
    margin: 0 auto;
    width: 6rem;
    height: 6rem;
    flex-shrink: 0;
    color: #94a3b8;
}

i.tlx-confirm__icon {
    width: auto;
    height: auto;
    font-size: 6rem;
    line-height: 1;
}

.tlx-confirm__icon--danger { color: #dc2626; }
.tlx-confirm__icon--warning { color: #f59e0b; }
.tlx-confirm__icon--success { color: #16a34a; }
.tlx-confirm__icon--info { color: #2563eb; }

.tlx-confirm__title {
    margin-top: 1rem;
    font-size: 1.25rem;
    line-height: 1.4;
    color: #1e293b;
    font-weight: 500;
}

.tlx-confirm__description {
    margin: 0.5rem auto 0;
    max-width: 20rem;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.5;
}

.tlx-confirm__actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.tlx-confirm__actions .tlx-btn {
    height: 2.25rem;
    min-width: 7rem;
}

.tlx-dropdown {
    display: none;
    position: absolute;
    min-width: 11rem;
    border-radius: 0.65rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: var(--shadow-soft);
    padding: 0.3rem;
    z-index: 50;
}

.tlx-dropdown.is-open {
    display: block;
}

.tlx-dropdown__item {
    display: block;
    width: 100%;
    border-radius: 0.45rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.875rem;
    color: #334155;
    text-decoration: none;
}

.tlx-dropdown__item:hover {
    background: #f1f5f9;
}

.tlx-badge,
.tlx-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.25rem 0.55rem;
}

html.dark .tlx-tag {
    background: var(--color-dark-600);
    color: var(--color-dark-100);
}

.tlx-avatar {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: #dbeafe;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tlx-spinner {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 9999px;
    border: 2px solid #cbd5e1;
    border-top-color: var(--color-primary-600);
    animation: tlx-spin 0.8s linear infinite;
}

.tlx-table .datatable-loading-placeholder__cell {
    padding: 2.5rem 1rem;
    text-align: center;
    border: 0;
    background: var(--tlx-dt-cell-bg);
}

/* Toolbar above the table card (search input + filter pills + reset). */
.tlx-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Search + filter pills: always directly above the datatable (inside .tlx-card). */
.tlx-toolbar--table {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.tlx-toolbar__filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.tlx-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Search input — transparent bg, solid thin border, flips to white when there's a value. */
.tlx-search-input {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    width: 12.8rem;
    padding: 0 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: transparent;
    color: #111827;
    font-size: var(--text-xs-plus);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tlx-search-input:hover {
    border-color: #cbd5e1;
}

.tlx-search-input:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 50%, transparent);
}

.tlx-search-input.has-value,
.tlx-search-input:has(input:not(:placeholder-shown)) {
    background-color: #ffffff;
}

.tlx-search-input__prefix {
    color: #9ca3af;
    display: inline-flex;
    flex-shrink: 0;
}

.tlx-search-input__hint {
    margin-left: auto;
    padding: 0 0.4rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #6b7280;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.tlx-search-input input,
.tlx-search-input input:focus,
.tlx-filter-pill input,
.tlx-filter-pill input:focus,
.tlx-filter-pill select,
.tlx-filter-pill select:focus,
[data-filter-panel] input,
[data-filter-panel] input:focus {
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    /* Reset @tailwindcss/forms default focus ring/border-color */
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-color: transparent;
}

.tlx-search-input input {
    width: 100%;
    font: inherit;
    color: inherit;
}

.tlx-search-input input::placeholder {
    color: #9ca3af;
}

/* Filter pill — solid thin border, lightly rounded; shows the selected value as an inner badge
   when active (img_4.png). The native <select> is overlaid invisibly so the whole pill is clickable. */
.tlx-filter-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2rem;
    padding: 0 0.5rem 0 0.75rem;
    border-radius: 0.5rem;
    border: 1px dashed #d1d5db;
    background: transparent;
    color: #111827;
    font-size: var(--text-xs-plus);
    line-height: 1;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    cursor: pointer;
}

.tlx-filter-pill:hover {
    border-color: #cbd5e1;
    color: #111827;
}

.tlx-filter-pill:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 50%, transparent);
}

.tlx-filter-pill[data-filter-active="true"],
.tlx-filter-pill[data-filter-show-value="true"] {
    padding-right: 0.3rem;
    background-color: #ffffff;
}

.tlx-filter-pill__icon {
    width: 1rem;
    height: 1rem;
    color: #6b7280;
    flex-shrink: 0;
}

.tlx-filter-pill__label {
    color: inherit;
}

/* Inner pill showing the selected option text for single-select (radio) filters. */
.tlx-filter-pill__sep,
.tlx-filter-pill__value {
    display: none;
}

.tlx-filter-pill[data-filter-active="true"] .tlx-filter-pill__sep,
.tlx-filter-pill[data-filter-show-value="true"] .tlx-filter-pill__sep {
    display: inline-block;
    width: 1px;
    height: 1rem;
    background: #e5e7eb;
}

.tlx-filter-pill[data-filter-active="true"] .tlx-filter-pill__value,
.tlx-filter-pill[data-filter-show-value="true"] .tlx-filter-pill__value {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.375rem;
    padding: 0 0.5rem;
    border-radius: 0.3rem;
    background: #e5e7eb;
    color: #111827;
    font-weight: 500;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The native <select> is overlaid invisibly so clicking anywhere on the pill opens
   the dropdown. The visible label/value/icon render in-flow underneath. */
.tlx-filter-pill__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.tlx-filter-pill__select:focus {
    outline: 0;
    box-shadow: none;
}

/* Text input variant — input is rendered visibly inline so the user can see what
   they're typing. No separate value badge needed. */
.tlx-filter-pill__input {
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    color: inherit;
    font: inherit;
    padding: 0;
    width: 6rem;
    min-width: 0;
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-color: transparent;
}

.tlx-filter-pill__input:focus {
    outline: 0;
    box-shadow: none;
}

.tlx-filter-pill__input::placeholder {
    color: #9ca3af;
}

.tlx-toolbar__reset {
    height: 2rem;
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    color: #4b5563;
    font-size: var(--text-xs-plus);
    cursor: pointer;
}

.tlx-toolbar__reset:hover {
    color: #111827;
    text-decoration: underline;
}

.tlx-toolbar__reset[hidden] {
    display: none;
}

/* DataTables generated structure — we drive layout via `dom`:
   <"hidden"f>rt<"tlx-tb-foot"<"tlx-tb-foot__size"l><"tlx-tb-foot__page"p><"tlx-tb-foot__info"i>>
*/
.tlx-card .dataTables_wrapper {
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Push the foot (length / paging / info) to the bottom of the card when the
   card is taller than the table content. */
.tlx-card .dataTables_wrapper > .tlx-tb-foot {
    margin-top: auto;
}

/* Higher specificity than Bootstrap-DT's `div.dataTables_wrapper div.dataTables_processing`
   so its `width:200px;margin-left:-100px;left:50%;top:50%` doesn't off-center the spinner.
   Use !important on every offset/size property because Bootstrap-DT's rules ship with
   matching specificity in some load orders. */
.tlx-card div.dataTables_wrapper div.dataTables_processing,
.tlx-card .dataTables_processing {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--tlx-dt-loading-overlay) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    /* Hide the language text — we render a spinner via ::before instead. */
    font-size: 0;
    color: transparent;
    visibility: hidden;
}

.tlx-card .dataTables_processing::before {
    content: "";
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--tlx-dt-spinner-track);
    border-top-color: var(--color-primary-600);
    border-radius: 9999px;
    animation: tlx-spin 0.8s linear infinite;
}

.tlx-card .dataTables_wrapper.dtLoading .dataTables_processing {
    visibility: visible;
}

.tlx-card .dataTables_scrollHead,
.tlx-card .dataTables_scrollBody {
    background: var(--tlx-dt-cell-bg);
}

.tlx-card .dataTables_scrollBody,
.dataTables_scrollBody {
    overflow-x: auto !important;
}

.dataTables_scrollHead table.dataTable thead th {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.tlx-tb-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

.tlx-tb-foot__size .dataTables_length,
.tlx-tb-foot__page .dataTables_paginate,
.tlx-tb-foot__info .dataTables_info {
    margin: 0;
}

.tlx-tb-foot__size {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs-plus);
    color: #6b7280;
}

.tlx-tb-foot__size label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 400;
    color: #6b7280;
}

.tlx-tb-foot__size select,
div.dataTables_wrapper div.dataTables_length select {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    height: 2rem;
    min-height: 1.8rem;
    line-height: 1;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background: transparent;
    color: #111827;
    padding: 0 1.375rem 0 0.875rem;
    font-size: var(--text-xs-plus);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 0.75rem 0.75rem;
    cursor: pointer;
}

.tlx-tb-foot__page {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
}

.tlx-tb-foot__info,
.dataTables_info {
    font-size: var(--text-xs-plus);
    color: #6b7280;
    white-space: nowrap;
}

/* Pagination buttons — DataTables 1.10 with the Bootstrap renderer emits
   <ul class="pagination"><li class="paginate_button active|disabled|previous|next">
   with the visible <a> inside the <li>. Style the <a> for visuals; use the <li>
   modifier classes for state. */
.dataTables_paginate {
    display: inline-flex;
    align-items: center;
}

.dataTables_paginate ul.pagination {
    display: inline-flex !important;
    align-items: center;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.dataTables_paginate ul.pagination > li {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f3f4f6;
}

.dataTables_paginate ul.pagination > li:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.dataTables_paginate ul.pagination > li:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.dataTables_paginate ul.pagination > li.active {
    background: #f3f4f6;
}

.dataTables_paginate ul.pagination > li.active:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.dataTables_paginate ul.pagination > li.active:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.dataTables_paginate ul.pagination > li > a,
.dataTables_paginate ul.pagination > li > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.625rem !important;
    border-radius: 0 !important;
    border: 1px solid transparent !important;
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    font-size: var(--text-xs-plus) !important;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
}

.dataTables_paginate ul.pagination > li:first-child > a,
.dataTables_paginate ul.pagination > li:first-child > span {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

.dataTables_paginate ul.pagination > li:last-child > a,
.dataTables_paginate ul.pagination > li:last-child > span {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

.dataTables_paginate ul.pagination > li > a:hover {
    background: #e5e7eb !important;
    color: #111827 !important;
    border-radius: 0.5rem !important;
}

.dataTables_paginate ul.pagination > li.active > a,
.dataTables_paginate ul.pagination > li.active > a:hover,
.dataTables_paginate ul.pagination > li.active > span {
    background: var(--color-primary-600) !important;
    color: #ffffff !important;
    border-color: var(--color-primary-600) !important;
    border-radius: 0.5rem !important;
    cursor: default;
}

.dataTables_paginate ul.pagination > li.disabled > a,
.dataTables_paginate ul.pagination > li.disabled > a:hover,
.dataTables_paginate ul.pagination > li.disabled > span {
    background: #f3f4f6 !important;
    color: #d1d5db !important;
    cursor: not-allowed;
}

.dataTables_paginate ul.pagination > li.previous > a,
.dataTables_paginate ul.pagination > li.next > a {
    width: 2rem;
    padding: 0 !important;
}

.dataTables_paginate .ellipsis,
.dataTables_paginate ul.pagination > li.disabled > span.ellipsis {
    padding: 0 0.5rem;
    color: #9ca3af;
    background: transparent !important;
}

/* DataTables-generated filter input — left rendered inside `<"hidden"f>` so user
   never sees it; we provide the styled #filterText input in the toolbar instead. */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    padding: 0 0.875rem;
    height: 2rem;
}

.x_panel {
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.x_title {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.x_content {
    padding: 1.25rem;
}

.input-root,
.input-wrapper {
    display: flex;
    flex-direction: column;
}

.input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
}

.input-description {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #9ca3af;
}

/* Page, modal, and tab intro copy — readable secondary text (not field hints). */
.tlx-intro-block--page {
    padding: 0;
    margin-bottom: 0.75rem;
}

.tlx-intro-block--in-panel {
    padding: 0 0 0.75rem;
}

.tlx-intro-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.tlx-intro-text + .tlx-intro-text {
    margin-top: 0.5rem;
}

.tlx-modal__body > .tlx-intro-text:first-child,
.tlx-modal__body form > .tlx-intro-text:first-child {
    margin-bottom: 0.25rem;
}

.tlx-form-panel > .tlx-intro-text:first-child,
.tlx-form-panel > .tlx-intro-block:first-child {
    margin-bottom: 0.25rem;
}

.tlx-section-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.file-stats-empty .tlx-intro-text {
    max-width: 24rem;
}

.input-description.dark {
    color: #6b7280;
}

.form-input-base,
.form-textarea-base {
    display: block;
    width: 100%;
    appearance: none;
    background: transparent;
    letter-spacing: 0.02em;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input,
.form-textarea {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
    color: #1f2937;
    background: #fff;
    font-size: 0.875rem;
    border-color: #cbd5e1;
    transition: border-color 0.2s ease;
}

/* Remove rounded corners from inputs in groups */
.form-input.no-rounded {
    border-radius: 0;
    border: none;
}

.form-input.rounded-left {
    border-radius: 0.75rem 0 0 0.75rem;
}

.form-input.rounded-right {
    border-radius: 0 0.75rem 0.75rem 0;
}

/* Input group wrapper provides the border */
.input-group-wrapper {
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
}

.dark .input-group-wrapper {
    border-color: #404854;
}

.form-input:hover,
.form-textarea:hover {
    border-color: #d1d5db;
}

.form-input:focus,
.form-input:focus-within,
.form-textarea:focus,
.form-textarea:focus-within,
.input-group-wrapper:focus-within {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Inputs nested inside a group wrapper share the wrapper's ring — suppress
   their own border/ring so we don't render two stacked rings on focus. */
.form-input.no-rounded:focus,
.form-input.no-rounded:focus-within {
    border-color: transparent;
    box-shadow: none;
}

.dark .form-input,
.dark .form-textarea {
    color: #e5e7eb;
    border-color: #404854;
    background: #2d3139;
}

.dark .form-input:hover,
.dark .form-textarea:hover {
    border-color: #4c5157;
}

.dark .form-input:focus,
.dark .form-input:focus-within,
.dark .form-textarea:focus,
.dark .form-textarea:focus-within,
.dark .input-group-wrapper:focus-within {
    border-color: #3b82f6;
}

.form-textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Input group styling - for grouped form fields */
.input-group {
    display: flex;
    margin-top: 0.375rem;
}

.input-group-item {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.875rem;
    border: 1px solid #cbd5e1;
    background: #f3f4f6;
    color: #1f2937;
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 0;
}

.input-group-addon.rounded-left {
    border-radius: 0.75rem 0 0 0.75rem;
}

.input-group-addon.rounded-right {
    border-radius: 0 0.75rem 0.75rem 0;
}

button.input-group-addon {
    cursor: pointer;
}

.dark .input-group-addon {
    border-color: #404854;
    background: #2d3139;
    color: #e5e7eb;
}

.form-select-base {
    display: block;
    width: 100%;
    appearance: none;
    outline: none;
    letter-spacing: 0.02em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select {
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    padding: 0.625rem 0.75rem;
    color: #1f2937;
    background-color: #fff;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select:hover {
    border-color: #d1d5db;
}

.form-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.dark .form-select {
    border-color: #404854;
    color: #e5e7eb;
    background-color: #2d3139;
}

.dark .form-select:hover {
    border-color: #4c5157;
}

.dark .form-select:focus {
    border-color: #3b82f6;
}

/* Readonly / disabled form fields — matches Tailux demo read-only input styling
   (see file_manage_edit_form access password field). Date pickers stay clickable. */
.form-input[readonly]:not(.admin-date-input),
.form-input:read-only:not(.admin-date-input),
.form-textarea[readonly],
.form-textarea:read-only {
    background-color: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

.form-input[readonly]:not(.admin-date-input)::placeholder,
.form-textarea[readonly]::placeholder {
    color: #d1d5db;
}

.form-input[readonly]:not(.admin-date-input):hover,
.form-input:read-only:not(.admin-date-input):hover,
.form-textarea[readonly]:hover {
    border-color: #e5e7eb;
}

.form-input[readonly]:not(.admin-date-input):focus,
.form-input:read-only:not(.admin-date-input):focus,
.form-textarea[readonly]:focus {
    border-color: #e5e7eb;
    box-shadow: none;
}

.form-select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
    opacity: 1;
}

.form-select:disabled:hover,
.form-select:disabled:focus {
    border-color: #e5e7eb;
    box-shadow: none;
}

.dark .form-input[readonly]:not(.admin-date-input),
.dark .form-input:read-only:not(.admin-date-input),
.dark .form-textarea[readonly],
.dark .form-textarea:read-only {
    background-color: #25282e;
    color: #6b7280;
    border-color: #404854;
}

.dark .form-input[readonly]:not(.admin-date-input):hover,
.dark .form-input:read-only:not(.admin-date-input):hover,
.dark .form-textarea[readonly]:hover,
.dark .form-input[readonly]:not(.admin-date-input):focus,
.dark .form-input:read-only:not(.admin-date-input):focus,
.dark .form-textarea[readonly]:focus {
    border-color: #404854;
    box-shadow: none;
}

.dark .form-select:disabled {
    background-color: #25282e;
    color: #6b7280;
    border-color: #404854;
}

.dark .form-select:disabled:hover,
.dark .form-select:disabled:focus {
    border-color: #404854;
    box-shadow: none;
}

.dark .input-label {
    color: #c2c9d6;
}

.dark .input-description {
    color: #6d7ea1;
}

.dark .tlx-intro-text {
    color: #a5afc4;
}

.dark .tlx-section-label {
    color: #a5afc4;
}

.dark .form-input::placeholder,
.dark .form-textarea::placeholder {
    color: #6b7280;
}

.dark .tlx-btn--outlined {
    color: #e5e7eb;
    border-color: #404854;
    background: #2d3139;
}

.dark .tlx-btn--outlined:hover {
    color: var(--color-primary-400);
    border-color: var(--color-primary-500);
    background: color-mix(in srgb, var(--color-primary-500) 12%, #2d3139);
}

.dark .tlx-btn--flat,
.dark .tlx-btn--ghost {
    color: #e5e7eb;
}

.dark .tlx-btn--flat:hover,
.dark .tlx-btn--ghost:hover {
    color: var(--color-primary-400);
    background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
}

.form-control {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    min-height: 2.5rem;
    padding: 0.625rem 0.75rem;
    background-color: #fff;
}

.dark .form-control {
    border-color: #404854;
    background-color: #2d3139;
    color: #e5e7eb;
}

.dark .form-control::placeholder {
    color: #6b7280;
}

/* Native select chevron — appearance:none + SVG (setting_manage uses select.form-control). */
select.form-control:not([multiple]):not([size]),
.form-select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}

/* Modals/macros already render an overlay chevron beside .form-select. */
.input-wrapper > select.form-select:not([multiple]):not([size]) {
    background-image: none;
    padding-right: 0.75rem;
}

.dark select.form-control:not([multiple]):not([size]),
.dark .form-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
}

.dark .input-wrapper > select.form-select:not([multiple]):not([size]) {
    background-image: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.65rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    padding: 0.5rem 0.85rem;
    background: #fff;
    color: #334155;
}

.btn-primary {
    background: var(--color-primary-600);
    color: #fff;
}

.btn-default {
    border-color: #cbd5e1;
}

#admin-toast-layer {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 120;
    width: min(24rem, calc(100vw - 2rem));
    display: grid;
    gap: 0.6rem;
}

.admin-toast {
    border-radius: 0.8rem;
    box-shadow: var(--shadow-soft);
    padding: 0.75rem 0.875rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 600;
    border: 1px solid transparent;
    color: #fff;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.admin-toast__body {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.admin-toast__message {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-toast [data-icon] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.admin-toast [data-icon] svg,
.admin-toast [data-icon] i.bx {
    color: currentColor;
    font-size: 1.25rem;
    line-height: 1;
}

.admin-toast__close {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    margin: -0.125rem -0.25rem -0.125rem 0;
    padding: 0.25rem;
    line-height: 1;
    opacity: 0.85;
    border-radius: 0.375rem;
}

.admin-toast__close:hover,
.admin-toast__close:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
}

.admin-toast__close i.bx {
    font-size: 1rem;
    line-height: 1;
}

.admin-toast[data-type="error"] {
    background: #dc2626;
    border-color: #991b1b;
}

.admin-toast[data-type="success"] {
    background: #16a34a;
    border-color: #15803d;
}

.admin-toast[data-type="info"] {
    background: #2563eb;
    border-color: #1e40af;
}

.tlx-search-modal__dialog {
    max-width: 44rem;
    margin-top: 12vh;
}

.tlx-search-modal__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid #e2e8f0;
    border-bottom-left-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
    background: #f8fafc;
    flex-wrap: wrap;
}

.tlx-search-quick-label {
    font-size: 0.75rem;
    color: #94a3b8;
}

.tlx-search-quick-link {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.tlx-search-quick-link:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
    text-decoration: none;
}

.modal:not(.tlx-modal) {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 23, 42, 0.55);
    overflow-y: auto;
    padding: 1rem;
}

.modal:not(.tlx-modal).show {
    display: block;
}

.modal:not(.tlx-modal) .modal-dialog {
    max-width: 56rem;
    margin: 3rem auto;
}

.modal:not(.tlx-modal) .modal-content {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.9rem;
    box-shadow: var(--shadow-soft);
}

.modal:not(.tlx-modal) .modal-header,
.modal:not(.tlx-modal) .modal-footer {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}

.modal:not(.tlx-modal) .modal-footer {
    border-bottom: 0;
    border-top: 1px solid #e2e8f0;
}

.modal:not(.tlx-modal) .modal-body {
    padding: 1.25rem;
}

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

/* bootstrap-daterangepicker — aligned with Tailux / flatpickr demo styling */
.daterangepicker {
    display: none;
    z-index: 1100;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    padding: 0.5rem;
}

.daterangepicker .calendar-table {
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    background: #fff;
}

.daterangepicker td,
.daterangepicker th {
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #4b5563;
}

.daterangepicker th.month {
    color: #1f2937;
    font-weight: 600;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #f3f4f6;
    border-color: transparent;
    color: #1f2937;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
    border-radius: 0.5rem;
}

.daterangepicker td.in-range {
    background-color: #eff6ff;
    border-color: transparent;
    color: #1e40af;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: #fff;
    color: #9ca3af;
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: #374151;
}

.daterangepicker .drp-buttons {
    border-top: 1px solid #e2e8f0;
    padding: 0.5rem 0.25rem 0.25rem;
}

.daterangepicker .drp-buttons .btn {
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
}

.daterangepicker .drp-buttons .applyBtn {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.daterangepicker .drp-buttons .applyBtn:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

.daterangepicker .drp-buttons .cancelBtn {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #374151;
}

.admin-date-input {
    cursor: pointer;
}

.dark .admin-date-input {
    color: #e5e7eb;
    background: #2d3139;
}

.dark .daterangepicker {
    background: #2d3139;
    border-color: #404854;
    color: #e5e7eb;
}

.dark .daterangepicker .calendar-table {
    background: #2d3139;
    border-color: #404854;
}

.dark .daterangepicker td,
.dark .daterangepicker th {
    color: #c2c9d6;
}

.dark .daterangepicker th.month {
    color: #e5e7eb;
}

.dark .daterangepicker td.available:hover,
.dark .daterangepicker th.available:hover {
    background-color: #404854;
    color: #f3f4f6;
}

.dark .daterangepicker td.off,
.dark .daterangepicker td.off.in-range,
.dark .daterangepicker td.off.start-date,
.dark .daterangepicker td.off.end-date {
    background-color: #2d3139;
    color: #6b7280;
}

.dark .daterangepicker td.in-range {
    background-color: color-mix(in srgb, var(--color-primary-600) 22%, #2d3139);
    color: #dbeafe;
}

.dark .daterangepicker select.monthselect,
.dark .daterangepicker select.yearselect {
    border-color: #404854;
    background: #25282e;
    color: #e5e7eb;
}

.dark .daterangepicker .drp-buttons {
    border-top-color: #404854;
}

.dark .daterangepicker .drp-buttons .cancelBtn {
    background: #25282e;
    border-color: #404854;
    color: #e5e7eb;
}

/* Form autocomplete — CSS-based (AJAX-loaded modals are outside Tailwind CDN scan) */
.tlx-autocomplete {
    position: relative;
    width: 100%;
}

.tlx-autocomplete__panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 200;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.08);
}

.tlx-autocomplete__panel.is-open {
    display: block;
}

/* Modal bodies scroll, but autocomplete panels must not be clipped */
.tlx-modal__body:has(.tlx-autocomplete__panel.is-open) {
    overflow: visible;
}

.tlx-autocomplete__options {
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem 0;
    margin: 0;
    list-style: none;
}

.tlx-autocomplete__message {
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
}

.tlx-autocomplete__message--error {
    color: #dc2626;
}

.tlx-autocomplete__option {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 0.875rem;
    color: #1f2937;
    cursor: pointer;
}

.tlx-autocomplete__option:hover,
.tlx-autocomplete__option.is-active {
    background: #f3f4f6;
}

.tlx-autocomplete__option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Storage server type picker (server add/edit) */
.tlx-server-type-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .tlx-server-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tlx-server-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tlx-server-type-option {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}

.tlx-server-type-option:hover:not(.tlx-server-type-option--static) {
    border-color: #cbd5e1;
    box-shadow: var(--shadow-card);
}

.tlx-server-type-option--active {
    border-color: var(--color-primary-500);
    background: var(--color-primary-50);
    box-shadow: 0 0 0 1px var(--color-primary-500);
}

.tlx-server-type-option--static {
    cursor: default;
}

.tlx-server-type-option img {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    object-fit: contain;
}

.tlx-server-type-option__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
}

.tlx-server-type-option__desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

.tlx-stat-tile__value--warning {
    color: #ea580c;
}

.tlx-stat-tile__value--danger {
    color: #dc2626;
}

.tlx-stat-tile__sub {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
}

/* Server resource usage section header (title + intro vs last updated). */
.tlx-resource-stats-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tlx-resource-stats-header__main {
    min-width: 0;
}

.tlx-resource-stats-header__meta {
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .tlx-resource-stats-header {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
    }

    .tlx-resource-stats-header__main {
        flex: 1 1 auto;
        padding-right: 1rem;
    }
}

/* KPI stat cards with optional 7-day mini bar history (server add/edit). */
@media (min-width: 1280px) {
    .tlx-resource-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.tlx-stat-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.tlx-stat-card__body {
    flex: 1 1 auto;
    padding: 1rem 1rem 0.75rem;
}

.tlx-stat-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tlx-stat-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.tlx-stat-card__value {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: #1e293b;
}

.tlx-stat-card__value--warning {
    color: #ea580c;
}

.tlx-stat-card__value--danger {
    color: #dc2626;
}

.tlx-stat-card__sub {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

.tlx-stat-card__chart {
    margin-top: auto;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.tlx-stat-card__chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
}

.tlx-stat-card__chart--empty .tlx-stat-card__chart-content,
.tlx-stat-card__chart--error .tlx-stat-card__chart-content {
    display: none;
}

.tlx-stat-card__chart-empty-msg {
    margin: 0;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
}

.tlx-stat-card__chart .tlx-mini-bar-chart--wide {
    min-width: 100%;
}

.tlx-stat-card__chart-caption {
    margin: 0.5rem 0 0;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    text-align: center;
}

.tlx-stat-card__chart-caption-sub {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #cbd5e1;
}

.tlx-mini-bar-chart--wide {
    max-width: none;
    width: 100%;
    height: 2.75rem;
    padding: 0 0.25rem;
}

.tlx-mini-bar-chart--wide .tlx-mini-bar-chart__bar {
    max-width: none;
}

/* Label-left form rows (plugin settings and similar). */
.tlx-form-rows {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tlx-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.375rem 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f5f9;
    align-items: start;
}

.tlx-form-rows > .tlx-form-row:first-child,
.tlx-form-row:first-child {
    padding-top: 0;
}

.tlx-form-rows > .tlx-form-row:last-child,
.tlx-form-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Conditional field groups (e.g. watermark options) — avoid double divider with the toggle row above. */
.tlx-form-rows > .tlx-form-row:has(+ .watermarkHiddenRow),
.tlx-form-rows > .tlx-form-row:has(+ [class*="HiddenRow"]),
.tlx-form-rows > .tlx-form-row:has(+ .ppsOptions),
.tlx-form-rows > .tlx-form-row:has(+ .ppdOptions),
.tlx-form-rows > .tlx-form-row:has(+ .cPanelOptions),
.tlx-form-rows > .tlx-form-row:has(+ .proFTPDOptions),
.tlx-form-rows > .tlx-form-row:has(+ .socialToggleWrapper) {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Optional flat rows (e.g. rewards settings cards). */
.tlx-form-rows--flat > .tlx-form-row,
.tlx-form-rows--flat .tlx-form-row {
    border-bottom: 0;
}

.watermarkHiddenRow > .tlx-form-row:first-child {
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
}

html.dark .watermarkHiddenRow > .tlx-form-row:first-child {
    border-top-color: color-mix(in srgb, #334155 55%, transparent);
}

@media (min-width: 768px) {
    .tlx-form-row {
        grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    }
}

.tlx-form-row__label {
    margin: 0;
    padding-top: 0.5rem;
}

.tlx-form-row__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tlx-form-row__field > .tlx-yes-no-toggle {
    padding-top: 0.125rem;
}

.tlx-form-row__field .input-description {
    margin-top: 0.5rem;
}

.tlx-form-row__field .input-description ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    list-style: disc;
}

.tlx-form-row__field .input-description ul li {
    margin: 0;
}

html.dark .tlx-form-row {
    border-bottom-color: color-mix(in srgb, #334155 55%, transparent);
}

/* Full-width responsive form grids (server add/edit and similar). */
.tlx-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: 100%;
}

@media (min-width: 768px) {
    .tlx-form-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tlx-form-grid--2 > .md\:col-span-2 {
        grid-column: 1 / -1;
    }
}

.tlx-form-grid .input-root,
.tlx-form-panel .input-root {
    min-width: 0;
}

.tlx-form-panel .input-description ul,
.tlx-form-panel .input-root ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    color: #64748b;
}

.tlx-form-panel .input-description ul a,
.tlx-form-panel .input-root ul a {
    color: var(--color-primary-600);
    text-decoration: underline;
}

.tlx-form-panel .adminList {
    list-style: disc;
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

.tlx-form-panel .adminList a {
    color: var(--color-primary-600);
    text-decoration: underline;
}

.tlx-form-panel .tlx-prose-block {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.tlx-form-panel select.form-select[multiple] {
    min-height: 250px;
}

/* Site settings (setting_manage) — deep-link field row highlight (?selectedItem=). */
.tlx-site-settings .tlx-site-setting-item[id] {
    scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.tlx-site-settings .tlx-site-setting-item--highlighted {
    background-color: color-mix(in srgb, var(--color-primary-50) 80%, #ffffff);
    border-radius: 0.5rem;
    border-left: 3px solid var(--color-primary-500);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-500) 12%, transparent);
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: calc(0.5rem - 3px);
    padding-right: 0.5rem;
}

html.dark .tlx-site-settings .tlx-site-setting-item--highlighted {
    background-color: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
    border-left-color: var(--color-primary-400);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-400) 22%, transparent);
}

.tlx-site-settings .tlx-site-setting-item--narrow .input-wrapper {
    max-width: 14rem;
}

.tlx-site-settings .tlx-site-setting-item--narrow select[multiple],
.tlx-site-settings .tlx-site-setting-item--narrow textarea {
    max-width: 100%;
}

.tlx-site-settings select[multiple] {
    min-height: 10rem;
}

.tlx-site-settings .input-description a {
    color: var(--color-primary-600);
    text-decoration: underline;
}

.tlx-site-settings .input-description code {
    display: block;
    margin: 0.35rem 0 0;
    padding: 0.5rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    word-break: break-all;
}

/* Admin page layout helpers (replaces legacy Bootstrap grid wrappers). */
.admin-layout-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.admin-layout-full {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}

/* Plugin settings — legacy two-column layout (prefer tlx-card__body + input-root). */
.tlx-card > form:not(:has(.tlx-card__body)),
form > .tlx-card:not(:has(.tlx-card__body)) {
    padding: 1.25rem;
}

.clearfix.admin-layout-full {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .clearfix.admin-layout-full {
        grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
        align-items: start;
    }
}

.admin-form__field--side h2,
.admin-form__field--side h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
}

.admin-form__field--side > p:not([class]) {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.admin-form__field--main {
    min-width: 0;
}

.tlx-card .form > .clearfix,
.tlx-card .form > .form-group {
    display: grid;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.tlx-card .form > .clearfix:last-child,
.tlx-card .form > .form-group:last-child {
    margin-bottom: 0;
}

.tlx-card .form > .clearfix > label,
.tlx-card .form > .form-group > label,
.tlx-card .form .control-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}

.tlx-card .form > .clearfix > .input,
.tlx-card .form > .form-group > .admin-form__field {
    min-width: 0;
}

.tlx-card .form select,
.tlx-card .form input[type="text"],
.tlx-card .form input[type="number"],
.tlx-card .form input[type="password"],
.tlx-card .form input[type="email"],
.tlx-card .form input[type="file"],
.tlx-card .form textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    min-height: 2.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: #0f172a;
    background: #fff;
}

.tlx-card .form select:not([multiple]) {
    appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 1rem;
}

.tlx-card .form textarea {
    min-height: 5rem;
    resize: vertical;
}

.tlx-card .form .formFieldFix {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #94a3b8;
}

/* Joined controls (width/height px fields in plugin settings, etc.) */
.admin-tw-join {
    align-items: stretch;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    display: inline-flex;
    flex-wrap: nowrap;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.admin-tw-join:focus-within {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.22);
}

.admin-tw-join > * + * {
    border-left: 1px solid #e2e8f0;
}

.admin-tw-join-addon,
.admin-tw-join .admin-tw-join-addon {
    align-items: center;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0 0.65rem;
    white-space: nowrap;
}

.admin-tw-join input[type="text"],
.admin-tw-join input[type="number"],
.admin-tw-join input.small,
.admin-tw-join select {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 1 auto;
    min-width: 4rem;
    width: auto;
    min-height: 2.5rem;
}

.admin-tw-join input:focus,
.admin-tw-join select:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none;
}

.tlx-intro-text code,
.tlx-form-panel .tlx-intro-text code {
    display: block;
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    word-break: break-all;
}

.tlx-intro-text pre,
.tlx-form-panel .tlx-intro-text pre {
    margin: 0.5rem 0 0;
    padding: 0.875rem 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

html.dark .tlx-intro-text code,
html.dark .tlx-form-panel .tlx-intro-text code,
html.dark .tlx-intro-text pre,
html.dark .tlx-form-panel .tlx-intro-text pre {
    color: #e2e8f0;
    background: color-mix(in srgb, #1e293b 80%, transparent);
    border-color: color-mix(in srgb, #334155 70%, transparent);
}

/* JSON / code blocks (API testing tool, documentation). */
pre.literal-block {
    margin: 0.75rem 0 0;
    padding: 0.875rem 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* API documentation — sidebar nav + reference content. */
.api-doc {
    --api-doc-scroll-offset: calc(var(--header-height) + 1rem);
    width: 100%;
}

.api-doc__layout {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.api-doc__nav {
    position: sticky;
    top: var(--api-doc-scroll-offset);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.api-doc__nav h4 {
    margin: 1rem 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.api-doc__nav h4:first-child {
    margin-top: 0;
}

.api-doc__nav-top {
    margin: 0 0 0.625rem;
    padding: 0 0 0.625rem;
    list-style: none;
}

.api-doc__nav-top li {
    margin: 0;
}

.api-doc__nav-group {
    margin-top: 0.125rem;
}

.api-doc__nav-group + .api-doc__nav-group {
    margin-top: 0.125rem;
}

.api-doc__nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.375rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.api-doc__nav-toggle:hover,
.api-doc__nav-toggle:focus-visible {
    color: #334155;
    background: #f8fafc;
    outline: none;
}

.api-doc__nav-toggle-label {
    min-width: 0;
}

.api-doc__nav-toggle-icon {
    color: #94a3b8;
    transition: transform 0.25s ease;
}

.api-doc__nav-toggle[aria-expanded="true"] .api-doc__nav-toggle-icon {
    transform: rotate(90deg);
}

.api-doc__nav-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.api-doc__nav-panel.is-open {
    max-height: 60rem;
}

.api-doc__nav-panel > ul {
    margin: 0;
    padding: 0.125rem 0 0.375rem 0.875rem;
    list-style: none;
}

.api-doc__nav-panel > ul a {
    margin-left: 0;
    padding-left: 0.625rem;
}

.api-doc__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.api-doc__nav li {
    margin: 0;
}

.api-doc__nav a {
    display: block;
    padding: 0.3125rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #475569;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.api-doc__nav a:hover,
.api-doc__nav a.is-active {
    color: var(--color-primary-600);
    background: #f1f5f9;
}

.api-doc__nav-note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #94a3b8;
}

/* In-page anchors sit below the sticky admin header when jumped to from the nav. */
.api-doc__content [id] {
    scroll-margin-top: var(--api-doc-scroll-offset);
}

.api-doc__card {
    min-width: 0;
}

.api-doc__card-body {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.api-doc__content .x_title {
    margin: 2rem 0 0;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.api-doc__content .x_title:first-child,
.api-doc__content #overview > .x_title {
    margin-top: 0;
}

.api-doc__content .x_title h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
}

.api-doc__content .clearfix {
    display: none;
}

.api-doc__content p,
.api-doc__content .section > p,
.api-doc__content .section dd > p,
.api-doc__content .toc-el > p {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.api-doc__content h4 {
    margin: 1.75rem 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
}

.api-doc__content .api-item-section h4 {
    margin-top: 2rem;
    padding-top: 0.25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
}

.api-doc__content a {
    color: var(--color-primary-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.api-doc__content a:hover {
    color: var(--color-primary-700);
}

.api-doc__content code {
    padding: 0.125rem 0.375rem;
    font-size: 0.8125rem;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
}

.api-doc__content pre code {
    padding: 0;
    border: 0;
    background: transparent;
}

.api-doc__content dl {
    margin: 0;
}

.api-doc__content dt {
    margin: 1rem 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
}

.api-doc__content dt.url-label {
    margin-top: 0.75rem;
}

.api-doc__content dd {
    margin: 0 0 0.75rem;
}

.api-doc__content .param {
    display: inline-block;
    margin-right: 0.375rem;
    padding: 0.125rem 0.375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
}

.api-doc__param-list,
.api-doc__content ul.parameters {
    margin: 0.5rem 0 0.75rem;
    padding-left: 1.25rem;
    list-style: disc;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.api-doc__param-list li,
.api-doc__content ul.parameters li {
    margin-bottom: 0.375rem;
}

.api-doc__content table.table-data-list {
    width: 100%;
    margin: 0.5rem 0 0.75rem;
    border-collapse: collapse;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 0.875rem;
}

.api-doc__content table.table-data-list tr:first-child td {
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
}

.api-doc__content table.table-data-list td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    border-top: 1px solid #e2e8f0;
    color: #475569;
}

.api-doc__content table.table-data-list tr:first-child td {
    border-top: 0;
}

.api-doc__content table.table-data-list td:first-child {
    width: 5rem;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
}

.api-doc__content .section + .section .x_title {
    margin-top: 2.5rem;
}

@media (max-width: 991px) {
    .api-doc__layout {
        grid-template-columns: 1fr;
    }

    .api-doc__nav {
        position: static;
        max-height: none;
    }
}

/* PHP Info page — themed override for phpinfo() output */
.tlx-phpinfo {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #334155;
}

.tlx-phpinfo pre {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.tlx-phpinfo table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
    font-size: inherit;
    table-layout: fixed;
}

.tlx-phpinfo .center,
.tlx-phpinfo center {
    text-align: left;
}

.tlx-phpinfo .center table,
.tlx-phpinfo center table {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.tlx-phpinfo .center th,
.tlx-phpinfo center th {
    text-align: left !important;
}

.tlx-phpinfo td,
.tlx-phpinfo th {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    word-break: break-word;
}

.tlx-phpinfo tr.h td,
.tlx-phpinfo tr.h th,
.tlx-phpinfo .h td,
.tlx-phpinfo .h th {
    background: #f8fafc;
    font-weight: 600;
    font-size: 0.875rem;
    color: #0f172a;
    text-align: left !important;
}

.tlx-phpinfo td.e,
.tlx-phpinfo th.e {
    background: #f1f5f9;
    font-weight: 500;
    color: #334155;
}

.tlx-phpinfo td.v,
.tlx-phpinfo td.vr {
    background: #ffffff;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
}

.tlx-phpinfo td.vr {
    text-align: right;
}

.tlx-phpinfo hr {
    width: 100%;
    max-width: none;
    height: 1px;
    margin: 1.25rem 0;
    border: 0;
    background: #e2e8f0;
}

.tlx-phpinfo img {
    float: right;
    border: 0;
    max-height: 2.5rem;
    margin: 0 0 0.5rem 0.5rem;
}

.tlx-phpinfo a {
    color: #4f46e5;
    text-decoration: none;
}

.tlx-phpinfo a:hover {
    text-decoration: underline;
    color: #4338ca;
}

.tlx-phpinfo .p {
    text-align: left;
    margin: 0.5rem 0;
}

.tlx-support-info__pre {
    margin: 0;
    padding: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.tlx-support-info__extensions {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #334155;
    word-break: break-word;
}

/* Test tools — iframe response document (test_tool_output.html.twig). */
body.test-tool-output-page {
    background: #ffffff;
}

.test-tool-output {
    padding: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.test-tool-output a {
    color: #4f46e5;
    text-decoration: none;
}

.test-tool-output a:hover {
    text-decoration: underline;
}

.test-tool-output ul {
    margin: 0.75rem 0;
    padding-left: 1.25rem;
}

.test-tool-output form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Auth pages — login / 2FA (sign-in-1 aligned; no Tailwind CDN utility deps). */
.tlx-auth-feedback {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.tlx-auth-feedback + .tlx-auth-feedback {
    margin-top: 0.25rem;
}

.tlx-auth-feedback--error {
    color: var(--color-error);
}

.tlx-auth-feedback--success {
    color: #059669;
}

.tlx-auth-feedback--info {
    color: #2563eb;
}

.tlx-auth-card {
    border-color: transparent;
    box-shadow: var(--shadow-soft);
}

.tlx-auth-card .tlx-auth-input {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 2.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.75rem;
    background: #fff;
    transition: border-color 0.2s ease;
}

.tlx-auth-card .tlx-auth-input:hover {
    border-color: #9ca3af;
}

.tlx-auth-card .tlx-auth-input:focus-within {
    border-color: var(--color-primary-600);
    outline: none;
}

.tlx-auth-card .tlx-auth-input__prefix {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.tlx-auth-card .tlx-auth-input:focus-within .tlx-auth-input__prefix {
    color: var(--color-primary-600);
}

.tlx-auth-card .tlx-auth-input input,
.tlx-auth-card .tlx-auth-input input[type="text"],
.tlx-auth-card .tlx-auth-input input[type="password"] {
    flex: 1;
    min-width: 0;
    appearance: none;
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
    background: transparent;
    padding: 0.625rem 0.75rem 0.625rem 0;
    font-size: 0.875rem;
    color: #1f2937;
    border-radius: 0 0.75rem 0.75rem 0;
}

.tlx-auth-card .tlx-auth-input input::placeholder {
    color: #9ca3af;
}

.tlx-auth-card .tlx-auth-input input:focus,
.tlx-auth-card .tlx-auth-input input:focus-visible {
    outline: none;
    box-shadow: none !important;
}

/* Test tools — iframe host on /admin/test_tools parent page. */
.test-tools-iframe-host {
    background: #ffffff;
}

.test-tools-iframe {
    background: #ffffff;
}

/* Theme manage — card grid (/admin/theme_manage). */
.tlx-theme-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .tlx-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tlx-theme-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
}

html[data-card-skin="shadow"] .tlx-theme-card {
    border-color: transparent;
    box-shadow: var(--shadow-soft);
}

.tlx-theme-card--active {
    border-color: color-mix(in srgb, var(--color-primary-500) 35%, #e2e8f0);
}

.tlx-theme-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
}

@media (min-width: 640px) {
    .tlx-theme-card__body {
        flex-direction: row;
        align-items: flex-start;
    }
}

.tlx-theme-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.tlx-theme-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.tlx-theme-card__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: #0f172a;
}

.tlx-theme-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.tlx-theme-card__meta li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.tlx-theme-card__meta a {
    color: var(--color-primary-600, #2563eb);
    word-break: break-all;
}

.tlx-theme-card__meta a:hover {
    color: var(--color-primary-700, #1d4ed8);
}

.tlx-theme-card__preview {
    flex-shrink: 0;
    width: 100%;
    max-width: 10rem;
    margin-inline: auto;
}

@media (min-width: 640px) {
    .tlx-theme-card__preview {
        width: 8.5rem;
        margin-inline: 0;
    }
}

.tlx-theme-card__preview img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    object-fit: cover;
}

.tlx-theme-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.dark .tlx-theme-card {
    border-color: #404854;
    background: #2d3139;
}

.dark .tlx-theme-card--active {
    border-color: color-mix(in srgb, var(--color-primary-400) 45%, #404854);
}

.dark .tlx-theme-card__title {
    color: #e5e7eb;
}

.dark .tlx-theme-card__preview img {
    border-color: #404854;
}

.dark .tlx-theme-card__actions {
    border-top-color: #404854;
    background: #252830;
}

.dark .tlx-theme-card__meta {
    color: #94a3b8;
}

.dark .tlx-theme-card__meta a {
    color: var(--color-primary-400, #60a5fa);
}

.dark .tlx-theme-card__meta a:hover {
    color: var(--color-primary-300, #93c5fd);
}

/* Theme settings — logo previews, styling accordion, live preview (/admin/theme_settings/*). */
.tlx-theme-logo-preview {
    display: inline-flex;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.tlx-theme-logo-preview img {
    display: block;
    max-height: 5rem;
    width: auto;
}

.tlx-theme-logo-preview--dark {
    background: #1e293b;
}

.tlx-theme-logo-preview--light {
    background: #f1f5f9;
}

.tlx-styling-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .tlx-styling-layout {
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        align-items: start;
    }
}

.tlx-styling-layout__controls {
    min-width: 0;
}

.tlx-styling-layout__preview {
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
}

.tlx-styling-preview-frame {
    display: block;
    width: 100%;
    min-width: 1050px;
    min-height: 832px;
    border: 0;
}

.tlx-styling-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tlx-styling-accordion__item {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
}

.tlx-styling-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: #334155;
    cursor: pointer;
    list-style: none;
}

.tlx-styling-accordion__summary::-webkit-details-marker {
    display: none;
}

.tlx-styling-accordion__title {
    min-width: 0;
}

.tlx-styling-accordion__reload {
    flex-shrink: 0;
}

.tlx-styling-accordion__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid #e2e8f0;
}

.tlx-styling-accordion .admin-tw-join {
    display: flex;
    width: 100%;
}

.tlx-styling-accordion .admin-tw-join input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

.dark .tlx-theme-logo-preview {
    border-color: #404854;
}

.dark .tlx-theme-logo-preview--light {
    background: #374151;
}

.dark .tlx-styling-layout__preview,
.dark .tlx-styling-accordion__item {
    border-color: #404854;
    background: #2d3139;
}

.dark .tlx-styling-layout__preview {
    background: #252830;
}

.dark .tlx-styling-accordion__summary {
    color: #e5e7eb;
}

.dark .tlx-styling-accordion__body {
    border-top-color: #404854;
}

/* Hex colour inputs with native picker swatch (theme settings, plugin settings). */
.tlx-color-picker.admin-tw-join {
    width: 100%;
}

.tlx-color-picker__addon {
    margin: 0;
    padding: 0.35rem 0.5rem;
    cursor: pointer;
}

.tlx-color-picker__native {
    display: block;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.tlx-color-picker__native::-webkit-color-swatch-wrapper {
    padding: 0;
}

.tlx-color-picker__native::-webkit-color-swatch {
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
}

.tlx-color-picker__native::-moz-color-swatch {
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
}

.dark .tlx-color-picker.admin-tw-join {
    background: #2d3139;
    border-color: #404854;
}

.dark .tlx-color-picker.admin-tw-join:focus-within {
    border-color: var(--color-primary-400, #60a5fa);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500) 25%, transparent);
}

.dark .tlx-color-picker .admin-tw-join-addon {
    background: #252830;
    color: #cbd5e1;
    border-left-color: #404854;
}

.dark .tlx-color-picker__native::-webkit-color-swatch {
    border-color: #52525b;
}

.dark .tlx-color-picker__native::-moz-color-swatch {
    border-color: #52525b;
}

/* Dashboard — KPI links and chart panels */
a.tlx-stat-tile--link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.tlx-stat-tile--link:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 35%, #e2e8f0);
    box-shadow: var(--shadow-soft);
}

.tlx-dashboard-chart-wrap {
    position: relative;
    min-height: 280px;
    /* Breathing room between the card title and the chart/content (body has pt-0). */
    padding-top: 10px;
}

.tlx-dashboard-chart-wrap--donut {
    min-height: 260px;
}

.tlx-dashboard-chart-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #ffffff 82%, transparent);
}

.tlx-dashboard-donut-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .tlx-dashboard-donut-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
}

.tlx-dashboard-chart-legend {
    min-width: 0;
}

.tlx-dashboard-legend-swatch {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 0.125rem;
    flex-shrink: 0;
}

.tlx-dashboard-chart-empty {
    margin: 0;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
}

.tlx-card .apexcharts-canvas {
    margin: 0 auto;
}

/* Quick actions bar */
.tlx-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tlx-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.625rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.tlx-quick-action:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 45%, #e2e8f0);
    color: var(--color-primary-700);
    background: color-mix(in srgb, var(--color-primary-500) 6%, #fff);
}

.tlx-quick-action .bx,
.tlx-quick-action svg {
    color: var(--color-primary-600);
}

/* KPI grid: 2 cols (mobile) -> 3 cols (tablet) -> single row that always fills (desktop). */
.tlx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .tlx-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .tlx-kpi-grid {
        display: flex;
        flex-wrap: nowrap;
    }

    .tlx-kpi-grid > * {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* KPI panel loading + tile footer/meter/delta */
.tlx-dashboard-panel {
    position: relative;
    min-height: 6rem;
}

.tlx-dashboard-kpi-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* KPI tile — Tailux-style stat card: icon avatar, prominent value, trend badge. */
.tlx-kpi-tile {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-card);
}

a.tlx-kpi-tile--link {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.tlx-kpi-tile--link:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 35%, #e2e8f0);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.tlx-kpi-tile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.tlx-kpi-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-primary-500) 12%, #fff);
    color: var(--color-primary-600);
}

.tlx-kpi-tile__glyph {
    font-size: 1.3rem;
    line-height: 1;
}

.tlx-kpi-tile__icon--primary {
    background: color-mix(in srgb, var(--color-primary-500) 12%, #fff);
    color: var(--color-primary-600);
}

.tlx-kpi-tile__icon--sky {
    background: #e0f2fe;
    color: #0284c7;
}

.tlx-kpi-tile__icon--emerald {
    background: #dcfce7;
    color: #059669;
}

.tlx-kpi-tile__icon--violet {
    background: #ede9fe;
    color: #7c3aed;
}

.tlx-kpi-tile__icon--amber {
    background: #fef3c7;
    color: #d97706;
}

.tlx-kpi-tile__icon--rose {
    background: #ffe4e6;
    color: #e11d48;
}

.tlx-kpi-tile__icon--primary-light {
    background: color-mix(in srgb, var(--color-primary-500) 6%, #fff);
    color: var(--color-primary-400);
}

.tlx-kpi-tile__icon--primary-muted {
    background: color-mix(in srgb, var(--color-primary-500) 18%, #fff);
    color: var(--color-primary-700);
}

.tlx-kpi-tile__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #0f172a;
}

.tlx-kpi-tile__value--warning {
    color: #ea580c;
}

.tlx-kpi-tile__label {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.tlx-kpi-tile__meter {
    margin-top: 0.75rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: #f1f5f9;
    overflow: hidden;
}

.tlx-kpi-tile__meter-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--color-primary-500);
}

.tlx-kpi-tile__sub {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #94a3b8;
}

.tlx-stat-delta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
}

.tlx-stat-delta.is-up {
    color: #15803d;
    background: #dcfce7;
}

.tlx-stat-delta.is-down {
    color: #b91c1c;
    background: #fee2e2;
}

/* Activity feed */
.tlx-dashboard-chart-wrap--feed,
.tlx-dashboard-chart-wrap--list {
    min-height: 18rem;
}

.tlx-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tlx-feed__item {
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-top: 1px solid #f1f5f9;
}

.tlx-feed__item:first-child {
    border-top: 0;
}

.tlx-feed__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-primary-500) 12%, #fff);
    color: var(--color-primary-600);
}

.tlx-feed__body {
    min-width: 0;
    flex: 1 1 auto;
}

.tlx-feed__message {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #334155;
}

.tlx-feed__link {
    color: var(--color-primary-600);
    text-decoration: none;
}

.tlx-feed__link:hover {
    text-decoration: underline;
}

.tlx-feed__meta {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: #94a3b8;
}

.tlx-feed__footer {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary-600);
    text-decoration: none;
}

.tlx-feed__footer:hover {
    text-decoration: underline;
}

.tlx-dashboard-chart-footnote {
    margin: 0.625rem 0 0;
    font-size: 0.6875rem;
    color: #94a3b8;
    text-align: center;
}