/* ==========================================================================
   TaxMargin Pro — professional skin (loaded after the app's own stylesheet)
   - One slim dark app bar instead of three stacked blocks at the top
   - Larger, more readable type throughout
   The bridge injects its own <style> at runtime, after this file, so rules for
   its elements are prefixed with "html body" to stay ahead of them.
   ========================================================================== */

:root {
  --tm-bar-h: 56px;
  --tm-bar-bg: #0b1220;
  --tm-bar-bg2: #16213d;
  --tm-bar-ink: #e2e8f0;
  --tm-bar-line: rgba(255, 255, 255, 0.12);
  font-size: 15px;
}

body {
  font-size: 15px;
  line-height: 1.55;
  background-image: none;
}

/* ---------- App bar (built by the bridge) ---------- */
html body #tm-pro-shell { max-width: none; margin: 0; padding: 0; }

html body #tm-pro-topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--tm-bar-h);
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, var(--tm-bar-bg) 0%, var(--tm-bar-bg2) 100%);
  color: var(--tm-bar-ink);
  box-shadow: 0 2px 12px rgba(2, 6, 23, 0.25);
  font-size: 14px;
  flex-wrap: nowrap;
}

html body .tm-topbar-left,
html body .tm-topbar-right { flex-wrap: nowrap; gap: 8px; min-width: 0; }

html body .tm-pro-tag {
  background: none;
  box-shadow: none;
  padding: 0;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
html body .tm-pro-tag .tm-logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #2563eb);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; letter-spacing: 0;
}
html body .tm-pro-tag b { color: #a5b4fc; font-weight: 800; }

html body .tm-user-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--tm-bar-line);
  color: #e0e7ff;
  font-size: 13px;
  padding: 5px 12px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #tm-topbar-summary { display: none; }
@media (max-width: 1500px) { html body #tm-pro-topbar .tm-user-chip { max-width: 230px; } }

html body #tm-pro-topbar button {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tm-bar-ink);
  border: 1px solid var(--tm-bar-line);
  box-shadow: none;
  font-size: 13.5px;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
html body #tm-pro-topbar button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  transform: none;
}
/* Account menu: theme, password, sign out */
html body .tm-account { position: relative; }
html body #tm-pro-topbar .tm-user-chip { cursor: pointer; font-family: inherit; }
html body #tm-pro-topbar .tm-user-chip::after { content: "▾"; margin-left: 4px; opacity: 0.7; }
html body .tm-account-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  padding: 6px;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  z-index: 1100;
}
html body .tm-account.open .tm-account-menu { display: flex; flex-direction: column; gap: 2px; }
html body #tm-pro-topbar .tm-account-menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text, #0f172a);
  font-size: 14.5px;
  padding: 9px 12px;
}
html body #tm-pro-topbar .tm-account-menu button:hover:not(:disabled) { background: var(--bg-subtle, #f1f5f9); }
html body #tm-pro-topbar .tm-account-menu #tm-logout-btn { color: var(--danger, #dc2626); border-top: 1px solid var(--border, #e2e8f0); border-radius: 0 0 8px 8px; }

/* ---------- The app's own header: its buttons sit in the app bar ---------- */
header.top h1 { display: none; }

@media (min-width: 1280px) {
  header.top {
    position: fixed;
    top: 0;
    left: 214px;   /* just after the brand in the app bar */
    height: var(--tm-bar-h);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    z-index: 1001;
  }
  header.top .btnrow { flex-wrap: nowrap; }
  header.top button {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tm-bar-ink);
    border: 1px solid var(--tm-bar-line);
    box-shadow: none;
    font-size: 13.5px;
    padding: 7px 12px;
    white-space: nowrap;
  }
  header.top button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); transform: none; }
}

@media (max-width: 1279px) {
  header.top {
    position: static;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    justify-content: flex-start;
  }
  html body .tm-step-meta span { display: none; }
  html body #tm-pro-topbar { padding: 0 14px; }
  html body .tm-user-chip { max-width: 200px; }
}

/* ---------- Setup checklist: one slim line instead of three cards ---------- */
html body #tm-pro-subbar { max-width: 1240px; margin: 14px auto 0; padding: 0 24px; }
html body .tm-stepper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
}
html body .tm-step-card {
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  gap: 8px;
  box-shadow: none;
  font-size: 14px;
}
html body .tm-step-num { width: 24px; height: 24px; font-size: 12px; }
html body .tm-step-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html body .tm-step-meta b { display: inline; font-size: 14px; }
html body .tm-step-meta span { font-size: 13px; }

html body .tm-kpi-grid { gap: 10px; }
html body .tm-kpi-card { padding: 10px 14px; }
html body .tm-kpi-label { font-size: 12px; }
html body .tm-kpi-val { font-size: 19px; }
html body .tm-kpi-sub { font-size: 12.5px; }

/* ---------- Page body ---------- */
.app { padding-top: 16px; }

.panel { padding: 22px 26px; border-radius: 14px; }
.panel h2 { font-size: 14.5px; letter-spacing: 0.05em; color: var(--text-secondary); }
.panel h2::before { height: 16px; }

.field label { font-size: 14px; }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
select {
  font-size: 15px;
  padding: 9px 12px;
}
input[type="file"] { font-size: 14.5px; padding: 8px 10px; }
input[type="file"]::file-selector-button { font-size: 14px; padding: 6px 14px; }

button { font-size: 14.5px; padding: 9px 16px; }

table { font-size: 14.5px; }
th { font-size: 12.5px; }
th, td { padding: 10px 12px; }
td.num { font-size: 14px; }

.pill { font-size: 12.5px; padding: 3px 9px; }
.pill.mini { font-size: 11.5px; }

.small { font-size: 13.5px; }
.subhead { font-size: 13px; }
.warn, .error { font-size: 14.5px; }
.tally-btn { font-size: 14px; }
.small-btn { font-size: 13.5px; }

/* Bridge dialogs */
html body .tm-modal-body { font-size: 15px; }
html body .tm-modal-head h3 { font-size: 18px; }
html body .tm-auth-tab { font-size: 14.5px; }
html body .tm-auth-field label { font-size: 13.5px; }
html body .tm-auth-field input { font-size: 15px; }
html body .tm-hosted-note p { font-size: 14.5px; }

@media (max-width: 700px) {
  html body .tm-pro-tag { font-size: 15px; }
  html body #tm-gst-calc-btn { display: none !important; }
  /* Account menu stays reachable as an icon */
  html body #tm-pro-topbar .tm-user-chip { font-size: 0; padding: 7px 10px; max-width: none; }
  html body #tm-pro-topbar .tm-user-chip::before { content: "👤"; font-size: 16px; }
  html body #tm-pro-topbar .tm-user-chip::after { font-size: 13px; }
  html body #tm-pro-topbar #tm-conn-label { font-size: 13px; }
  html body .tm-stepper { flex-wrap: nowrap; overflow-x: auto; }
  html body .tm-step-card { flex: 0 0 auto; }
  html body #tm-pro-subbar { padding: 0 14px; }
  .app { padding-left: 14px; padding-right: 14px; }
  input[type="file"] { max-width: 100%; width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
  html body .tm-pro-tag > span:last-child { display: none; }
  html body #tm-pro-topbar { gap: 8px; }
}

/* ---------- Already in Tally (duplicate check) ---------- */
html body .tm-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { html body .tm-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { html body .tm-kpi-grid { grid-template-columns: 1fr 1fr; } }
html body .tm-dup-btn {
  font-size: 13px; padding: 4px 10px; border-radius: 7px;
  border: 1px solid var(--accent, #4f46e5); color: var(--accent, #4f46e5);
  background: var(--accent-soft, rgba(79, 70, 229, 0.08)); box-shadow: none;
}
html body .tm-dup-btn:hover:not(:disabled) { background: var(--accent, #4f46e5); color: #fff; transform: none; }
table.tx-table tbody tr.tm-in-tally td { background: color-mix(in srgb, var(--warn-bg, #fffbeb) 85%, transparent); }
table.tx-table tbody tr.tm-in-tally td:first-child { box-shadow: inset 4px 0 0 var(--warn, #d97706); }
table.tx-table tbody tr.tm-in-tally td:nth-child(9)::after {
  content: "In Tally";
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--warn, #d97706);
  background: var(--warn-bg, #fffbeb); border: 1px solid var(--warn-border, #fde68a);
}
html body #tm-dup-backdrop label { font-weight: 600; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
html body #tm-dup-backdrop table th, html body #tm-dup-backdrop table td { padding: 8px 10px; }

/* ==========================================================================
   v4.2 — fixed app bar, compact transactions screen, designs & density
   ========================================================================== */

/* The bar stays on screen while scrolling (it used to scroll away and leave the
   app's buttons floating over the page). */
html body #tm-pro-topbar { position: fixed; top: 0; left: 0; right: 0; }
html body #tm-pro-shell { padding-top: var(--tm-bar-h); }
html body .tm-pro-tag { color: var(--tm-bar-ink-strong, #fff); }

/* ---- Stats: one slim strip instead of five tall cards ---- */
html body #tm-pro-subbar { max-width: 1560px; margin-top: 10px; }
html body .tm-kpi-grid {
  gap: 0;
  margin: 0;
  background: var(--panel, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
  overflow: hidden;
}
html body .tm-kpi-card {
  border: 0;
  border-left: 1px solid var(--border, #e2e8f0);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 8px 14px;
  gap: 1px;
  justify-content: center;
}
html body .tm-kpi-card:first-child { border-left: 0; }
html body .tm-kpi-label { font-size: 11.5px; gap: 6px; }
html body .tm-kpi-val { font-size: 17px; line-height: 1.25; }
html body .tm-kpi-sub { font-size: 12px; }
html body .tm-kpi-card:not(.tm-kpi-intally) .tm-kpi-sub span:last-child { display: none; }
html body .tm-progress-track { height: 5px; }
html body .tm-kpi-intally .tm-kpi-sub { flex-wrap: nowrap; }
html body .tm-kpi-intally .tm-kpi-sub span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .tm-dup-btn { padding: 2px 9px; font-size: 12.5px; white-space: nowrap; }

/* ---- Transactions screen ---- */
.app.wide { max-width: 1560px; }
.tx-top { padding: 8px 14px; margin-bottom: 10px; gap: 10px; }
.tx-top .back { padding: 3px 9px; font-size: 16px; }
.tx-title h1 { font-size: 17px; margin: 0; }
.tx-title .muted, .tx-title p { font-size: 12.5px; margin: 0; }
.tx-top-right { gap: 8px; }
.top-field { padding: 4px 10px; font-size: 13.5px; }
.tx-top-right button { padding: 7px 14px; }
.tx-card { padding: 12px 16px; }
.card-head { margin-bottom: 8px; padding-bottom: 8px; }
.opbar { padding: 6px 10px; margin-bottom: 6px; gap: 8px; }
.opbar-label { font-size: 11px; }
.opbar select, .opbar input[type="text"], .opbar button { font-size: 13.5px; padding: 5px 10px; }
.opbar input[type="date"] { font-size: 13px; padding: 3px 6px; }
.check-label { font-size: 13.5px; }
.panel { margin-bottom: 14px; }

/* ---- Density: Compact ---- */
html[data-tm-density="compact"] { --tm-bar-h: 48px; }
html[data-tm-density="compact"] body,
html[data-tm-density="compact"] table { font-size: 14px; }
html[data-tm-density="compact"] th, html[data-tm-density="compact"] td { padding: 6px 10px; }
html[data-tm-density="compact"] .tx-table td { padding-top: 5px; padding-bottom: 5px; }
html[data-tm-density="compact"] .panel { padding: 14px 18px; margin-bottom: 10px; }
html[data-tm-density="compact"] button { padding: 6px 12px; font-size: 13.5px; }
html[data-tm-density="compact"] input[type="text"],
html[data-tm-density="compact"] input[type="password"],
html[data-tm-density="compact"] input[type="number"],
html[data-tm-density="compact"] select { padding: 6px 10px; font-size: 14px; }
html[data-tm-density="compact"] .tx-top { padding: 6px 12px; margin-bottom: 8px; }
html[data-tm-density="compact"] .tx-card { padding: 10px 14px; }
html[data-tm-density="compact"] .opbar { padding: 4px 8px; margin-bottom: 4px; }
html[data-tm-density="compact"] body .tm-kpi-card { padding: 6px 12px; }
html[data-tm-density="compact"] body .tm-kpi-val { font-size: 15.5px; }
html[data-tm-density="compact"] body #tm-pro-topbar button,
html[data-tm-density="compact"] header.top button { padding: 5px 10px; font-size: 13px; }

/* ---- Designs (accent + app bar). The light/dark theme still works on top. ---- */
html[data-tm-skin="ocean"] {
  --accent: #0e7490; --accent-hover: #155e75; --accent-soft: rgba(14, 116, 144, 0.1);
  --chip: #e0f2fe; --row-sel: #e0f7fa;
  --tm-bar-bg: #0c4a6e; --tm-bar-bg2: #0e7490;
}
html[data-tm-skin="emerald"] {
  --accent: #047857; --accent-hover: #065f46; --accent-soft: rgba(4, 120, 87, 0.1);
  --chip: #d1fae5; --row-sel: #ecfdf5;
  --tm-bar-bg: #064e3b; --tm-bar-bg2: #047857;
}
html[data-tm-skin="graphite"] {
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, 0.08);
  --chip: #eff6ff; --row-sel: #eff6ff;
  --tm-bar-bg: #ffffff; --tm-bar-bg2: #ffffff;
  --tm-bar-ink: #1e293b; --tm-bar-ink-strong: #0f172a; --tm-bar-line: rgba(15, 23, 42, 0.12);
}
html[data-tm-skin="graphite"] body #tm-pro-topbar { box-shadow: 0 1px 0 #e2e8f0, 0 4px 14px rgba(15, 23, 42, 0.06); }
html[data-tm-skin="graphite"] body #tm-pro-topbar button,
html[data-tm-skin="graphite"] header.top button { background: #f8fafc; }
html[data-tm-skin="graphite"] body #tm-pro-topbar .tm-user-chip { background: #f1f5f9; color: #1e293b; }
html[data-tm-skin="graphite"] body .tm-pro-tag b { color: #2563eb; }
html[data-tm-skin="saffron"] {
  --accent: #c2410c; --accent-hover: #9a3412; --accent-soft: rgba(194, 65, 12, 0.08);
  --chip: #ffedd5; --row-sel: #fff7ed;
  --tm-bar-bg: #292524; --tm-bar-bg2: #44403c;
}
html[data-tm-skin="saffron"] body .tm-pro-tag b { color: #fdba74; }
html[data-tm-skin] body .tm-pro-tag .tm-logo { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); }
html[data-tm-skin] button.primary { box-shadow: 0 2px 6px var(--accent-soft); }

/* Design picker */
html body .tm-skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
html body .tm-skin-card {
  border: 2px solid var(--border, #e2e8f0); border-radius: 12px; padding: 0; overflow: hidden;
  background: var(--panel, #fff); cursor: pointer; text-align: left; box-shadow: none;
}
html body .tm-skin-card.on { border-color: var(--accent, #4f46e5); box-shadow: 0 0 0 3px var(--accent-soft); }
html body .tm-skin-card .sw-bar { height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 8px; }
html body .tm-skin-card .sw-bar i { width: 26px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); }
html body .tm-skin-card .sw-body { padding: 10px; background: #f8fafc; display: flex; gap: 6px; align-items: center; }
html body .tm-skin-card .sw-btn { height: 18px; width: 54px; border-radius: 5px; }
html body .tm-skin-card .sw-chip { height: 12px; width: 34px; border-radius: 99px; }
html body .tm-skin-card b { display: block; padding: 8px 10px 0; font-size: 14px; color: var(--text, #0f172a); }
html body .tm-skin-card small { display: block; padding: 0 10px 10px; font-size: 12.5px; color: var(--muted, #64748b); }
html body .tm-density { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
html body .tm-density button.on { border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); background: var(--accent-soft); }

/* Sortable column headings are buttons: keep them the size of the other headings. */
html body th button,
html[data-tm-density] body th button { font-size: inherit; padding: 0; box-shadow: none; text-transform: inherit; letter-spacing: inherit; }
.tx-table th { font-size: 12px; }
html[data-tm-density="compact"] .tx-table th { font-size: 11.5px; }

/* Statement vs Tally dialog tabs */
html body .tm-dup-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border, #e2e8f0); padding-bottom: 8px; }
html body .tm-dup-tabs button {
  background: transparent; border: 1px solid transparent; box-shadow: none; border-radius: 8px;
  font-size: 14px; padding: 7px 12px; color: var(--text-secondary, #334155);
}
html body .tm-dup-tabs button.on { background: var(--accent-soft, rgba(79, 70, 229, 0.08)); border-color: var(--accent, #4f46e5); color: var(--accent, #4f46e5); }
html body .tm-dup-count { display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 4px; border-radius: 999px; background: var(--grey-bg, #f1f5f9); font-size: 12.5px; text-align: center; }
html body .tm-dup-count.has { background: var(--warn-bg, #fffbeb); color: var(--warn, #d97706); border: 1px solid var(--warn-border, #fde68a); }