/* Copyright (c) 2026 Barry Adams / CADcoLabs. All rights reserved. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #app { height: 100%; }

body {
    font-family: "Segoe UI", system-ui, sans-serif;
    background: #1e1e1e;
    color: #e0e0e0;
}

#app { display: flex; }

#panel {
    width: 400px;
    flex-shrink: 0;
    padding: 16px;
    background: #252526;
    overflow-y: auto; /* fallback only; layout is sized to avoid scrolling */
    display: flex;
    flex-direction: column;
}

#panel h1 { font-size: 1.1rem; margin-bottom: 14px; }

#param-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

/* Everything flows two per row; only the components fieldset spans both. */
#param-form > fieldset { grid-column: 1 / -1; }

#components {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}

#components > #posts-row { grid-column: 1 / -1; }

#param-form label {
    display: block;
    font-size: 0.82rem;
    margin-bottom: 8px;
}


#param-form input[type="number"],
#param-form select {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 5px;
    background: #333;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 4px;
}

#param-form label.check { display: flex; align-items: center; gap: 6px; }

/* The display rules above beat the UA [hidden] rule; restore it last. */
#param-form label[hidden] { display: none; }

#components {
    border: 1px solid #444;
    border-radius: 4px;
    padding: 8px 8px 0;
    margin-bottom: 10px;
}

#components legend {
    font-size: 0.8rem;
    color: #aaa;
    padding: 0 4px;
}

#post-treads-btn {
    margin-left: 6px;
    padding: 1px 8px;
    background: #3c3c3c;
    color: #d7ba7d;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
}

#post-treads-btn:hover { background: #4a4a4a; }

#posts_enabled:disabled + span, #posts-row:has(#posts_enabled:disabled) { color: #777; }

#check-btn, #generate-btn {
    width: 100%;
    margin-top: 8px;
    padding: 8px 4px;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}

#check-btn { background: #3a7d44; }
#check-btn:hover { background: #479853; }
#generate-btn { background: #0e639c; }
#generate-btn:hover { background: #1177bb; }
#check-btn:disabled, #generate-btn:disabled { background: #555; cursor: wait; }

#status { margin-top: 8px; font-size: 0.8rem; min-height: 2em; }
#status.error { color: #f48771; }

/* The FBC box takes whatever height remains in the sidebar; long content
   scrolls inside the panel, never the whole sidebar. */
#fbc-box {
    margin-top: 8px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#fbc-box h2 { font-size: 0.9rem; margin-bottom: 6px; color: #ccc; }

#fbc-panel {
    background: #1b1b1c;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 8px;
    font-size: 0.8rem;
    line-height: 1.5;
    flex: 1;
    min-height: 70px;
    overflow-y: auto;
}

#fbc-panel .placeholder { color: #777; }

.fbc-overall {
    font-weight: bold;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.fbc-line { margin-bottom: 2px; }
.fbc-line.spec { color: #bbb; }
.fbc-line.pass, .fbc-overall.pass { color: #4ec96a; }
.fbc-line.fail, .fbc-overall.fail { color: #f14c4c; }

.fbc-rec-head { margin-top: 8px; color: #e0e0e0; font-weight: bold; }
.fbc-rec { color: #d7ba7d; }

.note { margin-top: 8px; font-size: 0.72rem; color: #888; }

#viewer-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    background: #2d2d30;
    border-bottom: 1px solid #444;
    font-size: 0.8rem;
}

.tb-label { color: #aaa; margin-left: 6px; }
.tb-label:first-child { margin-left: 0; }

.tb-btn {
    padding: 4px 10px;
    background: #3c3c3c;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 0.8rem;
    cursor: pointer;
}

.tb-btn:hover { background: #4a4a4a; }

.tb-check {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    white-space: nowrap;
}

#toolbar select {
    padding: 3px 5px;
    background: #333;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 0.8rem;
}

#opacity-slider { width: 100px; }
#opacity-value { color: #aaa; min-width: 38px; }

#viewer { flex: 1; min-height: 0; }
#viewer canvas { display: block; }