/* ---- */
/* Base */
/* ---- */

:root {
    /* Colors */
    --background: #ffffff;
    --foreground: #171717;
    --bg: #f4f5f7;
    --border: #e2e5ea;
    --track: #d9dce3;
    --text: #1b1f24;
    --muted: #6b7280;
    --accent: #1e90ff;
    --accent-soft: #e8f2ff;
    --bad: #e5484d;
    --radius: 8px;
    --drawer-size: 320px;
    --drawer-default: open; /* Read by at boot */

    /* Fonts */
    --sans: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, monospace;
}

* {
    /* Include borders for all measurements */
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    /* Disable all highlighting/selection */
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Kill the blue tap flash on touch */

    font-size: 15px;
    line-height: 1.5;
    font-family: var(--sans), serif;
}

body {
    height: 100dvh;
    overflow: hidden; /* Inner panels scroll, not the page */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto; /* minmax lets the middle row shrink below content */

    color: var(--foreground);

    /* Set border between panels */
    gap: 1px;
    background: var(--border); /* Gap (border) color */
}

/* Set panel background */
body > * {
    background: var(--background);
}

/* Hide dive images when showImages is unchecked */
body:not(:has(#showImages:checked)) #diveImages * {display: none}
body:has(#showImages:checked) #dives {display: none}

/* --------------- */
/* Utility Classes */
/* --------------- */

/* ---------------- */
/* General Elements */
/* ---------------- */

button {
    cursor: pointer;
    background: none;

    &:disabled {
        cursor: default;
    }
}

svg {
    display: block; /* Center the SVG vertically */
}

select, input[type="number"] {
    width: 140px;
    min-width: max-content;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--track);
    border-radius: var(--radius);

    /* Not global since we it to disappear when edit mode is off */
    &:invalid {
        border: 2px solid var(--bad);
    }

    &:focus-visible {
        outline: 2px solid var(--accent);
    }
}

/* ---------------- */
/* Utility Elements */
/* ---------------- */

button.icon {
    width: 34px;
    height: 34px;
    display: grid; /* Needed for Firefox to center icon */
    place-items: center;
    border: none;
    border-radius: var(--radius);
    color: var(--muted);

    @media (hover: hover) {
        &:hover:not(:disabled) {
            background: var(--bg);
            color: var(--text);
        }
    }

    /* AFTER the hover rule so a pressed toggle keeps its accent, regardless of hover */
    &[aria-pressed="true"] {
        border: 1px solid var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }

    svg {
        width: 18px;
        height: 18px;
    }
}

.toggle {
    appearance: none;
    width: 40px;
    height: 24px;
    position: relative;
    border-radius: 40px;
    background: var(--track);
    transition: 0.25s;

    &::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.1);
        transition: 0.25s;
    }

    &:checked {
        background: var(--accent);
    }

    &:checked::after {
        left: 19px;
    }

    &:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
}

.segmentedControl {
    /* Thumb = selected segment */
    /* Thumb's dimensions & position (variable since segments are not of equal width) */
    --thumb-x: 0px;
    --thumb-w: 0px;
    --thumb-inset: 3px;

    /* Thumb evenly rounded inside parent */
    --thumb-radius: calc(var(--radius) - var(--thumb-inset));

    /* 2.5% spring overshoot */
    --thumb-spring: linear(0, 0.121, 0.358, 0.593, 0.779, 0.903, 0.977, 1.012, 1.025, 1.025, 1.02, 1.013, 1.008, 1.004, 1.001, 1);

    position: relative;
    display: inline-flex; /* Segments size to their own label */
    padding: var(--thumb-inset);
    background: var(--track);
    border-radius: var(--radius);

    /* Thumb settings */
    /* Sliding tile, instead of background change, to allow for animation */
    &::before {
        content: "";
        position: absolute;
        top: var(--thumb-inset);
        bottom: var(--thumb-inset);
        left: 0;
        width: var(--thumb-w);
        border-radius: var(--thumb-radius);
        background: #ffffff;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.06);
        transform: translateX(var(--thumb-x));
    }

    /* No animation until the script has added the thumb */
    &[data-ready]::before {
        transition: transform 270ms var(--thumb-spring), width 270ms var(--thumb-spring);
    }

    /* Don't show radio defaults */
    input {
        position: absolute;
        opacity: 0;
        pointer-events: none; /* Otherwise hidden radio eats clicks */
    }

    label {
        position: relative; /* Paints OVER the thumb, so the hover styling cascades */
        padding: 6px 12px;
        border-radius: var(--thumb-radius);
        color: var(--muted);
        font-size: 13px;
        white-space: nowrap;
        cursor: pointer;

        /* Darken the text on press (same duration as the thumb's transition) */
        transition: color 270ms ease;
        &:has(+ :checked) {color: var(--text)}

        &:has(+ :focus-visible) {outline: 2px solid var(--accent)}

        /* pointer-events also suppresses the hover and press styling */
        &:has(+ :disabled) {opacity: 0.4; pointer-events: none}

        @media (hover: hover) {
            &:hover {background: rgba(0, 0, 0, 0.04)}
        }

        /* MUST exclude the checked segment to prevent the wash (highlight) from lingering on touch/mobile */
        &:active:has(+ :not(:checked)) {background: rgba(0, 0, 0, 0.08)}
    }
}

/* Disable for those with reduce motion enabled */
@media (prefers-reduced-motion: reduce) {
    .segmentedControl[data-ready]::before {transition: none}
}

/* ------ */
/* Header */
/* ------ */

header {
    display: flex;
    align-items: center;
    padding: 12px 18px;

    h1 {
        margin-right: auto;
        font-size: 1.25rem;
        font-weight: 600;

    }
}

/* ---- */
/* Main */
/* ---- */

main {
    display: grid;
    grid-template-columns: var(--drawer-size) 1fr;
    grid-template-rows: minmax(0, 1fr); /* Without this the implicit row grows to fit content. Needed for scrolling */
    transition: grid-template-columns 0.25s;

    &:has(> aside[inert]) {
        grid-template-columns: 0 1fr;

        aside {
            transform: translateX(-100%);
        }
    }

    /* --------------- */
    /* Settings Drawer */
    /* --------------- */

    aside {
        padding: 12px 18px;
        border-right: 1px solid var(--border);
        overflow: hidden auto; /* Clip content while the track collapses */

        details {
            border-bottom: 1px solid var(--border);

            summary {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 12px 0;
                color: var(--muted);
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                cursor: pointer;

                &::-webkit-details-marker {
                    display: none;
                }

                .chevron {
                    width: 12px;
                    height: 12px;
                    color: var(--muted);
                    transition: 0.25s;
                }
            }

            &[open] summary .chevron {
                transform: rotate(90deg);
            }

            .section-body {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 12px;
                padding-bottom: 12px;

                > div {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            }

            label {
                color: var(--muted);
                font-size: 13px;
            }
        }
    }

    /* ------------ */
    /* Draw Preview */
    /* ------------ */

    section {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr); /* Header, then the scrolling preview */

        #previewHeader {
            width: 100%;
            padding: 12px 18px;
            display: inline-flex;
            align-items: center;
            gap: 6px; /* Space between header and edit button */

            h2 {
                font-weight: 500;
            }

            > div.segmentedControl {
                margin-left: auto;
            }

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

        /* Styles for both previews */
        #previewHeader ~ * {
            /* TODO: Consider a grey background */
            padding: 0.5rem 1rem;

            overflow-y: auto;
            scrollbar-gutter: stable;
        }

        /* ------------ */
        /* Text Preview */
        /* ------------ */

        /* Design requirement: Selecting rows should provide the same output as the clipboard button */
        #dives {
            /* TODO: Consider horizontal borders between dives */
            * {
                user-select: text;
                font-family: var(--mono), monospace;
            }

            ol {
                width: fit-content;
                padding: 0;
                list-style: none;
                counter-reset: dive-number;
            }

            li {
                counter-increment: dive-number;
                padding-top: 0.25rem;
                white-space: nowrap; /* A row scrolls rather than wraps */

                &::before {
                    content: counter(dive-number);
                    display: inline-block;
                    vertical-align: middle;
                    width: 2ch;
                    padding-right: 8px;
                    margin-right: 8px;
                    border-right: 2px solid transparent; /* Reserved (invalid bar) */
                    color: var(--muted);
                    font-size: 13px;
                    text-align: right;
                }

                /* Color invalid bar */
                &.invalid::before {border-right-color: var(--bad)}
            }

            .slot {
                /* Real text rather than a pseudo-element so a manual selection picks them up (commas) */
                .sep {
                    display: inline-block;
                    vertical-align: middle;
                    color: var(--muted);
                    visibility: hidden; /* Hidden so the columns still line up */

                    /* Space padding (" " after each comma, for when manually copying) */
                    .pad {
                        position: absolute;
                        white-space: pre;
                    }
                }

                /* Only show comma between non-empty cells */
                &:has(~ .slot > .cell:not(:empty)) > .cell:not(:empty) + .sep {visibility: visible}
            }

            .cell {
                display: inline-block;
                align-content: center; /* Center text content vertically */
                vertical-align: middle;
                width: 3ch;
                aspect-ratio: 1;
                padding-right: 1px; /* Prevents highlighting from getting morphed by border */
                border: 1px dashed transparent; /* Reserved (edit toggle doesn't cause shift) */
                border-radius: 6px;
                text-align: right;
                text-transform: uppercase;
                overflow: hidden;

                &:focus-visible {
                    outline: 2px solid var(--accent);
                    outline-offset: -1px; /* Outline covers the dashed border */
                }

                /* Invalid text turns red */
                &.invalid {color: var(--bad)}
            }

            /* Only paint border during edit mode */
            body:has(#editToggle[aria-pressed="true"]) & {
                .cell {border-color: var(--track)}
                .cell.invalid {border-color: var(--bad)}
            }
        }

        /* ------------- */
        /* Image Preview */
        /* ------------- */

        /* Counter before each dive */
        #diveImages > div::before {
            content: counter(dive-number);
            font-size: 40px;
            color: #ffffff;
            background: var(--foreground);
            width: var(--counter-size);
            aspect-ratio: 1;
            display: grid;
            place-items: center;
            line-height: 1;
            border-radius: 50%;
            /* Show background when printing */
            print-color-adjust: exact;
            -webkit-print-color-adjust: exact;
        }

        #diveImages {
            --counter-size: 60px;

            /* Adjust row height to fit the shortest row, by using width (see below) */
            --images-per-row: 1;
            &:has(> div > img:nth-of-type(2)) { --images-per-row: 2; }
            &:has(> div > img:nth-of-type(3)) { --images-per-row: 3; }
            &:has(> div > img:nth-of-type(4)) { --images-per-row: 4; }
            &:has(> div > img:nth-of-type(5)) { --images-per-row: 5; }
        }

        #diveImages > div {
            display: flex;
            align-items: center;
            counter-increment: dive-number;
            border-bottom: 1px solid black;
        }

        #diveImages > div:last-child {
            border: none;
        }

        #diveImages > div > img {
            /* Adjust row height to fit the shortest row, by using width */
            max-width: calc((100% - var(--counter-size)) / var(--images-per-row));
            max-height: 300px;
            background: #ffffff;
            margin: 0 auto; /* Center horizontally within div */
        }
    }
}

/* ------ */
/* Footer */
/* ------ */

footer {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 70px;
    padding: 12px 18px;
    background: #ffffff;

    button {
        height: 100%;
        border-radius: var(--radius);
    }

    #generate {
        flex: 1;
        max-width: 420px;
        padding: 12px 18px;
        border: 1px solid var(--accent);
        background: var(--accent);
        color: #ffffff;
        font-weight: bold;
    }

    #settingsToggle {
        aspect-ratio: 1; /* width matches height */
        display: grid;
        place-items: center;
        border: 1px solid var(--border);
        color: var(--muted);

        @media (hover: hover) {
            &:hover:not(:disabled) {color: var(--text)}
        }

        svg {
            width: 20px;
            height: 20px;
        }
    }
}

/* ----- */
/* Toast */
/* ----- */

/* The toast notifies when copying to clipboard */

.toast {
    visibility: hidden;
    background-color: #222222;
    color: #ffffff;
    text-align: center;
    border-radius: 21px; /* Rounded corners */
    padding: 12px 18px;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1; /* Transition from 1 opacity */
    transition: opacity 1s ease-out 0.25s; /* Transition for 1s after 0.25s, quickly at first */

    &.show {
        opacity: 0; /* Transition to 0 opacity */
        visibility: visible;
    }
}

/* Used with .offsetHeight to clear a currently running animation */
.noTransition {
    transition: none !important;
}

/* -------------- */
/* Mobile support */
/* -------------- */

@media (max-width: 600px) {
    /* The drawer starts closed */
    :root {--drawer-default: collapsed}

    /* Drawer slides up from the bottom, overlaying the preview */
    main {
        grid-template-columns: 1fr; /* Drawer is out of flow, section takes the width (needed for scroll) */
        position: relative; /* Anchor the drawer above the footer */
        overflow: hidden; /* Clip the drawer while off-screen */

        aside {
            position: absolute;
            inset: auto 0 0; /* Pinned to the bottom, full width */
            max-height: 75%;
            background: var(--background);
            border-right: none; /* Offscreen so no-op, but it is proper */
            border-top: 1px solid var(--border);
            border-radius: 16px 16px 0 0;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1); /* Side effect - gives the footer a nice shadow */
            transition: transform 0.25s;

            /* Hide the padding on the bottom */
            padding-bottom: 0;

            /* Hide the border on the last section of settings (crowded with footer border) */
            details:last-child { border-bottom: none }
        }

        &:has(> aside[inert]) {
            grid-template-columns: 1fr; /* Override */

            aside {
                transform: translateY(100%);
            }
        }
    }
}

/* ----- */
/* Print */
/* ----- */

/* We are re-using the same page for printing, instead of re-loading all of the images */
@media print {
    @page {
        margin: 0;
        size: auto; /* Use the target paper size (Letter, A4, etc.) instead of forcing Letter */
    }

    body {
        background: #ffffff !important;
        margin: 0 !important;
        height: auto !important; /* Release the viewport clamp, or printing clips to one page */
        overflow: visible !important;
    }

    /* Don't show any of the body */
    body *:not(#diveImages) {
        display: none
    }

    main, section { display: block !important; }

    #previewHeader { display: none !important; }

    /* Show dive images to print */
    #diveImages * {
        display: flex !important;
    }

    #diveImages {
        padding: 0 !important;
        overflow: visible !important;
        max-width: 100% !important;
    }

    /* Dividers are top borders, and no border between page seams */
    #diveImages > div {
        box-sizing: border-box !important;
        page-break-inside: avoid !important; /* Don't split a dive across pages */
        border-top: 1px solid black !important;
        border-bottom: none !important;
        padding-bottom: 1px !important; /* Prevent divider from getting clipped */
    }

    #diveImages > div > img {
        max-width: 100% !important; /* [CHECK FOR REDUNDANCY] */
        max-height: calc(100% - 2px) !important;
    }

    /* Keep the number circle off the page's edge */
    #diveImages > div::before {
        margin-left: 8px;
    }

    /* Rows fill the paper height exactly via --paper-mm (printer page size) */
    /* Auto defaults to Letter */
    #diveImages > div {
        height: calc(var(--paper-mm) / var(--rows) - 0.2mm) !important; /* 0.2 reserved as slack */
    }

    /* Show X rows per page */
    /* Mobile Chrome ignores vh in print */
    /* :not(:last-child) avoids a trailing blank page */
    /* Yes, this is the best way to do this with CSS */
    #diveImages[data-rows="2"] > div {
        &:nth-child(2n+1) { border-top: none !important; } /* Page-first row: no divider on the seam */
        &:nth-child(2n):not(:last-child) { page-break-after: always; }
    }
    #diveImages[data-rows="3"] > div {
        &:nth-child(3n+1) { border-top: none !important; }
        &:nth-child(3n):not(:last-child) { page-break-after: always; }
    }
    #diveImages[data-rows="4"] > div {
        &:nth-child(4n+1) { border-top: none !important; }
        &:nth-child(4n):not(:last-child) { page-break-after: always; }
    }
    #diveImages[data-rows="5"] > div {
        &:nth-child(5n+1) { border-top: none !important; }
        &:nth-child(5n):not(:last-child) { page-break-after: always; }
    }
    #diveImages[data-rows="6"] > div {
        &:nth-child(6n+1) { border-top: none !important; }
        &:nth-child(6n):not(:last-child) { page-break-after: always; }
    }
}