/* ═══════════════════════════════════════════════════════════════
   Manzoma Shared Component Styles
   Phase 2 split: reusable cards, charts, filters, tables, badges, empty states, and action buttons.
   Load order: tokens.css → base.css → layout.css → components.css → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   KPI CARDS — redesigned for consistency
═══════════════════════════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--sp4)}
.kpi-card{
  background:var(--s0);border-radius:var(--r);
  padding:var(--sp5) var(--sp4) var(--sp4);
  box-shadow:var(--sh1);border:1px solid var(--b0);
  position:relative;overflow:hidden;
  transition:box-shadow .2s var(--ease),transform .18s var(--ease),border-color .2s;
  cursor:default;
  display:flex;flex-direction:column;
}
.kpi-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--b1)}
/* accent line top */
.kpi-card::before{
  content:'';position:absolute;top:0;right:0;left:0;
  height:3px;border-radius:var(--r) var(--r) 0 0;
}
.kpi-card.c-brand::before{background:var(--g4)}
.kpi-card.c-amber::before{background:var(--amber)}
.kpi-card.c-red::before{background:var(--red)}
.kpi-card.c-blue::before{background:var(--blue)}
.kpi-card.c-green::before{background:var(--green)}
.kpi-card.c-purple::before{background:var(--purple)}
/* icon */
.kpi-ic{
  width:36px;height:36px;border-radius:var(--r2);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fz-md);margin-bottom:var(--sp3);
}
.c-brand .kpi-ic{background:var(--g5);color:var(--g3)}
.c-amber .kpi-ic{background:var(--amber-bg);color:var(--amber)}
.c-red   .kpi-ic{background:var(--red-bg);color:var(--red)}
.c-blue  .kpi-ic{background:var(--blue-bg);color:var(--blue)}
.c-green .kpi-ic{background:var(--green-bg);color:var(--green)}
.c-purple .kpi-ic{background:var(--purple-bg);color:var(--purple)}
/* value */
.kv{font-size:var(--fz-2xl);font-weight:800;line-height:1;margin-bottom:var(--sp1);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.c-brand .kv{color:var(--g2)} .c-amber .kv{color:var(--amber)} .c-red .kv{color:var(--red)}
.c-blue  .kv{color:var(--blue)} .c-green .kv{color:var(--green)} .c-purple .kv{color:var(--purple)}
.kl{font-size:var(--fz-base);color:var(--t1);font-weight:700;line-height:1.3}
.ks{font-size:var(--fz-xs);color:var(--t4);margin-top:var(--sp1);line-height:1.4}

/* ═══════════════════════════════════════════════════════════════
   CHART CARDS
═══════════════════════════════════════════════════════════════ */
.charts-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:var(--sp4);margin-bottom:var(--sp1)}
.chart-card{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1)}
.card-title{
  font-size:var(--fz-xs);font-weight:700;margin-bottom:var(--sp4);
  color:var(--t3);display:flex;align-items:center;gap:var(--sp2);
  text-transform:uppercase;letter-spacing:.6px;
}
.card-title-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.ring-wrap canvas{max-width:130px;max-height:130px}
.ring-legend{display:flex;flex-direction:column;gap:7px;width:100%}
.rl-item{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.rl-dot{width:7px;height:7px;border-radius:4px;margin-left:7px;flex-shrink:0}
.rl-label{color:var(--t2);display:flex;align-items:center}
.rl-val{font-weight:800;color:var(--t1)}
/* team bars */
.tm{margin-bottom:12px}.tm:last-child{margin-bottom:0}
.tm-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.tm-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;color:var(--t1)}
.av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.av-brand{background:var(--g3)}.av-teal{background:var(--blue)}.av-amber{background:var(--amber)}.av-purple{background:var(--purple)}
.tm-cnt{font-size:12px;color:var(--t3);font-weight:500}
.pb{height:5px;background:var(--s3);border-radius:4px;overflow:hidden}
/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════════════════════ */
.sec-hd{display:flex;align-items:center;justify-content:space-between}
.sec-hd h2{font-size:var(--fz-md);font-weight:800;color:var(--t1);letter-spacing:-.2px}
.sec-hd p{font-size:var(--fz-sm);color:var(--t3)}

/* ═══════════════════════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════════════════════ */
.filter-bar{
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);padding:var(--sp4) var(--sp5);
  display:flex;flex-direction:column;gap:var(--sp3);
  box-shadow:var(--sh1);
}
.filter-row{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap}
.filter-label{font-size:var(--fz-xs);font-weight:700;color:var(--t4);min-width:70px;letter-spacing:.5px;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.chip{
  padding:7px 14px;border-radius:999px;
  background:var(--s1);border:1.5px solid var(--b1);
  color:var(--t3);font-size:var(--fz-sm);cursor:pointer;
  transition:background .15s var(--ease),color .15s,border-color .15s,transform .12s;
  white-space:nowrap;font-weight:600;
  user-select:none;display:inline-flex;align-items:center;gap:5px;min-height:34px;
}
.chip:hover{border-color:var(--g4);color:var(--g3);background:var(--g6);transform:translateY(-1px)}
.chip.on{
  background:var(--g3);border-color:var(--g3);color:#fff;
  font-weight:700;box-shadow:0 2px 8px rgba(27,100,67,.22);
}
.chip.on::before{content:'✓';font-size:11px;font-weight:800;margin-inline-end:1px}
.chip.danger.on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 2px 8px rgba(195,43,39,.25)}
.sw{position:relative;flex:1;min-width:200px}
.sw input{
  width:100%;padding:10px 14px;
  border:1px solid var(--b1);border-radius:var(--r3);
  font-size:var(--fz-base);background:var(--s1);color:var(--t1);
  outline:none;transition:border-color .16s,background .16s,box-shadow .16s;
  font-family:var(--ff);min-height:40px;
}
.sw input:focus{border-color:var(--g4);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.ri{font-size:var(--fz-sm);color:var(--t3);display:flex;align-items:center;gap:var(--sp2)}
.rc{font-weight:700;color:var(--g3);background:var(--g5);padding:3px 11px;border-radius:999px;font-size:var(--fz-xs)}

/* ═══════════════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════════════ */
.tw{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
.dt{width:100%;border-collapse:collapse;table-layout:auto}
.dt thead th{
  position:sticky;top:0;z-index:2;
  padding:12px 14px;background:var(--s1);
  backdrop-filter:blur(8px);
  font-size:var(--fz-xs);font-weight:700;color:var(--t4);
  text-align:right;border-bottom:1px solid var(--b1);
  letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
}
.dt td{
  padding:13px 14px;border-bottom:1px solid var(--b0);
  font-size:var(--fz-sm);vertical-align:middle;color:var(--t2);
  transition:background .12s;
}
.dt tr:last-child td{border-bottom:none}
.dt tr:hover td{background:var(--g6);transition:background .14s}

/* ═══════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:var(--fz-xs);font-weight:700}
.b-open{background:var(--g5);color:var(--g3)}
.b-prog{background:var(--amber-bg);color:var(--amber)}
.b-done{background:var(--green-bg);color:var(--green)}
.b-urgent{background:var(--red-bg);color:var(--red)}
.b-high{background:#FFF3EA;color:#B85000}
.b-normal{background:var(--g5);color:var(--g3)}
.b-low{background:var(--s2);color:var(--t3)}
.badge-ext{
  display:inline-flex;align-items:center;
  background:var(--amber-bg);color:var(--amber);
  border:1px solid rgba(168,90,4,.20);
  border-radius:6px;font-size:10px;font-weight:700;
  padding:1px 6px;margin-right:4px;vertical-align:middle;
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════════════════════════════ */
.empty{
  text-align:center;padding:48px 20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--s0);border:1px solid var(--b0);
  border-radius:var(--r);box-shadow:var(--sh1);
}
.empty .ei{font-size:40px;opacity:.3;line-height:1}
.empty p{font-size:13px;color:var(--t4);line-height:1.7;max-width:260px}

/* ═══════════════════════════════════════════════════════════════
   ACTION BUTTONS
═══════════════════════════════════════════════════════════════ */
.act-btns{display:flex;gap:var(--sp1);justify-content:center;align-items:center}
.act-btn{
  width:34px;height:34px;border-radius:var(--r3);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fz-sm);font-weight:700;cursor:pointer;
  transition:background .14s var(--ease),color .14s,border-color .14s,transform .1s;
  flex-shrink:0;
  border:1px solid var(--b1);
}
.act-btn:active{transform:scale(.92)}
/* individual button styles */
.act-btn-start{background:var(--blue-bg);color:var(--blue)}
.act-btn-start:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.act-btn-complete{background:var(--g5);color:var(--g3)}
.act-btn-complete:hover{background:var(--g3);color:#fff;border-color:var(--g3)}
.act-btn-due{background:var(--purple-bg);color:var(--purple);font-size:11px}
.act-btn-due:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.act-btn-ass{background:var(--blue-bg);color:var(--blue);font-size:11px}
.act-btn-ass:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.act-btn-move{background:var(--g5);color:var(--g3);font-size:11px}
.act-btn-move:hover{background:var(--g3);color:#fff;border-color:var(--g3)}
.act-done-mark{color:var(--t4);font-size:13px}

/* ═══════════════════════════════════════════════════════════════
   KPI CARD PROGRESS BAR
═══════════════════════════════════════════════════════════════ */
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.kpi-bar-wrap{height:4px;background:var(--s3);border-radius:4px;overflow:hidden;margin-top:8px}
.kpi-bar-fill{height:100%;border-radius:4px;background:currentColor;transition:width .6s var(--ease)}
.c-brand .kpi-bar-fill{background:var(--g4)}
.c-amber .kpi-bar-fill{background:var(--amber)}
.c-red   .kpi-bar-fill{background:var(--red)}
.c-blue  .kpi-bar-fill{background:var(--blue)}
.c-green .kpi-bar-fill{background:var(--green)}
.c-purple .kpi-bar-fill{background:var(--purple)}