/*
  DATA__UI_POOL_AND_ASSISTANT_RULES__UL__REV2 — UI POOL (FROZEN)
  Implemented: 2026-02-05 (GMT)

  Rules enforced:
  - One UI Pool, no exceptions
  - No inline styles / no page-specific UI inventions
  - Color TOKENS ONLY (see :root)
  - Tabs are identical everywhere (inside dark-blue panel)

  IMPORTANT:
  - This file MUST NOT use global element selectors like `button {}` that restyle the whole app.
  - Only class-based primitives + legacy-class aliases.
*/

:root{
  /* Color tokens (FROZEN) */
  --red: #e11414;
  --blueDark: #083aa1;
  --blue: #0b4fd6;
  --panelDark: #0a49ff;
  --panelLight: #dbe8ff;
  --textOnDark: #ffffff;
  --textOnLight: #111111;
}

/* =========================================================
   Base primitives
   ========================================================= */

.UI_BTN{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  line-height:1;
  text-decoration:none;
  user-select:none;
  letter-spacing:0;
}
.UI_BTN:active{ transform:translateY(1px); }
.UI_BTN[disabled], .UI_BTN:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }

.UI_BTN_SM{ padding:8px 12px; border-radius:10px; font-weight:900; }

/* =========================================================
   Button variants (semantic) — FROZEN
   ========================================================= */

.BTN_COMMIT_RED_WHITE{ background:var(--red); color:var(--textOnDark); }

/* Allowed only for dense action clusters (kept available; not used by default) */
.BTN_COMMIT_RED_BLACK{ background:var(--red); color:var(--textOnLight); }

/* Explicit, rare-use class for RED background + BLACK text (allowed only via this class) */
.btn-red-utility{ background:var(--red); color:var(--textOnLight); }

.BTN_PRIMARY_DARKBLUE{ background:var(--blueDark); color:var(--textOnDark); }

.BTN_SECONDARY_BLUE{ background:var(--blue); color:var(--textOnDark); }

.BTN_UTILITY_WHITE{
  background:var(--textOnDark);
  color:var(--textOnLight);
  border:1px solid color-mix(in srgb, var(--textOnLight) 18%, transparent);
}

/* =========================================================
   Tabs (LOCKED)
   - Tabs live INSIDE the dark-blue panel
   - Active: red + white
   - Inactive: light-blue + black
   - No nested tab containers
   ========================================================= */

.UI_TABS{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:0; }

.UI_TAB{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:16px 16px 0 0;
  background:var(--panelLight);
  color:var(--textOnLight);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  border:2px solid var(--blueDark);
  border-bottom:none;
  letter-spacing:0;
  font-size:13px;
  line-height:1.1;
  text-transform:uppercase;
  white-space:normal;
  text-align:center;
}

.UI_TAB.active,
.UI_TAB[aria-selected="true"]{
  background:var(--red);
  color:var(--textOnDark);
}

/* Tabs flush to the top edge of the dark-blue panel */
.TABS_FLUSH{ margin-top:-18px; }

/* =========================================================
   Inputs / textarea / select (canonical)
   ========================================================= */

.UI_INPUT{
  width:100%;
  border:1px solid color-mix(in srgb, var(--textOnLight) 18%, transparent);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  background:var(--textOnDark);
  color:var(--textOnLight);
}

.UI_TEXTAREA{ min-height:90px; resize:vertical; }

/* =========================================================
   Checkbox (canonical)
   ========================================================= */

.UI_CHECKBOX{ width:18px; height:18px; accent-color: var(--red); }

/* =========================================================
   Tables (canonical)
   ========================================================= */

.UI_TABLE_WRAP{
  background:var(--panelLight);
  border:1px solid color-mix(in srgb, var(--textOnLight) 12%, transparent);
  border-radius:14px;
  padding:12px;
}

.UI_TABLE{ width:100%; border-collapse:collapse; color:var(--textOnLight); }
.UI_TABLE th, .UI_TABLE td{ padding:10px 10px; border-bottom:1px solid color-mix(in srgb, var(--textOnLight) 12%, transparent); vertical-align:top; }
.UI_TABLE th{ font-weight:900; text-align:left; opacity:.95; }

/* =========================================================
   Modal buttons mapping (rule C)
   ========================================================= */

.UI_MODAL_COMMIT{ }
.UI_MODAL_CANCEL{ }

/* =========================================================
   Legacy class aliases (to avoid rewriting the whole app at once)
   These aliases map existing markup into the frozen semantic variants.
   ========================================================= */

/* Buttons */
.btn, .btnlike{ composes: UI_BTN; }

/* If the browser ignores `composes`, still apply the core button look */
.btn, .btnlike{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px; padding:10px 14px; font-weight:900; cursor:pointer; line-height:1; text-decoration:none; user-select:none; box-shadow:0 8px 18px color-mix(in srgb, var(--textOnLight) 16%, transparent); }
.btn:active, .btnlike:active{ transform:translateY(1px); }
.btn[disabled], .btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; transform:none; }

/* Commit/write (RED + WHITE text) */
.btn-red, .send-btn, .close-btn, .reopen-btn, .archive-btn,
.save-btn, .create-btn, .danger-btn,
.BTN_COMMIT_RED_WHITE{ background:var(--red); color:var(--textOnDark); }

/* Inventory: Adjust stock is a utility action (WHITE + BLACK text) */

/* Inventory: Create part should be PRIMARY (DARK BLUE + WHITE text)
   (kept as an explicit alias so other create actions can remain commit/red) */
.create-part-btn, .create-part{ background:var(--blueDark); color:var(--textOnDark); }

/* Primary non-destructive (Edit / View / Manage) */
.btn.secondary, .edit-btn, .unassign-btn, .assign-btn,
.BTN_PRIMARY_DARKBLUE{ background:var(--blueDark); color:var(--textOnDark); }

/* Cancel / Close / Back (non-writing) */
.btn-blue, .cancel-btn, .back-btn,
.BTN_SECONDARY_BLUE{ background:var(--blue); color:var(--textOnDark); }

/* Utility (Refresh, Sign out, Adjust stock) */
.btn.white, .btn-white, .refresh-btn, .BTN_UTILITY_WHITE{ background:var(--textOnDark); color:var(--textOnLight); border:1px solid color-mix(in srgb, var(--textOnLight) 18%, transparent); box-shadow:0 6px 16px color-mix(in srgb, var(--textOnLight) 10%, transparent); }
.set-stock-btn{ background:var(--red); color:var(--textOnLight); }


/* Manager Tools: tabs row + Company Settings button */
.mgr-toprow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.mgr-company-btn{
  padding:10px 16px;          /* slightly larger */
  border-radius:12px;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
}
/* Tabs */
.ames-tabs, .tabs, .tab-row, .tabbar, .jobs-tabs-wrap, .insp-tabs{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:0; }

.ames-tab, .tab, .tab-btn, .jobs-tab, .insp-tabbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px;
  border-radius:16px 16px 0 0;
  background:var(--panelLight);
  color:var(--textOnLight);
  font-weight:900;
  cursor:pointer;
  user-select:none;
  border:2px solid var(--blueDark);
  border-bottom:none;
  letter-spacing:0;
}

.ames-tab.active, .tab.active, .tab-btn.active, .jobs-tab.active, .insp-tabbtn.active{
  background:var(--red);
  color:var(--textOnDark);
}

.tabs-flush, .TABS_FLUSH{ margin-top:-18px; }


/* Manager Tools (Explorer) action row */
.ex-actions{ flex-wrap:nowrap; align-items:center; }
.ex-export-type{ width:92px; min-width:92px; max-width:92px; }
.rb-file-row{ align-items:center; }
/* Inputs */
.ames-input{ width:100%; border:1px solid color-mix(in srgb, var(--textOnLight) 18%, transparent); border-radius:12px; padding:10px 12px; font-size:14px; background:var(--textOnDark); color:var(--textOnLight); }

/* Tables */
.table-wrap{ background:var(--panelLight); border:1px solid color-mix(in srgb, var(--textOnLight) 12%, transparent); border-radius:14px; padding:12px; box-shadow:0 6px 18px color-mix(in srgb, var(--textOnLight) 10%, transparent); }
.table{ width:100%; border-collapse:collapse; color:var(--textOnLight); }



/* =========================================================
   Utilities (class-only, no inline styles)
   ========================================================= */

.u-hidden{ display:none !important; }
.u-block{ display:block !important; }
.u-flex{ display:flex !important; }
.u-flex-col{ display:flex !important; flex-direction:column !important; }
.u-flex-wrap{ flex-wrap:wrap !important; }
.u-flex-1{ flex:1 !important; }
.u-grid{ display:grid !important; }
.u-gap-6{ gap:6px !important; }
.u-gap-8{ gap:8px !important; }
.u-gap-10{ gap:10px !important; }
.u-gap-12{ gap:12px !important; }
.u-mt-10{ margin-top:10px !important; }
.u-mt-12{ margin-top:12px !important; }
.u-mt-14{ margin-top:14px !important; }
.u-mb-6{ margin-bottom:6px !important; }
.u-pad-10{ padding:10px !important; }
.u-pad-14{ padding:14px !important; }
.u-pad-y-6{ padding-top:6px !important; padding-bottom:6px !important; }
.u-pad-yx-10-6{ padding:10px 6px !important; }
.u-text-center{ text-align:center !important; }
.u-lh-14{ line-height:1.4 !important; }
.u-lh-15{ line-height:1.5 !important; }
.u-fw-900{ font-weight:900 !important; }
.u-op-80{ opacity:0.8 !important; }
.u-op-75{ opacity:0.75 !important; }
.u-justify-between{ justify-content:space-between !important; }
.u-justify-center{ justify-content:center !important; }
.u-align-center{ align-items:center !important; }
.u-overflow-auto{ overflow:auto !important; }
.u-h-520{ height:520px !important; }
.u-maxw-760{ max-width:760px !important; width:100% !important; }
.u-grid-2col-280{ display:grid !important; grid-template-columns:280px 1fr !important; }
.u-bb-soft{ border-bottom:1px solid color-mix(in srgb, var(--textOnLight) 8%, transparent) !important; }
.u-bt-soft-dark{ border-top:1px solid color-mix(in srgb, var(--textOnDark) 8%, transparent) !important; }

.u-maxw-720{ max-width:720px !important; }
.u-mx-auto{ margin-left:auto !important; margin-right:auto !important; }
.u-my-40{ margin-top:40px !important; margin-bottom:40px !important; }
.u-px-14{ padding-left:14px !important; padding-right:14px !important; }
.u-pad-22{ padding:22px !important; }
.u-fs-22{ font-size:22px !important; }
.u-op-90{ opacity:0.9 !important; }
.u-lh-135{ line-height:1.35 !important; }

.u-pt-10{ padding-top:10px !important; }
.u-text-left{ text-align:left !important; }
.u-br-10{ border-radius:10px !important; }
.u-bw10{ border:1px solid color-mix(in srgb, var(--textOnDark) 10%, transparent) !important; }
.u-maxw-80p{ max-width:80% !important; }
.u-align-self-end{ align-self:flex-end !important; }
.u-align-self-start{ align-self:flex-start !important; }

/* Messaging list primitives (standardized component classes) */
.ames-list-row{
  text-align:left;
  padding:10px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--textOnDark) 10%, transparent);
  background: transparent;
  cursor:pointer;
}
.ames-list-row.is-active{
  background: color-mix(in srgb, var(--textOnLight) 20%, transparent);
}
.ames-bubble{
  max-width:80%;
  border:1px solid color-mix(in srgb, var(--textOnDark) 12%, transparent);
  border-radius:12px;
  padding:10px 12px;
  background: color-mix(in srgb, var(--textOnLight) 18%, transparent);
}
.ames-bubble.is-mine{
  background: color-mix(in srgb, var(--textOnDark) 6%, transparent);
}

.u-mb-8{ margin-bottom:8px !important; }

.ames-select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--textOnLight) 18%, transparent);
  font-weight:800;
  background:var(--textOnDark);
}
.ames-jobs-popover{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:9999;
  min-width:220px;
  max-width:360px;
  max-height:260px;
  overflow:auto;
  padding:12px;
  border-radius:14px;
  background:var(--panelLight);
  color:var(--textOnLight);
  border:2px solid var(--blueDark);
  box-shadow:0 14px 28px color-mix(in srgb, var(--textOnLight) 18%, transparent);
}
.ames-jobs-popover.anchored{
  /* Position is set by JS relative to the INV/EQ link */
  transform:none;
}

.ames-jobs-popover.glow-red{
  border-color:var(--red);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--red) 35%, transparent), 0 18px 34px color-mix(in srgb, var(--red) 28%, transparent);
}


.u-ws-preline{ white-space:pre-line !important; }

.ames-hover-row:hover{ background: color-mix(in srgb, var(--blue) 8%, transparent) !important; }

.u-fw-800{ font-weight:800 !important; }
.u-fs-12{ font-size:12px !important; }
.u-fs-11{ font-size:11px !important; }
.u-ws-prewrap{ white-space:pre-wrap !important; }

/* ==========================================================
   Drag & Drop (UI Pool primitive)
   - No page modifications required.
   - Use with JS helper in assets/ui.js
   ========================================================== */
.UI_DROPZONE{
  border:2px dashed var(--blueDark);
  border-radius:14px;
  padding:12px;
  background:var(--panelLight);
  color:var(--textOnLight);
}
.UI_DROPZONE.is-dragover{
  background:color-mix(in srgb, var(--blue) 18%, var(--panelLight));
  border-color:var(--red);
}
.UI_DROPZONE .dz-hint{
  font-weight:900;
  letter-spacing:.02em;
}


/* --- UI Fix: Inspections page readability + tab typography --- */
.inspections-tabs .jobs-tab{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:14px !important;
  line-height:1.1 !important;
}
.inspections-panel .UI_PANEL,
.inspections-panel .UI_PANEL *{
  color:#0b0f1a;
}
.inspections-panel .UI_PANEL input,
.inspections-panel .UI_PANEL select,
.inspections-panel .UI_PANEL textarea{
  color:#0b0f1a;
}
/* AMES: Global inline message readability patch
   Timestamp (GMT): 20260209_210931Z (GMT)

   Goal: any "popup" / inline status message that appears inside white boxes
   should be readable (dark text, proper padding, wrap, not clipped).
*/

/* Generic banner/message blocks */
.ames-message,
.status-banner,
.notice,
.inline-error,
.inline-success,
.alert {
  font-family: inherit;
  font-size: 16px;
  line-height: 1.25;
  color: #111 !important;
  background: #fff;
  border: 2px solid #d22;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  white-space: normal;
  word-break: break-word;
}

/* Success variant (green border) */
.ames-message.success,
.status-banner.success,
.inline-success,
.alert.success {
  border-color: #1e7d2b;
}

/* Error variant */
.ames-message.error,
.status-banner.error,
.inline-error,
.alert.error {
  border-color: #d22;
}

/* Messages rendered inside/above forms */
.form-status,
.form-message,
#statusMessage,
#inviteStatus,
#joinStatus,
#authStatus {
  display: block;
  color: #111 !important;
  background: #fff;
  border: 2px solid #d22;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  white-space: normal;
  word-break: break-word;
}

/* Fix common "input-like" status boxes that were styled like inputs */
input[readonly].statusbox,
input.statusbox,
.statusbox {
  color: #111 !important;
  background: #fff !important;
  border: 2px solid #d22 !important;
  padding: 10px 12px !important;
  height: auto !important;
}

/* Ensure the text isn't vertically clipped inside containers */
.panel, .card, .box, .whiteBox, .contentBox {
  overflow: visible;
}


/* Utility: force white text (used for modal titles/priority labels) */
.TXT_WHITE{ color: var(--textOnDark) !important; }

/* Ensure modal headers are readable */
.ames-modal .head, .ames-modal .head *{ color: var(--textOnDark) !important; }