/* ITSysPro demo page — group A (webshop, quotes & invoices, stock, portal).
   All classes prefixed da-; shared bits come from demo.css / site.css. */

.pill.bad { background: #F6DEDA; color: #A83A2A; }
.da-empty { color: var(--ink-3); font-size: .88rem; padding: .5rem 0; }
.da-select { font: inherit; font-size: .88rem; color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--line-2); border-radius: 8px; padding: .42rem .6rem; max-width: 100%; }
.da-select:disabled { color: var(--ink-2); background: var(--sunk); }
.da-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.da-chip { border: 1.5px solid var(--line); background: var(--paper-2); border-radius: 999px; padding: .3rem .75rem; font-family: var(--display); font-weight: 600; font-size: .8rem; color: var(--ink-2); transition: border-color .2s, background .2s, color .2s; }
.da-chip:hover { border-color: var(--green); color: var(--green); }
.da-chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.da-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.da-actions .btn { padding: .65rem 1rem; font-size: .9rem; }
.da-actions .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.da-full { justify-content: center; width: 100%; margin-top: .6rem; }
.da-full:disabled { opacity: .7; cursor: progress; transform: none; }
.da-field { display: grid; gap: .3rem; font-family: var(--display); font-weight: 600; font-size: .82rem; color: var(--ink-2); }
.da-field input { font: inherit; font-family: var(--body); font-weight: 400; font-size: .92rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-2); border-radius: 8px; padding: .5rem .7rem; width: 100%; }
.da-field.inline { grid-template-columns: 1fr auto; align-items: center; margin-top: .8rem; }
.da-field.inline input { width: 5.5rem; text-align: end; }
.da-form { display: grid; gap: .6rem; margin-top: .6rem; }
.da-totals { display: grid; gap: .25rem; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line-2); font-size: .9rem; }
.da-totals .r { display: flex; justify-content: space-between; gap: .8rem; }
.da-totals .r.vat, .da-totals .r.hint { color: var(--ink-3); font-size: .8rem; }
.da-totals .r.hint { justify-content: flex-start; }
.da-totals .r.total { font-family: var(--display); font-weight: 700; font-size: 1.02rem; padding-top: .35rem; border-top: 1px solid var(--line-2); margin-top: .2rem; }
.da-log { list-style: none; margin: 0; padding: 0; font-size: .84rem; display: grid; gap: .3rem; color: var(--ink-2); }
.da-log li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); animation: da-in .4s var(--ease); }
.da-log .t { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); padding-top: .1rem; white-space: nowrap; }
.da-scroll { overflow-x: auto; }
@keyframes da-in { from { opacity: 0; transform: translateY(-4px); } }

/* --- webshop --- */
.da-shop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr); gap: 1rem; align-items: start; }
.da-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; width: 100%; }
.da-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.da-prod { display: grid; gap: .35rem; border: 1.5px solid var(--line); border-radius: 10px; padding: .6rem; background: var(--paper-2); transition: border-color .2s, transform .25s var(--ease); min-width: 0; }
.da-prod:hover { transform: translateY(-2px); }
.da-prod.in { border-color: var(--green); }
.da-prod.out { opacity: .6; }
.da-prod b { font-family: var(--display); font-weight: 600; font-size: .86rem; line-height: 1.3; }
.da-img { aspect-ratio: 4 / 3; border-radius: 7px; background: linear-gradient(135deg, var(--green-soft), var(--sunk)); position: relative; overflow: hidden; }
.da-img::after { content: ""; position: absolute; inset: 28% 32%; border-radius: 30% 30% 45% 45%; background: var(--green); opacity: .55; }
.da-img[data-k="olie"]::after { inset: 18% 40%; border-radius: 40% 40% 12% 12%; }
.da-img[data-k="plank"]::after { inset: 30% 18%; border-radius: 8px; background: var(--amber); }
.da-img[data-k="thee"]::after, .da-img[data-k="boek"]::after { inset: 22% 26%; border-radius: 6px; }
.da-img[data-k="kaars"]::after { inset: 20% 36%; border-radius: 10px 10px 6px 6px; background: var(--amber); }
.da-img[data-k="tas"]::after { inset: 30% 24% 16%; border-radius: 6px 6px 14px 14px; }
.da-img[data-k="zeep"]::after { inset: 34% 22%; border-radius: 50%; }
.da-prow { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.da-price { font-family: var(--display); font-weight: 700; font-size: .95rem; }
.da-prow small { font-family: var(--mono); font-size: .66rem; color: var(--ink-3); }
.da-prod .mini-btn { width: 100%; padding: .4rem .5rem; }
.da-prod .mini-btn:disabled { color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }
.da-cart { background: var(--sunk); border-radius: 12px; padding: .9rem 1rem; align-self: start; min-width: 0; }
.da-cart .f-title { display: block; margin-bottom: .5rem; }
.da-lines { display: grid; gap: .45rem; }
.da-line { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; font-size: .88rem; }
.da-line .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-line .a { font-variant-numeric: tabular-nums; min-width: 4rem; text-align: end; }
.da-steps { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; counter-reset: st; }
.da-steps li { counter-increment: st; font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-top: .5rem; border-top: 3px solid var(--line-2); }
.da-steps li::before { content: counter(st) " "; }
.da-steps li.cur { color: var(--green); border-top-color: var(--green); }
.da-steps li.done { color: var(--ink-2); border-top-color: var(--green); }
.da-methods { display: grid; gap: .4rem; }
.da-method { display: flex; align-items: center; gap: .6rem; border: 1.5px solid var(--line-2); background: var(--paper-2); border-radius: 8px; padding: .5rem .7rem; font-family: var(--display); font-weight: 600; font-size: .88rem; text-align: start; }
.da-method i { width: 1.5rem; height: 1rem; border-radius: 3px; background: #CC0066; flex: none; }
.da-method[data-m="bancontact"] i { background: #1E4A9A; }
.da-method[data-m="card"] i { background: var(--ink-2); }
.da-method[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.da-cart .confirm { padding-top: .6rem; }
@media (max-width: 44rem) { .da-shop { grid-template-columns: 1fr; } .da-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- quotes & invoices --- */
.da-inv { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.da-inv-left, .da-inv-right { min-width: 0; }
.da-inv .da-select { width: 100%; }
.da-inv table td.da-empty { text-align: start; }
.da-inv .da-chips { margin-top: .6rem; }
.da-inv tbody tr[role="button"] { cursor: pointer; }
.da-inv tbody tr[role="button"]:hover td { background: var(--sunk); }
.da-inv tbody tr.you td { background: var(--green-soft); }
.da-clock { display: flex; justify-content: space-between; align-items: center; gap: .8rem; background: var(--sunk); border-radius: 10px; padding: .6rem .9rem; }
.da-clock small { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.da-clock b { font-family: var(--display); font-size: 1.05rem; }
.da-timeline { list-style: none; margin: .2rem 0 0; padding: 0 0 0 1rem; border-inline-start: 2px solid var(--line); display: grid; gap: .45rem; font-size: .86rem; color: var(--ink-2); }
.da-timeline li { position: relative; }
.da-timeline li::before { content: ""; position: absolute; inset-inline-start: calc(-1rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--line-2); }
.da-timeline li.fired { color: var(--ink); }
.da-timeline li.fired::before { background: var(--amber); border-color: var(--amber); }
.da-timeline li.off { color: var(--ink-3); text-decoration: line-through; }
.da-timeline b { font-family: var(--mono); font-weight: 500; font-size: .76rem; color: var(--ink-3); }
.da-inv .pill { white-space: normal; }
.da-inv table { table-layout: auto; }
.da-inv td, .da-inv th { padding-inline: .2rem; }
.da-due { display: block; font-family: var(--mono); font-size: .68rem; color: var(--ink-3); margin-top: .2rem; }
@media (max-width: 44rem) { .da-inv { grid-template-columns: 1fr; } }

/* --- stock --- */
.da-alert { font-family: var(--mono); font-size: .74rem; padding: .3rem .7rem; border-radius: 999px; background: var(--sunk); color: var(--ink-2); }
.da-alert.ok { background: var(--green-soft); color: var(--green); }
.da-alert.warn { background: var(--amber-soft); color: var(--amber); }
.da-actions.wrap { margin-top: 0; margin-bottom: .6rem; }
.da-scan-out { min-height: 1.4rem; font-size: .8rem; color: var(--ink-2); margin-bottom: .4rem; }
.da-scan-out.scanning { color: var(--green); animation: da-blink 1s steps(2) infinite; }
@keyframes da-blink { 50% { opacity: .35; } }
tr.da-low td { background: color-mix(in srgb, var(--amber-soft) 60%, transparent); }
tr.da-out td { background: color-mix(in srgb, #F6DEDA 70%, transparent); }
tr.da-out td b { color: #A83A2A; }
tr.da-low td b { color: var(--amber); }
tr.flash td { animation: da-flash .7s var(--ease); }
@keyframes da-flash { 0% { background: var(--green-soft); } }

/* --- portal --- */
.da-portal { display: grid; gap: .9rem; }
.da-portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.da-card { background: var(--sunk); border-radius: 10px; padding: .75rem .9rem; min-width: 0; }
.da-card .f-label { margin-top: 0; }
.da-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .4rem 0; border-top: 1px solid var(--line); font-size: .86rem; }
.da-row .n { flex: 1 1 8rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-row .a { font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 600; }
.da-row .mini-btn { margin-inline-start: auto; }
.da-newt { display: grid; gap: .5rem; }
.da-newt .da-actions { margin-top: 0; align-items: center; }
.da-ta { font: inherit; font-family: var(--body); font-size: .9rem; color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--line-2); border-radius: 8px; padding: .5rem .7rem; width: 100%; resize: vertical; }
.da-sent { font-family: var(--mono); font-size: .76rem; color: var(--green); }
.da-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.da-col { background: var(--sunk); border-radius: 10px; padding: .6rem; display: grid; gap: .5rem; align-content: start; min-height: 9rem; }
.da-col .ch { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 .1rem .2rem; }
.da-col.done .ch { color: var(--green); }
.da-ticket { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .65rem; display: grid; gap: .3rem; font-size: .84rem; animation: da-in .4s var(--ease); }
.da-ticket.you { border-color: var(--green); }
.da-ticket .th { display: flex; justify-content: space-between; gap: .5rem; font-size: .76rem; }
.da-ticket .sla { font-family: var(--mono); color: var(--green); white-space: nowrap; }
.da-ticket .sla.over { color: #A83A2A; }
.da-ticket.over { border-color: #E4A99E; }
.da-ticket .ts { font-family: var(--display); font-weight: 600; line-height: 1.3; }
.da-ticket .tc { color: var(--ink-3); font-size: .76rem; }
.da-ticket .mini-btn { justify-self: start; margin-top: .2rem; }
@media (max-width: 44rem) { .da-portal-grid { grid-template-columns: 1fr; } .da-board { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .da-log li, .da-ticket, tr.flash td { animation: none; }
  .da-scan-out.scanning { animation: none; }
  .da-prod, .da-chip { transition: none; }
}