:root {
  --ui-base-color: #f4f4f5;
  --ui-highlight-color: #cccccc;
  --ui-border-color: #d4d4d8;
  /* marker edit handles*/
  --marker-edit-handle-size: 20px;
  --marker-edit-handle-color: white;
  /* marker labels*/
  --marker-label-connection: rgb(0, 255, 0);
  --marker-label-border-damage: rgb(255, 0, 0);
  --marker-label-surface-damage: rgb(255, 255, 0);
  --marker-label-surface-damage-contrast: rgb(153, 153, 10);
  --marker-label-unknown: rgb(127, 127, 255);
  --marker-label-abrasive-wear: rgb(255, 165, 0);
  --marker-label-connection-soft: rgb(180, 255, 180);
  --marker-label-border-damage-soft: rgb(255, 180, 180);
  --marker-label-surface-damage-soft: rgb(255, 255, 180);
  --marker-label-unknown-soft: rgb(210, 210, 255);
  --marker-label-abrasive-wear-soft: rgb(255, 220, 170);
  /* for mobile */
}

* {
    padding: 0;
    margin: 0;
}

.menu-item {
    list-style-type: none;
}

html {
    height: 100dvh;
    overflow: hidden;
    font-family: Helvetica, sans-serif;
}

body {
    display: grid;
    height: 100dvh;
    overflow: hidden;
    grid-template-columns: 240px 1fr 6px var(--heatmap-width, 200px) 6px var(--sidebar-right-width, 500px);
    grid-template-rows: 3rem calc(100dvh - 3rem);
    grid-template-areas: "header header header header header header" "sidebar-left main minimap_gutter minimap sidebar_gutter sidebar-right";
    gap: 1px;
    touch-action: none;
    background: var(--ui-base-color);
}

/* not sure if this is best, but prevent UI from being messed up when dragging things */
img {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

a {
    color: black;
}

#menu-bar {
    display: flex;
    font-size: 1.3rem;
    box-sizing: border-box;
    font-family: sans-serif;
    grid-area: header;
    border-bottom: 1px solid var(--ui-border-color);
}

#sidebar-left {
    grid-area: sidebar-left;
    background: #fafafa;
    overflow-y: auto;
}
#sidebar-left > div:nth-child(3) {
    display: none;
}

#sidebar-right {
    grid-area: sidebar-right;
    display: flex;
    flex-direction: column;
}

#main_content {
    display: grid;
    grid-area: main;
    position: relative;
    overflow: hidden;
}
#minimap {
    position: relative;
    grid-area: minimap;
    cursor: crosshair;
}
#minimap_img {
    width: 100%;
    height: var(--h, 100%);
    transform:translateY(var(--ty, 0%));
    pointer-events: none;
    filter: url(#heatmap_colorization);
}
#minimap_gutter, #sidebar_gutter {
    cursor: col-resize;
    background: #ccc radial-gradient(circle, #aaa 1px, transparent 2px) center / 6px 8px;
}
#minimap_gutter {
    grid-area: minimap_gutter;
}
#sidebar_gutter {
    grid-area: sidebar_gutter;
}
#minimap_cursor {
    position: absolute;
    pointer-events: none;
    width: calc(100% + 20px);
    height: 3px;
    background: transparent;
    top: calc(0% - 1.5px);
    right: 0;
    backdrop-filter: invert(1);
}

#minimap_cursor_label {
    color: purple;
    position: absolute;
    left: -5rem;
    text-align: right;
    width: 5rem;
    top: -0.5rem;
}

#minimap_cursor_ghost {
    position: absolute;
    pointer-events: none;
    width: calc(100% + 20px);
    height: 1px;
    background: yellow;
    top: calc(0% - 0.5px);
    right: 0;
}

#minimap_cursor_ghost_label {
    position: absolute;
    left: -5rem;
    text-align: right;
    width: 5rem;
    top: -0.5rem;
    font-size: 0.65rem;
}

.menu-list {
    display: flex;
    align-items: center;
    list-style-type: none;
}
.menu-item {
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    user-select: none;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid transparent;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 10;
    min-width: 300px;
    background: var(--ui-base-color);
    line-height: 2.5rem;
    box-shadow: #888888 0px 4px 4px 0px;
    border: 1px solid black;
}

.menu-dropdown > li {
    border: 1px solid transparent;
    padding: 5px;
}

/* make the whole menu item clickable, not just the link text */
.menu-dropdown > li > a {
    display: block;
    margin: -5px;
    padding: 5px;
}

.menu-item[disabled] {
    color: #808080;
    pointer-events:  none;
}

.menu-item:hover:not([disabled]), .menu-item.open {
    background: var(--ui-highlight-color);
    border: 1px solid black;
}

.menu-item.open .menu-dropdown {
    display: block;
}

.menu-dropdown > li:hover:not([disabled]) {
    background: var(--ui-highlight-color);
    border: 1px solid black;
}

.menu-dropdown *[disabled], .menu-dropdown *[disabled] a {
    color: #808080;
    pointer-events:  none;
}

/* dialogs carry their padding on an inner wrapper (see classification_dialog),
   so backdrop clicks are detectable as event.target === dialog */
dialog {
    background: var(--ui-base-color);
    border: 1px solid black;
    box-shadow: #888888 0px 4px 4px 0px;
    padding: 0;
    margin: auto;  /* restore centering, killed by the global margin reset */
    overflow-y: auto;  /* browsers cap dialogs to the viewport; keep clipped content reachable */
}
.rejected-marker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

dialog::backdrop {
    background: rgb(0 0 0 / 0.25);
}
dialog button {
    cursor: pointer;
    background: none;
    font-size: 1rem;
    padding: 5px 10px;
    border: 1px solid transparent;
}
dialog button:hover {
    background: var(--ui-highlight-color);
    border: 1px solid black;
}

/* File > Recording Parameters */
.recording-parameters h5 { margin: 1rem 0 0.25rem; }
.recording-parameters table { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
.recording-parameters td, .recording-parameters th { padding: 2px 6px; border-bottom: 1px solid #ccc; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.recording-parameters td:first-child { color: #555; width: 35%; }
.recording-parameters .note { font-size: 0.8rem; color: #555; margin: 0.25rem 0; }
.recording-parameters details { margin-top: 1rem; }
.recording-parameters summary { cursor: pointer; font-weight: bold; }
#camera_angle_grid { position: relative; margin-top: 0.5rem; overflow: hidden; }
#camera_angle_grid img { width: 100%; display: block; }
#camera_angle_grid svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #ffd400; filter: drop-shadow(0 0 1px black); }
#camera_angle_grid svg text { fill: #ffd400; stroke: none; }

.tile-img {
    width: 100%;
    height: auto;
    background: #cccbaf;
}
.heatmap-img {
    width: 100%;
    height: auto;
    filter: url(#heatmap_colorization);
    background: #cccbaf;
}

.tile-img.invisible, .heatmap-img.invisible {
    visibility: hidden;
}

#heatmap_list, #tile_list, #belt {
    width: 100%;
}

#belt {
    position: relative;
}
.tick {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    box-sizing: border-box;
}

#marker_list, #meter_ticks {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.marker {
    position: absolute;
    border-width: 2px;
    border-style: dashed;
    background-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.marker.connection, .marker.seam {
    border-color: var(--marker-label-connection);
}
.marker.border-damage {
    border-color: var(--marker-label-border-damage);
}
.marker.surface-damage, .marker.damage {
    border-color: var(--marker-label-surface-damage);
}
.marker.unknown {
    border-color: var(--marker-label-unknown);
}
.marker.abrasive-wear {
    border-color: var(--marker-label-abrasive-wear);
}

.marker:hover {
    border-width: 3px;
}

.marker.selected {
    border-width: 4px;
    border-style: solid;
}

#preview_video {
    display: block;
    width: 100%;
    max-height: 50vh;
}

#preview_canvas, #fullframe_canvas, #minimap_markers {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

kbd {
    display: inline-block;
    padding: 0.2em 0.5em;
    margin: 0 0.2em;

    background-color: #333333;
    color: #f7f7f7;
    border: 1px solid #222;
    box-shadow: 0 2px 0 #111111, 0 3px 0 rgba(0, 0, 0, 0.3);
    border-radius: 4px;

    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
    user-select: none;
}

.nav-arrow {
    position: absolute;
    bottom: 0;
    padding: 0.3rem 0.5rem;
    color: orange;
    font-weight: bold;
    font-size: 2rem;
    font-family: arial;
    user-select: none;
    cursor: pointer;
}
.nav-arrow:hover {
  background: #ffa50033;
}

#enlarge_video {
    position: absolute;
    top: 30%;
    right: 30%;
    bottom: 30%;
    left: 30%;
}
#enlarge_video > div {
    color: white;
    font-weight: bold;
    font-size: 5vh;
    border-radius: 2rem;
    border: 0.2rem solid rgba(255, 255, 255, 0.3);
    visibility: hidden;
    opacity: 0;
    background: rgba(128, 128, 128, 0.5);
    width: 100%;
    height: 100%;
    align-content: center;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#enlarge_video:hover > div {
    visibility: visible;
    opacity: 1;
}
#hide_preview {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
}

/* ================================================================= */
/* Marker editing */
/* ================================================================= */

#marker_edit_area {
    position: absolute;
    inset: 0 0 0 0;
    pointer-events: none;
}
#marker_edit_area.saving {
    pointer-events: auto;
    cursor: wait;
}

#marker_edit_handle {
    position: absolute;
    display: none;
    pointer-events: none;
    border: 1px dotted transparent;
    justify-content: center;
    align-items: start;
    transition: background-color 0.1s ease;
}

#marker_edit_handle .tools {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 5px;
    margin-top: -40px;
}
#marker_edit_handle .tools div {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    opacity: 0.5;
    cursor: pointer;
    background-color: white;
    transition: opacity 0.1s ease;
}

#marker_edit_handle .tools div:first-child {
    background-color: lightcoral;
}

#marker_edit_handle .tools div:hover {
    opacity: 1;
}
#marker_edit_area.saving #marker_edit_handle {
    background-color: #ffffff99;
    pointer-events: none;
}

#marker_edit_area.saving #marker_edit_handle > div {
    pointer-events: none;
}

#marker_edit_handle > div.handle {
    border: 1px solid var(--marker-edit-handle-color);
    border-radius: 9999px;
    width: var(--marker-edit-handle-size);
    height: var(--marker-edit-handle-size);
    position: absolute;
    pointer-events: all;
    box-sizing: border-box;
    transition: border-width 0.1s ease;
}
#marker_edit_handle > div.handle:hover {
    border-width: 2px;
}
#marker_edit_handle.dragging {
    border-color: white;
}

#marker_edit_handle .top-left {
    cursor: nw-resize;
    top: calc(var(--marker-edit-handle-size) / -2);
    left: calc(var(--marker-edit-handle-size) / -2);
}
#marker_edit_handle .top-right {
    cursor: ne-resize;
    top: calc(var(--marker-edit-handle-size) / -2);
    right: calc(var(--marker-edit-handle-size) / -2);
}
#marker_edit_handle .bottom-right {
    cursor: se-resize;
    bottom: calc(var(--marker-edit-handle-size) / -2);
    right: calc(var(--marker-edit-handle-size) / -2);
}
#marker_edit_handle .bottom-left {
    cursor: sw-resize;
    bottom: calc(var(--marker-edit-handle-size) / -2);
    left: calc(var(--marker-edit-handle-size) / -2);
}


/* ================================================================= */
/* Notifications */
/* ================================================================= */

#notification_list {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    max-width: 30rem;
    font-family: sans-serif;
    align-items: flex-end;
    gap: 4px;
}

.notification {
    background: white;
    color:#333333;
    border: 1px solid lightgray;
    display: flex;
    opacity: 0.9;
    width: 100%;
}

.notification > div:first-child {
    padding: 1rem;
    max-width: 25rem;
}

.notification > div:last-child {
    padding: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    user-select: none;
}

.notification > div:last-child:hover {
    background: rgba(255, 255, 255, 0.5);
}

.notification.success {
    background: lightgreen;
    border-color: green;
    color: darkgreen;
}

.notification.error {
    background: lightpink;
    border-color: red;
    color: darkred;
}

.notification.warning {
    background: lightyellow;
    border-color: yellow;
    color: sandybrown
}


#add_marker_floating {
    display: none;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid black;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    position: relative;
    transition: background-color 0.1s ease;
    user-select: none;
}

#add_marker_floating > ul {
    position: absolute;
    top: 0;
    left: 1rem;
    display: none;
    flex-direction: column;
    padding-left: 1rem;
    gap: 2px;
    width: 10rem;
    list-style-type: none;
}
#add_marker_floating.active > ul {
    display: flex;
}
#add_marker_floating > ul > li,
#add_marker_sidebar > ul > li
{
    height: 2rem;
    border-radius: 9999px;
    background-color: white;
    border: 1px solid black;
    align-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
    transition: background-color 0.1s ease;
    filter: saturate(0.8);
}

#add_marker_floating > ul > li.connection, #add_marker_sidebar > ul > li.connection {
    border-color: var(--marker-label-connection);
}
#add_marker_floating > ul > li.border-damage, #add_marker_sidebar > ul > li.border-damage {
    border-color: var(--marker-label-border-damage);
}
#add_marker_floating > ul > li.surface-damage, #add_marker_sidebar > ul > li.surface-damage {
    border-color: var(--marker-label-surface-damage);
}
#add_marker_floating > ul > li.unknown, #add_marker_sidebar > ul > li.unknown {
    border-color: var(--marker-label-unknown);
}

/* Training markers */
#add_marker_floating > ul > li.seam, #add_marker_sidebar > ul > li.seam {
    border-color: var(--marker-label-connection);
}
#add_marker_floating > ul > li.damage, #add_marker_sidebar > ul > li.damage {
    border-color: var(--marker-label-surface-damage);
}

#add_marker_floating > ul > li.connection:hover,
#add_marker_floating > ul > li.connection.selected,
#add_marker_sidebar > ul > li.connection:hover,
#add_marker_sidebar > ul > li.connection.selected
{
    background-color: var(--marker-label-connection-soft);
}
#add_marker_floating > ul > li.border-damage:hover,
#add_marker_floating > ul > li.border-damage.selected,
#add_marker_sidebar > ul > li.border-damage:hover,
#add_marker_sidebar > ul > li.border-damage.selected
{
    background-color: var(--marker-label-border-damage-soft);
}
#add_marker_floating > ul > li.surface-damage:hover,
#add_marker_floating > ul > li.surface-damage.selected,
#add_marker_sidebar > ul > li.surface-damage:hover,
#add_marker_sidebar > ul > li.surface-damage.selected
{
    background-color: var(--marker-label-surface-damage-soft);
}
#add_marker_floating > ul > li.unknown:hover,
#add_marker_floating > ul > li.unknown.selected,
#add_marker_sidebar > ul > li.unknown:hover,
#add_marker_sidebar > ul > li.unknown.selected
{
    background-color: var(--marker-label-unknown-soft);
}

#crop_overlay_top, #crop_overlay_bottom {
    left: 0;
    right: 0;
    height: 0;
    background: var(--ui-base-color);
    position: absolute;
}
#crop_overlay_top {
    top: 0;
}
#crop_overlay_bottom {
    bottom: 0;
}

.marker-detail {
    border: 1px solid transparent;
}
.marker-detail.connection summary { background-color: var(--marker-label-connection-soft); }
.marker-detail.border-damage summary { background-color: var(--marker-label-border-damage-soft); }
.marker-detail.surface-damage summary { background-color: var(--marker-label-surface-damage-soft); }
.marker-detail.unknown summary { background-color: var(--marker-label-unknown-soft); }
.marker-detail.abrasive-wear summary { background-color: var(--marker-label-abrasive-wear-soft); }

.marker-detail.connection:hover { border-color: var(--marker-label-connection); }
.marker-detail.border-damage:hover { border-color: var(--marker-label-border-damage); }
.marker-detail.surface-damage:hover { border-color: var(--marker-label-surface-damage-contrast); }
.marker-detail.unknown:hover { border-color: var(--marker-label-unknown); }

.marker-detail.selected summary { font-weight: bold; }

.marker-detail summary {
    user-select: none;
    cursor: pointer;
    padding-top: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.marker-detail summary button {
    cursor: pointer;
    background: none;
    padding: 5px;
    border: 1px solid transparent;
}
.marker-detail summary button:hover {
    border: 1px solid black;
}
.marker-detail table {
    padding-left: 1rem;
    border-collapse: collapse;
    margin: 0.25rem;
}
.marker-detail table td {
    border: 1px solid black;
    padding: 0.25rem;
}

/* marker detail list filter: one wrapping row of clickable pills, the checkbox inside each label is hidden */
#marker_detail_list_filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0.25rem;
    font-family: sans-serif;
    font-size: 0.7rem;
}
#marker_detail_list_filter_label, #marker_detail_list_filter_type {
    display: contents;
    list-style-type: none;
}
#marker_detail_list_filter_separator {
    width: 1px;
    height: 18px;
    background: var(--ui-border-color);
    margin: 0 4px;
}
#marker_detail_list_filter label {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 3px 9px;
    border: 1px solid #bbbbbb;
    border-radius: 9999px;
    background: white;
    cursor: pointer;
    user-select: none;
    filter: saturate(0.8);
    transition: background-color 0.1s ease;
}
#marker_detail_list_filter label:hover {
    filter: saturate(0.8) brightness(0.95);
}
#marker_detail_list_filter input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
#marker_detail_list_filter .marker_count {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 9999px;
    padding: 0 5px;
}
#marker_detail_list_filter label:not(:has(:checked)) {
    color: #888888;
}
#marker_detail_list_filter_type label:has(:checked) {
    background: #333333;
    border-color: #333333;
    color: white;
}
#marker_detail_list_filter_type label:not(:has(:checked)) {
    border-style: dashed;
}
#marker_detail_list_filter_label li.connection label:has(:checked),
#marker_detail_list_filter_label li.seam label:has(:checked) {
    border-color: var(--marker-label-connection);
    background: var(--marker-label-connection-soft);
}
#marker_detail_list_filter_label li.border-damage label:has(:checked) {
    border-color: var(--marker-label-border-damage);
    background: var(--marker-label-border-damage-soft);
}
#marker_detail_list_filter_label li.surface-damage label:has(:checked),
#marker_detail_list_filter_label li.damage label:has(:checked) {
    border-color: var(--marker-label-surface-damage);
    background: var(--marker-label-surface-damage-soft);
}
#marker_detail_list_filter_label li.unknown label:has(:checked) {
    border-color: var(--marker-label-unknown);
    background: var(--marker-label-unknown-soft);
}
#marker_detail_list_filter_label li.abrasive-wear label:has(:checked) {
    border-color: var(--marker-label-abrasive-wear);
    background: var(--marker-label-abrasive-wear-soft);
}
#marker_detail_list_filter_label li.background label:has(:checked) {
    border-color: #888888;
    background: var(--ui-highlight-color);
}

/* ================================================================= */
/* Mobile layout */
/* ================================================================= */
@media screen and (max-width: 768px) {

    body {
        grid-template-columns: 1fr 20vw;
        grid-template-rows: 1.6rem 1.2rem 1fr var(--preview-video-height);
        grid-template-areas: "header header" "sidebar-left sidebar-left" "main minimap" "sidebar-right sidebar-right";
    }

    #sidebar-left > div {
        display: none;
    }
    #sidebar-left > div:nth-child(3) {
        display: flex;
        justify-content: space-between;
    }
    #sidebar-right > div:nth-child(2) {
        display: none;
    }
    #minimap_gutter, #sidebar_gutter {
        display: none;
    }
    #enlarge_video {
        display: none;
    }

    #hide_preview {
        display: block;
    }
    #menu-bar {
        font-size: 0.8rem;
    }

    #add_marker_floating {
        display: flex;
    }
}