/*-- ================================================ --->
<---                COLORS & CONSTANTS                --->
<--- ================================================ --*/
/*#region CONSTANTS */
/* Rather than have different colored markers, just transform a single black marker into any color I want */
.visited-low {
    color: #A8C95B;
    /* background: #A8C95B; */
    filter: invert(90%) sepia(66%) saturate(511%) hue-rotate(18deg) brightness(88%) contrast(76%)
        drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
}
.visited-medium {
    color: #69984E;
    /* background: #69984E; */
    filter: invert(51%) sepia(56%) saturate(363%) hue-rotate(54deg) brightness(95%) contrast(86%)
        drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
}
.visited-high {
    color: #135E26;
    /* background: #135E26; */
    filter: invert(26%) sepia(15%) saturate(2489%) hue-rotate(83deg) brightness(98%) contrast(88%)
        drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
}

.unvisited-low {
    color: #92CAF9;
    /* background: #92CAF9; */
    filter: invert(71%) sepia(57%) saturate(490%) hue-rotate(180deg) brightness(102%) contrast(95%)
        drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
}
.unvisited-medium {
    color: #2196F2;
    /* background: #2196F2; */
    filter: invert(46%) sepia(66%) saturate(2186%) hue-rotate(184deg) brightness(99%) contrast(92%)
        drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
        
}
.unvisited-high {
    color: #1668BF;
    /* background: #1668BF; */
    filter: invert(31%) sepia(84%) saturate(1094%) hue-rotate(186deg) brightness(91%) contrast(98%)
        drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
}

.highlight {
    filter: invert(97%) sepia(14%) saturate(4954%) hue-rotate(341deg) brightness(109%) contrast(97%)
        drop-shadow(1px 0 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
}

/* Misc classes for JS */
.error-red-text::placeholder {
    color: red;
}
.error-red-text {
    border-color: red !important;
    color: red !important;
}

.blob-cursor:hover {
    cursor: url('../images/spots_20.png'), pointer !important;
}

ul {
    margin: 0;
}

button:disabled {
    border: inset;
}

#sheet-overlay {
    display: flex;
}
.column {
    width: 50%;
    height: 100%;
    flex: 1;
    padding: 1% 0.5%;
}
.embedded-window {
    margin-bottom: 1.5%;
}
/*#endregion CONSTANTS */


/*-- ================================================ --->
<---                     MAP PANEL                    --->
<--- ================================================ --*/
/*#region MAP_PANEL */
#map-window {
    height: 80%;
}

#map {
    margin: 10px;
    height: calc(78% + 1px);
    border: inset;

    border-top: 3px solid #808080;
    border-left: 3px solid #808080;
    border-right: 3px solid #d0d0d0;
    border-bottom: 3px solid #d0d0d0;
}
/*#endregion MAP_PANEL */


/*-- ================================================ --->
<---                     LIST PANEL                   --->
<--- ================================================ --*/
/*#region LIST_PANEL */
#list-window {
    height: 70%;

    display: flex;
    flex-direction: column;
}

.scroll-and-content {
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    position: relative;
}

#restaurant-scroll-container {
    flex: 1;
    overflow-y: scroll;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
#restaurant-scroll-container::-webkit-scrollbar {
    display: none;
}
/*#endregion LIST_PANEL */


/*-- ================================================ --->
<---                 RESTAURANT TABLE                 --->
<--- ================================================ --*/
/*#region RESTAURANT_TABLE */
#restaurant-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Table header */
#restaurant-table-header {
    position: sticky;
    z-index: 2;
    top: -1px ;
    background-color: #d5d3c6;
    white-space: nowrap;
}
#restaurant-table-header button { /* TODO: replace with excel button*/
    font-size: 10pt;
    padding: 0;
}

/* Table body */
#restaurant-table td, table th {
    padding: 5px;
    height: 2.5rem;

    font-size: 12pt;
    font-weight: normal;

    border-bottom: 1px solid black;
}

.name,
.cuisine {
    text-align: left;
}

.visited {
    text-align: center;
}
.shown input {
    margin-left: auto;
    margin-right: auto;
}
/*#endregion RESTAURANT_TABLE */


/*-- ================================================ --->
<---                   FILTER PANEL                   --->
<--- ================================================ --*/
/*#region FILTER_PANEL */
#filter-window {
    width: 100%;
    height: 32%;
    height: fit-content;
}

#filter-container {
    box-sizing: border-box;
}

.filter-header {
    font-size: 12pt;
}

.filter-subheader {
    font-size: 10pt;
}
/*#endregion FILTER_PANEL */


/*-- ================================================ --->
<---                  DISTANCE FILTER                 --->
<--- ================================================ --*/
/*#region DISTANCE_FILTER */
#distance-filter {
    margin: 5px;
    padding: 10px;
    border: inset;
}

#distance-filter input {
    padding: 3px;
    border: inset;
    width: 175px;
}

#distance-filter button {
    padding: 3px;
    border: outset;
    background-color: #B9B6BB;
}
#distance-filter button:active,
#distance-filter button:disabled,
#distance-filter .active  {
    border: inset;
}

#distance-info {
    margin-top: 5px;
    color: gray;
    font-size: 10pt;
    vertical-align: top;
}
/*#endregion DISTANCE_FILTER */


/*-- ================================================ --->
<---                  ATTRIBUTE FILTER                --->
<--- ================================================ --*/
/*#region ATTRIBUTE_FILTER */
#attributes-container {
    margin: 5px;
    padding: 10px;
    border: inset;
}

#filter-menus {
    display: grid;
    grid-template-areas: "visited cuisine rating";
    grid-template-columns: auto auto auto;
    gap: 0.25rem;
    
    margin-top: 0.5rem;
    font-size: 10.5pt;
}

#visited-filter {
    grid-area: visited;
    min-width: 0;
}
#cuisine-filter {
    grid-area: cuisine;
    min-width: 0;
}
#cuisine-scroll-container {
    flex: 1;
    overflow-y: scroll;
    position: relative;
    max-height: 200px;
}
#cuisine-scroll-container::-webkit-scrollbar {
    display: none;
}
#rating-filter {
    grid-area: rating;
    min-width: 0;
}

.multi-option-header {
    font-weight: bold;
    background-color: #bfbeb4;

    position: sticky;
    top: 0;
    z-index: 10;
}
.multi-select {
    border: outset;
    background-color: #d5d3c6;
    flex: 1 1 auto;
    min-width: min-content;
}
.multi-option {
    background-color: #d5d3c6;
}
.multi-option label {
    display:flex;
    gap: 5px;
    margin-left: 5px;
    margin-bottom: 2px;
}
.multi-any {
    padding-bottom: 2px;
    border-bottom: 2px solid #aaa9a2;
    margin-bottom: 1px;
}
/*#endregion ATTRIBUTE_FILTER */


/*-- ================================================ --->
<---                  RANDOM SELECTION                --->
<--- ================================================ --*/
/*#region RANDOM_SELECTION */
#random-container {
    display: flex;
    justify-content: center;
    gap: 5px;
}
#random-container button {
    padding: 3px;
    border: outset;
    background-color: #B9B6BB;
}
#random-container button:active,
#random-container button:disabled,
#random-container .active {
    border: inset;
}

#random-container input {
    text-align: center;
    border: inset;
}

#random-selection {
    width: 200px;
}
#random-cuisine {
    width: 150px;
}

#random-container input:focus {
    outline-width: 0;
}
/*#endregion RANDOM_SELECTION */


/*-- ================================================ --->
<---                  SHARE SELECTIONS                --->
<--- ================================================ --*/
/*#region SHARE_SELECTIONS */
#share-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: 10px;
}
#share-button {
    padding: 3px;
    border: outset;
    background-color: #B9B6BB;
}
#share-button:active {
    border: inset;
}

#share-subheader {
    margin-top: 5px;
    color: gray;
    font-size: 10pt;
    vertical-align: top;
}
/*#endregion SHARE_SELECTIONS */



/*-- ================================================ --->
<---                  CONTENT WINDOWS                 --->
<--- ================================================ --*/
/*#region CONTENT_WINDOWS */
#favorites-window {
    min-width: 35%;
    flex: 1;
    height: fit-content;
}
#favorites-window .window-container {
    margin: 10px;
}

#guide-window {
    width: 100%;
    height: fit-content;
}
/*#endregion CONTENT_WINDOWS */


/*-- ================================================ --->
<---           MEDIA QUERIES / RESPONSIVENES          --->
<--- ================================================ --*/
/*#region MEDIA */
@media (max-width: 1365px) {
    .visited {
        display: none;
    }
    #map {
        margin-bottom: 4px;
    }
    #random-container {
        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        row-gap: 4px;
    }
    #share-container {
        margin-top: 4px;
    }
    .break {
        width: 100%;
    } 
}
@media (max-width: 1100px) { /* Switch to single column */
    #sheet-overlay {
        display: block;
    }
    .column {
        width: 98%;
        margin: 0.5% 1%;
        height: auto;
    }
    #map {
        height: 450px;
    }
    #list-window {
        height: 555px;
    }
    .visited {
        display: table-cell;
    }
}
@media (max-width: 545px) { /* shrink sheet headers */
    .column {
        margin: -0.5% -1.5%;
        width: 99.5%;
    }
    .visited {
        display: none;
    }
}
@media (max-width: 410px) {
    #cuisine-vertical-scrollbar {
        display: none;
    }
}

@media (max-width: 370px) {
    #filter-menus {
        gap: 0;
    }
    #visited-filter,
    #rating-filter,
    #cuisine-filter {
        word-break: break-all;
    }
    .multi-option label {
        gap: 1px;
        margin-left: 1px;
    }
    .multi-option input {
        width: 12px;
        height: 12px;
    }
}
/*#endregion MEDIA */