:root {
    --sidebar-width: 280px;
    --topbar-height: 72px;
    --page-gap: clamp(12px, 1.5vw, 24px);
    --card-radius: 18px;
    --content-max-width: 1600px;
    --font-base: 16px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: var(--font-base);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden !important;
}

img,
svg,
canvas,
video {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

body.vertical-layout .app-content.content,
body.vertical-layout .content-wrapper,
body.vertical-layout .content-body,
.bitzone-dashboard-page,
.bz-page-shell,
.bz-page-inner,
.bz-exact-dashboard,
.bz-rt-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.vertical-layout .app-content.content {
    overflow-x: hidden !important;
}

body.vertical-layout .header-navbar,
body.vertical-layout .header-navbar .navbar-container.content,
body.vertical-layout .header-navbar .bz-navbar-grid,
body.vertical-layout .header-navbar .bz-header-left,
body.vertical-layout .header-navbar .bz-header-right,
body.vertical-layout .header-navbar .bz-global-toolbar-panel,
body.vertical-layout .header-navbar .navbar-nav {
    min-width: 0;
    max-width: 100%;
}

.row,
[class*="col-"],
.card,
.card-body,
.table-responsive,
.dataTables_wrapper,
.main-menu,
.main-menu-content,
.navigation,
.navigation li,
.navigation li a,
.bz-exact-service-row,
.bz-dashboard-grid,
.bz-overview-row,
.bz-admin-analytics-row,
.bz-admin-stats-row,
.bz-kpi-grid,
.bz-panel,
.bz-service-card,
.bz-heartbeat-card,
.bz-rt-grid,
.bz-rt-toolbar,
.bz-rt-log-wrap {
    min-width: 0;
}

.table-responsive,
.bz-rt-table-scroll,
.bz-table-scroll,
.report-table-shell,
.realtime-log-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.navigation a,
.menu-title,
.bz-service-title,
.bz-service-subtitle,
.bz-panel-title,
.header-user-copy strong,
.header-user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1440px) {
    body.vertical-layout .header-navbar .navbar-container.content,
    body.vertical-layout .header-navbar .bz-navbar-grid {
        column-gap: clamp(10px, 1vw, 16px) !important;
    }
}