/* GREENBOX_FIELD_DENSITY_LAYOUT_V1
VERSION: 1.0.2

Density contract
- Layout Manager: 1-4 cards per section.
- Layout Manager card arrows: 34px separated controls.
- Layout Manager header: intentional two-row layout.
- GreenBox Field Home: 4 cards normal desktop.
- Very wide / zoomed-out Field: 5 cards maximum.
- Secondary Field page grids follow the same density policy.
- No JavaScript application behavior is replaced.
- No parallel Theme/effects authority is created.
*/


/* ============================================================
   LAYOUT MANAGER HEADER
   ============================================================ */

body[data-mode="manager"] .gb-hybrid-header {
    height: 112px !important;
    min-height: 112px !important;

    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;
    align-content: center !important;

    column-gap: 14px !important;
    row-gap: 8px !important;

    padding: 10px 12px !important;
}


body[data-mode="manager"] .gb-hybrid-header .brand {
    display: block !important;

    flex: 0 0 310px !important;

    min-width: 270px !important;
    max-width: 350px !important;

    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;

    overflow: visible !important;
    text-overflow: clip !important;

    white-space: nowrap !important;
}


body[data-mode="manager"] .gb-hybrid-header .brand small {
    display: block !important;

    margin-top: 4px !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    white-space: normal !important;
}


body[data-mode="manager"] .gb-hybrid-header .search {
    flex: 1 1 520px !important;

    width: auto !important;

    min-width: 300px !important;
    max-width: none !important;
}


body[data-mode="manager"] .gb-hybrid-actions-shell {
    flex: 1 0 100% !important;

    width: 100% !important;

    margin: 0 !important;

    gap: 8px !important;
}


body[data-mode="manager"]
.gb-hybrid-actions-shell
.gb-layout-action-group {
    gap: 8px !important;
}


body[data-mode="manager"] .workspace {
    height: calc(100vh - 134px) !important;
}


/* ============================================================
   LAYOUT MANAGER CARD GRID
   ============================================================ */

body[data-mode="manager"] .section {
    container-type: inline-size;
}


body[data-mode="manager"] .cards {
    display: grid !important;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                230px,
                1fr
            )
        ) !important;

    gap: 12px !important;

    align-items: stretch !important;
}


body[data-mode="manager"] .card {
    min-width: 0 !important;
    min-height: 145px !important;

    padding: 10px !important;
}


body[data-mode="manager"] .card-top {
    display: flex !important;

    gap: 9px !important;

    align-items: flex-start !important;
}


body[data-mode="manager"] .card-top .ctitle {
    flex: 1 1 auto !important;

    min-width: 0 !important;

    line-height: 1.15 !important;

    overflow-wrap: anywhere !important;
}


/* ============================================================
   LAYOUT MANAGER CARD ORDER ARROWS
   ============================================================ */

body[data-mode="manager"] .card-order {
    display: inline-flex !important;

    flex: 0 0 auto !important;

    margin-left: auto !important;

    gap: 6px !important;
}


body[data-mode="manager"] .card-order .btn {
    width: 34px !important;
    min-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;

    padding: 0 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 17px !important;
    line-height: 1 !important;

    border-radius: 7px !important;
}


body[data-mode="manager"] .actions {
    gap: 7px !important;
}


body[data-mode="manager"] .actions .btn {
    padding: 7px 9px !important;
}


/* ============================================================
   LAYOUT MANAGER RESPONSIVE CARD COUNT

   Hard maximum: 4
   ============================================================ */

@container (max-width: 519px) {

    body[data-mode="manager"] .cards {
        grid-template-columns:
            1fr !important;
    }
}


@container
(min-width: 520px)
and
(max-width: 779px) {

    body[data-mode="manager"] .cards {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }
}


@container
(min-width: 780px)
and
(max-width: 1039px) {

    body[data-mode="manager"] .cards {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }
}


@container (min-width: 1040px) {

    body[data-mode="manager"] .cards {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }
}


/* ============================================================
   GREENBOX FIELD

   Live Home contract:
   .gb-grid
   .gb-card

   Secondary selected-page contract:
   .gb-unified-card-grid
   .gb-unified-card
   ============================================================ */

.gb-grid,
.gb-unified-card-grid {
    display: grid !important;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        ) !important;

    gap: 16px !important;

    align-items: stretch !important;
}


.gb-card,
.gb-unified-card {
    min-width: 0 !important;
}


.gb-card {
    padding: 15px !important;
}


.gb-unified-card {
    padding: 14px !important;
}


.gb-card-top,
.gb-unified-card-top {
    gap: 11px !important;
}


.gb-card-title,
.gb-unified-card-title {
    min-width: 0 !important;
}


.gb-card-title h2,
.gb-unified-card-title {
    overflow-wrap: anywhere !important;
}


.gb-actions,
.gb-unified-card-actions {
    gap: 9px !important;
}


/* ============================================================
   VERY WIDE / ZOOMED OUT

   Five columns is the hard maximum.
   ============================================================ */

@media (min-width: 1700px) {

    .gb-grid,
    .gb-unified-card-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }
}


/* ============================================================
   SMALLER DESKTOP / LAPTOP
   ============================================================ */

@media (max-width: 1240px) {

    .gb-grid,
    .gb-unified-card-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }
}


/* ============================================================
   TABLET / NARROW WINDOW
   ============================================================ */

@media (max-width: 900px) {

    .gb-grid,
    .gb-unified-card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            ) !important;
    }


    body[data-mode="manager"] .gb-hybrid-header .brand {
        display: block !important;

        flex-basis: 240px !important;

        min-width: 220px !important;
    }
}


/* ============================================================
   PHONE / VERY NARROW WINDOW
   ============================================================ */

@media (max-width: 620px) {

    .gb-grid,
    .gb-unified-card-grid {
        grid-template-columns:
            1fr !important;
    }


    body[data-mode="manager"] .gb-hybrid-header {
        height: auto !important;

        min-height: 112px !important;
    }


    body[data-mode="manager"] .gb-hybrid-header .brand,
    body[data-mode="manager"] .gb-hybrid-header .search {
        display: block !important;

        flex: 1 0 100% !important;

        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;
    }
}