/* ==========================================================================
   PixelCore — dashboard card styles (chosen in Admin > Appearance > Dashboard Design)

   np-cardstyle.js stamps every stat card (.tn-sms-card, .tn-stat, .stat-card) with
     data-dz          clean | rail | tint | solid | outline | dark
     data-dz-shape    rounded | circle          (icon chip)
     data-dz-density  comfortable | compact
     data-dz-trend    on | off                   (the "+27% vs yesterday" badge)
   Nothing here is applied through <body>, so the previews on the design page can show
   any style side by side with the one the panel is using.
   ========================================================================== */

/* ── the colour of each card = the colour of its icon chip ──────────────── */
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz] { --dz: #6A4FC4; --dz-bg: rgba(123, 95, 192, .12); }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-sms-ic.amber, .tn-stat-ic.pink, .stat-icon.yellow) { --dz: #C27A06; --dz-bg: rgba(245, 158, 11, .14); }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-sms-ic.teal, .stat-icon.cyan) { --dz: #16809C; --dz-bg: rgba(31, 162, 192, .13); }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-sms-ic.rose, .stat-icon.red) { --dz: #C8406A; --dz-bg: rgba(232, 85, 124, .12); }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-stat-ic.orange) { --dz: #0E8A5F; --dz-bg: rgba(22, 168, 116, .13); }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-stat-ic.blue, .stat-icon.blue) { --dz: #3B6EA5; --dz-bg: rgba(59, 110, 165, .13); }
body.tnui.tn-dark :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz] { --dz: #B7AAF0; --dz-bg: rgba(156, 143, 224, .16); }
body.tnui.tn-dark :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-sms-ic.amber, .tn-stat-ic.pink, .stat-icon.yellow) { --dz: #F2BE5C; --dz-bg: rgba(245, 158, 11, .16); }
body.tnui.tn-dark :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-sms-ic.teal, .stat-icon.cyan) { --dz: #7DD6E4; --dz-bg: rgba(94, 211, 226, .14); }
body.tnui.tn-dark :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-sms-ic.rose, .stat-icon.red) { --dz: #F59AB3; --dz-bg: rgba(255, 143, 171, .14); }
body.tnui.tn-dark :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-stat-ic.orange) { --dz: #6FDDAE; --dz-bg: rgba(94, 224, 168, .14); }
body.tnui.tn-dark :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz]:has(.tn-stat-ic.blue, .stat-icon.blue) { --dz: #8FB4E6; --dz-bg: rgba(143, 180, 230, .16); }

/* ── rail: a coloured edge ──────────────────────────────────────────────── */
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="rail"] { border-left: 4px solid var(--dz) !important; border-radius: 10px !important; }

/* ── tint: washed in its own colour ─────────────────────────────────────── */
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="tint"] {
  background: var(--dz-bg) !important; border-color: color-mix(in srgb, var(--dz) 28%, transparent) !important; box-shadow: none !important;
}
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="tint"] :is(.tn-sms-ic, .tn-stat-ic, .stat-icon) { background: var(--tn-card, #fff) !important; color: var(--dz) !important; }

/* ── solid: filled flat colour, white text ──────────────────────────────── */
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="solid"] {
  background: color-mix(in srgb, var(--dz) 82%, #120c2a) !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(30, 20, 80, .16) !important;
}
body.tnui.tn-dark :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="solid"] { background: color-mix(in srgb, var(--dz) 38%, #14101f) !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="solid"] :is(.tn-sms-v, .tn-stat-r b, .stat-value) { color: #fff !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="solid"] :is(.tn-sms-l, .tn-stat-t, .tn-stat-r span, .stat-label) { color: rgba(255, 255, 255, .84) !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="solid"] :is(.tn-sms-ic, .tn-stat-ic, .stat-icon) { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="solid"] .tn-trend { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }

/* ── outline: no fill, a coloured frame and number ──────────────────────── */
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="outline"] { background: transparent !important; border: 1.5px solid var(--dz) !important; box-shadow: none !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="outline"] :is(.tn-sms-v, .tn-stat-r b, .stat-value) { color: var(--dz) !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="outline"] :is(.tn-sms-ic, .tn-stat-ic, .stat-icon) { background: transparent !important; border: 1.5px solid var(--dz); color: var(--dz) !important; }

/* ── dark: deep indigo on any theme ─────────────────────────────────────── */
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="dark"] { background: #1E1A3D !important; border-color: rgba(255, 255, 255, .08) !important; box-shadow: 0 6px 16px rgba(20, 12, 60, .22) !important; }
body.tnui.tn-dark :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="dark"] { background: #262048 !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="dark"] :is(.tn-sms-v, .tn-stat-r b, .stat-value) { color: #fff !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="dark"] :is(.tn-sms-l, .tn-stat-t, .tn-stat-r span, .stat-label) { color: rgba(255, 255, 255, .7) !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="dark"] :is(.tn-sms-ic, .tn-stat-ic, .stat-icon) {
  background: color-mix(in srgb, var(--dz) 26%, transparent) !important; color: color-mix(in srgb, var(--dz) 45%, #fff) !important;
}
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz="dark"] .tn-trend { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }

/* ── options that work with any style ───────────────────────────────────── */
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz-shape="circle"] :is(.tn-sms-ic, .tn-stat-ic, .stat-icon) { border-radius: 50% !important; }
body.tnui :is(.tn-sms-card, .tn-stat, .stat-card)[data-dz-trend="off"] .tn-trend { display: none !important; }
body.tnui .tn-sms-card[data-dz-density="compact"] { padding: 10px 12px !important; gap: 10px !important; }
body.tnui .tn-sms-card[data-dz-density="compact"] .tn-sms-ic { width: 38px !important; height: 38px !important; border-radius: 10px; }
body.tnui .tn-sms-card[data-dz-density="compact"][data-dz-shape="circle"] .tn-sms-ic { border-radius: 50% !important; }
body.tnui .tn-sms-card[data-dz-density="compact"] .tn-sms-v { font-size: 19px !important; }
body.tnui .tn-stat[data-dz-density="compact"] { min-height: 0 !important; padding: 10px 14px !important; gap: 12px !important; }
body.tnui .tn-stat[data-dz-density="compact"] .tn-stat-ic { width: 40px !important; height: 40px !important; }
body.tnui .stat-card[data-dz-density="compact"] { padding: 10px 14px !important; }

/* ── the Dashboard Design page ──────────────────────────────────────────── */
body.tnui .ui-dz { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ui-s5); align-items: start; }
body.tnui .ui-dz-h { margin: 0 0 var(--ui-s3); font-size: var(--ui-fs-md); font-weight: 700; color: var(--ui-ink); display: flex; align-items: center; gap: var(--ui-s2); }
body.tnui .ui-dz-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--ui-s3); }
body.tnui .ui-dz-tile {
  position: relative; display: flex; flex-direction: column; gap: var(--ui-s2); padding: var(--ui-s3); text-align: left; cursor: pointer;
  border: 2px solid var(--ui-line); border-radius: var(--ui-r-md); background: var(--ui-card); color: var(--ui-ink); font: inherit;
  transition: border-color var(--ui-t), box-shadow var(--ui-t);
}
body.tnui .ui-dz-tile:hover { border-color: var(--ui-ctrl); box-shadow: var(--ui-sh-2); }
body.tnui .ui-dz-tile.is-on { border-color: var(--tn-primary); box-shadow: 0 0 0 3px var(--ui-tint); }
body.tnui .ui-dz-tile.is-on::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 8px; right: 8px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--tn-primary); color: var(--tn-on-primary); font-size: 11px;
}
body.tnui .ui-dz-mini { display: grid; gap: 6px; pointer-events: none; padding: 8px; border-radius: var(--ui-r-sm); background: var(--tn-page, #F6F4FB); }
body.tnui .ui-dz-mini .tn-sms-card { padding: 8px 10px !important; gap: 10px !important; transform: none !important; }
body.tnui .ui-dz-mini .tn-sms-ic { width: 32px !important; height: 32px !important; border-radius: 9px; font-size: 14px; }
body.tnui .ui-dz-mini .tn-sms-ic i { font-size: 14px; }
body.tnui .ui-dz-mini .tn-sms-v { font-size: 16px !important; }
body.tnui .ui-dz-mini .tn-sms-l { font-size: 11px !important; margin: 0 !important; }
body.tnui .ui-dz-mini .tn-trend { display: none !important; }
body.tnui .ui-dz-name { display: flex; align-items: center; gap: var(--ui-s2); font-weight: 700; font-size: var(--ui-fs-md); }
body.tnui .ui-dz-tag { padding: 1px 8px; border-radius: var(--ui-r-pill); background: var(--ui-tint); color: var(--ui-tint-ink); font-size: var(--ui-fs-xs); font-weight: 700; }
body.tnui .ui-dz-desc { margin: 0; font-size: var(--ui-fs-sm); color: var(--ui-muted); line-height: 1.4; }
body.tnui .ui-dz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ui-s4); margin-top: var(--ui-s5); }
body.tnui .ui-seg { display: inline-flex; padding: 3px; border-radius: var(--ui-r-sm); background: var(--tn-stripe); gap: 2px; width: 100%; }
body.tnui .ui-seg button {
  flex: 1; height: 32px; padding: 0 var(--ui-s3); border: 0; border-radius: 6px; background: transparent; color: var(--ui-ink-2); font-size: var(--ui-fs-sm); font-weight: 600; cursor: pointer;
}
body.tnui .ui-seg button.is-on { background: var(--ui-card); color: var(--tn-primary); box-shadow: var(--ui-sh-1); }
body.tnui .ui-dz-lab { display: block; margin: 0 0 var(--ui-s2); font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-ink-2); }
body.tnui .ui-dz-side { position: sticky; top: var(--ui-s4); display: grid; gap: var(--ui-s3); }
body.tnui .ui-dz-live { display: grid; gap: var(--ui-s3); padding: var(--ui-s3); border-radius: var(--ui-r-md); background: var(--tn-page, #F6F4FB); border: 1px solid var(--ui-line); }
body.tnui .ui-dz-live .tn-clocks { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--ui-s3) !important; margin: 0 !important; }
body.tnui .ui-dz-live .tn-stats { grid-template-columns: minmax(0, 1fr) !important; gap: var(--ui-s3) !important; margin: 0 !important; }
body.tnui .ui-dz-live .tn-sms-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px !important; }
body.tnui .ui-dz-actions { display: flex; gap: var(--ui-s2); flex-wrap: wrap; }
body.tnui .ui-dz-actions .btn { flex: 1 1 auto; }
body.tnui .ui-dz-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-muted); }
body.tnui .ui-dz-state.is-dirty { color: var(--ui-amber); }
@media (max-width: 1100px) { body.tnui .ui-dz { grid-template-columns: minmax(0, 1fr); } body.tnui .ui-dz-side { position: static; } }