/**handles:klds-metrics**/
/*
 * KL Dashboard Suite – Customer Metrics
 * v2.0.9 (UI refine)
 *
 * - Lighter font weights
 * - Quick View / secondary buttons use orange outline (no blue)
 * - Keep single table + mobile table->cards rendering
 */

.kl-dash-wrap .kl-cm{
  --kl-orange: var(--kl-brand, #ff7a00);
  --kl-ink:#111827;
  --kl-muted:#6b7280;
  --kl-line:rgba(17,24,39,.10);
  --kl-card:#ffffff;
  width:100%;
  max-width:100%;
  color:var(--kl-ink);
  font-family:inherit;
}

.kl-dash-wrap .kl-cm *{ box-sizing:border-box; }

/* Safety: if an old markup still prints a second list */
.kl-dash-wrap .kl-cm .kl-cm-cards{ display:none !important; }

.kl-dash-wrap .kl-cm__summary{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin:0 0 14px 0;
}

.kl-dash-wrap .kl-cm__actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:0 0 18px 0;
}

.kl-dash-wrap .kl-cm-card{
  background:var(--kl-card);
  border:1px solid var(--kl-line);
  border-radius:14px;
  padding:14px;
}

.kl-dash-wrap .kl-cm-card--primary{
  border-color:rgba(255,122,0,.35);
  box-shadow:0 10px 24px rgba(17,24,39,.05);
}

.kl-dash-wrap .kl-cm-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--kl-muted);
  font-weight:700;
}

.kl-dash-wrap .kl-cm-value{
  margin-top:6px;
  font-size:22px;
  line-height:1.15;
  font-weight:800;
  font-variant-numeric: tabular-nums;
}

.kl-dash-wrap .kl-cm-sub{
  margin-top:6px;
  font-size:13px;
  line-height:1.35;
  color:var(--kl-muted);
}

/* Action card layout */
.kl-dash-wrap .kl-cm-card--action{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  min-height:82px;
}

.kl-dash-wrap .kl-cm-card--action .kl-cm-value{ font-size:20px; }

/* Buttons */
.kl-dash-wrap .kl-cm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  color:var(--kl-ink);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}

.kl-dash-wrap .kl-cm-btn--primary{
  background:var(--kl-orange);
  border-color:var(--kl-orange);
  color:#fff;
}

/* orange outline */
.kl-dash-wrap .kl-cm-btn--ghost{
  background:transparent;
  border-color:rgba(255,122,0,.45);
  color:var(--kl-orange);
}

.kl-dash-wrap .kl-cm-btn:focus{ outline:none; }

.kl-dash-wrap .kl-cm-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(255,122,0,.22);
}

.kl-dash-wrap .kl-cm-btn--ghost:hover{
  background:rgba(255,122,0,.08);
  border-color:rgba(255,122,0,.65);
}

.kl-dash-wrap .kl-cm-btn--primary:hover{
  box-shadow:0 10px 18px rgba(255,122,0,.18);
}

/* Section header */
.kl-dash-wrap .kl-cm__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px 0;
}

.kl-dash-wrap .kl-cm__header h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:var(--kl-ink);
}

/* Table */
.kl-dash-wrap .kl-cm-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--kl-line);
  border-radius:14px;
  overflow:hidden;
}

.kl-dash-wrap .kl-cm-table thead th{
  background:rgba(17,24,39,.03);
  color:var(--kl-muted);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  padding:12px 14px;
}

.kl-dash-wrap .kl-cm-table td{
  padding:14px;
  border-top:1px solid rgba(17,24,39,.07);
  font-size:13px;
  vertical-align:middle;
}

.kl-dash-wrap .kl-cm-table tr:first-child td{ border-top:none; }

.kl-dash-wrap .kl-cm-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
  align-items:center;
}

/* Make action buttons look consistent with Suite buttons */
.kl-dash-wrap .kl-cm-actions .button,
.kl-dash-wrap .kl-cm-actions button.button{
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  padding:8px 12px;
  height:auto;
  line-height:1;
  box-shadow:none !important;
  text-transform:none !important;
}

/* Force Quick View to orange outline (theme sometimes sets blue) */
.kl-dash-wrap .kl-cm-actions .button.view,
.kl-dash-wrap .kl-cm-actions button.button.view{
  background:transparent !important;
  border:1px solid rgba(255,122,0,.55) !important;
  color:var(--kl-orange) !important;
}

.kl-dash-wrap .kl-cm-actions .button.view:hover,
.kl-dash-wrap .kl-cm-actions button.button.view:hover{
  background:rgba(255,122,0,.08) !important;
  border-color:rgba(255,122,0,.75) !important;
}

/* Pay as primary */
.kl-dash-wrap .kl-cm-actions .button.pay{
  background:var(--kl-orange) !important;
  border:1px solid var(--kl-orange) !important;
  color:#fff !important;
}

.kl-dash-wrap .kl-cm-actions .button.pay:hover{
  box-shadow:0 10px 18px rgba(255,122,0,.18) !important;
}

/* Responsive */
@media (max-width: 980px){
  .kl-dash-wrap .kl-cm__summary{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kl-dash-wrap .kl-cm__actions{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .kl-dash-wrap .kl-cm__summary{ grid-template-columns:1fr; }
  .kl-dash-wrap .kl-cm__actions{ grid-template-columns:1fr; }

  /* Turn table into stacked cards */
  .kl-dash-wrap .kl-cm-table thead{ display:none; }

  .kl-dash-wrap .kl-cm-table,
  .kl-dash-wrap .kl-cm-table tbody,
  .kl-dash-wrap .kl-cm-table tr,
  .kl-dash-wrap .kl-cm-table td{
    display:block;
    width:100%;
  }

  .kl-dash-wrap .kl-cm-table{
    border:none;
    background:transparent;
  }

  .kl-dash-wrap .kl-cm-table tr{
    background:#fff;
    border:1px solid rgba(17,24,39,.10);
    border-radius:14px;
    margin-bottom:12px;
    overflow:hidden;
  }

  .kl-dash-wrap .kl-cm-table td{
    border-top:none;
    border-bottom:1px solid rgba(17,24,39,.07);
    padding:12px 14px;
    padding-left:128px;
    position:relative;
  }

  .kl-dash-wrap .kl-cm-table td:last-child{ border-bottom:none; }

  .kl-dash-wrap .kl-cm-table td::before{
    content: attr(data-label);
    position:absolute;
    left:14px;
    top:12px;
    width:100px;
    color:var(--kl-muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .kl-dash-wrap .kl-cm-actions{ justify-content:flex-start; }
}

/* =========================================================
   Sidebar sticky refinement (profile card scroll bug fix)
   =========================================================
   Some themes use a taller fixed header; the default sticky offset (90px)
   can cause the profile card to slide under the header while scrolling.
   We override the sticky offset only within the dashboard wrapper.
*/
.kl-dash-wrap{
  --kl-sticky-top: 112px;
}
@media (max-width: 991px){
  .kl-dash-wrap{ --kl-sticky-top: 72px; }
}
body.admin-bar .kl-dash-wrap{
  --kl-sticky-top: calc(112px + 32px);
}
@media (max-width: 991px){
  body.admin-bar .kl-dash-wrap{ --kl-sticky-top: calc(72px + 32px); }
}

.kl-dash-wrap .kita-sidebar .kl-side{
  align-self: start;
  z-index: 2;
}