:root {
    --grid-content-padding: 40px;
    --logo-width: 40px;
    --grid-content-complete-padding: calc(var(--grid-content-padding) + var(--logo-width) + 16px);
    --clr-primary: #1b4a9a;
    --clr-primary-700: #0B296D;
    --clr-primary-300: #1b5fb3;
    --clr-primary-200: #025fbf;
    --clr-secondary: #107A3B;
    --clr-secondary-300: #469b37;
    --clr-neutral-200: #dfdfde;
    --clr-neutral-300: #aeb8b6;
    --clr-neutral-400: #808184;
    --clr-neutral-500: #848484;
    --clr-neutral-700: #000000;
    --clr-link: #1b5fb3;
    --clr-body: #f2f2f2;
    --clr-modal-background: #f2f2f2;
    --fs-sm: 0.86rem; /* 14px base ≈ 12px */
    --fs-base: 1rem; /* 14px base ≈ 14px */
    --fs-md: 1.15rem; /* 14px base ≈ 16px */
    --fs-lg: 1.29rem; /* 14px base ≈ 18px */
    --fs-xl: 1.72rem; /* 14px base ≈ 24px */
    --fs-2xl: 2rem; /* 14px base ≈ 28px */
    --fs-3xl: 2.29rem; /* 14px base ≈ 32px */
    --clr-excel: #1d6f42;
    --clr-active: #5db547;
    --clr-danger: #ef0f0f;
}



body {
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.gridContainer{
    display: grid;
    grid-template-areas:
        "header header header"
        "search search filters"
        "tabtop tabtop tabtop"
        "content content content"
        "right right right"
        "footer footer footer";
    min-height: 100vh;
    grid-template-columns: 60px minmax(80px, 900px) minmax(50px, 1fr);
    gap: 10px;
    align-content: start;
    width: 100%;
}

.gridContainer:has(.cm_search.hidden) {
    grid-template-areas:
        "header header header"
        "filters filters filters"
        "tabtop tabtop tabtop"
        "content content content"
        "right right right"
        "footer footer footer";
}

/*When has search bar and doesn't have company filter*/
:where(.gridContainer:has(.cm_search-bar-group:not(.hidden)):not(:has(.cm_company))){
    grid-template-columns: 60px minmax(80px, 900px) minmax(50px, 1fr);
}

/*When doesn't have search bar but it has company filter*/
.gridContainer:has(.cm_search-bar-group.hidden):has(.cm_company){
    grid-template-columns: 60px minmax(80px, 500px) minmax(50px, 1fr);
}

/*When doesn't have Search bar nor Company filter*/
.gridContainer:has(.cm_search-bar-group.hidden):not(:has(.cm_company)) {
    grid-template-columns: 60px auto minmax(50px, 1fr);
}

#condensedListEquipment_wrapper {
    display: grid;
    grid-template-columns: minmax(auto, 1000px) auto;
    gap: 12px;
}

#condensedListEquipment_wrapper:has(#assets-graphs.hidden) {
    grid-template-columns: 1fr auto;
}

#condensedListEquipment_wrapper:has(.no-records) {
    align-items: start;
}

#assets-list {
    padding-right: 16px;
    overflow: auto;
}

.gridContainer--OnSites,
.gridContainer--Billings {
    grid-template-areas:
        "header header header"
        "search search filters"
        "tabtop tabtop tabtop"
        "content content ."
        "footer footer footer";
}

.gridContainer--Calendar {
    grid-template-areas:
        "header header header header"
        "search search tabtop tabtop"
        "filters content content right";
    grid-template-columns: 300px 600px 300px auto;
}

.gridContainer > *:not(.cm_filters, .cm_search, .cm_filters--calendar, .cm_main-content--calendar, .right) {
    padding-inline: var(--grid-content-complete-padding) var(--grid-content-padding);
}

.gridContainer .cm_header {
    grid-area: header;
    display: flex;
    align-items: center;
    padding-inline: 32px;
    background-color: var(--clr-primary);
    gap: 8px;
}

.cm_search {
    grid-area: search;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding-inline: var(--grid-content-complete-padding) 0;
}

.cm_search:has(.cm_company.hidden) {
    grid-template-columns: 1fr;
}

.cm_tab-top, .filter {
    grid-area: tabtop;
    padding: 0 var(--grid-content-padding) 0 var(--grid-content-complete-padding);
}

.filter {
    white-space: nowrap;
    /*    margin-left: 60px;*/
    /*    grid-column-start: 1;
    grid-column-end: 5;*/
}

.cm_filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 0 var(--grid-content-padding);
}

.cm_filters, .cm_filters--calendar {
    grid-area: filters;
}

.gridContainer:has(.cm_search.hidden) .cm_filters {
    padding-inline: var(--grid-content-complete-padding) var(--grid-content-padding);
}

.cm_filters--calendar {
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: 300px;
    padding-inline: var(--grid-content-complete-padding) 0;
}

.cm_filters--customers {
    padding-inline: var(--grid-content-complete-padding) var(--grid-content-padding);
}

.gridContainer--Calendar .cm_search-group {
    display: none;
}

.gridContainer--Calendar .cm_search {
    grid-template-columns: unset;
}

.gridContainer--Company,
.gridContainer--Customers:not(:has(#bill-to-customers-list)),
.gridContainer--Vendors,
.gridContainer--Organizations:has(#customers-table-view:not(.hidden)) {
    grid-template-areas:
        "header header header"
        "filters filters filters"
        "tabtop tabtop tabtop"
        "content content content"
        "footer footer footer";
}

:is(.gridContainer--Company, 
    .gridContainer--Customers:not(:has(#bill-to-customers-list)), 
    .gridContainer--Vendors, 
    .gridContainer--Organizations:has(#customers-table-view:not(.hidden))
) .cm_search {
    display: none;
}

.gridContainer--Organizations:has(#customers-table-view:not(.hidden)) .cm_filters {
    padding-inline: var(--grid-content-complete-padding) var(--grid-content-padding)
}

.left {
    grid-area: left;
    margin-left: 0.5rem;
}

.FullArea {
    /* grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 5;*/
    margin-left: 0px;
}

.FullArea .row {
    margin: 0px;
}

main {
    grid-area: content;
    /*overflow-y: auto;*/
    /*width: 100%;*/
    margin-left: 40px;
    /*max-height: 500px;*/
} 

.cm_main-content {
    /*max-width: 1920px;*/
}

.cm_main-content--equipment{
    max-width: 1920px;
}

main .row {
    margin: 0;
}

.right {
    grid-area: right;
}

footer {
    grid-area: footer;
}

#sideNotifications {
    position: sticky;
    top: 0; 
    right: 0;
    display: none;
    width: 350px;
    height: 100dvh;
    padding: 4px;
    border-left: 4px solid var(--clr-primary);
    z-index: 10;
    background-color: #f2f2f2;
}

#divNotificationCenterPV {
    overflow-y: auto;
    max-height: 90dvh;
}

.cm_filters--crm {
    flex-wrap: wrap;
}

@media(max-width:1700px){
    .gridContainer--CRM:has(.cm_calendar-date-pickers-container:not(.hidden)) {
        grid-template-areas:
            "header header header"
            "search search search"
            "filters filters filters"
            "tabtop tabtop tabtop"
            "content content content"
            "right right right"
            "footer footer footer";
        /*grid-template-rows: 100px auto 40px auto auto 40px;*/
    }

    .gridContainer--CRM:has(.cm_calendar-date-pickers-container:not(.hidden)) .cm_filters--crm {
        padding-inline: var(--grid-content-complete-padding) var(--grid-content-padding);
    }

    .gridContainer--CRM:has(.cm_calendar-date-pickers-container:not(.hidden)) .cm_search {
        padding-right: var(--grid-content-padding);
    }
}

@media (width < 1440px) {
    .gridContainer:not(.gridContainer--Calendar){
        grid-template-areas:
            "header header header"
            "search search search"
            "filters filters filters"
            "tabtop tabtop tabtop"
            "content content content"
            "right right right"
            "footer footer footer";
        /*grid-template-rows: 100px auto 40px auto auto 40px;*/
    }

    .gridContainer--Calendar {
        grid-template-areas:
            "header header header header"
            "search search tabtop tabtop"
            "filters content content content"
            "right right right right";
        grid-template-columns: 300px 1fr auto 250px;
    }

    .cm_filters {
        padding-inline: var(--grid-content-complete-padding) var(--grid-content-padding);
        flex-wrap: wrap;
    }


    .cm_search{
        padding-right: var(--grid-content-padding);
    }

    .right {
        width: 100%;
        margin: 0 auto;
        padding-inline: var(--grid-content-padding);
    }
}

@media (max-width: 1100px) {
    .gridContainer--Calendar {
        grid-template-areas:
            "header header header"
            "search search search"
            "tabtop tabtop tabtop"
            "filters filters filters"
            "content content content"
            "right right right";
        grid-template-columns: minmax(200px, 400px) minmax(80px, 900px) minmax(50px, 1fr);
    }

    .cm_tab-top--calendar {
        width: 100%;
        max-width: max-content;
    }

    .cm_scheduler {
        margin-inline: auto;
    }
}

@media (max-width: 1024px) {
    :root {
        --grid-content-complete-padding: 16px;
        --grid-content-left-padding: 16px;
        --grid-content-padding: 16px;
    }
}