html,
body {
    font-family: var(--tb-font-sans-serif, "Nunito", sans-serif);
}

/* ~15% smaller than the interaction theme's stock chrome (header 70px,
   sidebar 230px/70px expanded/collapsed) - every topbar/sidebar/footer
   layout rule reads these same custom properties, so overriding them here
   covers both sidebar states without chasing each individual rule. */
[data-theme="interaction"] {
    --tb-header-height: 63px;
    --tb-vertical-menu-width: 205px;
    --tb-vertical-menu-width-sm: 63px;
}

/* Page content (cards, tables, forms) renders ~10% larger than it needs to
   at this data density - `zoom` (not a root font-size change) scales only
   this subtree's own rendering, so it doesn't touch #page-topbar/.navbar-menu
   sizing above, which is already pinned via the px custom properties above. */
.main-content .page-content {
    zoom: 90%;
}

a,
.btn-link {
    text-decoration: none;
}

.app-search {
    margin-bottom: 0;
}

.dropdown-icon-item i {
    display: block;
    margin-bottom: 0.5rem;
}

.btn-topbar,
.header-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.topbar-user .btn {
    height: var(--tb-header-height, 70px);
}

.navbar-menu .navbar-nav .nav-link.active {
    color: var(--tb-vertical-menu-item-active-color);
    background: var(--tb-vertical-menu-item-active-bg);
}

/* Steex's own collapsed-rail rule zeroes out top/bottom margin between
   icons (margin: 0 12px), which packs top-level icons edge-to-edge. Adding
   the gap to the <li> itself (not the anchor) keeps each item's own
   .menu-dropdown flyout flush against its trigger - that flyout is
   absolutely positioned with top:auto, which anchors to the anchor's own
   static-flow position, so margin on the anchor itself leaks into the
   flyout as a gap above the submenu. */
[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item {
    margin: 4px 0;
}

/* Idle rows render shorter than the hover flyout: the label <span> is
   display:none until hover, so idle has only the icon (line-height: 0)
   filling the row, while hover reveals the label's own line-height. Same
   padding both states - forcing a shared min-height keeps the row size
   constant instead of growing on hover. */
[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link {
    min-height: 2.5rem;
}

.apex-charts,
.e-charts {
    min-height: 120px;
}

#total_revenue,
#total_income,
#property_sale_chart,
#propetry_rent {
    min-height: 330px;
}

#property_sale,
#property_rent,
#visitors_chart,
#residency_property {
    min-height: 60px;
    min-width: 110px;
}

.validation-message {
    color: var(--tb-danger);
}

.invalid {
    border-color: var(--tb-danger);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1050;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}