/*
  OrcaNavigator – Professional UI layer
  - Adds theme tokens (dark/light)
  - Unifies cards/panels, page headers, tables, forms, modals
  - Keeps existing Navigator dark background + topbar, but gives a more polished surface system
*/

:root{
  /* Default theme = dark */
  --bg: #0b1220;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(148,163,184,0.90);
  --accent: rgba(96,165,250,0.95);
  --border: rgba(148,163,184,0.16);
  --panel: rgba(15,23,42,0.72);
  --panel2: rgba(2,6,23,0.30);

  --surface: rgba(255,255,255,0.96);
  --surfaceText: #0b1020;
  --surfaceMuted: rgba(15,23,42,0.72);
  --surfaceBorder: rgba(15,23,42,0.10);

  --topbarBg: rgba(9,14,26,0.86);
  --topbarBorder: rgba(148,163,184,0.12);
  --topbarText: rgba(229,231,235,0.92);
  --topbarMuted: rgba(148,163,184,0.92);
  --topbarHover: rgba(255,255,255,0.08);

  --shadowLg: 0 18px 60px rgba(0,0,0,0.38);
  --shadowMd: 0 10px 30px rgba(0,0,0,0.18);

  --btnBg: rgba(255,255,255,0.06);
  --btnBorder: rgba(255,255,255,0.14);
  --btnHoverBg: rgba(255,255,255,0.10);

  --btnPrimaryBg: rgba(96,165,250,0.18);
  --btnPrimaryBorder: rgba(96,165,250,0.55);
  --btnPrimaryText: rgba(226,232,240,0.98);

  --btnDangerBg: rgba(239,68,68,0.16);
  --btnDangerBorder: rgba(239,68,68,0.45);
  --btnDangerText: rgba(255,255,255,0.96);

  --focus: rgba(96,165,250,0.65);
  --radiusLg: 24px;
  --radiusMd: 18px;
  --radiusSm: 14px;
}

/* ------------------------------------------------------------------
   Global box sizing
   ------------------------------------------------------------------
   Several Navigator forms (notably the custom login) style inputs as
   width: 100% with padding/border. Without border-box this causes
   those controls to overflow their parent cards.
*/
*, *::before, *::after{ box-sizing: border-box; }

html[data-theme="light"]{
  --bg: #f5f7fb;
  --text: #0b1020;
  --muted: rgba(15,23,42,0.72);
  --accent: rgba(37,99,235,0.95);
  --border: rgba(15,23,42,0.12);
  --panel: rgba(255,255,255,0.96);
  --panel2: rgba(15,23,42,0.03);

  --surface: #ffffff;
  --surfaceText: #0b1020;
  --surfaceMuted: rgba(15,23,42,0.70);
  --surfaceBorder: rgba(15,23,42,0.10);

  --topbarBg: rgba(255,255,255,0.78);
  --topbarBorder: rgba(15,23,42,0.12);
  --topbarText: #0b1020;
  --topbarMuted: rgba(15,23,42,0.70);
  --topbarHover: rgba(15,23,42,0.06);

  --shadowLg: 0 16px 50px rgba(2,6,23,0.12);
  --shadowMd: 0 8px 22px rgba(2,6,23,0.10);

  --btnBg: rgba(15,23,42,0.04);
  --btnBorder: rgba(15,23,42,0.14);
  --btnHoverBg: rgba(15,23,42,0.07);

  --btnPrimaryBg: rgba(37,99,235,0.10);
  --btnPrimaryBorder: rgba(37,99,235,0.40);
  --btnPrimaryText: #0b1020;

  --btnDangerBg: rgba(239,68,68,0.10);
  --btnDangerBorder: rgba(239,68,68,0.35);
  --btnDangerText: #0b1020;

  --focus: rgba(37,99,235,0.45);
}

html{ color-scheme: dark light; }
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

/* White surfaces should always use light color-scheme so native controls render correctly. */
.panel,
.nav-builder-panel,
#content-main{
  color-scheme: light;
}


body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(96,165,250,0.18), transparent 60%),
    radial-gradient(900px 700px at 80% 22%, rgba(34,197,94,0.12), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,0.72), var(--bg));
}
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(900px 700px at 80% 22%, rgba(34,197,94,0.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.96), var(--bg));
}

/* Admin-derived layouts often paint #container/#content/.wrap with their own
   grey background (via --body-bg), which can make Navigator look "stuck".
   In Navigator mode, keep these layers transparent so our themed body
   background shows through.
*/
body.orkaflow:not(.popup) #container,
body.orkaflow:not(.popup) #content,
body.orkaflow:not(.popup) .wrap{
  background: transparent !important;
}

/* Topbar polish */
.topbar{
  background: var(--topbarBg) !important;
  border-bottom: 1px solid var(--topbarBorder) !important;
  backdrop-filter: blur(10px);
  /* MUST be fixed across the whole site.
     (Some Orkaflow pages extend Django admin templates where #container has
     padding-top; if .topbar is not fixed it gets pushed down, creating a
     large blank space above and breaking hit-testing for controls.) */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2600 !important;
}

.topbar .brand-link{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.topbar .brand-logo{
  height: 34px;
  width: auto;
  display:block;
}

.topbar .brand-word{
  display: inline-flex !important;
  align-items: baseline;
  gap: 0;
  font-weight: 950;
  letter-spacing: 0.2px;
  font-size: 18px;
  color: var(--topbarText);
  line-height: 1;
}
.topbar .brand-word .orca{ color: var(--topbarText); }
.topbar .brand-word .nav{ color: rgba(125,211,252,0.98); }
html[data-theme="light"] .topbar .brand-word .nav{ color: rgba(37,99,235,0.95); }

/* Swap brand mark by theme */
.topbar .brand-logo.logo-dark{ display: inline-block; }
.topbar .brand-logo.logo-light{ display: none; }
html[data-theme="light"] .topbar .brand-logo.logo-dark{ display: none; }
html[data-theme="light"] .topbar .brand-logo.logo-light{ display: inline-block; }

.navlinks a{
  color: var(--topbarText) !important;
  opacity: 0.92;
}
.navlinks a:hover{
  background: var(--topbarHover) !important;
}
.navlinks a.active{
  background: rgba(96,165,250,0.18) !important;
  border-color: rgba(96,165,250,0.40) !important;
}
html[data-theme="light"] .navlinks a.active{
  background: rgba(37,99,235,0.10) !important;
  border-color: rgba(37,99,235,0.28) !important;
}

/* Optional per-page context chip in the topbar (used by transaction pages) */
.topbar .topbar-context{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--topbarBorder);
  color: var(--topbarText);
  font-weight: 850;
}
html[data-theme="light"] .topbar .topbar-context{
  background: rgba(15,23,42,0.04);
}

/* Screen-reader-only helper */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Transaction pages: visually move the paginator into the fixed topbar
   while keeping it inside the <form> for correct submissions. */
body.orkaflow.incoming #content > form#viewform > .paginatop,
body.orkaflow.outgoing #content > form#viewform > .paginatop,
body.orkaflow.process #content > form#viewform > .paginatop,
body.orkaflow.confirm #content > form#viewform > .paginatop{
  position: fixed;
  top: 8px;
  right: 150px; /* leave room for the user menu */
  z-index: 2650;
  margin: 0 !important;
  padding: 6px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--topbarBorder);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] body.orkaflow.incoming #content > form#viewform > .paginatop,
html[data-theme="light"] body.orkaflow.outgoing #content > form#viewform > .paginatop,
html[data-theme="light"] body.orkaflow.process #content > form#viewform > .paginatop,
html[data-theme="light"] body.orkaflow.confirm #content > form#viewform > .paginatop{
  background: rgba(255,255,255,0.55);
}

/* Transaction pages: single header bar layout (title + tabs + controls + paginator) */
body.orkaflow.incoming form#viewform .orkaflow-actions,
body.orkaflow.outgoing form#viewform .orkaflow-actions,
body.orkaflow.process  form#viewform .orkaflow-actions,
body.orkaflow.confirm  form#viewform .orkaflow-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
body.orkaflow.incoming form#viewform .tx-page-title,
body.orkaflow.outgoing form#viewform .tx-page-title,
body.orkaflow.process  form#viewform .tx-page-title,
body.orkaflow.confirm  form#viewform .tx-page-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  color: var(--text);
  margin-right: 8px;
}
body.orkaflow.incoming form#viewform .orkaflow-actions .paginatop,
body.orkaflow.outgoing form#viewform .orkaflow-actions .paginatop,
body.orkaflow.process  form#viewform .orkaflow-actions .paginatop,
body.orkaflow.confirm  form#viewform .orkaflow-actions .paginatop{
  margin-left: auto !important;
  margin-top: 0 !important;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--topbarBorder);
  border-radius: 999px;
  padding: 6px 10px;
}
html[data-theme="light"] body.orkaflow.incoming form#viewform .orkaflow-actions .paginatop,
html[data-theme="light"] body.orkaflow.outgoing form#viewform .orkaflow-actions .paginatop,
html[data-theme="light"] body.orkaflow.process  form#viewform .orkaflow-actions .paginatop,
html[data-theme="light"] body.orkaflow.confirm  form#viewform .orkaflow-actions .paginatop{
  background: rgba(255,255,255,0.55);
}

.user a, .user{
  color: var(--topbarText) !important;
}

/* Dropdown menus (Builders / Transactions / Run / Configuration / User)
   Use theme tokens so light mode isn't a dark dropdown with dark text. */
.topbar .dropdown-menu{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadowLg) !important;
}
.topbar .dropdown-menu a{
  color: var(--text) !important;
  opacity: 0.92;
}
.topbar .dropdown-menu a:hover{
  opacity: 1;
  background: rgba(148,163,184,0.14) !important;
}
html[data-theme="light"] .topbar .dropdown-menu a:hover{
  background: rgba(15,23,42,0.06) !important;
}
.topbar .dropdown-menu .sep{
  background: var(--border) !important;
}

/* Account dropdown: keep a consistent "floating panel" look across pages.
   Some admin-derived pages bring extra CSS that styles menu anchors as
   pill buttons (background/border). Force a neutral base so the menu
   always looks like the "correct" screenshot.
   We intentionally keep this menu dark even in light mode for contrast.
*/
.topbar #nav-account .dropdown-menu{
  background: rgba(11,16,30,0.92) !important;
  border: 1px solid rgba(15,23,42,0.18) !important;
  border-radius: 24px !important;
  padding: 14px 18px !important;
  min-width: 320px;
}
.topbar #nav-account .dropdown-menu a{
  display: block;
  padding: 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: rgba(229,231,235,0.94) !important;
  font-weight: 800;
}
.topbar #nav-account .dropdown-menu a:hover{
  background: transparent !important;
  color: rgba(229,231,235,0.98) !important;
  text-decoration: none;
}
.topbar #nav-account .dropdown-menu .sep{
  background: rgba(255,255,255,0.14) !important;
}

/* Theme toggle button (Navigator-only; avoid colliding with Django admin's .theme-toggle) */
.orca-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--topbarText);
  cursor:pointer;
  font-weight: 850;
  text-decoration:none;
  user-select:none;
}
.topbar .orca-theme-toggle{
  /* On some admin-derived pages, admin CSS targets header buttons with higher
     specificity and can strip background/border/padding (making the toggle
     look like an unclickable icon). Force our button styling + clickability. */
  background: var(--btnBg) !important;
  border: 1px solid var(--btnBorder) !important;
  padding: 0 12px !important;
  height: 38px !important;
  line-height: 38px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 1001;
  -webkit-appearance: none;
  appearance: none;
}
.orca-theme-toggle:hover{ background: var(--btnHoverBg); }
.orca-theme-toggle .icon{ width: 18px; height: 18px; display:inline-flex; align-items:center; justify-content:center; }

/* Page wrapper */
.wrap{
  color: var(--text) !important;
}

/* Unified surfaces */
.card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radiusLg) !important;
  padding: 18px !important;
  box-shadow: var(--shadowLg) !important;
  color: var(--text) !important;
}

/* Card headings must remain readable on the dark/translucent card surface.
   (Some legacy templates forced headings to a dark color.) */
.card h1,
.card h2,
.card h3,
.card h4,
.card .title{
  color: var(--text) !important;
}

/* Headings inside light panels should be dark, regardless of global theme. */
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel .title{
  color: var(--surfaceText) !important;
}

/* Icons inside light panels should also use a dark fill (white icons on white panels disappear). */
.panel .title-icon::after{
  background: rgba(15,23,42,0.85) !important;
}

.card a{ color: rgba(147,197,253,0.98); }
html[data-theme="light"] .card a{ color: rgba(37,99,235,0.95); }

.panel{
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--surfaceBorder);
  border-radius: var(--radiusMd);
  padding: 14px;
  color: #0f172a;
  box-shadow: var(--shadowMd);
}
.panel a{ color: rgba(37,99,235,0.95); }

.muted{ color: var(--muted) !important; }
.panel .muted{ color: var(--surfaceMuted) !important; }

/* Page headers */
.pagehead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

.pagehead .title{
  margin: 0;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0.2px;
  display:flex;
  align-items:center;
  gap: 12px;
  line-height: 1.1;
}

.title-icon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(96,165,250,0.35);
  background: rgba(96,165,250,0.14);
  display:inline-block;
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 10px 26px rgba(0,0,0,0.20);
}
html[data-theme="light"] .title-icon{
  border: 1px solid rgba(37,99,235,0.25);
  background: rgba(37,99,235,0.10);
  box-shadow: 0 10px 26px rgba(2,6,23,0.08);
}
.title-icon::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(226,232,240,0.96);
  -webkit-mask: var(--icon) no-repeat center / 18px 18px;
  mask: var(--icon) no-repeat center / 18px 18px;
}
html[data-theme="light"] .title-icon::after{ background: rgba(15,23,42,0.85); }

.pagehead .head-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Buttons */
.btn, .btn-primary, .btn-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--text);
  font-weight: 900;
  text-decoration:none;
  cursor:pointer;
  line-height: 1;
}
.btn:hover, .btn-primary:hover, .btn-danger:hover{ background: var(--btnHoverBg); }
.btn.small{ padding: 8px 12px; font-size: 12px; font-weight: 850; }

.btn.primary, .btn-primary{
  background: var(--btnPrimaryBg);
  border-color: var(--btnPrimaryBorder);
  color: var(--btnPrimaryText);
}
.btn.primary:hover, .btn-primary:hover{ filter: brightness(1.02); }

.btn.danger, .btn-danger{
  background: var(--btnDangerBg);
  border-color: var(--btnDangerBorder);
  color: var(--btnDangerText);
}

.btn[disabled], .btn:disabled, .btn-primary:disabled, .btn-danger:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events:none;
}

/* Buttons on light panels */
.panel .btn, .panel .btn-primary, .panel .btn-danger{
  border-color: rgba(15,23,42,0.16);
  background: rgba(15,23,42,0.04);
  color: var(--surfaceText);
}
.panel .btn:hover, .panel .btn-primary:hover, .panel .btn-danger:hover{ background: rgba(15,23,42,0.06); }
.panel .btn.primary, .panel .btn-primary{
  background: rgba(37,99,235,0.10);
  border-color: rgba(37,99,235,0.30);
  color: var(--surfaceText);
}
.panel .btn.danger, .panel .btn-danger{
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.28);
  color: var(--surfaceText);
}

/* Small pill / badge */
.pill{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.20);
  color: var(--text);
  font-weight: 850;
  font-size: 12px;
}
.panel .pill{
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.12);
  color: var(--surfaceText);
}
.tablewrap .pill{
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.12);
  color: var(--surfaceText);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.18);
  color: var(--text);
  font-weight: 850;
}
.panel .badge{ background: rgba(15,23,42,0.04); color: var(--surfaceText); border-color: rgba(15,23,42,0.12); }
.tablewrap .badge{ background: rgba(15,23,42,0.04); color: var(--surfaceText); border-color: rgba(15,23,42,0.12); }
.badge.ok{ border-color: rgba(34,197,94,0.40); }
.badge.err{ border-color: rgba(239,68,68,0.40); }

/* Tables */
.tablewrap{
  margin-top: 12px;
  overflow-x:auto;
  overflow-y:visible;
  border-radius: var(--radiusMd);
  border: 1px solid var(--surfaceBorder);
  background: rgba(255,255,255,0.98);
  box-shadow: var(--shadowMd);
}

.table, table.tablewrap-table{
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td{
  padding: 11px 12px;
  text-align:left;
  font-size: 14px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
  color: var(--surfaceText);
  white-space: nowrap;
}

.table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248,250,252,0.94);
  backdrop-filter: blur(6px);
  font-weight: 900;
}

.table tbody tr:hover td{ background: rgba(15,23,42,0.03); }

/* Generic tables without class inside panels */
.panel table{ width:100%; border-collapse: collapse; }
.panel table th, .panel table td{ padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,0.10); text-align:left; color: var(--surfaceText); }
.panel table thead th{ background: rgba(248,250,252,0.94); position: sticky; top:0; z-index:1; }

/* Builder / wizard screens (Mapping Builder, API Builder) often use plain <table>
   markup inside a light panel. Give those tables a clean, readable 'section card' look
   (removes the heavy black blocks reported on Builder screens). */
.nav-builder-panel table:not(.table){
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(248,250,252,0.92) !important;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  overflow: hidden;
}
.nav-builder-panel table:not(.table) th,
.nav-builder-panel table:not(.table) td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
  background: transparent !important;
  color: #0f172a !important;
  text-align: left;
}
.nav-builder-panel table:not(.table) th{
  font-weight: 900;
  white-space: nowrap;
  background: rgba(15,23,42,0.04) !important;
}
.nav-builder-panel table:not(.table) tr:last-child th,
.nav-builder-panel table:not(.table) tr:last-child td{
  border-bottom: none;
}

/* Orkaflow transaction tables (Incoming/Outgoing/Process/Confirm). */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.table-scroll::-webkit-scrollbar{
  height: 10px;
}
.table-scroll::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,0.25);
  border-radius: 999px;
}
.table-scroll::-webkit-scrollbar-track{
  background: transparent;
}
table#orkaflowtable{
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  border-radius: var(--radiusMd);
  overflow: hidden;
  border: 1px solid var(--surfaceBorder);
  background: rgba(255,255,255,0.98);
  box-shadow: var(--shadowMd);
}
table#orkaflowtable th,
table#orkaflowtable td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(15,23,42,0.10);
  color: #0f172a;
  background: transparent;
  vertical-align: middle;
  font-size: 13px;
}
table#orkaflowtable thead th{
  background: rgba(248,250,252,0.96);
  font-weight: 900;
}

/* Compact filter controls in the Orkaflow table header (was oversized). */
table#orkaflowtable thead select,
table#orkaflowtable thead input,
table#orkaflowtable thead textarea{
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 13px;
}
table#orkaflowtable thead textarea{ min-height: 32px; }

/* Zebra striping for normal rows (status rows keep their own background). */
table#orkaflowtable tbody tr.row1:not(.orkaflowtrstatus0):not(.orkaflowtrstatus1):not(.orkaflowtrstatus2):not(.orkaflowtrstatus4):not(.orkaflowtrstatus5):not(.errortext) td{
  background: rgba(255,255,255,0.98);
}
table#orkaflowtable tbody tr.row2:not(.orkaflowtrstatus0):not(.orkaflowtrstatus1):not(.orkaflowtrstatus2):not(.orkaflowtrstatus4):not(.orkaflowtrstatus5):not(.errortext) td{
  background: rgba(15,23,42,0.02);
}
table#orkaflowtable tbody tr:hover td{ background: rgba(15,23,42,0.04); }

/* In light mode the subtle hover was hard to see; increase contrast without
   changing the table's overall "white surface" feel. */
html[data-theme="light"] table#orkaflowtable tbody tr:hover td{
  /* Make hover clearly visible in light mode */
  background: rgba(37,99,235,0.22) !important;
  color: #0f172a !important;
}

/* Ensure links/icons inside hovered rows remain readable in light mode. */
html[data-theme="light"] table#orkaflowtable tbody tr:hover td a,
html[data-theme="light"] table#orkaflowtable tbody tr:hover td a:visited{
  color: #0f172a !important;
}

/* Sort/header buttons inside Orkaflow tables */
table#orkaflowtable .orkaflowheader{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 900;
  color: #0f172a !important;
  cursor: pointer;
}

/* Light mode safeguard: some legacy CSS forces header buttons white */
html[data-theme="light"] table#orkaflowtable thead th,
html[data-theme="light"] table#orkaflowtable thead th  .orkaflowheader,
html[data-theme="light"] table#orkaflowtable thead th a{
  color: #0f172a !important;
}

/* Some legacy/third-party CSS applies a dark pill background on hover/focus
   (especially noticeable in dark mode). Keep headers looking like plain text
   links and ensure contrast is correct per theme. */
table#orkaflowtable .orkaflowheader:hover,
table#orkaflowtable .orkaflowheader:focus{
  background: transparent !important;
  text-decoration: underline;
}

/* Dark mode: table headers are still rendered on a light surface in Orkaflow,
   so keep the *default* sort header text dark for contrast. */
html[data-theme="dark"] table#orkaflowtable thead th,
body[data-theme="dark"] table#orkaflowtable thead th,
:root[data-theme="dark"] table#orkaflowtable thead th,
html.dark table#orkaflowtable thead th,
body.dark table#orkaflowtable thead th,
html[data-theme="dark"] table#orkaflowtable thead th a,
body[data-theme="dark"] table#orkaflowtable thead th a,
:root[data-theme="dark"] table#orkaflowtable thead th a,
html.dark table#orkaflowtable thead th a,
body.dark table#orkaflowtable thead th a,
html[data-theme="dark"] table#orkaflowtable thead th .orkaflowheader,
body[data-theme="dark"] table#orkaflowtable thead th .orkaflowheader,
:root[data-theme="dark"] table#orkaflowtable thead th .orkaflowheader,
html.dark table#orkaflowtable thead th .orkaflowheader,
body.dark table#orkaflowtable thead th .orkaflowheader{
  color: #0f172a !important;
}
html[data-theme="dark"] table#orkaflowtable .orkaflowheader:hover,
body[data-theme="dark"] table#orkaflowtable .orkaflowheader:hover,
:root[data-theme="dark"] table#orkaflowtable .orkaflowheader:hover,
html.dark table#orkaflowtable .orkaflowheader:hover,
body.dark table#orkaflowtable .orkaflowheader:hover,
html[data-theme="dark"] table#orkaflowtable .orkaflowheader:focus,
body[data-theme="dark"] table#orkaflowtable .orkaflowheader:focus,
:root[data-theme="dark"] table#orkaflowtable .orkaflowheader:focus,
html.dark table#orkaflowtable .orkaflowheader:focus,
body.dark table#orkaflowtable .orkaflowheader:focus{
  color: rgba(255,255,255,0.98) !important;
}

/* Inputs/selectors inside the filter header row */
table#orkaflowtable input[type="text"],
table#orkaflowtable input[type="search"],
table#orkaflowtable select,
table#orkaflowtable textarea{
  width: 100% !important;
  min-height: 34px;
  padding: 6px 8px !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(15,23,42,0.16) !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-size: 13px;
}
table#orkaflowtable textarea{ min-height: 32px; }

/* Form controls */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
select,
textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radiusSm);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  outline: none;
}

input:focus, select:focus, textarea:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(96,165,250,0.14);
}

.panel input[type="text"],
.panel input[type="number"],
.panel input[type="password"],
.panel input[type="email"],
.panel select,
.panel textarea{
  border-color: rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.98);
  color: var(--surfaceText);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

label{
  display:block;
  font-size: 13px;
  font-weight: 850;
  margin: 0 0 6px;
  color: var(--text);
}
.panel label{ color: rgba(15,23,42,0.78); }

/* Helper text / error list */
.errorlist{ margin: 8px 0 0; padding-left: 18px; color: rgba(239,68,68,0.95); }

.code, .codeblock{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 12px;
  border-radius: var(--radiusMd);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(2,6,23,0.30);
  color: rgba(226,232,240,0.95);
  padding: 12px;
  overflow-x:auto;
  overflow-y:visible;
}
.panel .code, .panel .codeblock{
  border-color: rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.04);
  color: var(--surfaceText);
}

/* Modal (used in account users) */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.62);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 20px;
  z-index: 2000;
}
.modal.open{ display:flex; }
.modal-card{
  width: min(640px, calc(100vw - 40px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radiusLg);
  padding: 18px;
  box-shadow: var(--shadowLg);
  color: var(--text);
}

/* Small button (account users) */
.smallbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--btnBorder);
  background: var(--btnBg);
  color: var(--text);
  font-weight: 850;
  cursor:pointer;
  line-height:1;
  text-decoration:none;
}
.smallbtn:hover{ background: var(--btnHoverBg); }
.smallbtn.danger{ border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.12); }
.panel .smallbtn{ border-color: rgba(15,23,42,0.16); background: rgba(15,23,42,0.04); color: var(--surfaceText); }
.panel .smallbtn.danger{ border-color: rgba(239,68,68,0.28); background: rgba(239,68,68,0.10); }

/* Small buttons inside white surfaces (eg tablewrap) should not inherit dark-theme text. */
.tablewrap .smallbtn{
  border-color: rgba(15,23,42,0.16);
  background: rgba(15,23,42,0.04);
  color: var(--surfaceText);
}
.tablewrap .smallbtn:hover{ background: rgba(15,23,42,0.06); }
.tablewrap .smallbtn.danger{ border-color: rgba(239,68,68,0.28); background: rgba(239,68,68,0.10); }

/* Make admin/navigator #content match card surface */
#content{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radiusLg) !important;
  box-shadow: var(--shadowLg) !important;
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------------------- */
/* Extra shared components (used across Navigator templates) */

/* Generic action rows (also used outside .pagehead) */
.head-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Form field wrappers + Django form helpers */
.fieldwrap{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.help{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.panel .help{
  color: var(--surfaceMuted);
}

.errorlist{
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

.field-error,
.err,
.errorlist,
.errorlist li{
  font-size: 12px;
  line-height: 1.35;
  color: rgba(248,113,113,0.95);
}
.panel .field-error,
.panel .err,
.panel .errorlist,
.panel .errorlist li{
  color: rgba(185,28,28,0.95);
}

/* Make Django's form.as_p output look tidy */
.panel form > p{
  margin: 0 0 14px;
}
.panel form > p:last-of-type{
  margin-bottom: 0;
}
.panel form > p > label{
  display: block;
  margin-bottom: 6px;
}

/* Soft callouts (e.g. webhook preview) */
.callout{
  border-radius: 18px;
  border: 1px solid rgba(96,165,250,0.32);
  background: rgba(96,165,250,0.12);
}

/* Checkbox row (used on route edit) */
.checkrow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
}
.panel .checkrow{
  border-color: rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
}
.checkrow label.check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 12px;
}
.checkrow input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: rgba(37,99,235,0.95);
}
.checkrow .check span{
  font-weight: 850;
  color: var(--surfaceText);
}

/* Compact icon button controls (view/edit/new/delete helpers) */
.control-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.mini-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.iconbtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.iconbtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}
.iconbtn svg{ width: 16px; height: 16px; }
.panel .iconbtn{
  border-color: rgba(15,23,42,0.16);
  background: rgba(15,23,42,0.04);
  color: rgba(15,23,42,0.88);
}
.panel .iconbtn:hover{
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.22);
}
.iconbtn.danger{ border-color: rgba(248,113,113,0.40); background: rgba(248,113,113,0.10); }
.panel .iconbtn.danger{ border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.10); }



/* Force readable code blocks inside light panels (override legacy inline !important rules) */
.panel .codeblock,
.panel .codeblock *{
  color: #0f172a;
}


/* Source editor (srcedit) readability */
body.orkaflow textarea[name="content"]{
  background: rgba(2,6,23,0.40) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px;
}
[data-theme="light"] body.orkaflow textarea[name="content"]{
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,0.16) !important;
}

/* ========================================================================== */
/* v9.2 – Navigator commercial polish + theme consistency fixes */

/* 1) Light theme should feel "light" (reduce grey cast) */
html[data-theme="light"]{
  --bg: #f8fafc; /* cleaner light backdrop */
  --btnBg: #ffffff;
  --btnBorder: rgba(15,23,42,0.16);
  --btnHoverBg: rgba(15,23,42,0.04);
}
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(37,99,235,0.08), transparent 60%),
    radial-gradient(900px 700px at 80% 22%, rgba(34,197,94,0.06), transparent 55%),
    linear-gradient(180deg, #ffffff, var(--bg)) !important;
}

/* 2) Use the same logo everywhere (full-colour mark). */
.brand-logo{
  height: 34px;
  width: auto;
  display: block;
}

/* Backwards-compat: if older templates still include both logo variants, keep only the coloured mark. */
.brand-logo.logo-dark{ display: none !important; }
.brand-logo.logo-light{ display: inline-block !important; }

/* 3) Stop Django admin's built-in theme toggle from appearing inside Navigator pages
      (prevents the "Switch to dark mode" button and double theme systems). */
body.orkaflow .theme-toggle:not(#themeToggle){
  display: none !important;
}

/* 4) Buttons: keep disabled states readable, and avoid "danger-red" disabled look. */
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity: 1;
  cursor: not-allowed;
  filter: none;
}
.btn[disabled]{
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(148,163,184,0.92);
}
html[data-theme="light"] .btn[disabled]{
  border-color: rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  color: rgba(15,23,42,0.55);
}
.btn.danger[disabled],
.btn.danger[aria-disabled="true"]{
  border-color: rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(148,163,184,0.92);
}
html[data-theme="light"] .btn.danger[disabled],
html[data-theme="light"] .btn.danger[aria-disabled="true"]{
  border-color: rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  color: rgba(15,23,42,0.55);
}

/* 5) Inputs in light theme: remove translucent grey fill. */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background: #ffffff;
  border-color: rgba(15,23,42,0.16);
  color: #0b1020;
}

/* 6) Builder screens: make Navigator/Orkaflow builders consistent and readable. */
.nav-builder{
  max-width: 1200px;
  margin: 0 auto;
}
.nav-builder-title{
  margin: 0 0 14px 0;
}
.nav-builder-panel{
  background: var(--surface) !important;
  color: var(--surfaceText) !important;
  border: 1px solid var(--surfaceBorder) !important;
  border-radius: var(--radiusLg) !important;
  padding: 18px !important;
  box-shadow: var(--shadowMd) !important;
}
.nav-builder-panel .help{ color: var(--surfaceMuted) !important; }
.nav-builder-panel a{ color: rgba(37,99,235,0.95); }

/* Mapping/Channel/EDI wizard inline styles use fixed #ddd/#fff colours.
   Override them so the builders look uniform across the portal. */
.mb-panel,
.mb-wizard,
.edi-fieldset{
  background: var(--surface) !important;
  color: var(--surfaceText) !important;
  border-color: var(--surfaceBorder) !important;
  border-radius: var(--radiusMd) !important;
}
.edi-sub{ color: var(--muted) !important; }

/* Draggable chips/fields: consistent neutrals */
.mb-field,
.mb-pill{
  border-color: rgba(15,23,42,0.18) !important;
  background: rgba(15,23,42,0.03) !important;
  color: var(--surfaceText) !important;
}
.mb-chip{
  background: rgba(37,99,235,0.10) !important;
  border-color: rgba(37,99,235,0.22) !important;
  color: var(--surfaceText) !important;
}
.mb-chip.mb-constchip,
.mb-const{
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.28) !important;
}

/* 7) Orkaflow transaction tables: reduce oversized header controls and avoid clipped dropdowns. */

table#orkaflowtable{
  overflow: visible; /* prevent dropdown/picker clipping */
}

table#orkaflowtable th,

table#orkaflowtable td{
  padding: 9px 10px;
}

table#orkaflowtable thead th{
  padding: 8px 10px;
}

table#orkaflowtable thead tr:nth-child(2) th{
  padding: 6px 10px;
  vertical-align: top;
  overflow: hidden; /* prevent filter controls spilling into neighbouring cells */
}

table#orkaflowtable thead select,

table#orkaflowtable thead input,

table#orkaflowtable thead textarea{
  min-height: 32px;
  padding: 5px 8px;
  border-radius: 12px;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Filter row layout: align field + submit (+ clear) WITHOUT breaking table
   layout (display:flex on <th> breaks header rendering in some browsers).
   Keep date-range column (pad0) as-is. */
table#orkaflowtable thead tr:nth-child(2) th:not(.pad0){
  white-space: nowrap;
}

/* Main filter widgets: reserve space for the submit button on the right. */
table#orkaflowtable thead tr:nth-child(2) th:not(.pad0) > input[type="text"],
table#orkaflowtable thead tr:nth-child(2) th:not(.pad0) > input[type="search"],
table#orkaflowtable thead tr:nth-child(2) th:not(.pad0) > select,
table#orkaflowtable thead tr:nth-child(2) th:not(.pad0) > textarea{
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 44px) !important; /* submit button width + gap */
}

/* When a filter is active, the cell may also show the clear button (bt-del). */
table#orkaflowtable thead tr:nth-child(2) th.filteredfield:not(.pad0) > input[type="text"],
table#orkaflowtable thead tr:nth-child(2) th.filteredfield:not(.pad0) > input[type="search"],
table#orkaflowtable thead tr:nth-child(2) th.filteredfield:not(.pad0) > select,
table#orkaflowtable thead tr:nth-child(2) th.filteredfield:not(.pad0) > textarea{
  width: calc(100% - 84px) !important; /* submit + clear + gaps */
}

/* Compact action buttons in the filter row. */
table#orkaflowtable thead tr:nth-child(2) th:not(.pad0) > input[type="submit"],
table#orkaflowtable thead tr:nth-child(2) th:not(.pad0) > button.bt-del{
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  margin-left: 6px;
}

table#orkaflowtable textarea,

table#orkaflowtable textarea#id_infilename,

table#orkaflowtable textarea#id_outfilename{
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1.15 !important;
}

/* 8) White-surface action buttons (e.g. inside tablewrap) should feel consistent */
.tablewrap .btn{
  border-color: rgba(15,23,42,0.14);
  background: rgba(15,23,42,0.04);
  color: var(--surfaceText);
}
.tablewrap .btn:hover{ background: rgba(15,23,42,0.06); }


/* 9) Light theme cards: remove grey sheen so whites stay crisp. */
html[data-theme="light"] .card::after{
  opacity: 0;
}

/* 10) Modal headers: theme-aware (fix dark-on-dark text in light mode). */
.modal-header{
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.modal-close{
  background: var(--btnBg);
  border: 1px solid var(--btnBorder);
  color: var(--text);
}


/* -------------------------------------------------------------------------- */
/* v9.3 – Fixes for readability + compact Transactions controls */

/* Modal header must stay readable in BOTH themes (it is always dark). */
#orcaModalHeader .title,
#orcaModalHeader a,
#orcaModalHeader button{
  color: rgba(255,255,255,0.92) !important;
}
#orcaModalHeader a,
#orcaModalHeader button{
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(18,26,43,0.55) !important;
}
#orcaModalHeader a:hover,
#orcaModalHeader button:hover{
  border-color: rgba(96,165,250,0.55) !important;
}
#orcaModalPanel{ color-scheme: dark; }

/* Consistent native control accent across the site */
input[type="checkbox"],
input[type="radio"]{ accent-color: var(--accent); }

/* Compact selection/refresh controls in Transactions (Incoming/Outgoing/Confirm/etc.) */
.selectionbar{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}
.selectionbar-group{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.orkaflow form#viewform .selectionbar select{
  width: 320px !important;
  max-width: min(520px, 60vw) !important;
  min-width: 220px !important;
}
body.orkaflow form#viewform .selectionbar select[name="refresh"]{
  width: 110px !important;
  min-width: 90px !important;
}
body.orkaflow form#viewform .selectionbar select,
body.orkaflow form#viewform .selectionbar input[type="text"],
body.orkaflow form#viewform .selectionbar input[type="search"]{
  padding: 8px 10px !important;
  min-height: 36px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}
body.orkaflow form#viewform .selectionbar .button,
body.orkaflow form#viewform .selectionbar button{
  padding: 8px 10px !important;
  min-height: 36px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}
body.orkaflow form#viewform .selectionbar .now{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/*
  Navigator supports ONLY light/dark. Some admin-derived views can still render
  Django's built-in theme picker (auto/high-contrast, etc.) depending on the
  underlying template. Hide any non-Navigator theme controls so the UI stays
  consistent across Home/Run/Configuration/Transactions/Builders.
*/
.theme-toggle:not(#themeToggle){
  display: none !important;
}
.color-theme-toggle,
[data-theme-toggle],
#toggle-theme,
#theme-toggle,
#theme-toggle-form{
  display: none !important;
}

/* ===================================================================== */
/* Extra Builder / Transactions theme fixes (v9.3 themefix6)              */
/* ===================================================================== */

/* Builder forms (Mapping Builder + API Wizard) often render Django form tables
   via form.as_table without the 'builder-form-table' class.
   In dark mode the underlying admin theme makes these almost-black, with
   low-contrast label text. Force a clean light surface so the screens are
   consistent with the rest of Navigator. */
/* IMPORTANT: base.html includes an inline style that targets
   `#content form table:not(#orkaflowtable)` and forces dark text. That selector
   (with an ID) can beat more general rules even when we use !important.
   These selectors are intentionally MORE specific so our builder form tables
   remain readable in both themes. */

/* NOTE: orkaflow/base.html injects an inline rule that targets
   `#content form table:not(#orkaflowtable)` and applies !important styles.
   Because `:not(#orkaflowtable)` contributes an extra ID to specificity,
   we include BOTH `#content-start` and `#content` so these rules always win. */

#content-start #content .nav-builder-panel form > table,
#content-start #content .nav-builder-panel form > table.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-radius: var(--radiusMd) !important;
  overflow: hidden;
  box-shadow: var(--shadowSm);
}

#content-start #content .nav-builder-panel form > table th,
#content-start #content .nav-builder-panel form > table td,
#content-start #content .nav-builder-panel form > table.table th,
#content-start #content .nav-builder-panel form > table.table td{
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(15,23,42,0.10) !important;
  color: #0f172a !important;
  background: transparent !important;
  vertical-align: top;
}

#content-start #content .nav-builder-panel form > table tr:last-child th,
#content-start #content .nav-builder-panel form > table tr:last-child td,
#content-start #content .nav-builder-panel form > table.table tr:last-child th,
#content-start #content .nav-builder-panel form > table.table tr:last-child td{ border-bottom: none !important; }

#content-start #content .nav-builder-panel form > table th,
#content-start #content .nav-builder-panel form > table.table th{
  background: rgba(15,23,42,0.04) !important;
  font-weight: 800;
  width: 240px;
}

/* Dark theme: ensure the *panel* stays light and readable even if any admin
   theme tries to restyle it. */
html[data-theme="dark"] #content-start #content .nav-builder-panel form > table,
html[data-theme="dark"] #content-start #content .nav-builder-panel form > table.table{
  background: rgba(255,255,255,0.96) !important;
}

/* Mapping Builder + API Wizard: in dark mode, keep mb-panels LIGHT even when
   global vars (e.g. --body-bg / --darkened-bg) are very dark.
   These panels are intended as light "cards" for readability. */
html[data-theme="dark"] #content-start #content .nav-builder-panel{
  --surface: rgba(255,255,255,0.96);
  --surfaceText: #0f172a;
  --surfaceMuted: rgba(51,65,85,0.78);
  --surfaceBorder: rgba(15,23,42,0.12);

  /* Django admin dark_mode.css defines global CSS variables such as --body-bg
     and --darkened-bg (on html[data-theme="dark"]). Admin base styles then
     use those variables to paint TABLE backgrounds.

     Mapping Builder / API Wizard render their top forms as plain <table>
     elements (no .mb-panel wrapper), so the admin table styling can bleed
     through and create the "black boxes" with dark text.

     Solution: locally override the admin variables within the builder panel
     subtree, so any admin table rules resolve to a LIGHT surface here, while
     leaving the rest of the page in Navigator dark mode. */
  --body-bg: rgba(255,255,255,0.96);
  --darkened-bg: rgba(255,255,255,0.96);
  --body-fg: #0f172a;
  --body-quiet-color: rgba(15,23,42,0.70);
  --body-medium-color: rgba(15,23,42,0.82);
  --border-color: rgba(15,23,42,0.12);
  --hairline-color: rgba(15,23,42,0.12);
  --link-fg: #2563eb;
  --primary: #2563eb;
  --primary-fg: #ffffff;
}

html[data-theme="dark"] #content-start #content .nav-builder-panel .mb-panel,
html[data-theme="dark"] #content-start #content .nav-builder-panel .mb-wizard,
html[data-theme="dark"] #content-start #content .nav-builder-panel .mb-maplist,
html[data-theme="dark"] #content-start #content .nav-builder-panel .mb-constbar{
  background: rgba(255,255,255,0.96) !important;
  border-color: rgba(15,23,42,0.12) !important;
}

html[data-theme="dark"] #content-start #content .nav-builder-panel .mb-panel *,
html[data-theme="dark"] #content-start #content .nav-builder-panel .mb-wizard *,
html[data-theme="dark"] #content-start #content .nav-builder-panel .mb-maplist *,
html[data-theme="dark"] #content-start #content .nav-builder-panel .mb-constbar *{
  color: #0f172a !important;
}

/* Channel Builder title: OrcaPulse admin variables can make this white-on-white
   in light mode. */
html[data-theme="light"] #content > h1,
html[data-theme="light"] #content h1.ico-translate{
  color: #0f172a !important;
  text-shadow: none !important;
}

/* EDI Builder / Live test preview tables: remove sticky headers that can float
   over other controls and ensure strong contrast in both themes. */
.edi-previewtablewrap{
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(15,23,42,0.12) !important;
  position: relative;
  overflow: auto !important;
  /* Prevent wide CSV tables from expanding the page; keep them scrollable
     inside the preview panel. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.edi-previewtable{
  background: transparent !important;
  /* Allow the table to be wider than the panel so it scrolls inside the wrap,
     but never force the page itself wider. */
  width: max-content;
  min-width: 100%;
}
.edi-previewtable th{
  position: static !important;
  background: rgba(248,250,252,0.98) !important;
  color: #0f172a !important;
}
.edi-previewtable td{ color: #0f172a !important; }

/* Transactions table: remove harsh dark zebra lines in dark mode and keep
   the table readable (Navigator uses a light surface table even in dark mode). */
html[data-theme="dark"] table#orkaflowtable tbody td{
  background: rgba(255,255,255,0.98) !important;
  color: #0f172a !important;
}
html[data-theme="dark"] table#orkaflowtable tbody tr:nth-child(even) td{
  background: rgba(248,250,252,0.98) !important;
}
html[data-theme="dark"] table#orkaflowtable tbody tr:hover td{
  background: rgba(37,99,235,0.06) !important;
}
html[data-theme="dark"] table#orkaflowtable thead th{
  background: rgba(248,250,252,0.94) !important;
  color: #0f172a !important;
}

/* -------------------------------------------------------------------------
   Transactions: row action dropdown + paginator controls
   ------------------------------------------------------------------------- */

/* Row actions dropdown (⋯ menu) should open DOWN (not sideways) and be readable
   in both themes. */
form#viewform .dropdown-actions{ position: relative; }
form#viewform .dropdown-actions ul{
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  border-radius: 12px !important;
  min-width: 220px;
  padding: 6px 0 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18) !important;
  visibility: hidden; /* keep original dropdown behavior */
}
form#viewform .dropdown-actions.open ul{ visibility: visible !important; z-index: 9999; }

/* Ensure menu items stay readable even if an inline rule forces dark text in #content */
html[data-theme="dark"] form#viewform .dropdown-actions ul{
  background: rgba(17,24,39,0.98) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
html[data-theme="dark"] form#viewform .dropdown-actions ul a,
html[data-theme="dark"] form#viewform .dropdown-actions ul button{
  color: rgba(255,255,255,0.92) !important;
}
html[data-theme="dark"] form#viewform .dropdown-actions ul li:hover > a,
html[data-theme="dark"] form#viewform .dropdown-actions ul li:hover > button{
  background: rgba(37,99,235,0.22) !important;
  color: rgba(255,255,255,0.98) !important;
}

html[data-theme="light"] form#viewform .dropdown-actions ul{
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(15,23,42,0.16) !important;
}
html[data-theme="light"] form#viewform .dropdown-actions ul a,
html[data-theme="light"] form#viewform .dropdown-actions ul button{
  color: #0f172a !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}
html[data-theme="light"] form#viewform .dropdown-actions ul a:visited{
  color: #0f172a !important;
  opacity: 1 !important;
}
/* If the menu is opened while the row is in a special status/hover state,
   make sure menu text still renders (some legacy rules force very light text). */
html[data-theme="light"] form#viewform table#orkaflowtable tr:hover .dropdown-actions ul,
html[data-theme="light"] form#viewform table#orkaflowtable tr:hover .dropdown-actions ul *{
  color: #0f172a !important;
  opacity: 1 !important;
}
html[data-theme="light"] form#viewform .dropdown-actions ul li:hover > a,
html[data-theme="light"] form#viewform .dropdown-actions ul li:hover > button{
  background: rgba(37,99,235,0.10) !important;
}

/* Paginator (limit / page select / actions): keep controls readable in both themes */
.paginatop{ background: transparent !important; }
html[data-theme="dark"] .paginatop,
html[data-theme="dark"] .paginatop label,
html[data-theme="dark"] .paginatop span{ color: rgba(255,255,255,0.92) !important; }

html[data-theme="dark"] .paginatop select,
html[data-theme="dark"] .paginatop input[type="text"],
html[data-theme="dark"] .paginatop input[type="submit"],
html[data-theme="dark"] .paginatop button{
  background: rgba(17,24,39,0.92) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
html[data-theme="dark"] .paginatop select option{
  background: rgba(17,24,39,1) !important;
  color: rgba(255,255,255,0.92) !important;
}


/* -------------------------------------------------------------------------
   Transactions: row action dropdown + paginator controls
   ------------------------------------------------------------------------- */

/* Row actions dropdown (⋯ menu) should open DOWN (not sideways) and be readable
   in both themes.
   (Base orkaflow.css positions .dropdown ul to the right: left:100%; top:0.) */
form#viewform .dropdown-actions{ position: relative; float: none; }
form#viewform .dropdown-actions ul{
  /* override base positioning */
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  visibility: hidden; /* base uses visibility */
  z-index: 650;
  border-radius: 12px !important;
  padding: 6px 0 !important;
  min-width: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
}
form#viewform .dropdown-actions.open ul{ visibility: visible !important; }

/* Ensure dropdown items are readable even if #content * { color: ... !important }
   exists elsewhere. */
form#viewform .dropdown-actions ul a,
form#viewform .dropdown-actions ul button{
  color: #0f172a !important;
}
html[data-theme="dark"] form#viewform .dropdown-actions ul a,
html[data-theme="dark"] form#viewform .dropdown-actions ul button{
  color: #e5e7eb !important;
}

/* Menu surface */
form#viewform .dropdown-actions ul{
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(15,23,42,0.14) !important;
}
html[data-theme="dark"] form#viewform .dropdown-actions ul{
  background: rgba(17,24,39,0.98) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

/* Hover/active styling */
form#viewform .dropdown-actions ul li:hover > a,
form#viewform .dropdown-actions ul li:hover > button{
  background: rgba(37,99,235,0.10) !important;
  color: #0f172a !important;
}
html[data-theme="dark"] form#viewform .dropdown-actions ul li:hover > a,
html[data-theme="dark"] form#viewform .dropdown-actions ul li:hover > button{
  background: rgba(37,99,235,0.22) !important;
  color: #ffffff !important;
}

/* Paginator / "rows" / limit select: make selects readable in dark mode. */
.paginatop{ background: transparent !important; color: inherit; }
.paginatop select,
.paginatop input[type="text"]{
  border-radius: 10px !important;
  border: 1px solid rgba(15,23,42,0.16) !important;
  padding: 6px 10px !important;
  background: rgba(255,255,255,0.98) !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .paginatop select,
html[data-theme="dark"] .paginatop input[type="text"]{
  background: rgba(17,24,39,0.98) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #e5e7eb !important;
}

/* Some browsers style <option> separately; set a safe default. */
html[data-theme="dark"] .paginatop option{
  background: #111827 !important;
  color: #e5e7eb !important;
}

/* -------------------------------------------------------------------------
   Transactions: row action dropdown + paginator controls
   ------------------------------------------------------------------------- */

/* Row actions dropdown (⋯ menu) should open DOWN (not sideways) and be readable
   in both themes.
   (Base orkaflow.css positions .dropdown ul to the right: left:100%; top:0.) */
form#viewform .dropdown-actions ul{
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  visibility: hidden; /* controlled by .open */
  display: block;
  min-width: 220px;
  padding: 8px 0;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
  z-index: 999;
}
form#viewform .dropdown-actions.open ul{ visibility: visible !important; }

/* Row action dropdown: keep icon pseudo-elements INSIDE the menu box.
   Orkaflow base CSS absolutely positions `:before` with a negative margin,
   which looks like icons are "hanging" outside once we switch to a rounded menu. */
form#viewform .dropdown-actions ul a,
form#viewform .dropdown-actions ul button{
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 14px !important;
  padding-left: 14px !important; /* override base 2.4em */
  box-sizing: border-box;
}
form#viewform .dropdown-actions ul a:before,
form#viewform .dropdown-actions ul button:before{
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
  width: 1.4em;
  display: inline-flex;
  justify-content: center;
}

/* Light theme */
html[data-theme="light"] form#viewform .dropdown-actions ul{
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(15,23,42,0.16) !important;
}
html[data-theme="light"] form#viewform .dropdown-actions ul a,
html[data-theme="light"] form#viewform .dropdown-actions ul button{
  color: #0f172a !important;
}
html[data-theme="light"] form#viewform .dropdown-actions ul li:hover > a,
html[data-theme="light"] form#viewform .dropdown-actions ul li:hover > button{
  background: rgba(37,99,235,0.08) !important;
  color: #0f172a !important;
}

/* Dark theme: keep the menu dark, but force readable (light) text.
   This overrides any inline '#content * { color: ... !important; }' rules. */
html[data-theme="dark"] form#viewform .dropdown-actions ul{
  background: rgba(17,24,39,0.98) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
html[data-theme="dark"] form#viewform .dropdown-actions ul a,
html[data-theme="dark"] form#viewform .dropdown-actions ul button{
  color: rgba(243,244,246,0.98) !important;
}
html[data-theme="dark"] form#viewform .dropdown-actions ul li:hover > a,
html[data-theme="dark"] form#viewform .dropdown-actions ul li:hover > button{
  background: rgba(59,130,246,0.20) !important;
  color: rgba(243,244,246,0.98) !important;
}

/* Paginator / limit (rows per page) controls */
.paginatop{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(15,23,42,0.10);
}
html[data-theme="dark"] .paginatop{
  background: rgba(17,24,39,0.62);
  border-color: rgba(255,255,255,0.10);
  color: rgba(243,244,246,0.96);
}

.paginatop select,
.paginatop input[type="text"]{
  height: 34px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,0.14);
  background: rgba(255,255,255,0.98);
  color: #0f172a;
}
html[data-theme="dark"] .paginatop select,
html[data-theme="dark"] .paginatop input[type="text"]{
  border-color: rgba(255,255,255,0.12);
  background: rgba(17,24,39,0.92);
  color: rgba(243,244,246,0.98);
}

/* Rows/Action dropdowns inside the paginator */
.paginatop select option{ color: inherit; }

/* -------------------------------------------------------------------------
   Footer: keep copyright bar pinned to bottom of the viewport
   ------------------------------------------------------------------------- */

.site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 10px 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(226,232,240,0.72);
  background: rgba(2,6,23,0.55);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(148,163,184,0.18);
}

/* Avoid content being hidden behind the fixed footer */
.wrap,
#content-start{
  padding-bottom: 64px;
}

html[data-theme="light"] .site-footer{
  color: rgba(15,23,42,0.65);
  background: rgba(255,255,255,0.70);
  border-top-color: rgba(15,23,42,0.10);
}


/* ------------------------------------------------------------------
   Dropdown actions (transactions) – Light mode hover text fix
   Orkaflow base CSS sets `.dropdown ul li:hover > a` to `color: var(--button-fg) !important;`
   which can become white and make the menu unreadable on our light dropdown surface.
   Keep the actions menu readable regardless of row/element hover state.
-------------------------------------------------------------------*/
html[data-theme="light"] .dropdown-actions:hover,
html[data-theme="light"] .dropdown-actions:hover > a,
html[data-theme="light"] .dropdown-actions:hover > span,
html[data-theme="light"] .dropdown-actions ul,
html[data-theme="light"] .dropdown-actions ul *{
  color: #0f172a !important;
}
html[data-theme="light"] .dropdown-actions ul{
  background: #ffffff !important;
}
html[data-theme="light"] .dropdown-actions ul li:hover,
html[data-theme="light"] .dropdown-actions ul li:hover > a,
html[data-theme="light"] .dropdown-actions ul li:hover > button{
  color: #0f172a !important;
  background: rgba(37, 99, 235, 0.10) !important;
}

/* --------------------------------------------------------------------------
   Sorted column "clear sorting" button (ico-del-ha)

   Orkaflow inserts an extra empty <button class="orkaflowheader ico-del-ha"> in
   the sorted column header. orkaflow-icons.css only draws the delete icon on
   hover and positions it absolutely, which can create a "blank" hover target
   and can visually obscure nearby header text.

   Keep the original header look, but make the clear-sort button:
   - a small, consistent icon button (always visible)
   - non-overlapping (icon is in-flow, not absolutely positioned)
-------------------------------------------------------------------------- */

/* Size + layout for the injected clear-sort button */
table#orkaflowtable thead th.sortedby > button.ico-del-ha.orkaflowheader{
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin-right: 6px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Draw the delete icon always, and ensure it stays inside the button */
table#orkaflowtable thead th.sortedby > button.ico-del-ha.orkaflowheader::after{
  content: '' !important;
  background-image: var(--inline-delete) !important;
  background-repeat: no-repeat !important;
  background-size: 18px 18px !important;
  background-position: center !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  position: static !important;   /* override orkaflow-icons.css absolute */
  margin: 0 !important;
  padding: 0 !important;         /* override orkaflow-icons.css padding */
  opacity: 0.85;
}

/* Keep hover behaviour subtle (no "mystery" black box) */
table#orkaflowtable thead th.sortedby > button.ico-del-ha.orkaflowheader:hover{
  background: rgba(15,23,42,0.08) !important;
}

table#orkaflowtable thead th.sortedby > button.ico-del-ha.orkaflowheader:hover::after{
  opacity: 1;
}