/* ═══════════════════════════════════════════
   PROCUREMENT REQUISITION TRACKER — STYLES
   Fonts are local (fonts/), not Google-hosted:
   url() paths resolve relative to this file.
═══════════════════════════════════════════ */
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-3.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500-5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-1.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-3.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-4.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style>
  *{ box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: #f4f3ef; }
  body { font-family: 'IBM Plex Sans', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: oklch(0.52 0.09 200); text-decoration: none; }
  a:hover { color: oklch(0.42 0.09 200); }
  input, select { font-family: inherit; color: #17181a; background: #fff; border: 1px solid #d9d8d1; border-radius: 8px; }
  input:focus, select:focus { outline: 2px solid oklch(0.72 0.06 250); outline-offset: -1px; }
  select { font-size: 14px; padding: 0 32px 0 12px; min-height: 42px; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8b8d88 50%), linear-gradient(135deg, #8b8d88 50%, transparent 50%); background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* ═══════════════════════════════════════════
   MOBILE — ITEM ARRANGEMENT

   The template carries inline styles, so every rule here needs
   !important to win the cascade. That is the cost of the inline
   approach, not carelessness.

   The problem being fixed: the item card's top row puts the name
   on the left and the money on the right, and the money column is
   white-space: nowrap. At 360px the money wins the fight and the
   item name is squeezed to a few characters. Below 560px the row
   becomes two rows instead — name across the full width, money on
   its own line reading left-to-right like a statement.
═══════════════════════════════════════════ */

@media (max-width: 560px) {

  /* ── Item card ── */
  .pt-item {
    padding: 12px 13px !important;
    gap: 9px !important;
  }

  .pt-item-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .pt-item-name {
    font-size: 14.5px !important;
  }

  /* Money moves onto its own line: amount left, status of that
     amount right. Both can now wrap, so nothing truncates. */
  .pt-item-money {
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
    white-space: normal !important;
    padding-top: 7px !important;
    border-top: 1px solid #f2f1ec !important;
  }

  .pt-item-value {
    font-size: 16px !important;
  }

  .pt-item-bal {
    text-align: right !important;
    line-height: 1.35 !important;
  }

  /* "Tap to update" is redundant on a touch screen — the whole card
     is the target. Dropping it gives the chips the full width. */
  .pt-item .pt-spacer,
  .pt-item .pt-tap {
    display: none !important;
  }

  .pt-item-chips {
    gap: 6px !important;
  }

  /* ── Requisition group header ── */
  .pt-req-head {
    padding: 13px 2px 4px 2px !important;
  }

  /* Was nowrap, which could push the totals off the edge. */
  .pt-req-totals {
    white-space: normal !important;
    width: 100% !important;
  }

  /* ── Item detail sheet ── */

  /* Three columns of ~105px cannot hold "Approved" plus a figure
     like 1,234,567. Two columns, with the third wrapping under. */
  .pt-figures {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 12px !important;
    padding: 12px 0 !important;
  }

  .pt-figure-label {
    white-space: normal !important;
  }

  /* The stepper, All and None sat on one row: 172px of stepper left
     roughly 70px each for the two buttons. Stepper gets its own row,
     full width; the buttons share the next. */
  .pt-qty-row {
    flex-wrap: wrap !important;
  }

  .pt-stepper {
    flex: 1 1 100% !important;
    justify-content: space-between !important;
  }

  .pt-stepper input {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  /* One status per row: 160px minimum produced a 2-column grid where
     "Partially delivered" wrapped to three lines. */
  .pt-status-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Very narrow phones — 320px class devices. */
@media (max-width: 380px) {

  .pt-figures {
    grid-template-columns: 1fr !important;
  }

  .pt-figure {
    border-left: 0 !important;
    padding: 0 14px !important;
  }
}


/* ═══════════════════════════════════════════
   ROWS DENSITY — one grid line per item

   The card view answers "tell me about this item". The row view
   answers "show me thirty items at once" — a procurement officer
   scanning for what is outstanding, not reading one line closely.

   Same six figures either way, so a total cannot differ between
   the two views. What the row drops is the wording around the
   numbers, not the numbers.

   Column widths are fixed so that values, balances and status all
   align vertically down the list — that alignment is the entire
   point of the view. Only the item name flexes.
═══════════════════════════════════════════ */

.pt-list-rows {
  gap: 0 !important;
  background: #fff;
  border: 1px solid #e4e3dd;
  border-radius: 10px;
  overflow: hidden;
}

/* Requisition group headers sit outside the list container, so they
   keep their own spacing. Inside the rows container, a header
   between two rows needs its own separation. */
.pt-list-rows .pt-req-head {
  /* !important: the template sets padding inline on this element. */
  padding: 14px 14px 6px 14px !important;
  background: #fbfaf7;
  border-top: 1px solid #ece9e4;
}

.pt-list-rows > div:first-child .pt-req-head {
  border-top: 0;
}

.pt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px 108px 118px 128px 38px;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 7px 14px;
  border-top: 1px solid #f0efe9;
  cursor: pointer;
  font-size: 13px;
}

.pt-row:hover {
  background: #fbfaf7;
}

/* Column labels. Not sticky: the list sits inside a page that
   scrolls as a whole, and a sticky header inside a non-scrolling
   container just floats over the content. */
.pt-row-head {
  min-height: 34px;
  padding: 0 14px 7px 14px;
  border-top: 0;
  cursor: default;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a9aaa4;
}

.pt-row-head:hover {
  background: transparent;
}

.pt-row-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* The name is the only column allowed to truncate, and it is the
   one the sheet repeats in full on tap. */
.pt-row-item {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-row-meta {
  font-size: 11.5px;
  color: #a9aaa4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-row-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.pt-row-qtytext {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Marks a line authorised below what was requested. The card view
   spells this out; the row has no space, so it flags and defers. */
.pt-row-cut {
  color: oklch(0.58 0.13 45);
  font-size: 11px;
}

.pt-row-bar {
  flex: 1 1 auto;
  min-width: 34px;
  height: 5px;
  border-radius: 3px;
  background: #ecebe4;
  display: flex;
  overflow: hidden;
}

.pt-row-barfill {
  display: block;
  height: 100%;
}

/* Tabular numerals keep the digits in vertical columns; without
   them a list of money is unreadable at this density. */
.pt-row-value,
.pt-row-bal {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.pt-row-value {
  font-size: 13.5px;
  font-weight: 500;
}

.pt-row-bal {
  font-size: 12px;
}

.pt-row-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  min-width: 0;
}

.pt-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.pt-row-statustext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pt-row-prio {
  text-align: center;
}

.pt-row-prio span {
  display: inline-block;
  min-width: 26px;
  padding: 2px 6px;
  border-radius: 9px;
  font-size: 11px;
}

/* The head row has no inner spans, so its label cells inherit the
   grid alignment but none of the cell styling. */
.pt-row-head .pt-row-value,
.pt-row-head .pt-row-bal {
  font-family: inherit;
}

/* ── Rows on a narrow screen ──
   Six columns cannot survive 390px. The row becomes two lines:
   name and money on the first, quantity and status on the second.
   Still denser than a card, still one tap target. */
@media (max-width: 720px) {

  .pt-row {
    grid-template-columns: minmax(0, 1fr) 104px;
    grid-template-areas:
      "name  value"
      "qty   bal"
      "status prio";
    gap: 3px 12px !important;
    padding: 9px 12px !important;
    row-gap: 4px !important;
  }

  .pt-row-name   { grid-area: name; }
  .pt-row-value  { grid-area: value; }
  .pt-row-qty    { grid-area: qty; }
  .pt-row-bal    { grid-area: bal; }
  .pt-row-status { grid-area: status; }
  .pt-row-prio   { grid-area: prio; text-align: right !important; }

  /* Column labels describe columns that no longer exist. */
  .pt-row-head {
    display: none !important;
  }

  /* "Cards"/"Rows" wording drops to icons to save toolbar width. */
  .pt-density-label {
    display: none !important;
  }
}