/* Extracted from design/v3/Dashboard.html inline <style> block.
   Imported by /dashboard/page.tsx layout for the app shell + stats + chart + agenda + calls + activity. */

/* "App" wrapping for dashboard view */
  body { background: var(--bg); }
  .app {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
  }
  @media (max-width: 920px) { .app { grid-template-columns: 1fr; } }

  /* full-screen sidebar (not the embedded preview one) */
  .side {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 22px 16px;
    display: flex; flex-direction: column;
    gap: 6px;
    position: sticky; top: 0; align-self: start; height: 100vh;
  }
  @media (max-width: 920px) { .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); } }
  .side .logo-row { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 18px; }
  .side .logo { font-size: 20px; }
  .side h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); padding: 14px 10px 6px; margin: 0; }
  .side a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14.5px;
    color: var(--ink-2);
    font-weight: 500;
  }
  .side a:hover { background: var(--surface-2); }
  .side a.active {
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 600;
  }
  .side a .ico { width: 18px; height: 18px; opacity: 0.85; }
  .side a .pill {
    margin-left: auto;
    font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 600;
    background: var(--urgent); color: white;
  }
  .side .who {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 16px 10px 4px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px;
  }
  .side .who .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
  }
  .side .who .name { font-weight: 600; color: var(--ink); }
  .side .who .role { color: var(--muted); font-size: 12px; }

  .main {
    padding: 32px clamp(20px, 4vw, 48px) 56px;
    max-width: 100%;
  }

  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .topbar h1 { font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; }
  .topbar .sub { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
  .topbar-actions { display: flex; gap: 10px; align-items: center; }

  /* Stat tiles */
  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
  @media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .stat-grid { grid-template-columns: 1fr; } }

  .stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px;
    position: relative;
    overflow: hidden;
  }
  .stat .label { font-size: 13px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  .stat .label .ico {
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--primary-50); color: var(--primary-600);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .stat.is-urgent .label .ico { background: var(--urgent-bg); color: var(--urgent); }
  .stat.is-new .label .ico { background: var(--warn-bg); color: var(--warn); }
  .stat.is-success .label .ico { background: var(--success-bg); color: var(--success); }
  .stat .v {
    font-size: 38px; line-height: 1; font-weight: 700;
    letter-spacing: -0.02em;
    margin: 14px 0 4px;
    color: var(--ink);
  }
  .stat.is-urgent .v { color: var(--urgent); }
  .stat.is-new .v { color: var(--warn); }
  .stat .footer-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
    font-size: 12.5px;
  }
  .stat .delta { color: var(--success); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
  .stat .delta.neg { color: var(--urgent); }
  .stat .ago { color: var(--muted); }
  .stat .spark { width: 80px; height: 28px; opacity: 0.9; }

  /* 2-col layout for chart + agenda */
  .row-2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
  }
  @media (max-width: 1000px) { .row-2 { grid-template-columns: 1fr; } }

  .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
  }
  .panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
  }
  .panel-head h3 { font-size: 16px; font-weight: 600; }
  .panel-head .sub { color: var(--muted); font-size: 13px; }
  .legend {
    display: flex; gap: 14px; font-size: 12.5px; color: var(--muted-2);
    margin-top: 4px;
  }
  .legend span { display: inline-flex; align-items: center; gap: 6px; }
  .legend .swatch { width: 10px; height: 10px; border-radius: 3px; }

  /* Larger bar chart */
  .bigchart {
    flex: 1;
    min-height: 340px;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
  }
  .bigchart .yaxis {
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: 11px; color: var(--muted);
    text-align: right;
    padding-bottom: 28px;
  }
  .bigchart .plot { position: relative; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
  .bigchart .gridlines {
    position: absolute; inset: 0 0 28px 0;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .bigchart .gridlines span { border-top: 1px dashed var(--border); height: 0; }
  .bigchart .bars {
    position: relative; height: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 14px;
  }
  .bigchart .stack {
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 2px;
    position: relative;
  }
  .bigchart .bseg { width: 100%; min-height: 2px; transition: opacity 0.2s ease; }
  .bigchart .bseg:first-child { border-radius: 6px 6px 0 0; }
  .bigchart .bseg:last-child { border-radius: 0 0 0 0; }
  .bigchart .bseg.rdv { background: var(--primary-500); }
  .bigchart .bseg.ord { background: var(--primary-100); }
  .bigchart .bseg.urg { background: var(--urgent); }
  .bigchart .stack:hover .bseg { opacity: 0.85; }
  .bigchart .xlbl { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--muted); }
  .bigchart .total { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-2); }

  /* Agenda panel */
  .agenda { display: flex; flex-direction: column; gap: 4px; }
  .agenda-day {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted-2);
    margin: 10px 0 4px;
  }
  .agenda-day:first-child { margin-top: 0; }
  .agenda-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
  }
  .agenda-item:last-child { border-bottom: 0; }
  .agenda-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink-2);
  }
  .agenda-who { color: var(--ink); font-weight: 500; }
  .agenda-why { color: var(--muted); font-size: 12.5px; }
  .agenda-tag {
    font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600;
    background: var(--primary-50); color: var(--primary-700);
  }
  .agenda-tag.urgent { background: var(--urgent-bg); color: var(--urgent); }
  .agenda-tag.ord { background: rgba(14,44,92,0.06); color: var(--ink-2); }

  /* Calls list */
  .calls-bar {
    display: flex; gap: 8px; align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .calls-bar .filter {
    background: transparent; border: 0; cursor: pointer;
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 8px;
    font: inherit;
    font-size: 13.5px; font-weight: 500;
    color: var(--ink-2);
    display: inline-flex; align-items: center; gap: 8px;
  }
  .calls-bar .filter:hover { background: var(--surface-2); }
  .calls-bar .filter.active { background: var(--ink); color: white; }
  .calls-bar .filter .cnt { font-size: 11px; padding: 1px 7px; background: var(--primary-100); color: var(--primary-700); border-radius: 999px; font-weight: 600; }
  .calls-bar .filter.active .cnt { background: rgba(255,255,255,0.15); color: white; }
  .calls-bar .grow { flex: 1; }
  .calls-bar .search {
    appearance: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px 8px 32px;
    font: inherit; font-size: 13.5px;
    color: var(--ink);
    width: 220px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 10px center;
  }
  .calls-bar .sel {
    appearance: none;
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font: inherit; font-size: 13.5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%235B6478' d='M0 0h10L5 6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
  }
  .calls-list { display: flex; flex-direction: column; gap: 12px; }
  .callc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px 24px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .callc.urgent { border-left: 3px solid var(--urgent); }
  .callc.done { opacity: 0.65; }
  .callc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .callc .who {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14.5px; color: var(--ink); font-weight: 500;
  }
  .callc .who .ph-ico {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--surface-2); color: var(--ink-2);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .callc .when { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .callc .body { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
  .callc .body .summary { color: var(--ink); font-weight: 500; }
  .callc .body .quote { color: var(--muted); font-style: italic; }
  .callc .transcript {
    background: var(--surface-2);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.6;
    display: none;
  }
  .callc.expanded .transcript { display: block; }
  .callc .transcript p { margin: 0 0 8px; }
  .callc .transcript p:last-child { margin: 0; }
  .callc .transcript .me { color: var(--primary-700); font-weight: 500; }
  .callc .transcript .pt { color: var(--ink); }

  .transcript-toggle {
    font-size: 13.5px; color: var(--primary-600); font-weight: 500;
    background: none; border: 0; cursor: pointer;
    padding: 0; display: inline-flex; align-items: center; gap: 6px;
  }
  .transcript-toggle::before {
    content: "▾";
    font-size: 10px;
    transition: transform 0.2s ease;
  }
  .callc.expanded .transcript-toggle::before { transform: rotate(180deg); }

  .audiobar {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 18px 6px 6px;
  }
  .audiobar .play {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary); color: white;
    border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .audiobar .wave { flex: 1; display: flex; align-items: center; gap: 2.5px; height: 28px; }
  .audiobar .bit { width: 2.5px; background: var(--primary-100); border-radius: 2px; }
  .audiobar .bit.on { background: var(--primary-600); }
  .audiobar .ts { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", ui-monospace, monospace; }

  .callc .actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .callc .actions .btn { height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 9px; }
  .callc .actions .btn-danger { background: transparent; color: var(--urgent); border-color: transparent; }
  .callc .actions .btn-danger:hover { background: var(--urgent-bg); }

  /* Activity column under panels */
  .activity-panel { padding: 0; overflow: hidden; }
  .activity-panel .panel-head { padding: 22px 22px 0; margin-bottom: 8px; }
  .activity-list { padding: 0 22px 18px; }
  .activity-list .row {
    display: grid; grid-template-columns: 84px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    color: var(--ink-2);
  }
  .activity-list .row:last-child { border-bottom: 0; }
  .activity-list .row .when { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
  .activity-list .row strong { color: var(--ink); font-weight: 600; }
  .activity-list .row .pill {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: var(--primary-50); color: var(--primary-700);
    margin-left: 4px;
  }
  .activity-list .row .pill.u { background: var(--urgent-bg); color: var(--urgent); }