/* Tuva eier-app: the Loyalty and Reports screens (CRM part P5). Phone first; two columns from 900 px. No inline styles (CSP). */
.crm5{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
@media (min-width:900px){.crm5{padding-bottom:24px}}
.crm5 .l5-explain{margin:10px 0 14px;padding:12px 14px;border-radius:var(--radius);background:var(--surface-3);border:1px solid var(--line);font-size:14.5px}
.crm5 .stats{margin-bottom:6px}
@media (max-width:599.98px){.crm5 .stats{grid-template-columns:repeat(2,1fr)}}
.crm5 .l5-two{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
@media (min-width:900px){.crm5 .l5-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.crm5 .l5-two > .card + .card,.crm5 .card + .card{margin-top:0}
.crm5 .card{padding:16px}
.crm5 .card h2.sec{margin:0 0 4px;font-size:18px}
.crm5 .field{margin-top:14px}
.crm5 .lb{display:block;font-weight:600;margin-bottom:6px}
.crm5 .custchips{padding-right:0;-webkit-mask-image:none;mask-image:none}
.crm5 .custchips button[disabled]{opacity:.6}
.crm5 .l5-pts{display:grid;gap:8px}
.crm5 .l5-prow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.crm5 .l5-prow label{min-width:0;overflow-wrap:anywhere}
.crm5 .l5-prow .input{width:84px;display:inline-block}
.crm5 .swrow{margin-top:14px}
.crm5 .l5-tbl td{overflow-wrap:anywhere}
.crm5 .l5-name{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.crm5 .l5-act{width:1%;white-space:nowrap;text-align:right}
@media (max-width:599.98px){          /* phone: each row is a small block, so the «Gi belønning» button stays inside the card */
  .crm5 .l5-tbl,.crm5 .l5-tbl tbody,.crm5 .l5-tbl tr,.crm5 .l5-tbl td{display:block;width:auto}
  .crm5 .l5-tbl tr{padding:6px 0;border-bottom:1px solid var(--line)}
  .crm5 .l5-tbl td{border-bottom:0;padding:4px 10px}
  .crm5 .l5-act{text-align:left;white-space:normal}
  .crm5 .l5-act .btn{width:100%}
}
.crm5 .l5-code{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:8px;background:var(--surface-3);border:1px solid var(--line);overflow-wrap:anywhere}
.crm5 .custblock{display:block}
.crm5 .hbar{display:block;width:100%;height:10px;margin-top:6px}
.crm5 .hbar .trk{fill:var(--surface-3)}
.crm5 .hbar .b{fill:var(--accent)}
.crm5 .l5-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;justify-content:space-between}
.crm5 .l5-pick{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.crm5 .l5-pick .input{width:auto;min-width:170px}
.crm5 .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.crm5 .tile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.crm5 .tile b{display:block;font-size:30px;line-height:1.05;font-weight:800}
.crm5 .tile span{display:block;color:var(--muted);font-size:13px;font-weight:600;margin-top:6px;overflow-wrap:anywhere}
.crm5 .tile em{display:block;color:var(--muted);font-size:12.5px;font-style:normal;margin-top:4px}
.crm5 .chart{display:block;width:100%;height:auto;max-height:200px}
.crm5 .chart .b{fill:var(--forest)}
.crm5 .chart .b.cur{fill:var(--accent)}
.crm5 .chart text{fill:var(--muted);font-size:12px}
.crm5 .chart text.v{fill:var(--text);font-weight:700}
.crm5 .hb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;margin-top:10px}
.crm5 .hb span{overflow-wrap:anywhere;font-size:14.5px}
.crm5 .hb .hbar{grid-column:1 / -1;grid-row:2;margin-top:0}
.crm5 .hb b{white-space:nowrap}
.crm5 .num{text-align:right;font-variant-numeric:tabular-nums}
.crm5 .res{padding:12px 14px;border-radius:var(--radius);background:var(--surface-3);border:1px solid var(--line)}
/* reading width, and tap targets on a phone */
.view .crm5 .hint,.view .crm5 .l5-explain,.view .crm5 .lead{max-width:540px}
.crm5 .l5-pick .input{min-height:44px}
@media (max-width:599.98px){.crm5 .lb,.crm5 .l5-pick label,.payscreen .field label{display:flex;align-items:center;min-height:44px;margin-bottom:0}}
.crm5 .l5-showing{font-weight:700;margin:8px 0 0}
.crm5 .l5-pick input[type=date]{min-width:150px}