@import url('https://cdnjs.cloudflare.com/ajax/libs/Iosevka/6.0.0/iosevka/iosevka.min.css');


/* ============================================
   CSS VARIABLES - COLOR PALETTE
   ============================================ */

:root {
  /* Brand Colors - Green Palette */
  --color-green-darkest: #030;
  --color-green-dark: #32620E;
  --color-green-medium: #4c6b38;
  --color-green-base: #67924b;
  --color-green-light: #527d35;
  --color-green-lighter: #a6d488;
  --color-green-pale: rgba(180, 220, 200, 0.5);
  --color-green-accent: rgba(0, 50, 0, 0.75);
  
  /* Background Colors */
  --color-bg-main: #D7DCD2;
  --color-bg-secondary: #f9f9f9;
  --color-bg-white: white;
  --color-bg-footer: #c6c9c4;
  --color-bg-cell: rgba(255, 255, 255, 0.25);
  --color-bg-cell-focus: #F6F7F5;
  
  /* Text Colors */
  --color-text-base: #666;
  --color-text-white: white;
  --color-text-black: black;
  --color-text-dark: #600;
  --color-text-dark-alt: #630;
  --color-text-dark-yellow: #440;
  --color-text-dark-yellow-border: #660;
  
  /* Alert State Colors */
  --color-alert-none: black;
  --color-alert-committed: rgba(200, 0, 0, 0.67);
  --color-alert-committed-border: darkred;
  --color-alert-opened: rgba(255, 150, 0, 0.75);
  --color-alert-opened-border: #630;
  --color-alert-last: rgba(255, 255, 0, 0.25);
  --color-alert-last-border: #660;
  
  /* Border Colors */
  --color-border-main: rgba(0, 50, 0, 1);
  --color-border-light: rgba(50, 100, 50, 0.33);
  --color-border-green: rgba(0, 100, 50, 1);
  
  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.125);
  --shadow-medium: rgba(0, 0, 0, 0.25);
  --shadow-dark: rgba(0, 0, 0, 0.5);
  
  /* Overlay/Backdrop */
  --overlay-dark: rgba(0, 0, 0, 0.1);
  --overlay-white: rgba(255, 255, 255, 0.75);

  /* dimensions */
  --dimension-header-height: 5rem;
  --dimension-nav-width: 5rem;
  --dimension-nav-btn: calc(var(--dimension-nav-width) - 1.25rem);
  --dimension-toaster-width: 20rem;
  /* width: calc(var(--dimension-nav-width) - 1.25rem); */
}

/* ============================================
   BASE STYLES
   ============================================ */

html {
  font-size: 100%;
  font-family: sans-serif;
  color: var(--color-text-base);
  background-color: var(--color-bg-secondary);
}

html,
html body {
  background-color: var(--color-bg-main);
}

body * {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  box-sizing: border-box;
}

* {
  transition: all 0.3s ease 0.05s;
}

/* ============================================
   LAYOUT - HEADER & NAV
   ============================================ */
  html > body header {
    max-height: 5rem !important;
    margin-left: var(--dimension-nav-width) !important;
    overflow: hidden;
  }

  html > body header nav ul.wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    gap: 0.25rem;
    width: var(--dimension-nav-width);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--color-green-base);
    justify-content: flex-start;
    gap: 1rem;
    border-right: 1px solid var(--color-green-darkest);
    padding-top: 2.5rem;

    & a{
      height: var(--dimension-nav-btn);
      width: var(--dimension-nav-btn);
      display: flex;
      flex-direction: column;
      font-size: 0.5em;
      background-color: var(--color-green-dark);
      color: var(--color-text-white) !important;
      text-align: center;
      box-shadow: 0 0 0 1px var(--color-green-darkest), 0.125rem 0.125rem 0.25rem var(--shadow-dark);
      border-radius: .125rem;

      &::first-letter{
        font-size: 2rem;
        font-weight: bold;
        padding: .25rem 0 0;
        opacity: .5;
        filter:saturate(.5);
        display: block;
        mix-blend-mode: multiply;
        line-height: 2.75rem;
        text-shadow: 0 1px 0.125rem var(--color-green-darkest);
      }
    }
   }


/* ============================================
   LAYOUT - MAIN & FOOTER
   ============================================ */

   
html.author,
html.author > body{
  background-color: rgb(171, 222, 171) !important;
}
html.author:before{
    content: 'author';
    display: block;
    position: fixed;
    bottom: 3rem;
    right: 2rem;
    font-size: 3.5rem;
    opacity: .25;
    font-weight: bold;
  }

html body {

  & main,
  & main > * {
    margin: 0 !important;
    padding: 0 !important;

    & .scoop-grid {
      margin: 1rem !important;
      max-width: 40rem !important;
      width: calc(100% - 2rem) !important;
      vertical-align: top;

      &.Batch {
        top: 1.5rem;

        & > .gridToggle{
          left: calc(var(--dimension-nav-width) * -1);
          margin-left: -.4rem;
          width: var(--dimension-nav-btn);
          height: var(--dimension-nav-btn);
          background-color: var(--color-green-dark);
          box-shadow: 0 0 0 1px var(--color-green-darkest), 0.125rem 0.125rem 0.25rem var(--shadow-dark);
          border-radius: .125rem;
          border:none;
          font-size: 0;
          line-height: 0;
          color: var(--color-text-white) !important;
          font-weight: normal;

          &::before{
            content: '🍨';
            font-size: 2rem;
            opacity: .5;
            filter: saturate(.5);
            line-height: 2.75rem;
            text-shadow: 0 1px 0.125rem var(--color-green-darkest);
            margin: -.5rem 0 .5rem;
            display: block;
          }
          &::after{
            content: 'New Batch';
            font-size: 0.5rem;
            color: var(--color-text-white) !important;
          }
        }
      }

      &.Popular{
        max-width: none !important;
        overflow: hidden;
        border-color: var(--color-green-darkest);
        background-color: var(--color-bg-cell);
        overflow: hidden;

        & .popularView {
          gap:0;
          margin: 0;
          border-color: var(--color-green-darkest);
          background-color: var(--color-bg-cell);

          & .popularGridLines{}
        }

        & .popularKey{
          padding: 0;
          margin: 0;

          & .zGRID-form{
            width: 100%;

            & .gridFilterInput{
              top:0
            }
          }

        }
    }

    & .scoop-grid thead {
      position: sticky;
      z-index: 3;
      top: 2rem;
      border: none;
      border-collapse: separate;
    }

    & .entry-content {
      margin: 0.5rem 1rem !important;
      padding: 0;
      font-size: 0;
    }
    }
  
    & h1.wp-block-post-title,
    & footer * {
    display: none;
    }
  }
  & main{
    margin-left:var(--dimension-nav-width) !important;
  }


  footer {
    height: 2rem;
    background-color: var(--color-bg-footer);
    box-shadow: inset 0 0.25rem 0.5rem -0.125rem var(--shadow-medium);
    position: fixed;
    bottom: 0;
    width: 100%;
  }

}
/* ============================================
   STATUS NOTIFICATIONS
   ============================================ */
.PAGE-STATUS {
  position: fixed;
  top:1.25rem;
  right: 0;
  z-index: 99;
  padding:1rem .5rem .25rem .75rem;
  text-align: right;
  font-size: 0.75rem;
  display: flex;
  vertical-align: baseline;
  line-height: 2rem;
  background-color: var(--color-green-darkest) ;
  color: white;
  border-bottom-left-radius: 1rem;

  &.fresh {
    opacity: 0.5;
    color: var(--color-green-base);

    & ul.trigger-page-load{display:none;}
  }

  & em{
    font-style: normal;
    font-weight: bold;
  }
  & h3 {
    &::after {
      content: ':';
      margin-right: 0.25rem;
    }
    
    font-weight: 100;
    font-size: 1em;
    line-height: 2rem;
  }

  & > ul > li,
  & .cache-bust.actual {
    display:none;
    &.PAGE-STATUS-ETA {
      display: block;
    }
  }

  &.error {
    background-color: var(--color-alert-none);
    color: var(--color-text-white);
    box-shadow: inset rgba(0, 0, 0, .25) .2rem 0 .25rem;
    border-bottom: 1px solid var(--color-border-main);
  }

  &.success {
    background-color: var(--color-green-dark);
    color: var(--color-text-white);
    box-shadow: inset rgba(0, 0, 0, .25) .2rem 0 .25rem;
    border-bottom: 1px solid var(--color-border-main);
  }
}
/* Circular timer ring around the cache-bust countdown text. Two pseudo-
   elements, no extra DOM: a dim full-circle track (::after) plus a
   conic-gradient fill (::before) driven by the --eta-progress custom
   property (0-100) that page-status.js's _startBustCountdown sets on the
   element every tick. Both are masked from solid circles into a ring via
   radial-gradient. Scoped to .counting-down so the ring only exists while
   the countdown is actually running. */
.PAGE-STATUS .cache-bust.counting-down {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 2rem;
  font-size: .67rem;
  font-family: "Iosevka","Iosevka Web", monospace;
  /* Monospace gives '.' the same full character cell as every digit, which
     reads as an oversized gap around it. A small negative letter-spacing
     tightens that uniformly (isolating just the '.' glyph would need either
     wrapping it in its own element in JS or a unicode-range @font-face
     override — more moving parts for a subtle gain). */
  letter-spacing: -0.05em;
  margin-left: 0.33rem;
}

/* Past the estimate — text and ring both key off currentColor, so this one
   override recolors both at once. */
.PAGE-STATUS .cache-bust.counting-down.overtime {
  color: orange;
}

.PAGE-STATUS .cache-bust.counting-down::before,
.PAGE-STATUS .cache-bust.counting-down::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}

.PAGE-STATUS .cache-bust.counting-down::after {
  background: currentColor;
  opacity: 0.2;
}

.PAGE-STATUS .cache-bust.counting-down::before {
  background: conic-gradient(currentColor calc(var(--eta-progress, 0) * 1%), transparent 0);
  transition: background 0.1s linear;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.TOASTER {
  position: fixed;
  bottom: 0;
  right: 0;
  top: 0;
  min-width: var(--dimension-toaster-width);
  z-index: 99;
  
  border: 2px solid white;
  box-shadow: inset rgba(0, 0, 0, .25) .2rem 0 .25rem;
  background: rgba(240, 240, 240, .75);

  transform: translateX(100%);
  transition: transform 0.3s ease;

  &.show{
    transform: translateX(0);
  }
  
  & .TOGGLER{
    position: absolute;
    top:2rem;
    left: -2rem;
    width:2rem;
    height:2rem;

    &:hover {
      opacity: 1;
      background-color: var(--color-green-darkest);
      color: var(--color-text-white);
    }
  }
  & .SCROLLER{
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
    padding:1rem;
    overflow: auto;
    display: flex;
    vertical-align: bottom;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1rem;
  
  }
  & .TOAST {
    background-color: var(--color-bg-white);
    padding: 1rem 1.5rem 1.5rem;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    opacity: 0.9;
    box-shadow: 0.125rem 0.25rem 0.5rem var(--shadow-medium);

    & .date {
      font-size: 0.67rem;
    }

    & h3 {
      font-size: 1rem;
      margin: 0.25rem 0 0.25rem !important;
      font-weight: bold;
    }

    & .close {
      position: absolute;
      top: 0.25rem;
      right: 0.25rem;
      width: 1.2rem;
      font-weight: bold;
      background-color: transparent;
      border: none;
    }

    & .draft-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.5rem;

      & button {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
        border: 1px solid var(--color-green-darkest);
        background-color: var(--color-bg-white);
        cursor: pointer;

        &:hover {
          background-color: var(--color-green-darkest);
          color: var(--color-text-white);
        }
      }
    }
  }
}

/* ============================================
   GRID CONTAINER
   ============================================ */

.scoop-grid {
  min-height: 6rem;
  min-width: 16rem;
  display: inline-block;

  &:focus-within {
    z-index: 9;
  }

  & > * {
    min-width: 100%;
  }

  &:not(.Batch):not(.Closeout):before {
    content: '';
    display: inline-block;
    background-color: var(--overlay-dark);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  & > .gridToggle{
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0rem;
    width: 1rem;
    height: 1rem;
    min-width: 0;
    font-size: 0.6rem;
    font-weight: bold;
  }
}

html > body.TS_GRID-UPDATING .scoop-grid {
  opacity: 0.5;
}

/* Sizes the loading card itself (not just the shimmer overlay) to fit 6
   skeleton rows, so form.zGRID-form's own box-shadow wraps the full
   placeholder instead of just the (still-short) real header content.
   .scoop-grid is unsized and just grows to contain this. Scoped to the same
   "no rows yet" condition as the shimmer below, so a populated grid with
   only a few real rows isn't forced to this height too. */
.scoop-grid:not(.Batch):not(.Closeout):not(:has(tbody tr)) > form.zGRID-form {
  min-height: 13.5rem;
}

/* Shimmering skeleton placeholder — shown while a grid has no rows yet
   (before the bundle fetch resolves and List/Grid appends the first
   <tbody>). No extra DOM: gated purely on the DOM shape that already
   exists — table.zGRID holds only its <thead> until real data lands — so
   the shimmer disappears the instant the first row is appended. */
.scoop-grid:not(.Batch):not(.Closeout):not(:has(tbody tr))::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background-color: var(--color-bg-secondary);
  background-image:
    linear-gradient(100deg, transparent 30%, var(--overlay-white) 50%, transparent 70%),
    repeating-linear-gradient(
      to bottom,
      var(--color-bg-main) 0, var(--color-bg-main) 1.5rem,
      transparent 1.5rem, transparent 2.25rem
    );
  background-size: 60% 100%, 100% 100%;
  background-repeat: no-repeat, repeat-y;
  background-position: -60% 0, 0 0;
  animation: scoop-shimmer-sweep 1.4s ease-in-out infinite;
}

@keyframes scoop-shimmer-sweep {
  to { background-position: 160% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scoop-grid:not(.Batch):not(.Closeout):not(:has(tbody tr))::after {
    animation: none;
  }
}

/* Special Grid Types: Batch & Closeout */
.scoop-grid.Batch,
.scoop-grid.Closeout {
  display: block;
  box-shadow: none;
  position: fixed;
  top: 1rem;
  width: 12rem;
  z-index: 9;
  max-width: none !important;
  min-width: 0;

  & table,
  & form {
    background: var(--color-bg-main);
    width: auto !important;
    min-width: 0;
    z-index: 6;
  }

  & form {
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
    flex-direction: row;
    max-height: auto;
    
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
    transform: translateX(-100%)  scaleX(0) scaleY(67%);
    opacity: 0;

    & button.save {
      position: absolute;
      margin-top: 2px;
      left: 100%;
      margin-left: -0.125rem;
      border-radius: 0.125rem;
      height: 2rem;
      width: 2rem;
      font-size: 0;
      padding: 0;
      top: 2rem;
      text-align: center;
    }

    & .zGRID {
      margin: 0;

      & th {
        height: 2rem;
      }
    }
  }
  & table {
  }
  &.toggled form{
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
  & tbody tr td.flavor {
    padding: 0.5rem 6rem;

    &:before {
      content: 'Add batch';
      text-align: left;
    }
  }
}

.scoop-grid.Closeout {
  left: 0;
  top: auto;
  bottom: 0;
}

/* ============================================
   FORM
   ============================================ */

form.zGRID-form {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  z-index: 1;
  box-shadow: 0.125rem 0.125rem 0.67rem var(--shadow-medium);

  & button.save {
    padding: 0.5rem;
    text-align: right;
    box-shadow: 
      0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.05),
      -0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.05);
    border: 1px solid;
    position: sticky;
    z-index: 5;
    bottom: 0;

    &::after {
      content: '💾';
      font-size: 1rem;
      line-height: 0.8rem;
      font-weight: bold;
      margin: 0 0.25rem;
    }
  }
}

.gridFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 0.5px solid var(--color-border-main);
  border-bottom: 0;
  background: var(--overlay-white);
}

.gridFilter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--color-text-base);
}

.gridFilter select {
  min-height: 1.9rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border-light);
  background: white;
  color: var(--color-text-base);
}

/* ============================================
   TABLE - CORE STRUCTURE
   ============================================ */

table.zGRID {
  width: auto;
  border-spacing: 0;
  border-collapse: separate;
  border: 0.5px solid var(--color-border-main);
  background: var(--overlay-white);

  & thead {
    z-index: 3;
    box-shadow: 0 0.125rem 0.125rem var(--shadow-light);

    & tr th {
      font-size: 0.6rem;
      color: var(--color-text-white);
      background-color: var(--color-green-base);
      border-color: var(--color-green-darkest);
      height: 2.25rem;
    }
  }

  & tbody {
    & tr th {
      font-size: 0.75rem;
      color: var(--color-text-white);
      background-color: var(--color-green-medium);
      border-color: var(--color-green-darkest);
      box-shadow: inset 0 0.125rem 0.125rem var(--shadow-light);

      & button {
        color: var(--color-text-white);
      }
    }

    & tr td {
      border-color: var(--color-border-light);
    }
  }

  & th.hidden,
  & td.hidden {
    display: none;
  }
}

/* ============================================
   TABLE - HEADERS (th)
   ============================================ */

table.zGRID th {
  background-color: var(--color-green-pale);
  padding: 0.5rem;
  border: 1px solid var(--color-border-green);

  &.current_flavor {
    background-color: var(--color-green-light);
    z-index: 2;

    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 0.5rem;
      box-shadow: 0.25rem 0.125rem 0.25rem -0.125rem var(--shadow-medium);
    }
  }

  &.immediate_flavor {
    z-index: 1;

    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 0.5rem;
      box-shadow: 0.25rem 0.125rem 0.25rem -0.125rem var(--shadow-dark);
    }
  }
}

/* ============================================
   TABLE - CELLS (td)
   ============================================ */

table.zGRID tr:focus-within{
    z-index: 9;
}
table.zGRID td {
  border: 1px solid var(--color-border-green);

  &:focus-within {
    z-index: 9;
  }

  &.current_flavor {
    background-color: var(--color-green-lighter);
    z-index: 2;

    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 0.67rem;
      box-shadow: 0.25rem 0 0.33rem -0.125rem var(--shadow-dark);
    }
  }

  &.immediate_flavor:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.5rem;
    box-shadow: 0.25rem 0.125rem 0.25rem -0.125rem var(--shadow-dark);
  }
}

table.zGRID th:focus-within {
  z-index: 9;
}

/* ============================================
   TABLE - ALERT STATES
   ============================================ */

table.zGRID {
  & th.none-left,
  & td.none-left {
    background-color: var(--color-alert-none);
    color: var(--color-text-white);

    & *:not(li) {
      color: var(--color-text-white);
    }
  }

  & th.all-committed,
  & td.all-committed {
    background-color: var(--color-alert-committed);
    border-color: var(--color-alert-committed-border);

    & *:not(li) {
      color: var(--color-text-dark);
    }
  }

  & th.only-opened,
  & td.only-opened {
    background-color: var(--color-alert-opened);
    border-color: var(--color-alert-opened-border);

    & *:not(li) {
      color: var(--color-text-dark-alt);
    }
  }

  & th.last-unopened,
  & td.last-unopened {
    background-color: var(--color-alert-last);
    border-color: var(--color-alert-last-border);

    & *:not(li) {
      color: var(--color-text-dark-yellow);
    }
  }
}

/* ============================================
   TABLE - ROW GROUPS
   ============================================ */

table.zGRID .groupCell {
  padding: 0.5rem;

  & b {
    display: flex;
    gap: 0.25rem;
    vertical-align: middle;
    align-items: center;
  }

  & button.oc {
    height: 0.85rem;
    width: 0.85rem;
    border-radius: 50%;
    border: none;
    background: none;

    &:before,
    &:after {
      content: '⏷';
      display: block;
      position: absolute;
      line-height: 0.75rem;
      text-align: center;
      font-size: 0.67rem;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    &:after {
      content: '⏵';
      display: none;
    }
  }
}

/* Collapsible Groups - Opened State */
table.zGRID .collapsible.opened .row td > * {
  max-height: 20rem;
}

/* Collapsible Groups - Closed State */
table.zGRID .collapsible.closed {
  & .group th {
    border-bottom: none;

    & button.oc {
      &:after {
        content: '⏵';
        display: block;
      }

      &:before {
        display: none;
      }
    }
  }

  & .row td {
    padding: 0 0.5rem;
    overflow: hidden;
    line-height: 0;
    color: transparent;
    background: transparent;
    border: none;

    & > * {
      display: block;
      max-height: 0;
      overflow: hidden;
    }

    & * {
      background: transparent;
    }

    & button,
    & input {
      display: none;
    }
  }
}

/* ============================================
   TABLE - BADGES
   ============================================ */

table.zGRID tr .badges {
  font-size: 0.6rem;
  position: absolute;
  display: flex;
  right: 0;
  bottom: 0;
  gap:.5em;

  & .badge {
    display: inline-block;
    color: var(--color-text-white);
    background-color: var(--color-green-accent);
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.25rem 0 0.33rem;
    text-align: center;
    border-top-left-radius: 0.45rem;
    min-width: 4.5rem;
    text-align: right;
    font-weight: bold;
  }
}
.Cabinet table.zGRID tr .badges{
  & .badge {
    min-width: 1rem;
  }
}

/* ============================================
   TABLE - SPECIAL COLUMNS
   ============================================ */

table.zGRID tr {
  & .id {
    display: none;
  }

  & .number {
    width: 3rem;

    & div.cell {
      padding: 0;
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;

      & .clear {
        display: none;
      }
    }
  }
}

/* ============================================
   TABLE - CELLS (Editable & Read-only)
   ============================================ */

table.zGRID tr {
  & button,
  & input,
  & td,
  & li,
  & th {
    font-size: 0.75rem;
  }

  & .cell {
    position: relative;
    padding: 1.25rem 3rem;

    & button.clear {
      position: absolute;
      top: 0;
      right: 0;
      padding: 0;
      line-height: 1rem;
      width: 1rem;
      height: 1rem;
      font-size: 0.6rem;
      font-weight: bold;
      font-family: monospace;
      text-align: center;
      display: none;
    }

    & .findIt,
    & input {
      position: absolute;
      border: none;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.5rem;
      background-color: var(--color-bg-cell);

      &:focus {
        background-color: var(--color-bg-cell-focus);
        color: var(--color-text-black);
        font-weight: bold;
      }
    }
  }

  & .cell.read-only {
    padding: 0.5rem 0.5rem;
  }

  & .textIt-box {
    padding: 0;

    & .textIt {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

/* ============================================
   FINDIT COMPONENT (Type-ahead dropdown)
   ============================================ */

.findIt {
  position: relative;

  & button.clear {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    line-height: 1rem;
    width: 1rem;
    height: 1rem;
    font-size: 0.6rem;
    font-weight: bold;
    font-family: monospace;
    text-align: center;
  }

  & ul.options {
    z-index: -1;
    overflow: hidden;
    max-height: 0;
    position: absolute;
    top: 100%;
    background-color: var(--color-bg-white);
    box-shadow: 
      0.125rem 0.5rem 0.5rem 1px var(--shadow-medium),
      0 0 0 1px var(--shadow-medium);
    margin: -0.25rem 0 0 0.125rem;
    left: 0;
    width: 0;
    min-width: 0;
    max-width: 0;
    color: transparent;

    & li {
      display: block;
      padding: 0.25rem 0.5rem;
      color: var(--color-text-black);
      white-space: nowrap;
      text-decoration: none;

      &.active {
        background-color: var(--color-green-dark);
        color: var(--color-text-white);
        font-weight: 600;

        & * {
          color: var(--color-text-white);
        }
      }
    }
  }

  &:focus,
  &:focus-within {
    z-index: 9;

    & ul.options {
      z-index: 9;
      max-height: 12rem;
      min-width: 100%;
      max-width: 200%;
      width: auto;
      overflow: auto;
    }
  }
}

/* ============================================
   GRID FILTER INPUT
   ============================================ */

.gridFilterInput {
  padding: 0.5rem;
  border-top-right-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
  position: sticky;
  z-index: 8;
  top: 2rem;
}
/* ============================================
   CABINET VIEW - Cabinet Workflow grid
   ============================================ */
  .zTILE .group.cabinet > ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;

    & > li {
      height: 12rem;
      border: 1px solid var(--color-border-light);
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      & .available {
        font-size: 0;
        & em{
          font-size: .75rem;
          font-style: normal;
        }
        & .tub-count-local:after{
          content: ' / ';
          font-size: .75rem;
        }
      }

      & button {
        position: absolute;
        right:0; bottom:0;
      }
      & .add-next{
        top:0; left:0; 
        opacity: 0;
        font-size: 0;
      }
      & .add-special{}
    }
    & h3 {
      font-size: 1rem;
      font-weight: bold;
      margin: 0;
      padding: 0;
    }
    & .multiple.allergens ul{
      display: flex;
      & li{
        font-size: 0;
        height: 1rem; width: 1rem;
        border-radius: 50%;
        border: 1px solid var(--color-green-dark);
      }
    }
    & .web_id,
    & .multiple.allergens > label,
    & .multiple.current-slots,
    & .multiple.tubs > ul {
      display: none;
    }
  }

/* ============================================
   LOADING STATES
   ============================================ */

form table {
  & thead th,
  & tbody td *,
  & tbody td {
    opacity: 1;
  }
}

.TS_loading form table {
  & thead th,
  & tbody > *,
  & tbody td * {
    opacity: 0.5;
  }
}

/* ============================================
   ANALYTICS - Days of Supply color coding
   ============================================ */

.zGRID td.supply-critical {
  color: #d32f2f;
  font-weight: 600;
}
.zGRID td.supply-warning {
  color: #b8860b;
  font-weight: 600;
}
.zGRID td.supply-ok {
  color: var(--color-green-dark);
}

/* ============================================
   ANALYTICS - Trend direction indicators
   ============================================ */

.zGRID td.trend-rising {
  color: var(--color-green-dark);
}
.zGRID td.trend-falling {
  color: #d32f2f;
}
.zGRID td.trend-steady {
  color: #757575;
}

/* ============================================
   ANALYTICS - Hide save button (read-only grid)
   ============================================ */

.scoop-grid[data-grid-type="Analytics"] button.save,
.scoop-grid[data-grid-type="Flavors"] button.save,
.scoop-grid[data-grid-type="CabinetWorkflow"] button.save {
  display: none;
}

/* ============================================
   POPULAR - Scatter plot view
   ============================================ */

.scoop-grid[data-grid-type="Popular"] {
  width: 100%;
}

.popularView {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  gap: 1rem;
  align-items: stretch;
  margin: 1rem 0;
}

.popularPlotShell,
.popularKey {
  border: 1px solid var(--color-border-light);
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px var(--shadow-light);
}

.popularPlotShell {
  min-width: 0;
  padding: 0.75rem;
}

.popularSvg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 38rem;
  overflow: visible;
}

.popularGridLines line {
  stroke: rgba(50, 100, 50, 0.18);
  stroke-width: 1;
}

.popularAxis {
  stroke: var(--color-border-main);
  stroke-width: 1.5;
}

.popularTick,
.popularAxisLabel {
  fill: var(--color-text-base);
  font-size: 0.78rem;
}

.popularAxisLabel {
  fill: var(--color-green-dark);
  font-weight: 700;
}

.popularPoint {
  fill: #0b6fa4;
  stroke: white;
  stroke-width: 1.5;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 120ms ease, r 120ms ease, stroke-width 120ms ease;
}

.popularPoint.trend-rising {
  fill: var(--color-green-dark);
}

.popularPoint.trend-falling {
  fill: #b5483d;
}

.popularPoint.is-active,
.popularPoint:focus {
  opacity: 1;
  stroke: #ffefb0;
  stroke-width: 4;
  outline: none;
}

.popularActiveLabel rect {
  fill: rgba(255, 255, 255, 0.96);
  stroke: var(--color-border-light);
}

.popularActiveLabel text {
  fill: var(--color-text-base);
  font-size: 0.75rem;
}

.popularActiveLabel .popularLabelName {
  fill: var(--color-green-dark);
  font-weight: 700;
}

.popularActiveLabel .popularLabelMetric {
  fill: var(--color-text-base);
}

.popularKey {
  min-width: 0;
  overflow: auto;
  max-height: 46rem;
  padding: 0.35rem;
}

/* The key is the existing Grid widget; this isn't a savable form so hide the
   default save button, and use sortable headers as the sort affordance. */
.popularKey .zGRID-form > button.save { display: none; }
.popularKey .zGRID-form { margin: 0; }
.popularKey .zGRID th.sortable { cursor: pointer; }
.popularKey .zGRID tr.row.is-active td {
  background: rgba(255, 255, 255, 0.7);
  outline: 1px solid var(--color-border-light);
}
.popularKey .zGRID td.avg_sellthrough_days.trend-rising  { color: var(--color-green-dark); }
.popularKey .zGRID td.avg_sellthrough_days.trend-falling { color: #b5483d; }

.popularEmpty {
  padding: 1rem;
  color: var(--color-text-base);
}

@media (max-width: 820px) {
  .popularView {
    grid-template-columns: 1fr;
  }

  .popularKey {
    max-height: 22rem;
  }
}
/* ============================================
   DATE ACTIVITY - flow/problem indicators
   ============================================ */

.zGRID td.problem-warning,
.zGRID td.problem-error,
table.zGRID tr .badges .badge.warning {
  color: #d32f2f;
  font-weight: 700;
}

.zGRID td.problem-info {
  color: #757575;
  font-weight: 600;
}

.zGRID td.phase-created,
.zGRID td.source-batch {
  color: var(--color-green-dark);
}

.zGRID td.phase-opened {
  color: #0b6fa4;
}

.zGRID td.phase-emptied {
  color: #7a4f01;
}

/* ── Autosave grids ──────────────────────────────────────────────────────────
   Grids whose model sets `autosave = true` persist each change immediately and
   render no save button. The button is also hidden via the `hidden` attribute
   in JS; this rule is a backup. Per-cell flashes confirm a save (or an error). */
.zGRID-form.autosave > button.save { display: none; }

.zGRID td.cell-saved { animation: scoopCellSaved 0.8s ease-out; }
.zGRID td.cell-error { animation: scoopCellError 0.8s ease-out; }

@keyframes scoopCellSaved {
  0%   { background: #b6e0b6; }
  100% { background: transparent; }
}
@keyframes scoopCellError {
  0%   { background: #f3b6b6; }
  100% { background: transparent; }
}