/*
 * Ambient is BR-AI's default visual theme. Quiet Console remains the untouched
 * base stylesheet and is restored by setting data-visual-theme="quiet".
 */

.visual-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
  flex: none;
}

.visual-theme-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.visual-theme-toggle button .icon {
  width: 16px;
  height: 16px;
}

.visual-theme-toggle button.active {
  background: var(--accent-soft);
  color: var(--accent);
}

:root:not([data-visual-theme="quiet"]) {
  --bg: #17151f;
  --panel: rgba(255, 255, 255, 0.047);
  --panel2: rgba(255, 255, 255, 0.072);
  --surface-3: rgba(255, 255, 255, 0.095);
  --text: #fff8f1;
  --muted: #c3bbc9;
  --border: rgba(255, 248, 241, 0.15);

  --accent: #b0ded0;
  --accent-ink: #162420;
  --accent2: #eec5b2;
  --accent-soft: rgba(176, 222, 208, 0.13);

  --good: #b0ded0;
  --good-soft: rgba(176, 222, 208, 0.12);
  --warn: #eec5b2;
  --warn-soft: rgba(238, 197, 178, 0.12);
  --danger: #efaaa9;
  --crit-soft: rgba(239, 170, 169, 0.12);

  --tint-1: rgba(255, 255, 255, 0.025);
  --tint-2: rgba(255, 255, 255, 0.045);
  --tint-3: rgba(255, 255, 255, 0.07);
  --tint-4: rgba(255, 255, 255, 0.11);

  --scrim: rgba(8, 7, 12, 0.76);
  --code-surface: rgba(8, 10, 15, 0.7);
  --code-ink: #d8eee7;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 22px 55px rgba(4, 3, 8, 0.25);
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"]:not([data-visual-theme="quiet"]) {
  --bg: #f3eee9;
  --panel: rgba(255, 255, 255, 0.64);
  --panel2: rgba(255, 255, 255, 0.82);
  --surface-3: rgba(255, 255, 255, 0.94);
  --text: #28232e;
  --muted: #746d78;
  --border: rgba(56, 44, 62, 0.15);
  --accent: #347f70;
  --accent-ink: #f7fffc;
  --accent2: #a9614d;
  --accent-soft: rgba(52, 127, 112, 0.12);
  --good: #347f70;
  --good-soft: rgba(52, 127, 112, 0.12);
  --warn: #9b6440;
  --warn-soft: rgba(155, 100, 64, 0.12);
  --danger: #a74e52;
  --crit-soft: rgba(167, 78, 82, 0.11);
  --tint-1: rgba(50, 35, 57, 0.025);
  --tint-2: rgba(50, 35, 57, 0.045);
  --tint-3: rgba(50, 35, 57, 0.07);
  --tint-4: rgba(50, 35, 57, 0.1);
  --scrim: rgba(39, 31, 43, 0.52);
  --code-surface: #27232e;
  --code-ink: #f6eee8;
  --shadow-1: 0 1px 2px rgba(66, 48, 69, 0.07);
  --shadow-2: 0 22px 55px rgba(65, 43, 67, 0.12);
  color-scheme: light;
}

:root:not([data-visual-theme="quiet"]) body {
  position: relative;
  background:
    radial-gradient(ellipse at 0 0, rgba(197, 129, 103, 0.25), transparent 45rem),
    radial-gradient(ellipse at 96% 20%, rgba(89, 160, 146, 0.2), transparent 43rem),
    radial-gradient(ellipse at 48% 100%, rgba(143, 115, 180, 0.17), transparent 50rem),
    linear-gradient(145deg, #17151f, #252130 52%, #163330);
  background-attachment: fixed;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="light"]:not([data-visual-theme="quiet"]) body {
  background:
    radial-gradient(ellipse at 0 0, rgba(219, 158, 135, 0.28), transparent 45rem),
    radial-gradient(ellipse at 96% 20%, rgba(99, 164, 149, 0.18), transparent 43rem),
    radial-gradient(ellipse at 48% 100%, rgba(166, 137, 195, 0.16), transparent 50rem),
    linear-gradient(145deg, #f5efe9, #eee8f0 52%, #e2f0ea);
}

:root:not([data-visual-theme="quiet"]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(#000, transparent 82%);
}

:root[data-theme="light"]:not([data-visual-theme="quiet"]) body::before {
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(52, 43, 58, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 43, 58, 0.09) 1px, transparent 1px);
}

:root:not([data-visual-theme="quiet"]) .app-shell {
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  padding: 28px;
}

:root:not([data-visual-theme="quiet"]) .panel {
  border-color: var(--border);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

:root:not([data-visual-theme="quiet"]) .sidebar {
  top: 28px;
  height: calc(100vh - 56px);
  padding: 25px 20px;
  background: rgba(14, 13, 20, 0.42);
  box-shadow: 0 24px 65px rgba(3, 3, 7, 0.2);
}

:root[data-theme="light"]:not([data-visual-theme="quiet"]) .sidebar {
  background: rgba(255, 255, 255, 0.52);
}

:root:not([data-visual-theme="quiet"]) .brand-lockup {
  display: flex;
  align-items: center;
  gap: 11px;
}

:root:not([data-visual-theme="quiet"]) .brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 10px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--accent) 7%, transparent);
}

:root:not([data-visual-theme="quiet"]) .brand-lockup h1 {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.045em;
}

:root:not([data-visual-theme="quiet"]) .page-accent {
  height: 1px;
  background: linear-gradient(90deg, var(--accent2), var(--accent), transparent);
  opacity: 0.7;
}

:root:not([data-visual-theme="quiet"]) .nav-list {
  gap: 16px;
  scrollbar-color: rgba(255, 248, 241, 0.18) transparent;
}

:root:not([data-visual-theme="quiet"]) .nav-section-label {
  color: color-mix(in srgb, var(--muted) 76%, transparent);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

:root:not([data-visual-theme="quiet"]) .nav-section-items {
  gap: 4px;
}

:root:not([data-visual-theme="quiet"]) .nav-item {
  min-height: 41px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 0.82rem;
  font-weight: 500;
}

:root:not([data-visual-theme="quiet"]) .nav-item:hover {
  border-color: var(--border);
  background: var(--tint-2);
}

:root:not([data-visual-theme="quiet"]) .nav-item.active {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
  font-weight: 600;
}

:root:not([data-visual-theme="quiet"]) .sidebar-foot {
  padding: 12px 10px 0;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
}

:root:not([data-visual-theme="quiet"]) .status-dot {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

:root:not([data-visual-theme="quiet"]) .content {
  gap: 28px;
  padding: 18px 0 42px;
}

:root:not([data-visual-theme="quiet"]) .page-head {
  min-height: 88px;
  padding: 4px 4px 15px;
  border-bottom: 1px solid var(--border);
}

:root:not([data-visual-theme="quiet"]) .page-head h2 {
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
}

:root:not([data-visual-theme="quiet"]) .eyebrow {
  margin: 0 0 0.65rem;
  color: var(--accent2);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.23em;
}

:root:not([data-visual-theme="quiet"]) .theme-toggle,
:root:not([data-visual-theme="quiet"]) .visual-theme-toggle {
  border-radius: 13px;
  background: rgba(10, 10, 16, 0.2);
}

:root[data-theme="light"]:not([data-visual-theme="quiet"]) .theme-toggle,
:root[data-theme="light"]:not([data-visual-theme="quiet"]) .visual-theme-toggle {
  background: rgba(255, 255, 255, 0.45);
}

:root:not([data-visual-theme="quiet"]) .button,
:root:not([data-visual-theme="quiet"]) .ghost-button,
:root:not([data-visual-theme="quiet"]) .icon-button {
  border-radius: 12px;
  font-size: 0.82rem;
  letter-spacing: -0.01em;
}

:root:not([data-visual-theme="quiet"]) .button.secondary,
:root:not([data-visual-theme="quiet"]) .button.subtle {
  background: var(--tint-2);
}

:root:not([data-visual-theme="quiet"]) .button:hover,
:root:not([data-visual-theme="quiet"]) .nav-item:hover,
:root:not([data-visual-theme="quiet"]) a.dashboard-launch-button:hover {
  transform: translateY(-2px);
}

:root:not([data-visual-theme="quiet"]) input,
:root:not([data-visual-theme="quiet"]) select,
:root:not([data-visual-theme="quiet"]) textarea {
  border-color: var(--border);
  border-radius: 12px;
  background: rgba(10, 10, 16, 0.2);
  color: var(--text);
}

:root[data-theme="light"]:not([data-visual-theme="quiet"]) input,
:root[data-theme="light"]:not([data-visual-theme="quiet"]) select,
:root[data-theme="light"]:not([data-visual-theme="quiet"]) textarea {
  background: rgba(255, 255, 255, 0.52);
}

:root:not([data-visual-theme="quiet"]) input:focus,
:root:not([data-visual-theme="quiet"]) select:focus,
:root:not([data-visual-theme="quiet"]) textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

:root:not([data-visual-theme="quiet"]) .data-table,
:root:not([data-visual-theme="quiet"]) table {
  font-size: 0.8rem;
}

:root:not([data-visual-theme="quiet"]) .data-table th,
:root:not([data-visual-theme="quiet"]) table th {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:root:not([data-visual-theme="quiet"]) .data-table tr:hover td,
:root:not([data-visual-theme="quiet"]) table tr:hover td {
  background: var(--tint-2);
}

:root:not([data-visual-theme="quiet"]) .pill,
:root:not([data-visual-theme="quiet"]) .badge,
:root:not([data-visual-theme="quiet"]) .status-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--tint-2);
}

:root:not([data-visual-theme="quiet"]) .dashboard-launch-group,
:root:not([data-visual-theme="quiet"]) .dashboard-travel-panel,
:root:not([data-visual-theme="quiet"]) .dashboard-summary-block {
  border-color: var(--border);
  border-radius: 21px;
  background: var(--panel);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

:root:not([data-visual-theme="quiet"]) .dashboard-launch-group:nth-child(1) .dashboard-launch-heading span {
  color: var(--accent2);
}

:root:not([data-visual-theme="quiet"]) .dashboard-launch-group:nth-child(2) .dashboard-launch-heading span {
  color: #d3c0ed;
}

:root:not([data-visual-theme="quiet"]) .dashboard-launch-group:nth-child(3) .dashboard-launch-heading span {
  color: #b9d1ee;
}

:root:not([data-visual-theme="quiet"]) .dashboard-launch-button {
  border-color: var(--border);
  border-radius: 15px;
  background: var(--tint-1);
}

:root:not([data-visual-theme="quiet"]) .dashboard-launch-button:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--tint-3);
}

:root:not([data-visual-theme="quiet"]) .dashboard-launch-button > .icon {
  color: var(--accent);
}

:root:not([data-visual-theme="quiet"]) .dashboard-next-journey {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

:root:not([data-visual-theme="quiet"]) .dashboard-summary-metrics,
:root:not([data-visual-theme="quiet"]) .dashboard-attention-list a {
  border-color: var(--border);
  background: var(--tint-1);
}

:root:not([data-visual-theme="quiet"]) .person-card,
:root:not([data-visual-theme="quiet"]) .review-card,
:root:not([data-visual-theme="quiet"]) .fact-card,
:root:not([data-visual-theme="quiet"]) .journal-card,
:root:not([data-visual-theme="quiet"]) .money-account-card,
:root:not([data-visual-theme="quiet"]) .mobile-source-card {
  border-color: var(--border);
  border-radius: 19px;
  background: var(--panel);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

:root:not([data-visual-theme="quiet"]) .section-head h3,
:root:not([data-visual-theme="quiet"]) .person-card h3,
:root:not([data-visual-theme="quiet"]) .review-meta h3 {
  font-weight: 560;
  letter-spacing: -0.03em;
}

:root:not([data-visual-theme="quiet"]) ::selection {
  background: rgba(176, 222, 208, 0.28);
  color: var(--text);
}

@media (max-width: 900px) {
  :root:not([data-visual-theme="quiet"]) .app-shell {
    display: block;
    width: 100%;
    padding: 16px;
  }

  :root:not([data-visual-theme="quiet"]) .sidebar {
    top: 0;
    height: 100dvh;
    border-radius: 0 22px 22px 0;
  }

  :root:not([data-visual-theme="quiet"]) .page-head {
    padding-top: 42px;
  }

  :root:not([data-visual-theme="quiet"]) .page-head h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-visual-theme="quiet"]) *,
  :root:not([data-visual-theme="quiet"]) *::before,
  :root:not([data-visual-theme="quiet"]) *::after {
    transition: none !important;
  }
}