@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Mercia v2 — Design system & layout
   Base: Bootstrap 5 (assets/vendor/bootstrap). This file only adds tokens,
   the app shell (sidebar/topbar) and the custom components used across
   the 12 screens (dashboards, listagens, financeiro, quadro de avisos,
   calendario, biblioteca, mensagens).
   ========================================================================== */

:root {
  /* Official System Colors Palette (Standard Bootstrap 5 Colors) */
  --mc-primary: #0d6efd;
  --mc-primary-dark: #0b5ed7;
  --mc-primary-light: #cfe2ff;
  --mc-primary-tint: #f0f6ff;
  --mc-primary-soft: #e3edff;
  --mc-emerald: #198754;
  --mc-emerald-dark: #157347;
  --mc-emerald-light: #d1e7dd;
  --mc-emerald-tint: #f0fdf4;
  --mc-dark: #0F172A;
  --mc-dark-soft: #f1f5f9;

  /* Accents mapped to brand palette */
  --mc-purple: #0d6efd;
  --mc-purple-card: #cfe2ff;
  --mc-purple-soft: #f0f6ff;
  --mc-amber: #198754;
  --mc-amber-card: #d1e7dd;
  --mc-amber-soft: #f0fdf4;
  --mc-cyan: #0d6efd;
  --mc-cyan-soft: #f0f6ff;
  --mc-red: #ef4444;
  --mc-red-soft: #fef2f2;

  /* Chart palette */
  --mc-chart-blue: #0d6efd;
  --mc-chart-yellow: #198754;
  --mc-chart-purple: #0d6efd;
  --mc-chart-pink: #0F172A;

  /* Neutrals */
  --mc-bg: #f8fafc;
  --mc-surface: #ffffff;
  --mc-surface-alt: #f1f5f9;
  --mc-border: #e2e8f0;
  --mc-text: #0F172A;
  --mc-text-muted: #64748b;
  --mc-text-soft: #94a3b8;

  /* Layout */
  --mc-sidebar-w: 218px;
  --mc-sidebar-collapsed-w: 68px;
  --mc-content-max: 1600px;
  --mc-radius-lg: 20px;
  --mc-radius-md: 14px;
  --mc-radius-sm: 10px;
  --mc-radius-pill: 999px;
  --mc-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  --mc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--mc-bg);
  color: var(--mc-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--mc-text); margin: 0; }

.text-muted-mc { color: var(--mc-text-muted) !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-extrabold { font-weight: 800 !important; }

/* ==========================================================================
   Solar icons (inline SVG injected by assets/js/solar-icons.js)
   ========================================================================== */
[data-solar-icon],
.solar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.solar-icon svg {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  color: currentColor;
}
.icon-lg { font-size: 1.5rem; }
.icon-xl { font-size: 2rem; }

/* ==========================================================================
   App shell
   ========================================================================== */
.app-shell {
  display: flex;
  align-items: stretch;
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.sidebar {
  width: var(--mc-sidebar-w);
  flex: 0 0 var(--mc-sidebar-w);
  min-height: 100vh;
  background: var(--mc-surface);
  border-right: 1px solid var(--mc-border);
  padding: 1.5rem 1.15rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 1030;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), flex 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 0 0.25rem;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.sidebar-brand img,
.sidebar-brand-icon {
  height: 24px;
  width: 24px;
  max-height: 24px;
  max-width: 24px;
  object-fit: contain;
  display: block;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.sidebar-brand span,
.sidebar-brand-text {
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mc-text);
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.sidebar-brand-text .brand-crm {
  color: var(--mc-primary);
  font-weight: 800;
  margin-left: 4px;
  font-size: 0.95em;
  letter-spacing: -0.01em;
}

.sidebar-toggle-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--mc-surface-alt);
  border: 1px solid var(--mc-border);
  color: var(--mc-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: w-resize; /* Indica direção para fechar/contrair à esquerda */
  padding: 0;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease, border-color 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;
  flex: 0 0 auto;
}
.sidebar-toggle-btn .solar-icon {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.sidebar-toggle-btn:hover {
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
  border-color: var(--mc-primary-light);
}

/* Collapsed Sidebar State */
.sidebar-collapsed .sidebar {
  width: var(--mc-sidebar-collapsed-w);
  flex: 0 0 var(--mc-sidebar-collapsed-w);
  padding: 1.5rem 0.5rem;
  overflow: visible !important;
}
.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-link span:not(.solar-icon),
.sidebar-collapsed .sidebar-link .caret {
  display: none !important;
}
.sidebar-collapsed .sidebar-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-bottom: 1.5rem;
  height: 34px;
  cursor: e-resize; /* Indica direção para abrir/expandir à direita */
}
.sidebar-collapsed .sidebar-brand {
  padding: 0;
  justify-content: center;
  display: flex;
  align-items: center;
  cursor: e-resize;
  transition: opacity 0.15s ease;
}
.sidebar-collapsed .sidebar-brand-icon,
.sidebar-collapsed .sidebar-brand img {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.15s ease;
}
.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 0.65rem 0;
  border-radius: 10px;
}
.sidebar-collapsed .sidebar-toggle-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: e-resize; /* Indica direção para abrir/expandir à direita */
  transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.2s ease;
  z-index: 2;
  display: inline-flex !important;
}
.sidebar-collapsed .sidebar-header:hover .sidebar-brand {
  opacity: 0;
  pointer-events: none;
}
.sidebar-collapsed .sidebar-header:hover .sidebar-toggle-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Tooltips on hover when sidebar is collapsed */
.sidebar-collapsed .sidebar-link {
  position: relative !important;
}

.sidebar-collapsed .sidebar-link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: #1e293b;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.15s ease;
  z-index: 1099;
}

.sidebar-collapsed .sidebar-link[data-tooltip]::before {
  content: "";
  position: absolute;
  left: calc(100% + 7px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  border-width: 5px 6px 5px 0;
  border-style: solid;
  border-color: transparent #1e293b transparent transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.15s ease;
  z-index: 1099;
}

.sidebar-collapsed .sidebar-link[data-tooltip]:hover::after,
.sidebar-collapsed .sidebar-link[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   Collapsed Sidebar Flyout Submenu (e.g. Usuários, Perfis, Permissões)
   ========================================================================== */
.sidebar-collapsed .nav-item {
  position: relative;
}

.sidebar-collapsed .nav-item:has(.sidebar-sublist) > .sidebar-link::before,
.sidebar-collapsed .nav-item:has(.sidebar-sublist) > .sidebar-link::after,
.sidebar-collapsed .nav-item.has-sublist > .sidebar-link::before,
.sidebar-collapsed .nav-item.has-sublist > .sidebar-link::after {
  display: none !important;
}

.sidebar-collapsed .sidebar-sublist {
  display: block !important;
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 0 !important;
  min-width: 180px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.16), 0 4px 10px -3px rgba(15, 23, 42, 0.08) !important;
  padding: 6px !important;
  margin: 0 !important;
  list-style: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-6px);
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.15s ease !important;
  z-index: 1099 !important;
}

.sidebar-collapsed .sidebar-sublist::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 100% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 14px !important;
  background: transparent !important;
}

.sidebar-collapsed .nav-item:hover > .sidebar-sublist,
.sidebar-collapsed .nav-item.is-flyout-open > .sidebar-sublist {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

.sidebar-flyout-title {
  display: none;
}
.sidebar-collapsed .sidebar-flyout-title {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  padding: 6px 10px 6px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 4px !important;
  pointer-events: none !important;
  list-style: none !important;
}

.sidebar-collapsed .sidebar-sublist li {
  margin-bottom: 2px !important;
}
.sidebar-collapsed .sidebar-sublist li:last-child {
  margin-bottom: 0 !important;
}

.sidebar-collapsed .sidebar-sublist .sidebar-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  color: #475569 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}
.sidebar-collapsed .sidebar-sublist .sidebar-link span {
  display: inline !important;
}
.sidebar-collapsed .sidebar-sublist .sidebar-link:hover {
  background: #f1f5f9 !important;
  color: var(--mc-primary) !important;
}
.sidebar-collapsed .sidebar-sublist .sidebar-link.active {
  background: var(--mc-primary-tint) !important;
  color: var(--mc-primary) !important;
  font-weight: 700 !important;
}

.sidebar-collapsed .sidebar-toggle-btn:hover {
  background: var(--mc-primary-tint) !important;
  color: var(--mc-primary) !important;
  border-color: var(--mc-primary-light) !important;
}

.sidebar-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mc-text-soft);
  text-transform: uppercase;
  margin: 1.25rem 0 0.5rem;
  padding: 0 0.75rem;
}

.sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-nav .nav-item + .nav-item { margin-top: 0.15rem; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--mc-radius-sm);
  color: var(--mc-text-muted);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-link .solar-icon { font-size: 1.15rem; flex: 0 0 auto; }
.sidebar-link:hover { background: var(--mc-surface-alt); color: var(--mc-text); }
.sidebar-link.active {
  background: var(--mc-primary-light);
  color: var(--mc-text);
  font-weight: 600;
}
.sidebar-link .caret { margin-left: auto; font-size: 0.9rem; transition: transform 0.15s ease; }
.sidebar-link[aria-expanded="true"] .caret { transform: rotate(90deg); }

.sidebar-sublist {
  list-style: none !important;
  margin: 0.25rem 0 0.5rem 1.55rem !important;
  padding: 0 !important;
  border-left: 2px solid #edf2f7 !important;
  position: relative !important;
}
.sidebar-sublist .sidebar-link {
  display: flex !important;
  align-items: center !important;
  padding: 0.45rem 0.5rem 0.45rem 0.85rem !important;
  border-radius: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  background: transparent !important;
  position: relative !important;
  transition: color 0.15s ease !important;
}
.sidebar-sublist .sidebar-link::before {
  display: none !important;
}
.sidebar-sublist .sidebar-link:hover {
  color: #1e293b !important;
  background: transparent !important;
}
.sidebar-sublist .sidebar-link.active {
  color: #1e293b !important;
  font-weight: 600 !important;
  background: transparent !important;
}
.sidebar-sublist .sidebar-link.active::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -2px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: #bce3f9 !important;
  border-radius: 1px !important;
}

.sidebar-promo {
  margin-top: auto;
  border-radius: var(--mc-radius-lg);
  padding: 1.5rem 1.25rem 1.35rem;
  background: linear-gradient(155deg, var(--mc-primary) 0%, #1746b3 60%, #0f2e63 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sidebar-promo::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(16,185,129,.55) 0%, rgba(16,185,129,0) 70%);
}
.sidebar-promo h6 { color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; position: relative; z-index: 1; }
.sidebar-promo .btn { position: relative; z-index: 1; }

.app-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--mc-bg);
  padding: 1.5rem 2rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topbar-search {
  flex: 0 1 340px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.topbar-search-wrap { position: relative; flex: 1 1 200px; min-width: 160px; }
.topbar-search-wrap .form-control { width: 100%; }
.topbar-search-wrap .form-control {
  border-radius: var(--mc-radius-pill);
  border: 1px solid var(--mc-border);
  background: var(--mc-surface);
  padding: 0.65rem 1rem 0.65rem 2.75rem;
}
.topbar-search-wrap .solar-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--mc-text-soft); font-size: 1.1rem;
}

.icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--mc-text);
  font-size: 1.15rem;
  position: relative;
  flex: 0 0 auto;
}
.icon-btn:hover { background: var(--mc-surface-alt); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mc-red);
  border: 2px solid var(--mc-bg);
}
.icon-btn-amber {
  background: var(--mc-amber);
  border-color: var(--mc-amber);
  color: #4a3400;
}
.icon-btn-amber:hover { background: #e6a500; }

.topbar-user { display: flex; align-items: center; gap: 0.7rem; }
.topbar-user .name-block { text-align: right; line-height: 1.2; }
.topbar-user .name { font-weight: 700; font-size: 0.9rem; }
.topbar-user .role { font-size: 0.78rem; color: var(--mc-text-muted); }
.topbar-user .greeting { font-size: 0.75rem; color: var(--mc-text-muted); }

.page-content { padding: 0 2rem 2rem; flex: 1 1 auto; }

.app-footer {
  padding: 1.25rem 2rem 1.75rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
  color: var(--mc-text-muted);
  font-size: 0.85rem;
}
.app-footer .footer-contact { display: flex; align-items: center; gap: 1.5rem; }
.app-footer .footer-contact span { display: inline-flex; align-items: center; gap: 0.4rem; }
.app-footer .footer-links { display: flex; gap: 1.5rem; }
.app-footer .footer-links a:hover { color: var(--mc-text); }
.app-footer .footer-links { flex-wrap: wrap; }
.app-footer .footer-copyright { margin-left: auto; }

/* ==========================================================================
   Avatars (initials — no stock photography)
   ========================================================================== */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 700;
  color: #fff;
  flex: 0 0 auto;
  background: var(--mc-primary);
  line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-xs { width: 28px; height: 28px; font-size: 0.65rem; }
.avatar-sm { width: 36px; height: 36px; font-size: 0.75rem; }
.avatar-md { width: 46px; height: 46px; font-size: 0.85rem; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.15rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.6rem; }

.avatar-blue { background: var(--mc-primary); }
.avatar-emerald { background: var(--mc-emerald); }
.avatar-purple { background: var(--mc-purple); }
.avatar-amber { background: #e2a400; }
.avatar-pink { background: var(--mc-red); }
.avatar-cyan { background: var(--mc-cyan); }
.avatar-navy { background: #334066; }

.avatar-status { position: relative; }
.avatar-status::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--mc-emerald);
  border: 2px solid var(--mc-surface);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.mc-card {
  background: var(--mc-surface);
  border: none;
  border-radius: var(--mc-radius-lg);
  box-shadow: none;
  padding: 1.5rem;
}
.mc-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; gap: 0.75rem; flex-wrap: wrap;
}
.mc-card-header h2, .mc-card-header h3 { font-size: 1.05rem; }
/* Section labels that sit outside .mc-card-header (Agenda under the
   mini calendar) must still match the rest of the card-title scale —
   the calendar's own month/day heading stays at the larger default. */
.widget-title { font-size: 1.05rem; }

.kebab-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.kebab-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.stat-card {
  border-radius: var(--mc-radius-lg);
  padding: 1.25rem 1.4rem;
  min-height: 140px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
}
.stat-card .stat-value { font-size: 1.7rem; font-weight: 800; margin-top: 0.6rem; }
.stat-card .stat-label { font-size: 0.85rem; font-weight: 600; opacity: 0.75; }
.stat-card .stat-trend {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: var(--mc-radius-pill);
  background: var(--mc-surface);
  box-shadow: var(--mc-shadow-sm);
}
.stat-card .stat-kebab {
  position: absolute; top: 1.1rem; right: 1.1rem;
  color: rgba(27,31,42,.45);
}
.stat-card .stat-icon-corner {
  position: absolute; top: 1.1rem; left: 1.1rem;
  font-size: 1.3rem; color: var(--mc-primary-dark); opacity: .35;
}
.stat-card .stat-trend.align-end { align-self: flex-end; }
.stat-card-purple { background: var(--mc-purple-card); }
.stat-card-amber { background: var(--mc-amber-card); }
.stat-card-blue { background: var(--mc-primary-light); }
.stat-card-white { background: var(--mc-surface); border: 1px solid var(--mc-border); }
.trend-up { color: #0b8a4d; }
.trend-down { color: #c22b4f; }

.metric-tile {
  border-radius: var(--mc-radius-md);
  background: var(--mc-surface-alt);
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.metric-tile .metric-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}

/* ==========================================================================
   Badges / status pills
   ========================================================================== */
.mc-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--mc-radius-pill);
  font-size: 0.78rem; font-weight: 700;
  white-space: nowrap;
}
.mc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mc-badge-blue { background: var(--mc-primary-light); color: var(--mc-primary-dark); }
.mc-badge-emerald { background: var(--mc-emerald-light); color: #0b8a4d; }
.mc-badge-amber { background: var(--mc-amber-soft); color: #9a6b00; }
.mc-badge-red { background: var(--mc-red-soft); color: #c22b4f; }
.mc-badge-outline-blue { background: transparent; border: 1px solid var(--mc-primary); color: var(--mc-primary-dark); }
.mc-badge-outline-red { background: transparent; border: 1px solid var(--mc-red); color: var(--mc-red); }

/* White pill + colored dot — Fees Collection (Paid/Pending/Overdue) and
   Library (Available/Checked Out) use this style in the reference, not
   a tinted background. */
.mc-badge-white { background: var(--mc-surface); box-shadow: var(--mc-shadow-sm); }
.mc-badge-white.mc-badge-blue-text { color: var(--mc-primary); }
.mc-badge-white.mc-badge-amber-text { color: #f5a623; }
.mc-badge-white.mc-badge-red-text { color: var(--mc-red); }

/* Solid square badge — the small metric tiles (Olympic Students,
   Competition) use a filled rounded-square chip, not a soft pill. */
.metric-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  font-size: 0.78rem; font-weight: 700;
  color: #fff;
}
.metric-badge-emerald { background: #0b8a4d; }
.metric-badge-red { background: var(--mc-red); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-mc-primary {
  background: var(--mc-primary); border-color: var(--mc-primary); color: #fff;
  border-radius: var(--mc-radius-pill); font-weight: 600; padding: 0.55rem 1.3rem;
}
.btn-mc-primary:hover { background: var(--mc-primary-dark); border-color: var(--mc-primary-dark); color: #fff; }
.btn-mc-light {
  background: var(--mc-surface); border: 1px solid var(--mc-border); color: var(--mc-text);
  border-radius: var(--mc-radius-pill); font-weight: 600; padding: 0.55rem 1.3rem;
}

/* Compact filter pills (Weekly / Grade 3 / Today / All Status dropdowns) —
   the reference keeps these small and tight, not full Bootstrap size. */
select.form-select.form-select-sm.rounded-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 1.75rem 0.3rem 0.75rem;
  background-position: right 0.6rem center;
  background-size: 12px 12px;
  border-color: var(--mc-border);
  min-height: auto;
}
.btn-mc-light:hover { background: var(--mc-surface-alt); }
.btn-fab-amber {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--mc-amber); border: none; color: #4a3400;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.btn-fab-amber:hover { background: #e6a500; }

/* ==========================================================================
   Tables
   ========================================================================== */
.mc-table-wrap {
  background: var(--mc-surface);
  border: none;
  border-radius: 24px;
  overflow: hidden;
  padding: 24px 24px 16px 24px;
  box-shadow: none;
}
.table-mc {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.table-mc thead tr th {
  background: var(--mc-primary-tint);
  color: #475569;
  font-weight: 600;
  font-size: 0.78rem;
  border: none;
  padding: 0.7rem 0.85rem;
  white-space: nowrap;
}
.table-mc thead tr th:first-child,
.table-mc tbody tr td:first-child {
  padding-left: 1.25rem;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.table-mc thead tr th:last-child,
.table-mc tbody tr td:last-child {
  padding-right: 1.25rem;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.table-mc tbody td {
  padding: 0.75rem 0.85rem;
  vertical-align: middle;
  border-top: none;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.80rem;
  color: #1e293b;
  background-color: #ffffff;
}
.table-mc tbody tr:last-child td {
  border-bottom: none;
}
.table-mc tbody tr {
  background-color: #ffffff;
  transition: background-color 0.15s ease;
}
.table-mc tbody tr:hover td {
  background-color: #f8fafc;
}
.teacher-avatar-img {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  object-fit: cover;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: block;
}

.table-mc .avatar,
.table-mc .avatar-md {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 0.92rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.table-mc .avatar .solar-icon,
.table-mc .avatar-md .solar-icon {
  font-size: 0.95rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-mc .row-title {
  font-weight: 600;
  color: #1e293b;
  font-size: 0.82rem;
  line-height: 1.25;
}
.table-mc .row-sub {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 400;
  margin-top: 1px;
}
.table-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.action-btn,
.table-actions .action-btn,
.table-actions button {
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.95rem;
  transition: all 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}
.action-btn:hover,
.table-actions .action-btn:hover,
.table-actions button:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #1e293b;
}

.action-btn.action-btn-danger,
.action-btn-danger {
  color: #ef4444;
}
.action-btn.action-btn-danger:hover,
.action-btn-danger:hover {
  background: #fef2f2;
  border-color: #fee2e2;
  color: #dc2626;
}

.mercia-composer-icon-btn {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.95rem;
  transition: all 0.15s ease;
  cursor: pointer;
}
.mercia-composer-icon-btn:hover {
  background: var(--mc-primary-tint);
  border-color: var(--mc-primary-light);
  color: var(--mc-primary);
}
.teachers-search-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  width: 270px;
}
.teachers-search-box .solar-icon {
  font-size: 0.88rem;
  color: #94a3b8;
}
.teachers-search-box input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.78rem;
  width: 100%;
  color: #1e293b;
}
.teachers-search-box input::placeholder {
  color: #94a3b8;
}
.icon-btn-amber {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f4f7fb;
  border: none;
  color: #596780;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn-amber:hover {
  background: #ebf1f7;
  color: #1e293b;
}
.icon-btn-amber .solar-icon {
  font-size: 0.95rem;
  color: #596780;
}
.icon-btn-amber:hover .solar-icon {
  color: #1e293b;
}
.btn-amber-add {
  height: 32px;
  padding: 0 10px 0 8px;
  border-radius: 8px;
  background: #f4f7fb;
  border: none;
  color: #596780;
  font-size: 0.78rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-amber-add:hover {
  background: #ebf1f7;
  color: #1e293b;
}
.btn-amber-add .solar-icon {
  font-size: 0.95rem;
  color: #596780;
}
.btn-amber-add:hover .solar-icon {
  color: #1e293b;
}
.custom-table-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 3.5px;
  border: 1.2px solid #cbd5e1;
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
}
.custom-table-checkbox:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.attendance-mark {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.attendance-mark.solar-icon svg,
.attendance-mark svg {
  width: 24px;
  height: 24px;
  display: block;
}
.attendance-present {
  color: var(--mc-primary);
  background: transparent;
}
.attendance-absent {
  color: #f87171;
  background: transparent;
}
.attendance-na {
  color: #94a3b8;
  background: transparent;
}
.attendance-none {
  color: #94a3b8;
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  display: inline-block;
  line-height: 1;
}

.attendance-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 32px;
  padding: 0 12px;
  background: #f4f7fb;
  border: none;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #596780;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1;
}
.attendance-filter-btn:hover {
  background: #ebf1f7;
  color: #1e293b;
}
.attendance-filter-btn .solar-icon {
  font-size: 0.9rem;
  color: #596780;
}
.attendance-filter-btn:hover .solar-icon {
  color: #1e293b;
}
.attendance-filter-btn .chevron-icon {
  font-size: 0.75rem;
  color: #596780;
  margin-left: 1px;
}
.attendance-filter-btn:hover .chevron-icon {
  color: #1e293b;
}

.btn-page-text {
  padding: 0.38rem 1rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-size: 0.82rem;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-page-text:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.mc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0.5rem 0.5rem 0.5rem;
}
.mc-pagination .pages {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mc-pagination .page-num {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #64748b;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
}
.mc-pagination .page-num:hover {
  color: #1e293b;
}
.mc-pagination .page-num.active {
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
  font-weight: 700;
}
.mc-pagination .page-dots {
  color: #94a3b8;
  padding: 0 2px;
  font-size: 0.85rem;
}
.mc-pagination .page-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mc-pagination .page-nav:hover {
  background: #f8fafc;
  color: #1e293b;
  border-color: #cbd5e1;
}
.mc-pagination .page-nav.is-disabled { opacity: 0.4; pointer-events: none; }
.mc-pagination .page-summary {
  font-size: 0.78rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  margin-right: 0.75rem;
}
.mc-pagination .pages { margin-left: auto; }

/* ==========================================================================
   Calendar
   ========================================================================== */
.calendar-main-card {
  background: var(--mc-surface);
  border: none;
  border-radius: 24px;
  padding: 24px;
  width: 100%;
}
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.view-switch {
  display: inline-flex;
  background: #f4f7fb;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  height: 32px;
  box-sizing: border-box;
  align-items: center;
}
.view-switch .btn,
.view-switch-btn {
  height: 26px;
  border-radius: 6px;
  border: none;
  padding: 0 0.75rem;
  font-weight: 500;
  font-size: 0.78rem;
  color: #64748b;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}
.view-switch .btn:hover:not(.active),
.view-switch-btn:hover:not(.active) {
  color: #1e293b;
}
.view-switch .btn.active,
.view-switch-btn.active {
  background: #ffffff !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.calendar-title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.cal-nav-today {
  background: transparent;
  border: none;
  font-weight: 500;
  font-size: 0.82rem;
  color: #596780;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cal-nav-today:hover {
  color: #1e293b;
}
.cal-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-nav-btn:hover {
  border-color: #cbd5e1;
  color: #475569;
}
.cal-nav-btn .solar-icon {
  font-size: 0.85rem;
}

.calendar-grid {
  border: 1px solid #eef2f6;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mc-surface);
}
.calendar-grid .cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--mc-primary-tint);
  border-bottom: 1px solid #eef2f6;
}
.calendar-grid .cal-head div {
  padding: 0.85rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  text-align: left;
  letter-spacing: 0.02em;
}
.calendar-grid .cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-day {
  min-height: 110px;
  min-width: 0;
  border-top: 1px solid #eef2f6;
  border-left: 1px solid #eef2f6;
  padding: 0.55rem 0.65rem;
  font-size: 0.85rem;
  color: #1e293b;
  overflow: hidden;
}
.cal-day:nth-child(7n+1) {
  border-left: none;
}
.cal-day:nth-child(-n+7) {
  border-top: none;
}
.cal-day .daynum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.45rem;
  color: #1e293b;
}
.cal-day .more-badge {
  font-size: 0.65rem;
  font-weight: 500;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.cal-day.is-muted {
  color: #94a3b8;
  background: #ffffff;
}
.cal-day.is-muted .daynum {
  color: #94a3b8;
  font-weight: 400;
}
.cal-event {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.16rem 0.38rem;
  border-radius: 4px;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  filter: brightness(0.97);
}
.cal-event::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 10px;
  border-radius: 1px;
  flex-shrink: 0;
}
.cal-event-purple {
  background: #f4f3ff;
  color: #1e293b;
}
.cal-event-purple::before {
  background: #8b5cf6;
}
.cal-event-pink {
  background: #fdf2f8;
  color: #1e293b;
}
.cal-event-pink::before {
  background: #f43f5e;
}
.cal-event-blue {
  background: var(--mc-primary-tint);
  color: #1e293b;
}
.cal-event-blue::before {
  background: #06b6d4;
}
.cal-event-amber {
  background: #fef8e7;
  color: #1e293b;
}
.cal-event-amber::before {
  background: #f59e0b;
}
.cal-event-green {
  background: #d1e7dd;
  color: #1e293b;
}
.cal-event-green::before {
  background: #198754;
}

.cal-side-card {
  border: 1px solid #eef2f6;
  border-radius: 14px;
  padding: 1.15rem;
  background: #ffffff;
}
.cal-side-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.cal-side-card-header h4 {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.cal-kebab-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cal-kebab-btn:hover {
  color: #475569;
}
.agenda-legend-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.agenda-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #1e293b;
  text-align: left;
  transition: all 0.15s ease;
}
.agenda-legend-item:hover {
  filter: brightness(0.97);
}
.agenda-legend-item::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.agenda-legend-item .agenda-legend-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  text-align: left;
  color: #1e293b;
  font-weight: 500;
}
.agenda-legend-item .agenda-legend-label .solar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.agenda-legend-item .agenda-legend-label .solar-icon svg {
  width: 18px;
  height: 18px;
}
.agenda-legend-item .badge {
  margin-left: auto;
  font-weight: 600;
}
.agenda-legend-item.legend-purple {
  background: #f4f3ff;
}
.agenda-legend-item.legend-purple::before {
  background: #8b5cf6;
}
.agenda-legend-item.legend-pink {
  background: #fdf2f8;
}
.agenda-legend-item.legend-pink::before {
  background: #f43f5e;
}
.agenda-legend-item.legend-blue {
  background: var(--mc-primary-tint);
}
.agenda-legend-item.legend-blue::before {
  background: #06b6d4;
}
.agenda-legend-item.legend-amber {
  background: #fef8e7;
}
.agenda-legend-item.legend-amber::before {
  background: #f59e0b;
}
.agenda-legend-item.legend-green {
  background: #d1e7dd;
}
.agenda-legend-item.legend-green::before {
  background: #198754;
}

.cal-event-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.cal-event-detail-card {
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-event-detail-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  filter: brightness(0.97);
}
.cal-event-detail-card.card-blue {
  background: var(--mc-primary-tint);
  border-left: 3px solid var(--mc-primary);
}
.cal-event-detail-card.card-amber {
  background: #fef8e7;
  border-left: 3px solid #d97706;
}
.cal-event-detail-card.card-pink {
  background: #fdf2f8;
  border-left: 3px solid #f43f5e;
}
.cal-event-detail-card.card-purple {
  background: #f4f3ff;
  border-left: 3px solid #8b5cf6;
}
.cal-event-detail-card.card-green {
  background: #d1e7dd;
  border-left: 3px solid #198754;
}
.cal-day {
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-day:hover:not(.is-muted) {
  background: #f8fafc;
}
.cal-day.is-today {
  background: #fafcff;
}
.cal-day.is-today .daynum span:first-child {
  background: var(--mc-primary);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
}
.cal-day.is-selected {
  background: var(--mc-primary-tint) !important;
  position: relative;
}
.cal-day.is-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mc-primary);
  border-radius: 3px 3px 0 0;
}

/* ==========================================================================
   Calendar Week View
   ========================================================================== */
.cal-week-container {
  border: 1px solid #eef2f6;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mc-surface);
}
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #ffffff;
  min-height: 540px;
}
.cal-week-col {
  border-left: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: background 0.15s ease;
}
.cal-week-col:first-child {
  border-left: none;
}
.cal-week-col.is-today {
  background: #fafcff;
}
.cal-week-col.is-selected {
  background: var(--mc-primary-tint);
  position: relative;
}
.cal-week-col.is-selected .cal-week-col-head {
  background: var(--mc-primary-soft);
}
.cal-week-col-head {
  padding: 0.85rem 0.5rem;
  background: var(--mc-primary-tint);
  border-bottom: 1px solid #eef2f6;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-week-col.is-today .cal-week-col-head {
  background: var(--mc-primary-soft);
}
.cal-week-day-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.cal-week-day-number {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.cal-week-col.is-today .cal-week-day-number {
  background: var(--mc-primary);
  color: #ffffff;
}
.cal-week-today-pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--mc-primary);
  color: #fff;
  margin-top: 3px;
  text-transform: uppercase;
}
.cal-week-col-body {
  padding: 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.cal-week-event-card {
  padding: 0.6rem 0.65rem;
  border-radius: 8px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid transparent;
}
.cal-week-event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  filter: brightness(0.97);
}
.cal-week-event-card.card-blue {
  background: var(--mc-primary-tint);
  border-left: 3px solid var(--mc-primary);
}
.cal-week-event-card.card-amber {
  background: #fef8e7;
  border-left: 3px solid #d97706;
}
.cal-week-event-card.card-pink {
  background: #fdf2f8;
  border-left: 3px solid #f43f5e;
}
.cal-week-event-card.card-purple {
  background: #f4f3ff;
  border-left: 3px solid #8b5cf6;
}
.cal-week-event-card.card-green {
  background: #d1e7dd;
  border-left: 3px solid #198754;
}
.cal-week-event-time {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 3px;
}
.cal-week-event-title {
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
}
.cal-week-event-loc {
  font-size: 0.68rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-week-empty-slot {
  flex: 1;
  min-height: 80px;
  border: 1px dashed transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.72rem;
  transition: all 0.15s ease;
}
.cal-week-col:hover .cal-week-empty-slot {
  border-color: #e2e8f0;
}

/* ==========================================================================
   Calendar Day View
   ========================================================================== */
.cal-day-container {
  border: 1px solid #eef2f6;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mc-surface);
}
.cal-day-top-bar {
  padding: 0.95rem 1.25rem;
  background: var(--mc-primary-tint);
  border-bottom: 1px solid #eef2f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal-day-top-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-day-timeline {
  display: flex;
  flex-direction: column;
}
.cal-day-hour-row {
  display: grid;
  grid-template-columns: 85px 1fr;
  min-height: 64px;
  border-bottom: 1px solid #f1f5f9;
}
.cal-day-hour-label {
  padding: 0.85rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-align: right;
  border-right: 1px solid #f1f5f9;
  background: #fafafa;
  user-select: none;
}
.cal-day-hour-content {
  padding: 0.45rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  transition: background 0.15s ease;
}
.cal-day-hour-content:hover {
  background: #fafcff;
}
.cal-day-event-block {
  padding: 0.65rem 0.95rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 2px 0;
  border: 1px solid transparent;
}
.cal-day-event-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  filter: brightness(0.98);
}
.cal-day-event-block.card-blue {
  background: var(--mc-primary-tint);
  border-left: 3px solid var(--mc-primary);
}
.cal-day-event-block.card-amber {
  background: #fef8e7;
  border-left: 3px solid #d97706;
}
.cal-day-event-block.card-pink {
  background: #fdf2f8;
  border-left: 3px solid #f43f5e;
}
.cal-day-event-block.card-purple {
  background: #f4f3ff;
  border-left: 3px solid #8b5cf6;
}
.cal-day-event-block.card-green {
  background: #d1e7dd;
  border-left: 3px solid #198754;
}
.cal-day-free-slot {
  font-size: 0.74rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0.2rem 0;
}
.cal-day-free-slot:hover {
  color: var(--mc-primary);
}
.cal-event-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.15rem;
}
.cal-event-card-icon {
  font-size: 0.95rem;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
}
.cal-event-card-icon svg {
  width: 14px;
  height: 14px;
}
.cal-event-card-time {
  font-size: 0.72rem;
  font-weight: 500;
  color: #8a99ad;
}
.cal-event-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0.15rem 0 0.05rem 0;
  line-height: 1.2;
}
.cal-event-card-sub {
  font-size: 0.72rem;
  color: #8a99ad;
  margin: 0;
  font-weight: 400;
}

/* ==========================================================================
   Notice board
   ========================================================================== */
.notice-item { border: 1px solid var(--mc-border); border-radius: var(--mc-radius-lg); padding: 1.25rem 1.4rem; margin-bottom: 1rem; background: var(--mc-surface); }
.notice-item.is-active { background: var(--mc-purple-soft); border-color: transparent; }
.notice-item-head { display: flex; gap: 0.9rem; align-items: flex-start; }
.notice-thumb { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; }
.notice-meta { margin-left: auto; text-align: right; font-size: 0.78rem; color: var(--mc-text-muted); white-space: nowrap; }
.notice-body { color: var(--mc-text-muted); font-size: 0.875rem; margin-top: 0.75rem; }
.notice-detail-cover { width: 100%; border-radius: var(--mc-radius-lg); aspect-ratio: 4/3; object-fit: cover; }
.notice-tag { display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--mc-radius-pill); font-size: 0.75rem; font-weight: 700; }

/* ==========================================================================
   Messages / chat
   ========================================================================== */
body[data-page="messages"] .app-main {
  overflow: hidden !important;
  height: 100vh;
}
body[data-page="messages"] .page-content {
  padding: 0 2rem 1.5rem !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
body[data-page="messages"] .fidelity-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
body[data-page="messages"] .app-footer {
  display: none !important;
}

.chat-shell {
  display: flex;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: var(--mc-surface);
  overflow: hidden;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.chat-list {
  width: 320px;
  flex: 0 0 320px;
  border-right: 1px solid #edf2f7;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  min-height: 0;
}
.chat-list-header {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #edf2f7;
  background: #ffffff;
  box-sizing: border-box;
}
.chat-search-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex: 1;
  height: 38px;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.chat-search-wrap:focus-within {
  background: #ffffff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}
.chat-search-wrap .solar-icon {
  font-size: 0.95rem;
  color: #94a3b8;
}
.chat-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.82rem;
  font-weight: 500;
  color: #1e293b;
  width: 100%;
}
.chat-search-input::placeholder {
  color: #94a3b8;
  font-size: 0.82rem;
}
.chat-add-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 10px;
  background: #e0edff;
  color: #0d6efd;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.chat-add-btn:hover {
  background: #cfe2ff;
  color: #0b5ed7;
  transform: scale(1.02);
}
.chat-list-scroll {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.min-w-0 {
  min-width: 0 !important;
}
.chat-list-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.15s ease;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}
.chat-list-item .flex-fill {
  min-width: 0 !important;
  overflow: hidden;
}
.chat-list-item:hover {
  background: #f8fafc;
}
.chat-list-item.active {
  background: #f1f5f9;
}
.chat-list-item .name {
  font-weight: 700;
  font-size: 0.82rem;
  color: #1e293b;
  margin-bottom: 2px;
}
.chat-list-item .preview {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.chat-list-item .time {
  font-size: 0.7rem;
  color: #94a3b8;
  white-space: nowrap;
  font-weight: 500;
}
.chat-unread {
  background: #cfe2ff;
  color: #0d6efd;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

.chat-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #f8fafc;
  border-right: none;
  min-height: 0;
}
.chat-main-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1.25rem;
  background: #ffffff;
  border-bottom: 1px solid #edf2f7;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
}
.chat-main-header .avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-main-header .avatar img,
.chat-main-header .avatar svg {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  object-fit: cover;
}
.chat-main-header .title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.2;
}
.chat-main-header .sub {
  font-size: 0.76rem;
  color: #64748b;
  margin-top: 2px;
}
.chat-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chat-action-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

/* Expandable Chat Header Search */
.chat-header-search-wrap {
  display: flex;
  align-items: center;
  position: relative;
}

.chat-search-expandable {
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  overflow: hidden;
  transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  padding: 0 4px;
}

.chat-search-expandable:not(.open):hover {
  background: #f1f5f9;
  color: #1e293b;
}

.chat-search-expandable.open {
  width: 250px;
  background: #ffffff;
  box-shadow: 0 0 0 1.5px #0d6efd;
  padding: 0 8px;
  gap: 6px;
}

@media (max-width: 576px) {
  .chat-search-expandable.open {
    width: 180px;
  }
}

.chat-search-toggle-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}

.chat-search-expandable.open .chat-search-toggle-btn {
  color: #0d6efd;
}

.chat-header-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.8rem;
  color: #1e293b;
  width: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.chat-search-expandable.open .chat-header-search-input {
  opacity: 1;
  pointer-events: auto;
}

.chat-header-search-input::placeholder {
  color: #94a3b8;
  font-size: 0.78rem;
}

.chat-search-close-btn {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: none;
  background: transparent;
  color: #94a3b8;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
  border-radius: 4px;
}

.chat-search-expandable.open .chat-search-close-btn {
  display: flex;
}

.chat-search-close-btn:hover {
  color: #ef4444;
}

.chat-bubble-row.search-match .chat-bubble {
  box-shadow: 0 0 0 2px #93c5fd;
}
.chat-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem;
  background: #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.chat-bubble-row {
  display: flex;
  gap: 0.65rem;
  max-width: 82%;
  align-items: flex-end;
}
.chat-bubble-row.is-me {
  margin-left: auto;
  flex-direction: row-reverse;
}
.chat-bubble {
  background: #ffffff;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  border: 1px solid #e2e8f0;
}
.chat-bubble-row.is-me .chat-bubble {
  background: #e7f5ed;
  border-color: #cde9da;
}
.chat-bubble-row.is-me .chat-bubble-name { color: var(--mc-emerald-dark); }
.chat-bubble-row.is-me .chat-bubble-role,
.chat-bubble-row.is-me .chat-bubble-time,
.chat-bubble-row.is-me .chat-edited-label { color: #4d7c63; }
.chat-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.chat-bubble-name {
  font-size: 0.78rem;
  font-weight: 700;
}
.chat-bubble-name.name-blue { color: #0d6efd; }
.chat-bubble-name.name-pink { color: #ec4899; }
.chat-bubble-name.name-green { color: #157347; }
.chat-bubble-name.name-cyan { color: var(--mc-primary); }
.chat-bubble-name.name-amber { color: #d97706; }
.chat-bubble-role {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 400;
}
.chat-bubble-text {
  font-size: 0.78rem;
  color: #334155;
  line-height: 1.45;
}
.chat-bubble-time {
  font-size: 0.68rem;
  color: #94a3b8;
  text-align: right;
  margin-top: 0.25rem;
}
.chat-bubble-actions {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.chat-bubble:hover .chat-bubble-actions,
.chat-bubble-row:hover .chat-bubble-actions {
  opacity: 1;
}
@media (hover: none) {
  .chat-bubble-actions {
    opacity: 0.8;
  }
}
.btn-edit-msg {
  background: transparent;
  border: none;
  padding: 2px 4px;
  line-height: 1;
  color: #94a3b8;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.btn-edit-msg:hover {
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.1);
}
.chat-bubble .btn-edit-msg {
  font-size: 0.8rem;
  padding: 1px 3px;
  transition: color 0.15s ease, background-color 0.15s ease, opacity 0.25s ease;
}
.chat-bubble-row.is-me .btn-edit-msg { color: #4d7c63; }
.chat-bubble-row.is-me .btn-edit-msg:hover {
  color: var(--mc-emerald-dark);
  background: rgba(25, 135, 84, 0.12);
}
.btn-edit-msg.is-expired { opacity: 0; pointer-events: none; }
.chat-edited-label {
  font-size: 0.65rem;
  color: #94a3b8;
  font-style: italic;
  user-select: none;
}
.chat-edit-box {
  margin-top: 0.35rem;
  margin-bottom: 0.25rem;
  min-width: 220px;
}
.chat-edit-box textarea {
  font-size: 0.78rem;
  line-height: 1.4;
  resize: vertical;
  border-color: #93c5fd;
  border-radius: 8px;
  padding: 6px 8px;
  background: #ffffff;
}
.chat-edit-box textarea:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}
.chat-compose-wrap {
  padding: 0.85rem 1.25rem;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}
.chat-compose-pill {
  border-radius: 9999px;
  background: #f8fafc;
  padding: 4px 6px 4px 16px;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  transition: all 0.15s ease;
}
.chat-compose-pill:focus-within {
  background: #ffffff;
  border-color: var(--mc-primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.chat-compose-input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 0.82rem;
  color: #1e293b;
}
.chat-compose-btn {
  background: transparent;
  border: none;
  color: #64748b;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.chat-compose-btn .solar-icon {
  font-size: 1.28rem;
}
.chat-compose-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}
.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0d6efd;
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.chat-send-btn .solar-icon {
  font-size: 1.22rem;
}
.chat-send-btn:hover {
  background: #0b5ed7;
  transform: scale(1.05);
}

/* Chat: destaque breve quando a outra pessoa edita uma mensagem */
.chat-bubble.is-just-edited { animation: chatBubbleEdited 1.6s ease-out; }
@keyframes chatBubbleEdited {
  0% { box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.35); }
  100% { box-shadow: 0 0 0 3px rgba(25, 135, 84, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-bubble.is-just-edited { animation: none; }
}

/* Chat: responder mensagem */
.btn-reply-msg {
  border: none;
  background: transparent;
  color: #94a3b8;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-reply-msg svg { width: 16px; height: 16px; }
.chat-bubble:hover .btn-reply-msg,
.btn-reply-msg:focus-visible { opacity: 1; }
.btn-reply-msg:hover { background: rgba(15, 23, 42, 0.07); color: #0f172a; }
@media (hover: none) {
  .btn-reply-msg { opacity: 0.8; }
}
.chat-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--mc-primary);
  border-radius: 6px;
  background: #f1f5f9;
  text-decoration: none;
  min-width: 0;
  max-width: 100%;
}
a.chat-quote:hover { background: #e2e8f0; }
.chat-quote.is-mine { border-left-color: var(--mc-emerald); }
.chat-bubble-row.is-me .chat-quote { background: rgba(255, 255, 255, 0.6); }
.chat-bubble-row.is-me a.chat-quote:hover { background: rgba(255, 255, 255, 0.85); }
.chat-quote-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mc-primary);
}
.chat-quote.is-mine .chat-quote-name { color: var(--mc-emerald-dark); }
.chat-quote-text,
.chat-reply-text {
  font-size: 0.75rem;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-quote.is-missing { border-left-color: #cbd5e1; }
.chat-quote.is-missing .chat-quote-text { font-style: italic; color: #94a3b8; }
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 6px 6px 12px;
  border-left: 3px solid var(--mc-emerald);
  border-radius: 8px;
  background: #f1f5f9;
}
.chat-reply-quote {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.chat-reply-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mc-emerald-dark);
}
.chat-reply-cancel {
  border: none;
  background: transparent;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.chat-reply-cancel:hover { background: #e2e8f0; color: #0f172a; }

/* Chat: indicador "digitando..." no topo da conversa */
.chat-typing-label {
  color: var(--mc-emerald) !important;
  font-weight: 600;
}
.chat-typing-dots span {
  animation: chatTypingDot 1.2s infinite;
  opacity: 0.2;
}
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatTypingDot {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing-dots span { animation: none; opacity: 1; }
}

/* Chat: anexos nas bolhas (imagem e arquivo) */
.chat-attach-image {
  display: block;
  margin: 2px 0 4px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.04);
  max-width: 280px;
  position: relative;
}
.chat-attach-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}
.chat-attach-file {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  margin: 2px 0 4px;
}
/* Na bolha verde (minhas mensagens) o cartão fica claro para contrastar com o verde */
.chat-bubble-row.is-me .chat-attach-file {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.08);
}
.chat-attach-file-ext {
  width: 38px;
  height: 44px;
  border-radius: 6px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: #64748b;
}
.chat-attach-file-ext[data-ext="pdf"] { background: #dc2626; }
.chat-attach-file-ext[data-ext="doc"], .chat-attach-file-ext[data-ext="docx"] { background: #2563eb; }
.chat-attach-file-ext[data-ext="xls"], .chat-attach-file-ext[data-ext="xlsx"], .chat-attach-file-ext[data-ext="csv"] { background: #16a34a; }
.chat-attach-file-ext[data-ext="ppt"], .chat-attach-file-ext[data-ext="pptx"] { background: #ea580c; }
.chat-attach-file-ext[data-ext="zip"] { background: #7c3aed; }
.chat-attach-file-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.chat-attach-file-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
a.chat-attach-file-name:hover { text-decoration: underline; }
.chat-attach-file-size {
  font-size: 0.7rem;
  color: #64748b;
}
.chat-attach-file-download {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  flex-shrink: 0;
  font-size: 1.1rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-attach-file-download:hover { background: rgba(15, 23, 42, 0.08); color: #0f172a; }
.chat-bubble-caption { margin-top: 4px; }

/* Chat: envios em andamento, em faixa acima da barra de digitação */
.chat-upload-tray {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 1.25rem;
  background: #ffffff;
}
.chat-upload-tray:not(:empty) {
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.chat-upload-tray:not(:empty) + .chat-compose-wrap { border-top: none; }
.chat-upload-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chat-upload-item.is-leaving { opacity: 0; transform: translateY(4px); }
.chat-upload-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
span.chat-upload-thumb { height: 36px; padding-bottom: 4px; font-size: 0.55rem; }
.chat-upload-body { flex: 1; min-width: 0; }
.chat-upload-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
.chat-upload-name {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-upload-status {
  font-size: 0.72rem;
  color: #4d7c63;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.chat-upload-progress {
  height: 4px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.chat-upload-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mc-emerald);
  transition: width 0.2s ease;
}
.chat-upload-item.is-failed { background: var(--mc-red-soft); border-color: #fecaca; }
.chat-upload-item.is-failed .chat-upload-progress span { background: var(--mc-red); }
.chat-upload-item.is-failed .chat-upload-status { color: #b91c1c; white-space: normal; flex-shrink: 1; }
.chat-upload-action {
  border: none;
  background: none;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .chat-upload-item { transition: none; }
}

/* Chat: modais de anexo (editor de imagem e prévia de arquivo) */
.img-edit-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}
.img-edit-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.img-edit-tool svg { width: 18px; height: 18px; }
.img-edit-tool .solar-icon { font-size: 1.05rem; }
.img-edit-tool:hover:not(:disabled) { background: #f1f5f9; }
.img-edit-tool.is-active {
  background: var(--mc-emerald-tint);
  border-color: var(--mc-emerald-light);
  color: var(--mc-emerald-dark);
}
.img-edit-tool:disabled { opacity: 0.4; cursor: default; }
.img-edit-colors {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid #e2e8f0;
}
.img-edit-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: var(--swatch);
  box-shadow: 0 0 0 1px #cbd5e1;
  cursor: pointer;
  padding: 0;
}
.img-edit-color.is-active { box-shadow: 0 0 0 2px var(--mc-emerald-dark); }
.img-edit-cropbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--mc-emerald-tint);
  border-bottom: 1px solid var(--mc-emerald-light);
  font-size: 0.78rem;
  color: #1f5a3f;
}
.img-edit-cropbar span { margin-right: auto; }
.img-edit-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #0f172a;
  min-height: 260px;
}
.img-edit-canvas-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  overflow: hidden;
}
.img-edit-canvas-wrap canvas {
  display: block;
  max-width: 100%;
  max-height: 55vh;
  touch-action: none;
}
.img-edit-canvas-wrap[data-mode="crop"] canvas { cursor: crosshair; }
.img-edit-canvas-wrap[data-mode="draw"] canvas { cursor: crosshair; }
.img-edit-crop-box {
  position: absolute;
  border: 2px dashed #ffffff;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
  pointer-events: none;
}
.chat-attach-error {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--mc-red-soft);
  color: #b91c1c;
  font-size: 0.8rem;
}
.chat-attach-footer {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}
.chat-attach-footer > * { margin: 0; }
.chat-attach-caption {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  border-radius: 9999px;
  padding: 8px 16px;
}
.chat-attach-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}
.file-preview-body { padding: 16px; }
.file-preview-frame {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  margin-bottom: 12px;
}
.file-preview-frame iframe { display: block; width: 100%; height: 360px; border: 0; }
.file-preview-frame img { display: block; max-width: 100%; max-height: 360px; margin: 0 auto; }
.file-preview-card { max-width: none; min-width: 0; margin: 0; }

/* Chat: visualizador de PDF */
.pdf-viewer-body { background: #e2e8f0; }
.pdf-viewer-body iframe { display: block; width: 100%; height: 78vh; border: 0; }
@media (max-width: 575.98px) {
  .pdf-viewer-body iframe { height: 70vh; }
}

/* Chat: visualizador de imagem (mesma estrutura do visualizador de PDF) */
.image-viewer-body {
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  max-height: 78vh;
  padding: 16px;
}
.image-viewer-body img {
  display: block;
  max-width: 100%;
  max-height: calc(78vh - 32px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

@media (max-width: 575.98px) {
  .img-edit-tool span:not(.solar-icon) { display: none; }
  .chat-attach-image { max-width: 220px; }
  .chat-attach-file { min-width: 0; }
}

/* Mensagens de voz: player (bolhas e prévia) */
.voice-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 2px 0;
}
.voice-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--mc-emerald);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.voice-play-btn:hover { background: var(--mc-emerald-dark); }
.voice-play-btn:active { transform: scale(0.94); }
.voice-play-btn svg { width: 16px; height: 16px; }
.voice-play-btn .icon-pause,
.voice-player.is-playing .voice-play-btn .icon-play { display: none; }
.voice-player.is-playing .voice-play-btn .icon-pause { display: block; }
.voice-wave {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.voice-wave span {
  flex: 1;
  max-width: 3px;
  min-width: 2px;
  border-radius: 2px;
  background: #9fbfae;
  transition: background 0.1s linear;
}
.voice-wave span.is-played { background: var(--mc-emerald-dark); }
.chat-bubble-row:not(.is-me) .voice-wave span { background: #cbd5e1; }
.chat-bubble-row:not(.is-me) .voice-wave span.is-played { background: var(--mc-emerald); }
.voice-time {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  min-width: 32px;
  text-align: right;
}
.voice-speed-btn {
  min-width: 36px;
  height: 22px;
  padding: 0 6px;
  border: none;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.voice-speed-btn:hover { background: rgba(15, 23, 42, 0.14); }
.voice-speed-btn.is-active {
  background: var(--mc-emerald);
  color: #ffffff;
}
.voice-player-lg { min-width: 0; width: 100%; }
.voice-player-lg .voice-play-btn { width: 42px; height: 42px; }
.voice-player-lg .voice-wave { height: 40px; }

/* Mensagens de voz: modal de gravação */
.voice-rec-body {
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.voice-rec-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.voice-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mc-red);
  animation: voiceRecPulse 1.2s ease-in-out infinite;
}
.voice-rec-timer {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.voice-rec-canvas {
  width: 100%;
  height: 64px;
  display: block;
  border-radius: 10px;
  background: var(--mc-emerald-tint);
}
.voice-rec-preview {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mc-emerald-tint);
  border: 1px solid var(--mc-emerald-light);
}
.voice-rec-error {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--mc-red-soft);
  color: #b91c1c;
  font-size: 0.82rem;
  text-align: center;
}
.voice-rec-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}
.voice-rec-footer > * { margin: 0; }
.voice-rec-footer .ms-auto { margin-left: auto !important; }
.voice-rec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 14px;
}
@keyframes voiceRecPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-rec-dot { animation: none; }
}
@media (max-width: 575.98px) {
  .voice-player { min-width: 180px; }
}

.group-info {
  width: 290px;
  flex: 0 0 290px;
  background: #ffffff;
  padding: 1.15rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.group-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.group-info-title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0;
}
.group-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  object-fit: cover;
  display: block;
}
.group-info-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
  margin-top: 1.15rem;
  margin-bottom: 0.5rem;
}
.group-info-section-title .solar-icon {
  font-size: 0.95rem;
  color: #1e293b;
  margin-right: 4px;
}
.group-info-desc {
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}
.group-member-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}
.group-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.group-member-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}
.group-member-role {
  font-size: 0.68rem;
  color: #94a3b8;
}
.attachment-tabs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.65rem;
}
.attachment-tab-pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
}
.attachment-tab-pill.active {
  background: #cfe2ff;
  color: #0d6efd;
}
.attachment-tab-pill.inactive {
  color: #64748b;
  background: transparent;
}
.attachment-img-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  object-fit: cover;
}

/* ==========================================================================
   Notice / library / misc grids
   ========================================================================== */
.book-cover { width: 44px; height: 60px; border-radius: 6px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.7rem; font-weight: 700; text-align: center; padding: 4px; }

.chart-pin {
  position: absolute;
  transform: translate(-50%, -115%);
  background: var(--mc-surface);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(30, 34, 63, 0.14);
  padding: 0.5rem 0.8rem;
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.chart-pin::after {
  content: "";
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mc-surface); border: 3px solid var(--mc-primary);
}
.chart-pin .big { font-weight: 800; font-size: 0.9rem; }
.chart-pin .sub { color: var(--mc-text-muted); font-size: 0.7rem; }

.progress-donut { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.progress-donut canvas { width: 100% !important; height: 100% !important; }
.progress-donut .donut-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.progress-donut .donut-value .big { font-size: 1.9rem; font-weight: 800; }

.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 0.4rem; }

/* Recent Activity — a dashed vertical guide threads through the avatars,
   like a timeline. */
.timeline { display: flex; flex-direction: column; gap: 1rem; }
.timeline-item { position: relative; }
.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: -1rem;
  border-left: 1px dashed var(--mc-border);
}

.task-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--mc-border); }
.task-item:last-child { border-bottom: none; }
.task-item .title { font-weight: 700; font-size: 0.875rem; }
.task-item .date { font-size: 0.78rem; color: var(--mc-text-muted); }
.task-item.is-done .title { text-decoration: line-through; color: var(--mc-text-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--mc-shadow);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1025;
  }
  .sidebar-backdrop.is-open { display: block; }
  .mobile-toggle { display: inline-flex !important; }
  .topbar { padding: 1.25rem 1.25rem .75rem; }
  .page-content { padding: 0 1.25rem 1.5rem; }
  .app-footer { padding: 1.25rem; }
  .topbar-user .name-block { display: none; }
  .chat-shell { flex-wrap: wrap; }
  .group-info { display: none; }
}

@media (min-width: 992px) {
  .mobile-toggle { display: none !important; }
}

@media (max-width: 767.98px) {
  .chat-list { width: 100%; }
  .chat-main { display: none; }
  .chat-shell.thread-open .chat-main { display: flex; }
  .chat-shell.thread-open .chat-list { display: none; }
}

/* ==========================================================================
   Fidelity Additions — 02_preview.png Exact Reconstruction
   ========================================================================== */

/* Left Sidebar brand & nav */
.sidebar {
  width: var(--mc-sidebar-w) !important;
  flex: 0 0 var(--mc-sidebar-w) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  padding: 1.5rem 1.15rem 1.25rem !important;
  border-right: none !important;
  background: #ffffff !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important; /* Firefox */
  scrollbar-color: transparent transparent !important;
  -ms-overflow-style: auto !important;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), flex 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding 0.22s cubic-bezier(0.4, 0, 0.2, 1), scrollbar-color 0.2s ease !important;
}

/* Collapsed Sidebar overrides for fidelity layout */
.sidebar-collapsed .sidebar {
  width: var(--mc-sidebar-collapsed-w) !important;
  flex: 0 0 var(--mc-sidebar-collapsed-w) !important;
  padding: 1.5rem 0.5rem 1.25rem !important;
  overflow: visible !important;
}
.sidebar-collapsed .sidebar-header {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}
.sidebar-collapsed .sidebar-brand {
  padding: 0 !important;
  justify-content: center !important;
}
.sidebar-collapsed .sidebar-link {
  justify-content: center !important;
  padding: 0.6rem 0 !important;
}
.sidebar:hover {
  scrollbar-color: #cbd5e1 transparent !important;
}
.sidebar::-webkit-scrollbar {
  width: 4px !important;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}
.sidebar::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 999px !important;
  transition: background 0.2s ease !important;
}
.sidebar:hover::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}
.sidebar-brand-img,
.sidebar-brand-icon {
  height: 24px !important;
  width: 24px !important;
  max-height: 24px !important;
  max-width: 24px !important;
  object-fit: contain;
  display: block;
}
.sidebar-label {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  margin: 1.35rem 0 0.65rem !important;
  padding: 0 0.8rem !important;
}
.sidebar-nav .nav-item + .nav-item {
  margin-top: 0.15rem !important;
}
.sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.52rem 0.8rem !important;
  border-radius: 10px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  transition: all 0.15s ease !important;
}
.sidebar-link:hover {
  background: #f8fafc !important;
  color: #1e293b !important;
}
.sidebar-link.active-pill {
  background: #cfe2ff !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}
.sidebar-link .solar-icon {
  font-size: 1.05rem !important;
  color: #8e9297 !important;
}
.sidebar-link.active-pill .solar-icon {
  color: #0d6efd !important;
}

/* Topbar exact controls with glassmorphism on scroll */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
  background: rgba(247, 248, 250, 0.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 20px 25px !important;
  height: auto !important;
  min-height: 78px !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: box-shadow 0.25s ease, background 0.25s ease !important;
}
.topbar.is-scrolled {
  background: rgba(247, 248, 250, 0.88) !important;
  box-shadow: 0 8px 36px -4px rgba(15, 23, 42, 0.08), 0 2px 10px -2px rgba(15, 23, 42, 0.04) !important;
}
.topbar-search-wrap {
  position: relative;
  width: 240px !important;
  flex: 0 0 240px !important;
}
.topbar-search-input {
  border-radius: 999px !important;
  border: 1.2px solid #cbd5e1 !important;
  background: rgba(255, 255, 255, 0.7) !important;
  padding: 0.4rem 1rem 0.4rem 2.3rem !important;
  font-size: 0.84rem !important;
  color: #1e293b !important;
  height: 38px !important;
  box-shadow: none !important;
}
.topbar-search-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}
.topbar-search-wrap .solar-icon {
  left: 0.85rem !important;
  color: #94a3b8 !important;
  font-size: 0.95rem !important;
}
.topbar-circle-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1e293b !important;
  transition: background 0.15s ease !important;
  position: relative !important;
}
.topbar-circle-btn:hover,
.topbar-circle-btn:focus {
  background: #f1f5f9 !important;
  box-shadow: none !important;
}
.topbar-user {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  cursor: pointer !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}
.topbar-user:hover,
.topbar-user:focus,
.topbar-user:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.topbar-user-menu {
  min-width: 250px !important;
  padding: 0.5rem !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
}

.topbar-user-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  margin-bottom: 0.35rem;
}
.topbar-user-header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.topbar-user-header-info {
  line-height: 1.25;
  min-width: 0;
  flex: 1;
}
.topbar-user-header-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.topbar-user-header-role {
  font-size: 0.65rem;
  font-weight: 700;
  color: #0d6efd;
  background: #cfe2ff;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.topbar-user-header-email {
  font-size: 0.72rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.topbar-user-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  padding: 0.45rem 0.6rem !important;
  transition: all 0.15s ease !important;
}
.topbar-user-menu .dropdown-item .menu-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.topbar-user-menu .dropdown-item:hover {
  background: #f8fafc !important;
  color: #0d6efd !important;
}
.topbar-user-menu .dropdown-item:hover .menu-icon-box {
  background: #cfe2ff;
  color: #0d6efd;
}

.topbar-user-menu .dropdown-item.text-danger {
  color: #ef4444 !important;
}
.topbar-user-menu .dropdown-item.text-danger .menu-icon-box {
  background: #fef2f2;
  color: #ef4444;
}
.topbar-user-menu .dropdown-item.text-danger:hover {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}
.topbar-user-menu .dropdown-item.text-danger:hover .menu-icon-box {
  background: #fee2e2;
  color: #dc2626;
}

.topbar-user-menu .dropdown-divider {
  margin: 0.3rem 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  opacity: 1 !important;
}
.topbar-avatar-wrap {
  position: relative;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
}
.topbar-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.topbar-avatar-wrap .online-indicator {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00ba88;
  border: 1.5px solid #ffffff;
}

/* Base Page Layout: Width 100%, conteúdo limitado por --mc-content-max, Gaps 22px */
.page-content {
  padding: 0 25px 12px !important;
  background: #f7f8fa !important;
  width: 100% !important;
  max-width: 100% !important;
}
.fidelity-container {
  width: 100%;
  max-width: var(--mc-content-max);
  margin: 0 auto;
  transition: max-width 0.22s ease;
}
/* Monitores largos: topbar acompanha o conteúdo centralizado (25px = padding da .page-content) */
.topbar {
  padding-left: max(25px, calc((100% - var(--mc-content-max)) / 2)) !important;
  padding-right: max(25px, calc((100% - var(--mc-content-max)) / 2)) !important;
}
/* Telas que aproveitam a largura total: pipeline, chat e agenda */
body:is([data-page="deals"], [data-page="messages"], [data-page="agenda"]) .fidelity-container {
  max-width: 100%;
}
body:is([data-page="deals"], [data-page="messages"], [data-page="agenda"]) .topbar {
  padding-left: 25px !important;
  padding-right: 25px !important;
}
.fidelity-top-grid {
  display: flex;
  gap: 22px;
  width: 100%;
}
.fidelity-main-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.fidelity-right-col {
  width: 382px;
  flex: 0 0 382px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Row 1: 4 Stat Cards */
.fidelity-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21.3px;
  height: 128px;
  width: 100%;
}
.fidelity-stat-card {
  border-radius: 18px;
  padding: 16px 18px !important;
  height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  box-shadow: none;
}
.fidelity-stat-card.bg-purple,
.fidelity-stat-card.bg-blue {
  background: var(--mc-primary-light);
}
.fidelity-stat-card.bg-amber,
.fidelity-stat-card.bg-emerald {
  background: var(--mc-emerald-light);
}
.fidelity-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fidelity-stat-badge {
  background: #ffffff;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.fidelity-stat-badge.trend-up {
  color: #198754;
}
.fidelity-stat-badge.trend-down {
  color: #e02847;
}
.fidelity-stat-kebab {
  color: #ffffff;
  cursor: pointer;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
}
.fidelity-stat-val {
  font-size: 1.62rem !important;
  font-weight: 700 !important;
  color: #1e293b;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.fidelity-stat-lbl {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #334155;
  margin-top: 0.15rem;
}

/* Row 2: Students (281px) + Attendance (fluid) */
.fidelity-row-2 {
  display: flex;
  gap: 22px;
  height: 345px;
  width: 100%;
}
.fidelity-card-students {
  width: 280.7px;
  flex: 0 0 280.7px;
  height: 345px;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 20px 14px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fidelity-card-attendance {
  flex: 1 1 0;
  min-width: 0;
  height: 345px;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 20px 14px !important;
  display: flex;
  flex-direction: column;
}

/* Card Common Elements */
.mc-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 28px;
  height: auto !important;
  margin-bottom: 0.65rem !important;
  padding: 0 !important;
}
.mc-card-title,
.mc-card-header h2,
.mc-card-header h3,
.page-card-toolbar h2,
.page-card-toolbar h3,
.fidelity-card-calendar h3,
.fidelity-card-messages h3,
.fidelity-card-activity h3,
.fidelity-card-notices h3,
.fidelity-card-recent h3,
.fidelity-card-students h3,
.fidelity-card-attendance h3,
.fidelity-card-earnings h3 {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--mc-text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.kebab-btn {
  background: transparent;
  border: none;
  color: #a0aec0;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.card-view-all {
  font-size: 0.76rem;
  color: #94a3b8;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.15s ease;
}
.card-view-all:hover {
  color: #1e293b;
}

/* Students Donut Gauge */
.students-gauge-container {
  position: relative;
  width: 158px;
  height: 158px;
  margin: 0.25rem auto 0.45rem auto !important;
}
.students-gauge-container svg {
  width: 100%;
  height: 100%;
}
.students-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.students-gauge-center .gauge-center-val {
  font-size: 1.7rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -0.5px;
}
.students-gauge-center .gauge-center-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}
.students-stat-col {
  text-align: center;
}
.students-stat-col .val {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.students-stat-col .lbl {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 500;
}
.dot-cyan,
.dot-blue {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0d6efd;
  display: inline-block;
}
.dot-yellow,
.dot-emerald {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #198754;
  display: inline-block;
}
.dot-purple,
.dot-dark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0F172A;
  display: inline-block;
}

/* Attendance Card & Pipeline Filter Selects */
.filter-select-pill {
  background-color: #f4f7fb;
  border: none;
  border-radius: 8px;
  height: 32px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #596780;
  padding: 0 2.1rem 0 0.85rem !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23596780' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.15s ease;
  outline: none;
  line-height: 32px;
}
.filter-select-pill:hover {
  background-color: #ebf1f7;
  color: #1e293b;
}
.chart-wrap-relative {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
}
.attendance-pinned-tooltip {
  position: absolute;
  top: 59%;
  left: 52.8%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 12px;
  padding: 0.5rem 0.85rem 0.45rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  text-align: center;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.chart-wrap-relative:hover .attendance-pinned-tooltip {
  opacity: 1;
  visibility: visible;
}
.attendance-pinned-tooltip .val {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e293b;
  line-height: 1.1;
}
.attendance-pinned-tooltip .sub {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 0.15rem;
}
.attendance-pinned-tooltip::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ffffff;
}

/* Row 3: Earnings (fluid) + Olympic & Competition (180.7px) */
.fidelity-row-3 {
  display: flex;
  gap: 22px;
  height: 356px;
  width: 100%;
}
.fidelity-card-earnings {
  flex: 1 1 0;
  min-width: 0;
  height: 356px;
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px !important;
  display: flex;
  flex-direction: column;
}
.fidelity-stack-metrics {
  width: 180.7px;
  flex: 0 0 180.7px;
  height: 356px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.metric-mini-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px !important;
  height: 167px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.metric-mini-card .metric-icon,
.metric-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.65rem;
  flex: 0 0 40px;
}
.metric-icon-circle .solar-icon {
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.metric-icon-circle .solar-icon svg {
  width: 22px;
  height: 22px;
}
.metric-icon-circle.circle-amber,
.metric-icon-circle.circle-emerald {
  background: #d1e7dd;
  color: #198754;
}
.metric-icon-circle.circle-blue,
.metric-icon-circle.circle-purple {
  background: #cfe2ff;
  color: #0d6efd;
}
.metric-icon-circle.circle-red {
  background: #fee2e2;
  color: #dc2626;
}
.metric-mini-card .val {
  font-size: 1.55rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.metric-mini-card .lbl {
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 0.15rem;
}
.stat-badge-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 0.65rem;
}
.stat-badge-trend.trend-green {
  color: #00997e;
}
.stat-badge-trend.trend-green .trend-icon-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #00997e;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stat-badge-trend.trend-red {
  color: #e02847;
}
.stat-badge-trend.trend-red .trend-icon-box {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #e02847;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Earnings Highlight & Tooltip */
.earnings-sep-highlight {
  position: absolute;
  top: 8px;
  bottom: 30px;
  left: 64.9%;
  width: 12.8%;
  background: #f1effe;
  border-radius: 8px 8px 0 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.earnings-pinned-tooltip {
  position: absolute;
  top: 14%;
  left: 53.6%;
  background: #ffffff;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  z-index: 5;
  pointer-events: none;
  min-width: 120px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.chart-wrap-relative:hover .earnings-sep-highlight,
.chart-wrap-relative:hover .earnings-pinned-tooltip {
  opacity: 1;
  visibility: visible;
}
.earnings-pinned-tooltip .date {
  font-size: 0.70rem;
  color: #94a3b8;
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid #f1f5f9;
}
.earnings-pinned-tooltip .row-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #1e293b;
  margin-top: 0.15rem;
}

/* Right Column: Calendar & Agenda (382px, responsive height with clean gap) */
.fidelity-card-calendar {
  width: 382px;
  min-height: 388px;
  height: auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cal-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-nav-btn:hover {
  border-color: #cbd5e1;
  color: #475569;
}
.cal-day-cell {
  text-align: center;
  padding: 0.35rem 0.15rem 0.65rem;
  border-radius: 10px;
}
.cal-day-cell .day-name {
  font-size: 0.70rem;
  color: #94a3b8;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.cal-day-cell .day-num {
  font-size: 0.90rem;
  font-weight: 600;
  color: #1e293b;
}
.cal-day-cell.is-selected {
  background: var(--mc-primary-tint);
}
.cal-day-cell.is-selected .day-name {
  color: var(--mc-primary);
  font-weight: 600;
}
.cal-day-cell.is-selected .day-num {
  color: #1e293b;
  font-weight: 700;
}
.mini-cal-strip {
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}
button.cal-day-cell {
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  position: relative;
  padding: 0.35rem 0.15rem 0.65rem;
  border-radius: 10px;
  transition: background 0.15s ease;
}
button.cal-day-cell:hover:not(.is-selected) { background: #f1f5f9; }
.cal-day-cell.is-today:not(.is-selected) .day-name { color: var(--mc-primary); font-weight: 600; }
.cal-day-cell.has-events::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--mc-emerald);
}
.agenda-colored-card.is-done { opacity: 0.55; }
.mini-cal-more {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--mc-primary);
  text-decoration: none;
  text-align: center;
}
.agenda-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.15rem;
}
.agenda-colored-card {
  border-radius: 12px;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.agenda-colored-card.card-purple,
.agenda-colored-card.card-blue {
  background: var(--mc-primary-tint);
}
.agenda-colored-card.card-purple .agenda-time-col,
.agenda-colored-card.card-blue .agenda-time-col {
  border-right: 1.5px solid var(--mc-primary-light) !important;
}
.agenda-colored-card.card-yellow,
.agenda-colored-card.card-emerald {
  background: var(--mc-emerald-tint);
}
.agenda-colored-card.card-yellow .agenda-time-col,
.agenda-colored-card.card-emerald .agenda-time-col {
  border-right: 1.5px solid var(--mc-emerald-light) !important;
}
.agenda-colored-card.card-cyan {
  background: var(--mc-primary-tint);
}
.agenda-colored-card.card-cyan .agenda-time-col {
  border-right: 1.5px solid var(--mc-primary-light) !important;
}
.agenda-time-col {
  font-size: 0.76rem;
  font-weight: 600;
  color: #1e293b;
  padding-right: 0.85rem;
  white-space: nowrap;
}
.agenda-info-col {
  flex: 1 1 auto;
  min-width: 0;
}
.agenda-info-col .sub {
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 0.1rem;
}
.agenda-info-col .title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.25;
}

/* Right Column: Messages (382px, height 463px) */
.fidelity-card-messages {
  width: 382px;
  height: 463px;
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px 18px !important;
  display: flex;
  flex-direction: column;
}
.message-list-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.75rem;
}
.message-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
a.message-entry:hover { background: #f1f5f9; }
.message-entry.is-unread .message-name { font-weight: 700; color: #0f172a; }
.message-entry.is-unread .message-snippet { color: #1e293b; font-weight: 500; }
.message-entry.is-unread .message-time { color: var(--mc-emerald); font-weight: 600; }
.message-you { color: #94a3b8; }
.message-unread-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--mc-emerald);
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.message-filter {
  display: inline-flex;
  gap: 4px;
  margin-top: 0.75rem;
  padding: 3px;
  border-radius: 9px;
  background: #f1f5f9;
  align-self: flex-start;
}
.message-filter-btn {
  border: none;
  background: transparent;
  padding: 4px 12px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.message-filter-btn.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.message-filter-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--mc-emerald);
  color: #ffffff;
  font-size: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.message-filter-empty {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
}
.message-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 38px;
}
.message-body {
  flex: 1 1 auto;
  min-width: 0;
}
.message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.message-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e293b;
}
.message-time {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 400;
}
.message-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.15rem;
  min-width: 0;
  width: 100%;
}
.message-snippet {
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  flex: 1 1 auto;
  min-width: 0;
}
.message-badge-count {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #c4bbfd;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 17px;
}

/* Row 4 Bottom Grid: Student Activity (281px) + Notice Board (fluid) + Recent Activity (281px) */
.fidelity-bottom-grid {
  display: flex;
  gap: 22px;
  width: 100%;
  max-width: 100%;
  margin-top: 22px;
  height: 414px;
}
.fidelity-card-activity {
  width: 280.7px;
  flex: 0 0 280.7px;
  height: 414px;
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px !important;
  position: relative;
  display: flex;
  flex-direction: column;
}
.fidelity-card-notices {
  flex: 1 1 0;
  min-width: 0;
  height: 414px;
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.fidelity-card-recent {
  width: 280.7px;
  flex: 0 0 280.7px;
  height: 414px;
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px !important;
  display: flex;
  flex-direction: column;
}

/* Student Activity Details with smooth functional scroll */
.activity-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.2rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.activity-card-wrap::-webkit-scrollbar {
  width: 4px;
}
.activity-card-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.activity-card-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.activity-card-wrap::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Notice Board Rows */
.notice-rows {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  margin-top: 0.1rem;
}
.notice-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.notice-thumb-img {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  flex: 0 0 38px;
}
.notice-info {
  width: 170px;
  flex: 0 0 170px;
}
.notice-info .title {
  font-size: 0.76rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.22;
  white-space: normal;
}
.notice-date-pill {
  background: #e0f7fe;
  color: var(--mc-primary);
  font-size: 0.70rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.notice-author {
  width: 125px;
  flex: 0 0 125px;
  font-size: 0.74rem;
  line-height: 1.22;
  color: #1e293b;
  font-weight: 500;
  white-space: normal;
}
.notice-author .role {
  color: #94a3b8;
  font-size: 0.66rem;
  display: block;
  font-weight: 400;
}
.notice-views {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #1e293b;
  font-size: 0.76rem;
  font-weight: 500;
  flex: 0 0 auto;
}

/* Recent Activity Timeline */
.recent-act-heading {
  font-size: 0.80rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.75rem;
}
.recent-activity-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.recent-activity-timeline::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 25px;
  left: 15.5px;
  width: 0;
  border-left: 1.5px dashed #e2e8f0;
  z-index: 1;
}
.recent-timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  z-index: 2;
}
.recent-act-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 32px;
  background: #ffffff;
  box-shadow: 0 0 0 2px #ffffff;
}
.recent-act-content {
  flex: 1 1 auto;
}
.recent-act-text {
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.3;
}
.recent-act-text strong {
  color: #1e293b;
  font-weight: 600;
}
.recent-act-time {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 0.15rem;
}

/* Footer Exact Proportions */
.app-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 0 0 !important;
  padding: 0.5rem 0 0.5rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: none !important;
  color: #94a3b8 !important;
  font-size: 0.82rem !important;
}
.app-footer a {
  color: #94a3b8 !important;
  text-decoration: none;
}
.app-footer a:hover {
  color: #64748b !important;
}

/* Action Button (Standard for "New Task", "New Teacher", "New User") */
.btn-cyan-action {
  height: 32px;
  padding: 0 0.85rem;
  border-radius: 8px;
  background: var(--mc-primary-tint);
  border: 1px solid var(--mc-primary-light);
  color: var(--mc-primary);
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}
.btn-cyan-action:hover {
  background: var(--mc-primary-light);
  color: var(--mc-primary-dark);
}
.btn-cyan-action .solar-icon {
  font-size: 1rem;
  color: inherit;
}
.btn-cyan-action.is-saved,
.btn-cyan-action.is-saved:hover {
  background: var(--mc-emerald-light);
  border-color: #a3cfbb;
  color: var(--mc-emerald-dark);
}
.btn-cyan-action.btn-cyan-icon-only {
  width: 32px;
  min-width: 32px;
  padding: 0;
  justify-content: center;
}
.btn-cyan-action.btn-cyan-icon-only .solar-icon {
  font-size: 1.15rem;
}

/* ==========================================================================
   Kanban / Pipeline Board
   ========================================================================== */
.kanban-board-wrapper {
  background: var(--mc-surface);
  border-radius: 24px;
  padding: 24px 24px 18px 24px;
  width: 100%;
  overflow: hidden;
}
.kanban-header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.view-switch {
  background: #f4f7fb;
  border-radius: 8px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  box-sizing: border-box;
}
.view-switch-btn {
  height: 26px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0 0.75rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}
.view-switch-btn.active {
  background: #ffffff;
  color: #1e293b;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.view-switch-btn:hover:not(.active) {
  color: #1e293b;
}

/* Horizontal Scroll Columns Container - Edge to edge flow */
.kanban-columns-scroll-wrap {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  margin: 0 -24px;
  padding: 4px 24px 0.85rem 24px;
  width: calc(100% + 48px);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.kanban-columns-scroll-wrap::-webkit-scrollbar {
  height: 6px;
}
.kanban-columns-scroll-wrap::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}
.kanban-columns-scroll-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
.kanban-columns-scroll-wrap::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.kanban-col {
  background: #f8fafc;
  border-radius: 16px;
  padding: 1rem;
  border: 1px solid #edf2f7;
  display: flex;
  flex-direction: column;
  width: 290px;
  min-width: 290px;
  flex: 0 0 290px;
}
.kanban-col.is-col-dragging {
  opacity: 0.45;
}
.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.95rem;
}
.kanban-col-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.kanban-col-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  line-height: 1.2;
}
.kanban-col-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: grab;
  font-size: 0.95rem;
  transition: color 0.15s ease;
  user-select: none;
}
.kanban-col-drag-handle:hover {
  color: #475569;
}
.kanban-col-drag-handle:active {
  cursor: grabbing;
}
.kanban-col-count.count-purple { background: #f4f3ff; color: #8b5cf6; }
.kanban-col-count.count-amber { background: #fef8e7; color: #d97706; }
.kanban-col-count.count-pink { background: #fdf2f8; color: #ec4899; }
.kanban-col-count.count-green { background: #d1e7dd; color: #157347; }

.kanban-col-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #cfe2ff;
  color: #0d6efd;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.95rem;
}
.kanban-col-add-btn:hover {
  background: #b6d4fe;
  color: #0d6efd;
}

.kanban-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 100px;
  transition: background-color 0.15s ease, outline-color 0.15s ease;
}
.kanban-cards-list.drop-target-active {
  background-color: rgba(239, 246, 255, 0.7);
  border-radius: 10px;
  outline: 2px dashed #93c5fd;
  outline-offset: 2px;
}

/* Clean Pipeline Card */
.kanban-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  cursor: grab;
  user-select: none;
}
.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}
.kanban-card:active {
  cursor: grabbing;
}
.kanban-card.is-card-dragging {
  opacity: 0.35;
  transform: scale(0.97) rotate(1deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
}


/* Toast global do sistema (includes/footer.php → showToast) */
.mc-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: min(420px, calc(100vw - 32px));
  background: #0f172a;
  color: #ffffff;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.mc-toast.show { opacity: 1; transform: translateY(0); }
.mc-toast-icon { font-size: 1.1rem; flex: 0 0 auto; }
.mc-toast-success .mc-toast-icon { color: #34d399; }
.mc-toast-danger .mc-toast-icon { color: #f87171; }
.mc-toast-warning .mc-toast-icon { color: #fbbf24; }
.mc-toast-info .mc-toast-icon { color: #60a5fa; }
@media (max-width: 575px) {
  .mc-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
.kanban-card-top {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.kanban-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.16rem 0.45rem;
  border-radius: 4px;
  line-height: 1.2;
}
.kanban-tag::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 10px;
  border-radius: 1px;
  flex-shrink: 0;
}
.kanban-tag.tag-purple { background: #f4f3ff; color: #1e293b; }
.kanban-tag.tag-purple::before { background: #8b5cf6; }
.kanban-tag.tag-pink { background: #fdf2f8; color: #1e293b; }
.kanban-tag.tag-pink::before { background: #f43f5e; }
.kanban-tag.tag-cyan { background: var(--mc-primary-tint); color: #1e293b; }
.kanban-tag.tag-cyan::before { background: #06b6d4; }
.kanban-tag.tag-amber { background: #fef8e7; color: #1e293b; }
.kanban-tag.tag-amber::before { background: #f59e0b; }
.kanban-tag.tag-green { background: #d1e7dd; color: #1e293b; }
.kanban-tag.tag-green::before { background: #198754; }

/* Deal Status Pill for List View */
.deal-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
}
.deal-status-pill::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.deal-status-pill.status-todo {
  background: #f4f3ff;
  color: #7c3aed;
}
.deal-status-pill.status-todo::before {
  background: #8b5cf6;
}
.deal-status-pill.status-progress {
  background: #fef8e7;
  color: #b45309;
}
.deal-status-pill.status-progress::before {
  background: #f59e0b;
}
.deal-status-pill.status-review {
  background: #fdf2f8;
  color: #db2777;
}
.deal-status-pill.status-review::before {
  background: #ec4899;
}
.deal-status-pill.status-done {
  background: #d1e7dd;
  color: #157347;
}
.deal-status-pill.status-done::before {
  background: #198754;
}

.deal-list-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.deal-list-row:hover td {
  background-color: #f8fafc !important;
}

.kanban-card-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.8rem 0;
  line-height: 1.35;
}
.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.55rem;
  border-top: 1px solid #f1f5f9;
}
.kanban-card-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.01em;
}
.kanban-author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #f1f5f9;
}

.kanban-add-card-btn {
  width: 100%;
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  background: transparent;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.kanban-add-card-btn:hover {
  background: #ffffff;
  border-color: var(--mc-primary);
  color: var(--mc-primary);
}

/* ==========================================================================
   Design System - Unified Empty State Dashed Card
   ========================================================================== */
.empty-state-dashed {
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  padding: 1.6rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.empty-state-dashed:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}
.empty-state-dashed .empty-icon-symbol {
  font-size: 2rem;
  color: #64748b;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.empty-state-dashed .empty-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.2rem;
}
.empty-state-dashed .empty-action-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0d6efd;
  text-decoration: none;
  transition: color 0.15s ease;
}
.empty-state-dashed .empty-action-link:hover {
  color: #0b5ed7;
  text-decoration: underline;
}

/* ==========================================================================
   Mercia Settings & User Profile / System Config Styles
   ========================================================================== */
.settings-shell {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (max-width: 991.98px) {
  .settings-shell {
    flex-direction: column;
  }
}

/* Left Sidebar Navigation Card */
.settings-nav-card {
  width: 290px;
  flex: 0 0 290px;
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 1.25rem;
}
@media (max-width: 991.98px) {
  .settings-nav-card {
    width: 100%;
    flex: 0 0 100%;
  }
}

.settings-user-preview {
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}
.settings-user-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--mc-primary-soft);
  margin-bottom: 0.75rem;
}
.settings-user-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}
.settings-user-role {
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 6px;
}
.settings-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
  background: #d1e7dd;
  color: #157347;
}

.settings-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.settings-nav-btn:hover {
  background: #f8fafc;
  color: #1e293b;
}
.settings-nav-btn.active {
  background: #cfe2ff;
  color: #0d6efd;
  font-weight: 700;
}
.settings-nav-btn .solar-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}
.settings-nav-btn .badge-pill {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 100px;
  background: #d1e7dd;
  color: #198754;
}

/* Main Content Surface Card */
.settings-content-card {
  flex: 1 1 auto;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 1.5rem;
}

.settings-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #f1f5f9;
}
.settings-pane-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 4px 0 !important;
}
.settings-pane-sub {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
}

/* Avatar Photo Upload Block */
.settings-avatar-upload {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #edf2f7;
  margin-bottom: 1.5rem;
}
.settings-avatar-big-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}
.settings-avatar-big {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.settings-avatar-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mc-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  border: 2px solid #ffffff;
  cursor: pointer;
}

.settings-subheading {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-subheading .solar-icon {
  color: var(--mc-primary);
  font-size: 1rem;
}

/* Form Controls Standardized */
.settings-form-group {
  margin-bottom: 1.15rem;
}
.settings-form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.4rem;
  display: block;
}
.settings-form-control {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  color: #1e293b;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.settings-form-control:focus {
  border-color: var(--mc-primary);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
  outline: none;
}
.settings-form-control::placeholder {
  color: #94a3b8;
}

/* Feature Toggle Card */
.settings-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.15rem;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  background: #ffffff;
  transition: all 0.15s ease;
}
.settings-toggle-card:hover {
  background: #f8fafc;
}
.settings-toggle-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}
.settings-toggle-desc {
  font-size: 0.74rem;
  color: #64748b;
  margin: 0;
}

/* Session Row */
.settings-session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  background: var(--mc-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  flex-wrap: wrap;
  gap: 1rem;
}
.settings-session-row:hover {
  border-color: #cbd5e1;
}
.settings-session-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.settings-session-icon.active {
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
}

/* ==========================================================================
   Mercia Profile & Settings Pages (Single Unified Main Card Layout)
   ========================================================================== */

.profile-main-card,
.settings-main-card,
.reports-header-card {
  background: var(--mc-surface);
  border: none;
  border-radius: 24px;
  padding: 24px;
  width: 100%;
  box-shadow: none;
}

.page-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Styled Radio Pills (e.g. for Gender, Options) */
.radio-pill-group {
  display: flex;
  gap: 4px;
  background: #f4f7fb;
  padding: 3px;
  border-radius: 8px;
  height: 36px;
  align-items: center;
  box-sizing: border-box;
}
.radio-pill-label {
  flex: 1;
  text-align: center;
  margin: 0;
  cursor: pointer;
  height: 100%;
  display: flex;
}
.radio-pill-label input[type="radio"] {
  display: none;
}
.radio-pill-text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.radio-pill-label input[type="radio"]:checked + .radio-pill-text {
  background: #ffffff;
  color: #1e293b;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Profile Internal Header Block */
.profile-banner-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.profile-avatar-box {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.profile-avatar-box img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.profile-avatar-box .edit-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mc-primary);
  color: #ffffff;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  cursor: pointer;
}

.profile-quick-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.profile-stat-box {
  text-align: center;
  padding: 0 0.75rem;
  border-left: 1px solid #e2e8f0;
}
.profile-stat-box:first-child {
  border-left: none;
}
.profile-stat-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}
.profile-stat-lbl {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 500;
}

/* Form & Input Groups */
.form-label-custom {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
}
.form-control-custom, .form-select-custom {
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 0.82rem;
  padding: 0.42rem 0.85rem;
  color: #1e293b;
  background-color: #f8fafc;
  transition: all 0.15s ease;
  line-height: 1.4;
}
.form-select-custom {
  padding-right: 2.25rem !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}
.form-control-custom::placeholder {
  color: #94a3b8;
}
textarea.form-control-custom {
  height: auto;
  min-height: 80px;
  background-color: #f8fafc;
  border-radius: 10px;
}
.form-control-custom:focus, .form-select-custom:focus, textarea.form-control-custom:focus {
  background-color: #ffffff;
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
  outline: none;
  color: #0f172a;
}

.btn-close-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 1.35rem;
  transition: all 0.15s ease;
}
.btn-close-circle:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* Info Detail Item */
.info-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.82rem;
}
.info-detail-row:last-child {
  border-bottom: none;
}
.info-detail-lbl {
  color: #64748b;
  font-weight: 500;
}
.info-detail-val {
  color: #1e293b;
  font-weight: 600;
  text-align: right;
}

/* Document & Session Cards */
.doc-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 0.6rem;
  transition: all 0.15s ease;
}
.doc-item-card:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}
.doc-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Settings Toggle Rows */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid #f1f5f9;
}
.settings-toggle-row:last-child {
  border-bottom: none;
}
.settings-toggle-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mc-text);
  margin-bottom: 2px;
}
.settings-toggle-desc {
  font-size: 0.75rem;
  color: var(--mc-text-muted);
}
.settings-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-sm);
  background: var(--mc-surface);
  height: 100%;
  gap: 0.75rem;
  transition: border-color 0.15s ease;
}
.settings-toggle-card:hover {
  border-color: #cbd5e1;
}

/* Settings Theme Swatches (Rounded Rectangle with Tooltip) */
.theme-swatch {
  position: relative;
  width: 44px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px #cbd5e1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.theme-swatch:hover,
.theme-swatch.active {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--mc-primary), 0 4px 10px rgba(0, 0, 0, 0.12);
}
.theme-swatch[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0 5px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  z-index: 1100;
}
.theme-swatch[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  z-index: 1100;
}
.theme-swatch[data-tooltip]:hover::before,
.theme-swatch[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Mercia v2 — Deal Details Module (deal-details.html)
   ========================================================================== */

/* Top Hero Card (Separate standalone card just like Dashboard) */
.deal-top-hero-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 24px 16px;
  margin-bottom: 1.25rem;
}

.deal-header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.deal-title-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.deal-title-area .kanban-tag {
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.26rem 0.65rem;
  border-radius: 6px;
  gap: 6px;
}
.deal-title-area .kanban-tag::before {
  width: 3px;
  height: 12px;
  border-radius: 2px;
}

.deal-back-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}
.deal-back-btn:hover {
  border-color: #cbd5e1;
  color: #1e293b;
  background: #f8fafc;
}

.deal-main-heading {
  font-size: 1.12rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Model Pipeline Stepper (Horizontal Track with Centered Line & Standard Bootstrap Stage Colors) */
.model-pipeline-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  overflow-x: auto;
}

.model-pipeline-track::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 60px;
  right: 50px;
  height: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.avatar-initials-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
  border: 1px solid var(--mc-primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.model-stage-node {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: all 0.15s ease;
}

.model-stage-label-pill {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  padding: 0.42rem 1rem;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.model-stage-node:hover .model-stage-label-pill {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}

.model-stage-label-pill .solar-icon,
.model-stage-active-btn .solar-icon {
  font-size: 1.15rem;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.model-stage-label-pill .solar-icon svg,
.model-stage-active-btn .solar-icon svg {
  width: 18px;
  height: 18px;
}

/* Active State: Rounded button (not circle/pill) */
.model-stage-active-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.46rem 1.15rem;
  border-radius: 8px;
  white-space: nowrap;
}
.model-stage-node.active .model-stage-label-pill {
  display: none;
}
.model-stage-node.active .model-stage-active-btn {
  display: inline-flex;
}

/* 1. Novo Lead — Bootstrap Primary Blue (#0d6efd) */
.stage-new .model-stage-active-btn {
  background: #0d6efd;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(13, 110, 253, 0.25);
}
.stage-new:hover .model-stage-label-pill {
  border-color: #0d6efd;
  color: #0d6efd;
}

/* 2. Contato Feito — Orange (#fd7e14) */
.stage-contact .model-stage-active-btn {
  background: #fd7e14;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(253, 126, 20, 0.25);
}
.stage-contact:hover .model-stage-label-pill {
  border-color: #fd7e14;
  color: #fd7e14;
}

/* 3. Proposta Enviada — Purple (#6f42c1) */
.stage-proposal .model-stage-active-btn {
  background: #6f42c1;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(111, 66, 193, 0.25);
}
.stage-proposal:hover .model-stage-label-pill {
  border-color: #6f42c1;
  color: #6f42c1;
}

/* 4. Negociação — Bootstrap Info (#0dcaf0) */
.stage-negotiation .model-stage-active-btn {
  background: #0dcaf0;
  color: #0f172a;
  box-shadow: 0 3px 10px rgba(13, 202, 240, 0.25);
}
.stage-negotiation:hover .model-stage-label-pill {
  border-color: #0dcaf0;
  color: var(--mc-primary);
}

/* 5. Ganho Fechado — Bootstrap Success (#198754) */
.stage-won .model-stage-active-btn {
  background: #198754;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(25, 135, 84, 0.25);
}
.stage-won:hover .model-stage-label-pill {
  border-color: #198754;
  color: #198754;
}

/* 6. Perdido — Bootstrap Danger (#dc3545) */
.stage-lost .model-stage-active-btn {
  background: #dc3545;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(220, 53, 69, 0.25);
}
.stage-lost:hover .model-stage-label-pill {
  border-color: #dc3545;
  color: #dc3545;
}

/* 2-Column Grid */
.deal-grid-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.25rem;
  align-items: flex-start;
}

@media (max-width: 1199px) {
  .deal-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* Mercia Side Card */
.mercia-side-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 1.25rem;
}

.mercia-side-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.mercia-info-tile {
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid #f1f5f9;
}

.mercia-copy-btn {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}
.mercia-copy-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #1e293b;
}
.mercia-copy-btn.copied {
  color: #16a34a !important;
  background: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}

.mercia-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #475569;
}

.mercia-contact-val {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mercia-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ==========================================================================
   Mercia Custom Modals & Dialogs
   ========================================================================== */
.mercia-modal .modal-content {
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  background: #ffffff;
  overflow: hidden;
}

.mercia-modal .modal-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mercia-modal .modal-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.mercia-modal .modal-icon-badge.badge-proposal {
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
  border: 1px solid var(--mc-primary-light);
}

.mercia-modal .modal-icon-badge.badge-email {
  background: #faf5ff;
  color: #9333ea;
  border: 1px solid #f3e8ff;
}

.btn-outline-purple {
  color: #9333ea;
  border: 1px solid #9333ea;
  background: transparent;
  transition: all 0.15s ease;
}

.btn-outline-purple:hover,
.btn-outline-purple:focus,
.btn-outline-purple:active {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #7e22ce;
}

.mercia-modal .modal-icon-badge.badge-deal {
  background: #ecfeff;
  color: #0891b2;
  border: 1px solid #cffafe;
}

.mercia-modal .modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mercia-modal .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.mercia-modal .modal-subtitle {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 3px;
  margin-bottom: 0;
}

.mercia-modal .btn-close-custom {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.mercia-modal .btn-close-custom:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fecaca;
}

.mercia-modal .modal-body {
  padding: 22px 24px;
  background: #ffffff;
  max-height: calc(85vh - 140px);
  overflow-y: auto;
}

.mercia-modal .modal-footer {
  padding: 14px 24px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.mercia-modal .modal-footer .btn,
.modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  vertical-align: middle;
  line-height: 1.2;
}

.mercia-modal .modal-footer .btn .solar-icon,
.modal-footer .btn .solar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  margin-right: 0 !important;
}

.mercia-modal .modal-footer .btn .solar-icon svg,
.modal-footer .btn .solar-icon svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
}

.btn:has(.solar-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  vertical-align: middle;
}

.btn:has(.solar-icon) .solar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.mercia-modal-summary-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 1.25rem;
}

.mercia-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.mercia-tag-pill .tag-remove-btn {
  cursor: pointer;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
}
.mercia-tag-pill .tag-remove-btn:hover {
  color: #ef4444;
}

/* ==========================================================================
   Mercia Rich Text Editor Component
   ========================================================================== */
.mercia-editor-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.15s ease;
}
.mercia-editor-box:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.mercia-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #edf2f7;
  flex-wrap: wrap;
}

.mercia-editor-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.mercia-editor-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}
.mercia-editor-btn.active {
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
  border-color: var(--mc-primary-light);
}

.mercia-editor-divider {
  width: 1px;
  height: 18px;
  background: #e2e8f0;
  margin: 0 4px;
}

.mercia-editor-content {
  min-height: 160px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #1e293b;
  outline: none;
  background: #ffffff;
}
.mercia-editor-content:empty:before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
  display: block;
}
.mercia-editor-content p {
  margin-bottom: 0.6rem;
}
.mercia-editor-content p:last-child {
  margin-bottom: 0;
}
.mercia-editor-content ul, .mercia-editor-content ol {
  padding-left: 1.25rem;
  margin-bottom: 0.6rem;
}

/* ==========================================================================
   Mercia Searchable Select Dropdown
   ========================================================================== */
.mercia-searchable-select {
  position: relative;
}

.mercia-searchable-select .form-select-custom {
  cursor: pointer;
  padding-right: 2.25rem !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
}

.mercia-searchable-select .js-select-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.mercia-searchable-select .dropdown-menu {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 30px -6px rgba(15, 23, 42, 0.15), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  font-size: 0.82rem;
  max-height: 290px;
  min-width: 100%;
  padding: 8px;
  background: #ffffff;
  z-index: 1060;
}

.mercia-searchable-select .dropdown-menu.show {
  display: flex !important;
  flex-direction: column;
}

.mercia-searchable-select .input-group {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.mercia-searchable-select .input-group:focus-within {
  border-color: #cbd5e1;
}

.mercia-searchable-select .input-group-text {
  background: transparent !important;
  border: none !important;
  color: #94a3b8;
  padding-left: 10px;
  padding-right: 4px;
}

.mercia-searchable-select .form-control,
.mercia-searchable-select .js-search-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 6px 10px 6px 0;
  font-size: 0.8rem;
  color: #1e293b;
}

.mercia-searchable-select .form-control:focus,
.mercia-searchable-select .js-search-input:focus {
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}

.mercia-searchable-select .dropdown-item {
  padding: 8px 12px;
  border-radius: 8px;
  color: #1e293b;
  font-weight: 600;
  font-size: 0.82rem;
  transition: all 0.15s ease;
  white-space: normal;
  line-height: 1.35;
  margin-bottom: 2px;
  border: none !important;
}

.mercia-searchable-select .dropdown-item small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

.mercia-searchable-select .dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.mercia-searchable-select .dropdown-item.active,
.mercia-searchable-select .dropdown-item:active {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 600;
  border: none !important;
}

.mercia-searchable-select .dropdown-item.active small,
.mercia-searchable-select .dropdown-item:active small {
  color: #64748b !important;
}

/* ==========================================================================
   Mercia Form Table (Clean Embedded Table for Modals/Forms)
   ========================================================================== */
.mercia-form-table-wrapper {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: visible;
}

.mercia-form-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
}

.mercia-form-table thead th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.mercia-form-table tbody td {
  padding: 8px 12px;
  vertical-align: middle;
  border-top: none;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.mercia-form-table tbody tr:last-child td {
  border-bottom: none;
}

.mercia-form-table tbody tr:hover td {
  background-color: #fafcff;
}

.mercia-form-table tfoot td {
  padding: 10px 14px;
  vertical-align: middle;
  white-space: nowrap !important;
}

.mercia-form-table .form-control-custom {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  height: 36px;
}

.mercia-form-table .form-control-custom:focus {
  background: #ffffff;
  border-color: var(--mc-primary);
}

.mercia-form-table .js-prod-subtotal {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap !important;
  display: inline-block;
}

#dealNewTotalSummary,
#dealEditTotalSummary {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--mc-primary) !important;
}

.mercia-form-table .js-prod-unit {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-variant-numeric: tabular-nums;
}

.mercia-form-table .btn-remove-row {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mercia-form-table .btn-remove-row:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Product Catalog Modal */
#modalProductCatalog {
  z-index: 1075 !important;
}
#modalProductCatalog .catalog-prod-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
#modalProductCatalog .badge-cat {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}
#modalProductCatalog .table tbody tr:hover td {
  background-color: #f8fafc;
}

.mercia-kv-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94a3b8;
  margin-bottom: 2px;
}

.mercia-kv-val {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e293b;
}

/* Mercia Main Content Card */
.mercia-main-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 22px;
}

/* Tabs Switch 100% Inside White Card (matching standard .view-switch) */
.deal-tabs-switch {
  display: flex;
  align-items: center;
  width: 100%;
  background: #f4f7fb;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 1.25rem;
  gap: 2px;
  height: 32px;
  box-sizing: border-box;
}

.deal-tab-btn {
  flex: 1;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}
.deal-tab-btn:hover:not(.active) {
  color: #1e293b;
}
.deal-tab-btn.active {
  background: #ffffff !important;
  color: #1e293b !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.deal-tab-btn .solar-icon {
  font-size: 0.82rem;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Quick Note / Composer Box */
.mercia-composer-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 1.5rem;
  transition: border-color 0.15s ease;
}
.mercia-composer-box:focus-within {
  border-color: var(--mc-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.mercia-composer-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  resize: none;
  font-size: 0.84rem;
  color: #1e293b;
  min-height: 50px;
}
.mercia-composer-input::placeholder {
  color: #94a3b8;
}

.mercia-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #edf2f7;
}

/* Empty Box state matching Quick Note Composer */
.mercia-empty-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2.25rem 1.5rem;
  text-align: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.mercia-empty-box-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.2rem;
}
.mercia-empty-box-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}
.mercia-empty-box-desc {
  font-size: 0.78rem;
  color: #94a3b8;
  max-width: 320px;
  margin: 0 auto;
}

/* Vertical Timeline Feed */
.mercia-timeline-feed {
  position: relative;
  padding-left: 36px;
}
.mercia-timeline-feed::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 13px;
  width: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.mercia-timeline-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.85rem;
}
.mercia-timeline-row:last-child {
  margin-bottom: 0;
}

.mercia-timeline-bullet {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #0d6efd;
  z-index: 2;
  box-shadow: 0 0 0 2px #ffffff;
}
.mercia-timeline-bullet.bullet-blue {
  border-color: #0d6efd;
}
.mercia-timeline-bullet.bullet-orange {
  border-color: #fd7e14;
}
.mercia-timeline-bullet.bullet-purple {
  border-color: #6f42c1;
}
.mercia-timeline-bullet.bullet-cyan {
  border-color: #0dcaf0;
}
.mercia-timeline-bullet.bullet-green {
  border-color: #198754;
}
.mercia-timeline-bullet.bullet-red {
  border-color: #dc3545;
}
.mercia-timeline-bullet.bullet-gray {
  border-color: #94a3b8;
}

.mercia-timeline-card {
  flex: 1;
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: border-color 0.15s ease;
}
.mercia-timeline-card:hover {
  border-color: #cbd5e1;
}

.mercia-timeline-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

.mercia-timeline-meta {
  font-size: 0.72rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* ==========================================================================
   Authentication Pages (login.php & forget.php)
   ========================================================================== */
body.auth-page {
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
  background-color: var(--mc-bg);
}

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mc-bg);
  background-image: 
    radial-gradient(at 50% 0%, rgba(13, 110, 253, 0.05) 0px, transparent 65%),
    radial-gradient(at 100% 100%, rgba(25, 135, 84, 0.03) 0px, transparent 55%);
  padding: 2rem 1.25rem;
}

/* ==========================================================================
   SPLIT 50/50 FULL SCREEN LAYOUT
   ========================================================================== */
.auth-split-wrapper {
  min-height: 100vh;
  width: 100%;
  display: flex;
  background-color: #ffffff;
  overflow-x: hidden;
}

/* Left Column: Visual Side (50vw) */
.auth-split-visual {
  flex: 1 1 50%;
  max-width: 50%;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.5rem 4rem;
  background-color: #071629;
  background-image: 
    linear-gradient(145deg, rgba(7, 22, 41, 0.78) 0%, rgba(13, 110, 253, 0.55) 100%),
    url('../imgs/bg-login.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
}

.auth-split-visual::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 20%, rgba(13, 110, 253, 0.25) 0%, transparent 60%);
  pointer-events: none;
}

.auth-visual-header {
  position: relative;
  z-index: 2;
}

.auth-visual-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  margin-bottom: 2rem;
}

.auth-visual-brand-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.auth-visual-brand-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.auth-visual-brand-crm {
  color: #10b981;
  font-weight: 800;
  margin-left: 3px;
}

.auth-visual-hero {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.auth-visual-hero-title {
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1.22;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin-bottom: 1.15rem;
}

.auth-visual-hero-desc {
  font-size: 0.95rem;
  color: rgba(241, 245, 249, 0.88);
  line-height: 1.65;
  margin-bottom: 2.25rem;
}

.auth-visual-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-visual-feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #f8fafc;
}

.auth-visual-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #60a5fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.auth-visual-footer {
  position: relative;
  z-index: 2;
  padding-top: 1.5rem;
  color: rgba(203, 213, 225, 0.7);
  font-size: 0.76rem;
}

/* Right Column: Form Side (50vw) */
.auth-split-form-wrap {
  flex: 1 1 50%;
  max-width: 50%;
  min-height: 100vh;
  background-color: var(--mc-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
}

/* Card do Formulário de Login (Padrão Oficial .mc-card do Sistema) */
.auth-login-card {
  width: 100%;
  max-width: 418px;
  background: var(--mc-surface);
  border-radius: 24px;
  border: 1px solid #edf2f7;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  padding: 1.5rem; /* 24px - Padrão exato .mc-card e cards de dashboard */
}

@media (max-width: 991.98px) {
  .auth-split-wrapper {
    flex-direction: column;
    background-color: var(--mc-bg);
  }
  .auth-split-visual {
    display: none;
  }
  .auth-split-form-wrap {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 2rem 1.25rem;
    min-height: 100vh;
  }
  .auth-login-card {
    padding: 1.25rem;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  }
}

.auth-card-container {
  width: 100%;
  max-width: 980px;
  min-height: 590px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #edf2f7;
  box-shadow: 0 10px 35px -5px rgba(15, 23, 42, 0.05), 0 0 1px 1px rgba(15, 23, 42, 0.02);
  overflow: hidden;
  display: flex;
}

.auth-side-banner {
  flex: 1.05;
  background: #f8fafc;
  border-right: 1px solid #edf2f7;
  color: #1e293b;
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.auth-banner-header {
  position: relative;
  z-index: 2;
}

.auth-banner-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  margin-bottom: 1.75rem;
}

.auth-banner-brand-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.auth-banner-brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.auth-banner-brand-crm {
  color: #0d6efd;
  font-weight: 800;
}

.auth-banner-hero-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin-bottom: 0.65rem;
}

.auth-banner-hero-desc {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 1.75rem;
}

/* Feature Items with Soft Icon Box */
.auth-banner-features {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0;
}

.auth-feature-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

.auth-feature-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0d6efd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.auth-banner-footer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
}

.auth-banner-stat-box {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.auth-banner-stat-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.auth-banner-stat-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 2px;
}

/* Right Side: Form Container */
.auth-form-side {
  flex: 1;
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}

.auth-form-header {
  margin-bottom: 1.25rem;
}

.auth-form-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.auth-form-subtitle {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 0;
  line-height: 1.45;
}

/* Quick Demo Selector (Patterned after .view-switch) */
.auth-quick-accounts {
  background: #f4f7fb;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
  margin-bottom: 1.15rem;
}

.auth-quick-accounts-title {
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-role-pill-group {
  display: flex;
  gap: 4px;
  background: #e2e8f0;
  padding: 3px;
  border-radius: 10px;
}

.auth-role-pill {
  flex: 1;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-role-pill:hover {
  color: #0f172a;
}

.auth-role-pill.active {
  background: #ffffff;
  color: #0d6efd;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* Form Fields */
.auth-input-group {
  position: relative;
}

.auth-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-form-control {
  height: 38px !important;
  font-size: 0.82rem !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  padding-left: 38px !important;
  padding-right: 38px !important;
  color: #1e293b !important;
  background-color: #f8fafc !important;
  transition: all 0.15s ease !important;
}

.auth-form-control:focus {
  background-color: #ffffff !important;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
  color: #0f172a !important;
  outline: none !important;
}

.auth-toggle-pwd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  z-index: 3;
}

.auth-toggle-pwd:hover {
  color: #334155;
}

/* Submit Button: Padrão 2 (.btn-cyan-action) */
.btn-auth-submit {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background-color: #cfe2ff;
  border: 1px solid #b6d4fe;
  color: #0d6efd;
  font-size: 0.84rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(13, 110, 253, 0.06);
}

.btn-auth-submit:hover {
  background-color: #b6d4fe;
  border-color: #9ec5fe;
  color: #0b5ed7;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

.btn-auth-submit:active {
  transform: translateY(0);
}

/* SSO Divider & Buttons */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.15rem 0;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #edf2f7;
}

.auth-divider:not(:empty)::before {
  margin-right: 0.75rem;
}

.auth-divider:not(:empty)::after {
  margin-left: 0.75rem;
}

.btn-auth-oauth {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 0.80rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-auth-oauth:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

@media (max-width: 991.98px) {
  .auth-card-container {
    flex-direction: column;
    max-width: 480px;
    min-height: auto;
  }
  .auth-side-banner {
    display: none;
  }
  .auth-form-side {
    padding: 2.25rem 1.75rem;
  }
}

/* ==========================================================================
   Notifications Center (notifications.html)
   ========================================================================== */
.notification-card {
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 1.15rem 1.35rem;
  transition: all 0.15s ease;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.notification-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}
.notification-card.is-unread {
  background: #f8fbff;
  border-color: var(--mc-primary-light);
}
.notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mc-primary);
  display: inline-block;
  flex-shrink: 0;
}
.notification-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.notification-icon-box.icon-blue {
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
}
.notification-icon-box.icon-cyan {
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
}
.notification-icon-box.icon-green {
  background: #d1e7dd;
  color: #198754;
}
.notification-icon-box.icon-amber {
  background: #fef8e7;
  color: #f59e0b;
}
.notification-icon-box.icon-red {
  background: #fef2f2;
  color: #ef4444;
}
.notification-icon-box.icon-purple {
  background: #f4f3ff;
  color: #8b5cf6;
}
.notification-action-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mc-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s ease;
}
.notification-action-link:hover {
  color: #0369a1;
  text-decoration: underline;
}
.notification-btn-opt {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.notification-btn-opt:hover {
  background: #f1f5f9;
  color: #334155;
}

.notif-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.notif-tab-pill:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.notif-tab-pill.active {
  background: var(--mc-primary-tint);
  color: var(--mc-primary);
  border-color: var(--mc-primary-light);
}
.notif-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  transition: all 0.15s ease;
}
.notif-tab-pill.active .notif-pill-badge {
  background: var(--mc-primary);
  color: #ffffff;
}

/* Neutral Label/Badge without colors */
.badge-neutral {
  background-color: var(--bs-secondary-bg-subtle, #e2e8f0);
  color: var(--bs-secondary-color, #64748b);
  border: none;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  display: inline-block;
  line-height: 1;
}

/* Standard Switch Toggle Size across Mercia */
.form-check.form-switch .form-check-input {
  width: 2.6em !important;
  height: 1.4em !important;
  cursor: pointer;
}

/* ==========================================================================
   Relatórios & Indicadores (Reports Design System)
   ========================================================================== */
.reports-tab-pane {
  width: 100%;
}
.reports-tab-pane.d-none {
  display: none !important;
}
.report-chart-container {
  position: relative;
  height: 280px;
  width: 100%;
}
.report-chart-container-sm {
  position: relative;
  height: 220px;
  width: 100%;
}
.report-chart-container-lg {
  position: relative;
  height: 340px;
  width: 100%;
}
.chart-card-box {
  background: var(--mc-surface, #ffffff);
  border-radius: 16px;
  border: none !important;
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease;
}
.chart-card-box:hover {
  box-shadow: none !important;
}
.chart-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.chart-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.chart-card-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 2px;
}
.chart-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.8rem;
  background: transparent;
  border: none !important;
  padding: 0.75rem 0;
}
.badge-trend-down {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-trend-up {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #198754;
  font-size: 0.75rem;
  font-weight: 600;
}
.top-companies-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.top-company-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: none !important;
  background: transparent;
  font-size: 0.8rem;
  transition: all 0.15s ease;
}
.top-company-item:hover {
  background: #f8fafc;
}
.top-company-badge {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.doughnut-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed #f1f5f9;
}
.doughnut-legend-item:last-child {
  border-bottom: none;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}








/* Relatórios: valor dos indicadores e participação percentual */
.report-kpi-value {
  margin-top: 0.5rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  word-break: break-word;
}
.report-share-badge {
  background: var(--mc-emerald-light);
  color: var(--mc-emerald-dark);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 3px 6px;
  font-variant-numeric: tabular-nums;
}
.report-empty { min-height: 200px; }

/* Agenda: seletor de mês */
.month-picker-toggle { border: none; cursor: pointer; }
.month-picker-caret {
  font-size: 0.85rem;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
  opacity: 0.6;
}
.month-picker-toggle[aria-expanded="true"] .month-picker-caret { transform: rotate(-90deg); }
.month-picker {
  width: 264px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18);
}
.month-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.month-picker-year {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.month-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.month-picker-item:hover { background: #f1f5f9; color: #0f172a; }
.month-picker-item.is-current { border-color: var(--mc-primary-light); color: var(--mc-primary); }
.month-picker-item.is-selected,
.month-picker-item.is-selected:hover { background: var(--mc-primary); border-color: var(--mc-primary); color: #ffffff; }
.month-picker-today {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mc-primary);
  text-decoration: none;
}
.month-picker-today:hover { text-decoration: underline; }

/* Busca de endereço por CEP */
.cep-status {
  margin-top: 4px;
  font-size: 0.72rem;
  color: #64748b;
}
.cep-status:empty { display: none; }
.cep-status.is-error { color: #b91c1c; }

/* Termos de Uso / Política de Privacidade */
.legal-textarea { min-height: 320px; font-size: 0.85rem; line-height: 1.55; }
.legal-page { background: #f6f7f9; }
.legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}
.legal-back { font-size: 0.82rem; color: #64748b; text-decoration: none; }
.legal-back:hover { color: #0f172a; }
.legal-wrap h1 { font-size: 1.7rem; font-weight: 700; color: #0f172a; margin: 18px 0 4px; }
.legal-meta { font-size: 0.82rem; color: #94a3b8; }
.legal-switch { display: flex; gap: 6px; margin: 20px 0; }
.legal-switch a {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
.legal-switch a.is-active { color: var(--mc-primary); border-color: var(--mc-primary-light); background: var(--mc-primary-tint); }
.legal-content {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 32px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: #334155;
}
.legal-content h2 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 1.5rem 0 0.5rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-empty { color: #94a3b8; text-align: center; margin: 0; }
.legal-attachments { margin-top: 16px; background: #ffffff; border-radius: 16px; padding: 20px 24px; }
.legal-attachments h2 { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0 0 10px; }
.legal-file-list { list-style: none; margin: 0; padding: 0; }
.legal-file-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid #f1f5f9; font-size: 0.84rem;
}
.legal-file-list li:first-child { border-top: none; }
.legal-file-list a { color: var(--mc-primary); text-decoration: none; font-weight: 600; word-break: break-all; }
.legal-file-list a:hover { text-decoration: underline; }
.legal-file-size { color: #94a3b8; font-size: 0.76rem; white-space: nowrap; }
.legal-file-remove { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #dc2626; font-size: 0.76rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
@media (max-width: 575.98px) { .legal-content { padding: 20px; } }

/* ==========================================================================
   Detalhes do Negócio — arquivos, itens e estados de envio (deal-details.php)
   ========================================================================== */
.deal-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 1.25rem;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.deal-dropzone > .solar-icon { font-size: 1.5rem; color: var(--mc-primary); flex-shrink: 0; }
.deal-dropzone:hover,
.deal-dropzone:focus-visible,
.deal-dropzone.is-dragover { border-color: var(--mc-primary); background: var(--mc-primary-tint); outline: none; }
.deal-dropzone.is-uploading { pointer-events: none; opacity: 0.7; }
.deal-dropzone-title { font-size: 0.84rem; font-weight: 700; color: #1e293b; }
.deal-dropzone-desc { font-size: 0.74rem; color: #94a3b8; }

.deal-files-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 0 0 0.5rem;
}
.deal-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}
.deal-file-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #475569;
  font-size: 1rem;
}
.deal-file-icon.is-proposal { background: var(--mc-primary-tint); color: var(--mc-primary); }
.deal-file-name { font-size: 0.84rem; font-weight: 600; color: #1e293b; text-decoration: none; }
.deal-file-name:hover { color: var(--mc-primary); text-decoration: underline; }
.deal-file-meta { font-size: 0.74rem; color: #94a3b8; }

.deal-products-table .form-control-custom { min-width: 90px; font-size: 0.8rem; padding: 0.3rem 0.5rem; }
.deal-products-totals {
  margin-left: auto;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  font-size: 0.8rem;
  color: #64748b;
}
.deal-products-totals > div { display: flex; justify-content: space-between; gap: 12px; }
.deal-products-totals strong { color: #1e293b; white-space: nowrap; }
.deal-products-totals .is-total { padding-top: 6px; margin-top: 2px; border-top: 1px solid #e2e8f0; font-weight: 700; color: #1e293b; }
.deal-products-totals .is-total strong { color: var(--mc-primary); font-size: 0.92rem; }

.deal-proposal-items-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  font-size: 0.8rem;
  color: #475569;
}
.deal-proposal-items-note .solar-icon { color: var(--mc-primary); }

.is-busy { opacity: 0.65; cursor: progress !important; }