/* ============================================================
   CloudVenix — Page-specific styles
   ============================================================ */

/* ---- Dashboard ---- */
.dash-proj { display: flex; align-items: center; gap: var(--sp-4); padding: 13px var(--sp-5); border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-fast); }
.dash-proj:last-child { border-bottom: none; }
.dash-proj:hover { background: var(--surface-2); }
.dash-proj-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-pair { display: flex; align-items: center; gap: 6px; flex: none; }
.flow-pair .type-glyph { width: 30px; height: 30px; }
.flow-arrow { color: var(--flow-text); }

.feed { display: flex; flex-direction: column; gap: 2px; }
.feed-item { display: flex; gap: 11px; padding: 9px 0; align-items: flex-start; }
.feed-item:not(:last-child) { border-bottom: 1px solid var(--line); }
.feed-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.feed-ico.ok { background: var(--ok-soft); color: var(--ok-text); }
.feed-ico.warn { background: var(--warn-soft); color: var(--warn-text); }
.feed-ico.info { background: var(--info-soft); color: var(--info-text); }
.feed-ico.error { background: var(--error-soft); color: var(--error-text); }
.feed-text { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text); }

/* ---- Connections ---- */
.conn-type-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); transition: all var(--t-fast); }
.conn-type-row:hover { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--sh-xs); }
.consent-box { padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.test-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }

/* ---- Discovery ---- */
.scan-banner { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: linear-gradient(120deg, var(--primary-soft), color-mix(in oklch, var(--flow-soft) 60%, transparent)); border: 1px solid var(--primary-soft-border); margin-bottom: var(--sp-5); }
.scan-target { display: flex; align-items: center; gap: 12px; }

/* ---- Projects ---- */
.proj-card { padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-xs); transition: all var(--t); cursor: pointer; display: flex; flex-direction: column; gap: 14px; }
.proj-card:hover { border-color: var(--border-strong); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.proj-flow { display: flex; align-items: center; gap: 10px; }
.proj-flow .pf-meta { min-width: 0; }
.proj-flow .pf-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-flow .pf-type { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); }
.mini-stat { display: flex; flex-direction: column; gap: 2px; }
.mini-stat .ms-v { font-family: var(--font-mono); font-size: 17px; font-weight: 600; }
.mini-stat .ms-l { font-size: 10.5px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* mapping flow cell */
.map-flow { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; }
.map-flow .arr { color: var(--flow-text); }
.map-flow .src { color: var(--text-2); }
.map-flow .dst { color: var(--text); font-weight: 600; }

.type-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 6px; border-radius: var(--r-xs); background: var(--surface-3); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.type-pill svg { width: 16px; height: 16px; }
.svc-chips { display: inline-flex; align-items: center; gap: 5px; }
.svc-chips svg { width: 17px; height: 17px; }

/* live progress */
.live-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.live-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.live-overall { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.live-row { display: grid; grid-template-columns: 1.6fr 1fr 110px 90px 80px; align-items: center; gap: var(--sp-4); padding: 12px var(--sp-5); border-bottom: 1px solid var(--line); }
.live-row:last-child { border-bottom: none; }
.live-act { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* preflight */
.pf-row { display: flex; align-items: center; gap: var(--sp-4); padding: 13px var(--sp-5); border-bottom: 1px solid var(--line); }
.pf-row:last-child { border-bottom: none; }
.pf-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.pf-ico.pass { background: var(--ok-soft); color: var(--ok-text); }
.pf-ico.warn { background: var(--warn-soft); color: var(--warn-text); }
.pf-ico.fail { background: var(--error-soft); color: var(--error-text); }

/* report */
.report-row { display: flex; align-items: center; gap: var(--sp-4); padding: 13px var(--sp-5); border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.report-row:last-child { border-bottom: none; }
.report-row:hover { background: var(--surface-2); }
.report-ico { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text-2); }

/* sample report */
.sr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.sr-head { padding: var(--sp-5) var(--sp-6); background: linear-gradient(120deg, var(--primary), oklch(0.5 0.17 300)); color: #fff; }
.sr-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.sr-cell { padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sr-cell:nth-child(4n) { border-right: none; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.tab { height: 40px; padding: 0 var(--sp-4); font-size: 13px; font-weight: 600; color: var(--text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; transition: all var(--t-fast); }
.tab:hover { color: var(--text); }
.tab.on { color: var(--primary-text); border-bottom-color: var(--primary); }
.tab .tab-count { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 99px; background: var(--surface-3); }
.tab.on .tab-count { background: var(--primary-soft); color: var(--primary-text); }

/* ---- Migration (legacy) ---- */
.legacy-step { display: flex; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.legacy-num { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.legacy-num.done { background: var(--ok); }
.legacy-num.idle { background: var(--surface-3); color: var(--text-3); }
.legacy-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid color-mix(in oklch, var(--warn) 30%, transparent); color: var(--warn-text); font-size: 13px; font-weight: 500; margin-bottom: var(--sp-5); }

/* ---- Admins ---- */
.master-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r-md); background: var(--primary-soft); border: 1px solid var(--primary-soft-border); margin-bottom: var(--sp-5); }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-aside { position: relative; overflow: hidden; background: linear-gradient(150deg, oklch(0.28 0.09 278), oklch(0.20 0.06 300)); color: #fff; padding: var(--sp-9); display: flex; flex-direction: column; }
.login-aside .la-grid { position: absolute; inset: 0; background-image: linear-gradient(oklch(1 0 0 / 0.06) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 30% 30%, #000, transparent 75%); }
.login-form-side { display: grid; place-items: center; padding: var(--sp-7); background: var(--bg); }
.login-card { width: 100%; max-width: 380px; }
.flow-viz { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.flow-node { flex: 1; padding: 14px; border-radius: var(--r-md); background: oklch(1 0 0 / 0.08); border: 1px solid oklch(1 0 0 / 0.14); backdrop-filter: blur(6px); }

@media (max-width: 920px) { .login-wrap { grid-template-columns: 1fr; } .login-aside { display: none; } }

/* ---- Privacy ---- */
.doc { max-width: 760px; margin: 0 auto; }
.doc h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: var(--sp-8); margin-bottom: var(--sp-3); scroll-margin-top: 80px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 16px; font-weight: 700; margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.doc p, .doc li { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.doc p { margin-bottom: var(--sp-3); }
.doc ul { margin: 0 0 var(--sp-4) 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: 6px; }
.doc-toc { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 3px; }
.doc-toc a { font-size: 13px; color: var(--text-3); padding: 6px 12px; border-radius: 7px; border-left: 2px solid var(--line); cursor: pointer; }
.doc-toc a:hover { color: var(--text); background: var(--surface-2); }

/* states demo banner */
.states-bar { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border); }
.states-bar button { height: 28px; padding: 0 13px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.states-bar button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); }

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, 1fr) !important; }
  .page-in > div[style*="grid-template-columns"]:not(.tiles) { grid-template-columns: 1fr !important; }
  .live-row { grid-template-columns: 1.4fr 1fr 90px; }
  .live-row > *:nth-child(4), .live-row > *:nth-child(5) { display: none; }
}