/*
 * Indagate application theme.
 *
 * Ported from the current yta-fe Indagate brand stack (PR #94 onward). The
 * product shell and the sign-in screen now share one visual language: DM Sans
 * for interface copy, Manrope for the wordmark, Geist Mono for operational
 * data, graphite surfaces, violet interaction states, and square geometry.
 *
 * This file intentionally loads after styles.css. The original component
 * layout remains intact while these tokens and component rules own the visual
 * presentation of the authenticated application.
 */

:root {
  color-scheme: dark;

  --paper: #0a0a0f;
  --paper-2: #14141c;
  --paper-3: #1c1c26;
  --rule: #23232e;
  --rule-strong: #34343f;
  --ink: #f5f5f7;
  --ink-2: #b4b4c2;
  --ink-3: #85859a;
  --violet: #6c4df6;
  --violet-2: #8f77fa;
  --violet-3: #c0b0fd;
  --violet-text: #b9a8fc;
  --violet-tint: rgba(108, 77, 246, 0.14);
  --pass: #5fd39a;
  --warn: #e6b45c;
  --fail: #f0798c;
  --sans: "DM Sans var", "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wordmark: "Manrope var", Manrope, var(--sans);
  --mono: "Geist Mono var", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Compatibility aliases used by the existing application components. */
  --bg: var(--paper);
  --surface: var(--paper-2);
  --surface-2: var(--paper-3);
  --line: var(--rule);
  --muted: var(--ink-3);
  --text: var(--ink);
  --blue: var(--violet-2);
  --cyan: var(--violet-text);
  --purple: var(--violet);
  --green: var(--pass);
  --orange: var(--warn);
  --red: var(--fail);
  --brand-name-accent: var(--ink);
  --shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);

  font-family: var(--sans);
}

html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-image: none;
}

::selection {
  background: rgba(143, 119, 250, 0.35);
  color: var(--ink);
}

.platform-shell,
body > .modal {
  color: var(--ink);
  font-family: var(--sans);
}

/* Square geometry is the most recognisable rule in the Indagate system. */
.platform-shell *,
body > .modal,
body > .modal * {
  border-radius: 0 !important;
}

.platform-shell :where(
    .eyebrow i,
    .sidebar-runtime > span i,
    .sidebar-status i,
    .metric-card small i,
    .live-dot,
    .monitor-state-dot,
    .integration-state::before,
    .security-panel li i,
    .api-token-row > i
  ) {
  border-radius: 50% !important;
}

.platform-shell button,
.platform-shell input,
.platform-shell select,
.platform-shell textarea,
.platform-shell .sidebar-runtime,
.platform-shell .user-button > span,
.platform-shell .profile-avatar,
.platform-shell .metric-card,
.platform-shell .panel,
.platform-shell .device-card,
.platform-shell .runtime-screen,
.platform-shell .oled,
.platform-shell .integration-type,
.platform-shell .workflow-stage,
.platform-shell .status-pill,
body > .modal input,
body > .modal select,
body > .modal textarea,
body > .modal button {
  border-radius: 0;
}

.platform-shell :focus-visible,
body > .modal :focus-visible {
  outline: 2px solid var(--violet-2);
  outline-offset: 3px;
}

.platform-shell h1,
.platform-shell h2,
.platform-shell h3,
.platform-shell h4,
body > .modal h1,
body > .modal h2,
body > .modal h3 {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
}

.platform-shell p,
.platform-shell small,
body > .modal p,
body > .modal small {
  color: var(--ink-2);
}

.platform-shell code,
.platform-shell pre,
.platform-shell kbd,
body > .modal code,
body > .modal pre,
body > .modal kbd {
  font-family: var(--mono);
}

.brand {
  gap: 0.55rem;
}

.brand img {
  width: 2rem;
  height: 2rem;
}

.brand strong {
  color: var(--ink);
  font-family: var(--wordmark);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brand small {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.2em;
}

/* Application shell ------------------------------------------------------ */

.platform-shell {
  grid-template-columns: 15rem minmax(0, 1fr);
  background: var(--paper);
}

.sidebar {
  width: 15rem;
  padding: 1.35rem 0.8rem 1rem;
  border-color: var(--rule);
  background: rgba(10, 10, 15, 0.98);
  backdrop-filter: none;
}

.sidebar-brand {
  padding: 0.15rem 0.7rem 1.65rem;
}

.sidebar nav {
  gap: 0.2rem;
}

.nav-group-label {
  display: block;
  margin: 1rem 0.7rem 0.35rem;
  color: var(--ink-3);
  font: 500 0.57rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-group-label:first-child {
  margin-top: 0;
}

.nav-item {
  min-height: 2.55rem;
  grid-template-columns: 1.15rem 1fr auto;
  gap: 0.65rem;
  padding: 0 0.7rem;
  border: 1px solid transparent;
  border-left-width: 3px;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 500;
  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    color 180ms ease-out;
}

.nav-item:hover {
  border-color: var(--rule);
  border-left-color: var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink-2);
}

.nav-item.active {
  border-color: rgba(108, 77, 246, 0.24);
  border-left-color: var(--violet);
  background: var(--violet-tint);
  box-shadow: none;
  color: var(--ink);
}

.nav-icon {
  width: 1rem;
  height: 1rem;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.nav-item.active .nav-icon {
  color: var(--violet-text);
}

.nav-item b {
  min-width: 1.35rem;
  padding: 0.12rem 0.3rem;
  border: 1px solid var(--rule);
  background: var(--paper-3);
  color: var(--ink-2);
  font: 500 0.56rem/1.2 var(--mono);
}

.sidebar-runtime {
  padding: 0.9rem;
  border-color: var(--rule);
  background: var(--paper-2);
}

.sidebar-runtime > span,
.sidebar-status {
  color: var(--ink-3);
}

.sidebar-runtime > span {
  font-size: 0.65rem;
}

.sidebar-runtime b {
  color: var(--ink-2);
  font: 500 0.68rem/1.4 var(--mono);
}

.sidebar-runtime small {
  color: var(--ink-3);
  font-size: 0.58rem;
}

.sidebar-runtime > span i,
.sidebar-status i {
  background: var(--pass);
  box-shadow: 0 0 0.65rem rgba(95, 211, 154, 0.48);
}

.platform-header {
  min-height: 4rem;
  padding: 0 1.5rem;
  border-color: var(--rule);
  background: rgba(10, 10, 15, 0.96);
  backdrop-filter: blur(14px);
}

.breadcrumb {
  color: var(--ink-3);
  font-size: 0.7rem;
}

.breadcrumb b {
  color: var(--ink-2);
  font-weight: 500;
}

.header-actions {
  gap: 0.65rem;
}

.workspace-picker {
  color: var(--ink-3);
  font: 500 0.56rem/1.4 var(--mono);
  letter-spacing: 0.12em;
}

.workspace-picker select,
.tenant-selector select,
.panel-heading select {
  min-height: 2.35rem;
  border-color: var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--sans);
}

.header-add,
.platform-shell .primary-button,
body > .modal .primary-button {
  min-height: 2.4rem;
  border: 1px solid #2a2a36;
  border-left: 3px solid var(--violet);
  background: var(--paper-3);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
  box-shadow: 0 3px 12px 3px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition:
    background-color 220ms ease-out,
    border-color 220ms ease-out;
}

.header-add:hover,
.platform-shell .primary-button:hover,
body > .modal .primary-button:hover {
  border-left-color: var(--violet-2);
  background: #23232e;
}

.user-button {
  gap: 0.65rem;
  color: var(--ink-2);
}

.user-button > span,
.profile-avatar {
  border: 1px solid rgba(143, 119, 250, 0.5);
  background: var(--violet-tint);
  color: var(--violet-text);
  font-family: var(--mono);
}

.user-button b {
  color: var(--ink);
  font-weight: 500;
}

.user-button small {
  color: var(--ink-3);
}

#platform-main {
  width: min(1440px, 100%);
  padding: 2rem clamp(1.25rem, 3vw, 3rem) 5rem;
}

.view.active {
  animation-duration: 160ms;
}

.view-heading {
  min-height: 4.75rem;
  margin-bottom: 1.5rem;
}

.view-heading h1 {
  margin: 0.65rem 0 0.25rem;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.view-heading p {
  color: var(--ink-2);
  font-size: 0.78rem;
}

.eyebrow,
.panel-heading > div > span,
.release-hero > div > span {
  color: var(--violet-text);
  font: 500 0.61rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow i {
  background: var(--violet-2);
  box-shadow: 0 0 0.75rem rgba(143, 119, 250, 0.55);
}

/* Controls --------------------------------------------------------------- */

.platform-shell button,
body > .modal button {
  font-family: var(--sans);
}

.platform-shell input,
.platform-shell select,
.platform-shell textarea,
body > .modal input,
body > .modal select,
body > .modal textarea {
  border-color: var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
}

.platform-shell input::placeholder,
.platform-shell textarea::placeholder,
body > .modal input::placeholder,
body > .modal textarea::placeholder {
  color: var(--ink-3);
}

.refresh-button,
.secondary-button,
.danger-button,
.platform-shell :where(.panel-heading button, .release-row button, .device-card-footer button),
body > .modal .secondary-button {
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-2);
}

.refresh-button:hover,
.secondary-button:hover,
.platform-shell :where(.panel-heading button, .release-row button, .device-card-footer button):hover,
body > .modal .secondary-button:hover {
  border-color: var(--ink-3);
  background: var(--paper-3);
  color: var(--ink);
}

.danger-button,
body > .modal .danger-button {
  border-color: rgba(240, 121, 140, 0.45);
  color: var(--fail);
}

/* Surfaces --------------------------------------------------------------- */

.platform-shell :where(
    .metric-card,
    .panel,
    .device-card,
    .release-hero,
    .release-list,
    .profile-panel,
    .security-panel,
    .developer-token-panel,
    .integration-type,
    .workflow-stage,
    .admin-request-row,
    .member-row,
    .tenant-summary,
    .site-content-fieldset
  ) {
  border-color: var(--rule);
  background: var(--paper-2);
  background-image: none;
  box-shadow: none;
}

.metric-grid {
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.metric-card {
  min-height: 8rem;
  padding: 1.1rem;
}

.metric-card > span {
  color: var(--ink-3);
  font-size: 0.65rem;
}

.metric-card > b {
  color: var(--ink);
  font: 500 1.8rem/1.1 var(--mono);
  letter-spacing: -0.04em;
}

.metric-card .release-channel {
  color: var(--pass);
  font-size: 1rem;
}

.metric-card small {
  color: var(--ink-3);
  font-size: 0.59rem;
}

.panel {
  padding: 1.2rem;
}

.panel-heading {
  margin-bottom: 1rem;
}

.panel-heading h2 {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.panel-heading button {
  padding: 0.35rem 0.5rem;
  color: var(--ink-3);
}

.live-dot {
  background: var(--pass);
  box-shadow: 0 0 0.75rem rgba(95, 211, 154, 0.55);
}

.platform-shell :where(
    .mini-device,
    .release-row,
    .integration-row,
    .monitor-row,
    .alert-row,
    .alert-event,
    .determination-row,
    .api-token-row,
    .member-row,
    .admin-request-row
  ) {
  border-color: var(--rule);
}

.mini-device-icon,
.device-icon,
.integration-glyph {
  border: 1px solid rgba(108, 77, 246, 0.24);
  background: var(--violet-tint);
  color: var(--violet-text);
  font-family: var(--mono);
}

.mini-device b,
.device-card-title b,
.integration-row b,
.release-row b,
.monitor-row b,
.alert-row b,
.determination-row b {
  color: var(--ink);
}

.mini-device small,
.device-card-title small,
.device-card-footer small,
.integration-row small,
.release-row small,
.monitor-row small,
.alert-row small,
.determination-row small,
.loading-row,
.empty-row {
  color: var(--ink-3);
}

.runtime-screen {
  border-color: var(--rule-strong);
  background: var(--paper);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(108, 77, 246, 0.06);
  color: var(--ink-2);
  font-family: var(--mono);
}

.oled {
  border-color: var(--rule-strong);
  background: var(--paper);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(108, 77, 246, 0.06);
  font-family: var(--mono);
}

.oled-row {
  border-color: var(--rule);
}

.oled-row span {
  color: var(--violet-text);
}

.oled-row b {
  color: var(--ink-2);
}

.oled dt {
  color: var(--ink-3);
}

.oled dd {
  color: var(--violet-3);
}

.runtime-screen b,
.runtime-screen strong {
  color: var(--pass);
}

.quick-grid button,
.filter-row > div button,
.pathway-actions button,
.connector-actions button,
.integration-actions button,
.monitor-actions button {
  border-color: var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
}

.quick-grid button:hover,
.filter-row > div button:hover,
.pathway-actions button:hover,
.connector-actions button:hover,
.integration-actions button:hover,
.monitor-actions button:hover {
  border-color: var(--rule-strong);
  background: var(--paper-3);
  color: var(--ink);
}

.quick-grid button > span,
.filter-row > div button.active {
  color: var(--violet-text);
  font-family: var(--mono);
}

.filter-row > div button.active {
  border-color: rgba(108, 77, 246, 0.4);
  background: var(--violet-tint);
}

.device-card,
.integration-type {
  transition:
    border-color 180ms ease-out,
    background-color 180ms ease-out;
}

.device-card:hover,
.integration-type:hover {
  border-color: var(--rule-strong);
  background: #171720;
}

.device-camera-preview,
.camera-preview-stage,
.site-content-preview-grid img {
  border-color: var(--rule);
  background: var(--paper);
}

.device-camera-preview > span {
  background: linear-gradient(transparent, rgba(10, 10, 15, 0.95));
}

.device-meta span,
.device-monitor-chips span,
.sample-badge,
.monitor-row em,
.alert-row > span,
.integration-state {
  border-color: var(--rule-strong);
  background: var(--paper-3);
  color: var(--ink-2);
  font-family: var(--mono);
}

.device-monitor-chips span.warning,
.monitor-row.warning em,
.alert-row.warning > span {
  border-color: rgba(230, 180, 92, 0.4);
  background: rgba(230, 180, 92, 0.1);
  color: var(--warn);
}

.device-monitor-chips span.critical,
.monitor-row.critical em,
.alert-row.critical > span {
  border-color: rgba(240, 121, 140, 0.4);
  background: rgba(240, 121, 140, 0.1);
  color: var(--fail);
}

.release-hero {
  background: var(--paper-2);
}

.release-hero img {
  filter: none;
}

.release-row > span,
.alert-row code,
.alert-event time,
.determination-row code,
.determination-row time {
  color: var(--ink-3);
  font-family: var(--mono);
}

/* Administration, integrations, and monitoring -------------------------- */

.cost-summary-grid article,
.admin-guide-sections article,
.onboarding-paths article,
.integration-list,
.monitor-list,
.alert-list,
.determination-list,
.cost-list,
.admin-list,
.members-list {
  border-color: var(--rule);
  background: var(--paper-2);
  background-image: none;
}

.cost-summary-grid b,
.cost-list b,
.admin-row-heading b,
.tenant-summary b {
  color: var(--ink);
  font-family: var(--mono);
}

.cost-summary-grid span,
.cost-summary-grid small,
.cost-list span,
.cost-footnote,
.admin-request-row p,
.admin-request-row dt,
.tenant-summary dt,
.panel-intro {
  color: var(--ink-3);
}

.cost-list > div,
.admin-list > *,
.members-list > * {
  border-color: var(--rule);
}

.integration-glyph.nocode,
.integration-glyph.n8n,
.integration-glyph.zapier,
.integration-glyph.make,
.integration-glyph.openclaw,
.integration-glyph.llm-agent,
.integration-glyph.agent,
.integration-glyph.ttn,
.integration-glyph.webhook {
  background: var(--violet-tint);
  color: var(--violet-text);
}

.integration-state::before,
.monitor-state-dot {
  background: var(--pass);
  box-shadow: 0 0 0 0.24rem rgba(95, 211, 154, 0.08);
}

.monitor-row.warning .monitor-state-dot {
  background: var(--warn);
  box-shadow: 0 0 0 0.24rem rgba(230, 180, 92, 0.08);
}

.monitor-row.critical .monitor-state-dot {
  background: var(--fail);
  box-shadow: 0 0 0 0.24rem rgba(240, 121, 140, 0.08);
}

.alert-event::before {
  background: var(--violet-2);
}

.workflow-stage-heading > span {
  border-color: rgba(108, 77, 246, 0.35);
  background: var(--violet-tint);
  color: var(--violet-text);
  font-family: var(--mono);
}

/* Dialogs and toasts ----------------------------------------------------- */

body > .modal {
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: var(--shadow);
}

body > .modal::backdrop {
  background: rgba(4, 4, 8, 0.78);
  backdrop-filter: blur(5px);
}

body > .modal form,
body > .modal > div,
.token-modal > div,
.camera-preview-modal > div,
.delivery-modal > div,
.integration-secret-modal > div {
  border-color: var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: none;
}

.modal-heading {
  border-color: var(--rule);
}

.modal-heading > button {
  color: var(--ink-3);
}

.modal label {
  color: var(--ink-2);
}

.copy-field,
.token-value,
.monitor-help,
.event-options {
  border-color: var(--rule);
  background: var(--paper);
  color: var(--ink-2);
}

.toast {
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--violet);
  background: var(--paper-3);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* Responsive shell ------------------------------------------------------- */

@media (max-width: 960px) {
  .platform-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    width: min(19rem, 86vw);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
  }

  .platform-header {
    min-height: 3.75rem;
    padding: 0 1rem;
  }
}

@media (max-width: 640px) {
  #platform-main {
    padding: 1.35rem 1rem 4rem;
  }

  .view-heading {
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .view-heading h1 {
    font-size: 1.65rem;
  }

  .workspace-picker {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .device-card,
  .integration-type,
  .header-add,
  .platform-shell .primary-button {
    transition-duration: 0.01ms;
  }
}