/* =========================================================
   site.css
   - Do NOT define theme tokens here. theme.css owns tokens.
   - site.css consumes tokens and styles app behavior.
   ========================================================= */

/* =========================================================
   Base / legacy styles (token-driven)
   ========================================================= */

html, body {
  background: var(--sb-bg);
  color: var(--sb-text);
}

/* Safer baseline with Bootstrap: no body margin that breaks full-width navbar */
body {
  font-family: Arial, sans-serif;
  margin: 0;
}

/* Keep legacy header spacing minimal (Bootstrap layout already spaces content) */
header { margin-bottom: 0; }

/* Legacy nav link style (if any non-bootstrap nav exists) */
nav a {
  margin-right: 10px;
  text-decoration: none;
  color: var(--sb-link);
}
nav a:hover { text-decoration: underline; }

.nav-item a.nav-link { cursor: pointer; }

/* If you still need legacy spacing, scope it instead of global rules:
.legacy-form input { margin: 5px 0; }
.legacy-form button { margin-top: 10px; }
*/


/* =========================================================
   Bootstrap variable bridge
   - helps Bootstrap components follow sb tokens
   ========================================================= */

:root {
  --bs-body-bg: var(--sb-bg);
  --bs-body-color: var(--sb-text);
  --bs-secondary-color: var(--sb-text-muted);
  --bs-emphasis-color: var(--sb-text);

  --bs-border-color: var(--sb-border);

  --bs-tertiary-bg: var(--sb-surface);
  --bs-secondary-bg: var(--sb-surface-2);

  --bs-link-color: var(--sb-link);
  --bs-link-hover-color: var(--sb-link);

  --bs-card-bg: var(--sb-surface);
  --bs-dropdown-bg: var(--sb-surface);
}

/* Make Bootstrap's .text-muted respect your theme tokens everywhere */
.text-muted { color: var(--sb-text-muted) !important; }

/* Make common bootstrap surfaces match theme */
.card,
.modal-content,
.dropdown-menu {
  background: var(--sb-card, var(--sb-surface));
  border-color: var(--sb-border);
}


/* =========================================================
   StinkBugs busy overlay
   ========================================================= */

.sb-busy {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.15);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1080;
}
[data-bs-theme="dark"] .sb-busy { background: rgba(0,0,0,.35); }

.sb-busy.show { display: flex; }

.sb-busy .sb-busy-inner {
  background: var(--sb-surface);
  color: var(--sb-text);
  border: 1px solid var(--sb-border);
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: var(--sb-shadow-2, 0 10px 28px rgba(0,0,0,.35));
}

.sb-busy .spinner-border { width: 3rem; height: 3rem; }


/* =========================================================
   Navbar alignment + theme dropdown stability
   ========================================================= */

.navbar .navbar-nav {
  align-items: center;
  gap: .25rem;
}

.navbar .nav-link {
  display: inline-flex;
  align-items: center;
  padding: .5rem .75rem;
  line-height: 1;
  border-radius: .5rem;
}

/* Active pill readable in both themes */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  background: var(--sb-accent);
  color: #fff !important;
}
[data-bs-theme="dark"] .navbar .nav-link.active,
[data-bs-theme="dark"] .navbar .nav-link[aria-current="page"] {
  color: var(--sb-accent-contrast, #0b0f16) !important;
}
.navbar .nav-link.active:hover,
.navbar .nav-link[aria-current="page"]:hover {
  color: inherit !important;
}

/* Theme dropdown button polish */
#sb-theme-dropdown.btn {
  border-color: var(--sb-border);
  color: var(--sb-text);
  background: var(--sb-surface);
}
#sb-theme-dropdown.btn:hover { background: var(--sb-surface-2); }

/* Dropdown menu should match surfaces */
.dropdown-menu {
  background: var(--sb-surface);
  border-color: var(--sb-border);
}
.dropdown-menu .dropdown-item { color: var(--sb-text); }
.dropdown-menu .dropdown-item:hover { background: rgba(27,102,255,0.10); }
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover { background: rgba(121,168,255,0.14); }

/* Keep theme dropdown above sticky headers / builder overlays */
#sb-theme-menu.dropdown-menu {
  z-index: 9999;
}


/* =========================================================
   Logout page spacing
   ========================================================= */

#logout-page .sb-card { margin-top: 2rem; }


/* =========================================================
   PageBuilder (global bits that aren't canvas-only)
   ========================================================= */

#pb .card.is-selected { outline: 2px solid var(--sb-accent); }
#pb .card { cursor: pointer; }

.pb-block {
  cursor: pointer;
  position: relative;
}

/* Selected outline helper (JS also forces outline sometimes) */
.pb-selected {
  outline: 2px solid var(--sb-accent);
  outline-offset: 2px;
}

/* Canvas container styling (generic) */
.pb-canvas {
  border: 1px dashed var(--bs-border-color);
  border-radius: .5rem;
  padding: 1rem;
  background: var(--bs-body-bg);
}


/* =========================================================
   CRUD block cosmetics (non-infinite-scroll legacy bits)
   ========================================================= */

.sb-crud .sb-crud-head {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.sb-crud .sb-crud-head .form-control { max-width: 240px; }

[data-bs-theme="dark"] .sb-crud .table {
  --bs-table-bg: var(--sb-surface);
  --bs-table-color: var(--sb-text);
}

.sb-crud .pager .btn.disabled {
  pointer-events: none;
  opacity: .6;
}


/* =========================================================
   Builder / runtime tab contrast fixes
   ========================================================= */

#canvas .nav-tabs .nav-link.active {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
#canvas .nav-tabs .nav-link { color: var(--bs-secondary-color); }

#pb-page .nav-tabs .nav-link,
#pb-page .nav-pills .nav-link {
  color: var(--bs-body-color) !important;
}
#pb-page .nav-tabs .nav-link.active,
#pb-page .nav-tabs .nav-link.show,
#pb-page .nav-pills .nav-link.active {
  color: var(--bs-emphasis-color) !important;
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg) !important;
}
#pb-page .nav-tabs .nav-link:focus,
#pb-page .nav-tabs .nav-link:hover {
  color: var(--bs-emphasis-color) !important;
  border-color: var(--bs-border-color) var(--bs-border-color) transparent !important;
}


/* =========================================================
   Wizard top header: readability + theme polish
   - IMPORTANT: background MUST be #000 in dark mode
   ========================================================= */

.sb-wizard-top {
  position: sticky;
  top: 0;
  z-index: 1030;

  padding-top: .25rem;
  padding-bottom: .5rem;
  margin-bottom: 1rem;

  background: var(--sb-grad, var(--sb-bg));
  border-bottom: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow-1, 0 6px 10px rgba(0,0,0,0.03));
}

/* Requirement: wizard top is pure black in dark mode */
[data-bs-theme="dark"] .sb-wizard-top {
  background: #000 !important;
}

.sb-wizard-top h1 {
  color: var(--sb-text);
}

/* Current project banner */
.sb-wizard-top #sb-current-project-banner.alert {
  background: var(--sb-surface);
  color: var(--sb-text);
  border: 1px solid var(--sb-border) !important;
  box-shadow: var(--sb-shadow-1);
}

.sb-wizard-top #sb-current-project-banner .text-muted {
  color: var(--sb-text-muted) !important;
  opacity: 0.95;
}

/* Badge */
.sb-wizard-top #sb-current-project-mode.badge {
  background: var(--sb-surface-2) !important;
  color: var(--sb-text) !important;
  border: 1px solid var(--sb-border) !important;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Clear button */
.sb-wizard-top #sb-current-project-clear.btn-outline-secondary {
  color: var(--sb-text) !important;
  border-color: var(--sb-border) !important;
  background: transparent;
}
.sb-wizard-top #sb-current-project-clear.btn-outline-secondary:hover {
  background: var(--sb-accent-soft);
}

/* Step pills */
.sb-wizard-top .sb-step-labels {
  gap: .5rem;
  flex-wrap: wrap;
}

.sb-wizard-top .sb-step-pill {
  background: var(--sb-surface);
  color: var(--sb-text);
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  padding: .35rem .65rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
  box-shadow: none;
}

.sb-wizard-top .sb-step-pill-index {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-border);
  font-weight: 800;
  font-size: .7rem;
}

.sb-wizard-top .sb-step-pill-active {
  background: var(--sb-accent-soft);
}
.sb-wizard-top .sb-step-pill-active .sb-step-pill-index {
  background: var(--sb-accent);
  color: var(--sb-accent-contrast);
  border-color: transparent;
}

.sb-wizard-top .sb-step-pill-muted {
  opacity: 0.82;
}

/* Progress */
.sb-wizard-top .progress {
  background: rgba(127,127,127,.25);
}
.sb-wizard-top .progress-bar {
  background: linear-gradient(90deg, var(--sb-accent), var(--sb-accent-2));
}

/* On small screens, allow horizontal scroll so 1–4 don't get squished */
@media (max-width: 576px) {
  .sb-wizard-top .sb-step-labels {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }
}


/* =========================================================
   Component popup positioning only (theme handled elsewhere)
   ========================================================= */

#pb-component-popup {
  position: fixed;
  z-index: 9999;
}
#pb-component-popup.is-hidden { display: none; }

/* Properties popup header should follow theme tokens */
.pb-props-popup-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sb-surface);
  color: var(--sb-text);
  border-bottom: 1px solid var(--sb-border);
  cursor: grab;
  user-select: none;
}
.pb-props-popup-header * { cursor: inherit; }
.pb-props-popup-header.is-dragging { cursor: grabbing; }


/* =========================================================
   Bootstrap 5.3 utility shims (prevents dark-on-dark)
   ========================================================= */

.text-body-emphasis { color: var(--sb-text) !important; }
.text-body-secondary { color: var(--sb-text-muted) !important; }

.text-primary-emphasis { color: var(--sb-accent) !important; }
.text-success-emphasis { color: var(--sb-success, #16a34a) !important; }
.text-warning-emphasis { color: var(--sb-warning, #d97706) !important; }
.text-danger-emphasis  { color: var(--sb-danger,  #dc2626) !important; }

/* If you want subtle backgrounds and your Chromium supports it, theme.css can set these.
   Keep site.css conservative to avoid color-mix issues on older browsers. */


/* ============================================================
   StinkBugs Buttons (btn-sb*)
   - single source of truth
   ============================================================ */

:root{
  --sb-btn-radius: 12px;
  --sb-btn-pad-y: .40rem;
  --sb-btn-pad-x: .70rem;
  --sb-btn-font: 600;
  --sb-btn-shadow: 0 1px 2px rgba(0,0,0,.10);
  --sb-btn-shadow-hover: 0 6px 18px rgba(0,0,0,.14);
}

.btn.btn-sb{
  border-radius: var(--sb-btn-radius) !important;
  padding: var(--sb-btn-pad-y) var(--sb-btn-pad-x) !important;
  font-weight: var(--sb-btn-font) !important;
  line-height: 1.15 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  box-shadow: var(--sb-btn-shadow);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn.btn-sb:hover{
  transform: translateY(-1px);
  box-shadow: var(--sb-btn-shadow-hover);
}

.btn.btn-sb:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 .20rem rgba(var(--bs-primary-rgb, 13,110,253), .25), var(--sb-btn-shadow-hover);
}

.btn.btn-sb.btn-sm{
  padding: .30rem .55rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* Primary */
.btn.btn-sb-primary{
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn.btn-sb-primary:hover{ filter: brightness(0.95); }

/* Soft (subtle primary) */
.btn.btn-sb-soft{
  background: rgba(var(--bs-primary-rgb, 13,110,253), .14) !important;
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), .22) !important;
  color: var(--bs-primary) !important;
}
.btn.btn-sb-soft:hover{
  background: rgba(var(--bs-primary-rgb, 13,110,253), .20) !important;
}

/* Outline (neutral) */
.btn.btn-sb-outline{
  background: transparent !important;
  border-color: rgba(0,0,0,.18) !important;
  color: var(--bs-body-color) !important;
}
.btn.btn-sb-outline:hover{ background: rgba(0,0,0,.05) !important; }
[data-bs-theme="dark"] .btn.btn-sb-outline{
  border-color: rgba(255,255,255,.22) !important;
}
[data-bs-theme="dark"] .btn.btn-sb-outline:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Danger */
.btn.btn-sb-danger{
  background: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: #fff !important;
}
.btn.btn-sb-danger:hover{ filter: brightness(0.95); }


/* ============================================================
   Form controls (dark-mode friendly)
   ============================================================ */

.form-select,
#filter-bar select.form-select{
  background-color: var(--sb-surface, var(--bs-body-bg)) !important;
  color: var(--sb-text, var(--bs-body-color)) !important;
  border-color: var(--sb-border, var(--bs-border-color)) !important;
}

/* Focus ring that matches your theme (with safe fallback) */
.form-select:focus{
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), .55) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 13,110,253), .25) !important;
}


/* ============================================================
   CRUD Grid + Scroll primitives (Index + _Rows)
   ============================================================ */

.sb-grid{
  border-radius: 16px;
  background: var(--sb-surface, var(--bs-body-bg));
  border: 1px solid var(--sb-border, var(--bs-border-color));
  position: relative;
  overflow: visible; /* allow fixed bar logic */
}

/* Inner frame keeps rounded look without breaking fixed behaviors */
.sb-grid-frame{
  border-radius: 16px;
  overflow: hidden;
}
/* ============================================================
   FULL-WIDTH CRUD GRIDS (break out of Bootstrap containers)
   Works even if a page/view wraps content in .container / .row
   ============================================================ */

.sb-grid.sb-grid-wide{
    /* leave a nice gutter on both sides */
    width: calc(100vw - 2rem);
    max-width: none !important;

    /* break out of centered containers */
    margin-left: calc(50% - 50vw + 1rem);
    margin-right: calc(50% - 50vw + 1rem);
}

@media (min-width: 992px){
    .sb-grid.sb-grid-wide{
        width: calc(100vw - 3rem);
        margin-left: calc(50% - 50vw + 1.5rem);
        margin-right: calc(50% - 50vw + 1.5rem);
    }
}

/* Make the table actually occupy the available width */
.sb-grid.sb-grid-wide .sb-table-scroll{ width: 100%; }
.sb-grid.sb-grid-wide .sb-table-scroll > table{
    width: 100%;
    min-width: 100%;
}

/* Horizontal scroll container for wide tables */
.sb-table-scroll{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

/* Make the table capable of being wider than the container */
.sb-table-scroll > table{
  display: inline-table;
  width: max-content !important; /* beat Bootstrap width:100% */
  min-width: 100% !important;
}

/* Prevent wrapping so it actually overflows */
.sb-table-scroll th,
.sb-table-scroll td{
  white-space: nowrap;
  vertical-align: middle;
}

/* Sticky header */
.sb-table-scroll thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--sb-surface, var(--bs-body-bg));
  border-bottom: 1px solid var(--sb-border, var(--bs-border-color));
}

/* Hover polish */
.sb-table-scroll tbody tr:hover{
  background: rgba(13,110,253,.08);
}

/* Busy overlay should not block scroll */
.sb-busy-mask{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.sb-busy-pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: var(--sb-surface, var(--bs-body-bg));
  border: 1px solid var(--sb-border, var(--bs-border-color));
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  color: var(--bs-body-color);
}

/* Actions layout */
.actions{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}
.actions form{ display: inline-flex; margin: 0 !important; }
.actions .btn,
.actions button{ margin-top: 0 !important; }

/* Extra breathing room at far right so last button is not clipped */
.sb-table-scroll{ white-space: nowrap; }
.sb-scroll-spacer{
  display: inline-block;
  width: 18px; /* tweak 12–24px */
  height: 1px;
}


/* ============================================================
   Row action button color hooks (used by _Rows + Details)
   ============================================================ */

/* Details (info outline) */
.actions .sb-action-details{
  border-color: rgba(var(--bs-info-rgb), .55) !important;
  color: rgba(var(--bs-info-rgb), 1) !important;
}
.actions .sb-action-details:hover{
  background: rgba(var(--bs-info-rgb), .12) !important;
}

/* Edit (warning tint) */
.actions .sb-action-edit{
  border-color: rgba(var(--bs-warning-rgb), .55) !important;
  color: rgba(var(--bs-warning-rgb), 1) !important;
  background: rgba(var(--bs-warning-rgb), .14) !important;
}
.actions .sb-action-edit:hover{
  background: rgba(var(--bs-warning-rgb), .22) !important;
}

/* Delete (danger outline) */
.actions .sb-action-delete{
  border-color: rgba(var(--bs-danger-rgb), .55) !important;
  color: rgba(var(--bs-danger-rgb), 1) !important;
}
.actions .sb-action-delete:hover{
  background: rgba(var(--bs-danger-rgb), .12) !important;
}


/* ============================================================
   Fixed always-visible horizontal scrollbar (native)
   - used by your Index.cshtml.sbn (sb-hscroll-fixed + sb-hscroll-ghost)
   ============================================================ */

body.sb-hscroll-on{
  padding-bottom: 56px; /* prevent fixed bar from covering bottom content */
}

.sb-hscroll-fixed{
  position: fixed;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 9999;

  height: 22px;
  overflow-x: auto;
  overflow-y: hidden;

  border-radius: 12px;
  border: 1px solid var(--sb-border, var(--bs-border-color));
  background: rgba(0,0,0,.06);

  padding: 0; /* IMPORTANT: keep 0 so max-scroll parity stays correct */

  display: none; /* JS will show/hide */
  pointer-events: auto;

  scrollbar-gutter: stable;
  scrollbar-width: auto;
}
[data-bs-theme="dark"] .sb-hscroll-fixed{
  background: rgba(255,255,255,.08);
}

.sb-hscroll-ghost{
  height: 1px;
  width: 1px; /* JS sets to table scrollWidth */
}

.sb-hscroll-fixed.is-disabled{
  opacity: .45;
}

/* webkit scrollbar polish */
.sb-hscroll-fixed::-webkit-scrollbar{ height: 12px; }
.sb-hscroll-fixed::-webkit-scrollbar-track{ background: rgba(0,0,0,.10); border-radius: 999px; }
.sb-hscroll-fixed::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.32); border-radius: 999px; }
[data-bs-theme="dark"] .sb-hscroll-fixed::-webkit-scrollbar-track{ background: rgba(255,255,255,.14); }
[data-bs-theme="dark"] .sb-hscroll-fixed::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.28); }

/* Keep Bootstrap modal clickable above any custom overlays */
.modal { z-index: 2000 !important; }
.modal-backdrop { z-index: 1990 !important; }

/* Ensure our overlays never sit above modal */
.sb-busy-mask { z-index: 100 !important; }
.sb-hscroll-fixed { z-index: 90 !important; }

/* And when a modal is open, never intercept clicks */
body.modal-open .sb-busy-mask,
body.modal-open .sb-hscroll-fixed {
  pointer-events: none !important;
}

/* ============================================================
   Optional per-page width helpers
   - Add class to a page wrapper div to opt-in
  ============================================================ */
  .sb-page-85{
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1rem;
      padding-right: 1rem;
  }
  @media (min-width: 1400px){
      .sb-page-85{ max-width: 85% !important; }
  }

/* =========================================================
   Navbar mobile chevron toggle (works in light + dark)
   - Scoped + strong enough to beat Bootstrap/theme overrides
   ========================================================= */

.navbar .mobile-toggle {
    -webkit-appearance: none;
    appearance: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: .6rem !important;
    border: 1px solid var(--sb-border) !important;
    background: transparent !important;
    color: var(--sb-text) !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

    .navbar .mobile-toggle:hover {
        background: var(--sb-surface-2) !important;
    }

    .navbar .mobile-toggle:active {
        background: var(--sb-surface-2) !important;
        filter: brightness(.98);
    }

    .navbar .mobile-toggle:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 13,110,253), .35) !important;
    }

/* If your dark nav is near-black, give the toggle a subtle “badge” fill */
[data-bs-theme="dark"] .navbar .mobile-toggle {
    border-color: rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.06) !important;
}

    [data-bs-theme="dark"] .navbar .mobile-toggle:hover {
        background: rgba(255,255,255,.12) !important;
    }

/* Chevron uses currentColor so it auto-matches light/dark */
.navbar .mobile-toggle .chevron {
    width: .65rem;
    height: .65rem;
    display: inline-block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.navbar .mobile-toggle[aria-expanded="true"] .chevron {
    transform: rotate(-135deg);
}