/* TAB */
.tab-target {
    padding: 2rem;

    background: white; 
    border-left: 1px solid rgba(0,0,0,0.125); 
    border-radius: 0 5px 5px 5px;
}

/* TAB DETAILS */
.detail_fields {
    line-height: 1.6;
}

.detail_fields label{
    color: var(--clr-blue-medium);
}


/* util classes */

.title-with-buttons {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: center;
    gap: 1rem;
}









/* Tab area */
.detail-tab {
    background:white;
    box-shadow: 0 -0 3px 0 rgba(0, 0, 0, 0.25); 
    border-radius: 5px;
}

/* Tab body */
.detail-tab-content {
    min-height: 10rem;
    width: 100%;
}





.detail-tab-header ul {
    display: flex;
    list-style: none;
    margin-bottom: 0;
}

.detail-tab-header li {
    padding: 0.5rem 4rem;
    background: var(--clr-blue-light);
    color: var(--clr-blue-dark);
    border-radius: 10px 10px 0 0;
    margin-right: 0.5rem;
    cursor: pointer;
}

.detail-tab-header li:hover {
    background: var(--clr-blue-dark);
    color: var(--clr-blue-light);
}

.detail-tab-header li.active-tab {
    background: white;
    box-shadow: 0 -0 3px 0 rgba(0, 0, 0, 0.25); 
    position: relative;
}

.detail-tab-header li.active-tab::before {
    content: '';
    background: white;
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: -3px;
}


.detail_fields {
    display: grid;
    grid-template-columns: max-content auto;
    grid-column-gap: 1rem;
}


/*  ===========================
    END of DETAIL - TAB CONTROL
    ===========================
*/


.detail-sub-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}

.detail-sub-nav > a {
    background: var(--clr-blue-light);
    color: var(--clr-blue-dark);
    border: none;
    outline: none;
    text-decoration: none;
    border-radius: 100vw;
    padding: 0.5rem 1.5rem;
    box-shadow: 1px 2px 0 0 rgba(0, 0, 0, 0.25);
    text-align: center;
}

.detail-sub-nav > a:hover {
    color: white;
    background: var(--clr-blue-dark);
}

.detail-sub-nav > a:active {
    background: var(--clr-blue-dark);
}

/* UTIL CLASSES */

.grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    align-items: flex-start;
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    align-items: flex-start;
}

.grid-col-span2 {
    grid-column: span 2;
}

.grid-col-span3 {
    grid-column: span 3;
}

/*
.detail-scrn h1,
.detail-scrn h2,
.detail-scrn h3,
.detail-scrn h4,
.detail-scrn h5 {
    color: var(--clr-blue-medium);
}
*/


.btn-primary,
.btn-secondary,
.btn-danger {
    padding: 0.5rem 1.5rem;
    box-shadow: 1px 2px 0 0 rgba(0, 0, 0, 0.25);
}

.btn-primary {
    background: VAR(--clr-blue-light);
    color: var(--clr-blue-dark);
    border: none;
    /* border-radius: 100vw; */
    
}
.btn-primary:hover {
    background: VAR(--clr-blue-dark);
}




.tab_list_item {
    border: 1px solid lightgrey;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.tab_list_item:hover {
    background: var(--clr-blue-dark);
    color: white;
}







.filter-form {
    /* background: var(--clr-blue-medium); */
    background: white; 
    
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125);
}


h1, h2, h3 {
    color: var(--clr-blue-dark);
    
}

.filter-header h2 {
    color: var(--clr-blue-light);
    text-align: center;
}


tr {
    background: white;
}
.tbl-header {
    color: var(--clr-blue-medium);
}
.tbl-item {
    cursor: pointer;
}

.list-search {
    padding: 0 0.25rem;
}

.list-overview {
    background: white; 
    padding: 1rem;
    padding-bottom: 0.5rem;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125); 
}

.btn-outline-primary {
    border-color: var(--clr-blue-medium);
    color: var(--clr-blue-medium);
}