/* Vuva Systems — shared demonstration-environment shell.
   Linked alongside /assets/css/styles.css (tokens, reset, buttons, badges). */

:root {
  --d-side: 232px;

  /* Demo-layer z-index hierarchy (sits below site chrome tokens) */
  --z-demo-topbar: 40;   /* sticky secondary nav bar */
  --z-demo-sidebar: 30;  /* sticky sidebar nav */
  --z-demo-fab: 50;      /* floating AI button */
  --z-demo-modal: 60;    /* AI modal overlay (above all demo chrome) */
}

.demo-shell { min-height: 100vh; background: var(--paper); color: var(--ink); }
.demo-shell * { box-sizing: border-box; }

/* Top bar */
.demo-topbar {
  position: sticky; top: 0; z-index: var(--z-demo-topbar);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  min-height: 58px; padding: .5rem 1.25rem;
  color: var(--paper); background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
}
.demo-topbar .demo-back { display: inline-flex; gap: .45rem; align-items: center; color: var(--muted-dark); font-size: .8rem; font-weight: 700; }
.demo-topbar .demo-back:hover { color: var(--accent); }
.demo-topbar .demo-title { display: inline-flex; gap: .6rem; align-items: center; font-size: .98rem; font-weight: 700; letter-spacing: -.02em; }
.demo-topbar .demo-title .v { color: var(--accent); }
.demo-env-badge {
  display: inline-flex; gap: .4rem; align-items: center;
  margin-left: .6rem; padding: .34rem .7rem;
  color: var(--warn); border: 1px solid rgba(217,164,65,.5); border-radius: 999px;
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.demo-env-badge::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--warn); }
.demo-clock { margin-left: auto; color: var(--muted-dark); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; white-space: nowrap; }

/* Layout */
.demo-layout { display: grid; grid-template-columns: var(--d-side) 1fr; min-height: calc(100vh - 58px); }

.demo-sidebar { position: sticky; top: 58px; z-index: var(--z-demo-sidebar); align-self: start; height: calc(100vh - 58px); overflow-y: auto; padding: 1rem .75rem; background: var(--ink); border-right: 1px solid var(--line-dark); }
.demo-nav { display: flex; flex-direction: column; gap: .25rem; list-style: none; }
.demo-nav-btn {
  display: flex; gap: .7rem; align-items: center; width: 100%;
  padding: .66rem .8rem; color: #aeb9b4; background: none; border: 0; border-radius: 6px;
  font-size: .9rem; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.demo-nav-btn .d-icon { width: 18px; flex: none; text-align: center; opacity: .8; }
.demo-nav-btn:hover { color: var(--paper); background: var(--ink-elev); }
.demo-nav-btn[aria-current="true"] { color: var(--ink); background: var(--accent); }
.demo-nav-btn[aria-current="true"] .d-icon { opacity: 1; }
.demo-side-note { margin-top: 1.25rem; padding: .8rem; color: var(--muted-dark); border: 1px solid var(--line-dark-soft); border-radius: 6px; font-family: var(--mono); font-size: .7rem; line-height: 1.55; }

.demo-main { padding: clamp(1.25rem, 3vw, 2.25rem); padding-bottom: 6.5rem; }

/* Panels */
.demo-panel { display: none; animation: d-in .25s ease; }
.demo-panel.is-active { display: block; }
@keyframes d-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.demo-panel-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.demo-panel-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -.03em; }
.demo-panel-head p { color: var(--muted); font-size: .95rem; line-height: 1.5; }

/* Stats */
.d-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.d-stat { display: flex; flex-direction: column; padding: 1rem 1.1rem; background: var(--paper-strong); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.d-stat .d-label { color: var(--muted); font-family: var(--mono); font-size: .78rem; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
.d-stat .d-value { margin-top: auto; padding-top: .65rem; font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; overflow-wrap: break-word; }
.d-stat .d-delta { margin-top: .35rem; font-size: .8rem; line-height: 1.35; }
.d-delta.up { color: #1f9d6b; }
.d-delta.down { color: #d05757; }
.d-delta.flat { color: var(--muted); }

/* Cards */
.d-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.d-grid.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-card { background: var(--paper-strong); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; min-width: 0; }
.d-card-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.d-card-head h3 { font-size: 1rem; letter-spacing: -.02em; line-height: 1.25; min-width: 0; }
.d-card-head .d-hint { color: var(--muted); font-family: var(--mono); font-size: .68rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; }
.d-card-body { padding: 1.1rem; }
.d-card-body.tight { padding: 0; }
.d-card-body .d-note { font-size: .9rem; line-height: 1.6; color: var(--muted); }
.d-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-book { margin-top: .8rem; width: 100%; justify-content: center; }
.d-faq-extra { margin-top: .4rem; }

/* Table */
.d-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.d-table th { padding: .6rem 1rem; color: var(--muted); background: var(--paper-muted); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; line-height: 1.35; letter-spacing: .03em; text-align: left; text-transform: uppercase; vertical-align: bottom; }
.d-table td { padding: .72rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.4; overflow-wrap: break-word; }
.d-table tbody tr:hover { background: var(--paper-muted); }
.d-table .strong { font-weight: 700; overflow-wrap: anywhere; }
.d-table .muted { color: var(--muted); }
.d-table .num { font-family: var(--mono); white-space: nowrap; }

/* Wide tables: horizontal scroll inside the card, never the page (mobile) */
@media (max-width: 860px) {
  .d-card-body.tight { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Key-value list */
.d-kv { display: flex; flex-direction: column; }
.d-kv div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .65rem; border-bottom: 1px solid var(--line); }
.d-kv div:last-child { border-bottom: 0; }
.d-kv dt { color: var(--muted); font-size: .86rem; line-height: 1.4; }
.d-kv dd { font-weight: 700; font-size: .92rem; text-align: right; line-height: 1.4; }

/* Chart */
.d-chart {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-inline: auto;
}
.d-chart text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }

/* List / feed */
.d-feed { display: flex; flex-direction: column; }
.d-feed-item { display: flex; gap: .8rem; align-items: flex-start; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.d-feed-item:last-child { border-bottom: 0; }
.d-feed-item .d-time { flex: none; width: 54px; color: var(--muted); font-family: var(--mono); font-size: .7rem; line-height: 1.5; }
.d-feed-item .d-body { font-size: .88rem; line-height: 1.5; }
.d-feed-item .d-body small { display: block; margin-top: .1rem; color: var(--muted); font-size: .8rem; }

/* Segmented / toolbar */
.d-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.d-toolbar .chip { min-height: 36px; padding: .35rem .8rem; font-size: .8rem; }

/* AI assistant */
.demo-ai-fab {
  position: fixed; z-index: var(--z-demo-fab); right: 1.25rem; bottom: 1.25rem;
  display: inline-flex; gap: .6rem; align-items: center;
  min-height: 50px; padding: 0 1.1rem;
  color: var(--ink); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  font-weight: 700; font-size: .88rem; cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(16,22,20,.5);
}
.demo-ai-fab:hover { background: var(--accent-strong); }

.demo-ai-modal {
  position: fixed; z-index: var(--z-demo-modal); inset: 0; display: none;
  background: rgba(11,15,14,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.demo-ai-modal.is-open { display: block; }
.demo-ai-card {
  position: absolute; right: 1rem; bottom: 1rem; left: 1rem;
  max-width: 400px; margin-left: auto; height: min(560px, 80vh);
  display: flex; flex-direction: column; overflow: hidden;
  color: var(--paper); background: var(--ink); border: 1px solid var(--line-dark); border-radius: 12px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.demo-ai-head { display: flex; gap: .7rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--line-dark); background: var(--ink-deep); }
.demo-ai-head .ai-avatar { display: grid; flex: none; width: 32px; height: 32px; place-items: center; color: var(--ink); background: var(--accent); border-radius: 50%; font-weight: 800; }
.demo-ai-head .ai-id { font-weight: 700; font-size: .92rem; }
.demo-ai-head .ai-sub { color: var(--muted-dark); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; }
.demo-ai-close { margin-left: auto; color: var(--muted-dark); background: none; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; }
.demo-ai-close:hover { color: var(--accent); }
.demo-ai-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.demo-ai-body .m { max-width: 86%; padding: .7rem .9rem; border-radius: 10px; font-size: .88rem; line-height: 1.5; }
.demo-ai-body .m.agent { align-self: flex-start; background: var(--ink-elev); border: 1px solid var(--line-dark-soft); }
.demo-ai-body .m.user { align-self: flex-end; color: var(--ink); background: var(--accent); }
.demo-ai-suggest { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem 1rem 0; }
.demo-ai-suggest .chip { min-height: 34px; padding: .25rem .7rem; font-size: .78rem; }
.demo-ai-input { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--line-dark); background: var(--ink-deep); }
.demo-ai-input input { flex: 1; height: 44px; padding: 0 .8rem; color: var(--paper); background: var(--ink-elev); border: 1px solid var(--line-dark); border-radius: 6px; outline: 0; }
.demo-ai-input input:focus { border-color: var(--accent); }
.demo-ai-input button { flex: none; width: 44px; color: var(--ink); background: var(--accent); border: 0; border-radius: 6px; cursor: pointer; font-size: 1rem; }

/* Demo disclaimer */
.demo-disclaimer { margin-top: 2rem; padding: 1rem 1.1rem; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; line-height: 1.55; background: var(--paper-muted); }

/* Utilities */
.d-label { color: var(--muted); font-family: var(--mono); font-size: .78rem; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.d-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.mt { margin-top: .9rem; }
.pad-feed { padding: 0 1.1rem; }
.chart-dark { background: #121916; border-radius: 8px; }
.muted-note { margin-top: .6rem; color: var(--muted); font-size: .78rem; line-height: 1.5; }

/* Responsive */
@media (max-width: 860px) {
  .demo-layout { grid-template-columns: 1fr; }
  /* Secondary nav: horizontal swipe strip — no wrap, no shrink, hidden scrollbar */
  .demo-sidebar {
    position: sticky; top: 58px; z-index: var(--z-demo-sidebar); height: auto;
    padding: .5rem .75rem;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    background: var(--ink);
    border-right: 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .demo-sidebar::-webkit-scrollbar { display: none; }
  .demo-nav {
    flex-direction: row; flex-wrap: nowrap;
    align-items: center;
    gap: 1rem; /* consistent spacing between tabs */
    width: max-content;
  }
  .demo-nav li { flex-shrink: 0; }
  .demo-nav-btn { width: auto; padding: .5rem .8rem; white-space: nowrap; flex-shrink: 0; }
  .demo-side-note { display: none; }
  .d-stats { grid-template-columns: repeat(2, 1fr); }
  .d-grid, .d-grid.thirds { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Topbar collapses to a single tight row; env badge shortens. */
  .demo-topbar { padding: .4rem .9rem; min-height: 52px; }
  .demo-env-badge { font-size: .6rem; padding: .25rem .55rem; }
  .demo-clock { font-size: .68rem; }
  /* Sidebar top offset tracks the shorter topbar */
  .demo-sidebar { top: 52px; }
}
@media (max-width: 480px) {
  .demo-topbar .demo-back { display: none; }
  /* Drop the "Demonstration system" words, keep the dot only. */
  .demo-env-badge {
    font-size: 0; padding: 0; width: 10px; height: 10px; border: 0; border-radius: 50%;
  }
  .demo-env-badge::before { width: 10px; height: 10px; }
  .demo-clock { margin-left: auto; }
  .d-stats { grid-template-columns: 1fr 1fr; }
  .d-table th, .d-table td { padding: .55rem .6rem; }
  .demo-ai-card { max-width: none; }
  /* On narrow screens the assistant is an in-flow launcher so it cannot cover dashboard content. */
  .demo-ai-fab {
    position: static;
    width: calc(100% - 2rem);
    height: auto;
    min-height: 48px;
    margin: 0 1rem 1.5rem;
    padding: .65rem 1rem;
    gap: .5rem;
    justify-content: center;
    font-size: .82rem;
  }
  /* The button already contains the visible launcher label; do not duplicate it with a glyph. */
}
@media (prefers-reduced-motion: reduce) {
  .demo-panel { animation: none; }
}