/* ============================================
   VINÉRE Ledger — Google Material Design 3 Theme
   ============================================ */

/* ─── Google Fonts ─── */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap');

/* ─── Material 3 Tokens ─── */
:root {
  /* ============================================
     SIZE CONTROLS — the only two numbers you need to edit
     --font-scale : text size. 100 = current size, 110 = 10% bigger, 90 = 10% smaller
     --ui-zoom    : whole-page zoom (text, spacing, icons). 71% = current
     ============================================ */
  --font-scale: 100;
  --ui-zoom: 71%;

  /* Primary palette */
  --md-primary: #1A73E8;
  --md-primary-hover: #1557B0;
  --md-primary-container: #D2E3FC;
  --md-on-primary: #FFFFFF;
  --md-on-primary-container: #041E49;

  /* Secondary */
  --md-secondary: #5F6368;
  --md-secondary-container: #E8EAED;
  --md-on-secondary: #FFFFFF;
  --md-on-secondary-container: #202124;

  /* Surface & Background */
  --md-surface: #FFFFFF;
  --md-surface-variant: #F1F3F4;
  --md-surface-1: #F8F9FA;
  --md-surface-2: #E8EAED;
  --md-background: #FFFFFF;
  --md-on-surface: #202124;
  --md-on-surface-variant: #5F6368;

  /* Outline & Dividers */
  --md-outline: #DADCE0;
  --md-outline-variant: #E8EAED;

  /* Status colors */
  --md-error: #EA4335;
  --md-error-container: #FCE8E6;
  --md-success: #34A853;
  --md-success-container: #E6F4EA;
  --md-warning: #FBBC04;
  --md-warning-container: #FEF7E0;
  --md-info: #4285F4;

  /* Elevation shadows */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15);
  --shadow-2: 0 1px 2px 0 rgba(60,64,67,0.30), 0 2px 6px 2px rgba(60,64,67,0.15);
  --shadow-3: 0 1px 3px 0 rgba(60,64,67,0.30), 0 4px 8px 3px rgba(60,64,67,0.15);
  --shadow-4: 0 2px 3px 0 rgba(60,64,67,0.30), 0 6px 10px 4px rgba(60,64,67,0.15);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 100px;

  /* Typography */
  --font-heading: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', monospace;

  /* Spacing (8px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Transitions */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;

  /* Legacy mapping (for JS compatibility) */
  --bg: var(--md-background);
  --surface: var(--md-surface);
  --surface-2: var(--md-surface-variant);
  --surface-3: var(--md-surface-2);
  --text: var(--md-on-surface);
  --text-dim: var(--md-on-surface-variant);
  --text-muted: #9AA0A6;
  --border: var(--md-outline);
  --accent: var(--md-primary);
  --accent-dim: var(--md-primary-container);
  --error: var(--md-error);
  --success: var(--md-success);
  --warning: var(--md-warning);
  --info: var(--md-info);
  --radius: var(--radius-md);
  --radius-sm: var(--radius-xs);
  --shadow: var(--shadow-1);
  --delete-progress: var(--md-error);
}

/* ─── Reset ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Shrinks the whole UI (text, padding, icons, spacing) to 80% of its
     original size uniformly. A plain font-size change wouldn't reliably
     cascade, since many rules below use fixed px sizes rather than
     relative units — zoom scales everything proportionally instead. */
  zoom: var(--ui-zoom);
}

body {
  font-family: var(--font-body);
  font-size: calc(17.32px * var(--font-scale) / 100);
  line-height: 1.5;
  color: var(--md-on-surface);
  background: var(--md-background);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Scrollbar (Chrome) ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #DADCE0; border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: #9AA0A6; }

/* ─── Selection ─── */
::selection {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* ============================================
   LOGIN
   ============================================ */
#login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-surface-1);
  z-index: 9999;
}

.login-card {
  background: var(--md-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  animation: scaleIn 200ms var(--ease-decelerate);
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.login-logo {
  height: 96px;
  width: auto;
  min-width: 200px;
  margin-bottom: var(--space-4);
  filter: invert(1) brightness(0.15);
}

.login-role-select {
  display: flex;
  width: 100%;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.login-role-btn {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-body);
  font-size: calc(14px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface-variant);
  background: var(--md-surface);
  border: none;
  border-right: 1px solid var(--md-outline);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.login-role-btn:last-child {
  border-right: none;
}

.login-role-btn:hover {
  background: rgba(26,115,232,0.04);
}

.login-role-btn.active {
  background: var(--md-primary);
  color: #fff;
}

#passInput {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: calc(20.79px * var(--font-scale) / 100);
  color: var(--md-on-surface);
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-xs);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

#passInput:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.15);
}

#passInput::placeholder {
  color: var(--md-on-surface-variant);
}

#loginBtn {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: calc(17.32px * var(--font-scale) / 100);
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: none;
  color: var(--md-on-primary);
  background: var(--md-primary);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

#loginBtn:hover {
  background: var(--md-primary-hover);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

#loginBtn:active {
  transform: translateY(0);
}

#loginError {
  font-size: calc(17.32px * var(--font-scale) / 100);
  color: var(--md-error);
  min-height: 18px;
  text-align: center;
}

/* ============================================
   APP SHELL
   ============================================ */
#app {
  display: none;
  min-height: 100vh;
  background: var(--md-background);
}

/* ─── Topbar ─── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--md-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  box-shadow: var(--shadow-1);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.mark {
  font-family: var(--font-heading);
  font-size: calc(25.41px * var(--font-scale) / 100);
  font-weight: 700;
  color: var(--md-on-surface);
  letter-spacing: -0.02em;
}

.mark .dot {
  color: var(--md-primary);
  margin: 0 2px;
}

/* ─── View Toggle (Segmented Button) ─── */
.view-toggle {
  display: flex;
  background: var(--md-surface-variant);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.view-toggle .btn {
  border-radius: var(--radius-pill);
  padding: 6px 18px;
  font-size: calc(17.32px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface-variant);
  background: transparent;
  border: none;
  box-shadow: none;
  transition: all var(--duration-fast) var(--ease-standard);
}

.view-toggle .btn:hover {
  background: rgba(32,33,36,0.04);
  color: var(--md-on-surface);
}

.view-toggle .btn.active {
  background: var(--md-surface);
  color: var(--md-primary);
  box-shadow: var(--shadow-1);
}

/* ─── Header Stats ─── */
.header-stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.hstat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hstat-label {
  font-size: calc(16.17px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-on-surface-variant);
}

.hstat-value {
  font-family: var(--font-mono);
  font-size: calc(19.63px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface);
}

/* ─── Topbar Right ─── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#search {
  width: 260px;
  padding: 8px 36px 8px 14px;
  font-family: var(--font-body);
  font-size: calc(17.32px * var(--font-scale) / 100);
  color: var(--md-on-surface);
  background: var(--md-surface-variant);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  outline: none;
  transition: all var(--duration-fast) var(--ease-standard);
}

#search:hover {
  background: var(--md-surface-2);
}

#search:focus {
  background: var(--md-surface);
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}

#search::placeholder {
  color: var(--md-on-surface-variant);
}

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--md-on-surface-variant);
  font-size: calc(20.79px * var(--font-scale) / 100);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--duration-fast);
}

.search-clear:hover {
  background: rgba(32,33,36,0.08);
  color: var(--md-on-surface);
}

.result-count {
  position: absolute;
  right: -8px;
  top: -6px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: calc(11.55px * var(--font-scale) / 100);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  transform: scale(0);
  transition: transform var(--duration-normal) var(--ease-decelerate);
}

.result-count.visible {
  transform: scale(1);
}

/* ============================================
   BUTTONS (Material 3)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: calc(17.32px * var(--font-scale) / 100);
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1;
  text-transform: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(4);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
  pointer-events: none;
}

.btn:active::after {
  transform: scale(0);
  opacity: 1;
  transition: 0s;
}

/* Contained (Primary) */
.btn:not(.secondary):not(.text) {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--shadow-1);
}

.btn:not(.secondary):not(.text):hover {
  background: var(--md-primary-hover);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.btn:not(.secondary):not(.text):active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

/* Outlined (Secondary) */
.btn.secondary {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
  box-shadow: none;
}

.btn.secondary:hover {
  background: rgba(26,115,232,0.04);
  border-color: var(--md-primary);
}

.btn.secondary:active {
  background: rgba(26,115,232,0.08);
}

/* Settings gear — filled and circular so it stands out from the plain
   outlined pills around it (Insights, Buyers) instead of blending in. */
#settingsBtn {
  background: var(--md-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--font-scale) / 100);
  box-shadow: var(--shadow-1);
}
#settingsBtn:hover {
  background: #1557b0;
  box-shadow: var(--shadow-2);
}
#settingsBtn:active {
  background: #0d47a1;
}

/* Text button */
.btn.text {
  background: transparent;
  color: var(--md-primary);
  box-shadow: none;
  padding: 8px 12px;
}

.btn.text:hover {
  background: rgba(26,115,232,0.04);
}

.btn.small {
  padding: 6px 14px;
  font-size: calc(16.17px * var(--font-scale) / 100);
}

/* Delete button */
/* AFTER */
#deleteBtn, #deleteTradeBtn, #deleteExpenseBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: calc(17.32px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-error);
  background: transparent;
  border: 1px solid var(--md-error);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

#deleteBtn:hover, #deleteTradeBtn:hover, #deleteExpenseBtn:hover {
  background: var(--md-error-container);
}

#deleteBtn.deleting, #deleteTradeBtn.deleting, #deleteExpenseBtn.deleting {
  background: var(--md-error);
  color: var(--md-on-primary);
  border-color: var(--md-error);
  animation: deletePulse 3s linear;
}
@keyframes deletePulse {
  from { background: var(--md-error-container); }
  to   { background: var(--md-error); }
}

/* ============================================
   MAIN CONTENT
   ============================================ */
main {
  padding: var(--space-5);
  max-width: 1920px;
  margin: 0 auto;
}

/* ─── Filter Bar ─── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-0);
  flex-wrap: wrap;
}

.filter-bar select,
.filter-bar input[type="date"] {
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: calc(16.17px * var(--font-scale) / 100);
  color: var(--md-on-surface);
  background: var(--md-surface-variant);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  outline: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.filter-bar select:hover,
.filter-bar input[type="date"]:hover {
  background: var(--md-surface-2);
}

.filter-bar select:focus,
.filter-bar input[type="date"]:focus {
  background: var(--md-surface);
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}

.rate-note {
  font-size: calc(16.17px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
  margin-left: auto;
}

/* ============================================
   KPI CARDS
   ============================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.kpi-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-0);
  transition: box-shadow 120ms var(--ease-standard),
              transform 120ms var(--ease-standard);
}

.kpi-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.filter-bar-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.kpi-label {
  font-size: calc(16.17px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-on-surface-variant);
  margin-bottom: var(--space-2);
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: calc(32.34px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface);
  line-height: 1.2;
}

.kpi-sub {
  font-size: calc(16.17px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
  margin-top: var(--space-1);
}

/* ============================================
   TABLES
   ============================================ */
.table-wrap {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-0);
  margin-bottom: var(--space-4);
}

#ordersTable,
#tradingTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: calc(16.17px * var(--font-scale) / 100);
}

#ordersTable thead,
#tradingTable thead {
  background: var(--md-surface-variant);
}

#ordersTable th,
#tradingTable th {
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-on-surface-variant);
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
}

#ordersTable th.num,
#tradingTable th.num {
  text-align: right;
}

/* $ column header — center the symbol so it aligns with values below */
#ordersTable th:nth-child(9) {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

#ordersTable tbody td,
#tradingTable tbody td {
  padding: 16px 18px;
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}

#ordersTable tbody tr:last-child td,
#tradingTable tbody tr:last-child td {
  border-bottom: none;
}

#ordersTable tbody tr:hover td,
#tradingTable tbody tr:hover td {
  background: rgba(26,115,232,0.03);
  cursor: pointer;
}

#ordersTable tbody tr:active td,
#tradingTable tbody tr:active td {
  background: rgba(26,115,232,0.06);
}

/* ============================================
   STICKY FIRST/LAST COLUMNS
   Keeps the row identifier (Sr.) and the outcome column
   (Status / P/L) visible while scrolling through the
   wide middle columns, instead of losing all context.
   ============================================ */
.sticky-col-left {
  position: sticky;
  left: 0;
  z-index: 2;
}

.sticky-col-right {
  position: sticky;
  right: 0;
  z-index: 2;
}

thead .sticky-col-left,
thead .sticky-col-right {
  z-index: 3;
  background: var(--md-surface-variant);
}

tbody .sticky-col-left,
tbody .sticky-col-right {
  background: var(--md-surface);
}

/* Hover/active states already restyle td backgrounds via an ID-scoped
   selector, which naturally wins over the plain-class rules above since
   an ID selector always outranks a class selector — so the sticky cells
   still pick up the hover tint correctly without extra rules here. */

.sticky-col-left {
  box-shadow: 2px 0 4px -2px rgba(0,0,0,0.12);
}

.sticky-col-right {
  box-shadow: -2px 0 4px -2px rgba(0,0,0,0.12);
}
/* Expenses table */
#expensesTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: calc(16.17px * var(--font-scale) / 100);
  min-width: 900px;
}

#expensesTable thead {
  background: var(--md-surface-variant);
}

#expensesTable th {
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-on-surface-variant);
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
}

#expensesTable th.num,
#expensesTable td.num {
  text-align: right;
}

#expensesTable tbody td {
  padding: 16px 18px;
  color: var(--md-on-surface);
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}

/* Table Density setting: shrinks row padding so more rows fit on screen
   without changing text size. */
body.density-compact #ordersTable tbody td,
body.density-compact #tradingTable tbody td,
body.density-compact #expensesTable tbody td {
  padding: 8px 12px;
}
body.density-compact #ordersTable thead th,
body.density-compact #tradingTable thead th,
body.density-compact #expensesTable thead th {
  padding-top: 8px;
  padding-bottom: 8px;
}

#expensesTable tbody tr:last-child td {
  border-bottom: none;
}

#expensesTable tbody tr:hover td {
  background: rgba(26,115,232,0.03);
  cursor: pointer;
}

#expensesTable tbody tr:active td {
  background: rgba(26,115,232,0.06);
}

/* Sticky Sr. column for expenses */
#expensesTable th:first-child,
#expensesTable td:first-child {
  position: sticky;
  left: 0;
  background: var(--md-surface);
  z-index: 2;
  box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}

#expensesTable thead th:first-child {
  background: var(--md-surface-variant);
  z-index: 3;
}

#expensesTable tbody tr:hover td:first-child {
  background: rgba(26,115,232,0.03);
}
/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.status-not-sold {
  background: var(--md-surface-variant);
  color: var(--md-on-surface-variant);
}

.status-unpaid {
  background: var(--md-error-container);
  color: var(--md-error);
}

.status-partial {
  background: var(--md-warning-container);
  color: #B06000;
}

.status-paid {
  background: var(--md-success-container);
  color: var(--md-success);
}

/* Search highlight */
.search-highlight {
  background: #FEEFC3;
  color: #B06000;
  padding: 0 2px;
  border-radius: 2px;
}

/* Skeleton */
.skeleton-row td {
  padding: 20px 16px !important;
}

.skeleton-cell {
  height: 16px;
  background: linear-gradient(90deg, var(--md-surface-variant) 25%, var(--md-surface-2) 50%, var(--md-surface-variant) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-xs);
  animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-cell {
  animation-duration: 1s !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.pagination-bar button {
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-primary);
  background: transparent;
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.pagination-bar button:hover:not(:disabled) {
  background: rgba(26,115,232,0.04);
  border-color: var(--md-primary);
}

.pagination-bar button:disabled {
  color: var(--md-on-surface-variant);
  border-color: var(--md-outline-variant);
  cursor: not-allowed;
  opacity: 0.5;
}

.page-info {
  font-size: calc(15.01px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
  padding: 0 var(--space-3);
}

/* ============================================
   CARDS (Mobile)
   ============================================ */
.card-list {
  display: none;
}

.card-list.active {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.order-card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-0);
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.order-card:hover {
  box-shadow: var(--shadow-2);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--md-outline-variant);
  transition: background var(--duration-fast);
}

.card-header:hover {
  background: rgba(26,115,232,0.02);
}

.card-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-title {
  font-family: var(--font-heading);
  font-size: calc(18.48px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface);
}

.card-meta {
  font-size: calc(15.01px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
}

.card-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card-sr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-primary);
  background: var(--md-primary-container);
  border-radius: var(--radius-pill);
}

.card-value {
  font-family: var(--font-mono);
  font-size: calc(17.32px * var(--font-scale) / 100);
  font-weight: 500;
}

.card-chevron {
  font-size: calc(13.86px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
  transition: transform var(--duration-normal) var(--ease-standard);
}

.order-card.expanded .card-chevron {
  transform: rotate(180deg);
}

.card-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--md-surface-1);
  border-bottom: 1px solid var(--md-outline-variant);
}

.card-sum-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-sum-row span:first-child {
  font-size: calc(13.86px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-on-surface-variant);
}

.card-sum-row span:last-child {
  font-family: var(--font-mono);
  font-size: calc(17.32px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface);
}

.card-body {
  padding: var(--space-3) var(--space-4);
  display: none;
  animation: slideDown var(--duration-normal) var(--ease-decelerate);
}

.order-card.expanded .card-body {
  display: block;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--md-outline-variant);
}

.card-row:last-child {
  border-bottom: none;
}

.card-label {
  font-size: calc(13.86px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
}

/* ============================================
   PANELS (Side Sheets)
   ============================================ */
#overlay, #tradeOverlay, #expenseOverlay, #paymentSearchOverlay,
.overlay-fade {
  position: fixed;
  inset: 0;
  background: rgba(32,33,36,0.32);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease-standard), visibility 0s linear 200ms;
}

#overlay.open, #tradeOverlay.open, #expenseOverlay.open, #paymentSearchOverlay.open,
.overlay-fade.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms var(--ease-standard), visibility 0s linear 0s;
}

#panel, #tradePanel, #expensePanel, #paymentSearchModal {
  position: fixed;
  top: 0;
  right: -100%;
  bottom: 0;
  width: 100%;
  max-width: 520px;
  background: var(--md-surface);
  box-shadow: var(--shadow-4);
  transition: right 180ms var(--ease-decelerate);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panel.open, #tradePanel.open, #expensePanel.open, #paymentSearchModal.open {
  right: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}

.panel-head h2 {
  font-family: var(--font-heading);
  font-size: calc(25.41px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface);
}

#closePanel, #closeTradePanel, #closeExpensePanel, #closePaymentSearch,
#closeCustomerProfile, #closeInsights, #closeBuyers, #closeBuyerForm, #closeMemoDetail, #closeSettings {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EA4335;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  font-size: calc(25.41px * var(--font-scale) / 100);
  font-weight: bold;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

#closePanel:hover, #closeTradePanel:hover, #closeExpensePanel:hover, #closePaymentSearch:hover,
#closeCustomerProfile:hover, #closeInsights:hover, #closeBuyers:hover, #closeBuyerForm:hover, #closeMemoDetail:hover, #closeSettings:hover {
  background: #d93025;
  color: #ffffff;
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.panel-foot {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--md-outline-variant);
  flex-shrink: 0;
}

/* ============================================
   FORM FIELDS
   ============================================ */
.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-size: calc(13.86px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-on-surface-variant);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: calc(17.32px * var(--font-scale) / 100);
  color: var(--md-on-surface);
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--radius-xs);
  outline: none;
  transition: all var(--duration-fast) var(--ease-standard);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--md-on-surface-variant);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}

.field input::placeholder {
  color: var(--md-on-surface-variant);
  opacity: 0.6;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.field-error {
  font-size: calc(13.86px * var(--font-scale) / 100);
  color: var(--md-error);
  margin-top: 4px;
  min-height: 16px;
}

/* Checkbox */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--md-primary);
  cursor: pointer;
}

/* ─── Computed Preview ─── */
.computed-preview {
  background: var(--md-surface-variant);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.computed-preview h4 {
  font-family: var(--font-heading);
  font-size: calc(13.86px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-on-surface-variant);
  margin-bottom: var(--space-3);
}

.computed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--md-outline-variant);
}

.computed-row:last-child {
  border-bottom: none;
}

.computed-row .label {
  font-size: calc(15.01px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
}

.computed-row .value {
  font-family: var(--font-mono);
  font-size: calc(17.32px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface);
}

.computed-note {
  font-size: calc(13.86px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
  line-height: 1.5;
  margin-top: var(--space-2);
}

.section-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
  font-size: calc(13.86px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-on-surface-variant);
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--md-outline-variant);
}

/* ─── Installments ─── */
/* List-style rendering removed — Order and Trading both use the chip
   component now (.installment-chips / .installment-chip, defined below
   in the PANEL LAYOUT REDESIGN section) for a consistent look. */

/* ============================================
   PAYMENT SEARCH MODAL
   ============================================ */
#paymentSearchModal {
  max-width: 560px;
}

.pay-search-body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
  overflow-y: auto;
}

#paySearchInput {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: calc(17.32px * var(--font-scale) / 100);
  color: var(--md-on-surface);
  background: var(--md-surface-variant);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  outline: none;
  margin-bottom: var(--space-4);
  transition: all var(--duration-fast) var(--ease-standard);
}

#paySearchInput:focus {
  background: var(--md-surface);
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}

.pay-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pay-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.pay-result-item:hover {
  border-color: var(--md-primary);
  box-shadow: var(--shadow-1);
}

/* ============================================
   TOASTS
   ============================================ */
#toastContainer {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--md-surface);
  color: var(--md-on-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--shadow-3);
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 500;
  pointer-events: auto;
  animation: toastSlide 150ms var(--ease-decelerate);
}

.toast.error {
  border-left: 3px solid var(--md-error);
}

.toast.success {
  border-left: 3px solid var(--md-success);
}

.toast.warning {
  border-left: 3px solid var(--md-warning);
}

@keyframes toastSlide {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

#undoToast {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: var(--space-4);
  padding: 12px 20px;
  background: var(--md-on-surface);
  color: var(--md-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-3);
  font-size: calc(15.01px * var(--font-scale) / 100);
  z-index: 1000;
}

#undoToast.show {
  display: flex;
  animation: undoPop var(--duration-normal) var(--ease-decelerate);
}

@keyframes undoPop {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#undoBtn {
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast);
}

#undoBtn:hover {
  background: var(--md-primary-hover);
}

/* ============================================
   SCREEN EFFECTS
   ============================================ */
#screenFx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 150ms;
}

#screenFx.flash {
  opacity: 1;
  background: rgba(255,255,255,0.15);
  animation: flashOut 0.4s forwards;
}

@keyframes flashOut {
  to { opacity: 0; }
}

/* ============================================
   SWIPE HINT (Mobile only)
   ============================================ */
.swipe-hint {
  display: none;
  text-align: center;
  font-size: calc(13.86px * var(--font-scale) / 100);
  color: var(--md-on-surface-variant);
  padding: 8px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .swipe-hint {
    display: block;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Hide duplicate header-stats row on mobile (KPI cards already show this data) */
  .header-stats {
    display: none !important;
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  /* Hide search & refresh for ALL users on mobile */
  .topbar-right .search-wrap,
  .topbar-right #refreshBtn {
    display: none !important;
  }

  /* Collapse empty topbar-right for customers (no action buttons) */
  body.customer-role .topbar-right {
    display: none !important;
  }

  #search {
    width: 100%;
    max-width: none;
  }

  .table-wrap {
    display: none;
  }

  .card-list {
    display: none;
  }

  .card-list.active {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Mobile: KPI cards in 3 columns, 2 rows */
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .kpi-card {
    padding: var(--space-3);
  }

  .kpi-value {
    font-size: calc(20.79px * var(--font-scale) / 100);
  }

  .kpi-label {
    font-size: calc(11.55px * var(--font-scale) / 100);
  }

  .kpi-sub {
    display: none;
  }

  /* Hide the filter bar shell on mobile — all inputs inside are already hidden */
  .filter-bar {
    display: none !important;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  #panel, #tradePanel, #expensePanel, #paymentSearchModal {
    max-width: 100%;
  }

  /* ============================================
     FIX: Card header flex balance — prevents
     right-side badges from crowding the edge
     ============================================ */
  .card-header {
    gap: var(--space-3);
  }

  .card-header-left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .card-title {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .card-header-right {
    flex-shrink: 0;
    gap: 10px;
  }

  .card-chevron {
    margin-right: 2px;
  }

  /* Trading cards: keep right cluster tight but not edge-crowded */
  .trade-card .card-header-right {
    gap: 8px;
  }
}
/* ============================================
   ROLE-BASED COLUMN HIDING (Orders)
   Column order: 1=Sr 2=Customer 3=Style 4=Type 5=Shape 6=Date 7=Gross 8=Net 9=Carat 10=Sub 11=$ 12=Memo 13=SoldTo 14=Sale 15=Status
   ============================================ */
#ordersTable.seller-view,
#ordersTable.staff-view,
#ordersTable.customer-view {
  table-layout: auto !important;
}

#ordersTable.seller-view colgroup,
#ordersTable.staff-view colgroup,
#ordersTable.customer-view colgroup {
  display: none;
}

/* Seller: hide Net Wt (8), Sub Total (10) */
#ordersTable.seller-view th:nth-child(8),
#ordersTable.seller-view td:nth-child(8),
#ordersTable.seller-view th:nth-child(10),
#ordersTable.seller-view td:nth-child(10) {
  display: none !important;
}

/* Staff: hide Net Wt (8), Carat (9), Memo No. (12) */
#ordersTable.staff-view th:nth-child(8),
#ordersTable.staff-view td:nth-child(8),
#ordersTable.staff-view th:nth-child(9),
#ordersTable.staff-view td:nth-child(9),
#ordersTable.staff-view th:nth-child(12),
#ordersTable.staff-view td:nth-child(12) {
  display: none !important;
}

/* Customer: hide Memo No. (12) */
#ordersTable.customer-view th:nth-child(12),
#ordersTable.customer-view td:nth-child(12) {
  display: none !important;
}

/* ===== Card hiding ===== */
/* Seller card: hide Net Wt (was row 1) and Sub Total (was row 2) summary rows */
.order-card.seller-view .card-sum-row:nth-child(4),
.order-card.seller-view .card-sum-row:nth-child(5) {
  display: none;
}

.order-card.seller-view .card-summary {
  grid-template-columns: repeat(3, 1fr);
}

/* Staff card: hide Net Wt (row 1), Carat (row 2), Memo (row 6) summary rows */
.order-card.staff-view .card-sum-row:nth-child(4),
.order-card.staff-view .card-sum-row:nth-child(5),
.order-card.staff-view .card-sum-row:nth-child(8) {
  display: none;
}

.order-card.staff-view .card-summary {
  grid-template-columns: repeat(3, 1fr);
}

/* Customer card: hide Memo row in body */
.order-card.customer-view .card-row.memo-row {
  display: none;
}

/* ============================================
   TRADING CARDS — Single Row Only
   ============================================ */
.trade-card {
  cursor: pointer;
}

.trade-card .card-header {
  border-bottom: none;
  pointer-events: none;
}

.trade-card .card-header-right {
  gap: 10px;
}

.trade-card .card-header-right .status-badge {
  font-size: calc(11.55px * var(--font-scale) / 100);
  padding: 3px 8px;
}

/* ============================================
   DESKTOP: NEVER show card lists
   ============================================ */
@media (min-width: 901px) {
  .card-list,
  .card-list.active {
    display: none !important;
  }
}

/* ============================================
   LAPTOP-WIDTH SCREENS (e.g. 1366px, 1440px)
   [MARKER: LAPTOP-FIX-V2 — search for this string in the live
   deployed file to confirm this version is actually live]
   The orders/trading tables are normally locked to a
   1600px minimum width so columns never squish — great
   on a big desktop monitor, but wider than most laptop
   screens, forcing a horizontal scrollbar (or manual
   browser zoom) just to see the whole table.
   Between the mobile card-view breakpoint (900px) and
   1600px, drop the hard floor and shrink the table font
   slightly instead, so the existing %-based column
   widths shrink proportionally and the full table fits
   without scrolling or zooming.
   ============================================ */
@media (min-width: 901px) and (max-width: 1600px) {
  #ordersTable,
  #tradingTable {
    min-width: 0;
    font-size: calc(15.01px * var(--font-scale) / 100);
  }

  /* Header buttons/search/stats were overflowing off the right edge on
     laptop-width screens with no way to wrap or shrink, so the newest
     buttons (Insights, Buyers) got clipped. Drop the redundant stats
     row (duplicated by the KPI cards below), shrink search, and allow
     wrapping as a safety net so nothing is ever invisible. */
  .topbar {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .header-stats {
    display: none;
  }

  #search {
    width: 160px;
  }
}

/* ============================================
   CUSTOMER PROFILE / INSIGHTS — SIDE MODALS
   Reuses the same visual language as #panel/#tradePanel
   (see .panel-head above) under new class names, so it
   doesn't need to be added to those panels' shared,
   multi-selector CSS rules. The backdrop itself reuses the
   shared .overlay-fade rule (defined earlier) rather than
   its own display:none toggle, so it fades in sync with
   the panel's slide instead of popping instantly.
   ============================================ */
.side-modal {
  position: fixed;
  top: 0;
  right: -100%;
  bottom: 0;
  width: 100%;
  max-width: 520px;
  background: var(--md-surface);
  box-shadow: var(--shadow-4);
  transition: right 180ms var(--ease-decelerate);
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-modal.open {
  right: 0;
}

@media (min-width: 901px) {
  .side-modal-wide {
    max-width: 720px;
  }
}

@media (max-width: 900px) {
  .side-modal {
    max-width: 100%;
  }
}

.side-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.insights-tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  flex-shrink: 0;
}

.insights-tab-btn {
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: calc(16.17px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface-variant);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}

.insights-tab-btn:hover {
  color: var(--md-on-surface);
  background: rgba(26,115,232,0.04);
}

.insights-tab-btn.active {
  color: var(--md-primary);
  border-bottom-color: var(--md-primary);
}

.insights-tab-content {
  display: none;
}

.insights-tab-content.active {
  display: block;
}

.insights-chart-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: calc(13.86px * var(--font-scale) / 100);
  color: var(--text-dim);
}

/* ============ SETTINGS ============ */
.settings-section-label {
  font-size: calc(11px * var(--font-scale) / 100);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--md-outline-variant);
}
.settings-section-label:first-child {
  margin-top: 0;
}
.settings-value {
  font-weight: 600;
  color: var(--md-primary);
  margin-left: var(--space-2);
}
input[type="range"] {
  width: 100%;
  accent-color: var(--md-primary);
}

.insights-chart-wrap {
  position: relative;
  height: 240px;
  margin-bottom: var(--space-5);
}

.chart-empty-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: calc(15.01px * var(--font-scale) / 100);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(15.01px * var(--font-scale) / 100);
  isolation: isolate;
}

.report-table th,
.report-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
}

.report-table th {
  color: var(--md-on-surface-variant);
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--md-surface);
}

.report-table td.num,
.report-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.customer-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: calc(15.01px * var(--font-scale) / 100);
}

.soldto-link {
  cursor: pointer;
  color: var(--md-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}

.soldto-link:hover {
  text-decoration-color: var(--md-primary);
}

/* ============ BUYER DIRECTORY ROW ============
   A real grid with fixed-width numeric columns, so Items/Billed/Due line
   up vertically across every row regardless of how long a buyer's name
   is — a flex row with space-between let long names shove the numbers
   around unpredictably row to row. */
.buyer-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.6fr) 56px 96px 96px 64px;
  align-items: center;
  column-gap: var(--space-4);
  padding: 14px 4px;
  border-bottom: 1px solid var(--md-outline-variant);
}

.buyer-row-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.buyer-row-name {
  font-size: calc(16.17px * var(--font-scale) / 100);
  font-weight: 600;
}

.buyer-row-phone {
  font-size: calc(13.86px * var(--font-scale) / 100);
  color: var(--text-dim);
}

/* On desktop this wrapper doesn't create its own box — its three stat
   children sit directly in the parent grid's fixed columns. On mobile
   (below) it becomes a real flex row instead, spanning both columns. */
.buyer-row-stats {
  display: contents;
}

.buyer-row-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  text-align: right;
}

.buyer-row-stat .label {
  font-size: calc(11.55px * var(--font-scale) / 100);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.buyer-row-stat .value {
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.buyer-row-stat .value.empty {
  color: var(--text-dim);
  font-weight: 400;
}

/* A readable, WCAG-friendlier amber for small "due" text — the shared
   --warning token (#FBBC04) is too light against white at this size. */
.buyer-row-stat .value.due {
  color: #B45900;
}

@media (max-width: 640px) {
  .buyer-row {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
  }
  .buyer-row-stats {
    display: flex;
    grid-column: 1 / -1;
    gap: var(--space-4);
    justify-content: flex-start;
  }
  .buyer-row-stat {
    text-align: left;
  }
}

/* Customer Profile can be opened FROM the Buyers or Insights panel, so it
   needs to render above them rather than sharing their z-index. Same for
   the Buyer edit form, opened from within the Buyers list. */
#customerProfileOverlay {
  z-index: 350;
}
#customerProfileModal {
  z-index: 360;
}
#buyerFormOverlay {
  z-index: 350;
}
#buyerFormModal {
  z-index: 360;
}

/* Memo Detail can be opened from Customer Profile (which is already
   elevated above Buyers/Insights), so it needs to stack higher still. */
#memoDetailOverlay {
  z-index: 400;
}
#memoDetailModal {
  z-index: 410;
}

/* A memo number shown as a clickable link, wherever it appears (currently
   just the Customer Profile item list). */
.memo-link {
  cursor: pointer;
  color: var(--md-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}
.memo-link:hover {
  text-decoration-color: var(--md-primary);
}

/* Small floating card shown on hover over a .memo-link, before the person
   commits to clicking through to the full Memo Detail panel. Positioned
   in JS (fixed, near the hovered element); hidden by default. */
.memo-hover-preview {
  display: none;
  position: fixed;
  z-index: 500;
  min-width: 220px;
  max-width: 280px;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: var(--space-3) var(--space-4);
  font-size: calc(13.86px * var(--font-scale) / 100);
  pointer-events: none;
}
.memo-hover-preview.show {
  display: block;
}
.memo-hover-preview .title {
  font-weight: 600;
  font-size: calc(15.01px * var(--font-scale) / 100);
  margin-bottom: 6px;
}
.memo-hover-preview .row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: var(--text-dim);
}
.memo-hover-preview .row .val {
  color: var(--md-on-surface);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard nav */
:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* ============================================
   TOAST FIXES — Exit Animation, Progress, Types
   ============================================ */

.toast {
  position: relative;
  overflow: hidden;
}

/* Toast type classes (JS uses .toast-success, not .toast.success) */
.toast-success { border-left: 3px solid var(--md-success); }
.toast-error   { border-left: 3px solid var(--md-error); }
.toast-warning { border-left: 3px solid var(--md-warning); }
.toast-info    { border-left: 3px solid var(--md-info); }

/* Toast icon */
.toast-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(13.86px * var(--font-scale) / 100);
  font-weight: 700;
  flex-shrink: 0;
}
.toast-success .toast-icon { background: var(--md-success-container); color: var(--md-success); }
.toast-success .toast-icon::before { content: '✓'; }
.toast-error   .toast-icon { background: var(--md-error-container);   color: var(--md-error); }
.toast-error   .toast-icon::before { content: '✕'; }
.toast-warning .toast-icon { background: var(--md-warning-container); color: #B06000; }
.toast-warning .toast-icon::before { content: '!'; }
.toast-info    .toast-icon { background: var(--md-primary-container); color: var(--md-primary); }
.toast-info    .toast-icon::before { content: 'i'; }

/* Toast body */
.toast-body   { flex: 1; min-width: 0; }
.toast-title  { font-weight: 600; font-size: calc(16.17px * var(--font-scale) / 100); margin-bottom: 2px; }
.toast-message{ font-size: calc(15.01px * var(--font-scale) / 100); color: var(--md-on-surface-variant); line-height: 1.4; }

/* Close button */
.toast-close {
  background: none;
  border: none;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  font-size: calc(20.79px * var(--font-scale) / 100);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
  flex-shrink: 0;
}
.toast-close:hover {
  background: rgba(32,33,36,0.08);
  color: var(--md-on-surface);
}

/* Progress bar (countdown) */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  animation: toastProgress linear forwards;
}
@keyframes toastProgress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* Exit animation */
.toast.toast-exit {
  animation: toastSlideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

/* Trading table vendor column — allow text wrapping */
#tradingTable td.vendor-wrap,
#tradingTable th:nth-child(4) {
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  max-width: 200px;
}

/* Ensure other trading table cells stay nowrap */
#tradingTable td:not(.vendor-wrap),
#tradingTable th:not(:nth-child(4)) {
  white-space: nowrap;
}

/* ============================================
   STICKY SR. COLUMN
   ============================================ */
#ordersTable th:first-child,
#ordersTable td:first-child,
#tradingTable th:first-child,
#tradingTable td:first-child {
  position: sticky;
  left: 0;
  background: var(--md-surface);
  z-index: 2;
  box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}

#ordersTable thead th:first-child,
#tradingTable thead th:first-child {
  background: var(--md-surface-variant);
  z-index: 3;
}

#ordersTable tbody tr:hover td:first-child,
#tradingTable tbody tr:hover td:first-child {
  background: rgba(26,115,232,0.03);
}

/* ============================================
   STICKY TABLE HEADER ROW
   ============================================ */
#ordersTable thead,
#tradingTable thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

#ordersTable thead tr,
#tradingTable thead tr {
  background: var(--md-surface-variant);
}

#ordersTable thead th,
#tradingTable thead th {
  position: sticky;
  top: 0;
  background: var(--md-surface-variant);
  z-index: 10;
}

/* Ensure first header cell (Sr.) stays above others */
#ordersTable thead th:first-child,
#tradingTable thead th:first-child {
  z-index: 11;
}

/* ============================================
   TABLE WIDTH FIX — Prevent column squishing
   ============================================ */
#ordersTable,
#tradingTable {
  min-width: 1600px;
}

/* Status column minimum width */
#ordersTable th:nth-child(13),
#ordersTable td:nth-child(13) {
  min-width: 90px;
}

/* Status badge — ensure full text shows */
.status-badge {
  white-space: nowrap;
  display: inline-flex;
}

/* ============================================
   CUSTOMER ROLE — READ ONLY INDICATORS
   ============================================ */
/* Trading table rows for customer — show as non-interactive */
body.customer-role #tradingTable tbody tr[data-id] {
  cursor: default;
}

body.customer-role #tradingTable tbody tr[data-id]:hover td {
  background: transparent;
}

body.customer-role .trade-card {
  cursor: default;
}

body.customer-role .trade-card:hover {
  box-shadow: var(--shadow-0);
  transform: none;
}
/* ============================================
   GOLD RATE & FILTER BAR EXTRAS
   ============================================ */
#goldRateInput {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--md-primary);
}
.filter-bar .field {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.filter-bar .field label {
  display: block;
  font-size: calc(12.71px * var(--font-scale) / 100);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-on-surface-variant);
}

/* Pay result type badge */
.pay-result-type {
  font-size: calc(11.55px * var(--font-scale) / 100);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-2);
  padding: 2px 6px;
  border-radius: 100px;
}

/* Memo summary in panel */
#memoSummary {
  margin-top: 8px;
  padding: 12px;
  background: var(--md-surface-variant);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  font-size: calc(15.01px * var(--font-scale) / 100);
  line-height: 1.5;
}
#memoSummary .computed-row {
  padding: 4px 0;
}
#memoSummary .computed-row:last-child {
  border-bottom: none;
}
/* Sortable column headers */
#ordersTable th.sortable,
#tradingTable th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
#ordersTable th.sortable:hover,
#tradingTable th.sortable:hover {
  color: var(--md-primary);
}
.sort-icon {
  font-size: calc(12.71px * var(--font-scale) / 100);
  margin-left: 3px;
  opacity: 0.65;
}
/* ============================================
   UNIFIED VIEW (Orders + Trading)
   ============================================ */

.unified-banner {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: var(--radius-md);
  font-size: calc(16.17px * var(--font-scale) / 100);
  font-weight: 500;
  border: 1px solid var(--md-outline-variant);
}

.unified-banner strong {
  color: var(--md-on-primary-container);
  font-weight: 700;
}

/* Table row color coding */
.unified-row-order {
  border-left: 3px solid var(--md-primary) !important;
}

.unified-row-trade {
  border-left: 3px solid var(--md-success) !important;
}

.unified-row-order td:first-child,
.unified-row-trade td:first-child {
  position: sticky;
  left: 0;
  background: var(--md-surface);
  z-index: 2;
}

#ordersTable .unified-row-order:hover td,
#ordersTable .unified-row-trade:hover td {
  background: rgba(26,115,232,0.03);
}

/* Type badges */
.type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: calc(12.71px * var(--font-scale) / 100);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.order-badge {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.trade-badge {
  background: var(--md-success-container);
  color: #1E8E3E;
}

/* Mobile cards */
.unified-card-order {
  border-left: 3px solid var(--md-primary) !important;
}

.unified-card-trade {
  border-left: 3px solid var(--md-success) !important;
}
/* ============================================
   FILTER BAR — Right-aligned pill inputs
   ============================================ */

.filter-bar .filter-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.filter-pill {
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: calc(17.32px * var(--font-scale) / 100);
  color: var(--md-on-surface);
  background: var(--md-surface-variant);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  outline: none;
  width: 160px;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.filter-pill:hover {
  background: var(--md-surface-2);
}

.filter-pill:focus {
  background: var(--md-surface);
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}

.filter-pill::placeholder {
  color: var(--md-on-surface-variant);
}

/* Mobile: stack filters below gold rate */
@media (max-width: 900px) {
  .filter-bar {
    flex-wrap: wrap;
  }
  .filter-bar .filter-right {
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-2);
    justify-content: flex-end;
  }
  .filter-pill {
    flex: 1;
    min-width: 0;
  }
}
#ordersTable td.num,
#tradingTable td.num,
#expensesTable td.num,
#ordersTable th.num,
#tradingTable th.num,
#expensesTable th.num {
  text-align: right;
}
/* Expense cards */
.expense-card .card-header { border-bottom: none; }
.expense-card .card-header-right { gap: 10px; }

/* Expense panel uses same panel styles — no extra CSS needed */

/* Hide expense filters by default */
#filterExpenseCategory,
#filterExpenseSeller { display: none; }

/* When in expenses view, show them (handled by JS, but CSS fallback) */
body.expenses-active #filterExpenseCategory,
body.expenses-active #filterExpenseSeller { display: inline-block; }
/* ============================================
   MOBILE-FRIENDLY PATCHES — paste at end of style.css
   ============================================ */

/* Prevent body scroll when panel is open */
body.panel-open {
  overflow: hidden;
  touch-action: none;
}

/* Panel rubber-band containment */
#panel, #tradePanel, #expensePanel, #paymentSearchModal {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Pull-to-refresh indicator */
.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-40px);
  z-index: 120;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.ptr-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--md-outline);
  border-top-color: var(--md-primary);
  border-radius: 50%;
  animation: ptrSpin 0.8s linear infinite;
}
@keyframes ptrSpin {
  to { transform: rotate(360deg); }
}

/* Floating Action Button (mobile only) */
.mobile-fab {
  position: fixed;
  right: 20px;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  font-size: calc(32.34px * var(--font-scale) / 100);
  line-height: 1;
  box-shadow: var(--shadow-3);
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s;
}
.mobile-fab:active {
  transform: scale(0.92);
  box-shadow: var(--shadow-2);
}

/* Card swipe actions */
@media (max-width: 900px) {
  .order-card, .trade-card, .expense-card {
    touch-action: pan-y;
    user-select: none;
    position: relative;
    overflow: hidden;
  }
  .card-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-primary);
    color: var(--md-on-primary);
    font-size: calc(15.01px * var(--font-scale) / 100);
    font-weight: 600;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: pointer;
  }
  .order-card.swiped-left .card-actions,
  .trade-card.swiped-left .card-actions,
  .expense-card.swiped-left .card-actions {
    opacity: 1;
  }
}

/* iOS input zoom fix */
@media (max-width: 900px) {
  input, select, textarea {
    font-size: 16.8px !important;
  }
}

/* Larger touch targets on mobile */
@media (max-width: 900px) {
  .btn, .status-badge, .card-header, .pay-result-item,
  .pagination-bar button, .search-clear,
  #closePanel, #closeTradePanel, #closeExpensePanel, #closePaymentSearch,
  #closeCustomerProfile, #closeInsights, #closeBuyers, #closeBuyerForm, #closeMemoDetail, #closeSettings {
    min-height: 44px;
  }
  .view-toggle .btn {
    padding: 8px 20px;
  }
}

/* Safe-area padding for notched devices */
.topbar {
  padding-top: max(var(--space-3), env(safe-area-inset-top));
  padding-left: max(var(--space-5), env(safe-area-inset-left));
  padding-right: max(var(--space-5), env(safe-area-inset-right));
}
#panel, #tradePanel, #expensePanel, #paymentSearchModal {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Compact panel fields ── */
.fields-grid.compact {
  gap: var(--space-2) var(--space-3);
}
.fields-grid.compact .field {
  margin-bottom: var(--space-2);
}
.fields-grid.compact .field label {
  margin-bottom: 3px;
  font-size: calc(12.71px * var(--font-scale) / 100);
}
.fields-grid.compact input,
.fields-grid.compact select {
  padding: 7px 10px;
  font-size: calc(16.17px * var(--font-scale) / 100);
}

/* ── Bottom Live Preview ── */
.panel-preview-bottom {
  background: var(--md-surface-variant);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.computed-preview.compact {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2) var(--space-4);
}
.computed-preview.compact .computed-row {
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 0;
  border-bottom: none;
  gap: 2px;
}
.computed-preview.compact .computed-row .label {
  font-size: calc(12.71px * var(--font-scale) / 100);
}
.computed-preview.compact .computed-row .value {
  font-size: calc(17.32px * var(--font-scale) / 100);
}

@media (max-width: 900px) {
  .computed-preview.compact {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   PANEL LAYOUT REDESIGN
   ============================================ */

/* Wider panel for complex forms */
@media (min-width: 901px) {
  #panel { max-width: 720px; }
}

/* ── Tabs ── */
.panel-tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}
.panel-tab {
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: calc(16.17px * var(--font-scale) / 100);
  font-weight: 500;
  color: var(--md-on-surface-variant);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.panel-tab:hover { color: var(--md-on-surface); background: rgba(26,115,232,0.04); }
.panel-tab.active { color: var(--md-primary); border-bottom-color: var(--md-primary); }

/* ── Tab Content ── */
.tab-content { display: none; animation: fadeIn var(--duration-normal) var(--ease-standard); }
.tab-content.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section Cards ── */
.section-card {
  background: var(--md-surface-1);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.section-card-title {
  font-size: calc(13.86px * var(--font-scale) / 100); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--md-on-surface-variant);
  margin-bottom: var(--space-3);
}

/* ── 2-Column Field Grid ── */
.fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
.fields-grid .field { margin-bottom: 0; }
.fields-grid .field.full-width { grid-column: 1 / -1; }

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

/* ── Sticky Live Preview (deprecated — now at bottom) ── */
.sticky-preview {
  display: none;
}

/* ── Compact Installment Chips ── */
.installment-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.installment-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: var(--radius-pill);
  font-size: calc(15.01px * var(--font-scale) / 100); font-weight: 500;
}
.installment-chip button {
  background: none; border: none;
  color: var(--md-on-primary-container); opacity: 0.6;
  cursor: pointer; font-size: calc(18.48px * var(--font-scale) / 100); line-height: 1; padding: 0 2px;
}
.installment-chip button:hover { opacity: 1; }

/* ── Payment Summary card (Order tab-sale, Trading tab-trade-payment) ── */
.sticky-preview-card {
  padding: var(--space-2) var(--space-4);
}
.sticky-preview-card .section-card-title {
  margin-bottom: 4px;
}

/* ── Running balance tag next to "+ Add installment" ── */
.remaining-balance-tag {
  font-size: calc(15.01px * var(--font-scale) / 100);
  font-weight: 600;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.remaining-balance-tag.balance-zero { color: var(--md-success); }
.remaining-balance-tag.balance-over { color: var(--md-error); }

/* ── Memo Banner (top of panel) ── */
.panel-memo-banner {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) var(--space-5);
  font-size: calc(16.17px * var(--font-scale) / 100); font-weight: 500;
}
.memo-compact-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.memo-compact-title {
  font-weight: 600;
  font-size: calc(15.01px * var(--font-scale) / 100);
  white-space: nowrap;
  padding-right: var(--space-2);
  border-right: 1px solid var(--md-on-primary-container);
  opacity: 0.9;
}
.memo-compact-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
}
.memo-compact-stat .label {
  font-size: calc(11.55px * var(--font-scale) / 100);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}
.memo-compact-stat .value {
  font-size: calc(16.17px * var(--font-scale) / 100);
  font-weight: 600;
}

/* ── Sticky Footer ── */
.panel-foot {
  position: sticky;
  bottom: 0;
  background: var(--md-surface);
  z-index: 10;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

/* ── Status Badge in Header ── */
.panel-head { position: relative; }
#panelStatusBadge {
  margin-left: auto; margin-right: var(--space-3);
  font-size: calc(12.71px * var(--font-scale) / 100); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: var(--radius-pill);
}


/* ── Change password message ── */
.pw-msg {
  font-size: calc(13.86px * var(--font-scale) / 100);
  color: var(--md-error);
  min-height: 18px;
  margin-bottom: var(--space-3);
}
.pw-msg.ok { color: var(--md-success); }