/* ============================================================
   Trunked — Finish layer (2026-11-07). PRESENTATION ONLY.
   Loaded LAST (after trunked-polish.css). Delete its <link> to revert.
   Fixes: collapsed heading kerning, shouting uppercase buttons,
   flat KPI/table/POS/floor cards, weak table headers, plain login,
   unstyled alerts/modals, plus styles for the resilience UI
   (offline banner, session-expired banner, toasts, error pages).
   ============================================================ */
html body {
  --tk-fin-r: 16px;
  --tk-fin-r-sm: 11px;
  --tk-fin-line: color-mix(in srgb, var(--tk-border) 88%, transparent);
  --tk-fin-ok: #12a97f;
  --tk-fin-warn: #e39a1f;
  --tk-fin-bad: #e5484d;
  --tk-fin-info: #3b82f6;
  --tk-fin-ease: cubic-bezier(.2, .8, .2, 1);
  --tk-fin-ring: 0 0 0 3px color-mix(in srgb, var(--tk-accent) 28%, transparent);
}

/* ---------- 1. Typography: fix collapsed letters in Clash Display headings ---------- */
html body .tk-content :is(h1, h2),
html body .tk-dash-greeting,
html body .pos-workspace-heading h1,
html body .tk-login-heading,
html body .tk-hero-text {
  letter-spacing: -.012em !important;
  word-spacing: .12em;
  font-kerning: normal;
}
html body .tk-content h3 { letter-spacing: -.005em; word-spacing: .08em; }
html body .tk-kpi-hero-value,
html body .tk-stat-value { letter-spacing: -.01em !important; font-variant-numeric: tabular-nums; }
html body .tk-table td, html body .tk-table th, html body .cart-total-row span { font-variant-numeric: tabular-nums; }

/* ---------- 2. Buttons: calm, readable, consistent (no tracked-out caps) ---------- */
html body .tk-btn {
  font-family: inherit; text-transform: none; letter-spacing: .005em;
  font-weight: 650; font-size: .85rem; border-radius: 11px; line-height: 1.2;
}
/* A global button[type=submit] rule (enhancements.css) forces tracked-out CAPS with !important. */
html body button.tk-btn, html body a.tk-btn, html body button[type="submit"].tk-btn {
  font-family: inherit !important; text-transform: none !important; letter-spacing: .005em !important;
  font-weight: 650 !important; font-size: .85rem !important;
}
html body .tk-login-form-card button.tk-btn-primary { letter-spacing: .03em !important; font-size: .95rem !important; font-family: var(--tk-font-title) !important; }
html body .tk-login-form-card button.tk-btn-secondary { font-family: var(--tk-font-title) !important; font-size: 1.05rem !important; }
html body .tk-btn-sm, html body .tk-table .tk-btn { min-height: 34px; padding-inline: 12px; font-size: .78rem; border-radius: 9px; }
html body .tk-btn:focus-visible, html body :is(.tk-input, .tk-select, .tk-textarea):focus-visible,
html body .pos-item-card:focus-visible { outline: none; box-shadow: var(--tk-fin-ring); }
html body :is(.tk-input, .tk-select, .tk-textarea):focus { border-color: var(--tk-accent); box-shadow: var(--tk-fin-ring); outline: none; }
html body .tk-btn:disabled, html body .tk-btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; }
html body .tk-btn[aria-busy="true"] { position: relative; pointer-events: none; }
html body .tk-btn[aria-busy="true"]::after {
  content: ''; width: 13px; height: 13px; margin-left: 8px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tkFinSpin .7s linear infinite;
}
@keyframes tkFinSpin { to { transform: rotate(360deg); } }

/* ---------- 3. Cards ---------- */
html body .tk-content :is(.tk-card, .tk-stat-card, .tk-kpi-hero-card, .rpt-summary-card) {
  border-radius: var(--tk-fin-r);
  box-shadow: 0 1px 2px color-mix(in srgb, #0b1530 8%, transparent), 0 10px 26px -14px color-mix(in srgb, #0b1530 28%, transparent);
}
html body .tk-content .tk-card-title { align-items: center; }
html body .tk-content .tk-card-title-text { font-weight: 650; letter-spacing: 0; }
html body .tk-content .tk-card-title-text::before {
  content: ''; display: inline-block; width: 4px; height: 1em; margin-right: 10px; border-radius: 3px;
  vertical-align: -.14em; background: linear-gradient(180deg, var(--tk-accent), var(--tk-accent-deep, var(--tk-accent)));
}

/* Stat cards (Inventory / Orders): quieter stripe, bigger number */
html body .tk-content .tk-stat-card { padding: 18px 20px; position: relative; overflow: hidden; }
html body .tk-content .tk-stat-value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; }
html body .tk-content .tk-stat-label { text-transform: uppercase; letter-spacing: .07em; font-size: .68rem; font-weight: 650; margin-top: 4px; color: var(--tk-text-muted); }

/* Dashboard: greeting, KPI cards, empty states */
html body .tk-dash-greeting { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
html body .tk-content .tk-kpi-hero-card { transition: transform .2s var(--tk-fin-ease), box-shadow .2s ease; }
html body .tk-content .tk-kpi-hero-card:hover { transform: translateY(-2px); }
html body .tk-content .tk-kpi-hero-card::before { opacity: .55; }
html body .tk-content .tk-kpi-hero-badge { border-radius: 999px; font-weight: 700; font-size: .7rem; }
html body .tk-content .tk-empty,
html body .tk-content .tk-card > p:only-child {
  border: 1px dashed var(--tk-fin-line); border-radius: var(--tk-fin-r-sm);
  background: color-mix(in srgb, var(--tk-bg-input) 60%, transparent);
  padding: 26px 16px; text-align: center; color: var(--tk-text-muted);
}
html body .tk-content .tk-card > p:only-child { margin: 8px 0 0; font-size: .88rem; }
html body .tk-content .tk-quick-action-card { border-radius: var(--tk-fin-r); }
html body .tk-content .tk-quick-action-icon { border-radius: 12px; }

/* ---------- 4. Tables: readable headers, row hover, tidy actions ---------- */
html body .tk-content .tk-table-wrap {
  border: 1px solid var(--tk-fin-line); border-radius: var(--tk-fin-r-sm); background: var(--tk-bg-card);
}
html body .tk-content .tk-table thead th {
  background: color-mix(in srgb, var(--tk-text-primary) 6%, var(--tk-bg-card));
  color: var(--tk-text-secondary); font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--tk-border); padding-block: 12px; white-space: nowrap;
}
html body .tk-content .tk-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--tk-text-primary) 2.2%, transparent); }
html body .tk-content .tk-table tbody tr:hover td { background: color-mix(in srgb, var(--tk-accent) 8%, transparent); }
html body .tk-content .tk-table td { border-bottom: 1px solid var(--tk-fin-line); vertical-align: middle; }
html body .tk-content .tk-inventory-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html body .tk-content .tk-inventory-row-actions .tk-input { width: 76px; min-height: 34px; text-align: center; }

/* ---------- 5. Badges / alerts / modals ---------- */
html body .tk-alert {
  border-radius: var(--tk-fin-r-sm); border: 1px solid var(--tk-fin-line); border-left-width: 4px;
  padding: 12px 16px; background: var(--tk-bg-card); font-size: .88rem;
}
html body .tk-alert-error { border-left-color: var(--tk-fin-bad); background: color-mix(in srgb, var(--tk-fin-bad) 8%, var(--tk-bg-card)); }
html body .tk-alert-success { border-left-color: var(--tk-fin-ok); background: color-mix(in srgb, var(--tk-fin-ok) 9%, var(--tk-bg-card)); }
html body .tk-modal-backdrop { backdrop-filter: blur(5px); background: color-mix(in srgb, #0a1226 55%, transparent); }
html body .tk-modal { border-radius: 20px; box-shadow: 0 30px 70px -20px #0009; }
html body .tk-modal-header { border-bottom: 1px solid var(--tk-fin-line); }
html body .tk-modal-footer { border-top: 1px solid var(--tk-fin-line); }
html body .tk-notif-badge {
  background: var(--tk-fin-bad); box-shadow: 0 0 0 2px var(--tk-bg-card); font-weight: 700;
  min-width: 18px; height: 18px; font-size: .64rem; border-radius: 999px;
}
html body .tk-user-dropdown, html body .tk-notif-dropdown, html body .tk-apps-dropdown {
  border-radius: 16px; border: 1px solid var(--tk-fin-line); box-shadow: 0 24px 50px -18px #0006;
}

/* ---------- 6. Sidebar & topbar ---------- */
html body .tk-nav-section-label span { letter-spacing: .12em; font-weight: 700; font-size: .64rem; }
html body .tk-nav-item { border-radius: 11px; }
html body .tk-nav-item .tk-nav-icon { transition: color .16s ease, transform .16s ease; }
html body .tk-nav-item:hover .tk-nav-icon { transform: scale(1.08); }
html body .tk-nav-item.tk-nav-active { font-weight: 700; }
html body .tk-nav-item.tk-nav-active .tk-nav-icon { color: var(--tk-accent); }
html body .tk-nav { scrollbar-width: thin; }
html body .tk-topbar-search { border-radius: 12px; transition: box-shadow .15s ease, border-color .15s ease; }
html body .tk-topbar-search:focus-within { border-color: var(--tk-accent); box-shadow: var(--tk-fin-ring); }
html body .tk-live-clock { border-radius: 12px; box-shadow: 0 1px 2px #0b153014; }
html body .tk-breadcrumb { padding-top: 14px; }

/* ---------- 7. Inventory / filters / forms ---------- */
html body .tk-inventory-search > div { align-items: stretch; }
html body .tk-inventory-search .tk-input { min-height: 44px; }
html body .tk-inventory-search .tk-btn { min-height: 44px; padding-inline: 20px; }
html body .tk-inventory-scopes {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 13px; background: color-mix(in srgb, var(--tk-text-primary) 6%, transparent);
  border: 1px solid var(--tk-fin-line); margin: 4px 0 12px; max-width: 100%; overflow-x: auto;
}
html body .tk-inventory-scopes .tk-btn { border: 0; background: transparent; box-shadow: none; min-height: 36px; border-radius: 10px; color: var(--tk-text-secondary); white-space: nowrap; }
html body .tk-inventory-scopes .tk-btn[aria-current="page"] {
  background: var(--tk-bg-card); color: var(--tk-text-primary); box-shadow: 0 1px 3px #0b153026, 0 0 0 1px var(--tk-fin-line);
}
html body .tk-inventory-add { border-radius: var(--tk-fin-r); }
html body .tk-inventory-add summary { list-style-position: inside; }
html body .tk-form-label { font-weight: 650; font-size: .8rem; letter-spacing: .01em; color: var(--tk-text-secondary); }
html body .tk-filter-bar { border-radius: var(--tk-fin-r-sm); }

/* ---------- 8. Tables floor (tables.php) ---------- */
html body .tk-floor-help {
  background: color-mix(in srgb, var(--tk-accent) 7%, var(--tk-bg-card)); border: 1px solid var(--tk-fin-line);
  border-left: 4px solid var(--tk-accent); border-radius: var(--tk-fin-r-sm); padding: 12px 16px; max-width: none; margin-bottom: 12px;
}
html body #tableRefreshStatus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html body .tk-content h3 { margin-top: 8px; }
html body .tk-floor-card { padding-top: 26px; }
html body .tk-floor-card > div[style*="1.4rem"] { width: 46px !important; height: 46px !important; font-size: 1.3rem !important; }
html body .tk-floor-card [style*="font-size:0.95rem"] { font-size: 1.3rem !important; font-weight: 700; margin-top: 2px; }
html body .tk-floor-card .tk-badge { font-size: .68rem; padding: 3px 10px; }
html body .tk-floor-card .tk-floor-actions .tk-btn { min-height: 40px; border-radius: 10px; }
html body .tk-floor-card .tk-floor-actions .tk-btn-secondary { font-size: .78rem; color: var(--tk-text-secondary); border-style: dashed; }
html body .tk-floor-card .tk-floor-actions .tk-btn-secondary:hover { border-style: solid; color: var(--tk-text-primary); }
html body .tk-floor-card .tk-floor-actions small { display: block; color: var(--tk-text-muted); padding: 8px; border-radius: 9px; background: color-mix(in srgb, var(--table-color) 10%, transparent); }
html body .tk-floor-menu-panel { border-radius: 14px; box-shadow: 0 20px 44px -16px #0007; }

/* ---------- 9. POS ---------- */
html body.tk-pos-page .pos-workspace-heading { align-items: flex-end; }
html body.tk-pos-page .pos-eyebrow { color: var(--tk-accent); letter-spacing: .14em; font-weight: 700; }
html body.tk-pos-page .pos-steps li { border-radius: 12px; transition: background-color .15s, border-color .15s; }
html body.tk-pos-page .pos-steps li[aria-current], html body.tk-pos-page .pos-steps li.active, html body.tk-pos-page .pos-steps li.is-active {
  background: color-mix(in srgb, var(--tk-accent) 12%, var(--tk-bg-card)); border-color: var(--tk-accent); font-weight: 700;
}
html body.tk-pos-page .pos-item-card {
  position: relative; padding: 16px 14px 14px; border-radius: 14px; min-height: 112px;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
html body.tk-pos-page .pos-item-card::after { /* subtle category colour spine */
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--tk-accent); opacity: .55;
}
html body.tk-pos-page .pos-item-card:hover::after { opacity: 1; }
html body.tk-pos-page .pos-item-card .pos-item-name { font-size: .92rem; font-weight: 650; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body.tk-pos-page .pos-item-card .pos-item-price { margin-top: auto; }
html body.tk-pos-page .pos-item-card.out-of-stock { opacity: .5; filter: grayscale(.6); }
html body.tk-pos-page .pos-item-card.out-of-stock::after { /* OUT OF STOCK ribbon (restores the base rule's text) */
  content: 'OUT OF STOCK'; left: 50%; top: 50%; bottom: auto; width: auto; height: auto; opacity: 1;
  transform: translate(-50%, -50%) rotate(-12deg); padding: 4px 12px; border-radius: 6px; color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap; background: rgba(229,72,77,.94);
}
html body.tk-pos-page .pos-item-quantity {
  position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; background: var(--tk-accent-deep, #2a3a86);
  box-shadow: 0 4px 10px -3px #0007;
}
html body.tk-pos-page .pos-cart {
  border-radius: 20px; border: 1px solid var(--tk-fin-line);
  box-shadow: 0 2px 4px #0b15301a, 0 28px 50px -26px #0b153080;
}
html body.tk-pos-page .pos-cart-header { padding-bottom: 12px; border-bottom: 1px solid var(--tk-fin-line); }
html body.tk-pos-page .cart-total-row { padding: 6px 0; font-size: .92rem; }
html body.tk-pos-page .cart-total-row.grand {
  margin-top: 8px; padding: 14px 16px; border-radius: 14px; font-size: 1.15rem; font-weight: 800;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tk-accent-deep, #2a3a86) 14%, transparent), color-mix(in srgb, var(--tk-accent) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--tk-accent) 35%, transparent);
}
html body.tk-pos-page .cart-qty-btn { border-radius: 9px; }
html body.tk-pos-page .pos-cat-btn.active {
  background: var(--tk-accent-deep, #2a3a86); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -6px #2a3a86aa;
}
html.light body.tk-pos-page .pos-cat-btn.active .cat-count { background: #ffffff33; color: #fff; }
html body.tk-pos-page .pos-search-bar { box-shadow: var(--tk-polish-lift); }

/* ---------- 10. Login ---------- */
html body .tk-login-form-card { border: 1px solid var(--tk-fin-line); }
html body .tk-login-form-card input[name="pin"] {
  font-family: var(--tk-font-title); font-size: 1.9rem !important; letter-spacing: .7em !important; padding-left: .7em;
  background: color-mix(in srgb, var(--tk-text-primary) 4%, var(--tk-bg-input));
}
html body .tk-login-form-card .tk-btn-secondary { font-family: var(--tk-font-title); box-shadow: 0 1px 0 #ffffff55 inset, 0 1px 2px #0b15301f; transition: transform .08s ease, background-color .12s ease; }
html body .tk-login-form-card .tk-btn-secondary:active { transform: scale(.96); }
html body .tk-login-form-card .tk-btn-primary { min-height: 52px; font-size: .95rem; letter-spacing: .04em; border-radius: 13px; }
html body .tk-error-box { border-radius: 12px; border-left: 4px solid var(--tk-fin-bad); }
html body .tk-login-heading { font-size: 1.7rem; }

/* ---------- 11. Resilience UI (see trunked-resilience.js) ---------- */
.tk-net-banner {
  position: fixed; left: 50%; top: 12px; z-index: 10000; transform: translate(-50%, -140%);
  display: flex; align-items: center; gap: 12px; max-width: min(92vw, 560px);
  padding: 11px 16px; border-radius: 14px; font: 600 .86rem/1.35 system-ui, sans-serif;
  color: #fff; background: #1f2a44; border: 1px solid #ffffff22; box-shadow: 0 18px 40px -14px #000a;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tk-net-banner.is-visible { transform: translate(-50%, 0); }
.tk-net-banner[data-kind="offline"] { background: #8a2a2e; }
.tk-net-banner[data-kind="session"] { background: #8a5a12; }
.tk-net-banner a, .tk-net-banner button {
  color: #fff; background: #ffffff26; border: 1px solid #ffffff44; border-radius: 9px; padding: 6px 12px;
  font: 700 .78rem system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.tk-toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 10000; display: grid; gap: 8px; max-width: min(92vw, 380px); }
.tk-toast {
  padding: 12px 16px; border-radius: 12px; color: #fff; background: #1f2a44; font: 600 .85rem/1.4 system-ui, sans-serif;
  box-shadow: 0 16px 36px -14px #000a; border-left: 4px solid #6fccde; animation: tkFinToast .3s var(--tk-fin-ease, ease);
}
.tk-toast[data-kind="error"] { border-left-color: #ef6b6f; }
@keyframes tkFinToast { from { opacity: 0; transform: translateY(10px); } }

/* Branded error pages (403 / 503 rendered by PHP) */
.tk-errpage { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f2f5fa; font-family: system-ui, sans-serif; color: #172740; }
.tk-errpage-card { max-width: 440px; text-align: center; background: #fff; border: 1px solid #dce5f1; border-radius: 22px; padding: 36px 30px; box-shadow: 0 24px 56px -24px #203e6560; }
.tk-errpage-card h1 { margin: 12px 0 8px; font-size: 1.4rem; }
.tk-errpage-card p { margin: 0 0 22px; color: #435674; line-height: 1.55; font-size: .95rem; }
.tk-errpage-card a, .tk-errpage-card button { display: inline-block; margin: 0 4px; padding: 11px 20px; border-radius: 11px; border: 0; background: #2a3a86; color: #fff; font: 650 .9rem system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.tk-errpage-icon { width: 54px; height: 54px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: #edf2fb; }
@media (prefers-color-scheme: dark) { .tk-errpage { background: #0d1422; color: #eef3fc; } .tk-errpage-card { background: #151f30; border-color: #2a3850; } .tk-errpage-card p { color: #bdc9df; } .tk-errpage-icon { background: #1b2a40; } }

/* ---------- 12. Dark-mode touch-ups ---------- */
html:not(.light) body .tk-content .tk-table thead th { background: color-mix(in srgb, #fff 6%, var(--tk-bg-card)); }
html:not(.light) body .tk-content :is(.tk-card, .tk-stat-card, .tk-kpi-hero-card) { box-shadow: 0 1px 2px #0006, 0 14px 30px -16px #000a; }
html:not(.light) body .tk-inventory-scopes .tk-btn[aria-current="page"] { background: var(--tk-refined-tint); }

/* ---------- 13. Mobile ---------- */
@media (max-width: 640px) {
  html body .tk-content .tk-stat-value { font-size: 1.5rem; }
  html body .tk-floor-help { padding: 10px 12px; }
  html body.tk-pos-page .pos-item-card { min-height: 96px; padding: 12px 10px; }
  .tk-toast-stack { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body .tk-btn[aria-busy="true"]::after { animation: none; }
  .tk-net-banner, .tk-toast { transition: none; animation: none; }
}
@media print { .tk-net-banner, .tk-toast-stack { display: none !important; } }

/* ---------- 14. Inline-styled action buttons beaten by the global submit rule ---------- */
/* inventory.php "+ Restock": inline green outline was overridden by button[type=submit]!important. */
html body .tk-table form button[type="submit"][style*="#059669"] {
  background: color-mix(in srgb, #12a97f 10%, transparent) !important; color: #0e8f69 !important;
  border: 1px solid color-mix(in srgb, #12a97f 55%, transparent) !important; box-shadow: none !important;
  font-family: inherit !important; text-transform: none !important; letter-spacing: .005em !important;
  font-size: .78rem !important; font-weight: 700 !important; border-radius: 9px !important; padding: 7px 12px !important;
}
html body .tk-table form button[type="submit"][style*="#059669"]:hover {
  background: #12a97f !important; color: #fff !important; transform: none;
}
html:not(.light) body .tk-table form button[type="submit"][style*="#059669"] { color: #3fd6a8 !important; }