/* OrchestrOS layout system */

/* ═══════════════════════════════════════════════════════════════
   Scrollbar theming — subtle, dark-themed, minimal track
   ═══════════════════════════════════════════════════════════════ */

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--c-border, #2e3348);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-dim, #5c6178);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-border, #2e3348) transparent;
}

.orchestros-shell {
  display: flex;
  height: 100%;
  width: 100%;
}

.orchestros-nav {
  width: var(--nav-width);
  min-width: var(--nav-width);
  height: 100%;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.orchestros-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.orchestros-header {
  height: var(--header-height);
  min-height: var(--header-height);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  gap: var(--sp-4);
}

.orchestros-content {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.orchestros-surface-host {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6);
  min-width: 0;
}

.orchestros-assistant {
  width: var(--assistant-width, var(--guidance-width));
  min-width: var(--assistant-width, var(--guidance-width));
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  overflow-y: auto;
  padding: var(--sp-4);
  transition: width 250ms var(--ease-out),
              min-width 250ms var(--ease-out),
              padding 250ms var(--ease-out);
}

.orchestros-assistant--collapsed {
  width: var(--assistant-collapsed-width, var(--guidance-collapsed-width));
  min-width: var(--assistant-collapsed-width, var(--guidance-collapsed-width));
  padding: var(--sp-4) var(--sp-1);
  overflow: hidden;
}

/* Utility classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

.p-2 { padding: var(--sp-2); }
.p-3 { padding: var(--sp-3); }
.p-4 { padding: var(--sp-4); }
.p-6 { padding: var(--sp-6); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-muted { color: var(--c-text-muted); }
.text-dim { color: var(--c-text-dim); }
.text-accent { color: var(--c-accent); }
.text-success { color: var(--c-success); }
.text-warning { color: var(--c-warning); }
.text-danger { color: var(--c-danger); }

.font-mono { font-family: var(--font-mono); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card */
.card {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.card--hoverable:hover {
  border-color: var(--c-accent);
  cursor: pointer;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.badge--accent { background: var(--c-accent-muted); color: var(--c-accent); }
.badge--success { background: var(--c-success-muted); color: var(--c-success); }
.badge--warning { background: var(--c-warning-muted); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-muted); color: var(--c-danger); }
.badge--orchestros-core { background: var(--c-orchestros-core-muted); color: var(--c-orchestros-core); }

/* Lane badge */
.badge--rapid { background: rgba(245,158,11,0.15); color: var(--c-lane-rapid); }
.badge--standard { background: var(--c-accent-muted); color: var(--c-lane-standard); }
.badge--deep { background: rgba(167,139,250,0.15); color: var(--c-lane-deep); }

/* Role indicator */
.role-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.role-indicator--director { color: var(--c-role-director); background: rgba(245,158,11,0.12); }
.role-indicator--architect { color: var(--c-role-architect); background: rgba(167,139,250,0.12); }
.role-indicator--executor { color: var(--c-role-executor); background: var(--c-accent-muted); }
.role-indicator--verifier { color: var(--c-role-verifier); background: var(--c-success-muted); }
.role-indicator--closer { color: var(--c-role-closer); background: rgba(244,114,182,0.12); }
.role-indicator--evolution { color: var(--c-role-evolution); background: rgba(244,114,182,0.12); } /* backward compat */

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background: var(--c-accent);
  color: #fff;
}
.btn--primary:hover { background: var(--c-accent-hover); }

.btn--secondary {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.btn--secondary:hover { border-color: var(--c-accent); }

.btn--ghost {
  color: var(--c-text-muted);
}
.btn--ghost:hover { color: var(--c-text); background: var(--c-surface-raised); }

.btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-4);
  text-align: center;
  color: var(--c-text-muted);
}

.empty-state__title {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--sp-2);
  color: var(--c-text);
}

.empty-state__description {
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
  max-width: 360px;
}

/* Loading state */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  gap: var(--sp-3);
  color: var(--c-text-muted);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Section heading */
.section-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  padding: var(--sp-2) var(--sp-4);
}

/* Mobile nav elements — hidden by default, shown at ≤480px */
.nav-mobile-toggle,
.nav-mobile-backdrop { display: none; }

/* ── Touch & Interaction ─────────────────────────────────────────────────── */
button, .btn, [role="button"], input, textarea, select, a {
  touch-action: manipulation; /* prevent double-tap zoom delay */
}

/* Scope hover effects to devices that support hover (not touch) */
@media (hover: hover) {
  .btn:hover { filter: brightness(1.1); }
}

/* Touch feedback for all interactive elements */
button:active, .btn:active, [role="button"]:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* Minimum touch target for buttons */
.btn {
  min-height: var(--touch-target-min);
}

/* ── Responsive: Tablet (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --nav-width: 56px;
    --guidance-width: 0px;
  }

  .orchestros-assistant {
    display: none;
  }

  .nav-label {
    display: none;
  }
}

/* ── Responsive: Mobile (≤480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --nav-width: 0px;
    --guidance-width: 0px;
  }

  /* Hide nav by default on phone — shown via hamburger toggle */
  .orchestros-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    z-index: 1000;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out);
    overflow-y: auto;
  }

  .orchestros-nav.nav--mobile-open {
    transform: translateX(0);
  }

  /* Show nav labels when mobile menu is open */
  .orchestros-nav.nav--mobile-open .nav-label {
    display: inline;
  }

  /* Backdrop overlay when nav is open */
  .nav-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .nav-mobile-backdrop.active {
    display: block;
  }

  /* Hamburger toggle button (visible only on mobile) */
  .nav-mobile-toggle {
    display: flex;
    position: fixed;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 998;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    align-items: center;
    justify-content: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    font-size: var(--text-lg);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }

  /* Push main content to account for no nav + hamburger button */
  .orchestros-main {
    padding-top: calc(var(--touch-target-min) + var(--sp-4));
  }

  /* Form inputs: prevent iOS zoom on focus */
  input, textarea, select {
    font-size: var(--font-input-mobile) !important;
  }

  /* Safe area insets for notched devices */
  .orchestros-shell {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Constrained containers use viewport-relative sizing */
  .portal-form-container,
  .portal-landing__description {
    max-width: min(90vw, 400px);
  }
}