/* Cadrix UI: shadcn-style Input + Select (see ui.js). Uses the section theme variables, so it follows .theme-light / .theme-dark / .theme-ink.
   Classes: .ui-input (text, email, search, textarea), .ui-input--lg (48px), .ui-select (a <select>, enhanced by ui.js), .ui-search (icon + clear wrapper). */
:root { --ui-h: 40px; --ui-ring: rgba(255, 122, 26, 0.3); --ui-err: #c0392b; }
@media (pointer: coarse) { :root { --ui-h: 44px; } }

.ui-input, .ui-select {
  display: block; width: 100%; height: var(--ui-h); padding: 0 12px; margin: 0;
  font: inherit; font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-size: 0.95rem; line-height: 1.25; color: var(--fg, #10131a);
  background-color: var(--surface, #fff); border: 1px solid var(--line-strong, rgba(16, 19, 26, 0.18)); border-radius: var(--r-sm, 10px);
  box-shadow: 0 1px 2px rgba(11, 14, 20, 0.05); -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
@media (pointer: coarse), (max-width: 640px) { .ui-input, .ui-select { font-size: 16px; } } /* 16px stops iOS zooming on focus */
.ui-input--lg { --ui-h: 48px; }
textarea.ui-input { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ui-input::placeholder { color: var(--fg-3, #6b7486); opacity: 1; }
.ui-input:hover:not(:disabled), .ui-select:hover:not(:disabled) { border-color: var(--fg-3, #6b7486); }
.ui-input:focus-visible, .ui-select:focus-visible, .ui-sel__btn:focus-visible, .ui-sel__btn[aria-expanded='true'] {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--ui-ring);
}
.ui-input:disabled, .ui-select:disabled, .ui-sel__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ui-input[aria-invalid='true'], .ui-select[aria-invalid='true'], .ui-sel__btn[aria-invalid='true'] { border-color: var(--ui-err); background-color: var(--surface, #fff); }
.ui-input[aria-invalid='true']:focus-visible, .ui-sel__btn[aria-invalid='true']:focus-visible { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.25); }
.ui-input:-webkit-autofill, .ui-input:-webkit-autofill:hover, .ui-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg, #10131a); caret-color: var(--fg, #10131a);
  box-shadow: 0 0 0 1000px var(--ui-autofill, #fff) inset; transition: background-color 99999s;
}
.theme-dark, .theme-ink { --ui-autofill: #1f283b; color-scheme: dark; }
.theme-dark .ui-input, .theme-ink .ui-input, .theme-dark .ui-select, .theme-ink .ui-select { background-color: rgba(255, 255, 255, 0.06); }
.theme-dark .ui-input:hover:not(:disabled), .theme-ink .ui-input:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.09); }

/* search field: leading icon + clear button (button is added by ui.js; the native clear is hidden only once it exists) */
.ui-search { position: relative; display: block; min-width: 0; }
.ui-search .ui-input { padding-inline: 38px 36px; }
.ui-search__icon { position: absolute; inset-block: 0; inset-inline-start: 12px; margin-block: auto; width: 16px; height: 16px; color: var(--fg-3, #6b7486); pointer-events: none; }
.ui-search__x {
  position: absolute; inset-block: 0; inset-inline-end: 6px; margin-block: auto; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--fg-3, #6b7486); cursor: pointer;
}
.ui-search__x[hidden] { display: none; }
.ui-search__x:hover { background: rgba(127, 135, 156, 0.2); color: var(--fg, #10131a); }
.ui-search__x:focus-visible { outline: 2px solid var(--orange); outline-offset: 0; }
.ui-search__x svg { width: 14px; height: 14px; }
@media (pointer: coarse) { .ui-search__x { width: 36px; height: 36px; } }
.ui-search--js input::-webkit-search-cancel-button, .ui-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* select: no-JS native look (chevron), and the enhanced trigger */
.ui-select { padding-inline-end: 36px; cursor: pointer; background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7486' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E"); }
[dir='rtl'] .ui-select { background-position: left 12px center; }
.ui-sel { position: relative; display: grid; min-width: 0; }
.ui-sel > * { grid-area: 1 / 1; min-width: 0; }
/* the real <select> stays in the layout (it sets the width, so nothing shifts when the script runs) but is invisible and inert */
.ui-sel__native { opacity: 0; pointer-events: none; }
.ui-sel__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: var(--ui-h); padding: 0 10px 0 12px; margin: 0;
  font: inherit; font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-size: 0.95rem; text-align: start; color: var(--fg, #10131a); cursor: pointer;
  background-color: var(--surface, #fff); border: 1px solid var(--line-strong, rgba(16, 19, 26, 0.18)); border-radius: var(--r-sm, 10px);
  box-shadow: 0 1px 2px rgba(11, 14, 20, 0.05); transition: border-color 0.15s, box-shadow 0.15s;
}
@media (pointer: coarse), (max-width: 640px) { .ui-sel__btn { font-size: 16px; } }
.ui-sel__btn:hover:not(:disabled) { border-color: var(--fg-3, #6b7486); }
.ui-sel__val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sel__btn > svg { flex: none; width: 14px; height: 14px; opacity: 0.55; transition: transform 0.15s; }
.ui-sel__btn[aria-expanded='true'] > svg { transform: rotate(180deg); }
.theme-dark .ui-sel__btn, .theme-ink .ui-sel__btn { background-color: rgba(255, 255, 255, 0.06); }

/* popover listbox (appended to <body>, so it is never clipped) */
.ui-lb {
  position: fixed; z-index: 1000; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 4px; outline: none;
  font-family: var(--font-sans); font-size: 0.95rem; color: #10131a; background: #fff;
  border: 1px solid rgba(16, 19, 26, 0.12); border-radius: var(--r-sm, 10px); box-shadow: var(--shadow-md);
  animation: ui-pop 0.12s var(--ease-out, ease-out);
}
.ui-lb[data-side='top'] { transform-origin: bottom; }
@keyframes ui-pop { from { opacity: 0; transform: scale(0.97) translateY(-2px); } }
.ui-lb__o { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px 6px 8px; border-radius: 6px; cursor: default; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) { .ui-lb__o { min-height: 44px; font-size: 16px; } }
.ui-lb__o[data-active] { background: #f2f0ea; }
.ui-lb__o[aria-disabled='true'] { opacity: 0.5; }
.ui-lb__c { flex: none; display: grid; width: 16px; height: 16px; visibility: hidden; color: var(--orange-ink, #c4500a); }
.ui-lb__c svg { width: 14px; height: 14px; margin: auto; }
.ui-lb__o[aria-selected='true'] .ui-lb__c { visibility: visible; }
.ui-lb__o[aria-selected='true'] { font-weight: 600; }
.ui-lb__g { padding: 8px 10px 4px 32px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7486; }
.ui-lb--dark { color: #f3f4f8; background: #161d2e; border-color: rgba(255, 255, 255, 0.14); }
.ui-lb--dark .ui-lb__o[data-active] { background: rgba(255, 255, 255, 0.09); }
.ui-lb--dark .ui-lb__c { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .ui-lb { animation: none; } .ui-sel__btn > svg { transition: none; } }