/**
 * APC — unified glassmorphism for all cards & panels
 * Uses CSS variables from style.css (:root / html.light / html.dark)
 */

:root {
  --apc-glass-blur: 20px;
  --apc-glass-radius: 1rem;
  --apc-glass-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.28);
  --apc-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --apc-glass-border-outer: var(--glass-border);
}

html.light {
  --apc-glass-blur: 18px;
  --apc-glass-radius: 0.75rem;
  --apc-glass-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 20px rgba(15, 23, 42, 0.07);
  --apc-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 1);
  --apc-glass-border-outer: rgba(15, 23, 42, 0.1);
  --glass-border: rgba(15, 23, 42, 0.1);
}

/* ── Core glass surfaces (all cards) ── */
.apc-glass-card,
.ec-glass-premium,
.glass-panel:not(.ec-sit-call-modal),
.ec-cmd-glass,
.ec-com-glass,
.ec-msg-glass,
.ec-appt-glass,
.ec-cmp-glass,
.ec-edu-glass,
.ec-land-glass,
.ec-auth-glass,
.ec-auth-role-card,
.ec-auth-stat-chip,
.ec-card-hover,
.ec-sit-command-panel,
.ec-ana-command-panel,
.ec-msg-command-panel,
.ec-appt-command-panel,
.ec-com-command-panel,
.ec-cmp-command-panel,
.ec-cmd-command-panel,
.ec-sit-stat-card,
.ec-ana-stat-card,
.ec-sit-chart-panel,
.ec-ana-chart-panel,
.ec-cmd-chart-panel,
.ec-com-chart-panel,
.ec-msg-chart-panel,
.ec-appt-chart-panel,
.ec-cmp-chart-panel,
.ec-cmd-kpi,
.ec-com-kpi,
.ec-msg-kpi,
.ec-appt-kpi,
.ec-cmp-kpi,
.ec-com-post-card,
.ec-com-broadcast-panel,
.ec-com-message-thread,
.ec-cmd-feed-item,
.ec-msg-feed-item,
.ec-appt-feed-item,
.ec-cmp-inbox-item,
[class*="ec-polls-command-panel"],
[class*="ec-blog-card"],
.ec-modal-dialog.ec-modal-dialog:not(.ec-sit-call-modal) {
  position: relative;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--apc-glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--apc-glass-blur)) saturate(1.15);
  border: 1px solid var(--apc-glass-border-outer) !important;
  border-radius: var(--apc-glass-radius);
  box-shadow: var(--apc-glass-shadow), var(--apc-glass-highlight) !important;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.25s ease;
}

/* Frosted top edge — classic glass shine */
.apc-glass-card::before,
.ec-glass-premium::before,
.ec-cmd-glass::before,
.ec-com-glass::before,
.ec-msg-glass::before,
.ec-appt-glass::before,
.ec-cmp-glass::before,
.ec-edu-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    transparent 52%
  );
  opacity: 0.9;
}

html.dark .apc-glass-card::before,
html.dark .ec-glass-premium::before,
html.dark .ec-cmd-glass::before,
html.dark .ec-com-glass::before,
html.dark .ec-msg-glass::before,
html.dark .ec-appt-glass::before,
html.dark .ec-cmp-glass::before,
html.dark .ec-edu-glass::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.02) 35%,
    transparent 55%
  );
  opacity: 1;
}

html.light .apc-glass-card::before,
html.light .ec-glass-premium::before,
html.light .ec-cmd-glass::before,
html.light .ec-com-glass::before,
html.light .ec-msg-glass::before,
html.light .ec-appt-glass::before,
html.light .ec-cmp-glass::before,
html.light .ec-edu-glass::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.25) 22%,
    transparent 48%
  );
}

/* Hover lift — cards */
.apc-glass-card:hover,
.ec-glass-premium:hover,
.ec-card-hover:hover {
  border-color: rgba(110, 198, 232, 0.35) !important;
  box-shadow:
    var(--apc-glass-shadow),
    var(--apc-glass-highlight),
    0 0 0 1px rgba(110, 198, 232, 0.12),
    0 16px 40px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px);
}

html.light .apc-glass-card:hover,
html.light .ec-glass-premium:hover {
  border-color: rgba(110, 198, 232, 0.28) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 2px 4px rgba(15, 23, 42, 0.05),
    0 8px 20px rgba(110, 198, 232, 0.1) !important;
  transform: translateY(-1px);
}

/* War-room — neutral executive canvas */
html.light .ec-sit-warroom,
html.light .ec-ana-warroom,
html.light .ec-msg-warroom,
html.light .ec-appt-warroom,
html.light .ec-com-warroom,
html.light .ec-edu-warroom,
html.light .ec-cmp-warroom,
html.light .ec-cmd-warroom {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

html.light .ec-sit-warroom [class*="bg-black/"],
html.light .ec-ana-warroom [class*="bg-black/"],
html.light .ec-msg-warroom [class*="bg-black/"],
html.light .ec-appt-warroom [class*="bg-black/"],
html.light .ec-com-warroom [class*="bg-black/"],
html.light .ec-cmp-warroom [class*="bg-black/"],
html.light .ec-cmd-warroom [class*="bg-black/"],
html.light .ec-sit-warroom [class*="bg-white/10"],
html.light .ec-ana-warroom [class*="bg-white/10"],
html.light .ec-msg-warroom [class*="bg-white/10"],
html.light .ec-appt-warroom [class*="bg-white/10"],
html.light .ec-com-warroom [class*="bg-white/10"],
html.light .ec-cmp-warroom [class*="bg-white/10"],
html.light .ec-cmd-warroom [class*="bg-white/10"] {
  background: var(--glass-bg-muted, #f1f5f9) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--apc-widget-border, rgba(15, 23, 42, 0.12)) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  color: var(--apc-text-primary);
}

/* Primary cards — crisp white panels */
html.light .ec-glass-premium,
html.light .apc-glass-card,
html.light .glass-panel:not(#sidebar):not(#topbar):not(.ec-sit-call-modal) {
  background: var(--glass-bg-strong) !important;
  color: var(--apc-text-primary);
}

/* Secondary widgets — subtle slate inset */
html.light .ec-cmd-kpi,
html.light .ec-com-kpi,
html.light .ec-msg-kpi,
html.light .ec-appt-kpi,
html.light .ec-cmp-kpi,
html.light .ec-cmd-feed-item,
html.light .ec-msg-feed-item,
html.light .ec-appt-feed-item,
html.light .ec-cmp-inbox-item,
html.light .ec-com-post-card {
  background: var(--glass-bg-inset, #f8fafc) !important;
  border-color: var(--apc-widget-border) !important;
  color: var(--apc-text-primary);
}

/* Nested chart panels */
.ec-cmd-chart-panel,
.ec-com-chart-panel,
.ec-ana-chart-panel {
  overflow: hidden;
}

/* Auth / landing glass shine */
.ec-auth-glass::before,
.ec-land-glass::before,
.ec-auth-role-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    transparent 52%
  );
  opacity: 0.9;
}

html.light .ec-auth-glass::before,
html.light .ec-land-glass::before,
html.light .ec-auth-role-card::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.25) 22%,
    transparent 48%
  );
}

html.light .ec-auth-role-card.is-selected {
  border-color: rgba(233, 30, 47, 0.35) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    var(--apc-glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(110, 198, 232, 0.2) !important;
}

/* Form fields — solid classic inputs */
html.light input[class*="bg-black/"],
html.light textarea[class*="bg-black/"],
html.light select[class*="bg-black/"] {
  background: var(--apc-input-bg, #ffffff) !important;
  border: 1px solid var(--apc-input-border, #cbd5e1) !important;
  color: var(--apc-text-primary) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: var(--apc-text-muted) !important;
  opacity: 1;
}

html.light button[class*="bg-white/10"]:not(.bg-apc-green):not([class*="bg-apc-green"]):not([class*="bg-apc-gold"]) {
  background: var(--glass-bg-inset, #f8fafc) !important;
  border: 1px solid var(--apc-widget-border) !important;
  color: var(--apc-text-secondary) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.light button[class*="bg-white/10"]:not(.bg-apc-green):not([class*="bg-apc-green"]):hover {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.18) !important;
  color: var(--apc-text-primary) !important;
}

/* Globe side panels — glass in light mode */
html.light .ec-globe-left,
html.light .ec-globe-right,
html.light [class*="ec-globe"] .rounded-2xl[class*="backdrop-blur"] {
  background: var(--glass-bg-strong) !important;
  border-color: var(--apc-widget-border, rgba(15, 23, 42, 0.12)) !important;
  box-shadow: var(--apc-glass-shadow), var(--apc-glass-highlight) !important;
  color: var(--apc-text-primary);
}

/* Education / blog cards with legacy Tailwind fills */
html.light .ec-card-hover[class*="bg-white/"],
html.light .ec-blog-card-glow[class*="bg-white/"],
html.light [class*="ec-polls-command-panel"][class*="bg-white/"] {
  background: var(--glass-bg-strong) !important;
  border-color: var(--apc-glass-border-outer) !important;
  backdrop-filter: blur(var(--apc-glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--apc-glass-blur)) saturate(1.15);
  box-shadow: var(--apc-glass-shadow), var(--apc-glass-highlight) !important;
}

/* Progress / meter tracks stay subtle */
html.light .rounded-full[class*="bg-white/10"]:not(.ec-glass-premium):not(.apc-glass-card) {
  background: rgba(15, 23, 42, 0.08) !important;
  border: none;
  backdrop-filter: none;
  box-shadow: none !important;
}