/* ── Global font scale ────────────────────────────────────────────────────── */
html { font-size: 13px; }

/* ── Tab bar (VS Code-style) ──────────────────────────────────────────────── */
.tab-bar {
  background-color: var(--bs-secondary-bg);
  min-height: 36px;
}

#tabList {
  scrollbar-width: none;
}
#tabList::-webkit-scrollbar { display: none; }

.editor-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.6rem 0 0.75rem;
  min-width: 90px;
  max-width: 200px;
  height: 36px;
  cursor: pointer;
  border-right: 1px solid var(--bs-border-color);
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  flex-shrink: 0;
  position: relative;
  white-space: nowrap;
  user-select: none;
  transition: background-color 0.12s, color 0.12s;
}

.editor-tab:hover {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.editor-tab.active {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-weight: 500;
}

.editor-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--bs-primary);
}

.tab-name {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-close {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.1s, background-color 0.1s;
}

.editor-tab:hover .tab-close,
.editor-tab.active .tab-close {
  opacity: 0.55;
}

.editor-tab:hover .tab-close:hover,
.editor-tab.active .tab-close:hover {
  opacity: 1;
  background-color: var(--bs-danger-bg-subtle);
}

.tab-add-btn {
  border: none;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 1.15rem;
  padding: 0 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.12s, color 0.12s;
  flex-shrink: 0;
}

.tab-add-btn:hover {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* ── KPI bar (sticky inside #contentArea) ────────────────────────────────── */
.kpi-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem;
  font-size: 0.875rem;
  background-color: var(--bs-body-bg);
}

/* ── Preview limit active state ───────────────────────────────────────────── */
.preview-limit.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* ── Shell layout ─────────────────────────────────────────────────────────── */

/* Left navigation */
#leftNav {
  width: 210px;
  min-width: 210px;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.22s ease, min-width 0.22s ease;
  scrollbar-width: thin;
}

#leftNav.collapsed {
  width: 52px;
  min-width: 52px;
}

/* Right panel */
#rightPanel {
  display: flex;
  flex-direction: column;
  width: 200px;
  min-width: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Content area (scrollable main pane) */
#contentArea {
  scrollbar-width: thin;
}

/* ── Left nav items ───────────────────────────────────────────────────────── */
.nav-link-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  margin: 0 0.35rem;
  border-radius: 0.375rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: 0.875rem;
  user-select: none;
  transition: background-color 0.15s;
}

.nav-link-item i {
  font-size: 1.05rem;
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
}

.nav-link-item:hover:not(.disabled) {
  background-color: var(--bs-secondary-bg);
}

.nav-link-item.active {
  background-color: var(--bs-primary);
  color: #fff !important;
}

.nav-link-item.disabled {
  opacity: 0.38;
  pointer-events: none;
}

/* Labels slide out when collapsed */
.nav-label {
  transition: opacity 0.15s ease;
  overflow: hidden;
}

#leftNav.collapsed .nav-label {
  opacity: 0;
}

/* Section headers */
.nav-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  padding: 0.6rem 1.1rem 0.2rem;
  white-space: nowrap;
  transition: opacity 0.15s;
}

#leftNav.collapsed .nav-section-label {
  opacity: 0;
}

.nav-divider {
  border-color: var(--bs-border-color);
  opacity: 1;
}

#leftNav.collapsed .nav-divider {
  opacity: 0.25;
}

/* Upload button in left nav */
.nav-upload-btn {
  color: var(--bs-primary);
  font-weight: 500;
}
.nav-upload-btn:hover {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

/* Modeling selector labels */
.model-sel-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* ── Right panel: dtype filter buttons ────────────────────────────────────── */
.dtype-filter {
  border: 1px solid var(--bs-border-color);
  background: transparent;
  color: var(--bs-body-color);
  text-align: left;
  transition: background-color 0.12s, color 0.12s;
}

.dtype-filter:hover {
  background-color: var(--bs-secondary-bg);
}

.dtype-filter.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* ── Sticky navbar blur ───────────────────────────────────────────────────── */
.navbar {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Drop zone ────────────────────────────────────────────────────────────── */
.drop-zone {
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border-style: dashed !important;
  border-color: var(--bs-border-color);
  border-width: 2px !important;
}

.drop-zone:hover,
.drop-zone.drop-active {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary) !important;
}

.drop-active * {
  pointer-events: none;
}

/* ── Preview table — truncate wide cells ──────────────────────────────────── */
.preview-table th,
.preview-table td {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════════
   COLOUR THEME
   Light  — primary #96B6C5  secondary #ADC4CE  third #EEE0C9  bg #F1F0E8
   Dark   — bg #0D1164  purple #640D5F  accent #EA2264  orange #F78D60
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Light mode tokens ────────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  --bt-primary:              #96B6C5;
  --bt-secondary:            #ADC4CE;
  --bt-third:                #f1f1f1;
  --bt-bg:                   #F1F0E8;

  --bs-body-bg:              #ffffff;
  --bs-body-bg-rgb:          255, 255, 255;
  --bs-secondary-bg:         #cccccc;
  --bs-secondary-bg-rgb:     204, 204, 204;
  --bs-tertiary-bg:          #e7e7e7;

  --bs-primary:              #96B6C5;
  --bs-primary-rgb:          150, 182, 197;
  --bs-primary-bg-subtle:    #d8eaef;
  --bs-primary-border-subtle:#b4d0db;
  --bs-primary-text-emphasis:#4e8fa3;

  --bs-link-color:           #4e8fa3;
  --bs-link-hover-color:     #3a7a8d;

  --bs-border-color:         #d5cfc3;
  --bs-body-color:           #2a2a2a;
  --bs-secondary-color:      rgba(42, 42, 42, .58);
}

/* ── Dark mode tokens ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --bt-primary:              #EA2264;
  --bt-secondary:            #640D5F;
  --bt-third:                #F78D60;
  --bt-bg:                   #0D1164;

  --bs-body-bg:              #050622;
  --bs-body-bg-rgb:          5, 6, 34;
  --bs-secondary-bg:         #05051b;
  --bs-secondary-bg-rgb:     5, 5, 27;
  --bs-tertiary-bg:          #14156e;

  --bs-primary:              #EA2264;
  --bs-primary-rgb:          234, 34, 100;
  --bs-primary-bg-subtle:    #4a0a28;
  --bs-primary-border-subtle:#8a1042;
  --bs-primary-text-emphasis:#f06090;

  --bs-link-color:           #F78D60;
  --bs-link-hover-color:     #f9a882;

  --bs-border-color:         #2a2d82;
  --bs-body-color:           #e8e6f4;
  --bs-secondary-color:      rgba(232, 230, 244, .58);
}

/* ── Bootstrap component overrides ───────────────────────────────────────── */

/* .btn-primary */
.btn-primary {
  --bs-btn-bg:                 #96B6C5;
  --bs-btn-border-color:       #96B6C5;
  --bs-btn-hover-bg:           #7aa3b5;
  --bs-btn-hover-border-color: #7aa3b5;
  --bs-btn-active-bg:          #6a95a8;
  --bs-btn-active-border-color:#6a95a8;
  --bs-btn-color:              #fff;
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-color:       #fff;
  --bs-btn-disabled-bg:        #96B6C5;
  --bs-btn-disabled-border-color:#96B6C5;
  --bs-btn-focus-shadow-rgb:   150, 182, 197;
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg:                 #EA2264;
  --bs-btn-border-color:       #EA2264;
  --bs-btn-hover-bg:           #c81856;
  --bs-btn-hover-border-color: #c81856;
  --bs-btn-active-bg:          #b01248;
  --bs-btn-active-border-color:#b01248;
  --bs-btn-disabled-bg:        #EA2264;
  --bs-btn-disabled-border-color:#EA2264;
  --bs-btn-focus-shadow-rgb:   234, 34, 100;
}

/* .btn-outline-primary */
.btn-outline-primary {
  --bs-btn-color:              #4e8fa3;
  --bs-btn-border-color:       #96B6C5;
  --bs-btn-hover-bg:           #96B6C5;
  --bs-btn-hover-border-color: #96B6C5;
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-bg:          #7aa3b5;
  --bs-btn-active-border-color:#7aa3b5;
  --bs-btn-active-color:       #fff;
  --bs-btn-focus-shadow-rgb:   150, 182, 197;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color:              #F78D60;
  --bs-btn-border-color:       #EA2264;
  --bs-btn-hover-bg:           #EA2264;
  --bs-btn-hover-border-color: #EA2264;
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-bg:          #c81856;
  --bs-btn-active-border-color:#c81856;
  --bs-btn-active-color:       #fff;
  --bs-btn-focus-shadow-rgb:   234, 34, 100;
}

/* Colour utilities */
.bg-primary          { background-color: #96B6C5 !important; }
.text-primary        { color:            #4e8fa3  !important; }
.border-primary      { border-color:     #96B6C5  !important; }
[data-bs-theme="dark"] .bg-primary     { background-color: #EA2264 !important; }
[data-bs-theme="dark"] .text-primary   { color:            #F78D60  !important; }
[data-bs-theme="dark"] .border-primary { border-color:     #EA2264  !important; }

/* Spinner / progress primary */
.text-primary .spinner-border,
.spinner-border.text-primary { color: #96B6C5 !important; }
[data-bs-theme="dark"] .spinner-border.text-primary { color: #EA2264 !important; }

.progress-bar { background-color: #96B6C5; }
[data-bs-theme="dark"] .progress-bar { background-color: #EA2264; }

/* Active tab underline */
.editor-tab.active::after { background-color: #96B6C5; }
[data-bs-theme="dark"] .editor-tab.active::after { background-color: #EA2264; }

/* Nav active item */
.nav-link-item.active { background-color: #96B6C5 !important; }
[data-bs-theme="dark"] .nav-link-item.active { background-color: #EA2264 !important; }

/* Preview-limit & dtype active pills */
.preview-limit.active,
.dtype-filter.active {
  background-color: #96B6C5 !important;
  border-color:     #96B6C5 !important;
  color:            #fff    !important;
}
[data-bs-theme="dark"] .preview-limit.active,
[data-bs-theme="dark"] .dtype-filter.active {
  background-color: #EA2264 !important;
  border-color:     #EA2264 !important;
  color:            #fff    !important;
}

/* Drop zone hover */
.drop-zone:hover,
.drop-zone.drop-active {
  background-color: var(--bs-primary-bg-subtle);
  border-color:     var(--bt-primary) !important;
}

/* Focus ring */
:focus-visible {
  outline-color: var(--bt-primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS  (< 768 px)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Nav backdrop overlay */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1040;
  cursor: pointer;
}
.nav-backdrop.active { display: block; }

@media (max-width: 767.98px) {

  /* Fix viewport height (handles iOS address bar) */
  body {
    height: 100dvh !important;
    overflow: hidden;
  }

  /* Fixed navbar so it doesn't scroll away */
  nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: 52px;
  }

  /* Fixed footer at bottom */
  .app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: 30px;
  }

  /* Push the app shell between navbar and footer */
  body > div.d-flex {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 30px;
    height: auto !important;
    margin-top: 0;
  }

  /* Hide version badge to save navbar space */
  nav.navbar .badge { display: none !important; }

  /* Left nav: slide-over overlay */
  #leftNav {
    position: fixed !important;
    top: 52px;
    left: 0;
    bottom: 30px;
    z-index: 1045;
    width: 230px !important;
    min-width: 230px !important;
    background: var(--bs-body-bg);
    transform: translateX(-100%);
    transition: transform 0.24s ease !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    border-right: 1px solid var(--bs-border-color) !important;
    overflow-y: auto;
  }

  /* Show when open */
  #leftNav.mobile-open {
    transform: translateX(0);
  }

  /* Undo desktop collapsed styles on mobile */
  #leftNav.collapsed {
    width: 230px !important;
    min-width: 230px !important;
    transform: translateX(-100%);
  }
  #leftNav.collapsed.mobile-open { transform: translateX(0); }
  #leftNav .nav-label,
  #leftNav .nav-section-label,
  #leftNav .nav-divider { opacity: 1 !important; }

  /* Main pane: full viewport width */
  #mainPane { min-width: 0; }

  /* Right panel: hidden on mobile */
  #rightPanel { display: none !important; }

  /* Content area: more breathing room */
  #contentArea { -webkit-overflow-scrolling: touch; }

  /* Reduce page padding */
  .page-view.p-4 { padding: 0.875rem !important; }

  /* KPI bar: horizontal scroll, no wrapping */
  .kpi-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem !important;
    font-size: 0.78rem;
    scrollbar-width: none;
  }
  .kpi-bar::-webkit-scrollbar { display: none; }
  .kpi-bar .vr { display: none; }
  .kpi-bar > * { flex-shrink: 0; }

  /* Tab bar: tighter tabs */
  .editor-tab { min-width: 72px; max-width: 140px; }

  /* Row cards: full width stacking is handled by Bootstrap col-* */
  /* But ensure internal cards don't get fixed heights that break */
  .card-body[style*="max-height"] { max-height: 220px !important; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.app-footer {
  height: 30px;
  font-size: 0.72rem;
}