/* ===== EasyMenu – Overview page styles ===== */
:root{
  --em-bg:#f6f8fb;
  --em-card:#ffffff;
  --em-border:#e7ebf0;
  --em-text:#1f2937;
  --em-muted:#6b7280;
  --em-primary:#2563eb;
  --em-primary-600:#1e40af;
  --em-green:#10b981;
  --em-green-600:#059669;
  --em-blue:#3b82f6;
  --em-ghost:#eef2f7;
  --em-shadow:0 6px 16px rgba(18, 38, 63, .08);
}

.wp-admin .wrap{ color:var(--em-text); }
.wp-admin .wrap h1{ margin-bottom:14px; }

/* Grid */
.em-grid{ display:grid; gap:16px; }
.em-grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.em-grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.em-grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:1200px){ .em-grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:960px){ .em-grid-3,.em-grid-2{ grid-template-columns: 1fr; } }

/* Card */
.em-card{
  background:var(--em-card);
  border:1px solid var(--em-border);
  border-radius:12px;
  box-shadow:var(--em-shadow);
  padding:16px;
}
.em-card.big{ padding:0; }
.em-card-title{
  font-weight:600;
  font-size:15px;
  padding:14px 16px;
  border-bottom:1px solid var(--em-border);
}

/* KPI */
.em-kpi{ position:relative; overflow:hidden; }
.em-kpi-value{ font-size:32px; font-weight:700; line-height:1; margin-bottom:6px; }
.em-kpi-label{ color:var(--em-muted); font-size:13px; }
.em-kpi-sub{ margin-top:6px; font-size:12px; color:var(--em-muted); }
.em-kpi-actions{ margin-top:12px; display:flex; gap:8px; }

/* Buttons */
.em-btn, .em-btn-sm{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; font-weight:600;
  transition:.15s ease-in-out;
}
.em-btn{ height:36px; padding:0 12px; font-size:13px; }
.em-btn-sm{ height:28px; padding:0 10px; font-size:12px; }

.em-btn-green, .em-btn.em-btn-green{ background:var(--em-green); color:#fff; }
.em-btn-green:hover{ background:var(--em-green-600); color:#fff; }
.em-btn-blue, .em-btn.em-btn-blue{ background:var(--em-blue); color:#fff; }
.em-btn-blue:hover{ background:#2563eb; color:#fff; }
.em-btn-ghost, .em-btn-sm.em-ghost{
  background:var(--em-ghost); color:var(--em-text); border-color:var(--em-border);
}
.em-btn-ghost:hover, .em-btn-sm.em-ghost:hover{ background:#e9eef6; }

/* Chips & badges */
.em-chip{
  display:inline-block; padding:6px 10px; font-size:12px; border-radius:999px;
  background:var(--em-ghost); border:1px solid var(--em-border); margin:4px 6px 0 0;
}
.em-chiprow{ display:flex; flex-wrap:wrap; gap:6px; }

.em-badge{
  display:inline-flex; align-items:center; height:22px; padding:0 8px;
  font-size:11px; border-radius:999px; background:#eef2f7; color:#415063;
  border:1px solid var(--em-border);
}
.em-badge.ok{ background:#e7f8ef; color:#0a7a53; border-color:#c6f1dd; }
.em-badge.warn{ background:#fff6e6; color:#a15c00; border-color:#ffe2b5; }
.em-badge.muted{ background:#f3f4f6; color:#6b7280; }

/* Table */
.em-table{ width:100%; border-collapse:separate; border-spacing:0; }
.em-table thead th{
  background:#fafbfc; color:#334155; font-weight:600; font-size:13px;
  border-bottom:1px solid var(--em-border); padding:12px 14px; text-align:left;
}
.em-table tbody td{
  padding:12px 14px; border-bottom:1px solid var(--em-border); font-size:13px;
}
.em-table tbody tr:hover{ background:#fbfdff; }

/* Vertical button list */
.em-actions-col{ display:flex; flex-direction:column; gap:8px; }

/* Small utilities */
.em-muted{ color:var(--em-muted); }