:root {
  --ba-bg: #0b1a24;
  --ba-bg-alt: #001820;
  --ba-panel: #112a36;
  --ba-panel-alt: #0e2732;
  --ba-accent: #003040;
  --ba-accent-soft: #1a5060;
  --ba-text: #dbe4e8;
  --ba-muted: #8a9aa5;
  --ba-link: #8be1ff;
  --ba-ok: #8cff9c;
  --ba-border: #002636;
}

/* Global primitives for BA (shell-safe). */
/* No shell layout rules here. No feature-specific selectors here. */

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--ba-bg);
  color: var(--ba-text);
}

/* Links */
a{ color: inherit; }

/* Basic form controls */
button, input, select, textarea{
  font: inherit;
}

/* Remove number spinners globally (per BA rule) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}
/* ============================================================
   BA FORM PRIMITIVES — SELECT
   Opt-in only. Safe for gradual migration.
   ============================================================ */

.ba-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: var(--ba-panel);
  color: var(--ba-text);

  border: 1px solid var(--ba-border);
  border-radius: 10px;

  padding: 5px 34px 5px 12px;
  min-height: 32px;

  font: inherit;
  font-size: 13px;
  line-height: 1.25;
  font-weight: normal;

  cursor: pointer;
}

/* Focus state */
.ba-select:focus{
  outline: none;
  border-color: #ff7f00;
  box-shadow: 0 0 0 2px rgba(255,127,0,0.18);
}

/* Options (note: native dropdown styling still varies by browser/OS) */
.ba-select option{
  background-color: var(--ba-panel);
  color: var(--ba-text);
  font-size: 13px;
  font-weight: normal;
}

/* =========================================================
   BRIX GLOBAL SCROLLBAR THEME
   Applies to page and internal panel scrollbars
   ========================================================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #c86b2a var(--ba-bg-alt);
}

/* Chrome, Edge, Safari, Tauri WebView */
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: var(--ba-bg-alt);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(200, 107, 42, 0.78);
  border: 2px solid var(--ba-bg-alt);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(224, 122, 52, 0.96);
}

*::-webkit-scrollbar-thumb:active {
  background: #f08a3c;
}

*::-webkit-scrollbar-corner {
  background: var(--ba-bg-alt);
}
/* =========================================================
   Global iPad / Safari viewport resilience
   Helps when browser bars reduce usable page height
   ========================================================= */

html,
body {
  min-height: 100%;
}

body {
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-shell,
.page-shell,
.main-shell,
.main-content,
.page-content {
  min-height: 100dvh;
}

.global-bottom-actions,
.page-bottom-actions,
.action-panel,
.bottom-actions {
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}