/* ========================================
   PROPORTIONAL RESPONSIVE LAYOUT
   Scale based on screen size with mathematical ratios
   Baseline: 1920×1080 desktop
   ======================================== */

/* 
   BASELINE SIZING (1920×1080):
   Font: 0.75rem
   Button: 1.8rem
   Input: 1.8rem
   
   FORMULA:
   Size = min(max, base + (viewport - baseline) * ratio)
   This scales proportionally up/down from baseline
*/

body {
    --form-font-size: clamp(0.6525rem, calc(1.124rem - 0.014vw), 0.80rem);
    --menu-font-weight: 500;
    --form-control-height: 30px;
    --button-height: 32px;
    --control-text-padding-x: 0.35rem;
    --control-text-padding-y: 0.15rem;
    --control-text-line-height: 1.2;
    --control-margin-bottom: 0.08rem;

    --card-padding: clamp(0.35rem, 0.3vw + 0.45rem, 0.75rem);
    --form-gap: clamp(0.20rem, 0.10vw + 0.20rem, 0.40rem);
}

/* ========================================
   PROPORTIONAL FONT SIZING FOR ALL ELEMENTS
   Uses mathematical formula, not breakpoints
   ======================================== */

body .rz-form-field input,
body .rz-form-field textarea,
body .rz-form-field .rz-inputtext,
body .rz-form-field .rz-autocomplete,
body .rz-form-field .rz-dropdown,
body .rz-form-field .rz-datepicker,
body .rz-form-field .rz-numeric {
    height: var(--form-control-height);
    font-size: var(--form-font-size);
    padding: var(--control-text-padding-y) var(--control-text-padding-x) !important;
    line-height: var(--control-text-line-height) !important;
    margin: 0 !important;
}

/* Ensure selected values are vertically centered and fully visible */
body .rz-form-field .rz-dropdown,
body .rz-form-field .rz-autocomplete,
body .rz-form-field .rz-numeric {
    display: flex;
    align-items: center;
}

body .rz-form-field .rz-dropdown {
    display: block;
}

body .rz-dropdown .rz-dropdown-label,
body .rz-autocomplete .rz-inputtext,
body .rz-numeric .rz-inputtext,
body .rz-datepicker .rz-inputtext {
    display: flex;
    align-items: center;
    min-height: calc(var(--form-control-height) - 2px);
    line-height: var(--control-text-line-height) !important;
    padding: var(--control-text-padding-y) var(--control-text-padding-x) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .rz-dropdown .rz-dropdown-label {
    display: block;
    min-height: calc(var(--form-control-height) - 2px);
    line-height: var(--control-text-line-height) !important;
    padding-top: clamp(0.2rem, 0.4vw + 0.15rem, 0.3rem) !important;
    padding-bottom: clamp(0.2rem, 0.4vw + 0.15rem, 0.3rem) !important;
    padding-left: clamp(0.4rem, 0.75vw + 0.3rem, 0.6rem) !important;
    padding-right: clamp(0.4rem, 0.75vw + 0.3rem, 0.6rem) !important;
}

body .rz-dropdown .rz-dropdown-label,
body .rz-dropdown .rz-placeholder,
body .rz-form-field .rz-placeholder {
    margin: 0 !important;
    font-size: var(--form-font-size) !important;
}

body .rz-button {
    height: var(--button-height);
    min-height: var(--button-height);
    font-size: var(--form-font-size);
    padding: clamp(0.2rem, 0.3vw, 0.3rem) clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
    color:black !important;
}

body .rz-form-field-label {
    font-size: var(--form-font-size);
    margin-bottom: var(--control-margin-bottom) !important;
}

/* ========================================
   PROPORTIONAL GRID SIZING
   ======================================== */

body .rz-grid-table thead th {
    font-size: var(--form-font-size);
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem);
    line-height: 1.25;
}

body .rz-data-row td {
    font-size: var(--form-font-size);
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem);
    line-height: 1.25;
}

.modern-enterprise-grid .rz-grid-table thead th {
    font-size: var(--form-font-size);
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem);
}

.modern-enterprise-grid .rz-data-row td {
    font-size: var(--form-font-size);
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem);
}

/* ========================================
   PROPORTIONAL SPACING
   ======================================== */

body .rz-card.rz-variant-flat {
    padding: var(--card-padding);
    margin-bottom: clamp(0.15rem, 0.2vw + 0.1rem, 0.3rem);
}

body .rz-card.rz-variant-outlined {
    padding: var(--card-padding);
    margin-top: clamp(0.1rem, 0.15vw + 0.08rem, 0.2rem);
}

body .rz-templateform .rz-row,
body .form-row-gap {
    gap: var(--form-gap);
    column-gap: clamp(0.25rem, 0.5vw + 0.15rem, 0.6rem);
    margin-bottom: clamp(0.08rem, 0.1vw + 0.05rem, 0.15rem);
}

body .form-stack-gap {
    gap: var(--form-gap);
}

body .rz-stack.rz-horizontal {
    gap: clamp(0.2rem, 0.3vw + 0.1rem, 0.4rem);
}

/* ========================================
   PROPORTIONAL ACTION BUTTON SIZING
   ======================================== */

.action-btn-modern {
    height: var(--button-height);
    min-height: var(--button-height);
    padding: 0 clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
}

.action-btn-icon {
    font-size: clamp(0.9rem, 0.5vw + 0.7rem, 1.1rem);
    width: clamp(1.4rem, 1.2vw + 0.9rem, 1.8rem);
    height: clamp(1.4rem, 1.2vw + 0.9rem, 1.8rem);
}

.action-btn-label {
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL FORM FIELD SIZING
   ======================================== */

body .rz-form-field {
    margin-bottom: clamp(0.1rem, 0.15vw + 0.08rem, 0.2rem);
}

body .rz-form-field-content {
    border-radius: clamp(0.5rem, 0.3vw + 0.4rem, 0.7rem);
}

/* ========================================
   PROPORTIONAL CHECKBOX/TOGGLE SIZING
   ======================================== */

body .rz-stack:has(> .rz-chkbox):has(> .rz-label) {
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
    gap: clamp(0.35rem, 0.4vw + 0.25rem, 0.55rem);
    min-height: var(--form-control-height);
}

body .rz-stack:has(> .rz-chkbox):has(> .rz-label) .rz-chkbox-box {
    width: clamp(2rem, 1.8vw + 1.4rem, 2.6rem);
    height: clamp(1.1rem, 0.9vw + 0.8rem, 1.5rem);
}

/* ========================================
   PROPORTIONAL ICON SIZING
   ======================================== */

body .rz-form-field .rz-icon,
body .rz-form-field .rzi,
body .rz-form-field .rz-button-icon-left,
body .rz-form-field .rz-button-icon-right {
    font-size: clamp(0.9rem, 0.5vw + 0.7rem, 1.1rem);
    width: clamp(1.4rem, 1.2vw + 0.9rem, 1.8rem);
    height: clamp(1.4rem, 1.2vw + 0.9rem, 1.8rem);
}

/* ========================================
   PROPORTIONAL DIVIDER SIZING
   ======================================== */

hr {
    margin: clamp(0.2rem, 0.15vw + 0.15rem, 0.3rem) 0;
    height: 1px;
}

/* ========================================
   PROPORTIONAL GRID HEIGHT
   Adjusts based on available space
   ======================================== */

.modern-grid-container,
.modern-enterprise-grid {
    margin: clamp(0.1rem, 0.15vw + 0.08rem, 0.2rem) 0;
    max-height: clamp(250px, 40vh - 200px, 450px);
    overflow-y: auto;
}

/* ========================================
   PROPORTIONAL TAB SIZING
   ======================================== */

body .rz-tabview-panel {
    padding: clamp(0.15rem, 0.2vw + 0.1rem, 0.25rem);
}

body .rz-tabview-nav {
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL CONTENT PADDING
   ======================================== */

body .rz-content {
    padding: clamp(0.2rem, 0.2vw + 0.15rem, 0.3rem);
}

body .rz-main,
body .rz-body {
    padding-top: 0;
}

/* ========================================
   PROPORTIONAL LABEL SIZING
   ======================================== */

body .rz-card.rz-variant-outlined .rz-label,
body .rz-templateform .rz-label {
    margin: clamp(0.25rem, 0.2vw + 0.2rem, 0.4rem) 0 clamp(-0.25rem, -0.2vw - 0.2rem, -0.1rem) 0;
    padding-left: clamp(0.15rem, 0.15vw + 0.1rem, 0.25rem);
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL MESSAGE/ALERT SIZING
   ======================================== */

body .rz-alert {
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
    margin-bottom: clamp(0.1rem, 0.15vw + 0.08rem, 0.2rem);
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL PAGER SIZING
   ======================================== */

body .rz-pager {
    padding: clamp(0.2rem, 0.2vw + 0.15rem, 0.35rem) clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
    font-size: var(--form-font-size);
}

body .rz-paginator-element {
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL DROPDOWN/AUTOCOMPLETE SIZING
   ======================================== */

body .rz-dropdown-item,
body .rz-autocomplete-item {
    padding: clamp(0.2rem, 0.2vw + 0.15rem, 0.35rem) clamp(0.4rem, 0.4vw + 0.25rem, 0.6rem);
    font-size: var(--form-font-size);
}

body .rz-dropdown-panel,
body .rz-autocomplete-panel {
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL LIST ITEM SIZING
   ======================================== */

body .rz-listbox-item {
    padding: clamp(0.2rem, 0.2vw + 0.15rem, 0.35rem) clamp(0.4rem, 0.4vw + 0.25rem, 0.6rem);
    font-size: var(--form-font-size);
}

/* ========================================
   SMOOTH TRANSITIONS
   No jarring jumps when resizing
   ======================================== */

body .rz-button,
body .rz-form-field input,
body .rz-form-field textarea,
body .rz-form-field .rz-inputtext {
    transition: font-size 0.2s ease, height 0.2s ease, padding 0.2s ease;
}

/* ========================================
   RESPONSIVE DESCRIPTION
   
   How the formulas work:
   
   clamp(MIN, PREFERRED, MAX)
   
   Example: clamp(0.65rem, 0.5vw + 0.50rem, 0.85rem)
   
   1920px width:  0.5 * 1920/100 + 0.50 = 9.6 + 0.5 = 10.1rem (clamped to 0.85rem max) ✓
   1366px width:  0.5 * 1366/100 + 0.50 = 6.83 + 0.5 = 7.33rem (result: 0.733rem)
   768px width:   0.5 * 768/100 + 0.50 = 3.84 + 0.5 = 4.34rem (result: 0.434rem, clamped to 0.65rem min)
   
   This creates smooth proportional scaling!
   
   Benefits:
   - No fixed sizes (scales with screen)
   - No sharp breakpoints (smooth transitions)
   - Ratio-based (mathematically proportional)
   1920×1080 scales to compact enterprise sizing
   - Smaller screens are slightly larger for readability
   - Larger screens are slightly smaller for density
   - All using pure CSS math - no JavaScript
   
   ======================================== */

/* ========================================
   ENTERPRISE TYPOGRAPHY CONSISTENCY OVERRIDES
   Use Nav menu font and size as base across all controls
   ======================================== */

body .rz-button,
body .rz-button .rz-button-text,
body .rz-inputtext,
body .rz-textarea,
body .rz-dropdown,
body .rz-autocomplete,
body .rz-numeric,
body .rz-html-editor,
body .rz-dialog,
body .rz-navigation-menu,
body .rz-tabview,
body .rz-grid-table,
body .rz-grid-table thead th,
body .rz-data-row td,
body .rz-form-field-label,
body .rz-dropdown-item,
body .rz-autocomplete-item,
body .rz-listbox-item,
body .rz-menuitem,
body .rz-pager,
body .rz-navigation-item-link,
body .topbar .mainnav__button,
body .topbar .mainnav__link,
body .topbar .mega-menu__link,
body .topbar .dropdown-menu__link,
body .compact-grid .rz-grid-table thead th,
body .compact-grid .rz-grid-table tbody td,
body .compact-grid .rz-column-title {
    font-family: inherit !important;
    font-size: var(--form-font-size) !important;
    line-height: var(--line-height) !important;
}

body .rz-form-field input,
body .rz-form-field textarea,
body .rz-form-field .rz-inputtext,
body .rz-form-field .rz-autocomplete,
body .rz-form-field .rz-dropdown,
body .rz-form-field .rz-datepicker,
body .rz-form-field .rz-numeric,
body .rz-button {
    min-height: var(--form-control-height) !important;
}

body .rz-grid-table thead th,
body .rz-grid-table .rz-data-row td {
    height: var(--grid-row-height, 40px) !important;
}

/* Force exact same font size for button text + tab text + grid headers */
body .rz-button .rz-button-text,
body .action-btn-label,
body .action-btn-label-full,
body .action-btn-label-short,
body .rz-tabview-nav li button,
body .rz-tabview-nav .rz-tabview-nav-link,
body .rz-grid-table thead th,
body .rz-grid-table thead th .rz-column-title,
body .compact-grid .rz-grid-table thead th,
body .compact-grid .rz-grid-table thead th .rz-column-title {
    /*font-family: var(--font-family) !important;*/
    font-size: var(--form-font-size) !important;
    line-height: 1.2 !important;
}

/* Match button text and grid row text with autocomplete text style */
body .rz-button .rz-button-text,
body .action-btn-label,
body .action-btn-label-full,
body .action-btn-label-short,
body .compact-grid .rz-grid-table tbody td,
body .compact-grid .rz-grid-table tbody td *,
body .rz-data-row td,
body .rz-data-row td * {
    /*font-family: var(--font-family) !important;*/
    font-size: var(--form-font-size) !important;
    font-weight: 400 !important;
    line-height: var(--line-height) !important;
    letter-spacing: normal !important;
}

@media (max-width: 1024px) {
    body {
        --form-font-size: clamp(0.9rem, calc(1.08rem - 0.01vw), 1rem);
    }
}

@media (min-width: 1900px) {
    body {
        --form-font-size: clamp(0.8125rem, calc(0.95rem - 0.004vw), 0.875rem);
    }
}

/* Final menu-typography lock for buttons/tabs/grid */
body .rz-button,
body .rz-button .rz-button-text,
body .rz-button .rz-button-text *,
body .action-btn-modern,
body .action-btn-label,
body .action-btn-label-full,
body .action-btn-label-short,
body .rz-tabview-nav li button,
body .rz-tabview-nav .rz-tabview-nav-link,
body .rz-grid-table thead th,
body .rz-grid-table thead th .rz-column-title {
    /*font-family: var(--font-family) !important;*/
    font-size: var(--form-font-size) !important;
    font-weight: var(--menu-font-weight) !important;
    line-height: var(--line-height) !important;
}

body .rz-grid-table tbody td .rz-cell-data, body .rz-data-row td * {
    /*font-family: var(--font-family) !important;*/
    font-size: var(--form-font-size) !important;
    line-height: var(--line-height) !important;
}