/* ============================================================
   The Foundry — Monitor Style CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}

/* Remove Dash default margins */
#_dash-app-content {
    margin: 0;
}

/* Sidebar nav icon hover */
.nav-icon:hover {
    background: #f5f5f5 !important;
    color: #2c2c2c !important;
}

/* Sidebar nav tooltips */
.nav-item-wrapper:hover .nav-tooltip {
    opacity: 1 !important;
}

.nav-icon.active {
    background: #000 !important;
    color: #fff !important;
}

/* Table row hover */
table tbody tr:hover {
    background: #fafafa !important;
}

/* Input focus states */
input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Dropdown styling */
.Select-control {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    height: 40px !important;
}

.Select-control:hover {
    border-color: #9ca3af !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Job detail tabs — flush content against tab strip */
#job-detail-tabs .nav-tabs {
    margin-bottom: 0 !important;
}

#job-detail-tabs .tab-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#job-detail-tabs .tab-content > .tab-pane {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── CLS fixes — reserve space for dynamic containers ─────────────────────
   Without min-height, these containers start at 0px and jump when Dash
   populates them, causing large Cumulative Layout Shift scores.          */

/* Jobs table on dashboard */
#jobs-table-container            { min-height: 200px; }

/* Board models results */
#bm-table-container              { min-height: 200px; }

/* Spec config cards */
#sc-tables                       { min-height: 100px; }

/* Admin page dynamic areas */
#ac-table-container,
#rl-lists-container              { min-height: 80px; }

/* Model detail content */
#model-detail-content            { min-height: 200px; }

/* Job detail dynamic sections */
#job-detail-content              { min-height: 120px; }

/* ── Loading overlay — pointer events must not block body when overlay
   is being cleared by foundry_perf.js                                    */
._dash-loading {
    margin: 40px auto;
}

._dash-loading-callback {
    background-color: transparent !important;
}

/* Override Dash default purple spinner color */
._dash-loading ._dash-loading-spinner,
.dash-spinner-container .dash-spinner,
.dash-loading-callback,
[data-dash-is-loading="true"] {
    color: #9ca3af !important;
}

._dash-loading ._dash-loading-spinner circle,
.dash-loading-callback circle {
    stroke: #9ca3af !important;
}

/* Burton mountain watermark inside table containers */
[id$="-table-container"] {
    position: relative;
}

[id$="-table-container"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/burton-mtn-watermark.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 65%;
    opacity: 0.06;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

/* Keep table content above the watermark */
[id$="-table-container"] > * {
    position: relative;
    z-index: 1;
}