/*
 * Records "View as Spreadsheet" (RecordsController#spreadsheet).
 *
 * Ported from docs/records-spreadsheet-view-mockup.html. Fixed hex values
 * throughout so it reads like the Google Sheet trackers it replaces —
 * sampled from docs/google sheet delivery tracking.png — EXCEPT the
 * banner, which takes the network's theme primary (--color-coral-500,
 * overridden per network by shared/_theme_variables). The sheet stays
 * light in dark mode, like Sheets does.
 *
 * Every rule is scoped under .sheet-app: Propshaft's `:app` stylesheet
 * tag loads this file on every page, and bare names like `.active` and
 * `.sel` would otherwise leak.
 */
.sheet-app {
  --sheet-banner:        var(--color-coral-500, #de5a4f);
  --sheet-banner-text:   #FFFFFF;  /* overridden inline, see readable_text_on */
  --sheet-stat:          #FEF0C7;
  --sheet-head:          #B5B5B5;
  --sheet-data:          #95BDE2;
  --sheet-system:        #B5B5B5;
  --sheet-grid:          #000000;
  --sheet-blank-grid:    #E2E2E2;
  --sheet-chrome:        #E4F7EB;
  --sheet-chrome-hl:     #BDEBCB;
  --sheet-chrome-line:   #C0C0C0;
  --sheet-chrome-text:   #5F6B63;
  --sheet-frozen:        #C0C0C0;
  --sheet-filter-line:   #17612D;
  --sheet-select:        #1A73E8;
  --sheet-select-tint:   rgba(26, 115, 232, .14);
  --sheet-link:          #1155CC;
  --sheet-font: Calibri, Carlito, "Segoe UI", Arial, sans-serif;

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  color: #000;
  color-scheme: light;
}

/* ---------- Exit X (rendered into the layout's nav wrapper) */
.sheet-exit {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64px; z-index: 50;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  color: var(--color-ink, #2f221e); background: #fff; border-left: 1px solid var(--color-gray-200, #e5e7eb);
  font-size: 34px; line-height: 1; font-weight: 300; transition: background .15s, color .15s;
}
.sheet-exit:hover { background: var(--color-coral-50, #fff4f0); color: var(--color-coral-700, #983323); }
.sheet-exit:focus-visible { outline: 3px solid var(--color-coral-200, #ffcbb9); outline-offset: -3px; }

/* ---------- Name box + formula bar */
.sheet-app .fxbar {
  height: 30px; flex: 0 0 30px; display: flex; align-items: stretch;
  border-bottom: 1px solid var(--sheet-chrome-line);
  font: 12px/1 Arial, sans-serif; color: #202124; background: #fff;
}
.sheet-app .namebox { width: 92px; flex: 0 0 92px; border-right: 1px solid var(--sheet-chrome-line); display: flex; align-items: center; padding: 0 8px; }
.sheet-app .fxglyph { width: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; color: #9aa0a6; font-style: italic; font-family: Georgia, serif; font-size: 13px; }
.sheet-app .formula { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-app .readonly-tag { margin-left: auto; padding: 0 10px; display: flex; align-items: center; gap: 6px; color: #5f6368; font-size: 11px; border-left: 1px solid var(--sheet-chrome-line); white-space: nowrap; }

/* ---------- Scrolling grid pane */
.sheet-app .sheet-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; outline: none; background: #fff; }

.sheet-app table.sheet {
  border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content;
  font-family: var(--sheet-font); font-size: 15px; color: #000;
  user-select: none; -webkit-user-select: none; cursor: cell;
}
.sheet-app table.sheet td,
.sheet-app table.sheet th {
  padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: clip; vertical-align: bottom;
  border-right: 1px solid var(--sheet-blank-grid); border-bottom: 1px solid var(--sheet-blank-grid);
  font-weight: 400; text-align: left;
}

/* letter bar + row numbers */
.sheet-app .letters th {
  position: sticky; top: 0; z-index: 4; height: 21px; background: var(--sheet-chrome); color: var(--sheet-chrome-text);
  font: 11px/21px Arial, sans-serif; text-align: center; vertical-align: middle;
  border-right: 1px solid var(--sheet-chrome-line); border-bottom: 1px solid var(--sheet-chrome-line); cursor: pointer;
}
.sheet-app table.sheet th.rownum {
  position: sticky; left: 0; z-index: 3; width: 46px; background: var(--sheet-chrome); color: var(--sheet-chrome-text);
  font: 10px Arial, sans-serif; text-align: center; vertical-align: middle; cursor: pointer;
  border-right: 4px solid var(--sheet-frozen); border-bottom: 1px solid var(--sheet-chrome-line);
}
.sheet-app .letters th.corner { left: 0; z-index: 6; cursor: pointer; border-right: 4px solid var(--sheet-frozen); }
.sheet-app .letters th.hl,
.sheet-app table.sheet th.rownum.hl { background: var(--sheet-chrome-hl); color: #1e3a2a; font-weight: 700; }

/* banner (title, subtitle, notices, stats) */
.sheet-app table.sheet td.banner {
  background: var(--sheet-banner); color: var(--sheet-banner-text); font-weight: 700;
  border-right-color: var(--sheet-banner); border-bottom-color: var(--sheet-banner);
}
.sheet-app table.sheet td.banner-title { font-size: 21px; height: 27px; line-height: 25px; }
.sheet-app table.sheet td.banner-sub   { font-size: 19px; height: 27px; line-height: 25px; }
.sheet-app table.sheet td.banner-note  { font-size: 15px; height: 24px; line-height: 22px; font-weight: 400; }
.sheet-app table.sheet td.banner-note a { color: inherit; text-decoration: underline; }
.sheet-app table.sheet td.banner-label { font-size: 19px; height: 24px; line-height: 22px; text-align: right; padding-right: 14px; }
.sheet-app table.sheet td.stat {
  background: var(--sheet-stat); font-size: 19px; line-height: 22px; height: 24px; text-align: center;
  border: 1px solid var(--sheet-grid); border-top-width: 0;
}
.sheet-app table.sheet td.stat.first { border-top-width: 1px; }
.sheet-app table.sheet tr.spacer td { height: 9px; background: #fff; }
.sheet-app table.sheet tr.spacer th.rownum { height: 9px; font-size: 8px; line-height: 8px; }
/* A narrow sheet (the All tab) can't hold a long subtitle on one line. */
.sheet-app .sheet--narrow td.banner { white-space: normal; }

/* column-header row (frozen) */
.sheet-app table.sheet tr.colheads th {
  position: sticky; top: 22px; z-index: 2; height: 86px; background: var(--sheet-head);
  font-weight: 700; font-size: 15px; line-height: 18px; text-align: center; white-space: normal; padding: 4px 4px 3px;
  border-top: 1px solid var(--sheet-filter-line); border-right: 1px solid var(--sheet-grid);
  border-bottom: 4px solid var(--sheet-frozen); box-shadow: inset 0 -1px 0 var(--sheet-grid);
}
.sheet-app table.sheet tr.colheads th.rownum {
  z-index: 5; font: 10px Arial, sans-serif; text-align: center; vertical-align: middle;
  border-right: 4px solid var(--sheet-frozen); border-top-color: var(--sheet-chrome-line);
  background: var(--sheet-chrome); box-shadow: none;
}
.sheet-app table.sheet tr.colheads th.rownum.hl { background: var(--sheet-chrome-hl); }
.sheet-app table.sheet tr.colheads th.blankhead { background: #fff; border-right-color: var(--sheet-blank-grid); box-shadow: none; }

/* data cells */
.sheet-app table.sheet td.cell { height: 37px; border-right: 1px solid var(--sheet-grid); border-bottom: 1px solid var(--sheet-grid); }
.sheet-app table.sheet td.cell--data   { background: var(--sheet-data); }
.sheet-app table.sheet td.cell--system { background: var(--sheet-system); }
.sheet-app table.sheet td.cell--link   { background: #fff; }
.sheet-app table.sheet td.cell--empty  { font-style: italic; }
.sheet-app table.sheet td.num { text-align: right; }
.sheet-app table.sheet td.blank { height: 37px; background: #fff; }
/* Filler cells beside the banner take the banner row's height, not a data row's. */
.sheet-app table.sheet tr.banner-row td.blank { height: auto; }
.sheet-app td.cell--link a { color: var(--sheet-link); text-decoration: underline; cursor: pointer; }
.sheet-app td.cell--link a:hover { text-decoration-thickness: 2px; }

/* selection — painted with classes (not an overlay) so sticky cells behave */
.sheet-app table.sheet .sel { box-shadow: inset 0 0 0 9999px var(--sheet-select-tint); }
.sheet-app table.sheet .sel[style*="--edges"] { box-shadow: var(--edges), inset 0 0 0 9999px var(--sheet-select-tint); }
.sheet-app table.sheet .active { box-shadow: inset 0 0 0 2px var(--sheet-select) !important; }

/* status bar */
.sheet-app .statusbar {
  height: 26px; flex: 0 0 26px; border-top: 1px solid var(--sheet-chrome-line); background: #f8f9fa;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px;
  font: 12px Arial, sans-serif; color: #3c4043; white-space: nowrap;
}
.sheet-app .statusbar > span { overflow: hidden; text-overflow: ellipsis; }

.sheet-app .sheet-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: #323232; color: #fff; font: 13px Arial, sans-serif; padding: 10px 16px; border-radius: 6px;
  transition: all .2s; pointer-events: none; z-index: 60;
}
.sheet-app .sheet-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }