/* static/css/custom_page_layout.css */

/* =========================================================
   DENSITY SYSTEM
   comfortable = normal readable spacing
   compact     = dashboard/workbench spacing
   dense       = maximum information density
   ========================================================= */

/* ---------- Comfortable ---------- */

.page-container.density-comfortable .page-content {
    padding: 1rem;
}

.page-container.density-comfortable h1,
.page-container.density-comfortable h2,
.page-container.density-comfortable h3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.page-container.density-comfortable .section {
    margin: 0.75rem 0;
    padding: 0.75rem;
}


/* ---------- Compact ---------- */

.page-container.density-compact .page-content {
    padding: 0.5rem 0.75rem;
}

.page-container.density-compact h1 {
    margin: 0.3rem 0 0.55rem 0;
    font-size: 1.45rem;
}

.page-container.density-compact h2 {
    margin: 0.25rem 0 0.45rem 0;
    font-size: 1.2rem;
}

.page-container.density-compact h3 {
    margin: 0.2rem 0 0.35rem 0;
    font-size: 1.05rem;
}

.page-container.density-compact p {
    margin: 0.25rem 0;
}

.page-container.density-compact ul {
    margin: 0.35rem 0 0.35rem 1.2rem;
}

.page-container.density-compact li {
    margin: 0.15rem 0;
}

.page-container.density-compact .section {
    margin: 0.4rem 0;
    padding: 0.45rem 0.6rem;
}

.page-container.density-compact .section .section {
    margin: 0.25rem 0;
    padding: 0.3rem 0.45rem;
}

.page-container.density-compact .section .sub-section {
    margin: 0.25rem 0;
    padding: 0.3rem 0.45rem;
}

.page-container.density-compact .button-container-left,
.page-container.density-compact .button-container-split {
    margin: 0.25rem 0;
    gap: 0.25rem;
}

.page-container.density-compact .my-button {
    padding: 0.35rem 0.55rem;
    line-height: 1.2;
}

.page-container.density-compact .my-info-box {
    margin: 0.25rem 0;
    padding: 0.35rem 0.5rem;
}


/* ---------- Dense ---------- */

.page-container.density-dense .page-content {
    padding: 0.35rem 0.5rem;
}

.page-container.density-dense h1 {
    margin: 0.2rem 0 0.35rem 0;
    font-size: 1.3rem;
}

.page-container.density-dense h2 {
    margin: 0.15rem 0 0.3rem 0;
    font-size: 1.1rem;
}

.page-container.density-dense h3 {
    margin: 0.15rem 0 0.25rem 0;
    font-size: 1rem;
}

.page-container.density-dense p,
.page-container.density-dense li {
    margin: 0.1rem 0;
}

.page-container.density-dense .section {
    margin: 0.25rem 0;
    padding: 0.3rem 0.45rem;
}

.page-container.density-dense .section .section {
    margin: 0.15rem 0;
    padding: 0.25rem 0.35rem;
}

.page-container.density-dense .section .sub-section {
    margin: 0.15rem 0;
    padding: 0.25rem 0.35rem;
}

.page-container.density-dense .button-container-left,
.page-container.density-dense .button-container-split {
    margin: 0.15rem 0;
    gap: 0.2rem;
}

.page-container.density-dense .my-button {
    padding: 0.25rem 0.45rem;
    line-height: 1.15;
}