/*
    Tenant theme bridge
    -------------------
    Values are injected on <body> by ThemeCssExtensions.ToCssVariables().
    This file maps those variables to layout, menus, forms, tables, buttons and login screens.
*/

body[class*="tenant-"] {
    background: var(--bg) !important;
    color: var(--text, #142033);
}

body[class*="tenant-"] .content {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 70%, #ffffff) 0,
        var(--bg) 145px) !important;
}

/* Header */
.scope-header .app-header {
    background: var(--header-bg) !important;
    border-bottom-color: var(--tenant-border) !important;
}

.scope-header .page-heading h1,
.scope-header .top-brand strong {
    color: var(--secondary) !important;
}

.scope-header .page-heading p,
.scope-header .brand-text small {
    color: color-mix(in srgb, var(--secondary) 55%, #64748b) !important;
}

.scope-header .logout {
    background: color-mix(in srgb, var(--primary) 10%, #ffffff) !important;
    color: var(--primary) !important;
}

/* Menus */
.scope-menu .side-menu,
.scope-menu .top-menu {
    background: var(--menu-bg) !important;
    color: var(--menu-text) !important;
}

.scope-menu .side-menu .menu-link,
.scope-menu .top-menu > .menu-node > .menu-link,
.scope-menu .top-menu-link {
    color: var(--menu-text) !important;
}

.scope-menu .side-menu .menu-link:hover,
.scope-menu .side-menu .menu-node.open > .menu-link,
.scope-menu .top-menu > .menu-node:hover > .menu-link,
.scope-menu .top-menu-link:hover {
    background: color-mix(in srgb, var(--menu-icon) 18%, transparent) !important;
    color: #ffffff !important;
}

.scope-menu .menu-icon,
.scope-menu .side-menu .menu-icon,
.scope-menu .top-menu .menu-icon {
    color: var(--menu-icon) !important;
    background: color-mix(in srgb, var(--menu-icon) 14%, transparent) !important;
}

.scope-menu .side-menu .menu-node.open > .menu-link .menu-icon,
.scope-menu .side-menu .menu-link:hover .menu-icon,
.scope-menu .top-menu > .menu-node:hover > .menu-link .menu-icon {
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

.scope-menu .top-menu .menu-children {
    border-color: var(--tenant-border) !important;
}

.scope-menu .top-menu .menu-children .menu-link {
    color: #1f2937 !important;
}

.scope-menu .top-menu .menu-children .menu-icon {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 9%, #ffffff) !important;
}

.scope-menu .top-menu .menu-children .menu-link:hover {
    background: color-mix(in srgb, var(--primary) 8%, #ffffff) !important;
    color: var(--primary) !important;
}

.scope-menu .brand-mark,
.scope-login .brand-mark {
    background: var(--primary) !important;
    color: #ffffff !important;
}

/* Buttons */
.scope-buttons .btn,
.scope-buttons .btn-modern.primary,
.scope-buttons .legacy-orange-btn,
.scope-buttons .old-filter-bar button,
.scope-buttons .mini-filter button {
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--button-bg) 16%, transparent) !important;
}

.scope-buttons .btn.secondary,
.scope-buttons .btn-modern.secondary {
    background: var(--secondary) !important;
    color: #ffffff !important;
}

.scope-buttons .btn.light {
    background: color-mix(in srgb, var(--primary) 8%, #ffffff) !important;
    color: var(--primary) !important;
}

/* Cards / forms */
.scope-forms input:focus,
.scope-forms select:focus,
.scope-forms textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

.scope-reports .report-card:hover,
.scope-dashboard .old-stat-card:hover,
.scope-booking .booking-modern-card:hover,
.scope-booking .booking-filter-card:hover,
.scope-booking .booking-tabs-card:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--tenant-border)) !important;
}

.scope-reports .report-card small,
.scope-reports .group-title,
.scope-reports .dark-black-text-link {
    color: var(--primary) !important;
}

/* Tables */
.scope-tables th,
.scope-tables .old-report-table th,
.scope-tables .modern-report-table th,
.scope-tables .old-table th,
.scope-tables .modal-data-table th {
    background: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
}

.scope-tables .trv-data-table-wrap,
.scope-tables .table-wrap {
    border-color: var(--table-border) !important;
}

.scope-tables a,
.scope-tables .booking-link {
    /*color: var(--theme-link) !important;*/
}

.scope-pagination .modern-pagination button.active,
.scope-pagination .old-report-pagination button.active,
.scope-pagination .trv-table-pagination button.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* Login */
.scope-login .wl-login {
    background: var(--bg) !important;
}

.scope-login .wl-hero {
    background: linear-gradient(145deg, var(--secondary), var(--primary)) !important;
}

.scope-login .wl-hero::after {
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%) !important;
}

.scope-login .wl-hero h1 span {
    color: var(--accent) !important;
}

.scope-login .wl-stats div,
.scope-login .wl-bullets span {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .16) !important;
}

.scope-login .wl-card {
    border-color: var(--tenant-border) !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, .12) !important;
}

.scope-login .btn-login {
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--button-bg) 18%, transparent) !important;
}

.scope-login .modern-login-form input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

.scope-login .login-options a,
.scope-login .form-link,
.scope-login .small-action-form button {
    color: var(--primary) !important;
}

/* Tenant-specific polish */
.tenant-gts-beds .side-menu-head,
.tenant-gts-beds .app-header,
.tenant-resort .app-header,
.tenant-corporate .app-header {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

.tenant-h2go .menu-icon svg,
.tenant-travayoo .menu-icon svg,
.tenant-gts-beds .menu-icon svg,
.tenant-resort .menu-icon svg,
.tenant-corporate .menu-icon svg,
.tenant-airline .menu-icon svg,
.tenant-activity .menu-icon svg,
.tenant-premium-dark .menu-icon svg {
    stroke: currentColor !important;
}