/* =============================================================================
   Theme layer (19 Oct 2026). Loaded last.

   Every component that carries the brand colour is tied to a theme variable
   here, so a theme picked in Settings > General > Branding reaches all of it:
   header, badges, avatars, panel headers, menus, buttons, links, chips.
   The values for each theme are set by branding-runtime.js (THEMES); the
   defaults below are Original (AM Navy, no purple).

     --am-blue*        buttons, selected states, soft backgrounds (button-kit)
     --accent*         links and active text
     --panel-header    the dark band at the top of every slide-over panel
     --am-gradient     avatars and identity tiles
     --am-badge        count badges on the header (bell, inbox, chat)
     --am-bright       the one bright call to action on a dark band
   ============================================================================= */

:root {
    --am-gradient: #19213b;   /* solid: icon tiles and avatars carry no gradient */
    --am-badge: #2f6bff;
    --am-badge-text: #ffffff;
    --am-bright: #2f6bff;
    --am-bright-text: #ffffff;
    --header-divider: #232329;
}

/* ---- Header ---------------------------------------------------------------- */
.notification-badge { background: var(--am-badge); color: var(--am-badge-text); }
.notification-badge--dot { background: var(--status-danger); }
.header-date-chip { border-right-color: var(--header-divider); }
.header-date-chip__title:hover,
.header-date-chip__action:hover { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.header-user-avatar { background: var(--am-gradient); color: #fff; box-shadow: 0 0 0 2px var(--surface-header-border); }
.header-user-avatar:hover { box-shadow: 0 0 0 2px var(--text-on-dark-muted); }

/* The Agent Meeko button wears the header's icon colour like every icon
   beside it (white on dark headers, black on Mono), not its own gradient. */
#headerAgentMeekoButton { color: var(--text-on-dark); }
#headerAgentMeekoButton svg stop { stop-color: currentColor; }
#headerAgentMeekoButton svg [fill]:not([fill="none"]) { fill: currentColor; }

.header-create-menu__row:hover,
.header-create-menu__row:hover .header-create-menu__icon,
.header-mail-menu__compose:hover { color: var(--am-blue); }
.header-mail-menu__unread { background: var(--am-blue); }

/* A light header (none of the themes today; kept for a future one). Only the header switches to dark text; panels, toasts
   and buttons that also use --text-on-dark keep white. */
[data-am-header="light"] .top-header {
    --text-on-dark: #0f1115;
    --text-on-dark-muted: #5a616b;
    --header-divider: #e5e5e5;
}

/* ---- Main menu and sub menu ------------------------------------------------- */
.navigation-rail, .sub-navigation { --accent-tint: var(--am-blue-soft); }
.module-button--active { color: var(--am-blue); background: var(--am-blue-soft); }
.navigation-rail .module-button--active::before { background: var(--am-blue); }

/* ---- Slide-over panels ------------------------------------------------------ */
.slide-over__header { background: var(--panel-header); }
.slide-over__identity:not(.slide-over__identity--call):not(.slide-over__identity--tile) { background: var(--am-gradient); box-shadow: none; }
.slide-over__identity--call,
.slide-over__identity--tile { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.slide-over__header-create { background: var(--am-bright); color: var(--am-bright-text); }
.slide-over__header-create:hover:not(:disabled) { background: var(--am-bright); }

/* ---- Avatars and identity tiles -------------------------------------------- */
.person-avatar,
.avatar-uploader__preview,
.state-message__glyph,
.mail-avatar { background: var(--am-gradient); }

/* ---- Chat (staff hub) ------------------------------------------------------- */
.staff-chat-tab-badge { background: var(--am-bright); color: var(--am-bright-text); }
.chat-popup__icon { background: var(--am-blue); }
.staff-chat__pin { color: var(--am-blue); }
.staff-chat__mention { background: var(--am-blue-soft); color: var(--am-blue); }
.staff-chat__item--meeko { border-color: var(--am-blue-soft-hover); background: var(--am-blue-tint); }
.staff-chat__item--meeko:hover { background: var(--am-blue-soft); }
.staff-chat__group-face--meeko { background: var(--surface-meeko-mark); }

/* ---- Links and small accents across modules -------------------------------- */
.website-domain,
.my-account-domain-link { color: var(--accent); }
.projects-progress__track > span { background: var(--am-blue); }
.portal-switch input:focus-visible + .portal-switch__track { outline-color: var(--am-blue); }
.agency-plan-card__pill--accent { background: var(--am-blue-soft); color: var(--am-blue); }
.agency-plan-card__sync .icon { color: var(--am-blue); }

/* Finance, projects and automations */
.invoice-item-cycle,
.automation-create,
.automation-card__icon,
.automation-card__edit:hover,
.project-activity__icon,
.calendar-cell--today .calendar-cell__day { color: var(--am-blue); }
.calendar-cell--today { border-color: var(--am-blue); }

/* Email */
.mail-search:focus-within { border-bottom-color: var(--am-blue); color: var(--am-blue); }
.mail-folder__count { background: var(--am-blue); }
.mail-folder--active .mail-folder__count { color: var(--am-blue); }
.mail-tick:hover { border-color: var(--am-blue); }
.mail-tick.is-on { border-color: var(--am-blue); background: var(--am-blue); }
.mail-link-chip,
.tpl-chip { color: var(--am-blue); }
.tpl-canvas--dropping { outline-color: var(--am-blue); }

/* ---- Purple glows and focus rings left from the old look -------------------- */
/* No glow behind the Agent Meeko icon: it is a plain header icon like the rest. */
#headerAgentMeekoButton::before,
#headerAgentMeekoButton::after { content: none !important; display: none !important; background: none !important; box-shadow: none !important; animation: none !important; }
#headerAgentMeekoButton { box-shadow: none; filter: none; }
/* !important: the twinkle animation animates a violet drop-shadow, and an
   animation outranks a normal declaration. */
#headerAgentMeekoButton .icon { filter: none !important; }
.state-message__glyph,
.avatar-uploader__preview { box-shadow: 0 10px 26px -12px rgba(16, 24, 40, 0.45); }
.sign-in-screen .form-field__control:focus,
.my-account-card-form__field.StripeElement--focus { box-shadow: var(--am-focus); }
.my-account-banner__progress { background: var(--am-blue-soft); }
.billing-lock { background: radial-gradient(1200px 600px at 50% -10%, rgba(52, 67, 122, 0.35), transparent 60%), #0d0f13; }

/* ---- Sign-in screen (20 Oct 2026) ------------------------------------------
   Original keeps the all-dark sign-in exactly as it was. Every other theme
   signs in the way its app looks: the theme's canvas behind the form, white
   cards, the app's own fields and text colours, and buttons in the theme's
   primary. The stage on the left stays a night sky in the theme's colours
   (branding-runtime.js STAGE_PALETTES), so the white claim over it reads.
   The same shell carries sign-up, the 2-step code, enrolment and the
   choose-password step after an invite or reset, so all of them follow. */
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen {
    --sign-in-form-surface: var(--surface-canvas);
    --sign-in-panel-surface: var(--surface-panel);
    --sign-in-hairline: var(--border-strong);
    --sign-in-field-surface: var(--surface-panel);
    --sign-in-text: var(--text-primary);
    --sign-in-text-muted: var(--text-secondary);
    background: var(--sign-in-form-surface);
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-in-column { border-left-color: var(--border-default); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-in-card__footnote,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .form-field__hint,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .form-field__label,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-in-remember { color: var(--text-secondary); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .form-field__control::placeholder { color: var(--text-muted); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .form-field__control:focus {
    background: var(--surface-panel);
    border-color: var(--am-blue);
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .form-field__control:-webkit-autofill,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .form-field__control:-webkit-autofill:hover,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .form-field__control:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--surface-panel);
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .password-field__reveal-button { color: var(--text-muted); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .password-field__reveal-button:hover {
    background: var(--am-blue-soft);
    color: var(--text-primary);
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .button--primary {
    background: var(--am-blue);
    border-color: var(--am-blue);
    color: #ffffff;
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .button--primary:hover:not(:disabled) {
    background: var(--am-blue-hover);
    border-color: var(--am-blue-hover);
}
/* Forest's jade is a touch light for white button text; a shade deeper keeps AA. */
[data-am-theme="forest"] .sign-in-screen .button--primary { background: var(--am-blue-hover); border-color: var(--am-blue-hover); }
[data-am-theme="forest"] .sign-in-screen .button--primary:hover:not(:disabled) { background: var(--am-blue-press); border-color: var(--am-blue-press); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .button--secondary {
    background: var(--surface-panel);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .button--secondary:hover:not(:disabled) {
    background: var(--am-blue-soft);
    color: var(--text-primary);
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .inline-notice {
    background: var(--status-danger-tint);
    border: 1px solid rgba(217, 45, 32, 0.25);
    color: #8a231a;
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .inline-notice--success {
    background: var(--status-success-tint);
    border-color: rgba(15, 157, 88, 0.25);
    color: #0a6b3d;
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .inline-notice--info {
    background: var(--status-info-tint);
    border-color: rgba(21, 72, 159, 0.2);
    color: #15489f;
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen #twoFactorEnrolSecret {
    background: var(--am-blue-tint) !important;
    color: var(--text-primary);
}
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen #twoFactorEnrolQr { border: 1px solid var(--border-default); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-in-tabs { background: var(--surface-panel); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-in-tabs__tab { color: var(--text-secondary); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-in-tabs__tab:hover { color: var(--text-primary); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-in-tabs__tab.is-active { background: var(--am-blue-soft); color: var(--am-blue); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__tick { background: var(--border-default); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__tick.is-done { background: var(--am-blue-soft-hover); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__tick.is-here { background: var(--am-blue); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__optional,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__hint,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__mock,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__trial-note,
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up-summary { color: var(--text-secondary); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__subdomain-suffix { background: var(--surface-subtle); color: var(--text-secondary); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__trial { background: var(--am-blue-tint); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__hint--error { color: var(--status-danger); }
[data-am-theme]:not([data-am-theme="original"]) .sign-in-screen .sign-up__hint--good { color: #0a6b3d; }

/* Narrow screens: the compact mark sits on the light column, so the script
   repaints its letters in the theme's header colour (sign-in-stage.js), or
   shows the agency's own login logo when it has one. */
.sign-in-card__compact-mark--logo {
    width: auto;
    max-width: 200px;
    max-height: 56px;
}

/* On an agency's host a narrow screen keeps the theme's night sky behind the
   form (components.css), so the footnote under the card reads in the light
   text used on dark surfaces rather than the canvas's secondary grey. The
   card itself keeps the theme's solid panel. */
@media (max-width: 880px) {
    [data-am-theme]:not([data-am-theme="original"]) .sign-in-screen.sign-in-screen--agency .sign-in-card__footnote {
        color: var(--text-on-dark-muted);
    }
}