/* =========================================================
   Shared Syncfusion grid — match operations/invoices (DashboardHome)
   Host: .iffys-sf-grid-host   Grid CssClass: iffys-sf-grid
   Uses !important where needed to beat syncfusion.css 1920px rules.
   ========================================================= */

.iffys-sf-grid-host {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.iffys-sf-grid-host .e-grid.iffys-sf-grid,
.iffys-sf-grid-host .e-grid,
.e-grid.iffys-sf-grid {
    border: none !important;
    height: 100% !important;
    max-height: 100%;
    width: 100%;
    font-family: inherit;
    font-size: 12px !important;
}

.iffys-sf-grid-host .e-grid .e-gridcontent,
.e-grid.iffys-sf-grid .e-gridcontent {
    overflow-y: auto !important;
}

.iffys-sf-grid-host .e-grid .e-gridheader,
.e-grid.iffys-sf-grid .e-gridheader {
    border-bottom: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

/* ── Headers (match /operations/invoices) ── */
.iffys-sf-grid-host .e-grid .e-headercell,
.iffys-sf-grid-host .e-grid .e-stackedheadercell,
.e-grid.iffys-sf-grid .e-headercell,
.e-grid.iffys-sf-grid .e-stackedheadercell {
    height: auto !important;
    vertical-align: middle !important;
    padding: 0.3rem 0.35rem !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #334155 !important;
}

.iffys-sf-grid-host .e-grid .e-headercell .e-headercelldiv,
.iffys-sf-grid-host .e-grid .e-headercell .e-headertext,
.iffys-sf-grid-host .e-grid .e-stackedheadercelldiv,
.e-grid.iffys-sf-grid .e-headercell .e-headercelldiv,
.e-grid.iffys-sf-grid .e-headercell .e-headertext,
.e-grid.iffys-sf-grid .e-stackedheadercelldiv {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #334155 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    height: auto !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.iffys-sf-grid-host .e-grid .e-headercell .e-headercelldiv,
.e-grid.iffys-sf-grid .e-headercell .e-headercelldiv {
    min-height: 28px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    gap: 0.15rem;
}

/* Excel filter funnel — visible gray, like invoices */
.iffys-sf-grid-host .e-grid .e-filtermenudiv,
.e-grid.iffys-sf-grid .e-filtermenudiv,
.iffys-sf-grid-host .e-grid .e-icons.e-filtermenudiv,
.e-grid.iffys-sf-grid .e-icons.e-filtermenudiv {
    color: #64748b !important;
    font-size: 12px !important;
    opacity: 1 !important;
}

.iffys-sf-grid-host .e-grid .e-filtered::before,
.e-grid.iffys-sf-grid .e-filtered::before,
.iffys-sf-grid-host .e-grid .e-filtermenudiv.e-filtered,
.e-grid.iffys-sf-grid .e-filtermenudiv.e-filtered {
    color: #0b5ed7 !important;
}

/* ── Body cells ── */
.iffys-sf-grid-host .e-grid .e-rowcell,
.e-grid.iffys-sf-grid .e-rowcell {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: #0f172a !important;
    vertical-align: middle !important;
    height: auto !important;
    text-overflow: clip !important;
    overflow: visible !important;
    border-color: #e2e8f0 !important;
    padding: 0.28rem 0.4rem !important;
}

.iffys-sf-grid-host .e-grid .e-rowcell button,
.iffys-sf-grid-host .e-grid .e-rowcell span,
.iffys-sf-grid-host .e-grid .e-rowcell label,
.e-grid.iffys-sf-grid .e-rowcell button,
.e-grid.iffys-sf-grid .e-rowcell span,
.e-grid.iffys-sf-grid .e-rowcell label {
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
}

.iffys-sf-grid-host .e-grid .e-rowcell .e-ellipsistooltip,
.iffys-sf-grid-host .e-grid .e-rowcell > .e-ellipsistooltip,
.e-grid.iffys-sf-grid .e-rowcell .e-ellipsistooltip,
.e-grid.iffys-sf-grid .e-rowcell > .e-ellipsistooltip {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    overflow: visible !important;
    display: block;
    line-height: 1.2;
    font-size: inherit !important;
}

/* Zebra + hover + selection (invoices-like) */
.iffys-sf-grid-host .e-grid .e-altrow .e-rowcell,
.e-grid.iffys-sf-grid .e-altrow .e-rowcell {
    background: #f8fafc !important;
}

.iffys-sf-grid-host .e-grid .e-row:hover .e-rowcell,
.e-grid.iffys-sf-grid .e-row:hover .e-rowcell {
    background: #eef5fb !important;
}

.iffys-sf-grid-host .e-grid .e-row.e-active .e-rowcell,
.iffys-sf-grid-host .e-grid .e-selectionbackground,
.e-grid.iffys-sf-grid .e-row.e-active .e-rowcell,
.e-grid.iffys-sf-grid .e-selectionbackground {
    background: rgba(15, 76, 117, 0.12) !important;
}

/* Action icon buttons */
.iffys-sf-grid-host .iffys-sf-actions,
.e-grid.iffys-sf-grid .iffys-sf-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    flex-wrap: nowrap;
}

.iffys-sf-grid-host .iffys-sf-icon-btn,
.e-grid.iffys-sf-grid .iffys-sf-icon-btn {
    border: none;
    background: transparent;
    color: #0f4c75;
    padding: 0.15rem 0.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.iffys-sf-grid-host .iffys-sf-icon-btn:hover,
.e-grid.iffys-sf-grid .iffys-sf-icon-btn:hover {
    background: #e2e8f0;
}

.iffys-sf-grid-host .iffys-sf-icon-btn--danger,
.e-grid.iffys-sf-grid .iffys-sf-icon-btn--danger {
    color: #b91c1c;
}

.iffys-sf-grid-host .iffys-sf-badge,
.e-grid.iffys-sf-grid .iffys-sf-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 800 !important;
}

.iffys-sf-grid-host .iffys-sf-badge--ok,
.e-grid.iffys-sf-grid .iffys-sf-badge--ok {
    background: #dcfce7;
    color: #166534;
}

.iffys-sf-grid-host .iffys-sf-badge--bad,
.e-grid.iffys-sf-grid .iffys-sf-badge--bad {
    background: #fee2e2;
    color: #991b1b;
}

.iffys-sf-grid-host .iffys-sf-locked,
.e-grid.iffys-sf-grid .iffys-sf-locked {
    color: #b45309;
    font-size: 14px !important;
}

/* Keep 12px even on large desktops (override syncfusion.css 15px !important) */
@media (min-width: 1920px) {
    .iffys-sf-grid-host .e-grid .e-headercell,
    .iffys-sf-grid-host .e-grid .e-stackedheadercell,
    .iffys-sf-grid-host .e-grid .e-rowcell,
    .iffys-sf-grid-host .e-grid .e-headercell .e-headertext,
    .iffys-sf-grid-host .e-grid .e-headercell .e-headercelldiv,
    .e-grid.iffys-sf-grid .e-headercell,
    .e-grid.iffys-sf-grid .e-stackedheadercell,
    .e-grid.iffys-sf-grid .e-rowcell,
    .e-grid.iffys-sf-grid .e-headercell .e-headertext,
    .e-grid.iffys-sf-grid .e-headercell .e-headercelldiv {
        font-size: 12px !important;
    }
}

@media (max-width: 1919px) {
    .iffys-sf-grid-host .e-grid .e-rowcell,
    .iffys-sf-grid-host .e-grid .e-rowcell button,
    .iffys-sf-grid-host .e-grid .e-rowcell span,
    .e-grid.iffys-sf-grid .e-rowcell,
    .e-grid.iffys-sf-grid .e-rowcell button,
    .e-grid.iffys-sf-grid .e-rowcell span {
        font-size: 11px !important;
    }

    .iffys-sf-grid-host .e-grid .e-headercell .e-headertext,
    .iffys-sf-grid-host .e-grid .e-headercell .e-headercelldiv,
    .e-grid.iffys-sf-grid .e-headercell .e-headertext,
    .e-grid.iffys-sf-grid .e-headercell .e-headercelldiv {
        font-size: 12px !important;
    }
}