/* =============================================
   ADMIN DASHBOARD — admin-dashboard.css
   Superadmin overview panel
   ============================================= */

/* Breadcrumb — shared with security.css but scoped here too */
.superadmin-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  background: rgba(29, 78, 216, 0.06);
  border: 1px solid rgba(29, 78, 216, 0.15);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1rem;
  letter-spacing: 0.2px;
}

.superadmin-breadcrumb i {
  font-size: 0.9rem;
  color: #1d4ed8;
}

.superadmin-breadcrumb span:last-child {
  color: var(--text-color, #1e293b);
  font-weight: 700;
}

.superadmin-breadcrumb-link {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}
.superadmin-breadcrumb-link:hover { text-decoration: underline; }
body.dark .superadmin-breadcrumb-link { color: #93c5fd; }

body.dark .superadmin-breadcrumb {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.2);
}
body.dark .superadmin-breadcrumb i { color: #93c5fd; }
body.dark .superadmin-breadcrumb span:last-child { color: var(--text-color); }

/* ── Metrics grid ──────────────────────────── */
.adm-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ── Metric card ───────────────────────────── */
.adm-metric-card {
  background: var(--sidebar-color, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.adm-metric-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.adm-metric-card--alert {
  border-left: 3px solid rgba(220, 38, 38, 0.25);
}

.adm-metric-card--active-alert {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.03);
}

body.dark .adm-metric-card {
  background: var(--sidebar-color);
  border-color: var(--border-color);
}

body.dark .adm-metric-card--active-alert {
  background: rgba(220, 38, 38, 0.05);
}

/* ── Card header ───────────────────────────── */
.adm-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adm-metric-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.adm-metric-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 1.1rem;
}

.adm-icon-blue   { background: rgba(29,78,216,0.1);   color: #1d4ed8; }
.adm-icon-purple { background: rgba(124,58,237,0.1);  color: #7c3aed; }
.adm-icon-red    { background: rgba(220,38,38,0.1);   color: #dc2626; }
.adm-icon-green  { background: rgba(16,185,129,0.1);  color: #059669; }
.adm-icon-orange { background: rgba(234,88,12,0.1);   color: #ea580c; }
.adm-icon-gray   { background: rgba(100,116,139,0.1); color: #475569; }

body.dark .adm-icon-blue   { background: rgba(96,165,250,0.12);  color: #93c5fd; }
body.dark .adm-icon-purple { background: rgba(167,139,250,0.12); color: #a78bfa; }
body.dark .adm-icon-red    { background: rgba(220,38,38,0.15);   color: #fca5a5; }
body.dark .adm-icon-green  { background: rgba(52,211,153,0.12);  color: #6ee7b7; }
body.dark .adm-icon-orange { background: rgba(251,146,60,0.12);  color: #fb923c; }
body.dark .adm-icon-gray   { background: rgba(148,163,184,0.1);  color: #94a3b8; }

/* ── Main metric number ────────────────────── */
.adm-metric-main {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.adm-metric-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-color, #1e293b);
}

/* Smaller variant for string values like "14 MB" */
.adm-metric-value--sm {
  font-size: 1.5rem;
}

.adm-metric-label {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

/* ── Sub-info row ──────────────────────────── */
.adm-metric-sub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.adm-sub-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
}

.adm-chip-green {
  background: rgba(16,185,129,0.1);
  color: #059669;
}
.adm-chip-gray {
  background: rgba(100,116,139,0.1);
  color: #64748b;
}

body.dark .adm-chip-green { background: rgba(52,211,153,0.12); color: #6ee7b7; }
body.dark .adm-chip-gray  { background: rgba(148,163,184,0.1); color: #94a3b8; }

.adm-sub-note {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
}

.adm-metric-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
}
.adm-metric-link:hover { text-decoration: underline; }
body.dark .adm-metric-link { color: #93c5fd; }

/* ── Section title ─────────────────────────── */
.adm-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.85rem;
}

/* ── Module nav cards ──────────────────────── */
.adm-modules {
  margin-bottom: 2rem;
}

.adm-modules-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 540px;
}

.adm-module-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--sidebar-color, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.adm-module-active {
  cursor: pointer;
}
.adm-module-active:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-color: rgba(29,78,216,0.3);
}

.adm-module-soon {
  cursor: default;
  opacity: 0.6;
}

body.dark .adm-module-card {
  background: var(--sidebar-color);
  border-color: var(--border-color);
}

.adm-module-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.adm-module-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.adm-module-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color, #1e293b);
}

.adm-module-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #64748b);
}

.adm-module-arrow {
  font-size: 1.2rem;
  color: var(--text-muted, #94a3b8);
}

.adm-soon-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  background: rgba(100,116,139,0.1);
  color: #64748b;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Error state ───────────────────────────── */
.adm-load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem;
  color: var(--text-muted, #64748b);
  text-align: center;
}

.adm-load-error i {
  font-size: 2rem;
  color: #dc2626;
}

.adm-load-error p {
  font-size: 0.9rem;
}

.hidden { display: none !important; }

/* ── Responsive ────────────────────────────── */
@media (max-width: 640px) {
  .adm-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .adm-modules-grid {
    max-width: 100%;
  }
}

@media (max-width: 400px) {
  .adm-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Alert banner ──────────────────────────── */
.adm-alerts-section {
  margin-bottom: 1.5rem;
}

.adm-alert-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-left: 4px solid #dc2626;
  border-radius: 10px;
}

body.dark .adm-alert-banner {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
}

.adm-alert-icon {
  font-size: 1.3rem;
  color: #dc2626;
  flex-shrink: 0;
  line-height: 1;
}

body.dark .adm-alert-icon { color: #fca5a5; }

.adm-alert-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.adm-alert-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #dc2626;
}

body.dark .adm-alert-title { color: #fca5a5; }

.adm-alert-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
}

.adm-alert-action {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #dc2626;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.adm-alert-action:hover { text-decoration: underline; }
body.dark .adm-alert-action { color: #fca5a5; }

/* ── Bottom two-column grid ────────────────── */
.adm-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

@media (max-width: 900px) {
  .adm-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Activity section ──────────────────────── */
.adm-activity-section {
  background: var(--sidebar-color, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}

body.dark .adm-activity-section {
  background: var(--sidebar-color);
  border-color: var(--border-color);
}

.adm-activity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.adm-activity-header .adm-section-title {
  margin-bottom: 0;
}

.adm-act-refresh {
  background: none;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}

.adm-act-refresh:hover {
  background: var(--body-color, #f8fafc);
  color: var(--text-color, #1e293b);
}

.adm-activity-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  padding-bottom: 0;
}

.adm-act-tab {
  background: none;
  border: none;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}

.adm-act-tab.active {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}

body.dark .adm-act-tab.active {
  color: #93c5fd;
  border-bottom-color: #93c5fd;
}

.adm-act-panel {
  display: flex;
  flex-direction: column;
}

.adm-act-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.adm-act-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: var(--body-color, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  transition: box-shadow 0.12s;
}

.adm-act-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.dark .adm-act-item {
  background: rgba(255,255,255,0.03);
  border-color: var(--border-color);
}

.adm-act-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 1rem;
  flex-shrink: 0;
}

.adm-act-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.adm-act-name {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-color, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-act-meta {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.adm-act-actor,
.adm-act-company {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(100, 116, 139, 0.08);
  border-radius: 4px;
  padding: 0 0.35rem;
  font-size: 0.68rem;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adm-act-actor i,
.adm-act-company i {
  font-size: 0.7rem;
  flex-shrink: 0;
}

body.dark .adm-act-actor,
body.dark .adm-act-company { background: rgba(148,163,184,0.1); }

.adm-act-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Category badges */
.adm-act-cat-company  { background: rgba(29,78,216,0.1);    color: #1d4ed8; }
.adm-act-cat-user     { background: rgba(124,58,237,0.1);   color: #7c3aed; }
.adm-act-cat-security { background: rgba(220,38,38,0.1);    color: #dc2626; }

body.dark .adm-act-cat-company  { background: rgba(96,165,250,0.12);  color: #93c5fd; }
body.dark .adm-act-cat-user     { background: rgba(167,139,250,0.12); color: #a78bfa; }
body.dark .adm-act-cat-security { background: rgba(252,165,165,0.12); color: #fca5a5; }

body.dark .adm-act-status-ok  { background: rgba(52,211,153,0.12);  color: #6ee7b7; }
body.dark .adm-act-status-off { background: rgba(148,163,184,0.1);  color: #94a3b8; }
body.dark .adm-act-role-sa    { background: rgba(252,165,165,0.12); color: #fca5a5; }
body.dark .adm-act-role-admin { background: rgba(167,139,250,0.12); color: #a78bfa; }
body.dark .adm-act-role-user  { background: rgba(148,163,184,0.12); color: #94a3b8; }

.adm-act-loading,
.adm-act-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  font-size: 0.85rem;
  color: var(--text-muted, #64748b);
}

.adm-act-empty i { font-size: 1.2rem; }

/* ── Quick access section ──────────────────── */
.adm-quick-section {
  background: var(--sidebar-color, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}

body.dark .adm-quick-section {
  background: var(--sidebar-color);
  border-color: var(--border-color);
}

.adm-quick-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.adm-quick-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
  background: var(--body-color, #f8fafc);
}

.adm-quick-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border-color: rgba(29,78,216,0.25);
}

body.dark .adm-quick-card {
  background: rgba(255,255,255,0.03);
  border-color: var(--border-color);
}

.adm-quick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-size: 1rem;
  flex-shrink: 0;
}

.adm-quick-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.adm-quick-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color, #1e293b);
}

.adm-quick-desc {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
}

.adm-quick-arrow {
  font-size: 1.1rem;
  color: var(--text-muted, #94a3b8);
}

/* ── Section title with icon ───────────────── */
.adm-section-title i {
  font-size: 0.9rem;
  vertical-align: middle;
  margin-right: 0.1rem;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .page-header-actions {
    width: 100%;
  }
  .page-header-actions .admin-button {
    flex: 1;
    justify-content: center;
  }
}

/* ── Plan badge (shared, dashboard usage) ──── */
.plan-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.plan-starter, .plan-basic { background: rgba(100,116,139,0.12); color: #475569; }
.plan-pro                  { background: rgba(29,78,216,0.1);    color: #1d4ed8; }
.plan-enterprise           { background: rgba(124,58,237,0.1);   color: #7c3aed; }
body.dark .plan-starter,
body.dark .plan-basic      { background: rgba(148,163,184,0.12); color: #94a3b8; }
body.dark .plan-pro        { background: rgba(96,165,250,0.12);  color: #93c5fd; }
body.dark .plan-enterprise { background: rgba(167,139,250,0.12); color: #a78bfa; }

/* ── Plan Breakdown ────────────────────────── */
.adm-plan-breakdown {
  margin-bottom: 1.5rem;
}

.adm-plan-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.875rem;
  margin-top: 0.75rem;
}

.adm-plan-card {
  background: var(--sidebar-color, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

body.dark .adm-plan-card {
  background: var(--sidebar-color);
  border-color: var(--border-color);
}

.adm-plan-card-body {
  display: flex;
  gap: 1.25rem;
}

.adm-plan-stat {
  display: flex;
  flex-direction: column;
}

.adm-plan-stat-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color, #1e293b);
}

.adm-plan-stat-lbl {
  font-size: 0.7rem;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* MRR card accent */
#card-mrr {
  border-left: 3px solid rgba(16, 185, 129, 0.4);
}

body.dark #card-mrr {
  border-left-color: rgba(52, 211, 153, 0.4);
}