/*
 * T-Lab Backoffice Design System
 *
 * This stylesheet is intentionally loaded after AdminLTE, plugin styles, and
 * page-level styles. All rules are scoped to the backoffice/auth body classes
 * so the public calculator experience remains completely isolated.
 */

:root {
    /* Logo palette */
    --brand-blue: #0f69af;
    --brand-blue-dark: #0b4f86;
    --brand-blue-deep: #08385f;
    --brand-blue-soft: #eaf4fb;
    --brand-pink: #e72f89;
    --brand-pink-medium: #f05da1;
    --brand-pink-hot: #f03a83;
    --brand-pink-light: #ffa0cf;
    --brand-pink-pale: #f0d2e1;
    --brand-pink-dark: #e71d6f;
    --brand-crimson: #d90b46;
    --brand-red-pink: #d90739;

    /* Neutral foundation */
    --background: #f2f2f7;
    --surface: #ffffff;
    --surface-muted: #f7f7fa;
    --surface-subtle: #ececf1;
    --border: rgba(23, 37, 54, 0.12);
    --border-strong: rgba(23, 37, 54, 0.2);
    --text-primary: #1c1c1e;
    --text-secondary: #51515a;
    /* Dark enough to remain AA-compliant even when used as small supporting
       text on the muted surfaces. */
    --text-muted: #6e6e78;
    --text-on-color: #ffffff;

    /* Semantic colors */
    --primary: var(--brand-blue);
    --primary-hover: var(--brand-blue-dark);
    --primary-active: var(--brand-blue-deep);
    --secondary: var(--brand-pink);
    --secondary-hover: var(--brand-pink-dark);
    --success: #16845b;
    --success-dark: #106b49;
    --success-soft: #e9f7f1;
    --warning: #a45d08;
    --warning-dark: #7c4304;
    --warning-soft: #fff6e6;
    --danger: var(--brand-crimson);
    --danger-dark: #b2083a;
    --danger-soft: #fff0f4;
    --info: var(--brand-blue);
    --info-dark: var(--brand-blue-dark);
    --info-soft: var(--brand-blue-soft);

    /* Shape, depth, and motion */
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius: 11px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(10, 34, 56, 0.035);
    --shadow-sm: 0 4px 16px rgba(10, 34, 56, 0.055), 0 1px 3px rgba(10, 34, 56, 0.04);
    --shadow-md: 0 16px 40px rgba(10, 34, 56, 0.1), 0 2px 8px rgba(10, 34, 56, 0.05);
    --shadow-pop: 0 20px 55px rgba(10, 34, 56, 0.16), 0 2px 8px rgba(10, 34, 56, 0.08);
    --focus-ring: 0 0 0 3px rgba(15, 105, 175, 0.2);
    --focus-ring-danger: 0 0 0 3px rgba(217, 11, 70, 0.18);
    --transition-fast: 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);

    /* Navigation surface (kept separate so the sidebar can recede
       independently of the working canvas). */
    --nav-bg: #071d2e;
    --nav-bg-accent: #0b385a;
    --nav-text: #c7d8e5;
    --nav-text-strong: #ffffff;
    --nav-icon: #91b2c9;
    --nav-hover: rgba(255, 255, 255, 0.08);
    --nav-active-bg: rgba(15, 105, 175, 0.46);
    --nav-active-border: rgba(255, 160, 207, 0.25);
    --nav-section: #89a8bd;
    --nav-border: rgba(255, 255, 255, 0.1);

    /* Layout measurements */
    --page-gutter: 1.5rem;
}

/* --------------------------------------------------------------------------
   Foundation
   -------------------------------------------------------------------------- */

body.tlab-backoffice,
body.tlab-auth {
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    font-optical-sizing: auto;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tlab-backoffice {
    background: var(--background);
}

.tlab-backoffice a {
    color: var(--primary);
    transition: color var(--transition-fast), background-color var(--transition-fast),
        border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tlab-backoffice a:hover {
    color: var(--primary-hover);
}

.tlab-backoffice :focus-visible,
.tlab-auth :focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
}

.tlab-backoffice .tlab-skip-link {
    position: fixed;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2000;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius);
    color: #fff;
    background: var(--primary);
    box-shadow: var(--shadow-pop);
    font-weight: 650;
    transform: translateY(-160%);
}

.tlab-backoffice .tlab-skip-link:focus {
    color: #fff;
    transform: none;
}

.tlab-backoffice ::selection,
.tlab-auth ::selection {
    color: var(--text-primary);
    background: var(--brand-pink-pale);
}

.tlab-backoffice .content-wrapper {
    min-height: calc(100vh - 57px) !important;
    background:
        radial-gradient(circle at 94% 2%, rgba(231, 47, 137, 0.055), transparent 25rem),
        radial-gradient(circle at 2% 98%, rgba(15, 105, 175, 0.055), transparent 30rem),
        var(--background) !important;
}

.tlab-backoffice .content {
    padding: 0 0 2rem;
}

.tlab-backoffice .container-fluid {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.tlab-backoffice hr {
    border-color: var(--border);
}

.tlab-backoffice .text-dark {
    color: var(--text-primary) !important;
}

.tlab-backoffice .text-muted {
    color: var(--text-muted) !important;
}

.tlab-backoffice .text-primary {
    color: var(--primary) !important;
}

.tlab-backoffice .text-danger {
    color: var(--danger) !important;
}

.tlab-backoffice .text-success {
    color: var(--success) !important;
}

/* --------------------------------------------------------------------------
   Header and sidebar navigation
   -------------------------------------------------------------------------- */

.tlab-backoffice .main-header {
    min-height: 62px;
    padding: 0.45rem 1rem;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: rgba(250, 250, 252, 0.78) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 24px rgba(10, 34, 56, 0.045);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.tlab-backoffice .main-header .navbar-nav {
    align-items: center;
}

.tlab-backoffice .main-header [data-widget="pushmenu"] {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    background: var(--surface);
}

.tlab-backoffice .main-header .tlab-nav-toggle {
    padding: 0;
    cursor: pointer;
}

.tlab-backoffice .sidebar-section-title {
    list-style: none;
}

.tlab-backoffice .main-header [data-widget="pushmenu"]:hover {
    border-color: rgba(15, 105, 175, 0.3);
    color: var(--primary);
    background: var(--info-soft);
}

.tlab-backoffice .main-header [data-widget="pushmenu"] i {
    color: inherit !important;
}

.tlab-backoffice .main-sidebar,
.tlab-backoffice .sidebar-custom,
.tlab-backoffice .sidebar {
    color: var(--nav-text) !important;
    background: var(--nav-bg) !important;
    background-image: linear-gradient(180deg, var(--nav-bg-accent) 0%, var(--nav-bg) 42%, var(--nav-bg) 100%) !important;
}

.tlab-backoffice .main-sidebar {
    overflow: hidden !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
}

.tlab-backoffice .brand-link {
    position: relative;
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: flex-start;
    padding: 0.7rem 1rem;
    overflow: hidden;
    border-bottom: 1px solid var(--nav-border) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: none !important;
    transition: padding var(--transition);
}

/* The one place the blue→pink gradient appears at full strength: a 2px rule
   under the logo. */
.tlab-backoffice .brand-link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--brand-blue) 0 52%, var(--brand-pink) 52% 100%);
}

.tlab-backoffice .brand-image {
    float: none;
    width: auto;
    margin: 0 !important;
    object-fit: contain;
    opacity: 1 !important;
}

.tlab-backoffice .brand-image--full {
    max-width: 132px !important;
    height: 34px !important;
    max-height: 34px !important;
}

.tlab-backoffice .brand-image--mark {
    display: none;
    width: 30px !important;
    height: 30px !important;
}

.tlab-backoffice .brand-text {
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    color: var(--text-primary) !important;
    font-size: 0.95rem;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
}

.tlab-backoffice .sidebar {
    padding: 0.65rem 0.55rem 1.25rem;
}

.tlab-backoffice .sidebar nav.mt-3 {
    margin-top: 0.35rem !important;
}

/* The languages a market account works in. One compact row that sits like a
   quiet navigation item: icon, a small label, the value, and — when there are
   several languages — a chevron that opens the full list. Names wrap in the
   list instead of being cut off. */
.tlab-backoffice .sidebar-access {
    margin: 0.15rem 0.25rem 0.5rem;
    border: 1px solid rgba(160, 207, 240, 0.14);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    color: var(--nav-text);
    text-align: left;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tlab-backoffice .sidebar-access__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.45rem 0.7rem;
    list-style: none;
}

.tlab-backoffice .sidebar-access__row::-webkit-details-marker {
    display: none;
}

.tlab-backoffice .sidebar-access--list > .sidebar-access__row {
    cursor: pointer;
    border-radius: var(--radius);
}

.tlab-backoffice .sidebar-access--list > .sidebar-access__row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.tlab-backoffice .sidebar-access--list > .sidebar-access__row:focus-visible {
    outline: 2px solid rgba(160, 207, 240, 0.6);
    outline-offset: -2px;
}

.tlab-backoffice .sidebar-access__icon {
    flex: 0 0 auto;
    width: 1.1rem;
    color: var(--nav-icon);
    font-size: 0.9rem;
    text-align: center;
}

.tlab-backoffice .sidebar-access__text {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}

.tlab-backoffice .sidebar-access__label {
    color: var(--nav-section);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tlab-backoffice .sidebar-access__value {
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tlab-backoffice .sidebar-access__chevron {
    flex: 0 0 auto;
    color: var(--nav-icon);
    font-size: 0.65rem;
    transition: transform var(--transition-fast);
}

.tlab-backoffice .sidebar-access[open] {
    border-color: rgba(160, 207, 240, 0.24);
    background: rgba(255, 255, 255, 0.06);
}

.tlab-backoffice .sidebar-access[open] .sidebar-access__chevron {
    transform: rotate(180deg);
}

.tlab-backoffice .sidebar-access__list {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding: 0.1rem 0.7rem 0.6rem calc(0.7rem + 1.1rem + 0.65rem);
    list-style: none;
}

.tlab-backoffice .sidebar-access__list li {
    position: relative;
    padding: 0.2rem 0;
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tlab-backoffice .sidebar-access__list li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: -0.85rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-pink-light);
}

.tlab-backoffice .sidebar-section-title {
    margin: 1rem 0.55rem 0.35rem;
    padding: 0;
    overflow: hidden;
    border: 0 !important;
    color: var(--nav-section);
    background: transparent !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .nav-sidebar .nav-item {
    margin: 2px 0 !important;
}

.tlab-backoffice .nav-sidebar .nav-link,
.tlab-backoffice .sidebar .nav-sidebar .nav-link {
    position: relative;
    display: flex;
    min-height: 44px;
    align-items: center;
    margin: 0 !important;
    padding: 0.58rem 0.75rem !important;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius) !important;
    color: var(--nav-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color var(--transition), background-color var(--transition),
        border-color var(--transition), transform var(--transition) !important;
}

.tlab-backoffice .nav-sidebar .nav-link .nav-icon {
    width: 22px;
    min-width: 22px;
    margin: 0 0.7rem 0 0 !important;
    color: var(--nav-icon) !important;
    font-size: 0.88rem;
    transition: color var(--transition), transform var(--transition) !important;
}

.tlab-backoffice .nav-sidebar .nav-link .nav-text {
    color: inherit;
    font-size: 0.88rem;
    font-weight: 500;
}

.tlab-backoffice .sidebar .nav-sidebar .nav-link:hover,
.tlab-backoffice .sidebar .nav-sidebar .nav-link:focus {
    border-color: transparent !important;
    color: var(--nav-text-strong) !important;
    background: var(--nav-hover) !important;
    box-shadow: none !important;
}

.tlab-backoffice .sidebar .nav-sidebar .nav-link:hover .nav-icon,
.tlab-backoffice .sidebar .nav-sidebar .nav-link:focus .nav-icon {
    color: #c8dcea !important;
}

.tlab-backoffice .nav-sidebar .nav-link.active,
.tlab-backoffice .sidebar .nav-sidebar .nav-link.active {
    border-color: var(--nav-active-border) !important;
    color: var(--nav-text-strong) !important;
    background: var(--nav-active-bg) !important;
    box-shadow: none !important;
}

.tlab-backoffice .nav-sidebar .nav-link.active::after {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 2px;
    border-radius: 0 2px 2px 0;
    content: "";
    background: var(--brand-pink);
}

.tlab-backoffice .nav-sidebar .nav-link.active .nav-icon {
    color: #ffffff !important;
}

.tlab-backoffice .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(255, 160, 207, 0.45) !important;
}

/* Header controls */
.tlab-backoffice .navbar_dropdown {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-xs);
}

.tlab-backoffice .navbar_dropdown > .nav-link {
    min-height: 38px;
    padding: 0.45rem 0.75rem;
    border-radius: inherit;
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.tlab-backoffice .navbar_dropdown > .nav-link:hover,
.tlab-backoffice .navbar_dropdown.show > .nav-link {
    color: var(--primary) !important;
    background: var(--info-soft);
}

.tlab-backoffice .navbar_dropdown > .nav-link i {
    color: var(--primary) !important;
}

.tlab-backoffice .current_language {
    display: inline-flex;
    align-items: center;
    margin: 0 0.65rem 0 0 !important;
    padding: 0.25rem 0.55rem !important;
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--surface-subtle);
    font-size: 0.78rem;
    font-weight: 600;
}

.tlab-backoffice .dark-mode-container {
    position: relative;
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0 !important;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
}

.tlab-backoffice .dark-toggle-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.tlab-backoffice .mode-label {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.tlab-backoffice .dark-toggle-label {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 22px;
    flex: 0 0 42px;
    align-items: center;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: #dbe3eb;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Keep the visual switch compact while providing a 44px touch target. */
.tlab-backoffice .dark-toggle-label::before {
    position: absolute;
    inset: -11px -1px;
    content: "";
}

.tlab-backoffice .toggle-slider {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(10, 34, 56, 0.24);
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tlab-backoffice .dark-toggle-checkbox:focus-visible + .dark-toggle-label {
    border-color: var(--brand-blue);
    box-shadow: var(--focus-ring);
}

.tlab-backoffice .dark-toggle-checkbox:checked + .dark-toggle-label {
    border-color: var(--brand-blue);
    background: var(--brand-blue);
}

.tlab-backoffice .dark-toggle-checkbox:checked + .dark-toggle-label .toggle-slider {
    transform: translateX(18px);
}

/* --------------------------------------------------------------------------
   Page hierarchy, breadcrumbs, surfaces
   -------------------------------------------------------------------------- */

.tlab-backoffice .content-header {
    padding: 1.65rem 0 1rem;
}

.tlab-backoffice .content-header .row {
    align-items: center;
}

.tlab-backoffice .content-header h1,
.tlab-backoffice .content-header .page-title {
    position: relative;
    display: inline-block;
    margin: 0 !important;
    padding-left: 0.8rem;
    color: var(--text-primary);
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.tlab-backoffice .content-header h1::before,
.tlab-backoffice .content-header .page-title::before {
    position: absolute;
    top: 0.15em;
    bottom: 0.1em;
    left: 0;
    width: 4px;
    border-radius: 999px;
    content: "";
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-pink));
}

.tlab-backoffice .breadcrumb {
    margin: 0;
    padding: 0.4rem 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.86rem;
}

.tlab-backoffice .breadcrumb-item,
.tlab-backoffice .breadcrumb-item.active {
    color: var(--text-muted);
}

.tlab-backoffice .breadcrumb-item a {
    color: var(--text-secondary) !important;
}

.tlab-backoffice .breadcrumb-item a:hover {
    color: var(--primary) !important;
}

.tlab-backoffice .breadcrumb-item + .breadcrumb-item::before {
    color: var(--border-strong);
}

.tlab-backoffice .card,
.tlab-backoffice .info-box,
.tlab-backoffice .small-box {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface);
    box-shadow: var(--shadow-sm) !important;
}

.tlab-backoffice .card {
    margin-bottom: 1.25rem;
    overflow: hidden;
    color: var(--text-primary);
}

.tlab-backoffice .card-header {
    min-height: 52px;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    background: var(--surface-muted) !important;
}

.tlab-backoffice .card-secondary > .card-header,
.tlab-backoffice .card-header.bg-primary,
.tlab-backoffice .card-header.bg-secondary {
    position: relative;
    color: var(--text-primary) !important;
    background: linear-gradient(90deg, var(--info-soft), var(--surface-muted) 55%, #fff6fa) !important;
}

.tlab-backoffice .card-secondary > .card-header::before,
.tlab-backoffice .card-header.bg-primary::before,
.tlab-backoffice .card-header.bg-secondary::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    content: "";
    background: linear-gradient(180deg, var(--brand-blue), var(--brand-pink));
}

.tlab-backoffice .card-title {
    color: inherit !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.005em;
}

.tlab-backoffice .card-title i {
    color: var(--primary);
}

.tlab-backoffice .card-body {
    padding: 1.25rem;
    background: var(--surface);
}

.tlab-backoffice .card-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

.tlab-backoffice .card-outline.card-primary {
    border-top: 3px solid var(--primary) !important;
}

.tlab-backoffice .card-outline.card-danger {
    border-top: 3px solid var(--danger) !important;
}

.tlab-backoffice .list-group-item {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--surface);
    transition: background-color var(--transition), border-color var(--transition);
}

.tlab-backoffice .list-group-item-action:hover,
.tlab-backoffice .list-group-item-action:focus {
    color: var(--text-primary);
    background: var(--info-soft);
}

.tlab-backoffice .avatar-circle {
    transition: color var(--transition), background-color var(--transition),
        transform var(--transition);
}

.tlab-backoffice .list-group-item:hover .avatar-circle {
    color: var(--primary);
    background: var(--info-soft) !important;
    transform: scale(1.04);
}

/* Dashboard information cards */
.tlab-backoffice .info-box {
    min-height: 96px;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition) !important;
}

.tlab-backoffice a:hover .info-box,
.tlab-backoffice .info-box:hover {
    border-color: rgba(15, 105, 175, 0.3) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.tlab-backoffice .info-box-icon {
    width: 76px !important;
    height: auto !important;
    border-radius: 0 !important;
    color: var(--primary) !important;
    background: linear-gradient(145deg, var(--brand-blue-soft), #f8fbfe) !important;
    font-size: 1.35rem !important;
}

.tlab-backoffice .info-box:nth-child(even) .info-box-icon,
.tlab-backoffice [class*="col-"]:nth-child(3n + 2) .info-box-icon {
    color: var(--brand-pink-dark) !important;
    background: linear-gradient(145deg, #fff0f7, #fffafd) !important;
}

.tlab-backoffice .info-box-content {
    padding: 0.8rem 1rem;
}

.tlab-backoffice .info-box-text {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tlab-backoffice .info-box-number {
    color: var(--text-primary);
    font-size: 1.55rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Buttons and controls
   -------------------------------------------------------------------------- */

.tlab-backoffice .btn,
.tlab-auth .btn,
.swal2-container .swal2-styled {
    min-height: 38px;
    padding: 0.42rem 0.85rem;
    border-radius: var(--radius-sm) !important;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    box-shadow: none;
    transition: color var(--transition-fast), background-color var(--transition-fast),
        border-color var(--transition-fast), box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.tlab-backoffice .btn-sm,
.tlab-auth .btn-sm {
    min-height: 32px;
    padding: 0.28rem 0.65rem;
    font-size: 0.8rem;
}

.tlab-backoffice .btn-lg,
.tlab-auth .btn-lg {
    min-height: 44px;
    padding: 0.58rem 1rem;
}

.tlab-backoffice .btn:not(:disabled):not(.disabled):active,
.tlab-auth .btn:not(:disabled):not(.disabled):active {
    transform: scale(0.97);
    transition-duration: 90ms;
}

.tlab-backoffice .btn-primary,
.tlab-auth .btn-primary,
.swal2-container .swal2-confirm {
    border-color: var(--primary) !important;
    color: #ffffff !important;
    background: var(--primary) !important;
}

.tlab-backoffice .btn-primary:hover,
.tlab-backoffice .btn-primary:focus,
.tlab-auth .btn-primary:hover,
.tlab-auth .btn-primary:focus,
.swal2-container .swal2-confirm:hover {
    border-color: var(--primary-hover) !important;
    color: #ffffff !important;
    background: var(--primary-hover) !important;
    box-shadow: var(--focus-ring) !important;
}

.tlab-backoffice .btn-secondary,
.tlab-backoffice .btn-default,
.tlab-auth .btn-secondary,
.swal2-container .swal2-cancel {
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
}

.tlab-backoffice .btn-secondary:hover,
.tlab-backoffice .btn-default:hover,
.tlab-backoffice .btn-secondary:focus,
.tlab-backoffice .btn-default:focus,
.swal2-container .swal2-cancel:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: var(--info-soft) !important;
}

.tlab-backoffice .btn-info {
    border-color: var(--info) !important;
    color: #ffffff !important;
    background: var(--info) !important;
}

.tlab-backoffice .btn-info:hover,
.tlab-backoffice .btn-info:focus {
    border-color: var(--info-dark) !important;
    background: var(--info-dark) !important;
    box-shadow: var(--focus-ring) !important;
}

.tlab-backoffice .btn-success {
    border-color: var(--success) !important;
    color: #ffffff !important;
    background: var(--success) !important;
}

.tlab-backoffice .btn-success:hover,
.tlab-backoffice .btn-success:focus {
    border-color: var(--success-dark) !important;
    background: var(--success-dark) !important;
    box-shadow: 0 0 0 3px rgba(22, 132, 91, 0.18) !important;
}

.tlab-backoffice .btn-warning {
    border-color: var(--warning) !important;
    color: #ffffff !important;
    background: var(--warning) !important;
}

.tlab-backoffice .btn-danger,
.tlab-backoffice .bg-danger.btn {
    border-color: var(--danger) !important;
    color: #ffffff !important;
    background: var(--danger) !important;
}

.tlab-backoffice .btn-danger:hover,
.tlab-backoffice .btn-danger:focus,
.tlab-backoffice .bg-danger.btn:hover,
.tlab-backoffice .bg-danger.btn:focus {
    border-color: var(--danger-dark) !important;
    background: var(--danger-dark) !important;
    box-shadow: 0 0 0 3px rgba(217, 11, 70, 0.17) !important;
}

.tlab-backoffice .btn-outline-primary {
    border-color: rgba(15, 105, 175, 0.55) !important;
    color: var(--primary) !important;
    background: transparent !important;
}

.tlab-backoffice .btn-outline-primary:hover,
.tlab-backoffice .btn-outline-primary:focus {
    border-color: var(--primary) !important;
    color: #ffffff !important;
    background: var(--primary) !important;
}

.tlab-backoffice .btn-outline-secondary {
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: var(--surface) !important;
}

.tlab-backoffice .btn-outline-secondary:hover,
.tlab-backoffice .btn-outline-secondary:focus {
    border-color: var(--brand-pink) !important;
    color: var(--brand-pink-dark) !important;
    background: #fff2f8 !important;
}

.tlab-backoffice .btn:disabled,
.tlab-backoffice .btn.disabled,
.tlab-auth .btn:disabled,
.tlab-auth .btn.disabled {
    border-color: var(--border) !important;
    color: #8b97a5 !important;
    background: #e9eef3 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 0.78;
}

.tlab-backoffice .btn-group > .btn {
    border-radius: 0 !important;
}

.tlab-backoffice .btn-group > .btn:first-child {
    border-top-left-radius: var(--radius-sm) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}

.tlab-backoffice .btn-group > .btn:last-child {
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

/* --------------------------------------------------------------------------
   Forms, selects, switches, and validation
   -------------------------------------------------------------------------- */

.tlab-backoffice label,
.tlab-auth label {
    margin-bottom: 0.38rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    font-weight: 600;
}

.tlab-backoffice .form-control,
.tlab-backoffice .custom-select,
.tlab-auth .form-control,
.tlab-backoffice .select2-container .select2-selection--single,
.tlab-backoffice .select2-container .select2-selection--multiple,
.tlab-backoffice .tagify {
    min-height: 40px;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    box-shadow: inset 0 1px 1px rgba(10, 34, 56, 0.02);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

.tlab-backoffice .form-control,
.tlab-backoffice .custom-select,
.tlab-auth .form-control {
    height: 40px;
    padding: 0.45rem 0.7rem;
}

.tlab-backoffice textarea.form-control,
.tlab-auth textarea.form-control {
    height: auto;
    min-height: 96px;
    resize: vertical;
}

.tlab-backoffice .form-control::placeholder,
.tlab-auth .form-control::placeholder {
    color: #99a4b0;
    opacity: 1;
}

.tlab-backoffice .form-control:focus,
.tlab-backoffice .custom-select:focus,
.tlab-auth .form-control:focus,
.tlab-backoffice .select2-container--focus .select2-selection,
.tlab-backoffice .select2-container--open .select2-selection,
.tlab-backoffice .tagify:focus-within {
    border-color: var(--primary) !important;
    background: var(--surface) !important;
    box-shadow: var(--focus-ring) !important;
    outline: 0;
}

.tlab-backoffice .form-control:disabled,
.tlab-backoffice .form-control[readonly],
.tlab-backoffice select[readonly],
.tlab-auth .form-control:disabled {
    border-color: var(--border) !important;
    color: #778594 !important;
    background: var(--surface-subtle) !important;
    cursor: not-allowed;
    opacity: 1;
}

.tlab-backoffice .input-group-text {
    border-color: var(--border-strong);
    color: var(--text-secondary);
    background: var(--surface-subtle);
}

.tlab-backoffice .form-text,
.tlab-backoffice small {
    color: var(--text-muted);
}

.tlab-backoffice .form-control.is-invalid,
.tlab-backoffice .was-validated .form-control:invalid,
.tlab-auth .form-control.is-invalid,
.tlab-auth .was-validated .form-control:invalid {
    border-color: var(--danger) !important;
    background-color: var(--danger-soft) !important;
    box-shadow: 0 0 0 3px rgba(217, 11, 70, 0.1) !important;
}

.tlab-backoffice .invalid-feedback,
.tlab-auth .invalid-feedback {
    margin-top: 0.3rem;
    color: var(--danger) !important;
    font-size: 0.8rem;
    font-weight: 600;
}

.tlab-backoffice .form-control.is-valid,
.tlab-backoffice .was-validated .form-control:valid {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 3px rgba(22, 132, 91, 0.1) !important;
}

.tlab-backoffice input[type="checkbox"],
.tlab-backoffice input[type="radio"] {
    accent-color: var(--primary);
}

.tlab-backoffice .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
}

.tlab-backoffice .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--focus-ring) !important;
}

.tlab-backoffice .custom-switch .custom-control-label::before {
    border-color: var(--border-strong);
    background: #dce4ec;
}

.tlab-backoffice .switchery {
    border-color: var(--border-strong) !important;
    background: #dce4ec !important;
    box-shadow: inset 0 0 0 0 var(--primary) !important;
}

.tlab-backoffice .switchery > small {
    box-shadow: 0 2px 5px rgba(10, 34, 56, 0.22);
}

.tlab-backoffice .bootstrap-switch {
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
}

.tlab-backoffice .bootstrap-switch .bootstrap-switch-primary {
    background: var(--primary) !important;
}

.tlab-backoffice .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0.7rem;
    color: var(--text-primary);
    line-height: 38px;
}

.tlab-backoffice .select2-container .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.tlab-backoffice .select2-container .select2-selection--multiple {
    padding: 0.18rem 0.35rem;
}

.tlab-backoffice .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0.2rem;
    border: 1px solid rgba(15, 105, 175, 0.2);
    border-radius: 999px;
    color: var(--primary);
    background: var(--info-soft);
    font-size: 0.8rem;
}

.select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-md);
}

.select2-results__option--highlighted[aria-selected] {
    color: #ffffff !important;
    background: var(--primary) !important;
}

.tlab-backoffice .tagify {
    --tag-bg: var(--brand-blue-soft) !important;
    --tag-hover: #dbeef9 !important;
    --tag-text-color: var(--brand-blue-dark) !important;
    --tag-border-radius: 999px !important;
    --tag-remove-bg: transparent !important;
    padding: 0.15rem;
}

.tlab-backoffice .tagify__tag__removeBtn {
    color: var(--brand-blue-dark) !important;
}

.tlab-backoffice .tagify__tag__removeBtn:hover {
    color: #ffffff !important;
    background: var(--danger) !important;
}

/* --------------------------------------------------------------------------
   Tables, filters, and pagination
   -------------------------------------------------------------------------- */

.tlab-backoffice .table,
.tlab-backoffice .bootstrap-table .table {
    margin-bottom: 0;
    color: var(--text-primary);
    background: var(--surface) !important;
}

.tlab-backoffice .table thead th,
.tlab-backoffice .bootstrap-table .fixed-table-container .table thead th {
    padding: 0.8rem 0.75rem;
    border-top: 0;
    border-bottom: 1px solid var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: var(--surface-subtle) !important;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.35;
    text-transform: uppercase;
    vertical-align: middle;
}

.tlab-backoffice .table td,
.tlab-backoffice .bootstrap-table .fixed-table-container .table td {
    padding: 0.72rem 0.75rem;
    border-top: 1px solid var(--border) !important;
    color: var(--text-primary);
    background: transparent !important;
    vertical-align: middle;
}

.tlab-backoffice .table tbody tr:nth-child(odd),
.tlab-backoffice .table tbody tr:nth-child(even) {
    background: var(--surface) !important;
}

.tlab-backoffice .table tbody tr:nth-child(even) {
    background: #fbfcfe !important;
}

.tlab-backoffice .table tbody tr {
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tlab-backoffice .table tbody tr:hover {
    background: var(--info-soft) !important;
    box-shadow: inset 3px 0 0 var(--brand-pink) !important;
}

.tlab-backoffice .table tbody tr.selected,
.tlab-backoffice .table tbody tr.active {
    background: #fff1f7 !important;
    box-shadow: inset 3px 0 0 var(--brand-pink) !important;
}

.tlab-backoffice .table-bordered,
.tlab-backoffice .table-bordered th,
.tlab-backoffice .table-bordered td {
    border-color: var(--border) !important;
}

.tlab-backoffice .bootstrap-table,
.tlab-backoffice .fixed-table-container,
.tlab-backoffice .fixed-table-body,
.tlab-backoffice .fixed-table-header {
    border: 0 !important;
    background: var(--surface) !important;
}

.tlab-backoffice .fixed-table-container {
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}

.tlab-backoffice .fixed-table-toolbar {
    margin-bottom: 0.75rem;
}

.tlab-backoffice .fixed-table-toolbar .search input {
    min-width: 230px;
    padding-left: 2.15rem;
    background-image: linear-gradient(45deg, transparent 49%, var(--text-muted) 50%, transparent 51%);
    background-repeat: no-repeat;
}

.tlab-backoffice .fixed-table-toolbar .columns .btn,
.tlab-backoffice .fixed-table-toolbar .keep-open .btn {
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: var(--surface) !important;
}

.tlab-backoffice .fixed-table-pagination {
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.tlab-backoffice .page-link {
    min-width: 34px;
    margin: 0 2px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary) !important;
    background: var(--surface) !important;
    text-align: center;
}

.tlab-backoffice .page-link:hover,
.tlab-backoffice .page-link:focus {
    border-color: rgba(15, 105, 175, 0.35) !important;
    color: var(--primary) !important;
    background: var(--info-soft) !important;
    box-shadow: none;
}

.tlab-backoffice .page-item.active .page-link {
    border-color: var(--primary) !important;
    color: #ffffff !important;
    background: var(--primary) !important;
    box-shadow: 0 3px 9px rgba(15, 105, 175, 0.22);
}

.tlab-backoffice .page-item.disabled .page-link {
    color: #a2abb5 !important;
    background: var(--surface-subtle) !important;
    opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Menus, tabs, modals, accordions, and overlays
   -------------------------------------------------------------------------- */

.tlab-backoffice .dropdown-menu {
    padding: 0.4rem;
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary);
    background: var(--surface) !important;
    box-shadow: var(--shadow-md) !important;
}

.tlab-backoffice .dropdown-item {
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    font-size: 0.88rem;
}

.tlab-backoffice .dropdown-item i,
.tlab-backoffice .dropdown-item em {
    width: 18px;
    color: var(--primary);
    text-align: center;
}

.tlab-backoffice .dropdown-item:hover,
.tlab-backoffice .dropdown-item:focus,
.tlab-backoffice .dropdown-item.active {
    color: var(--primary) !important;
    background: var(--info-soft) !important;
}

.tlab-backoffice .dropdown-divider {
    border-color: var(--border);
}

.tlab-backoffice .nav-tabs {
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.tlab-backoffice .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: 0.65rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-secondary);
    font-weight: 600;
}

.tlab-backoffice .nav-tabs .nav-link:hover {
    color: var(--primary);
    background: var(--info-soft);
}

.tlab-backoffice .nav-tabs .nav-link.active {
    border-bottom-color: var(--brand-pink);
    color: var(--primary);
    background: transparent;
}

.tlab-backoffice .modal-backdrop.show {
    opacity: 0.44;
}

.tlab-backoffice .modal-content {
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary);
    background: var(--surface) !important;
    box-shadow: 0 24px 70px rgba(5, 25, 42, 0.22);
}

.tlab-backoffice .modal-header {
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, var(--info-soft), #fff7fb);
}

.tlab-backoffice .modal-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.tlab-backoffice .modal-body {
    padding: 1.25rem;
}

.tlab-backoffice .modal-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

.tlab-backoffice .close {
    color: var(--text-secondary);
    text-shadow: none;
    opacity: 0.72;
}

.tlab-backoffice .close:hover,
.tlab-backoffice .close:focus {
    color: var(--danger);
    opacity: 1;
}

.tlab-backoffice .collapse-card .card-header,
.tlab-backoffice .accordion .card-header {
    cursor: pointer;
}

.tlab-backoffice .popover {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.tlab-backoffice .popover-header {
    border-bottom-color: var(--border);
    color: var(--text-primary);
    background: var(--surface-muted);
}

.tlab-backoffice .tooltip-inner {
    padding: 0.42rem 0.65rem;
    border-radius: var(--radius-sm);
    color: #ffffff;
    background: #10283c;
    font-size: 0.78rem;
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   Badges, alerts, toasts, progress, and empty/loading states
   -------------------------------------------------------------------------- */

.tlab-backoffice .badge {
    padding: 0.34em 0.62em;
    border-radius: 999px !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.tlab-backoffice .badge-primary,
.tlab-backoffice .bg-primary:not(.btn):not(.card-header) {
    color: #ffffff !important;
    background: var(--primary) !important;
}

.tlab-backoffice .badge-secondary,
.tlab-backoffice .bg-secondary:not(.btn):not(.card-header) {
    color: var(--brand-pink-dark) !important;
    background: #fdeaf3 !important;
}

.tlab-backoffice .badge-info {
    color: var(--brand-blue-dark) !important;
    background: var(--info-soft) !important;
}

.tlab-backoffice .badge-success {
    color: var(--success-dark) !important;
    background: var(--success-soft) !important;
}

.tlab-backoffice .badge-warning {
    color: var(--warning-dark) !important;
    background: var(--warning-soft) !important;
}

.tlab-backoffice .badge-danger,
.tlab-backoffice label.badge-danger {
    color: var(--danger-dark) !important;
    background: var(--danger-soft) !important;
}

.tlab-backoffice .alert,
.tlab-auth .alert {
    position: relative;
    padding: 0.8rem 1rem;
    border-width: 1px 1px 1px 4px;
    border-style: solid;
    border-radius: var(--radius) !important;
    font-size: 0.9rem;
    line-height: 1.45;
    box-shadow: var(--shadow-xs);
}

.tlab-backoffice .alert-info,
.tlab-auth .alert-info {
    border-color: #bedceb #bedceb #bedceb var(--info);
    color: #0a4a76;
    background: var(--info-soft);
}

.tlab-backoffice .alert-success,
.tlab-auth .alert-success {
    border-color: #bce3d2 #bce3d2 #bce3d2 var(--success);
    color: #105d42;
    background: var(--success-soft);
}

.tlab-backoffice .alert-warning,
.tlab-backoffice .alert.bg-warning,
.tlab-auth .alert-warning,
.tlab-auth .alert.bg-warning {
    border-color: #f2d39e #f2d39e #f2d39e var(--warning);
    color: #704207 !important;
    background: var(--warning-soft) !important;
}

.tlab-backoffice .alert-danger,
.tlab-auth .alert-danger {
    border-color: #f3bfd0 #f3bfd0 #f3bfd0 var(--danger);
    color: #9e103b;
    background: var(--danger-soft);
}

.tlab-backoffice .progress {
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-subtle);
    box-shadow: inset 0 1px 2px rgba(10, 34, 56, 0.08);
}

.tlab-backoffice .progress-bar {
    background: linear-gradient(90deg, var(--brand-blue), #2781c5);
}

.tlab-backoffice .progress-bar.bg-success {
    background: var(--success) !important;
}

.tlab-backoffice .progress-bar.bg-danger {
    background: var(--danger) !important;
}

.tlab-backoffice .empty-state {
    min-height: 240px;
    padding: 2.5rem 1.5rem;
    color: var(--text-secondary);
}

.tlab-backoffice .empty-state .empty-state-icon {
    width: 72px;
    height: 72px;
    border: 1px solid rgba(15, 105, 175, 0.14);
    border-radius: 50%;
    color: var(--primary);
    background: var(--info-soft);
    line-height: 72px;
}

.tlab-backoffice .empty-state .empty-state-icon i {
    color: var(--primary);
    font-size: 1.75rem;
}

.tlab-backoffice .empty-state h2 {
    margin-top: 1rem;
    color: var(--text-primary);
    font-size: 1.15rem;
}

.tlab-backoffice .spinner-border {
    color: var(--primary);
}

/* SweetAlert is attached outside the scoped app wrapper, so it uses tokens. */
.swal2-container .swal2-popup {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    box-shadow: 0 20px 60px rgba(5, 25, 42, 0.2) !important;
}

.swal2-container .swal2-title,
.swal2-container .swal2-html-container {
    color: var(--text-primary) !important;
}

.swal2-container .swal2-timer-progress-bar {
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-pink)) !important;
}

.swal2-container .swal2-icon.swal2-error {
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

.swal2-container .swal2-icon.swal2-warning {
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}

.swal2-container .swal2-icon.swal2-info {
    border-color: var(--info) !important;
    color: var(--info) !important;
}

/* --------------------------------------------------------------------------
   Uploads, sortable lists, settings, and analytics
   -------------------------------------------------------------------------- */

.tlab-backoffice .filepond--panel-root {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius) !important;
    background: var(--surface-muted) !important;
}

.tlab-backoffice .filepond--drop-label {
    color: var(--text-secondary);
}

.tlab-backoffice .filepond--label-action {
    color: var(--primary);
    text-decoration-color: rgba(15, 105, 175, 0.35);
}

.tlab-backoffice #sortable-row li {
    margin-bottom: 0.4rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--surface-muted);
    cursor: move;
    transition: border-color var(--transition-fast), background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.tlab-backoffice #sortable-row li:hover {
    border-color: rgba(15, 105, 175, 0.3);
    background: var(--info-soft);
    box-shadow: var(--shadow-xs);
}

.tlab-backoffice #sortable-row li.ui-state-highlight {
    border: 2px dashed var(--brand-pink) !important;
    background: #fff1f7 !important;
}

.tlab-backoffice .system-setting-card {
    --card-accent: var(--brand-blue) !important;
    --card-accent-rgb: 15, 105, 175 !important;
    min-height: 112px;
    gap: 1rem;
    padding: 1.15rem !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--transition), border-color var(--transition),
        box-shadow var(--transition) !important;
}

.tlab-backoffice .system-setting-card::after {
    background: linear-gradient(120deg, rgba(15, 105, 175, 0.08), rgba(231, 47, 137, 0.05)) !important;
}

.tlab-backoffice .system-setting-card:hover {
    border-color: rgba(15, 105, 175, 0.35) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

.tlab-backoffice .system-setting-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    color: var(--primary);
    background: var(--info-soft) !important;
    box-shadow: none !important;
}

.tlab-backoffice [class*="col-"]:nth-child(even) .system-setting-card__icon {
    color: var(--brand-pink-dark);
    background: #fff0f7 !important;
}

.tlab-backoffice .system-setting-card__content h5,
.tlab-backoffice .system-setting-card:hover .system-setting-card__content h5 {
    color: var(--text-primary) !important;
    font-size: 1rem;
    font-weight: 700;
}

.tlab-backoffice .system-setting-card__chevron,
.tlab-backoffice .system-setting-card:hover .system-setting-card__chevron {
    color: var(--text-muted) !important;
    transform: none;
}

/* Analytics: calmer, brand-connected dashboard surfaces. */
.tlab-backoffice .analytics-page {
    min-height: 100%;
    background: transparent !important;
}

/* The page already provides the gutter (it is a .tlab-page), so the inner
   container adds none — otherwise every card sits indented from the header. */
.tlab-backoffice .analytics-page .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.tlab-backoffice .analytics-page .content-header .text-center {
    text-align: left !important;
}

.tlab-backoffice .analytics-page .content-header .text-muted {
    margin: 0.45rem 0 0 0.8rem;
}

.tlab-backoffice .filter-card,
.tlab-backoffice .chart-card,
.tlab-backoffice .table-card,
.tlab-backoffice .glossary-card,
.tlab-backoffice .modern-card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none;
}

.tlab-backoffice .filter-card:hover,
.tlab-backoffice .chart-card:hover,
.tlab-backoffice .table-card:hover,
.tlab-backoffice .glossary-card:hover,
.tlab-backoffice .modern-card:hover {
    box-shadow: var(--shadow-sm) !important;
    transform: none !important;
}

.tlab-backoffice .geo-filter {
    border: 1px solid rgba(15, 105, 175, 0.16);
    border-radius: var(--radius);
    background: linear-gradient(125deg, var(--brand-blue-soft), #fff7fb) !important;
}

.tlab-backoffice .geo-title,
.tlab-backoffice .glossary-item h6 {
    color: var(--text-primary);
}

.tlab-backoffice .geo-subtitle,
.tlab-backoffice .chart-note-list,
.tlab-backoffice .glossary-item p,
.tlab-backoffice .glossary-item ul {
    color: var(--text-secondary);
}

.tlab-backoffice .region-pill.is-active,
.tlab-backoffice .country-chip.is-active,
.tlab-backoffice .geo-trigger {
    border-color: var(--primary) !important;
    color: #ffffff !important;
    background: var(--primary) !important;
    box-shadow: 0 5px 12px rgba(15, 105, 175, 0.18) !important;
}

.tlab-backoffice .chart-card .card-header,
.tlab-backoffice .table-card .card-header,
.tlab-backoffice .glossary-card .card-header {
    color: var(--text-primary) !important;
    background: linear-gradient(90deg, var(--info-soft), #fff7fb) !important;
}

.tlab-backoffice .chart-card .card-body {
    background: var(--surface) !important;
}

.tlab-backoffice .small-box,
.tlab-backoffice .stats-card,
.tlab-backoffice .stats-card.bg-info,
.tlab-backoffice .stats-card.bg-success,
.tlab-backoffice .stats-card.bg-warning,
.tlab-backoffice .stats-card.bg-danger,
.tlab-backoffice .stats-card.bg-gradient-blue,
.tlab-backoffice .stats-card.bg-gradient-pink {
    min-height: 150px;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform var(--transition), border-color var(--transition),
        box-shadow var(--transition) !important;
}

.tlab-backoffice .stats-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-pink));
}

.tlab-backoffice .stats-card:hover {
    border-color: rgba(15, 105, 175, 0.26) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.tlab-backoffice .stats-card .inner h3,
.tlab-backoffice .stats-card .inner p {
    color: var(--text-primary) !important;
    text-shadow: none !important;
}

.tlab-backoffice .stats-card .card-note,
.tlab-backoffice .small-box .card-note {
    color: var(--text-secondary) !important;
}

.tlab-backoffice .stats-card .icon {
    color: var(--primary) !important;
    opacity: 0.1 !important;
}

.tlab-backoffice .stats-card .badge-light {
    color: var(--brand-pink-dark) !important;
    background: #fff0f7 !important;
}

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */

body.tlab-backoffice.dark-mode,
body.tlab-error.dark-mode {
    --background: #101923;
    --surface: #17232f;
    --surface-muted: #1b2a38;
    --surface-subtle: #223342;
    --border: #304352;
    --border-strong: #405567;
    --text-primary: #edf4f8;
    --text-secondary: #b5c4d0;
    --text-muted: #8fa2b1;
    --brand-blue-soft: #17374e;
    --success-soft: #16382e;
    --warning-soft: #3c301c;
    --danger-soft: #421c2a;
    --info-soft: #17374e;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.16);
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.tlab-backoffice.dark-mode .main-sidebar,
.tlab-backoffice.dark-mode .sidebar-custom,
.tlab-backoffice.dark-mode .sidebar {
    color: #dce8f3 !important;
    background: #0b2032 !important;
    background-image: linear-gradient(180deg, #0d2b43 0%, #0a1e2f 58%, #071723 100%) !important;
}

.tlab-backoffice.dark-mode,
.tlab-backoffice.dark-mode .content-wrapper,
.tlab-backoffice.dark-mode .content,
.tlab-backoffice.dark-mode .wrapper {
    color: var(--text-primary) !important;
    background: var(--background) !important;
}

.tlab-backoffice.dark-mode .main-header {
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    background: rgba(23, 35, 47, 0.97) !important;
}

.tlab-backoffice.dark-mode .brand-link {
    background: #ffffff !important;
}

.tlab-backoffice.dark-mode .brand-text {
    color: #172536 !important;
}

.tlab-backoffice.dark-mode .card,
.tlab-backoffice.dark-mode .card-body,
.tlab-backoffice.dark-mode .box,
.tlab-backoffice.dark-mode .modal-content,
.tlab-backoffice.dark-mode .dropdown-menu,
.tlab-backoffice.dark-mode .fixed-table-container,
.tlab-backoffice.dark-mode .fixed-table-body,
.tlab-backoffice.dark-mode .bootstrap-table,
.tlab-backoffice.dark-mode .bootstrap-table .table,
.tlab-backoffice.dark-mode .table {
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
}

.tlab-backoffice.dark-mode .card-header,
.tlab-backoffice.dark-mode .card.card-secondary > .card-header,
.tlab-backoffice.dark-mode .card-header.bg-primary,
.tlab-backoffice.dark-mode .card-header.bg-secondary,
.tlab-backoffice.dark-mode .modal-header,
.tlab-backoffice.dark-mode .modal-footer,
.tlab-backoffice.dark-mode .card-footer,
.tlab-backoffice.dark-mode .chart-card .card-header,
.tlab-backoffice.dark-mode .table-card .card-header,
.tlab-backoffice.dark-mode .glossary-card .card-header {
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    background: linear-gradient(90deg, #1b3447, var(--surface-muted)) !important;
}

.tlab-backoffice.dark-mode .table thead th,
.tlab-backoffice.dark-mode .bootstrap-table .fixed-table-container .table thead th {
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: var(--surface-subtle) !important;
}

.tlab-backoffice.dark-mode .table td,
.tlab-backoffice.dark-mode .bootstrap-table .fixed-table-container .table td {
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    background: transparent !important;
}

.tlab-backoffice.dark-mode .table tbody tr:nth-child(odd) {
    background: var(--surface) !important;
}

.tlab-backoffice.dark-mode .table tbody tr:nth-child(even) {
    background: #192734 !important;
}

.tlab-backoffice.dark-mode .table tbody tr:hover {
    background: #1b3a50 !important;
    box-shadow: inset 3px 0 0 var(--brand-pink-medium) !important;
}

.tlab-backoffice.dark-mode .form-control,
.tlab-backoffice.dark-mode .custom-select,
.tlab-backoffice.dark-mode select,
.tlab-backoffice.dark-mode input,
.tlab-backoffice.dark-mode textarea,
.tlab-backoffice.dark-mode .select2-container .select2-selection,
.tlab-backoffice.dark-mode .tagify {
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
    background: #14212c !important;
}

.tlab-backoffice.dark-mode .form-control:focus,
.tlab-backoffice.dark-mode .custom-select:focus,
.tlab-backoffice.dark-mode input:focus,
.tlab-backoffice.dark-mode textarea:focus {
    border-color: #57a2d8 !important;
    box-shadow: 0 0 0 3px rgba(74, 154, 211, 0.22) !important;
}

.tlab-backoffice.dark-mode .form-control::placeholder {
    color: #8094a4 !important;
}

.tlab-backoffice.dark-mode .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-info):not(.bg-warning) {
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: var(--surface-muted) !important;
}

.tlab-backoffice.dark-mode .btn-primary {
    border-color: #2784c8 !important;
    color: #ffffff !important;
    background: #1978ba !important;
}

.tlab-backoffice.dark-mode .btn-primary:hover,
.tlab-backoffice.dark-mode .btn-primary:focus {
    background: #2784c8 !important;
}

.tlab-backoffice.dark-mode .bg-danger.btn,
.tlab-backoffice.dark-mode .btn-danger {
    border-color: var(--danger) !important;
    color: #ffffff !important;
    background: var(--danger) !important;
}

.tlab-backoffice.dark-mode .bg-danger.btn:hover,
.tlab-backoffice.dark-mode .bg-danger.btn:focus,
.tlab-backoffice.dark-mode .btn-danger:hover,
.tlab-backoffice.dark-mode .btn-danger:focus {
    border-color: #e72d66 !important;
    background: #e72d66 !important;
}

.tlab-backoffice.dark-mode .dropdown-item,
.tlab-backoffice.dark-mode .nav-link,
.tlab-backoffice.dark-mode label,
.tlab-backoffice.dark-mode .text-dark {
    color: var(--text-secondary) !important;
}

.tlab-backoffice.dark-mode .dropdown-item:hover,
.tlab-backoffice.dark-mode .dropdown-item:focus {
    color: #ffffff !important;
    background: #1c3b51 !important;
}

.tlab-backoffice.dark-mode .page-link {
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
    background: var(--surface) !important;
}

.tlab-backoffice.dark-mode .page-item.active .page-link {
    border-color: #2784c8 !important;
    color: #ffffff !important;
    background: #1978ba !important;
}

.tlab-backoffice.dark-mode .geo-filter {
    border-color: var(--border);
    background: linear-gradient(125deg, #163348, #2c2030) !important;
}

.tlab-backoffice.dark-mode .small-box,
.tlab-backoffice.dark-mode .stats-card,
.tlab-backoffice.dark-mode .system-setting-card,
.tlab-backoffice.dark-mode .filter-card,
.tlab-backoffice.dark-mode .chart-card,
.tlab-backoffice.dark-mode .table-card,
.tlab-backoffice.dark-mode .glossary-card,
.tlab-backoffice.dark-mode .modern-card {
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
}

.tlab-backoffice.dark-mode .info-box-icon,
.tlab-backoffice.dark-mode .system-setting-card__icon {
    color: #63addf !important;
    background: #17374e !important;
}

.tlab-backoffice.dark-mode [class*="col-"]:nth-child(3n + 2) .info-box-icon,
.tlab-backoffice.dark-mode [class*="col-"]:nth-child(even) .system-setting-card__icon {
    color: var(--brand-pink-light) !important;
    background: #3a2331 !important;
}

.tlab-backoffice.dark-mode .list-group-item {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--surface);
}

.tlab-backoffice.dark-mode .list-group-item-action:hover {
    background: #1b3a50;
}

.tlab-backoffice.dark-mode .alert-info {
    border-color: #27516a #27516a #27516a #4a9ad3;
    color: #b9ddf5;
}

.tlab-backoffice.dark-mode .alert-success {
    border-color: #285242 #285242 #285242 #35a779;
    color: #b6e5d3;
}

.tlab-backoffice.dark-mode .alert-warning {
    border-color: #65502b #65502b #65502b #d4912f;
    color: #f0d29f;
}

.tlab-backoffice.dark-mode .alert-danger {
    border-color: #6b3043 #6b3043 #6b3043 #ed477d;
    color: #f5b4c9;
}

.tlab-backoffice.dark-mode .apexcharts-text tspan,
.tlab-backoffice.dark-mode .apexcharts-datalabels text,
.tlab-backoffice.dark-mode .apexcharts-title-text,
.tlab-backoffice.dark-mode .apexcharts-legend-text {
    fill: var(--text-secondary) !important;
    color: var(--text-secondary) !important;
}

.tlab-backoffice.dark-mode .apexcharts-tooltip,
.tlab-backoffice.dark-mode .apexcharts-tooltip-title {
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    background: var(--surface-muted) !important;
}

body.tlab-backoffice.dark-mode ~ .swal2-container .swal2-popup,
body.dark-mode .swal2-container .swal2-popup {
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    background: var(--surface) !important;
}

body.dark-mode .swal2-container .swal2-title,
body.dark-mode .swal2-container .swal2-html-container {
    color: var(--text-primary) !important;
}

/* --------------------------------------------------------------------------
   Admin authentication screens
   -------------------------------------------------------------------------- */

body.tlab-auth {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1rem;
    overflow-x: hidden;
    background-color: #ffffff;
    background-image: url("/assets/images/login_banner.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

body.tlab-auth::before,
body.tlab-auth::after {
    display: none;
}

.tlab-auth .login-box {
    z-index: 1;
    width: min(100%, 420px);
}

.tlab-auth .login-box .card {
    overflow: hidden;
    border: 1px solid rgba(197, 211, 224, 0.8);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(10, 34, 56, 0.14);
}

.tlab-auth .login-box .card::before {
    display: block;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--brand-blue) 0 54%, var(--brand-pink) 54% 100%);
}

.tlab-auth .login-card-body {
    padding: 2rem 2.25rem 2.25rem;
    color: var(--text-primary);
    background: transparent;
}

.tlab-auth .login-logo {
    margin-bottom: 1.5rem;
}

.tlab-auth .login-logo .login-logo__brand {
    align-items: center;
}

.tlab-auth .login-logo img {
    width: min(200px, 72%);
    height: auto;
}

.tlab-auth .login-logo .logo-version {
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    color: var(--brand-pink-dark);
    background: #fff0f7;
    font-size: 0.72rem;
}

.tlab-auth .login-box-title {
    margin-bottom: 0.35rem;
    color: var(--text-primary);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.tlab-auth .login-box-msg {
    margin-bottom: 1.5rem;
    padding: 0;
    color: var(--text-secondary);
    text-align: left;
}

.tlab-auth .form-group {
    margin-bottom: 1rem;
}

.tlab-auth .inner-addon {
    position: relative;
}

.tlab-auth .inner-addon > i:first-child {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0.85rem;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.tlab-auth .inner-addon .form-control {
    padding-left: 2.5rem;
}

.tlab-auth .inner-addon .password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 0.85rem;
    left: auto;
    color: var(--text-muted);
    cursor: pointer;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
}

.tlab-auth .inner-addon .password-toggle:hover,
.tlab-auth .inner-addon .password-toggle:focus-visible {
    color: var(--primary);
    background: var(--info-soft);
}

.tlab-auth .tlab-auth-link {
    padding: 0;
    border: 0;
    color: var(--primary);
    background: transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tlab-auth .tlab-auth-link:hover,
.tlab-auth .tlab-auth-link:focus-visible {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tlab-auth a {
    color: var(--primary);
    font-weight: 600;
}

.tlab-auth a:hover {
    color: var(--primary-hover);
}

.tlab-auth .login-btn {
    min-height: 44px;
}

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .tlab-backoffice .main-header {
        padding-right: 0.7rem;
        padding-left: 0.7rem;
    }

    .tlab-backoffice .container-fluid {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .tlab-backoffice .analytics-page .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .tlab-backoffice .content-header {
        padding-top: 1.25rem;
    }

    .tlab-backoffice .fixed-table-toolbar .search,
    .tlab-backoffice .fixed-table-toolbar .search input {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .tlab-backoffice .main-header {
        min-height: 56px;
    }

    .tlab-backoffice .main-header .dark-mode-container .mode-label {
        display: none;
    }

    .tlab-backoffice .main-header .nav-item.mr-3 {
        margin-right: 0.35rem !important;
    }

    .tlab-backoffice .current_language {
        display: none;
    }

    .tlab-backoffice .navbar_dropdown > .nav-link {
        max-width: 155px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tlab-backoffice .content-header .col-sm-6 + .col-sm-6 {
        margin-top: 0.4rem;
    }

    .tlab-backoffice .breadcrumb {
        float: none !important;
    }

    .tlab-backoffice .card-body {
        padding: 1rem;
    }

    .tlab-backoffice .card-header,
    .tlab-backoffice .card-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .tlab-backoffice .fixed-table-toolbar .columns {
        margin-top: 0.5rem;
    }

    .tlab-backoffice .fixed-table-pagination > .pagination-detail,
    .tlab-backoffice .fixed-table-pagination > .pagination {
        float: none !important;
        margin-top: 0.65rem;
    }

    .tlab-backoffice .modal-dialog {
        margin: 0.75rem;
    }

    .tlab-auth .login-card-body {
        padding: 1.65rem 1.35rem 1.75rem;
    }
}

@media (max-width: 575.98px) {
    .tlab-backoffice .content-header h1,
    .tlab-backoffice .content-header .page-title {
        font-size: 1.45rem;
    }

    .tlab-backoffice .btn {
        white-space: normal;
    }

    .tlab-backoffice .table-responsive {
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    body.tlab-auth {
        padding: 1rem 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tlab-backoffice *,
    .tlab-backoffice *::before,
    .tlab-backoffice *::after,
    .tlab-auth *,
    .tlab-auth *::before,
    .tlab-auth *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Repeated answer rows use the same field rhythm as every other form instead
   of falling back to Bootstrap's nested grid. */
.tlab-backoffice .tlab-option-list {
    display: grid;
    gap: 0.65rem;
}

.tlab-backoffice .tlab-option-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-option-row__main {
    min-width: 0;
    flex: 1 1 auto;
}

.tlab-backoffice .tlab-checkline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
}

.tlab-backoffice .tlab-iconbtn--danger:hover,
.tlab-backoffice .tlab-iconbtn--danger:focus {
    border-color: rgba(217, 11, 70, 0.22);
    color: var(--danger);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-current-media {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: center;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-current-media img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 110px;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.tlab-backoffice .tlab-pill--success {
    border-color: rgba(22, 132, 91, 0.24);
    color: var(--success-dark);
    background: var(--success-soft);
}

.tlab-backoffice .tlab-pill--danger {
    border-color: rgba(217, 11, 70, 0.24);
    color: var(--danger-dark);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-password-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.4rem;
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.tlab-backoffice .tlab-password-status.is-valid { color: var(--success); }
.tlab-backoffice .tlab-password-status.is-invalid { color: var(--danger); }

.tlab-backoffice .tlab-instructions {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-secondary);
}

.tlab-backoffice .tlab-instructions li + li { margin-top: 0.5rem; }

.tlab-backoffice .tlab-instruction-image {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tlab-backoffice .tlab-settings-group {
    height: calc(100% - 1rem);
    margin-bottom: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.tlab-backoffice .tlab-settings-group__head {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-settings-group__head h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 650;
}

.tlab-backoffice .tlab-settings-group__body { padding: 1rem; }

/* ==========================================================================
   PART 2 — PRODUCT UI SYSTEM
   --------------------------------------------------------------------------
   Everything below is the second-iteration layer: page headers, workspaces,
   toolbars, the refined data table, contextual actions and feedback states.
   These classes are additive and prefixed `tlab-` so they never collide with
   AdminLTE / Bootstrap and can be adopted page by page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-page {
    padding: 0 var(--page-gutter) 4.5rem;
}

/* Every screen — list, form or detail — uses the full width of the window,
   as Project Resources always did; the page gutter is the only margin. */
.tlab-backoffice .tlab-page__inner {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.6rem 0 1.15rem;
}

.tlab-backoffice .tlab-pagehead__main {
    min-width: 0;
    flex: 1 1 22rem;
}

.tlab-backoffice .tlab-pagehead__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
}

.tlab-backoffice .tlab-pagehead__crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.tlab-backoffice .tlab-pagehead__crumbs li + li::before {
    color: var(--border-strong);
    content: "/";
}

.tlab-backoffice .tlab-pagehead__crumbs a {
    color: var(--text-secondary);
    border-radius: var(--radius-xs);
    text-decoration: none;
}

.tlab-backoffice .tlab-pagehead__crumbs a:hover {
    color: var(--primary);
}

.tlab-backoffice .tlab-pagehead__crumbs [aria-current="page"] {
    color: var(--text-primary);
    font-weight: 600;
}

/* "← Subcategories" back affordance used on create/edit workspaces. */
.tlab-backoffice .tlab-backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    padding: 0.25rem 0.55rem 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.tlab-backoffice .tlab-backlink:hover {
    color: var(--primary);
    background: var(--surface-subtle);
    text-decoration: none;
}

.tlab-backoffice .tlab-backlink i {
    font-size: 0.72rem;
}

.tlab-backoffice .tlab-pagehead__title {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -0.012em;
    line-height: 1.25;
}

.tlab-backoffice .tlab-pagehead__desc {
    max-width: 62ch;
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.tlab-backoffice .tlab-pagehead__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.tlab-backoffice .tlab-pagehead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.15rem;
}

/* --------------------------------------------------------------------------
   Panels (surfaces)
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-panel {
    position: relative;
    margin-bottom: 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

/* Deliberately not `overflow: hidden` — the toolbar's column menu opens
   downward from inside this panel and would be clipped. The children that
   meet the panel edge round themselves instead. */
.tlab-backoffice .tlab-panel--flush > :first-child {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.tlab-backoffice .tlab-panel--flush > :last-child,
.tlab-backoffice .tlab-panel--flush .fixed-table-pagination {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.tlab-backoffice .tlab-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border);
}

.tlab-backoffice .tlab-panel__head--plain {
    border-bottom: 0;
    padding-bottom: 0.35rem;
}

.tlab-backoffice .tlab-panel__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.006em;
}

.tlab-backoffice .tlab-panel__title i {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.tlab-backoffice .tlab-panel__desc {
    max-width: 68ch;
    margin: 0.2rem 0 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.tlab-backoffice .tlab-panel__body {
    padding: 1.15rem;
}

.tlab-backoffice .tlab-panel__body--tight {
    padding: 0.85rem 1.15rem;
}

.tlab-backoffice .tlab-panel__body--flush {
    padding: 0;
}

.tlab-backoffice .tlab-panel__foot {
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-panel__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

/* A single hairline of brand gradient. Used sparingly — never as decoration. */
.tlab-backoffice .tlab-panel--accent::before {
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 2px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    content: "";
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-pink));
}

/* Two-column workspace: form content + context rail. */
.tlab-backoffice .tlab-workspace {
    display: grid;
    align-items: start;
    gap: 1.15rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    .tlab-backoffice .tlab-workspace--split {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

.tlab-backoffice .tlab-workspace__rail > .tlab-panel:last-child {
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    .tlab-backoffice .tlab-workspace--split .tlab-workspace__rail {
        position: sticky;
        top: 76px;
    }
}

/* Definition rows used inside the context rail. */
.tlab-backoffice .tlab-deflist {
    display: grid;
    gap: 0.85rem;
    margin: 0;
}

.tlab-backoffice .tlab-deflist dt {
    margin: 0 0 0.15rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-deflist dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.86rem;
    word-break: break-word;
}

/* Grid items default to min-width: auto, so one long unbroken value (a slug,
   a URL) would widen its row past the panel instead of wrapping. */
.tlab-backoffice .tlab-deflist > * {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-fieldgrid {
    display: grid;
    gap: 1rem 1.15rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.tlab-backoffice .tlab-field {
    grid-column: span 12;
    min-width: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .tlab-backoffice .tlab-field--half { grid-column: span 6; }
    .tlab-backoffice .tlab-field--third { grid-column: span 4; }
    .tlab-backoffice .tlab-field--twothirds { grid-column: span 8; }
}

.tlab-backoffice .tlab-field > label,
.tlab-backoffice .tlab-label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--text-primary);
    font-size: 0.815rem;
    font-weight: 600;
    letter-spacing: 0;
}

.tlab-backoffice .tlab-field > label .tlab-optional {
    margin-left: 0.35rem;
    color: var(--text-muted);
    font-weight: 500;
}

.tlab-backoffice .tlab-field .tlab-help {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.775rem;
    line-height: 1.45;
}

.tlab-backoffice .tlab-field .invalid-feedback,
.tlab-backoffice .tlab-field-error {
    display: none;
    margin-top: 0.35rem;
    color: var(--danger);
    font-size: 0.775rem;
    font-weight: 500;
}

.tlab-backoffice .tlab-field-error.is-visible,
.tlab-backoffice .tlab-field .invalid-feedback.is-visible {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.tlab-backoffice .tlab-field-error::before {
    flex: 0 0 auto;
    margin-top: 0.06rem;
    font-family: "Font Awesome 5 Free";
    font-size: 0.72rem;
    font-weight: 900;
    content: "\f06a";
}

/* Required marker: a quiet dot rather than a shouting asterisk. */
.tlab-backoffice label.required::after {
    display: inline-block;
    margin-left: 0.28rem;
    color: var(--brand-pink);
    content: "*";
    font-weight: 700;
}

.tlab-backoffice .tlab-form-error-summary {
    display: none;
    margin-bottom: 1.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(217, 11, 70, 0.28);
    border-radius: var(--radius);
    color: var(--danger-dark);
    background: var(--danger-soft);
    font-size: 0.84rem;
}

.tlab-backoffice .tlab-form-error-summary.is-visible {
    display: block;
}

.tlab-backoffice .tlab-form-error-summary strong {
    display: block;
    margin-bottom: 0.3rem;
}

.tlab-backoffice .tlab-form-error-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* --------------------------------------------------------------------------
   Sticky save bar
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-savebar {
    position: sticky;
    z-index: 900;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.tlab-backoffice .tlab-savebar__state {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    transition: color var(--transition);
}

.tlab-backoffice .tlab-savebar__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background-color var(--transition);
}

.tlab-backoffice .tlab-savebar.is-dirty {
    border-color: rgba(231, 47, 137, 0.34);
}

.tlab-backoffice .tlab-savebar.is-dirty .tlab-savebar__state {
    color: var(--brand-pink-dark);
}

.tlab-backoffice .tlab-savebar.is-dirty .tlab-savebar__dot {
    background: var(--brand-pink);
}

.tlab-backoffice .tlab-savebar.is-saved .tlab-savebar__state {
    color: var(--success);
}

.tlab-backoffice .tlab-savebar.is-saved .tlab-savebar__dot {
    background: var(--success);
}

/* --------------------------------------------------------------------------
   Buttons — quiet variants layered on top of the Bootstrap set
   -------------------------------------------------------------------------- */

.tlab-backoffice .btn-ghost {
    border: 1px solid transparent;
    color: var(--text-secondary);
    background: transparent;
    box-shadow: none;
}

.tlab-backoffice .btn-ghost:hover,
.tlab-backoffice .btn-ghost:focus {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.tlab-backoffice .btn-quiet {
    border: 1px solid var(--border);
    color: var(--text-primary);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.tlab-backoffice .btn-quiet:hover,
.tlab-backoffice .btn-quiet:focus {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: var(--surface-muted);
}

.tlab-backoffice .btn-danger-quiet {
    border: 1px solid rgba(217, 11, 70, 0.3);
    color: var(--danger);
    background: var(--danger-soft);
    box-shadow: none;
}

.tlab-backoffice .btn-danger-quiet:hover,
.tlab-backoffice .btn-danger-quiet:focus {
    border-color: var(--danger);
    color: #fff;
    background: var(--danger);
}

/* Icon-only button (36px hit target, neutral by default). */
.tlab-backoffice .tlab-iconbtn {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    background: transparent;
    line-height: 1;
    transition: color var(--transition-fast), background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.tlab-backoffice .tlab-iconbtn:hover,
.tlab-backoffice .tlab-iconbtn:focus,
.tlab-backoffice .show > .tlab-iconbtn {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--surface-subtle);
    text-decoration: none;
}

/* Button busy state driven by the form controller. */
.tlab-backoffice .btn[data-busy="true"] {
    position: relative;
    cursor: progress;
    pointer-events: none;
}

.tlab-backoffice .tlab-spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.45rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    vertical-align: -0.1em;
    animation: tlab-spin 0.6s linear infinite;
}

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

/* --------------------------------------------------------------------------
   List toolbar: search, filters, active filter chips
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--border);
}

.tlab-backoffice .tlab-toolbar__spacer {
    flex: 1 1 auto;
}

.tlab-backoffice .tlab-search {
    position: relative;
    flex: 0 1 300px;
    min-width: 200px;
}

.tlab-backoffice .tlab-search__icon {
    position: absolute;
    top: 50%;
    left: 0.7rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color var(--transition-fast);
}

.tlab-backoffice .tlab-search input {
    width: 100%;
    height: 36px;
    padding: 0 2rem 0 2.05rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    background: var(--surface);
    font-size: 0.845rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tlab-backoffice .tlab-search input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: var(--focus-ring);
}

.tlab-backoffice .tlab-search:focus-within .tlab-search__icon {
    color: var(--primary);
}

/* An `input[type=search]` gets a clear button from WebKit and Blink for free,
   which sits on top of the one the toolbar draws — two crosses, side by side,
   as soon as anything is typed. The native one is suppressed only where a
   custom clear exists: the plain GET-form search boxes on Versions &
   Environments and the Activity Log have no button of their own, and there the
   browser's is the only way to empty the field. */
.tlab-backoffice .tlab-search:has(.tlab-search__clear) input::-webkit-search-cancel-button,
.tlab-backoffice .tlab-search:has(.tlab-search__clear) input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.tlab-backoffice .tlab-search__clear {
    position: absolute;
    top: 50%;
    right: 0.3rem;
    display: none;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    background: transparent;
    font-size: 0.72rem;
    transform: translateY(-50%);
}

.tlab-backoffice .tlab-search__clear:hover {
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.tlab-backoffice .tlab-search.has-value .tlab-search__clear {
    display: inline-flex;
}

.tlab-backoffice .tlab-search__kbd {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    padding: 0.05rem 0.32rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: 0.66rem;
    font-weight: 600;
    pointer-events: none;
    transform: translateY(-50%);
}

.tlab-backoffice .tlab-search.has-value .tlab-search__kbd,
.tlab-backoffice .tlab-search:focus-within .tlab-search__kbd {
    display: none;
}

/* Compact select used in toolbars. */
.tlab-backoffice .tlab-toolbar select.tlab-filter {
    width: auto;
    min-width: 9.5rem;
    max-width: 15rem;
    height: 36px;
    padding: 0 1.9rem 0 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    background-color: var(--surface);
    font-size: 0.845rem;
}

.tlab-backoffice .tlab-toolbar select.tlab-filter:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.tlab-backoffice .tlab-toolbar select.tlab-filter.is-active {
    border-color: rgba(15, 105, 175, 0.4);
    color: var(--primary);
    background-color: var(--info-soft);
    font-weight: 600;
}

/* Universal timeline filter. It stays compact until opened, then presents
   presets and a precise range without turning the toolbar into a form. */
.tlab-backoffice .tlab-datefilter__trigger {
    display: inline-flex;
    min-width: 8.5rem;
    height: 36px;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    border-color: var(--border);
    color: var(--text-secondary);
    background: var(--surface);
    white-space: nowrap;
}

.tlab-backoffice .tlab-datefilter__trigger [data-tlab-date-summary] {
    overflow: hidden;
    max-width: 15rem;
    text-overflow: ellipsis;
}

.tlab-backoffice .tlab-datefilter__chevron {
    margin-left: auto;
    font-size: 0.58rem;
    transition: transform var(--transition-fast);
}

.tlab-backoffice .tlab-datefilter.show .tlab-datefilter__chevron {
    transform: rotate(180deg);
}

.tlab-backoffice .tlab-datefilter.is-active .tlab-datefilter__trigger {
    border-color: rgba(15, 105, 175, 0.42);
    color: var(--primary);
    background: var(--info-soft);
    font-weight: 600;
}

.tlab-backoffice .tlab-datefilter__menu {
    width: min(25rem, calc(100vw - 2rem));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.tlab-backoffice .tlab-datefilter__head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 1rem 1rem 0.8rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--info-soft), rgba(255, 160, 207, 0.1));
    color: var(--text-primary);
}

.tlab-backoffice .tlab-datefilter__eyebrow,
.tlab-backoffice .tlab-datefilter__field > span {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-datefilter__field {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    margin: 0;
}

.tlab-backoffice .tlab-datefilter__menu > .tlab-datefilter__field {
    padding: 0.85rem 1rem 0;
}

.tlab-backoffice .tlab-datefilter__field .form-control {
    height: 36px;
    border-color: var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    background: var(--surface);
    font-size: 0.82rem;
}

.tlab-backoffice .tlab-datefilter__field .form-control:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.tlab-backoffice .tlab-datefilter__presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.75rem 1rem;
}

.tlab-backoffice .tlab-datefilter__presets button {
    min-height: 34px;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--surface-muted);
    font-size: 0.75rem;
    font-weight: 600;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.tlab-backoffice .tlab-datefilter__presets button:hover,
.tlab-backoffice .tlab-datefilter__presets button.is-active {
    border-color: rgba(15, 105, 175, 0.38);
    color: var(--primary);
    background: var(--info-soft);
}

.tlab-backoffice .tlab-datefilter__presets button:active {
    transform: scale(0.97);
}

.tlab-backoffice .tlab-datefilter__range {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.tlab-backoffice .tlab-datefilter__arrow {
    display: inline-flex;
    height: 36px;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.66rem;
}

.tlab-backoffice .tlab-datefilter__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

/* Active filter chips */
.tlab-backoffice .tlab-chips {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.15rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-chips.is-visible {
    display: flex;
}

.tlab-backoffice .tlab-chips__label {
    margin-right: 0.15rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    background: var(--surface);
    font-size: 0.78rem;
    animation: tlab-chip-in var(--transition) both;
}

@keyframes tlab-chip-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}

.tlab-backoffice .tlab-chip__key {
    color: var(--text-muted);
}

.tlab-backoffice .tlab-chip__value {
    font-weight: 600;
}

.tlab-backoffice .tlab-chip__remove {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    background: transparent;
    font-size: 0.62rem;
    line-height: 1;
}

.tlab-backoffice .tlab-chip__remove:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-chips__clear {
    padding: 0.2rem 0.5rem;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-chips__clear:hover {
    color: var(--primary);
    background: var(--info-soft);
}

/* --------------------------------------------------------------------------
   Contextual bulk-action bar
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-bulkbar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.15rem;
    border-bottom: 1px solid rgba(15, 105, 175, 0.2);
    background: var(--info-soft);
}

.tlab-backoffice .tlab-bulkbar.is-visible {
    display: flex;
    animation: tlab-bulkbar-in var(--transition) both;
}

@keyframes tlab-bulkbar-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

.tlab-backoffice .tlab-bulkbar__count {
    margin-right: auto;
    color: var(--brand-blue-dark);
    font-size: 0.845rem;
    font-weight: 650;
}

/* --------------------------------------------------------------------------
   Data table refinements
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-tablewrap {
    overflow-x: auto;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.tlab-backoffice .tlab-panel .bootstrap-table .fixed-table-container,
.tlab-backoffice .tlab-panel .bootstrap-table .fixed-table-body {
    border: 0 !important;
    background: transparent !important;
}

.tlab-backoffice .tlab-panel .table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.855rem;
}

.tlab-backoffice .tlab-panel .table thead th,
.tlab-backoffice .tlab-panel .fixed-table-header th {
    position: relative;
    padding: 0.6rem 0.85rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: var(--surface-muted) !important;
    font-size: 0.735rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.tlab-backoffice .tlab-panel .table thead th .sortable {
    background-image: none !important;
    padding-right: 1.1rem !important;
}

.tlab-backoffice .tlab-panel .table thead th .both::after,
.tlab-backoffice .tlab-panel .table thead th .asc::after,
.tlab-backoffice .tlab-panel .table thead th .desc::after {
    position: absolute;
    right: 0.55rem;
    font-family: "Font Awesome 5 Free";
    font-size: 0.66rem;
    font-weight: 900;
}

.tlab-backoffice .tlab-panel .table thead th .both::after {
    color: var(--border-strong);
    content: "\f0dc";
}

.tlab-backoffice .tlab-panel .table thead th .asc::after {
    color: var(--primary);
    content: "\f0de";
}

.tlab-backoffice .tlab-panel .table thead th .desc::after {
    color: var(--primary);
    content: "\f0dd";
}

.tlab-backoffice .tlab-panel .table tbody tr {
    background: var(--surface) !important;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Zebra striping removed: a single hairline reads cleaner at density. */
.tlab-backoffice .tlab-panel .table tbody tr:nth-child(odd),
.tlab-backoffice .tlab-panel .table tbody tr:nth-child(even) {
    background: var(--surface) !important;
}

.tlab-backoffice .tlab-panel .table tbody td {
    height: 48px;
    padding: 0.5rem 0.85rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
}

.tlab-backoffice .tlab-panel .table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.tlab-backoffice .tlab-panel .table tbody tr:hover {
    background: var(--surface-muted) !important;
    box-shadow: none !important;
}

.tlab-backoffice .tlab-panel .table tbody tr.selected {
    background: var(--info-soft) !important;
    box-shadow: inset 2px 0 0 var(--primary) !important;
}

/* Rows that navigate on click. */
.tlab-backoffice .tlab-panel .table tbody tr[data-href] {
    cursor: pointer;
}

/* Primary cell: the identifying value in each row. */
.tlab-backoffice .tlab-cell-primary {
    color: var(--text-primary);
    font-weight: 600;
}

.tlab-backoffice .tlab-cell-muted {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.tlab-backoffice .tlab-cell-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-cell-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Row actions: quiet by default, revealed on hover/focus. */
.tlab-backoffice .tlab-rowactions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.15rem;
}

.tlab-backoffice .tlab-rowactions .dropdown-menu {
    min-width: 11rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

.tlab-backoffice .tlab-rowactions .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.845rem;
}

.tlab-backoffice .tlab-rowactions .dropdown-item i {
    width: 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.tlab-backoffice .tlab-rowactions .dropdown-item:hover {
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.tlab-backoffice .tlab-rowactions .dropdown-item--danger,
.tlab-backoffice .tlab-rowactions .dropdown-item--danger i {
    color: var(--danger);
}

.tlab-backoffice .tlab-rowactions .dropdown-item--danger:hover {
    color: var(--danger-dark);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-rowactions .dropdown-divider {
    margin: 0.3rem 0;
    border-color: var(--border);
}

/* Pagination */
.tlab-backoffice .tlab-panel .fixed-table-pagination {
    align-items: center;
    padding: 0.7rem 1.15rem !important;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-panel .fixed-table-pagination .pagination-detail {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.tlab-backoffice .tlab-panel .fixed-table-pagination .pagination .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm) !important;
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.82rem;
    line-height: 30px;
    text-align: center;
}

.tlab-backoffice .tlab-panel .fixed-table-pagination .pagination .page-link:hover {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--surface);
}

.tlab-backoffice .tlab-panel .fixed-table-pagination .pagination .page-item.active .page-link {
    border-color: transparent;
    color: #fff;
    background: var(--primary);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Empty, error and loading states
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-empty {
    display: flex;
    max-width: 34rem;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.tlab-backoffice .tlab-empty__icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: 1.05rem;
}

.tlab-backoffice .tlab-empty__title {
    margin: 0 0 0.3rem;
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 650;
}

.tlab-backoffice .tlab-empty__text {
    max-width: 40ch;
    margin: 0 0 1.1rem;
    color: var(--text-secondary);
    font-size: 0.855rem;
    line-height: 1.5;
}

.tlab-backoffice .tlab-empty--error .tlab-empty__icon {
    border-color: rgba(217, 11, 70, 0.25);
    color: var(--danger);
    background: var(--danger-soft);
}

/* Skeletons mirror the shape of the content they replace. */
.tlab-backoffice .tlab-skeleton {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-subtle) 25%,
        var(--surface-muted) 37%, var(--surface-subtle) 63%);
    background-size: 400% 100%;
    animation: tlab-shimmer 1.3s ease-in-out infinite;
}

@keyframes tlab-shimmer {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

.tlab-backoffice .tlab-skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 48px;
    padding: 0 0.85rem;
    border-bottom: 1px solid var(--border);
}

.tlab-backoffice .tlab-skeleton-row > .tlab-skeleton {
    height: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .tlab-backoffice .tlab-skeleton,
    .tlab-backoffice .tlab-spinner,
    .tlab-backoffice .tlab-chip {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   File uploader
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-uploader {
    display: grid;
    align-items: start;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .tlab-backoffice .tlab-uploader--with-preview {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

.tlab-backoffice .tlab-uploader__current {
    display: flex;
    width: 96px;
    height: 96px;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-uploader__current img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tlab-backoffice .tlab-dropzone {
    position: relative;
    display: flex;
    min-height: 96px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-muted);
    text-align: center;
    transition: border-color var(--transition), background-color var(--transition);
}

.tlab-backoffice .tlab-dropzone:hover,
.tlab-backoffice .tlab-dropzone.is-focused {
    border-color: var(--primary);
    background: var(--info-soft);
}

.tlab-backoffice .tlab-dropzone.is-dragging {
    border-color: var(--brand-pink);
    background: #fff2f8;
}

.tlab-backoffice .tlab-dropzone.is-invalid {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.tlab-backoffice .tlab-dropzone__icon {
    margin-bottom: 0.45rem;
    color: var(--text-muted);
    font-size: 1.05rem;
}

.tlab-backoffice .tlab-dropzone__title {
    color: var(--text-primary);
    font-size: 0.855rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-dropzone__title span {
    color: var(--primary);
    text-decoration: underline;
}

.tlab-backoffice .tlab-dropzone__hint {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.775rem;
}

/* Selected-file summary replaces the dropzone copy once a file is chosen. */
.tlab-backoffice .tlab-filecard {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.tlab-backoffice .tlab-filecard.is-visible {
    display: flex;
}

.tlab-backoffice .tlab-filecard__thumb {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-filecard__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tlab-backoffice .tlab-filecard__name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 0.845rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-filecard__meta {
    color: var(--text-muted);
    font-size: 0.775rem;
}

/* --------------------------------------------------------------------------
   Status pills
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.14rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    background: var(--surface-muted);
    font-size: 0.755rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.tlab-backoffice .tlab-pill--brand {
    border-color: rgba(15, 105, 175, 0.25);
    color: var(--brand-blue-dark);
    background: var(--info-soft);
}

.tlab-backoffice .tlab-pill--accent {
    border-color: rgba(231, 47, 137, 0.25);
    color: var(--brand-pink-dark);
    background: #fff0f7;
}

/* --------------------------------------------------------------------------
   Settings hub cards
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-hubgrid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
}

/* A short set of cards on a full-width page: share the row instead of
   leaving empty columns beside them. */
.tlab-backoffice .tlab-hubgrid--stretch {
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}

.tlab-backoffice .tlab-hubcard {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.05rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: inherit;
    background: var(--surface);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition),
        transform var(--transition);
}

.tlab-backoffice .tlab-hubcard:hover,
.tlab-backoffice .tlab-hubcard:focus {
    border-color: rgba(15, 105, 175, 0.35);
    color: inherit;
    background: var(--surface-muted);
    filter: none;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transform: translateY(-1px);
}

.tlab-backoffice .tlab-hubcard__icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--primary);
    background: var(--info-soft);
    font-size: 0.95rem;
}

.tlab-backoffice .tlab-hubcard__body {
    min-width: 0;
    flex: 1 1 auto;
}

.tlab-backoffice .tlab-hubcard__title {
    margin: 0 0 0.2rem;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 650;
}

.tlab-backoffice .tlab-hubcard__desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.tlab-backoffice .tlab-hubcard__chevron {
    flex: 0 0 auto;
    align-self: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    transition: color var(--transition), transform var(--transition);
}

.tlab-backoffice .tlab-hubcard:hover .tlab-hubcard__chevron {
    color: var(--primary);
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Collapsed sidebar (icon rail) tooltips
   -------------------------------------------------------------------------- */

/* Collapsed rail. AdminLTE keeps the aside at 4.6rem, so everything inside it
   has to centre rather than merely clip — a clipped logo reads as a bug. */
.tlab-backoffice.sidebar-collapse .brand-link {
    justify-content: center;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.tlab-backoffice.sidebar-collapse .brand-image--full {
    display: none;
}

.tlab-backoffice.sidebar-collapse .brand-image--mark {
    display: block;
}

.tlab-backoffice.sidebar-collapse .sidebar {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.tlab-backoffice.sidebar-collapse .sidebar-access {
    display: none;
}

.tlab-backoffice.sidebar-collapse .nav-sidebar .nav-link {
    justify-content: center;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.tlab-backoffice.sidebar-collapse .nav-sidebar .nav-link .nav-icon {
    width: auto;
    min-width: 0;
    margin: 0 !important;
    font-size: 0.95rem;
}

/* AdminLTE reveals link text on hover of the collapsed rail; the tooltip in
   js/backoffice/sidebar.js does that job, so keep the rail stable. */
.tlab-backoffice.sidebar-collapse .nav-sidebar .nav-link .nav-text,
.tlab-backoffice.sidebar-collapse .nav-sidebar .nav-link p {
    display: none !important;
}

.tlab-backoffice.sidebar-collapse .nav-sidebar .nav-link.active::after {
    top: 7px;
    bottom: 7px;
}

/* Group headings become a hairline divider rather than cropped text. */
.tlab-backoffice.sidebar-collapse .sidebar-section-title {
    height: 1px;
    margin: 0.7rem 0.75rem;
    padding: 0;
    overflow: hidden;
    border-radius: 1px;
    background: var(--nav-border) !important;
    color: transparent !important;
    font-size: 0;
    text-indent: -999em;
}

.tlab-backoffice .tlab-navtip {
    position: fixed;
    z-index: 1200;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    color: #fff;
    background: #10202e;
    box-shadow: var(--shadow-pop);
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.tlab-backoffice .tlab-navtip.is-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Dark mode for the Part 2 layer
   -------------------------------------------------------------------------- */

.tlab-backoffice.dark-mode {
    --nav-bg: #0a141d;
    --nav-bg-accent: #0d1a25;
    --nav-hover: rgba(255, 255, 255, 0.05);
    --nav-active-bg: rgba(15, 105, 175, 0.3);
}

.tlab-backoffice.dark-mode .tlab-panel,
.tlab-backoffice.dark-mode .tlab-savebar,
.tlab-backoffice.dark-mode .tlab-hubcard,
.tlab-backoffice.dark-mode .tlab-filecard,
.tlab-backoffice.dark-mode .tlab-search input,
.tlab-backoffice.dark-mode .tlab-toolbar select.tlab-filter,
.tlab-backoffice.dark-mode .tlab-datefilter__trigger,
.tlab-backoffice.dark-mode .tlab-datefilter__menu,
.tlab-backoffice.dark-mode .tlab-datefilter__field .form-control,
.tlab-backoffice.dark-mode .tlab-chip {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--surface);
}

.tlab-backoffice.dark-mode .tlab-panel__foot,
.tlab-backoffice.dark-mode .tlab-chips,
.tlab-backoffice.dark-mode .tlab-dropzone,
.tlab-backoffice.dark-mode .tlab-uploader__current,
.tlab-backoffice.dark-mode .tlab-empty__icon,
.tlab-backoffice.dark-mode .tlab-cell-icon,
.tlab-backoffice.dark-mode .tlab-filecard__thumb,
.tlab-backoffice.dark-mode .tlab-panel .table thead th,
.tlab-backoffice.dark-mode .tlab-panel .fixed-table-pagination {
    border-color: var(--border);
    background: var(--surface-muted) !important;
}

.tlab-backoffice.dark-mode .tlab-panel .table tbody tr,
.tlab-backoffice.dark-mode .tlab-panel .table tbody tr:nth-child(odd),
.tlab-backoffice.dark-mode .tlab-panel .table tbody tr:nth-child(even) {
    background: var(--surface) !important;
}

.tlab-backoffice.dark-mode .tlab-panel .table tbody tr:hover {
    background: var(--surface-muted) !important;
}

.tlab-backoffice.dark-mode .tlab-panel .table tbody tr.selected {
    background: rgba(15, 105, 175, 0.22) !important;
}

.tlab-backoffice.dark-mode .tlab-bulkbar {
    border-color: rgba(120, 178, 224, 0.25);
    background: rgba(15, 105, 175, 0.16);
}

.tlab-backoffice.dark-mode .tlab-bulkbar__count {
    color: #cfe4f5;
}

.tlab-backoffice.dark-mode .tlab-dropzone.is-dragging {
    border-color: var(--brand-pink);
    background: rgba(231, 47, 137, 0.14);
}

.tlab-backoffice.dark-mode .tlab-pill--accent {
    border-color: rgba(231, 47, 137, 0.3);
    color: var(--brand-pink-light);
    background: rgba(231, 47, 137, 0.14);
}

.tlab-backoffice.dark-mode .btn-quiet,
.tlab-backoffice.dark-mode .btn-ghost:hover {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--surface-muted);
}

.tlab-backoffice.dark-mode .tlab-navtip {
    background: #223342;
}

/* --------------------------------------------------------------------------
   Sortable lists (category / subcategory ordering)
   Moved out of the page templates so the treatment is shared and themed.
   -------------------------------------------------------------------------- */

.tlab-backoffice .sortable-list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    list-style: none;
    overflow: hidden;
}

.tlab-backoffice .sortable-list:empty {
    display: none;
}

.tlab-backoffice .sortable-item,
.tlab-backoffice .sortable-list > li {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary);
    background: var(--surface);
    transition: background-color var(--transition-fast);
}

.tlab-backoffice .sortable-list > li:last-child {
    border-bottom: 0 !important;
}

.tlab-backoffice .sortable-item:hover {
    background: var(--surface-muted);
}

.tlab-backoffice .sortable-dragging {
    border-radius: var(--radius-sm);
    background: var(--surface) !important;
    box-shadow: var(--shadow-pop) !important;
}

.tlab-backoffice .sortable-placeholder {
    height: 44px;
    margin: 0;
    border: 1px dashed var(--primary) !important;
    border-radius: var(--radius-sm);
    background: var(--info-soft) !important;
}

.tlab-backoffice .drag-handle {
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    cursor: grab;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.tlab-backoffice .drag-handle:hover {
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.tlab-backoffice .drag-handle:active {
    cursor: grabbing;
}

.tlab-backoffice .category-number .badge,
.tlab-backoffice .subcategory-number .badge {
    min-width: 24px;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    background: var(--surface-subtle);
    font-size: 0.72rem;
    font-weight: 600;
}

.tlab-backoffice .category-title,
.tlab-backoffice .subcategory-title {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 500;
}

.tlab-backoffice .category-actions,
.tlab-backoffice .subcategory-actions {
    color: var(--text-muted);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tlab-backoffice .sortable-item:hover .category-actions,
.tlab-backoffice .sortable-item:hover .subcategory-actions {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Dialogs and toasts
   -------------------------------------------------------------------------- */

.tlab-dialog.swal2-popup {
    max-width: 27rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.tlab-dialog .swal2-title {
    padding: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 650;
}

.tlab-dialog .swal2-html-container,
.tlab-dialog .swal2-content {
    margin: 0.6rem 0 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* The record being acted on, quoted back to the user. */
.tlab-dialog__subject {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.7rem;
    border-left: 2px solid var(--brand-pink);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-primary);
    background: var(--surface-muted);
    font-size: 0.855rem;
    font-weight: 600;
    text-align: left;
    word-break: break-word;
}

.tlab-dialog__text {
    margin: 0;
}

.tlab-dialog .swal2-actions {
    margin-top: 1.25rem;
    justify-content: flex-end;
    gap: 0.5rem;
}

.tlab-dialog--danger .swal2-icon.swal2-warning {
    border-color: rgba(217, 11, 70, 0.35);
    color: var(--danger);
}

.tlab-toast.swal2-popup {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}

.tlab-toast .swal2-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.855rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: pre-line;
}

.tlab-toast--success.swal2-popup { border-left-color: var(--success); }
.tlab-toast--error.swal2-popup { border-left-color: var(--danger); }
.tlab-toast--warning.swal2-popup { border-left-color: var(--warning); }
.tlab-toast--info.swal2-popup { border-left-color: var(--primary); }

/* --------------------------------------------------------------------------
   bootstrap-table's own toolbar buttons, made quiet
   -------------------------------------------------------------------------- */

.tlab-backoffice .fixed-table-toolbar .btn.btn-quiet,
.tlab-backoffice .fixed-table-toolbar .columns .btn {
    height: 36px;
    padding: 0 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
    color: var(--text-secondary);
    background: var(--surface);
    box-shadow: none;
    font-size: 0.82rem;
}

.tlab-backoffice .fixed-table-toolbar .btn.btn-quiet:hover,
.tlab-backoffice .fixed-table-toolbar .columns .btn:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    background: var(--surface-muted);
}

.tlab-backoffice .fixed-table-toolbar .columns .dropdown-menu {
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

.tlab-backoffice .fixed-table-toolbar .columns .dropdown-item {
    border-radius: var(--radius-sm);
    font-size: 0.845rem;
}

/* The list panel supplies its own toolbar, so hide the plugin's search box. */
.tlab-backoffice .tlab-panel .fixed-table-toolbar .search,
.tlab-backoffice .tlab-panel .fixed-table-toolbar .pull-left.search {
    display: none !important;
}

.tlab-backoffice .tlab-panel .fixed-table-toolbar {
    margin: 0;
    padding: 0;
}

.tlab-backoffice .tlab-panel .fixed-table-loading {
    border: 0;
    background: transparent;
}

/* Mobile: the row action column stays reachable, low-priority columns scroll. */
@media (max-width: 767.98px) {
    .tlab-backoffice .tlab-page {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .tlab-backoffice .tlab-pagehead {
        align-items: flex-start;
    }

    .tlab-backoffice .tlab-pagehead__actions {
        width: 100%;
    }

    .tlab-backoffice .tlab-pagehead__actions > .btn {
        flex: 1 1 auto;
    }

    .tlab-backoffice .tlab-search {
        flex: 1 1 100%;
    }

    .tlab-backoffice .tlab-toolbar select.tlab-filter {
        flex: 1 1 auto;
        max-width: none;
    }

    .tlab-backoffice .tlab-datefilter,
    .tlab-backoffice .tlab-datefilter__trigger {
        width: 100%;
    }

    .tlab-backoffice .tlab-datefilter__trigger [data-tlab-date-summary] {
        max-width: calc(100vw - 8rem);
    }

    .tlab-backoffice .tlab-datefilter__presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tlab-backoffice .tlab-savebar {
        flex-direction: row-reverse;
    }

    .tlab-backoffice .tlab-savebar__state {
        width: 100%;
        margin-right: 0;
        order: -1;
    }
}

/* --------------------------------------------------------------------------
   Top bar
   One control height, one radius, one hover language across every item.
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-topbar {
    align-items: center;
    gap: 0.4rem;
}

.tlab-backoffice .tlab-topbar__button {
    display: inline-flex;
    height: 44px;
    max-width: 14rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-secondary);
    background: transparent;
    font-size: 0.845rem;
    font-weight: 600;
    transition: color var(--transition-fast), background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.tlab-backoffice .tlab-topbar__button:hover,
.tlab-backoffice .tlab-topbar__button:focus,
.tlab-backoffice .show > .tlab-topbar__button {
    border-color: var(--border);
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.tlab-backoffice .tlab-topbar__button > i:first-child {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.tlab-backoffice .tlab-topbar__button-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-topbar__caret {
    color: var(--text-muted);
    font-size: 0.6rem;
    transition: transform var(--transition-fast);
}

.tlab-backoffice .show > .tlab-topbar__button .tlab-topbar__caret {
    transform: rotate(180deg);
}

.tlab-backoffice .tlab-avatar {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-pink));
    font-size: 0.72rem;
    font-weight: 700;
    object-fit: cover;
}

.tlab-backoffice .tlab-menu {
    min-width: 13rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    animation: tlab-menu-in var(--transition-fast) both;
}

/* Animates the individual translate/scale properties, never `transform`:
   Popper places dropdowns with an inline transform, and an animation that
   holds `transform: none` overrides it, pinning every menu to its toggle's
   left edge so right-aligned ones ran off the screen. */
@keyframes tlab-menu-in {
    from { opacity: 0; scale: 0.98; translate: 0 -2px; }
    to { opacity: 1; scale: 1; translate: 0 0; }
}

.tlab-backoffice .tlab-menu--scroll {
    max-height: 20rem;
    overflow-y: auto;
}

.tlab-backoffice .tlab-menu__label {
    display: block;
    padding: 0.35rem 0.6rem 0.2rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-menu__header {
    padding: 0.5rem 0.6rem;
}

.tlab-backoffice .tlab-menu__name {
    display: block;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 650;
}

.tlab-backoffice .tlab-menu__meta {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-overflow: ellipsis;
}

.tlab-backoffice .tlab-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.855rem;
}

.tlab-backoffice .tlab-menu .dropdown-item i {
    width: 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.tlab-backoffice .tlab-menu .dropdown-item:hover {
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.tlab-backoffice .tlab-menu .dropdown-item--danger,
.tlab-backoffice .tlab-menu .dropdown-item--danger i {
    color: var(--danger);
}

.tlab-backoffice .tlab-menu .dropdown-item--danger:hover {
    color: var(--danger-dark);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-menu .dropdown-divider {
    margin: 0.3rem 0;
    border-color: var(--border);
}

@media (max-width: 575.98px) {
    .tlab-backoffice .tlab-topbar__button-text,
    .tlab-backoffice .dark-mode-container .mode-label {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Row action menu
   Rendered at the end of <body> while open (see js/backoffice/row-menu.js), so
   it is styled from the body scope rather than from inside the table.
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-rowmenu {
    right: auto !important;
    min-width: 11rem;
    z-index: 1080;
}

.tlab-backoffice .tlab-rowmenu.show {
    display: block;
}

.tlab-backoffice .tlab-rowmenu .dropdown-item {
    cursor: pointer;
}

.tlab-backoffice .tlab-rowmenu .dropdown-item:focus {
    color: var(--text-primary);
    background: var(--surface-subtle);
    outline: none;
}

.tlab-backoffice .tlab-rowmenu .dropdown-item--danger:focus {
    color: var(--danger-dark);
    background: var(--danger-soft);
}

/* --------------------------------------------------------------------------
   Toolbar actions (refresh + column visibility)
   These replace bootstrap-table's own chrome, which moved its host element out
   of the toolbar row and into a band of its own.
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.tlab-backoffice .tlab-toolbar__actions .btn-quiet {
    display: inline-flex;
    height: 36px;
    align-items: center;
    padding: 0 0.7rem;
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-menu__check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.845rem;
    font-weight: 500;
    cursor: pointer;
}

.tlab-backoffice .tlab-menu__check:hover {
    background: var(--surface-subtle);
}

.tlab-backoffice .tlab-menu__check input {
    margin: 0;
    accent-color: var(--primary);
}

/* Loading message, rendered in the table body while a request is in flight. */
.tlab-backoffice .tlab-tableloading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    font-size: 0.855rem;
}

.tlab-backoffice .tlab-panel .table tbody tr.no-records-found td,
.tlab-backoffice .tlab-panel .table tbody tr.no-records-found:hover td {
    padding: 0 !important;
    border-bottom: 0 !important;
    background: var(--surface) !important;
}

.tlab-backoffice .tlab-panel .table tbody tr.no-records-found:hover {
    background: var(--surface) !important;
}

/* Long-form cell content clamped to two lines so rows stay scannable. */
.tlab-backoffice .tlab-cell-clamp {
    display: -webkit-box;
    max-width: 46ch;
    overflow: hidden;
    color: var(--text-secondary);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.82rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Segmented control and switch
   Replace the pair of saturated green/red buttons the old forms used for
   binary state — those read as actions rather than as a current value.
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-segmented {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-segmented label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.tlab-backoffice .tlab-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tlab-backoffice .tlab-segmented span {
    display: block;
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.815rem;
    font-weight: 600;
    transition: color var(--transition-fast), background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.tlab-backoffice .tlab-segmented input:checked + span {
    color: var(--text-primary);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.tlab-backoffice .tlab-segmented input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* The "on" state carries the brand accent so it is readable at a glance. */
.tlab-backoffice .tlab-segmented label:first-child input:checked + span {
    color: var(--brand-blue-dark);
    box-shadow: var(--shadow-xs), inset 0 -2px 0 var(--brand-blue);
}

.tlab-backoffice .tlab-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    cursor: pointer;
}

.tlab-backoffice .tlab-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tlab-backoffice .tlab-switch__track {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    transition: background-color var(--transition), border-color var(--transition);
}

.tlab-backoffice .tlab-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(10, 34, 56, 0.24);
    transition: transform var(--transition);
}

.tlab-backoffice .tlab-switch input:checked + .tlab-switch__track {
    border-color: var(--primary);
    background: var(--primary);
}

.tlab-backoffice .tlab-switch input:checked + .tlab-switch__track .tlab-switch__thumb {
    transform: translateX(16px);
}

.tlab-backoffice .tlab-switch input:focus-visible + .tlab-switch__track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.tlab-backoffice .tlab-switch__label {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
}

/* Image thumbnail inside a table cell. */
.tlab-backoffice .tlab-cell-thumb {
    display: inline-flex;
    width: 46px;
    height: 34px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-cell-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Pre-rendered cell content from the controllers
   Several list endpoints emit their own markup (thumbnails, status badges).
   Rather than reformat it in JS, it is restyled to match the table here.
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-panel .images_border,
.tlab-backoffice .tlab-cell-thumbcell img {
    width: 46px !important;
    height: 34px !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    object-fit: cover;
}

/* Bootstrap badges inside a table read as quiet status pills. */
.tlab-backoffice .tlab-panel .table .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    background: var(--surface-muted);
    font-size: 0.755rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-panel .table .badge-success {
    border-color: rgba(22, 132, 91, 0.25);
    color: var(--success);
    background: var(--success-soft);
}

.tlab-backoffice .tlab-panel .table .badge-danger {
    border-color: rgba(217, 11, 70, 0.22);
    color: var(--danger);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-panel .table .badge-warning {
    border-color: rgba(164, 93, 8, 0.25);
    color: var(--warning);
    background: var(--warning-soft);
}

/* ==========================================================================
   LEGACY SCREEN HARMONISATION
   --------------------------------------------------------------------------
   Screens not yet converted to the page/panel components still use AdminLTE's
   `content-header` + `card` + toolbar markup. Nothing below changes their
   behaviour — it only brings their typography, controls and density in line
   with the converted screens so the product reads as one thing. As each screen
   is migrated its rules here simply stop matching.
   ========================================================================== */

/* Page title: same size and weight as .tlab-pagehead__title, and without the
   gradient bar, which competed with the content for attention. */
.tlab-backoffice .content-header {
    padding: 1.6rem 0 1.15rem;
}

.tlab-backoffice .content-header h1,
.tlab-backoffice .content-header .page-title {
    padding-left: 0;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -0.012em;
    line-height: 1.25;
}

.tlab-backoffice .content-header h1::before,
.tlab-backoffice .content-header .page-title::before {
    display: none;
}

.tlab-backoffice .content-header .breadcrumb {
    padding: 0;
    font-size: 0.78rem;
    font-weight: 500;
}

/* Cards read as panels: one hairline, minimal shadow. */
.tlab-backoffice .card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
}

.tlab-backoffice .card > .card-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.tlab-backoffice .card > .card-header .card-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 650;
}

/* The blue square three-dot button becomes a neutral ghost icon button. */
.tlab-backoffice .table .dropdown > a[data-toggle="dropdown"] {
    display: inline-flex;
}

.tlab-backoffice .table .dropdown > a[data-toggle="dropdown"] > .btn.btn-primary.btn-sm,
.tlab-backoffice .table .dropdown > .btn.btn-primary.btn-sm {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tlab-backoffice .table .dropdown > a[data-toggle="dropdown"]:hover > .btn.btn-primary.btn-sm,
.tlab-backoffice .table .dropdown.show > a[data-toggle="dropdown"] > .btn.btn-primary.btn-sm {
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    background: var(--surface-subtle) !important;
}

/* Legacy row menus get the same treatment as the converted ones. */
.tlab-backoffice .table .dropdown-menu {
    min-width: 11rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

.tlab-backoffice .table .dropdown-menu .dropdown-item,
.tlab-backoffice .table .dropdown-menu .btn-icon {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: transparent;
    font-size: 0.845rem;
    text-align: left;
}

.tlab-backoffice .table .dropdown-menu .dropdown-item i,
.tlab-backoffice .table .dropdown-menu .btn-icon i {
    width: 1rem;
    margin: 0 !important;
    color: var(--text-muted) !important;
    font-size: 0.8rem;
    text-align: center;
}

.tlab-backoffice .table .dropdown-menu .dropdown-item:hover,
.tlab-backoffice .table .dropdown-menu .btn-icon:hover {
    color: var(--text-primary);
    background: var(--surface-subtle);
}

.tlab-backoffice .table .dropdown-menu .dropdown-item .text-danger,
.tlab-backoffice .table .dropdown-menu .dropdown-item i.text-danger {
    color: var(--danger) !important;
}

/* Destructive toolbar buttons stop shouting when nothing is selected. */
.tlab-backoffice #toolbar .btn.bg-danger,
.tlab-backoffice #toolbar .btn.btn-danger,
.tlab-backoffice .card-body > .btn.bg-danger {
    height: 36px;
    padding: 0 0.75rem;
    border: 1px solid rgba(217, 11, 70, 0.3) !important;
    border-radius: var(--radius) !important;
    color: var(--danger) !important;
    background: var(--danger-soft) !important;
    box-shadow: none !important;
    font-size: 0.82rem;
    font-weight: 600;
}

.tlab-backoffice #toolbar .btn.bg-danger:hover,
.tlab-backoffice #toolbar .btn.btn-danger:hover,
.tlab-backoffice .card-body > .btn.bg-danger:hover {
    border-color: var(--danger) !important;
    color: #fff !important;
    background: var(--danger) !important;
}

/* Legacy toolbars: consistent control heights and spacing. */
.tlab-backoffice #toolbar {
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.tlab-backoffice #toolbar > *,
.tlab-backoffice #toolbar .form-control {
    margin-bottom: 0 !important;
}

.tlab-backoffice #toolbar .form-control,
.tlab-backoffice #toolbar select {
    width: auto;
    min-width: 9.5rem;
    height: 36px;
    padding: 0 1.9rem 0 0.7rem;
    border-radius: var(--radius);
    font-size: 0.845rem;
}

/* bootstrap-table's built-in search box on legacy screens. */
.tlab-backoffice .fixed-table-toolbar .search input {
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.845rem;
}

/* Legacy tables inherit the density and header treatment of the new ones. */
.tlab-backoffice .card .table thead th {
    padding: 0.6rem 0.85rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: var(--surface-muted) !important;
    font-size: 0.735rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
}

.tlab-backoffice .card .table tbody td {
    padding: 0.5rem 0.85rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
}

.tlab-backoffice .card .table tbody tr:nth-child(odd),
.tlab-backoffice .card .table tbody tr:nth-child(even) {
    background: var(--surface) !important;
}

.tlab-backoffice .card .table tbody tr:hover {
    background: var(--surface-muted) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Switch rows — a list of feature toggles inside a panel
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-switchgrid {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .tlab-backoffice .tlab-switchgrid--two {
        column-gap: 1.5rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tlab-backoffice .tlab-switchrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.tlab-backoffice .tlab-switchrow:last-child {
    border-bottom: 0;
}

.tlab-backoffice .tlab-switchrow__text {
    min-width: 0;
}

.tlab-backoffice .tlab-switchrow__label {
    display: block;
    color: var(--text-primary);
    font-size: 0.865rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-switchrow__desc {
    display: block;
    margin-top: 0.1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.tlab-backoffice .tlab-switchrow .tlab-switch {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Draft notice
   Shown at the top of a create/edit workspace when unsaved work from an
   earlier visit is still stored in this browser.
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-draftnotice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(231, 47, 137, 0.28);
    border-radius: var(--radius-lg);
    background: #fff4f9;
    animation: tlab-chip-in var(--transition) both;
}

.tlab-backoffice .tlab-draftnotice__icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--brand-pink-dark);
    background: #ffe3f0;
    font-size: 0.85rem;
}

.tlab-backoffice .tlab-draftnotice__text {
    min-width: 0;
    flex: 1 1 18rem;
}

.tlab-backoffice .tlab-draftnotice__text strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.885rem;
}

.tlab-backoffice .tlab-draftnotice__meta {
    display: block;
    margin-top: 0.1rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.tlab-backoffice .tlab-draftnotice__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.tlab-backoffice.dark-mode .tlab-draftnotice {
    border-color: rgba(231, 47, 137, 0.32);
    background: rgba(231, 47, 137, 0.1);
}

.tlab-backoffice.dark-mode .tlab-draftnotice__icon {
    color: var(--brand-pink-light);
    background: rgba(231, 47, 137, 0.18);
}

/* Three-button dialog: the buttons need room to breathe on one row. */
.tlab-dialog--three .swal2-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tlab-dialog--three .swal2-actions .btn {
    margin: 0;
}

/* Definition list laid out in columns for read-only detail panels. */
@media (min-width: 640px) {
    .tlab-backoffice .tlab-deflist--inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   PART 3 — CLARITY LAYER
   Alerts, tooltips, detail pages, clickable identifiers and help notes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inline alerts
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-alert__icon {
    flex: 0 0 auto;
    margin-top: 0.05rem;
    font-size: 0.9rem;
}

.tlab-backoffice .tlab-alert__title {
    margin: 0 0 0.15rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 650;
}

.tlab-backoffice .tlab-alert__text {
    color: var(--text-secondary);
    font-size: 0.845rem;
    line-height: 1.5;
}

.tlab-backoffice .tlab-alert__text p:last-child {
    margin-bottom: 0;
}

.tlab-backoffice .tlab-alert--info {
    border-left-color: var(--primary);
    background: var(--info-soft);
}
.tlab-backoffice .tlab-alert--info .tlab-alert__icon { color: var(--primary); }

/* Amber stays amber — it has to read as caution, not as brand. */
.tlab-backoffice .tlab-alert--warning {
    border-left-color: var(--warning);
    background: var(--warning-soft);
}
.tlab-backoffice .tlab-alert--warning .tlab-alert__icon { color: var(--warning); }

.tlab-backoffice .tlab-alert--success {
    border-left-color: var(--success);
    background: var(--success-soft);
}
.tlab-backoffice .tlab-alert--success .tlab-alert__icon { color: var(--success); }

.tlab-backoffice .tlab-alert--danger {
    border-left-color: var(--danger);
    background: var(--danger-soft);
}
.tlab-backoffice .tlab-alert--danger .tlab-alert__icon { color: var(--danger); }

/* --------------------------------------------------------------------------
   Tooltips
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-tip {
    position: fixed;
    z-index: 1300;
    max-width: 18rem;
    padding: 0.32rem 0.55rem;
    border-radius: var(--radius-sm);
    color: #fff;
    background: #10202e;
    box-shadow: var(--shadow-pop);
    font-size: 0.775rem;
    font-weight: 500;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.tlab-backoffice .tlab-tip.is-visible {
    opacity: 1;
    transform: none;
}

.tlab-backoffice.dark-mode .tlab-tip {
    color: var(--text-primary);
    background: #2a3b4c;
}

.tlab-backoffice .tlab-iconbtn--sm {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   Clickable primary identifier in a table
   The row's name is a real link, so middle-click and copy-link work.
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-rowlink {
    display: inline-block;
    max-width: 42ch;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.tlab-backoffice .tlab-rowlink:hover,
.tlab-backoffice .tlab-rowlink:focus-visible {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Country flag before a market's name (Credentials, Versions & Environments)
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-flagcell {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
    vertical-align: middle;
}

.tlab-backoffice .tlab-flag {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1rem;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--border);
}

.tlab-backoffice .tlab-flag--none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--surface-muted);
    font-size: 0.6rem;
}

/* --------------------------------------------------------------------------
   Detail pages
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-detail__cover {
    margin: 0 0 1.15rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-detail__cover img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
}

.tlab-backoffice .tlab-detail__title {
    margin: 0 0 0.85rem;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.35;
}

.tlab-backoffice .tlab-detail__empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.865rem;
    font-style: italic;
}

.tlab-backoffice .tlab-detail__gallery {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.tlab-backoffice .tlab-detail__gallery img {
    width: 100%;
    height: 90px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    object-fit: cover;
}

/* Rendered rich text from the editor. */
.tlab-backoffice .tlab-prose {
    color: var(--text-primary);
    font-size: 0.925rem;
    line-height: 1.65;
}

.tlab-backoffice .tlab-prose > :last-child { margin-bottom: 0; }
.tlab-backoffice .tlab-prose p { margin-bottom: 0.85rem; }
.tlab-backoffice .tlab-prose h1,
.tlab-backoffice .tlab-prose h2,
.tlab-backoffice .tlab-prose h3 {
    margin: 1.35rem 0 0.6rem;
    color: var(--text-primary);
    font-weight: 650;
    line-height: 1.3;
}
.tlab-backoffice .tlab-prose h1 { font-size: 1.15rem; }
.tlab-backoffice .tlab-prose h2 { font-size: 1.05rem; }
.tlab-backoffice .tlab-prose h3 { font-size: 0.97rem; }
.tlab-backoffice .tlab-prose ul,
.tlab-backoffice .tlab-prose ol { margin: 0 0 0.85rem 1.1rem; }
.tlab-backoffice .tlab-prose li { margin-bottom: 0.3rem; }
.tlab-backoffice .tlab-prose a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tlab-backoffice .tlab-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.tlab-backoffice .tlab-prose table {
    width: 100%;
    margin-bottom: 0.85rem;
    border-collapse: collapse;
}
.tlab-backoffice .tlab-prose th,
.tlab-backoffice .tlab-prose td {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    text-align: left;
}
.tlab-backoffice .tlab-prose blockquote {
    margin: 0 0 0.85rem;
    padding-left: 0.85rem;
    border-left: 3px solid var(--brand-pink);
    color: var(--text-secondary);
}

.tlab-backoffice .tlab-copyable {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* Wrapped, not truncated: a slug, URL or username is copied and compared, so
   it has to be readable in full. It used to be nowrap + ellipsis, but inside a
   grid row nothing constrained it and it ran out of the panel instead. */
.tlab-backoffice .tlab-copyable > [data-tlab-copy-value] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tlab-backoffice .tlab-copyable > [data-tlab-copy-value] + .tlab-iconbtn {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: -3px; /* centre the 26px button on the first text line */
}

/* --------------------------------------------------------------------------
   Help notes
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-help-note {
    margin-bottom: 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.tlab-backoffice .tlab-help-note > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.845rem;
    font-weight: 600;
    list-style: none;
}

.tlab-backoffice .tlab-help-note > summary::-webkit-details-marker { display: none; }

.tlab-backoffice .tlab-help-note > summary:hover,
.tlab-backoffice .tlab-help-note > summary:focus-visible {
    color: var(--primary);
}

.tlab-backoffice .tlab-help-note > summary i {
    color: var(--primary);
}

.tlab-backoffice .tlab-help-note > summary::after {
    margin-left: auto;
    color: var(--text-muted);
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-size: 0.62rem;
    font-weight: 900;
    transition: transform var(--transition-fast);
}

.tlab-backoffice .tlab-help-note[open] > summary::after {
    transform: rotate(180deg);
}

.tlab-backoffice .tlab-help-note__body {
    padding: 0 0.85rem 0.85rem;
    color: var(--text-secondary);
    font-size: 0.845rem;
    line-height: 1.55;
}

.tlab-backoffice .tlab-help-note__body dl {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
}

.tlab-backoffice .tlab-help-note__body dt {
    color: var(--text-primary);
    font-weight: 650;
}

.tlab-backoffice .tlab-help-note__body dd {
    margin: 0 0 0.35rem;
}

/* A select that is repopulating reads as busy rather than as empty. */
.tlab-backoffice select.is-loading {
    color: var(--text-muted);
    background-image: none;
    cursor: progress;
    opacity: 0.75;
}

/* ==========================================================================
   PART 4 — DASHBOARD
   A working launchpad rather than a wall of decorative cards.
   ========================================================================== */

.tlab-backoffice .tlab-sectionhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.8rem;
}

.tlab-backoffice .tlab-sectionhead h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tlab-backoffice .tlab-sectionhead p {
    margin: 0.18rem 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.tlab-backoffice .tlab-dashboard__stats {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tlab-backoffice .tlab-dashboard-stat {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 104px;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.tlab-backoffice .tlab-dashboard-stat::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: var(--border-strong);
}

.tlab-backoffice .tlab-dashboard-stat--blue::before { background: var(--brand-blue); }
.tlab-backoffice .tlab-dashboard-stat--pink::before { background: var(--brand-pink); }

.tlab-backoffice .tlab-dashboard-stat:hover,
.tlab-backoffice .tlab-dashboard-stat:focus-visible {
    border-color: rgba(15, 105, 175, 0.28);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transform: translateY(-1px);
}

.tlab-backoffice .tlab-dashboard-stat__icon,
.tlab-backoffice .tlab-quick-action__icon,
.tlab-backoffice .tlab-dashboard-list__icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--text-secondary);
    background: var(--surface-subtle);
}

.tlab-backoffice .tlab-dashboard-stat--blue .tlab-dashboard-stat__icon {
    color: var(--brand-blue);
    background: var(--brand-blue-soft);
}

.tlab-backoffice .tlab-dashboard-stat--pink .tlab-dashboard-stat__icon {
    color: var(--brand-pink-dark);
    background: #fff0f7;
}

.tlab-backoffice .tlab-dashboard-stat__content {
    min-width: 0;
}

.tlab-backoffice .tlab-dashboard-stat__value,
.tlab-backoffice .tlab-dashboard-stat__label {
    display: block;
}

.tlab-backoffice .tlab-dashboard-stat__value {
    font-size: 1.55rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.tlab-backoffice .tlab-dashboard-stat__label {
    margin-top: 0.28rem;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-dashboard-stat__arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.72rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transition), transform var(--transition);
}

.tlab-backoffice .tlab-dashboard-stat:hover .tlab-dashboard-stat__arrow,
.tlab-backoffice .tlab-dashboard-stat:focus-visible .tlab-dashboard-stat__arrow {
    opacity: 1;
    transform: none;
}

.tlab-backoffice .tlab-dashboard__actions {
    margin-top: 1.5rem;
}

.tlab-backoffice .tlab-dashboard__action-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tlab-backoffice .tlab-quick-action {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    background: var(--surface);
    grid-template-columns: auto minmax(0, 1fr) auto;
    text-decoration: none;
}

.tlab-backoffice .tlab-quick-action:hover,
.tlab-backoffice .tlab-quick-action:focus-visible {
    border-color: rgba(15, 105, 175, 0.3);
    color: var(--text-primary);
    background: var(--info-soft);
    text-decoration: none;
}

.tlab-backoffice .tlab-quick-action__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    color: var(--primary);
    background: var(--brand-blue-soft);
    font-size: 0.82rem;
}

.tlab-backoffice .tlab-quick-action strong,
.tlab-backoffice .tlab-quick-action small {
    display: block;
}

.tlab-backoffice .tlab-quick-action strong {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 650;
}

.tlab-backoffice .tlab-quick-action small {
    margin-top: 0.12rem;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-quick-action > .fa-chevron-right {
    color: var(--text-muted);
    font-size: 0.65rem;
}

.tlab-backoffice .tlab-dashboard__columns {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tlab-backoffice .tlab-dashboard-list__item {
    display: grid;
    min-width: 0;
    min-height: 62px;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    text-decoration: none;
}

.tlab-backoffice .tlab-dashboard-list__item:last-child { border-bottom: 0; }

.tlab-backoffice .tlab-dashboard-list__item:hover,
.tlab-backoffice .tlab-dashboard-list__item:focus-visible {
    color: var(--text-primary);
    background: var(--surface-muted);
    text-decoration: none;
}

.tlab-backoffice .tlab-dashboard-list__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    color: var(--primary);
    font-size: 0.76rem;
}

.tlab-backoffice .tlab-dashboard-list__thumb {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.tlab-backoffice .tlab-dashboard-list__body {
    min-width: 0;
}

.tlab-backoffice .tlab-dashboard-list__body strong,
.tlab-backoffice .tlab-dashboard-list__body small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-dashboard-list__body strong {
    font-size: 0.86rem;
    font-weight: 650;
}

.tlab-backoffice .tlab-dashboard-list__body small,
.tlab-backoffice .tlab-dashboard-list__meta {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.tlab-backoffice .tlab-dashboard-list__item > .fa-chevron-right {
    color: var(--text-muted);
    font-size: 0.58rem;
}

.tlab-backoffice .tlab-dashboard__columns + .tlab-panel {
    margin-top: 1rem;
}

.tlab-backoffice .tlab-dashboard-bars {
    display: grid;
    gap: 0.75rem 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tlab-backoffice .tlab-dashboard-bar__label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.28rem;
    color: var(--text-secondary);
    font-size: 0.79rem;
}

.tlab-backoffice .tlab-dashboard-bar__label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-dashboard-bar__label strong {
    color: var(--text-primary);
    font-weight: 650;
}

.tlab-backoffice .tlab-dashboard-bar__track {
    height: 7px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
}

.tlab-backoffice .tlab-dashboard-bar__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-blue), #4c8dbf);
}

.tlab-backoffice.dark-mode .tlab-dashboard-stat,
.tlab-backoffice.dark-mode .tlab-quick-action {
    border-color: var(--border);
    background: var(--surface);
}

.tlab-backoffice.dark-mode .tlab-dashboard-stat__icon,
.tlab-backoffice.dark-mode .tlab-quick-action__icon,
.tlab-backoffice.dark-mode .tlab-dashboard-list__icon,
.tlab-backoffice.dark-mode .tlab-dashboard-bar__track {
    background: var(--surface-subtle);
}

@media (max-width: 1199.98px) {
    .tlab-backoffice .tlab-dashboard__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .tlab-backoffice .tlab-dashboard__action-grid,
    .tlab-backoffice .tlab-dashboard__columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .tlab-backoffice .tlab-dashboard__stats,
    .tlab-backoffice .tlab-dashboard-bars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tlab-backoffice .tlab-dashboard-stat {
        min-height: 92px;
        padding: 0.8rem;
    }

    .tlab-backoffice .tlab-dashboard-stat__arrow,
    .tlab-backoffice .tlab-dashboard-list__item > .fa-chevron-right {
        display: none;
    }
}

@media (max-width: 479.98px) {
    .tlab-backoffice .tlab-dashboard__stats,
    .tlab-backoffice .tlab-dashboard-bars {
        grid-template-columns: 1fr;
    }

    .tlab-backoffice .tlab-sectionhead {
        align-items: flex-start;
    }

    .tlab-backoffice .tlab-dashboard-list__meta {
        display: none;
    }

    .tlab-backoffice .tlab-dashboard-list__item {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Project Resources

   Built only from the tokens declared at the top of this file, so the dark
   theme is inherited rather than re-specified. The few rules below that do
   name a dark-mode selector are the ones where a token could not carry the
   meaning on its own.
   -------------------------------------------------------------------------- */

/* Hub cards carry a supporting count under the description. */
.tlab-backoffice .tlab-hubcard__stat {
    display: block;
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

/* --- Cross-section search ------------------------------------------------ */

.tlab-backoffice .tlab-prsearch {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1.15rem;
}

.tlab-backoffice .tlab-prsearch input {
    width: 100%;
    padding: 0.6rem 2.6rem 0.6rem 2.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    background: var(--surface);
    font-size: 0.9rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.tlab-backoffice .tlab-prsearch input:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.tlab-backoffice .tlab-prsearch__icon {
    position: absolute;
    left: 0.9rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.tlab-backoffice .tlab-prsearch .tlab-search__kbd {
    position: absolute;
    right: 0.75rem;
}

.tlab-backoffice .tlab-prsearch__results {
    position: absolute;
    z-index: 1040;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}

.tlab-backoffice .tlab-prsearch__group {
    display: block;
    padding: 0.5rem 0.6rem 0.25rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-prsearch__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
}

.tlab-backoffice .tlab-prsearch__item:hover,
.tlab-backoffice .tlab-prsearch__item:focus {
    background: var(--surface-muted);
    color: var(--text-primary);
    outline: none;
    text-decoration: none;
}

.tlab-backoffice .tlab-prsearch__item:focus-visible {
    box-shadow: var(--focus-ring);
}

.tlab-backoffice .tlab-prsearch__item > i {
    width: 1.1rem;
    color: var(--primary);
    font-size: 0.85rem;
    text-align: center;
}

.tlab-backoffice .tlab-prsearch__item span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.tlab-backoffice .tlab-prsearch__item strong {
    overflow: hidden;
    font-size: 0.87rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-prsearch__item small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-prsearch__empty {
    margin: 0;
    padding: 0.85rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* --- Secrets ------------------------------------------------------------- */

.tlab-backoffice .tlab-secret {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tlab-backoffice .tlab-secret--lg {
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Masked and revealed share one monospace metric so the row does not jump
   when a value appears. */
.tlab-backoffice .tlab-secret__mask {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--surface-subtle);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    user-select: none;
}

.tlab-backoffice .tlab-secret--lg .tlab-secret__mask {
    padding: 0.35rem 0.65rem;
    font-size: 0.92rem;
}

/* A revealed value is deliberately conspicuous: it is on screen on purpose
   and about to disappear again. */
.tlab-backoffice .tlab-secret__mask.is-revealed {
    border-color: rgba(231, 47, 137, 0.35);
    color: var(--text-primary);
    background: var(--danger-soft);
    letter-spacing: normal;
    user-select: all;
}

.tlab-backoffice .tlab-secret__lock {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.tlab-backoffice .tlab-secret--locked .tlab-secret__mask {
    opacity: 0.75;
}

/* Password input with its own show-while-typing control. */
.tlab-backoffice .tlab-passwordinput {
    position: relative;
    display: flex;
    align-items: center;
}

.tlab-backoffice .tlab-passwordinput input {
    padding-right: 2.6rem;
}

.tlab-backoffice .tlab-passwordinput .tlab-iconbtn {
    position: absolute;
    right: 0.35rem;
}

/* --- Needs attention ----------------------------------------------------- */

.tlab-backoffice .tlab-attention {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tlab-backoffice .tlab-attention__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.tlab-backoffice .tlab-attention__item--warning {
    border-left-color: var(--warning);
    background: var(--warning-soft);
}

.tlab-backoffice .tlab-attention__item--danger {
    border-left-color: var(--danger);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-attention__item--info {
    border-left-color: var(--info);
    background: var(--info-soft);
}

.tlab-backoffice .tlab-attention__icon {
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.tlab-backoffice .tlab-attention__item--warning .tlab-attention__icon { color: var(--warning); }
.tlab-backoffice .tlab-attention__item--danger .tlab-attention__icon { color: var(--danger); }
.tlab-backoffice .tlab-attention__item--info .tlab-attention__icon { color: var(--info); }

.tlab-backoffice .tlab-attention__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
    text-decoration: none;
}

.tlab-backoffice .tlab-attention__body:hover,
.tlab-backoffice .tlab-attention__body:focus {
    color: var(--text-primary);
    text-decoration: none;
}

.tlab-backoffice .tlab-attention__body:hover strong {
    text-decoration: underline;
}

.tlab-backoffice .tlab-attention__body strong {
    font-size: 0.87rem;
    font-weight: 650;
}

.tlab-backoffice .tlab-attention__body small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.tlab-backoffice .tlab-attention__chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* --- Activity ------------------------------------------------------------ */

.tlab-backoffice .tlab-activity {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tlab-backoffice .tlab-activity__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.tlab-backoffice .tlab-activity__item:last-child { border-bottom: 0; }

.tlab-backoffice .tlab-activity__icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    color: var(--primary);
    background: var(--info-soft);
    font-size: 0.7rem;
}

.tlab-backoffice .tlab-activity__body {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--text-primary);
    font-size: 0.845rem;
}

.tlab-backoffice .tlab-activity__time {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.76rem;
    white-space: nowrap;
}

/* --- Versions matrix ----------------------------------------------------- */

.tlab-backoffice .tlab-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.865rem;
}

.tlab-backoffice .tlab-matrix th,
.tlab-backoffice .tlab-matrix td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.tlab-backoffice .tlab-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--text-secondary);
    background: var(--surface-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tlab-backoffice .tlab-matrix tbody tr:hover {
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-matrix tbody th[scope="row"] {
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
}

.tlab-backoffice .tlab-matrix__cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Three states, three colours — and never colour alone: every state also
   carries its own words, so the table reads correctly in greyscale and to a
   screen reader. */
.tlab-backoffice .tlab-matrix__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--border-strong);
}

.tlab-backoffice .tlab-matrix__cell--recorded .tlab-matrix__dot { background: var(--success); }
.tlab-backoffice .tlab-matrix__cell--incomplete .tlab-matrix__dot { background: var(--warning); }
.tlab-backoffice .tlab-matrix__cell--missing .tlab-matrix__dot { background: var(--border-strong); }

/* Every label is an edit link, so the styling keys off the cell's state
   rather than off the element being an anchor: a recorded value still reads as
   the primary content of its cell, an empty one still reads as absent. */
.tlab-backoffice .tlab-matrix__label {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.tlab-backoffice .tlab-matrix__cell--incomplete .tlab-matrix__label {
    color: var(--warning-dark);
    font-weight: 600;
}

.tlab-backoffice .tlab-matrix__cell--missing .tlab-matrix__label {
    color: var(--text-muted);
    font-weight: 500;
}

.tlab-backoffice a.tlab-matrix__label:hover,
.tlab-backoffice a.tlab-matrix__label:focus {
    color: var(--primary);
    text-decoration: underline;
}

.tlab-backoffice a.tlab-matrix__label:focus-visible {
    border-radius: var(--radius-xs);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* The row's action menu should not pull the eye across the table; it firms up
   when the row is actually being used. */
.tlab-backoffice .tlab-matrix tbody .tlab-rowactions .tlab-iconbtn {
    opacity: 0.55;
    transition: opacity var(--transition-fast);
}

.tlab-backoffice .tlab-matrix tbody tr:hover .tlab-rowactions .tlab-iconbtn,
.tlab-backoffice .tlab-matrix tbody .tlab-rowactions .tlab-iconbtn:focus-visible,
.tlab-backoffice .tlab-matrix tbody .tlab-rowactions .tlab-iconbtn[aria-expanded="true"] {
    opacity: 1;
}

.tlab-backoffice .tlab-matrix__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1.05rem;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.tlab-backoffice .tlab-matrix__summary-warn { color: var(--warning-dark); font-weight: 600; }

/* Dark mode: the two "dark" semantic colours are tuned for light backgrounds
   and go muddy against the dark surface, so they step up a shade here. */
.tlab-backoffice.dark-mode .tlab-matrix__cell--incomplete .tlab-matrix__label,
.tlab-backoffice.dark-mode .tlab-matrix__summary-warn {
    color: #e8a33d;
}

.tlab-backoffice.dark-mode .tlab-secret__mask.is-revealed {
    border-color: rgba(255, 160, 207, 0.4);
    color: #ffe3f0;
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 900px) {
    /* The matrix is the one table here that genuinely needs its own scroller;
       .tlab-tablewrap already provides it, so only the sticky header has to
       stand down or it detaches from the scrolled body. */
    .tlab-backoffice .tlab-matrix thead th { position: static; }

    .tlab-backoffice .tlab-attention__item {
        align-items: flex-start;
    }

    .tlab-backoffice .tlab-activity__item {
        flex-wrap: wrap;
    }

    .tlab-backoffice .tlab-activity__time {
        width: 100%;
        padding-left: calc(26px + 0.65rem);
    }
}

/* --- Activity Log -------------------------------------------------------- */

/* The log is one panel, like every other list: a compact filter toolbar, then
   the feed grouped by day. The compact one-line .tlab-activity above is still
   used by the Project Resources panels; the feed variant here adds the actor,
   the record's name and its context without either shape knowing the other. */

.tlab-backoffice .tlab-activitylog {
    overflow: hidden;
}

.tlab-backoffice .tlab-activitylog__toolbar .tlab-search,
.tlab-backoffice .tlab-toolbar--compact .tlab-search {
    flex: 1 1 12rem;
    max-width: 16rem;
}

.tlab-backoffice .tlab-activitylog__toolbar select.tlab-filter,
.tlab-backoffice .tlab-toolbar--compact select.tlab-filter {
    min-width: 8rem;
    max-width: 11rem;
}

.tlab-backoffice .tlab-daterange {
    display: inline-flex;
    height: 36px;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.845rem;
}

.tlab-backoffice .tlab-daterange:focus-within {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.tlab-backoffice .tlab-daterange.is-active {
    border-color: rgba(15, 105, 175, 0.4);
    background: var(--info-soft);
    color: var(--primary);
}

.tlab-backoffice .tlab-daterange input {
    width: 7.4rem;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.845rem;
    outline: 0;
}

.tlab-backoffice .tlab-daterange__sep {
    color: var(--text-muted);
}

.tlab-backoffice .tlab-perpage {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    white-space: nowrap;
}

.tlab-backoffice .tlab-perpage select.tlab-filter {
    width: auto;
    height: 32px;
    padding: 0 1.6rem 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: 0.8rem;
    min-width: 4.4rem;
    max-width: 5rem;
}

.tlab-backoffice .tlab-activitylog__chips,
.tlab-backoffice .tlab-toolbar-chips {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.15rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

/* Day heading: a sticky band across the panel, so the date stays in view
   while scrolling a long day. */
.tlab-backoffice .tlab-activity-day {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.5rem 1.15rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-activity-day__label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-activity-day__count {
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.tlab-backoffice .tlab-activity--feed {
    gap: 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
}

.tlab-backoffice .tlab-activity--feed .tlab-activity__item {
    position: relative;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.8rem 1.15rem;
    transition: background var(--transition-fast);
}

.tlab-backoffice .tlab-activity--feed .tlab-activity__item:hover {
    background: var(--surface-muted);
}

/* A thin rail joining the avatars within one day. */
.tlab-backoffice .tlab-activity--feed .tlab-activity__item + .tlab-activity__item::before {
    content: "";
    position: absolute;
    top: -0.8rem;
    left: calc(1.15rem + 17px);
    height: 1.6rem;
    border-left: 1px dashed var(--border-strong);
    pointer-events: none;
}

.tlab-backoffice .tlab-activity__avatar {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-blue-soft);
    color: var(--brand-blue-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tlab-backoffice .tlab-activity__badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
    border-radius: 50%;
    font-size: 0.5rem;
}

/* Tone. Deliberately narrow: ordinary edits stay neutral so that the two kinds
   of event worth noticing — something destroyed, something secret read — are
   the only ones that carry colour. */

.tlab-backoffice .tlab-activity__icon--neutral {
    color: var(--text-secondary);
    background: var(--surface-subtle);
}

.tlab-backoffice .tlab-activity__icon--create {
    color: var(--success);
    background: var(--success-soft);
}

.tlab-backoffice .tlab-activity__icon--danger {
    color: var(--danger);
    background: var(--danger-soft);
}

.tlab-backoffice .tlab-activity__icon--security {
    color: var(--warning);
    background: var(--warning-soft);
}

.tlab-backoffice .tlab-activity__main {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 0.2rem;
}

.tlab-backoffice .tlab-activity__headline {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.tlab-backoffice .tlab-activity__headline strong {
    color: var(--text-primary);
    font-weight: 650;
}

.tlab-backoffice .tlab-activity__subject {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-backoffice .tlab-activity__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}

.tlab-backoffice .tlab-activity__context {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.tlab-backoffice .tlab-activity__aside {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 34px;
}

.tlab-backoffice .tlab-activity--feed .tlab-activity__time {
    min-width: 2.8rem;
    margin-right: 0.25rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tlab-backoffice .tlab-activity__changes {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tlab-backoffice .tlab-activity__changes:hover {
    border-color: rgba(15, 105, 175, 0.4);
    background: var(--info-soft);
}

.tlab-backoffice .tlab-activity__changes i {
    font-size: 0.6rem;
    transition: transform var(--transition-fast);
}

.tlab-backoffice .tlab-activity__changes[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Shown in place of a link when the record has since been deleted. The entry
   stays; only the way back to it is gone. */
.tlab-backoffice .tlab-activity__gone {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.7;
}

.tlab-backoffice .tlab-activitylog__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1.15rem;
}

.tlab-backoffice .tlab-activitylog__footer .tlab-pager {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border-top: 0;
}

/* --- Before / after ------------------------------------------------------ */

.tlab-backoffice .tlab-diff {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.845rem;
}

.tlab-backoffice .tlab-diff th,
.tlab-backoffice .tlab-diff td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.tlab-backoffice .tlab-diff thead th {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-diff tbody th {
    width: 30%;
    color: var(--text-secondary);
    font-weight: 600;
}

.tlab-backoffice .tlab-diff__before {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--border-strong);
}

.tlab-backoffice .tlab-diff__after {
    color: var(--text-primary);
    font-weight: 600;
}

.tlab-backoffice .tlab-diff__arrow {
    width: 1.6rem;
    color: var(--text-muted);
    text-align: center;
}

/* Inline expansion under a feed row, for reading a diff without leaving the
   page. Collapsed with the [hidden] attribute, not with a class, so the row
   stays correct for assistive technology. */
.tlab-backoffice .tlab-activity__detail {
    margin: 0.55rem 0 0.2rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-activity__detail[hidden] { display: none; }

.tlab-backoffice .tlab-activity__items {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* --- Paginator ----------------------------------------------------------- */

.tlab-backoffice .tlab-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.9rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--border);
}

.tlab-backoffice .tlab-pager__summary {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.tlab-backoffice .tlab-pager__links {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tlab-backoffice .tlab-pager__link,
.tlab-backoffice .tlab-pager__gap {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-decoration: none;
}

.tlab-backoffice .tlab-pager__link:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
    text-decoration: none;
}

.tlab-backoffice .tlab-pager__link[aria-current="page"] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--text-on-color);
    font-weight: 600;
}

.tlab-backoffice .tlab-pager__link--disabled {
    opacity: 0.45;
    pointer-events: none;
}

.tlab-backoffice .tlab-pager__gap {
    border-color: transparent;
    background: none;
}

@media (max-width: 900px) {
    .tlab-backoffice .tlab-activity--feed .tlab-activity__item {
        flex-wrap: wrap;
    }

    .tlab-backoffice .tlab-activity--feed .tlab-activity__main {
        flex: 1 1 0;
    }

    /* Time and actions drop under the text, aligned with it rather than with
       the avatar. */
    .tlab-backoffice .tlab-activity--feed .tlab-activity__aside {
        width: 100%;
        justify-content: flex-start;
        padding-left: calc(34px + 0.85rem);
    }

    .tlab-backoffice .tlab-activity--feed .tlab-activity__time {
        min-width: 0;
        text-align: left;
    }

    .tlab-backoffice .tlab-activitylog__toolbar .tlab-search,
    .tlab-backoffice .tlab-toolbar--compact .tlab-search {
        max-width: none;
    }

    .tlab-backoffice .tlab-activity__subject {
        white-space: normal;
    }

    .tlab-backoffice .tlab-diff tbody th { width: auto; }
}

/* A filter chip rendered as a link — the Activity Log drops a filter by
   navigating rather than by script, so the chip is an anchor there. */
.tlab-backoffice a.tlab-chip,
.tlab-backoffice a.tlab-chip:hover,
.tlab-backoffice a.tlab-chip:focus {
    color: var(--text-primary);
    text-decoration: none;
}

.tlab-backoffice a.tlab-chip:hover {
    border-color: var(--border-strong);
    background: var(--surface-muted);
}

/* ==========================================================================
   PART 3 — FLUID MATERIALS & PHYSICAL FEEDBACK
   --------------------------------------------------------------------------
   A restrained, Apple-inspired interaction layer. Structural surfaces stay
   solid; only floating chrome uses translucency, and colour continues to carry
   product meaning: blue for navigation/action, pink for accent/attention.
   ========================================================================== */

.tlab-backoffice button,
.tlab-backoffice [role="button"],
.tlab-backoffice .btn,
.tlab-backoffice .nav-link,
.tlab-backoffice .dropdown-item,
.tlab-auth button,
.tlab-auth .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.tlab-backoffice input[type="checkbox"],
.tlab-backoffice input[type="radio"],
.tlab-auth input[type="checkbox"],
.tlab-auth input[type="radio"] {
    accent-color: var(--brand-blue);
}

/* Floating controls react on pointer-down. The short scale response is
   intentionally independent of any click handler, so feedback is immediate. */
.tlab-backoffice .tlab-nav-toggle:not(:disabled):active,
.tlab-backoffice .tlab-topbar__button:not(:disabled):active,
.tlab-backoffice .tlab-iconbtn:not(:disabled):active,
.tlab-backoffice .tlab-hubcard:active,
.tlab-backoffice .list-group-item-action:active,
.tlab-backoffice .tlab-pager__link:active,
.tlab-auth .password-toggle:not(:disabled):active,
.tlab-auth .tlab-auth-link:not(:disabled):active {
    transform: scale(0.97);
    transition-duration: 90ms;
}

.tlab-backoffice .nav-sidebar .nav-link:active {
    transform: scale(0.985);
    transition-duration: 90ms !important;
}

/* Menus and save bars are floating functional layers; translucency gives them
   hierarchy without adding another opaque block over the working surface. */
.tlab-backoffice .dropdown-menu,
.tlab-backoffice .tlab-menu,
.tlab-backoffice .tlab-savebar,
.tlab-backoffice .tlab-rowmenu,
.tlab-backoffice .popover {
    background-color: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--shadow-pop) !important;
}

.tlab-backoffice .tlab-savebar {
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 50px rgba(10, 34, 56, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

/* Sheets/dialogs materialise from the same on-screen position to avoid a
   disconnected entrance. Bootstrap's live transform remains interruptible. */
.tlab-backoffice .modal.fade .modal-dialog {
    filter: blur(2px);
    transform: translateY(8px) scale(0.985);
    transition: transform var(--transition-slow), filter var(--transition), opacity var(--transition);
}

.tlab-backoffice .modal.show .modal-dialog {
    filter: none;
    transform: none;
}

.tlab-backoffice .modal-backdrop.show {
    opacity: 0.36;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.tlab-backoffice .modal-content,
.swal2-container .swal2-popup {
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 32px 90px rgba(5, 25, 42, 0.24),
        0 2px 10px rgba(5, 25, 42, 0.08) !important;
}

/* Type hierarchy uses tighter tracking as size grows. */
.tlab-backoffice .tlab-pagehead__title,
.tlab-backoffice .content-header h1,
.tlab-backoffice .content-header .page-title,
.tlab-auth .login-box-title {
    letter-spacing: -0.025em;
    line-height: 1.16;
}

.tlab-backoffice .info-box-number,
.tlab-backoffice .stats-card h3 {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

/* The logo flower is echoed only in selection and high-value accent states;
   pink never competes with the blue primary action. */
.tlab-backoffice .tlab-pill--accent,
.tlab-backoffice .badge-secondary,
.tlab-backoffice .bg-secondary:not(.btn):not(.card-header) {
    border-color: rgba(231, 47, 137, 0.18) !important;
    color: var(--brand-pink-dark) !important;
    background: rgba(240, 210, 225, 0.52) !important;
}

.tlab-backoffice.dark-mode .main-header {
    background: rgba(20, 30, 40, 0.76) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 32px rgba(0, 0, 0, 0.18);
}

.tlab-backoffice.dark-mode .dropdown-menu,
.tlab-backoffice.dark-mode .tlab-menu,
.tlab-backoffice.dark-mode .tlab-savebar,
.tlab-backoffice.dark-mode .tlab-rowmenu,
.tlab-backoffice.dark-mode .popover {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(28, 42, 54, 0.84) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38) !important;
}

/* --------------------------------------------------------------------------
   Dark mode v2 — layered navy materials

   The canvas, working surfaces and floating chrome each have a distinct
   luminance. Blue carries interaction; pink is reserved for selection and
   emphasis. Keeping this as a token-led layer makes every current and future
   screen inherit the same night palette.
   -------------------------------------------------------------------------- */

body.tlab-backoffice.dark-mode {
    color-scheme: dark;
    --background: #09131c;
    --surface: #122330;
    --surface-muted: #182c3a;
    --surface-subtle: #203746;
    --surface-elevated: #1b3140;
    --border: rgba(151, 190, 216, 0.16);
    --border-strong: rgba(166, 203, 227, 0.28);
    --text-primary: #f2f7fa;
    --text-secondary: #bfd0db;
    --text-muted: #90a8b8;
    --primary: #4aa8e8;
    --primary-hover: #72beed;
    --primary-active: #2c8fce;
    --secondary: #ff68ac;
    --success: #48c493;
    --success-soft: rgba(72, 196, 147, 0.13);
    --warning: #efb15a;
    --warning-soft: rgba(239, 177, 90, 0.14);
    --danger: #ff5f88;
    --danger-soft: rgba(255, 95, 136, 0.13);
    --info-soft: rgba(74, 168, 232, 0.13);
    --brand-blue-soft: rgba(74, 168, 232, 0.13);
    --nav-bg: #061722;
    --nav-bg-accent: #0a2a3f;
    --nav-text: #c4d8e5;
    --nav-icon: #8fb4cb;
    --nav-section: #82abc4;
    --nav-hover: rgba(112, 190, 237, 0.08);
    --nav-active-bg: rgba(15, 105, 175, 0.34);
    --nav-active-border: rgba(100, 184, 237, 0.28);
    --nav-border: rgba(151, 190, 216, 0.13);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.018) inset;
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.24), 0 1px 0 rgba(255, 255, 255, 0.025) inset;
    --shadow-md: 0 20px 52px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --shadow-pop: 0 28px 72px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.045) inset;
    --focus-ring: 0 0 0 3px rgba(74, 168, 232, 0.28);
}

.tlab-backoffice.dark-mode .content-wrapper {
    background:
        radial-gradient(circle at 88% -8%, rgba(15, 105, 175, 0.16), transparent 34rem),
        radial-gradient(circle at 12% 108%, rgba(231, 47, 137, 0.055), transparent 30rem),
        linear-gradient(180deg, #0a1721 0%, var(--background) 52%, #081119 100%) !important;
}

.tlab-backoffice.dark-mode .main-sidebar,
.tlab-backoffice.dark-mode .sidebar-custom,
.tlab-backoffice.dark-mode .sidebar {
    background: var(--nav-bg) !important;
    background-image: linear-gradient(180deg, var(--nav-bg-accent) 0%, #071c2a 38%, var(--nav-bg) 100%) !important;
}

.tlab-backoffice.dark-mode .main-sidebar {
    border-right-color: rgba(116, 184, 225, 0.13) !important;
    box-shadow: 10px 0 34px rgba(0, 0, 0, 0.13) !important;
}

.tlab-backoffice.dark-mode .brand-link {
    padding: 0.65rem 0.85rem;
    background: linear-gradient(180deg, #0d2a3e, #092131) !important;
}

.tlab-backoffice.dark-mode .brand-image--full,
.tlab-backoffice.dark-mode .brand-image--mark {
    padding: 0.24rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}

.tlab-backoffice.dark-mode .brand-image--full {
    height: 28px !important;
    max-height: 28px !important;
}

.tlab-backoffice.dark-mode .brand-image--mark {
    width: 26px !important;
    height: 26px !important;
}

.tlab-backoffice.dark-mode .main-header {
    border-bottom-color: rgba(151, 190, 216, 0.16) !important;
    background: rgba(10, 24, 35, 0.82) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 14px 38px rgba(0, 0, 0, 0.2);
}

.tlab-backoffice.dark-mode .main-header [data-widget="pushmenu"],
.tlab-backoffice.dark-mode .dark-mode-container {
    border-color: var(--border) !important;
    background: rgba(31, 55, 71, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.tlab-backoffice.dark-mode .dark-toggle-label {
    border-color: rgba(102, 185, 236, 0.38);
    background: #197dbb;
}

.tlab-backoffice.dark-mode .dark-mode-container .mode-label:last-child {
    color: #ffffff;
}

.tlab-backoffice.dark-mode .dark-mode-container .mode-label:first-child {
    color: var(--text-muted);
}

.tlab-backoffice.dark-mode .sidebar .nav-sidebar .nav-link:hover,
.tlab-backoffice.dark-mode .sidebar .nav-sidebar .nav-link:focus {
    border-color: rgba(151, 190, 216, 0.09) !important;
    background: var(--nav-hover) !important;
}

.tlab-backoffice.dark-mode .nav-sidebar .nav-link.active,
.tlab-backoffice.dark-mode .sidebar .nav-sidebar .nav-link.active {
    border-color: var(--nav-active-border) !important;
    background: linear-gradient(90deg, rgba(15, 105, 175, 0.5), rgba(15, 105, 175, 0.25)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.tlab-backoffice.dark-mode .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(255, 160, 207, 0.34) !important;
}

.tlab-backoffice.dark-mode .tlab-panel,
.tlab-backoffice.dark-mode .tlab-dashboard-stat,
.tlab-backoffice.dark-mode .tlab-quick-action,
.tlab-backoffice.dark-mode .tlab-hubcard,
.tlab-backoffice.dark-mode .tlab-filecard,
.tlab-backoffice.dark-mode .modern-card,
.tlab-backoffice.dark-mode .stats-card,
.tlab-backoffice.dark-mode .chart-card,
.tlab-backoffice.dark-mode .table-card {
    border-color: var(--border) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 48%), var(--surface) !important;
    box-shadow: var(--shadow-xs) !important;
}

.tlab-backoffice.dark-mode .tlab-dashboard-stat:hover,
.tlab-backoffice.dark-mode .tlab-quick-action:hover,
.tlab-backoffice.dark-mode .tlab-hubcard:hover {
    border-color: rgba(74, 168, 232, 0.36) !important;
    background: linear-gradient(145deg, rgba(74, 168, 232, 0.08), transparent 58%), var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

.tlab-backoffice.dark-mode .tlab-dashboard-stat--blue .tlab-dashboard-stat__icon,
.tlab-backoffice.dark-mode .tlab-quick-action__icon,
.tlab-backoffice.dark-mode .tlab-dashboard-list__icon {
    color: #67baf0 !important;
    background: rgba(74, 168, 232, 0.13) !important;
}

.tlab-backoffice.dark-mode .tlab-dashboard-stat--pink .tlab-dashboard-stat__icon {
    color: #ff7bb8 !important;
    background: rgba(231, 47, 137, 0.14) !important;
}

.tlab-backoffice.dark-mode .tlab-panel__head,
.tlab-backoffice.dark-mode .tlab-panel__foot,
.tlab-backoffice.dark-mode .tlab-savebar,
.tlab-backoffice.dark-mode .tlab-chips,
.tlab-backoffice.dark-mode .tlab-datefilter__actions {
    border-color: var(--border) !important;
    background: var(--surface-muted) !important;
}

.tlab-backoffice.dark-mode .tlab-savebar {
    background: rgba(27, 49, 64, 0.86) !important;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.tlab-backoffice.dark-mode .tlab-toolbar {
    border-color: var(--border);
    background: rgba(14, 31, 43, 0.72);
}

.tlab-backoffice.dark-mode .form-control,
.tlab-backoffice.dark-mode .custom-select,
.tlab-backoffice.dark-mode select,
.tlab-backoffice.dark-mode input,
.tlab-backoffice.dark-mode textarea,
.tlab-backoffice.dark-mode .select2-container .select2-selection,
.tlab-backoffice.dark-mode .tagify,
.tlab-backoffice.dark-mode .tlab-search input,
.tlab-backoffice.dark-mode .tlab-datefilter__field .form-control {
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
    background: #0d1b25 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
}

.tlab-backoffice.dark-mode .form-control::placeholder,
.tlab-backoffice.dark-mode input::placeholder,
.tlab-backoffice.dark-mode textarea::placeholder {
    color: #7892a4 !important;
}

.tlab-backoffice.dark-mode .form-control:focus,
.tlab-backoffice.dark-mode .custom-select:focus,
.tlab-backoffice.dark-mode input:focus,
.tlab-backoffice.dark-mode textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.tlab-backoffice.dark-mode .tlab-panel .table thead th,
.tlab-backoffice.dark-mode .tlab-panel .fixed-table-header th {
    border-bottom-color: var(--border-strong) !important;
    color: #a9bdcb !important;
    background: var(--surface-elevated) !important;
}

.tlab-backoffice.dark-mode .tlab-panel .table tbody tr,
.tlab-backoffice.dark-mode .tlab-panel .table tbody tr:nth-child(odd),
.tlab-backoffice.dark-mode .tlab-panel .table tbody tr:nth-child(even) {
    background: var(--surface) !important;
}

.tlab-backoffice.dark-mode .tlab-panel .table tbody td {
    border-bottom-color: var(--border) !important;
}

.tlab-backoffice.dark-mode .tlab-panel .table tbody tr:hover {
    background: rgba(74, 168, 232, 0.075) !important;
    box-shadow: inset 2px 0 0 var(--primary) !important;
}

.tlab-backoffice.dark-mode .tlab-panel .table tbody tr.selected {
    background: rgba(74, 168, 232, 0.14) !important;
}

/* Brand pills carry language and default-state labels. The light-theme ink is
   intentionally dark, so it needs a dedicated high-contrast night treatment
   instead of inheriting that same blue on a navy surface. */
.tlab-backoffice.dark-mode .tlab-pill--brand {
    border-color: rgba(114, 190, 237, 0.5);
    color: #bfe4fb;
    background: rgba(74, 168, 232, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.tlab-backoffice.dark-mode .btn-primary {
    border-color: #258fce !important;
    background: linear-gradient(180deg, #248fce, #167ab8) !important;
    box-shadow: 0 6px 18px rgba(8, 84, 132, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.tlab-backoffice.dark-mode .btn-primary:hover,
.tlab-backoffice.dark-mode .btn-primary:focus {
    border-color: #4aabe7 !important;
    background: linear-gradient(180deg, #39a2df, #2088c7) !important;
}

.tlab-backoffice.dark-mode .btn-quiet,
.tlab-backoffice.dark-mode .tlab-iconbtn,
.tlab-backoffice.dark-mode .tlab-datefilter__trigger {
    border-color: var(--border-strong) !important;
    color: var(--text-secondary) !important;
    background: rgba(27, 49, 64, 0.72) !important;
}

.tlab-backoffice.dark-mode .btn-quiet:hover,
.tlab-backoffice.dark-mode .tlab-iconbtn:hover,
.tlab-backoffice.dark-mode .tlab-datefilter__trigger:hover {
    border-color: rgba(74, 168, 232, 0.42) !important;
    color: var(--text-primary) !important;
    background: rgba(74, 168, 232, 0.11) !important;
}

.tlab-backoffice.dark-mode .dropdown-menu,
.tlab-backoffice.dark-mode .tlab-menu,
.tlab-backoffice.dark-mode .tlab-rowmenu,
.tlab-backoffice.dark-mode .popover,
.tlab-backoffice.dark-mode .modal-content {
    border-color: var(--border-strong) !important;
    background-color: rgba(24, 44, 58, 0.92) !important;
    box-shadow: var(--shadow-pop) !important;
}

.tlab-backoffice.dark-mode .tlab-diff,
.tlab-backoffice.dark-mode .list-group-item {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

.tlab-backoffice.dark-mode .tlab-activity__avatar {
    background: rgba(15, 105, 175, 0.28);
    color: #cfe6f7;
}

/* Menus opened from the header are solid. The header is itself a backdrop-filter
   material, which makes it the backdrop root for everything inside it: a
   nested menu's blur can only sample the header, never the page, so the page
   showed through the menu sharp and unblurred at 82% opacity. */
.tlab-backoffice .main-header .dropdown-menu,
.tlab-backoffice .main-header .tlab-menu {
    background-color: var(--surface) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Solid fallbacks keep floating controls legible in browsers without material
   support and for users who explicitly reduce transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tlab-backoffice .main-header,
    .tlab-backoffice .dropdown-menu,
    .tlab-backoffice .tlab-menu,
    .tlab-backoffice .tlab-savebar,
    .tlab-backoffice .tlab-rowmenu,
    .tlab-backoffice .popover {
        background-color: var(--surface) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .tlab-backoffice .main-header,
    .tlab-backoffice .dropdown-menu,
    .tlab-backoffice .tlab-menu,
    .tlab-backoffice .tlab-savebar,
    .tlab-backoffice .tlab-rowmenu,
    .tlab-backoffice .popover,
    .tlab-backoffice .modal-backdrop.show {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .tlab-backoffice .main-header,
    .tlab-backoffice .dropdown-menu,
    .tlab-backoffice .tlab-menu,
    .tlab-backoffice .tlab-savebar,
    .tlab-backoffice .tlab-rowmenu,
    .tlab-backoffice .popover {
        background-color: var(--surface) !important;
    }
}

@media (prefers-contrast: more) {
    body.tlab-backoffice,
    body.tlab-auth {
        --border: rgba(23, 37, 54, 0.34);
        --border-strong: rgba(23, 37, 54, 0.52);
        --text-secondary: #34343a;
        --text-muted: #48484f;
    }

    .tlab-backoffice .main-header,
    .tlab-backoffice .dropdown-menu,
    .tlab-backoffice .tlab-menu,
    .tlab-backoffice .tlab-savebar,
    .tlab-backoffice .tlab-rowmenu,
    .tlab-backoffice .popover {
        border: 1px solid var(--border-strong) !important;
        background-color: var(--surface) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.tlab-backoffice.dark-mode {
        --border: rgba(255, 255, 255, 0.3);
        --border-strong: rgba(255, 255, 255, 0.5);
        --text-secondary: #edf4f8;
        --text-muted: #d4e0e8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tlab-backoffice .modal.fade .modal-dialog,
    .tlab-backoffice .modal.show .modal-dialog {
        filter: none !important;
        transform: none !important;
    }
}

/* --- Choice cards -------------------------------------------------------- */

/* A radio group where each option carries its own explanation. Used where the
   choice changes what someone can do rather than just what a record says — an
   administrator's access level is the whole of their permissions, so the
   consequence belongs next to the option, not in a helper line underneath. */

.tlab-backoffice .tlab-choice {
    display: grid;
    gap: 0.5rem;
}

.tlab-backoffice .tlab-choice__option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.tlab-backoffice .tlab-choice__option:hover {
    border-color: var(--border-strong);
    background: var(--surface-muted);
}

.tlab-backoffice .tlab-choice__option input {
    margin: 0.2rem 0 0;
    flex: 0 0 auto;
}

.tlab-backoffice .tlab-choice__option:has(input:checked) {
    border-color: var(--primary);
    background: var(--info-soft);
}

.tlab-backoffice .tlab-choice__option:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.tlab-backoffice .tlab-choice__body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.tlab-backoffice .tlab-choice__title {
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-choice__desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* --- One-time secret ----------------------------------------------------- */

/* Shown once, for a value the server will never produce again: a provisional
   password. Deliberately loud — if it is dismissed without being copied the
   only way forward is to issue a new one. */

.tlab-backoffice .tlab-onetime {
    margin-top: 0.2rem;
    padding: 1rem;
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    background: var(--warning-soft);
}

.tlab-backoffice .tlab-onetime[hidden] { display: none !important; }

.tlab-backoffice .tlab-onetime__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
    color: var(--warning-dark);
    font-size: 0.88rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-onetime__note {
    margin: 0.7rem 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.tlab-backoffice .tlab-onetime__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.tlab-backoffice .tlab-onetime__label {
    flex: 0 0 7rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tlab-backoffice .tlab-onetime__value {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88rem;
    word-break: break-all;
}

@media (max-width: 900px) {
    .tlab-backoffice .tlab-onetime__row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tlab-backoffice .tlab-onetime__label { flex-basis: 100%; }
}

.tlab-backoffice.dark-mode .tlab-onetime {
    border-color: #a8762f;
}

.tlab-backoffice.dark-mode .tlab-onetime__head { color: #e8a33d; }

/* ---- Sealed password (QuickForget hand-off) ----
   The administrator form never holds a password: it shows a preview of what
   saving does, then a hand-off with the link. The blurred characters are a
   random stand-in made in the browser, not the password. */
.tlab-backoffice .tlab-seal {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(15, 105, 175, 0.07), transparent 55%),
        var(--surface);
}

.tlab-backoffice .tlab-seal[hidden] { display: none !important; }

.tlab-backoffice .tlab-seal--preview {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-style: dashed;
}

.tlab-backoffice .tlab-seal__lock {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-blue-soft);
    color: var(--primary);
    font-size: 0.95rem;
}

.tlab-backoffice .tlab-seal__lock--done {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    background: var(--success-soft);
    color: var(--success);
    font-size: 0.8rem;
}

.tlab-backoffice .tlab-seal__body {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.tlab-backoffice .tlab-seal__body strong {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.tlab-backoffice .tlab-seal__decoy {
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    filter: blur(1.5px);
    user-select: none;
}

.tlab-backoffice .tlab-seal__terms {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.tlab-backoffice .tlab-seal--handoff {
    padding: 1rem 1.1rem 0.9rem;
    border-color: rgba(22, 132, 91, 0.35);
}

.tlab-backoffice .tlab-seal__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.85rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-seal__grid {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.45rem 0.75rem;
    align-items: center;
    margin: 0 0 0.85rem;
}

.tlab-backoffice .tlab-seal__grid dt {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-seal__grid dd {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.tlab-backoffice .tlab-seal__value,
.tlab-backoffice .tlab-seal__blur {
    min-width: 0;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86rem;
}

/* Blurred and unselectable: it looks like a password and cannot be copied,
   because it is not one. */
.tlab-backoffice .tlab-seal__blur {
    filter: blur(5px);
    letter-spacing: 0.06em;
    pointer-events: none;
    user-select: none;
}

.tlab-backoffice .tlab-seal__reveal {
    color: var(--primary);
}

.tlab-backoffice .tlab-seal__link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
    border: 1px solid rgba(15, 105, 175, 0.35);
    border-radius: var(--radius);
    background: var(--info-soft);
    color: var(--primary);
}

.tlab-backoffice .tlab-seal__url {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
    outline: 0;
}

.tlab-backoffice .tlab-seal__expiry {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.65rem 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.tlab-backoffice .tlab-seal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}

/* The moment of sealing: the lock drops in and the panel settles. */
.tlab-backoffice .tlab-seal--handoff.is-sealing {
    animation: tlab-seal-in 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tlab-backoffice .tlab-seal--handoff.is-sealing .tlab-seal__lock--done {
    animation: tlab-seal-lock 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes tlab-seal-in {
    from { opacity: 0; translate: 0 6px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes tlab-seal-lock {
    0% { scale: 0.4; rotate: -20deg; }
    60% { scale: 1.15; rotate: 6deg; }
    100% { scale: 1; rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
    .tlab-backoffice .tlab-seal--handoff.is-sealing,
    .tlab-backoffice .tlab-seal--handoff.is-sealing .tlab-seal__lock--done {
        animation: none;
    }
}

@media (max-width: 640px) {
    .tlab-backoffice .tlab-seal__grid {
        grid-template-columns: 1fr;
    }

    .tlab-backoffice .tlab-seal__link {
        flex-wrap: wrap;
    }
}

/* ---- jQuery UI datepicker ----
   jquery-ui.min.js is loaded globally but its stylesheet is not, so the
   widget is styled here in full from the design tokens (dark mode follows
   automatically). The popup is appended to <body>, hence the body scope. */
.tlab-backoffice .ui-helper-hidden-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tlab-backoffice .ui-datepicker {
    display: none;
    z-index: 1060 !important;
    width: 17.5rem;
    margin-top: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.tlab-backoffice .ui-datepicker-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    margin-bottom: 0.5rem;
    padding: 0 2.25rem;
}

.tlab-backoffice .ui-datepicker-prev,
.tlab-backoffice .ui-datepicker-next {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tlab-backoffice .ui-datepicker-prev { left: 0; }
.tlab-backoffice .ui-datepicker-next { right: 0; }

.tlab-backoffice .ui-datepicker-prev:hover,
.tlab-backoffice .ui-datepicker-next:hover {
    background: var(--surface-subtle);
    color: var(--text-primary);
    text-decoration: none;
}

.tlab-backoffice .ui-datepicker-prev.ui-state-disabled,
.tlab-backoffice .ui-datepicker-next.ui-state-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Replace the "Prev"/"Next" text with chevrons. */
.tlab-backoffice .ui-datepicker-prev .ui-icon,
.tlab-backoffice .ui-datepicker-next .ui-icon {
    font-size: 0;
}

.tlab-backoffice .ui-datepicker-prev .ui-icon::before,
.tlab-backoffice .ui-datepicker-next .ui-icon::before {
    content: "";
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

.tlab-backoffice .ui-datepicker-prev .ui-icon::before { transform: translateX(2px) rotate(-45deg); }
.tlab-backoffice .ui-datepicker-next .ui-icon::before { transform: translateX(-2px) rotate(135deg); }

.tlab-backoffice .ui-datepicker-title {
    display: flex;
    gap: 0.35rem;
    font-weight: 600;
}

.tlab-backoffice .ui-datepicker-title select {
    height: 2rem;
    padding: 0 1.5rem 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background-color: var(--surface-muted);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.tlab-backoffice .ui-datepicker-title select:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.tlab-backoffice .ui-datepicker-calendar {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.tlab-backoffice .ui-datepicker-calendar th {
    padding: 0.25rem 0 0.4rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tlab-backoffice .ui-datepicker-calendar td {
    padding: 1px;
    text-align: center;
}

.tlab-backoffice .ui-datepicker-calendar td a,
.tlab-backoffice .ui-datepicker-calendar td span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.1rem;
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tlab-backoffice .ui-datepicker-calendar td a:hover {
    background: var(--surface-subtle);
    text-decoration: none;
}

.tlab-backoffice .ui-datepicker-calendar .ui-datepicker-other-month span,
.tlab-backoffice .ui-datepicker-calendar .ui-state-disabled span {
    color: var(--text-muted);
    opacity: 0.5;
}

.tlab-backoffice .ui-datepicker-calendar .ui-datepicker-today a {
    color: var(--primary);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--primary);
}

.tlab-backoffice .ui-datepicker-calendar a.ui-state-active,
.tlab-backoffice .ui-datepicker-calendar a.ui-state-active:hover {
    background: var(--primary);
    color: var(--text-on-color);
    font-weight: 600;
    box-shadow: none;
}

.tlab-backoffice .ui-datepicker-buttonpane {
    display: none;
}

/* ---- Shared "Created" column (data-table.js → tlabTimestampFormatter) ---- */
.tlab-backoffice .tlab-timestamp {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
    white-space: nowrap;
}

.tlab-backoffice .tlab-timestamp__date {
    color: var(--text-secondary);
}

.tlab-backoffice .tlab-timestamp__time {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ---- Checklist inside a dialog (e.g. News → duplicate to countries) ---- */
.tlab-backoffice .tlab-checklist {
    max-height: 16rem;
    margin-top: 0.75rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-align: left;
}

.tlab-backoffice .tlab-checklist__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
}

.tlab-backoffice .tlab-checklist__item:last-child { border-bottom: 0; }
.tlab-backoffice .tlab-checklist__item:hover { background: var(--surface-muted); }

.tlab-backoffice .tlab-checklist__item--all {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-muted);
    font-weight: 600;
}

.tlab-backoffice .tlab-checklist__item input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--primary);
}

/* ---- Screen guide additions (x-screen-guide) ---- */
.tlab-backoffice .tlab-help-note__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 0.72rem;
    font-weight: 600;
}

.tlab-backoffice .tlab-help-note > summary .tlab-help-note__flag i {
    color: inherit;
    font-size: 0.68rem;
}

.tlab-backoffice .tlab-help-note__intro {
    margin: 0 0 0.25rem;
}

.tlab-backoffice .tlab-help-note__body dl > div {
    display: grid;
    gap: 0.1rem;
}

.tlab-backoffice .tlab-help-note__warnings {
    margin-top: 0.85rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--text-primary);
}

.tlab-backoffice .tlab-help-note__warnings strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--warning);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tlab-backoffice .tlab-help-note__warnings ul {
    margin: 0;
    padding-left: 1.1rem;
}

.tlab-backoffice .tlab-help-note__warnings li + li {
    margin-top: 0.3rem;
}

.tlab-backoffice.dark-mode .tlab-help-note__warnings strong,
.tlab-backoffice.dark-mode .tlab-help-note__flag {
    color: #e8a33d;
}

/* --------------------------------------------------------------------------
   HTTP error pages (resources/views/errors)
   Rides on the .tlab-auth foundation for type, buttons and focus rings; the
   zero of each status code is replaced by a small animated lab illustration.
   -------------------------------------------------------------------------- */

body.tlab-auth.tlab-error {
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    background-image:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-blue) 16%, transparent) 0, transparent 38%),
        radial-gradient(circle at 88% 84%, color-mix(in srgb, var(--brand-pink) 14%, transparent) 0, transparent 36%),
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px, 28px 28px;
    background-position: center;
}

.tlab-error .tlab-error__stage {
    width: min(100%, 520px);
    min-width: 0;
    text-align: center;
}

.tlab-error .tlab-error__card {
    position: relative;
    overflow: hidden;
    padding: 2rem 2.25rem 2.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: var(--shadow-pop);
    animation: tlab-error-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tlab-error .tlab-error__card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--brand-blue) 0 54%, var(--brand-pink) 54% 100%);
}

.tlab-error .tlab-error__brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1.25rem;
}

.tlab-error .tlab-error__brand img {
    width: 132px;
    height: auto;
}

.tlab-error .tlab-error__version {
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-pill);
    color: var(--brand-pink-dark);
    background: #fff0f7;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* Status code: blue digit, illustrated zero, pink digit (the logo split). */
.tlab-error .tlab-error__code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.1rem, 1.5vw, 0.5rem);
    margin-bottom: 0.75rem;
    user-select: none;
}

.tlab-error .tlab-error__digit {
    font-size: clamp(4.75rem, 20vw, 7.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    font-variant-numeric: tabular-nums;
}

.tlab-error .tlab-error__digit--blue {
    color: var(--brand-blue);
}

.tlab-error .tlab-error__digit--pink {
    color: var(--brand-pink);
}

.tlab-error.dark-mode .tlab-error__digit--blue {
    color: #4a9ad6;
}

.tlab-error .tlab-error__glyph {
    width: clamp(4.5rem, 19vw, 7rem);
    height: auto;
    overflow: visible;
}

.tlab-error .tlab-error__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.5rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    background: var(--surface-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
}

.tlab-error .tlab-error__led {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-blue);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-blue) 50%, transparent);
    animation: tlab-error-led 1.8s ease-out infinite;
}

.tlab-error--forbidden .tlab-error__led {
    background: var(--danger);
    --tlab-led-glow: color-mix(in srgb, var(--danger) 50%, transparent);
}

.tlab-error .tlab-error__title {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: clamp(1.4rem, 5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.tlab-error .tlab-error__message {
    max-width: 38ch;
    margin: 0 auto 1.25rem;
    color: var(--text-secondary);
}

.tlab-error .tlab-error__specimen,
.tlab-error .tlab-error__reason {
    display: flex;
    max-width: 100%;
    margin: 0 auto 1.5rem;
    padding: 0.55rem 0.8rem;
    align-items: center;
    gap: 0.6rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-muted);
    font-size: 0.85rem;
    text-align: left;
}

.tlab-error .tlab-error__specimen {
    min-width: 0;
}

.tlab-error .tlab-error__specimen-label {
    flex: none;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tlab-error .tlab-error__specimen code {
    min-width: 0;
    overflow: hidden;
    color: var(--brand-pink-dark);
    background: transparent;
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-error .tlab-error__reason {
    border-style: solid;
    border-color: color-mix(in srgb, var(--danger) 25%, transparent);
    border-left: 3px solid var(--danger);
    color: var(--text-primary);
    background: var(--danger-soft);
}

.tlab-error .tlab-error__reason i {
    color: var(--danger);
}

.tlab-error .tlab-error__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.tlab-error .tlab-error__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.tlab-error .tlab-error__actions .btn[hidden] {
    display: none;
}

.tlab-error.dark-mode .btn-secondary {
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
    background: var(--surface-subtle) !important;
}

.tlab-error .tlab-error__footnote {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* 404: round-bottom flask ------------------------------------------------- */

.tlab-flask__glass {
    fill: none;
    stroke: var(--brand-blue);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tlab-error.dark-mode .tlab-flask__glass {
    stroke: #4a9ad6;
}

.tlab-flask__shine,
.tlab-flask__tick {
    fill: none;
    stroke: var(--brand-blue);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.35;
}

.tlab-flask__liquid {
    fill: var(--brand-pink);
    opacity: 0.85;
    animation: tlab-flask-wave 2.4s linear infinite;
}

.tlab-flask__bubble {
    fill: var(--brand-pink-light);
    transform-box: fill-box;
    transform-origin: center;
    animation: tlab-flask-bubble 2.8s ease-in infinite;
}

.tlab-flask__bubble--2 {
    animation-delay: 0.9s;
}

.tlab-flask__bubble--3 {
    animation-delay: 1.7s;
}

.tlab-flask__question {
    fill: var(--brand-blue);
    font-size: 34px;
    font-weight: 800;
    opacity: 0.18;
    transform-box: fill-box;
    animation: tlab-flask-question 2.8s ease-in-out infinite;
}

/* 403: padlock ------------------------------------------------------------ */

.tlab-lock__halo {
    fill: var(--danger-soft);
    transform-box: fill-box;
    transform-origin: center;
    animation: tlab-lock-halo 2.6s ease-in-out infinite;
}

.tlab-lock__body-group {
    transform-box: view-box;
    transform-origin: 60px 124px;
    animation: tlab-lock-shake 2.6s ease-in-out infinite;
}

.tlab-lock__shackle {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 9;
    stroke-linecap: round;
    animation: tlab-lock-tug 2.6s ease-in-out infinite;
}

.tlab-lock__body {
    fill: var(--brand-blue);
}

.tlab-lock__stripe {
    fill: var(--brand-pink);
}

.tlab-lock__keyhole {
    fill: #ffffff;
    animation: tlab-lock-keyhole 2.6s ease-in-out infinite;
}

/* Motion ------------------------------------------------------------------ */

@keyframes tlab-error-rise {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
}

@keyframes tlab-error-led {
    0% {
        box-shadow: 0 0 0 0 var(--tlab-led-glow, color-mix(in srgb, var(--brand-blue) 50%, transparent));
    }
    70%,
    100% {
        box-shadow: 0 0 0 7px transparent;
    }
}

@keyframes tlab-flask-wave {
    to {
        transform: translateX(60px);
    }
}

@keyframes tlab-flask-bubble {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }
    15% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-58px) scale(1.15);
    }
}

@keyframes tlab-flask-question {
    0%,
    100% {
        opacity: 0.12;
        transform: translateY(2px);
    }
    50% {
        opacity: 0.32;
        transform: translateY(-3px);
    }
}

/* Try the shackle, it holds, the lock rattles: one attempt per cycle. */
@keyframes tlab-lock-tug {
    0%,
    30%,
    100% {
        transform: translateY(0);
    }
    38% {
        transform: translateY(-7px);
    }
    44% {
        transform: translateY(0);
    }
}

@keyframes tlab-lock-shake {
    0%,
    44%,
    76%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-7deg);
    }
    58% {
        transform: rotate(6deg);
    }
    66% {
        transform: rotate(-3deg);
    }
    72% {
        transform: rotate(1.5deg);
    }
}

@keyframes tlab-lock-keyhole {
    0%,
    44%,
    80%,
    100% {
        fill: #ffffff;
    }
    50%,
    70% {
        fill: var(--brand-pink-light);
    }
}

@keyframes tlab-lock-halo {
    0%,
    44%,
    100% {
        opacity: 0.55;
        transform: scale(0.92);
    }
    58% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@media (max-width: 575.98px) {
    .tlab-error .tlab-error__card {
        padding: 1.65rem 1.25rem 1.75rem;
    }

    .tlab-error .tlab-error__actions .btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Image viewer (backoffice/image-viewer.js)
   Every image in a list table opens full size; the thumbnail says so.
   -------------------------------------------------------------------------- */

.tlab-backoffice .tlab-tablewrap tbody img,
.tlab-backoffice .bootstrap-table tbody img {
    cursor: zoom-in;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.tlab-backoffice .tlab-tablewrap tbody img:hover,
.tlab-backoffice .bootstrap-table tbody img:hover {
    box-shadow: 0 0 0 2px var(--primary);
}

body.tlab-imageviewer-open {
    overflow: hidden;
}

/* Close to the full window: the point is to see the image, so the chrome is
   one slim bar and the rest is stage. */
.tlab-imageviewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    padding: 1.25rem;
}

.tlab-imageviewer[hidden] {
    display: none;
}

.tlab-imageviewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 29, 46, 0.86);
    backdrop-filter: blur(4px);
}

.tlab-imageviewer__frame {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: #0d1620;
    box-shadow: var(--shadow-pop);
}

.tlab-imageviewer__bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem 0.55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #111d29;
    color: #fff;
}

.tlab-imageviewer__title {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 0.75rem;
}

.tlab-imageviewer__caption {
    min-width: 0;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlab-imageviewer__meta,
.tlab-imageviewer__count {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tlab-imageviewer__count {
    padding: 0 0.4rem;
}

.tlab-imageviewer__tools {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06);
}

.tlab-imageviewer__tool,
.tlab-imageviewer__level {
    display: inline-flex;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tlab-imageviewer__tool {
    width: 34px;
}

.tlab-imageviewer__level {
    min-width: 3.6rem;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tlab-imageviewer__tool:hover,
.tlab-imageviewer__level:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

.tlab-imageviewer__tool:focus-visible,
.tlab-imageviewer__level:focus-visible,
.tlab-imageviewer__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* The stage clips; the image is placed by transform so zoom and pan never
   reflow anything. A subtle checkerboard shows transparency in PNGs. */
.tlab-imageviewer__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    background:
        repeating-conic-gradient(#fff 0% 25%, #edf0f4 0% 50%) 50% / 24px 24px;
    cursor: zoom-in;
}

.tlab-imageviewer.is-pannable .tlab-imageviewer__stage {
    cursor: grab;
}

.tlab-imageviewer.has-dark-background .tlab-imageviewer__stage {
    background: repeating-conic-gradient(#121e2a 0% 25%, #0f1924 0% 50%) 50% / 24px 24px;
}

.tlab-imageviewer.is-dragging .tlab-imageviewer__stage {
    cursor: grabbing;
}

.tlab-imageviewer__img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
}

.tlab-imageviewer.is-loading .tlab-imageviewer__img,
.tlab-imageviewer.is-error .tlab-imageviewer__img {
    visibility: hidden;
}

.tlab-imageviewer__status {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #536174;
    font-size: 0.875rem;
    transform: translate(-50%, -50%);
}

.tlab-imageviewer.is-error .tlab-imageviewer__status {
    color: #b42342;
}

.tlab-imageviewer.has-dark-background .tlab-imageviewer__status {
    color: #ccd6e1;
}

.tlab-imageviewer.has-dark-background.is-error .tlab-imageviewer__status {
    color: #ff8fab;
}

.tlab-imageviewer__nav {
    position: absolute;
    top: 50%;
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    transform: translateY(-50%);
    transition: background var(--transition-fast);
}

.tlab-imageviewer__nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.tlab-imageviewer.has-many .tlab-imageviewer__nav {
    display: inline-flex;
}

.tlab-imageviewer__nav--prev {
    left: 0.85rem;
}

.tlab-imageviewer__nav--next {
    right: 0.85rem;
}

/* Tooltips from affordances.js must sit above the viewer. */
body.tlab-imageviewer-open .tlab-tip {
    z-index: 2100;
}

@media (max-width: 640px) {
    .tlab-imageviewer {
        padding: 0;
    }

    .tlab-imageviewer__frame {
        border-radius: 0;
    }

    .tlab-imageviewer__meta,
    .tlab-imageviewer__tools [data-tlab-viewer-zoom="fit"] {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Provisional password: the first-sign-in prompt and the change page
   -------------------------------------------------------------------------- */

.tlab-pwprompt__lead {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.tlab-pwprompt__steps {
    display: grid;
    gap: 0.5rem;
    text-align: left;
}

.tlab-pwprompt__step {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.4;
}

.tlab-pwprompt__step strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.86rem;
}

.tlab-pwprompt__step.is-now {
    border-color: rgba(15, 105, 175, 0.35);
    background: var(--info-soft);
}

.tlab-pwprompt__dot {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
}

.tlab-pwprompt__step.is-now .tlab-pwprompt__dot {
    background: var(--primary);
    color: #fff;
}

.tlab-auth .tlab-pwchange {
    width: min(420px, calc(100vw - 32px));
}

.tlab-auth .tlab-pwchange .login-logo {
    margin-bottom: 1.25rem;
}

.tlab-pwchange__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--info-soft);
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
}

.tlab-pwchange__badge--forced {
    background: var(--warning-soft);
    color: var(--warning-dark);
}

.tlab-auth .tlab-pwchange .login-box-title {
    font-size: 1.35rem;
}

.tlab-pwchange__label {
    margin-bottom: 0.3rem;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
}

.tlab-pwchange__field {
    position: relative;
}

.tlab-pwchange__field .form-control {
    padding-right: 2.6rem;
}

.tlab-pwchange__eye {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.tlab-pwchange__eye:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.tlab-pwchange__rules {
    display: grid;
    gap: 0.3rem;
    margin: 0.25rem 0 1.1rem;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
}

.tlab-pwchange__rules li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.tlab-pwchange__rules li::before {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tlab-pwchange__rules li.is-met {
    color: var(--success-dark);
}

.tlab-pwchange__rules li.is-met::before {
    border-color: var(--success);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat,
        var(--success);
}

.tlab-pwchange__errors {
    font-size: 0.84rem;
}

.tlab-pwchange__footer {
    margin-top: 1rem;
    text-align: center;
}