/*
    ==================================================================
    FONT
    ==================================================================
*/

html {
    font-size: 95%; /* Shrink everything (root-based) - THIS affects all rem sizes, including .form-select */
}

/* Proportional scaling by breakpoint (desktop → tablet → phone) */
@media (max-width: 992px) { /* tablets / small laptops */
    html {
        font-size: 93.75%; /* 15px */
    }
}

@media (max-width: 768px) { /* large phones / small tablets */
    html {
        font-size: 87.5%; /* 14px */
    }
}

@media (max-width: 576px) { /* phones */
    html {
        font-size: 81.25%; /* 13px */
    }
}



body {
    overflow-x: auto;
    xfont-size: 1.0rem; /* ~14.4px vs Bootstrap’s default 16px */
}

/*
Bootstrap Sets by Default
    Heading Default Bootstrap Size
    h1 2.5rem (≈ 40px)
    h2 2rem (≈ 32px)
    h3 1.75rem (≈ 28px)
    h4 1.5rem (≈ 24px)
    h5 1.25rem (≈ 20px)
    h6 1rem (≈ 16px)
These are way too big for a compact UI.
*/


xh1, xh2, xh3, xh4, xh5, xh6 {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

xh1 {
    font-size: 2.2rem;
}

xh2 {
    font-size: 1.8rem;
}

xh3 {
    font-size: 1.5rem;
}

xh4 {
    font-size: 1.2rem;
}

xh5 {
    font-size: 1.0rem;
}

xh6 {
    font-size: 0.85rem;
}




/* Normalize inputs, selects, buttons */
input, select, textarea,
.form-control, .form-select, .btn {
    xfont-size: 0.875rem !important;
}

/* Normalize GridView and table content */
table, th, td {
    xfont-size: 0.92rem !important;
}

/* Modal tweaks */
.modal-content {
    xfont-size: 0.875rem;
}


.XXfs-1 {
    font-size: 1.5rem !important;
}

.XXfs-2 {
    font-size: 1.35rem !important;
}

.XXfs-3 {
    font-size: 1.2rem !important;
}

.XXfs-4 {
    font-size: 1.05rem !important;
}

.XXfs-5 {
    font-size: 0.95rem !important;
}

.XXfs-6 {
    font-size: 0.85rem !important;
}


.XXform-control,
.XXform-select,
.XXbtn {
    font-size: 0.875rem;
}




.XXmt-4 {
    margin-top: 1rem !important;
}

.XXmb-4 {
    margin-bottom: 1rem !important;
}

.XXpy-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}