/* ===========================================================================
   v2/cards.css — generic surface primitives. NO variables (flat model).
   Two generic primitives, both auto-theming from .page.dark / .page.light:

     (1) METRIC CARD — a stat tile (big value + label, optional icon), arranged
         in a responsive .card-grid. The app maps an accent colour per card
         (e.g. .metric-card.blue .metric-value { color: … }) in its own CSS.

     (2) PROPERTY GROUP — a labelled property: a tiny uppercase muted label
         over its value. Stack several for a definition-list / properties rail.

   Promoted from the Sage CX tickets app (dashboard tiles + ticket-detail rail);
   reusable by any app. Showcased in v2/index.html.
   =========================================================================== */

/* ---- responsive grid that arranges metric cards -------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

/* ---- metric card --------------------------------------------------------- */
.metric-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 22px 20px; border-radius: 10px;
}
.metric-card .metric-icon  { font-size: 22px; opacity: .6; margin-bottom: 4px; }
.metric-card .metric-value { font-size: 34px; font-weight: 700; line-height: 1; }
.metric-card .metric-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

.page.dark  .metric-card { background: #2e2e2e; border: 1px solid #000000;
                           box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.page.dark  .metric-card .metric-value { color: #e0e0e0; }
.page.dark  .metric-card .metric-label { color: #a0a0a0; }

.page.light .metric-card { background: #ffffff; border: 1px solid #cfcfcf;
                           box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.page.light .metric-card .metric-value { color: #2a2a2a; }
.page.light .metric-card .metric-label { color: #666666; }

/* ---- property group (labelled value) ------------------------------------- */
.property-group { margin-bottom: 14px; }
.property-group > label {
    display: block; font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px;
}
.property-group > div { font-size: 14px; }

.page.dark  .property-group > label { color: #a0a0a0; }
.page.dark  .property-group > div   { color: #e0e0e0; }
.page.light .property-group > label { color: #666666; }
.page.light .property-group > div   { color: #2a2a2a; }