:root {
  --header-height: 56px;
  --nav-width: 240px;
  --border-color: #d0d4da;
  --divider-color: #e7eaee;
  --text-primary: #141f34;
  --text-secondary: #6b7280;
  --accent: #008eff;
  --accent-dark: #0072cc;
  --accent-soft: #e6f4ff;
  --hover-bg: rgba(20, 31, 52, 0.06);
  --app-bg: #f3f5f8;
  --card-bg: #ffffff;
  --field-bg: #f1f3f6;
  --placeholder-fg: #8a919c;
  --elevation-1: 0 1px 2px rgba(20, 31, 52, 0.10), 0 1px 3px rgba(20, 31, 52, 0.08);
  --elevation-2: 0 2px 4px rgba(20, 31, 52, 0.10), 0 2px 8px rgba(20, 31, 52, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-primary);
}

body {
  background: var(--app-bg);
}

/* Vue mounts into #app; the app-shell grid lives here so it fills the viewport. */
#app {
  height: 100%;
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main";
  grid-template-rows: var(--header-height) 1fr;
  grid-template-columns: var(--nav-width) 1fr;
}

/* ---- Header ---- */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  background: var(--card-bg);
  box-shadow: var(--elevation-1);
  position: relative;
  z-index: 2;
}

.logo {
  width: 131px;
  height: 28px;
  flex-shrink: 0;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMxIiBoZWlnaHQ9IjI4IiB2aWV3Qm94PSIwIDAgMTMxIDI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTQzLjEwNjggNS42VjIyLjRIMzkuNzQ3OUwzMi40NzAxIDEyLjg4VjIyLjRIMjguNTU2OVY1LjZIMzEuOTEwM0wzOS4xODgxIDE1LjEyVjUuNkg0My4xMDY4WiIgZmlsbD0iIzE0MUYzNCIvPgogICAgPHBhdGggZD0iTTU1Ljk4MyAxOS4wNFYyMi40SDQ1LjM0NjJWOC40SDU1Ljk4M0w1NC44NjMzIDExLjc2SDQ4LjcwNTJWMTRINTQuODYzM1YxNi44SDQ4LjcwNTJWMTkuMDRINTUuOTgzWiIgZmlsbD0iIzE0MUYzNCIvPgogICAgPHBhdGggZD0iTTYxLjAyMTQgMTEuNzZINTcuMTAyN0w1OC4yMjIzIDguNEg2OC4zNTc5VjExLjc2SDY0Ljk0MDJWMjIuNEg2MS4wMjE0VjExLjc2WiIgZmlsbD0iIzE0MUYzNCIvPgogICAgPHBhdGggZD0iTTg1LjY1MzkgNS42VjIyLjRIODEuNzM1MVYxNS42OEg3NS41NzY5VjIyLjRINzEuNjU4MlY1LjZINzUuNTc2OVYxMi4zMkg4MS43MzUxVjUuNkg4NS42NTM5WiIgZmlsbD0iIzE0MUYzNCIvPgogICAgPHBhdGggZD0iTTk0LjYxMTEgMjIuNEM5MC45NzIyIDIyLjQgODcuODkzMiAyMC4xNiA4Ny44OTMyIDE2LjI2NzRWOC40SDkxLjgxMlYxNi4yNjc0QzkxLjgxMiAxNy45MiA5My4yMTE1IDE5LjA0IDk0LjYxMTEgMTkuMDRDOTYuMDEwNyAxOS4wNCA5Ny40MTAzIDE3LjkyIDk3LjQxMDMgMTYuMjY3NFY4LjRIMTAxLjMyOVYxNi4yNEMxMDEuMzI5IDIwLjE2IDk4LjI1IDIyLjQgOTQuNjExMSAyMi40WiIgZmlsbD0iIzE0MUYzNCIvPgogICAgPHBhdGggZD0iTTExNi40NDUgOC40VjIyLjRIMTEzLjA4NkwxMDcuNDg3IDE1LjEyVjIyLjRIMTAzLjU2OFY4LjRIMTA2LjkyN0wxMTIuNTI2IDE1LjY4VjguNEgxMTYuNDQ1WiIgZmlsbD0iIzE0MUYzNCIvPgogICAgPHBhdGggZD0iTTEyMi42MDMgMTEuNzZIMTE4LjY4NFY4LjRIMTMxTDEyOS44ODEgMTEuNzZIMTI2LjUyMVYyMi40SDEyMi42MDNWMTEuNzZaIiBmaWxsPSIjMTQxRjM0Ii8+CiAgICA8cGF0aCBkPSJNOC4xMDI4NiA4Ljg0MTg5QzUuNjY1OTEgOC44NDE4OSAzLjY4MzI3IDYuODU3ODUgMy42ODMyNyA0LjQxMzc2QzMuNjgzMjcgMS45ODQwMyA1LjY2NTkxIDAgOC4xMDI4NiAwQzEwLjUzOTggMCAxMi41MjI0IDEuOTg0MDMgMTIuNTIyNCA0LjQxMzc2QzEyLjUyMjQgNi44NTc4NSAxMC41Mzk4IDguODQxODkgOC4xMDI4NiA4Ljg0MTg5WiIgZmlsbD0iIzAwOEVGRiIvPgogICAgPHBhdGggZD0iTTIxLjk1MDggMTQuOTMwN0MyMS44OTU3IDEwLjY0MDggMjEuMzE3OCA2LjQyMTQ1IDE5LjYyNSAyLjQ3MDIyQzE5LjI4MSAxLjY3OTk4IDE4LjAyODUgMS43NTA1NCAxNy42NzA3IDIuNDcwMjJDMTQuMzgxNiA4Ljk3NTYgOC4xNDcyMyAxMi44NzA0IDEuMTU2MDMgMTMuNzczNkgxLjE0MjI3QzAuNTA5MjA0IDEzLjc3MzYgMCAxNC4yOTU2IDAgMTQuOTQ0OEMwIDE1LjU5MzkgMC41MDkyMDQgMTYuMTE2MSAxLjE0MjI3IDE2LjExNjFDOC4xNDcyOCAxNy4wMTkyIDE0LjM5NTMgMjAuOTI4IDE3LjY3MDcgMjcuNDMzNUMxOC4wMjg1IDI4LjE1MzIgMTkuMjgxIDI4LjIyMzggMTkuNjI1IDI3LjQzMzVDMjEuMzE3OCAyMy40ODIyIDIxLjg5NTcgMTkuMjYyOCAyMS45NTA4IDE0Ljk3M1YxNC45NTg5VjE0LjkzMDdaIiBmaWxsPSIjMDA4RUZGIi8+Cjwvc3ZnPgo=) no-repeat center / contain;
}

.header-search {
  flex: 1;
  max-width: 420px;
}

.header-search input {
  width: 100%;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 19px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--field-bg);
  outline: none;
  transition: box-shadow 0.15s, background 0.15s;
}

.header-search input:focus {
  background: var(--card-bg);
  box-shadow: var(--elevation-2);
}

.header-spacer {
  flex: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-button {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  border-radius: 50%;
  font-size: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.icon-button:hover {
  background: var(--hover-bg);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--elevation-1);
}

/* ---- Navigation ---- */
.app-nav {
  grid-area: nav;
  background: var(--card-bg);
  box-shadow: var(--elevation-1);
  padding: 12px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  padding: 14px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 0 20px 20px 0;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.nav-item:hover {
  background: var(--hover-bg);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 500;
}

/* Detail folders (Замовлення / Строчки, Товари / SKU, Склади / Транзакції)
   are nested under their parent entity. */
.nav-item-sub {
  padding-left: 30px;
  font-size: 13px;
  color: var(--text-secondary);
}

.nav-item .nav-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-item .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---- Main content ---- */
.app-main {
  grid-area: main;
  overflow-y: auto;
}

.content-zone-hint {
  height: 100%;
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--placeholder-fg);
  font-size: 14px;
}

/* ============================================================
 * Record page
 * ============================================================ */

.record-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.record-body {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.card {
  background: var(--card-bg);
}

/* ---- Left: fields panel (vertical field set) ---- */
.record-form {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--divider-color);
  transition: width 0.25s ease;
  overflow: hidden;
}

/* Keep the left panel's content laid out at full width while it slides. */
.record-form:not(.record-form-right) .form-panel-header,
.record-form:not(.record-form-right) .record-form-content {
  width: 400px;
}

.form-panel-header {
  padding: 14px 20px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--divider-color);
  flex-shrink: 0;
}

.form-panel-header .record-title {
  color: var(--accent-dark);
}

.record-form-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 20px;
}

/* ---- Right fields panel ---- */
.record-form-right {
  width: 340px;
  border-right: none;
  border-left: 1px solid var(--divider-color);
}

.record-form-right .record-form-content {
  width: 340px; /* keep content laid out while the panel slides */
}

/* A collapsible side panel (left or right) rolls in/out to zero width. */
.record-form.is-collapsed {
  width: 0;
  border-width: 0;
}

/* Slim handle next to a collapsible panel to roll it in/out. */
.panel-handle {
  width: 20px;
  flex-shrink: 0;
  border: none;
  border-left: 1px solid var(--divider-color);
  border-right: 1px solid var(--divider-color);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.panel-handle:hover {
  background: var(--hover-bg);
}

.handle-chevron {
  display: inline-block;
}

/* ---- Record header (full-width: back, title, toolbar) ---- */
.record-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--divider-color);
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 18px;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-back:hover {
  background: var(--hover-bg);
}

.toolbar-spacer {
  flex: 1;
}

.toolbar-separator {
  width: 1px;
  height: 22px;
  background: var(--border-color);
  margin: 0 8px;
  flex-shrink: 0;
}

.toolbar-btn {
  position: relative;
  font-size: 14px;
}

.toolbar-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--card-bg);
}

.dropdown {
  position: relative;
  margin-left: 6px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  padding: 6px 0;
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--elevation-2);
  z-index: 10;
}

.dropdown-menu.hidden {
  display: none;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: none;
  background: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--hover-bg);
}

.dropdown-divider {
  height: 1px;
  background: var(--divider-color);
  margin: 6px 0;
}

.dropdown-item-accent {
  color: var(--accent-dark);
  font-weight: 500;
}

.dropdown-item-label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 1px;
}

.record-title {
  font-size: 20px;
  font-weight: 500;
}

/* ---- Collapsible field groups ---- */
.record-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.field-group {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.group-header:hover {
  background: var(--hover-bg);
}

.group-chevron {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.field-group.collapsed .group-chevron {
  transform: rotate(-90deg);
}

.group-label {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
}

.group-count {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
}

.group-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 14px 16px;
  overflow: hidden;
}

.field-group.collapsed .group-body {
  display: none;
}

/* ---- Custom widgets (customer / partner developed, field-group chrome) ---- */
.widget-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.widget-body {
  padding: 0;
  gap: 0;
}

.widget-frame {
  display: block;
  width: 100%;
  height: 240px;
  border: none;
  border-top: 1px solid var(--divider-color);
}

.widget-meta {
  padding: 8px 14px;
  border-top: 1px solid var(--divider-color);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Backlinks (system section) ---- */
.backlink-folder {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.backlink-folder + .backlink-folder {
  margin-top: 8px;
}

.backlink-folder-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.backlink-snippets {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* ---- Record snippet: rounded outlined label, field values with wide gaps ---- */
.record-snippet {
  --folder-color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 24px;
  max-width: 100%;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--folder-color) 35%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--folder-color) 8%, white);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.record-snippet:hover {
  border-color: var(--folder-color);
  background: color-mix(in srgb, var(--folder-color) 16%, white);
  box-shadow: var(--elevation-1);
}

.snippet-value {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.snippet-value:first-child {
  color: color-mix(in srgb, var(--folder-color) 80%, black);
  font-weight: 500;
  flex-shrink: 0;
}

/* ---- Fields (Material filled style) ---- */
.field-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  padding-left: 12px;
}

.field-input {
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--field-bg);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s, background 0.15s;
}

.field-input:hover {
  background: #eaedf1;
}

.field-input:focus {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 7px;
  background: var(--field-bg);
}

/* Record-link field: snippets keep their natural label-like width */
.field-row .record-snippet,
.field-row .chip-add {
  align-self: flex-start;
}

.field-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 0;
}

/* ---- Image gallery field ---- */
.field-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 0;
}

.gallery-thumb {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--field-bg);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}

.gallery-thumb:hover {
  box-shadow: var(--elevation-2);
  transform: translateY(-1px);
}

.gallery-add {
  width: 96px;
  height: 72px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.gallery-add:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Image preview inside a list-view cell */
.cell-gallery {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cell-thumb {
  width: 44px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.cell-muted {
  color: var(--text-secondary);
}

/* Read-only display for computed/derived fields (lookup, numberFormula) and
   formatted numeric values — styled like an input but not editable. */
.field-readonly {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  background: transparent;
  border-bottom-style: dashed;
  cursor: default;
}

.field-readonly:hover {
  background: var(--hover-bg);
}

/* Editable percent field: number input with a trailing % sign. */
.field-percent {
  display: flex;
  align-items: center;
  gap: 6px;
}

.field-percent .field-input {
  width: 80px;
  flex: none;
}

.field-percent-suffix {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---- styled-field-group: label-left / value-right rows (invoice/summary look) ---- */
.styled-field-group {
  width: 300px;
  margin: 18px 0 8px auto; /* gap from the widget above + right-align like an invoice */
  padding: 10px 14px 12px;
  border: 1px solid var(--border-color); /* same card border as .field-group */
  border-radius: 10px;
  overflow: hidden;
}

.styled-field-group-title {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.styled-field-group .field-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}

.styled-field-group .field-label {
  padding-left: 0;
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
}

.styled-field-group .field-computed { display: none; } /* hide the ƒ marker here */

/* read-only amounts: plain right-aligned numbers */
.styled-field-group .field-readonly {
  width: auto;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.styled-field-group .field-readonly:hover { background: none; }

/* editable values (e.g. the discount %): compact right-aligned input */
.styled-field-group .field-percent { gap: 2px; }
.styled-field-group .field-percent .field-input {
  width: 56px;
  min-height: 30px;
  text-align: right;
}

.styled-divider {
  height: 1px;
  background: var(--divider-color);
  margin: 6px 0;
}

/* emphasized row (the total) */
.styled-field-group .is-total .field-label {
  font-weight: 500;
  color: var(--text-primary);
}

.styled-field-group .is-total .field-readonly {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-dark);
}

/* ƒ marker next to a computed field's label. */
.field-computed {
  margin-left: 6px;
  font-style: italic;
  color: var(--accent);
  cursor: help;
}

/* Folder name under the record title in the form header. */
.record-subtitle {
  margin-top: 2px;
  font-size: 12px;
  color: var(--accent-dark);
  opacity: 0.8;
}

.field-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border: none;
  cursor: pointer;
  box-shadow: var(--elevation-1);
}

.chip-add {
  background: var(--card-bg);
  border: 1px dashed var(--border-color);
  color: var(--text-secondary);
  box-shadow: none;
}

/* Suggested values pulled from a linked record (e.g. client address):
   a dropdown toggle to the right of the input. */
.field-input-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.field-input-row .field-input {
  flex: 1;
  min-width: 0;
}

.field-suggest {
  position: relative;
  flex-shrink: 0;
}

.field-suggest-toggle {
  height: 100%;
  min-height: 36px;
  width: 30px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 6px 6px 0 0;
  background: var(--field-bg);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.field-suggest-toggle:hover {
  background: #eaedf1;
  color: var(--text-primary);
}

.field-suggest-toggle.open {
  color: var(--accent-dark);
  border-bottom: 2px solid var(--accent);
}

.field-suggest-menu {
  min-width: 200px;
}

.field-suggest-menu .dropdown-section {
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---- Buttons (Material text button) ---- */
.btn-text {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-dark);
  cursor: pointer;
  transition: background 0.15s;
}

.btn-text:hover {
  background: var(--accent-soft);
}

/* ---- Right: side panel with tabs ---- */
.record-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-tabs {
  display: flex;
  border-bottom: 1px solid var(--divider-color);
}

.side-tab {
  padding: 14px 24px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: background 0.15s, color 0.15s;
}

.side-tab:hover {
  background: var(--hover-bg);
}

.side-tab.active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 500;
}

.side-panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.side-panel.hidden {
  display: none;
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-event {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider-color);
}

.timeline-event:last-child {
  border-bottom: none;
}

.event-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--field-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: var(--elevation-1);
}

.event-body {
  min-width: 0;
}

.event-title {
  font-size: 13px;
  font-weight: 500;
}

.event-detail {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 2px;
}

.event-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Related records table (Deals tab) */
.records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.records-table th {
  position: relative;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-bottom: 2px solid var(--divider-color);
  white-space: nowrap;
}

/* Per-column filter affordance: a funnel icon revealed on header hover. */
.col-filter {
  margin-left: 6px;
  padding: 2px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}

.records-table th:hover .col-filter,
.col-filter.active {
  opacity: 1;
}

.col-filter:hover { color: var(--accent); }
.col-filter.active { color: var(--accent-dark); }

/* Stub filter popup anchored under the header cell. */
.col-filter-popup {
  position: absolute;
  top: 100%;
  left: 8px;
  z-index: 5;
  margin-top: 4px;
  width: 220px;
  padding: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--elevation-2);
  cursor: default;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.col-filter-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.col-filter-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.records-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.records-table th.sortable:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}

.sort-arrow::after {
  display: inline-block;
  width: 14px;
  color: var(--accent-dark);
}

th.sorted-asc .sort-arrow::after {
  content: ' ↑';
}

th.sorted-desc .sort-arrow::after {
  content: ' ↓';
}

.records-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider-color);
}

.records-table tbody tr:hover {
  background: var(--hover-bg);
  cursor: pointer;
}

.table-cell-title {
  color: var(--accent-dark);
  font-weight: 500;
}

.table-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 24px;
}

/* ---- Related table: inline-editable cells (order-line Кількість/Знижка) ---- */
.cell-edit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.cell-input {
  width: 64px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--field-bg);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.cell-input:hover { border-color: var(--border-color); }

.cell-input:focus {
  border-color: var(--accent);
  background: var(--card-bg);
}

.cell-input-suffix {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Trailing per-row remove action (order lines) — revealed on row hover */
.records-table .col-actions {
  width: 1%;
  padding-left: 4px;
  padding-right: 8px;
  text-align: right;
}

.row-remove {
  border: none;
  background: none;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.12s, background 0.15s, color 0.15s;
}

.records-table tbody tr:hover .row-remove { opacity: 1; }

.row-remove:hover {
  background: var(--hover-bg);
  color: #c0392b;
}

/* ---- Related table: "add line" SKU picker ---- */
.related-add {
  padding: 8px 12px 4px;
}

.related-add-btn {
  padding: 6px 10px;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-dark);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.related-add-btn:hover,
.related-add-btn.open {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Searchable record/SKU drop-down (positioned `fixed` from the trigger).
   Shared by the add-line SKU picker and the folderLink record picker. */
.picker-menu {
  display: flex;
  flex-direction: column;
  max-width: 360px;
  padding: 0;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.picker-search {
  padding: 8px;
  border-bottom: 1px solid var(--divider-color);
}

.picker-search .field-input { border-radius: 6px; }

.picker-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
}

.picker-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.picker-item-name { font-size: 13px; color: var(--text-primary); }

.picker-item-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.picker-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* folderLink record picker: removable snippet chips + a "+ link" trigger */
.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%; /* stay within the (narrow) form panel */
  min-width: 0;
}

/* let the snippet shrink and ellipsize its values inside the chip */
.link-chip .record-snippet { min-width: 0; }

.link-remove {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.link-remove:hover { background: var(--hover-bg); color: var(--text-primary); }

.field-link-picker { position: relative; }

/* ---- Filled primary button (dialog actions, list "create") ---- */
.btn-primary {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover { background: var(--accent-dark); }

.btn-primary:disabled {
  background: var(--border-color);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.folder-view-create { margin-left: auto; }

/* ---- Create-record dialog (modal) ---- */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 31, 52, 0.45);
}

.dialog-box {
  display: flex;
  flex-direction: column;
  width: min(980px, 96vw);
  height: min(700px, 92vh);
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: var(--elevation-2);
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--divider-color);
  flex-shrink: 0;
}

.dialog-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.dialog-icon { font-size: 18px; }

.dialog-close {
  border: none;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.dialog-close:hover { background: var(--hover-bg); color: var(--text-primary); }

/* The panels fill the dialog body and scroll internally (reuses .record-body). */
.dialog-body {
  flex: 1;
  min-height: 0;
}

.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--divider-color);
  flex-shrink: 0;
}

/* Tasks */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: var(--elevation-1);
  font-size: 13px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.task-item:hover {
  box-shadow: var(--elevation-2);
}

.task-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.task-item.done .task-title {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.task-title {
  flex: 1;
}

.task-due {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---- Folder list view ---- */
.folder-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  min-height: 0;
}

.folder-view-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: var(--elevation-1);
}

.folder-view-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
}

.folder-view-icon {
  font-size: 20px;
}

.folder-view-title .count {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  background: var(--field-bg);
  padding: 2px 10px;
  border-radius: 12px;
}

.folder-search {
  margin-left: auto;
  max-width: 280px;
}

.folder-view-body {
  flex: 1;
  overflow: auto;
  border-radius: 10px;
  box-shadow: var(--elevation-1);
}

/* Clickable record rows (folder list + related tables) */
.records-table .record-row {
  cursor: pointer;
}

.records-table .record-row:hover {
  background: var(--accent-soft);
}

/* A snippet that links to a record gets the pointer affordance already; mark
   non-linking snippets as default-cursor. */
.record-snippet:not(.is-link) {
  cursor: default;
}