/* ============================================================
   ChETL Tab System
   ============================================================
   Sections 4.8 Unified Tab System, 4.9 3D Geometry,
   4.10 Clarity Refinement.
   Must load AFTER components.css.
   ============================================================ */

/* =============================================
   4.8 Unified Tab System
   Scoped to .chetl-tabs — structured engineering segment tabs
   ============================================= */

/* Strip container: flat surface-subtle bar, full width, no shadow by default */
.q-tabs.chetl-tabs {
    background: var(--surface-subtle) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 4px 4px 0 0 !important;
    padding: 3px 4px 0 4px !important;
    overflow: visible !important;
    width: 100% !important;
}

/* Enable proper tab-to-panel merge by removing strip floor */
.q-tabs.chetl-tabs {
    border-bottom: none !important;
}

/* Module-level strip: slight structural shadow (dominant band) */
.q-tabs.chetl-tabs.module-tabs {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Remove Quasar underline indicator */
.q-tabs.chetl-tabs .q-tab__indicator {
    display: none !important;
}

/* Left-align tabs within Quasar's internal flex wrapper */
.q-tabs.chetl-tabs .q-tabs__content {
    justify-content: flex-start !important;
}

/* Inactive tab: bordered segment, flat, sits on strip floor */
.q-tabs.chetl-tabs .q-tab {
    border-radius: 3px 3px 0 0 !important;
    margin: 0 1px 0 0 !important;
    min-height: 32px !important;
    background: var(--surface-subtle) !important;
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    border: 1px solid var(--border-muted) !important;
    border-bottom: 1px solid var(--border-strong) !important;
}

/* Override Quasar's .q-tab--inactive reduced opacity */
.q-tabs.chetl-tabs .q-tab.q-tab--inactive {
    opacity: 1 !important;
}

/* Active tab: elevated surface, raised above strip, no bottom border.
   margin-bottom: -1px extends tab 1px below strip to merge with
   a .chetl-content-panel (border-top: none) placed below. */
.q-tabs.chetl-tabs .q-tab.q-tab--active {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong) !important;
    border-bottom: none !important;
    margin-bottom: -1px !important;
    position: relative !important;
    z-index: 2 !important;
    /* flat selection cue: a 2px accent bar along the top edge (no 3D highlight) */
    box-shadow: inset 0 2px 0 var(--accent-primary) !important;
}

/* Active inner content: transparent so tab bg shows through */
.q-tabs.chetl-tabs .q-tab.q-tab--active .q-tab__content {
    background: transparent !important;
}

/* Active tab label: neutral text-primary by default (all levels) */
.q-tabs.chetl-tabs .q-tab.q-tab--active .q-tab__label {
    color: var(--text-primary) !important;
}

/* Accent label ONLY on module-level active tab in chetl theme */
.theme-chetl .q-tabs.chetl-tabs.module-tabs .q-tab.q-tab--active .q-tab__label {
    color: var(--accent-primary) !important;
}

/* Active tab hover: maintain elevated state */
.q-tabs.chetl-tabs .q-tab.q-tab--active:hover {
    background: var(--surface-elevated) !important;
}

/* Neutralize q-focus-helper overlay */
.q-tabs.chetl-tabs .q-tab .q-focus-helper {
    display: none !important;
}

/* Inactive tab hover: slight surface lift, label comes forward */
.q-tabs.chetl-tabs .q-tab.q-tab--inactive:hover {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
}

/* --- Per-level font size -> assets/styles/ui_typography.css --- */

/* Module tabs: font-weight stays here; font-size in ui_typography.css */
.q-tabs.chetl-tabs.module-tabs .q-tab__label {
    font-weight: 600 !important;
}

/* Property tabs */
.q-tabs.chetl-tabs.property-tabs .q-tab__label {
    font-weight: 500 !important;
}

/* Workspace tabs */
.q-tabs.chetl-tabs.workspace-tabs .q-tab__label {
    font-weight: 500 !important;
}

/* --- Per-level height & padding (Phase 5 tier differentiation) --- */

/* Module tabs: tallest, most dominant */
.q-tabs.chetl-tabs.module-tabs .q-tab {
    min-height: 38px !important;
    padding: 0 14px !important;
}

/* Property tabs: medium height */
.q-tabs.chetl-tabs.property-tabs .q-tab {
    min-height: 34px !important;
    padding: 0 12px !important;
}

/* Workspace tabs: lightest — shortest, muted borders */
.q-tabs.chetl-tabs.workspace-tabs .q-tab {
    min-height: 30px !important;
    padding: 0 10px !important;
    border-color: var(--border-muted) !important;
    border-bottom-color: var(--border-muted) !important;
}

/* Content panel below a tab strip.
   Add class "chetl-content-panel" to the container element in Python.
   border-top: none + active tab margin-bottom: -1px = visual merge. */
.chetl-content-panel {
    border: 1px solid var(--border-strong);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: var(--surface-elevated);
}

/* =============================================
   4.9 Flat clarity (supersedes the earlier 3D/folder passes)
   -----------------------------------------------------------
   Calmer, more timeless, and far less to maintain: tabs sit flat
   inside hairline borders; selection is carried by the accent bar
   (set on .q-tab--active above), not by drop shadows or highlights.
   ============================================= */

/* Inactive tabs: flat segments on the strip, tokenised edges */
.q-tabs.chetl-tabs .q-tab:not(.q-tab--active) {
    background: var(--surface-subtle);
    border: 1px solid var(--border-muted);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: none !important;
}

/* Active tab stays flat — the accent top-bar is the only cue */
.q-tabs.chetl-tabs .q-tab.q-tab--active {
    z-index: 3 !important;
}

/* Content panel: hairline border only (no shadow) */
.chetl-content-panel {
    box-shadow: none;
}