@import "./styles.css";

.admin-console-content[content="dispatch"] {
    justify-content: center;
    align-items: center;
    padding: 0.4rem;
    display: grid;
    grid-template-areas:
        "header"
        "frame";
    /* row-gap: 0.2rem; */
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    font-weight: 400;
    font-size: 0.65rem;
}

.admin-dispatch-header {
    grid-area: header;
    /*height: fit-content;*/
    /*padding: 1rem;*/
    display: grid;
    grid-template-areas:
        'call . selector';
    justify-content: center;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    font-size: 0.6rem;
    padding: 0.8rem;
    column-gap: 0.6rem;
    color: var(--grey50);
    background-color: var(--dm3);
    box-shadow: var(--boxShadow);
    border-radius: 6px 6px 0px 0px;
    /* overflow: hidden; */
    min-height: 3rem;
    border-bottom: 1px solid var(--grey900);
}

.admin-dispatch-header-callDiv {
    grid-area: call;
    display: flex;
    justify-content: space-between;
    column-gap: 0.6rem;
    align-items: center;
    position: relative;
    width: fit-content;
    height: fit-content;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    color: var(--grey50);
    box-shadow: var(--boxShadow);
    background-color: var(--indigo500);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-dispatch-header-callDiv::after {
    content: 'assignment';
    font-family: 'material symbols rounded';
    font-size: 1rem;
    font-weight: 400;
}

.admin-dispatch-header-callDiv:hover {
    cursor: pointer;
    color: var(--grey50);
    background-color: transparent;
    box-shadow: none;
}

.admin-dispatch-frame {
    grid-area: frame;
    justify-self: center;
    display: grid;
    grid-template-areas:
        "header header right"
        "left timeline right"
        "footer footer right";
    grid-template-rows: 0fr 1fr 0fr;
    grid-template-columns: auto 1fr auto;
    font-weight: 500;
    width: 100%;
    height: 100%;
    color: var(--grey50);
    background-color: var(--dm3);
    box-shadow: var(--boxShadow);
    border-radius: 0px 0px 6px 6px;
    position: relative;
    overflow: hidden;
}

.admin-dispatch-frame[content="overview"] {}

.admin-dispatch-frame[content="groups"] {
    display: grid;
    grid-template-areas: 'group assign';
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-console-modal-frame[content="dispatch-call-add"] {
    height: fit-content;
    top: 40%;
    width: 40%;
    left: 30%;
}

.admin-dispatch-modal-call-add-text {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    height: 100%;
}

/* groups screen */

.admin-dispatch-groups-assignFrame {
    grid-area: assign;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-dispatch-groups-assignList {
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    height: 100%;
    overflow-x: scroll;
}

.admin-dispatch-groups-assignDiv {
    display: flex;
}

.admin-dispatch-groups-groupFrame {
    grid-area: group;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}


.admin-dispatch-groups-groupList {
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    height: 100%;
    overflow-x: scroll;
}

.admin-dispatch-groups-groupList-groupDiv {
    display: flex;

}