/*
 * BAITSOL V2.0 — Platform UI/UX Rollout
 * Batch 34 / Increment 31
 *
 * Additive, scoped to .ba-v2-app. No transaction, AJAX, SQL, cart, or
 * authentication behaviour is changed by this stylesheet.
 */
.ba-v2-app{
  --ba-v2-bg:#f5f7fb;
  --ba-v2-surface:#ffffff;
  --ba-v2-surface-2:#f8fafc;
  --ba-v2-ink:#172033;
  --ba-v2-muted:#667085;
  --ba-v2-line:#e6eaf0;
  --ba-v2-primary:var(--primary,var(--bs-primary,#4f46e5));
  --ba-v2-radius:16px;
  --ba-v2-radius-sm:12px;
  --ba-v2-shadow:0 12px 34px rgba(15,23,42,.07);
  --ba-v2-shadow-hover:0 18px 46px rgba(15,23,42,.11);
  background:var(--ba-v2-bg);
  color:var(--ba-v2-ink);
}
.ba-v2-app a{transition:color .18s ease,opacity .18s ease}
.ba-v2-app .card,
.ba-v2-app .panel,
.ba-v2-app .box,
.ba-v2-app .modal-content,
.ba-v2-app .dropdown-menu{
  border-color:var(--ba-v2-line);
  border-radius:var(--ba-v2-radius);
  box-shadow:var(--ba-v2-shadow);
}
.ba-v2-app .card{background:var(--ba-v2-surface)}
.ba-v2-app .card:hover{box-shadow:var(--ba-v2-shadow-hover)}
.ba-v2-app .btn{border-radius:12px;font-weight:700;min-height:40px}
.ba-v2-app .form-control,
.ba-v2-app .form-select,
.ba-v2-app input:not([type=checkbox]):not([type=radio]),
.ba-v2-app select,
.ba-v2-app textarea{
  border-color:var(--ba-v2-line);
  border-radius:11px;
  min-height:42px;
  box-shadow:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.ba-v2-app .form-control:focus,
.ba-v2-app .form-select:focus,
.ba-v2-app input:not([type=checkbox]):not([type=radio]):focus,
.ba-v2-app select:focus,
.ba-v2-app textarea:focus{
  border-color:color-mix(in srgb,var(--ba-v2-primary) 55%,#fff);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ba-v2-primary) 12%,transparent);
}
.ba-v2-app .table{
  --bs-table-bg:transparent;
  --bs-table-border-color:var(--ba-v2-line);
  color:var(--ba-v2-ink);
}
.ba-v2-app .table thead th{
  color:var(--ba-v2-muted);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom-width:1px;
}
.ba-v2-app .table tbody tr{transition:background .16s ease}
.ba-v2-app .table tbody tr:hover{background:rgba(79,70,229,.035)}
.ba-v2-app .alert{border-radius:12px;border-width:1px}
.ba-v2-app .badge{border-radius:999px;padding:.42em .7em;font-weight:800}
.ba-v2-app .dropdown-menu{padding:7px;background:var(--ba-v2-surface)}
.ba-v2-app .dropdown-item{border-radius:9px;padding:.55rem .75rem}
.ba-v2-app .dropdown-item:hover{background:var(--ba-v2-surface-2)}
.ba-v2-app .modal-backdrop.show{opacity:.42}
.ba-v2-app .modal-header,.ba-v2-app .modal-footer{border-color:var(--ba-v2-line)}
.ba-v2-app :where(button,a,input,select,textarea):focus-visible{
  outline:3px solid color-mix(in srgb,var(--ba-v2-primary) 22%,transparent);
  outline-offset:2px;
}
.ba-v2-app .ba-v2-page,
.ba-v2-app .container-fluid.ba-v2-page{
  max-width:1600px;
  margin-inline:auto;
}
.ba-v2-app .ba-v2-surface{
  background:var(--ba-v2-surface);
  border:1px solid var(--ba-v2-line);
  border-radius:var(--ba-v2-radius);
  box-shadow:var(--ba-v2-shadow);
}
.ba-v2-app .ba-v2-section-title{font-weight:800;letter-spacing:-.02em}
.ba-v2-app .ba-v2-muted{color:var(--ba-v2-muted)!important}
.ba-v2-app .ba-v2-kpi{
  background:linear-gradient(180deg,#fff,#fbfcfe);
  border:1px solid var(--ba-v2-line);
  border-radius:14px;
  box-shadow:0 8px 26px rgba(15,23,42,.05);
}
.ba-v2-app .ba-v2-kpi .value{font-size:clamp(1.35rem,2vw,2rem);font-weight:850;letter-spacing:-.035em}
.ba-v2-app .ba-v2-kpi .label{color:var(--ba-v2-muted);font-size:.78rem;font-weight:750}
.ba-v2-app .ba-v2-sidebar{
  border-right:1px solid var(--ba-v2-line);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
}
.ba-v2-app .ba-v2-sidebar a{
  border-radius:10px;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.ba-v2-app .ba-v2-sidebar a:hover{transform:translateX(1px)}
.ba-v2-app .ba-v2-topbar{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--ba-v2-line);
  backdrop-filter:blur(16px);
}
/* FIX — invisible dark-on-dark text across the whole Developer Control
   Panel (riptd4/index.php, license.php, repair_migrations.php,
   site_pages.php, and every other riptd4/*.php page — all 15 of them
   set body class="ba-v2-app ba-v2-developer"). Each of those pages
   defines its own dark theme (--dev-dark/--dev-mid/--dev-text) and
   tries to apply it with a plain `body{background:...;color:...}`
   rule in its own inline <style>. But `.ba-v2-app{color:var(--ba-v2-
   ink)}` above is a class selector, which always outranks a bare
   `body` element selector regardless of which one appears later in
   the source — so every page's own dark-on-light-background text
   pairing was overridden by this stylesheet's LIGHT-theme dark ink
   color (#172033), while the panel's cards/sidebar (styled with their
   own explicit classes like .card-dev, .dev-sidebar) stayed dark.
   Result: dark navy text on dark navy cards — the migration file
   list, Activity Log rows, License page values, etc. all unreadable.
   Restoring the panel's own palette here at matching (two-class)
   specificity so it actually wins. */
.ba-v2-app.ba-v2-developer{
  background:var(--dev-dark,#0f172a);
  color:var(--dev-text,#e2e8f0);
}
@media (max-width:900px){
  .ba-v2-app .ba-v2-page{padding-inline:12px}
  .ba-v2-app .card,.ba-v2-app .panel,.ba-v2-app .box{border-radius:14px}
}
@media (max-width:575.98px){
  .ba-v2-app .btn{min-height:44px}
  .ba-v2-app .form-control,.ba-v2-app .form-select,
  .ba-v2-app input:not([type=checkbox]):not([type=radio]),
  .ba-v2-app select{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .ba-v2-app *,.ba-v2-app *::before,.ba-v2-app *::after{
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}