/* VISUAL-02..08 — Svyazano product visual system.
   Presentation-only layer loaded after existing workspace and UI-POLISH assets.
   It intentionally preserves business semantics, canonical IDs and interaction flows. */

/* ================================================================
   VISUAL-02 — BRAND FOUNDATION / TOKENS
   ================================================================ */
:root {
  --brand-ink: #17212b;
  --brand-deep: #174a68;
  --brand-deep-strong: #123b4a;
  --brand-primary: #176b87;
  --brand-primary-hover: #145a72;
  --brand-primary-active: #124b60;
  --brand-thread: #1b7f7b;
  --brand-thread-bright: #24a6a1;
  --brand-thread-soft: #ddf3f1;
  --brand-thread-faint: #eff8f7;
  --brand-bg: #f6f8f9;
  --brand-surface: #ffffff;
  --brand-surface-muted: #f8fafb;
  --brand-border: #dce3e7;
  --brand-border-strong: #c4d0d6;
  --brand-muted: #65737e;
  --brand-muted-strong: #4b5b66;

  --color-bg: var(--brand-bg);
  --color-surface: var(--brand-surface);
  --color-surface-muted: var(--brand-surface-muted);
  --color-surface-raised: #ffffff;
  --color-border: var(--brand-border);
  --color-border-strong: var(--brand-border-strong);
  --color-text: var(--brand-ink);
  --color-text-secondary: var(--brand-muted-strong);
  --color-text-muted: var(--brand-muted);
  --color-sidebar: var(--brand-deep-strong);
  --color-sidebar-elevated: #174a58;
  --color-sidebar-text: #f7fbfb;
  --color-sidebar-muted: #b7c9cd;

  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-primary-hover);
  --color-primary-active: var(--brand-primary-active);
  --color-primary-soft: #eaf5f6;
  --color-focus-ring: rgba(23, 107, 135, 0.24);
  --color-info: var(--brand-primary);

  --shadow-xs: 0 1px 2px rgba(23, 33, 43, 0.045);
  --shadow-sm: 0 4px 14px rgba(23, 33, 43, 0.055);
  --shadow-md: 0 12px 30px rgba(23, 33, 43, 0.085);
  --shadow-lg: 0 24px 64px rgba(23, 33, 43, 0.14);
  --shadow-primary: 0 10px 24px rgba(23, 107, 135, 0.2);

  --bg: var(--brand-bg);
  --page: var(--brand-bg);
  --panel: var(--brand-surface);
  --panel2: var(--brand-surface-muted);
  --soft: var(--brand-surface-muted);
  --line: var(--brand-border);
  --line2: var(--brand-border-strong);
  --text: var(--brand-ink);
  --muted: var(--brand-muted);
  --accent: var(--brand-primary);
  --accent2: var(--brand-primary-hover);
  --side: var(--brand-deep-strong);
  --side2: #174a58;
  --sideText: #f7fbfb;
  --sideMuted: #b7c9cd;
  --blue: var(--brand-primary);
}

html,
body {
  background: var(--brand-bg);
  color: var(--brand-ink);
}

body.svyazano-brand {
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(36, 166, 161, 0.018), transparent 160px),
    var(--brand-bg);
}

/* Flexible layout descendants may shrink, but table trees keep workspace-owned minima. */
body.svyazano-brand *:not(:where(table, table *)) {
  min-width: 0;
}

/* Preserve existing dense-table contracts. Their wrappers own local horizontal scrolling. */
body.svyazano-brand .payments-unified-table {
  min-width: 980px;
}

body.svyazano-brand .admin-table {
  min-width: 900px;
}

body.svyazano-brand .terminations-table {
  min-width: 1080px;
}

body.svyazano-brand .sources-lineage-table {
  min-width: 760px;
}

body.svyazano-brand.payments-v2-page .pv2-table-wrap table {
  min-width: 980px;
}

::selection {
  background: rgba(36, 166, 161, 0.22);
  color: var(--brand-ink);
}

/* A restrained relationship accent; never used for semantic danger/success. */
.sv-thread-accent {
  color: var(--brand-thread);
}

.sv-thread-surface {
  border-color: #b9dcda !important;
  background: var(--brand-thread-faint) !important;
}

/* ================================================================
   VISUAL-03 — APP SHELL / AUTH / PRODUCT IDENTITY
   ================================================================ */
.auth-screen {
  background:
    radial-gradient(circle at 16% 12%, rgba(36, 166, 161, 0.11), transparent 28%),
    radial-gradient(circle at 86% 88%, rgba(23, 74, 104, 0.07), transparent 32%),
    var(--brand-bg);
}

.auth-card {
  position: relative;
  overflow: hidden;
  border-color: var(--brand-border);
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(18, 59, 74, 0.12);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-thread-bright), var(--brand-primary));
}

.auth-card .brand {
  align-items: center;
}

.auth-card h1.sv-brand-word {
  margin: 0;
}

.auth-card .brand .logo,
.sidebar .brand .logo {
  background: transparent;
  box-shadow: none;
  color: transparent;
}

.sv-brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: block;
  object-fit: contain;
}

.auth-card .sv-brand-mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.sv-brand-word {
  color: var(--brand-ink);
  font-size: 15px;
  line-height: 19px;
  font-weight: 720;
  letter-spacing: -0.012em;
}

.sv-brand-subtitle {
  margin-top: 2px;
  color: var(--brand-muted);
  font-size: 11px;
  line-height: 16px;
}

.app > .sidebar {
  border-right-color: rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 15% 0%, rgba(36, 166, 161, 0.16), transparent 34%),
    linear-gradient(180deg, var(--brand-deep-strong), #143f4f 68%, #113743);
}

.app > .sidebar::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 38%),
    linear-gradient(90deg, transparent 0 92%, rgba(36, 166, 161, 0.08));
}

.sidebar .brand h1,
.sidebar .sv-brand-word {
  color: #ffffff;
}

.sidebar .brand p,
.sidebar .sv-brand-subtitle {
  color: #b7c9cd;
}

.sidebar .nav button {
  border-radius: 10px;
  color: #b7c9cd;
}

.sidebar .nav button:hover {
  background: rgba(255, 255, 255, 0.065);
  color: #ffffff;
}

.sidebar .nav button.active,
.sidebar .nav button[aria-current="page"] {
  border-color: rgba(116, 217, 211, 0.22);
  background: rgba(27, 127, 123, 0.31);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sidebar .nav button.active::before,
.sidebar .nav button[aria-current="page"]::before {
  background: #74d9d3;
}

.shell-sidebar-avatar {
  border-color: rgba(116, 217, 211, 0.22);
  background: rgba(36, 166, 161, 0.12);
  color: #e8fbfa;
}

.shell-collapse-btn {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
}

.shell-collapse-btn:hover {
  border-color: rgba(116, 217, 211, 0.22);
  background: rgba(36, 166, 161, 0.09);
}

.app > .main,
.main > .topbar {
  background-color: var(--brand-bg);
}

.main > .topbar {
  border-bottom-color: rgba(220, 227, 231, 0.92);
  background: rgba(246, 248, 249, 0.94);
}

.shell-global-search input {
  border-color: var(--brand-border);
  background: rgba(255, 255, 255, 0.98);
}

.shell-global-search input:hover {
  border-color: var(--brand-border-strong);
}

.shell-global-search input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.shell-utility-btn:hover,
.main > .topbar .topbar-actions > .icon-btn:hover {
  border-color: #bfd8db;
  background: #ffffff;
  color: var(--brand-primary-hover);
}

.shell-page-header {
  position: relative;
}

.shell-page-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(36, 166, 161, 0.35), transparent 44%);
  pointer-events: none;
}

/* ================================================================
   VISUAL-04 — SHARED COMPONENT LANGUAGE
   ================================================================ */
.card,
.auth-card,
.client-card,
.issue,
.month,
.rawcell,
.msg,
.contract-line,
.entity-row,
[class*="-panel"],
[class*="-registry"] {
  border-color: var(--brand-border);
}

.card,
.client-card,
.issue,
.month,
.entity-row {
  box-shadow: var(--shadow-xs);
}

.card:hover,
.client-card:hover,
.issue:hover,
.month:hover {
  border-color: var(--brand-border-strong);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.btn {
  border-color: var(--brand-border-strong);
  color: #31434d;
  box-shadow: var(--shadow-xs);
}

.btn:not(.primary):not(.green):not(.danger):hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: #9fc7cb;
  background: #f1f8f8;
  color: var(--brand-primary-hover);
}

.btn.primary {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(23, 107, 135, 0.18);
}

.btn.primary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--brand-primary-hover);
  background: var(--brand-primary-hover);
  color: #ffffff;
  box-shadow: var(--shadow-primary);
}

.btn.primary:active:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--brand-primary-active);
  background: var(--brand-primary-active);
}

.field input,
.field select,
.field textarea {
  border-color: var(--brand-border-strong);
}

.field input:hover:not(:disabled),
.field select:hover:not(:disabled),
.field textarea:hover:not(:disabled) {
  border-color: #9fb0b8;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.pill.service,
.source-badge,
.role-badge,
.pill.blue {
  border-color: #b9dcda;
  background: #eef8f7;
  color: #176966;
}

.tablewrap {
  border-color: var(--brand-border);
  box-shadow: none;
}

th {
  background: #f2f6f7;
  color: #41535e;
  border-bottom-color: var(--brand-border);
}

tr:hover td {
  background: #f7fbfb;
}

.selected-row td {
  background: #edf7f7 !important;
}

.selected-row td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-thread);
}

.tab,
[class$="-tab"] {
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.tab.active,
[role="tab"][aria-selected="true"] {
  border-color: #b9dcda;
  background: #edf7f7;
  color: #155f64;
}

.hint {
  border-left-color: var(--brand-thread);
  background: #eef8f7;
  color: #24525a;
}

.empty-state,
.empty {
  color: var(--brand-muted);
}

.modal-backdrop,
.drawer-backdrop {
  background: rgba(18, 59, 74, 0.44);
}

.modal-card {
  border-color: var(--brand-border);
  box-shadow: 0 26px 74px rgba(18, 59, 74, 0.2);
}

.toast {
  border-color: var(--brand-border);
  box-shadow: 0 16px 42px rgba(18, 59, 74, 0.14);
}

.busy-overlay {
  background: rgba(246, 248, 249, 0.78);
}

.busy-card {
  border-color: var(--brand-border);
}

.spinner {
  border-color: #c9d5d9;
  border-top-color: var(--brand-primary);
}

/* ================================================================
   VISUAL-05 — CLIENTS / CONTRACTS / DOSSIER
   ================================================================ */
.clients-registry,
.contracts-registry,
.clients-detail-panel,
.contracts-detail-panel,
.contract-dossier,
.client-summary-card,
.client-contact-card,
.client-verification-card,
.client-comments-card,
.client-edit-card {
  border-color: var(--brand-border);
}

.clients-registry,
.contracts-registry,
.clients-detail-panel,
.contracts-detail-panel {
  box-shadow: var(--shadow-sm);
}

.clients-registry-head,
.contracts-registry-head,
.clients-detail-header,
.contracts-detail-header {
  border-color: var(--brand-border);
}

.clients-view-btn:hover,
.contracts-view-btn:hover {
  background: #edf7f7;
  color: var(--brand-primary-hover);
}

.clients-view-btn.active,
.clients-view-btn[aria-pressed="true"],
.contracts-view-btn.active,
.contracts-view-btn[aria-pressed="true"] {
  border-color: #b9dcda;
  background: #edf7f7;
  color: #176966;
}

.client-filter-chip,
.contract-filter-chip {
  border-color: #b9dcda;
  background: #eef8f7;
  color: #176966;
}

.clients-table tbody tr,
.contracts-table tbody tr {
  transition: background-color var(--motion-fast) var(--motion-ease);
}

.clients-table tbody tr:hover td,
.contracts-table tbody tr:hover td {
  background: #f6fbfa;
}


.clients-detail-panel::before,
.contracts-detail-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-thread-bright), transparent 84%);
  pointer-events: none;
}

.clients-detail-tabs,
.contracts-detail-tabs {
  border-bottom-color: var(--brand-border);
}

.clients-detail-tab[aria-selected="true"],
.contracts-detail-tab[aria-selected="true"] {
  color: #155f64;
}

.client-contracts-table tbody tr {
  border-color: var(--brand-border);
  box-shadow: none;
}

.client-contracts-table tbody tr:hover {
  border-color: #9fc7cb;
  background: #f6fbfa;
}

.contract-dossier-section,
.contract-dossier-card,
.contract-lifecycle-card,
.contract-services-card,
.contract-incidents-card {
  border-color: var(--brand-border);
  background: var(--brand-surface);
}

.contract-dossier-section h4,
.contract-dossier-card h4 {
  color: var(--brand-ink);
}

.contract-lifecycle-rail,
.lifecycle-rail {
  --lifecycle-accent: var(--brand-thread);
}

.lifecycle-stage.is-current,
.contract-lifecycle-stage.is-current {
  border-color: #9fc7cb;
  background: #eef8f7;
}

/* ================================================================
   VISUAL-06 — DASHBOARD
   ================================================================ */
.dashboard-workspace {
  gap: 18px;
}

.dashboard-command {
  position: relative;
  overflow: hidden;
  border-color: var(--brand-border);
  background: var(--brand-surface);
  box-shadow: var(--shadow-sm);
}

.dashboard-command::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-thread-bright));
}

.dashboard-eyebrow {
  color: var(--brand-primary);
}

.dashboard-source-card {
  border-color: #b9dcda;
  background: #f1f9f8;
}

.dashboard-source-icon {
  background: #ddf3f1;
  color: #176966;
}

.dashboard-source-card span:not(.dashboard-source-icon),
.dashboard-source-card .icon-btn {
  color: #176966;
}

.dashboard-source-card .icon-btn:hover {
  border-color: #b9dcda;
}

.dashboard-metric {
  border-color: var(--brand-border);
  box-shadow: none;
}

.dashboard-metric:hover {
  border-color: var(--brand-border-strong);
  box-shadow: var(--shadow-sm);
}

.dashboard-metric:not(.critical):not(.warning) .dashboard-metric-icon {
  background: #eef8f7;
  color: #176966;
}

.dashboard-section,
.dashboard-panel,
.dashboard-quality-card,
.dashboard-activity-card {
  border-color: var(--brand-border);
}

.dashboard-row:hover,
.dashboard-contract-row:hover,
.dashboard-activity-row:hover {
  background: #f6fbfa;
}

/* ================================================================
   VISUAL-07 — ISSUES / PAYMENTS / TERMINATIONS
   ================================================================ */
.issues-registry,
.payments-registry,
.terminations-registry,
.issues-detail-panel,
.payments-detail-panel,
.terminations-detail-panel,
.pv2-import,
.pv2-preview-result,
.payments-unified-workspace {
  border-color: var(--brand-border);
}

.issues-registry,
.payments-registry,
.terminations-registry,
.issues-detail-panel,
.payments-detail-panel,
.terminations-detail-panel {
  box-shadow: var(--shadow-sm);
}

.issues-detail-panel::before,
.payments-detail-panel::before,
.terminations-detail-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-thread-bright), transparent 82%);
  pointer-events: none;
}

.issues-view-btn.active,
.payments-view-btn.active,
.terminations-view-btn.active,
.issues-view-btn[aria-pressed="true"],
.payments-view-btn[aria-pressed="true"],
.terminations-view-btn[aria-pressed="true"] {
  border-color: #b9dcda;
  background: #edf7f7;
  color: #176966;
}

.payments-table td,
.payments-unified-workspace td,
.pv2-table td,
.pv2-preview-metric strong,
.pv2-preview-metric .num {
  font-variant-numeric: tabular-nums;
}

.pv2-import,
.pv2-preview-result,
.pv2-preview-metric,
.pv2-card,
.payments-unified-card {
  min-width: 0;
}

.pv2-preview-metric,
.payments-unified-card {
  border-color: var(--brand-border);
  box-shadow: none;
}

.pv2-preview-metric:hover,
.payments-unified-card:hover {
  border-color: var(--brand-border-strong);
}

.pv2-preview-metric span,
.pv2-preview-metric strong,
.payments-unified-card * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ================================================================
   VISUAL-08 — SOURCES / AUDIT / ADMIN / INTEGRATIONS
   ================================================================ */
.sources-workspace,
.sources-registry,
.sources-panel,
.admin-workspace,
.admin-card,
.integrations-workspace,
.integrations-card,
.template-admin,
.import-workspace {
  border-color: var(--brand-border);
}

.sources-source-card,
.source-card,
.integration-card,
.admin-card,
.user-card,
.template-card {
  border-color: var(--brand-border);
  box-shadow: none;
}

.sources-source-card:hover,
.source-card:hover,
.integration-card:hover,
.admin-card:hover,
.user-card:hover,
.template-card:hover {
  border-color: var(--brand-border-strong);
  box-shadow: var(--shadow-sm);
}

.sources-source-icon,
.integration-icon,
.admin-icon {
  background: #eef8f7;
  color: #176966;
}

#sec-audit .tablewrap,
#sec-users .tablewrap {
  border-color: var(--brand-border);
}

#sec-audit th,
#sec-users th {
  background: #f2f6f7;
}

body.svyazano-standalone {
  background: var(--brand-bg) !important;
  color: var(--brand-ink) !important;
}

body.svyazano-standalone .card,
body.svyazano-standalone .panel,
body.svyazano-standalone [class*="card"] {
  border-color: var(--brand-border);
}

.sv-standalone-brand {
  min-height: 54px;
  margin: 0 0 16px;
  padding: 8px 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--brand-border);
}

.sv-standalone-brand img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.sv-standalone-brand strong {
  display: block;
  color: var(--brand-ink);
  font-size: 15px;
  line-height: 18px;
}

.sv-standalone-brand span {
  display: block;
  margin-top: 1px;
  color: var(--brand-muted);
  font-size: 11px;
  line-height: 15px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --brand-border: #b6c3c9;
    --brand-border-strong: #899aa3;
    --color-focus-ring: rgba(23, 107, 135, 0.38);
  }

  .btn,
  .field input,
  .field select,
  .field textarea,
  .card,
  .tablewrap {
    border-width: 2px;
  }
}