/* ============================================================== */
/* OpenCell-specific styles.                                      */
/* Base typography, fonts, brand chrome, tabs, cards, scrollbars, */
/* and .steer-modal styling come from steer-app-kit               */
/* (steer-base.css), which loads before this file.                */
/* ============================================================== */

/* Landing page card hover animations */
.landing-card {
    transition: all 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.landing-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
    border-color: #8B2635 !important;
}

.landing-card:active {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1) !important;
}

.landing-card-disabled {
    transition: none !important;
    cursor: not-allowed !important;
    filter: grayscale(100%);
    opacity: 0.5;
}

.landing-card-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Conditional disabled (requires loaded cell) - visually distinct from permanent disabled */
/* No grayscale filter - these are "pending" not "unavailable" */
.landing-card-conditional-disabled {
    transition: none !important;
    cursor: not-allowed !important;
    /* Note: NO pointer-events:none here - we need hover for tooltips */
}

.landing-card-conditional-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 1240px) {
    .landing-cards-grid {
        grid-template-columns: repeat(3, 240px) !important;
    }
}

@media (max-width: 1100px) {
    .landing-card,
    .landing-card-disabled,
    .landing-card-conditional-disabled {
        width: 240px !important;
        height: 250px !important;
    }

    #current_cell_card {
        width: 360px !important;
    }
}

@media (max-width: 860px) {
    .landing-cards-grid {
        grid-template-columns: repeat(2, 240px) !important;
    }
}

@media (max-width: 760px) {
    #landing_top_right {
        position: static !important;
        max-width: calc(100% - 32px) !important;
        margin: 16px auto 0 !important;
        justify-content: center !important;
    }

    #current_cell_card {
        width: 100% !important;
        max-width: 420px !important;
    }

    .landing-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
        gap: 20px !important;
        padding: 0 16px !important;
    }

    .landing-card,
    .landing-card-disabled,
    .landing-card-conditional-disabled {
        width: 100% !important;
        max-width: 280px !important;
        height: 240px !important;
        justify-self: center !important;
    }
}

@media (max-width: 1100px) {
    .database-explorer-content-row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .database-explorer-side-panel,
    .database-explorer-results-panel {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.cell-loader-upload {
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.cell-loader-upload:hover {
    border-color: #8B2635 !important;
    background-color: #fff7f8 !important;
    box-shadow: 0 6px 18px rgba(139, 38, 53, 0.08);
}

.cell-loader-actions button:disabled {
    cursor: not-allowed !important;
    opacity: 0.48 !important;
    filter: grayscale(0.2);
}

.about-card-grid,
.about-capability-grid {
    align-items: stretch;
}

.bom-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.bom-plot {
    transition: min-height 0.15s ease, height 0.15s ease;
}

.result-graph-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.result-graph-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.result-graph {
    width: 100%;
    min-height: 520px;
}

.result-graph-small {
    min-height: 360px;
}

.result-graph-tall {
    min-height: 800px;
}

.result-graph-xl {
    min-height: 1100px;
}

.result-graph-xxl {
    min-height: 1300px;
}

.result-graph .js-plotly-plot,
.result-graph .plot-container,
.result-graph .svg-container {
    width: 100% !important;
}

@media (max-width: 1100px) {
    .cell-loader-content-row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .cell-loader-side-panel,
    .cell-loader-results-panel {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bom-content-row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .bom-side-panel,
    .bom-results-panel {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bom-scroll-area {
        max-height: none !important;
        overflow-y: visible !important;
    }

    .design-workspace {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .design-editor-card,
    .design-results-card {
        flex: 1 1 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 760px) {
    .database-explorer-page {
        padding: 1rem !important;
    }

    .database-explorer-side-panel,
    .database-explorer-results-panel {
        padding: 18px !important;
    }

    .database-explorer-graph {
        height: 58vh !important;
        min-height: 380px !important;
    }

    .cell-loader-page {
        padding: 1rem !important;
    }

    .cell-loader-side-panel,
    .cell-loader-results-panel {
        padding: 18px !important;
    }

    .cell-loader-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .cell-loader-actions button {
        width: 100% !important;
    }

    .about-page {
        padding: 1rem !important;
    }

    .about-content {
        max-width: none !important;
    }

    .about-card-grid,
    .about-capability-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .bom-page {
        padding: 1rem !important;
    }

    .bom-side-panel,
    .bom-results-panel {
        padding: 18px !important;
    }

    .bom-toolbar,
    .bom-dropdown-container {
        align-items: stretch !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .bom-plot-dropdown,
    .bom-plot-dropdown .Select,
    .bom-plot-dropdown .Select-control {
        width: 100% !important;
    }

    .bom-plot {
        height: 66vh !important;
        min-height: 520px !important;
        padding: 8px !important;
    }

    .design-page {
        padding: 1rem !important;
    }

    .design-editor-card,
    .design-results-card {
        padding: 18px !important;
    }

    .dash-tabs {
        border-radius: 16px !important;
        width: 100% !important;
    }
}

/* Login wall styles */
.login-wall-button {
    transition: all 0.2s ease !important;
}

/* Ensure T&C modal and its backdrop render above the login wall (z-index: 9999).
   The backdrop class is scoped so it does NOT affect other modals. */
#terms_modal {
    z-index: 10001 !important;
}

#terms_modal .modal-dialog {
    z-index: 10002 !important;
}

.terms-modal-backdrop {
    z-index: 10000 !important;
}

.login-wall-button:hover {
    background-color: #6D1E29 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(139, 38, 53, 0.35) !important;
}

.login-wall-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(139, 38, 53, 0.25) !important;
}

.login-wall-card {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Warning indicator on the warnings results tab */
.warning-tab-active {
    color: #dc2626 !important;
    background-color: rgba(220, 38, 38, 0.08) !important;
    font-weight: 600 !important;
}

/* Modern results tabs */
.results-tab-style {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: 2px;
    font-weight: 600;
    position: relative;
    white-space: nowrap;
}

.results-tab-style:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

.results-tab-selected-style {
    color: #8B2635;
    background-color: #ffffff;
    box-shadow: inset 0 -2px 0 #8B2635, 0 1px 4px rgba(15, 23, 42, 0.08);
    font-weight: 700;
}

/* Compact wrapping tabs for the Analysis Dashboard */
.analysis-tabs-wrapper {
    width: 100%;
}

.analysis-tabs {
    width: 100%;
    border-bottom: none;
    margin-bottom: 16px;
    background: #f8fafc;
    padding: 6px;
    border-radius: 12px;
}

.analysis-tabs .tab-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.analysis-tab-style {
    flex: 1 1 150px;
    min-width: 130px;
    max-width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.2;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    white-space: normal;
    text-align: center;
}

.analysis-tab-style:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

.analysis-tab-selected-style {
    color: #8B2635;
    background-color: #ffffff;
    box-shadow: inset 0 -2px 0 #8B2635, 0 1px 4px rgba(15, 23, 42, 0.08);
    font-weight: 700;
}

/* Two-row tabs for design component selection */
.design-component-tabs-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch;
}

.design-component-tabs {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    border-bottom: none;
    margin-bottom: 16px;
    background: #f8fafc;
    padding: 6px;
    border-radius: 12px;
}

.design-component-tabs-wrapper .tab-container {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.design-component-tabs.tab-container,
.design-component-tabs .tab-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: stretch;
    gap: 6px;
    width: 100% !important;
}

.design-component-tab-style {
    width: auto !important;
    min-height: 42px;
    min-width: 0;
    max-width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
    line-height: 1.2;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    white-space: normal;
    text-align: center;
}

.design-component-tab-style:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

.design-component-tab-selected-style {
    color: #8B2635;
    background-color: #ffffff;
    box-shadow: inset 0 -2px 0 #8B2635, 0 1px 4px rgba(15, 23, 42, 0.08);
    font-weight: 700;
}

.design-selector,
.design-results-selector {
    width: 100%;
}

.design-selector .Select-control,
.design-results-selector .Select-control {
    min-height: 42px;
    background-color: #ffffff !important;
}

.design-selector .Select-value,
.design-results-selector .Select-value {
    font-weight: 700;
    color: #1e293b;
}

@media (max-width: 900px) {
    .design-component-tabs .tab-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analysis-tab-style {
        flex-basis: 45%;
        min-width: 120px;
    }
}

@media (max-width: 520px) {
    .design-component-tabs .tab-container {
        grid-template-columns: 1fr;
    }

    .analysis-tab-style {
        flex-basis: 100%;
    }
}


.cell-schematic-button:hover {
    transform: scale(1.05);
}

.cell-schematic-button:active {
    transform: scale(0.98);
}

/* Top-right action menu chrome comes from steer-app-kit (steer-base.css) */

/* Cell card menu styling */
.cell-card-menu .btn {
    padding: 4px 8px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #64748b;
    transition: all 0.15s ease;
    line-height: 1;
}

.cell-card-menu .btn:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

.cell-card-menu .btn:focus {
    box-shadow: 0 0 0 2px rgba(139, 38, 53, 0.2);
    border-color: #8B2635;
}

.cell-card-menu .dropdown-menu {
    min-width: 160px;
    padding: 6px;
    margin-top: 4px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.95);
}

.cell-card-menu .dropdown-item {
    padding: 8px 12px;
    font-size: 14px;
    color: #1e293b;
    border-radius: 5px;
    transition: all 0.1s ease;
}

.cell-card-menu .dropdown-item:hover:not(.disabled) {
    background-color: #f1f5f9;
    color: #0f172a;
}

.cell-card-menu .dropdown-item:active:not(.disabled) {
    background-color: #e2e8f0;
    color: #0f172a;
}

.cell-card-menu .dropdown-item.disabled {
    color: #94a3b8;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Cell card menu: Delete item styling */
.cell-card-menu .dropdown-item.text-danger {
    color: #dc2626;
}

.cell-card-menu .dropdown-item.text-danger:hover {
    background-color: #fef2f2;
    color: #b91c1c;
}

/* Cell list item hover effects */
.cell-list-item:hover {
    background-color: #f8fafc !important;
    box-shadow: inset 3px 0 0 #8B2635;
    cursor: pointer;
}

.cell-list-item button:hover {
    background: linear-gradient(135deg, #6D1E29, #8B2635) !important;
}

/* Landing page card link hover (wrapping anchor) */
a:has(.landing-card):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #8B2635 !important;
}

a:has(.landing-card) {
    text-decoration: none !important;
}