/* Golden Kernel Pecan Co. — app theme + layout overrides.
   Re-skins the shared framework tokens toward the pecan brand (greens/golds/cream)
   to match Specs/golden-kernel-demo.html, without touching framework files. */

/* ── Brand scale (from the demo's variable block) ──────────────────────────── */
:root {
  --gk-green-900: #0F2318;
  --gk-green-700: #1E3A2F;
  --gk-green-600: #2D5A3F;
  --gk-green-100: #D4EAD8;
  --gk-gold-600:  #B8860B;
  --gk-gold-400:  #D4A82A;
  --gk-gold-200:  #F0D898;
  --gk-gold-100:  #FAF0D0;
  --gk-gold-50:   #FDFAF3;
  --gk-cream:     #F7F0E0;
  --gk-parchment: #EDE0C4;
  --gk-border:    #D8CAA8;
  --gk-border-s:  #EAE0C8;
  --gk-brown-900: #1E0E04;
  --gk-brown-500: #5C3D1E;
  --gk-brown-300: #8B6340;
  --gk-brown-100: #C8A882;

  /* Map the pecan palette onto the framework token layer. */
  --bf-color-primary:        var(--gk-green-700);
  --bf-color-primary-hover:  var(--gk-green-600);
  --bf-color-primary-soft:   var(--gk-green-100);
  --bf-color-primary-border: #AACFAA;
  --bf-color-accent:         var(--gk-gold-600);
  --bf-color-surface:        #ffffff;
  --bf-color-surface-alt:    var(--gk-gold-50);   /* warm zebra / readonly tint */
  --bf-color-surface-muted:  var(--gk-parchment);
  --bf-color-text:           var(--gk-brown-900);
  --bf-color-text-muted:     var(--gk-brown-300);
  --bf-color-text-subtle:    var(--gk-brown-100);
  --bf-color-border:         var(--gk-border);
  --bf-color-border-light:   var(--gk-border-s);
  --bf-focus-ring:           0 0 0 3px rgba(184, 134, 11, 0.18);

  /* Light parchment sidebar with a gold active highlight. */
  --bf-nav-bg:          var(--gk-parchment);
  --bf-nav-border:      var(--gk-border);
  --bf-nav-text:        var(--gk-brown-500);
  --bf-nav-text-muted:  var(--gk-brown-300);
  --bf-nav-text-subtle: var(--gk-brown-100);
  --bf-nav-icon:        var(--gk-brown-300);
  --bf-nav-accent:      var(--gk-gold-600);
  --bf-nav-item-hover:  var(--gk-gold-100);
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--gk-brown-900);
}

/* ── Full-height / full-width app shell ───────────────────────────────────── */
html,
body,
#app {
  height: 100%;
  min-height: 100%;
}

[data-block-id="app-shell.container-app"] {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* Topbar: white with a gold underline, matching the demo. */
.app-main > .bf-header {
  margin: 0;
  padding-left: 24px;
  background: var(--bf-color-surface);
  border-bottom: 2px solid var(--bf-color-accent);
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.12);
}

.bf-header-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--gk-brown-900);
}

.app-content {
  flex: 1;
  padding: 1.5rem;
  overflow: auto;
  background: var(--gk-cream);
}

/* App version footer pinned at the bottom of the sidebar. */
.bf-sidebar-footer {
  margin-top: auto;
  padding: 8px 12px;
  font-size: 11px;
  opacity: 0.7;
}

/* ── Section / list titles in the brand serif ──────────────────────────────── */
.bf-controls-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--gk-green-700);
}

/* ── Grids: dark-green headers, gold caps text, warm zebra striping ─────────── */
.bf-list th {
  background: var(--gk-green-700);
  color: var(--gk-gold-200);
  border-bottom: none;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.bf-list tr:nth-child(even) td {
  background: var(--gk-gold-50);
}
.bf-list tr:hover td {
  background: var(--gk-gold-100);
}
.bf-list tr.selected td,
.bf-list tr.bf-row--active td,
.bf-list tr.bf-row--active:hover td {
  background: var(--gk-green-100);
}

/* Primary buttons read as green with gold text (demo .btn-primary). */
.bf-btn-primary {
  color: var(--gk-gold-200);
}

/* ── Order Entry (Phase 2) ─────────────────────────────────────────────────── */
.gkp-orders-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

/* Grid View search/filter bar above the orders list — a white card. */
.gkp-orders-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 16px;
  background: var(--bf-color-surface);
  border: 1px solid var(--gk-border-s);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(30, 58, 47, 0.06);
}
.gkp-orders-search .bf-field,
.gkp-orders-search .bf-select-field { margin: 0; }
.gkp-orders-search [data-block-id="app-shell.fld-search-q"] { flex: 1 1 240px; }
.gkp-orders-search [data-block-id="app-shell.fld-search-from"],
.gkp-orders-search [data-block-id="app-shell.fld-search-to"] { flex: 0 0 160px; }
.gkp-orders-search .bf-select-field { min-width: 150px; }

/* Uniform control height so the Status select, date inputs, and buttons all
   bottom-align cleanly (native date inputs and the select trigger otherwise
   render at different heights). */
.gkp-orders-search .bf-field label,
.gkp-orders-search .bf-select-field-label {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--gk-brown-300);
}
.gkp-orders-search .bf-field input,
.gkp-orders-search .bf-select-field-trigger {
  height: 36px;
  box-sizing: border-box;
}
.gkp-orders-search .bf-btn {
  height: 36px;
}

.gkp-order-detail {
  margin-top: 16px;
  gap: 16px;
}

/* Sticky totals header — dark-green summary bar (demo .order-totals-header). */
.gkp-order-totals {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 14px 22px;
  background: var(--gk-green-700);
  border: none;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(30, 58, 47, 0.18);
}

.gkp-order-totals .bf-field { margin: 0; width: auto; }

.gkp-order-totals .bf-field label {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.5);
}

/* Read-only summary values: borderless, gold, serif. */
.gkp-order-totals .bf-field-display {
  background: transparent;
  border: none;
  padding: 0;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--gk-gold-200);
}

/* Freight / Discount are the only editable fields in the sticky bar. */
.gkp-order-totals [data-block-id="app-shell.fld-ord-freight"] input,
.gkp-order-totals [data-block-id="app-shell.fld-ord-discount"] input {
  width: 90px;
  text-align: right;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: 'DM Mono', monospace;
}
.gkp-order-totals [data-block-id="app-shell.fld-ord-freight"] input:focus,
.gkp-order-totals [data-block-id="app-shell.fld-ord-discount"] input:focus {
  border-color: var(--gk-gold-400);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

.gkp-order-totals [data-block-id="app-shell.fld-ord-grand"] {
  margin-left: auto;
}

.gkp-order-totals [data-block-id="app-shell.fld-ord-grand"] .bf-field-display {
  font-size: 24px;
  color: var(--gk-gold-400);
}

.gkp-order-section {
  margin-top: 8px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--gk-border-s);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(30, 58, 47, 0.06);
  gap: 8px;
}

.gkp-section-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Recipient Subtotal renders as a formatted list-block footer below the line
   items (sum of Extended, currency-formatted). Emphasise the footer total. */
.gkp-order-section .bf-list-footer td {
  font-weight: 700;
  color: var(--gk-green-700);
}

/* Let recipient/line tables stretch their columns to fill the section width
   (framework default is table-layout:fixed, which leaves trailing slack when
   most columns carry explicit widths). */
.gkp-order-section .bf-list table {
  table-layout: auto;
}

/* The trailing row-action (✕) column is the only flexible column, so it
   otherwise absorbs all slack and clusters the data columns. Shrink it to its
   content so the slack flows into the data columns (Description) instead. */
.gkp-order-section .bf-list th:last-child,
.gkp-order-section .bf-list td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* Hidden delete-helper forms: kept mounted so their deleteRecord() can be
   called from the row "Remove" action, but never shown (they would otherwise
   render an empty "Select a record" placeholder). */
[data-block-id="app-shell.form-recip-del"],
[data-block-id="app-shell.form-line-del"],
[data-block-id="app-shell.form-pos-line-del"] {
  display: none;
}

/* ─── Point of Sale ──────────────────────────────────────────────────────── */
.gkp-pos-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

/* Two-column register: line-entry card (left) + tender/totals rail (right). */
.gkp-pos-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.gkp-pos-entry {
  flex: 1 1 auto;
  min-width: 0;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--gk-border-s);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(30, 58, 47, 0.06);
}
.gkp-pos-side {
  flex: 0 0 320px;
  gap: 14px;
}

/* Transaction number / date strip at the top of the entry card. */
.gkp-pos-txnbar {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gk-border-s);
}
.gkp-pos-txnbar .bf-field { margin: 0; width: auto; }
.gkp-pos-txnbar .bf-field label {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--gk-brown-300);
}
.gkp-pos-txnbar .bf-field-display {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--gk-green-700);
  background: transparent;
  border: none;
  padding: 0;
}

/* Barcode/scan field — full width, prominent. */
[data-block-id="app-shell.fld-pos-barcode"] input {
  height: 42px;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
}

.gkp-pos-entry .bf-list table { table-layout: auto; }
.gkp-pos-entry .bf-list th:last-child,
.gkp-pos-entry .bf-list td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* Totals box — dark-green rail mirroring the demo .total-box. */
.gkp-pos-totals {
  padding: 14px 16px;
  background: var(--gk-green-700);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(30, 58, 47, 0.18);
  gap: 6px;
}
.gkp-pos-totals .bf-field {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gkp-pos-totals .bf-field label {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.55);
}
.gkp-pos-totals .bf-field-display {
  background: transparent;
  border: none;
  padding: 0;
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  color: var(--gk-gold-200);
}
.gkp-pos-totals input {
  width: 90px;
  text-align: right;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family: 'DM Mono', monospace;
}
.gkp-pos-totals input:focus {
  border-color: var(--gk-gold-400);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}
/* Total Due is the emphasised line. */
[data-block-id="app-shell.fld-pos-total"] .bf-field-display {
  font-size: 22px;
  color: var(--gk-gold-400);
}
[data-block-id="app-shell.fld-pos-change"] .bf-field-display {
  font-size: 16px;
  color: #fff;
}

.gkp-pos-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gkp-pos-actions .bf-btn { width: 100%; }