/* ===========================================================================
   assets/demo.css — styles for the interactive demo at /demo.
   Loaded ONLY on that page (see cm8_render_page in inc/render.php).
   Dark Slate palette, deliberately the same as the real dashboard, so the
   demo looks like the product rather than like a marketing mock-up.
   =========================================================================== */

.dm {
  --bg:      #0f172a;
  --card:    #1e293b;
  --card2:   #263449;
  --border:  #334155;
  --text:    #e2e8f0;
  --muted:   #94a3b8;
  --accent:  #3b82f6;
  --accent2: #2563eb;
  --green:   #22c55e;
  --red:     #ef4444;
  --amber:   #f59e0b;
  --r:       12px;
  --mono:    'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;

  min-height: 100vh; background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.5;
  display: flex; flex-direction: column;
}
/* The demo owns the whole viewport: neutralise the marketing body styles
   that site.css applies (it is still linked for the shared reset). */
body.dm-body { margin: 0; padding: 0; background: #0f172a; }
body.dm-body .bg-pattern { display: none; }

/* Money and other Latin numerals must not be reordered inside Arabic text. */
.dm .num, .dm-kpi-v, .dm-table .n, .dm-sums dd, .dm-rc-money {
  font-family: var(--mono); unicode-bidi: isolate; direction: ltr;
}

/* ------------------------------------------------------------- top bar --- */
.dm-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px; background: #0b1220;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30;
}
.dm-logo { display: flex; flex: none; }
.dm-logo img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.dm-h1 { font-size: 15px; font-weight: 700; margin: 0; color: var(--muted); flex: none; }
.dm-tabs { display: flex; gap: 6px; background: var(--card); padding: 4px; border-radius: 999px; }
.dm-tab {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-weight: 700; padding: 7px 16px; border-radius: 999px;
  display: flex; align-items: center; gap: 7px;
}
.dm-tab.is-on { background: var(--accent); color: #fff; }
.dm-own-badge {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--green); color: #05230f; font-size: 12px; font-weight: 800;
}
.dm-badge {
  margin-inline-start: auto; padding: 5px 12px; border-radius: 999px;
  background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .4);
  color: #fbbf24; font-size: 13px; font-weight: 700;
}
.dm-acts { display: flex; gap: 8px; align-items: center; flex: none; }
.dm-btn-ghost, .dm-btn-brand {
  font: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.dm-btn-ghost { background: none; border: 1px solid var(--border); color: var(--muted); }
.dm-btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.dm-btn-brand { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.dm-btn-brand:hover { background: var(--accent2); }

.dm-noscript { padding: 18px; color: var(--muted); }
.dm-noscript a { color: var(--accent); }

.dm-pane { flex: 1; padding: 18px; max-width: 1400px; width: 100%; margin: 0 auto; }
.dm-pane[hidden] { display: none; }

/* ================================================================= till ====
   A reproduction of the Cashm8 Android till from tablet.png (the front-page
   hero image). Every colour below was sampled from that file with PIL:
     page  #1a2736   card  #2c3647   search #2f394a   total panel #233043
     blue  #4da2ec   qty badge #e6e7e8   bottom nav #212b3d
   =========================================================================== */
.app {
  --a-bg:     #1a2736;
  --a-card:   #2c3647;
  --a-search: #2f394a;
  --a-panel:  #233043;
  --a-blue:   #4da2ec;
  --a-red:    #e2534b;
  --a-nav:    #212b3d;
  --a-muted:  #93a1b4;

  display: grid; grid-template-columns: 1fr 29%; grid-template-rows: auto 1fr;
  background: var(--a-bg); border-radius: 14px; overflow: hidden;
  font-family: 'Poppins', 'Instrument Sans', system-ui, sans-serif;
  min-height: 620px; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.app-status {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  padding: 7px 16px 0; font-size: 11.5px; font-weight: 600; color: #dfe6ee;
  unicode-bidi: isolate; direction: ltr;
}
.app-status-i { display: flex; gap: 4px; }
.app-status-i svg { width: 12px; height: 12px; fill: #dfe6ee; }
.app-main { padding: 14px 22px 20px; min-width: 0; }
.app-side { background: var(--a-bg); padding: 14px 18px 20px; display: flex; flex-direction: column; }

/* --- top bar --- */
.app-bar { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.app-logo { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; flex: none; }
.app-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  background: var(--a-search); border-radius: 999px; padding: 0 18px; height: 42px;
}
.app-search svg { width: 19px; height: 19px; flex: none; fill: none; stroke: #cdd6e2; stroke-width: 2; stroke-linecap: round; }
.app-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font: inherit; font-size: 15px; color: #fff;
}
.app-search input::placeholder { color: #8e9bab; }
.app-kebab { background: none; border: 0; cursor: pointer; padding: 6px 4px; display: flex; flex-direction: column; gap: 3px; }
.app-kebab i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #cdd6e2; }

/* --- category tabs --- */
.app-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.app-tab {
  font: inherit; font-size: 15px; font-weight: 600; color: var(--a-blue);
  background: none; border: 0; border-radius: 999px; padding: 10px 22px; cursor: pointer;
}
.app-tab.is-on { background: #26364a; }

/* --- product grid --- */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: start; }
.app-card {
  position: relative; background: var(--a-card); border: 0; border-radius: 11px;
  padding: 15px 16px 15px 22px; min-height: 92px; cursor: pointer; text-align: start;
  display: flex; flex-direction: column; gap: 12px; font: inherit;
  transition: filter .12s, transform .06s;
}
.app-card:hover { filter: brightness(1.14); }
.app-card:active { transform: scale(.985); }
.app-bar-color {
  position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px;
  width: 6px; border-radius: 0 4px 4px 0;
}
.app-card-name { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.25; }
.app-price {
  align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.07); border-radius: 999px; padding: 6px 14px 6px 10px;
  font-size: 14.5px; font-weight: 700; color: #fff;
  unicode-bidi: isolate; direction: ltr;
}
.app-price-i { width: 15px; height: 15px; fill: none; stroke: var(--a-blue); stroke-width: 2; }

/* --- purchase panel --- */
.app-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.app-side-head h2 { font-size: 19px; font-weight: 700; color: #fff; margin: 0;
  unicode-bidi: isolate; direction: ltr; }
.app-basket { width: 22px; height: 22px; flex: none; fill: var(--a-blue); stroke: var(--a-blue); stroke-width: 1.6; }
.app-side-btns { display: flex; gap: 9px; margin-bottom: 16px; }
.app-new, .app-remove {
  flex: 1; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  border-radius: 999px; padding: 11px 8px; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.app-new { background: var(--a-blue); border: 1px solid var(--a-blue); color: #12222f; }
.app-new span { font-size: 17px; font-weight: 700; }
.app-remove { background: none; border: 1px solid var(--a-red); color: var(--a-red); }
.app-remove svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

.app-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-height: 210px; overflow-y: auto; }
.app-line {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--a-card); border-radius: 11px; padding: 9px 14px 9px 9px;
}
.app-line.is-sel { outline: 1.5px solid var(--a-blue); }
.app-qty {
  flex: none; width: 44px; height: 30px; border-radius: 999px; background: #e6e7e8;
  color: #1b2430; font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  unicode-bidi: isolate; direction: ltr;
}
.app-line-n { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: #eef2f7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-line-s { font-size: 14px; font-weight: 600; color: #eef2f7; unicode-bidi: isolate; direction: ltr; }

.app-chips { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.app-chip {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: none; border: 1px solid var(--a-blue); color: var(--a-blue);
  border-radius: 999px; padding: 9px 22px;
}
.app-chip.is-on { background: var(--a-blue); color: #12222f; }

.app-total { background: var(--a-panel); border-radius: 13px; padding: 16px 16px 18px; }
/* site.css carries no [hidden] rule, and display:flex would override it. */
.app-total-row[hidden], .app [hidden] { display: none !important; }
.app-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.app-total-row span { font-size: 15px; color: #dbe3ec; }
.app-total-row b { font-size: 17px; font-weight: 700; color: #fff; unicode-bidi: isolate; direction: ltr; }
.app-disc-row b { color: var(--a-blue); }
.app-comment, .app-cash {
  width: 100%; font: inherit; font-weight: 600; cursor: pointer; border-radius: 999px;
}
.app-comment { background: none; border: 1px solid #3f6c93; color: var(--a-blue); font-size: 15px; padding: 10px; margin-bottom: 12px; }
.app-cash { background: var(--a-blue); border: 1px solid var(--a-blue); color: #12222f; font-size: 16px; padding: 15px; letter-spacing: .02em; }
.app-cash:disabled { background: #35485c; border-color: #35485c; color: #7b8b9c; cursor: not-allowed; }

.app-nav {
  margin-top: 22px; background: var(--a-nav); border-radius: 13px; padding: 10px 4px;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.app-nav button {
  background: none; border: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--a-muted);
}
.app-nav button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-nav button.is-on { color: var(--a-blue); }

.dm-appnote { color: var(--muted); font-size: 14px; margin: 16px 0 0; text-align: center; }

@media (max-width: 1150px) { .app-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; min-height: 0; }
  .app-main { padding: 16px; }
  .app-side { border-top: 1px solid #2c3647; }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .app-lines { max-height: none; }
}
@media (max-width: 520px) {
  .app-logo { font-size: 20px; }
  .app-bar { gap: 10px; }
  .app-tab { padding: 9px 15px; font-size: 14px; }
}

/* ------------------------------------------------------------- receipt --- */
.dm-receipt { max-width: 420px; margin: 0 auto; }
.dm-rc {
  background: #f8fafc; color: #0f172a; border-radius: var(--r); padding: 22px 24px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.65;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.dm-rc-demo {
  background: var(--red); color: #fff; text-align: center; font-weight: 800;
  letter-spacing: .06em; padding: 7px; border-radius: 8px; margin-bottom: 16px;
  font-family: inherit; font-size: 13px;
}
.dm-rc h2 { font-size: 17px; margin: 0 0 2px; text-align: center; }
.dm-rc-sub { text-align: center; color: #475569; font-size: 12.5px; margin: 0 0 14px; }
.dm-rc-sep { border: 0; border-top: 1px dashed #94a3b8; margin: 12px 0; }
.dm-rc-row { display: flex; justify-content: space-between; gap: 12px; }
.dm-rc-row span:last-child { unicode-bidi: isolate; direction: ltr; }
.dm-rc-tot { font-weight: 800; font-size: 16px; }
.dm-rc table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dm-rc th { text-align: start; color: #475569; font-weight: 700; padding-bottom: 4px; }
.dm-rc td { padding: 2px 0; }
.dm-rc td.n, .dm-rc th.n { text-align: end; unicode-bidi: isolate; direction: ltr; }
.dm-rc-law { font-family: inherit; font-size: 11.5px; color: #64748b; margin: 14px 0 0; line-height: 1.5; }
.dm-rc-acts { display: flex; gap: 10px; margin-top: 18px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------- reports --- */
.dm-filters {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 14px;
}
.dm-f { display: flex; flex-direction: column; gap: 5px; position: relative; }
.dm-f-l { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dm-pills { display: flex; gap: 5px; }
.dm-pill {
  font: inherit; font-size: 13.5px; font-weight: 700; padding: 7px 13px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
}
.dm-pill.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dm-date {
  font: inherit; font-size: 13.5px; padding: 7px 10px; color-scheme: dark;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.dm-ms-btn {
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 12px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.dm-ms-menu {
  display: none; position: absolute; top: 100%; inset-inline-start: 0; margin-top: 5px; z-index: 20;
  background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; min-width: 190px; box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.dm-ms[data-open="1"] .dm-ms-menu { display: block; }
.dm-ms-menu label { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.dm-ms-menu label:hover { background: var(--bg); }
.dm-apply {
  font: inherit; font-weight: 700; font-size: 14px; padding: 9px 20px; cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; color: #fff;
}
.dm-apply:hover { background: var(--accent2); }

.dm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-bottom: 14px; }
.dm-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 15px 17px; }
.dm-kpi-l { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.dm-kpi-v { display: block; font-size: 26px; line-height: 1.2; font-weight: 700; }
.dm-kpi-v.dm-kpi-sm { font-size: 17px; }
.dm-kpi-s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; min-height: 17px; }
.dm-kpi-s.dm-neg { color: var(--red); }
.dm-kpi-s.up { color: var(--green); }
.dm-kpi-s.down { color: var(--red); }
@keyframes dmTick { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,.65); } 100% { box-shadow: 0 0 0 12px rgba(59,130,246,0); } }
.dm-kpi.tick { animation: dmTick .7s ease-out; border-color: var(--accent); }

.dm-warn {
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); color: #fbbf24;
  border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px;
}
.dm-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
.dm-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; }
.dm-card h3 { font-size: 15.5px; margin: 0 0 14px; }
.dm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dm-card-head h3 { margin: 0; }
/* Chart.js runs with maintainAspectRatio:false, so the wrapper MUST have a
   height or the canvas renders 0 px tall and the chart silently disappears. */
.dm-canvas { position: relative; height: 260px; }
.dm-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }

.dm-tablewrap { overflow-x: auto; }
.dm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-table th {
  text-align: start; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700; padding: 0 10px 10px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; white-space: nowrap;
}
.dm-table th:hover { color: var(--text); }
.dm-table th i { font-style: normal; padding-inline-start: 4px; opacity: .85; }
.dm-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid #232f45; white-space: nowrap; }
.dm-table .n { text-align: end; }
.dm-table tbody tr.mine td { background: rgba(34,197,94,.07); }
@keyframes dmFlash { from { background: rgba(59,130,246,.3); } to { background: transparent; } }
.dm-table tbody tr.fresh td { animation: dmFlash 2.4s ease-out; }
.dm-you {
  display: inline-block; margin-inline-start: 7px; padding: 1px 7px; border-radius: 999px;
  background: rgba(34,197,94,.18); color: #4ade80; font-size: 11px; font-weight: 800;
}

/* --------------------------------------------------------------- toast --- */
.dm-toast {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 60; max-width: 340px;
  background: var(--card2); border: 1px solid var(--accent); border-radius: 12px;
  padding: 13px 16px; box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 14.5px;
}
.dm-toast b { display: block; margin-bottom: 3px; }
.dm-toast button {
  margin-top: 9px; font: inherit; font-size: 13.5px; font-weight: 700; padding: 6px 13px;
  cursor: pointer; background: var(--accent); border: 0; border-radius: 7px; color: #fff;
}

/* -------------------------------------------------------------- footer --- */
.dm-foot {
  border-top: 1px solid var(--border); padding: 14px 18px; display: flex; gap: 14px;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
  color: var(--muted); font-size: 13px;
}
.dm-foot p { margin: 0; }
.dm-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.dm-foot a { color: var(--muted); text-decoration: none; }
.dm-foot a:hover { color: var(--text); text-decoration: underline; }
.dm-foot a[aria-current="true"] { color: var(--text); font-weight: 700; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .dm-charts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dm-pos { grid-template-columns: 1fr; }
  .dm-cart { position: static; }
  .dm-lines { max-height: none; }
}
@media (max-width: 700px) {
  .dm-top { gap: 9px; padding: 9px 12px; }
  .dm-h1 { display: none; }
  .dm-badge { order: 9; flex-basis: 100%; margin-inline-start: 0; text-align: center; }
  .dm-pane { padding: 12px; }
  .dm-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
  .dm-kpi-v { font-size: 22px; }
  .dm-filters { gap: 10px; }
}