/* Drawer Layout Configurator Styles v2.1.0 - Clean Viewport System with Dark Mode */
/* Features: Responsive viewport, proper scaling, CAD-style coordinate transformation, browser theme matching */

/* CSS Variables for theming - aligned to shared/site.css's "engineering
   blueprint" palette (same hex values, this file's own token names kept
   so the rest of this stylesheet didn't need a rewrite) so the tool
   doesn't feel like a separate app bolted onto the marketing site -
   flagged by the user 2026-09-15 (no logo, different background/colors). */
:root {
    --bg-primary: #F2F5F8;
    --bg-secondary: #FFFFFF;
    --text-primary: #16283D;
    --text-secondary: #445872;
    --text-muted: #7A8CA3;
    --border-color: #D4DCE4;
    --border-light: #D4DCE4;
    --button-primary-bg: #C97A1D;
    --button-primary-hover-bg: #FCE9D2;
    --button-secondary-bg: #FFFFFF;
    --button-secondary-text: #445872;
    --button-secondary-border: #D4DCE4;
    --viewport-bg: #E7ECF1;
    --drawer-border: #16283D;
    --tray-bg: #E7ECF1;
    --tray-border: #445872;
    --tray-hover-bg: #E7ECF1;
    --tray-hover-border: #1B3A5C;
    --tray-selected-bg: #DCE6EF;
    --tray-selected-border: #1B3A5C;
    --tray-locked-bg: #FCE9D2;
    --tray-locked-border: #B8590F;
    --grid-lines: rgba(27, 58, 92, 0.14);
    --shadow-light: rgba(22, 40, 61, 0.08);
    --input-bg: #FFFFFF;
    --input-focus-bg: #FFFFFF;
    /* Header/logo tokens, matching shared/site.css exactly (its header
       markup is reused verbatim below, so its own var names are reused
       here rather than remapped). */
    --line: #1B3A5C;
    --line-soft: rgba(27, 58, 92, 0.14);
    --signal: #C97A1D;
    --signal-ink: #FFFFFF;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0E1B2B;
        --bg-secondary: #16283D;
        --text-primary: #EAF2F8;
        --text-secondary: #AEC2D6;
        --text-muted: #7891AC;
        --border-color: #2A4363;
        --border-light: #2A4363;
        --button-primary-bg: #F2B84B;
        --button-primary-hover-bg: #3A2E12;
        --button-secondary-bg: #16283D;
        --button-secondary-text: #AEC2D6;
        --button-secondary-border: #2A4363;
        --viewport-bg: #1E3350;
        --drawer-border: #6FB8D6;
        --tray-bg: #1E3350;
        --tray-border: #7891AC;
        --tray-hover-bg: #1E3350;
        --tray-hover-border: #6FB8D6;
        --tray-selected-bg: #24405F;
        --tray-selected-border: #6FB8D6;
        --tray-locked-bg: #3A2E12;
        --tray-locked-border: #D9922E;
        --grid-lines: rgba(111, 184, 214, 0.14);
        --shadow-light: rgba(0, 0, 0, 0.4);
        --input-bg: #1E3350;
        --input-focus-bg: #1E3350;
        --line: #6FB8D6;
        --line-soft: rgba(111, 184, 214, 0.14);
        --signal: #F2B84B;
        --signal-ink: #16283D;
    }
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    background-image:
        repeating-linear-gradient(26.565deg, var(--line-soft) 0 1px, transparent 1px 45px),
        repeating-linear-gradient(-26.565deg, var(--line-soft) 0 1px, transparent 1px 45px);
    line-height: 1.4;
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* Slim version of shared/site.css's header - full nav doesn't fit this
   tool's full-height working layout (Pricing/FAQ are pre-decision content
   someone already using the tool doesn't need mid-task), but the logo
   links back to the main site so this doesn't feel like a disconnected
   separate app, and Trolley is kept since it's the tool's own next step -
   worth a glance at what's already queued without losing in-progress work
   via back-navigation. */
header.tool-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
header.tool-header .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--text-primary);
}
header.tool-header .wordmark svg { display: block; }
header.tool-header .trolley-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
header.tool-header .trolley-link svg { display: block; }
header.tool-header .trolley-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--signal);
    color: var(--signal-ink);
    font-size: 0.62rem;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
}

.main-layout {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 45px);
    padding: 0.75rem;
    overflow: hidden;
    box-sizing: border-box;
}

.left-column {
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    position: relative;
}

.left-column-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    height: 100%;
    padding-left: 1rem;
    padding-right: 0.5rem;
    direction: rtl;
    box-sizing: border-box;
    /* Thin, theme-matching scrollbar instead of the default browser one,
       which stood out against the dark panel once the sidebar's content
       (steps 3-5) grows past the viewport. */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.left-column-inner::-webkit-scrollbar {
    width: 6px;
}
.left-column-inner::-webkit-scrollbar-track {
    background: transparent;
}
.left-column-inner::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
.left-column-inner::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.left-column-inner > * {
    direction: ltr;
}

.step-container {
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 2px 8px var(--shadow-light);
    border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 0.75rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* A checkbox+text label (like "Use exact-size slots...") inherited
   .form-group label's block/margin-bottom styling meant for a text label
   sitting above its own input - fine for that, but left a checkbox and
   its (often two-line) text without proper alignment or breathing room. */
.checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0 !important;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    margin: 0.15rem 0 0;
    flex-shrink: 0;
    cursor: pointer;
}
.checkbox-label span {
    color: var(--text-secondary);
    font-weight: 500;
}
/* Plan-gated controls (see designer-script.js's applyPlanGating) - the
   checkbox itself dims natively when disabled, but its label text
   doesn't unless told to. */
.checkbox-label:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
}
.checkbox-label:has(input:disabled) span {
    cursor: not-allowed;
}

/* Groups the slot-shape/sizes/spacing/margin fields visibly as "options
   belonging to the checkbox above" once revealed, rather than blending
   into the rest of the form as more flat, ungrouped fields. */
.slots-panel {
    margin-top: 0.75rem;
    padding: 0.75rem 0.75rem 0.25rem;
    border-left: 2px solid var(--button-primary-bg);
    background: var(--viewport-bg);
    border-radius: 0 0.375rem 0.375rem 0;
}

.form-group input[type="number"],
.form-group input[type="text"],
.form-group select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--text-primary);
}

/* Plan-gated fields (see designer-script.js's applyPlanGating) - explicit
   background/color above already overrides the browser's native disabled
   look entirely, so without this a functionally-locked field (e.g. the
   Starter-tier floor/scoop radius) is indistinguishable from an editable
   one. */
.form-group input[type="number"]:disabled,
.form-group input[type="text"]:disabled,
.form-group select:disabled {
    background: var(--viewport-bg);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.form-group input[type="number"]:focus,
.form-group input[type="text"]:focus,
.form-group select:focus {
    background: var(--input-focus-bg);
    outline: 1px solid var(--tray-hover-border);
}

/* Bordered/quiet, matching .secondary-button's structure (and the
   already-good Save/Load Layout buttons the user pointed to) rather than
   a loud solid fill repeated down the whole sidebar - amber border/text
   is enough to mark these as the more important actions without every
   button shouting at once. */
.primary-button {
    background: var(--button-secondary-bg);
    color: var(--button-primary-bg);
    border: 1px solid var(--button-primary-bg);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.primary-button:hover {
    background: var(--button-primary-hover-bg);
}
.primary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.secondary-button {
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    border: 1px solid var(--button-secondary-border);
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    cursor: pointer;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    transition: border-color 0.15s, color 0.15s;
}
.secondary-button:hover {
    border-color: var(--button-primary-bg);
    color: var(--button-primary-bg);
}
.secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.right-column {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 2px 8px var(--shadow-light);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
}

/* NEW CLEAN VIEWPORT SYSTEM */
#drawerPreview {
    flex: 1;
    position: relative;
    background: var(--viewport-bg);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Watermark */
.canvas-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
    text-align: center;
    white-space: nowrap;
}

.canvas-watermark h2 {
    margin: 0 0 0.25rem 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.canvas-watermark p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

@media (prefers-color-scheme: dark) {
    .canvas-watermark h2,
    .canvas-watermark p {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
}

/* Viewport container - responsive sizing */
.viewport-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Drawer representation - fixed aspect ratio based on mm dimensions */
.drawer-viewport {
    position: relative;
    border: 2px solid var(--drawer-border);
    background: var(--bg-secondary);
    border-radius: 4px;
}

/* Grid overlay - purely decorative */
.drawer-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, var(--grid-lines) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-lines) 1px, transparent 1px);
    pointer-events: none;
}

/* Tray styling */
.tray-element {
    position: absolute;
    background: var(--tray-bg);
    border: 1px solid var(--tray-border);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    text-align: center;
    cursor: move;
    user-select: none;
    box-sizing: border-box;
    color: var(--text-primary);
}

.tray-element:hover {
    background: var(--tray-hover-bg);
    border-color: var(--tray-hover-border);
}

.tray-element.selected {
    background: var(--tray-selected-bg) !important;
    border: 2px solid var(--tray-selected-border) !important;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.3) !important;
    z-index: 10;
}

.tray-element.locked {
    background: var(--tray-locked-bg);
    border-color: var(--tray-locked-border);
    cursor: default;
}

.help-text {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem 0;
}

.help-text.warning {
    color: var(--tray-locked-border);
    font-weight: 500;
}

/* Heading styles - all same size, grey color */
h3 {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

h4 {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0.75rem 0 0.5rem 0;
}

/* Export textarea */
#exportData {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

/* Step dividers - thin grey line between main steps */
.step-divider {
    border-bottom: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

/* Clean tooltip styling like Claude.ai */
.custom-tooltip {
    position: absolute;
    background: #374151;
    color: white;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 400;
    /* pre-line (not nowrap): most tooltips are one line and unaffected,
       but a multi-line one (see the slot-size syntax tooltip) can use a
       literal \n in its title text to get one explanation per row instead
       of one unbroken run-on line. */
    white-space: pre-line;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.custom-tooltip.show {
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    .custom-tooltip {
        background: #4b5563;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}

/* Icons on preview card (right column) */
.right-column {
    position: relative;
}

/* Undo icon at top left */
.undo-icon-container {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 100;
}

/* Settings icon at bottom left */
.settings-icon-container {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 100;
}

/* Shared icon styling */
.settings-icon,
.undo-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: var(--text-muted);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-icon:hover,
.undo-icon:hover {
    background: var(--button-secondary-bg);
    color: var(--text-primary);
}

.settings-icon:hover {
    transform: rotate(15deg);
}

.undo-icon:hover {
    transform: translateX(-2px);
}

.settings-icon:disabled,
.undo-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.settings-icon:disabled:hover,
.undo-icon:disabled:hover {
    background: none;
    color: var(--text-muted);
    transform: none;
}

.settings-icon svg,
.undo-icon svg {
    width: 24px;
    height: 24px;
}

/* Settings Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
}

.modal-content {
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px var(--shadow-light);
    border: 1px solid var(--border-color);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 1.5rem;
}

.modal-body .form-group {
    margin-bottom: 1rem;
}

.modal-body select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--text-primary);
}

.modal-body select:focus {
    background: var(--input-focus-bg);
    outline: 1px solid var(--tray-hover-border);
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.modal-footer .primary-button {
    margin: 0;
}

/* Tray divider lines - theme-aware */
.divider-line {
    background-color: var(--drawer-border);
    opacity: 0.7;
    z-index: 5;
}

.divider-line.vertical {
    border-right: 1px solid var(--drawer-border);
}

.divider-line.horizontal {
    border-bottom: 1px solid var(--drawer-border);
}

/* Auto-arrange slot preview - mirrors the backend's compute_slot_layout(),
   see updateTraySlots() in designer-script.js */
.slot-shape {
    box-sizing: border-box;
    border: 1px solid var(--drawer-border);
    background: var(--viewport-bg);
    opacity: 0.85;
    z-index: 5;
}

.slot-shape.round {
    border-radius: 50%;
}

.slot-shape.rectangle {
    border-radius: 1px;
}

/* clip-path only crops a shape - it does not redraw a border along the cut
   edges, so a plain `border` here would only survive on the hex's flat
   top/bottom (the box's own straight sides), leaving the four angled edges
   with no visible outline at all (reported 2026-09-16). Faked instead as a
   two-layer "ring": this outer layer is filled solid with the border
   color and clipped to the hex; .slot-shape-hex-fill sits inset by 1px
   inside it, filled with the interior color and clipped to the same hex -
   the 1px gap between the two reads as a true 6-sided outline. */
.slot-shape.hex {
    border: none;
    background: var(--drawer-border);
    padding: 1px;
    box-sizing: border-box;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.slot-shape-hex-fill {
    width: 100%;
    height: 100%;
    background: var(--viewport-bg);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Label tab's real top-down footprint (see LABEL_TAB_REACH_MM in
   designer-script.js) - a diagonal-hash overlay on the tray's own back
   edge, so it's obvious how far the tab reaches into the tray before it's
   even generated. Switches to the warning (amber) treatment when that
   reach eats a large share of the tray's own depth - see
   updateTrayLabelTab()'s "tight" check - since that's exactly when it can
   start blocking access to items stored at the back. */
.label-tab-footprint {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    border-bottom: 1px dashed var(--line);
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        var(--line) 4px,
        var(--line) 5px
    );
    opacity: 0.35;
}

.label-tab-footprint.tight {
    border-bottom: 1px dashed var(--button-primary-bg);
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        var(--button-primary-bg) 4px,
        var(--button-primary-bg) 5px
    );
    opacity: 0.55;
}

.slot-warning {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    border: 1px dashed var(--button-primary-bg);
    background: transparent;
    color: var(--button-primary-bg);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Mode-switch autosave restore notice - see switchMode() in
   designer-script.js. Non-blocking (unlike alert()) since restoring is
   automatic, not a choice the customer needs to dismiss. */
.autosave-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    max-width: min(90vw, 420px);
    padding: 12px 18px;
    background: var(--signal);
    color: var(--signal-ink);
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

.autosave-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tray label/dimensions/position text. This class existed in CSS already
   but was never actually applied by designer-script.js's generated markup
   - the label sat as a plain, unpositioned div, which meant divider-line
   and slot-shape (both `position:absolute` with their own z-index) always
   painted OVER it regardless of DOM order, since positioned siblings
   always stack above static in-flow content. Reported 2026-09-16 as "looks
   like it's on the base layer" - exactly that. Applying this class (see
   designer-script.js) gives the text its own stacking context above both. */
.tray-content {
    position: relative;
    z-index: 10;
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    gap: 1px;
    padding: 2px;
    box-sizing: border-box;
}

/* Small trays (see updateTrayDisplay()'s `compact` check) show only the
   name, in a smaller size, ellipsized instead of wrapping/overflowing the
   tray's own bounds - three lines of fixed 10px text simply cannot fit a
   tray that's only 20-30px tall on screen. */
.tray-content.compact {
    font-size: 8px;
}

.tray-content .tray-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* .tray-content above sets pointer-events:none so it doesn't block
       drag/select on the tray body - the label itself needs it back for
       its own click-to-rename handler. */
    pointer-events: auto;
    cursor: text;
}