/* =============================================================
 * Chemistry Summary - AG Grid + filter toolbar styles
 * Mirrors patterns from power-curtailment / caster-production /
 * vtd-production: standard checkboxes (no chips), auto-refresh
 * pill with countdown, and flex-wrap toolbar.
 * ============================================================= */

/* ---- Toolbar layout ---- */
.toolbar-card {
    border: 1px solid #e5e7eb;
}
.toolbar-row {
    gap: 12px 14px;            /* row-gap col-gap */
    padding: 2px 0;
}
.toolbar-row-secondary {
    border-top: 1px dashed #e5e7eb;
    padding-top: 10px;
    margin-top: 10px;
}
.toolbar-left {
    gap: 8px 14px;
    flex: 1 1 auto;
    min-width: 0;
}
.toolbar-right {
    gap: 10px;
    flex-shrink: 0;
}

/* ---- Grid sizing ---- */
.processes-grid-container.ag-theme-alpine {
    height: 65vh;
    border: 1px solid #ccc;
}
.ag-root-wrapper.ag-layout-normal.ag-ltr {
    height: 65vh;
}

/* ---- AG Grid header look (matches the family) ---- */
.ag-theme-alpine .ag-header {
    background-color: #f8f8f8;
    border-bottom: 1px solid #babfc7;
}
.ag-theme-alpine .ag-header-group-cell-label,
.ag-theme-alpine .ag-header-cell-label {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell {
    padding-left: 8px;
    padding-right: 8px;
    margin: 0;
}
.processes-grid-container .ag-theme-alpine {
    --ag-header-height: 40px;
}

/* Loading overlay - white card (matches caster-production) */
.ag-theme-alpine .ag-overlay-loading-center {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

/* =============================================================
 * Heat picker — ONE box, no double border.
 * The container draws the only border. Every child is hard-reset
 * because Bootstrap 2's base styles ship inputs with their own
 * border + inset box-shadow + background, which would render
 * as a visible inner rectangle inside our container.
 * ============================================================= */
.heat-picker {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
    height: 37.78px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.heat-picker:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.heat-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0 10px;
    color: #6b7280;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.heat-picker-btn:hover { background-color: #f3f4f6; color: #111827; }
.heat-picker-btn:disabled,
.heat-picker-btn[disabled] {
    color: #d1d5db;
    cursor: not-allowed;
    background-color: transparent;
}
.heat-picker-btn + .heat-picker-input-wrap,
.heat-picker-input-wrap + .heat-picker-btn,
.heat-picker-btn + .heat-picker-btn {
    border-left: 1px solid #e5e7eb;
}

.heat-picker-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    background-color: transparent;
    flex: 0 0 auto;
}

/* Hard reset — Bootstrap 2 applies border + box-shadow inset + margin to
   every text input; we negate ALL of them so only the parent container's
   border is visible. */
.heat-picker .heat-picker-input,
.heat-picker .heat-picker-input:focus,
.heat-picker input.heat-picker-input[type="text"] {
    border: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 28px 0 10px;
    height: 100%;
    width: 150px;
    min-height: 0;
    line-height: normal;
    font-size: 14px;
    background-color: transparent !important;
    border-radius: 0 !important;
    color: #111827;
    vertical-align: middle;
}

.heat-picker-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    z-index: 2;
}
.heat-picker-clear:hover { color: #ef4444; }

/* =============================================================
 * Date-vs-Heat precedence — when heat is active, dim the date
 * group AND the areas/only-missing block (the SP ignores those
 * params for a single-heat query, so showing them as "active"
 * would be misleading).
 * ============================================================= */
.filter-group.is-inactive,
.areas-group.is-inactive {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.4);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

/* =============================================================
 * Visual OR divider between date and heat groups
 * ============================================================= */
.filter-divider {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    height: 24px;
}
.filter-divider-line {
    display: inline-block;
    width: 1px;
    height: 22px;
    background-color: #d1d5db;
}
.filter-divider-text {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* =============================================================
 * Active filter status chip — gray (date) / blue (heat)
 * ============================================================= */
.active-filter-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.active-filter-status.is-heat {
    background-color: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.active-filter-status .fa { font-size: 11px; }

/* =============================================================
 * Auto-refresh pill — copied from power-curtailment so the
 * behavior is identical across operational screens.
 * ============================================================= */
.auto-refresh-pill {
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    min-width: 150px;
    justify-content: center;
    height: 28px;
}
.auto-refresh-pill.auto-on {
    background-color: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}
.auto-refresh-pill.auto-on:hover  { background-color: #d1fae5; }
.auto-refresh-pill.auto-off {
    background-color: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}
.auto-refresh-pill.auto-off:hover { background-color: #e5e7eb; }

.auto-refresh-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9ca3af;
}
.auto-refresh-dot.is-on {
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Last updated label (sits next to the auto-refresh pill) */
.last-updated {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
    margin-left: 14px;
    white-space: nowrap;
}
.last-updated-label { color: #9ca3af; }
.last-updated-value { color: #374151; font-weight: 500; margin-left: 2px; }

/* =============================================================
 * Areas block (Only Missing + 7 area checkboxes)
 * Standard checkboxes with clear spacing — no chip styling, to
 * stay consistent with the rest of the project.
 * ============================================================= */
.areas-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-left: 14px;
}
.areas-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 600;
}
.areas-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #e5e7eb;
}
.cb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    font-size: 13px;
    color: #374151;
}
.cb-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: #2563eb;
}
.cb-item .cb-label { line-height: 1; }
.cb-item:hover .cb-label { color: #111827; }

.only-missing-cb .cb-label { font-weight: 500; }

/* =============================================================
 * Legend strip — three states
 * ============================================================= */
.legend-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #e5e7eb;
}
.legend-strip-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 600;
    margin-right: 6px;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.legend-text { line-height: 1; font-size: 13px; color: #374151; }

/* =============================================================
 * Sample-count bullets (in the legend AND inside AG Grid cells)
 * Red × = 0 samples, yellow ✓ = 1, green ✓ = 2+
 * ============================================================= */
.bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid;
    vertical-align: middle;
    font-size: 11px;
    line-height: 1;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.bullet .fa { color: #fff; line-height: 1; margin: 0; padding: 0; }
.bullet.no-samples  { background-color: #dc2626; border-color: #991b1b; }
.bullet.one-sample  { background-color: #f59e0b; border-color: #b45309; }
.bullet.one-sample .fa { color: #422006; }
.bullet.two-samples { background-color: #16a34a; border-color: #15803d; }

/* =============================================================
 * Heat link cell (matches eaf-electrode-events / vtd-production)
 * ============================================================= */
.heat-link {
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}
.heat-link:hover { color: #1e40af; }

/* =============================================================
 * Typeahead extended popup z-index so it floats above the grid
 * ============================================================= */
.typeahead.dropdown-menu {
    z-index: 10001 !important;
}
