/* CSS Document */

:root {
    --col-back: #2E3771;
    --col-fg: #dae5f1;
    --col-highlight: #a9cc7a;
    --col-icons: var(--col-back);
    --font-header: 'Arial', sans-serif;
    --font-main: 'Arial', sans-serif;
}


body {
    font-family: var(--font-main);
    font-size: 100%;

    box-sizing: border-box;

    background-color: var(--col-back);
    display: grid;
    grid-gap: 10pt;
    grid-template-areas:
    "logo header header"
    "menu main main"
    "menu main main"
    "footer footer footer";
    grid-template-columns: auto 1fr;
}

.topblock {
    background-color: var(--col-fg);
    padding: 0.7em;
    border-radius: 0.2em;
    box-shadow:rgba(0, 0, 0, 0.2) 4px 4px;
    border-style: solid;
    border-width: 1px;
    border-color: darkgray;
}

.messages.topblock {
    position: fixed;
    margin: 1em;
    z-index: 2;
    background: var(--col-highlight);
    border-style: solid;
    border-width: 0.2em;
    border-color: black;
}

.messages .error {
    color: darkred;
    text-underline: darkred;
    text-decoration: underline;
}

form .errorlist { /* Django forms validation errors */
    color: darkred;
}

/* styles for django 5.0 form.as_div */
form div {
    padding: 0.5em;
}

form div label {
    font-weight: bold;
}

.main .container {
    padding: 1em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
}

dt {
    font-weight: bold;
    text-decoration: underline;
}

.warning, .alert {
    color: darkred;
}


.important {
    text-decoration: red underline;
}

.big-button {
    font-size: 1.8em;
    padding: 0.4em 0.8em;
    font-family: var(--font-header);
    border-radius: 0.5em;
}

.menu {
    font-family: var(--font-header);
    font-size: 1.5em;
    grid-area: menu;
}



.menu .menu-item :hover {
    background-color: var(--col-highlight);
}

.menu .menu-item a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.menu .menu-item .icon-holder {
    display: inline-block;
    width: 1em;
    color: var(--col-icons);
    font-size: 0.8em;
    text-align: center;
    padding-right: 0.2em;
    padding-left: 0.2em;
}

.menu hr {
    margin-bottom: 0.8em;
    margin-top: 0.8em;
}

.main {
    grid-area: main;
    background-color: var(--col-fg);
}

.event-description {
    border-style: dotted;
    border-radius: 4px;
}

form {
    border-style: solid;
    border-width: 0.1em;
    border-color: lightgray;
    padding: 1em;
}

.tiny-inline-form {
    display: inline;
    border: none;
    padding: 0;
}

form textarea {
    min-width: 10em;
    width: 75%;
}

input:required:invalid {
    border: 1px dashed red;
}

form .form-info {
    font-style: italic;
}

.form-description {
    font-style: italic;
}


thead {
    text-decoration: underline;
}

td {
    padding: 0.5em;
}

.message {
    font-style: italic;
}


.logo {
    grid-area: logo;
}

.logo img {
    display: block;
    margin: auto;
    border-radius: 9999px;
    border-width: 0.2em;
    border-style: solid;
    border-color: var(--col-highlight);

}

.header {
    grid-area: header;
    background-color: var(--col-fg);
    display: flex;
    align-items: center;
    flex-direction: column;
}

.header .title {
    font-family: var(--font-header);
    font-size: 5em;
    display: block;
    margin: auto;
}

.topmenu {
    display: flex;
    width: 100%;
    align-items: center;
    background: var(--col-highlight);
}

.topmenu .greeting {
    font-style: italic;
    flex: 1 1 auto;
    padding: 0.25em;
}

.topmenu .cart {
    flex: 0 1 auto;
    padding-right: 0.25em;
}

.cart a:visited {
    color: black;
}

.cart a {
    text-decoration: none;
}


.topmenu .profile {
    flex: 0 1 auto;
}

.footer {
    grid-area: footer;
    font-style: italic;
    font-size: 0.7em;
}

.menu-toggle {
    display: none;
}

.menu-sub {
    display: block;
}

.breadcrumbs {
    background: var(--col-highlight);
    padding: 0.5em 2em;
}

.condaba-table {
    border-collapse: collapse;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: darkgray;
}

.condaba-table thead tr {
    background-color: LightGreen;
}

.condaba-table tbody tr:nth-of-type(2n) {
    background-color: lightgray;
}

.condaba-table tbody tr:nth-of-type(2n+1) {
    background-color: antiquewhite;
}

tr.action_row {
    background-color: inherit;
    transition: all 1s ease-in;
}

tr.action_row.new_action {
    background-color: #ee90e4 !important;
}


.columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.column {
    flex: 1;
    padding: 1rem;
    min-width: 350px;
}


@media (max-width: 50em) {
    body {
        grid-template-areas:
        "header"
        "menu"
        "main"
        "footer";
        grid-template-columns: none;
    }

    .logo {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    nav:not(.open) .menu-toggle::after {
        content: "▼";
    }

    nav.open .menu-toggle::after {
        content: "▲";
    }


    nav:not(.open) .menu-sub {
        display: none;
    }

    nav.open .menu-sub {
        display: block;
    }

    .header .title {
        font-family: var(--font-header);
        font-size: 3em;
        display: block;
        margin: auto;
    }

}

.no-link-style { /* Prevent links from being default styled */
    color: inherit;
    text-decoration: none;
}


.card-container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    background: linear-gradient(hsl(86, 45%, 70%), hsl(90, 45%, 80%));
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.4) 4px 4px 4px -2px;
    font-weight: 100;
    margin: 48px auto;
    min-width: 20em;
    max-width: 39em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.card h1 a {
    text-decoration: none;
}
.card h2 a {
    text-decoration: none;
}
.card h3 a {
    text-decoration: none;
}
.card h4 a {
    text-decoration: none;
}



.full-width-card {
    min-width: 100%;
}

.small-card {
    flex: 1 1 15em;
    margin: 0.5em;
}

.tight-gap-vertical {
    margin-top: 1em;
    margin-bottom: 1em;
}

.card-body {
    margin: 0 auto;
    width: 80%;
}

.card-summary p {
    color: black;
}

.card-header-image {
    position: relative;
    width: 100%;
    min-height: 15em;
    overflow: hidden;
    max-height: 400px;
    background-position: center center;
    background-repeat: no-repeat;
}

.card-header-image img {
    position: absolute;
    left: 50%;
    top: 50%;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%, -50%);
}

.card-image {
    position: relative;
    max-width: 80%;
}


.tags ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}

.tags li + li {
    margin-left: .5rem;
}

.tags a {
    border-radius: 3px;
    border-style: none;

    background: var(--col-highlight);
    color: black;
    font-size: .75rem;
    text-decoration: none;

    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.2em 1em;
}

.selectedtag {
    background: var(--col-highlight);
}

.checkin-code {
    border-style: solid;
    border-radius: 1em;
    padding: 1em;
    font-size: 1.5em;
    margin: 1em;
    line-height: 200%;
    border-width: 0.1em;
}

/* Styling for shopping cart */
.thumbnail {
    max-width: 6em;
    max-height: 6em;
}

.cart-emoji-image {
    font-size: 3em;
}

.cart-table {
    border-collapse: collapse;
    width: 100%;
}

.cart-td {
    border-bottom: 1px solid black;
}

.cart-tr:hover {
    background-color: var(--col-highlight)
}

.cart-button {
    min-width: 3em;
    max-width: 4em;
}

.inactive {
    color: grey;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.star {
    /* float: right; */
}

.star a {
    font-size: 150%;
}

/* styling for ag-grid */
/* .ag-grid-div-target {
  min-height: 200px;
  max-width: 90%;
} */

/* Styling for scheduler */
.fc-title {
    color: black;
}

.horizontal-scroll-box {
    max-width: calc(100vw - 10rem);
    overflow-x: scroll;
}

@media (max-width: 50em) {
    .horizontal-scroll-box {
        max-width: calc(100vw - 2rem);
    }
}

/* Style for QR-code */
.qrcode > img {
    max-width: 90%;
    min-width: 50%;
}


/************** Modal dialog **************/
#modal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    /* A bit *more* than full screen to fix silly issue when adress bar hides on mobiles  */
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
}

#modal .modal-underlay {
    position: fixed;
    z-index: -1;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
}


#modal-dialog {
    width: 80%;
    max-height: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: scroll;
}

#modal-dialog {
    width: 80%;
    max-height: 80vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#close-modal:hover,
#close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/************** SVG map related **************/

.interestingRoom {
    fill: #a660e6 !important;
    cursor: pointer;
}

.interestingOpenSpace {
    fill: #d1a5f6 !important;
    cursor: pointer;
}

.mapLink {
    fill: #a5f6e0 !important;
    cursor: pointer;
}

.selectedRoom {
    fill: red !important;
}

.inactiveRoom {
    fill: darkgray !important;
}

#mapContainer {
    border: solid black;
}

#mapContainer svg {
    max-width: calc(100% - 2em);
    max-height: 80vh;
    min-height: 50vh;
}

.grayed-out {
    color: grey;
}

/************** Cleaning map related **************/

.cleaning-approved {
    fill: #4CAF50 !important;
    background: #4CAF50;
}
.cleaning-approved.open {
    fill: #7ed681 !important;
    background: #7ed681;
}

.cleaning-ready-for-approval {
    fill: #2196F3 !important;
    background: #2196F3;
}
.cleaning-ready-for-approval.open {
    fill: #6bb7f7 !important;
    background: #6bb7f7;
}

.cleaning-missing-stuff {
    fill: #ad67d6 !important;
    background: #ad67d6;
}
.cleaning-missing-stuff.open {
    fill: #c694e2 !important;
    background: #c694e2;
}

.cleaning-not-cleaned {
    fill: #e18f23 !important;
    background: #e18f23;
}
.cleaning-not-cleaned.open {
    fill: #eab265 !important;
    background: #eab265;
}

.cleaning-not-started {
    fill: #87705f !important;
    background: #87705f;
}
.cleaning-not-started.open {
    fill: #998271 !important;
    background: #998271;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-right: 1em;
    margin-bottom: 0.5em;
}

.legend-color {
    width: 20px;
    height: 20px;
    margin-right: 0.5em;
    border: 1px solid black;
}