/* CivilXL controls — nav/cx-controls.css
 * One compact, consistent set of buttons and form controls for every module pane.
 * Loaded after the module styles' own rules would normally win, so it's scoped to
 * the two content panes (and dialogs) with an id selector. EasyCAD keeps its own
 * dark toolbar, the sidebar keeps its nav buttons, and segmented groups keep their
 * joined edges.
 *
 * Sizes: 30px default, 26px small, 34px large. Radius 7px. Text 12.5px / 600.
 * Primary = the brand colour (--btn), everything else is quiet until hovered. */

/* Declared on body too: the theme sets --panel/--text on body, and a var()
   inside a custom property resolves where it is declared, so on :root alone
   the dark theme got light buttons. */
:root, body {
  --cxc-h: 30px; --cxc-h-sm: 26px; --cxc-h-lg: 34px;
  --cxc-r: 7px; --cxc-fs: 12.5px;
  --cxc-bg: var(--panel, #fff); --cxc-bg-hover: var(--panel2, #f3f5fa);
  --cxc-line: color-mix(in srgb, var(--line, #d8dce4) 100%, transparent);
  --cxc-line-strong: color-mix(in srgb, var(--text, #0f172a) 22%, var(--line, #d8dce4));
  --cxc-ink: var(--text, #0f172a); --cxc-muted: var(--muted, #64748b);
  --cxc-danger: #b4332a; --cxc-danger-soft: rgba(180, 51, 42, .08);
  --cxc-focus: color-mix(in srgb, var(--btn, #4a6b3a) 45%, transparent);
}
body[data-theme="dark"] { --cxc-line-strong: rgba(255,255,255,.2); --cxc-danger: #ef7b72; --cxc-danger-soft: rgba(239,123,114,.1); }

/* ── Buttons ────────────────────────────────────────────────────────── */
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(
  .btn, .cx-btn, .cx-btn-icon, .cx-btn-new, .btn-new, .btnrma, .lgx-btn, .jb-btn, .cxld-btn, .uxt-btn, .log-btn,
  .rd-btn, .cf-btn, .cxlh-btn, .bulk-btn, .btn-light, .btn-save, .btn-cancel, .btn-export, .btn-add, .fl-export-btn, .update-action-btn
):not(:where(.ec-root *, .controlStack *, .btn-cxl, .cxn-askbtn, .hv-btn)) {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--cxc-h); min-height: 0; padding: 0 11px;
  border: 1px solid var(--cxc-line); border-bottom-color: var(--cxc-line-strong);
  border-radius: var(--cxc-r);
  background: var(--cxc-bg); color: var(--cxc-ink);
  font: 600 var(--cxc-fs)/1 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .03);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
  transform: none;
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(
  .btn, .cx-btn, .cx-btn-icon, .cx-btn-new, .btn-new, .btnrma, .lgx-btn, .jb-btn, .cxld-btn, .uxt-btn, .log-btn,
  .rd-btn, .cf-btn, .cxlh-btn, .bulk-btn, .btn-light, .btn-save, .btn-cancel, .btn-export, .btn-add, .fl-export-btn, .update-action-btn
):not(:where(.ec-root *, .controlStack *, .btn-cxl, .cxn-askbtn, .hv-btn)):hover:not(:disabled) {
  background: var(--cxc-bg-hover); border-color: var(--cxc-line-strong);
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.btn, .cx-btn, .lgx-btn, .jb-btn, .btnrma, .rd-btn, .cf-btn, .uxt-btn, .log-btn, .bulk-btn, .cx-btn-icon, .cxld-btn, .cxlh-btn)
  :not(:where(.ec-root *, .controlStack *)):active:not(:disabled) { box-shadow: inset 0 1px 2px rgba(16, 24, 40, .12); }
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.btn, .cx-btn, .lgx-btn, .jb-btn, .btnrma, .rd-btn, .cf-btn, .uxt-btn, .log-btn, .bulk-btn, .cx-btn-icon, .cx-btn-new, .btn-new, .cxld-btn, .cxlh-btn):disabled {
  opacity: .5; cursor: not-allowed;
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(button, a, [role="button"]):focus-visible { outline: 2px solid var(--cxc-focus); outline-offset: 2px; }

/* Toggled on (a picked tool, the chosen half of a pair) */
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.cf-btn, .rd-btn, .cx-btn, .lgx-btn, .jb-btn.secondary, .uxt-btn, .log-btn, .bulk-btn):is(.active, [aria-pressed="true"]):not(.primary):not(:where(.ec-root *, .controlStack *)),
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.cf-btn, .rd-btn, .cx-btn, .lgx-btn, .jb-btn.secondary, .uxt-btn, .log-btn, .bulk-btn):is(.active, [aria-pressed="true"]):not(.primary):not(:where(.ec-root *, .controlStack *)):hover:not(:disabled) {
  background: color-mix(in srgb, var(--btn, #4a6b3a) 13%, var(--cxc-bg)); color: color-mix(in srgb, var(--btn, #4a6b3a) 85%, var(--cxc-ink));
  border-color: color-mix(in srgb, var(--btn, #4a6b3a) 55%, var(--cxc-line));
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06);
}
body[data-theme="dark"] :is(#paneB, #paneC) :is(.cf-btn, .rd-btn, .cx-btn, .lgx-btn, .uxt-btn, .log-btn, .bulk-btn):is(.active, [aria-pressed="true"]):not(.primary) { color: color-mix(in srgb, var(--btn, #c8a96a) 80%, #fff); }

/* Primary */
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(
  .btn.primary, .btn-primary, .cx-btn.primary, .cx-btn-new, .btn-new, .btn-save, .btnrma-primary, .lgx-btn-primary, .jb-btn:not(.secondary):not(.jb-btn-danger),
  .rd-btn.primary, .cf-btn.primary, .uxt-btn.pri, .cxld-btn.primary, .cxlh-btn.primary
):not(:where(.ec-root *, .controlStack *)) {
  background: var(--btn, #4a6b3a); color: var(--btnText, #fff) !important;
  border-color: color-mix(in srgb, var(--btn, #4a6b3a) 82%, #000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 1px rgba(16, 24, 40, .1);
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(
  .btn.primary, .btn-primary, .cx-btn.primary, .cx-btn-new, .btn-new, .btn-save, .btnrma-primary, .lgx-btn-primary, .jb-btn:not(.secondary):not(.jb-btn-danger),
  .rd-btn.primary, .cf-btn.primary, .uxt-btn.pri, .cxld-btn.primary, .cxlh-btn.primary
):not(:where(.ec-root *, .controlStack *)):hover:not(:disabled) {
  background: var(--btnHover, #3e5a30); border-color: color-mix(in srgb, var(--btnHover, #3e5a30) 80%, #000);
}

/* Danger: quiet until you mean it */
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(
  .btn.danger, .cx-btn.danger, .btnrma-danger, .lgx-btn-danger, .jb-btn-danger, .log-btn.danger, .btn-outline-danger
):not(:where(.ec-root *, .controlStack *)) {
  background: var(--cxc-bg); color: var(--cxc-danger) !important; border-color: color-mix(in srgb, var(--cxc-danger) 35%, var(--cxc-line));
  box-shadow: none;
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(
  .btn.danger, .cx-btn.danger, .btnrma-danger, .lgx-btn-danger, .jb-btn-danger, .log-btn.danger, .btn-outline-danger
):not(:where(.ec-root *, .controlStack *)):hover:not(:disabled) {
  background: var(--cxc-danger-soft); border-color: var(--cxc-danger);
}

/* Ghost / subtle */
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.btn.ghost, .bulk-btn.ghost, .cx-btn.ghost):not(:where(.ec-root *)) {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--cxc-muted);
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.btn.ghost, .bulk-btn.ghost, .cx-btn.ghost):not(:where(.ec-root *)):hover:not(:disabled) {
  background: var(--cxc-bg-hover); color: var(--cxc-ink); border-color: transparent;
}

/* Sizes */
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.btn.sm, .btn-sm, .btn-xs, .cx-btn.sm, .lgx-btn-sm, .btnrma-sm, .jb-btn.sm, .bulk-btn, .log-btn.sm):not(:where(.ec-root *, .controlStack *)) {
  height: var(--cxc-h-sm); padding: 0 9px; font-size: 12px; gap: 5px;
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) .btn-xs:not(:where(.ec-root *)) { height: 22px; padding: 0 7px; font-size: 11.5px; }
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.btn.lg, .btn-lg):not(:where(.ec-root *)) { height: var(--cxc-h-lg); padding: 0 14px; font-size: 13px; }
/* Icon-only */
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.btn.icon, .btn-icon, .jb-icon-btn, .lgx-btn-icon):not(:where(.ec-root *, .controlStack *)) {
  box-sizing: border-box; width: var(--cxc-h); height: var(--cxc-h); padding: 0; justify-content: center; border-radius: var(--cxc-r);
}
:is(#paneB, #paneC) :is(.btn, .cx-btn, .lgx-btn, .jb-btn, .btnrma, .cx-btn-icon) .cxi { width: 14px; height: 14px; }
/* Buttons that stretch (sidebar-style "Save" blocks) keep their width */
:is(#paneB, #paneC) :is(.btn, .cx-btn, .btnrma)[style*="width:100%"], :is(#paneB, #paneC) :is(.btn, .cx-btn, .btnrma)[style*="width: 100%"] { width: 100%; }

/* ── Form controls (classed ones; table-cell inputs keep their own size) ── */
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(
  .cx-input, .cx-select, .cx-search, .form-input, .cxl-input, .cxl-select, .cf-input, .cf-select, .meta-select, .meta-control,
  .search-input, .filter-input, .lgx-input, .lgx-select
):not(textarea):not(:where(.ec-root *)) {
  box-sizing: border-box; height: var(--cxc-h); min-height: 0; padding: 0 10px;
  border: 1px solid var(--cxc-line); border-radius: var(--cxc-r);
  background: var(--cxc-bg); color: var(--cxc-ink);
  font: 500 13px/1.2 Inter, system-ui, sans-serif;
  transition: border-color .12s ease, box-shadow .12s ease;
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(textarea.cx-input, .cx-textarea, textarea.form-input, textarea.cxl-input):not(:where(.ec-root *)) {
  box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--cxc-line); border-radius: var(--cxc-r);
  background: var(--cxc-bg); color: var(--cxc-ink); font: 500 13px/1.45 Inter, system-ui, sans-serif; min-height: 64px;
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) :is(.cx-input, .cx-select, .cx-search, .form-input, .cxl-input, .cxl-select, .cf-input, .cf-select, .meta-select, .meta-control, .search-input, .filter-input, .cx-textarea):not(:where(.ec-root *)):focus {
  outline: none; border-color: var(--btn, #4a6b3a); box-shadow: 0 0 0 3px var(--cxc-focus);
}
:is(#paneB, #paneC, .cx-dialog, .cxm-sheet) select:is(.cx-input, .cx-select, .form-input, .cxl-select, .cf-select, .meta-select):not(:where(.ec-root *)) {
  appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
:is(#paneB, #paneC) input[type="file"].cx-input { height: auto; padding: 5px; font-size: 12px; }
:is(#paneB, #paneC) input[type="file"]::file-selector-button {
  height: 24px; margin-right: 8px; padding: 0 10px; border: 1px solid var(--cxc-line); border-radius: 6px;
  background: var(--cxc-bg-hover); color: var(--cxc-ink); font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer;
}

/* ── Chips, tabs, segmented controls ─────────────────────────────────── */
:is(#paneB, #paneC) :is(.chip, .uxd-chip, .tag-chip) {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px;
  font: 600 11.5px/1 Inter, system-ui, sans-serif;
}
:is(#paneB, #paneC) :is(.seg, .sb-seg, .lgx-range-segmented, .uxt-tabs, .tm-tabs, .sched-tabs) {
  display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; border-radius: 9px;
  background: var(--panel2, #f3f5fa); border: 1px solid var(--cxc-line);
}
:is(#paneB, #paneC) :is(.seg, .sb-seg, .lgx-range-segmented, .uxt-tabs, .tm-tabs, .sched-tabs) > :is(button, a) {
  height: 24px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--cxc-muted);
  font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer; box-shadow: none;
}
:is(#paneB, #paneC) :is(.seg, .sb-seg, .lgx-range-segmented, .uxt-tabs, .tm-tabs, .sched-tabs) > :is(button, a):is(.active, .on, [aria-selected="true"], [aria-pressed="true"]) {
  background: var(--panel, #fff); color: var(--cxc-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

/* Touch screens: same look, bigger targets */
@media (pointer: coarse) {
  :root { --cxc-h: 38px; --cxc-h-sm: 34px; --cxc-h-lg: 42px; --cxc-fs: 13.5px; }
}

/* dashboard.css styles every <input> as a full-width text box; checkboxes, radios
   and sliders shouldn't be. */
input:is([type="checkbox"], [type="radio"]) { width: auto; height: auto; padding: 0; border-radius: 0; background: none; accent-color: var(--btn, #4a6b3a); }
input[type="checkbox"] { border-radius: 3px; }
input[type="range"] { border: 0; padding: 0; background: transparent; border-radius: 0; }
input[type="color"] { padding: 2px; width: 36px; height: 28px; }

/* The base text box everywhere in the panes: same height and corners as the buttons.
   Zero specificity on purpose, so any module's own input styling still wins. */
:where(#paneB, #paneC) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]), select) {
  border-radius: var(--cxc-r); padding: 6px 10px; font-size: 13px; line-height: 1.3;
}
:where(#paneB, #paneC) :where(textarea) { border-radius: 9px; padding: 8px 10px; font-size: 13px; }
:where(#paneB, #paneC) :where(input, select, textarea):focus { border-color: var(--btn, #4a6b3a); box-shadow: 0 0 0 3px var(--cxc-focus); }
#paEditorScope input.money-in { height: 28px; font-size: 13px; font-variant-numeric: tabular-nums; border-radius: 6px; }