/* controls.css: one size system for every input, select and button.
   Loaded last so page stylesheets cannot drift from it. Two sizes only:
   regular (forms, toolbars) and compact (inside tables). A control and the
   button next to it always share a height. */

:root {
  --ctl-h: 38px;
  --ctl-h-sm: 32px;
  --ctl-radius: 6px;
  --ctl-border: #cfd4da;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select,
.btn, a.btn, button.btn {
  box-sizing: border-box;
  height: var(--ctl-h);
  min-height: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.2;
  border-radius: var(--ctl-radius);
  vertical-align: middle;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select {
  padding: 0 12px;
  border: 1px solid var(--ctl-border);
  background-color: #fff;
}

/* Chevron sits on the left (inline-start in RTL); keep text clear of it. */
select {
  padding-inline-start: 32px;
  padding-inline-end: 12px;
  background-position: left 12px center;
}

textarea {
  box-sizing: border-box;
  min-height: 76px;
  padding: 8px 12px;
  border-radius: var(--ctl-radius);
  font-family: var(--font-body);
  font-size: 14px;
}

input[type="file"] { font-family: var(--font-body); font-size: 14px; }

.btn, a.btn, button.btn { padding: 0 16px; }

/* Compact: everything inside a table, plus explicit small buttons. */
table input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
table select,
table .btn,
.btn-sm, .btn-xs {
  height: var(--ctl-h-sm);
  font-size: 13px;
}
table .btn, .btn-sm, .btn-xs { padding: 0 12px; }

/* Toolbars and search rows: controls side by side at one height. */
.search-row,
.ctl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-row .search-input { width: 340px; max-width: 100%; }
.search-row .btn { height: var(--ctl-h); font-size: 14px; padding: 0 16px; }
.ctl-row > form { display: flex; align-items: center; gap: 6px; margin: 0; }

@media (max-width: 640px) {
  :root { --ctl-h: 42px; --ctl-h-sm: 36px; }
}

/* Button variants. Written as .btn.variant so they beat the base
   `button.btn` rule; otherwise every <button> renders as primary. */
.btn, .btn.btn-primary, .btn.btn-cyan {
  background: #1f3343; color: #fff; border: 1px solid #1f3343;
}
.btn:hover, .btn.btn-primary:hover, .btn.btn-cyan:hover {
  background: #2a4257; border-color: #2a4257; color: #fff; text-decoration: none;
}
.btn.btn-ghost, .btn.btn-secondary, .btn.btn-warn, .btn.btn-on-dark {
  background: #fff; color: #1f3343; border: 1px solid var(--ctl-border);
}
.btn.btn-ghost:hover, .btn.btn-secondary:hover, .btn.btn-warn:hover, .btn.btn-on-dark:hover {
  background: #f6f7f9; color: #1f3343; border-color: #b9c0c8;
}
.btn.btn-danger {
  background: #fff; color: #b42318; border: 1px solid #f1c6c2;
}
.btn.btn-danger:hover { background: #fdf3f2; color: #b42318; border-color: #e8a8a1; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }

/* Row actions inside tables stay on one line. */
table .ctl-row { flex-wrap: nowrap; }
table td:has(> .ctl-row) { white-space: nowrap; }

/* Tables: headers never wrap, so every header row is one line tall. */
th { white-space: nowrap; }
.nowrap { white-space: nowrap; }