/* Mindful Circles – Dashboard (theme-driven look)
   We DO NOT hardcode colors. Colors come from --mcc-primary, set by JS. */

/* Container */
.mcc-dash-wrap{max-width:1100px;margin:0 auto;padding:16px;}
.mcc-dash-title{font-size:28px;line-height:1.2;margin:8px 0 4px;}
.mcc-dash-sub{margin:0 0 18px;color:inherit}

/* Card */
.mcc-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:18px 18px 8px;
  margin:18px 0 26px;
}
.mcc-card-head h3{margin:0 0 12px;font-size:20px;}

/* Chart area */
.mcc-chart-wrap{position:relative;width:100%;min-height:260px;}

/* Table wrapper */
.mcc-table-wrap{overflow-x:auto;margin-top:14px;}

/* Let the theme style the table, but ensure header picks our primary var */
.mcc-table{width:100%;border-collapse:collapse;font-size:14px;}
.mcc-table thead th{
  text-align:left;
  background: var(--mcc-primary, currentColor) !important;
  color: #fff !important;
  padding:10px 12px;
  font-weight:600;
}
.mcc-table tbody td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.06);}
.mcc-table tbody tr:nth-child(even){background:rgba(0,0,0,.02);}

/* Empty state */
.mcc-empty{margin:10px 0 0;font-size:14px;opacity:.8}

/* Phones */
@media (max-width:640px){
  .mcc-dash-title{font-size:24px}
  .mcc-card{padding:14px}
}

/* Card shell (already in your file; kept for context)
-------------------------------------------------- */
.mcc-card { background:#fff; border:1px solid #eee; border-radius:16px; padding:18px; margin:18px 0; }
.mcc-card-title { margin:0 0 12px; font-weight:600; }

/* Minimal table like the screenshot
-------------------------------------------------- */
.mcc-table { border-collapse: separate; border-spacing:0; width:100%; }
.mcc-table th, .mcc-table td { padding:14px 12px; border-bottom:1px solid #F1F5F9; }
.mcc-table thead th { background:#FAFAFD; font-weight:600; }
.mcc-table tbody tr:hover { background:#FAFAFF; }
.mcc-table .muted { color:#6B7280; }

/* Right-aligned actions */
.mcc-actions { text-align:right; white-space:nowrap; }

/* Icon buttons (edit = amber, delete = rose) */
.mcc-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:0; cursor:pointer;
  background:#FDE68A; /* amber-200 */
  transition:transform .08s ease, filter .15s ease;
  margin-left:8px;
}
.mcc-icon-btn:hover { transform:translateY(-1px); filter:brightness(0.98); }
.mcc-icon-btn.mcc-delete { background:#FCA5A5; } /* rose-300 */

/* Simple SVG-less icons via CSS (✎ / ✖) */
.mcc-icon { font-size:16px; line-height:1; }
.mcc-icon-edit::before { content:"✎"; }
.mcc-icon-delete::before { content:"✖"; }

/* Modal
-------------------------------------------------- */
.mcc-modal { position:fixed; inset:0; display:none; }
.mcc-modal[aria-hidden="false"] { display:block; }
.mcc-modal__overlay { position:absolute; inset:0; background:rgba(15,23,42,.45); }
.mcc-modal__dialog {
  position:relative; margin:6vh auto; max-width:720px; background:#fff; border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.18); overflow:hidden;
}
.mcc-modal__header, .mcc-modal__footer { padding:14px 16px; background:#FAFAFD; }
.mcc-modal__body { padding:16px; }
.mcc-modal__close { border:0; background:transparent; font-size:24px; cursor:pointer; line-height:1; }

.mcc-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:12px;
}
.mcc-grid label span { display:block; font-size:12px; color:#6B7280; margin-bottom:6px; }
.mcc-modal textarea, .mcc-modal input[type="text"], .mcc-modal input[type="number"], .mcc-modal input[type="date"] {
  width:100%; border:1px solid #E5E7EB; border-radius:10px; padding:10px 12px; font:inherit;
}

.mcc-btn { border:0; border-radius:999px; padding:10px 16px; cursor:pointer; }
.mcc-btn-primary { background:var(--mcc-primary, #4F46E5); color:#fff; }
.mcc-btn-secondary { background:#E5E7EB; color:#111827; }
.mcc-btn:active { transform:translateY(1px); }

/* Prevent page scroll while modal open */
body.mcc-modal-open { overflow:hidden; }

/* Combo chart height tweak */
.mcc-combo-wrap { height:380px; }
@media (max-width: 720px) {
  .mcc-grid { grid-template-columns:1fr 1fr; }
}

/* Notes under numbers */
.mcc-note-line { font-size: 12px; margin-top: 4px; line-height: 1.35; }
.muted { color:#6B7280; }

/* Add button */
.mcc-add-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:0; cursor:pointer;
  background:#D1FAE5; /* teal-ish */
  font-size:16px;
}

/* Modal – rows: label | (score, note) */
.mcc-row { display:grid; grid-template-columns: 120px 1fr; gap:12px; align-items:start; margin-bottom:12px; }
.mcc-label { font-weight:600; color:#111827; padding-top:10px; }
.mcc-row-fields { display:grid; grid-template-columns: 120px 1fr; gap:10px; }
.mcc-score { width:100%; border:1px solid #E5E7EB; border-radius:10px; padding:10px 12px; }
.mcc-note  { width:100%; border:1px solid #E5E7EB; border-radius:10px; padding:10px 12px; }
.mcc-date-display { padding:10px 12px; background:#F9FAFB; border:1px solid #E5E7EB; border-radius:10px; }

/* Narrow screens */
@media (max-width: 720px) {
  .mcc-row { grid-template-columns: 1fr; }
  .mcc-row-fields { grid-template-columns: 1fr; }
}