/** @license For full copyright and license information, please see the LICENSE.md file. */

/**
 * @file engine-density.css
 * @description Universal Spacing Density System (Compact / Normal / Wide) and Root Font Scaling.
 * @module EngineStyles/Density
 */

:root {
    --density-card-header-font-size: 0.9375rem;
}

/* 1. Compact Density */
html[data-spacing-density="compact"],
body[data-spacing-density="compact"] {
    --density-menu-padding-y: 0.2rem;
    --density-menu-padding-x: 0.5rem;
    --density-menu-font-size: 0.8125rem;
    --density-table-cell-padding-y: 0.25rem;
    --density-table-cell-padding-x: 0.5rem;
    --density-table-font-size: 0.8125rem;
    --density-card-padding-y: 0.375rem;
    --density-card-padding-x: 0.5rem;
    --density-card-header-font-size: 0.875rem;
    --density-container-padding: 0.5rem;
    --density-input-padding-y: 0.2rem;
    --density-input-padding-x: 0.4rem;
    --density-input-font-size: 0.8125rem;
}

html[data-spacing-density="compact"] .navbar-vertical .nav-link {
    padding-top: var(--density-menu-padding-y) !important;
    padding-bottom: var(--density-menu-padding-y) !important;
    padding-left: var(--density-menu-padding-x) !important;
    padding-right: var(--density-menu-padding-x) !important;
    font-size: var(--density-menu-font-size) !important;
    min-height: 1.75rem !important;
}

html[data-spacing-density="compact"] .navbar-vertical .dropdown-item {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    padding-left: var(--density-menu-padding-x) !important;
    padding-right: var(--density-menu-padding-x) !important;
    min-height: 1.625rem !important;
    font-size: var(--density-menu-font-size) !important;
}

html[data-spacing-density="compact"] .table > :not(caption) > * > * {
    padding-top: var(--density-table-cell-padding-y) !important;
    padding-bottom: var(--density-table-cell-padding-y) !important;
    padding-left: var(--density-table-cell-padding-x) !important;
    padding-right: var(--density-table-cell-padding-x) !important;
    font-size: var(--density-table-font-size) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

html[data-spacing-density="compact"] .card-header,
html[data-spacing-density="compact"] .card-body,
html[data-spacing-density="compact"] .card-footer {
    padding-top: var(--density-card-padding-y) !important;
    padding-bottom: var(--density-card-padding-y) !important;
    padding-left: var(--density-card-padding-x) !important;
    padding-right: var(--density-card-padding-x) !important;
}

html[data-spacing-density="compact"] .card-header .card-title,
html[data-spacing-density="compact"] .dashboard-widget .card-title {
    font-size: var(--density-card-header-font-size) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

html[data-spacing-density="compact"] .page-body,
html[data-spacing-density="compact"] .page-header {
    padding: var(--density-container-padding) !important;
}

html[data-spacing-density="compact"] .form-control,
html[data-spacing-density="compact"] .form-select,
html[data-spacing-density="compact"] .ts-control {
    padding-top: var(--density-input-padding-y) !important;
    padding-bottom: var(--density-input-padding-y) !important;
    padding-left: var(--density-input-padding-x) !important;
    padding-right: var(--density-input-padding-x) !important;
    font-size: var(--density-input-font-size) !important;
    min-height: 1.75rem !important;
}

html[data-spacing-density="compact"] .btn:not(.btn-icon) {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.8125rem !important;
}

/* 2. Normal Density */
html[data-spacing-density="normal"],
body[data-spacing-density="normal"] {
    --density-menu-padding-y: 0.275rem;
    --density-menu-padding-x: 0.625rem;
    --density-menu-font-size: 0.875rem;
    --density-table-cell-padding-y: 0.375rem;
    --density-table-cell-padding-x: 0.625rem;
    --density-table-font-size: 0.875rem;
    --density-card-padding-y: 0.45rem;
    --density-card-padding-x: 0.75rem;
    --density-card-header-font-size: 0.9375rem;
    --density-container-padding: 0.625rem;
    --density-input-padding-y: 0.25rem;
    --density-input-padding-x: 0.5rem;
    --density-input-font-size: 0.875rem;
}

html[data-spacing-density="normal"] .navbar-vertical .nav-link {
    padding-top: var(--density-menu-padding-y) !important;
    padding-bottom: var(--density-menu-padding-y) !important;
    padding-left: var(--density-menu-padding-x) !important;
    padding-right: var(--density-menu-padding-x) !important;
    font-size: var(--density-menu-font-size) !important;
    min-height: 1.875rem !important;
}

html[data-spacing-density="normal"] .navbar-vertical .dropdown-item {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    padding-left: var(--density-menu-padding-x) !important;
    padding-right: var(--density-menu-padding-x) !important;
    min-height: 1.75rem !important;
    font-size: var(--density-menu-font-size) !important;
}

html[data-spacing-density="normal"] .table > :not(caption) > * > * {
    padding-top: var(--density-table-cell-padding-y) !important;
    padding-bottom: var(--density-table-cell-padding-y) !important;
    padding-left: var(--density-table-cell-padding-x) !important;
    padding-right: var(--density-table-cell-padding-x) !important;
    font-size: var(--density-table-font-size) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

html[data-spacing-density="normal"] .card-header,
html[data-spacing-density="normal"] .card-body,
html[data-spacing-density="normal"] .card-footer {
    padding-top: var(--density-card-padding-y) !important;
    padding-bottom: var(--density-card-padding-y) !important;
    padding-left: var(--density-card-padding-x) !important;
    padding-right: var(--density-card-padding-x) !important;
}

html[data-spacing-density="normal"] .card-header .card-title,
html[data-spacing-density="normal"] .dashboard-widget .card-title {
    font-size: var(--density-card-header-font-size) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

html[data-spacing-density="normal"] .page-body,
html[data-spacing-density="normal"] .page-header {
    padding: var(--density-container-padding) !important;
}

html[data-spacing-density="normal"] .form-control,
html[data-spacing-density="normal"] .form-select,
html[data-spacing-density="normal"] .ts-control {
    padding-top: var(--density-input-padding-y) !important;
    padding-bottom: var(--density-input-padding-y) !important;
    padding-left: var(--density-input-padding-x) !important;
    padding-right: var(--density-input-padding-x) !important;
    font-size: var(--density-input-font-size) !important;
    min-height: 2rem !important;
}

html[data-spacing-density="normal"] .btn:not(.btn-icon) {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.875rem !important;
}

/* 3. Wide Density */
html[data-spacing-density="wide"],
body[data-spacing-density="wide"] {
    --density-menu-padding-y: 0.35rem;
    --density-menu-padding-x: 0.75rem;
    --density-menu-font-size: 0.9375rem;
    --density-table-cell-padding-y: 0.5rem;
    --density-table-cell-padding-x: 0.75rem;
    --density-table-font-size: 0.9375rem;
    --density-card-padding-y: 0.625rem;
    --density-card-padding-x: 0.875rem;
    --density-card-header-font-size: 1rem;
    --density-container-padding: 0.75rem;
    --density-input-padding-y: 0.35rem;
    --density-input-padding-x: 0.6rem;
    --density-input-font-size: 0.9375rem;
}

html[data-spacing-density="wide"] .navbar-vertical .nav-link {
    padding-top: var(--density-menu-padding-y) !important;
    padding-bottom: var(--density-menu-padding-y) !important;
    padding-left: var(--density-menu-padding-x) !important;
    padding-right: var(--density-menu-padding-x) !important;
    font-size: var(--density-menu-font-size) !important;
    min-height: 2.125rem !important;
}

html[data-spacing-density="wide"] .navbar-vertical .dropdown-item {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: var(--density-menu-padding-x) !important;
    padding-right: var(--density-menu-padding-x) !important;
    min-height: 1.875rem !important;
    font-size: var(--density-menu-font-size) !important;
}

html[data-spacing-density="wide"] .table > :not(caption) > * > * {
    padding-top: var(--density-table-cell-padding-y) !important;
    padding-bottom: var(--density-table-cell-padding-y) !important;
    padding-left: var(--density-table-cell-padding-x) !important;
    padding-right: var(--density-table-cell-padding-x) !important;
    font-size: var(--density-table-font-size) !important;
    line-height: 1.45 !important;
    white-space: nowrap !important;
}

html[data-spacing-density="wide"] .card-header,
html[data-spacing-density="wide"] .card-body,
html[data-spacing-density="wide"] .card-footer {
    padding-top: var(--density-card-padding-y) !important;
    padding-bottom: var(--density-card-padding-y) !important;
    padding-left: var(--density-card-padding-x) !important;
    padding-right: var(--density-card-padding-x) !important;
}

html[data-spacing-density="wide"] .card-header .card-title,
html[data-spacing-density="wide"] .dashboard-widget .card-title {
    font-size: var(--density-card-header-font-size) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

html[data-spacing-density="wide"] .page-body,
html[data-spacing-density="wide"] .page-header {
    padding: var(--density-container-padding) !important;
}

html[data-spacing-density="wide"] .form-control,
html[data-spacing-density="wide"] .form-select,
html[data-spacing-density="wide"] .ts-control {
    padding-top: var(--density-input-padding-y) !important;
    padding-bottom: var(--density-input-padding-y) !important;
    padding-left: var(--density-input-padding-x) !important;
    padding-right: var(--density-input-padding-x) !important;
    font-size: var(--density-input-font-size) !important;
    min-height: 2.25rem !important;
}

html[data-spacing-density="wide"] .btn:not(.btn-icon) {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.9375rem !important;
}

/* Relative Root Font Size Scaling */
html[data-font-size="small"] { font-size: 92.5% !important; }
html[data-font-size="medium"] { font-size: 100% !important; }
html[data-font-size="large"] { font-size: 108% !important; }
html[data-font-size="xlarge"] { font-size: 118% !important; }

/* Input Icon padding preservation across all spacing density levels */
html[data-spacing-density] .input-icon > .form-control:not(:first-child),
html[data-spacing-density] .input-icon > .form-select:not(:first-child),
html[data-spacing-density] .input-icon > .input-icon-addon:first-child ~ .form-control,
.input-icon > .form-control:not(:first-child),
.input-icon > .input-icon-addon:first-child ~ .form-control {
    padding-left: 2.5rem !important;
}

html[data-spacing-density] .input-icon > .form-control:not(:last-child),
html[data-spacing-density] .input-icon > .form-select:not(:last-child),
html[data-spacing-density] .input-icon > .input-icon-addon:last-child ~ .form-control,
.input-icon > .form-control:not(:last-child),
.input-icon > .input-icon-addon:last-child ~ .form-control {
    padding-right: 2.5rem !important;
}