/* Bootstrap & app overrides — extracted from base.html inline styles.
   Loaded after tokens.css, before workspace.css. */

/* ── Bootstrap root overrides ─────────────────────────────────── */
:root {
  --bs-body-color: var(--color-text-primary);
  --bs-body-color-rgb: 224, 230, 237;
  --bs-body-bg: var(--color-bg-primary);
  --bs-body-bg-rgb: 13, 17, 23;
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Inherited color fixes ────────────────────────────────────── */
.card, .list-group-item, .modal-content { color: inherit; }
.form-label, .form-check-label, .form-text { color: var(--color-text-primary); }
.form-text { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-readable { color: var(--color-text-secondary); }

/* ── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb-item.active { color: var(--color-text-secondary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }

/* ── Navbar ───────────────────────────────────────────────────── */
.navbar { background: var(--color-bg-secondary) !important; border-bottom: 1px solid var(--color-border-default); }
.navbar-brand { font-weight: 700; color: var(--color-accent-blue) !important; font-size: 1.4rem; }
.nav-my-projects { padding: 4px 10px; font-size: var(--text-sm); color: var(--color-accent-green); border: 1px solid var(--color-accent-green); border-radius: 4px; text-decoration: none; transition: background 0.2s; }
.nav-my-projects:hover { background: rgba(52, 211, 153, 0.1); color: var(--color-accent-green); }
.nav-credits { font-size: var(--text-xs); color: var(--color-text-secondary); padding: 3px 8px; border: 1px solid var(--color-border-default); border-radius: 4px; white-space: nowrap; }
.nav-credits .credit-count { color: var(--color-accent-blue); font-weight: 600; }

/* ── Cards ────────────────────────────────────────────────────── */
.card { background: var(--color-bg-secondary); border: 1px solid var(--color-border-default); }
.card-header { background: var(--color-bg-tertiary); border-bottom: 1px solid var(--color-border-default); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary { background: #1f6feb; border-color: #1f6feb; }
.btn-primary:hover { background: var(--color-accent-blue-bright); border-color: var(--color-accent-blue-bright); }

/* ── Status badges ────────────────────────────────────────────── */
.badge-status-DRAFT { background: var(--color-text-muted); }
.badge-status-RUNNING { background: var(--color-accent-blue-bright); }
.badge-status-PAUSED { background: var(--color-accent-yellow); }
.badge-status-IDLE { background: var(--color-text-secondary); }
.badge-status-COMPLETED { background: var(--color-accent-green); }
.badge-status-FAILED { background: var(--color-accent-red); }
.badge-status-PENDING { background: var(--color-text-muted); }
.badge-status-SCRIPTING { background: var(--color-accent-purple); }
.badge-status-IMAGING { background: var(--color-accent-blue-bright); }
.badge-status-LAYOUT { background: #06b6d4; }
.badge-status-ASSEMBLING { background: #f59e0b; }

/* ── Pipeline tasks ───────────────────────────────────────────── */
.pipeline-task { padding: 6px 10px; border-left: 3px solid var(--color-border-default); margin-bottom: 4px; font-size: 0.85rem; }
.pipeline-task.COMPLETED { border-left-color: var(--color-accent-green); }
.pipeline-task.IN_PROGRESS { border-left-color: var(--color-accent-blue-bright); }
.pipeline-task.FAILED { border-left-color: var(--color-accent-red); }
.pipeline-task.GATE_PAUSED { border-left-color: var(--color-accent-yellow); }

/* ── Misc ─────────────────────────────────────────────────────── */
.panel-card img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.gate-alert { border: 1px solid var(--color-accent-yellow); background: var(--color-bg-secondary); }
#ws-status { font-size: var(--text-xs); }
.ws-connected { color: var(--color-accent-green); }
.ws-disconnected { color: var(--color-accent-red); }
.nav-link.active, .btn.nav-active { border-bottom: 2px solid var(--color-accent-blue); }

/* ── Dark-theme toggle switches ───────────────────────────────── */
.form-switch .form-check-input {
  background-color: var(--color-bg-tertiary);
  border-color: var(--color-text-muted);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.25);
  border-color: var(--color-accent-blue);
}

/* ── Text selection control ───────────────────────────────────── */
label,
.badge,
.btn,
.nav-link,
.edit-group-tab,
.edit-accordion-header,
.edit-tool-btn,
.edit-tool-badge,
.edit-breadcrumb,
.edit-bottom-bar,
.card-header,
.status-indicator,
.form-label {
  user-select: none;
  -webkit-user-select: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
.form-control,
pre,
code,
[contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}

/* ── Light theme: neutralize Bootstrap dark utilities ─────── */
[data-theme="light"] .bg-dark { background: var(--color-bg-secondary) !important; }
[data-theme="light"] .text-light { color: var(--color-text-primary) !important; }
[data-theme="light"] .text-white { color: var(--color-text-primary) !important; }
[data-theme="light"] .border-secondary { border-color: var(--color-border-default) !important; }
[data-theme="light"] .dropdown-menu-dark {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}
[data-theme="light"] .dropdown-menu-dark .dropdown-item {
  color: var(--color-text-primary);
}
[data-theme="light"] .dropdown-menu-dark .dropdown-item:hover {
  background-color: var(--color-bg-tertiary);
}
[data-theme="light"] .table-dark {
  --bs-table-bg: var(--color-bg-secondary);
  --bs-table-color: var(--color-text-primary);
  --bs-table-border-color: var(--color-border-default);
}
[data-theme="light"] .form-control.bg-dark {
  background: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-default) !important;
}
[data-theme="light"] .form-control.text-light {
  color: var(--color-text-primary) !important;
}
[data-theme="light"] .modal-content.bg-dark {
  background: var(--color-bg-primary) !important;
}
[data-theme="light"] .btn-close-white {
  filter: none;
}

/* Light theme body overrides */
[data-theme="light"] body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}
[data-theme="light"] .navbar {
  background: var(--color-bg-secondary) !important;
  border-bottom-color: var(--color-border-default);
}
[data-theme="light"] .card {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}
[data-theme="light"] .card-header {
  background: var(--color-bg-tertiary);
  border-bottom-color: var(--color-border-default);
}

/* Light theme form switches */
[data-theme="light"] .form-switch .form-check-input {
  background-color: #c1c7cd;
  border-color: #a1a7ad;
}
[data-theme="light"] .form-switch .form-check-input:checked {
  background-color: var(--color-accent-green);
  border-color: var(--color-accent-green);
}

/* Light theme shadows (subtle gray instead of glow) */
[data-theme="light"] .ws-entity-card:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Light theme images need borders for definition */
[data-theme="light"] .panel-card img,
[data-theme="light"] .scratch-card img {
  border: 1px solid var(--color-border-default);
}

/* ── Mobile navbar ───────────────────────────────────────────── */

/* Hamburger toggler sizing + brand spacing */
.navbar-toggler { padding: 0.2rem 0.4rem; font-size: 0.85rem; border-color: var(--color-border-default); }
.navbar-toggler:focus { box-shadow: none; }
@media (max-width: 575.98px) {
  .navbar-brand { font-size: 1.1rem !important; }
}

/* When collapsed on mobile, stack nav items vertically */
@media (max-width: 991.98px) {
  .navbar-nav-items {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.75rem 0;
  }
  .navbar-nav-items .btn { text-align: left; }
  .navbar-nav-items .dropdown { width: 100%; }
  .navbar-nav-items .dropdown .btn { width: 100%; text-align: left; }
  .navbar-nav-items .nav-my-projects { text-align: center; }
  /* Truncate long email on mobile */
  .nav-user-email {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* ── Mobile general overflow prevention ──────────────────────── */

@media (max-width: 575.98px) {
  /* Prevent horizontal overflow on body */
  body { overflow-x: hidden; }

  /* Tables: horizontal scroll rather than overflow */
  .table-responsive-sm, .admin-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Long code/pre blocks */
  pre, code { word-break: break-all; }

  /* Wizard step bar: allow horizontal scroll */
  .wizard-steps { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Mobile toast popups ─────────────────────────────────────── */

@media (max-width: 575.98px) {
  #global-toast-container,
  .ws-toast-container {
    left: 0.5rem !important;
    right: 0.5rem !important;
    bottom: 0.5rem !important;
    padding: 0 !important;
    max-width: 100vw;
  }
  #global-toast-container .toast,
  .ws-toast-container .toast {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 0.78rem;
  }
  #global-toast-container .toast-header,
  .ws-toast-container .toast-header {
    font-size: 0.78rem;
    padding: 0.35rem 0.6rem;
  }
  #global-toast-container .toast-body,
  .ws-toast-container .toast-body {
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
  }
}