/* ===== Override Office White orange accent with Loungera teal ===== */
:root {
    --bs-primary: #61848C !important;
    --bs-primary-rgb: 97, 132, 140 !important;
    --bs-link-color: #61848C !important;
    --bs-link-color-rgb: 97, 132, 140 !important;
    --bs-link-hover-color: #536f75 !important;
    --bs-link-hover-color-rgb: 83, 111, 117 !important;
}

html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/* ===== Header Logo - Loungera chair icon ===== */
.header-logo {
    flex-shrink: 0;
    background-image: url('../images/loungera/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* ===== Splash / Loading Screen ===== */
#xaf-loading,
.xaf-loading {
    background: linear-gradient(135deg, #DBD7CE 0%, #F2ECE4 50%, #DFD7CA 100%) !important;
    transition: opacity 0.15s ease !important;
}

.xaf-loading-content {
    background: transparent !important;
}

/* Delay loading overlay slightly so quick SPA navigations don't flash it,
   but real page loads (login, initial load) still show the spinner. */
.xaf-loading {
    opacity: 0 !important;
    animation: xafLoadingFadeIn 0.3s ease 0.15s forwards !important;
}

@keyframes xafLoadingFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hide the error flash during logout/circuit disconnect */
#blazor-error-ui,
.blazor-error-boundary {
    display: none !important;
}

/* Splash logo size */
.xaf-loading-content img,
.xaf-loading-content .xaf-loading-image {
    width: 120px !important;
    height: 120px !important;
    object-fit: contain !important;
}

/* Splash caption text */
.xaf-loading-content .xaf-loading-text,
.xaf-loading-content .caption {
    color: #736356 !important;
    font-weight: 300 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    font-size: 1.1rem !important;
    margin-top: 16px !important;
}

/* Splash spinner */
.xaf-loading-content .spinner-border {
    color: #61848C !important;
}


/* ===== Login Page ===== */

/* Top bar on login page */
.logon-template-header.card-header {
    background-color: rgba(97, 132, 140, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    min-height: 56px !important;
}

.logon-template-header .header-logo {
    display: none !important;
}

.logon-template-header.card-header::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-image: url('../images/loungera/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logon-template-header.card-header::after {
    content: 'LOUNGERA';
    display: block;
    color: #fff;
    font-weight: 300;
    letter-spacing: 5px;
    font-size: 1.1rem;
    margin-left: 12px;
}

.logon-template-header h1 {
    display: none !important;
}

/* Pool background */
.logon-template-body {
    background-image: url('../images/loungera/pool-bg.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: calc(100vh - 56px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Login card container */
.logon-main-container {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    padding: 40px 20px !important;
}

/* Login card */
.logon-main.card {
    background: rgba(255, 255, 255, 0.93) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    max-width: 400px !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    overflow: hidden !important;
}

.logon-main.card .card-body {
    min-height: auto !important;
    height: auto !important;
    padding: 28px 24px !important;
}

.logon-main.card .card-body .logon-viewsite {
    min-height: auto !important;
    height: auto !important;
    background: transparent !important;
}

.logon-main.card .detail-view-content {
    min-height: auto !important;
}

.logon-main.card .xaf-static-text {
    color: #736356 !important;
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
}

.logon-main.card .dxbl-fl-cpt {
    color: #736356 !important;
}

/* Login button */
.logon-toolbar {
    padding: 4px 24px 24px !important;
    display: flex !important;
    justify-content: center !important;
}

.logon-toolbar .dxbl-btn-primary {
    background-color: #61848C !important;
    border-color: #61848C !important;
    border-radius: 24px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    min-width: 100% !important;
    padding: 12px 32px !important;
    font-size: 0.95rem !important;
}

.logon-toolbar .dxbl-btn-primary:hover,
.logon-toolbar .dxbl-btn-primary:focus {
    background-color: #536f75 !important;
    border-color: #536f75 !important;
}

/* ===== Main App Header ===== */
.app > [role="banner"]:not(.logon-template-header) {
    background-color: #61848C !important;
}

.app > [role="banner"]:not(.logon-template-header) > * button,
.app > [role="banner"]:not(.logon-template-header) > * .dxbl-btn {
    color: #fff !important;
}

/* Override: dropdown menu buttons must be dark (higher specificity than banner rule) */
.app > [role="banner"] .account-container .dropdown-menu button,
.app > [role="banner"] .account-container .dropdown-menu .dxbl-btn,
.app > [role="banner"] .account-main-inner button.dxbl-btn {
    color: #736356 !important;
}

.app > [role="banner"] .account-container .dropdown-menu button:hover {
    background-color: #F2ECE4 !important;
    color: #61848C !important;
}

/* User dropdown menu — dark text on white background */
.account-main.dropdown-menu,
.account-main {
    background: #fff !important;
}

.account-main-inner button.my-details,
.account-main-inner button.log-off,
[role="banner"] .account-main-inner button,
[role="banner"] .account-main-inner .dxbl-btn,
[role="banner"] .account-main button,
[role="banner"] .account-container button {
    color: #736356 !important;
}

[role="banner"] .account-main-inner button:hover,
[role="banner"] .account-container button:hover {
    background-color: #F2ECE4 !important;
    color: #61848C !important;
}

[role="banner"] .account-main-inner label,
[role="banner"] .account-main-inner .dxbl-fl-cpt {
    color: #999 !important;
}

.app > [role="banner"]:not(.logon-template-header) h1,
.app > [role="banner"]:not(.logon-template-header) h1 * {
    color: #fff !important;
}

.app > [role="banner"]:not(.logon-template-header) h1 > div > div:first-child {
    color: rgba(255,255,255,0.65) !important;
}

/* ===== Sidebar ===== */
.xaf-sidebar,
.xaf-sidebar.sidebar {
    background: linear-gradient(180deg, #DBD7CE 0%, #F2ECE4 50%, #DFD7CA 100%) !important;
}

.dxbl-accordion-container,
[role="application"] {
    background: transparent !important;
}

.dxbl-accordion-group-header {
    background: transparent !important;
    color: #736356 !important;
    border-bottom: 1px solid rgba(115, 99, 86, 0.1) !important;
}

[role="treeitem"] {
    color: #736356 !important;
}

[role="treeitem"]:hover {
    background-color: rgba(97, 132, 140, 0.1) !important;
}

[role="treeitem"][aria-selected="true"] {
    background-color: #61848C !important;
    color: #fff !important;
    border-radius: 6px !important;
}

/* Sidebar footer */
.about-info {
    color: #BFB1A4 !important;
    font-size: 0.75rem !important;
}

/* Hide any DevExpress watermark/branding in sidebar */
.xaf-sidebar img:not(.dxbl-image):not(.xaf-toolbar-item-icon),
.xaf-sidebar svg:not([class*="dxbl"]) {
    display: none !important;
}

/* Sidebar bottom area - pool image fills empty space below nav */
.xaf-sidebar {
    position: relative !important;
    overflow: hidden !important;
}

.xaf-sidebar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: url('../images/loungera/pool-bg.jpg') center bottom / cover no-repeat;
    opacity: 0.25;
    -webkit-mask-image: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,1) 75%);
    mask-image: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,1) 75%);
    pointer-events: none;
    z-index: 0;
}

.xaf-sidebar > * {
    position: relative;
    z-index: 1;
}

/* ===== Override Office White orange with Loungera teal ===== */

/* Primary buttons */
.dxbl-btn-primary {
    background-color: #61848C !important;
    border-color: #61848C !important;
}

.dxbl-btn-primary:hover,
.dxbl-btn-primary:focus {
    background-color: #536f75 !important;
    border-color: #536f75 !important;
}

/* Toolbar action icons — teal instead of orange */
.xaf-action .dxbl-btn:not(.dxbl-btn-primary) {
    color: #61848C !important;
}

/* Delete action — keep red */
.xaf-action .dxbl-image-Delete,
[class*="Delete"] .dxbl-btn {
    color: #c44 !important;
}

/* Active tab underline — override hardcoded orange in ::after */
[role="tab"][aria-selected="true"],
.dxbl-tabs-item.dxbl-active {
    border-bottom-color: #61848C !important;
    color: #61848C !important;
}

.dxbl-tabs-item.dxbl-active::after,
[role="tab"][aria-selected="true"]::after {
    background-color: #61848C !important;
    background: #61848C !important;
}

/* Tab text hover */
[role="tab"]:hover,
.dxbl-tabs-item:hover {
    color: #61848C !important;
}

/* Theme switcher dot — teal instead of orange */
.nav-link.active {
    background-color: #61848C !important;
}

/* Checkbox checked */
.dxbl-checkbox-checked .dxbl-checkbox-check-element,
.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
    background-color: #61848C !important;
    border-color: #61848C !important;
}

/* Links */
a:not(.btn):not(.nav-link):not([role="treeitem"]) {
    color: #61848C;
}

/* Grid row hover */
.dxbl-grid-table tr:hover td {
    background-color: rgba(97, 132, 140, 0.06) !important;
}

/* Focus ring / outline */
.dxbl-focused,
*:focus-visible {
    outline-color: #61848C !important;
}

/* Switch / toggle checked */
.dxbl-switch-checked {
    background-color: #61848C !important;
}

/* Selection accent */
.dxbl-grid-row-selected td {
    background-color: rgba(97, 132, 140, 0.1) !important;
}

/* Accordion group header icons */
[role="application"][aria-expanded] .dxbl-image {
    color: #61848C !important;
}

/* ===== Main content area — warm background (exclude login page) ===== */
[role="main"]:not(.logon-template-body) {
    background: linear-gradient(135deg, #DBD7CE 0%, #F2ECE4 40%, #DFD7CA 70%, #D1CEC7 100%) !important;
}

/* Cards/panels on top of the warm background */
[role="tabpanel"] > div {
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 8px !important;
    margin: 8px !important;
    padding: 8px !important;
}

/* ===== Force all toolbar action icons to teal/grey ===== */
/* XAF renders icons as <img> with colored SVG data URIs — apply hue rotation */
.xaf-toolbar-item-icon,
.dxbl-image.image.xaf-toolbar-item-icon {
    filter: saturate(0) brightness(0.6) !important;
}

/* Keep the Save button icon white (it's on teal background) */
.dxbl-btn-primary .xaf-toolbar-item-icon,
.dxbl-btn-primary .dxbl-image {
    filter: none !important;
}