/*
 * Desktop density for the regular ERP layouts, at normal browser zoom.
 * Keep this after the theme and shared control styles. Rem values below are
 * the original pixel dimensions / 16, so they follow the 90% root size once.
 * Tablet/scanner layouts opt out; narrow screens and print keep theme sizing.
 */
@media screen and (min-width: 993px) {
    html[data-ui-density="compact"] {
        font-size: 90%;
        --erp-header-height: 4.375rem;
        --erp-footer-height: 3.75rem;
        --erp-gutter: 1.5rem;
        --erp-sidebar-width: 15rem;
        --erp-submenu-width: 11.875rem;
    }

    /* Keep the header, sidebar, content and footer on the same dimensions. */
    html[data-ui-density="compact"] body[data-sidebar-size="small"] {
        --erp-sidebar-width: 10rem;
    }

    html[data-ui-density="compact"] body.vertical-collpsed {
        --erp-sidebar-width: 4.375rem;
    }

    html[data-ui-density="compact"] .navbar-header,
    html[data-ui-density="compact"] .header-item {
        height: var(--erp-header-height);
    }

    html[data-ui-density="compact"] .navbar-header {
        padding-right: calc(var(--erp-gutter) / 2);
    }

    html[data-ui-density="compact"] .logo {
        line-height: var(--erp-header-height);
    }

    html[data-ui-density="compact"] .logo-lg img {
        width: 11rem;
        height: 2.5rem;
        object-fit: contain;
    }

    html[data-ui-density="compact"] .logo-sm img {
        max-height: 1.75rem;
        width: auto;
    }

    html[data-ui-density="compact"] .navbar-brand-box,
    html[data-ui-density="compact"] .vertical-menu {
        /* The theme also uses !important for the collapsed widths. */
        width: var(--erp-sidebar-width) !important;
    }

    html[data-ui-density="compact"] .vertical-menu {
        top: var(--erp-header-height);
    }

    html[data-ui-density="compact"] body .main-content,
    html[data-ui-density="compact"] body.vertical-collpsed .main-content {
        margin-left: var(--erp-sidebar-width);
    }

    html[data-ui-density="compact"] body .footer,
    html[data-ui-density="compact"] body.vertical-collpsed .footer {
        left: var(--erp-sidebar-width);
        height: var(--erp-footer-height);
        padding: 1.25rem calc(var(--erp-gutter) / 2);
    }

    html[data-ui-density="compact"] .page-content {
        padding: calc(var(--erp-header-height) + var(--erp-gutter))
            calc(var(--erp-gutter) / 2) var(--erp-footer-height);
    }

    html[data-ui-density="compact"] .row {
        margin-right: calc(var(--erp-gutter) / -2);
        margin-left: calc(var(--erp-gutter) / -2);
    }

    html[data-ui-density="compact"] .row > [class^="col"],
    html[data-ui-density="compact"] .row > [class*=" col"],
    html[data-ui-density="compact"] .container-fluid {
        padding-right: calc(var(--erp-gutter) / 2);
        padding-left: calc(var(--erp-gutter) / 2);
    }

    html[data-ui-density="compact"] .no-gutters {
        margin-right: 0;
        margin-left: 0;
    }

    html[data-ui-density="compact"] .no-gutters > [class^="col"],
    html[data-ui-density="compact"] .no-gutters > [class*=" col"] {
        padding-right: 0;
        padding-left: 0;
    }

    html[data-ui-density="compact"] .card {
        margin-bottom: var(--erp-gutter);
    }

    html[data-ui-density="compact"] .page-title-box {
        padding-bottom: var(--erp-gutter);
    }

    html[data-ui-density="compact"] .page-title-box h4,
    html[data-ui-density="compact"] .card-title {
        font-size: 0.9375rem;
    }

    html[data-ui-density="compact"] .card-title-desc {
        margin-bottom: var(--erp-gutter);
    }

    /* The stock navigation and size helpers use px instead of rem. */
    html[data-ui-density="compact"] #sidebar-menu {
        padding: 0.625rem 0 1.875rem;
    }

    html[data-ui-density="compact"] #sidebar-menu ul li a {
        font-size: 0.83125rem;
    }

    html[data-ui-density="compact"] #sidebar-menu ul li ul.sub-menu li a {
        font-size: 0.8125rem;
    }

    html[data-ui-density="compact"] #sidebar-menu ul li ul.sub-menu li ul.sub-menu li a {
        font-size: 0.84375rem;
    }

    html[data-ui-density="compact"] .menu-title {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.75rem;
    }

    html[data-ui-density="compact"] .vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
        padding: 0.9375rem 1.25rem;
        min-height: 3.4375rem;
    }

    html[data-ui-density="compact"] .vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a i {
        font-size: 1.25rem;
        margin-left: 0.25rem;
    }

    html[data-ui-density="compact"] .vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a span {
        padding-left: 1.5625rem;
    }

    html[data-ui-density="compact"] .vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
        width: calc(var(--erp-sidebar-width) + var(--erp-submenu-width));
    }

    html[data-ui-density="compact"] .vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul {
        left: var(--erp-sidebar-width);
        width: var(--erp-submenu-width);
    }

    html[data-ui-density="compact"] .vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
        width: var(--erp-submenu-width);
        padding: 0.5rem 1.25rem;
    }

    html[data-ui-density="compact"] .vertical-collpsed .vertical-menu #sidebar-menu > ul ul li:hover > ul {
        left: var(--erp-submenu-width);
        width: var(--erp-submenu-width);
        margin-top: -2.25rem;
    }

    html[data-ui-density="compact"] .font-size-10 { font-size: 0.625rem !important; }
    html[data-ui-density="compact"] .font-size-11 { font-size: 0.6875rem !important; }
    html[data-ui-density="compact"] .font-size-12 { font-size: 0.75rem !important; }
    html[data-ui-density="compact"] .font-size-13 { font-size: 0.8125rem !important; }
    html[data-ui-density="compact"] .font-size-14 { font-size: 0.875rem !important; }
    html[data-ui-density="compact"] .font-size-15 { font-size: 0.9375rem !important; }
    html[data-ui-density="compact"] .font-size-16 { font-size: 1rem !important; }
    html[data-ui-density="compact"] .font-size-17 { font-size: 1.0625rem !important; }
    html[data-ui-density="compact"] .font-size-18 { font-size: 1.125rem !important; }
    html[data-ui-density="compact"] .font-size-20 { font-size: 1.25rem !important; }
    html[data-ui-density="compact"] .font-size-22 { font-size: 1.375rem !important; }
    html[data-ui-density="compact"] .font-size-24 { font-size: 1.5rem !important; }

    html[data-ui-density="compact"] .w-xxxs { min-width: 2.1875rem; }
    html[data-ui-density="compact"] .w-xxs { min-width: 4.25rem; }
    html[data-ui-density="compact"] .w-xs { min-width: 5rem; }
    html[data-ui-density="compact"] .w-sm { min-width: 5.9375rem; }
    html[data-ui-density="compact"] .w-md { min-width: 6.875rem; }
    html[data-ui-density="compact"] .w-lg { min-width: 8.75rem; }
    html[data-ui-density="compact"] .w-xl { min-width: 10rem; }

    /* Match Select2's label and arrow to the rem-based Bootstrap input. */
    html[data-ui-density="compact"] .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: calc(1.5em + 0.94rem) !important;
        padding-left: 0.75rem;
    }

    html[data-ui-density="compact"] .select2-container .select2-selection--single .select2-selection__arrow {
        height: calc(1.5em + 0.94rem) !important;
        width: 2.125rem;
        right: 0.1875rem;
    }

    html[data-ui-density="compact"] .select2-container .select2-selection--multiple {
        min-height: calc(1.5em + 0.94rem + 2px);
    }

    html[data-ui-density="compact"] .select2-container .select2-selection--multiple .select2-selection__rendered {
        line-height: 1.5 !important;
    }

    html[data-ui-density="compact"] .select2-container--default .select2-search--dropdown {
        padding: 0.625rem;
    }

    html[data-ui-density="compact"] .select2-results__option {
        padding: 0.375rem 0.75rem;
    }

    html[data-ui-density="compact"] .dropdown-menu-xl { width: 24.375rem; }
    html[data-ui-density="compact"] .header-profile-user { width: 2.25rem; height: 2.25rem; }

    /* Login retains viewport height; only the contents become more compact. */
    html[data-ui-density="compact"] .auth-form-group-custom .form-control {
        height: 3.75rem;
        padding-top: 1.75rem;
        padding-left: 3.75rem;
    }

    html[data-ui-density="compact"] .auth-form-group-custom label {
        top: 0.4375rem;
        left: 3.75rem;
    }

    html[data-ui-density="compact"] .auth-form-group-custom .auti-custom-input-icon {
        left: 1.1875rem;
        font-size: 1.5rem;
    }

    html[data-ui-density="compact"] .auth-body-bg .svg-link img {
        width: 14.0625rem;
        height: 3.1875rem;
    }

    /* Horizontal navigation uses the same header height but has no sidebar. */
    html[data-ui-density="compact"] body[data-layout="horizontal"] .navbar-brand-box {
        width: auto !important;
    }

    html[data-ui-density="compact"] .topnav {
        margin-top: var(--erp-header-height);
        padding: 0 calc(var(--erp-gutter) / 2);
    }

    html[data-ui-density="compact"] .topnav .navbar-nav .nav-link,
    html[data-ui-density="compact"] .topnav .navbar-nav .nav-link i {
        font-size: 0.9375rem;
    }

    html[data-ui-density="compact"] body[data-layout="horizontal"] .page-content {
        margin-top: var(--erp-header-height);
        padding-top: calc(3.4375rem + var(--erp-gutter));
    }
}