/* ─────────────────────────────────────────────────────────────────
   Shared chrome for every Syncfusion Grid in the admin panel.

   Pages used to carry their own copy of these rules keyed off the
   grid id (#accountsGrid, #paymentsGrid, ...). They are centralised
   here instead: wrap the grid in

       <div class="grid-viewport">
           <ejs-grid id="..." height="100%" ...>...</ejs-grid>
       </div>

   and it picks up the styling plus the viewport-fitting behaviour.
   ───────────────────────────────────────────────────────────────── */

/* ── The shell that pins a grid to the current viewport ───────────
   admin-grid.js sets the pixel height (viewport bottom minus
   whatever sits above the grid). Because the grid inside runs at
   height="100%", raising the page size scrolls the grid body
   instead of stretching the page. The value below is only the
   pre-measurement placeholder. */
.grid-viewport {
    /* border-box so the height admin-grid.js measures and the height it
       sets mean the same thing (the 1px border is inside either way). */
    box-sizing: border-box;
    height: 420px;
    min-height: 320px;
    background: #fff;
    border: 1px solid #e6e7e9;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    /* Deliberately NOT overflow:hidden - Syncfusion appends the column
       filter dialog inside the grid element, and clipping here would cut
       it off. The toolbar and pager below carry the rounded corners. */
}

/* ── Grid frame ───────────────────────────────────────────────── */
.grid-viewport .e-grid {
    border: none !important;
    border-radius: 8px;
    font-size: .875rem;
}

/* ── Toolbar (search / refresh) ───────────────────────────────── */
.grid-viewport .e-grid .e-toolbar {
    background: #fff;
    border-bottom: 1px solid #e6e7e9 !important;
    border-radius: 8px 8px 0 0;
    padding: 4px 12px;
}
.grid-viewport .e-grid .e-toolbar .e-input-group {
    border-radius: 6px;
}

/* ── Header ───────────────────────────────────────────────────── */
.grid-viewport .e-grid .e-gridheader {
    border-top: none !important;
    background: #f6f8fb;
}
.grid-viewport .e-grid .e-headercell {
    background: #f6f8fb !important;
    color: #626976;
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Rows ─────────────────────────────────────────────────────── */
.grid-viewport .e-grid .e-rowcell {
    padding: 10px 12px;
    vertical-align: middle;
}
.grid-viewport .e-grid .e-altrow .e-rowcell {
    background-color: #fafafa;
}
.grid-viewport .e-grid .e-row:hover .e-rowcell {
    background-color: #f1f5f9 !important;
}

/* Right-frozen action column lifts off the scrolling body. */
.grid-viewport .e-grid .e-frozen-right-header,
.grid-viewport .e-grid .e-frozen-right-content {
    box-shadow: -2px 0 6px rgba(0, 0, 0, .06);
}

/* ── Pager — always parked on the bottom edge of the shell ────── */
.grid-viewport .e-grid .e-gridpager {
    background: #fff;
    border-top: 1px solid #e6e7e9 !important;
    border-bottom: none !important;
    border-radius: 0 0 8px 8px;
    padding: 6px 12px;
}

/* ── "No records" placeholder centred in the empty area ───────── */
.grid-viewport .e-grid .e-emptyrow td {
    padding: 28px 12px;
    color: #8a94a6;
    text-align: center;
}

/* ── Scrollbars inside the grid body ──────────────────────────── */
.grid-viewport .e-grid .e-content {
    scrollbar-width: thin;
    scrollbar-color: #c9ced6 transparent;
}
.grid-viewport .e-grid .e-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.grid-viewport .e-grid .e-content::-webkit-scrollbar-track {
    background: transparent;
}
.grid-viewport .e-grid .e-content::-webkit-scrollbar-thumb {
    background: #c9ced6;
    border: 2px solid #fff;
    border-radius: 6px;
}
.grid-viewport .e-grid .e-content::-webkit-scrollbar-thumb:hover {
    background: #aab1bb;
}

/* ── Row action context menu (shared across every grid page) ──── */
#rowContextMenu .e-menu-icon {
    margin-right: 8px;
    font-size: .9rem;
}
#rowContextMenu .e-menu-item.e-menu-delete {
    color: #d63939;
}