: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 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--divider-color);
  flex-shrink: 0;
}
.form-panel-heading { min-width: 0; }

.panel-settings-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
  color: var(--accent-dark);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.panel-settings-btn:hover {
  background: var(--card-bg);
  border-color: var(--divider-color);
}

.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;
}

/* ============================================================
 * Folder management: nav menu, settings page, schema, layouts, editor
 * ============================================================ */

/* ---- Nav folder hover menu ---- */
.nav-folder { position: relative; }

.nav-menu-btn {
  margin-left: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s;
}

.nav-folder:hover .nav-menu-btn,
.nav-menu-btn.open { opacity: 1; }
.nav-menu-btn:hover { background: rgba(20, 31, 52, 0.12); }

.nav-menu {
  position: absolute;
  top: 36px;
  left: 24px;
  right: auto;
  min-width: 200px;
}

/* General dropdown section heading (also used by the field suggest menu). */
.dropdown-section {
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---- Settings page shell ---- */
.settings-page,
.editor-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.settings-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.settings-crumb-icon { font-size: 16px; }
.settings-crumb-name { font-weight: 500; color: var(--text-primary); }
.settings-crumb-sep { color: var(--border-color); }

.settings-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--divider-color);
  flex-shrink: 0;
}

.settings-tab {
  padding: 12px 18px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.settings-tab:hover { color: var(--text-primary); }
.settings-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }

.settings-body { flex: 1; overflow-y: auto; padding: 20px; }

.settings-section { max-width: 1080px; }
.settings-narrow { display: flex; gap: 16px; flex-wrap: wrap; max-width: 760px; }
.settings-narrow .settings-card { flex: 1; min-width: 300px; }

.settings-intro {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-width: 720px;
}
.settings-intro em { color: var(--text-primary); font-style: normal; font-weight: 500; }

.settings-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: var(--elevation-1);
}

.settings-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* ---- Forms ---- */
.form-field { margin-bottom: 14px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-field { flex: 1; }

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  padding-left: 2px;
}

.form-checks { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.check input { width: 15px; height: 15px; accent-color: var(--accent); }
.check-inline { align-self: flex-end; padding-bottom: 8px; white-space: nowrap; }
.check-mini { font-size: 11px; gap: 4px; color: var(--text-secondary); }
.check-mini input { width: 13px; height: 13px; }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-danger { color: #c0392b; text-transform: none; letter-spacing: normal; }
.btn-danger:hover { background: rgba(192, 57, 43, 0.1); }

/* ---- General: icon / color pickers + preview ---- */
.icon-picker { display: flex; align-items: center; gap: 10px; }
.icon-input { width: 56px; text-align: center; font-size: 18px; }
.icon-swatches, .color-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.icon-swatch {
  width: 32px; height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.icon-swatch:hover { background: var(--hover-bg); }
.icon-swatch.active { border-color: var(--accent); background: var(--accent-soft); }

.color-swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(20, 31, 52, 0.12);
  transition: transform 0.12s, box-shadow 0.12s;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px currentColor; }
.color-hex { width: 110px; }

.folder-preview { display: flex; flex-direction: column; gap: 10px; }
.folder-preview-chip {
  --folder-color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--folder-color) 35%, transparent);
  background: color-mix(in srgb, var(--folder-color) 10%, white);
}
.folder-preview-icon { font-size: 16px; }
.folder-preview-name { font-weight: 500; color: color-mix(in srgb, var(--folder-color) 80%, black); }
.folder-preview-desc { font-size: 13px; color: var(--text-secondary); }

/* ---- Schema (master / detail) ---- */
.schema-layout { display: flex; gap: 16px; align-items: flex-start; }
.schema-list { width: 340px; flex-shrink: 0; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.schema-editor { flex: 1; min-width: 0; border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 18px; }

.schema-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--divider-color);
}
.schema-list-title { font-size: 13px; font-weight: 500; }
.schema-count {
  margin-left: 4px; padding: 1px 7px; border-radius: 10px;
  background: var(--field-bg); color: var(--text-secondary); font-size: 11px;
}

.schema-fields { list-style: none; max-height: 60vh; overflow-y: auto; }
.schema-field {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; cursor: pointer; border-left: 2px solid transparent;
  transition: background 0.12s;
}
.schema-field:hover { background: var(--hover-bg); }
.schema-field.active { background: var(--accent-soft); border-left-color: var(--accent); }

.schema-field-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.schema-field-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.schema-field-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.schema-field-type { font-size: 11px; color: var(--text-secondary); }
.schema-usage { font-size: 11px; color: var(--accent-dark); white-space: nowrap; }
.schema-usage.unused { color: var(--placeholder-fg); }

.schema-badge {
  padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 500;
  background: var(--field-bg); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px;
}
.schema-badge.req { background: #fdecea; color: #c0392b; }

.options-editor { display: flex; flex-direction: column; gap: 6px; }
.option-row { display: flex; gap: 6px; align-items: center; }
.option-remove {
  border: none; background: none; color: var(--text-secondary); cursor: pointer;
  padding: 4px 6px; border-radius: 6px; font-size: 12px;
}
.option-remove:hover { background: var(--hover-bg); color: #c0392b; }

.schema-editor-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divider-color);
  font-size: 12px; color: var(--text-secondary);
}
.field-id-tag code { background: var(--field-bg); padding: 1px 6px; border-radius: 4px; }

/* ---- Layouts matrix ---- */
.layouts-grid { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--card-bg); }
.layouts-grid-head, .layouts-row {
  display: grid;
  grid-template-columns: 260px repeat(3, 1fr);
}
.layouts-grid-head { background: var(--field-bg); border-bottom: 1px solid var(--divider-color); }
.lg-corner, .lg-level { padding: 10px 14px; font-size: 12px; font-weight: 500; }
.lg-corner { color: var(--text-secondary); }
.lg-level { display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--divider-color); }
.lg-level-desc { font-size: 11px; font-weight: 400; color: var(--text-secondary); }

.layouts-row { border-bottom: 1px solid var(--divider-color); }
.layouts-row:last-child { border-bottom: none; }

.lg-type { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.lg-type-icon { font-size: 20px; }
.lg-type-name { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.lg-type-desc { font-size: 11px; color: var(--text-secondary); }
.lg-soon {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--field-bg); color: var(--text-secondary); padding: 1px 6px; border-radius: 8px;
}

.lg-cell { display: flex; align-items: center; padding: 12px 14px; border-left: 1px solid var(--divider-color); }
.lg-cell.muted { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(20,31,52,0.02) 6px, rgba(20,31,52,0.02) 12px); }

.lg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 16px; font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer; border: 1px solid transparent;
}
.lg-chip-defined { background: var(--accent-soft); color: var(--accent-dark); }
.lg-chip-defined:hover { background: #d6ecff; }
.lg-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lg-chip-add { background: none; border: 1px dashed var(--border-color); color: var(--text-secondary); }
.lg-chip-add:hover { border-color: var(--accent); color: var(--accent-dark); }
.lg-chip-empty { color: var(--placeholder-fg); cursor: default; }
.level-tag { margin-left: 8px; padding: 2px 8px; font-size: 11px; }

/* ---- Layout editor ---- */
.editor-body { flex: 1; display: flex; min-height: 0; }
.editor-controls {
  width: 380px; flex-shrink: 0; overflow-y: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  background: var(--app-bg); border-right: 1px solid var(--divider-color);
}
.editor-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.editor-preview-bar {
  padding: 8px 16px; font-size: 12px; font-weight: 500; color: var(--text-secondary);
  border-bottom: 1px solid var(--divider-color); background: var(--card-bg); flex-shrink: 0;
}
.preview-shell { flex: 1; overflow: auto; }
.preview-frame { height: 100%; min-width: 760px; }

.ed-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px; }
.ed-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ed-card-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-primary); }
.ed-card-tools { display: flex; align-items: center; gap: 10px; }

.ed-widget { border: 1px solid var(--divider-color); border-radius: 8px; margin-bottom: 8px; background: var(--card-bg); }
.ed-widget-sub { background: var(--app-bg); }
.ed-widget-head, .ed-toolbar-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; }
.ed-toolbar-item { border: 1px solid var(--divider-color); border-radius: 8px; margin-bottom: 6px; }
.ed-widget-name { font-size: 13px; font-weight: 500; }
.ed-widget-name.is-sep { color: var(--text-secondary); font-style: italic; font-weight: 400; }
.ed-widget-actions { display: flex; align-items: center; gap: 2px; }

.ws-btn {
  width: 26px; height: 26px; border: none; background: none; border-radius: 6px;
  color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.ws-btn:hover:not(:disabled) { background: var(--hover-bg); color: var(--text-primary); }
.ws-btn:disabled { opacity: 0.3; cursor: default; }
.ws-btn.on { background: var(--accent-soft); color: var(--accent-dark); }
.ws-btn-x { width: auto; padding: 0 8px; }
.ws-btn-x:hover { color: #c0392b; }

.ws-add { margin-top: 4px; font-size: 12px; }
.ed-add-panel {
  padding: 10px; border: 1px dashed var(--border-color); border-radius: 10px;
  background: none; color: var(--accent-dark); font-family: inherit; font-size: 13px;
  font-weight: 500; cursor: pointer;
}
.ed-add-panel:hover { background: var(--accent-soft); border-color: var(--accent); }

/* widget settings panel */
.widget-settings { padding: 10px; border-top: 1px solid var(--divider-color); background: var(--app-bg); }
.ws-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.ws-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; background: var(--card-bg); border: 1px solid var(--divider-color); border-radius: 6px;
}
.ws-item[draggable="true"] { cursor: grab; }
.ws-item.dragging { opacity: 0.4; }
.ws-item.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.ws-item-lead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ws-grip { color: var(--placeholder-fg); font-size: 12px; line-height: 1; flex-shrink: 0; }
.ws-item-name { font-size: 12px; }
.ws-item-actions { display: flex; align-items: center; gap: 2px; }
.ws-empty { font-size: 12px; color: var(--placeholder-fg); padding: 4px 2px; }
.ws-drop-end {
  font-size: 11px; text-align: center; color: var(--placeholder-fg);
  padding: 6px; border: 1px dashed var(--divider-color); border-radius: 6px;
}
.ws-drop-end.over { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.ws-add-row { display: flex; gap: 8px; align-items: center; }
.ws-note { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* tabs editor */
.ed-tabs { display: flex; flex-direction: column; gap: 10px; }
.ed-tab { border: 1px solid var(--divider-color); border-radius: 8px; padding: 8px; background: var(--app-bg); }
.ed-tab-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ed-tab-name { font-weight: 500; }

/* stub editor */
.editor-stub {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; color: var(--text-secondary); padding: 40px;
}
.editor-stub-icon { font-size: 48px; }
.editor-stub h2 { color: var(--text-primary); }
.editor-stub p { max-width: 420px; font-size: 14px; }

/* ============================================================
 * WYSIWYG layout editor — palette · canvas · inspector
 * ============================================================ */
.ed-hint { font-size: 12px; color: var(--text-secondary); margin-right: 6px; }

.ed-wysiwyg { display: flex; min-height: 0; }

/* ---- side panel (right) — one panel, two modes: Add widgets / Settings ---- */
.ed-sidepanel {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--divider-color); background: var(--card-bg);
}
.ed-sidepanel-tabs {
  display: flex; flex-shrink: 0; border-bottom: 1px solid var(--divider-color);
  background: var(--app-bg);
}
.ed-mode-tab {
  flex: 1; padding: 12px 10px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
.ed-mode-tab:hover { color: var(--text-primary); }
.ed-mode-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.ed-sidepanel-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
.ed-panel-help { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: -2px 0 0; }

/* palette (lives in Add mode) */
.ed-palette-group { display: flex; flex-direction: column; gap: 6px; }
.ed-palette-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-secondary); margin-bottom: 2px;
}
.ed-chip {
  padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--card-bg); font-size: 13px; color: var(--text-primary);
  cursor: grab; user-select: none; transition: border-color 0.12s, box-shadow 0.12s;
}
.ed-chip:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.ed-chip:active { cursor: grabbing; }
.ed-chip-sm { padding: 6px 9px; font-size: 12px; }
.ed-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-chip-row .ed-chip { flex: 0 0 auto; }

/* ---- canvas (center) ---- */
.ed-canvas-scroll { flex: 1; min-width: 0; overflow: auto; background: var(--app-bg); }
.ed-canvas { min-width: 880px; height: 100%; }

/* editable toolbar */
.ed-toolbar-back { opacity: 0.5; cursor: default; }
.ed-tb-items { display: flex; align-items: center; }
.ed-tb-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 4px 4px 9px; border: 1px solid var(--border-color); border-radius: 7px;
  background: var(--card-bg); font-size: 12px; cursor: grab; user-select: none;
}
.ed-tb-item.is-sep { color: var(--text-secondary); font-style: italic; background: var(--app-bg); }
.ed-tb-item.dragging { opacity: 0.4; background: transparent; border-style: dashed; }
.ed-tb-x {
  border: none; background: none; color: var(--text-secondary); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.ed-tb-x:hover { color: #c0392b; background: var(--hover-bg); }
/* A constant, comfortably-wide gap sits between actions at all times; dragging just
   colours it in (no width change, so nothing re-lays-out when a drag starts). */
.ed-tb-drop { width: 8px; align-self: stretch; min-height: 26px; border-radius: 4px; margin: 0 1px; transition: background 0.1s; }
.ed-tb-drop.live { background: var(--divider-color); }
.ed-tb-drop.over { background: var(--accent-soft); border: 1px dashed var(--accent); }
.ed-tb-drop-end { flex: 0 0 auto; }

/* per-panel editor tools strip */
.ed-panel-tools {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 12px; color: var(--text-secondary);
}
.ed-panel-tag { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
/* Each panel card opens with an identical label strip at the very top (above the
   left panel's "Record name" header). Solid header fill so it reads as panel
   chrome, not the hatched canvas behind it; fixed height so all three align. */
.ed-panel-tools-top {
  margin-bottom: 0;
  height: 38px;
  padding: 0 20px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--divider-color);
  flex-shrink: 0;
}
.ed-panel-tools-top .ed-panel-tag { color: var(--accent-dark); }
.ed-panel-remove { margin-left: auto; }

/* a fields region (drop target) */
.ed-region { display: flex; flex-direction: column; }
.ed-region.is-empty { min-height: 60px; }

/* Add slots: the free space around widgets. Hover to reveal a ＋ (click opens the
   picker); while a widget is dragged they act as drop targets instead. */
.ed-slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 10px; margin: 1px 0; border-radius: 5px; cursor: pointer;
  transition: min-height 0.1s, background 0.1s;
}
.ed-slot-plus { font-size: 15px; line-height: 1; color: var(--accent-dark); opacity: 0; pointer-events: none; transition: opacity 0.1s; }
.ed-slot:hover:not(.live) { min-height: 28px; background: var(--accent-soft); outline: 1px dashed var(--accent); }
.ed-slot:hover:not(.live) .ed-slot-plus { opacity: 1; }
/* while dragging a widget, the slot is a drop target (no click affordance) */
.ed-slot.live { min-height: 8px; background: var(--divider-color); cursor: default; }
.ed-slot.over { min-height: 24px; background: var(--accent-soft); outline: 1px dashed var(--accent); }
/* empty region: one big "＋ Add widget" target */
.ed-slot-end.empty {
  min-height: 56px; margin: 0; border: 1px dashed var(--border-color);
  border-radius: 8px; background: var(--card-bg);
}
.ed-slot-end.empty:hover:not(.live) { outline: none; border-color: var(--accent); background: var(--accent-soft); }
.ed-slot-empty { font-size: 13px; color: var(--placeholder-fg); }
.ed-slot-end.empty:hover:not(.live) .ed-slot-empty { color: var(--accent-dark); }
.ed-region-empty { font-size: 12px; color: var(--placeholder-fg); padding: 8px; text-align: center; }

/* an editable widget node (chrome + real render) */
.ed-node {
  position: relative; border: 1px solid transparent; border-radius: 9px;
  background: var(--card-bg); transition: border-color 0.12s, box-shadow 0.12s;
}
.ed-node:hover { border-color: var(--border-color); }
.ed-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ed-node.dragging { opacity: 0.4; }
.ed-node-bar {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px;
  border-bottom: 1px solid var(--divider-color); cursor: grab;
}
.ed-node:active .ed-node-bar { cursor: grabbing; }
.ed-grip { color: var(--placeholder-fg); font-size: 13px; cursor: grab; padding: 0 2px; }
.ed-node-label {
  flex: 1; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-secondary);
}
.ed-node-actions { display: flex; align-items: center; gap: 1px; }
.ed-node-body { padding: 2px 4px 6px; }
/* widgets inside the editor canvas drop their own outer card chrome */
.ed-node-body > * { box-shadow: none; }

/* editable tabs (middle panel) */
.ed-tabbed { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ed-tabstrip { align-items: center; flex-wrap: wrap; gap: 2px; padding: 0 4px; }
.ed-tabchip { display: inline-flex; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: grab; }
.ed-tabchip:active { cursor: grabbing; }
.ed-tabchip.active { border-bottom-color: var(--accent); }
.ed-tabchip.dragging { opacity: 0.4; }
.ed-tabchip-tools { display: inline-flex; align-items: center; gap: 0; margin-left: 2px; }
/* Constant gap between tab chips that doubles as the drop zone while dragging —
   dragging only colours it in, so the strip doesn't re-lay-out on drag start. */
.ed-tab-drop { width: 8px; align-self: stretch; min-height: 26px; border-radius: 4px; margin: 0 1px; transition: background 0.1s; }
.ed-tab-drop.live { background: var(--divider-color); }
.ed-tab-drop.over { background: var(--accent-soft); border: 1px dashed var(--accent); }
.ed-tab-drop-end { flex: 0 0 auto; }
.ed-tab-input {
  width: 110px; padding: 8px 6px; border: 1px solid var(--accent); border-radius: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--accent-dark);
  background: var(--card-bg);
}
.ed-tab-add {
  border: none; background: none; color: var(--text-secondary); font-size: 16px;
  cursor: pointer; padding: 6px 10px; border-radius: 6px;
}
.ed-tab-add:hover { background: var(--hover-bg); color: var(--accent-dark); }
.ed-tabbody { flex: 1; }

/* add-right-panel affordance */
.ed-add-rightcol {
  width: 64px; flex-shrink: 0; border: none; border-left: 1px dashed var(--border-color);
  background: var(--app-bg); color: var(--accent-dark); font-family: inherit; font-size: 12px;
  font-weight: 500; cursor: pointer; text-align: center; transition: background 0.12s;
}
.ed-add-rightcol:hover { background: var(--accent-soft); }

/* add-toolbar-action button (replaces the old palette) */
.ed-tb-add {
  flex-shrink: 0; margin-left: 4px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-color); border-radius: 6px;
  background: none; color: var(--accent-dark); font-size: 15px; line-height: 1;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.ed-tb-add:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ---- Editor modals (widget picker / widget settings) ---- */
.ed-modal { width: min(440px, 94vw); height: auto; max-height: 88vh; }
.ed-modal-settings { width: min(480px, 94vw); }
.ed-modal .dialog-body { overflow-y: auto; padding: 16px 20px; }

.ed-picker-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-picker-item {
  padding: 14px 12px; border: 1px solid var(--divider-color); border-radius: 9px;
  background: var(--card-bg); font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--text-primary); text-align: center; cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.ed-picker-item:hover {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ed-settings-body .widget-settings { padding: 0; border-top: none; background: none; }

/* ============================================================
 * Edit mode — make the layout editor obviously distinct from the
 * normal (rendered) record view, and show the layout as a dataless,
 * non-interactive skeleton.
 * ============================================================ */

/* Editor header: accent-tinted with a prominent mode badge. */
.ed-editor-header { background: var(--accent-soft); border-bottom: 2px solid var(--accent); }
.ed-mode-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 4px; padding: 4px 12px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
  letter-spacing: 0.3px; text-transform: uppercase;
}

/* Canvas is a "design surface": a hatched, tinted backdrop so the record page
   clearly reads as an artboard being edited, not a live record. */
.ed-canvas-scroll {
  background-color: #e9edf5;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(83, 109, 170, 0.07) 0, rgba(83, 109, 170, 0.07) 1px,
      transparent 1px, transparent 10px);
  padding: 18px;
}
.ed-canvas { margin: 0 auto; }

/* Empty, non-editable field shell (stands in for an unfilled input). The striped
   "under construction" fill stays put on hover — it's inert, not an input. */
.field-preview-shell,
.field-preview-shell:hover {
  background: repeating-linear-gradient(-45deg,
    rgba(120, 130, 150, 0.05) 0, rgba(120, 130, 150, 0.05) 6px,
    transparent 6px, transparent 12px), var(--field-bg);
  border-bottom: 1px dashed var(--border-color);
  cursor: default;
}
.field-row-preview .field-label { color: var(--placeholder-fg); }

/* Placeholder record title (no data yet). */
.ed-title-placeholder { color: var(--placeholder-fg); font-style: italic; font-weight: 500; }

/* Shared skeleton placeholders for the tab widgets in preview (timeline / tasks /
   backlinks / related table) — same striped "under construction" fill as fields. */
.ph {
  display: block;
  background-color: #e6eaf1;
  background-image: repeating-linear-gradient(-45deg,
    rgba(110, 125, 160, 0.11) 0, rgba(110, 125, 160, 0.11) 6px,
    transparent 6px, transparent 12px);
  border-radius: 6px;
}
.ph-line { height: 12px; }
.ph-sm { height: 9px; }
.ph-stack { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ph-dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.ph-check { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
.ph-chip { display: inline-block; width: 96px; height: 24px; border-radius: 999px; }
.ph-due { width: 46px; flex-shrink: 0; }
.ph-event { align-items: flex-start; }
.ph-task { display: flex; align-items: center; gap: 10px; }

/* skeleton related-records table */
.ph-table { display: flex; flex-direction: column; gap: 10px; }
.ph-table-row { display: flex; gap: 14px; align-items: center; }
.ph-table-head { padding-bottom: 2px; border-bottom: 1px solid var(--divider-color); }
.ph-th {
  flex: 1; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--placeholder-fg);
}
.ph-td { flex: 1; }

/* Custom-widget body placeholder (no live iframe in the editor). */
.widget-frame-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; color: var(--text-secondary); font-size: 13px;
  background: repeating-linear-gradient(-45deg,
    rgba(120, 130, 150, 0.05) 0, rgba(120, 130, 150, 0.05) 6px,
    transparent 6px, transparent 12px), var(--field-bg);
  border: 1px dashed var(--border-color); border-radius: 8px;
}