/* ============================================================
   Trunked — Polish layer (2026-11-07). PRESENTATION ONLY.
   Loaded LAST, after trunked-refined.css. Delete the <link> to revert.
   Goals: depth + clear hierarchy on cards, readable status chips,
   calmer buttons, better table-floor cards, nicer charts/tiles.
   ============================================================ */
html body {
  --tk-polish-radius: 16px;
  --tk-polish-radius-sm: 11px;
  --tk-polish-line: color-mix(in srgb, var(--tk-border) 85%, transparent);
  --tk-polish-ok: #14b88a;
  --tk-polish-warn: #e8a02d;
  --tk-polish-bad: #ec5b5b;
  --tk-polish-info: #4f8cf0;
  --tk-polish-lift: 0 1px 2px #0000001a, 0 8px 24px -8px #00000040;
  --tk-polish-lift-hover: 0 2px 4px #0000001f, 0 16px 36px -12px #00000059;
}
html.light body {
  --tk-polish-lift: 0 1px 2px #1b2a4a0d, 0 8px 22px -10px #1b2a4a2e;
  --tk-polish-lift-hover: 0 2px 5px #1b2a4a12, 0 16px 34px -14px #1b2a4a47;
}

/* ---------- Page canvas & headings ---------- */
html body .tk-content { padding-bottom: 56px; }
html body .tk-content h2,
html body .tk-content .tk-page-title { letter-spacing: -.03em; }
html body .tk-breadcrumb { font-size: .74rem; letter-spacing: .02em; }

/* ---------- Cards: soft depth, hairline top highlight ---------- */
html body .tk-content :is(.tk-card, .tk-stat-card, .tk-kpi-hero-card, .rpt-summary-card, .tk-quick-action-card) {
  border-radius: var(--tk-polish-radius);
  border: 1px solid var(--tk-polish-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tk-text-primary) 4%, transparent), transparent 46%),
    var(--tk-bg-card);
  box-shadow: var(--tk-polish-lift);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease;
}
html body .tk-content :is(.tk-card, .tk-stat-card, .tk-kpi-hero-card, .rpt-summary-card):hover { box-shadow: var(--tk-polish-lift-hover); }
html body .tk-content .tk-card { padding: 22px; }
html body .tk-content .tk-card-title { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--tk-polish-line); }
html body .tk-content .tk-card-title-text { font-size: 1rem; }
html body .tk-content .tk-card-title-subtitle {
  background: var(--tk-refined-tint); border: 1px solid var(--tk-polish-line);
  border-radius: 999px; padding: 3px 10px; font-weight: 600; letter-spacing: .02em;
}

/* KPI cards: coloured top rail + icon glow instead of floating left stub */
html body .tk-content .tk-kpi-hero-card { overflow: hidden; padding: 22px 22px 20px; }
html body .tk-content .tk-kpi-hero-card::after {
  left: 0; right: 0; top: 0; width: auto; height: 3px; border-radius: 0;
  background: linear-gradient(90deg, var(--tk-kpi-mark), color-mix(in srgb, var(--tk-kpi-mark) 25%, transparent));
}
html body .tk-content .tk-kpi-hero-icon { box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--tk-kpi-mark) 70%, transparent); }
html body .tk-content .tk-kpi-hero-value { font-size: clamp(1.6rem, 2.2vw, 2.3rem); font-weight: 700; }
html body .tk-content .tk-kpi-hero-label { text-transform: uppercase; letter-spacing: .07em; font-size: .68rem; font-weight: 600; }

/* Trend / delta chips */
html body :is(.tk-badge-up, .tk-badge-down) {
  border-radius: 999px; padding: 3px 9px; font-weight: 700; font-size: .7rem;
  border: 1px solid transparent;
}
html body .tk-badge-up   { background: #14b88a1f; color: #14b88a; border-color: #14b88a38; }
html body .tk-badge-down { background: #ec5b5b1f; color: #ec5b5b; border-color: #ec5b5b38; }

/* Quick actions */
html body .tk-content .tk-quick-action-card:hover { transform: translateY(-3px); border-color: var(--tk-refined-ring); box-shadow: var(--tk-polish-lift-hover); }
html body .tk-content .tk-quick-action-card:active { transform: translateY(-1px); }

/* Chart wells */
html body .tk-chart-wrap {
  border-radius: 12px !important; background: color-mix(in srgb, var(--tk-bg-input) 70%, transparent) !important;
  border: 1px solid var(--tk-polish-line) !important; padding: 14px !important;
}
html body .tk-chart-card canvas { filter: none; }

/* ---------- Badges / status chips ---------- */
html body .tk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 11px; font-size: .7rem; font-weight: 700;
  letter-spacing: .03em; line-height: 1.2;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
html body .tk-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
html body :is(.tk-badge-up, .tk-badge-down)::before { display: none; }

/* ---------- Buttons ---------- */
html body .tk-btn { min-height: 38px; padding-inline: 16px; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
html body .tk-btn:active:not(:disabled) { transform: translateY(1px); }
html body .tk-btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tk-accent-deep, #2a3a86) 88%, #fff), var(--tk-accent-deep, #2a3a86));
  border: 1px solid color-mix(in srgb, var(--tk-accent-deep, #2a3a86) 70%, #000);
  color: #fff; box-shadow: 0 1px 0 #ffffff26 inset, 0 6px 14px -6px color-mix(in srgb, var(--tk-accent-deep, #2a3a86) 80%, transparent);
}
html body .tk-btn-primary:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 1px 0 #ffffff2e inset, 0 10px 20px -8px color-mix(in srgb, var(--tk-accent-deep, #2a3a86) 90%, transparent); }
html:not(.light) body .tk-btn-primary { background: linear-gradient(180deg, #3b4fb4, #2f409a); border-color: #4a5fcc; }
html body .tk-btn-secondary { background: transparent; border: 1px solid var(--tk-border); color: var(--tk-text-primary); }
html body .tk-btn-secondary:hover:not(:disabled) { background: var(--tk-refined-tint); border-color: var(--tk-refined-ring); }
html body .tk-btn-success { background: linear-gradient(180deg, #19c796, #12a97f); border: 1px solid #0e9470; color: #fff; box-shadow: 0 6px 14px -6px #12a97f99; }
html body .tk-btn-success:hover:not(:disabled) { filter: brightness(1.07); }

/* ---------- Tables / lists ---------- */
html body .tk-content .tk-table-wrap { border-radius: var(--tk-polish-radius-sm); overflow: auto; box-shadow: var(--tk-polish-lift); background: var(--tk-bg-card); }
html body .tk-content thead th { position: sticky; top: 0; z-index: 1; }
html body .tk-content tbody tr { transition: background-color .12s ease; }
html body .tk-content tbody tr:last-child td { border-bottom: 0; }

/* ---------- Inputs ---------- */
html body :is(.tk-input, .tk-select, .tk-textarea) { min-height: 40px; border-radius: 10px; }
html body :is(.tk-input, .tk-select, .tk-textarea):hover { border-color: color-mix(in srgb, var(--tk-refined-ring) 55%, var(--tk-border)); }

/* ---------- Sidebar ---------- */
html body .tk-nav-item { padding-block: 9px; }
html body .tk-nav-item.tk-nav-active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tk-accent) 16%, transparent), transparent 85%), var(--tk-refined-tint);
  box-shadow: inset 3px 0 0 var(--tk-accent);
}
html body .tk-nav-item:hover:not(.tk-nav-active) { transform: translateX(2px); }
html body .tk-nav-item { transition: background-color .16s ease, color .16s ease, transform .16s ease; }
html body .tk-user-card { border-radius: 14px; }
html body .tk-topbar, html body .tk-mobile-bar { backdrop-filter: saturate(1.2) blur(10px); }

/* ---------- Tables floor page (tables.php) ---------- */
html body .tk-floor-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
html body .tk-floor-card {
  --table-color: #6b7280;
  border-radius: var(--tk-polish-radius); border: 1px solid var(--tk-polish-line); border-top: 0;
  padding: 20px 16px 16px; text-align: center; overflow: visible;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--table-color) 14%, transparent), transparent 70%),
    var(--tk-bg-card);
  box-shadow: var(--tk-polish-lift);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
html body .tk-floor-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  border-radius: var(--tk-polish-radius) var(--tk-polish-radius) 0 0; background: var(--table-color);
}
html body .tk-floor-card:hover { transform: translateY(-3px); box-shadow: var(--tk-polish-lift-hover); }
html body .tk-floor-card > div:first-of-type + div,
html body .tk-floor-card [style*="1.4rem"] {
  width: 52px; height: 52px; margin: 0 auto 8px !important; display: grid; place-items: center;
  border-radius: 50%; font-size: 1.5rem !important;
  background: color-mix(in srgb, var(--table-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--table-color) 40%, transparent);
}
html body .tk-floor-card [style*="font-size:0.95rem"] { font-family: var(--tk-font-title); font-size: 1.15rem !important; letter-spacing: -.01em; }
html body .tk-floor-actions .tk-btn { text-transform: none; letter-spacing: 0; font-weight: 650; font-size: .82rem; }
html body .tk-floor-actions form .tk-btn,
html body .tk-floor-actions [data-table-reserve] .tk-btn { text-transform: none; font-family: inherit; }
html body .tk-floor-card .tk-floor-actions .tk-btn-secondary { background: transparent; border: 1px solid var(--tk-border); color: var(--tk-text-primary); }
html body .tk-floor-card .tk-floor-actions .tk-btn-secondary:hover { background: var(--tk-refined-tint); border-color: var(--table-color); }
html body .tk-floor-menu summary { border-radius: 10px; width: 32px; height: 32px; font-size: 20px; }
html body .tk-floor-help { max-width: 78ch; }

/* ---------- POS ---------- */
html body.tk-pos-page .pos-item-card {
  border-radius: 14px; border: 1px solid var(--tk-polish-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tk-text-primary) 4%, transparent), transparent 55%), var(--tk-bg-card);
  box-shadow: var(--tk-polish-lift);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
html body.tk-pos-page .pos-item-card:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--tk-refined-ring); box-shadow: var(--tk-polish-lift-hover); }
html body.tk-pos-page .pos-item-card:active:not(:disabled) { transform: scale(.985); }
html body.tk-pos-page .pos-item-price {
  display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--tk-accent) 14%, transparent);
  color: var(--tk-accent); font-weight: 800;
}
html body.tk-pos-page .pos-item-category { text-transform: uppercase; letter-spacing: .06em; font-size: .64rem; font-weight: 700; }
html body.tk-pos-page :is(.pos-cart, .pos-search-bar, .pos-workflow-bar) { border-radius: var(--tk-polish-radius); }
html body.tk-pos-page .pos-cat-btn { border: 1px solid var(--tk-polish-line); border-radius: 999px; padding-inline: 14px; transition: background-color .15s, border-color .15s; }
html body.tk-pos-page .pos-cat-btn:hover { border-color: var(--tk-refined-ring); }
html body.tk-pos-page .pos-complete-btn,
html body.tk-pos-page .pos-pay-btn { border-radius: 12px; font-weight: 800; letter-spacing: .01em; }
html body.tk-pos-page .pos-workspace-heading h1 { letter-spacing: -.045em; }

/* ---------- Login ---------- */
html body .tk-login-form-card { padding: 28px; border-radius: 22px; box-shadow: 0 2px 4px #0000001a, 0 24px 56px -20px #00000066; }
html body .tk-login-form-card .tk-btn-secondary { min-height: 52px; font-size: 1.05rem; font-weight: 700; border-radius: 13px; }
html body .tk-login-form-card .tk-btn-secondary:active { background: var(--tk-refined-tint); }
html body .tk-login-form-card input[name="pin"] { min-height: 58px; border-radius: 13px; text-align: center; }

/* ---------- Empty states, scrollbars, selection ---------- */
html body .tk-empty { padding: 40px 16px; color: var(--tk-text-muted); text-align: center; font-size: .9rem; }
html body ::selection { background: color-mix(in srgb, var(--tk-accent) 35%, transparent); }
html body * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--tk-text-muted) 45%, transparent) transparent; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  html body .tk-content .tk-card { padding: 16px; }
  html body .tk-floor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body .tk-floor-card { padding: 16px 10px 12px; }
  html body .tk-login-form-card { padding: 20px; border-radius: 18px; }
  html body .tk-nav-item:hover:not(.tk-nav-active) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.tk-card, .tk-floor-card, .pos-item-card, .tk-quick-action-card, .tk-nav-item):hover { transform: none !important; }
}
@media print {
  html body :is(.tk-card, .tk-floor-card, .tk-kpi-hero-card, .pos-item-card, .tk-table-wrap) {
    box-shadow: none !important; background: #fff !important; backdrop-filter: none !important;
  }
}