/* =========================
   Scorecards (Summary Tiles)
   ========================= */
:root {
    --tile-border: #e2e5e9;
    --tile-bg: #ffffff;
    --tile-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.02);
    --tile-label: #1c2d55;
    --tile-value: #222;
    --tile-radius: 8px;
    --tile-gap: 16px;
}

.summary-tiles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--tile-gap); margin:4px 0 18px; padding:0 4px; }
.summary-tile { position:relative; display:flex; flex-direction:column; background:var(--tile-bg); border:1px solid var(--tile-border); border-radius:var(--tile-radius); padding:12px 14px 14px; box-shadow:var(--tile-shadow); box-sizing:border-box; min-height:92px; transition:box-shadow .18s ease, transform .18s ease; }
.summary-tile:hover { box-shadow:0 4px 12px -2px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.04); transform:translateY(-2px); }
.summary-label { font-size:13px; font-weight:600; letter-spacing:.3px; margin:0 0 8px; line-height:1.15; color:var(--tile-label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.summary-value { font-size:40px; font-weight:500; line-height:.95; letter-spacing:.5px; margin-top:auto; color:var(--tile-value); font-variant-numeric:tabular-nums; }
@media (max-width:900px){ .summary-tiles-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } .summary-value{ font-size:32px; } }
.tiles-loading { font-size:12px; color:#666; padding:4px 8px 12px; }

/* Percentage badges */
.pct-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px 3px; border-radius:14px; font-size:12px; font-weight:600; line-height:1.2; letter-spacing:.3px; background:#eceff3; color:#1c2d55; white-space:nowrap; }
.pct-badge i { font-size:14px; }
.pct-ok { background:#e6f6e6; color:#0d6b0d; border:1px solid #b9e6b9; }
.pct-warn { background:#fff8e1; color:#946200; border:1px solid #ffe1a6; }
.pct-danger { background:#fde5e5; color:#9e1c1c; border:1px solid #f7b7b7; }
.pct-badge:hover { filter:brightness(.97); }

/* Responsive stacked cells (mobile) */
/*.cell-stack { display:flex; flex-direction:column; align-items:flex-start; }
.cell-stack .cell-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; opacity:.7; }
.cell-stack .cell-value { font-size:13px; font-weight:500; }*/

/* Mobile layout: minimalist separators */
/*@media (max-width:720px){
  .dxbl-grid.stop-totals-grid .dxbl-grid-table thead { display:none; }
  .dxbl-grid.stop-totals-grid .dxbl-grid-table tr { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); padding:10px 10px 4px; background:#fff; }
  .dxbl-grid.stop-totals-grid .dxbl-grid-table td { border:none !important; padding:6px 6px 10px !important; position:relative; }*/
  /* subtle line under each field */
  /*.dxbl-grid.stop-totals-grid .dxbl-grid-table td::after { content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:linear-gradient(to right,#dfe3e8,#f4f6f8); }
  .dxbl-grid.stop-totals-grid .dxbl-grid-table td:last-child::after { display:none; }*/
  /* separator between records */
  /*.dxbl-grid.stop-totals-grid .dxbl-grid-table tr + tr { margin-top:12px; padding-top:16px; border-top:2px solid #d0d6dc; }
}*/

/* Mobile layout: minimalist separators */
@media (max-width:720px) {
    .dxbl-grid.stop-totals-grid .dxbl-grid-table thead {
        display: none;
    }

    .dxbl-grid.stop-totals-grid .dxbl-grid-table tr {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        padding: 10px 10px 6px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .dxbl-grid.stop-totals-grid .dxbl-grid-table td {
        border: none !important;
        padding: 6px 6px 10px !important;
        position: relative;
    }

        /* subtle line under each field */
        .dxbl-grid.stop-totals-grid .dxbl-grid-table td::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 2px;
            height: 1px;
            background: linear-gradient(to right, #e5e7eb, #f9fafb);
        }

        .dxbl-grid.stop-totals-grid .dxbl-grid-table td:last-child::after {
            display: none;
        }

}


/* Base stacked cell */
.cell-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

    .cell-stack .cell-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .5px;
        opacity: .7;
    }

    .cell-stack .cell-value {
        font-size: 13px;
        font-weight: 500;
    }

/* MOBILE: turn the table into block cards so cells fill 100% */
@media (max-width: 720px) {
    .dxbl-grid.stop-totals-grid .dxbl-grid-table thead {
        display: none;
    }

    /* Break table semantics to avoid table layout constraints */
    .dxbl-grid.stop-totals-grid .dxbl-grid-table,
    .dxbl-grid.stop-totals-grid .dxbl-grid-table tbody {
        display: block;
        width: 100%;
    }

        .dxbl-grid.stop-totals-grid .dxbl-grid-table tr {
            display: block;
            background: #fff;
            padding: 12px 12px 8px;
            margin: 0 0 12px 0;
            border-radius: 10px;
            box-shadow: 0 1px 2px rgba(0,0,0,.04);
        }

        /* Each cell becomes a full-width row inside the card */
        .dxbl-grid.stop-totals-grid .dxbl-grid-table td {
            display: block;
            width: 100%;
            box-sizing: border-box;
            border: none !important;
            padding: 8px 4px 10px !important;
            position: relative;
            white-space: normal; /* prevent weird letter stacking */
            word-break: break-word;
        }

            /* subtle divider between fields */
            .dxbl-grid.stop-totals-grid .dxbl-grid-table td + td {
                border-top: 1px solid #e7ebf0;
                margin-top: 6px;
                padding-top: 12px !important;
            }
}