/* ========================================================
   RESET
======================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* DEBUG */
/*
* {
    outline: 1px solid red !important;
}
*/

/* ========================================================
   ROOT
======================================================== */

html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-size: 13px;

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

    background: #0f172a;
}


/* ========================================================
   APP
======================================================== */

#app {

    width: min(980px, 88vw);

    height: min(900px, 94vh);

    margin: auto;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #020617;

    border-radius: 12px;

    box-shadow:
        0 0 0 1px #1e293b,
        0 20px 60px rgba(0,0,0,0.45);
}

/* ========================================================
   TOPBAR LAYOUT
======================================================== */

.topbar {

    min-height: 80px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding: 12px 14px;

    background: #111827;

    border-bottom:
        1px solid #1e293b;

    flex-shrink: 0;
}

.topbar-title {

    margin: 0;
    line-height: 1.15;
    font-size: 28px;
    font-weight: 700;

    color: #94a3b8;
}

.catalog-intro {
    flex-shrink: 0;
    padding: 6px 14px 7px;
    border-top: 1px solid #1e293b;
    color: #94a3b8;
    background: #0b1323;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}

.catalog-intro strong {
    color: #cbd5e1;
}

.topbar-toolbar {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: nowrap;

}

.topbar-left {

    display: flex;

    align-items: center;
}

.topbar-center {

    display: flex;

    flex: 1;

    justify-content: center;

    align-items: center;
}


.topbar-right {

    display: flex;

    align-items: center;

    gap: 12px;
}

.beam-actions {

    display: flex;

    gap: 8px;
}

.more-actions { display: none; position: relative; }
.more-actions summary { list-style: none; }
.more-actions summary::-webkit-details-marker { display: none; }
.more-actions-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 150px;
    padding: 6px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #111827;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.more-actions-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 7px;
    color: #e2e8f0;
    text-decoration: none;
}
.more-actions-menu a:hover { background: #1e293b; }

/* ========================================================
   UNIT TOGGLE
======================================================== */

.unit-toggle {

    display: flex;

    padding: 3px;

    gap: 3px;

    background: #1e293b;

    border-radius: 10px;

    border: 1px solid #334155;
}

.unit-btn {

    min-width: 44px;

    height: 30px;

    padding: 0 12px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: #94a3b8;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s,
        color 0.2s,
        transform 0.15s;
}

.unit-btn:hover:not(.active) {

    background: #334155;

    color: #e2e8f0;
}

.unit-btn.active {

    background: #2563eb;

    color: white;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.15),
        0 2px 8px rgba(37,99,235,0.35);
}

.unit-btn:active {

    transform: scale(0.97);
}
/* ========================================================
   MATCH COUNT
======================================================== */

.match-count {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    padding:
        0
        14px;

    border-radius: 10px;

    background: #1e293b;

    color: #cbd5e1;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    user-select: none;

    transition:
        background 0.2s,
        transform 0.15s;
}

.match-count:hover {

    background: #334155;

    transform:
        translateY(-1px);
}


/* ========================================================
   MAIN CONTENT
======================================================== */

.main-content {

    flex: 1;

    display: grid;

    grid-template-columns:
        1fr
        220px;

    grid-template-rows:
        1fr
        140px;

    grid-template-areas:
        "viewer side"
        "controls controls";

    overflow: hidden;
}

/* ========================================================
   VIEWER
======================================================== */

.viewer-area {
    grid-area: viewer;

    display: flex;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #0f172a,
            #020617
        );
}

.viewer-card {

    flex: 1;

    margin: 6px;

    position: relative;

    overflow: hidden;

    border-radius: 10px;

    display: flex;

    justify-content: center;

    align-items: flex-start;
}

#beamSvg {
    width: 100%;
    height: 100%;
    display: block;
}


/* ========================================================
   SIDE PANEL
======================================================== */

.side-panel {
    grid-area: side;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 8px;

    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;

    background:
        linear-gradient(#111827 35%, rgba(17, 24, 39, 0)) center top,
        linear-gradient(rgba(17, 24, 39, 0), #111827 65%) center bottom,
        radial-gradient(farthest-side at 50% 0, rgba(2, 6, 23, 0.42), rgba(2, 6, 23, 0)) center top,
        radial-gradient(farthest-side at 50% 100%, rgba(2, 6, 23, 0.42), rgba(2, 6, 23, 0)) center bottom,
        #111827;
    background-repeat: no-repeat;
    background-size: 100% 16px, 100% 16px, 100% 7px, 100% 7px, auto;
    background-attachment: local, local, scroll, scroll, scroll;

    border-left:
        1px solid #1e293b;
}

.side-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}


/* ========================================================
   PANEL
======================================================== */

.panel {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.panel-body {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;

    gap: 4px;
}


/* ========================================================
   CHIPS
======================================================== */

.chip {

    width: 100%;
    min-width: 0;
    max-width: 100%;

    min-height: 28px;

    display: grid;

    grid-template-columns:
        minmax(15px, max-content)
        10px
        minmax(0, 1fr)
        max-content;

    align-items: center;

    gap: 8px;

    padding:
        4px
        8px;

    border: none;

    border-radius: 10px;

    background: #1e293b;

    color: #e2e8f0;

    font-size: 12px;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.15s;
}

.chip-key {

    min-width: 0;

    text-align: left;

    opacity: 0.9;

    white-space: nowrap;
}

.chip-value {

    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;

    text-align: right;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}

.chip-unit {

    min-width: 0;
    overflow: visible;

    text-align: left;

    opacity: 0.7;

    white-space: nowrap;
}

.chip:hover {

    background: #334155;

    transform:
        translateY(-1px);
}

.chip.active {

    background: #2563eb;

    color: white;
}

.chip-passive {

    min-height: 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 2px;

    padding: 10px 16px;

    border: none;

    border-radius: 10px;

    background: #1e293b;

    color: #e2e8f0;

    font-size: 12px;

    line-height: 1.2;
}

.chip.released {

    background: #3b4252;

    color: #cbd5e1;

    border:
        1px dashed #64748b;
}

/* ========================================================
   METRIC CHIP
======================================================== */

.metric-chip {

    min-height: 30px;

    display: grid;

    grid-template-columns:
        minmax(48px, max-content)
        10px
        minmax(0, 1fr)
        max-content;

    align-items: center;

    gap: 4px;

    padding:
        4px
        8px;

    border-radius: 10px;

    background: #1e3a5f;

    color: #e2e8f0;
}

.metric-key {

    font-weight: 600;

    white-space: nowrap;
}

.metric-eq {

    opacity: 0.5;
}

.metric-value {

    text-align: right;

    font-variant-numeric:
        tabular-nums;

    font-weight: 600;

    white-space: nowrap;
}

.metric-unit {

    opacity: 0.75;

    white-space: nowrap;
}

/* ========================================================
   CHIP ELEMENTS
======================================================== */


.chip-eq {

    text-align: left;

    opacity: 0.6;

}



/* ========================================================
   CATALOG CONTROLS
======================================================== */

.catalog-controls {

    grid-area: controls;

    display: flex;

    flex-direction: column;

    border-top: 1px solid #1e293b;

    background: #0f172a;
}


/* ========================================================
   SLIDER PANEL
======================================================== */

.slider-panel {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 14px;

    padding: 14px;

    background: #0f172a;
}


/* ========================================================
   SLIDER HEADER
======================================================== */

.slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slider-edge {
    font-size: 12px;
    color: #64748b;
}

.slider-current {
    min-width: 90px;

    text-align: center;

    font-size: 18px;
    font-weight: 700;

    color: white;
}


/* ========================================================
   NAVIGATION
======================================================== */

.slider-nav {
    display: flex;
    align-items: center;

    gap: 8px;
}

.nav-btn {
    width: 28px;
    height: 28px;

    border: none;
    border-radius: 8px;

    background: #1e293b;

    color: #cbd5e1;

    font-size: 11px;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.15s;
}

.nav-btn:hover {
    background: #334155;
    transform: translateY(-1px);
}


/* ========================================================
   SLIDER
======================================================== */

.slider {
    appearance: none;

    width: 100%;
    height: 8px;

    border-radius: 999px;

    cursor: pointer;

    background: #334155;
}

.slider::-webkit-slider-thumb {
    appearance: none;

    width: 18px;
    height: 18px;

    border-radius: 999px;

    background: #2563eb;

    border: 2px solid white;

    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 18px;
    height: 18px;

    border-radius: 999px;

    background: #2563eb;

    border: 2px solid white;

    cursor: pointer;
}

.slider:disabled {

    opacity: 0.35;

    cursor: default;
}

.select-btn {

    border: none;

    border-radius: 12px;

    padding: 5px 9px;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    min-width: 180px;

    transition:
        box-shadow 160ms ease,
        transform 160ms ease;
}

.select-btn.preview-settled {

    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.4);

    transform: translateY(-1px);
}

.slider-meta {

    margin-top: 6px;

    font-size: 12px;

    opacity: 0.7;

    text-align: center;
}

.slider-ticks {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    align-items: flex-end;

    width: 100%;

    height: 16px;

    overflow: hidden;

    pointer-events: none;
}

.slider-tick {

    flex: 0 0 auto;

    width: 2px;

    height: 10px;

    border-radius: 999px;

    opacity: 0.25;

    background: white;

    transition:
        opacity 0.15s,
        height 0.15s;
}

.slider-tick.active {

    opacity: 1;

    height: 16px;
}

.nav-btn:disabled {

    opacity: 0.35;

    cursor: default;

    transform: none;
}

.slider.sleep {

    opacity: 0.4;
}


/* ========================================================
   TOPBAR COMPONENTS
======================================================== */

.notification-bar {

    display: none;

    padding: 10px 16px;

    background: #3b2f00;

    color: #ffd966;

    border-bottom: 1px solid #665200;

    font-size: 14px;
}

.notification-bar.show {

    display: block;
}

.beam-name {

    font-size: 12px;

    font-family: monospace;

    max-width: 500px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-weight: 600;

    padding: 5px;

    color: #cfd8e3;
}

.preview-beam-name {
    color: #7db4ff;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(125, 180, 255, 0.45);
    text-underline-offset: 3px;
}

.preview-beam-name:hover,
.preview-beam-name:focus-visible {
    color: #bfdbfe;
    outline: none;
}

.preview-navigator {
    position: absolute;
    left: 50%;
    top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
    padding: 6px 10px;
    border: 1px solid #2b3a53;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    color: #cbd5e1;
    font-size: 12px;
    white-space: nowrap;
    z-index: 2;
}

.preview-nav-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #1e293b;
    color: white;
    cursor: pointer;
    font-size: 18px;
}

.preview-nav-btn:disabled { opacity: 0.3; cursor: default; }

.preview-strength,
.preview-utilization {
    padding-left: 10px;
    border-left: 1px solid #334155;
    font-variant-numeric: tabular-nums;
}

.preview-strength-label {
    margin-right: 4px;
    color: #93c5fd;
}

.preview-utilization {
    color: #86efac;
    font-weight: 700;
}

.action-btn {

    min-width: 70px;

    height: 34px;

    padding: 0 12px;

    border: none;

    border-radius: 8px;

    background: #1e293b;

    color: white;

    cursor: pointer;

    transition:

        background 0.2s,

        transform 0.15s;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;
}

.print-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.action-btn:hover {

    background: #334155;

    transform: translateY(-1px);
}

.action-link {
    text-decoration: none;
    white-space: nowrap;
}

.action-btn:disabled {

    opacity: 0.35;

    cursor: default;

    transform: none;
}

/* ========================================================
   RESPONSIVE
======================================================== */

@media (max-width: 1080px) {
    .desktop-secondary { display: none; }
    .more-actions { display: block; }
    .more-actions > summary.action-btn {
        min-width: 44px;
        width: 44px;
        padding: 0;
        font-size: 20px;
    }
}

@media (max-width: 900px) {

    #app {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
    }

    .main-content {
        grid-template-columns: 1fr;
        grid-template-rows:
            minmax(340px, 52vh)
            auto
            auto;
        grid-template-areas:
            "viewer"
            "side"
            "controls";
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .main-content > *,
    .viewer-area,
    .viewer-card,
    .side-panel,
    .catalog-controls {
        min-width: 0;
    }

    .side-panel {
        display: flex;
        padding: 12px;
        border-top: 1px solid #1e293b;
        border-left: 0;
        overflow: visible;
    }

    .side-panel .panel-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .chip,
    .metric-chip {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    .chip-value,
    .metric-value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .catalog-controls {
        position: sticky;
        bottom: 0;
        z-index: 10;
        box-shadow: 0 -10px 28px rgba(2, 6, 23, 0.78);
    }

    .nav-btn,
    .preview-nav-btn {
        width: 44px;
        height: 44px;
    }

    .slider::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
    }

    .slider::-moz-range-thumb {
        width: 26px;
        height: 26px;
    }

    .preview-navigator {
        top: 10px;
        max-width: calc(100% - 20px);
        gap: 8px;
    }

}

@media (max-width: 700px) {
    .topbar {
        gap: 6px;
        padding: 8px 10px;
    }

    .topbar-title { font-size: 19px; }

    .catalog-intro {
        padding: 5px 10px;
        font-size: 10px;
    }

    .topbar-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "unit spacer actions"
            "name name name";
        gap: 7px 10px;
    }

    .topbar-left { grid-area: unit; }
    .topbar-center { grid-area: name; min-width: 0; }
    .topbar-right { grid-area: actions; gap: 7px; }
    .beam-name { width: 100%; max-width: none; padding: 3px 4px; text-align: center; }

    .action-btn,
    .unit-btn,
    .match-count {
        min-height: 44px;
    }

    .action-btn { min-width: 58px; padding: 0 10px; }
    .unit-btn { height: 38px; }
    .match-count { min-width: 44px; padding: 0 9px; font-size: 11px; }

    .viewer-card { margin: 0; }
    .slider-panel { padding: 12px 10px 16px; }
    .slider-nav { gap: 5px; }
    .slider-current { min-width: 104px; font-size: 16px; }
}

@media (max-width: 430px) {
    .main-content {
        grid-template-rows: minmax(280px, 38svh) auto auto;
    }

    .side-panel .panel-body {
        grid-template-columns: 1fr;
    }

    .preview-strength,
    .preview-utilization {
        padding-left: 7px;
    }

    .preview-utilization { display: none; }

    .viewer-card {
        touch-action: pan-y;
        user-select: none;
    }

    .preview-navigator {
        min-height: 34px;
        padding: 6px 10px;
        pointer-events: none;
    }

    .preview-navigator .preview-nav-btn {
        display: none;
    }

    .viewer-card.swipe-preview-left #beamSvg {
        animation: swipe-preview-left 180ms ease-out;
    }

    .viewer-card.swipe-preview-right #beamSvg {
        animation: swipe-preview-right 180ms ease-out;
    }

    .slider-edge { display: none; }
    .slider-header { justify-content: center; }

    #sliderFirst,
    #sliderLast {
        display: none;
    }

    .catalog-controls:has(.slider:disabled) .slider,
    .catalog-controls:has(.slider:disabled) .slider-ticks {
        display: none;
    }

    .catalog-controls:has(.slider:disabled) .slider-panel {
        flex: 0 0 auto;
        gap: 0;
        padding: 8px 10px;
    }

    .catalog-controls:has(.slider:disabled) .slider-current {
        min-width: 160px;
    }

    .topbar-right { min-width: 0; }
    .beam-actions { gap: 5px; }
    .action-btn { min-width: 54px; padding: 0 8px; }
}

@keyframes swipe-preview-left {
    from { opacity: 0.65; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes swipe-preview-right {
    from { opacity: 0.65; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
    .topbar-title { display: none; }
    .main-content { grid-template-rows: minmax(240px, 68svh) auto auto; }
    .preview-navigator { top: 6px; }
}