/* ═══════════════════════════════════════════════════════
   bx.theme.css — Bitacorix Revamp Design System
   Load this FIRST, before Bootstrap.
═══════════════════════════════════════════════════════ */

/* ── Design tokens: Light mode ── */
:root, [data-theme="light"] {
  --color-bg:            #F5F5F7;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F0F0F3;
  --color-border:        #E5E5EA;
  --color-primary:       #E37F0A;
  --color-primary-h:     #C96F08;
  --color-primary-soft:  rgba(227,127,10,0.10);
  --color-text:          #1D1D1F;
  --color-text-muted:    #6E6E73;
  --color-success:       #5BBD4E;
  --color-danger:        #E53935;
  --color-danger-soft:   rgba(229,57,53,0.10);
  --radius:              5px;
  --radius-sm:           0px;
  --shadow:              0 1px 4px rgba(0,0,0,0.07);
  --shadow-md:           0 4px 16px rgba(0,0,0,0.10);
  --appbar-h:            56px;
  --segment-h:           50px;
  --sidebar-w:           240px;
  --safe-h:              20px;
  --sidebar-bg:          #FFFFFF;
  --sidebar-border:      #E5E5EA;
}

/* ── Design tokens: Dark mode ── */
[data-theme="dark"] {
  --color-bg:            #000000;
  --color-surface:       #1C1C1E;
  --color-surface-2:     #2C2C2E;
  --color-border:        #3A3A3C;
  --color-primary:       #FF9F0A;
  --color-primary-h:     #FFB340;
  --color-primary-soft:  rgba(255,159,10,0.13);
  --color-text:          #F5F5F7;
  --color-text-muted:    #8E8E93;
  --color-success:       #5BBD4E;
  --color-danger:        #EF5350;
  --color-danger-soft:   rgba(239,83,80,0.14);
  --shadow:              0 1px 6px rgba(0,0,0,0.45);
  --shadow-md:           0 4px 20px rgba(0,0,0,0.60);
  --sidebar-bg:          #111111;
  --sidebar-border:      #2A2A2C;
}

/* ── Dark mode: invert PNG binnacle icons so they show on dark bg ── */
[data-theme="dark"] .bx-sb-item img,
[data-theme="dark"] .bx-icon-card-img,
[data-theme="dark"] .bx-d-icon-card img {
  filter: brightness(0) invert(1);
}

/* ═══════════════════════════════════════════════════════
   SHELL VISIBILITY
═══════════════════════════════════════════════════════ */
#shell-revamp { display: none; }

[data-ux="v2"] #shell-legacy { display: none !important; }
[data-ux="v2"] #shell-revamp {
  display: block;
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  transition: background 0.25s;
}
[data-ux="v2"] body {
  padding: 0 !important;
  overflow: hidden;
  min-width: auto !important;
  background: var(--color-bg);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s;
}

/* ── Shared scrollbar ── */
[data-ux="v2"] *::-webkit-scrollbar { width: 5px; height: 5px; }
[data-ux="v2"] *::-webkit-scrollbar-track { background: transparent; }
[data-ux="v2"] *::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* ── Touch fix ── */
[data-ux="v2"] button, [data-ux="v2"] a, [data-ux="v2"] [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════
   SHARED: TOAST
═══════════════════════════════════════════════════════ */
.bx-toast {
  position: fixed;
  bottom: calc(var(--safe-h) + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(29,29,31,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 9999;
  max-width: calc(100% - 32px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}
[data-theme="dark"] .bx-toast { background: rgba(72,72,74,0.95); }
.bx-toast.bx-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 900px) { .bx-toast { bottom: 20px; } }

/* ── Backdrop — visual-only overlay, never intercepts clicks.
     Closing is handled by the document click listener in app.revamp.js ── */
.bx-backdrop {
  position: fixed; inset: 0; z-index: 400; display: none;
  pointer-events: none;
}
.bx-backdrop.bx-open { display: block; }

/* ── Modal overlay ── */
.bx-modal {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.bx-modal-box {
  width: min(400px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}
/* Title inside change-password card */
.bx-chgpwd-title {
  font-size: 17px; font-weight: 600; color: var(--color-text);
  text-align: center; margin: 0 0 20px; letter-spacing: -0.01em;
}
/* Error div uses .hidden (Bootstrap) for visibility in modal */
#bx-modal-body .bx-login-error { display: block; }
#bx-modal-body .bx-login-error.hidden { display: none !important; }
/* Legacy shell: same toggle pattern — show unless .hidden is present */
#shell-legacy .bx-login-error { display: block; }
#shell-legacy .bx-login-error.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════
   MOBILE — SCREEN STACK
═══════════════════════════════════════════════════════ */
.bx-screens {
  position: absolute; inset: 0;
}
.bx-screen {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: opacity 0.26s cubic-bezier(0.4,0,0.2,1),
              transform 0.26s cubic-bezier(0.4,0,0.2,1),
              background 0.25s;
  will-change: transform, opacity;
  background: var(--color-bg);
}
.bx-screen.bx-active { opacity: 1; pointer-events: auto; transform: translateX(0); }
.bx-screen.bx-exit-left { opacity: 0; transform: translateX(-28%); }

@media (min-width: 900px) {
  .bx-screens { display: none; }
}

/* ═══════════════════════════════════════════════════════
   APP BAR (mobile)
═══════════════════════════════════════════════════════ */
.bx-appbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--appbar-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center;
  padding: 0 6px; gap: 2px;
  z-index: 500;
  transition: background 0.25s, border-color 0.25s;
}
.bx-appbar-back {
  width: 44px; height: 44px;
  border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background 0.14s;
}
.bx-appbar-back:active { background: var(--color-primary-soft); }
.bx-appbar-brand {
  flex: 1 1 auto; overflow: hidden; padding: 0 4px;
  display: flex; align-items: center;
}
.bx-appbar-logo {
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--color-text); letter-spacing: -0.3px; line-height: 1;
}
.bx-appbar-logo em { color: var(--color-primary); font-style: normal; }
.bx-appbar-title {
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: 18px; font-weight: 700;
  color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bx-appbar-right {
  display: flex; align-items: center; flex-shrink: 0; position: relative;
}

/* ── Avatar chip & button ── */
.bx-avatar-btn {
  width: 44px; height: 44px; border: none; background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.14s;
}
.bx-avatar-btn:active { background: var(--color-primary-soft); }
.bx-avatar-chip {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white; letter-spacing: 0.04em;
}

/* ── Dropdown ── */
.bx-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 210px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92) translateY(-6px);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.14s, transform 0.14s;
  z-index: 500;
}
.bx-dropdown.bx-open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.bx-dd-divider { height: 1px; background: var(--color-border); margin: 4px 0; }
.bx-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  font-size: 14px; font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}
.bx-dd-item:last-child { border-bottom: none; }
.bx-dd-item:active { background: var(--color-primary-soft); }
.bx-dd-item.bx-red { color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════
   SAFE AREA INDICATOR
═══════════════════════════════════════════════════════ */
.bx-safe-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--safe-h);
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: background 0.25s;
}
.bx-safe-bar::after {
  content: '';
  width: 130px; height: 5px;
  background: var(--color-text); border-radius: 3px; opacity: 0.15;
}

/* ═══════════════════════════════════════════════════════
   SCROLL BODY
═══════════════════════════════════════════════════════ */
.bx-scroll-body {
  position: absolute;
  top: var(--appbar-h);
  bottom: var(--safe-h); left: 0; right: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg);
  transition: background 0.25s;
}
.bx-scroll-body.bx-with-segment {
  top: calc(var(--appbar-h) + var(--segment-h));
}

/* ═══════════════════════════════════════════════════════
   SCREEN 1 — LOGIN
═══════════════════════════════════════════════════════ */
.bx-login-screen {
  height: 100%; overflow-y: auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 20px;
}
.bx-login-hero { text-align: center; margin-bottom: 40px; }
.bx-login-logo {
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: 48px; font-weight: 700;
  color: var(--color-text); letter-spacing: -0.5px; line-height: 1;
}
.bx-login-logo em { color: var(--color-primary); font-style: normal; }
.bx-login-sub {
  margin-top: 8px; font-size: 13px; font-weight: 400;
  color: var(--color-text-muted); letter-spacing: 0.02em;
}
.bx-login-card {
  width: 100%; max-width: 360px;
  background: var(--color-surface);
  border-radius: var(--radius); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 28px 24px 24px;
  transition: background 0.25s, border-color 0.25s;
}
.bx-login-version {
  margin-top: 20px; text-align: center;
  font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.02em;
}
.bx-login-error {
  margin-top: 10px; padding: 8px 12px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  font-size: 13px; display: none;
}
.bx-login-error.bx-visible { display: block; }

/* ═══════════════════════════════════════════════════════
   SCREEN 2 — HOME
═══════════════════════════════════════════════════════ */
.bx-home-greeting { padding: 20px 16px 4px; }
.bx-home-greeting-name { font-size: 21px; font-weight: 500; color: var(--color-text); margin-bottom: 3px; }
.bx-home-greeting-sub { font-size: 13px; color: var(--color-text-muted); }

.bx-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; padding: 14px 12px 28px;
  list-style: none; margin: 0;
}
.bx-icon-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--color-border);
  padding: 18px 6px 14px;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  cursor: pointer; min-height: 104px;
  transition: box-shadow 0.16s, transform 0.11s, border-color 0.16s, background 0.25s;
  user-select: none;
}
.bx-icon-card:active { transform: scale(0.93); box-shadow: none; }
.bx-icon-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 10px rgba(227,127,10,0.14); }
.bx-icon-card-img {
  width: 34px; height: 34px;
  object-fit: contain; flex-shrink: 0;
}
.bx-icon-card-label {
  font-size: 12px; font-weight: 500;
  color: var(--color-text); text-align: center; line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════
   SEGMENTED CONTROL
═══════════════════════════════════════════════════════ */
.bx-segment-bar {
  position: absolute; top: var(--appbar-h); left: 0; right: 0;
  height: var(--segment-h); padding: 7px 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: 50;
  transition: background 0.25s, border-color 0.25s;
}
.bx-segment {
  display: flex; background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 3px; gap: 3px;
  height: 100%; transition: background 0.25s, border-color 0.25s;
}
.bx-seg-btn {
  flex: 1; border: none; background: none; cursor: pointer;
  border-radius: calc(var(--radius) - 3px);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--color-text-muted);
  transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}
.bx-seg-btn.bx-active {
  background: var(--color-surface); color: var(--color-primary);
  font-weight: 600; box-shadow: var(--shadow);
}

/* ═══════════════════════════════════════════════════════
   FORM ELEMENTS (shared overrides for revamp shell)
═══════════════════════════════════════════════════════ */
/* Login form: keep stacked layout */
[data-ux="v2"] .bx-login-card .form-group {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 14px;
}
[data-ux="v2"] .bx-form-label {
  font-size: 12px; font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
[data-ux="v2"] .bx-login-card .form-group label {
  font-size: 12px; font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}

/* ── Binnacle forms: spreadsheet-row design ──
   Each field is a thin separated row. Labels are small-caps muted text,
   right-aligned. Inputs are borderless/transparent. On focus: the entire
   row highlights with a primary-soft tint and a left accent bar appears. */

[data-ux="v2"] .binnacle-form {
  padding: 0;
  background-color: transparent;
  border: 0;  
  margin: 0;
}

/* Form groups — standard inline label + input layout */
[data-ux="v2"] .binnacle-form .form-group {
  margin-bottom: 10px;
}
[data-ux="v2"] .binnacle-form .form-group.row { margin-left: 0; margin-right: 0; }

@media (min-width: 900px) { [data-ux="v2"] .binnacle-form .form-group { display: flex; flex-direction: row; align-items: center; } }

/* Label column */
[data-ux="v2"] .binnacle-form .col-sm-3 {
  flex: 0 0 130px; width: 130px; padding: 0 10px 0 0; float: none;
}
[data-ux="v2"] .binnacle-form .col-sm-9 {
  flex: 1; width: auto; padding: 0; float: none;
}
[data-ux="v2"] .binnacle-form .form-group label {
  font-size: 13px; font-weight: 500;
  color: var(--color-text-muted);
  text-align: left; margin: 0; display: block;
  line-height: 1.4; white-space: normal;
  height: auto;
  margin-bottom: 3px;
}

@media (min-width: 900px) { [data-ux="v2"] .binnacle-form .form-group label { text-align: right; margin-bottom: 0; } }

/* Inputs: A14-Foundation style — bordered box */
[data-ux="v2"] .binnacle-form .form-control {
  height: 34px; padding: 5px 10px;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px; font-weight: 400; color: var(--color-text) !important;
  width: 100%; transition: border-color 0.14s, box-shadow 0.14s;
}
[data-ux="v2"] .binnacle-form .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
  outline: none !important;
  background: var(--color-surface) !important;
}
[data-ux="v2"] .binnacle-form .form-control::placeholder {
  color: var(--color-text-muted); opacity: 0.55;
}
[data-ux="v2"] .binnacle-form .form-control:disabled,
[data-ux="v2"] .binnacle-form .form-control[disabled] {
  background: var(--color-surface-2) !important; opacity: 0.65; cursor: not-allowed;
}
[data-ux="v2"] .binnacle-form textarea.form-control {
  height: auto; min-height: 80px; padding: 7px 10px;
  resize: vertical; line-height: 1.55; display: block;
}
[data-ux="v2"] .binnacle-form .form-group:has(textarea) {
  align-items: flex-start; padding-top: 2px;
}
[data-ux="v2"] .binnacle-form select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6E73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 8px center !important;
  padding-right: 28px; -webkit-appearance: none; appearance: none;
}

/* Section group title */
[data-ux="v2"] .binnacle-form .form-group-title {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 6px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--color-border);
  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 8px 0 10px;
}
[data-ux="v2"] .binnacle-form .form-group-title::before {
  content: '';
  display: inline-block; width: 3px; height: 13px;
  background: var(--color-primary); border-radius: 2px; flex-shrink: 0;
}
[data-ux="v2"] .binnacle-form .form-group-title .form-group-collapse-btn {
  color: var(--color-text-muted);
  opacity: 0.55; font-size: 11px;
}
[data-ux="v2"] .binnacle-form .form-group-content.is-collapsed { display: none; }

/* Form footer — sticky action bar */
[data-ux="v2"] .binnacle-form .form-footer {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: 8px;
  padding: 10px 0;
  margin: 12px 0 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  transition: background 0.25s, border-color 0.25s;
}
[data-ux="v2"] .binnacle-form .form-footer .form-button {
  flex: 1; height: 38px; border-radius: var(--radius-sm);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; transition: background 0.14s, box-shadow 0.14s, transform 0.1s;
}
[data-ux="v2"] .binnacle-form .form-footer .form-button:active { transform: scale(0.97); }
/* Limpiar — ghost */
[data-ux="v2"] .binnacle-form .form-footer .btn-danger {
  background: transparent; color: var(--color-text-muted);
  border: 1.5px solid var(--color-border) !important; box-shadow: none !important;
}
[data-ux="v2"] .binnacle-form .form-footer .btn-danger:hover {
  background: var(--color-surface-2); color: var(--color-text);
}
/* Registrar — solid primary (must override .form-control { background: !important }) */
[data-ux="v2"] .binnacle-form .form-footer .btn-success {
  background: var(--color-primary) !important; color: white;
  border: none !important; box-shadow: 0 2px 8px rgba(227,127,10,0.28);
}
[data-ux="v2"] .binnacle-form .form-footer .btn-success:hover {
  background: var(--color-primary-h); box-shadow: 0 4px 14px rgba(227,127,10,0.38);
}
[data-ux="v2"] .form-control {
  height: 34px; padding: 5px 10px;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px; font-weight: 400;
  color: var(--color-text) !important;
  outline: none; width: 100%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: border-color 0.14s, box-shadow 0.14s;
}
[data-ux="v2"] .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
  background: var(--color-surface) !important;
  outline: none !important;
}
[data-ux="v2"] textarea.form-control {
  height: auto; min-height: 90px;
  padding: 7px 10px; resize: vertical; line-height: 1.55;
}
[data-ux="v2"] select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E6E73' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 30px;
  -webkit-appearance: none; appearance: none;
}

/* ── Input groups (finder fields: text + search button) ── */
/* Keep Bootstrap's table layout — only adjust heights/colors */
[data-ux="v2"] .binnacle-form .input-group .form-control {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
[data-ux="v2"] .binnacle-form .input-group .input-group-btn {
  display: table-cell !important;
}
[data-ux="v2"] .binnacle-form .input-group .input-group-btn > .btn,
[data-ux="v2"] .input-group.date .input-group-addon {
  height: 34px;
  min-width: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border) !important;
  border-left: none !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
  font-size: 14px;
  line-height: 32px;
  vertical-align: middle;
  text-align: center;
}
[data-ux="v2"] .binnacle-form .input-group .input-group-btn > .btn:hover,
[data-ux="v2"] .input-group.date .input-group-addon:hover {
  background: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* ── Selectize (enhanced selects) ── */
/* Selectize adds form-control class to its .selectize-control wrapper,
   which makes our .form-control rules create a double-box. Reset it. */
[data-ux="v2"] .binnacle-form .selectize-control.form-control {
  height: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 1px solid var(--color-border);
}
/* Hide selectize's default filled-triangle caret; use same chevron as native select */
[data-ux="v2"] .binnacle-form .selectize-control.single .selectize-input::after {
  display: none !important;
}
/* Style the actual visible input surface */
[data-ux="v2"] .binnacle-form .selectize-input {
  min-height: 34px !important;
  padding: 5px 28px 5px 10px !important;
  background: var(--color-surface) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E6E73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
  color: var(--color-text) !important;
  font-size: 14px;
  font-family: 'Barlow', system-ui, sans-serif;
  line-height: 22px !important;
}
[data-ux="v2"] .binnacle-form .selectize-input.focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-soft) !important;
}
[data-ux="v2"] .binnacle-form .selectize-input input {
  color: var(--color-text) !important;
  font-size: 14px !important;
  font-family: 'Barlow', system-ui, sans-serif !important;
}
/* Both the dropdown wrapper AND its inner content need background —
   the content div is the actual scrollable area and defaults to transparent */
[data-ux="v2"] .binnacle-form .selectize-dropdown,
[data-ux="v2"] .binnacle-form .selectize-dropdown-content {
  background: var(--color-surface) !important;
  padding: 0 !important;
  border: 1px solid var(--color-border) !important;
}
[data-ux="v2"] .binnacle-form .selectize-dropdown {
  border: 1px solid var(--color-border) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--color-text) !important;
}
[data-ux="v2"] .binnacle-form .selectize-dropdown .option {
  padding: 7px 10px !important;
  font-size: 14px; color: var(--color-text);
}
[data-ux="v2"] .binnacle-form .selectize-dropdown .option:hover,
[data-ux="v2"] .binnacle-form .selectize-dropdown .active {
  background: var(--color-primary-soft) !important;
  color: var(--color-text) !important;
}

/* ── Shared buttons — legacy shell mirrors v2 styles for shared views (e.g. password form) ── */
#shell-legacy .bx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; padding: 0 18px;
  border-radius: 5px;
  font-size: 14px; font-weight: 600;
  border: none; cursor: pointer;
  white-space: nowrap;
}
#shell-legacy .bx-btn-primary {
  background: #E37F0A; color: white;
}
#shell-legacy .bx-btn-ghost {
  background: #F0F0F3; color: #6E6E73;
  border: 1.5px solid #E5E5EA;
}
#shell-legacy .bx-btn-full { width: 100%; }
#shell-legacy .bx-btn-lg { height: 48px; font-size: 15px; }

/* ── Shared buttons ── */
[data-ux="v2"] .bx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; padding: 0 18px;
  border-radius: var(--radius-sm);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  border: none; cursor: pointer;
  transition: background 0.14s, transform 0.1s, box-shadow 0.14s, border-color 0.14s;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
[data-ux="v2"] .bx-btn:active { transform: scale(0.97); }
[data-ux="v2"] .bx-btn-primary {
  background: var(--color-primary); color: white;
  box-shadow: 0 2px 8px rgba(227,127,10,0.28);
}
[data-ux="v2"] .bx-btn-primary:active { background: var(--color-primary-h); }
[data-ux="v2"] .bx-btn-ghost {
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1.5px solid var(--color-border);
}
[data-ux="v2"] .bx-btn-ghost:active { background: var(--color-border); }
[data-ux="v2"] .bx-btn-full { width: 100%; }
[data-ux="v2"] .bx-btn-lg { height: 48px; font-size: 15px; }

/* ═══════════════════════════════════════════════════════
   BINNACLE VIEW OVERRIDES (inside revamp shell)
═══════════════════════════════════════════════════════ */
[data-ux="v2"] #binnacle-view .nav-pills { display: none !important; }
[data-ux="v2"] #binnacle-view .binnacle-content.hidden { display: block !important; }
[data-ux="v2"] #binnacle-view .tab-content { padding: 0; position: unset; }
[data-ux="v2"] #binnacle-view .tab-pane {
  display: none;
  opacity: 1 !important;
}
[data-ux="v2"] #binnacle-view .tab-pane.bx-tab-active {
  display: block;
}
/* Wait screen styling in revamp */
[data-ux="v2"] #binnacle-view .wait-screen {
  padding: 40px 16px; text-align: center;
  color: var(--color-text-muted);
}

/* ─ Carga tab: wrap form content in card ─ */
[data-ux="v2"] #binnacle-append .binnacle-form {
  background: var(--color-surface);
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  margin: 12px auto 0; padding: 14px 16px 0;
}
/* Bottom padding for scroll comfort */
[data-ux="v2"] #binnacle-append { padding-bottom: 20px; }

/* ─ Consulta tab ─ */
[data-ux="v2"] #binnacle-query .criteria {
  background: var(--color-surface);
  border-radius: var(--radius); border: 1px solid var(--color-border);
  box-shadow: var(--shadow); margin: 12px 12px 0;
  padding: 14px 16px 0;
  max-width: 1024px;
  margin: 5px auto;
}
[data-ux="v2"] #binnacle-query .criteria.iscollapsed .binnacle-form {
  padding: 2px 5px;
}
[data-ux="v2"] #binnacle-query .results { 
  margin-top: 8px; 
}
[data-ux="v2"] #binnacle-query .results .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  background: var(--color-surface);
  margin: 10px auto;
  border-radius: var(--radius);
  height: 40px;
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}

/* ── Record counter pill ── */
[data-ux="v2"] .pager-recordcount {
  min-width: 65px;
  width: auto;
}
[data-ux="v2"] .pager-recordcount.label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-primary-soft);
  border: 1.5px solid rgba(227,127,10,0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 9px 2px 7px;
  line-height: 1.5;
  width: auto;
}
[data-theme="dark"] [data-ux="v2"] .pager-recordcount.label {
  border-color: rgba(255,159,10,0.22);
}
[data-ux="v2"] .pager-recordcount.label.record-limit-exceeded {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: rgba(229,57,53,0.22);
}
[data-ux="v2"] .pager-recordcount.label.record-limit-exceeded::before {
  background: var(--color-danger);
}

[data-ux="v2"] .pager li>a, .pager li>span {
  color: var(--color-text-muted);
  border-radius: var(--radius);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

[data-ux="v2"] #binnacle-query .results .info .tools-pager .pager .pager-label {
  width: unset;
}

@media (min-width: 900px) {
  [data-ux="v2"] #binnacle-query .results .info .tools-pager .pager .pager-label {
    width: 80px;
  }
}

/* ── CSS spinner (replaces glyphicon) — global so legacy shell also spins ── */
@keyframes bx-spin { to { transform: rotate(360deg); } }
.bx-spin {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--color-primary-soft);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: bx-spin 0.65s linear infinite;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Toolbar icon buttons ── */
[data-ux="v2"] #binnacle-query .results .info .tools-bar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  margin-top: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-shadow: none;
}
[data-ux="v2"] #binnacle-query .results .info .tools-bar .btn:hover,
[data-ux="v2"] #binnacle-query .results .info .tools-bar .btn:focus {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}
[data-ux="v2"] #binnacle-query .results .info .tools-bar .btn svg {
  display: block;
  pointer-events: none;
}
[data-ux="v2"] #binnacle-query .results .info .tools-bar .btn + .btn { margin-left: 4px; }
[data-ux="v2"] #binnacle-query .results .contents {
  margin: 0 auto 24px;
  background: var(--color-surface);
  border-radius: var(--radius); border: 1px solid var(--color-border);
  box-shadow: var(--shadow); overflow: auto;
}
[data-ux="v2"] #binnacle-query .table-condensed {
  font-size: 13px; border-collapse: collapse; width: 100%;
}
[data-ux="v2"] #binnacle-query .table-condensed thead th {
  position: sticky; top: 0;
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 9px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.25s;
  border-color: var(--color-border);
}
[data-ux="v2"] #binnacle-query .table-condensed tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.1s;
}
[data-ux="v2"] #binnacle-query .table-condensed tbody tr:hover {
  background: var(--color-primary-soft);
}
[data-ux="v2"] #binnacle-query .table-condensed td { padding: 8px 10px; vertical-align: middle; color: var(--color-text); font-size: 13px; }
[data-ux="v2"] #binnacle-query .table-condensed .td-actions { padding: 4px 6px; white-space: nowrap; }
[data-ux="v2"] #binnacle-query .table-condensed .btn { font-size: 12px; padding: 3px 8px; border-radius: var(--radius-sm); }
[data-ux="v2"] #binnacle-query .table-condensed .btn-success { background: var(--color-primary); border-color: var(--color-primary); color: white; }
[data-ux="v2"] #binnacle-query .table-condensed .btn-danger { background: var(--color-danger-soft); border-color: transparent; color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════
   ████ DESKTOP LAYOUT (≥ 900px) ████
═══════════════════════════════════════════════════════ */
.bx-desktop {
  display: none;
  flex-direction: row;
  height: 100%;
}
@media (min-width: 900px) {
  .bx-desktop { display: flex; }
}

/* ── Sidebar ── */
.bx-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0; height: 100%;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  transition: width 0.22s ease, background 0.25s, border-color 0.25s;
  position: relative; z-index: 10;
  overflow: hidden;
}
.bx-sidebar.bx-sb-collapsed { width: 56px; }

/* Sidebar top */
.bx-sb-top {
  height: 64px; padding: 0 8px 0 20px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  transition: padding 0.22s, border-color 0.25s;
}
#bx-sb-customer-name {
    font-family: Rajdhani, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .02em;
    line-height: 1;  
}
.bx-sidebar.bx-sb-collapsed .bx-sb-top { padding: 0; justify-content: center; }
.bx-sidebar.bx-sb-collapsed .bx-sb-logo { display: none; }
.bx-sb-logo {
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: 24px; font-weight: 700;
  color: var(--color-text); letter-spacing: -0.3px;
  flex: 1; white-space: nowrap; overflow: hidden;
}
.bx-sb-logo em { color: var(--color-primary); font-style: normal; }

/* sb-label: text that fades out on collapse */
.bx-sb-label {
  overflow: hidden; white-space: nowrap;
  transition: opacity 0.18s, max-width 0.22s ease;
  max-width: 200px;
}
.bx-sidebar.bx-sb-collapsed .bx-sb-label {
  opacity: 0; max-width: 0; width: 0; flex: 0 0 0 !important; pointer-events: none;
}

/* Sidebar nav */
.bx-sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 0; }
.bx-sb-section {
  padding: 6px 20px 4px;
  font-size: 10px; font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
  transition: opacity 0.18s;
}
.bx-sidebar.bx-sb-collapsed .bx-sb-section { opacity: 0; }
.bx-sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 0 16px; height: 44px;
  cursor: pointer;
  font-size: 14px; font-weight: 500;
  color: var(--color-text-muted);
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s, padding 0.22s;
  user-select: none; white-space: nowrap;
}
.bx-sidebar.bx-sb-collapsed .bx-sb-item { padding: 0; justify-content: center; }
.bx-sb-item:hover { background: var(--color-primary-soft); color: var(--color-text); }
.bx-sb-item.bx-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}
.bx-sidebar.bx-sb-collapsed .bx-sb-item.bx-active {
  border-left-color: transparent;
  border-right: 2px solid var(--color-primary);
}
.bx-sb-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.65; }
.bx-sb-item.bx-active svg, .bx-sb-item:hover svg { opacity: 1; }
.bx-sb-item img { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.65; object-fit: contain; }
.bx-sb-item.bx-active img, .bx-sb-item:hover img { opacity: 1; }

/* ── Sidebar back item (shown when inside a location group) ── */
.bx-sb-back-item {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
  padding-bottom: 6px;
  color: var(--color-primary);
}
.bx-sb-back-item svg { opacity: 1; color: var(--color-primary); }
.bx-sb-back-item .bx-sb-label { color: var(--color-primary); font-weight: 600; }

/* ── Mobile location bar (shown above icon grid when inside a location group) ── */
.bx-m-loc-bar {
  padding: 0 16px 2px;
}
.bx-m-loc-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--color-primary); font-weight: 600; font-size: 14px;
  padding: 6px 0;
}
.bx-m-loc-back-btn svg { flex-shrink: 0; }

/* Sidebar bottom */
.bx-sb-bottom {
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0; padding: 10px 0 12px;
  transition: border-color 0.25s;
  display: flex; flex-direction: column; gap: 2px;
}
.bx-sb-user-section { padding: 4px 10px; transition: padding 0.22s; }
.bx-sidebar.bx-sb-collapsed .bx-sb-user-section {
  padding: 4px 0; display: flex; justify-content: center;
}
.bx-sb-user-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 4px;
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius-sm); text-align: left;
  transition: background 0.12s;
}
.bx-sidebar.bx-sb-collapsed .bx-sb-user-btn { width: auto; padding: 6px; justify-content: center; gap: 0px; }
.bx-sb-user-btn:hover { background: var(--color-primary-soft); }
.bx-sb-user-info { flex: 1; min-width: 0; }
.bx-sb-user-name {
  font-size: 13px; font-weight: 600; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bx-sb-user-email {
  font-size: 11px; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Icon row */
.bx-sb-icon-row {
  display: flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 4px; padding: 4px 10px;
}
.bx-sidebar.bx-sb-collapsed .bx-sb-icon-row { flex-direction: column; padding: 4px 0; gap: 2px; }
.bx-sb-icon-btn {
  width: 34px; height: 34px; border: none; background: none;
  border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.bx-sb-icon-btn:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.bx-sb-icon-btn.bx-danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.bx-sb-icon-btn:active { opacity: 0.7; }

/* Collapse chevron */
.bx-sb-chevron { transition: transform 0.22s ease; }
.bx-sidebar.bx-sb-collapsed .bx-sb-chevron { transform: rotate(180deg); }
.bx-sb-collapse-btn { margin-left: auto; flex-shrink: 0; }
.bx-sidebar.bx-sb-collapsed .bx-sb-collapse-btn { margin-left: 0; }

/* Fixed popup for sidebar user menu */
.bx-sb-user-dd {
  position: fixed; z-index: 500;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 210px; padding: 6px 0;
  transform-origin: bottom left;
  transform: scale(0.92); opacity: 0;
  transition: transform 0.16s cubic-bezier(0.34,1.56,0.64,1), opacity 0.12s;
  pointer-events: none;
}
.bx-sb-user-dd.bx-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.bx-sb-user-dd-header {
  padding: 8px 14px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px;
}
.bx-sb-user-dd-name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.bx-sb-user-dd-email { font-size: 11px; color: var(--color-text-muted); }

/* ── Desktop main area ── */
.bx-d-main {
  flex: 1 1 auto; height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--color-bg);
  transition: background 0.25s;
}
.bx-d-topbar {
  height: 64px; flex-shrink: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center;
  padding: 0 28px;
  transition: background 0.25s, border-color 0.25s;
}
.bx-d-topbar-title {
  font-family: 'Rajdhani', 'Arial Narrow', sans-serif;
  font-size: 20px; font-weight: 700;
  color: var(--color-text); flex: 1;
}
.bx-d-content {
  flex: 1 1 auto; overflow: hidden;
  display: flex; flex-direction: column;
}

/* Desktop panels */
.bx-d-panel { display: none; flex: 1 1 auto; overflow: hidden; flex-direction: column; }
.bx-d-panel.bx-active { display: flex; }

/* Desktop home panel */
.bx-d-home-grid {
  flex: 1; overflow-y: auto; padding: 28px;
}
.bx-d-home-greeting { margin-bottom: 20px; }
.bx-d-home-greeting-name { font-size: 24px; font-weight: 500; color: var(--color-text); }
.bx-d-home-greeting-sub { font-size: 14px; color: var(--color-text-muted); margin-top: 3px; }
.bx-d-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px; list-style: none; margin: 0; padding: 0;
}
.bx-d-icon-card {
  background: var(--color-surface);
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  padding: 24px 10px 18px;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  cursor: pointer;
  transition: box-shadow 0.16s, transform 0.11s, border-color 0.16s, background 0.25s;
  user-select: none;
}
.bx-d-icon-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(227,127,10,0.14); transform: translateY(-1px); }
.bx-d-icon-card:active { transform: scale(0.96); }
.bx-d-icon-card img { width: 38px; height: 38px; object-fit: contain; }
.bx-d-icon-card-label { font-size: 13px; font-weight: 500; color: var(--color-text); text-align: center; line-height: 1.35; }

/* Desktop binnacle panel */
.bx-d-binnacle-panel { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.bx-d-segment-bar {
  height: 56px; padding: 8px 24px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  transition: background 0.25s, border-color 0.25s;
}
.bx-d-segment-bar .bx-segment { max-width: 360px; }
.bx-d-tab-area {
  flex: 1; overflow-y: auto; padding: 5px 5px 5px;
}
.bx-d-tab-panel { display: none; }
.bx-d-tab-panel.bx-active { display: block; }

/* Desktop form layout: two-column */
.bx-d-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.bx-d-form-grid .form-group.span-2 { grid-column: 1 / -1; }
.bx-d-form-card {
  background: var(--color-surface);
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  padding: 24px; max-width: 800px;
  transition: background 0.25s, border-color 0.25s;
}

/* Desktop consulta layout */
.bx-d-consulta-layout { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.bx-d-criteria-bar {
  background: var(--color-surface);
  border-radius: var(--radius); border: 1px solid var(--color-border);
  box-shadow: var(--shadow); padding: 14px 18px;
  transition: background 0.25s, border-color 0.25s;
  flex-shrink: 0;
}
.bx-d-results-area { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; }
.bx-d-table-wrap {
  background: var(--color-surface);
  border-radius: var(--radius); border: 1px solid var(--color-border);
  box-shadow: var(--shadow); overflow: auto; flex: 1;
  transition: background 0.25s, border-color 0.25s;
}

/* ── Desktop login overlay ── */
.bx-d-login-overlay {
  position: absolute; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  transition: background 0.25s;
}
.bx-d-login-overlay.bx-hidden { display: none; }

/* ── Customer logo ── */
.bx-d-customer-logo {
  margin-left: auto;
  display: flex; align-items: center;
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;  
}
.bx-d-customer-logo img {
  max-height: 32px; max-width: 140px;
  object-fit: contain;
}
.bx-m-customer-logo {
  position: absolute;
  bottom: var(--safe-h); left: 0; right: 0;
  display: flex; justify-content: center; align-items: center;
  padding: 12px 20px;
  pointer-events: none;
}
.bx-m-customer-logo img {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}

/* ═══════════════════════════════════════════════════════
   BITACORIX MODAL (finder results, history log)
═══════════════════════════════════════════════════════ */
[data-ux="v2"] .bitacorix-modal-back {
  position: fixed;
  background: rgba(0, 0, 0, 0.55);
  opacity: 1;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
[data-ux="v2"] .bitacorix-modal {
  position: fixed;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 14px;
  color: var(--color-text);
}
[data-ux="v2"] .bitacorix-modal-title {
  color: var(--color-text);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
[data-ux="v2"] .bitacorix-modal-close {
  color: var(--color-text-muted);
}
[data-ux="v2"] .bitacorix-modal-close:hover {
  color: var(--color-text);
}

/* ── Finder selector list ── */
[data-ux="v2"] .finder-selector ul li {
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 14px;
  padding: 8px 10px;
  margin-bottom: 2px;
}
[data-ux="v2"] .finder-selector ul li:hover {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════
   BOOTSTRAP DATETIMEPICKER
═══════════════════════════════════════════════════════ */
/* Container */
[data-ux="v2"] .bootstrap-datetimepicker-widget.dropdown-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-family: 'Barlow', system-ui, sans-serif;
}
/* Arrow tip: fill matches surface, shadow matches border */
[data-ux="v2"] .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after  { border-bottom-color: var(--color-surface); }
[data-ux="v2"] .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { border-bottom-color: var(--color-border); }
[data-ux="v2"] .bootstrap-datetimepicker-widget.dropdown-menu.top:after     { border-top-color: var(--color-surface); }
[data-ux="v2"] .bootstrap-datetimepicker-widget.dropdown-menu.top:before    { border-top-color: var(--color-border); }
/* All cells default text color */
[data-ux="v2"] .bootstrap-datetimepicker-widget table td,
[data-ux="v2"] .bootstrap-datetimepicker-widget table th {
  color: var(--color-text);
}
/* Hover: days, hours, minutes, header nav arrows */
[data-ux="v2"] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.day:hover,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.hour:hover,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.minute:hover,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.second:hover,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td span:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
}
/* Muted: prev/next-month days, disabled */
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.old,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.new,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.disabled,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.disabled:hover,
[data-ux="v2"] .bootstrap-datetimepicker-widget table th.disabled,
[data-ux="v2"] .bootstrap-datetimepicker-widget table th.disabled:hover,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td span.old,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td span.disabled,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td span.disabled:hover {
  color: var(--color-text-muted);
  background: none;
}
/* Today dot */
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.today:before {
  border-bottom-color: var(--color-primary);
}
/* Selected/active — primary instead of Bootstrap blue */
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.active,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.active:hover,
[data-ux="v2"] .bootstrap-datetimepicker-widget table td span.active {
  background-color: var(--color-primary);
  color: #fff;
  text-shadow: none;
}
[data-ux="v2"] .bootstrap-datetimepicker-widget table td.active.today:before {
  border-bottom-color: #fff;
}
/* Timepicker +/- buttons */
[data-ux="v2"] .bootstrap-datetimepicker-widget button[data-action] {
  color: var(--color-text);
  background: var(--color-surface-2);
  border-color: var(--color-border);
}
[data-ux="v2"] .bootstrap-datetimepicker-widget button[data-action]:hover {
  background: var(--color-surface-2);
  color: var(--color-primary);
}
/* Timepicker digit links (hour/minute values) */
[data-ux="v2"] .bootstrap-datetimepicker-widget a[data-action] {
  color: var(--color-primary);
}