/* PuffinMail overrides for the Notifuse console, injected into its index.html by patch.sh.
   The theme colour itself (links, tabs, switches, selected menu items) is recoloured to navy in the bundle;
   this file handles what a single colour can't express. */

/* Primary buttons: brand yellow with navy text, like puffinmail.co (white text on yellow is unreadable). */
.ant-btn-primary:not(:disabled):not(.ant-btn-dangerous),
.ant-btn-color-primary.ant-btn-variant-solid:not(:disabled):not(.ant-btn-dangerous) {
  background: #ffd23f !important;
  border-color: transparent !important;
  color: #0b1b33 !important;
  box-shadow: 0 2px 0 #f0b400 !important;
  font-weight: 600;
}
.ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):hover,
.ant-btn-color-primary.ant-btn-variant-solid:not(:disabled):not(.ant-btn-dangerous):hover {
  background: #ffc61a !important;
}
.ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):active,
.ant-btn-color-primary.ant-btn-variant-solid:not(:disabled):not(.ant-btn-dangerous):active {
  background: #f0b400 !important;
}

/* The login background is our own artwork now, so hide the original photo's credit. */
div:has(> a[href*='unsplash.com/fr/@zetong']) {
  display: none !important;
}

/* ---- Workspace sidebar (main menu) ---- */

/* Warm white instead of Notifuse's grey (#FFFFFF is set inline on the sider, hence !important). */
.workspace-sider,
.workspace-sider .ant-menu {
  background: #fffdf6 !important;
}

/* Bigger logo: Notifuse sizes it for its own wordmark (31px tall). The collapsed icon keeps its size. */
.workspace-sider img[src='/console/logo.png'] {
  height: 40px !important;
}

/* Hover: pale yellow tint (all side menus: main sidebar, settings, blog, collapsed pop-outs). */
.ant-menu-light .ant-menu-item:not(.ant-menu-item-selected):hover,
.ant-menu-light .ant-menu-submenu-title:hover {
  background: #fff6cc !important;
  color: #0b1b33 !important;
}

/* Selected item: soft yellow with navy text and a gold edge, instead of the theme's derived grey. */
.ant-menu-light .ant-menu-item-selected {
  background: #ffe27a !important;
  color: #0b1b33 !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #f0b400;
}
.ant-menu-light .ant-menu-item-selected .anticon,
.ant-menu-light .ant-menu-item-selected svg {
  color: #0b1b33 !important;
}

/* A section whose child page is open: navy, bold title. */
.ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: #0b1b33 !important;
  font-weight: 600;
}

/* ---- Top bar ---- */

/* "Filled" dropdowns (workspace switcher, timezone, ...): white field with a fine warm border instead of grey. */
.ant-select-filled,
.ant-select-filled .ant-select-selector {
  background: #ffffff !important;
}
.ant-select-filled {
  border: 1px solid #ece4c8 !important;
  border-radius: 8px;
}
.ant-select-filled:hover,
.ant-select-filled.ant-select-focused {
  border-color: #ffc61a !important;
}
/* A thin line under the white top bar, now that it no longer contrasts with the page. */
.ant-layout-header {
  border-bottom: 1px solid #f0f0f0;
}

/* ---- Content area ---- */

/* Dashboard stat tiles (Tailwind bg-gray-100): very light yellow with a warm border, echoing the sidebar. */
main .bg-gray-100.rounded-lg {
  background: #fffbea !important;
  border: 1px solid #f3e9c6;
}

/* Segmented toggles (7D/14D/30D/90D, All/Broadcasts/Transactional): pale yellow track, selected on white. */
.ant-segmented {
  background: #fff6d6 !important;
}
.ant-segmented .ant-segmented-item-selected,
.ant-segmented .ant-segmented-thumb {
  background: #ffffff !important;
  color: #0b1b33 !important;
}
.ant-segmented .ant-segmented-item:not(.ant-segmented-item-selected):hover {
  color: #0b1b33 !important;
}

/* ---- Dropdown lists (workspace switcher, timezone, every Select) and menus ---- */

/* Selected option: soft yellow, navy bold text (the theme derives a grey from navy). */
.ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled),
.ant-dropdown .ant-dropdown-menu-item-selected,
.ant-cascader-dropdown .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
  background: #fff3c4 !important;
  color: #0b1b33 !important;
  font-weight: 600;
}
/* Its tick: gold instead of navy. */
.ant-select-dropdown .ant-select-item-option-selected .ant-select-item-option-state {
  color: #8a6100 !important;
}
/* Hover / keyboard focus on other options: pale yellow tint. */
.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-selected),
.ant-dropdown .ant-dropdown-menu-item:not(.ant-dropdown-menu-item-selected):hover,
.ant-cascader-dropdown .ant-cascader-menu-item:hover {
  background: #fffbea !important;
}

/* ---- Tailwind accent colours ----
   The console also uses Tailwind utilities (text-indigo-500, text-purple-*, to-violet-*, ...) for its old purple
   accents. Tailwind v4 reads them from these variables inside a cascade layer, so unlayered overrides here win.
   Purple/indigo text -> PuffinMail navy; light tints -> pale yellow; gradient accents -> brand yellow. */
:root,
:host {
  --color-indigo-100: #fff6d6;
  --color-indigo-500: #12284a;
  --color-purple-400: #3d5a87;
  --color-purple-500: #24406b;
  --color-purple-600: #12284a;
  --color-violet-50: #fffbea;
  --color-violet-500: #f0b400;
  --color-fuchsia-500: #ffc61a;
}