/* ===== Sheet tabs ===== */
.sheet-tabs {
    display: flex;
    gap: 2px;
    background: #4c5158;
    padding: 8px 12px 0;
    flex-shrink: 0;
    overflow-x: auto;
}
.sheet-tab {
    border: none;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: #c9cdd2;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 8px 8px 0 0;
    padding: 9px 16px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all var(--duration-fast) ease;
    border-bottom: 2px solid transparent;
}
.sheet-tab i { font-size: 11px; opacity: 0.8; }
.sheet-tab:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sheet-tab.active { background: var(--desk-bg); color: #fff; border-bottom-color: #58a6dd; }
.sheet-tab .sheet-no { font-size: 9.5px; opacity: 0.65; font-weight: 600; }

/* ===== Viewport toolbar ===== */
.viewport-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(30, 34, 40, 0.35);
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    /* lift the toolbar's stacking context above the drawing viewport so the
       Dims dropdown isn't painted behind the sheet */
    position: relative;
    z-index: 60;
}
.vt-group {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    padding: 3px;
}
.vt-btn {
    border: none;
    background: transparent;
    color: #dfe3e8;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
}
.vt-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.vt-btn.primary { background: var(--primary-color); color: #fff; }
.vt-btn.primary:hover { background: #0068b5; }
.vt-zoom-label { color: #c9cdd2; font-size: 11px; min-width: 42px; text-align: center; user-select: none; }
.vt-spacer { flex: 1; }
.vt-scale-note { color: #aab0b7; font-size: 10.5px; user-select: none; }

/* Dim-group toggle popover */
.dim-toggle-wrap { position: relative; }
.dim-toggle-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    min-width: 200px;
    z-index: 90;
    padding: 8px;
}
.dim-toggle-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-color);
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
}
.dim-toggle-menu label:hover { background: var(--primary-light); }

/* ===== The paper sheet ===== */
.sheet-paper {
    background: #fdfdfb;
    box-shadow: var(--shadow-paper);
    border-radius: 1px;
}
.sheet-paper svg { display: block; }

/* SVG styling is emitted inline by svg-renderer.js so exported SVG/PDF is
   self-contained. Only interactive highlight styles live here (CSS rules
   override the inline presentation attributes). */

/* dim highlight support for steel/concrete layers is inline via svg-renderer */

/* click-to-edit dimensions */
.dim-editable { cursor: pointer; }
.dim-editable:hover { fill: #005A9C; font-weight: bold; text-decoration: underline; }

/* dim highlight on compliance-check click */
.dim-highlight .lyr-DIMS { stroke: #d32f2f; stroke-width: 1.4; }
.dim-highlight .lyr-DIMS-FILL { fill: #d32f2f; }
.dim-highlight text { fill: #d32f2f !important; font-weight: bold; }

g[data-check-id] { transition: opacity var(--duration-fast) ease; }

/* ===== Print (PDF fallback) ===== */
@media print {
    body > .app, .modal-backdrop { display: none !important; }
    .print-host { display: block !important; }
    .print-host .sheet-paper { box-shadow: none; page-break-after: always; }
    @page { size: A3 landscape; margin: 0; }
    html, body { overflow: visible; background: #fff; }
}