/* ==========================================================================
   Acelle Mail — Layout Styles (authenticated pages)
   Sidebar, topbar, content area, responsive.
   All values from variables.css.
   ========================================================================== */

@import url('variables.css');

/* ==========================================================================
   App Shell
   ========================================================================== */

.mc-app {
    display: flex;
    min-height: 100vh;
}

.mc-app-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition-base);
}

.mc-app.sidebar-collapsed .mc-app-body {
    margin-left: var(--sidebar-collapsed);
}

/* ─── Pre-paint collapsed state (FOUC fix) ───────────────────────────────────
   Mirror of the dark-mode pre-paint script pattern. Inline <script> in
   admin.blade + app.blade <head> reads `localStorage.mc-sidebar-collapsed`
   and sets `data-sidebar-collapsed="true"` on <html> BEFORE first paint.
   These rules apply the collapsed dimensions + label-hiding + zero
   transition during that initial paint, so the sidebar already paints
   collapsed instead of flashing expanded → collapsed via the JS-driven
   class swap that happens on DOMContentLoaded.

   Sidebar.js#init mirrors the html attr to `.mc-app.sidebar-collapsed`
   then strips the html marker — future toggles use the canonical class.
   ────────────────────────────────────────────────────────────────────── */
html[data-sidebar-collapsed="true"] .mc-sidebar,
html[data-sidebar-collapsed="true"] .mc-app-body {
    transition: none !important;
}
html[data-sidebar-collapsed="true"] .mc-sidebar {
    width: var(--sidebar-collapsed);
}
html[data-sidebar-collapsed="true"] .mc-app-body {
    margin-left: var(--sidebar-collapsed);
}
html[data-sidebar-collapsed="true"] .mc-nav-item-label,
html[data-sidebar-collapsed="true"] .mc-nav-group-label,
html[data-sidebar-collapsed="true"] .mc-nav-arrow,
html[data-sidebar-collapsed="true"] .mc-nav-badge,
html[data-sidebar-collapsed="true"] .mc-nav-submenu,
html[data-sidebar-collapsed="true"] .mc-sidebar-logo-text,
html[data-sidebar-collapsed="true"] .mc-sidebar-logo-content {
    display: none;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.mc-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--color-card-bg);
    border-right: var(--space-px) solid var(--color-border);
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    transition: width var(--transition-base);
    overflow: hidden;
}

.mc-app.sidebar-collapsed .mc-sidebar { width: var(--sidebar-collapsed); }

/* Logo + collapse toggle in header */
.mc-sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    height: var(--topbar-height);
    border-bottom: var(--space-px) solid var(--color-border);
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
}
.mc-sidebar-logo:hover { text-decoration: none; color: inherit; }
.mc-sidebar-logo-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
}
.mc-sidebar-logo img { height: var(--space-7); width: auto; object-fit: contain; }
.mc-sidebar-logo-text {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
}
.mc-app.sidebar-collapsed .mc-sidebar-logo-text { display: none; }

/* Nav area */
.mc-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-2) 0;
}
.mc-sidebar-nav::-webkit-scrollbar { width: var(--space-1); }
.mc-sidebar-nav::-webkit-scrollbar-thumb { background: transparent; }
.mc-sidebar-nav:hover::-webkit-scrollbar-thumb { background: var(--color-border); }

/* Global search — sits at the top of the sidebar nav, above the first nav
   item. Tracks .mc-nav-item's horizontal margin so it lines up with the
   items below it rather than reading as a floating input. */
.mc-sidebar-search { padding: var(--space-2) 0 var(--space-3); }

.mc-sidebar-search-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: calc(100% - var(--space-4));
    padding: var(--space-2) var(--space-3);
    margin: 0 var(--space-2);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: var(--color-subtle-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-input);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    /* Enumerated rather than `all` — matches .mc-nav-item, and `all` would
       animate the width/padding swap on sidebar collapse. */
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}
.mc-sidebar-search-trigger:hover {
    background: var(--color-card-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}
.mc-sidebar-search-trigger:focus-visible {
    outline: none;
    background: var(--color-card-bg);
    border-color: var(--color-border-focus);
    box-shadow: var(--focus-ring);
    color: var(--color-text-secondary);
}

.mc-sidebar-search-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--space-4);
    height: var(--space-4);
}
.mc-sidebar-search-icon svg { width: 100%; height: 100%; }

.mc-sidebar-search-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-sidebar-search-kbd {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: var(--space-px) var(--space-1-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-disabled);
    background: var(--color-hover-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-xs);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* Collapsed sidebar — icon-only square, matching collapsed nav items. Both
   the pre-paint html[] marker and the canonical class are covered, same as
   the nav-item rules above. */
.mc-app.sidebar-collapsed .mc-sidebar-search-label,
.mc-app.sidebar-collapsed .mc-sidebar-search-kbd,
html[data-sidebar-collapsed="true"] .mc-sidebar-search-label,
html[data-sidebar-collapsed="true"] .mc-sidebar-search-kbd { display: none; }

.mc-app.sidebar-collapsed .mc-sidebar-search-trigger,
html[data-sidebar-collapsed="true"] .mc-sidebar-search-trigger {
    justify-content: center;
    width: calc(100% - var(--space-2));
    padding: var(--space-2-5);
    margin: 0 var(--space-1);
}

/* Nav group */
.mc-nav-group { margin-bottom: var(--space-1); }
.mc-nav-group-label {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    white-space: nowrap;
    overflow: hidden;
}

/* F8.4 follow-up: inline "NEW" badge variant for the AI group label.
   Pastel teal pill with a leading dot — pulled straight from /rui/ui
   `mc-badge mc-badge-teal mc-badge-sm mc-badge-dot`. The wrapping label
   becomes inline-flex so the badge sits next to the text instead of
   wrapping onto a new line. Subtle pulse on the dot draws the eye
   without becoming noisy. */
.mc-nav-group-label-with-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: none;
    letter-spacing: 0;
}

.mc-nav-group-label-with-badge > span:first-child {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.mc-nav-group-badge-new {
    /* High-contrast pastel — pale violet bg, BOLD dark-violet text + 1px
       border so the pill pops out of the muted sidebar without being a
       solid block. The all-saturation `--chart-6` (#C3B1E1) is too soft
       to read as "stand out", so we hardcode the brighter Tailwind
       violet-600 text + a 10%-tinted bg of the same hue. Dark mode
       lightens the text to violet-300 for legibility on the dark sidebar. */
    background: rgba(124, 58, 237, 0.12) !important;
    color: #6D28D9 !important;
    border: 1px solid rgba(124, 58, 237, 0.45) !important;
    text-transform: none;
    letter-spacing: 0.2px;
    font-weight: var(--weight-bold);
    padding-inline: var(--space-2);
    gap: var(--space-1);
}

[data-theme="dark"] .mc-nav-group-badge-new {
    background: rgba(167, 139, 250, 0.18) !important;
    color: #C4B5FD !important;
    border-color: rgba(167, 139, 250, 0.55) !important;
}

.mc-nav-group-badge-new .mc-nav-group-badge-icon {
    flex-shrink: 0;
    /* gentle bob so the flask reads as “experimental / brewing” without
       being noisy. Keeps the badge visually alive in the sidebar. */
    animation: mc-nav-group-badge-flask-bob 3.2s ease-in-out infinite;
    transform-origin: center 70%;
}

@keyframes mc-nav-group-badge-flask-bob {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mc-nav-group-badge-new .mc-nav-group-badge-icon {
        animation: none;
    }
}

/* Nav item */
/* Nav item.
   Resting state is --color-text-secondary rather than full-strength text:
   with every entry at maximum contrast the list reads as an undifferentiated
   wall and the current page cannot win. Dropping idle items one step down the
   text ramp is what lets the active item stand out without shouting. */
.mc-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin: var(--space-px) var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    border-radius: var(--radius-input);
    text-decoration: none;
    white-space: nowrap;
    /* Enumerated rather than `all` — `all` animates layout properties too. */
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                font-weight var(--transition-fast);
    cursor: pointer;
}
.mc-nav-item:hover {
    background: var(--color-hover-bg);
    color: var(--color-text);
    text-decoration: none;
}
/* Active state.
   Previously this used --color-hover-bg — the exact background :hover uses —
   so hovering any other entry produced a second item that looked identically
   selected, and the current page became ambiguous. The active item now carries
   a brand tint that no other state uses. */
.mc-nav-item.active {
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-weight: var(--weight-medium);
}
.mc-nav-item.active:hover {
    background: var(--color-teal-light);
    color: var(--color-teal);
}
/* Icons follow the item's colour so the active row reads as one object. */
.mc-nav-item .mc-nav-item-icon { color: currentColor; }

.mc-nav-item:focus-visible {
    outline: var(--space-0-5) solid var(--color-border-focus);
    outline-offset: -2px;
}

.mc-nav-item-icon {
    width: var(--space-5);
    height: var(--space-5);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-lg);
}
.mc-nav-item-icon svg { width: 20px; height: 20px; }
.mc-nav-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Nav arrow & submenu */
.mc-nav-arrow {
    width: var(--space-4); height: var(--space-4);
    transition: transform var(--transition-fast);
    color: var(--color-text-muted);
}
.mc-nav-item.expanded .mc-nav-arrow { transform: rotate(90deg); }
.mc-nav-submenu { display: none; padding-left: var(--space-8); }
.mc-nav-item.expanded + .mc-nav-submenu { display: block; }

/* Nav badge */
.mc-nav-badge {
    font-size: var(--text-xs);
    background: var(--color-teal);
    color: var(--color-white);
    padding: var(--space-px) var(--space-1-5);
    border-radius: var(--radius-full);
    font-weight: var(--weight-medium);
}

/* Sidebar collapsed overrides */
.mc-app.sidebar-collapsed .mc-nav-item-label,
.mc-app.sidebar-collapsed .mc-nav-group-label,
.mc-app.sidebar-collapsed .mc-nav-arrow,
.mc-app.sidebar-collapsed .mc-nav-badge,
.mc-app.sidebar-collapsed .mc-nav-submenu { display: none; }

.mc-app.sidebar-collapsed .mc-nav-item {
    justify-content: center;
    padding: var(--space-2-5);
    margin: var(--space-px) var(--space-1);
}

/* Collapsed icons — larger but thinner strokes for clean look */
.mc-app.sidebar-collapsed .mc-nav-item-icon .material-symbols-rounded {
    font-size: var(--text-xl);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.mc-app.sidebar-collapsed .mc-nav-item-icon .mc-icon svg { width: 22px; height: 22px; }

.mc-app.sidebar-collapsed .mc-sidebar-logo-content { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   Sidebar footer — subscription card

   Pinned below the scrolling nav (.mc-sidebar is a flex column and
   .mc-sidebar-nav takes flex:1). Two renderings of the same block: the full
   card, and a single glyph for the collapsed rail — swapped by display,
   never by duplicating markup.
   ────────────────────────────────────────────────────────────────────────── */
.mc-sidebar-footer {
    padding: var(--space-3);
    border-top: var(--space-px) solid var(--color-border);
    flex-shrink: 0;
}

.mc-sidebar-plan-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card-bg);
    border: var(--space-px) solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    border-radius: var(--radius-card);
    /* Head and hairline run edge to edge, so their own padding is the card's. */
    overflow: hidden;
}
/* Warning states tint the border only — a filled card here would outrank the
   active nav item, which is the sidebar's primary signal. */
.mc-sidebar-plan-warning .mc-sidebar-plan-card { border-color: var(--color-warning); }
.mc-sidebar-plan-danger  .mc-sidebar-plan-card { border-color: var(--color-error); }

/* Head — the fold toggle, and the only row that survives folding. Carries the
   brand wash so the card reads as an upsell surface rather than more chrome;
   the tint is derived from --color-primary, so it follows the colour scheme. */
.mc-sidebar-plan-head {
    display: flex; align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-2-5);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 15%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 4%, transparent) 100%);
    border: 0;
    font: inherit;          /* <button> would otherwise fall back to the UA font */
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.mc-sidebar-plan-head:hover {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 22%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 8%, transparent) 100%);
}
.mc-sidebar-plan-mark {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: var(--space-5); height: var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--gradient-primary);
    color: var(--color-primary-fg);
}
.mc-sidebar-plan-mark .material-symbols-rounded {
    font-size: 14px;
    font-variation-settings: 'wght' 500, 'FILL' 1;
}
.mc-sidebar-plan-name {
    flex: 1;
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    color: var(--color-text);
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-sidebar-plan-chevron {
    flex-shrink: 0;
    font-size: 16px !important;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}
/* `.is-folded` is the canonical state; `html[data-plan-folded]` is the
   pre-paint marker Sidebar.js#_initPlanCard mirrors and strips (same handshake
   as the sidebar collapse) so a folded card never flashes open on load. */
.mc-sidebar-plan-card.is-folded .mc-sidebar-plan-chevron,
html[data-plan-folded="true"] .mc-sidebar-plan-chevron { transform: rotate(-90deg); }
.mc-sidebar-plan-card.is-folded .mc-sidebar-plan-body,
html[data-plan-folded="true"] .mc-sidebar-plan-body { display: none; }

/* Peak-pressure hairline — the folded card's only meter. Hidden while the
   body is open, where the real meters carry the same numbers with labels. */
.mc-sidebar-plan-hairline { display: none; }
.mc-sidebar-plan-card.is-folded .mc-sidebar-plan-hairline,
html[data-plan-folded="true"] .mc-sidebar-plan-hairline {
    display: block;
    height: var(--space-0-5);
    background: var(--color-hover-bg);
}
.mc-sidebar-plan-hairline-bar {
    display: block; height: 100%;
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}
.mc-sidebar-plan-hairline-bar.orange { background: var(--color-warning); }
.mc-sidebar-plan-hairline-bar.red    { background: var(--color-error); }

.mc-sidebar-plan-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2-5);
}

.mc-sidebar-plan-empty {
    margin: 0;
    font-size: var(--text-xs); line-height: 1.45;
    color: var(--color-text-muted);
}

.mc-sidebar-plan-meter { display: block; text-decoration: none; }
.mc-sidebar-plan-meter:hover { text-decoration: none; }
.mc-sidebar-plan-meter-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.mc-sidebar-plan-meter-label {
    font-size: var(--text-xs); color: var(--color-text-muted);
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-sidebar-plan-meter-value {
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; flex-shrink: 0;
}
.mc-sidebar-plan-meter:hover .mc-sidebar-plan-meter-value { color: var(--color-text); }
.mc-sidebar-plan-meter .mc-progress { display: block; height: 3px; }
.mc-sidebar-plan-meter .mc-progress-bar { display: block; }

.mc-sidebar-plan-renewal {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--color-text-muted);
}
.mc-sidebar-plan-renewal .material-symbols-rounded {
    font-size: 14px;
    font-variation-settings: 'wght' 300, 'FILL' 0;
}

/* Collapsed rail glyph — hidden while the sidebar is expanded. */
.mc-sidebar-plan-mini { display: none; }

.mc-app.sidebar-collapsed .mc-sidebar-footer,
html[data-sidebar-collapsed="true"] .mc-sidebar-footer { padding: var(--space-2) var(--space-1); }
.mc-app.sidebar-collapsed .mc-sidebar-plan-card,
html[data-sidebar-collapsed="true"] .mc-sidebar-plan-card { display: none; }
.mc-app.sidebar-collapsed .mc-sidebar-plan-mini,
html[data-sidebar-collapsed="true"] .mc-sidebar-plan-mini { display: flex; }

.mc-sidebar-plan-mini {
    position: relative;
    align-items: center; justify-content: center;
    width: var(--space-10); height: var(--space-10);
    margin: 0 auto;
    border-radius: var(--radius-input);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mc-sidebar-plan-mini:hover { background: var(--color-hover-bg); color: var(--color-text); }
.mc-sidebar-plan-mini .material-symbols-rounded { font-size: var(--text-xl); }
.mc-sidebar-plan-dot {
    position: absolute; top: var(--space-1-5); right: var(--space-1-5);
    width: var(--space-2); height: var(--space-2);
    border-radius: 50%;
    background: var(--color-warning);
    border: var(--space-0-5) solid var(--color-card-bg);
}
.mc-sidebar-plan-danger .mc-sidebar-plan-dot { background: var(--color-error); }

/* User menu (expanded dropdown) */
.mc-user-menu { min-width: 260px; }

.mc-user-menu-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
}

.mc-user-menu-info { flex: 1; min-width: 0; }

.mc-user-menu-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-user-menu-email {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--space-1);
}

.mc-avatar-md {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-full);
    background: var(--color-teal-light);
    color: var(--color-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}

/* Favicon element (hidden by default, shown when collapsed) */
.mc-sidebar-favicon {
    display: none;
    align-items: center;
    justify-content: center;
}
.mc-sidebar-favicon img {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

/* Collapsed: show favicon centered */
.mc-app.sidebar-collapsed .mc-sidebar-favicon { display: flex; }
.mc-app.sidebar-collapsed .mc-sidebar-logo {
    justify-content: center;
    padding: var(--space-3) var(--space-2);
}

/* Sidebar toggle (in topbar — always visible). Bordered chip, matching the
   right-hand cluster; the negative margin is dropped so the border isn't
   clipped by the topbar padding. */
.mc-sidebar-toggle {
    display: flex;
    align-items: center; justify-content: center;
    width: var(--space-9); height: var(--space-9);
    flex-shrink: 0;
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer; border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}
.mc-sidebar-toggle:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.mc-sidebar-toggle:focus-visible {
    outline: var(--space-0-5) solid var(--color-border-focus);
    outline-offset: 2px;
}
.mc-sidebar-toggle .material-symbols-rounded {
    font-size: var(--text-xl);
    font-variation-settings: 'wght' 300, 'FILL' 0;
}
/* Glyph pair: show the action, not the current state. Expanded → "close",
   collapsed → "open". Both markers are covered so the pre-paint attribute
   doesn't flash the wrong arrow. */
.mc-sidebar-toggle-open { display: none; }
.mc-app.sidebar-collapsed .mc-sidebar-toggle-close,
html[data-sidebar-collapsed="true"] .mc-sidebar-toggle-close { display: none; }
.mc-app.sidebar-collapsed .mc-sidebar-toggle-open,
html[data-sidebar-collapsed="true"] .mc-sidebar-toggle-open { display: inline-flex; }

/* Page title — the fallback for pages that define no breadcrumb. */
.mc-topbar-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Page-supplied topbar heading (@section('topbar-title')): the same title as
   above with its subtitle stacked underneath, so a page whose header was only a
   greeting can drop its content-header bar instead of repeating the topbar.
   Both lines are tight enough to sit inside the 56px bar. */
.mc-topbar-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 0;
}
.mc-topbar-heading .mc-topbar-title { margin: 0; line-height: var(--leading-tight); }

.mc-topbar-subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
    line-height: var(--leading-tight);
    /* What separates the two lines is half-leading, not the flex gap: each box
       carries ~2px of it above and below its glyphs. Closing that by hand keeps
       the whitespace at 2px without touching either type size — line-height:1
       would do it too, but the title clips descenders (overflow is hidden for
       the ellipsis) and the subtitle would jitter against the refresh button. */
    margin-top: -2px;
}
.mc-topbar-subtitle-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Buttons riding along with the subtitle (e.g. a refresh) shrink to the line —
   the default icon button is a 36px box around a 20px glyph, and anything taller
   than the text itself sets the row height and reopens the gap under the title. */
.mc-topbar-subtitle .mc-btn-icon {
    flex: none;
    padding: 0;
    height: var(--space-3-5);
    min-width: var(--space-3-5);
    min-height: 0;
}
.mc-topbar-subtitle .mc-btn-icon svg { width: var(--space-3-5); height: var(--space-3-5); }

/* ==========================================================================
   Topbar
   ========================================================================== */

.mc-topbar {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 var(--space-6);
    background: var(--color-card-bg);
    border-bottom: var(--space-px) solid var(--color-border);
    gap: var(--space-4);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
}

/* The search now lives in the sidebar, so there is no .mc-topbar-center any
   more. `margin-left: auto` on the right column pins the icon cluster to the
   far edge. */
/* Left takes the slack so a long breadcrumb/title ellipsizes instead of
   shoving the icon cluster off the edge; right never shrinks. */
.mc-topbar-left   { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1 1 auto; }
.mc-topbar-right  { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; }

/* Search */
.mc-topbar-search { position: relative; width: 100%; }
.mc-topbar-search-icon {
    position: absolute; left: var(--space-3-5); top: 50%;
    transform: translateY(-50%); color: var(--color-text-muted);
    pointer-events: none; width: var(--space-4); height: var(--space-4);
}
.mc-topbar-search input {
    width: 100%;
    padding: var(--space-2) var(--space-3-5) var(--space-2) var(--space-10);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-subtle-bg);
    border: var(--space-px) solid transparent;
    border-radius: var(--radius-full);
    outline: none;
    transition: all var(--transition-fast);
}
.mc-topbar-search input::placeholder { color: var(--color-text-muted); }
.mc-topbar-search input:focus {
    background: var(--color-card-bg);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Search dropdown */
.mc-search-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-dropdown);
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}

.mc-search-group-label {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-search-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.mc-search-item:hover {
    background: var(--color-hover-bg);
    text-decoration: none;
}

.mc-search-item-icon {
    width: var(--space-5);
    height: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.mc-search-item-icon svg { width: var(--space-4); height: var(--space-4); }

.mc-search-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.mc-search-loading {
    padding: var(--space-4);
    text-align: center;
}

.mc-search-group-count {
    float: right;
    font-weight: var(--weight-normal);
    color: var(--color-teal);
    font-size: var(--text-xs);
}

.mc-search-item-detail {
    flex: 1;
    min-width: 0;
}

.mc-search-item-title {
    font-weight: var(--weight-medium);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-search-item-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-0-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mc-search-item-sub {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    margin-top: var(--space-0-5);
}

.mc-search-thumb {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-disabled);
}

.mc-search-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Notification panel — clean, Mailchimp-inspired */
.mc-notification-panel {
    min-width: 360px;
    max-height: 480px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Mobile notification panel styles moved to main @media (max-width: 767px) block below */

.mc-notification-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-4);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-notification-header-title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.mc-notification-header-count {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-teal);
    background: var(--color-teal-light);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-full);
}

.mc-notification-list {
    overflow-y: auto;
    max-height: 360px;
    flex: 1;
}

.mc-notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transition: background var(--transition-fast);
    border-bottom: var(--space-px) solid var(--color-border);
}

.mc-notification-item:last-child { border-bottom: none; }
.mc-notification-item:hover { background: var(--color-hover-bg); }

.mc-notification-icon {
    width: var(--space-8);
    height: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-input);
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.mc-notification-icon .material-symbols-rounded { font-size: var(--text-md); }

.mc-notification-content {
    flex: 1;
    min-width: 0;
}

.mc-notification-text {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

.mc-notification-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.mc-notification-type {
    font-size: var(--text-xs);
    color: var(--color-teal);
    font-weight: var(--weight-medium);
}

.mc-notification-time {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
}

.mc-notification-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3);
    border-top: var(--space-px) solid var(--color-border);
    color: var(--color-teal);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.mc-notification-footer:hover {
    background: var(--color-hover-bg);
    text-decoration: none;
}

.mc-notification-footer .material-symbols-rounded { font-size: var(--text-sm); }

.mc-notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.mc-notification-empty .material-symbols-rounded {
    font-size: var(--text-2xl);
    color: var(--color-border-strong);
}

.mc-notification-empty-sub {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
}

/* Icon buttons */
/* Topbar icon buttons.
   The right-hand cluster holds six controls (theme, colour scheme, tour,
   welcome, notifications, language). At full-strength --color-text they all
   competed with the page content for attention. Muting the idle state lets
   hover carry the signal and keeps the chrome quiet — the same treatment
   applied to idle sidebar entries. */
/* Every control in the right cluster is a bordered chip of the same size, so
   the row reads as one segmented group instead of glyphs floating on the
   surface. The border is the quiet default; hover fills it. */
.mc-topbar-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: var(--space-9); height: var(--space-9);
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer; border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
    position: relative;
}
.mc-topbar-icon-btn:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
/* Open dropdown = the chip stays lit, so it is obvious which control the
   panel below belongs to. */
.mc-dropdown:has(.mc-dropdown-menu.active) > .mc-topbar-icon-btn {
    background: var(--color-hover-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.mc-topbar-icon-btn:active { background: var(--color-active-bg); }
.mc-topbar-icon-btn:focus-visible {
    outline: var(--space-0-5) solid var(--color-border-focus);
    outline-offset: 2px;
    color: var(--color-text);
}
.mc-topbar-icon-btn svg { width: 20px; height: 20px; }
.mc-topbar-icon-btn .material-symbols-rounded { font-size: var(--text-xl); }
.mc-topbar-icon-btn .mc-notification-dot {
    position: absolute; top: var(--space-1-5); right: var(--space-1-5);
    width: var(--space-2); height: var(--space-2);
    background: var(--color-error); border-radius: 50%;
    border: var(--space-0-5) solid var(--color-card-bg);
}

/* User — the account menu, last item in .mc-topbar-right so it lands in the
   far right corner. Moved here from the sidebar footer. */
.mc-topbar-user {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    cursor: pointer; border-radius: var(--radius-full);
    /* Bordered like the icon chips beside it — the account control is the
       heaviest item in the row and looked unanchored without one. */
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    max-width: 220px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.mc-topbar-user:hover {
    background: var(--color-hover-bg);
    border-color: var(--color-border-strong);
}
.mc-topbar-user:focus-visible {
    outline: var(--space-0-5) solid var(--color-teal);
    outline-offset: 2px;
}
.mc-topbar-user-name {
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text);
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-topbar-user-chevron {
    font-size: 16px; flex-shrink: 0; color: var(--color-text-muted);
    font-variation-settings: 'wght' 200, 'FILL' 0;
    transition: transform var(--transition-fast);
}
.mc-topbar-user:has(.mc-dropdown-menu.active) {
    background: var(--color-hover-bg);
    border-color: var(--color-border-strong);
}
.mc-topbar-user:has(.mc-dropdown-menu.active) .mc-topbar-user-chevron { transform: rotate(180deg); }

/* Narrow desktop: the name is the first thing to go — the avatar still
   identifies the account and the menu header repeats the name in full. */
@media (max-width: 1100px) {
    .mc-topbar-user-name { display: none; }
}

/* Breadcrumb */
.mc-breadcrumb {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); color: var(--color-text-muted);
    padding: var(--space-2) 0;
}
.mc-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.mc-breadcrumb a:hover { color: var(--color-teal); }
.mc-breadcrumb-separator { color: var(--color-border); }
.mc-breadcrumb-current { color: var(--color-text); font-weight: var(--weight-medium); }

/* ==========================================================================
   Content Header (edge-to-edge white bar for page titles)
   ========================================================================== */

/* Page header.
   Pinned directly beneath the (already sticky) topbar so the page title and
   its primary action stay reachable while scrolling a long listing — you can
   hit "Create campaign" from row 200 without scrolling back up. Sits one
   layer below the topbar so the two stack correctly rather than fight.
   The login-as and system-alert bars scroll away above it by design. */
.mc-content-header {
    background: var(--color-card-bg);
    border-bottom: var(--space-px) solid var(--color-border);
    padding: var(--space-3-5) var(--space-6);
    position: sticky;
    top: var(--topbar-height);
    z-index: calc(var(--z-topbar) - 1);
}

.mc-content-header-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.mc-content-header-inner > :first-child { flex: 1; min-width: 0; }

/* ==========================================================================
   Content Area
   ========================================================================== */

.mc-content { flex: 1; padding: var(--space-6); }
.mc-content-inner { max-width: var(--content-max-width); margin: 0 auto; }

/* Wider viewports get more breathing room. A fixed 24px gutter that reads
   correctly on a 1280px laptop looks cramped once the shell is 1900px wide. */
@media (min-width: 1440px) {
    .mc-content { padding: var(--space-8) var(--space-10); }
    .mc-content-header { padding: var(--space-4) var(--space-10); }
}

/* White background variant — opt-in per page for cleaner listing views */
.mc-content.mc-page-white-bg { background: var(--color-card-bg); }

/* ==========================================================================
   Mobile overlay
   ========================================================================== */

.mc-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: var(--color-overlay);
    z-index: calc(var(--z-sidebar) - 1);
}

/* ==========================================================================
   Responsive — Tablet + Mobile (sidebar collapsed / hidden, overlay open)
   ========================================================================== */

@media (max-width: 1199px) {
    .mc-sidebar { width: var(--sidebar-collapsed); }
    .mc-app-body { margin-left: var(--sidebar-collapsed); }

    .mc-sidebar-logo-content,
    .mc-nav-item-label,
    .mc-nav-group-label,
    .mc-nav-arrow,
    .mc-nav-badge,
    .mc-nav-submenu { display: none; }

    .mc-sidebar-logo {
        justify-content: center;
        padding: var(--space-3) var(--space-1);
    }

    .mc-sidebar-favicon { display: flex; }

    .mc-nav-item {
        justify-content: center;
        padding: var(--space-2-5);
        margin: var(--space-px) var(--space-1);
    }

    .mc-nav-item-icon .material-symbols-rounded {
        font-size: var(--text-xl);
    }

    /* Auto-collapsed rail: same swap as the .sidebar-collapsed class. */
    .mc-sidebar-footer { padding: var(--space-2) var(--space-1); }
    .mc-sidebar-plan-card { display: none; }
    .mc-sidebar-plan-mini { display: flex; }

    /* --- Overlay open: restore full sidebar as overlay --- */
    .mc-app.sidebar-mobile-open .mc-sidebar {
        width: var(--sidebar-width);
        z-index: calc(var(--z-sidebar) + 1);
    }
    .mc-app.sidebar-mobile-open .mc-sidebar-overlay { display: block; }

    .mc-app.sidebar-mobile-open .mc-sidebar-logo {
        justify-content: flex-start;
        padding: var(--space-3) var(--space-4);
    }
    .mc-app.sidebar-mobile-open .mc-sidebar-logo-content { display: flex; }
    .mc-app.sidebar-mobile-open .mc-sidebar-favicon { display: none; }
    .mc-app.sidebar-mobile-open .mc-sidebar-logo-text,
    .mc-app.sidebar-mobile-open .mc-nav-item-label,
    .mc-app.sidebar-mobile-open .mc-nav-group-label,
    .mc-app.sidebar-mobile-open .mc-nav-arrow,
    .mc-app.sidebar-mobile-open .mc-nav-badge { display: block; }

    .mc-app.sidebar-mobile-open .mc-nav-item {
        justify-content: flex-start;
        padding: var(--space-2) var(--space-4);
        margin: var(--space-px) var(--space-2);
    }

    .mc-app.sidebar-mobile-open .mc-nav-item-icon .material-symbols-rounded {
        font-size: inherit;
    }

    .mc-app.sidebar-mobile-open .mc-sidebar-footer { padding: var(--space-3); }
    .mc-app.sidebar-mobile-open .mc-sidebar-plan-card { display: flex; }
    .mc-app.sidebar-mobile-open .mc-sidebar-plan-mini { display: none; }
}

/* ==========================================================================
   Responsive — Mobile (sidebar fully hidden by default)
   ========================================================================== */

@media (max-width: 767px) {
    html, body { overflow-x: hidden; }

    /* Content header: stack title and actions vertically on mobile.
       Sticky is dropped here — stacked onto two rows beneath a sticky topbar
       it would consume roughly a fifth of a phone viewport permanently. */
    .mc-content-header {
        padding: var(--space-3) var(--space-4);
        position: static;
    }
    .mc-content-header-inner {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    /* Title block always takes the full width so actions go to a new row */
    .mc-content-header-inner > :first-child {
        min-width: 0;
        flex-basis: 100%;
    }

    .mc-sidebar {
        width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
    }

    .mc-app.sidebar-mobile-open .mc-sidebar { transform: translateX(0); }

    /* Sidebar footer: allow user menu dropdown to escape overflow */
    .mc-app.sidebar-mobile-open .mc-sidebar { overflow: visible; }
    .mc-app.sidebar-mobile-open .mc-sidebar-nav { max-height: calc(100vh - var(--topbar-height) - 80px); }

    /* The user menu no longer lives in the sidebar — its mobile bottom-sheet
       treatment now hangs off .mc-topbar-user further down this block. */

    .mc-app-body { margin-left: 0; overflow-x: hidden; }

    .mc-content { padding: var(--space-4); overflow-x: hidden; }

    /* Topbar: reduce gap between icons for mobile */
    .mc-topbar-right { gap: var(--space-0-5); }

    /* Seven 44px chips leave no room for a title on a phone — the page's own
       <h1> is right below the topbar anyway. Breadcrumbs still render. */
    .mc-topbar-title { display: none; }

    /* A topbar heading loses its text for the same reason, but any control that
       travelled with the subtitle has nowhere else to go, so it stays. */
    .mc-topbar-subtitle-text { display: none; }

    /* Topbar icon buttons: ensure min 44px touch target */
    .mc-topbar-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    /* User avatar in topbar: proper touch target */
    .mc-topbar-user { padding: var(--space-1); }

    /* Topbar: remove sticky on mobile so fixed dropdowns work correctly */
    .mc-topbar {
        position: relative;
    }

    /* Notification panel: full-width fixed on mobile (topbar is relative, not sticky) */
    .mc-dropdown-menu.mc-notification-panel {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        width: 100vw;
        min-width: 0;
        max-height: 80vh;
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        box-shadow: var(--shadow-modal);
        z-index: calc(var(--z-topbar) + 10);
        margin-top: 0;
        transform: none;
    }
    .mc-dropdown-menu.mc-notification-panel.active {
        transform: none;
    }

    /* Account menu on mobile. The topbar sits inside an overflow-x container,
       so Dropdown.js opens this with fixed positioning and owns top/left —
       a bottom-sheet rule here would be overridden by those inline styles.
       All this needs to do is keep the panel inside the viewport: 100vw would
       push the right edge off-screen once JS clamps the left edge to 8px. */
    .mc-topbar-user .mc-dropdown-menu.mc-user-menu {
        min-width: 0;
        width: calc(100vw - var(--space-4));
        max-width: calc(100vw - var(--space-4));
        max-height: 85vh;
        overflow-y: auto;
        box-shadow: var(--shadow-modal);
    }
}