/* Voucher detail — dashboard design, scoped under .crdts-dash.
   Page-private classes; the shared shell stays in dashboard.scoped.css. */

.crdts-dash h1,.crdts-dash h2,.crdts-dash h3,.crdts-dash h4,.crdts-dash p,.crdts-dash span,.crdts-dash a,.crdts-dash b,.crdts-dash strong,.crdts-dash small,.crdts-dash em,.crdts-dash i,.crdts-dash li,.crdts-dash ul,.crdts-dash ol,.crdts-dash button,.crdts-dash label,.crdts-dash input,.crdts-dash textarea,.crdts-dash select,.crdts-dash summary,.crdts-dash option:not(.material-symbols-outlined):not([class*="material-symbols"]):not(.material-symbols-rounded):not([class*="material-symbols-rounded"]){font-family:inherit}
.crdts-dash .material-symbols-outlined,.crdts-dash [class*="material-symbols"]{
  font-family:'Material Symbols Outlined'!important;font-weight:400;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

/* ============ page frame ============ */

.crdts-dash .vd-page{display:grid;gap:20px}
.crdts-dash .vd-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.crdts-dash .vd-top-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ============ hero ============ */

.crdts-dash .vd-hero{display:flex;align-items:flex-start;gap:16px;border:1px solid #f2e7bd;
  background:linear-gradient(120deg,#fff9d8,#fff5ab);border-radius:11px;padding:20px 22px}
.crdts-dash .vd-hero-ico{width:52px;height:52px;border-radius:12px;background:#fff;
  border:1px solid #f0e5c2;color:var(--orange);display:grid;place-items:center;flex-shrink:0}
.crdts-dash .vd-hero-ico svg{width:24px;height:24px}
.crdts-dash .vd-hero-body{min-width:0;flex:1}
.crdts-dash .vd-hero-titles{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.crdts-dash .vd-hero-titles h2{font-size:20px;margin:0;line-height:1.6;letter-spacing:-.3px}
.crdts-dash .vd-hero-desc{font-size:12px;color:#7d7a63;line-height:1.9;margin:8px 0 0}
.crdts-dash .vd-hero-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px}
.crdts-dash .vd-value{font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap}
.crdts-dash .vd-meta-item{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#8c8c81;
  white-space:nowrap}
.crdts-dash .vd-meta-item svg{width:13px;height:13px}
.crdts-dash .vd-quota{margin-top:15px}
.crdts-dash .vd-quota-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:11.5px;color:#8c8c81;margin-bottom:7px}
.crdts-dash .vd-quota-top b{font-size:12px;color:#38382d}

/* ============ kpi strip (the shared .metric tile, tightened for six) ============ */

.crdts-dash .vd-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.crdts-dash .vd-kpis .metric{padding:16px 15px 14px}
.crdts-dash .vd-kpis .metric-top{font-size:11px}
.crdts-dash .vd-kpis .metric-top i{width:27px;height:27px}
.crdts-dash .vd-kpis .metric-top i svg{width:15px;height:15px}
.crdts-dash .vd-kpis .metric>strong{font-size:24px;line-height:1.35;margin:11px 0 7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .vd-kpis .metric-foot{font-size:9.5px}

/* ============ chart ============ */

.crdts-dash .vd-chart{height:250px;padding:4px 24px 22px;direction:ltr}
.crdts-dash .vd-chart .recharts-cartesian-axis-tick-value{font-family:inherit}

/* ============ table cells ============ */

.crdts-dash .panel th.vd-end,.crdts-dash .panel td.vd-end{text-align:end}
.crdts-dash .panel td.vd-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.crdts-dash .panel td.vd-muted{font-size:11.5px;color:#a1a18f}
.crdts-dash .panel td.vd-strong{font-weight:600;color:#38382d}
.crdts-dash .panel td.vd-discount{color:#4e8a52;font-weight:600}
.crdts-dash .vd-order-link{color:var(--orange);font-weight:600;font-size:12.5px;cursor:pointer}
.crdts-dash .vd-order-link:hover{text-decoration:underline}

/* ============ recipients ============ */

.crdts-dash .vd-recs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
  padding:0 24px 24px}
.crdts-dash .vd-rec{display:flex;align-items:center;gap:11px;border:1px solid #efefe7;border-radius:9px;
  background:#fcfcfa;padding:9px 11px;min-width:0}
.crdts-dash .vd-rec-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.crdts-dash .vd-rec-avatar-fallback{background:#fff6d8;color:#b48314;display:grid;place-items:center}
.crdts-dash .vd-rec-avatar-fallback svg{width:17px;height:17px}
.crdts-dash .vd-rec-body{min-width:0;flex:1}
.crdts-dash .vd-rec-body b{display:block;font-size:12.5px;font-weight:600;color:#38382d;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .vd-rec-body small{display:block;font-size:10.5px;color:#a1a194;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crdts-dash .vd-rec-date{font-size:10.5px;color:#b4b4a7;white-space:nowrap;flex-shrink:0}

/* ============ confirm dialog ============
   The Radix dialog portals into <body>, outside .crdts-dash, so the scoped
   `.delete-confirm` rule cannot reach the action button. This page-private
   class carries the same danger look for the portalled button. */
.vd-confirm-danger{background:#b74d2f!important;color:#fff!important;border:0!important;
  padding:11px 16px!important;border-radius:6px!important;font-size:12px!important;
  font-weight:500!important;box-shadow:none!important}
.vd-confirm-danger:hover{background:#a03f24!important}

/* ============ breakpoints ============ */

@media(max-width:1200px){
  .crdts-dash .vd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
  .crdts-dash .vd-recs{grid-template-columns:1fr}
}
@media(max-width:680px){
  .crdts-dash .vd-page{gap:16px}
  .crdts-dash .vd-hero{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .crdts-dash .vd-hero-titles h2{font-size:17px}
  .crdts-dash .vd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crdts-dash .vd-chart{height:200px;padding-inline:14px}
  .crdts-dash .vd-recs{padding-inline:16px}
  .crdts-dash .vd-top-acts{width:100%}
}