@import url("default-light.css");
:root {
    --rz-dialog-content-padding: 1rem;
}

.rz-chart-tooltip-content > div:nth-of-type(2).rz-chart-tooltip-item {
    display: none
}

.rz-button.month-btn {
    min-width: 40px; 
    height: 40px; 
    padding: 0; 
    display: inline-flex; 
    align-items:center; 
    justify-content:center;
}

.month-btn.selected {
    box-shadow: none;
}

.metric-tree .sld-state-selected {
    border-radius: 4px;
}

.rz-tree .rz-state-selected .rz-list-item-content,
.metric-tree .rz-state-selected .rz-list-item-content {
    padding: 0.25rem 0.5rem;
}

.rz-tree.metric-tree {
    margin-right: -6px;
}

.metric-tree {
    height: calc(100vh - 185px);
    border-radius: 4px;
    margin-right: 0;
}

.rz-treenode {
    margin: 8px 0;
}

.rz-button.rz-primary {
    font-size: 13px;
    border-radius: 3px;
    letter-spacing: 0.1rem;
    font-weight: 600;
}

.rz-button.secondary {
    font-size: 13px;
    border-radius: 3px;
    letter-spacing: 0.1rem;
    font-weight: 600;
}

.tiny-button {
    min-width: 25px;
    min-height: 25px;
    padding: 0 !important;
    margin: 0 !important;
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

.btn-white {
    box-shadow: unset;
    font-size: 13px;
    border-radius: 3px;
    letter-spacing: 0.1rem;
    font-weight: 600;
}

h1:focus {
    outline: none;
}

h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.7rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.rz-dialog-mask {
    opacity: 1;
}

.rz-dialog-mask::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.rz-dialog-mask::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    right: 100px;
}

.dialog-flex-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 100px);
    height: 100%;
}

.content {
    padding-top: 1.1rem;
}

.rz-layout {
    height: calc(100vh - 68px);
}

input:focus,
input:focus-visible {
    box-shadow: none !important;
}

/* HEADER */
.sld-header-row {
    min-height: 68px;
    align-items: center;
    flex-wrap: nowrap !important;
    padding-right: 16px;
}

.sld-header-right {
    flex: 1 1 auto !important;
    max-width: none !important;
}

.sld-header-right > .rz-row {
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* The account/gear/language dropdowns sit right at the edge of the viewport.
   Force them to stay right-aligned to their toggle button (instead of relying
   only on the Radzen default) and cap their width so long translated labels
   can never push the menu past the right edge of the screen. */
.sld-header-right .rz-profile-menu .rz-navigation-menu {
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}

/* Logo swap for dark mode: show light logo by default */
.logo-light { display: inline-block; }
.logo-dark { display: none; }

.language-menu {
    border-radius: 3px;
}

.sld-language-menu-column {
    flex: unset;
}

/* MENU */
#main-navigation
{
    margin-top: -8px;
}

#main-navigation .rz-navigation-item {
    display: inline-block;
    border-block-end: none;
}

#main-navigation .rz-navigation-item-link {
    padding: 8px 5px 9px 5px;
}

/* LOGIN */
.sld-login-container {
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.forgot-password-link {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.1rem;
    text-decoration: none;
}

.sld-val-error {
    letter-spacing: 1px;
    font-size: 10px;
}

#login-page-mask {
    opacity: 1;
    z-index: 0;
    position: relative;
}

#login-page-mask::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
}

#login-page-mask::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    right: 100px;
}

#login-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    margin-bottom: 10px;
    flex-shrink: 0;
}

#login-page-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--rz-dialog-border-radius);
    padding: var(--rz-dialog-content-padding);
    z-index: 1;
    overflow-y: auto;
}

#login-page-content h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

/* Login logo swap: default light, dark mode shows the dark logo */
#login-page-header .logo-dark {
    display: none;
}

body[data-theme="dark"] #login-page-header .logo-light {
    display: none !important;
}

body[data-theme="dark"] #login-page-header .logo-dark {
    display: inline-block !important;
}

/* Hide logo on desktop (>=1280px) */
@media (min-width: 1280px) {
    #login-page-header {
        display: none;
    }
}

/* METRICS */
.rz-splitter-horizontal>.rz-splitter-bar {
    width: 3px;
}
.pane-metrics { 
    padding: 0 0 0 16px; 
}

.metric-header-card-container {
    padding: 0.5rem 1rem 1rem 1rem;
}

.metric-header-card {
    border-radius: 6px;
    min-width: 250px;
    min-height: 115px;
}

.metric-header-card.disabled {
    opacity: 0.2;
}

.metric-tile-value{ 
    font-weight: bold;
}

.display-name-editor {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 500ms ease, opacity 200ms ease, transform 220ms ease;
}

.display-name-editor.show {
    max-height: 280px;
    opacity: 1;
    transform: translateY(0);
}

.display-name-editor .display-name-editor-content {
    border: 1px solid;
    padding: 20px 10px;
    margin: 0 10px;
}

.display-name-editor[aria-hidden="true"] input,
.display-name-editor[aria-hidden="true"] button,
.display-name-editor[aria-hidden="true"] textarea {
    pointer-events: none;
}

.metric-date-view-selector-dropdown {
    max-width: 110px;
}

.metric-charts-container {
    .rz-card {
        margin-bottom: 20px;
    }
}


/* ACCOUNT SETTINGS */

#account-settings-page-mask {
    opacity: 1;
    z-index: 0;
    position: relative;
}

#account-settings-page-mask::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
}

#account-settings-page-mask::after {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    right: 100px;
}

#account-settings-page-content {
    width: 50%;
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--rz-dialog-border-radius);
    padding: var(--rz-dialog-content-padding);
    z-index: 1;
}

#account-settings-page-content #account-profile-username {
    width: 100%;
    margin-bottom: 15px;
}

#account-settings-page-content #change-password-button {
    width: 100%;
    margin-top: 15px;
    text-align: center;
}

#account-changepassword-oldpassword,
#account-changepassword-newpassword,
#account-changepassword-confirmpassword,
#account-changepassword-rules
 {
    width: 100%;
    margin-top: 15px;
}

#account-changepassword-savebutton
{
    float: right;
}

#account-changepassword-cancelbutton {
    float:left;
}

.language-menu-option {
    margin: 0 0 0 10px;
}

#translations-overview {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 255px);
}

#translations-overview .translation-row{
    padding: 10px 15px;
}
#translations-overview .translation-key {
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-left: 5px;
    display: block;
    font-weight:bold;
}

/* Title row: flex so h3 and Save All button are always aligned */
.translations-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0.5rem;
}

.translations-header h3 {
    margin-bottom: 0;
}

#translations-title{
    display: inline-block;
}

#save-all-translations {
    display: inline-block;
    position: relative;
    top: -4px;
    margin-left: 15px;
}

#translations-search
{
    width: 100%;
    margin-top: 0;
}

/* Pager column: flex row, right-aligned on MD+, left-aligned+wrapped on mobile */
.translations-pager-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
}

#translations-overview .language-description {
    margin-bottom: 2px;
    margin-top: 10px;
}

#translations-overview .language-displayname {
    margin-left: 5px;
}


#translations-overview .language-translation:focus {
    outline: none;
    box-shadow: none;
}

#translations-overview .table-striped > tbody > tr:nth-of-type(2n+1) > * {
    --bs-table-bg-type: #fffdf2 !important;
    opacity: 1;
}

#home-page .language-description,
.sld-login-contacts .language-description {
    margin-bottom: 2px;
}

#app-version {
    font-size: 0.85rem;
    float: left;
    position: fixed;
    bottom: 12px;
    left: 32px;
    z-index: 2;
}


#app-version #version-number {
    display: inline-block;
    text-decoration: none;
}

#app-version #version-number:hover {
    text-decoration: underline;
}

#app-version #build-date {
    font-size: 0.65rem;
    display: inline-block;
    margin-left: 5px;
}

.action-buttons .rz-button {
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Extracted from inline styles to preserve current visuals */
.sld-chart-container,
.sld-chart-canvas {
    width: 100%;
}

/* THEME TOGGLE */
.theme-toggle-btn {
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    min-width: unset !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

/* Animate theme changes only during explicit user toggles */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, fill 220ms ease, stroke 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-transitioning,
    body.theme-transitioning *,
    body.theme-transitioning *::before,
    body.theme-transitioning *::after {
        transition: none !important;
    }
}


.sld-chart-canvas {
    display: block;
}

.month-picker {
    align-items: center;
}

.month-nav-btn {
    height: 40px;
    width: 40px;
}

.month-nav-btn-prev {
    margin-right: 6px;
}

.month-nav-btn-next {
    margin-left: 6px;
}

.month-year-picker-wrap {
    margin-right: 8px;
}

.month-year-picker {
    width: 94px;
}

/* Desktop-only month button row */
.month-buttons-desktop {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Mobile month dropdown — hidden on desktop */
.month-month-dropdown-mobile {
    display: none;
}

.month-mobile-dropdown {
    width: 75px;
}

.month-btn {
    min-width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.metric-tree-search,
.metric-tree-content {
    width: calc(100% - 15px);
    padding-left: 5px;
}

.metric-tree-icon {
    font-size: 20px;
}

.metric-tree-leaf-icon {
    font-size: 24px;
}

.metric-tree-sentiment-icon {
    font-size: 20px;
}

.translations-page-size {
    width: auto;
}

.home-page-content {
    max-width: 960px;
}

/* Prevent long URLs and email addresses from overflowing their container */
.contact-link {
    overflow-wrap: break-word;
    word-break: break-word;
}

.home-contact-cards-stack {
    flex-wrap: wrap !important;
}

.home-contact-card {
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 200px;
    /* Consistent vertical layout inside every card */
    display: flex;
    flex-direction: column;
    gap: 0;
}

.home-contact-card .language-description {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.3rem;
    font-weight: 600;
    font-size: 1rem;
}

.home-contact-card .language-flag svg,
.home-contact-card .language-flag img {
    width: 45px;
    height: 30px;
    border-radius: 2px;
}

.home-contact-line {
    display: block;
    font-size: 0.875rem;
    line-height: 1.7;
    height: 30px;
}

/* Minimum 44 px touch target for phone and email links inside cards */
.home-contact-line a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 2px 0;
}

.metrics-page-title {
    text-transform: capitalize;
}

.metrics-edit-toggle-btn {
    height: 32px;
    width: 32px;
    padding: 0;
}

.metrics-display-name-input {
    width: 250px;
}

.metrics-controls-card {
    margin-top: 1rem;
    
    .rz-stack {
        gap: 1rem;
    }
}



.metrics-nav-btn {
    height: 40px;
    width: 40px;
}

.metrics-date-picker {
    width: 140px;
}

.metrics-spin-icon {
    animation: metrics-spin 1s linear infinite;
}

@keyframes metrics-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sld-layout-logo-column {
    flex: 0 0 240px !important;
}

.sld-layout-menu-column {
    flex: 0 0 45px !important;
}

.sld-logo-link {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 8px 19px;
}

.sld-logo-image {
    height: 42px;
}

/* Header logo swap: default light, dark mode shows the dark logo.
   Pure CSS (matching the LoginLayout pattern) so it depends only on
   body[data-theme], not on Blazor circuit/ThemeService state, which is
   more reliable across render-mode transitions and IIS-hosted deployments. */
body[data-theme="dark"] .sld-logo-link .logo-light {
    display: none !important;
}

body[data-theme="dark"] .sld-logo-link .logo-dark {
    display: inline-block !important;
}

.dialog-actions-wrap {
    margin-top: auto;
}

.dialog-submit-button {
    margin-top: 1rem;
}

.error-boundary-card {
    padding: 20px;
    margin-bottom: 10px;
}

.error-boundary-button {
    margin-bottom: 10px;
    width: 150px;
}

.account-email-confirmation-stack {
    width: 100%;
    max-width: 600px;
    overflow: hidden;
}

.account-email-confirmation-header {
    text-align: center;
}

.twofactor-inline-form {
    display: inline-block;
}

.page-table-scroll-wrapper {
    overflow-x: auto;
    width: 100%;
}

.page-data-grid {
    height: 500px;
    min-width: 600px;
}

/* ============================================================
   GENERIC PAGE GRID/CARD STYLES
   ============================================================ */
.rz-grid-table {
    width: unset;
}

.page-desktop-grid {
    display: block;
}

.page-mobile-cards {
    display: none;
}

@media (max-width: 1024px) {
    .page-desktop-grid {
        display: none;
    }

    .page-mobile-cards {
        display: block;
    }
}

/* Shared card list styles used by page mobile card components. */
.page-card {
    border-bottom: 1px solid var(--rz-border-color, rgba(255, 255, 255, 0.1));
}

.page-card-header {
    display: flex;
    align-items: center;
    padding: 10px 2px;
    cursor: pointer;
    gap: 6px;
    user-select: none;
    -webkit-user-select: none;
}

.page-card-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.page-card-chevron {
    transition: transform 0.2s ease;
    opacity: 0.55;
    flex-shrink: 0;
}

.page-card-chevron.expanded {
    transform: rotate(180deg);
}

.page-filter-toggle-icon {
    opacity: 0.55;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}

.page-filter-toggle-icon.active {
    opacity: 1;
}

.page-card-detail {
    padding: 2px 2px 12px 30px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.page-card-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.85rem;
}

.page-card-label {
    color: var(--rz-text-secondary-color, rgba(128, 128, 128, 0.85));
    white-space: nowrap;
    flex-shrink: 0;
}

.page-card-value {
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-mobile-filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 2px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    font-weight: 500;
    border-bottom: 1px solid var(--rz-border-color, rgba(255, 255, 255, 0.1));
    margin-bottom: 4px;
}

.page-mobile-filter-toggle-spacer {
    flex: 1;
}

.page-mobile-filter-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 2px 14px;
    border-bottom: 1px solid var(--rz-border-color, rgba(255, 255, 255, 0.1));
    margin-bottom: 8px;
}

.page-mobile-filter-row {
    display: flex;
    gap: 8px;
}

.page-mobile-filter-row > input,
.page-mobile-filter-row > select {
    flex: 1;
    min-width: 0;
    background: var(--rz-base-background-color, transparent);
    color: var(--rz-text-color, inherit);
    border: 1px solid var(--rz-border-color, rgba(255, 255, 255, 0.2));
    border-radius: var(--rz-border-radius, 4px);
    padding: 6px 8px;
    font-size: 0.875rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
}

.card-action-btn {
    width: 100%;
}

.doc-mobile-filter-row > input:focus,
.doc-mobile-filter-row > select:focus {
    border-color: var(--rz-primary, #3d9bd4);
}

.page-mobile-load-more {
    padding: 14px 0;
    text-align: center;
}

/* Cache progress grids */

.cache-leaf-grid {
    min-width: 320px;
}

.cache-leaf-grid-wrapper {
    margin: 8px 16px;
}

/* Truncate long leaf UUIDs — full value shown in tooltip */
.leaf-id-cell {
    display: block;
    font-family: monospace;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.users-grid-wrapper {
    overflow-x: auto;
}

.cache-grid-wrapper {
    overflow-x: auto;
}

.users-grid {
    min-height: 400px;
    max-height: 70vh;
    min-width: 600px;
}

/* Header row: right-align the "Add User" button on MD+ screens */
.users-header-actions-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Title row: vertically center h2 and Add User button */
.users-header-title-row h2 {
    margin-bottom: 0;
}

/* Keep search field wide enough to be readable */
.users-search-field {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 320px;
}

.cache-search-field {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 320px;
}

/* Detail panel label column: prevent overflow */
.users-detail-label {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Detail panel value column: allow long values (e.g. emails) to wrap */
.users-detail-value {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.detail-action-btn {
    width: 48%;
}

.details-card-padding {
    padding: 3rem;
}

/* Minimum touch target size for action buttons in the details panel */
.details-card-padding .rz-button {
    min-height: 36px;
}

.document-icon {
    margin-right: 6px;
}

/* ============================================================
   HAMBURGER BUTTON & MOBILE HEADER (visible <768px)
   ============================================================ */
.sld-header-left {
    display: flex;
    align-items: center;
}

.sld-hamburger {
    margin: 0 4px;
}

/* Header behavior: mobile menu is active below 1280px */
@media (max-width: 1279.98px) {
    .sld-desktop-nav-only {
        display: none !important;
    }

    .sld-mobile-nav-only {
        display: block !important;
    }
}

@media (min-width: 1280px) {
    .sld-mobile-nav-only {
        display: none !important;
    }
}

/* ============================================================
   MOBILE FULL-SCREEN NAV OVERLAY (visible <768px)
   ============================================================ */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    transition: background 300ms ease, visibility 0s 300ms;
}

.mobile-nav-overlay.open {
    visibility: visible;
    transition: background 300ms ease, visibility 0s 0s;
}

.mobile-nav-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.mobile-nav-overlay.open .mobile-nav-panel {
    transform: translateX(0);
}

/* Decorative background matching login/dialog pages */
.mobile-nav-panel::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 20px;
    width: 100%;
    height: 100%;
    background: url("dialogbg2.png") no-repeat right center;
    background-size: cover;
    pointer-events: none;
    opacity: 0.08;
}

/* Decorative background glow */
.mobile-nav-panel::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -30%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at right, rgba(255, 221, 0, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.mobile-nav-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    min-height: 68px;
}

.mobile-nav-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mobile-nav-header-actions .language-menu .rz-profile-menu-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
}

.mobile-nav-header-actions .language-menu svg {
    width: 20px;
    height: 20px;
    display: block;
}

.mobile-nav-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.mobile-nav-section {
    margin: 0;
}

.mobile-nav-section-divider {
    margin: 10px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.mobile-nav-section-title {
    padding: 2px 24px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Override horizontal menu styles for vertical mobile nav */
.mobile-nav-body #main-navigation {
    margin-top: 0;
    background: transparent;
}

.mobile-nav-body #main-navigation .rz-navigation-item {
    display: block;
    border-block-end: none;
}

.mobile-nav-body #main-navigation .rz-navigation-item.rz-state-active {
    border-block-end: none;
}

.mobile-nav-body #main-navigation .rz-navigation-item-link {
    padding: 14px 24px;
    font-size: 1.1rem;
}

.mobile-nav-section-menu,
.mobile-nav-section-menu .rz-panel-menu,
.mobile-nav-section-menu .rz-navigation-item,
.mobile-nav-section-menu .rz-navigation-item-link {
    background: transparent;
}

.mobile-nav-section-menu .rz-navigation-item {
    display: block;
    border-block-end: none;
}

.mobile-nav-section-menu .rz-navigation-item.rz-state-active {
    border-block-end: none;
}

.mobile-nav-section-menu .rz-navigation-item-link {
    padding: 14px 24px;
    font-size: 1.1rem;
    border: none !important;
    box-shadow: none;
}

.mobile-nav-section-menu .rz-navigation-item-wrapper {
    border: none !important;
}

.mobile-nav-footer {
    position: relative;
    z-index: 1;
    padding: 16px 24px;
    font-size: 0.85rem;
    margin-top: auto;
}

.mobile-nav-footer a {
    color: inherit;
    text-decoration: none;
}

.mobile-nav-footer a:hover {
    text-decoration: underline;
}

.mobile-nav-build-date {
    font-size: 0.65rem;
    margin-left: 5px;
}

/* ============================================================
   METRICS TREE OVERLAY (mobile only)
   z-index 1500 keeps it below the app-nav overlay (z-index 2000)
   so the app-menu always sits on top.
   ============================================================ */
.metrics-tree-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    visibility: hidden;
    transition: background 300ms ease, visibility 0s 300ms;
}

.metrics-tree-overlay.open {
    visibility: visible;
    transition: background 300ms ease, visibility 0s 0s;
}

.metrics-tree-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.metrics-tree-overlay.open .metrics-tree-panel {
    transform: translateX(0);
}

.metrics-tree-panel-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    min-height: 56px;
    flex-shrink: 0;
}

.metrics-tree-panel-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.metrics-tree-panel-body {
    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    padding: 12px 0 12px 16px;
    
}

/* Override metric-tree height inside the overlay panel */
.metrics-tree-panel-body .metric-tree {
    height: calc(100vh - 200px);
}

/* Mobile filter bar shown above metrics content */
.metrics-mobile-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 4px 0 10px 0;
}

.metrics-mobile-node-label {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.metric-tile-symbol {
    font-size: 18px;
    margin-top: -2px !important;
}

.metric-tile-label-mobile{
    display: none;
}

/* ============================================================
   RADZEN BREAKPOINTS REFERENCE
   xs  : ≥  576px  →  min-width:  576px  /  below-xs: max-width:  575.98px
   sm  : ≥  768px  →  min-width:  768px  /  below-sm: max-width:  767.98px
   md  : ≥ 1024px  →  min-width: 1024px  /  below-md: max-width: 1023.98px
   lg  : ≥ 1280px  →  min-width: 1280px  /  below-lg: max-width: 1279.98px
   xl  : ≥ 1920px  →  min-width: 1920px  /  below-xl: max-width: 1919.98px
   xx  : ≥ 2560px  →  min-width: 2560px
   ============================================================ */
/* ============================================================
   BELOW XL  (< 1920px) — Radzen: xs + sm + md + lg
   Tablets and small desktops
   ============================================================ */
@media (max-width: 1919.98px) {
    .metrics-controls-card {
        .rz-stack {
            gap: 0.5rem;
        }
    }
    
    .metrics-controls-stack {
        flex-direction: column !important;
        align-items: flex-start;
        gap: 1rem;
    }

    .month-year-picker {
        height: 36px;
    }

    .month-picker {
        flex-wrap: wrap;
    }

    .month-btn {
        min-width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .rz-button.month-btn {
        min-width: 36px;
        height: 36px;
    }

    .month-nav-btn {
        height: 36px;
        width: 36px;
    }
    
    .metric-tile-value {
        font-size: 1.75rem;
    }
}

/* ============================================================
   BELOW LG  (< 1280px) — Radzen: xs + sm + md
   Tablets and phones: layout restructuring, navigation,
   login/account full-width, grid height resets, tree hide.
   ============================================================ */
@media (max-width: 1279.98px) {
    .metrics-controls-card {
        margin-top: 0;
        padding: 0;

        .rz-stack {
            gap: 0.5rem;
        }
    }
    
    .body-container {
        padding: 0.2rem !important;
    }

    /* Let header columns shrink on small screens */
    .sld-layout-logo-column {
        flex: 0 0 auto !important;
    }

    .sld-layout-menu-column {
        flex: 0 0 auto !important;
    }

    .sld-header-row {
        padding: 0 4px;
        align-items: center !important;
    }

    .sld-header-row .sld-layout-menu-column.sld-mobile-nav-only {
        display: flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
    }

    .sld-header-row .sld-layout-menu-column.sld-mobile-nav-only .sld-hamburger {
        margin: 0;
    }

    /* Hide fixed version on mobile (shown in mobile nav footer instead) */
    #app-version {
        display: none;
    }

    /* Smaller logo */
    .sld-logo-image {
        height: 32px;
    }

    .sld-logo-link {
        height: 52px;
        padding: 6px 10px;
    }

    /* Login page: full width */
    #login-page-content {
        width: 100%;
        box-shadow: none;
        padding: var(--rz-dialog-content-padding);
    }

    #login-page-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    #login-page-mask::before,
    #login-page-mask::after {
        display: none;
    }

    /* Account settings: full width */
    #account-settings-page-content {
        width: 100%;
        position: relative;
        box-shadow: none;
    }

    #account-settings-page-mask::before,
    #account-settings-page-mask::after {
        display: none;
    }

    /* Page data grid: auto height */
    .page-data-grid {
        height: auto;
        min-height: 300px;
        min-width: 600px;
    }

    /* Users grid: auto height */
    .users-grid {
        height: auto;
        min-height: 300px;
        max-height: none;
        min-width: 600px;
    }

    /* Leaf detail grid: narrower on mobile (Last Cached Day + Last Updated columns are hidden) */
    .cache-leaf-grid {
        min-width: 280px;
    }

    /* Inner grid wrapper: remove side margins on mobile to maximise scroll width */
    .cache-leaf-grid-wrapper {
        margin: 4px 0;
    }

    /* Leaf ID: tighter truncation on narrow screens */
    .leaf-id-cell {
        max-width: 150px;
    }

    /* Icon-only buttons on mobile: hide label text */
    .btn-icon-only-mobile .rz-button-text {
        display: none;
    }

    /* Search field: full width on mobile */
    .users-search-field,
    .cache-search-field {
        max-width: 100%;
    }

    /* Hide specific grid columns on mobile */
    .col-hide-mobile {
        display: none;
    }

    /* Details card: compact padding on mobile */
    .details-card-padding {
        padding: 0.5rem;
    }

    /* Translations overview: auto height */
    #translations-overview {
        height: auto;
        max-height: calc(100vh - 340px);
    }

    /* Pager col: stack below search, left-align */
    .translations-pager-col {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

    /* Search col: add bottom spacing */
    .translations-search-col {
        margin-bottom: 0;
    }

    /* Metrics display name input full width */
    .metrics-display-name-input {
        width: 100%;
    }

    .month-year-picker {
        height: 36px;
    }

    .rz-button.month-btn {
        min-width: 36px;
        height: 36px;
    }

    .month-nav-btn {
        height: 36px;
        width: 36px;
    }

    /* Metrics page: hide tree pane and expand metrics content */
    .pane-tree {
        display: none !important;
    }

    .pane-metrics {
        padding-left: 0 !important;
    }

    .rz-treenode {
        margin: 8px 0 1px -7px;
    }

    .rz-treenode-label {
        padding-block: 0 !important;
        padding-inline: 0 !important;
    }

    /* Hide the vertical splitter divider bar */
    .rz-splitter-horizontal > .rz-splitter-bar {
        display: none !important;
    }

    /* Hide node-metrics heading row — node name already shown in the filter bar */
    .metrics-node-header {
        display: none !important;
    }

    /* Hide the display-name inline editor (inaccessible on mobile anyway) */
    .display-name-editor {
        display: none !important;
    }

    /* Hide CSV download/upload area */
    .metrics-csv-actions {
        display: none !important;
    }

    /* Hide MetricTypeTranslationKey label in rack metric tiles */
    .hide-on-mobile {
        display: none !important;
    }
    
    /* Home page content full width */
    .home-page-content {
        max-width: 100%;
    }

    /* Scale down the page heading on small screens */
    #home-page h1 {
        font-size: 1.6rem;
    }

    /* Reduce top spacing of the contact section */
    #home-contact-section {
        margin-top: 0.5rem;
    }

    /* Month picker: wrap buttons and shrink size */
    .month-btn {
        min-width: 34px;
        height: 34px;
        font-size: 12px;
    }
}

/* ============================================================
   BELOW MD  (< 1024px) — Radzen: xs + sm
   Phones and small tablets: compact tile cards, chart scroll,
   month-button → dropdown swap.
   ============================================================ */
@media (max-width: 1023.98px) {
    .home-contact-card {
        padding: 0.5rem;
    }
    
    .home-contact-line {
        font-size: 0.75rem;
    }
    
    /* Swap month buttons for compact dropdown */
    .month-buttons-desktop {
        display: none !important;
    }

    .month-month-dropdown-mobile {
        display: inline-block;
    }

    /* Cache progress: hide description text to save vertical space */
    .cache-progress-description {
        display: none;
    }

    .action-btn-mobile .rzi,
    .action-btn-mobile .rz-button-icon-left {
        display: none !important;
    }

    /* Charts: horizontal scroll per card so charts don't get squished */
    .metric-charts-container {
        overflow-x: auto;
        /* Extend slightly beyond the padded pane so the scrollbar sits flush */
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .metric-charts-container .rz-card {
        min-width: 560px;
    }

    /* ── Tile row: 3 cards always visible, zoom-to-fit ── */
    .metrics-tiles-row {
        overflow-x: visible;
        flex-wrap: nowrap !important;
        gap: 0.35rem !important;
        padding-bottom: 4px;
    }

    /* 3 cards always fit: equal share of row width, zoomed to fit */
    .metrics-tiles-row .metric-header-card {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: auto !important;
        zoom: 0.72;
    }

    /* Smaller internal padding inside tile cards */
    .metrics-tiles-row .rz-card {
        padding: 0.9rem;
    }

    /* Compact the big value text inside tiles */
    .metrics-tiles-row .rz-text-h3 {
        font-size: 1.1rem !important;
        line-height: 1.3;
    }

    /* Shrink the tile icon slightly */
    .metrics-tiles-row .rzi {
        font-size: 1.2rem !important;
    }

    /* Hide tile label text (e.g. "Consumption this month"), keep only the value */
    .metrics-tiles-row .metric-header-card .rz-text:not(.rz-text-h3) {
        display: none !important;
    }

    /* Stack icon above value */
    .metrics-consumption-tz-stack,
    .metrics-tile-stack {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    .metric-tile-label-container {
        align-items: center !important;
    }

    .metric-tile-label-container :nth-child(1) {
        order: 2;
    }

    .metric-tile-label {
        display: none !important;
    }
    
    .metric-tile-label-mobile {
        display: unset;
    }

    .card-action-btn {
        width: 50%;
    }
}

/* ============================================================
   BELOW SM  (< 768) — Radzen: xs
   Phones
   ============================================================ */
@media (max-width: 767.98px) {
    /* Tighter gap between stacked cards on a single-column layout */
    .home-contact-cards-stack {
        gap: 0.75rem !important;
    }

    .home-contact-card {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: unset;
        padding: 0.5rem; 
    }

    .card-action-btn {
        width: 100%;
    }

    .toolbox-appsettings-grid .rz-column-title {
        display: none !important;
    }

    /* Customer dropdown: release fixed min-width on narrow phones */
    .toolbox-customer-dropdown {
        min-width: 0;
        width: 100%;
    }

    .metric-tile-value {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .racks-power-summary-grid .rz-column-title {
        display: none !important;
    }

    .racks-power-summary-grid .power-summary-column {
        font-weight: bold;
    }
}


@media (max-width: 300px) {
    .search-filter-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ============================================================
   DOCUMENTS GRID
   ============================================================ */

/* ============================================================
   CACHE PROGRESS
   ============================================================ */
.cache-progress-description {
    font-size: 0.9rem;
}

.lock-list {
    margin: 0.4rem 0 0 1.4rem;
    font-size: 0.87rem;
}

.monospace-text {
    font-family: monospace;
}

.monospace-small {
    font-family: monospace;
    font-size: 0.82rem;
}

.batch-status-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.fill-status-label {
    font-size: 0.85rem;
}

.empty-leaf-notice {
    font-style: italic;
    margin: 8px 16px;
}


.metrics-link {
    display: inline-flex;
    align-items: center;
}

.metrics-icon {
    font-size: 1.1rem;
}

/* ============================================================
   LANGUAGE DIALOG
   ============================================================ */
.flag-hint-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
}

.flag-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flag-preview-label {
    font-size: 0.8rem;
}

/* ============================================================
   RELEASE NOTE DIALOG
   ============================================================ */

/* ============================================================
   RELEASE NOTES (admin + public)
   ============================================================ */
.release-title {
    margin: 0;
}

.release-summary {
    font-weight: normal;
    font-size: 0.9rem;
    margin-left: 8px;
}

.release-date {
    font-size: 0.85rem;
}

.release-build-id {
    margin-left: 12px;
    font-size: 0.85rem;
}

.release-items-list {
    margin: 0;
    padding-left: 1.5rem;
}

.release-item {
    margin-bottom: 4px;
}

.release-item.item-hidden {
    opacity: 0.5;
}

.devops-ticket-link {
    margin-left: 6px;
    font-size: 0.8rem;
}

.devops-ticket-id {
    margin-left: 6px;
    font-size: 0.8rem;
}

.empty-items-notice {
    font-style: italic;
    margin: 0;
}

/* ============================================================
   METRICS PAGE
   ============================================================ */
.location-placeholder {
    font-weight: normal;
    font-size: 0.9rem;
}

.timezone-label {
    font-size: 0.80rem;
    white-space: nowrap;
}

.timezone-icon {
    font-size: 0.90rem;
}

.csv-upload-input {
    display: none;
}

/* Compact lock-status alert (no-lock / success state) */
.cache-lock-alert.rz-alert {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    display: inline-flex;
    width: auto;
}

.cache-lock-alert .rz-alert-icon {
    font-size: 1rem;
}

/* Search field fills available space inside its flex container */
.cache-search-field {
    flex: 1 1 auto;
    min-width: 0;
}

.cache-search-field .rz-textbox {
    width: 100%;
}

/* ============================================================
   DEVELOPER TOOLBOX
   ============================================================ */

.toolbox-links-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbox-link-icon {
    font-size: 1rem;
    margin-right: 0.35rem;
}

.toolbox-section-title-inline {
    margin: 0;
}

.toolbox-setting-value {
    white-space: pre-wrap;
    word-break: break-word;
}

.toolbox-customer-dropdown {
    min-width: 320px;
}

.toolbox-change-row {
    padding: 0.75rem 1rem;
}

.toolbox-change-icon {
    font-size: 1rem;
    vertical-align: middle;
}

.toolbox-appsettings-search {
    width: 100%;
    max-width: 400px;
}

@media (max-width: 767.98px) {
    /* Toolbox-only layout: remove shared padding for this route, then fit to
       the remaining viewport below the header. */
    .toolbox-body {
        padding: 0 !important;
    }

    .body-container.toolbox-page {
        padding: 0 !important;
    }

    .toolbox-page-shell {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - 68px);
        min-height: 0;
    }

    .toolbox-page-header {
        display: none;
    }

    .toolbox-tabview {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    /* Panels scroll internally — content can never go behind the nav bar */
    .toolbox-tabview .rz-tabview-panels {
        order: 1;
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 1rem;
    }

    /* Nav sits at the bottom as the last flex child */
    .toolbox-tabview .rz-tabview-nav {
        order: 2;
        flex-shrink: 0;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-around;
        background: var(--rz-base-background-color);
        border-top: 1px solid var(--rz-base-border-color);
        margin: 0;
        padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        list-style: none;
    }

    .toolbox-tabview .rz-tabview-nav-item {
        flex: 1;
        list-style: none;
    }

    .toolbox-tabview .rz-tabview-nav-link {
        flex-direction: column !important;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0.25rem !important;
        width: 100%;
        min-height: 3.25rem;
    }

    /* Icon only — hide text labels */
    .toolbox-tabview .rz-tabview-title {
        display: none;
    }
}