/* Evermail — Site-wide overrides for MudBlazor components
   Drop into wwwroot/css/ and reference from App.razor:
     <link href="css/colors_and_type.css" rel="stylesheet" />
     <link href="css/site.css" rel="stylesheet" />

   The tokens in colors_and_type.css are the single source of truth; this file
   only wires MudBlazor components to those tokens and applies the airy rules
   (flat sections, no nested cards, generous whitespace).
   ========================================================================= */

/* ---------- Layout rhythm ---------- */

.mud-main-content { background: var(--color-surface); }
.mud-container { padding-block: 2rem; }
.page { display: flex; flex-direction: column; gap: 3rem; padding: 2rem 3.5rem 5rem; max-width: 1280px; }

/* ---------- Sidebar drawer — dark gradient ---------- */

.mud-drawer.mud-drawer-pos-left {
  background: var(--color-sidebar-gradient);
  color: #cbd5f5;
  border-right: 0;
}
.mud-drawer .mud-nav-link-text { color: #cbd5f5; font-size: 0.86rem; }
.mud-drawer .mud-nav-link.active-item {
  background: rgba(94,225,214,0.10);
  color: #fff;
  border-radius: 12px;
}
.mud-drawer .mud-nav-link.active-item .mud-icon-root { color: #5de1d6; }

/* ---------- Appbar — pill row, no chrome ---------- */

.mud-appbar {
  box-shadow: none !important;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Cards: use sparingly. Default to no chrome ---------- */

.mud-card {
  box-shadow: none !important;
  border: 1px solid var(--color-border);
  border-radius: 24px;
}
.mud-card.mud-card-raised {
  box-shadow: var(--shadow-sm) !important;
  border: 0;
}
/* Never nest cards. Use `.section` instead. */
.mud-card .mud-card { background: transparent; border: 0; border-radius: 0; padding: 0; }

/* ---------- Sections: the airy replacement for nested cards ---------- */

.section         { padding-top: 2rem; border-top: 1px solid var(--color-border); }
.section:first-child { border-top: 0; padding-top: 0; }
.section-head    { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; }
.section-head h3 { font-size: 1.15rem; letter-spacing: -0.01em; font-weight: 600; color: var(--color-text-primary); }
/* Section-head eyebrows are slightly smaller / tighter than the default .eyebrow.
   Color is intentionally NOT overridden here — the brand-accent color comes from
   the canonical .eyebrow rule in colors_and_type.css. */
.section-head .eyebrow { font-size: 0.75rem; margin-bottom: 0.25rem; }

/* ---------- Buttons — pill treatment, single primary gradient ---------- */

.mud-button-root { border-radius: 999px !important; font-weight: 600; text-transform: none; letter-spacing: 0; }
.mud-button-filled-primary {
  background: var(--color-brand-gradient) !important;
  color: #fff !important;
  box-shadow: var(--shadow-primary) !important;
}
.mud-button-outlined { border-color: var(--color-border-strong) !important; }

/* ---------- Tables — no outer card chrome, keep row borders ---------- */

.mud-table { box-shadow: none !important; border-radius: 0 !important; background: transparent; }
.mud-table-root thead th { background: var(--color-surface-muted); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); font-weight: 600; }
.mud-table-root td, .mud-table-root th { border-color: var(--color-border); }

/* ---------- Chips / status pills ---------- */

.mud-chip {
  border-radius: 999px !important;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Inputs — pill inputs by default ---------- */

.mud-input-control .mud-input { border-radius: 16px; }
.mud-input-outlined-border   { border-radius: 16px !important; }

/* ---------- Forbidden patterns, enforced ---------- */

/* No card inside card */
.mud-card .mud-paper { background: transparent; box-shadow: none; border: 0; }

/* No emoji glyphs in production — Bootstrap Icons only.
   (Content check lives in CI; this is just the visual reminder.) */

/* The canonical .eyebrow utility lives in colors_and_type.css and uses
   var(--color-brand-accent). Do NOT redefine .eyebrow here — keeping the
   single source of truth prevents legacy slate-gray from overriding the
   teal brand accent. */