/* ==========================================================================
   OMNITECH / OmniERP desk
   The try-mode desk that erp-demo.js builds: sections rail, page head band,
   launcher, lists, boards and records. It mirrors the product's own screens,
   so it keeps the product's shape and only borrows the site's tokens
   (styles.css) for colour, type and motion.

   Loaded by omnierp-demo.html (full page) and index.html (the scaled-down
   preview in the OmniERP band).
   ========================================================================== */

/* ---- The desk ---- */

/* The desk is the page: no frame around it, it runs edge to edge under the
   demo bar and only its rail and workspace scroll. */
.erp {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}

.erp-fallback { display: grid; gap: 16px; }
.erp-fallback p { max-width: 62ch; padding: 0 20px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.erp-fallback .btn { margin: 0 20px 22px; justify-self: start; }
.erp.is-live .erp-fallback { display: none; }

.erp-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

/* Sections: the plaster edge of the desk */
.erp-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-inline-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 62%, var(--panel));
}

/* The search row and the page head share one height, so a single hairline
   runs under both across the page. */
.erp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.erp-search-icon svg { width: 15px; height: 15px; color: var(--ink-3); }
.erp-search-input {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
}
.erp-search-input::placeholder { color: var(--ink-3); opacity: 1; }
.erp-search-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.erp-search-input::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.6); }

.erp-nav {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.erp-nav-head {
  padding: 14px 10px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}
.erp-nav-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: start;
  cursor: pointer;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.erp-nav-row:hover { color: var(--ink); background: var(--gold-wash); }
.erp-nav-row.is-current { color: var(--ink); }
.erp-nav-icon { display: flex; flex-shrink: 0; }
.erp-nav-icon svg { width: 16px; height: 16px; color: var(--ink-3); transition: color 0.25s var(--ease); }
.erp-nav-row:hover .erp-nav-icon svg,
.erp-nav-row.is-current .erp-nav-icon svg { color: var(--gold); }
.erp-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-nav-count { margin-inline-start: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
[dir="rtl"] .erp-nav-count { font-family: var(--mono); }

/* The place marker: an octagon that glides to the open section */
.erp-marker {
  position: absolute;
  inset-inline-start: 13px;
  top: 0;
  width: 26px;
  height: 26px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.26s var(--ease), opacity 0.2s var(--ease);
}
.erp-marker.is-on { opacity: 1; }
.erp-marker svg { width: 26px; height: 26px; fill: var(--gold-wash-strong); stroke: var(--gold); stroke-width: 1.25px; }

.erp-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
[dir="rtl"] .erp-user { font-family: var(--arabic); font-size: 11.5px; }
.erp-user-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: 0.75; }

/* Page head band */
.erp-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }

.erp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px clamp(14px, 1.8vw, 26px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
}

.erp-path { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; overflow: hidden; }
.erp-path-link {
  padding: 2px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
button.erp-path-link:hover { color: var(--gold); }
.erp-path-link.is-current { color: var(--ink); font-weight: 600; cursor: default; }
.erp-path-sep { color: var(--ink-3); opacity: 0.7; }
.erp-path-doc { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }

.erp-head-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

/* Where you are, in the machine's voice; it flashes gold when the demo
   declines to create something. */
.erp-meta {
  margin-inline-end: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
[dir="rtl"] .erp-meta { font-family: var(--arabic); }
.erp-meta.is-flash { color: var(--gold); }

.erp-star[hidden],
.erp-new[hidden] { display: none; }

.erp-star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.erp-star:hover { color: var(--gold); background: var(--gold-wash); }
.erp-star svg { width: 17px; height: 17px; }
.erp-star.is-on { color: var(--gold); }
.erp-star.is-on svg { fill: var(--gold-wash-strong); }

.erp-new {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  background: #c9a24b;
  color: #0d0b06;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.erp-new:hover { background: #dcb65e; }
[data-theme="light"] .erp-new:hover { background: #b8913f; }
.erp-new svg { width: 14px; height: 14px; }

/* Workspace */
.erp-work {
  min-height: 0;
  padding: clamp(16px, 2vw, 28px);
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.erp-work::-webkit-scrollbar,
.erp-nav::-webkit-scrollbar,
.erp-table-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.erp-work::-webkit-scrollbar-thumb,
.erp-nav::-webkit-scrollbar-thumb,
.erp-table-scroll::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; background-color: var(--line-2); }
.erp-work::-webkit-scrollbar-thumb:hover,
.erp-nav::-webkit-scrollbar-thumb:hover,
.erp-table-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--gold-line); }
/* The workspace takes focus only so the keyboard carries on from the screen
   just opened. It is never a tab stop, so it draws no ring around itself. */
.erp-work:focus { outline: none; }

.motion-ready .erp-work.is-fresh { animation: erp-in 0.4s var(--ease) both; }
@keyframes erp-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .erp-work.is-fresh { animation: none; }
  .erp-marker { transition: none; }
}

/* Launcher */
.erp-group + .erp-group { margin-top: 22px; }
.erp-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.erp-group-head h3 { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.erp-group-count { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

.erp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 8px; }

.erp-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--panel-2);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.erp-tile:hover { background: var(--gold-wash); }
.erp-tile-icon { display: flex; flex-shrink: 0; }
.erp-tile-icon svg { width: 19px; height: 19px; color: var(--ink-3); transition: color 0.3s var(--ease); }
.erp-tile:hover .erp-tile-icon svg { color: var(--gold); }
.erp-tile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.erp-tile-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.erp-tile-desc { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.erp-tile-star { position: absolute; top: 8px; inset-inline-end: 8px; display: flex; }
.erp-tile-star svg { width: 13px; height: 13px; color: var(--gold); fill: var(--gold-wash-strong); }

.erp-empty { display: grid; justify-items: center; gap: 12px; padding: 64px 20px; color: var(--ink-3); }
.erp-empty-icon svg { width: 22px; height: 22px; }
.erp-empty p { font-size: 14.5px; }

/* Number cards */
.erp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.erp-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); }
.erp-card-label { font-size: 12.5px; color: var(--ink-3); }
.erp-card-value { font-family: var(--mono); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Lists, boards, records */
.erp-panel { border-radius: 10px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.erp-panel-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.erp-panel-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.erp-panel-meta { margin-inline-start: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
[dir="rtl"] .erp-panel-meta { font-family: var(--arabic); }

.erp-table-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

.erp-list { width: 100%; border-collapse: collapse; }
.erp-list th {
  padding: 8px 14px;
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  text-align: start;
  white-space: nowrap;
}
.erp-list td {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
  vertical-align: middle;
}
.erp-list tbody tr:first-child td { border-top: 0; }
.erp-list tbody tr[data-record] { cursor: pointer; transition: background-color 0.25s var(--ease); }
.erp-list tbody tr[data-record]:hover { background: var(--gold-wash); }
.erp-list tbody tr.is-decided { background: var(--gold-wash); }
.erp-figure { text-align: end; white-space: nowrap; }
.erp-list th.erp-figure { text-align: end; }
.erp-figure span { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.erp-doc { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.erp-th-actions { width: 1%; }

/* The first cell is the row's own control, so the keyboard reaches every
   record without an invisible overlay button. */
.erp-row-open {
  display: flex;
  font: inherit;
  color: inherit;
  text-align: start;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.erp-row-open:hover,
.erp-row-open:hover .erp-doc,
.erp-row-open:hover .erp-emp-job { color: var(--gold); }
.erp-row-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.erp-emp { display: flex; flex-direction: column; gap: 2px; }
.erp-emp-job { font-size: 12px; color: var(--ink-3); }

.erp-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
}
.erp-pill-open { border-color: var(--line-2); color: var(--ink-2); }
.erp-pill-good { border-color: var(--gold-line); background: var(--gold-wash); color: var(--gold); }
.erp-pill-alarm { border-color: color-mix(in srgb, var(--error) 55%, transparent); background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error); }
.erp-pill-quiet { border-color: var(--line); color: var(--ink-3); }

.erp-progress { display: flex; align-items: center; gap: 9px; }
.erp-progress-bar { position: relative; width: 62px; height: 4px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.erp-progress-fill { position: absolute; inset: 0; border-radius: 999px; background: var(--gold); transform-origin: left; }
[dir="rtl"] .erp-progress-fill { transform-origin: right; }
.erp-progress-num { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3); }

.erp-cell-actions { width: 1%; white-space: nowrap; text-align: end; }
.erp-decide {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.erp-decide + .erp-decide { margin-inline-start: 6px; }
.erp-decide-approve:hover { border-color: transparent; background: var(--gold-wash-strong); color: var(--gold); }
.erp-decide-reject:hover { border-color: color-mix(in srgb, var(--error) 60%, transparent); color: var(--error); }
.erp-decided { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
[dir="rtl"] .erp-decided { font-family: var(--arabic); }

.erp-board { display: flex; gap: 8px; padding: 12px; overflow-x: auto; scrollbar-width: thin; }
.erp-board-col { display: flex; flex-direction: column; gap: 8px; flex: 1 0 186px; padding: 10px; border-radius: 10px; background: var(--panel-2); }
.erp-board-head { display: flex; align-items: center; gap: 8px; }
.erp-board-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.erp-board-count { margin-inline-start: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.erp-board-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.erp-board-card:hover { background: var(--gold-wash); }
.erp-board-party { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.erp-board-value { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.erp-board-id { font-size: 11.5px; color: var(--ink-3); }

/* Capability screen for an application the demo does not open */
.erp-cap-body { display: grid; gap: 14px; padding: 18px; }
.erp-cap-head { font-size: 12.5px; color: var(--ink-3); }
.erp-cap-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.erp-cap-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); font-size: 13.5px; color: var(--ink); }
.erp-cap-icon svg { width: 16px; height: 16px; color: var(--ink-3); }
.erp-cap-note { max-width: 62ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.erp-cap-cta { justify-self: start; }

/* Record */
.erp-record-body { display: grid; gap: 12px; padding: 18px; }
.erp-record-head { font-size: 12.5px; color: var(--ink-3); }
.erp-record .erp-panel-bar { gap: 12px; }
.erp-back {
  margin-inline-start: auto;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.erp-back:hover { background: var(--gold-wash); color: var(--gold); }

.erp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.erp-field { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px; border-radius: 8px; background: var(--panel-2); }
.erp-field dt { font-size: 12px; color: var(--ink-3); }
.erp-field dd { margin: 0; font-size: 13.5px; color: var(--ink); }
.erp-field dd .erp-progress { margin-top: 2px; }

.erp-activity { display: flex; flex-direction: column; }
.erp-activity li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 2px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.erp-activity li:first-child { border-top: 0; }
.erp-activity-when { margin-inline-start: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }


/* Sections drawer on narrow screens */
.erp-side-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}
.erp-side-toggle:hover { background: var(--gold-wash); color: var(--gold); }
.erp-side-toggle svg { width: 15px; height: 15px; }

@media (max-width: 860px) {
  .erp-body { grid-template-columns: minmax(0, 1fr); }
  /* Closed, the drawer is hidden as well as moved, so a screen reader or a
     keyboard never wanders into sections that are off the screen */
  .erp-side {
    position: absolute;
    z-index: 3;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(288px, 84vw);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  [dir="rtl"] .erp-side { transform: translateX(102%); }
  .erp.is-side-open .erp-side,
  [dir="rtl"] .erp.is-side-open .erp-side { transform: none; visibility: visible; box-shadow: var(--shadow); transition: transform 0.35s var(--ease); }
  /* The workspace dims behind the open drawer; a tap on it closes the drawer */
  .erp-body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .erp.is-side-open .erp-body::after { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease); }
  .erp-side-toggle { display: inline-flex; }
  /* With the sections off-canvas the open application is the one thing the
     path must show, so the home crumb goes instead of the leaf. */
  .erp-path.has-app > *:nth-child(-n+2) { display: none; }
  .erp-path-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .erp-side,
  .erp.is-side-open .erp-side,
  .erp-body::after,
  .erp.is-side-open .erp-body::after { transition: none; }
}

@media (max-width: 700px) {
  .erp-meta { display: none; }
  .erp-new span:not(.erp-glyph) { display: none; }
  .erp-new { padding: 0 9px; }
  .erp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .erp-tile { flex-direction: column; gap: 8px; }
  .erp-tile-desc { display: none; }
  .erp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Rows become blocks, each cell labelled by its column */
  .erp-list thead { display: none; }
  .erp-list tbody tr { display: block; padding: 10px 14px; border-top: 1px solid var(--line); }
  .erp-list tbody tr:first-child { border-top: 0; }
  .erp-list td,
  .erp-list tbody tr:first-child td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 3px 0; border: 0; }
  .erp-list td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 12px;
    color: var(--ink-3);
  }
  .erp-list td:empty { display: none; }
  .erp-cell-first { padding-bottom: 5px !important; }
  .erp-cell-actions,
  .erp-figure { text-align: start; }
  .erp-emp { flex-direction: row; align-items: baseline; gap: 8px; }
  .erp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .erp-work { padding: 12px; }
  .erp-fields { grid-template-columns: minmax(0, 1fr); }
  /* The drawer's toggle keeps its name for screen readers but shows only its
     glyph, so the path has room for the application and the page */
  .erp-side-toggle { width: 44px; padding: 0; justify-content: center; flex-shrink: 0; }
  .erp-side-toggle span:not(.erp-glyph) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Each new screen eases in: a small rise while the desk walks itself, a
   slide from the side the visitor swiped or tapped toward (--swipe-x/-y are
   set by erp-demo.js) */
.motion-ready .product-desk .erp-work.is-fresh { animation-name: erp-slide; }
@keyframes erp-slide {
  from { opacity: 0; transform: translate(var(--swipe-x, 0px), var(--swipe-y, 6px)); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready .product-desk .erp-work.is-fresh { animation: none; }
}


/* Daylight: the desk becomes white tiles on plaster, the way the product's own
   light theme reads. In the dark console the raised tone is already lighter
   than the ground, so only daylight needs this. */
[data-theme="light"] .erp-side { background: color-mix(in srgb, var(--bg-2) 72%, var(--panel)); }
[data-theme="light"] .erp-tile,
[data-theme="light"] .erp-card,
[data-theme="light"] .erp-board-col,
[data-theme="light"] .erp-field,
[data-theme="light"] .erp-cap-list li { background: var(--panel); border: 1px solid var(--line); }
[data-theme="light"] .erp-tile:hover { background: var(--gold-wash); }
[data-theme="light"] .erp-board-card { background: var(--bg); }
[data-theme="light"] .erp-board-card:hover { background: var(--gold-wash); }

/* Touch: a finger needs 44px */
@media (pointer: coarse) {
  /* The demo desk, operated by thumb */
  .demo-brand { min-height: 44px; }
  .demo-back, .demo-cta { height: 44px; }
  .demo-back { min-width: 44px; }
  .erp-search, .erp-head { min-height: 60px; }
  /* Under 16px iOS zooms the whole page when the field takes focus */
  .erp-search-input { height: 44px; font-size: 16px; }
  .erp-nav-row { min-height: 44px; }
  .erp-side-toggle { height: 44px; }
  /* Line-height centres the text and keeps the ellipsis working */
  .erp-path-link { min-height: 44px; padding-block: 0; line-height: 44px; }
  .erp-star { width: 44px; height: 44px; }
  .erp-new { height: 44px; min-width: 44px; justify-content: center; padding: 0 15px; }
  .erp-back { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .erp-decide { height: 38px; padding: 0 15px; font-size: 13px; }
}

/* ==========================================================================
   The demo's own page (/omnierp-demo)
   The desk takes the viewport: one slim bar of chrome, then the desk.
   ========================================================================== */

body.demo-page {
  --demo-bar: 60px;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.demo-bar {
  position: relative;
  z-index: 60;
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--demo-bar);
  padding: 0 clamp(14px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.demo-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.demo-brand img { height: 24px; width: auto; }
.demo-brand-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.demo-brand-name { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); transition: color 0.2s var(--ease-out); }
.demo-brand-sub { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.demo-brand:hover .demo-brand-name { color: var(--gold); }

.demo-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.demo-hint {
  display: none;
  margin-inline-end: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
[dir="rtl"] .demo-hint { font-family: var(--arabic); }
@media (min-width: 1240px) { .demo-hint { display: inline; } }

.demo-back, .demo-cta { height: 38px; padding: 0 16px; font-size: 14px; }
.demo-back svg { width: 16px; height: 16px; }
[dir="rtl"] .demo-back svg { transform: scaleX(-1); }

.demo-main { flex: 1; min-height: 0; }
.demo-main:focus-visible { outline: none; }

@media (max-width: 900px) {
  .demo-cta { display: none; }
}

@media (max-width: 560px) {
  body.demo-page { --demo-bar: 56px; }
  .demo-bar { padding-inline: 14px; }
  .demo-brand-sub { display: none; }
  .demo-back { padding: 0 12px; }
  .demo-back span { display: none; }
}

.erp-fallback { padding: clamp(24px, 4vw, 48px); }
.erp-fallback .form-title { display: flex; align-items: center; gap: 12px; }
@media (max-width: 720px) { .demo-back, .demo-cta { height: 44px; } }