/* Leovoid Client Portal — dedicated stylesheet. Black & white, light mode,
   WCAG 2.1 AA compliant contrast throughout, keyboard-focus visible. */

:root {
  --p-bg: #ffffff;
  --p-surface: #ffffff;
  --p-text: #111111;
  --p-text-secondary: #4a4a4a;   /* ~9.7:1 on white */
  --p-text-tertiary: #6b6b6b;    /* ~5.7:1 on white */
  --p-border: #d4d4d4;
  --p-border-light: #ececec;
  --p-focus: #111111;
  --p-danger: #b91c1c;           /* ~5.9:1 on white */
  --p-danger-bg: #fdecec;
  --p-success-text: #1a1a1a;
  --p-success-bg: #f0f0f0;
  --p-radius-sm: 6px;
  --p-radius-md: 10px;
  --p-radius-lg: 14px;
  --p-font-display: 'Space Grotesk', system-ui, sans-serif;
  --p-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { height: 100%; }

body.portal {
  font-family: var(--p-font-body);
  background: var(--p-bg);
  color: var(--p-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
body.portal-shell-page {
  height: 100%;
  overflow: hidden;
}

/* Visible keyboard focus everywhere — non-negotiable for an accessibility company's own product */
.portal a:focus-visible,
.portal button:focus-visible,
.portal input:focus-visible,
.portal select:focus-visible,
.portal textarea:focus-visible {
  /* outline: 3px solid var(--p-focus); */
  outline-offset: 2px;
}

/* --- Shell layout --- */
.portal-shell { display: flex; height: 100vh; overflow: hidden; }

.portal-sidebar {
  position: relative;
  width: var(--pb-sb-width, 232px);
  flex-shrink: 0;
  height: 100vh;
    background: var(--pb-sb-bg, #4A6130);
  border-right: 1px solid var(--p-border);
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease, transform 0.2s ease;
  overflow: visible; /* allow tooltip to escape sidebar bounds */
}

/* No sidebar transitions during page load, so the restored state doesn't animate in */
.portal-preload .portal-sidebar,
.portal-preload .portal-sidebar * {
  transition: none !important;
}

.portal-sidebar-header {
  position:relative; z-index:2;
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid var(--p-border);
  font-family: var(--p-font-display);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

#portal-sidebar-header-border{
   border-color: var(--pb-sb-border);
}
#portal-sidebar-footer-border{
   border-color: var(--pb-sb-border);
}


.portal-nav {
  position: relative; z-index: 2; flex: 1; padding: 12px; overflow-y: auto;
}
@supports (-moz-appearance: none) {
  .portal-nav {
    scrollbar-width: thin;                        /* Firefox */
    scrollbar-color: transparent transparent;     /* Firefox: hidden until hover */
  }
    .portal-sidebar:hover .portal-nav {
    scrollbar-color: var(--p-border) transparent; /* Firefox: shown on sidebar hover */
  }
}

.portal-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--pb-sb-item-radius, var(--p-radius-sm));
  color: var(--pb-sb-nav-color, var(--p-text-secondary));
  text-decoration: none;
  font-size: var(--pb-sb-font-size, 14px);
  font-weight: 500;
  margin-bottom: 2px;
  position: relative;  /* needed for tooltip positioning */
  white-space: nowrap;
  overflow: visible;   /* let tooltip escape */
}
.portal-nav-item:hover { background: var(--p-border-light); color: var(--p-text); }
.portal-nav-item.active { background: #b4b2984f; color: #fbfbfb; }
.portal-nav-item i { font-size: 18px; }

.aiq-icon-btn:hover       { background: var(--pb-nb-iconbtn-hover-bg); }
#aiq-topbar nav a:hover   { background: var(--pb-nb-link-hover-bg); }
.aiq-search-trigger:hover { background: var(--pb-nb-search-hover-bg); }

.portal-main { flex: 1; min-width: 0;min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.portal-topbar {
  height: var(--pb-nb-height, 60px);
  border-bottom: var(--pb-nb-border-width, 1px) solid var(--pb-nb-border, var(--p-border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pb-nb-padding-h, 24px);
  flex-shrink: 0;
  background: var(--pb-nb-bg, var(--p-surface));
  box-shadow: var(--pb-nb-shadow-computed, none);
}

.portal-content {
  flex: 1;
  padding: 28px 24px 48px;
  width: 100%;
  overflow-y: auto;
  position: relative;
  background-color: var(--pb-cw-bg);
}

#portal-content-noise {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  z-index: 0 !important;
  pointer-events: none !important;
  mix-blend-mode: overlay !important;
}

/* Sit above the content noise layer */
.portal-welcome,
.portal-stat-card,
.portal-card,
.portal-table-wrap,
.portal-empty {
  position: relative;
  z-index: 1;
}

.portal-mobile-toggle { display: none; background: none; border: 1.5px solid var(--p-border); border-radius: var(--p-radius-sm); padding: 8px; cursor: pointer; }

/* --- Typography --- */
.portal-eyebrow { font-family: var(--p-font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-text-tertiary); }
.portal-title { font-family: var(--p-font-display); font-size: 26px; font-weight: 700; margin: 4px 0 6px; }
.portal-subtitle { font-size: 14px; color: var(--p-text-secondary); margin: 0; }

/* --- Cards --- */
.portal-card { background: var(--pb-cw-card); 
  border: 1px solid var(--pb-cw-border); 
  border-radius: var(--pb-cw-radius); 
  overflow: hidden; }
.portal-card-wallet { background: #dcded7;
  border: 1px solid var(--pb-cw-border);
  border-radius: var(--pb-cw-radius);
  /* box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03); */
 }
.portal-card-wallet:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 6px 16px rgba(0,0,0,0.05); }
.portal-card-header { padding: 16px 20px; border-bottom: 1px solid var(--p-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-card-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.portal-card-body { padding: 20px; }


/* --- Buttons --- */
.portal-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--p-radius-sm);
  font-family: var(--p-font-body); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; border: 1.5px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.portal-btn-primary { background: #111111; color: #fff; border-color: var(--p-text); z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.portal-btn-primary:hover { background: #2b2b2b; }
.portal-btn-outline { background: var(--pb-btn-sec-bg); color: var(--p-text); z-index: 1; border: 1px solid #111111; }
.portal-btn-outline:hover { background: var(--p-border-light);  }
.portal-btn-ghost { background: transparent; color: var(--p-text-secondary); border-color: transparent; }
.portal-btn-ghost:hover { background: var(--p-border-light); }
.portal-btn-sm { padding: 7px 12px; font-size: 13px; }
.portal-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Forms --- */
.portal-form-group { margin-bottom: 16px; }
.portal-form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.portal-form-group input, .portal-form-group select, .portal-form-group textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--p-border);
  border-radius: var(--p-radius-sm); font-family: var(--p-font-body); font-size: 14px;
  background: #fff; color: var(--p-text);max-width: 100%;height: 33px;
}
.portal-form-group input:focus, .portal-form-group select:focus, .portal-form-group textarea:focus {
  outline: none;
  border-color: var(--pb-dd-focus-border-color);
  box-shadow: 0 0 0 0.5px var(--pb-dd-focus-ring-color);
}

/* --- Badges --- */
.portal-badge { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 99px; font-size: 10.8px; font-weight: 700; text-transform: capitalize; letter-spacing: 0.03em; }
.portal-badge-outline { background: #fff; border: 1.5px solid var(--p-border); color: var(--p-text); }

#portal-badge-outline-navbar{
  background: var(--pb-nb-badge-bg, #fff); 
  border: 1.5px solid var(--pb-nb-badge-border); 
  color: var(--pb-nb-badge-text);
  padding-right: 12px;
  padding-left: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
}


/* --- Table (desktop) / Cards (mobile) --- */
.portal-table-wrap { overflow-x: auto; }
.portal-table { width: 100%; border-collapse: collapse; }
.portal-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--p-text-tertiary); padding: 15px; border-bottom: 1.5px solid var(--p-border); white-space: nowrap; }
.portal-table td { padding: 15px 11px; border-bottom: 1px solid var(--p-border-light); font-size: 14px; vertical-align: middle; }
.portal-table tbody tr:last-child td { border-bottom: none; }
.portal-table tbody tr:hover td {  background: var(--adt-surface-hover, var(--p-border-light)); }
.portal-table td[data-label="URL"] {
  /* display: block;  */
  max-width: 260px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Empty state --- */
.portal-empty { text-align: center; padding: 48px 20px; }
.portal-empty-icon { font-size: 40px; color: var(--p-text-tertiary); margin-bottom: 12px; }
.portal-empty-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.portal-empty-desc { font-size: inherit; /* was var(--p-text-secondary) - a colour, so invalid; browsers already treated it as inherit */ color: var(--pb-cw-text-color); }

.portal-text-muted { color: var(--pb-cw-text-color); }
.portal-text-sm { font-size: var(--pb-cw-card-title-size,13px); }
.portal-text-xs { font-size: 12px; }

.portal-save-bar {
  position: sticky;
  bottom: 0;
  margin: 24px -24px -48px;
  padding: 14px 24px;
  background: var(--p-surface);
  border-top: 1px solid var(--p-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  display: flex;
  justify-content: flex-end;
  z-index: 5;
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .portal-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  }
  .portal-sidebar.open { transform: translateX(0); }
  .portal-mobile-toggle { display: flex; align-items: center; justify-content: center; }
  /* The menu button is position:fixed at left:14 and 31px wide, so it sits on
     top of whatever the topbar puts in that corner -- it was landing squarely
     on the workspace switcher's buildings icon, which rendered as the two
     glyphs superimposed and meant a tap there opened the sidebar instead of the
     switcher. Nothing reserved the space, so reserve it here: 14 (offset) + 31
     (button) + 12 (gap). */
  .portal-topbar { padding-left: 57px; }
  .portal-content { padding: 20px 16px 40px; }
  .portal-save-bar { margin: 24px -16px -40px; padding: 12px 16px; }

  /* Tables collapse to stacked cards on mobile */
  .portal-table thead { display: none; }
  .portal-table, .portal-table tbody, .portal-table tr, .portal-table td { display: block; width: 100%; }
  .portal-table tr { border: 1px solid var(--p-border-light); border-radius: var(--p-radius-md); margin-bottom: 12px; padding: 4px 0; }
  .portal-table td { border-bottom: none; padding: 8px 14px; }
  .portal-table td:before {
    content: attr(data-label);
    display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--p-text-tertiary); margin-bottom: 3px;
  }
  .portal-table td[data-label="URL"] {
  /* display: block;  */
  max-width: 200px; 
}
}

@media (prefers-reduced-motion: reduce) {
  .portal-sidebar { transition: none; }
}

/* ============================================================
   Collapsible desktop sidebar
   ============================================================ */

/* --- Collapse toggle button (desktop only) --- */
.portal-sidebar-collapse-btn {
  margin-left: auto;
  background: #ecede86e;
  border: 1.5px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--p-text-tertiary);
 
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, opacity 0.2s;
}
/* 24x24 is the WCAG 2.5.8 minimum target size; this was 20x20. */
.portal-sidebar-collapse-btn:hover {
  background: var(--pb-sb-active-bg, var(--p-border-light));
  color: var(--p-text);
}

.portal-sidebar-collapse-btn i {
  font-size: 12px;
  transition: transform 0.25s ease;
  color: #FFFFFF;
}

/* When sidebar is collapsed, flip the chevron */
.portal-sidebar.collapsed .portal-sidebar-collapse-btn i {
  transform: rotate(180deg);
  color:#000;
}

.portal-sidebar.collapsed .portal-nav-sub{
  opacity: 0;
  width: 0;
  height: 0;
  display: none;
}
.portal-sidebar.collapsed .portal-nav {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
.portal-sidebar.collapsed .portal-nav::-webkit-scrollbar {
  display: none;
}

.portal-sidebar.collapsed .portal-getting-started-widget {
  display: none;
}

/* --- Sidebar scrollbar --- */

/* Expanded: thin, subtle scrollbar */
/* Expanded: thin, subtle scrollbar, shown only on hover */
.portal-nav::-webkit-scrollbar {
  width: 9.6px;
}
.portal-nav::-webkit-scrollbar-track {
  background: transparent;
    margin: 8px 0;
}
.portal-nav::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
}
.portal-sidebar:hover .portal-nav::-webkit-scrollbar-thumb {
  background-color: var(--p-border);
}
.portal-sidebar .portal-nav::-webkit-scrollbar-thumb:hover {
  background-color: var(--p-border-light, gray);
}

/* Hide the collapse button on mobile (mobile uses its own toggle) */
@media (max-width: 860px) {
  .portal-sidebar-collapse-btn { display: none; }
}

/* --- Sidebar header label (the "Leovoid Portal" text) --- */
.portal-sidebar-header-label {
  transition: opacity 0.2s ease, width 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
}
.portal-sidebar.collapsed .portal-sidebar-header-label {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

.portal-sidebar.collapsed .portal-sidebar-collapse-btn{
    /* width: 38px; */
    width: 20px;
    height: 20px;
    margin-left: 10px;
} 
:root:has(.portal-sidebar.collapsed) .portal-topbar {
  padding: 0 var(--pb-nb-padding-h, 24px) 0 45px;
}


/* On desktop, collapsed state */
@media (min-width: 861px) {
  .portal-sidebar.collapsed {
    width: 64px;
    overflow: visible;
  }
  /* Hide the "Main" section label text when collapsed */
  .portal-sidebar.collapsed .portal-nav-section {
    opacity: 0;
    pointer-events: none;
    height: 18px; /* keep vertical rhythm */
    overflow: hidden;
    transition: opacity 0.15s;
  }
}

/* --- Nav item label hide/tooltip --- */
.portal-nav-item .portal-nav-label {
  transition: opacity 0.2s ease, width 0.25s ease, margin 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
  font-size: var(--pb-sb-font-size, 14px);
}
@media (min-width: 861px) {
  .portal-sidebar.collapsed .portal-nav-item .portal-nav-label {
    opacity: 0;
    width: 0;
    margin-left: 0;
    pointer-events: none;
  }


  /* Center the icon when collapsed */
  .portal-sidebar.collapsed .portal-nav-item {
    justify-content: center;
    padding: 10px;
    gap:0px;
  }
  .portal-sidebar.collapsed .portal-nav-item i {
    font-size: 20px; /* slightly larger icon when solo */
  }
}

/* --- Profile/user row footer --- */
.portal-user-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px;
  border-radius: var(--pb-sb-item-radius, var(--p-radius-sm)); cursor: pointer;
  background: #64646482;
  backdrop-filter: blur(5px);
  border: 1px solid #626262;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;
}
/* The text block (name + business) inside user row */
.portal-user-row-info {
  transition: opacity 0.2s ease, width 0.25s ease, margin 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.portal-user-row-caret {
  transition: opacity 0.2s ease, width 0.25s ease;
  overflow: hidden;
  flex-shrink: 0;
}
@media (min-width: 861px) {
  .portal-sidebar.collapsed .portal-user-row {
    justify-content: center;
    padding: 8px;
    gap:0px;
  }
  .portal-sidebar.collapsed .portal-user-row-info {
    opacity: 0;
    width: 0;
    margin: 0;
    pointer-events: none;
  }
  .portal-sidebar.collapsed .portal-user-row-caret {
    opacity: 0;
    width: 0;
    pointer-events: none;
  }

}

@media (max-width: 900px) {
  #personal > div[style*="display:flex"] {
    flex-direction: column;
  }
}

/* ── Body-anchored sidebar tooltips (collapsed state) ── */
.portal-sidebar-tooltip {
  position: fixed;
  background: #111111;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--p-font-body);
  padding: 5px 10px;
  border-radius: var(--p-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.portal-sidebar-tooltip.visible {
  opacity: 1;
}
.portal-sidebar-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #111111;
}

/* Keep the dropdown panel anchored correctly when sidebar is collapsed.
   The profile dropdown is positioned relative to .portal-dropdown-wrap, so no change needed. */

/* Ensure the sidebar footer stays overflow:visible so the dropdown and tooltips work */
.portal-sidebar-footer {
  /* position:relative + z-index makes this a STACKING CONTEXT, so the
     workspace dropdown inside it (z-index 60) can never rise above page
     content on its own — externally the whole footer competes at this one
     number. It was 2, which lost to anything on the page with a z-index.
     120 sits above page chrome but below modals/overlays (200+). */
  position:relative; z-index:120;
  overflow: visible;
  padding: 12px;
  border-top: 1px solid var(--pb-sb-active-bg, var(--p-border));
}


/* --- Welcome banner --- */
.portal-welcome {
  background: var(--pb-cw-hero-bg); color: #fff;
  border-radius: var(--p-radius-lg);
  padding: 21px 28px;
  margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--pb-cw-border);
}
.portal-welcome-title { font-family: var(--p-font-display); font-size: var(--pb-cw-h1-size); font-weight: 700; margin-bottom: 4px; }
.portal-welcome-sub { font-size: var(--pb-cw-font-size); color: var(--pb-cw-text); }

/* Welcome banner: the rotating tip.
   The banner is a flex row of [text block][Add Website button]; this keeps the
   text block able to shrink so a long tip wraps instead of pushing the button
   off the row. */
.portal-welcome-main { min-width: 0; flex: 1 1 320px; }
.portal-welcome-tip {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,0.22);
  max-width: 68ch;
}
.portal-welcome-tip-icon { font-size: 15px; line-height: 1.45; opacity: 0.85; flex-shrink: 0; }
/* min-height holds two lines so swapping between a short tip and a long one
   does not make the whole banner jump. Longer tips still grow past it. */
.portal-welcome-tip-track { position: relative; min-height: 2.6em; flex: 1; min-width: 0; }
.portal-welcome-tip-text {
  margin: 0; font-size: 12.5px; line-height: 1.45;
  opacity: 0; display: none; transition: opacity .35s ease;
}
.portal-welcome-tip-text.is-on { display: block; opacity: 1; }
/* Set by the script for the moment between fading out and swapping. */
.portal-welcome-tip-text.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .portal-welcome-tip-text { transition: none; }
}
.portal-welcome .portal-btn-primary { background: #fff; color: #111; border-color: #fff; }
.portal-welcome .portal-btn-primary:hover { background: #f0f0f0; }


/* Gradient override — only active when admin chose gradient */
.portal-welcome[data-hero-style="gradient"] {
  background: linear-gradient(
    var(--pb-cw-hero-gradient-angle, 135deg),
    var(--pb-cw-hero-bg, #FFFFFF),
    var(--pb-cw-hero-bg2, #EDE8DF)
  );
}

/* --- Stat card grid --- */
.portal-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.portal-stat-card {
  background: var(--pb-cw-card); border: 1px solid var(--pb-cw-border); border-radius: var(--pb-cw-radius);
  padding: 18px 20px;
  /* box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03); */
}
.portal-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.portal-stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  /* background: #111111; color: #fff; */
  background: #ff5d471a;
    color: rgb(0, 0, 0);
    /* border: 1.5px solid #ff5d47; */
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.portal-stat-value { font-family: var(--p-font-display); font-size: var(--pb-cw-stat-num-size); font-weight: 700; line-height: 1; margin-bottom: 6px; }
.portal-stat-label { font-size: var(--pb-cw-card-title-size); color: var(--p-text-secondary); }

/* --- Usage bar (plan limit progress) --- */
.portal-usage-bar { height: 6px; border-radius: 99px; background: #d0d0d0; overflow: hidden; margin-top: 8px; position: relative; }
.portal-usage-fill { height: 100%; background: #111111; border-radius: 99px; transition: width 0.3s ease; }

@media (max-width: 860px) {
  .portal-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .portal-stats-grid { grid-template-columns: 1fr; }
  .portal-welcome { flex-direction: column; align-items: flex-start; }
}

/* --- Topbar icon buttons (notifications, etc.) --- */
.portal-icon-btn {
  box-sizing: border-box; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: var(--pb-nb-iconbtn-radius, var(--p-radius-sm));
  border: 1px solid var(--pb-nb-border, var(--p-border)); background: var(--pb-nb-iconbtn-bg, #fff);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; color: var(--pb-nb-link-color, var(--p-text-secondary));
}
.portal-icon-btn:hover { background: var(--p-border-light); }
.portal-icon-btn i { font-size: 18px; }
.portal-notif-dot {
  position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--p-danger); border: 1.5px solid #fff;
}

/* --- Dropdown panels (notifications, profile) --- */
.portal-dropdown-wrap { position: relative; }
.portal-dropdown-panel {
  position: absolute; top: calc(100% + 8px);
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--pb-nb-bg, #fff); border: 1px solid var(--pb-nb-border, var(--p-border));
  border-radius: var(--p-radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.10);
  display: none; z-index: 999; overflow: hidden;

}
.portal-dropdown-panel.open { display: block; }
.portal-dropdown-header { padding: 14px 16px; border-bottom: 1px solid var(--p-border-light); font-weight: 600; font-size: 14px; }
.portal-dropdown-body { max-height: 320px; overflow-y: auto; }
.portal-dropdown-footer { padding: 0px 0px; border-top: 1px solid var(--p-border-light); }

.portal-profile-trigger {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 6px 8px; border-radius: var(--p-radius-sm);
}
.portal-profile-trigger:hover { background: var(--p-border-light); }
.portal-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--pb-nb-badge-bg); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
   border: solid #c6c6c6 2px;
}
.portal-profile-name {  font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;}
.portal-profile-plan { font-size: 11px;
    color: #e1e1e1;
    opacity: 1; }

 i.ph.ph-caret-up-down.portal-user-row-caret {
    color: #b6b6b6 !important;
}   

.portal-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; font-size: 13px; color: var(--p-text);
  cursor: pointer; text-decoration: none; border: none; background: none; width: 100%; text-align: left;
}
.portal-dropdown-item:hover { background: var(--p-border-light); }
.portal-dropdown-item i { font-size: 16px; color: var(--p-text-secondary); width: 18px; }
.portal-dropdown-item.danger { color: var(--p-danger); }
.portal-dropdown-item.danger i { color: var(--p-danger); }

.notif-item > div > div:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item > div > div:nth-child(2) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-msg.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-msg-toggle {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text-secondary);
  cursor: pointer;
  user-select: none;
}

.notif-msg-toggle:hover {
  color: var(--p-text-primary);
}

@media (min-width: 640px) {
  .profile-labels { display: block !important; }
}

/* --- Sidebar refinements (matching reference structure) --- */
.portal-sidebar-logo {
  width: 28px; height: 28px; border-radius: 7px;
  background: #111111; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}


/* Square logo only shows when the sidebar is collapsed; the full logo shows when expanded */
.portal-sidebar-logo--collapsed-only {
  width: 0;
  opacity: 0;
  overflow: hidden;
  margin-right: -9px; /* cancels the header's 9px gap while hidden */
  transition: opacity 0.2s ease, width 0.25s ease, margin 0.25s ease;
}
.portal-sidebar.collapsed .portal-sidebar-logo--collapsed-only {
  width: 28px;
  opacity: 1;
  margin-right: 0;
}

.portal-nav-section { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pb-sb-nav-color); padding: 12px 12px 6px; }

.portal-user-row:hover { background: #5f5f5f;
    opacity: 1; }

/* --- Search box (topbar) --- */
.portal-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--pb-nb-active-bg); border: 1px solid var(--pb-nb-iconbtn-border, var(--p-border));
  border-radius: var(--pb-nb-link-radius, var(--p-radius-sm)); padding: 0 10px; height: 36px;
  color: var(--pb-nb-active-text); font-size: var(--pb-nb-link-size, 13px); cursor: pointer;
  width: 180px; flex-shrink: 0; min-width: 36px;
}

.portal-search i { font-size: 16px; }
.portal-search kbd {
  margin-left: auto; font-size: 11px; background: var(--pb-nb-bg, #fff); border: 1px solid var(--pb-nb-iconbtn-border, var(--p-border));
  border-radius: 4px; padding: 1px 6px; color: var(--pb-nb-active-text); font-family: var(--p-font-body);
}
.portal-search:hover{
  background: var(--pb-nb-search-hover-bg);
}


@media (max-width: 640px) {
  .portal-search span, .portal-search kbd { display: none; }
  .portal-search { max-width: 40px; justify-content: center; padding: 0; }
}

/* --- Spacing utilities (used throughout portal views) --- */
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }

/* --- Semantic colors (green for success/done, red for destructive) --- */
.portal-btn-danger { background: var(--p-danger); color: #fff; border-color: var(--p-danger); }
.portal-btn-danger:hover { background: #9d1717; }
.portal-btn-outline-danger { background: #fff; color: var(--p-danger); border-color: var(--p-danger); }
.portal-btn-outline-danger:hover { background: var(--p-danger-bg); }


/* Status pills: green done, blue in progress, purple expert review, amber needs attention, red failed, grey waiting */
.portal-badge-neutral { background: #f0f0f0; color: #3f3f46; border: 1.5px solid #d4d4d8; }
.portal-badge-success { background: #e8f8ee; color: #15803d; border: 1.5px solid #a7dfbc; }
.portal-badge-danger  { background: #fdecec; color: #b91c1c; border: 1.5px solid #f2b8b8; }
.portal-badge-warning { background: #fff4e0; color: #92400e; border: 1.5px solid #f0c987; z-index: 99; }
.portal-badge-info    { background: #e8f1fb; color: #1d5a8a; border: 1.5px solid #a9c8e8; z-index: 99; }
.portal-badge-purple  { background: #f1eafa; color: #6b3fa0; border: 1.5px solid #cdb6ea; z-index: 99; }

/* Topbar responsiveness — workspace switcher + plan badge + search now compete for
   space on narrower screens, so scale things down gracefully rather than overflowing. */
@media (max-width: 900px) {
  .portal-topbar-search span { display: none; }
  .portal-topbar-search kbd { display: none; }
}
@media (max-width: 700px) {
  .portal-topbar .portal-badge { display: none; }
}
/* The topbar is space-between, so whatever the workspace name doesn't use shows
   up as dead space before the search icon -- at 560px that was 185px idle while
   the name was truncated to 70px. The name is capped rather than sized, so
   raising the cap widens the chip and closes the gap by itself; no flex change
   is needed. Below 700px it isn't capped at all: the span sits in a min-width:0
   chain, so it takes the space that exists and ellipsises when it runs out.
   !important throughout because max-width is an inline style on the span. */
#workspace-switcher-btn span { max-width: 280px !important; }

@media (max-width: 700px) {
  #workspace-switcher-btn span { max-width: none !important; }
  /* Inline gap is 5px; a touch more air stops the icon and name reading as a
     collision once the name is long enough to sit right against it. */
  #workspace-switcher-btn { gap: 7px !important; }
}

/* Tabbed sections (Profile page, and any future tabbed Client Portal page) — matches
   the same generic pattern already used in the internal tool's Settings/Customer pages,
   adapted to the portal's own black/white design (no teal accent here by design). */
.settings-tabs { display:flex; border-bottom:2px solid var(--p-border); margin-bottom:24px; overflow-x:auto; padding-bottom:2px;position: relative;
     }
.settings-tab { display:flex; align-items:center; gap:7px; padding:10px 18px; font-size:13.5px; font-weight:500; color:var(--p-text-secondary); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; cursor:pointer; transition:all 0.12s; }
.settings-tab:hover { color:var(--p-text-primary); }
.settings-tab.active { color:#111111; border-bottom-color:#111111; }
.settings-panel { display:none; }
.settings-panel.active { display:block; }

/* Zoho Bookings embedded widget (Discovery Call modal) — the calendar/form content was
   getting cropped at the top on smaller viewports without this extra padding. */
@media only screen and (max-width: 1250px) {
  .zb-btone-inner-container {
    padding: 160px 60px 60px 60px;
  }
}

/* Notification dropdown scrollbar — matches the panel's own rounded corners rather
   than showing a jarring straight-edged scrollbar cutting through rounded content. */
#notif-scroll-wrap::-webkit-scrollbar { width: 6px; }
#notif-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
#notif-scroll-wrap::-webkit-scrollbar-thumb { background: var(--p-border); border-radius: var(--p-radius-md); }

/* ============================================================
   Help Center module + redesigned chat thread
   Appended for Module 13/14 — uses only confirmed real --p-*
   variables, no new colors introduced (monochrome system).
   ============================================================ */

/* --- Help Center landing --- */
.hc-search {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--p-border); border-radius: var(--p-radius-lg);
  padding: 14px 18px; background: var(--p-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.03);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.hc-search input {
  border: none; outline: none; font-size: 15px; flex: 1;
  font-family: var(--p-font-body); background: transparent; color: var(--p-text);
}
.hc-search i { font-size: 18px; color: var(--p-text-tertiary); }

.hc-category-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
/* An extra step at 1150px: four tracks in a ~900px content column leaves each
   card too narrow for "Accessibility Question" to sit on two lines. */
@media (max-width: 1150px) { .hc-category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .hc-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hc-category-grid { grid-template-columns: 1fr; } }

.hc-category-card {
  display: block; padding: 18px; border: 1.5px solid var(--pb-cw-border);
  border-radius:var(--pb-cw-radius); text-decoration: none; color: var(--p-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  background-color: var(--pb-cw-card);
}
.hc-category-card:hover { border-color: var(--p-border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.hc-category-card i { font-size: 22px; margin-bottom: 8px; display: block; }
.hc-category-card .hc-cat-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.hc-category-card .hc-cat-count { font-size: 12px; color: var(--p-text-tertiary); }

.hc-article-list-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--p-border-light);
  text-decoration: none; color: var(--p-text);
}
.hc-article-list-item:last-child { border-bottom: none; }
.hc-article-list-item:hover .hc-article-title { text-decoration: underline; }
.hc-article-title { font-size: 14px; font-weight: 500; }

/* --- Deflection search suggestions (new ticket page) --- */
.hc-deflect-results { margin-top: 8px; }
.hc-deflect-item {
  display: block; padding: 10px 14px; border-radius: var(--p-radius-sm);
  border: 1px solid var(--p-border-light); margin-bottom: 6px; text-decoration: none;
  color: var(--p-text); font-size: 13px;
}
.hc-deflect-item:hover { background: var(--p-border-light); }
.hc-deflect-item .hc-deflect-cat { color: var(--p-text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }

/* ============================================================
   Chat thread — the flagship redesign
   ============================================================ */

.hc-thread {
  /* height: 520px;  */
  height:57dvh;
  overflow-y: auto; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
@media (max-width: 700px) { .hc-thread { height: calc(100vh - 280px); padding: 16px; } }

.hc-day-divider {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  color: var(--p-text-tertiary); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.hc-day-divider::before, .hc-day-divider::after { content: ''; flex: 1; height: 1px; background: var(--p-border-light); }

.hc-msg-group { display: flex; gap: 10px; margin-bottom: 16px; max-width: 78%; }
.hc-msg-group.mine { align-self: flex-end; flex-direction: row-reverse; }
@media (max-width: 560px) { .hc-msg-group { max-width: 90%; } }

.hc-msg-group .portal-avatar { margin-top: 2px; }
.hc-msg-group .hc-msg-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hc-msg-group.mine .hc-msg-col { align-items: flex-end; }

.hc-msg-sender { font-size: 11px; font-weight: 600; color: var(--p-text-tertiary); padding: 0 2px; }

.hc-bubble {
  padding: 10px 14px; border-radius: var(--p-radius-md);
  font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.03);
}
.hc-msg-group.mine .hc-bubble { background: #111111; color: #ffffff; }
.hc-msg-group:not(.mine) .hc-bubble { background: var(--p-border-light); color: var(--p-text); }
.hc-bubble.internal-note { background: #fdf6e3; color: var(--p-text); border: 1px dashed var(--p-border); }

.hc-msg-time { font-size: 10px; color: var(--p-text-tertiary); padding: 0 2px; }

.hc-msg-in {
  animation: hc-msg-in 0.25s ease-out;
}
@keyframes hc-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hc-msg-in { animation: none; }
}

.hc-typing-indicator {
  display: inline-flex; align-items: center; gap: 3px; padding: 10px 14px;
  background: var(--p-border-light); border-radius: var(--p-radius-md); width: fit-content;
}
.hc-typing-indicator span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--p-text-tertiary);
  animation: hc-typing 1.2s infinite ease-in-out;
}
.hc-typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.hc-typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes hc-typing { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hc-typing-indicator span { animation: none; opacity: 0.6; }
}

.hc-composer {
  border-top: 1px solid var(--p-border-light); padding: 14px 20px;
  display: flex; gap: 10px; align-items: flex-end;
}
@media (max-width: 700px) { .hc-composer { padding: 12px 16px; } }

.hc-composer textarea {
  flex: 1; resize: none; border: 1.5px solid var(--p-border); border-radius: var(--p-radius-lg);
  padding: 10px 14px; font-size: 14px; font-family: var(--p-font-body); color: var(--p-text);
  max-height: 140px; line-height: 1.4; background: var(--p-surface);
}
.hc-composer textarea:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 1px; }

.hc-send-btn {
  width: 40px; height: 40px; border-radius: 50%; background: #111111; color: #fff;
  border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s, transform 0.1s;
}
.hc-send-btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.14); }
.hc-send-btn:active { transform: scale(0.94); }
.hc-send-btn:disabled { background: var(--p-border); cursor: not-allowed; box-shadow: none; }
.hc-send-btn i { font-size: 18px; }

/* --- Topbar Help Center icon (matches existing #notif-bell-btn treatment) --- */
/* Same 38x38 box as .portal-icon-btn (bell). It used to size itself from
   padding + icon (32x36), so the two never matched and blurred at 110% zoom. */
.hc-topbar-btn {
  position: relative; cursor: pointer;
  box-sizing: border-box; width: 38px; height: 38px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--pb-nb-iconbtn-border);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  background: var( --pb-nb-iconbtn-bg);
  border-radius: var(--pb-nb-iconbtn-radius, var(--p-radius-sm));
  color: var(--pb-nb-iconbtn-color, var(--p-text-secondary));
}
.hc-topbar-btn i { font-size: 18px; color: var(--pb-nb-iconbtn-color); }

.hc-topbar-btn:hover { background: var(--pb-nb-iconbtn-hover-bg, var(--p-border-light)); }

/* The topbar is 60px with a 1px bottom border, so centring a 38px button in the
   remaining 59px puts it on a half pixel (top 10.5px), which softens the borders
   when zoomed. -1px bottom margin centres it on the full 60px (top 11px). */
.portal-topbar .hc-topbar-btn,
.portal-topbar .portal-icon-btn { margin-bottom: -1px; }

/* Rendered rich-text article content (from TinyMCE) — styled to match the
   portal's existing monochrome design rather than default browser styling. */
.hc-article-body img { max-width: 100%; border-radius: var(--p-radius-md); margin: 12px 0; }
.hc-article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.hc-article-body table th, .hc-article-body table td { border: 1px solid var(--p-border); padding: 8px 12px; text-align: left; }
.hc-article-body table th { background: var(--p-border-light); font-weight: 600; }
.hc-article-body h2 { font-size: 19px; margin: 24px 0 10px; font-family: var(--p-font-display); }
.hc-article-body h3 { font-size: 16px; margin: 20px 0 8px; font-family: var(--p-font-display); }
.hc-article-body p { margin: 0 0 14px; }
.hc-article-body ul, .hc-article-body ol { margin: 0 0 14px; padding-left: 22px; }
.hc-article-body a { color: var(--p-text); text-decoration: underline; }

.portal-search-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 1000; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.portal-search-overlay.open { display: flex; }
.portal-search-modal {
  /* Every value here except position is overridden by div.portal-search-modal
     further down. Safe to delete this rule once you confirm the modal is a <div>. */
  position: relative;
  background: #fff; border-radius: 12px; width: 560px; max-width: 92vw;
  max-height: 60vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.portal-search-input-row {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--p-border-light);
  border-radius: 10px;
}
.portal-search-input-row i { font-size: 18px; color: var(--p-text-tertiary); }
.portal-search-input-row input {
  flex: 1; border: none; outline: none; font-size: 15px; font-family: 'Inter', sans-serif;
  border-radius: 8px; padding: 4px 2px;
}
.portal-search-input-row input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--p-text-primary);
  border-radius: 8px;
}
.portal-search-input-row kbd {
  font-size: 11px; color: var(--p-text-tertiary); border: 1px solid var(--p-border);
  border-radius: 4px; padding: 2px 6px;
}
.portal-search-results { overflow-y: auto; padding: 6px 0; }
.portal-search-group-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--p-text-tertiary);
  padding: 8px 16px 4px;
}
.portal-search-result-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; text-decoration: none;
  color: var(--p-text-primary); font-size: 14px;
}
.portal-search-result-item:hover, .portal-search-result-item.active { background: var(--p-border-light); }
.portal-search-empty { padding: 24px 16px; text-align: center; color: var(--p-text-tertiary); font-size: 13px; }

.portal-search-close-btn {
  font-size: 11px; font-family: 'Inter', sans-serif; line-height: 1; cursor: pointer;
  color: var(--p-text-tertiary); border: 1px solid var(--p-border); border-radius: 4px;
  padding: 3px 7px; background: var(--p-border-light); flex-shrink: 0;
}
.portal-search-close-btn:hover { background: var(--p-border); color: var(--p-text-primary); }
.portal-search-clear-btn {
  border: none; background: none; font-size: 17px; line-height: 1; cursor: pointer;
  color: var(--p-text-tertiary); padding: 0 4px; display: flex; align-items: center;
  flex-shrink: 0;
}
.portal-search-clear-btn:hover { color: var(--p-text-primary); }
.portal-search-clear-btn i { pointer-events: none; }
.portal-search-clear-inline {
  margin-top: 8px; border: 1px solid var(--p-border); background: #fff; border-radius: 8px;
  padding: 6px 14px; font-size: 13px; cursor: pointer; color: var(--p-text-primary);
}
.portal-search-clear-inline:hover { background: var(--p-border-light); }

.portal-search-more { padding: 6px 16px 10px; font-size: 12px; color: var(--p-text-tertiary); font-style: italic; }


.portal-notif-bell-btn {
  border:1px solid var(--pb-nb-iconbtn-border);
  border-color: var(--pb-nb-iconbtn-border, var(--p-border)) !important;
  background: var(--pb-nb-iconbtn-bg);
  border-radius: var(--pb-nb-iconbtn-radius, var(--p-radius-sm));
  color: var(--pb-nb-iconbtn-color, var(--p-text-secondary));
}
.portal-notif-bell-btn:hover{
  background: var(--pb-nb-iconbtn-hover-bg, var(--p-border-light)); 
} 
.portal-notif-bell-btn i{
color: var(--pb-nb-link-color, var(--p-text-secondary));
}

.portal-feedback-trigger {
  display: flex; align-items: center; gap: 6px;
  background: var(--pb-nb-link-color); border: 1px solid var(--pb-nb-iconbtn-border, var(--p-border));
  border-radius: var(--pb-nb-link-radius, var(--p-radius-sm)); padding: 0 12px; height: 36px;
  color: #636363; font-size: var(--pb-nb-link-size, 13px); cursor: pointer; flex-shrink: 0;
}
.portal-feedback-trigger:hover { background: var(--pb-nb-link-hover-bg, var(--p-border)); color: var(--pb-nb-brand-color, var(--p-text-primary)); }
/* Unread: something newer in portal_whats_new than this browser last opened
   the popup to see (localStorage, shared with the docs site's own trigger -
   see public/js/portal.js). Same colours as the docs site's version. */
#portal-whatsnew-trigger.is-unread i { color: #e3a008; }
#portal-whatsnew-trigger.is-unread:hover i { color: #c6890a; }

@media (max-width: 900px) { .portal-feedback-trigger span { display: none; } }

.portal-feedback-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 1000; align-items: center; justify-content: center;
}
.portal-feedback-overlay.open { display: flex; }
.portal-feedback-modal {
  background: #fff; border-radius: 12px; width: 420px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2); overflow: hidden;
}
.portal-feedback-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--p-border-light);
  font-weight: 600; font-size: 14px;
}
.portal-feedback-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.portal-feedback-label { font-size: 12.5px; font-weight: 600; color: var(--p-text-secondary); margin-top: 8px; }
.portal-feedback-stars { display: flex; gap: 6px; margin: 4px 0 4px; }
.portal-feedback-stars i {
  font-size: 26px; color: var(--p-border); cursor: pointer; transition: color 0.1s;
}
.portal-feedback-stars i.lit { color: #f5a623; }
.portal-feedback-textarea {
  width: 100%; min-height: 110px; border: 1px solid var(--p-border); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: 'Inter', sans-serif; resize: vertical;
}
.portal-feedback-textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--p-text-primary); }
.portal-feedback-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; }
.portal-feedback-hint { font-size: 11.5px; color: var(--p-text-tertiary); }
.portal-feedback-success {
  display: flex; align-items: center; gap: 8px; padding: 14px 0 2px;
  color: #16794a; font-size: 14px; font-weight: 500;
}

.portal-whatsnew-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 1000; align-items: center; justify-content: center;
}
.portal-whatsnew-overlay.open { display: flex; }
.portal-whatsnew-modal {
  position: relative; background: #fff; border-radius: 14px; width: 460px; max-width: 92vw;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
.portal-whatsnew-close-btn {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; z-index: 2;
  border-radius: 50%; background: rgba(255,255,255,0.85); border: 1px solid var(--p-border);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.portal-whatsnew-close-btn:hover { background: #fff; }
.portal-whatsnew-banner { width: 100%; height: 150px; overflow: hidden; flex-shrink: 0; }
.portal-whatsnew-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-whatsnew-header {
  padding: 16px 20px 8px; font-size: 16px; font-weight: 700; color: var(--p-text-primary);
}
.portal-whatsnew-list { overflow-y: auto; padding: 4px 8px 16px; }
.portal-whatsnew-item { display: flex; gap: 12px; padding: 12px 12px; border-radius: 10px; }
.portal-whatsnew-item:hover { background: var(--p-border-light); }
.portal-whatsnew-item-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: var(--p-border-light);
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--p-text-primary);
}
.portal-whatsnew-item-body { flex: 1; min-width: 0; }
.portal-whatsnew-item-title { font-size: 14px; font-weight: 600; color: var(--p-text-primary); display: flex; align-items: center; gap: 8px; }
.portal-whatsnew-badge {
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: #e8e8ec; color: #4a4a52;
}
.portal-whatsnew-item-desc { font-size: 13px; color: var(--p-text-tertiary); margin-top: 3px; line-height: 1.4; }

.portal-whatsnew-item-clickable { text-decoration: none; color: inherit; cursor: pointer; align-items: center; }
.portal-whatsnew-item-chevron { color: var(--p-text-tertiary); font-size: 14px; flex-shrink: 0; align-self: center; }

/* ============================================================
   Nav accordion groups (collapsible submenus) — Web Accessibility
   ============================================================ */
.portal-nav-group-trigger {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--p-radius-sm);
  color: var(--pb-sb-nav-color, var(--p-text-secondary));
  font-size:  var(--pb-sb-font-size, 14px);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  margin-bottom: 2px;
}
.portal-nav-group-trigger:hover { background: var(--p-border-light); color: var(--p-text); }
.portal-nav-group-trigger.active { background: #b4b2984f; color: #fff; }
.portal-nav-group-trigger i:first-child { font-size: 18px; flex-shrink: 0; }
.portal-nav-group-caret {
  margin-left: auto;
  font-size: 11px;
  color: #bababa;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.portal-nav-group-caret:hover{
  color: #2e2d2d;
}

.portal-nav-group-trigger.active .portal-nav-group-caret { color: var(--pb-sb-nav-color); }
.portal-nav-group-wrap.open .portal-nav-group-caret { transform: rotate(180deg); }
.portal-nav-group-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, margin 0.25s ease;
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid var(--pb-sb-border);
}
.portal-nav-group-wrap.open .portal-nav-group-panel {
  max-height: 400px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.portal-nav-subitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--pb-sb-nav-color, var(--p-text-secondary));
  font-size:  var(--pb-sb-font-size, 14px);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  margin-bottom: 2px;
}
.portal-nav-subitem:last-child { margin-bottom: 0; }
.portal-nav-subitem i { font-size: 14px; flex-shrink: 0; color: var(--pb-sb-nav-color); }
.portal-nav-subitem:hover { background: var(--p-border-light); color: var(--p-text); }
.portal-nav-subitem:hover i { color: var(--p-text-secondary); }
.portal-nav-subitem.active { background: #b4b2984f; color: #fff; font-weight: 600; }
.portal-nav-subitem.active i { color: #fff; }

/* --- Web Accessibility nav group: collapsed-sidebar handling --- */
.portal-sidebar.collapsed .portal-nav-group-caret {
  opacity: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}
.portal-sidebar.collapsed .portal-nav-group-panel {
  max-height: 0 !important;
  transition: none;
}
.portal-sidebar.collapsed .portal-nav-group-trigger {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
.portal-sidebar.collapsed .portal-nav-group-trigger i:first-child {
  font-size: 20px;
}
.portal-sidebar.collapsed .portal-nav-group-trigger .portal-nav-label {
  opacity: 0;
  width: 0;
  margin-left: 0;
  pointer-events: none;
}

/* ============================================================
   Ticket attachments — WhatsApp-style inline display
   ============================================================ */

.hc-attach-img {
  max-width: 260px; max-height: 260px; border-radius: var(--p-radius-md);
  display: block; cursor: pointer; margin-top: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.hc-msg-group.mine .hc-attach-img { margin-left: auto; }

.hc-attach-doc {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
  padding: 10px 12px; border-radius: var(--p-radius-md); background: var(--p-border-light);
  text-decoration: none; color: var(--p-text); max-width: 260px;
}
.hc-msg-group.mine .hc-attach-doc { background: #111111; color: #fff; margin-left: auto; }
.hc-attach-doc i { font-size: 24px; flex-shrink: 0; }
.hc-attach-doc .hc-attach-doc-info { min-width: 0; }
.hc-attach-doc .hc-attach-doc-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-attach-doc .hc-attach-doc-size { font-size: 11px; opacity: 0.7; }

.hc-attach-deleted {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px;
  border-radius: var(--p-radius-md); border: 1px dashed var(--p-border); color: var(--p-text-tertiary);
  font-size: 12px; font-style: italic; max-width: 260px;
}

/* Lightbox for full-size image viewing */
.hc-lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.hc-lightbox-overlay img { max-width: 92vw; max-height: 92vh; border-radius: var(--p-radius-md); }

/* Composer attach button + preview chip */
.hc-attach-btn {
  width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--p-text-tertiary);
  border: 1.5px solid var(--p-border); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background 0.15s;
}
.hc-attach-btn:hover { background: var(--p-border-light); }
.hc-attach-btn i { font-size: 18px; }

.hc-attach-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: var(--p-radius-sm); background: var(--p-border-light); font-size: 12px;
}
.hc-attach-chip button {
  border: none; background: none; cursor: pointer; font-size: 15px; color: var(--p-text-tertiary);
  line-height: 1; padding: 0 2px;
}


/* Attach menu (Photo / Document dropdown) */
.hc-attach-menu {
  position: absolute; bottom: 48px; left: 0; background: #fff;
  border: 1px solid var(--p-border); border-radius: var(--p-radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 6px; flex-direction: column; gap: 2px;
  min-width: 170px; z-index: 20;
}
.hc-attach-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: none;
  background: none; text-align: left; border-radius: var(--p-radius-sm); cursor: pointer;
  font-size: 13px; color: var(--p-text); width: 100%;
}
.hc-attach-menu-item:hover { background: var(--p-border-light); }
.hc-attach-menu-item i { font-size: 17px; color: var(--p-text-secondary); }

/* PDF icon badge inside the doc card */
.hc-attach-pdf-icon {
  width: 38px; height: 38px; border-radius: var(--p-radius-sm); flex-shrink: 0;
  background: #e0342533; display: flex; align-items: center; justify-content: center;
}
.hc-attach-pdf-icon i { font-size: 20px; color: #e03425; }
.hc-msg-group.mine .hc-attach-pdf-icon { background: rgba(255,255,255,0.2); }
.hc-msg-group.mine .hc-attach-pdf-icon i { color: #fff; }
.hc-attach-doc.hc-pdf-trigger { cursor: pointer; transition: transform 0.1s; }
.hc-attach-doc.hc-pdf-trigger:active { transform: scale(0.98); }

/* ============================================================
   Global explanation side drawer (off-canvas, pushes content left)
   ============================================================ */
.portal-content-drawer-wrap { display: flex; flex: 1; min-height: 0; overflow: hidden;position: relative; }
.portal-content-drawer-wrap .portal-content { flex: 1; min-width: 0; }

.portal-explanation-drawer {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-left: 1px solid var(--p-border-light);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: width 0.35s ease;
}
.portal-explanation-drawer.open { width: 400px; }
.portal-explanation-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--p-border-light);
  flex-shrink: 0;
}
.portal-explanation-drawer-title { font-size: 15px; font-weight: 700; white-space: nowrap; }
.portal-explanation-drawer-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--p-border);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.portal-explanation-drawer-close:hover { background: var(--p-border-light); }
.portal-explanation-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  font-size: 14px;
  line-height: 1.65;
}
.portal-explanation-drawer-body h3 { font-size: 14px; font-weight: 700; margin: 20px 0 8px; }
.portal-explanation-drawer-body h3:first-child { margin-top: 0; }
.portal-explanation-drawer-body p { margin: 0 0 10px; }
.portal-explanation-drawer-body ul { margin: 0 0 10px; padding-left: 18px; }

.portal-explanation-trigger-btn {
  position: absolute ;
  top: 28px;
  right: 28px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--p-text);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 50;
  transition: transform 0.15s;
}

/* Word-by-word reveal, staggered via inline animation-delay set in JS */
.portal-explanation-word {
  display: inline-block;
  opacity: 0;
  animation: portal-word-fade-in 0.4s ease forwards;
}
@keyframes portal-word-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .portal-explanation-drawer.open { width: 100%; position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; }
}

/* Shared Files gallery grid */
.hc-files-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.hc-file-card {
  position: relative; border: 1px solid var(--p-border); border-radius: var(--p-radius-md);
  overflow: hidden; background: #fff;
}
.hc-file-checkbox { position: absolute; top: 8px; left: 8px; z-index: 5; width: 18px; height: 18px; cursor: pointer; }
.hc-file-thumb { width: 100%; height: 140px; object-fit: cover; display: block; cursor: pointer; }
.hc-file-doc-preview {
  width: 100%; height: 140px; display: flex; align-items: center; justify-content: center;
  background: #e0342510; cursor: pointer;
}
.hc-file-doc-preview i { font-size: 40px; color: #e03425; }
.hc-file-info { padding: 8px 10px; }
.hc-file-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-file-meta { font-size: 11px; color: var(--p-text-tertiary); margin-top: 2px; }
.hc-file-delete-btn {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(0,0,0,0.5); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hc-file-delete-btn:hover { background: rgba(0,0,0,0.75); }
.hc-file-delete-btn i { font-size: 14px; }

/* Files drawer - mirrors .portal-explanation-drawer's structure/transition,
   but as its own independent element (different width, own open state) */
.portal-files-drawer {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-left: 1px solid var(--p-border-light);
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: width 0.35s ease;
}
.portal-files-drawer.open { width: 480px; }
.portal-files-drawer .portal-explanation-drawer-body { padding: 20px; }
@media (max-width: 900px) {
  .portal-files-drawer.open { width: 100%; position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; }
}

/* Read receipt indicator - WhatsApp-style check/checks icons */
.hc-seen-indicator {
  text-align: right; padding: 2px 24px 6px 0;
}
.hc-seen-indicator i { font-size: 16px; }
.hc-seen-sent { color: var(--p-text-tertiary); }
.hc-seen-read { color: #25D366; }

/* CSAT rating stars */
.hc-csat-stars { display: flex; justify-content: center; gap: 6px; }
.hc-csat-star {
  border: none; background: none; cursor: pointer; padding: 4px; color: #f5a623;
}
.hc-csat-star i { font-size: 30px; }

/* Inline CSAT prompt - shown as a centered system-message card within the thread */
.hc-csat-inline {
  margin: 8px auto 16px; max-width: 280px; text-align: center;
  background: var(--p-border-light); border-radius: var(--p-radius-md); padding: 16px;
}
.hc-csat-title { font-weight: 600; margin: 0 0 4px; font-size: 13px; }
.hc-csat-subtitle { font-size: 12px; color: var(--p-text-tertiary); margin: 0 0 12px; }

/* In-conversation "Find" bar (portal) */
.conv-search-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--p-border); background: var(--p-border-light);
}
.conv-search-bar > i.ph-magnifying-glass { color: var(--p-text-tertiary); font-size: 15px; }
.conv-search-bar input {
  flex: 1; border: none; background: none; font-size: 13px; outline: none;
}
.conv-search-count { font-size: 12px; color: var(--p-text-tertiary); white-space: nowrap; }
.conv-search-bar button {
  border: none; background: none; cursor: pointer; color: var(--p-text-tertiary);
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--p-radius-sm);
}
.conv-search-bar button:hover { background: #fff; color: var(--p-text); }
.conv-search-highlight { background: #fef08a; border-radius: 2px; }
.conv-search-highlight.active { background: #fb923c; }


.table-customizer-header-bg{
  background: var(--adt-surface-header-bg);
  border-radius: var(--adt-container-radius) var(--adt-container-radius) 0 0;
}

.table-customizer-body-bg{
  background: var(--adt-surface-body-bg);
  border-radius: 0 0 var(--adt-container-radius) var(--adt-container-radius);
}


/* ── Sites table — branding overrides ── */
.portal-sites-table th {
  color:   var(--adt-text-muted,   var(--p-text-tertiary));
  font-size: var(--adt-font-size,  11px);
  padding: var(--adt-td-padding,   10px) 14px;
}

.portal-sites-table td {
  padding:    var(--adt-td-padding,   10px);
  font-size:  var(--adt-font-size,    14px);
  color:      var(--adt-text-primary, var(--p-text));
  background: var(--adt-surface-row,  transparent);
}

.portal-sites-table tbody tr:hover td {
  background: var(--adt-surface-hover, var(--p-border-light));
}

.portal-sites-table-wrap {
  background:   var(--adt-surface-card, var(--p-surface));
  border-radius: var(--adt-container-radius, var(--p-radius-md));
}


/* Dropdown CSS */
.custom-select-wrap {
  position: relative;
  display: inline-block;
  min-width: 120px;
  user-select: none;
   width: fit-content;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px !important;
  font-size: var(--pb-dd-font-size);
  font-weight: 500;
  color: var(--pb-dd-text-color);
  background: var(--pb-dd-bg);
  border: var(--pb-dd-border-width) solid #d9d9d9;
  border-radius: var(--pb-dd-border-radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  height: 33px;
}

.custom-select-trigger:hover {
  border-color: var(--pb-dd-opt-hover-border-color);
}

.custom-select-wrap.open .custom-select-trigger {
  border-color: var(--pb-dd-focus-border-color);
  box-shadow: 0 0 0 0.2px var(--pb-dd-focus-ring-color);
}

.custom-select-wrap.open .custom-select-trigger svg {
  transform: rotate(180deg);
}

.custom-select-trigger svg {
  transition: transform 0.15s;
  color: var(--pb-dd-icon-color);
  flex-shrink: 0;
}

 .custom-select-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  background: var(--pb-dd-menu-bg);
  border: 1px solid var(--pb-dd-menu-border-color);
  border-radius: var(--pb-dd-menu-border-radius);
  box-shadow: 1px 1px 4px var(--pb-dd-menu-shadow-color), 0 1px 1px var(--pb-dd-menu-shadow-color);
  padding: var(--pb-dd-menu-padding-v) 4px;
  z-index: 9999;
}

.custom-select-wrap.open .custom-select-panel,
.custom-select-panel.open {
  display: block;
}

.custom-option {
  padding: var(--pb-dd-opt-padding-v) var(--pb-dd-opt-padding-h);
  margin-bottom: 4px;
  font-size: var(--pb-dd-opt-font-size);
  color: var(--pb-dd-opt-text);
  background: var(--pb-dd-opt-bg);
  border: 1px solid var(--pb-dd-opt-border-color);
  border-radius: var(--pb-dd-opt-radius);
  cursor: pointer;
  transition: background 0.1s;
}

.custom-option:hover, .phone-country-option:hover {
  background: var(--pb-dd-opt-hover-bg);
  color: var(--pb-dd-opt-hover-text);
  border-color: var(--pb-dd-opt-hover-border-color);
}

.custom-option.selected {
  font-weight: var(--pb-dd-opt-active-font-weight);
  color: var(--pb-dd-opt-active-text);
  background: var(--pb-dd-opt-active-bg);
  border-color: var(--pb-dd-opt-active-border-color);
}

.custom-select-wrap select[required] {
  display: none;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* A required dropdown that starts on an empty "Select ..." option (data-cs-required). The real select sits invisibly
   under the trigger, so the browser can focus it and show its own "select an item" message there; a display:none
   select cannot be focused and the browser would block the form without saying anything. */
.custom-select-wrap select[data-cs-required] {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
/* After a failed submit the trigger turns red like the other required dropdowns (browsers without :user-invalid just keep the message). */
.custom-select-wrap:has(select[data-cs-required]:user-invalid) .custom-select-trigger {
  border-color: #b91c1c;
}


.custom-input-field {
  width: 200px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--p-text);
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.4;
}

.custom-input-field::placeholder {
  color: var(--p-text-muted, #aaa);
  font-weight: 400;
}

.custom-input-field:hover {
  border-color: var(--p-border-strong, #a0a0a0);
}

.custom-input-field:focus {
  border-color: var(--p-accent, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.10);
}
@keyframes portal-spin {
  to { transform: rotate(360deg); }
}


/* Thin scrollbar, hidden until hover (Attio-style) */
/* Firefox only: other browsers use the ::-webkit-scrollbar rules below */

.custom-select-list,
#phone-country-list {
  margin: 6px 6px 6px 6px !important;
}
@supports (-moz-appearance: none) {
  .custom-select-list,
  #phone-country-list {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .custom-select-list:hover,
  #phone-country-list:hover {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
}

/* Chrome, Edge, Safari */
.custom-select-list::-webkit-scrollbar,
#phone-country-list::-webkit-scrollbar {
  width: 6px;
}
.custom-select-list::-webkit-scrollbar-track,
#phone-country-list::-webkit-scrollbar-track {
  background: transparent;
}
.custom-select-list::-webkit-scrollbar-thumb,
#phone-country-list::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
}
.custom-select-list:hover::-webkit-scrollbar-thumb,
#phone-country-list:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
}
.custom-select-list::-webkit-scrollbar-thumb:hover,
#phone-country-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.35);
}
.custom-select-list::-webkit-scrollbar-button,
#phone-country-list::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.custom-select-search .custom-input-field:focus,
.custom-select-search .custom-input-field:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--p-border);
}

/* Input Fields Type Text*/

input[type="text"],input[type="url"],input[type="tel"] {
  width: 100%;
  height: 33px;
  padding: 0 14px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: #252525 !important;

  background: #ffffff !important;
  border: 1px solid #d9d9d9;
  border-radius: 6px;

  outline: none;
  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* Placeholder
   NOTE: the original selector was `input[type="text"],input[type="url"],input[type="tel"]::placeholder`,
   so only the tel placeholder was ever styled (the comma made the other two target
   the input itself, where !important colour above already won). Kept as-is. */
input[type="tel"]::placeholder {
  color: #999;
  opacity: 1;
}

/* Hover */
input[type="text"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover {
  border-color: #b8b8b8;
}


/* Focus */
input[type="text"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus {
  border-color: var(--pb-dd-focus-ring-color);
  box-shadow: 0 0 0 0.1px var(--pb-dd-focus-ring-color);
}

/* Disabled */
input[type="text"]:disabled,input[type="url"]:disabled,input[type="tel"]:disabled,input[type="email"]:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Back Arrows */

.portal-eyebrow a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--p-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #083903;
  text-decoration: none;
  padding:8px ;
  border-radius: 6px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.portal-eyebrow a:hover {
  background: #dddddd;
  border-color: #044b13;
  color: #083903;
}

.portal-eyebrow a:active {
  background: #dddddd;
  transform: translateX(-1px);
}

/* animate the icon separately */
.portal-eyebrow__icon {
  font-size: 14px;
  transition: transform 0.18s ease;
}

.portal-eyebrow a:hover .portal-eyebrow__icon {
  transform: translateX(-2px);
}


.portal-cancel-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--p-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--p-text-tertiary);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.portal-cancel-link:hover {
  color: var(--p-text-secondary);
  border-bottom-color: var(--p-text-tertiary);
}

.portal-cancel-link:active {
  color: var(--p-text-primary);
}

/* icon nudges left on hover */
.portal-cancel-link__icon {
  font-size: 14px;
  transition: transform 0.18s ease;
}

.portal-cancel-link:hover .portal-cancel-link__icon {
  transform: translateX(-2px);
}

/* ── Track ── */
/* ── Track wrapper approach — the file wraps the input in .wrap ── */
/* Adapt your existing track styles to match: */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.2rem;
  background: transparent;
  border: none;
  border-radius: 2.5rem;
  outline: none;
  cursor: pointer;
  padding: 0.375rem;
  /* filter: drop-shadow(0 1px 2px #040404); */
  transition: filter 0.3s ease-out;
}

input[type="range"]::-webkit-slider-runnable-track {
  overflow: visible; /* allows thumb to overflow the track */
  height: 100%;
  border-radius: 1.5rem;
  background: #434343;
  box-shadow: inset 0 2px 3px #3a3a3a, 0 1px 1px #b0b0b0;
}

/* ── Thumb (Chrome/Safari/Edge) ── */
input[type="range"]::-webkit-slider-thumb {
  margin-top: -0.35rem;
  -webkit-appearance: none;
  box-sizing: border-box;
  border: solid 5px transparent;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  box-shadow: 0 0 2px 1px rgba(243, 243, 243, 0.65);
  background:
    radial-gradient(circle at center, #747474 55%, transparent 55%) padding-box,
    repeating-conic-gradient(#818181, #fefefe, #818181 120deg) border-box;
  cursor: ew-resize;
  transition: transform 0.15s ease;
}


input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.06);
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(0.96);
}

/* ── Track (Firefox) ── */
input[type="range"]::-moz-range-track {
  opacity: 0;
}

/* ── Thumb (Firefox) ── */

input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  border: solid 5px transparent;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  box-shadow: 0 0 2px 1px rgba(243, 243, 243, 0.65);
  background:
    radial-gradient(circle at center, #282827 55%, transparent 55%) padding-box,
    repeating-conic-gradient(#818181, #fefefe, #818181 120deg) border-box;
  cursor: ew-resize;
  transition: transform 0.15s ease;
}

input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
  transform: scale(1.06);
}

input[type="range"]:active::-moz-range-thumb {
  transform: scale(0.96);
}

/* ── Progress fill (Firefox) ── */
input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #282827;
}


/* Main Buttons */
.aw-btn {
  --fp-circle-d: 34px;
  --fp-overlap: 10px;
  --fp-accent: #1e120d;
  --fp-accent-hover: #120d0b;
  --fp-pill-bg: #1a110e;
  --fp-pill-bg-hover: #1f1512;
  --fp-pill-border: #2e201c;
  --fp-pill-border-hover: #42302a;
  --fp-text: #a8a09c;
  --fp-text-hover: #c8bfbb;
  --fp-page-bg: #0e0a09;
  --fp-silver-shadow: #828385;
  --fp-silver-mid: #aeafb1;
  --fp-silver-bright: #c9c9c9;
  --fp-silver-highlight: #d8d8d8;

  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  border-radius: 21px;
  background: var(--fp-pill-bg);
  border: 1px solid var(--fp-pill-border);
  /* padding: 0 22px 0 calc(var(--fp-circle-d) * 0.5 + var(--fp-overlap) + 12px); */
  padding: 0 16px 0 18px;
  margin-left: calc(var(--fp-circle-d) * 0.5 + var(--fp-overlap));
  color: var(--fp-text);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(174, 175, 177, 0.05);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
    cursor :pointer;
}

.aw-btn:hover {
  background: var(--pb-btn-sec-border);
  color:white;
  /* border-color: var(--fp-pill-border-hover);
  color: var(--fp-text-hover); */
  /* box-shadow:
    0 4px 16px rgba(8, 32, 14, 0.22),
    0 1px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(174, 175, 177, 0.09); */
}

.aw-btn:active {
  background: #0b1610;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(174, 175, 177, 0.04);
}

.aw-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--fp-page-bg),
    0 0 0 4px rgba(174, 175, 177, 0.35);
}

.aw-btn .aw-btn__circle {
  position: absolute;
  left: calc(-1 * (var(--fp-circle-d) * 0.5 + var(--fp-overlap)));
  top: 50%;
  transform: translateY(-50%);
  width: var(--fp-circle-d);
  height: var(--fp-circle-d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #b6b7ba;
  background-image:
    linear-gradient(#431507, #291b16),
    conic-gradient(
      from 200deg,
      #828385 0deg,
      #aeafb1 60deg,
      #d8d8d8 120deg,
      #c9c9c9 160deg,
      #aeafb1 200deg,
      #8c8c8f 260deg,
      #828385 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 0 0 3px #291b16,
    0 0 0 4px #291b16,
    0 2px 8px rgba(10, 30, 15, 0.5),
    inset 0 1px 0 rgba(216, 216, 216, 0.10);
  transition:
    background-image 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

.aw-btn:hover .aw-btn__circle {
  box-shadow: 0 0 0 3px var(--pb-btn-sec-border), 0 0 0 4px var(--pb-btn-sec-border), 0 2px 8px var(--pb-btn-sec-border), inset 0 1px 0 rgba(216, 216, 216, 0.10);
 color: #fff;
}

.aw-btn:active .aw-btn__circle {
  background-image:
    linear-gradient(#0b1610, #0b1610),
    conic-gradient(
      from 200deg,
      #828385 0deg,
      #aeafb1 60deg,
      #d8d8d8 120deg,
      #c9c9c9 160deg,
      #aeafb1 200deg,
      #8c8c8f 260deg,
      #828385 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 0 3px var(--fp-page-bg),
    0 0 0 4px var(--fp-pill-border),
    0 1px 3px rgba(10, 30, 15, 0.4),
    inset 0 1px 0 rgba(216, 216, 216, 0.05);
}


/* Delete website button */

.delete-website-floating-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  text-decoration: none;
}

.delete-website-floating-btn .delete-website-floating-btn__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #b91c1c;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    conic-gradient(
      from 200deg,
      #828385 0deg,
      #aeafb1 60deg,
      #d8d8d8 120deg,
      #c9c9c9 160deg,
      #aeafb1 200deg,
      #8c8c8f 260deg,
      #828385 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
  /* box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(216, 216, 216, 0.08); */
  transition:
    background-image 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
    margin-left: -2px;
}

.delete-website-floating-btn:hover .delete-website-floating-btn__circle {
  background-image:
    linear-gradient(#ffffff, #ffffff),
    conic-gradient(
      from 200deg,
      #828385 0deg,
      #aeafb1 60deg,
      #d8d8d8 120deg,
      #c9c9c9 160deg,
      #aeafb1 200deg,
      #8c8c8f 260deg,
      #828385 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #991b1b;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.2);
}

.delete-website-floating-btn:active .delete-website-floating-btn__circle {
  background-image:
    linear-gradient(#fee2e2, #fee2e2),
    conic-gradient(
      from 200deg,
      #828385 0deg,
      #aeafb1 60deg,
      #d8d8d8 120deg,
      #c9c9c9 160deg,
      #aeafb1 200deg,
      #8c8c8f 260deg,
      #828385 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #b91c1c;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(216, 216, 216, 0.04);
}

.delete-website-floating-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(185, 28, 28, 0.35);
}

.delete-website-floating-btn[data-label="Back"] .delete-website-floating-btn__circle {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(216, 216, 216, 0.08);
  color: var(--p-text);
}

.delete-website-floating-btn[data-label="Back"]:hover .delete-website-floating-btn__circle {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: var(--p-text);
}

.delete-website-floating-btn .delete-website-floating-btn__circle i {
  transition: transform 0.25s ease;
}

.delete-website-floating-btn[data-label="Back"]:hover .delete-website-floating-btn__circle i {
  transform: translateX(-2px);
}

.delete-website-floating-btn[data-label="Back"]:active .delete-website-floating-btn__circle {
  background-image:
    linear-gradient(var(--pb-btn-sec-bg), var(--pb-btn-sec-bg)),
    conic-gradient(
      from 200deg,
      #828385 0deg,
      #aeafb1 60deg,
      #d8d8d8 120deg,
      #c9c9c9 160deg,
      #aeafb1 200deg,
      #8c8c8f 260deg,
      #828385 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--p-text);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(216, 216, 216, 0.04);
}

/* Add Website */
.add-site-btn {
  --fp-circle-d: 34px;
  --fp-page-bg: #0e0a09;
  --fp-pill-border: #2e201c;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fp-circle-d);
  height: var(--fp-circle-d);
  text-decoration: none;
  margin-left: 8px;
  margin-right: 7px;
  cursor: pointer;
  overflow: visible; /* needed so tooltip positions relative to the button */
}

.add-site-btn .add-site-btn__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #ffffff;
  background-image:
    linear-gradient(#431507, #291b16),
    conic-gradient(
      from 200deg,
      #828385 0deg,
      #aeafb1 60deg,
      #d8d8d8 120deg,
      #c9c9c9 160deg,
      #aeafb1 200deg,
      #8c8c8f 260deg,
      #828385 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 0 0 3px #291b16,
    0 0 0 4px #291b16,
    0 2px 8px rgba(10, 30, 15, 0.5),
    inset 0 1px 0 rgba(216, 216, 216, 0.10);
  transition:
    background-image 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

.add-site-btn:hover .add-site-btn__circle {
  box-shadow:
     0 0 0 3px var(--pb-btn-sec-border),
    0 0 0 4px var(--pb-btn-sec-border),
    0 2px 8px var(--pb-btn-sec-border),
    inset 0 1px 0 rgba(216, 216, 216, 0.10);
  color: #fff;
}

.add-site-btn:active .add-site-btn__circle {
  background-image:
    linear-gradient(#0b1610, #0b1610),
    conic-gradient(
      from 200deg,
      #828385 0deg,
      #aeafb1 60deg,
      #d8d8d8 120deg,
      #c9c9c9 160deg,
      #aeafb1 200deg,
      #8c8c8f 260deg,
      #828385 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 0 3px var(--fp-page-bg),
    0 0 0 4px var(--fp-pill-border),
    0 1px 3px rgba(10, 30, 15, 0.4),
    inset 0 1px 0 rgba(216, 216, 216, 0.05);
}

.add-site-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--fp-page-bg),
    0 0 0 4px rgba(174, 175, 177, 0.35);
}


.add-site-btn::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-80%);
  background: #111111;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--p-font-body);
  padding: 5px 10px;
  border-radius: var(--p-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.add-site-btn::before {
  content: '';
  position: absolute;
  top: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #111111;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.add-site-btn:hover::after,
.add-site-btn:hover::before {
  opacity: 1;
}


.cc-color-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding:6px ;
      box-shadow: inset rgba(0, 0, 0, 0.2) 0 0 0 1px, inset rgba(0, 0, 0, 0) 0 0 0 100px !important;
  border-radius: 10px;
  background:#f0f0f0;
  cursor: pointer;
  min-width: 0;
}
.cc-swatch-hidden {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.cc-swatch-pill {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
}

/* AI Simplify Button */
.btn-ai-simplify {
  position: relative;
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 8px 18px;
  cursor: pointer;
  z-index: 0;
  font-family: var(--p-font-body);
}

.btn-ai-simplify::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: conic-gradient(
  from var(--angle),
  #ff5d49,
  #ede9e9,
  #d8d8d8,
  #e5e5e5,
  #d8d8d8,
  #ede9e9,
  #ff5d49
);
  z-index: -1;
  animation: spin-border 3s linear infinite;
}

.btn-ai-simplify::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: white; /* match your button's actual background color */
  z-index: -1;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin-border {
  to { --angle: 360deg; }
}

#phone-picker-wrap {
  border: 1.5px solid var(--p-border) !important;
  background: var(--p-surface) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  overflow: visible !important;
}


.phone-country-option span:first-child,
#phone-country-flag {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 16px !important;
}

#phone-picker-wrap:focus-within {
  border-color: var(--pb-dd-focus-ring-color) !important;
  box-shadow: none !important;
}

#phone-country-trigger {
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-right: 1px solid var(--p-border) !important;
  gap: 6px !important;
  color: var(--p-text) !important;
}

#phone-country-trigger:hover {
  background: rgba(0,0,0,0.03) !important;
}

#profile-phone-number {
  padding: 7px 14px !important;
  font-size: 13px !important;
  color: var(--p-text) !important;
}

#profile-phone-number:focus {
  outline: none !important;
  box-shadow: none !important;
      border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

#phone-country-panel {
  border: 1px solid var(--p-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06) !important;
  background: var(--p-surface) !important;
  overflow: hidden !important;
}

#phone-country-search {
  padding: 7px 10px !important;
  font-size: 13px !important;
  border: 1px solid var(--p-border) !important;
  border-radius: 8px !important;
  background: var(--p-surface) !important;
  color: var(--p-text) !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}


.phone-country-option {
  padding: 8px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  transition: background 0.1s !important;
}


.portal-badge[data-tooltip] {
  position: relative;
  overflow: visible;
}

.portal-badge[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: none;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* .wsx-verif/.wsx-verif-link (the domain-verification question-mark icon,
   views/pages/portal/websites.ejs) used to share the rule above, but that
   is a ::after pseudo-element positioned absolute, and it lives inside
   .portal-table-wrap -- which only sets overflow-x:auto, forcing
   overflow-y to compute as auto too (same root cause the access picker
   popup hit), so the tooltip was silently clipped. Replaced with a real,
   shared element (.wsx-tooltip) that JS positions with
   getBoundingClientRect() and position:fixed, escaping that clipping. */
.wsx-tooltip {
  position: fixed;
  z-index: 9999;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

button.portal-btn-ghost[data-tooltip] {
  position: relative;
  overflow: visible;
}

button.portal-btn-ghost[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 50%;
  transform: translateX(-90%);
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

button.wa-add[title] {
  position: relative;
  overflow: visible;
}

button.wa-add[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  line-height: 1.4 !important;
  display: block !important;
}

a[data-tooltip]:not(.wsx-verif-link),
button[data-tooltip]:not(.portal-explanation-trigger-btn) {
  position: relative;
  overflow: visible;
}

/* Fix overflow for the absolute-positioned button separately */
button.portal-explanation-trigger-btn[data-tooltip] {
  overflow: visible;
}

/* :not(.wsx-verif-link) on both rules here: that one link now gets its
   tooltip from the JS-driven .wsx-tooltip bubble instead (see
   views/pages/portal/websites.ejs) because it lives inside
   .portal-table-wrap's clipped overflow context. Without the exclusion this
   generic rule still matched it too (anything with data-tooltip on an <a>),
   firing a SECOND, still-clipped CSS tooltip stacked on top of the new one -
   which is exactly the overlapping glitch this was meant to fix. */
a[data-tooltip]:not(.wsx-verif-link):hover::after,
button[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  bottom: auto;
  left: 50%;
  transform: translateX(-80%);
  background: #1a1a1a;
  color: #fff;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  line-height: 1.4 !important;
  display: block !important;
}

a.hud-btn[data-tooltip]:hover::after {
  top: auto;
  bottom: calc(100% + 6px);
}
/* ── Hold-to-charge button visual style ── */
/* Apply .hud-btn to any button alongside your existing classes */

.hud-btn {
  
  --button-background-active: #F6F7F7;
  --button-shadow: 
    inset 0px 0px 0px 1px rgba(0, 0, 0, 0),
    0px 0px 2px 0px rgba(28, 40, 64, 0.18),
    0px 1px 3px 0px rgba(0, 0, 0, 0.04);

  /* border: none; */
  border-radius: 8px;
  background: var(--pb-btn-sec-bg);
  box-shadow: var(--button-shadow);
  padding: 7px 12px;
  gap: 6px;
  transition: none;
}

.hud-btn:hover {
  background: var(--pb-btn-sec-hover-bg);
  border-color: transparent;
}

/* Hover-edge "dance" fix.
   `.hud-btn:hover { border: none }` used to beat `a.portal-btn { border: 1px }`,
   so on hover the button lost its 1px border and shrank 2px from the top-left.
   With the cursor on the right/bottom edge, hovering shrank the button out from
   under the cursor, which ended the hover, which grew it back... every frame,
   at every zoom (easiest to land in at 110%).
   The border now keeps its 1px of space and is just hidden, with the background
   clipped inside it - so the hovered button looks exactly as before but its
   hit area never changes. :active / [data-state="open"] keep their own border. */
a.portal-btn.hud-btn:hover:not(:active):not([data-state="open"]),
button.portal-btn.hud-btn:hover:not(:active):not([data-state="open"]) {
  border-color: transparent !important;
  background-clip: padding-box;
  border:  1px solid #6F7988 !important;
}

.hud-btn:active,
.hud-btn[data-state="open"] {
  background: var(--button-background-active);
  box-shadow:
    inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06),
    0px 0px 1px 0px rgba(28, 40, 64, 0.12);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.hud-btn:focus-visible {
  outline: none;
  box-shadow:
    var(--button-shadow),
    0 0 0 3px rgba(28, 40, 64, 0.12);
}

tr {
    background: var(--pb-cw-card);
}

a.portal-btn,
button.portal-btn {

  --button-background-active: #F6F7F7;
  --button-shadow: 
    inset 0px 0px 0px 1px rgba(0, 0, 0, 0),
    0px 0px 1px 0px rgba(28, 40, 64, 0.18),
    0px 1px 3px 0px rgba(0, 0, 0, 0.04);

  border: 1px solid #c8c8c8;
  border-radius: var(--pb-btn-radius, 8px);
  background: var(--pb-btn-sec-bg,#ffffff);
  box-shadow: var(--button-shadow);
  padding: 7px 12px;
  gap: 6px;
  transition: none;
  color: var(--pb-btn-sec-text);
}

a.portal-btn:hover,
button.portal-btn:hover {
  background: var(--pb-btn-sec-bg) !important;
  border-color: #6f7988 !important;   /* color only, no size change */
  transform: none !important;
  box-shadow: var(--button-shadow) !important;
  color: var(--pb-btn-sec-text) !important;
}

/* a.portal-btn/button.portal-btn above (element+class, specificity 0,1,1)
   otherwise beats .portal-btn-primary alone (0,1,0), silently turning every
   "primary" button white/outline except the ones that also happened to
   carry the extra portal-btn-signin modifier class. Matching that same
   element+class specificity (and the !important on its :hover) makes every
   .portal-btn-primary reliably solid black, with no per-button fix needed. */
a.portal-btn.portal-btn-primary,
button.portal-btn.portal-btn-primary {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #fff !important;
}
a.portal-btn.portal-btn-primary:hover,
button.portal-btn.portal-btn-primary:hover {
  background: #2b2b2b !important;
  border-color: #2b2b2b !important;
  color: #fff !important;
}

a.portal-btn:active,
a.portal-btn[data-state="open"],
button.portal-btn:active,
button.portal-btn[data-state="open"] {
  background: var(--button-background-active);
  border: 1px solid #e2e2e2;
  box-shadow:
    inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06),
    0px 0px 1px 0px rgba(28, 40, 64, 0.12);
  transition: background-color 0.2s, box-shadow 0.2s;
}

a.portal-btn:focus-visible,
button.portal-btn:focus-visible {
  outline: none;
  box-shadow:
    var(--button-shadow),
    0 0 0 3px rgba(28, 40, 64, 0.12);
}
/* ── Website access: stacked member avatars ─────────────────────────────── */
/*
 * Shown in the Websites table's Access column (Owner only). Avatars overlap
 * left-to-right; the "+N" chip and the add button are the same size and shape
 * so the row reads as one continuous stack.
 */
.wa-stack {
  display: inline-flex;
  align-items: center;
  /* Negative gap does the overlapping; each child re-establishes its own
     stacking context via position:relative so borders sit correctly. */
}
.wa-av {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--pb-nb-badge-bg, #4b5563);
  border: 2px solid var(--p-surface, #fff);
  overflow: hidden;
  margin-left: -8px;
}
.wa-stack .wa-av:first-child { margin-left: 0; }
.wa-av img { width: 100%; height: 100%; object-fit: cover; }

/* Overflow counter — muted so it reads as a count, not a person. */
.wa-av.wa-more {
  background: var(--p-border-light, #e5e7eb);
  color: var(--p-text-secondary, #4a4a4a);
  font-size: 10.5px;
}

/* Add button. A soft filled pill rather than a dashed outline: dashes break
   the circle's edge and read as ragged at this size. Slightly smaller than an
   avatar so it sits as a control beside them, not as another person. */
.wa-add {
  position: relative;
  width: 24px;
  height: 24px;
  margin-left: -6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Kill native button chrome, which otherwise distorts the circle. */
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 2px solid var(--p-surface, #fff);   /* matches the avatar ring */
  background: var(--p-border-light, #eceef1);
  color: var(--p-text-secondary, #4a4a4a);
  cursor: pointer;
  line-height: 0;                              /* no baseline shift */
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.wa-add:hover {
  background: var(--p-text, #111);
  color: #fff;
  transform: scale(1.08);
}
.wa-add:active { transform: scale(0.96); }
.wa-add:focus-visible {
  outline: 2px solid var(--p-text, #111);
  outline-offset: 2px;
}
.wa-add i {
  font-size: 12px;
  line-height: 1;
  display: block;
}

/* Nobody assigned yet — the add button stands alone, so give it no overlap. */
.wa-stack:empty + .wa-add { margin-left: 0; }

/* ── The picker dropdown ─────────────────────────────────────────────────── */
.wa-pop {
  position: absolute;
  z-index: 300;
  width: 290px;
  /* On a phone the Access cell is narrow and the popup is anchored to its right
     edge, so a fixed 290px box ran off the left of the screen. The clamp in
     waTogglePicker() slides it back into view; this stops it being wider than
     the screen in the first place. */
  max-width: calc(100vw - 24px);
  background: var(--p-surface, #fff);
  border: 1px solid var(--p-border, #d4d4d4);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: hidden;
  text-align: left;
}
.wa-pop-head {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--p-text-secondary, #4a4a4a);
  border-bottom: 1px solid var(--p-border-light, #eee);
}
.wa-pop-list { max-height: 260px; overflow-y: auto; }

/* Whole row is the control — no checkbox. */
.wa-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
}
.wa-opt:hover { background: var(--p-border-light, #f3f4f6); }
.wa-opt-body { flex: 1; min-width: 0; }
.wa-opt-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wa-opt-name {
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--p-text, #111);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-opt-role { display: block; margin-top: 1px; font-size: 11px; color: var(--p-text-tertiary, #6b6b6b); }

/* Icon-only "External" marker; the word is in its tooltip. */
.wa-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid #8b5cf6;
  border-radius: 50%;
  color: #8b5cf6;
  font-size: 10px;
  line-height: 1;
  cursor: default;
}
.wa-ext i { display: block; }
.wa-ext:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }

/* The row's checkbox is display only: the row's onclick toggles it. */
.wa-opt input[type="checkbox"] { pointer-events: none; }

.wa-pop-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--p-border-light, #eee);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.wa-empty { padding: 14px; font-size: 12.5px; color: var(--p-text-tertiary, #6b6b6b); }

@media (max-width: 640px) {
  .wa-pop { width: calc(100vw - 48px); }
}

/* ── Domain-verification indicator (Websites table) ─────────────────────── */
/*
 * Deliberately NOT a .portal-badge: that draws a pill border, and the Phosphor
 * "question" and "check-circle" glyphs are already circular — nesting them
 * produced two concentric rings. A single filled glyph carries the state.
 */
.wsx-verif {
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  vertical-align: -3px;      /* optically centres against the bold business name */
  flex-shrink: 0;
}
.wsx-verif-ok      { color: #16a34a; }              /* verified */
.wsx-verif-pending { color: var(--p-text, #111); }  /* black; the glyph's own
                                                       circle is the only ring */

a.wsx-verif-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 50%;
  transition: color .12s ease;
}
a.wsx-verif-link:hover .wsx-verif-pending { color: #000; }
/* Grow the icon, not the link: the data-tooltip ::after lives inside the link,
   so scaling the link also scaled and slid the tooltip (the hover "glitch"). */
a.wsx-verif-link .wsx-verif { transition: transform .12s ease; }
a.wsx-verif-link:hover .wsx-verif { transform: scale(1.12); }
a.wsx-verif-link:focus-visible {
  outline: 2px solid var(--p-text, #111);
  outline-offset: 2px;
}

/* ── Back link above a page title ───────────────────────────────────────── */
/*
 * Occupies the slot the .portal-eyebrow label used to fill on the website
 * pages, so the header keeps its three-line rhythm (kicker / title /
 * subtitle) with a useful control instead of a redundant word.
 */
.wsx-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-text-tertiary, #6b6b6b);
  text-decoration: none;
  transition: color .12s ease;
}
.wsx-back i { font-size: 13px; transition: transform .12s ease; }
.wsx-back:hover { color: var(--p-text, #111); }
.wsx-back:hover i { transform: translateX(-2px); }
.wsx-back:focus-visible {
  outline: 2px solid var(--p-text, #111);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── URL chip with copy action ──────────────────────────────────────────── */
.wsx-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 6px 5px 10px;
  border-radius: 8px;
  background: var(--p-border-light, #f1f2f4);
  border: 1px solid var(--p-border, #e3e5e8);
  font-size: 13px;
  color: var(--p-text-secondary, #4a4a4a);
  vertical-align: middle;
}
.wsx-url-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wsx-url-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--p-text-tertiary, #6b6b6b);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  line-height: 0;
  transition: background .12s ease, color .12s ease;
}
.wsx-url-copy i { font-size: 14px; line-height: 1; display: block; }
.wsx-url-copy:hover { background: var(--p-surface, #fff); color: var(--p-text, #111); }
.wsx-url-copy.is-copied { color: #16a34a; }
.wsx-url-copy:focus-visible {
  outline: 2px solid var(--p-text, #111);
  outline-offset: 1px;
}

/* The Verified badge sits beside the chip, not inside it. */
.wsx-url + .portal-badge { margin-left: 8px; vertical-align: middle; }

@media (max-width: 640px) {
  .wsx-url { max-width: 100%; }
}

/* ── Help Center bottom row ─────────────────────────────────────────────── */
/*
 * Deliberately the SAME track definition and gap as .hc-category-grid above
 * it, so the two cards land on the article columns exactly. Spanning tracks
 * is what makes the gap work out — hard-coding a width like
 * calc(66.66% + 7px) would drift the moment the grid or gap changes.
 */
.hc-bottom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  /* stretch (the default) rather than start: the two cards sit side by side
     and a ragged bottom edge reads as a mistake. The conversations list is
     capped at 3 tickets server-side, so neither card can run away with the
     row height. */
  align-items: stretch;
}
/* Both cards are two article cards wide, so they split the row evenly and
   land on the article columns. Spanning tracks (rather than a computed width)
   is what makes the 14px gap come out right. */
.hc-bottom-narrow { grid-column: span 2; }
.hc-bottom-wide   { grid-column: span 2; }

/* No conversations card (missing permission): the remaining card takes the
   full row rather than leaving a third of it empty. */
.hc-bottom-grid > .hc-bottom-wide:only-child { grid-column: 1 / -1; }

@media (max-width: 1150px) {
  /* Three article columns: give the CTA the extra track, since it carries a
     photo and the conversations list does not. */
  .hc-bottom-grid  { grid-template-columns: repeat(3, 1fr); }
  .hc-bottom-narrow { grid-column: span 1; }
  .hc-bottom-wide   { grid-column: span 2; }
}
@media (max-width: 900px) {
  /* Two article columns; one card each. */
  .hc-bottom-grid   { grid-template-columns: repeat(2, 1fr); }
  .hc-bottom-narrow { grid-column: span 1; }
  .hc-bottom-wide   { grid-column: span 1; }
}
@media (max-width: 560px) {
  .hc-bottom-grid { grid-template-columns: 1fr; }
  .hc-bottom-narrow, .hc-bottom-wide { grid-column: span 1; }
}

/* ── Help Center search: focus treatment ────────────────────────────────── */
/*
 * The global rule (.portal input:focus-visible) puts a 3px outline on the
 * inner <input>, which draws a hard rectangle INSIDE this rounded bar — that
 * is the heavy black edge, not a border on the bar itself.
 *
 * Moved to the wrapper so the indicator follows the bar's own shape. Focus
 * stays clearly visible on purpose: removing it outright would fail WCAG
 * 2.4.7, which matters rather a lot in an accessibility product.
 */
.hc-search input:focus,
.hc-search input:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: transparent;
  background: transparent;
}
.hc-search:focus-within {
  /* Border only — no ring around the bar. An added box-shadow reads as a
     second, outer border wrapping the whole control. The base shadow below is
     left untouched so the bar keeps its resting lift. */
  border-color: var(--p-text, #111);
}

/* ── Help Center "Still need help?" card ────────────────────────────────── */
/*
 * Photo bleeds in from the right, with a gradient over it that is fully
 * opaque on the left so the heading, body copy and button stay on flat card
 * colour. Two layers in one background shorthand: gradient first (drawn on
 * top), image second.
 *
 * The gradient stops are deliberately unevenly spaced — solid to ~42%, then a
 * long fade. A straight 50/50 fade leaves the text sitting on the midpoint of
 * the blend, where contrast is weakest.
 */
.hc-help-cta {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(
      100deg,
      var(--pb-cw-card, #fff) 0%,
      /* Sidebar grey, via the branding variable so it follows a workspace's
         theme rather than being pinned to today's value. Solid only across
         the text column, gone by 48%, so most of the card is bare photo.
         Fading a colour to `transparent` is safe here: browsers interpolate
         gradients with premultiplied alpha, so it does not wash through grey.
         The solid stop and the body's max-width below are a pair — the copy
         measured out to ~32% of the card after the grid went to four
         columns, so the stop moved with it. */
      var(--pb-sb-bg, #424242) 0%,
      var(--pb-sb-bg, #424242) 34%,
      transparent 56%,
      transparent 100%
    ),
    url('/img/help-center-support.webp');
  background-repeat: no-repeat, no-repeat;
  /* Vertical crop matters: the card is short and wide, so a centred 'cover'
     lands on the subject's chin. 18% lifts the frame onto his face. */
  background-position: center, right 18%;
  background-size: cover, cover;
  height: 100%; /* fill the stretched card so the photo covers its full height */
}

/* Keep the copy above the artwork and stop it running under the photo. */
.hc-help-cta .portal-card-body {
  position: relative;
  z-index: 1;
  /* Paired with the gradient's solid stop above — see the note there. */
  max-width: 27%;
  min-width: 210px;
  min-height: 190px;   /* floor when it is the taller card */
}
/* The wash is dark, so the copy inverts. Scoped to this card only. */
.hc-help-cta .portal-card-body h3 { color: #fff; }
.hc-help-cta .portal-card-body p  { color: rgba(255, 255, 255, 0.82); }

/* Narrower cards: the photo has too little room to read, so drop it and go
   back to a plain card rather than showing a sliver of someone's shoulder. */
@media (max-width: 900px) {
  /* Photo drops (too little room for it to read), but the grey MUST stay as a
     flat fill — the copy is inverted to white, and falling back to the card's
     own near-white would leave white text on near-white. */
  .hc-help-cta {
    background-image: none;
    background-color: var(--pb-sb-bg, #424242);
  }
  .hc-help-cta .portal-card-body { max-width: 100%; min-width: 0; min-height: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hc-help-cta { transition: background-size .3s ease; }
}

/* ── Scan detail: main column + sidebar ─────────────────────────────────── */
/*
 * Was an inline `1fr 320px`. A fixed track cannot shrink, so below ~700px the
 * second column was pushed outside the viewport and clipped by the page's
 * overflow — the Expert Services card simply vanished on phones rather than
 * wrapping. minmax lets it collapse.
 */
.wd-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 760px) {
  .wd-two-col { grid-template-columns: minmax(0, 1fr); }
}


.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Scoped under .pagination so it beats the global .portal-btn rules */
/* Page numbers: plain, no button look */
.pagination .portal-btn:not(.pagination__arrow) {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 8px;
  color: #7c806b;
  font-weight: 500;
  transform: none;
  transition: color .2s, background .2s;
}

.pagination .portal-btn:not(.pagination__arrow):hover {
  background: transparent;
  box-shadow: none;
  color: #1b2711;
  transform: none;
}

/* Current page */
.pagination .portal-btn.portal-btn-primary:not(.pagination__arrow) {
  background: #f5f3ff;
  color: #4F5827;
  font-weight: 600;
}
.pagination .portal-btn.pagination__arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3c431d;
  border-radius: 8px;
  background: #fafafa;
  color: #4F5827;
  font-size: 16px;
  line-height: 1;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .1s;
}

.pagination .portal-btn.pagination__arrow:hover {
  background: #f5f3ff;
  border-color: #4F5827;
  color: #254803;
}

.pagination .portal-btn.pagination__arrow:active {
  transform: scale(.94);
}

.pagination .portal-btn.pagination__arrow:focus-visible {
  outline: 2px solid #4F5827;
  outline-offset: 2px;
}

.pagination .portal-btn.pagination__arrow.is-disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}


/* 10th Loop */

/* =========================================================
   GLOBAL MODAL STYLE (Attio-like)
   Targets every  <div id="...-modal"> > .portal-card
   ========================================================= */

/* ---------- Overlay (never touch display: JS controls it) ---------- */

/* ---------- Card: 3px frame + layered shadow ---------- */
:is([id$="-modal"], [id*="-modal-"]) > .portal-card,#portal-feedback-overlay .portal-feedback-modal ,#portal-whatsnew-overlay .portal-whatsnew-modal{
  display: flex;
  flex-direction: column;
  overflow: hidden !important;          /* body scrolls instead of the whole card */
  background: #fff;
  border: 1px solid #e6e7ea;
  border-radius: 13px;
  box-shadow:
    0 0 0 3px #f4f5f7,                  /* the Attio outer frame */
    0 0 0 4px rgba(28, 40, 64, 0.08),
    rgba(28, 40, 64, 0.12) 0 8px 28px -6px,
    rgba(28, 40, 64, 0.16) 0 18px 88px -4px;
  transform-origin: 50% center;
  animation: portalModalIn .18s cubic-bezier(.2, .9, .3, 1.2);
}

/* Form becomes a flex column so header/footer stay fixed */
:is([id$="-modal"], [id*="-modal-"]) > .portal-card > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
}

/* ---------- Header ---------- */
:is([id$="-modal"], [id*="-modal-"]) .portal-card-header ,#portal-feedback-overlay .portal-feedback-header,#portal-whatsnew-overlay .portal-whatsnew-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid #eeeff1;
}

:is([id$="-modal"], [id*="-modal-"]) .portal-card-title,#portal-feedback-overlay .portal-feedback-header > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #232529;
}

/* Title icon becomes a small colored badge */
:is([id$="-modal"], [id*="-modal-"]) .portal-card-title > i:first-child {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 30%;
  background: #ff5d49;
  color: #fff;
  font-size: 12px;
}

/* Close button: plain icon, no button look */
:is([id$="-modal"], [id*="-modal-"]) .portal-card-header .portal-btn,
#portal-whatsnew-overlay .portal-whatsnew-close-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #75777c;
}

:is([id$="-modal"], [id*="-modal-"]) .portal-card-header .portal-btn:hover {
  background: #f1f2f4 !important;
  color: #232529;
}

/* ---------- Body: scrolls, scrollbar only on hover ---------- */
:is([id$="-modal"], [id*="-modal-"]) .portal-card-body,#portal-feedback-overlay .portal-feedback-body,#portal-whatsnew-overlay .portal-whatsnew-list{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

:is([id$="-modal"], [id*="-modal-"]) .portal-card-body:hover, 
#portal-whatsnew-overlay .portal-whatsnew-list:hover {
  scrollbar-color: rgba(28, 40, 64, 0.25) transparent;
}

@supports not (scrollbar-color: auto) {
  :is([id$="-modal"], [id*="-modal-"]) .portal-card-body::-webkit-scrollbar { width: 8px; }
  :is([id$="-modal"], [id*="-modal-"]) .portal-card-body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  :is([id$="-modal"], [id*="-modal-"]) .portal-card-body:hover::-webkit-scrollbar-thumb {
    background-color: rgba(28, 64, 30, 0.25);
  }
}

/* ---------- Fields ---------- */
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group > label,#portal-feedback-overlay .portal-feedback-label {
  display: block;
  padding-left: 4px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #232923;
}

:is([id$="-modal"], [id*="-modal-"]) .portal-form-group input[type="text"],
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group input[type="url"],
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group input[type="email"],
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group input[type="password"],
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group input[type="number"],
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group select,
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group textarea {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #e6e7ea;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #232529;
  box-shadow: none;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

:is([id$="-modal"], [id*="-modal-"]) .portal-form-group input::placeholder,
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group textarea::placeholder {
  color: #a6a8ad;
}

:is([id$="-modal"], [id*="-modal-"]) .portal-form-group input:hover,
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group select:hover,
:is([id$="-modal"], [id*="-modal-"]) .portal-form-group textarea:hover {
  border-color: #d4d6da;
}

/* ---------- Footer (the last div after the body) ---------- */
:is([id$="-modal"], [id*="-modal-"]) .portal-card-body + div,
:is([id$="-modal"], [id*="-modal-"]) .portal-card-footer,#portal-feedback-overlay .portal-feedback-footer {
  flex-shrink: 0;
  min-height: 48px;
  padding: 8px 10px 8px 14px !important;
  gap: 8px !important;
  align-items: center;
  border-top: 1px solid #eeeff1 !important;
  background: #fff;
}

/* ---------- Animation ---------- */
@keyframes portalModalIn {
  from { opacity: 0; scale: .96; translate: 0 -6px; }
  to   { opacity: 1; scale: 1;   translate: 0 0; }
}


/* =========================================================
   SELF-CONTAINED MODALS (the -modal element IS the card)
   Structure: div (header) / div (body) / div (footer)
   ========================================================= */
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) {
  display: flex;                        /* JS still wins when it sets display:none */
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid #e6e7ea;
  border-radius: 13px !important;
  box-shadow:
    0 0 0 3px #f4f5f7,
    0 0 0 4px rgba(28, 40, 64, 0.08),
    rgba(28, 40, 64, 0.12) 0 8px 28px -6px,
    rgba(28, 40, 64, 0.16) 0 18px 88px -4px !important;
  animation: portalModalIn .18s cubic-bezier(.2, .9, .3, 1.2);
}

/* Header */
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) > div:first-child {
  flex-shrink: 0;
  padding: 12px 14px !important;
  border-bottom: 1px solid #eeeff1 !important;
}

[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) > div:first-child > div {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #232529;
}

/* Body: scrolls, scrollbar only on hover */
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) > div:not(:first-child):not(:last-child) {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px !important;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) > div:not(:first-child):not(:last-child):hover {
  scrollbar-color: rgba(28, 40, 64, 0.25) transparent;
}

/* Footer */

/* Inputs inside these modals */
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) input[type="text"],
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) input[type="url"],
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) input[type="email"],
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) select,
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) textarea {
  border: 1px solid #e6e7ea;
  border-radius: 8px;
  background: #fff;
  color: #232529;
  outline: none;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}

[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) input:focus,
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) select:focus,
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) textarea:focus {
  border-color: #266df0;
  box-shadow: 0 0 0 3px rgba(38, 109, 240, 0.15);
}

/* Clickable option cards: subtle hover only */
[id$="-modal"]:not(:has(> .portal-card)):not([id="pdfp-modal"]) [onclick]:not(button):not(input):hover {
  background-color: #f9fafb;
}


/* =========================================================
   SEARCH MODAL (Attio command-palette style)
   ========================================================= */
div.portal-search-modal {
  display: flex;
  flex-direction: column;
  width: 640px;
  max-width: 95vw;
  max-height: min(520px, 70vh);
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e7ea;
  border-radius: 13px;
  box-shadow:
    0 0 0 3px #f4f5f7,
    0 0 0 4px rgba(28, 40, 64, 0.08),
    rgba(28, 40, 64, 0.12) 0 8px 28px -6px,
    rgba(28, 40, 64, 0.16) 0 18px 88px -4px;
  animation: portalModalIn .18s cubic-bezier(.2, .9, .3, 1.2);
}

/* ---------- Search row ---------- */
.portal-search-modal .portal-search-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 48px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid #eeeff1;
}

.portal-search-modal .portal-search-input-row > .ph-magnifying-glass {
  font-size: 16px;
  color: #9a9ca1;
  flex-shrink: 0;
}

.portal-search-modal #portal-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none !important;
  background: transparent;
  box-shadow: none !important;
  outline: none;
  font-size: 14px;
  color: #232529;
}

.portal-search-modal #portal-search-input::placeholder {
  color: #a6a8ad;
}

/* Clear button: plain icon */
.portal-search-modal .portal-search-clear-btn {
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #a6a8ad;
  font-size: 16px;
  cursor: pointer;
}

.portal-search-modal .portal-search-clear-btn:hover {
  color: #5c5e63;
  background: #f1f2f4;
}

/* Esc button: keyboard-key look */
.portal-search-modal .portal-search-close-btn {
  height: 22px;
  padding: 0 7px;
  border: 1px solid #e6e7ea;
  border-radius: 6px;
  background: #f7f7f8;
  box-shadow: 0 1px 0 #e6e7ea;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: #75777c;
  cursor: pointer;
  flex-shrink: 0;
}

.portal-search-modal .portal-search-close-btn:hover {
  background: #f1f2f4;
  color: #232529;
}

/* ---------- Results: scroll, scrollbar only on hover ---------- */
.portal-search-modal .portal-search-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.portal-search-modal .portal-search-results:hover {
  scrollbar-color: rgba(28, 40, 64, 0.25) transparent;
}

@supports not (scrollbar-color: auto) {
  .portal-search-modal .portal-search-results::-webkit-scrollbar { width: 8px; }
  .portal-search-modal .portal-search-results::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .portal-search-modal .portal-search-results:hover::-webkit-scrollbar-thumb {
    background-color: rgba(28, 40, 64, 0.25);
  }
}

/* ---------- Groups ---------- */
.portal-search-modal .portal-search-group + .portal-search-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #f1f2f4;
}

.portal-search-modal .portal-search-group-title {
  padding: 6px 10px 4px;
  font-size: 12px;
  font-weight: 500;
  color: #9a9ca1;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Result items ---------- */
.portal-search-modal .portal-search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: #232529;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
}

.portal-search-modal .portal-search-result-item > i {
  font-size: 16px;
  color: #75777c;
  flex-shrink: 0;
}

.portal-search-modal .portal-search-result-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover + keyboard-selected state */
.portal-search-modal .portal-search-result-item:hover,
.portal-search-modal .portal-search-result-item:focus-visible,
.portal-search-modal .portal-search-result-item.active,
.portal-search-modal .portal-search-result-item.is-active,
.portal-search-modal .portal-search-result-item.selected,
.portal-search-modal .portal-search-result-item[aria-selected="true"] {
  background: #f4f5f7;
  color: #101112;
  outline: none;
}

.portal-search-modal .portal-search-result-item:hover > i,
.portal-search-modal .portal-search-result-item.active > i,
.portal-search-modal .portal-search-result-item.is-active > i,
.portal-search-modal .portal-search-result-item.selected > i,
.portal-search-modal .portal-search-result-item[aria-selected="true"] > i {
  color: #266df0;
}

/* Replay the pop-in on open (this overlay uses an .open class, not display) */
#portal-feedback-overlay.open .portal-feedback-modal {
  animation: portalModalIn .18s cubic-bezier(.2, .9, .3, 1.2);
}

/* Footer sits inside the body here, so pull it to the card edges */
#portal-feedback-overlay .portal-feedback-footer {
  margin: 16px -16px -24px;
  justify-content: space-between;
}

/* Replay the pop-in on open (.open class, not display) */
#portal-whatsnew-overlay.open .portal-whatsnew-modal {
  animation: portalModalIn .18s cubic-bezier(.2, .9, .3, 1.2);
}

/* Close button sits before the header in the markup: pin it inside the header area */
#portal-whatsnew-overlay .portal-whatsnew-modal {
  position: relative;
}
#portal-whatsnew-overlay .portal-whatsnew-header {
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #232529;
  min-height: 44px;
  box-sizing: border-box;
}
#portal-whatsnew-overlay .portal-whatsnew-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}


/* Date Picker */
/* ==========================================================================
   Portal date picker
   Replaces the native popup of every input[type="date"] with a clean
   calendar. All selectors are prefixed with .pdp- so nothing else is touched.
   ========================================================================== */

/* --- Trigger (takes the input's place and copies its inline style) ------- */
.pdp-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font: inherit;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
      width: 150px;
    padding: 7px 12px !important;
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius-sm);
    font-family: var(--p-font-body);
    font-size: 12px;
    background: rgb(255, 255, 255);
    color: var(--p-text);
}
.pdp-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-trigger.is-empty .pdp-trigger-label {
  color: var(--p-text-muted, #9a9a9a);
}
.pdp-trigger-icon {
  flex-shrink: 0;
  color: var(--p-text-muted, #9a9a9a);
}
.pdp-trigger:hover {
  border-color: var(--p-border-strong, #a0a0a0) !important;
}
.pdp-trigger.is-open {
  border-color: var(--p-text-muted, #8a8a8a) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.pdp-trigger.is-invalid {
  border-color: #b91c1c !important;
}
.pdp-trigger:focus { outline: none; }
.pdp-trigger:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.pdp-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* --- Popup --------------------------------------------------------------- */
.pdp-popup {
  position: fixed;
  z-index: 10000;
  width: 272px;
  padding: 14px 12px 10px;
  box-sizing: border-box;
  background: var(--p-surface, #fff);
  border: 1px solid var(--p-border, #e5e5e5);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: var(--p-font-body, inherit);
  color: var(--p-text, #111);
  user-select: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.pdp-popup.is-flipped { transform: translateY(4px); }
.pdp-popup.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pdp-popup { transition: none; }
}

/* Header: arrows, month, year */
.pdp-header {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 10px;
}
.pdp-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--p-text, #111);
  cursor: pointer;
}
.pdp-nav:hover { background: rgba(0, 0, 0, 0.05); }
.pdp-nav:disabled { color: #c8c8c8; background: none; cursor: default; }
.pdp-month {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 600;
}
.pdp-year {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
}

/* Grid */
.pdp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}
.pdp-weekday {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--p-text-muted, #8a8a8a);
}
.pdp-day,
.pdp-blank {
  position: relative;
  height: 34px;
}
.pdp-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--p-text, #111);
  cursor: pointer;
  transition: background 0.1s;
}
.pdp-day:hover { background: rgba(0, 0, 0, 0.05); }
.pdp-day:focus { outline: none; }
.pdp-day:focus-visible { box-shadow: 0 0 0 2px var(--p-text, #111); }

.pdp-day.is-today { color: #ff5d47; font-weight: 600; }
.pdp-day.is-today::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #ff5d47;
}
.pdp-day.is-selected,
.pdp-day.is-selected:hover {
  background: var(--p-text, #111);
  color: #fff;
  font-weight: 600;
}
.pdp-day.is-selected::after { background: #fff; }
.pdp-day:disabled,
.pdp-day:disabled:hover {
  color: #c4c4c4;
  background: none;
  cursor: default;
}

/* Footer: shortcuts + clear */
.pdp-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--p-border-light, #efefef);
}
.pdp-chip {
  padding: 4px 9px;
  border: 1px solid var(--p-border, #e5e5e5);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--p-text, #111);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.pdp-chip:hover { background: rgba(0, 0, 0, 0.04); border-color: #cfcfcf; }
.pdp-chip:disabled { color: #c4c4c4; background: none; cursor: default; }
.pdp-clear {
  margin-left: auto;
  padding: 4px 6px;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--p-text-muted, #8a8a8a);
  cursor: pointer;
}
.pdp-clear:hover { color: var(--p-text, #111); }

/* ==========================================================================
   Portal global select
   The enhanced selects reuse your existing dropdown classes
   (.custom-select-trigger, .custom-select-panel, .custom-option,
   .custom-select-list, .custom-select-search, .custom-input-field),
   so they look exactly like your current dropdowns. The rules below only
   cover what those classes don't: the wrapper, button resets and states.
   ========================================================================== */

.pss-wrap {
  position: relative;
  display: inline-block;
  min-width: 120px;
  width: fit-content;
  max-width: 100%;
  vertical-align: middle;
  user-select: none;
}
.pss-wrap.pss-block { display: block; width: 100%; }

/* The trigger is a <button>, so reset what browsers add to buttons */
.pss-trigger {
  width: 100%;
  margin: 0;
  font-family: inherit;
  line-height: 1.4;
  text-align: left;
  box-sizing: border-box;
}
.pss-trigger:focus { outline: none; }
.pss-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); }
.pss-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pss-trigger.is-placeholder .pss-label { color: var(--p-text-muted, #9a9a9a); }
.pss-trigger:disabled { cursor: not-allowed; opacity: 0.55; }
.pss-trigger.is-invalid { border-color: #b91c1c !important; }

/* Open state, matching .custom-select-wrap.open */
.pss-wrap.open .custom-select-trigger {
  border-color: var(--pb-dd-focus-border-color);
  box-shadow: 0 0 0 0.2px var(--pb-dd-focus-ring-color);
}
.pss-wrap.open .custom-select-trigger svg { transform: rotate(180deg); }

/* Panel lives in <body> with position: fixed */
.pss-panel {
  padding: 0;
  overflow: hidden;
  max-width: 360px;
}
.pss-panel .custom-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pss-panel .custom-option.is-active {
  background: var(--pb-dd-opt-hover-bg);
  color: var(--pb-dd-opt-hover-text);
  border-color: var(--pb-dd-opt-hover-border-color);
}
.pss-panel .custom-option.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.pss-group {
  padding: 6px var(--pb-dd-opt-padding-h, 10px) 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-text-muted, #8a8a8a);
}
.pss-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--p-text-muted, #8a8a8a);
}

/* Spans that directly contain the arrow-right icon */
a:has(> i.ph-arrow-right,> i.ph-arrow-square-out) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}


/* Sign In button: filled primary style */
button.portal-btn.portal-btn-signin {
--button-background-base:   #212121;
--button-background-hover: #2a2a2a;
--button-background-active: #3E451E;
--button-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 2px 4px -2px rgba(79, 88, 39, 0.12), 0px 3px 6px -2px rgba(79, 88, 39, 0.08);
  margin: 0;
  outline: none;
  border: none;
  text-decoration: none;
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 9px;
  background: var(--button-background-base);
  box-shadow: var(--button-shadow);
  color: #ffffff;
  opacity: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
button.portal-btn.portal-btn-signin:hover {
  background: var(--button-background-hover) !important;
  color: #fff !important;
}
button.portal-btn.portal-btn-signin:active {
  background: var(--button-background-active);
}
button.portal-btn.portal-btn-signin:focus-visible {
  box-shadow: var(--button-shadow), 0 0 0 3px rgba(79, 88, 39, 0.25);
}

/* Review Alt Model */
/* =========================================================
   ALT TEXT MODAL: same design as the global modal style
   ========================================================= */

/* Card: frame + layered shadow (position, size and display stay inline) */
#portal-alttext-modal {
  border: 1px solid #e6e7ea !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 3px #f4f5f7,
    0 0 0 4px rgba(28, 40, 64, 0.08),
    rgba(28, 40, 64, 0.12) 0 8px 28px -6px,
    rgba(28, 40, 64, 0.16) 0 18px 88px -4px !important;
  animation: portalAltTextIn .18s cubic-bezier(.2, .9, .3, 1.2);
}

/* Same pop-in, but keeps the translate(-50%, -50%) centering */
@keyframes portalAltTextIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.96) translateY(-6px); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
}

/* Header */
#portal-alttext-modal > div:first-child {
  padding: 8px 8px 8px 14px !important;
  border-bottom: 1px solid #eeeff1 !important;
}
#portal-alttext-modal > div:first-child > div > div:first-child {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #232529;
}

/* Close button: plain icon */
#portal-alttext-modal > div:first-child > button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 6px;
  font-size: 16px !important;
  color: #75777c !important;
}
#portal-alttext-modal > div:first-child > button:hover {
  background: #f1f2f4 !important;
  color: #232529 !important;
}

/* Toolbar (search + checkbox) */
#portal-alttext-modal > div:nth-child(2) {
  padding: 10px 14px !important;
  border-bottom: 1px solid #eeeff1 !important;
}
#portal-alttext-search {
  min-height: 32px;
  padding: 6px 10px !important;
  border: 1px solid #e6e7ea;
  border-radius: 8px;
  background: #fff;
  font-size: 14px !important;
  color: #232529;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
#portal-alttext-search::placeholder { color: #a6a8ad; }
#portal-alttext-search:hover { border-color: #d4d6da; }
#portal-alttext-search:focus {
  border-color: #266df0;
  box-shadow: 0 0 0 3px rgba(38, 109, 240, 0.15);
}

/* Body: scrollbar only on hover */
#portal-alttext-body {
  padding: 16px 16px 24px !important;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#portal-alttext-body:hover {
  scrollbar-color: rgba(28, 40, 64, 0.25) transparent;
}

/* checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  background: #fff center / 10px 10px no-repeat;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .15s, border-color .15s;
  box-sizing: border-box;
  padding: 0;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: #ff5d49;
}

input[type="checkbox"]:checked {
  background-color: #ff5d49;
  border-color: #ff5d49;
  background-size: 9px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8' viewBox='0 0 9 8' fill='none'%3E%3Cpath d='M7.68.75 4.33 5.73c-.47.71-1.5.74-2.03.06L.75 3.76' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type="checkbox"]:focus {
  outline: none;
}

input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(79, 88, 39, 0.2);
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* --- Dashboard widgets: portfolio risk + never scanned ---------------------
   Two cards, two grid squares each, on the same 4-column .portal-stats-grid as
   the stat cards above, so the columns line up. */
.pd-span-2 { grid-column: span 2; }
/* At 860px the grid is 2 columns, so span 2 is already full width. At 520px it
   drops to a single column and a span of 2 would overflow the grid. */
@media (max-width: 520px) { .pd-span-2 { grid-column: span 1; } }

/* min-height so both widget headers are the same height whatever they contain.
   Without it the card carrying a badge has a taller row, and its centred title
   sits ~6px lower than the card beside it. */
.pd-widget-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; min-height: 28px; /* clears the 27px badge */
}
.pd-widget-title { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; }

/* Segments are flex-sized by count, so the bar IS the distribution rather than
   a picture of it. min-width keeps a single site visible. */
.pd-riskbar { display: flex; gap: 3px; height: 10px; margin-bottom: 14px; border-radius: 999px; overflow: hidden; }
.pd-riskseg { min-width: 6px; border-radius: 999px; }

.pd-risklegend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.pd-riskitem { display: flex; align-items: baseline; gap: 6px; color: inherit; text-decoration: none; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.pd-riskitem:hover { background: var(--p-border-light); }
.pd-riskitem:focus-visible { outline: 2px solid var(--p-text-secondary); outline-offset: 1px; }
.pd-riskdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.pd-riskcount { font-weight: 700; font-size: 15px; }
.pd-risklabel { font-size: 12px; color: var(--p-text-secondary); }

/* Severity colours are a secondary cue only — the legend always carries the
   number and the band name, so the bar is never the sole way to read this. */
.pd-risk-crit { background: #b91c1c; }
.pd-risk-high { background: #ea7317; }
.pd-risk-attn { background: #c79a1e; }
.pd-risk-low  { background: #3f8f5f; }

.pd-neverlist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.pd-neverlist li { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-neverlist a { color: inherit; text-decoration: none; }
.pd-neverlist a:hover { text-decoration: underline; }


/* Never-scanned card: rows rather than a bare list, so several sites sharing a
   business name are still tellable apart by hostname.

   Row padding and icon size are matched to the docs widget's rows (not to the
   never-scanned content itself, which is naturally shorter at one line) so
   the two cards that now share a row read as the same visual weight even
   though this one is capped at 3 items. */
.pd-never-intro { font-size: 12.5px; color: var(--p-text-secondary); margin: 0 0 10px; }
/* overflow:hidden + matching radius scoped to just this list, not the shared
   .portal-stat-card it sits in (unlike .portal-card, that class has no
   overflow:hidden of its own - other widgets on this grid may rely on that
   to NOT clip something, so the fix is scoped here instead of changing it
   globally). Without this, .pd-never-row's negative margin (below) pulls
   the hover highlight out almost to the card's own edge, and with no
   ancestor clipping it to the card's rounded corners, the square-cornered
   highlight visibly spilled past them on hover. */
.pd-never-list { display: flex; flex-direction: column; margin-top: -14px; overflow: hidden; border-radius: 8px; }
.pd-never-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 6px; margin: 0 -6px;
  border-top: 1px solid var(--p-border-light);
  color: inherit; text-decoration: none; border-radius: 8px;
}
.pd-never-row:first-child { border-top: 0; }
.pd-never-row:hover { background: var(--p-border-light); }
.pd-never-row:focus-visible { outline: 2px solid var(--p-text-secondary); outline-offset: -2px; }
.pd-never-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--p-border-light);
  color: var(--p-text-tertiary); font-size: 15px;
}
.pd-never-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pd-never-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-never-host { font-size: 12px; color: var(--p-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-never-go { color: var(--p-text-tertiary); font-size: 13px; flex-shrink: 0; }
.pd-never-row:hover .pd-never-go { color: var(--p-text-secondary); }
/* Widget header: a count badge plus a "View all" action, grouped in their own
   flex container so space-between on .pd-widget-head keeps them bundled on
   the right instead of spreading across the header. */
.pd-widget-head-actions { display: flex; align-items: center; gap: 10px; }
.pd-widget-viewall {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  color: var(--p-text-secondary); text-decoration: none;
  padding: 5px 10px; border: 1.5px solid var(--p-border); border-radius: 99px;
}
.pd-widget-viewall:hover { background: var(--p-border-light); color: var(--p-text); }
.pd-widget-viewall:focus-visible { outline: 2px solid var(--p-text-secondary); outline-offset: 1px; }
.pd-never-clear {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--p-text-secondary); padding: 14px 0;
}
.pd-never-clear i { font-size: 16px; color: #3f8f5f; }


/* Scheduled scans: the page editor. Every row is a page the source scan
   covered; there is no input for adding one, which is the remove-only rule
   made visible rather than merely enforced. */
.sched-pages-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92%; max-width: 560px; background: #fff;
  border-radius: var(--p-radius-md); box-shadow: 0 8px 32px rgba(0,0,0,0.18); z-index: 100;
}
.sched-pages-list { max-height: 320px; overflow-y: auto; margin: 0 -6px; }
.sched-page-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.sched-page-row:hover { background: var(--p-border-light); }
.sched-page-row input { flex-shrink: 0; }
/* URLs are long and must not widen the dialog. */
.sched-page-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Schedule dialog.
   No field styling here on purpose: every control is a select or a date input,
   and portal.js swaps both for its own components, hiding the original and
   copying its inline style onto the replacement. Styling the hidden originals
   was dead weight. Only the layout around them is set below. */
#schedule-modal .form-group { margin-bottom: 14px; }
#schedule-modal .form-group label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--p-text-secondary);
}


/* Notification popup: Settings link as a small ghost button */
a[href$="/notifications/preferences"]:has(> i.ph-gear) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #5c5e63 !important;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
a[href$="/notifications/preferences"]:has(> i.ph-gear) > i {
  font-size: 14px;
  color: #8a8c91;
  transition: color .15s, transform .3s ease;
}
a[href$="/notifications/preferences"]:has(> i.ph-gear):hover {
  background: #f1f2f4;
  border-color: #e6e7ea;
  color: #232529 !important;
}
a[href$="/notifications/preferences"]:has(> i.ph-gear):hover > i {
  color: #232529;
  transform: rotate(45deg);
}
a[href$="/notifications/preferences"]:has(> i.ph-gear):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 109, 240, 0.2);
}

/* Dashboard: upcoming scheduled scans. Full width under the two-square pair. */
.pd-span-4 { grid-column: span 4; }
@media (max-width: 860px) { .pd-span-4 { grid-column: span 2; } }
@media (max-width: 520px) { .pd-span-4 { grid-column: span 1; } }

.pd-upcoming { display: flex; flex-direction: column; margin: -9px 0; }
.pd-upcoming-row {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 6px; margin: 0 -6px;
  border-top: 1px solid var(--p-border-light);
  color: inherit; text-decoration: none; border-radius: 8px;
}
.pd-upcoming-row:first-child { border-top: 0; }
.pd-upcoming-row:hover { background: var(--p-border-light); }
.pd-upcoming-row:focus-visible { outline: 2px solid var(--p-text-secondary); outline-offset: -2px; }
/* Fixed column so the dates line up down the list rather than ragging with
   the length of each site name. */
.pd-upcoming-when {
  flex: 0 0 170px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-upcoming-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pd-upcoming-site { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-upcoming-sub { font-size: 11.5px; color: var(--p-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-upcoming-go { color: var(--p-text-tertiary); font-size: 13px; flex-shrink: 0; }
.pd-upcoming-row:hover .pd-upcoming-go { color: var(--p-text-secondary); }
@media (max-width: 640px) {
  .pd-upcoming-row { flex-wrap: wrap; gap: 4px 12px; }
  .pd-upcoming-when { flex: 1 1 100%; }
}


/* Dashboard: the Scores card.
   One card, two panels behind a toggle. Only .pd-score-link survives from the
   two cards this replaced; the row-list styles went with them. */
.pd-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--p-border-light); border-radius: 999px;
}
.pd-toggle-btn {
  border: 0; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 6px 13px; border-radius: 999px;
  background: transparent; color: var(--p-text-tertiary);
}
.pd-toggle-btn:hover { color: var(--p-text-secondary); }
.pd-toggle-btn.is-on {
  background: var(--p-surface); color: var(--p-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.pd-toggle-btn:focus-visible { outline: 2px solid var(--p-text-secondary); outline-offset: 1px; }
.pd-hidden { display: none; }

/* Each score is a full card (name, improvement badge, ring, pages/date),
   matching views/pages/portal/a11y-top-score.ejs's .ats-card rather than the
   compact ring-plus-label row this replaced. Negative margin on the list
   cancels the card's own 18px/20px padding, same trick .pd-riskitem uses, so
   the cards line up with the widget's edges. Gap is generous on purpose per
   design feedback that the previous row read as too tight. */
.pd-scorecards { display: flex; flex-wrap: wrap; gap: 18px; margin: 6px -2px -2px; }
.pd-scorecard {
  flex: 1 1 160px; min-width: 150px;
  background: var(--p-surface); border: 1px solid var(--p-border-light);
  border-radius: 12px; padding: 18px 16px;
  text-decoration: none; color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pd-scorecard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.07); }
.pd-scorecard:focus-visible { outline: 2px solid var(--p-text-secondary); outline-offset: -2px; }

.pd-scorecard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.pd-scorecard-id { min-width: 0; }
.pd-scorecard-name {
  font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-scorecard-host {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--p-text-tertiary); margin-top: 2px;
  min-width: 0;
}
.pd-scorecard-host-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Smaller than .wsx-url-copy (same data-copy mechanism) to fit a narrow card
   header; stopPropagation on the click listener keeps this from also
   triggering the card's own link navigation. */
.pd-scorecard-host-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0; padding: 0;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--p-text-tertiary); cursor: pointer; line-height: 0;
}
.pd-scorecard-host-copy i { font-size: 11px; line-height: 1; display: block; }
.pd-scorecard-host-copy:hover { background: var(--p-border-light); color: var(--p-text); }
.pd-scorecard-host-copy.is-copied { color: #16a34a; }
.pd-scorecard-host-copy:focus-visible { outline: 2px solid var(--p-text-secondary); outline-offset: 1px; }
.pd-scorecard-badge {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.pd-scorecard-badge.up { background: #e8f8ee; color: #15803d; }
.pd-scorecard-badge.down { background: #fdecec; color: #b91c1c; }

.pd-scorecard-ring-wrap { width: 92px; margin: 0 auto 18px; }
/* A <span> by default, so without an explicit display it stays inline and the
   width/height/position:relative below have no effect, leaving .pd-ring-num's
   absolute centering with nothing to center against. Flex only here because
   the OTHER place this class is used (.pd-ring-item, a flex container) used
   to blockify it automatically — this wrapper isn't flex, so it needs it. */
.pd-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* Only added by the script, so the ring is never left mid-transition for a
   reader whose JS did not run. The duration matches the score page. */
.pd-ring-arc-anim { transition: stroke-dashoffset 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .pd-ring-arc-anim { transition: none; } }
.pd-ring-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.pd-scorecard-stats {
  display: flex; justify-content: space-around;
  border-top: 1px solid var(--p-border-light); padding-top: 14px;
}
.pd-scorecard-stat { text-align: center; }
.pd-scorecard-stat-value { font-weight: 700; font-size: 13.5px; }
.pd-scorecard-stat-label { font-size: 11px; color: var(--p-text-tertiary); margin-top: 2px; }

.pd-score-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--p-text-secondary);
}
.pd-score-link:hover { text-decoration: underline; }


/* Dashboard: latest documentation. */
.pd-docs-list { display: flex; flex-direction: column; margin: -10px 0; }
.pd-docs-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 6px; margin: 0 -6px;
  border-top: 1px solid var(--p-border-light);
  color: inherit; text-decoration: none; border-radius: 8px;
}
.pd-docs-row:first-child { border-top: 0; }
.pd-docs-row:hover { background: var(--p-border-light); }
.pd-docs-row:focus-visible { outline: 2px solid var(--p-text-secondary); outline-offset: -2px; }
.pd-docs-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pd-docs-title { font-size: 13px; font-weight: 600; }
/* Excerpts vary wildly in length, so two lines keeps the rows even. */
.pd-docs-excerpt {
  font-size: 12px; color: var(--p-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-docs-meta { font-size: 11px; color: var(--p-text-tertiary); }
.pd-docs-go { color: var(--p-text-tertiary); font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.pd-docs-row:hover .pd-docs-go { color: var(--p-text-secondary); }

/* Badge css */
#portal-badge-outline-navbar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.matrix-orb-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #fdbab2;
  background: #d14e3894;
  box-sizing: border-box;
  flex-shrink: 0;
}

.matrix-orb-icon {
  width: 16px;
  height: 16px;
  display: block;
  color: #fff;
}

.matrix-orb-icon { overflow: visible; }

/* =========================================================
   Global loading system (TenthLoop loop animation)
   ========================================================= */

.tl-status {
  --tl-text: #4A4D42;
  --tl-shine: #B9BCA6;
  --tl-dot: #C98F1E;
  --tl-muted: #8A8D7E;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
}
.on-olive {
  --tl-text: #E9E6D6;
  --tl-shine: #FFFFFF;
  --tl-dot: #E0A93B;
  --tl-muted: #B8BBA0;
}

.tl-loop3d {
  display: block;
  flex-shrink: 0;
  color: var(--tl-dot, #E0A93B);
  overflow: visible;
}

.tl-text {
  background: linear-gradient(90deg,
    var(--tl-text) 0%, var(--tl-text) 40%,
    var(--tl-shine) 50%,
    var(--tl-text) 60%, var(--tl-text) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tl-shimmer 3.6s ease-in-out infinite;
  transition: opacity .5s ease;
}
@keyframes tl-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -50% 0; }
}
.tl-time { color: var(--tl-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.tl-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: #4F5827;
  border-radius: 16px;
  padding: 32px 24px 26px;
}
.tl-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #4F5827;
  border-radius: 16px;
  padding: 18px 24px;
}
.tl-card-title { font-size: 15px; font-weight: 500; margin: 0 0 2px; color: #F4F1E4; }

/* Centers an inline loader inside a section, dropdown or drawer */
.portal-loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* Button while waiting: loop + plain label in the button's own text colour */
.portal-btn.is-loading,
button.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: progress !important;
}

/* Page navigation loader: small pill at the top of the screen */
#portal-page-loader {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* Needed because .tl-status sets display, which would otherwise override [hidden] */
#portal-page-loader[hidden] { display: none; }

/* Visually hidden, still read by screen readers */
.portal-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tl-text { animation: none; background: none; color: var(--tl-text); }
}


/* =========================================================
   Signup: Timezone dropdown
   Same layout as the Profile Timezone dropdown, with the
   shared dropdown search box and the hover-only scrollbar.
   Scoped to the wrap that contains select#timezone, which
   only exists on the Signup page (Login and Profile are
   not affected).
   ========================================================= */

/* Panel: no padding, clipped corners, capped width */
.custom-select-wrap:has(> select#timezone) .custom-select-panel {
  padding: 0;
  overflow: hidden;
  max-width: 360px;
}

/* Search box: same as the shared dropdown search */
.custom-select-wrap:has(> select#timezone) .custom-select-search {
  padding: 6px 6px 4px 6px;
  border-bottom: 1px solid var(--pb-dd-menu-border-color);
}
.custom-select-wrap:has(> select#timezone) .custom-select-search .custom-input-field {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 12px;
}

/* Scrolling list: same size and spacing as Profile Timezone */
.custom-select-wrap:has(> select#timezone) .signup-tz-list {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 220px;
  padding: var(--pb-dd-menu-padding-v) 4px;
}
.custom-select-wrap:has(> select#timezone) .signup-tz-list .custom-option {
  white-space: nowrap;
}

/* Signup Timezone: hover-only scrollbar using the standard properties,
   which Chrome redraws on hover (same approach as the modal body) */
/* Signup Timezone: hover-only scrollbar without arrow buttons.
   The thumb uses the list's text color, which Chrome redraws on hover. */
@supports not (-moz-appearance: none) {
  .custom-select-wrap:has(> select#timezone) .custom-select-list {
    scrollbar-width: auto;          /* keep Chrome on the ::-webkit-scrollbar rules */
    scrollbar-color: auto;
    color: rgba(0, 0, 0, 0);        /* thumb hidden at rest */
    transition: color 0.15s;
  }
  .custom-select-wrap:has(> select#timezone) .custom-select-list:hover {
    color: rgba(0, 0, 0, 0.2);      /* thumb shown on hover */
  }
  .custom-select-wrap:has(> select#timezone) .custom-select-list::-webkit-scrollbar-thumb {
    background-color: currentColor;
  }
  .custom-select-wrap:has(> select#timezone) .custom-select-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.35);
  }
}


/* =========================================================
   Signup: Country dropdown
   Same layout, search box and hover-only scrollbar as the
   Signup Timezone dropdown. Scoped to select#country, which
   only exists on Signup (Profile uses #billing_country).
   ========================================================= */
.custom-select-wrap:has(> select#country) .custom-select-panel {
  padding: 0;
  overflow: hidden;
  max-width: 360px;
}
.custom-select-wrap:has(> select#country) .custom-select-search {
  padding: 6px 6px 4px 6px;
  border-bottom: 1px solid var(--pb-dd-menu-border-color);
}
.custom-select-wrap:has(> select#country) .custom-select-search .custom-input-field {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 12px;
}
.custom-select-wrap:has(> select#country) .custom-select-list .custom-option {
  white-space: nowrap;
}

/* Hover-only scrollbar without arrow buttons (same fix as Timezone) */
@supports not (-moz-appearance: none) {
  .custom-select-wrap:has(> select#country) .custom-select-list {
    scrollbar-width: auto;
    scrollbar-color: auto;
    color: rgba(0, 0, 0, 0);
    transition: color 0.15s;
  }
  .custom-select-wrap:has(> select#country) .custom-select-list:hover {
    color: rgba(0, 0, 0, 0.2);
  }
  .custom-select-wrap:has(> select#country) .custom-select-list::-webkit-scrollbar-thumb {
    background-color: currentColor;
  }
  .custom-select-wrap:has(> select#country) .custom-select-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.35);
  }
}
/* Signup Timezone + Country: on mobile, keep the panel inside the screen
   and wrap long options instead of widening the panel */
@media (max-width: 640px) {
  .custom-select-wrap:has(> select#timezone) .custom-select-panel,
  .custom-select-wrap:has(> select#country) .custom-select-panel {
    max-width: calc(100vw - 32px) !important;
  }
  .custom-select-wrap:has(> select#timezone) .custom-option,
  .custom-select-wrap:has(> select#country) .custom-option {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

.portal-welcome {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.portal-welcome > *:not(.welcome-dots) {
  position: relative;
  z-index: 1;
}

.welcome-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Security tab (views/pages/portal/profile.ejs): Password/Email/Google/2FA
   cards, two per row. A class rather than the inline grid style used
   elsewhere in that file for small field-pairs, because those stay 2-up at
   any width inside one narrow card - these are full .portal-card blocks and
   need to collapse to one column before they get uncomfortably squeezed. */
.security-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 700px) {
  .security-cards-grid { grid-template-columns: 1fr; }
}

/* Alert Message */

.tl-alert {
  --tl-alert-color: #dc2626;      /* brand error red */
  --tl-alert-bg: #fef2f2;
  --tl-alert-border: #fecaca;

  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--tl-alert-border);
  border-radius: 10px;
  background: var(--tl-alert-bg);
  color: #7f1d1d;
  font: 500 13px/1.45 inherit;
  animation: tl-alert-in .25s ease-out;
}

.tl-alert::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  background: var(--tl-alert-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes tl-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-color-scheme: dark) {
  .tl-alert {
    --tl-alert-bg: rgba(220, 38, 38, .12);
    --tl-alert-border: rgba(220, 38, 38, .35);
  }
}

/* --- Password strength bar + rules popup (password-strength-ui.js) --- */
.pw-strength-wrap { margin-top: 6px; }
.pw-strength-bar {
  width: 100%; height: 4px; border-radius: 2px;
  background: var(--p-border-light, #eee); overflow: hidden;
}
.pw-strength-fill {
  height: 100%; width: 0; border-radius: 2px;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.pw-strength-fill.pw-strength-0 { background: #e53935; }
.pw-strength-fill.pw-strength-1 { background: #ec6c21; }
.pw-strength-fill.pw-strength-2 { background: #e0b400; }
.pw-strength-fill.pw-strength-3 { background: #8bc34a; }
.pw-strength-fill.pw-strength-4 { background: #2e9e4f; }
.pw-strength-label { font-size: 11px; color: var(--p-text-tertiary); margin-top: 3px; min-height: 14px; }

.pw-rules-popup {
  display: none;
  position: absolute; z-index: 20;
  /* Anchored to .pw-wrap, whose own height is just the input - but the
     strength bar+label (.pw-strength-wrap) sits right after .pw-wrap, so the
     popup needs enough top offset to clear that too, not just the input. */
  top: calc(100% + 12px); left: 0;
  background: #fff; border: 1px solid var(--p-border); border-radius: var(--p-radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 10px 14px; min-width: 230px;
}
.pw-rules-popup.open { display: block; }
.pw-rules-popup ul { list-style: none; margin: 0; padding: 0; }
.pw-rules-popup li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--p-text-secondary);
  padding: 3px 0;
}
.pw-rules-popup li i { font-size: 14px; color: var(--p-text-tertiary); flex-shrink: 0; }
.pw-rules-popup li.pw-rule-passed { color: var(--p-text); }
.pw-rules-popup li.pw-rule-passed i { color: #2e9e4f; }

/* Required-field marker (form-gate.js) - same spot/weight as the existing
   "(optional)" labels already used on fields that aren't required. */
.required-mark { color: #e53935; margin-left: 2px; }