/* ============================================================
   Dashboard Global Styles
   ============================================================ */

:root {

    --bg-color: #121212;

    --panel-color: #1e1e1e;

    --panel-light: #2a2a2a;

    --border-color: #3a3a3a;

    --text-color: #e6e6e6;

    --text-muted: #aaaaaa;

    --accent-color: #4da3ff;

    --accent-hover: #76b9ff;

    --thumbnail-size: 115px;

    /*
       Wider than before.
    */
    --sidebar-width: 360px;

    --radius: 8px;

}


/* ============================================================
   Base
   ============================================================ */

* {

    box-sizing: border-box;

}


body {

    margin: 0;

    height: 100vh;

    overflow: hidden;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background:
        var(--bg-color);

    color:
        var(--text-color);

}


/* ============================================================
   Dashboard
   ============================================================ */

.dashboard {

    display: flex;

    width: 100%;

    height: 100vh;

}


/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {

    width:
        var(--sidebar-width);

    min-width:
        var(--sidebar-width);

    height: 100%;

    background:
        var(--panel-color);

    border-right:
        1px solid var(--border-color);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


.sidebar-header {

    padding:
        1rem 1.25rem;

    border-bottom:
        1px solid var(--border-color);

    font-size:
        1.2rem;

    font-weight:
        600;

}


.sidebar-content {

    flex: 1;

    overflow-y: auto;

    /*
       Extra horizontal whitespace.
    */
    padding:
        1rem 1.5rem 2rem 1.5rem;

}


.sidebar-content hr {

    border: none;

    border-top:
        1px solid var(--border-color);

    margin:
        1.25rem 0;

}


/* ============================================================
   Main Content
   ============================================================ */

.main-content {

    flex: 1;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}


/* ============================================================
   Tabs
   ============================================================ */

.tabs {

    display: flex;

    background:
        var(--panel-color);

    border-bottom:
        1px solid var(--border-color);

}


.tab-button {

    padding:
        0.8rem 1.4rem;

    cursor: pointer;

    background:
        transparent;

    border: none;

    color:
        var(--text-muted);

    font-size:
        0.95rem;

}


.tab-button:hover {

    color:
        var(--text-color);

    background:
        var(--panel-light);

}


.tab-button.active {

    color:
        var(--accent-color);

    border-bottom:
        2px solid var(--accent-color);

}


/* ============================================================
   Tab Panels
   ============================================================ */

.tab-panel {

    flex: 1;

    display: none;

    overflow: hidden;

}


.tab-panel.active {

    display: flex;

}


/* ============================================================
   Main Image
   ============================================================ */

.image-viewer {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        1rem;

}


.image-viewer img {

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

    border-radius:
        var(--radius);

}


/* ============================================================
   Case Buttons
   ============================================================ */

.case-button {

    width: max-content;

    min-width: 100%;

    margin-bottom:
        0.45rem;

    text-align: left;

    overflow: visible;

    text-overflow: clip;

    white-space: nowrap;

}


/*
   Case names can be very long. Rather than
   truncating them, let the container scroll
   horizontally so the full name stays readable.
*/
#case-container {

    overflow-x: auto;

    overflow-y: hidden;

}


.case-button.selected {

    border-color:
        var(--accent-color);

    color:
        var(--accent-color);

    background:
        var(--panel-light);

}


/* ============================================================
   Thumbnail Grid
   ============================================================ */

.thumbnail-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                var(--thumbnail-size),
                1fr
            )
        );

    gap:
        1.25rem 1rem;

    /*
       Extra whitespace around the grid.
    */
    padding:
        0.5rem 0.5rem 1rem 0.5rem;

}


.thumbnail-wrapper {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap:
        0.45rem;

}


.thumbnail {

    width:
        var(--thumbnail-size);

    height:
        var(--thumbnail-size);

    object-fit:
        cover;

    cursor:
        pointer;

    border-radius:
        var(--radius);

    border:
        2px solid transparent;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease;

}


.thumbnail:hover {

    transform:
        scale(1.05);

}


.thumbnail.selected {

    border-color:
        var(--accent-color);

}


.thumbnail-label {

    width: 100%;

    min-height:
        2.3em;

    text-align:
        center;

    font-size:
        0.75rem;

    line-height:
        1.15;

    color:
        var(--text-color);

    overflow-wrap:
        anywhere;

}


/* ============================================================
   Slider / Mosaic Checkboxes
   ============================================================ */

.image-selection-controls {

    display: flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        0.45rem;

    width: 100%;

    font-size:
        0.72rem;

    color:
        var(--text-muted);

}


.image-selection-controls label {

    display: flex;

    align-items: center;

    cursor:
        pointer;

    white-space:
        nowrap;

}


.image-selection-controls input {

    margin:
        0 0.2rem 0 0;

    cursor:
        pointer;

}


/* ============================================================
   Slider
   ============================================================ */

.case-panel {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding:
        1rem;

    min-height: 0;

}


.slider-container {

    flex: 1;

    display: flex;

    flex-direction: column;

    min-height: 0;

    padding:
        0.5rem;

}


.slider-controls {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        0.75rem;

    margin-bottom:
        1rem;

}


.slider-controls label {

    display: flex;

    align-items: center;

    gap:
        0.4rem;

}


.slider-controls select {

    max-width:
        500px;

    background:
        var(--panel-light);

    border:
        1px solid var(--border-color);

    color:
        var(--text-color);

    padding:
        0.45rem 0.6rem;

    border-radius:
        var(--radius);

    font-family:
        inherit;

}


.slider-viewer {

    flex: 1;

    min-height: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    background:
        var(--bg-color);

    border-radius:
        var(--radius);

}


.slider-viewer img {

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

    border-radius:
        var(--radius);

}


/* ============================================================
   Mosaic Container
   ============================================================ */

.mosaic-container {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding:
        1rem;

    overflow: hidden;

}


.mosaic-controls {

    flex-shrink: 0;

    margin-bottom:
        1rem;

    padding:
        0.75rem;

    background:
        var(--panel-color);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius);

}


.mosaic-controls-header {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        1rem;

    margin-bottom:
        0.75rem;

}


.mosaic-controls-header h3 {

    margin:
        0;

}


/* ============================================================
   Mosaic Image Selector
   ============================================================ */

/*
   Six columns maximum.

   If there are more than six images,
   they automatically wrap onto another row.
*/

.mosaic-image-selector {

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(
                140px,
                1fr
            )
        );

    gap:
        0.5rem 0.75rem;

    max-height:
        180px;

    overflow-y:
        auto;

}


.mosaic-image-option {

    display: flex;

    align-items: flex-start;

    gap:
        0.45rem;

    padding:
        0.5rem;

    background:
        var(--panel-light);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius);

    cursor:
        pointer;

    font-size:
        0.78rem;

    line-height:
        1.2;

}


.mosaic-image-option:hover {

    border-color:
        var(--accent-color);

}


.mosaic-image-option input {

    margin-top:
        0.1rem;

    flex-shrink: 0;

    cursor:
        pointer;

}


/* ============================================================
   Mosaic Grid
   ============================================================ */

.mosaic-grid {

    flex: 1;

    display: grid;

    gap:
        1rem;

    overflow:
        auto;

    align-content:
        start;

}


.mosaic-item {

    background:
        var(--panel-color);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius);

    padding:
        0.6rem;

    min-width:
        0;

}


.mosaic-item-header h3 {

    margin:
        0.1rem 0 0.25rem 0;

    font-size:
        0.9rem;

    overflow-wrap:
        anywhere;

}


.mosaic-image-title {

    font-size:
        0.85rem;

    font-weight:
        600;

}


.mosaic-category {

    margin:
        0.3rem 0 0.6rem 0;

    color:
        var(--text-muted);

    font-size:
        0.75rem;

}


.mosaic-item img {

    width:
        100%;

    height:
        auto;

    display:
        block;

    border-radius:
        var(--radius);

}


/* ============================================================
   Empty Message
   ============================================================ */

.empty-message {

    padding:
        1.5rem;

    color:
        var(--text-muted);

    text-align:
        center;

    background:
        var(--panel-color);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius);

}


/* ============================================================
   Buttons
   ============================================================ */

button {

    font-family:
        inherit;

}


.control-button {

    background:
        var(--panel-light);

    border:
        1px solid var(--border-color);

    color:
        var(--text-color);

    padding:
        0.5rem 1rem;

    border-radius:
        var(--radius);

    cursor:
        pointer;

}


.control-button:hover {

    border-color:
        var(--accent-color);

    color:
        var(--accent-color);

}


.control-button:disabled {

    opacity: 0.6;

    cursor: default;

}


.control-button.active {

    border-color:
        var(--accent-color);

    color:
        var(--accent-color);

    background:
        var(--panel-color);

}


/* ============================================================
   Scrollbars
   ============================================================ */

::-webkit-scrollbar {

    width:
        10px;

    height:
        10px;

}


::-webkit-scrollbar-track {

    background:
        var(--panel-color);

}


::-webkit-scrollbar-thumb {

    background:
        var(--border-color);

    border-radius:
        10px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        #555;

}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1200px) {

    :root {

        --sidebar-width:
            320px;

    }


    .mosaic-image-selector,
    .slider-case-list {

        grid-template-columns:
            repeat(
                4,
                minmax(
                    140px,
                    1fr
                )
            );

    }

}


@media (max-width: 900px) {

    :root {

        --sidebar-width:
            260px;

        --thumbnail-size:
            90px;

    }


    .mosaic-image-selector,
    .slider-case-list {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    140px,
                    1fr
                )
            );

    }

}



/* ============================================================
   Slider Case Selector
   ============================================================ */

.slider-case-selector {
    margin-bottom: 1rem;
}


.slider-case-selector h3 {
    margin:
        0 0 0.5rem 0;
}


/*
   Matches .mosaic-image-selector so the Slider's
   case checkboxes look and lay out the same way as
   the Mosaic tab's image checkboxes.
*/
.slider-case-list {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(
                140px,
                1fr
            )
        );

    gap:
        0.5rem 0.75rem;

    max-height:
        180px;

    overflow-y:
        auto;

    padding:
        0.75rem;

    background:
        var(--panel-color);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius);
}


.slider-case-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;

    padding:
        0.5rem;

    background:
        var(--panel-light);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-size:
        0.78rem;

    line-height:
        1.2;

    cursor: grab;
}


.slider-case-option:hover {

    border-color:
        var(--accent-color);

}


.slider-case-option.dragging {

    opacity: 0.4;

}


.slider-case-option.drag-over {

    outline:
        2px dashed var(--accent-color);

    outline-offset:
        -2px;

}


.slider-case-option .drag-handle {

    flex-shrink: 0;

    color:
        var(--text-muted);

    cursor: grab;

}


.slider-case-option span {

    overflow: hidden;

    text-overflow: ellipsis;

}


.slider-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    flex-wrap: wrap;

    margin-bottom: 1rem;
}


.slider-indicator {
    margin-right: auto;

    color:
        var(--text-muted);
}


.slider-viewer {
    flex: 1;

    min-height: 0;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 1rem;
}


.slider-viewer img {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    border-radius:
        var(--radius);
}