:root {
  --navy: #1a3a5c;
  --navy-dark: #0f2438;
  --navy-mid: #254e7a;
  --blue: #2E75B6;
  --blue-light: #e8f1f8;
  --blue-mid: #c5d9ed;
  --red: #c0392b;
  --red-light: #fdf0ef;
  --green: #2d6a4f;
  --green-light: #eaf4ee;
  --amber: #8a5200;
  --amber-light: #fff8ed;
  --amber-border: #f0c060;
  --black-bg: #111418;
  --surface: #f4f6f9;
  --surface-2: #ebeef3;
  --white: #ffffff;
  --border: #dde2ea;
  --border-strong: #c8cfd9;
  --text: #1a1f2e;
  --text-mid: #4a5568;
  --text-muted: #8492a6;
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --radius: 8px;
  --radius-sm: 5px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  line-height: 1.5;
}

/* ── LOGIN ─────────────────────────────────────────────────── */
#login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-dark);
  z-index: 1000;
}

.login-box {
  background: var(--white);
  border-radius: 12px;
  padding: 44px 40px;
  width: 380px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}

.login-logo {
  text-align: center;
  margin-bottom: 8px;
}
.login-logo .brand {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--navy);
  letter-spacing: 0.3px;
}
.login-logo .tagline {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.login-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}
.login-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text);
  margin-bottom: 20px;
  text-align: center;
  font-style: italic;
}

.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-mid);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s;
  outline: none;
}
.form-input:focus { border-color: var(--blue); }

.btn-login {
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 8px;
}
.btn-login:hover { background: var(--navy-mid); }

#login-error {
  display: none;
  background: var(--red-light);
  border: 1px solid #f5c6c2;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--red);
  margin-top: 12px;
  text-align: center;
}

/* ── APP SHELL ──────────────────────────────────────────────── */
#app {
  display: none;
  height: 100vh;
  flex-direction: column;
}
#app.visible { display: flex; }

/* Header */
.app-header {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-bottom: 2px solid var(--navy-dark);
}

/* ── Top row: brand + account nav + user controls ── */
.header-row-top {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.header-nav-accounts {
  display: flex;
  gap: 2px;
  align-items: center;
  flex: 1;
}

/* ── Bottom row: tools nav ── */
.header-row-bottom {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 10px;
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.header-nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.18);
  margin: 0 6px;
  flex-shrink: 0;
}

.header-nav-tools {
  display: flex;
  gap: 2px;
  align-items: center;
}

.header-brand {
  font-family: var(--font-display);
  font-size: 17px;
  color: white;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* Invisible clone of brand used in bottom row to align tool buttons with account buttons above */
.header-brand-spacer {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.header-divider {
  width: 1px; height: 22px;
  background: rgba(255,255,255,0.15);
}

/* Invisible clone of divider for bottom row alignment */
.header-divider-spacer {
  width: 1px;
  flex-shrink: 0;
  visibility: hidden;
}

.header-nav {
  display: flex;
  gap: 2px;
  flex: 1;
}

.nav-btn {
  padding: 4px 11px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.nav-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.nav-btn.active { background: rgba(255,255,255,0.15); color: white; }

/* ── To-Do button — always bright amber regardless of light/dark mode ── */
.nav-btn-todo {
  background: #f0b040 !important;
  color: #2a1400 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 11px !important;
}
.nav-btn-todo:hover { filter: brightness(1.08); }
.nav-btn-todo.active { filter: brightness(0.92); }

/* ── Mail Kit button — always deep purple ── */
.nav-btn-mailkit {
  background: #5b21b6 !important;
  color: #ede9fe !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 11px !important;
}
.nav-btn-mailkit:hover { filter: brightness(1.15); }
.nav-btn-mailkit.active { filter: brightness(0.88); outline: 2px solid rgba(237,233,254,0.4); outline-offset: 1px; }

/* ── Bottom row nav buttons — match visual size of top row ── */
.header-row-bottom .nav-btn { font-size: 13px; }

.todo-badge {
  display: none;
  background: rgba(0,0,0,0.22);
  color: #2a1400;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.5;
}
.todo-badge.visible { display: inline-block; }

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.conn-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-right: 4px;
  font-family: var(--font-body);
}
.conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #888;
  flex-shrink: 0;
  transition: background 0.4s;
}
.conn-dot.green  { background: #4ade80; }
.conn-dot.yellow { background: #fbbf24; }
.conn-dot.red    { background: #f87171; }

.db-status-bar {
  height: 3px;
  width: 100%;
  background: #888;
  transition: background 0.4s;
  flex-shrink: 0;
}

.user-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: white;
  flex-shrink: 0;
}
.user-name {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}
.btn-signout {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.btn-signout:hover { border-color: rgba(255,255,255,0.4); color: white; }

/* Main area */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width: 290px;
  min-width: 290px;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-top {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.search-wrap {
  position: relative;
  margin-bottom: 8px;
}
.search-icon {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 8px 10px 8px 30px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.search-input:focus {
  border-color: var(--blue);
  background: var(--white);
}

.filter-row {
  display: flex;
  gap: 6px;
}
.filter-select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  cursor: pointer;
}
.filter-select:focus { border-color: var(--blue); }

.status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.chip {
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: var(--font-body);
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.active { background: var(--navy); color: white; border-color: var(--navy); }

.list-meta {
  padding: 6px 12px 4px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-new-account {
  padding: 3px 10px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-new-account:hover { background: var(--navy-mid); }

.account-list {
  flex: 1;
  overflow-y: auto;
}

.acct-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}
.acct-row:hover { background: var(--surface); }
.acct-row.selected {
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  padding-left: 9px;
}
.acct-row.blocked-row {
  background: var(--black-bg);
  border-bottom: 1px solid #2a2a2a;
}
.acct-row.blocked-row:hover { background: #1a1a1a; }
.acct-row.blocked-row.selected { border-left: 3px solid #f0a500; }

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.acct-info { flex: 1; min-width: 0; }
.acct-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-row.blocked-row .acct-name { color: #e8e8e8; }
.acct-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-row.blocked-row .acct-sub { color: #666; }

.blocked-pill {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  background: #f0a500;
  color: #111;
  border-radius: 99px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ── MAIN PANEL ─────────────────────────────────────────────── */
.main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}

.empty-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--text-muted);
}
.empty-panel .ep-icon { font-size: 40px; opacity: 0.3; }
.empty-panel .ep-text {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  opacity: 0.5;
}

/* Account panel */
#account-panel {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
#account-panel.visible { display: flex; }

.panel-header {
  padding: 14px 20px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--navy);
  line-height: 1.2;
}

.panel-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.status-badge {
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 99px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.hwc-banner {
  display: none;
  background: var(--amber-light);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--amber);
  margin-top: 8px;
  align-items: center;
  gap: 8px;
}
.hwc-banner.visible { display: flex; }

/* Terms Watch */
.terms-watch-banner {
  display: none;
  background: #fff3cd;
  border: 1px solid #e0a030;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  color: #7a4800;
  font-weight: 600;
  margin-top: 6px;
  align-items: center;
  gap: 8px;
}
.terms-watch-banner.visible { display: flex; }
.ar-terms-watch-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  background: #fff3cd;
  color: #7a4800;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid #e0a030;
  flex-shrink: 0;
}
.ar-terms-watch-bar {
  background: #fff3cd;
  border-left: 3px solid #e0a030;
  color: #7a4800;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  margin-bottom: 8px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Account Admin / Merge / Delete */
.merge-explainer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.merge-explainer strong { color: var(--text); }
.merge-winner-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--text);
  box-sizing: border-box;
}
body.dark .merge-winner-search { background: #1e2330; color: #e8ecf4; border-color: #3a4558; }
.merge-winner-results {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
  margin-top: 4px;
  background: var(--white);
}
body.dark .merge-winner-results { background: #1a1e28; border-color: #2a3040; }
.merge-winner-row {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.merge-winner-row:last-child { border-bottom: none; }
.merge-winner-row:hover { background: var(--blue-light); }
.merge-winner-row.selected { background: var(--blue-light); border-left: 3px solid var(--blue); }
.merge-winner-name { font-weight: 600; color: var(--navy); font-size: 13px; }
.merge-winner-sub  { font-size: 11px; color: var(--text-muted); }
.merge-preview-box {
  background: #fff8ed;
  border: 1px solid #e0a030;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 12px;
  color: #7a4800;
}
body.dark .merge-preview-box { background: #2a1f00; border-color: #c07800; color: #e0a030; }
.merge-preview-box strong { color: var(--text); }
body.dark .merge-preview-box strong { color: #f0d080; }
.merge-history-entry {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.6;
}
.merge-history-entry:last-child { border-bottom: none; }
.merge-history-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 99px; }
.merge-role-winner { background: #eaf4ee; color: #2d6a4f; }
.merge-role-loser  { background: #f0f0f0; color: #666; }

/* Warnings */
.warnings-bar {
  padding: 0 20px 10px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}

.warning-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--amber-light);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 12px;
  color: var(--amber);
}
.warning-item.error {
  background: var(--red-light);
  border-color: #f5c6c2;
  color: var(--red);
}
.w-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Tabs */
.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  padding: 0 20px;
  flex-shrink: 0;
}
.tab-btn {
  padding: 9px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--navy); }
.tab-btn.active { color: var(--navy); border-bottom-color: var(--blue); font-weight: 500; }

/* Tab content */
.tab-content { display: none; flex: 1; overflow-y: auto; padding: 20px; }
.tab-content.active { display: block; }

/* Section label */
.sec-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blue);
  margin-bottom: 8px;
  margin-top: 20px;
}
.sec-label:first-child { margin-top: 0; }

/* Field grid */
.field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.field-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.field-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.field-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.field-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.field-value {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.field-value.missing { color: var(--text-muted); font-style: italic; }
.field-value.money { font-family: var(--font-display); }

/* Notes boxes */
.notes-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  min-height: 60px;
  white-space: pre-wrap;
  word-break: break-word;
}
.notes-box.personal {
  border-left: 3px solid #AB8BD0;
  background: #faf7fe;
}

/* Recent log entry */
.log-preview {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.log-preview:hover { border-color: var(--blue); }
.log-preview-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.log-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.log-subject { font-size: 13px; font-weight: 500; color: var(--text); }
.log-meta { font-size: 11px; color: var(--text-muted); }
.log-preview-link {
  font-size: 11px;
  color: var(--blue);
  margin-top: 4px;
}

/* Ship-to dropdown */
.shipto-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--blue);
  cursor: pointer;
  padding: 4px 0;
  border: none;
  background: none;
  font-family: var(--font-body);
}
.shipto-list { display: none; }
.shipto-list.open { display: block; }
.shipto-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 6px;
  font-size: 13px;
}
.shipto-item-label { font-weight: 500; font-size: 12px; color: var(--navy); margin-bottom: 2px; }

/* Contacts tab */
.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
}
.contact-card.inactive { opacity: 0.55; }
.contact-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.contact-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--navy);
}
.contact-title { font-size: 12px; color: var(--text-muted); }
.contact-primary-pill {
  font-size: 10px; padding: 2px 7px;
  background: var(--green-light);
  color: var(--green);
  border-radius: 99px;
  font-weight: 500;
}
.contact-ap-pill {
  font-size: 10px; padding: 2px 7px;
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid var(--amber-border);
  border-radius: 99px;
  font-weight: 500;
}
.contact-card.ap-card { border-left: 3px solid var(--amber); }
.contact-ds-pill {
  font-size: 10px; padding: 2px 7px;
  background: #f0eaff;
  color: #6a20a0;
  border: 1px solid #d4b8f0;
  border-radius: 99px;
  font-weight: 500;
}
.contact-card.ds-card { border-left: 3px solid #6a20a0; }
.contact-purchasing-pill {
  font-size: 10px; padding: 2px 7px;
  background: #e6f4f1;
  color: #0d7a5f;
  border: 1px solid #a8d5c9;
  border-radius: 99px;
  font-weight: 500;
}
.contact-card.purchasing-card { border-left: 3px solid #0d7a5f; }
.contact-addl-ds-pill {
  font-size: 10px; padding: 2px 7px;
  background: #e6f0fa;
  color: #1a5c96;
  border: 1px solid #a8cce0;
  border-radius: 99px;
  font-weight: 500;
}
.contact-card.addl-ds-card { border-left: 3px solid #1a5c96; }
.contact-inactive-pill {
  font-size: 10px; padding: 2px 7px;
  background: var(--surface-2);
  color: var(--text-muted);
  border-radius: 99px;
}
.contact-role-tag {
  font-size: 10px; padding: 2px 7px;
  background: var(--blue-light);
  color: var(--blue);
  border-radius: 99px;
}

/* Account tag pills */
.tags-row {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 4px 0;
}
.tag-pill, .acct-tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  color: white;
  white-space: nowrap;
}
.tag-pill-remove {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.7; font-size: 12px;
  line-height: 1; padding: 0; margin: 0;
}
.tag-pill-remove:hover { opacity: 1; }
.btn-add-tag {
  font-size: 11px; padding: 2px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 99px; background: none;
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font-body);
}
.btn-add-tag:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

/* Tag dropdown */
.tag-dropdown {
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  max-width: 260px;
  z-index: 999;
  overflow: hidden;
}
.tag-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
  border-bottom: 1px solid var(--border);
}
.tag-dropdown-item:last-child { border-bottom: none; }
.tag-dropdown-item:hover { background: var(--blue-light); color: var(--blue); }
.tag-dropdown-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tag-dropdown-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-body);
}
body.dark .tag-dropdown { background: #1e2330; border-color: #3a4558; }
body.dark .tag-dropdown-item { color: #c8d0e0; border-color: #2a3040; }
body.dark .tag-dropdown-item:hover { background: #0d2035; color: var(--blue); }

.contact-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
  margin-top: 8px;
}
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
  margin-top: 8px;
}

/* Log tab */
.log-entry {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.log-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.log-type-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 500;
}
.log-direction {
  font-size: 10px;
  color: var(--text-muted);
}
.log-entry-subject { font-weight: 500; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.log-entry-notes { font-size: 13px; color: var(--text-mid); line-height: 1.6; }
.log-followup {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--amber-light);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--amber);
}
.log-followup.done {
  background: var(--green-light);
  border-color: #a8d8b4;
  color: var(--green);
}

/* Add log form */
.add-log-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-field label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.form-field select, .form-field input, .form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  outline: none;
}
.form-field select:focus, .form-field input:focus, .form-field textarea:focus { border-color: var(--blue); background: white; }
.form-field textarea { resize: vertical; min-height: 80px; }

.btn-save {
  padding: 8px 20px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-save:hover { background: var(--navy-mid); }

/* Status badge colors */
.badge-active { background: #eaf4ee; color: #2d6a4f; }
.badge-prospect { background: #e8f1f8; color: #1a5a9a; }
.badge-cold { background: #f0f0f0; color: #666; }
.badge-hold { background: #fff8ed; color: #8a5200; }
.badge-inactive { background: #f5f5f5; color: #888; }
.badge-denied { background: #fdf0ef; color: #c0392b; }
.badge-blocked { background: #111; color: #f0a500; }

/* Status dot colors */
.dot-active { background: #2d6a4f; }
.dot-prospect { background: #2E75B6; }
.dot-cold { background: #8492a6; }
.dot-hold { background: #8a5200; }
.dot-inactive { background: #aaa; }
.dot-denied { background: #c0392b; }
.dot-blocked { background: #f0a500; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-row {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* New account modal */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 500;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white);
  border-radius: var(--radius);
  width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--navy);
}
.modal-close {
  width: 28px; height: 28px;
  border: none; background: none;
  font-size: 18px; color: var(--text-muted);
  cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--surface); }
.modal-body { padding: 20px 22px; }
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn-cancel {
  padding: 8px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: white;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-mid);
  cursor: pointer;
}
.btn-cancel:hover { background: var(--surface); }

/* Full-width form field */
.form-field-full { margin-bottom: 12px; }
.form-field-full label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; }
.form-field-full select, .form-field-full input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  outline: none;
}
.form-field-full select:focus, .form-field-full input:focus { border-color: var(--blue); background: white; }
.modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── DARK MODE ──────────────────────────────────────────────── */
body.dark {
  --navy: #4a9fd4;
  --navy-dark: #0a0e14;
  --navy-mid: #3a8abf;
  --blue: #5ba8d8;
  --blue-light: #0d2035;
  --blue-mid: #1a3a55;
  --red: #e05c5c;
  --red-light: #2a1010;
  --green: #4caf7d;
  --green-light: #0d2018;
  --amber: #f0b040;
  --amber-light: #251a00;
  --amber-border: #8a6010;
  --black-bg: #000000;
  --surface: #111418;
  --surface-2: #1a1f28;
  --white: #1e2330;
  --border: #2a3040;
  --border-strong: #3a4558;
  --text: #e8ecf4;
  --text-mid: #a0abbe;
  --text-muted: #6a7a94;
}
body.dark .app-header { background: #0d1520 !important; border-bottom-color: #0a0e14 !important; }
body.dark .login-box { background: #1e2330; }
body.dark .login-logo .brand { color: #4a9fd4; }
body.dark .form-input { background: #111418; color: #e8ecf4; border-color: #3a4558; }
body.dark .filter-select, body.dark .search-input { background: #111418; color: #e8ecf4; border-color: #3a4558; }
body.dark .chip { background: #1e2330; color: #a0abbe; border-color: #3a4558; }
body.dark .chip.active { background: #0d2035; color: #5ba8d8; border-color: #5ba8d8; }
body.dark .panel-header { background: #1e2330 !important; }
body.dark .panel-tabs { background: #1e2330 !important; }
body.dark .tab-btn.active { color: #5ba8d8; border-bottom-color: #5ba8d8; }
body.dark .field-card { background: #111418; border-color: #2a3040; }
body.dark .notes-box { background: #111418; border-color: #2a3040; color: #e8ecf4; }
body.dark .notes-box.personal { background: #180e25; border-left-color: #7a5ba8; }
body.dark .log-preview, body.dark .log-entry, body.dark .contact-card, body.dark .add-log-form { background: #1e2330; border-color: #2a3040; }
body.dark .form-field select, body.dark .form-field input, body.dark .form-field textarea { background: #111418; color: #e8ecf4; border-color: #3a4558; }
body.dark .modal { background: #1e2330; }
body.dark .modal-header, body.dark .modal-footer { border-color: #2a3040; }
body.dark .form-field-full select, body.dark .form-field-full input { background: #111418; color: #e8ecf4; border-color: #3a4558; }
body.dark .btn-cancel { background: #1e2330; border-color: #3a4558; color: #a0abbe; }
body.dark .sidebar { background: #161b24 !important; border-right-color: #2a3040 !important; }
body.dark .sidebar-top { background: #161b24 !important; }
body.dark .status-chips { background: #111418 !important; }
body.dark .list-meta { border-bottom-color: #2a3040; }
body.dark .acct-row { border-bottom-color: #2a3040; }
body.dark .acct-row:hover { background: #1e2330; }
body.dark .acct-row.selected { background: #0d2035; border-left-color: #5ba8d8; }
body.dark .warnings-bar { background: #1e2330 !important; }
body.dark .shipto-item { background: #111418; border-color: #2a3040; }
body.dark .sidebar-resizer { background: #2a3040; }
body.dark .sidebar-resizer:hover { background: #5ba8d8; }

/* ── DARK MODE BUTTON ───────────────────────────────────────── */
.btn-darkmode {
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.btn-darkmode:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); }

/* ── RESIZABLE SIDEBAR ──────────────────────────────────────── */
.sidebar-resizer {
  width: 5px;
  cursor: col-resize;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.15s;
  position: relative;
  z-index: 10;
}
.sidebar-resizer:hover, .sidebar-resizer.dragging { background: var(--blue); }

/* ── COPY FIELDS ────────────────────────────────────────────── */
.copyable {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}
.copyable:hover { border-color: var(--blue) !important; background: var(--blue-light) !important; }
.copy-hint {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s;
}
.copyable:hover .copy-hint { opacity: 1; }
.copy-flash {
  background: var(--green-light) !important;
  border-color: var(--green) !important;
  transition: background 0s, border-color 0s !important;
}
.copyable { transition: background 0.15s, border-color 0.15s; }
.copyable-name {
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
}
.copyable-name:hover { border-bottom-color: var(--blue); }

/* ── INLINE EDITING ─────────────────────────────────────────── */
.field-card.editable { cursor: default; }
.field-card.editable:hover { border-color: var(--border); background: var(--surface); }
.field-card.shift-hint {
  position: relative;
  cursor: pointer;
}
.field-card.shift-hint:hover {
  border-color: var(--blue);
  background: var(--blue-light);
}
body.dark .field-card.shift-hint:hover {
  border-color: #5ba8d8;
  background: #0d2035;
}
.field-card.shift-hint::after {
  content: '\270E';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 11px;
  color: var(--blue);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  line-height: 1;
}
.field-card.shift-hint:hover::after { opacity: 0.6; }

.inline-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  padding: 0;
  margin: 0;
}
.inline-select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: auto;
}
.inline-textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  padding: 0;
  margin: 0;
  resize: vertical;
  min-height: 60px;
  line-height: 1.6;
}
.field-card.editing {
  border-color: var(--blue) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 2px rgba(46,117,182,0.15);
}
.notes-box.editing {
  border-color: var(--blue) !important;
  outline: none;
  cursor: text;
}
.edit-hint {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
  display: block;
}
.edit-saved-flash {
  animation: savedFlash 0.6s ease;
}
@keyframes savedFlash {
  0% { border-color: var(--blue); }
  50% { border-color: var(--green); background: var(--green-light); }
  100% { border-color: var(--border); background: var(--surface); }
}
body.dark .field-card.editing { background: #0d1a28 !important; }
body.dark .inline-input, body.dark .inline-select, body.dark .inline-textarea { color: #e8ecf4; }

/* ── DARK MODE SELECT FIX ───────────────────────────────────── */
body.dark .inline-select {
  background: #1e2330;
  color: #e8ecf4;
  border: 1px solid #3a4558;
  border-radius: 3px;
}
body.dark .inline-input {
  background: transparent;
  color: #e8ecf4;
}
body.dark .field-card.editing .inline-select,
body.dark .field-card.editing .inline-input {
  background: #0d1a28;
  color: #e8ecf4;
}
/* Force option readability - browser native dropdowns respect these */
body.dark select option {
  background: #1e2330;
  color: #e8ecf4;
}
body.dark .filter-select option {
  background: #1e2330;
  color: #e8ecf4;
}

/* ── ADDRESS CARDS ──────────────────────────────────────────── */
.address-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.address-line {
  font-size: 13px;
  color: var(--text);
  min-height: 18px;
  padding: 1px 3px;
  border-radius: 3px;
  cursor: default;
}
.address-line:hover {
  background: var(--blue-light);
  outline: 1px dashed var(--blue);
}
.address-city-line {
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1px;
}
.address-city-line span.shift-hint {
  padding: 1px 3px;
  border-radius: 3px;
  cursor: default;
  min-width: 20px;
  display: inline-block;
}
.address-city-line span.shift-hint:hover {
  background: var(--blue-light);
  outline: 1px dashed var(--blue);
}
.addr-sep { color: var(--text-muted); }
.shipto-addr { margin-top: 4px; }
.shipto-addr div { font-size: 13px; color: var(--text); line-height: 1.5; }
body.dark .address-card { background: #111418; border-color: #2a3040; }
body.dark .address-line:hover { background: #0d2035; }
body.dark .address-city-line span.shift-hint:hover { background: #0d2035; }
body.dark .shipto-addr div { color: #e8ecf4; }

.btn-add-shipto {
  padding: 5px 12px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--blue);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
}
.btn-add-shipto:hover { background: var(--blue-light); border-color: var(--blue); }
.btn-shipto-deactivate {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}
.btn-shipto-deactivate:hover { color: var(--red); }

/* ── ADDRESS BLOCK ──────────────────────────────────────────── */
.address-block { line-height: 1.65; }
.addr-csz-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
}
.addr-csz-city, .addr-csz-state, .addr-csz-zip {
  display: inline-block;
  min-width: 12px;
}
.addr-csz-state { min-width: 28px; }
.addr-comma, .addr-space { color: var(--text); pointer-events: none; font-size: 13px; }
.addr-muted { color: var(--text-muted) !important; font-size: 12px !important; }
.addr-company { color: var(--text); font-weight: 500; }
.btn-copy-addr {
  padding: 3px 8px;
  font-size: 11px;
  font-family: var(--font-body);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.btn-copy-addr:hover { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }
.btn-copy-addr.copied { background: var(--green-light); border-color: var(--green); color: var(--green); }
body.dark .addr-comma, body.dark .addr-space { color: var(--text); }

/* ── TWO COLUMN SECTIONS (old - replaced) ────────────────────────────────────── */
.two-col-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 4px;
}
.two-col-left, .two-col-right {
  min-width: 0;
}
/* Stack on narrow screens */
@media (max-width: 900px) {
  .two-col-sections { grid-template-columns: 1fr; }
}
/* Fix field-grid inside columns — use 2 cols max instead of 4 */
.two-col-left .field-grid-4,
.two-col-right .field-grid-4 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.two-col-left .field-grid-2,
.two-col-right .field-grid-2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
/* Address card full width inside column */
.two-col-left .address-card,
.two-col-right .address-card {
  grid-column: span 1 !important;
}

/* ── OVERVIEW CARDS ─────────────────────────────────────────── */
.ov-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ov-card .sec-label {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ov-card .sec-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.ov-card-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.ov-card-col {
  margin-bottom: 0 !important;
}
/* Inside col cards — field grids use 2 cols max */
.ov-card-col .field-grid-4 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.ov-card-col .field-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.ov-card-col .field-grid-2 {
  grid-template-columns: repeat(1, minmax(0,1fr));
}
/* Stack on narrow screens */
@media (max-width: 1000px) {
  .ov-card-row { grid-template-columns: 1fr; }
}
body.dark .ov-card {
  background: var(--white);
  border-color: var(--border);
}

/* ── EXPANDABLE ACCOUNT CARD ────────────────────────────────── */
.btn-expand-acct {
  font-size: 11px;
  font-family: var(--font-body);
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-expand-acct:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.acct-expand-rows { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── TWO COL NOTES ──────────────────────────────────────────── */
.ov-card-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.ov-card-col2 { margin-bottom: 0 !important; }

/* ── TAX EXEMPT COMPACT ─────────────────────────────────────── */
.ov-card-sm { margin-bottom: 12px; }
.ov-card-sm .field-grid-2 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ── TWO COL BILLING/SHIPPING ───────────────────────────────── */
.ov-card-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ov-card-col .field-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ov-card-col .field-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ov-card-col .field-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 1000px) {
  .ov-card-row { grid-template-columns: 1fr; }
  .ov-card-row-2 { grid-template-columns: 1fr; }
}

/* ── INCOMPLETE FIELD HIGHLIGHT ─────────────────────────────── */
.field-card.incomplete {
  background: #fffaf0 !important;
  border-color: #f0c060 !important;
}
.field-card.incomplete .field-label {
  color: #8a5200;
}
body.dark .field-card.incomplete {
  background: #251a00 !important;
  border-color: #8a6010 !important;
}
body.dark .field-card.incomplete .field-label {
  color: #f0b040;
}

/* ── INSTALLER BANNER ───────────────────────────────────────── */
.installer-banner {
  background: #6a20a0;
  color: white;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #4a1070;
}
.installer-banner-icon { font-size: 20px; }
.installer-banner-title { font-weight: 600; font-size: 14px; letter-spacing: 0.05em; }
.installer-banner-sub { font-size: 12px; opacity: 0.85; margin-top: 1px; }

/* ── DENIED BANNER ──────────────────────────────────────────── */
.denied-banner {
  background: #8b0000;
  color: white;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid #5a0000;
}
.denied-banner-title { font-weight: 600; font-size: 14px; letter-spacing: 0.05em; }
.denied-banner-sub { font-size: 12px; opacity: 0.85; margin-top: 1px; }

/* ── VENDOR STATUS BADGE ────────────────────────────────────── */
.badge-vendor-active { background: #eaf4ee; color: #2d6a4f; }
.badge-vendor-inactive { background: #f0f0f0; color: #666; }
.badge-vendor-backup { background: #fff8ed; color: #8a5200; }

/* ── DENIED ROW IN SIDEBAR ──────────────────────────────────── */
.acct-row.denied-row { background: #fff5f5; border-bottom: 1px solid #fdd; }
.acct-row.denied-row:hover { background: #ffe8e8; }
.acct-row.denied-row .acct-name { color: #c0392b; }
.acct-row.denied-row .acct-sub { color: #a05060; }
body.dark .acct-row.denied-row { background: #1a0000 !important; border-bottom-color: #3a0000 !important; }
body.dark .acct-row.denied-row:hover { background: #220000 !important; }
body.dark .acct-row.denied-row .acct-name { color: #ff9999; }
body.dark .acct-row.denied-row .acct-sub { color: #884444; }
.denied-pill {
  font-size: 9px; font-weight: 600; padding: 2px 6px;
  background: #cc0000; color: white; border-radius: 99px;
  letter-spacing: 0.05em; flex-shrink: 0;
}

/* ── INSTALLER ROW IN SIDEBAR ───────────────────────────────── */
.acct-row.installer-row { border-left: 3px solid #8840c0; }
.acct-row.installer-row .acct-sub { color: #6a20a0; }

/* ── VENDOR ROW IN SIDEBAR ──────────────────────────────────── */
.acct-row.vendor-row { border-left: 3px solid #e07020; }
.acct-row.vendor-row .acct-sub { color: #c05800; }

/* ── PREFERRED DISTRIBUTORS ─────────────────────────────────── */
.dist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dist-item:hover { border-color: var(--blue); }
.dist-item-name { font-size: 13px; color: var(--navy); font-weight: 500; flex: 1; }
.dist-item-meta { font-size: 11px; color: var(--text-muted); }
.dist-item-remove {
  background: none; border: none; color: var(--text-muted);
  font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.dist-item-remove:hover { color: var(--red); }
.btn-add-dist {
  padding: 6px 12px; font-size: 12px; font-family: var(--font-body);
  background: transparent; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); color: var(--blue); cursor: pointer;
  transition: all 0.15s; margin-top: 4px;
}
.btn-add-dist:hover { background: var(--blue-light); border-color: var(--blue); }
body.dark .dist-item { background: #111418; border-color: #2a3040; }
body.dark .dist-item-name { color: #5ba8d8; }

/* ── VENDOR ITEMS FIELD ─────────────────────────────────────── */
.vendor-items-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 13px; color: var(--text); min-height: 60px;
  white-space: pre-wrap; word-break: break-word; cursor: default;
}

/* ── CONTACT MANAGEMENT ─────────────────────────────────────── */
.contacts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.contacts-toolbar-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--navy);
}
.btn-add-contact {
  padding: 6px 14px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-add-contact:hover { background: var(--navy-mid); }
.contact-template-btn {
  padding: 4px 10px;
  background: #5b21b6;
  color: #ede9fe;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
}
.contact-template-btn:hover { background: #4c1d95; }

/* Contact template picker modal */
.mkcp-section { border-bottom: 1px solid var(--border); }
.mkcp-section:last-child { border-bottom: none; }
.mkcp-cat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; cursor: pointer;
  background: var(--surface); transition: background 0.12s;
  user-select: none;
}
.mkcp-cat-header:hover { background: var(--blue-light); }
.mkcp-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.mkcp-cat-name { font-size: 13px; font-weight: 600; color: var(--navy); flex: 1; font-family: var(--font-body); }
.mkcp-cat-count {
  font-size: 10px; color: var(--text-muted);
  background: var(--border); padding: 1px 6px; border-radius: 99px;
}
.mkcp-chevron { font-size: 11px; color: var(--text-muted); }
.mkcp-template-row {
  padding: 9px 16px 9px 33px; cursor: pointer;
  border-top: 1px solid var(--border); transition: background 0.12s;
}
.mkcp-template-row:hover { background: var(--blue-light); }
.mkcp-template-title { font-size: 13px; font-weight: 500; color: var(--text); font-family: var(--font-body); }
.mkcp-template-subject { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-style: italic; }
.mkcp-empty { padding: 28px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
  transition: border-color 0.15s;
}
.contact-card:hover { border-color: var(--border-strong); }
.contact-card.primary-card { border-left: 3px solid var(--green); }
.contact-card.inactive { opacity: 0.55; }

.contact-card-actions {
  position: absolute;
  top: 10px; right: 12px;
  display: flex;
  gap: 4px;
  transition: opacity 0.15s;
  transition: opacity 0.15s;
}


.contact-action-btn {
  padding: 3px 8px;
  font-size: 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-mid);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.12s;
  white-space: nowrap;
}
.contact-action-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.contact-action-btn.primary-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-light); }
.contact-action-btn.danger-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.contact-action-btn.restore-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-light); }

body.dark .contact-action-btn { background: #1e2330; border-color: #3a4558; color: #a0abbe; }
body.dark .contact-card { background: #1e2330; border-color: #2a3040; }
body.dark .contact-card.primary-card { border-left-color: #4caf7d; }

/* Contact modal form */
.contact-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-modal-grid .full-col {
  grid-column: span 2;
}
.contact-role-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.role-checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-mid);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: all 0.12s;
  user-select: none;
}
.role-checkbox-label:hover { border-color: var(--blue); color: var(--blue); }
.role-checkbox-label input[type=checkbox] { margin: 0; accent-color: var(--blue); }
.role-checkbox-label.checked { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }

/* Inactive section divider */
.inactive-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 16px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Inline edit flash */
.edit-saved-flash {
  animation: savedFlash 0.7s ease;
}
@keyframes savedFlash {
  0% { background: var(--green-light); border-color: #a8d8b4; }
  100% { background: var(--surface); border-color: var(--border); }
}

/* ── RECORD TYPE TINTS ──────────────────────────────────────── */
.tint-vendor .sidebar,
.tint-vendor .sidebar-top,
.tint-vendor .status-chips { background: #fff7f0 !important; }
.tint-vendor .sidebar { border-right-color: #f0c090 !important; }
.tint-vendor .panel-header,
.tint-vendor .panel-tabs,
.tint-vendor .warnings-bar { background: #fff7f0 !important; }
.tint-vendor .tab-btn.active { color: #c05800; border-bottom-color: #e07020; }
.tint-vendor .main-panel { background: #fff9f5; }
.tint-vendor .ov-card { background: #fff9f5; border-color: #f0c090; }
.tint-vendor .field-card { background: #fff7f0; border-color: #f5d0a0; }
.tint-vendor .tab-content { background: #fff9f5; }

.tint-installer .sidebar,
.tint-installer .sidebar-top,
.tint-installer .status-chips { background: #f8f4ff !important; }
.tint-installer .sidebar { border-right-color: #c8a8e8 !important; }
.tint-installer .panel-header,
.tint-installer .panel-tabs,
.tint-installer .warnings-bar { background: #f8f4ff !important; }
.tint-installer .tab-btn.active { color: #6a20a0; border-bottom-color: #8840c0; }
.tint-installer .main-panel { background: #faf7ff; }
.tint-installer .ov-card { background: #faf7ff; border-color: #d0b0f0; }
.tint-installer .field-card { background: #f8f4ff; border-color: #d8b8f5; }
.tint-installer .tab-content { background: #faf7ff; }

.tint-denied .sidebar,
.tint-denied .sidebar-top,
.tint-denied .status-chips { background: #fff5f5 !important; }
.tint-denied .sidebar { border-right-color: #f5c6c2 !important; }
.tint-denied .panel-header,
.tint-denied .panel-tabs,
.tint-denied .warnings-bar { background: #fff5f5 !important; }
.tint-denied .tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
.tint-denied .main-panel { background: #fff8f8; }
.tint-denied .ov-card { background: #fff8f8; border-color: #f5c6c2; }
.tint-denied .field-card { background: #fff5f5; border-color: #f5c6c2; }
.tint-denied .tab-content { background: #fff8f8; }

body.dark .tint-vendor .panel-header,
body.dark .tint-vendor .panel-tabs,
body.dark .tint-vendor .main-panel  { background: #1e1408 !important; }
body.dark .tint-vendor .ov-card     { background: #221808; border-color: #5a3010; }
body.dark .tint-vendor .field-card  { background: #1e1408; border-color: #5a3010; }
body.dark .tint-vendor .tab-content { background: #1e1408; }
body.dark .tint-vendor .warnings-bar { background: #221808 !important; }
body.dark .tint-installer .panel-header,
body.dark .tint-installer .panel-tabs,
body.dark .tint-installer .main-panel { background: #140e20 !important; }
body.dark .tint-installer .ov-card  { background: #180e24; border-color: #4a2880; }
body.dark .tint-installer .field-card { background: #140e20; border-color: #4a2880; }
body.dark .tint-installer .tab-content { background: #140e20; }
body.dark .tint-installer .warnings-bar { background: #180e24 !important; }
body.dark .tint-denied .panel-header,
body.dark .tint-denied .panel-tabs,
body.dark .tint-denied .main-panel  { background: #180808 !important; }
body.dark .tint-denied .ov-card     { background: #1c0808; border-color: #5a1010; }
body.dark .tint-denied .field-card  { background: #180808; border-color: #5a1010; }
body.dark .tint-denied .tab-content { background: #180808; }
body.dark .tint-denied .warnings-bar { background: #1c0808 !important; }

/* ── SECONDARY ROLES ────────────────────────────────────────── */
.secondary-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.secondary-role-badge.installer {
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}
.secondary-role-badge.vendor {
  background: var(--green-light);
  color: var(--green);
  border: 1px solid #a8d8b4;
}
.secondary-role-badge.customer {
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid var(--blue-mid);
}
.secondary-roles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
/* Small pill for sidebar list */
.acct-secondary-pill {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 99px;
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid var(--amber-border);
  flex-shrink: 0;
  white-space: nowrap;
}

.secondary-role-toggle-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.secondary-role-toggle-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.secondary-role-toggle-btn.active-installer { background: var(--amber-light); color: var(--amber); border-color: var(--amber-border); font-weight: 600; }
.secondary-role-toggle-btn.active-vendor    { background: var(--green-light); color: var(--green); border-color: #a8d8b4; font-weight: 600; }
.secondary-role-toggle-btn.active-customer  { background: var(--blue-light);  color: var(--blue);  border-color: var(--blue-mid); font-weight: 600; }
body.dark .secondary-role-toggle-btn { background: #111418; border-color: #3a4558; color: #6a7a94; }
#ar-view {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--surface);
}
#ar-view.visible { display: flex; }

.ar-header {
  padding: 16px 24px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ar-header-left { display: flex; flex-direction: column; gap: 2px; }
.ar-header-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--navy);
}
.ar-header-sub { font-size: 12px; color: var(--text-muted); }

.ar-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ar-sort-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ar-sort-btn {
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
  color: var(--text-mid);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.12s;
}
.ar-sort-btn:hover, .ar-sort-btn.active { background: var(--navy); color: white; border-color: var(--navy); }
.ar-spacer { flex: 1; }
.ar-count-badge {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
}

.ar-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* A/R Card */
.ar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.ar-card:hover { box-shadow: var(--shadow-md); }
.ar-card.on-hold {
  border-color: var(--red);
  border-left: 4px solid var(--red);
}

.ar-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ar-card.on-hold .ar-card-header {
  background: var(--red-light);
}

.ar-company-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--navy);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s;
  flex: 1;
}
.ar-company-name:hover { border-bottom-color: var(--blue); color: var(--blue); }

.ar-hold-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  background: var(--red);
  color: white;
  border-radius: 99px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ar-hold-toggle {
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-body);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.ar-hold-toggle:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.ar-card.on-hold .ar-hold-toggle { border-color: var(--green); color: var(--green); background: var(--green-light); }
.ar-card.on-hold .ar-hold-toggle:hover { background: #d4edda; }

.ar-delete-btn {
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-body);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.12s;
}
.ar-delete-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }

.ar-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.ar-col {
  padding: 12px 16px;
}
.ar-col + .ar-col {
  border-left: 1px solid var(--border);
}

.ar-field-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.ar-field-value {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.ar-field-value.missing { color: var(--text-muted); font-style: italic; }

.ar-ap-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ar-ap-chip {
  font-size: 12px;
  color: var(--text-mid);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 0.12s;
}
.ar-ap-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

/* Invoice field — inline editable */
.ar-invoice-edit {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  padding: 0;
  resize: none;
  min-height: 20px;
  line-height: 1.5;
}
.ar-invoice-wrap {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 3px 5px;
  margin: -3px -5px;
  transition: border-color 0.12s, background 0.12s;
  cursor: text;
}
.ar-invoice-wrap:hover { border-color: var(--border-strong); background: var(--surface); }
.ar-invoice-wrap:focus-within { border-color: var(--blue) !important; background: var(--white) !important; }

/* Actions log */
.ar-actions-section {
  padding: 0 16px 12px;
  border-top: 1px solid var(--border);
}
.ar-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 8px;
}
.ar-actions-title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--blue);
}
.btn-log-action {
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-body);
  background: var(--navy);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.btn-log-action:hover { background: var(--navy-mid); }

.ar-action-entry {
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-size: 13px;
}
.ar-action-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ar-action-type-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 500;
}
.ar-action-who { font-size: 11px; color: var(--text-muted); }
.ar-action-date { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.ar-action-notes { color: var(--text-mid); line-height: 1.5; }
.ar-action-edit-btn {
  margin-left: auto; font-size: 11px; padding: 2px 8px;
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--white); color: var(--text-muted);
  cursor: pointer; font-family: var(--font-body);
  transition: border-color 0.1s, color 0.1s;
  opacity: 0; transition: opacity 0.1s;
}
.ar-action-entry:hover .ar-action-edit-btn { opacity: 1; }
.ar-action-edit-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.ar-action-entry.editing { border-color: var(--blue); background: var(--white); }
.ar-action-edit-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ar-action-edit-form select,
.ar-action-edit-form textarea {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px; color: var(--text);
  background: var(--white); outline: none;
}
.ar-action-edit-form select:focus,
.ar-action-edit-form textarea:focus { border-color: var(--blue); }
.ar-action-edit-form textarea { resize: vertical; min-height: 70px; }
.ar-action-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Log action inline form */
.ar-log-form {
  background: var(--surface);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 8px;
}
.ar-log-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ar-log-form label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ar-log-form select, .ar-log-form textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  outline: none;
}
.ar-log-form textarea { resize: vertical; min-height: 64px; }
.ar-log-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ar-form-cancel {
  padding: 6px 14px; font-size: 12px; font-family: var(--font-body);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text-mid); cursor: pointer;
}
.ar-form-save {
  padding: 6px 14px; font-size: 12px; font-family: var(--font-body);
  background: var(--navy); color: white; border: none;
  border-radius: var(--radius-sm); cursor: pointer;
}
.ar-form-save:hover { background: var(--navy-mid); }

/* Empty AR state */
.ar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 12px;
  color: var(--text-muted);
}
.ar-empty-icon { font-size: 40px; opacity: 0.3; }
.ar-empty-text { font-family: var(--font-display); font-size: 16px; font-style: italic; opacity: 0.6; }

/* A/R indicator on account panel */
.ar-indicator {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-top: 0;
}
.ar-indicator.past-due {
  display: flex;
  background: var(--amber-light);
  border: 1px solid var(--amber-border);
  color: var(--amber);
}
.ar-indicator.on-hold-acct {
  display: flex;
  background: #fff0f0;
  border: 2px solid #e05c5c;
  color: #a00;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  gap: 10px;
  align-items: center;
  letter-spacing: 0.01em;
}

.hold-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  background: #e05c5c;
  color: white;
  border-radius: 99px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* New AR entry button */
.btn-new-ar {
  padding: 8px 18px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-new-ar:hover { background: var(--navy-mid); }

/* Dark mode adjustments */
body.dark .ar-header, body.dark .ar-toolbar { background: #1e2330; border-color: #2a3040; }
body.dark .ar-card { background: #1e2330; border-color: #2a3040; }
body.dark .ar-card.on-hold { border-color: #e05c5c; }
body.dark .ar-card-header { background: #111418; }
body.dark .ar-card.on-hold .ar-card-header { background: #2a1010; }
body.dark .ar-action-entry { background: #111418; border-color: #2a3040; }
body.dark .ar-log-form { background: #111418; border-color: #5ba8d8; }
body.dark .ar-log-form select, body.dark .ar-log-form textarea { background: #1e2330; color: #e8ecf4; border-color: #3a4558; }
body.dark .ar-hold-toggle { background: #1e2330; border-color: #3a4558; color: #a0abbe; }
body.dark .ar-delete-btn { background: #1e2330; border-color: #3a4558; color: #6a7a94; }
body.dark .ar-invoice-wrap:hover { background: #111418; }
body.dark .ar-invoice-wrap:focus-within { background: #1e2330 !important; }
body.dark .ar-invoice-edit { color: #e8ecf4; }

/* collect customers view */
#collect-view { display:none; flex-direction:column; flex:1; overflow:hidden; background:var(--surface); }
#collect-view.visible { display:flex; }
.collect-header { padding:16px 24px 14px; background:var(--white); border-bottom:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:16px; }
body.dark .collect-header { background:#1e2330; border-bottom-color:#2a3040; }
.collect-header-left { display:flex; flex-direction:column; gap:2px; }
.collect-header-title { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--navy); }
body.dark .collect-header-title { color:#5ba8d8; }
.collect-header-sub { font-size:12px; color:var(--text-muted); }
.collect-toolbar { padding:10px 24px; background:var(--white); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; }
body.dark .collect-toolbar { background:#1e2330; border-bottom-color:#2a3040; }
.collect-search { padding:6px 10px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-body); color:var(--text); background:var(--surface); width:220px; }
body.dark .collect-search { background:#111418; color:#e8ecf4; border-color:#3a4558; }
.collect-filter-btn { padding:5px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--white); font-size:12px; font-family:var(--font-body); color:var(--text-muted); cursor:pointer; transition:all 0.12s; }
.collect-filter-btn:hover { border-color:var(--blue); color:var(--blue); }
.collect-filter-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
body.dark .collect-filter-btn { background:#111418; border-color:#3a4558; color:#a0abbe; }
body.dark .collect-filter-btn.active { background:#0d2035; color:#5ba8d8; border-color:#5ba8d8; }
.collect-spacer { flex:1; }
.collect-count { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.btn-print-collect { padding:6px 14px; background:var(--navy); color:#fff; border:none; border-radius:var(--radius-sm); font-size:12px; font-weight:500; font-family:var(--font-body); cursor:pointer; white-space:nowrap; }
.btn-print-collect:hover { background:var(--navy-mid); }
.collect-body { flex:1; overflow-y:auto; padding:20px 24px; }
.collect-table { width:100%; border-collapse:collapse; font-size:13px; font-family:var(--font-body); }
.collect-table th { text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); padding:0 12px 8px 0; border-bottom:2px solid var(--border-strong); white-space:nowrap; cursor:pointer; user-select:none; }
.collect-table th:hover { color:var(--blue); }
.collect-table th.sort-active { color:var(--navy); }
body.dark .collect-table th.sort-active { color:#5ba8d8; }
.sort-arrow { margin-left:3px; font-size:10px; }
.collect-table td { padding:10px 12px 10px 0; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text); }
body.dark .collect-table td { border-bottom-color:#2a3040; color:#e8ecf4; }
.collect-table tr:hover td { background:var(--blue-light); cursor:pointer; }
body.dark .collect-table tr:hover td { background:#0d2035; }
.collect-acct-name { font-weight:500; color:var(--navy); }
body.dark .collect-acct-name { color:#5ba8d8; }
.collect-acct-dba { font-size:11px; color:var(--text-muted); margin-top:1px; }
.collect-ups { font-family:monospace; font-size:14px; font-weight:700; color:#111; letter-spacing:0.04em; }
.collect-notes { font-size:12px; color:var(--text-muted); font-style:italic; }
.collect-status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.collect-empty { text-align:center; padding:60px 20px; color:var(--text-muted); font-size:14px; }
.collect-print-date {
  display: none;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-body);
  white-space: nowrap;
}

@media print {
  .app-header,.collect-toolbar,#sidebar,.sidebar-resizer { display:none !important; }
  #collect-view { display:flex !important; }
  .collect-header { border-bottom:2px solid #000; }
  .collect-body { overflow:visible; padding:10px 0; }
  .collect-table tr:hover td { background:none; }
  .collect-print-date { display:block; }
  .btn-print-collect { display:none !important; }
  .collect-ups { color:#000 !important; }
}


/* ── UPS BILLING ADDRESS BLOCK ───────────────────────────────── */
.ups-bill-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 8px;
  overflow: hidden;
}
body.dark .ups-bill-block { background: #111418; border-color: #2a3040; }

.ups-bill-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
body.dark .ups-bill-header { background: #1e2330; border-bottom-color: #2a3040; }
.ups-bill-header:hover { background: var(--blue-light); }
body.dark .ups-bill-header:hover { background: #0d2035; }

.ups-bill-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  flex: 1;
}
.ups-bill-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
.ups-bill-status.on-file  { background: #eaf4ee; color: var(--green); }
.ups-bill-status.missing  { background: var(--amber-light); color: var(--amber); }
body.dark .ups-bill-status.on-file  { background: #0d2010; color: #4ade80; }
body.dark .ups-bill-status.missing  { background: #1e1408; color: #fbbf24; }

.ups-bill-toggle-arrow {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.ups-bill-toggle-arrow.open { transform: rotate(180deg); }

.ups-bill-body {
  display: none;
  padding: 12px;
  gap: 8px;
  flex-direction: column;
}
.ups-bill-body.open { display: flex; }

.ups-bill-row {
  display: grid;
  gap: 8px;
}
.ups-bill-row.cols-3 { grid-template-columns: 2fr 1fr 1fr; }
.ups-bill-row.cols-1 { grid-template-columns: 1fr; }

.ups-bill-on-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
body.dark .ups-bill-on-file-row { border-top-color: #2a3040; }
.ups-bill-on-file-row label {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.3;
}


/* ── TAG FILTER STRIP (sidebar) ──────────────────────────────── */
.tag-filter-strip {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.tag-filter-strip.has-tags { display: flex; }
body.dark .tag-filter-strip { background: #111418; border-bottom-color: #2a3040; }

.tag-filter-chip {
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body);
  color: #fff;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.12s, box-shadow 0.12s;
  white-space: nowrap;
  border: none;
  display: inline-block;
}
.tag-filter-chip:hover  { opacity: 0.85; }
.tag-filter-chip.active { opacity: 1; box-shadow: 0 0 0 2px rgba(0,0,0,0.20); }


/* ═══════════════════════════════════════════════════════════════
   DS PANEL
═══════════════════════════════════════════════════════════════ */
#ds-view {
  display: none; flex-direction: row; flex: 1; overflow: hidden;
  background: var(--surface); position: relative;
}
#ds-view.visible { display: flex; }

/* ── Display Tracker ── */
#display-view {
  display: none; flex-direction: column; flex: 1; overflow: hidden; background: var(--surface);
}
#display-view.visible { display: flex; }
.display-header {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 14px 24px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.display-header-title { font-family: var(--font-display); font-size: 18px; color: var(--navy); }
.display-filter-row { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.display-filter-select {
  padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 12px; font-family: var(--font-body); background: var(--surface); color: var(--text);
}
.display-grid-wrap { flex: 1; overflow: auto; }
.display-grid {
  border-collapse: collapse; font-size: 12px; width: 100%; min-width: 600px;
}
.display-grid th {
  background: var(--navy); color: white; padding: 8px 12px; text-align: left;
  font-size: 11px; font-weight: 500; letter-spacing: 0.03em;
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
.display-grid th:first-child { position: sticky; left: 0; z-index: 3; min-width: 200px; }
.display-grid td {
  padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: middle;
  white-space: nowrap;
}
.display-grid td:first-child {
  position: sticky; left: 0; background: var(--white); z-index: 1;
  font-weight: 500; color: var(--navy); cursor: pointer; border-right: 1px solid var(--border);
}
.display-grid td:first-child:hover { background: var(--blue-light); color: var(--blue); }
.display-grid tr:nth-child(even) td:first-child { background: var(--surface); }
.display-grid tr:nth-child(even) td:first-child:hover { background: var(--blue-light); color: var(--blue); }
.display-grid tr:hover td { background: var(--blue-light) !important; }
.display-cell-sent {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--green-light); color: var(--green);
  border: 1px solid #a8d5c9; border-radius: 99px;
  padding: 2px 8px; font-size: 11px; font-weight: 500; cursor: pointer;
}
.display-cell-sent:hover { filter: brightness(0.95); }
.display-cell-add {
  display: inline-flex; align-items: center;
  color: var(--text-muted); font-size: 11px; cursor: pointer;
  border: 1px dashed var(--border-strong); border-radius: 99px;
  padding: 2px 8px; background: none;
}
.display-cell-add:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.display-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:10px;color:var(--text-muted); }
/* Display tab on account panel */
.disp-log-entry {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 12px;
}
.disp-log-badge {
  background: var(--blue-light); color: var(--blue); border-radius: var(--radius-sm);
  padding: 3px 8px; font-size: 11px; font-weight: 500; white-space: nowrap; flex-shrink: 0;
}
.disp-log-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.disp-log-notes { font-size: 12px; color: var(--text-mid); margin-top: 4px; font-style: italic; }
body.dark .display-header { background: #1e2330; border-color: #2a3040; }
body.dark .display-grid th { background: #0d1520; }
body.dark .display-grid td:first-child { background: #1e2330; }
body.dark .display-grid tr:nth-child(even) td:first-child { background: #181f2e; }
body.dark .disp-log-entry { background: #1e2330; border-color: #2a3040; }

/* ── DS main grid area ── */
.ds-main {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
}
.ds-header {
  padding: 14px 20px 12px; background: var(--white);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
body.dark .ds-header { background: #1e2330; border-bottom-color: #2a3040; }
.ds-header-title {
  font-family: var(--font-display); font-size: 20px;
  font-weight: 600; color: var(--navy);
}
body.dark .ds-header-title { color: #5ba8d8; }
.ds-header-sub { font-size: 12px; color: var(--text-muted); }
.ds-header-spacer { flex: 1; }

.btn-new-batch {
  padding: 6px 14px; background: var(--navy); color: #fff;
  border: none; border-radius: var(--radius-sm); font-size: 12px;
  font-weight: 500; font-family: var(--font-body); cursor: pointer;
  white-space: nowrap; transition: background 0.15s;
}
.btn-new-batch:hover { background: var(--navy-mid); }

/* ── DS grid scroll wrapper ── */
.ds-grid-wrap {
  flex: 1; overflow: auto; position: relative;
}

/* ── DS table ── */
.ds-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 12px; font-family: var(--font-body);
  min-width: 100%;
}

/* sticky first two columns */
.ds-table th, .ds-table td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
body.dark .ds-table th,
body.dark .ds-table td { border-color: #2a3040; }

.ds-table th {
  background: var(--white); position: sticky; top: 0; z-index: 20;
  padding: 8px 10px; text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
  border-bottom: 2px solid var(--border-strong);
}
body.dark .ds-table th { background: #1e2330; border-bottom-color: #3a4558; }

/* Account name col — sticky left */
.ds-col-name {
  position: sticky; left: 0; z-index: 15; min-width: 180px; max-width: 180px;
  background: var(--white);
}
/* Name header must sit above batch headers (which get z-index:20 from .ds-table th) */
.ds-table th.ds-col-name { z-index: 30; }
body.dark .ds-col-name { background: #1e2330; }
.ds-table td.ds-col-name { background: var(--surface); z-index: 10; }
body.dark .ds-table td.ds-col-name { background: #161b24; }

/* Contact info col — sticky left after name */
.ds-col-contact {
  position: sticky; left: 180px; z-index: 15; min-width: 220px; max-width: 220px;
  background: var(--white);
}
body.dark .ds-col-contact { background: #1e2330; }
.ds-table td.ds-col-contact { background: var(--surface); z-index: 10; padding: 6px 8px; }
body.dark .ds-table td.ds-col-contact { background: #161b24; }

/* Batch columns */
.ds-col-batch { min-width: 140px; max-width: 140px; text-align: center; }

/* Account name cell */
.ds-acct-name {
  font-weight: 600; font-size: 12px; color: var(--navy);
  cursor: pointer; white-space: normal; overflow: visible;
  word-break: break-word; max-width: 100%; display: block;
}
.ds-acct-name:hover { color: var(--blue); text-decoration: underline; }
body.dark .ds-acct-name { color: #5ba8d8; }

/* Contact info inside cell */
.ds-contact-line {
  font-size: 11px; color: var(--text); display: flex;
  align-items: center; gap: 4px; cursor: pointer;
  padding: 1px 3px; border-radius: 3px; transition: background 0.1s;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}
.ds-contact-line:hover { background: var(--blue-light); }
body.dark .ds-contact-line:hover { background: #0d2035; }
.ds-contact-icon { font-size: 9px; color: var(--text-muted); flex-shrink: 0; }
.ds-contact-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Batch header cell */
.ds-batch-header { text-align: center; vertical-align: top; padding: 6px 8px !important; }
.ds-batch-name {
  font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 4px;
}
body.dark .ds-batch-name { color: #5ba8d8; }
.ds-batch-inv {
  display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 2px;
}
.ds-inv-pill {
  font-size: 10px; padding: 1px 6px; border-radius: 99px; font-weight: 600;
}
.ds-inv-pill.gray  { background: #f0f0f0; color: #555; }
.ds-inv-pill.black { background: #222; color: #fff; }
.ds-inv-pill.warn  { background: var(--amber-light); color: var(--amber); }
body.dark .ds-inv-pill.gray { background: #2a3040; color: #aaa; }

/* Order cell (the clickable grid cell) */
.ds-order-cell {
  text-align: center; padding: 4px 6px !important;
  cursor: pointer; transition: filter 0.1s; vertical-align: middle;
}
.ds-order-cell:hover { filter: brightness(0.92); }
.ds-order-cell.status-empty        { background: var(--surface); }
.ds-order-cell.status-not-interested { background: #fdecea; }
body.dark .ds-order-cell.status-not-interested { background: #1e0808; }
.ds-order-cell.status-interested   { background: #dbeafe; }
body.dark .ds-order-cell.status-interested { background: #0d1e3a; }
.ds-order-cell.status-contacted    { background: #f3e8ff; }
body.dark .ds-order-cell.status-contacted { background: #1a0e2a; }
.ds-order-cell.status-pending      { background: var(--amber-light); }
body.dark .ds-order-cell.status-pending { background: #1e1408; }
.ds-order-cell.status-confirmed    { background: var(--green-light); }
body.dark .ds-order-cell.status-confirmed { background: #0a1e10; }

.ds-cell-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ds-cell-status.empty          { color: var(--text-muted); }
.ds-cell-status.not-interested { color: #c0392b; }
.ds-cell-status.interested     { color: #1d4ed8; }
.ds-cell-status.contacted      { color: #7c3aed; }
.ds-cell-status.pending        { color: var(--amber); }
.ds-cell-status.confirmed      { color: var(--green); }

.ds-cell-detail {
  font-size: 10px; color: var(--text-muted); margin-top: 1px;
}
.ds-cell-invoice { font-size: 10px; color: var(--green); font-weight: 600; margin-top: 1px; }

/* Completion pill on Confirmed grid cells */
.ds-cell-completion {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 99px;
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid var(--amber-border);
  letter-spacing: 0.03em;
}
.ds-cell-completion.done {
  background: var(--green-light);
  color: var(--green);
  border-color: #a8d8b4;
}
body.dark .ds-cell-completion { background: #2a1e08; border-color: #6a4800; }
body.dark .ds-cell-completion.done { background: #0a1e10; border-color: #2d6a4f; }

/* Batch header grays out when every confirmed shipment is fully complete */
.ds-batch-header.batch-fully-complete { opacity: 0.42; }

/* Required-but-incomplete field labels in the DS detail panel */
.ds-tube-label.req-incomplete,
.ds-detail-section-label.req-incomplete {
  color: var(--red);
}
.req-star {
  margin-left: 2px;
  color: var(--red);
  font-weight: 700;
}
.ds-detail-panel {
  width: 340px; flex-shrink: 0; background: var(--white);
  border-left: 1px solid var(--border); display: flex;
  flex-direction: column; overflow: hidden;
  transition: width 0.2s;
}
body.dark .ds-detail-panel { background: #1e2330; border-left-color: #2a3040; }
.ds-detail-panel.collapsed { width: 0; border-left: none; overflow: hidden; }

.ds-detail-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
body.dark .ds-detail-header { border-bottom-color: #2a3040; }
.ds-detail-title {
  font-weight: 600; font-size: 13px; color: var(--navy); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dark .ds-detail-title { color: #5ba8d8; }
.ds-detail-close {
  background: none; border: none; font-size: 16px; cursor: pointer;
  color: var(--text-muted); padding: 2px 4px; border-radius: 4px;
  transition: color 0.1s;
}
.ds-detail-close:hover { color: var(--text); }

.ds-detail-body {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

.ds-detail-section { display: flex; flex-direction: column; gap: 6px; }
.ds-detail-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted);
}

/* Status selector in detail panel */
.ds-status-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.ds-status-btn {
  padding: 6px 4px; border-radius: var(--radius-sm); border: 2px solid transparent;
  font-size: 11px; font-weight: 600; cursor: pointer; text-align: center;
  font-family: var(--font-body); transition: all 0.12s;
}
.ds-status-btn.opt-empty         { background: var(--surface); color: var(--text-muted); border-color: var(--border); }
.ds-status-btn.opt-not-interested { background: #fdecea; color: #c0392b; border-color: #f5c6c2; }
.ds-status-btn.opt-interested    { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.ds-status-btn.opt-contacted     { background: #f3e8ff; color: #7c3aed; border-color: #d8b4fe; }
.ds-status-btn.opt-pending       { background: var(--amber-light); color: var(--amber); border-color: var(--amber-border); }
.ds-status-btn.opt-confirmed     { background: var(--green-light); color: var(--green); border-color: #a8d8b4; }
.ds-status-btn.selected { border-color: var(--navy) !important; box-shadow: 0 0 0 1px var(--navy); }
body.dark .ds-status-btn.selected { border-color: #5ba8d8 !important; box-shadow: 0 0 0 1px #5ba8d8; }
body.dark .ds-status-btn.opt-not-interested { background: #1e0808; color: #f87171; border-color: #5a1010; }
body.dark .ds-status-btn.opt-interested { background: #0d1e3a; color: #60a5fa; border-color: #1e40af; }
body.dark .ds-status-btn.opt-contacted { background: #1a0e2a; color: #c084fc; border-color: #6d28d9; }
body.dark .ds-status-btn.opt-empty { background: #111418; color: #6a7a94; border-color: #2a3040; }

/* Tube inputs */
.ds-tube-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ds-tube-field { display: flex; flex-direction: column; gap: 3px; }
.ds-tube-label { font-size: 11px; color: var(--text-muted); }
.ds-tube-input {
  padding: 6px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  font-family: var(--font-body); color: var(--text);
  background: var(--surface); width: 100%; text-align: center;
}
body.dark .ds-tube-input { background: #111418; color: #e8ecf4; border-color: #3a4558; }
.ds-tube-calc { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 1px; }

/* Invoice + notes */
.ds-text-input {
  padding: 6px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12px;
  font-family: var(--font-body); color: var(--text);
  background: var(--surface); width: 100%;
}
body.dark .ds-text-input { background: #111418; color: #e8ecf4; border-color: #3a4558; }
.ds-notes-input {
  padding: 6px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12px;
  font-family: var(--font-body); color: var(--text);
  background: var(--surface); width: 100%; min-height: 72px;
  resize: vertical;
}
body.dark .ds-notes-input { background: #111418; color: #e8ecf4; border-color: #3a4558; }

.btn-ds-save {
  width: 100%; padding: 8px; background: var(--navy); color: #fff;
  border: none; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 500; font-family: var(--font-body); cursor: pointer;
  transition: background 0.15s;
}
.btn-ds-save:hover { background: var(--navy-mid); }

/* Outreach log */
.ds-outreach-form {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
body.dark .ds-outreach-form { background: #111418; border-color: #2a3040; }
.ds-outreach-select {
  padding: 5px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12px;
  font-family: var(--font-body); color: var(--text);
  background: var(--white); width: 100%;
}
body.dark .ds-outreach-select { background: #1e2330; color: #e8ecf4; border-color: #3a4558; }
.btn-log-outreach {
  padding: 5px; background: var(--blue); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 600;
  font-family: var(--font-body); cursor: pointer;
}
.btn-log-outreach:hover { background: var(--navy); }

.ds-outreach-entry {
  padding: 6px 8px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 11px; color: var(--text);
}
body.dark .ds-outreach-entry { background: #1e2330; border-color: #2a3040; color: #e8ecf4; }
.ds-outreach-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.ds-outreach-response { font-weight: 600; color: var(--navy); }
body.dark .ds-outreach-response { color: #5ba8d8; }

/* Empty DS state */
.ds-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-muted); gap: 10px; padding: 40px;
}
.ds-empty-icon { font-size: 40px; opacity: 0.3; }


.field-copy-btn {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 10px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s;
  vertical-align: middle;
  margin-left: 2px;
  line-height: 1;
}
.field-card:hover .field-copy-btn { opacity: 0.7; }
.field-copy-btn:hover { opacity: 1 !important; color: var(--blue); }


/* DS resize handle */
.ds-resize-handle {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 5px;
  cursor: col-resize;
  background: transparent;
  z-index: 30;
}
.ds-resize-handle:hover,
.ds-resize-handle:active { background: var(--blue); opacity: 0.5; }

/* DS sort bar — sits above the grid table */
.ds-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  font-size: 11px;
}
body.dark .ds-sort-bar { background: #1a1f2a; border-bottom-color: #2a3040; }
.ds-sort-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.ds-sort-bar-btn {
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--text-mid);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.ds-sort-bar-btn:hover { border-color: var(--blue); color: var(--blue); }
.ds-sort-bar-btn.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
body.dark .ds-sort-bar-btn { background: #1e2330; color: #8a9bb5; border-color: #2a3040; }
body.dark .ds-sort-bar-btn.active { background: var(--blue); border-color: var(--blue); color: white; }

/* DS sort arrows in column headers (subtle indicator) */
.ds-sort-arrow {
  font-size: 9px;
  margin-left: 3px;
  color: var(--blue);
  font-style: normal;
  opacity: 0.85;
}
.ds-col-sortable { cursor: pointer; user-select: none; }
.ds-col-sortable:hover { filter: brightness(0.94); }
body.dark .ds-col-sortable:hover { filter: brightness(1.12); }

/* Cancelled order cell in grid */
.ds-order-cell.status-cancelled {
  background: #f5f5f5;
  opacity: 0.75;
}
body.dark .ds-order-cell.status-cancelled { background: #1a1a1f; }

/* Cancel / Reinstate buttons in detail panel */
.ds-cancel-order-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
  margin-top: 8px;
}
.ds-cancel-order-btn:hover { background: var(--red-light); }

.ds-reinstate-order-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
  margin-top: 8px;
}
.ds-reinstate-order-btn:hover { background: var(--green-light); }

.ds-confirmed-lock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--green-light);
  border: 1px solid #a8d8b4;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}
body.dark .ds-confirmed-lock { background: #0a1e10; border-color: #1a5030; }

.ds-cancelled-banner {
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mid);
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* DS edit contact button */
.ds-edit-contact-btn {
  background: none; border: none; font-size: 12px;
  color: var(--text-muted); cursor: pointer; padding: 1px 3px;
  border-radius: 3px; margin-top: 2px; display: block;
  transition: color 0.12s, background 0.12s;
  font-family: var(--font-body);
}
.ds-edit-contact-btn:hover { color: var(--blue); background: var(--blue-light); }
body.dark .ds-edit-contact-btn:hover { color: #5ba8d8; background: #0d2035; }

/* Interested qty styling — italic to distinguish from confirmed */
.ds-cell-interested-qty {
  font-style: italic;
  color: #1d4ed8;
}
body.dark .ds-cell-interested-qty { color: #60a5fa; }


/* ── Batch delete PIN prompt ── */
.ds-pin-prompt {
  margin-top: 4px;
}
.ds-pin-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--red-light);
  border: 1px solid #f5c6c2;
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  flex-wrap: wrap;
}
.ds-pin-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.ds-pin-input {
  width: 72px;
  padding: 3px 6px;
  border: 1px solid #f5c6c2;
  border-radius: 3px;
  font-size: 13px;
  font-family: var(--font-body);
  background: white;
  color: var(--text);
  outline: none;
  text-align: center;
  letter-spacing: 2px;
}
.ds-pin-input:focus { border-color: var(--red); }
.ds-pin-confirm {
  padding: 2px 7px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
}
.ds-pin-confirm:hover { background: #a93226; }
.ds-pin-cancel {
  padding: 2px 6px;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.ds-pin-cancel:hover { color: var(--red); }
.ds-pin-error {
  width: 100%;
  font-size: 10px;
  color: var(--red);
  font-weight: 600;
  margin-top: 2px;
  text-align: center;
}
@keyframes ds-pin-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-4px); }
  40%,80% { transform: translateX(4px); }
}
.ds-pin-shake { animation: ds-pin-shake 0.4s ease; }
body.dark .ds-pin-inner { background: #2a1010; border-color: #6a2020; }
body.dark .ds-pin-input { background: #1e2330; color: #e8ecf4; border-color: #6a2020; }

.btn-delete-batch {
  background: none; border: none; font-size: 10px; cursor: pointer;
  color: var(--text-muted); padding: 1px 4px; border-radius: 3px;
  margin-top: 3px; display: inline-block; font-family: var(--font-body);
  transition: color 0.12s, background 0.12s;
}
.btn-delete-batch:hover { color: var(--red); background: var(--red-light); }


.ds-autosave-status {
  font-size: 11px; color: var(--text-muted); font-family: var(--font-body);
  text-align: center; padding: 4px 0; min-height: 22px; transition: color 0.2s;
}
.ds-autosave-status.saving { color: var(--amber); }
.ds-autosave-status.saved  { color: var(--green); }
.ds-autosave-status.error  { color: var(--red); }


.btn-export-ds {
  padding: 6px 14px; background: var(--green); color: #fff;
  border: none; border-radius: var(--radius-sm); font-size: 12px;
  font-weight: 500; font-family: var(--font-body); cursor: pointer;
  white-space: nowrap; transition: background 0.15s;
}
.btn-export-ds:hover { background: #1e5c3a; }


/* DS view filter buttons */
.ds-view-btn {
  padding: 4px 10px; border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm); background: transparent;
  color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 500;
  font-family: var(--font-body); cursor: pointer; transition: all 0.12s;
}
.ds-view-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.ds-view-btn.active { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.5); }

/* Complete batch badge */
.ds-batch-complete-badge {
  font-size: 9px; color: var(--green); font-weight: 700;
  background: var(--green-light); padding: 1px 5px;
  border-radius: 99px; margin-top: 2px; display: inline-block;
}
body.dark .ds-batch-complete-badge { background: #0a1e10; }

/* DS ship address select */
.ds-addr-select {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-body);
  color: var(--text); background: var(--white); margin-bottom: 6px;
}
body.dark .ds-addr-select { background: #1e2330; color: #e8ecf4; border-color: #3a4558; }

/* Weight display */
.ds-weight-display {
  padding: 6px 10px; background: var(--blue-light);
  border: 1px solid var(--blue-mid); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--navy); font-weight: 500;
}
body.dark .ds-weight-display { background: #0d2035; color: #5ba8d8; border-color: #1e40af; }
.ds-multi-pallet {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: var(--amber-light); color: var(--amber);
  border-radius: 99px; font-size: 10px; font-weight: 700;
}


/* ═══════════════════════════════════════════════════
   DOCUMENT TAB
═══════════════════════════════════════════════════ */
.doc-upload-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 8px;
  flex-wrap: wrap;
}
.doc-type-select {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  outline: none;
  min-width: 160px;
}
.doc-type-select:focus { border-color: var(--blue); }
body.dark .doc-type-select { background: #1e2330; color: #e8ecf4; border-color: #3a4558; }
.doc-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--navy);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.doc-upload-btn:hover { background: var(--navy-mid); }
.doc-upload-btn.disabled { opacity: 0.45; pointer-events: none; }
.doc-upload-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* Drop zone */
.doc-drop-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface);
  margin-bottom: 14px;
}
.doc-drop-zone.drag-over {
  border-color: var(--blue);
  background: var(--blue-light);
}
.doc-drop-icon { font-size: 24px; opacity: 0.4; margin-bottom: 4px; }
.doc-drop-text { font-size: 12px; color: var(--text-muted); }

/* Upload progress */
.doc-upload-progress { margin-bottom: 12px; }
.doc-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 4px;
}
.doc-progress-fill {
  height: 100%;
  background: var(--blue);
  width: 0%;
  transition: width 0.2s;
}
.doc-progress-label { font-size: 11px; color: var(--text-muted); }

/* Document list */
.doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s;
}
.doc-item:hover { box-shadow: var(--shadow-sm); border-color: var(--blue-mid); }
.doc-item.active { border-color: var(--blue); background: var(--blue-light); }
body.dark .doc-item { background: #1e2330; border-color: #2a3040; }
body.dark .doc-item.active { background: #0d1e3a; border-color: #5ba8d8; }

.doc-type-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-type-badge.t-credit-app       { background: #dbeafe; color: #1d4ed8; }
.doc-type-badge.t-w-9              { background: #dcfce7; color: #166534; }
.doc-type-badge.t-tax-document     { background: #fef9c3; color: #854d0e; }
.doc-type-badge.t-resale-certificate { background: #f3e8ff; color: #6b21a8; }
.doc-type-badge.t-signed-agreement { background: var(--green-light); color: var(--green); }
.doc-type-badge.t-correspondence   { background: var(--amber-light); color: var(--amber); }
.doc-type-badge.t-other            { background: var(--surface-2); color: var(--text-mid); }

.doc-item-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-item-meta {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.doc-action-btn {
  padding: 3px 7px;
  font-size: 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-mid);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.12s;
}
.doc-action-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.doc-action-btn.del:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
body.dark .doc-action-btn { background: #111418; border-color: #3a4558; color: #6a7a94; }

/* Inline preview panel */
.doc-preview-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(560px, 90vw);
  background: var(--white);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  z-index: 300;
}
body.dark .doc-preview-panel { background: #1e2330; border-left-color: #2a3040; }
.doc-preview-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  background: var(--surface);
}
body.dark .doc-preview-header { background: #111418; border-color: #2a3040; }
.doc-preview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
body.dark .doc-preview-title { color: #5ba8d8; }
.doc-preview-dl {
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--font-body);
  background: var(--navy);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.doc-preview-dl:hover { background: var(--navy-mid); }
.doc-preview-close {
  padding: 4px 8px;
  font-size: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.doc-preview-close:hover { color: var(--text); }
.doc-preview-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}
body.dark .doc-preview-body { background: #111418; }
.doc-preview-body iframe {
  width: 100%; height: 100%;
  border: none;
}
.doc-preview-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.doc-preview-no-preview {
  text-align: center;
  color: var(--text-muted);
  padding: 40px;
}
.doc-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════
   ADMIN PANEL
═══════════════════════════════════════════════════ */
#admin-view {
  display: none; flex-direction: column; flex: 1; overflow: hidden; background: var(--surface);
}
#admin-view.visible { display: flex; }

.admin-header {
  padding: 16px 28px 14px; background: var(--white); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.admin-header-title { font-family: var(--font-display); font-size: 20px; color: var(--navy); }
.admin-header-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
body.dark .admin-header { background: #1e2330; border-color: #2a3040; }

.admin-body { flex: 1; overflow-y: auto; padding: 24px 28px; }

.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: 1fr; } }

.admin-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px;
}
body.dark .admin-card { background: #1e2330; border-color: #2a3040; }

.admin-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.admin-card-title { font-size: 14px; font-weight: 700; color: var(--navy); }
body.dark .admin-card-title { color: #5ba8d8; }
.admin-card-action {
  padding: 5px 14px; background: var(--navy); color: white; border: none;
  border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-body); cursor: pointer;
}
.admin-card-action:hover { background: var(--navy-mid); }

/* Create user form */
.admin-create-user {
  background: var(--blue-light); border: 1px solid var(--blue-mid);
  border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px;
}
body.dark .admin-create-user { background: #0d1e3a; border-color: #1a3a5c; }

.admin-info-callout {
  background: #fef9c3; border: 1px solid #fde047; border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 12px; color: #713f12; margin-bottom: 14px; line-height: 1.5;
}
body.dark .admin-info-callout { background: #2a2000; border-color: #6a5000; color: #fcd34d; }

.admin-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.admin-form-field { display: flex; flex-direction: column; gap: 4px; }
.admin-form-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.admin-form-input {
  padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-body); color: var(--text); background: var(--white); outline: none;
}
.admin-form-input:focus { border-color: var(--blue); }
body.dark .admin-form-input { background: #1e2330; color: #e8ecf4; border-color: #3a4558; }
.admin-form-error {
  font-size: 12px; color: var(--red); padding: 6px 10px; background: var(--red-light);
  border-radius: var(--radius-sm); margin-bottom: 8px;
}
.admin-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.admin-btn-cancel {
  padding: 6px 16px; font-size: 12px; font-family: var(--font-body);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text-mid); cursor: pointer;
}
.admin-btn-save {
  padding: 6px 16px; font-size: 12px; font-family: var(--font-body);
  background: var(--navy); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer;
}
.admin-btn-save:hover { background: var(--navy-mid); }

/* User list */
.admin-loading { font-size: 12px; color: var(--text-muted); padding: 10px 0; }
.admin-user-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-inactive { opacity: 0.5; }
.admin-user-dot {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0;
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name { font-size: 13px; font-weight: 500; color: var(--text); }
.admin-user-email { font-size: 11px; color: var(--text-muted); }
.admin-you-badge {
  font-size: 9px; padding: 1px 6px; background: var(--blue-light); color: var(--blue);
  border-radius: 99px; font-weight: 600; vertical-align: middle; margin-left: 4px;
}
.admin-user-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.admin-mini-select {
  padding: 4px 6px; font-size: 11px; font-family: var(--font-body);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); outline: none; cursor: pointer;
}
body.dark .admin-mini-select { background: #111418; color: #e8ecf4; border-color: #3a4558; }
.admin-color-pick {
  width: 28px; height: 28px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 1px; cursor: pointer;
}
.admin-toggle-active {
  padding: 3px 10px; font-size: 11px; font-family: var(--font-body);
  border: 1px solid var(--border-strong); border-radius: 99px;
  background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all 0.12s;
}
.admin-toggle-active.is-active {
  background: var(--green-light); color: var(--green); border-color: #a8d8b4; font-weight: 600;
}
.admin-toggle-active:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-reset-btn {
  padding: 3px 9px; font-size: 11px; font-family: var(--font-body);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text-mid); cursor: pointer; transition: all 0.12s;
}
.admin-reset-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
body.dark .admin-reset-btn { background: #111418; border-color: #3a4558; color: #6a7a94; }

/* Security */
.admin-pin-toggle {
  padding: 5px 8px; background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--text-muted);
}
.admin-pin-toggle:hover { border-color: var(--blue); color: var(--blue); }

body.dark .admin-body { background: #111418; }

/* ═══════════════════════════════════════════════════════════════
   TO-DO VIEW
   ═══════════════════════════════════════════════════════════════ */
.todo-view {
  display: none; flex: 1; flex-direction: column; overflow: hidden;
  background: var(--surface);
}
.todo-view.visible { display: flex; }

.todo-header {
  padding: 14px 24px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  flex-shrink: 0;
}
.todo-header-left { flex: 1; }
.todo-header-title { font-family: var(--font-display); font-size: 20px; color: var(--navy); }
.todo-header-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.btn-todo-refresh {
  padding: 5px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); font-size: 12px; color: var(--text-muted); cursor: pointer;
  font-family: var(--font-body); transition: all 0.15s;
}
.btn-todo-refresh:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

.todo-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.todo-loading { color: var(--text-muted); font-style: italic; font-size: 14px; padding: 40px 0; text-align: center; }

.todo-section { margin-bottom: 24px; }
.todo-section-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  user-select: none;
}
.todo-section-header:hover { background: var(--surface); }
.todo-section-title { font-size: 13px; font-weight: 600; color: var(--navy); flex: 1; }
.todo-section-count {
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 99px; background: var(--amber-light); color: var(--amber);
}
.todo-section-count.red { background: var(--red-light); color: var(--red); }
.todo-section-count.green { background: var(--green-light); color: var(--green); }
.todo-section-chevron { font-size: 11px; color: var(--text-muted); transition: transform 0.2s; }
.todo-section.collapsed .todo-section-chevron { transform: rotate(-90deg); }

.todo-section-body {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.todo-section.collapsed .todo-section-body { display: none; }

.todo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  transition: background 0.1s;
}
.todo-item:last-child { border-bottom: none; }
.todo-item:hover { background: var(--blue-light); cursor: pointer; }

.todo-item-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.todo-item-dot.red    { background: var(--red); }
.todo-item-dot.amber  { background: var(--amber); }
.todo-item-dot.blue   { background: var(--blue); }

.todo-item-info { flex: 1; min-width: 0; }
.todo-item-account { font-size: 13px; font-weight: 500; color: var(--text); }
.todo-item-detail  { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.todo-item-age     { font-size: 12px; font-weight: 600; flex-shrink: 0; }
.todo-item-age.red   { color: var(--red); }
.todo-item-age.amber { color: var(--amber); }

.todo-empty-section { padding: 14px 16px; font-size: 13px; color: var(--text-muted); font-style: italic; background: var(--white); }

/* Dark mode */
body.dark .todo-header        { background: var(--white); }
body.dark .todo-section-header { background: var(--white); }
body.dark .todo-section-header:hover { background: var(--surface); }
body.dark .todo-item          { background: var(--white); }
body.dark .todo-item:hover    { background: var(--blue-light); }
body.dark .todo-empty-section { background: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   REPORTS VIEW
   ═══════════════════════════════════════════════════════════════ */
.reports-view {
  display: none; flex: 1; flex-direction: column; overflow: hidden;
  background: var(--surface);
}
.reports-view.visible { display: flex; }

.reports-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.reports-tabs { display: flex; padding: 0 20px; }
.reports-tab {
  padding: 12px 16px; border: none; border-bottom: 2px solid transparent;
  background: transparent; font-family: var(--font-body); font-size: 13px;
  color: var(--text-muted); cursor: pointer; transition: all 0.15s; margin-bottom: -1px;
  white-space: nowrap;
}
.reports-tab:hover  { color: var(--navy); }
.reports-tab.active { color: var(--navy); border-bottom-color: var(--blue); font-weight: 500; }

.report-pane { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.report-pane.active { display: flex; }

.report-toolbar {
  padding: 14px 24px; background: var(--white);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; gap: 16px;
}
.report-toolbar-filters { align-items: flex-start; flex-wrap: wrap; }
.report-desc { font-size: 13px; color: var(--text-muted); flex: 1; }

.report-filters { display: flex; gap: 24px; flex-wrap: wrap; flex: 1; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--blue); }
.filter-checks { display: flex; flex-direction: column; gap: 4px; }
.filter-checks label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mid); cursor: pointer; white-space: nowrap; }
.filter-checks label:hover { color: var(--text); }
.report-select {
  padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 12px; color: var(--text);
  background: var(--surface); outline: none;
}
.report-select:focus { border-color: var(--blue); background: var(--white); }

.btn-report-run {
  padding: 7px 18px; background: var(--navy); color: white; border: none;
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px;
  cursor: pointer; transition: background 0.15s; white-space: nowrap; flex-shrink: 0;
}
.btn-report-run:hover { background: var(--navy-mid); }

.report-output { flex: 1; overflow-y: auto; padding: 20px 24px; }
.report-empty  { color: var(--text-muted); font-style: italic; font-size: 14px; text-align: center; padding: 40px 0; }

/* Lead age table */
.lead-age-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lead-age-table th {
  text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
  border-bottom: 2px solid var(--border-strong); background: var(--surface);
  position: sticky; top: 0;
}
.lead-age-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.lead-age-table tr:hover td { background: var(--blue-light); cursor: pointer; }
.lead-age-table tr.never td { background: #fff8f8; }
body.dark .lead-age-table tr.never td { background: #1a0808; }

.age-pill {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 600;
}
.age-pill.green { background: var(--green-light); color: var(--green); }
.age-pill.amber { background: var(--amber-light); color: var(--amber); }
.age-pill.red   { background: var(--red-light);   color: var(--red);   }
.age-pill.gray  { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }

/* Email list output */
.email-output-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.btn-report-action {
  padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); font-size: 12px; color: var(--text-mid); cursor: pointer;
  font-family: var(--font-body); transition: all 0.15s;
}
.btn-report-action:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.email-list-textarea {
  width: 100%; min-height: 200px; padding: 12px; font-family: monospace; font-size: 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); resize: vertical; outline: none;
  box-sizing: border-box;
}

body.dark .reports-header { background: var(--white); }
body.dark .report-toolbar  { background: var(--white); }
body.dark .lead-age-table th { background: var(--surface); }
body.dark .email-list-textarea { background: var(--surface); }
body.dark .btn-report-action { background: var(--white); }

/* ── AKA (Also Known As) aliases ── */
.aka-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.aka-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--text);
}
.aka-item-name { flex: 1; }
.aka-delete-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1;
  padding: 0 2px; transition: color 0.15s;
}
.aka-delete-btn:hover { color: var(--red); }
.aka-add-row { display: flex; gap: 6px; align-items: center; }
.aka-input {
  flex: 1; padding: 5px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 13px;
  background: var(--white); color: var(--text); outline: none;
}
.aka-input:focus { border-color: var(--blue); }
.aka-add-btn {
  padding: 5px 12px; background: var(--navy); color: white; border: none;
  border-radius: var(--radius-sm); font-size: 12px; cursor: pointer;
  font-family: var(--font-body); white-space: nowrap; transition: background 0.15s;
}
.aka-add-btn:hover { background: var(--navy-mid); }

/* ── ACH Banking (Vendor) ── */
.ach-status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.ach-status-active   { background: #eaf4ee; color: #2d6a4f; }
.ach-status-inactive { background: #f5f5f5; color: #888; }
.ach-log-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ach-log-entry {
  background: var(--bg-card, #f8f9fc);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
}
body.dark .ach-log-entry { background: #1a1e28; border-color: #2a3040; }
.ach-log-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ach-log-type {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ach-type-setup   { background: #eaf4ee; color: #2d6a4f; }
.ach-type-change  { background: #fff3cd; color: #8a5200; }
.ach-type-verify  { background: #e8f0fb; color: #1a4a8a; }
.ach-log-date { color: var(--text-muted); font-size: 11px; }
.ach-log-meta { color: var(--text-muted); font-size: 11px; margin-top: 3px; line-height: 1.5; }
.ach-log-flags {
  margin-top: 5px;
  padding: 4px 8px;
  background: #fff8ed;
  border-left: 3px solid var(--amber);
  border-radius: 3px;
  color: #8a5200;
  font-size: 11px;
}
body.dark .ach-log-flags { background: #2a1f00; color: #e0a030; border-color: #c07800; }
.ach-log-notes { margin-top: 4px; color: var(--text-muted); font-style: italic; }
.ach-verified-badge { color: var(--green); font-weight: 600; }
.ach-unverified-badge { color: var(--amber); font-weight: 600; }
.btn-log-ach {
  padding: 6px 14px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}
.btn-log-ach:hover { background: var(--navy-mid); }
/* ACH approval states */
.ach-type-pending  { background: #fff3cd; color: #8a5200; }
.ach-type-approved { background: #eaf4ee; color: #2d6a4f; }
.ach-approve-btn {
  padding: 3px 10px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}
.ach-approve-btn:hover { background: var(--navy-mid); }
.ach-note-edit-area {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ach-note-edit-area textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-body);
  resize: vertical;
  box-sizing: border-box;
}
.ach-note-link {
  font-size: 11px;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
  margin-top: 3px;
}
.ach-note-save-btn {
  padding: 3px 10px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
}
/* ACH To-Do items */
.ach-todo-item {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ach-todo-item:last-child { border-bottom: none; }
.ach-todo-item:hover { background: var(--surface); }
.ach-todo-info { flex: 1; min-width: 0; }
.ach-todo-acct { font-weight: 600; font-size: 13px; color: var(--navy); }
.ach-todo-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Alias match hint in sidebar */
.sidebar-nickname {
  font-size: 10px;
  color: var(--blue);
  font-style: italic;
  margin-top: 1px;
  letter-spacing: .01em;
}
.sidebar-alias-hint {
  font-size: 10px; color: var(--amber); font-style: italic;
  margin-top: 1px;
}

/* Primary phone hint in sidebar */
.sidebar-phone-hint {
  font-size: 10.5px; color: var(--text-muted);
  margin-top: 1px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   CHANGELOG — account tab + standalone view
   ═══════════════════════════════════════════════════════════════ */
.changelog-list     { padding: 0; }
.changelog-loading  { padding: 20px; font-size: 13px; color: var(--text-muted); font-style: italic; text-align: center; }

.changelog-entry {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  background: var(--white);
}
.changelog-entry:hover { background: var(--surface); }
.changelog-entry-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  margin-top: 4px; background: var(--blue);
}
.changelog-entry-dot.green { background: var(--green); }
.changelog-entry-dot.amber { background: var(--amber); }
.changelog-entry-dot.red   { background: var(--red);   }
.changelog-entry-body      { flex: 1; min-width: 0; }
.changelog-entry-who       { font-size: 11px; font-weight: 600; color: var(--navy); }
.changelog-entry-what      { font-size: 12px; color: var(--text-mid); margin-top: 2px; }
.changelog-entry-diff      { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; }
.changelog-diff-old        { color: var(--red); text-decoration: line-through; }
.changelog-diff-arr        { color: var(--text-muted); }
.changelog-diff-new        { color: var(--green); font-weight: 500; }
.changelog-entry-time      { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.changelog-view {
  display: none; flex: 1; flex-direction: column; overflow: hidden;
  background: var(--surface);
}
.changelog-view.visible { display: flex; }

.changelog-view-header {
  padding: 14px 20px; background: var(--white);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.changelog-view-title {
  font-family: var(--font-display); font-size: 20px; color: var(--navy);
  flex-shrink: 0; margin-right: 8px;
}
.changelog-view-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; }
.changelog-search-input {
  padding: 6px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font-body);
  color: var(--text); background: var(--surface); outline: none; min-width: 180px;
}
.changelog-search-input:focus { border-color: var(--blue); background: var(--white); }
.changelog-filter-select {
  padding: 6px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-body);
  color: var(--text); background: var(--surface); outline: none;
}
.changelog-view-body { flex: 1; overflow-y: auto; }
.changelog-view-entry {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: var(--white);
}
.changelog-view-entry:hover { background: var(--surface); cursor: default; }
.changelog-view-acct {
  font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; margin-top: 1px;
}
.changelog-view-acct:hover { text-decoration: underline; }
.btn-changelog-refresh {
  padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); font-size: 12px; color: var(--text-muted);
  cursor: pointer; font-family: var(--font-body); transition: all 0.15s; white-space: nowrap;
}
.btn-changelog-refresh:hover { border-color: var(--blue); color: var(--blue); }

body.dark .changelog-entry         { background: var(--white); }
body.dark .changelog-entry:hover   { background: var(--surface); }
body.dark .changelog-view-header   { background: var(--white); }
body.dark .changelog-view-entry    { background: var(--white); }
body.dark .changelog-view-entry:hover { background: var(--surface); }
body.dark .changelog-search-input  { background: var(--surface); }
body.dark .changelog-filter-select { background: var(--surface); }
body.dark .btn-changelog-refresh   { background: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   MAIL KIT
   ═══════════════════════════════════════════════════════════════ */
.mailkit-view {
  display: none; flex: 1; flex-direction: column; overflow: hidden;
  background: var(--surface);
}
.mailkit-view.visible { display: flex; }

.mk-layout {
  display: flex; flex: 1; overflow: hidden;
}

/* Sidebar */
.mk-sidebar {
  width: 220px; min-width: 220px;
  background: #1a3a5c;
  display: flex; flex-direction: column;
  overflow-y: auto; padding-bottom: 20px;
  flex-shrink: 0;
}
.mk-sidebar-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-display);
  font-size: 16px; color: #fff; letter-spacing: 0.2px;
  flex-shrink: 0;
}
.mk-sidebar-section { padding: 10px 10px 6px; }
.mk-sidebar-label {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; color: rgba(200,215,230,0.45);
  padding: 0 6px 6px; text-transform: uppercase;
}
.mk-cat-row {
  display: flex; align-items: center; position: relative;
}
.mk-cat-row:hover .mk-cat-actions { opacity: 1; }
.mk-cat-actions {
  position: absolute; right: 2px;
  display: flex; gap: 1px; opacity: 0; transition: opacity 0.15s;
}
.mk-cat-item {
  flex: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 5px;
  background: none; border: none; cursor: pointer;
  color: rgba(200,215,230,0.75); font-size: 13px; font-family: var(--font-body);
  text-align: left; transition: background 0.15s, color 0.15s;
  white-space: nowrap; overflow: hidden;
}
.mk-cat-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.mk-cat-item.active { background: rgba(91,33,182,0.35); color: #fff; }
.mk-cat-count {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.45);
  font-size: 10px; padding: 1px 6px; border-radius: 20px; flex-shrink: 0;
}
.mk-add-cat-btn {
  width: 100%; padding: 6px 10px; margin-top: 4px;
  background: none; border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 5px; cursor: pointer;
  color: rgba(200,215,230,0.45); font-size: 12px;
  font-family: var(--font-body); text-align: left;
  transition: all 0.15s;
}
.mk-add-cat-btn:hover { border-color: #a78bfa; color: #a78bfa; }
.mk-icon-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(200,215,230,0.4); font-size: 13px;
  padding: 2px 5px; border-radius: 4px;
  transition: background 0.12s, color 0.12s;
  font-family: var(--font-body);
}
.mk-icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.mk-icon-btn-danger:hover { background: rgba(220,38,38,0.25); color: #fca5a5; }
.mk-color-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mk-color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  transition: transform 0.12s, border-color 0.12s; outline: none;
  flex-shrink: 0;
}
.mk-color-swatch:hover { transform: scale(1.15); }
.mk-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.35); transform: scale(1.1); }
.mk-cat-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex-shrink: 0; vertical-align: middle;
}
.mk-tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px; }
.mk-tag-pill {
  padding: 3px 9px; border-radius: 20px; font-size: 11px;
  background: rgba(255,255,255,0.07); border: none; cursor: pointer;
  color: rgba(200,215,230,0.7); font-family: var(--font-body);
  transition: all 0.15s;
}
.mk-tag-pill:hover { background: rgba(255,255,255,0.14); color: #fff; }
.mk-tag-pill.active { background: #5b21b6; color: #ede9fe; }

/* Main */
.mk-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.mk-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--white);
  border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0;
}
.mk-search-wrap {
  position: relative; flex: 1; max-width: 420px;
  display: flex; align-items: center;
}
.mk-search-icon {
  position: absolute; left: 10px; font-size: 16px;
  color: var(--text-muted); pointer-events: none;
}
.mk-search-input {
  width: 100%; padding: 7px 32px 7px 30px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-body); color: var(--text);
  background: var(--surface); outline: none; transition: border 0.15s;
}
.mk-search-input:focus { border-color: var(--blue); background: var(--white); }
.mk-clear-btn {
  position: absolute; right: 8px; background: none; border: none;
  font-size: 16px; color: var(--text-muted); cursor: pointer; line-height: 1;
}
.mk-btn-primary {
  padding: 7px 16px; background: #5b21b6; color: #ede9fe;
  border: none; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 500; font-family: var(--font-body); cursor: pointer;
  transition: background 0.15s; white-space: nowrap;
}
.mk-btn-primary:hover { background: #4c1d95; }
.mk-btn-secondary {
  padding: 7px 14px; background: none; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-body); cursor: pointer;
  transition: background 0.15s;
}
.mk-btn-secondary:hover { background: var(--surface); }
.mk-content-header {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px 20px 10px; flex-shrink: 0;
}
.mk-content-title {
  font-family: var(--font-display); font-size: 22px;
  color: var(--navy); font-weight: 400; font-style: italic;
}
.mk-result-count { font-size: 12px; color: var(--text-muted); }

/* Grid */
.mk-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; padding: 4px 20px 20px;
  align-content: start;
}
.mk-card {
  background: var(--white); border-radius: var(--radius);
  padding: 16px; cursor: pointer;
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.mk-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--blue-mid); }
.mk-card-top { display: flex; justify-content: space-between; align-items: center; }
.mk-card-cat {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: #7c3aed; text-transform: uppercase;
}
.mk-card-actions { display: flex; gap: 2px; }
.mk-card-title {
  font-family: var(--font-display); font-size: 15px;
  color: var(--navy); font-weight: 400; font-style: italic;
}
.mk-card-subject { font-size: 12px; color: var(--text-muted); }
.mk-card-preview {
  font-size: 12px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5;
}
.mk-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.mk-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2px;
}
.mk-tags-row { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-tag-chip {
  font-size: 10px; padding: 2px 7px; border-radius: 20px;
  background: #ede9fe; color: #5b21b6; font-weight: 500;
}
.mk-tag-chip.removable { display: inline-flex; align-items: center; gap: 3px; }
.mk-tag-chip.removable button {
  background: none; border: none; cursor: pointer; color: #5b21b6;
  font-size: 13px; line-height: 1; padding: 0; opacity: 0.6;
}
.mk-copy-btn {
  padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12px;
  font-weight: 500; font-family: var(--font-body); cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); transition: all 0.15s;
  white-space: nowrap;
}
.mk-copy-btn:hover { background: #5b21b6; color: #ede9fe; border-color: #5b21b6; }
.mk-copy-btn.copied { background: var(--green); color: #fff; border-color: var(--green); }
.mk-loading { padding: 30px; text-align: center; font-size: 13px; color: var(--text-muted); font-style: italic; }
.mk-empty {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px;
  color: var(--text-muted); padding: 60px 20px;
}
.mk-empty-icon { font-size: 40px; opacity: 0.25; }
.mk-empty p { font-size: 14px; }

/* Modals */
.mk-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(10,20,40,0.55); z-index: 600;
  align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.mk-overlay.open { display: flex; }
.mk-modal {
  background: var(--white); border-radius: 12px;
  padding: 28px; max-width: 640px; width: calc(100% - 40px);
  max-height: 90vh; overflow-y: auto;
  position: relative; box-shadow: 0 12px 48px rgba(0,0,0,0.22);
  animation: mkSlideUp 0.18s ease;
}
.mk-modal-sm { max-width: 360px; }
.mk-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; font-size: 20px;
  cursor: pointer; color: var(--text-muted);
  padding: 2px 6px; border-radius: 4px; line-height: 1;
}
.mk-modal-close:hover { background: var(--surface); color: var(--text); }
.mk-modal-title {
  font-family: var(--font-display); font-size: 20px;
  color: var(--navy); font-weight: 400; font-style: italic;
  margin-bottom: 16px;
}
.mk-field-label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 5px; margin-top: 12px;
}
.mk-field-input, .mk-field-select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-body); color: var(--text);
  background: var(--surface); outline: none; transition: border 0.15s;
}
.mk-field-input:focus, .mk-field-select:focus { border-color: #7c3aed; background: var(--white); }
.mk-field-textarea {
  width: 100%; padding: 9px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font-body); color: var(--text);
  background: var(--surface); outline: none; resize: vertical;
  line-height: 1.65; transition: border 0.15s;
}
.mk-field-textarea:focus { border-color: #7c3aed; background: var(--white); }
.mk-tag-input-row { display: flex; gap: 7px; margin-top: 5px; }
.mk-tag-input-row .mk-field-input { flex: 1; }
.mk-form-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; min-height: 10px; }
.mk-form-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;
}
.mk-form-error {
  display: none; margin-top: 10px; padding: 7px 10px;
  background: var(--red-light); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--red);
}
/* View modal specific */
.mk-view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mk-view-title { font-family: var(--font-display); font-size: 22px; color: var(--navy); font-weight: 400; font-style: italic; margin-bottom: 16px; }
.mk-view-field { margin-bottom: 14px; }
.mk-view-field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.mk-view-field p { font-size: 13px; color: var(--text); }
.mk-view-body-pre {
  font-family: var(--font-body); font-size: 13px; line-height: 1.7;
  color: var(--text); background: var(--surface); padding: 14px;
  border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-word;
}
.mk-copy-btn-lg {
  padding: 7px 16px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 500; font-family: var(--font-body); cursor: pointer;
  background: #5b21b6; color: #ede9fe; border: none; transition: all 0.15s;
}
.mk-copy-btn-lg:hover { background: #4c1d95; }
.mk-copy-btn-lg.copied { background: var(--green); }

/* Outlook button */
.mk-outlook-btn {
  padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px;
  font-weight: 500; font-family: var(--font-body); cursor: pointer;
  background: #0078d4; color: #fff;
  border: none; transition: background 0.15s; white-space: nowrap;
}
.mk-outlook-btn:hover { background: #005fa3; }
.mk-outlook-btn-lg {
  padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 500; font-family: var(--font-body); cursor: pointer;
  background: #0078d4; color: #fff; border: none; transition: background 0.15s;
}
.mk-outlook-btn-lg:hover { background: #005fa3; }

/* Inline category row in form */
.mk-cat-inline-row { display: flex; gap: 7px; align-items: center; }
.mk-cat-inline-row .mk-field-select { flex: 1; }
/* Delete confirm */
.mk-confirm-body { text-align: center; padding: 8px 0; }
.mk-confirm-icon { font-size: 32px; margin-bottom: 10px; }
.mk-confirm-body h3 { font-family: var(--font-display); font-size: 18px; color: var(--navy); font-weight: 400; font-style: italic; margin-bottom: 6px; }
.mk-confirm-body p  { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.mk-confirm-actions { display: flex; justify-content: center; gap: 10px; }
.mk-btn-danger { padding: 7px 16px; background: var(--red); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font-body); cursor: pointer; }
.mk-btn-danger:hover { background: #a93226; }

/* Mobile category chips — hidden on desktop */
.mk-cat-chips {
  display: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding: 8px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  white-space: nowrap;
}
.mk-cat-chips::-webkit-scrollbar { display: none; }
.mk-chip {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
  white-space: nowrap;
  flex-shrink: 0;
}
.mk-chip:hover { border-color: #7c3aed; color: #7c3aed; }
.mk-chip.active { background: #5b21b6; color: #ede9fe; border-color: #5b21b6; }

@keyframes mkSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS  — v33.1
   Breakpoint: ≤ 768px (phone) · 769–1024px (tablet)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger button (desktop: hidden) ── */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}

/* ── Mobile nav drawer ── */
.mobile-nav-drawer {
  position: fixed;
  top: 50px;
  left: 0; right: 0;
  background: #0d1520;
  z-index: 400;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  display: none;
}
.mobile-nav-drawer.open { display: flex; }
body.dark .mobile-nav-drawer { background: #0a0e14; }

.mobile-nav-drawer .mnav-btn {
  width: 100%;
  padding: 13px 20px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.mobile-nav-drawer .mnav-btn:active,
.mobile-nav-drawer .mnav-btn:hover { background: rgba(255,255,255,0.07); color: white; }
.mobile-nav-drawer .mnav-btn.active { color: white; font-weight: 500; background: rgba(255,255,255,0.15); border-left: 3px solid rgba(255,255,255,0.5); }
.mobile-nav-drawer .mnav-signout {
  padding: 12px 20px;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* ── Drawer backdrop ── */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 390;
  background: transparent;
}
.mobile-nav-backdrop.open { display: block; }

/* ── Mobile back button ── */
.mobile-back-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--blue);
  cursor: pointer;
  font-family: var(--font-body);
  width: 100%;
  text-align: left;
  flex-shrink: 0;
}
.mobile-back-btn:active { background: var(--blue-light); }

/* ════════════════════════════════════════
   ≤ 768px  PHONE LAYOUT
   ════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Header: hide both nav rows, show hamburger */
  .header-row-bottom          { display: none !important; }
  .header-nav-accounts        { display: none !important; }
  .header-nav-sep             { display: none !important; }
  .header-nav     { display: none !important; }
  .header-divider { display: none !important; }
  .user-name      { display: none !important; }
  .btn-signout    { display: none !important; }
  .conn-status    { display: flex !important; }
  #conn-label     { display: none !important; }
  .mobile-menu-btn { display: flex !important; align-items: center; }
  #db-status-bar  { display: block !important; height: 3px !important; }

  /* Sidebar: always full width on mobile */
  .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none !important;
  }

  /* LIST MODE: showing account/prospect/etc list — main panel hidden, sidebar shown */
  .app-body.mobile-list-mode .main-panel { display: none !important; }
  .app-body.mobile-list-mode .sidebar    { display: flex !important; }

  /* DETAIL/VIEW MODE (no mobile-list-mode class): sidebar hidden by inline style,
     main panel shows normally — no override needed, inline styles handle it */

  /* Back button visible on mobile */
  .mobile-back-btn { display: flex !important; }

  /* Panel tabs: horizontal scroll */
  .panel-tabs {
    overflow-x: auto !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .panel-tabs::-webkit-scrollbar { display: none; }

  /* Collapse ALL field grids to 1 column */
  .field-grid,
  .field-grid-2,
  .field-grid-4,
  .two-col-left .field-grid-4,
  .two-col-right .field-grid-4,
  .ov-card-col .field-grid-4,
  .ov-card-col .field-grid,
  .ov-card-col .field-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* Collapse two-col / card-row layouts */
  .two-col-sections { grid-template-columns: 1fr !important; }
  .ov-card-row      { grid-template-columns: 1fr !important; }
  .ov-card-row-2    { grid-template-columns: 1fr !important; }

  /* Comm log form: stack fields */
  .form-row { flex-direction: column !important; gap: 0 !important; }
  #log-notes { min-height: 110px !important; font-size: 15px !important; }
  .add-log-form .btn-save { width: 100% !important; padding: 13px !important; font-size: 15px !important; }

  /* Modals: fit screen */
  .modal-overlay .modal, .modal {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 88vh !important;
  }
  .modal-form-grid    { grid-template-columns: 1fr !important; }
  .contact-modal-grid { grid-template-columns: 1fr !important; }

  /* Spacing */
  .sidebar-top  { padding: 10px !important; }
  .acct-row     { padding: 10px 12px !important; }
  .tab-content  { padding: 14px 12px !important; }
  .panel-header { padding: 14px 16px !important; }
  .panel-title  { font-size: 16px !important; }

  /* Collect table readable on phone */
  .collect-table th,
  .collect-table td { padding: 8px 10px !important; font-size: 12px !important; }

  /* DS panel: unpin the Contact column on mobile — only Account stays locked */
  .ds-col-contact {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }

  /* ── Mail Kit mobile ── */
  .mk-sidebar       { display: none !important; }
  .mk-cat-chips     { display: flex !important; }
  .mk-grid          { grid-template-columns: 1fr !important; padding: 8px 12px 16px !important; gap: 10px !important; }
  .mk-topbar        { padding: 10px 12px !important; flex-wrap: wrap; gap: 8px !important; }
  .mk-search-wrap   { max-width: 100% !important; }
  .mk-btn-primary   { width: 100% !important; justify-content: center; }
  .mk-content-header { padding: 8px 12px 4px !important; }
  .mk-content-title  { font-size: 18px !important; }
  .mk-card           { padding: 12px !important; }
  .mk-card-preview   { -webkit-line-clamp: 3 !important; }
  .mk-overlay .mk-modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    padding: 20px 16px !important;
  }
  .mk-field-textarea { font-size: 15px !important; }
  .mk-view-header    { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .mk-view-header > div { width: 100% !important; justify-content: flex-start !important; flex-wrap: wrap; }
  .mk-copy-btn-lg, .mk-outlook-btn-lg, .mk-btn-secondary { flex: 1 !important; justify-content: center !important; }
}

/* ════════════════════════════════════════
   769–1024px  TABLET
   ════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar   { width: 240px !important; min-width: 240px !important; }
  .nav-btn   { padding: 5px 8px !important; font-size: 12px !important; }
  .user-name { display: none !important; }
  .conn-status { display: none !important; }
}

/* ── LTL FREIGHT MAP ─────────────────────────────────────────────────── */
#ltl-map-view {
  display: none; flex-direction: column; flex: 1; overflow: hidden; background: var(--surface);
}
#ltl-map-view.visible { display: flex; }

.ltl-map-header {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 14px 24px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.ltl-map-header-title { font-family: var(--font-display); font-size: 18px; color: var(--navy); }
.ltl-map-header-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.ltl-map-body { flex: 1; display: flex; overflow: hidden; }

.ltl-map-left {
  flex: 1; overflow-y: auto; overflow-x: auto;
  padding: 20px 20px 30px 24px;
  display: flex; flex-direction: column; gap: 0;
}

.ltl-country-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 8px; margin-top: 20px;
}
.ltl-country-label:first-child { margin-top: 0; }

.ltl-tile-grid { display: grid; gap: 3px; width: fit-content; }

.ltl-tile {
  width: 54px; height: 44px; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid transparent;
  transition: filter 0.1s, border-color 0.1s; user-select: none;
}
.ltl-tile-code { font-size: 11px; font-weight: 700; line-height: 1; color: var(--text); }
.ltl-tile-dots { display: flex; gap: 2px; margin-top: 4px; min-height: 6px; }
.ltl-tile-dot { width: 5px; height: 5px; border-radius: 50%; }

.ltl-tile-empty    { background: var(--surface-2); }
.ltl-tile-preferred { background: #d1f0da; }
.ltl-tile-avoid    { background: #fde0e0; }
.ltl-tile-both     { background: #fff0c0; }

.ltl-tile:hover { filter: brightness(0.93); border-color: var(--navy-mid); z-index: 1; }
.ltl-tile.selected { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.ltl-tile.selected .ltl-tile-code { color: var(--navy-dark); font-size: 12px; }

.ltl-country-sep {
  height: 1px; background: var(--border); margin: 14px 0 6px 0;
  width: calc(13 * 57px); max-width: 100%;
}

.ltl-legend {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-top: 20px; padding: 10px 16px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); width: fit-content;
}
.ltl-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-mid); }
.ltl-legend-swatch {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1);
}

/* Detail Panel (right side) */
.ltl-detail-panel {
  width: 390px; min-width: 320px; background: var(--white);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;
}
.ltl-detail-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-muted); gap: 12px; padding: 40px; text-align: center;
}
.ltl-detail-placeholder-icon { font-size: 42px; opacity: 0.35; }
.ltl-detail-header {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.ltl-detail-title { font-family: var(--font-display); font-size: 16px; }
.ltl-detail-country-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; background: rgba(255,255,255,0.18);
  padding: 3px 9px; border-radius: 10px;
}
.ltl-detail-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 20px; }

.ltl-detail-section { display: flex; flex-direction: column; gap: 8px; }
.ltl-detail-section-header { display: flex; align-items: center; justify-content: space-between; }
.ltl-detail-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
}
.ltl-add-carrier-btn {
  font-size: 11px; color: var(--blue); background: none;
  border: 1px solid var(--blue); border-radius: 4px;
  padding: 2px 9px; cursor: pointer; font-family: var(--font-body);
  transition: background 0.12s;
}
.ltl-add-carrier-btn:hover { background: var(--blue-light); }

/* Carrier card */
.ltl-carrier-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.ltl-carrier-card.pref-card { border-left: 3px solid var(--green); }
.ltl-carrier-card.avoid-card { border-left: 3px solid var(--red); }
.ltl-carrier-name { font-weight: 600; font-size: 13px; color: var(--text); margin-bottom: 6px; }
.ltl-carrier-detail { font-size: 11px; color: var(--text-mid); display: flex; flex-direction: column; gap: 3px; }
.ltl-carrier-detail-row { display: flex; gap: 4px; align-items: baseline; }
.ltl-carrier-detail-label { color: var(--text-muted); min-width: 72px; flex-shrink: 0; }
.ltl-carrier-detail-value { color: var(--text); word-break: break-word; }
.ltl-carrier-detail-value a { color: var(--blue); text-decoration: none; }
.ltl-carrier-detail-value a:hover { text-decoration: underline; }
.ltl-carrier-actions { display: flex; gap: 6px; margin-top: 8px; }
.ltl-carrier-btn {
  font-size: 11px; padding: 3px 9px; border-radius: 4px;
  border: 1px solid var(--border-strong); background: var(--white);
  color: var(--text-mid); cursor: pointer; font-family: var(--font-body); transition: background 0.12s;
}
.ltl-carrier-btn:hover { background: var(--surface-2); }
.ltl-carrier-btn.danger { border-color: var(--red); color: var(--red); }
.ltl-carrier-btn.danger:hover { background: var(--red-light); }
.ltl-carrier-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px 0; }

/* Add/edit form */
.ltl-carrier-form {
  background: var(--blue-light); border: 1px solid var(--blue-mid);
  border-radius: var(--radius); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.ltl-carrier-form-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-mid); margin-bottom: 2px;
}
.ltl-form-field { display: flex; flex-direction: column; gap: 3px; }
.ltl-form-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
.ltl-form-input {
  padding: 6px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12px;
  font-family: var(--font-body); background: var(--white); color: var(--text); width: 100%;
}
.ltl-form-input:focus { outline: none; border-color: var(--blue); }
.ltl-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.ltl-form-save {
  background: var(--navy); color: var(--white); border: none;
  border-radius: var(--radius-sm); padding: 5px 14px;
  font-size: 12px; cursor: pointer; font-family: var(--font-body);
  transition: background 0.12s;
}
.ltl-form-save:hover { background: var(--navy-mid); }
.ltl-form-cancel {
  background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 5px 10px;
  font-size: 12px; cursor: pointer; font-family: var(--font-body); color: var(--text-mid);
}
.ltl-form-cancel:hover { background: var(--surface-2); }

/* Notes fields */
.ltl-notes-textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-size: 12px; font-family: var(--font-body);
  background: var(--surface); color: var(--text); resize: vertical; min-height: 68px; line-height: 1.5;
}
.ltl-notes-textarea:focus { outline: none; border-color: var(--blue); background: var(--white); }
.ltl-notes-save-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.ltl-updated-info { font-size: 10px; color: var(--text-muted); font-style: italic; }
.ltl-save-notes-btn {
  background: var(--navy); color: var(--white); border: none;
  border-radius: var(--radius-sm); padding: 5px 14px;
  font-size: 12px; cursor: pointer; font-family: var(--font-body); transition: background 0.12s;
}
.ltl-save-notes-btn:hover { background: var(--navy-mid); }

/* ── SHIPPING DROPDOWN NAV ─────────────────────────────────────────── */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-trigger::after { content: ' ▾'; font-size: 9px; opacity: 0.7; }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--white); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  z-index: 300; min-width: 170px; overflow: hidden;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 16px; border: none; background: none;
  cursor: pointer; font-family: var(--font-body); font-size: 13px;
  color: var(--text); transition: background 0.1s; white-space: nowrap;
}
.nav-dropdown-item:hover { background: var(--blue-light); color: var(--blue); }
.nav-dropdown-item.active { background: var(--blue-light); color: var(--blue); font-weight: 500; }
.nav-dropdown-item + .nav-dropdown-item { border-top: 1px solid var(--border); }

/* ── NEW WINDOW BUTTON ────────────────────────────────────────────── */
.btn-pop-out {
  font-size: 11px; padding: 4px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text-muted);
  cursor: pointer; font-family: var(--font-body);
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  white-space: nowrap; flex-shrink: 0;
}
.btn-pop-out:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
/* Sidebar placement for account-type views */
.sidebar-new-window {
  display: flex; justify-content: flex-end; padding: 4px 10px 0;
}
/* ── LOADING SCREEN ────────────────────────────────────────────────── */
#loading-screen {
  position: fixed; inset: 0; z-index: 1002;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--navy-dark);
  transition: opacity 0.45s ease;
}
#loading-screen.fade-out { opacity: 0; pointer-events: none; }

.ls-brand {
  font-family: var(--font-display);
  font-size: 28px; color: var(--white);
  letter-spacing: 0.3px; margin-bottom: 6px;
}
.ls-tagline {
  font-size: 12px; color: rgba(255,255,255,0.38);
  margin-bottom: 48px;
}
.ls-bar-track {
  width: 240px; height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: 99px; overflow: hidden; margin-bottom: 14px;
}
.ls-bar-fill {
  height: 100%; background: var(--blue);
  border-radius: 99px; width: 5%;
  transition: width 0.5s ease;
}
.ls-status {
  font-size: 12px; color: rgba(255,255,255,0.40);
  font-family: var(--font-body); min-height: 18px;
  text-align: center; letter-spacing: 0.02em;
}
.ls-retry {
  margin-top: 28px; padding: 8px 22px;
  background: none; border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm); color: rgba(255,255,255,0.60);
  font-family: var(--font-body); font-size: 13px;
  cursor: pointer; display: none; transition: border-color 0.15s, color 0.15s;
}
.ls-retry:hover { border-color: rgba(255,255,255,0.6); color: var(--white); }
.ls-retry.show { display: inline-block; }