:root {
  --dashboard-navbar-offset: 3.5rem;
  --primary-color: #101E45;
  --secondary-color: #1F305E;
  --tertiary-color: #2F407E;
  --quaternary-color: #3F509E;
  --quinary-color: #4F60BE;
  --senary-color: #5F70DE;
  --septenary-color: #6F80FE;
  --octonary-color: #7F901E;
  --nonary-color: #8FA03E;
  --denary-color: #9FB05E;

  --wpsa-am-blue: #101E45;

  --wpsa-navbar: #faf7f2;
  --wpsa-sidebar: #e8e2d5;
  --wpsa-sidebar-active: #395ca6;
  --wpsa-sidebar-active-bg: rgb(28 66 134 / 8%);
  --wpsa-logo: #1c4286;
  --wpsa-navbar-active-text: #1c4286;
  --wpsa-navbar-active-bg: rgb(28 66 134 / 8%);
  --wpsa-sidebar-active-text: #ffffff;
  --wpsa-sidebar-inactive-text: #4a453a;    /* Dark muted warm-gray for unselected items */
  --wpsa-footer: var(--wpsa-sidebar);
  --bs-navbar-color: var(--wpsa-navbar);
  --wpsa-body-bg: var(--wpsa-navbar);

  /* ── Hue-tinted strip / avatar palette (light mode) ──────────────────
   * Override in [data-bs-theme="dark"] below. All oklch() usages in
   * CSS files and inline styles reference these vars so dark mode
   * only needs to change values here, not in every file.
   * --wpsa-strip-*   : wide colour strip behind hero headers
   * --wpsa-strip2-*  : second gradient stop (customer hero uses radial)
   * --wpsa-avatar-*  : avatar circle/square background
   * --wpsa-avatarfg-*: avatar initials text (dark on light, light on dark)
   * ──────────────────────────────────────────────────────────────────── */
  --wpsa-strip-l:    0.90;
  --wpsa-strip-c:    0.07;
  --wpsa-strip2-l:   0.85;
  --wpsa-strip2-c:   0.09;
  --wpsa-avatar-l:   0.93;
  --wpsa-avatar-c:   0.06;
  --wpsa-avatarfg-l: 0.40;
  --wpsa-avatarfg-c: 0.16;

  --wpsa-white: #ffffff;
  --wpsa-gray-100: #f8f9fa;
  --wpsa-gray-200: #e9ecef;
  --wpsa-gray-300: #dee2e6;
  --wpsa-gray-400: #ced4da;
  --wpsa-gray-500: #adb5bd;
  --wpsa-gray-600: #6c757d;
  --wpsa-gray-700: #495057;
  --wpsa-gray-800: #343a40;
  --wpsa-gray-900: #212529;

  --wpsa-blue-100: #cfe2ff;
  --wpsa-blue-200: #9ec5fe;
  --wpsa-blue-300: #6ea8fe;
  --wpsa-blue-400: #3d8bfd;
  --wpsa-blue-500: #0d6efd;
  --wpsa-blue-600: #0a58ca;
  --wpsa-blue-700: #084298;
  --wpsa-blue-800: #052c65;
  --wpsa-blue-900: #031633;

  --wpsa-indigo-100: #e0cffc;
  --wpsa-indigo-200: #c29ffa;
  --wpsa-indigo-300: #a370f7;
  --wpsa-indigo-400: #8540f5;
  --wpsa-indigo-500: #6610f2;
  --wpsa-indigo-600: #520dc2;
  --wpsa-indigo-700: #3d0a91;
  --wpsa-indigo-800: #290661;
  --wpsa-indigo-900: #140330;

  --wpsa-purple-100: #e2d9f3;
  --wpsa-purple-200: #c5b3e6;
  --wpsa-purple-300: #a98eda;
  --wpsa-purple-400: #8c68cd;
  --wpsa-purple-500: #6f42c1;
  --wpsa-purple-600: #59359a;
  --wpsa-purple-700: #432874;
  --wpsa-purple-800: #2c1a4d;
  --wpsa-purple-900: #160d27;

  --wpsa-pink-100: #f7d6e6;
  --wpsa-pink-200: #efadce;
  --wpsa-pink-300: #e685b5;
  --wpsa-pink-400: #de5c9d;
  --wpsa-pink-500: #d63384;
  --wpsa-pink-600: #ab296a;
  --wpsa-pink-700: #801f4f;
  --wpsa-pink-800: #561435;
  --wpsa-pink-900: #2b0a1a;

  --wpsa-red-100: #f8d7da;
  --wpsa-red-200: #f1aeb5;
  --wpsa-red-300: #ea868f;
  --wpsa-red-400: #e35d6a;
  --wpsa-red-500: #dc3545;
  --wpsa-red-600: #b02a37;
  --wpsa-red-700: #842029;
  --wpsa-red-800: #58151c;
  --wpsa-red-900: #2c0b0e;

  --wpsa-orange-100: #ffe5d0;
  --wpsa-orange-200: #fecba1;
  --wpsa-orange-300: #feb272;
  --wpsa-orange-400: #fd9843;
  --wpsa-orange-500: #fd7e14;
  --wpsa-orange-600: #ca6510;
  --wpsa-orange-700: #984c0c;
  --wpsa-orange-800: #653208;
  --wpsa-orange-900: #331904;

  --wpsa-yellow-100: #fff3cd;
  --wpsa-yellow-200: #ffe69c;
  --wpsa-yellow-300: #ffda6a;
  --wpsa-yellow-400: #ffcd39;
  --wpsa-yellow-500: #ffc107;
  --wpsa-yellow-600: #cc9a06;
  --wpsa-yellow-700: #997404;
  --wpsa-yellow-800: #664d03;
  --wpsa-yellow-900: #332701;

  --wpsa-green-100: #d1e7dd;
  --wpsa-green-200: #a3cfbb;
  --wpsa-green-300: #75b798;
  --wpsa-green-400: #479f76;
  --wpsa-green-500: #198754;
  --wpsa-green-600: #146c43;
  --wpsa-green-700: #0f5132;
  --wpsa-green-800: #0a3622;
  --wpsa-green-900: #051b11;

  --wpsa-teal: #20c997;
  --wpsa-teal-100: #d2f4ea;
  --wpsa-teal-200: #a6e9d5;
  --wpsa-teal-300: #79dfc1;
  --wpsa-teal-400: #4dd4ac;
  --wpsa-teal-500: #20c997;
  --wpsa-teal-600: #1aa179;
  --wpsa-teal-700: #13795b;
  --wpsa-teal-800: #0d503c;
  --wpsa-teal-900: #06281e;

  --wpsa-cyan-100: #cff4fc;
  --wpsa-cyan-200: #9eeaf9;
  --wpsa-cyan-300: #6edff6;
  --wpsa-cyan-400: #3dd5f3;
  --wpsa-cyan-500: #0dcaf0;
  --wpsa-cyan-600: #0aa2c0;
  --wpsa-cyan-700: #087990;
  --wpsa-cyan-800: #055160;
  --wpsa-cyan-900: #032830;
}

[data-bs-theme="dark"] {
  --wpsa-strip-l:    0.26;
  --wpsa-strip-c:    0.09;
  --wpsa-strip2-l:   0.21;
  --wpsa-strip2-c:   0.12;
  --wpsa-avatar-l:   0.24;
  --wpsa-avatar-c:   0.10;
  --wpsa-avatarfg-l: 0.88;
  --wpsa-avatarfg-c: 0.12;
}

body.bg-body-wpsa {
  background-color: var(--wpsa-body-bg);
}

body.dashboard-logged-in {
  padding-top: var(--dashboard-navbar-offset);
  background-color: var(--wpsa-body-bg);
}

/* Make the inner row fill the full remaining height so sidebar columns
   always stretch to the bottom of the viewport, not just to the content. */
body.dashboard-logged-in > main {
  display: flex;
  flex-direction: column;
}

body.dashboard-logged-in > main > .container-fluid {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body.dashboard-logged-in > main > .container-fluid > .row {
  flex: 1;
}

main div.container-fluid {
  padding-right: 0px!important;
  padding-left: 0px!important;
}

/*
 * Navbar - Top Navigation Bar
 */
.navbar {
  background-color: var(--wpsa-navbar);
  border-bottom: 1px dotted var(--wpsa-orange-600);

  &.sa-top {
    background: var(--primary-color);
    color: var(--wpsa-gray-200);
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    padding: 8px 16px; border-bottom: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
  }

  &.sa-top .navbar-brand {
    font-weight: 700; display: inline-flex; align-items: center; gap: 10px;
  }

  .navbar-brand img {
    background-color: var(--wpsa-logo);
    border-radius: .5rem;
  }

  .navbar-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: linear-gradient(135deg, #101e45, #3f509e);
    padding: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(16, 30, 69, 0.35);
  }

  &.sa-top .brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 7px;
    background: linear-gradient(135deg, #ffe9c4, #f5a623);
    color: #3a2b00; font-style: italic; font-weight: 800; font-size: 14px;
  }

  &.sa-top .nav-link { color: var(--wpsa-gray-200); font-weight: 500; font-size: 14px; }
  &.sa-top .nav-link:hover { color: #fff; }
  &.sa-top .form-control {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: var(--wpsa-gray-200);
  }

  &.sa-top .form-control::placeholder { color: var(--wpsa-gray-500); }
  &.sa-top .form-control:focus {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3);
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.1); color: #fff;
  }
  &.sa-top .btn-outline-light { border-color: rgba(255,255,255,.22); }
  .nav-icon-btn {
    background: transparent; border: 0; color: var(--wpsa-gray-200);
    width: 36px; height: 36px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }

  ul.dropdown-menu,
  ul.dropdown-menu li {
    background-color: var(--wpsa-navbar)!important;
  }

  .nav-link:hover,
  .dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--wpsa-navbar-active-bg)!important;
    border-radius: .5rem;
  }

  a.dropdown-toggle i.bi,
  a.dropdown-item i.bi {
    padding-right: 5px;
  }

  a.dropdown-item i.bi {
    width: 18px;
  }

  .dropdown-divider {
    border-top:1px solid var(--wpsa-white);
  }

  .dropdown-title {
    font-variant: small-caps;
    color: var(--wpsa-white);
    text-align: center;
  }

  ul.user-profile-menu {
    border-radius: 1rem;
  }
}

/* WCAG AA: sign-out link darkened for contrast on #faf7f2 dropdown background */
.user-profile-menu .dropdown-item.text-danger {
  color: #b91c2c;
}

.nav-link.active {
  background-color: var(--bs-primary-bg-subtle);
}

/*
 * Sidebar
 */
aside.wpsa-sidebar {
  background-color: var(--wpsa-sidebar);
}

/*
 * Mailboxes
 */
.mailbox-icon {
  float: right;
}

.mailbox-sidebar {
  min-height: calc(100vh - 112px);
}

.mailbox-sidebar, .conversation-contact-sidebar {
  background-color: var(--wpsa-sidebar);
}

div#mailboxes-row .card {
  background-color: var(--bs-tertiary-bg);
}

.mailbox-name a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 1.1rem;
}

/*
 * Conversation Action Bar
 */
.conversation-action-bar {
  margin-bottom: 1rem;
}

/*
 * User directory (list + profile)
 */

/* Shared with customers page — keep. */
.users-card-list .col {
  min-width: 0;
}

.users-card-hover { transition: box-shadow .15s ease, transform .15s ease; }
.users-card-hover:hover { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important; }

.users-card-avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}

.user-profile-avatar {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────
 * User directory — grouped sections (Admins/Mgrs/Agents/Bots)
 * ────────────────────────────────────────────────────────────────── */

/* Per-user hue avatar (initials). Background + colour are inlined per-row. */
.u-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  flex-shrink: 0;
}
.u-avatar-lg { width: 52px; height: 52px; font-size: 16px; }

/* Bot avatar: rounded square in neutrals, no hue. */
.u-avatar-bot { border-radius: 10px; }
.u-avatar-bot.u-avatar-lg { border-radius: 14px; }

/* Online/idle/offline/disabled dot on top-right of an avatar.
   Colour comes from a Bootstrap utility class (.bg-success etc.). */
.u-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--bs-body-bg);
}
.u-dot-on-strip {
  top: 10px; left: 12px; right: auto; bottom: auto;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .7);
}

/* Hero card tinted strip — background is inlined per-row from u.hue. */
.u-strip { height: 44px; position: relative; }

/* Pulls the big avatar up over the strip so it half-overlaps. */
.u-avatar-overhang { margin-top: -26px; border: 3px solid var(--bs-body-bg); }

/* Small uppercase eyebrow used in the hero stats row. */
.u-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bs-tertiary-color);
}

/* The 3-px round meta separator between fields on the refined card. */
.u-meta-dot { width: 3px; height: 3px; border-radius: 50%; display: inline-block; }

/* Disabled treatment — the whole card dims; the name gets a struck-through. */
.u-disabled .card { opacity: .55; }
.u-disabled .u-name {
  text-decoration: line-through;
  text-decoration-color: var(--bs-border-color);
}

/*
 * Tags — color palette (matches FreeScout tag-c-* numbering)
 */
.tag-c-0  { background-color: #97a4b0 !important; color: #fff !important; }
.tag-c-1  { background-color: #52ad67 !important; color: #fff !important; }
.tag-c-2  { background-color: #349DE9 !important; color: #fff !important; }
.tag-c-3  { background-color: #F68F33 !important; color: #fff !important; }
.tag-c-4  { background-color: #8c75bd !important; color: #fff !important; }
.tag-c-5  { background-color: #F0554F !important; color: #fff !important; }
.tag-c-6  { background-color: #9e6937 !important; color: #fff !important; }
.tag-c-7  { background-color: #e0e700 !important; color: #212529 !important; }
.tag-c-8  { background-color: #c505ac !important; color: #fff !important; }
.tag-c-9  { background-color: #8fcb3d !important; color: #fff !important; }
.tag-c-10 { background-color: #02d7d7 !important; color: #212529 !important; }
.tag-c-11 { background-color: #b7b7ff !important; color: #212529 !important; }

/*
 * Tags — settings UI
 */
.js-color-swatch {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  border: 3px solid transparent;
  box-sizing: border-box;
}

.js-color-swatch:hover {
  opacity: 0.85;
}

.js-color-swatch.selected {
  border-color: var(--bs-body-color);
  outline: 2px solid var(--bs-body-bg);
  outline-offset: -4px;
}

.tag-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.settings-tags-table th a {
  color: inherit;
  text-decoration: none;
}

.settings-tags-table th a:hover {
  text-decoration: underline;
}

/*
 * Theme toggle slider
 */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  background-color: #c9a400;
  transition: background-color 0.25s ease;
}

.theme-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.theme-toggle[aria-checked="true"] {
  background-color: #3a2d6e;
}

.theme-toggle-thumb {
  position: absolute;
  left: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  font-size: 11px;
  transition: left 0.25s ease;
  pointer-events: none;
}

.theme-toggle[aria-checked="true"] .theme-toggle-thumb {
  left: 27px;
}

.theme-toggle .theme-icon-light { color: #c9a400; }
.theme-toggle .theme-icon-dark  { color: #3a2d6e; display: none; }
.theme-toggle[aria-checked="true"] .theme-icon-light { display: none; }
.theme-toggle[aria-checked="true"] .theme-icon-dark  { display: inline; }

/** Footer **/

footer {
  h6 {
    margin-top: .5rem;
  }

  background-color: var(--wpsa-footer);

  .btn-primary {
    background-color: var(--wpsa-blue-700);
  }

  .btn-info {
    background-color: var(--wpsa-cyan-600);
  }

  .btn-danger {
    background-color: var(--wpsa-red-600);
  }
}

/** New-conversation modal: borderless Tom Select for the To field **/

.nc-to-select + .ts-wrapper {
  width: 100%;
}

.nc-to-select + .ts-wrapper .ts-control {
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  min-height: unset;
}

.nc-to-select + .ts-wrapper.focus .ts-control {
  box-shadow: none;
}

.nc-to-select + .ts-wrapper .ts-control input {
  font-size: .875rem;
}

main h2.h5 {
    background-color: var(--quinary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

.dropdown-scrollable {
    max-height: 200px; /* Set your desired height */
    overflow-y: auto;  /* Enable vertical scrollbar only if content exceeds height */
}

/* ─── Page head ─── */
.page-head { margin-bottom: 24px; }
.page-head .crumbs { font-size: 12px; color:var(--bs-secondary-color); margin-bottom: 8px; display: inline-flex; align-items: center; gap: 6px; }
.page-head .crumbs i { font-size: 10px; color:var(--bs-tertiary-color); }
.page-head .crumbs a { color:var(--bs-secondary-color); text-decoration: none; }
.page-head .crumbs a:hover { color:var(--bs-body-color); }
.page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 4px; }
.page-head .sub { color:var(--bs-secondary-color); font-size: 14px; }
.ctx-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(var(--bs-primary), .08); color:var(--bs-primary); padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ctx-chip i { font-size: 11px; }


/*
 * CKEditor
 */
.ck.ck-balloon-panel.ck-powered-by-balloon { display: none !important; }

.ck-editor__editable_inline {
  min-height: 200px;
  max-height: 500px;
}

/* Dropdowns */
.dropdown-menu {
  font-size: 15px;
  border-radius: 0 0 8px 8px;
  margin-top: 0px!important;
}

/*
 * Merlie
 */

.merlie-coming-soon {
  max-width: 200px;
  background: var(--wpsa-white);
  border-radius: 4rem;
}

.merlie-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    top: -30%; /* Offset upwards as in original */
}

.merlie-modal-content {
    background: #fff;
    border: 4px solid #3127F5;
    color: #1a202c;
    padding: 2rem 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 48rem;
    animation: merlie-fade-in-out 8s ease-in-out forwards;
}

.merlie-modal-flex {
    display: flex;
    align-items: center;
}

.merlie-mascot-container {
    flex-shrink: 0;
}

.merlie-mascot-img {
    height: 20rem; /* h-80 equivalent */
}

.merlie-text-container {
    margin-left: 1.5rem;
    text-align: left;
}

.merlie-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.merlie-subtitle {
    color: #4a5568;
    font-size: 1.875rem;
    line-height: 1.25;
}

.merlie-i {
    position: absolute;
    font-size: 0.75rem;
    top: 0.25rem;
    right: 0.25rem;
    margin-right: -0.25rem;
}

.merlie-mascot-name {
    font-size: 1.25rem;
    margin-top: 0.25rem;
}

@keyframes merlie-fade-in-out {
    0% { opacity: 0; transform: scale(0.95); }
    10% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
}

.relative { position: relative; }

/*
 * Notifications
 */
/* a#notif-view-all background removed — see notifications.css .notif-footer */

/* ─── Shared utilities ───────────────────────────────────────────────────── */

/* Breadcrumb nav used on sub-pages (notifications, profile sections, etc.) */
.page-crumbs { font-size: 12px; color: var(--bs-secondary-color); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 6px; }
.page-crumbs i { font-size: 10px; color: var(--bs-tertiary-color); }
.page-crumbs a { color: var(--bs-secondary-color); text-decoration: none; }
.page-crumbs a:hover { color: var(--bs-body-color); }

.grow { flex: 1; }

/* Icon button — small square icon-only button */
.icon-btn {
  width: 28px; height: 28px; border-radius: 6px;
  background: transparent; border: 0;
  color: var(--bs-secondary-color);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.icon-btn.danger:hover { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }

/* Saved toast — success pill shown after a save action */
.saved-toast {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bs-success-bg-subtle); color: var(--bs-success);
  border: 1px solid rgba(31, 159, 110, .25);
  padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; margin-bottom: 20px;
}
.saved-toast i { font-size: 14px; }
.saved-toast .dismiss { color: inherit; opacity: .55; padding: 0; background: transparent; border: 0; font-size: 12px; margin-left: 2px; cursor: pointer; }
.saved-toast .dismiss:hover { opacity: 1; }
.saved-toast.is-hidden,
.saved-toast[hidden] { display: none; }

/* Sticky save bar — appears at the bottom of settings forms */
.save-bar {
  position: sticky; bottom: 16px; margin-top: 1rem; z-index: 30;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg); padding: 10px 14px 10px 18px;
  box-shadow: 0 10px 28px rgba(16,24,40,.10); display: flex; align-items: center; gap: 12px;
}
.save-bar[hidden] { display: none !important; }
.save-bar .save-meta { font-size: 13px; color: var(--bs-secondary-color); display: inline-flex; align-items: center; gap: 6px; }
.save-bar .save-meta i { color: var(--bs-tertiary-color); }
.save-bar .save-actions { margin-left: auto; display: flex; gap: 8px; }
/* When a saved-toast lives inside a save-bar it anchors right instead of stacking below */
.save-bar .saved-toast { margin-left: auto; margin-bottom: 0; }
/* ════════════════════════════════════════════════════════════════════════════
   Notification DROPDOWN redesign — additions for public/css/notifications.css
   Append this block. Everything is scoped under #notif-dropdown so it can't
   affect other dropdown-menus. Colours reuse existing --bs-* / --wpsa-* tokens.
   Pairs with the updated navbar-notifications.html + notifications.js.
   ════════════════════════════════════════════════════════════════════════════ */

/* Panel — overrides the global .dropdown-menu radius/margin for this one menu */
#notif-dropdown.notif-panel {
  width: 384px; min-width: 384px; max-width: calc(100vw - 24px);
  padding: 0; margin-top: 6px !important;
  border: 1px solid var(--bs-border-color); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .18);
  overflow: hidden;
}

/* Header */
#notif-dropdown .notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--bs-border-color);
}
#notif-dropdown .notif-head-title {
  font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
}
#notif-dropdown .notif-head-count {
  font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--bs-primary); color: #fff; padding: 3px 7px; border-radius: 999px;
}
#notif-dropdown .notif-markread {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: 12.5px; font-weight: 500; color: var(--bs-secondary-color);
}
#notif-dropdown .notif-markread:hover { color: var(--bs-primary); }

/* Scroll area */
#notif-dropdown .notif-list { overflow: auto; max-height: 60vh; padding: 6px; }

/* Section eyebrow + divider */
#notif-dropdown .notif-section {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bs-tertiary-color); padding: 8px 10px 4px;
}
#notif-dropdown .notif-divider { height: 1px; background: var(--bs-border-color); margin: 6px 8px; }

/* Announcement row */
#notif-dropdown .ann-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 10px 10px 12px; margin: 2px;
  border-radius: 10px; border-left: 3px solid var(--bs-warning-text-emphasis);
  background: var(--bs-warning-bg-subtle);
}
#notif-dropdown .ann-item .ann-glyph { color: var(--bs-warning-text-emphasis); font-size: 15px; margin-top: 1px; }
#notif-dropdown .ann-item .ann-body { flex: 1; min-width: 0; }
#notif-dropdown .ann-item .ann-title { font-size: 13px; font-weight: 700; color: var(--bs-warning-text-emphasis); }
#notif-dropdown .ann-item .ann-text { font-size: 12px; color: var(--bs-warning-text-emphasis); opacity: .85; line-height: 1.4; margin-top: 2px; }
#notif-dropdown .ann-item .ann-x { border: 0; background: transparent; color: var(--bs-warning-text-emphasis); opacity: .6; cursor: pointer; font-size: 11px; padding: 2px; flex-shrink: 0; }
#notif-dropdown .ann-item .ann-x:hover { opacity: 1; }

/* Notification row */
#notif-dropdown .notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit;
  position: relative; transition: background .12s;
}
#notif-dropdown .notif-item:hover { background: var(--bs-tertiary-bg); }
#notif-dropdown .notif-item.is-unread { box-shadow: inset 3px 0 0 var(--bs-primary); }
#notif-dropdown .notif-item.is-unread:hover { background: var(--bs-primary-bg-subtle); }

/* Glyph tile — one colour per kind */
#notif-dropdown .notif-glyph {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
#notif-dropdown .notif-glyph.k-conv     { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
#notif-dropdown .notif-glyph.k-reply    { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis); }
#notif-dropdown .notif-glyph.k-assign   { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
#notif-dropdown .notif-glyph.k-unassign { background: var(--bs-secondary-bg);      color: var(--bs-secondary-color); }
#notif-dropdown .notif-glyph.k-happy    { background: var(--wpsa-pink-100);        color: var(--wpsa-pink-700); }
#notif-dropdown .notif-glyph.k-mention  { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
#notif-dropdown .notif-glyph.k-note     { background: var(--wpsa-purple-100);      color: var(--wpsa-purple-700); }
#notif-dropdown .notif-glyph.k-muted    { background: var(--bs-secondary-bg);      color: var(--bs-secondary-color); }

/* Body */
#notif-dropdown .notif-body { flex: 1; min-width: 0; }
#notif-dropdown .notif-row-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; line-height: 1.4; color: var(--bs-body-color); text-wrap: pretty;
}
#notif-dropdown .notif-item.is-unread .notif-row-title { font-weight: 700; }
#notif-dropdown .notif-item:not(.is-unread) .notif-row-title { color: var(--bs-secondary-color); }
#notif-dropdown .notif-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 11.5px; color: var(--bs-secondary-color); }
#notif-dropdown .notif-kind { font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-tertiary-color); }
#notif-dropdown .notif-mdot { width: 3px; height: 3px; border-radius: 50%; background: var(--bs-border-color); flex-shrink: 0; }
#notif-dropdown .notif-time { font-variant-numeric: tabular-nums; }
#notif-dropdown .notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-primary); flex-shrink: 0; margin-top: 6px; }
/* Read rows have no dot (the JS removes it on read) */

/* Footer — REPLACES the old navy #notif-view-all (a#notif-view-all { background:
   var(--primary-color) } in defaults.css made dark text on navy → invisible).
   Higher-specificity id selector wins; you may also delete that old rule. */
a#notif-view-all.notif-footer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px; border-top: 1px solid var(--bs-border-color);
  font-size: 13px; font-weight: 600; color: var(--bs-primary);
  text-decoration: none; background: var(--bs-body-bg);
  border-radius: 0; transition: background .12s;
}
a#notif-view-all.notif-footer i { font-size: 12px; transition: transform .12s; }
a#notif-view-all.notif-footer:hover { background: var(--bs-tertiary-bg); color: var(--bs-primary); }
a#notif-view-all.notif-footer:hover i { transform: translateX(2px); }

/* Empty state */
#notif-dropdown .notif-empty {
  text-align: center; color: var(--bs-secondary-color);
  font-size: 13px; padding: 28px 16px; margin: 0;
}
#notif-dropdown .notif-empty .notif-empty-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--bs-success-bg-subtle); color: var(--bs-success); font-size: 20px;
}

/* ════════════════════════════════════════════════════════════════════════════
   Search page — redesign tokens + components
   ════════════════════════════════════════════════════════════════════════════ */

/* Semantic aliases used by search components (map to existing wpsa tokens) */
:root {
  --sa-primary:        #0d6efd;
  --sa-primary-rgb:    13,110,253;
  --sa-text:           #1b1f27;
  --sa-muted:          #6b7280;
  --sa-faint:          #9aa0a8;
  --sa-border:         #e8e1d4;
  --sa-border-strong:  #d7cdba;
  --sa-app-bg:         var(--wpsa-navbar);
  --sa-row-hover:      #f6f1e8;
  --sa-success:        #1f9f6e;
  --sa-success-soft:   #e6f6ef;
  --sa-warn:           #c47a18;
  --sa-warn-soft:      #fff4dd;
  --sa-inner-bg:       #fbf9f4;
  --sa-info:           #1f6fd6;
  --sa-info-soft:      #e7f1ff;
  --sa-danger:         #d92d20;
  --sa-danger-soft:    #fde6e3;
}

/* ── Filter sidebar ── */
.search-filter-sidebar {
  background: var(--wpsa-sidebar);
  border-right: 1px solid rgba(0,0,0,.06);
  padding: 18px 16px;
  min-height: calc(100vh - var(--dashboard-navbar-offset));
}

/* On small screens the rail loses its right border and gets a bottom border instead */
@media (max-width: 767px) {
  .search-filter-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--sa-border);
    min-height: auto;
  }
}

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 4px 14px;
}
.filter-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sa-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.filter-clear {
  font-size: 12px;
  color: var(--sa-muted);
  text-decoration: none;
}
.filter-clear:hover { color: var(--sa-primary); }

/* Hide "Clear" link when on customers tab */
.search-filter-sidebar[data-tab="customers"] .filter-clear { display: none; }

/* Filter group */
.fg {
  margin-bottom: 14px;
}
.fg > label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sa-text);
  margin: 0 2px 5px;
}

/* Override Bootstrap form-select/form-control sizing inside filter rail */
.search-filter-sidebar .form-select,
.search-filter-sidebar .form-control {
  border-radius: 8px;
  font-size: 13px;
  border-color: var(--sa-border);
  background-color: #fff;
  padding: 7px 10px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.search-filter-sidebar .form-select { padding-right: 2rem; }
.search-filter-sidebar .form-select:focus,
.search-filter-sidebar .form-control:focus {
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 3px rgba(var(--sa-primary-rgb), .18);
}

.fg-divider {
  border: 0;
  border-top: 1px solid var(--sa-border);
  margin: 16px 2px;
}

/* Date range stacked pair */
.date-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.date-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.date-field > span {
  font-size: 11px;
  font-weight: 500;
  color: var(--sa-muted);
  margin: 0 2px;
}

/* Customers-tab empty state */
.filters-empty {
  text-align: center;
  color: var(--sa-muted);
  padding: 28px 10px;
}
.filters-empty i {
  font-size: 24px;
  color: var(--sa-faint);
  display: block;
  margin-bottom: 10px;
}
.filters-empty p {
  font-size: 12.5px;
  margin: 0;
  line-height: 1.55;
}

/* ── Search body ── */
.search-body {
  padding: 24px 32px 64px;
}
.search-inner {
  max-width: 880px;
}
@media (max-width: 767px) {
  .search-body { padding: 20px 18px 48px; }
}

/* ── Search hero ── */
.search-hero {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 18px;
}
.search-hero-field {
  position: relative;
  flex: 1;
}
.search-hero-field > .bi {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--sa-faint);
  pointer-events: none;
}
.search-hero-field .form-control {
  height: 46px;
  border: 1px solid var(--sa-border-strong);
  border-radius: 10px;
  background: #fff;
  padding-left: 42px;
  font-size: 16px;
  color: var(--sa-text);
}
.search-hero-field .form-control:focus {
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 3px rgba(var(--sa-primary-rgb), .18);
}
.btn-search-hero {
  height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-search-hero:hover { background: #0b5ed7; }

/* ── Result tabs ── */
.result-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--sa-border);
  margin-bottom: 18px;
}
.result-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin: 0 12px -1px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sa-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s ease;
}
.result-tab:hover { color: var(--sa-text); }
.result-tab.active {
  color: var(--sa-primary);
  border-bottom-color: var(--sa-primary);
}
.tab-count {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #ece3d3;
  color: var(--sa-muted);
  border-radius: 999px;
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}
.result-tab.active .tab-count {
  background: rgba(var(--sa-primary-rgb), .12);
  color: var(--sa-primary);
}

/* ── Result status / count row ── */
.search-status-row {
  font-size: 13px;
  color: var(--sa-muted);
  margin-bottom: 12px;
}
.search-status-row .count b { color: var(--sa-text); font-weight: 700; }
.search-status-row .count .q { color: var(--sa-text); font-weight: 600; }

/* ── Result lists ── */
#search-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#search-results:empty { display: block; }

/* ── Conversation result card ── */
.conv-card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: 12px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.conv-card:hover {
  border-color: var(--sa-border-strong);
  box-shadow: 0 2px 6px rgba(16,24,40,.05);
}
.conv-main { min-width: 0; }
.conv-subject {
  font-size: 15px;
  font-weight: 600;
  color: var(--sa-primary);
  line-height: 1.3;
}
.conv-card:hover .conv-subject { text-decoration: underline; }
.conv-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--sa-muted);
  flex-wrap: wrap;
}
.conv-from { font-weight: 600; color: var(--sa-text); }
.conv-sep  { color: var(--sa-faint); }
.conv-snippet {
  font-size: 13px;
  color: var(--sa-muted);
  margin-top: 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.conv-meta {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.conv-date {
  font-size: 12px;
  color: var(--sa-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* On small screens, meta wraps below main */
@media (max-width: 860px) {
  .conv-card { grid-template-columns: 40px 1fr; }
  .conv-meta {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    gap: 12px;
  }
}

/* ── Status dot ── */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}
.status-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-dot.active  { color: var(--sa-success); }
.status-dot.closed  { color: var(--sa-faint); }
.status-dot.pending { color: var(--sa-warn); }

/* ── Customer result card ── */
.cust-card {
  background: #fff;
  border: 1px solid var(--sa-border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.cust-card:hover {
  border-color: var(--sa-border-strong);
  box-shadow: 0 2px 6px rgba(16,24,40,.05);
}
.cust-main { min-width: 0; flex: 1; }
.cust-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--sa-primary);
}
.cust-card:hover .cust-name { text-decoration: underline; }
.cust-email { font-size: 13px; color: var(--sa-muted); margin-top: 1px; }
.cust-go {
  color: var(--sa-faint);
  font-size: 16px;
  flex-shrink: 0;
  transition: color .12s ease;
}
.cust-card:hover .cust-go { color: var(--sa-primary); }

/* ── Avatar (initials circle) ── */
.sa-avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Match highlight ── */
mark.hl {
  background: var(--sa-warn-soft);
  color: #7a4a00;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
  font-style: normal;
}
.conv-subject mark.hl {
  color: var(--sa-primary);
  background: rgba(var(--sa-primary-rgb), .12);
}