/**
 * RMB Portal - CSS Client Extension (T-027)
 * =============================================================================
 * Injected by Liferay as a global stylesheet via client-extension.yaml.
 *
 * Responsibilities:
 *   1. Import RMB fonts (RMB Sans)
 *   2. Declare all --rmb-* design tokens on :root (identical to tokens.css
 *      in the packages/ui Shadow DOM - kept in sync manually)
 *   3. Override the Liferay page layout to accommodate the sidebar nav widget
 *   4. Provide utility classes used by CE widgets rendered outside Shadow DOM
 *   5. Print stylesheet
 *
 * What this file does NOT do:
 *   - Modify Liferay control panel or admin UI
 *   - Redefine Clay component internals (those are not used in the new portal)
 * =============================================================================
 */

/* ── 1. Fonts ──────────────────────────────────────────────────────────────── */
/*
 * Fonts are served from the rmb-portal-widgets CE static assets.
 * Base path: /o/rmb-portal-widgets/rmb-theme/fonts/
 * Available files: RMBSans-Light, RMBSans-Regular, RMBSans-Bold, RMBSans-Display
 * Thin (100) → Light, ExtraBold (700) → Bold, Black (900) → Bold (best available)
 */

@font-face {
  font-family: 'RMB Sans';
  src: url('/o/rmb-portal-widgets/rmb-theme/fonts/RMBSans-Light.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RMB Sans';
  src: url('/o/rmb-portal-widgets/rmb-theme/fonts/RMBSans-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RMB Sans';
  src: url('/o/rmb-portal-widgets/rmb-theme/fonts/RMBSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RMB Sans';
  src: url('/o/rmb-portal-widgets/rmb-theme/fonts/RMBSans-Bold.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RMB Sans';
  src: url('/o/rmb-portal-widgets/rmb-theme/fonts/RMBSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RMB Sans';
  src: url('/o/rmb-portal-widgets/rmb-theme/fonts/RMBSans-Bold.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'RMB Sans Display';
  src: url('/o/rmb-portal-widgets/rmb-theme/fonts/RMBSans-Display.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Design Tokens ─────────────────────────────────────────────────────── */
/* Identical to packages/ui/src/tokens.css - keep in sync.                     */

:root {
  /* Brand palette */
  --rmb-black:          #000000;
  --rmb-orange:         #ff9c1c;
  --rmb-accent-deep:    #f47920;
  --rmb-accent-soft:    #fef3e2;
  --rmb-warn:           #8a5a00;
  --rmb-navy:           #1a0956;
  --rmb-white:          #ffffff;
  --rmb-grey-dark:      #4d4d4d;
  --rmb-grey-mid:       #6d7c86;
  --rmb-grey-light:     #f3f2f0;
  --rmb-grey-border:    #ebe7df;
  --rmb-text-primary:   #323232;
  --rmb-text-secondary: #666666;
  --rmb-text-on-dark:   #ffffff;
  --rmb-text-on-orange: #000000;

  /* Semantic */
  --rmb-error:   #b00020;
  --rmb-success: #1d7d3a;
  --rmb-warning: #ff9c1c;
  --rmb-info:    #0c6dbd;

  /* Shadows */
  --rmb-shadow-sm:   0 2px 4px 0 rgba(0, 0, 0, 0.10);
  --rmb-shadow-md:   0 4px 12px 0 rgba(0, 0, 0, 0.12);
  --rmb-shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.08);
  --rmb-shadow-card: 0 2px 8px 0 rgba(0, 0, 0, 0.08);

  /* Typography */
  --rmb-font-family:    'RMB Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rmb-font-size-xs:   12px;
  --rmb-font-size-sm:   14px;
  --rmb-font-size-base: 16px;
  --rmb-font-size-md:   18px;
  --rmb-font-size-lg:   20px;
  --rmb-font-size-xl:   24px;
  --rmb-font-weight-light:    300;
  --rmb-font-weight-regular:  400;
  --rmb-font-weight-medium:   500;
  --rmb-font-weight-bold:     700;
  --rmb-letter-spacing-tight: 0.2px;
  --rmb-letter-spacing-base:  0.3px;
  --rmb-letter-spacing-wide:  0.5px;
  --rmb-letter-spacing-wider: 1.1px;
  --rmb-line-height-tight:    1.2;
  --rmb-line-height-base:     1.5;
  --rmb-line-height-relaxed:  1.7;

  /* Spacing */
  --rmb-space-1:   4px;  --rmb-space-2:   8px;  --rmb-space-3:   12px;
  --rmb-space-4:   16px; --rmb-space-5:   20px; --rmb-space-6:   24px;
  --rmb-space-8:   32px; --rmb-space-10:  40px; --rmb-space-12:  48px;
  --rmb-space-16:  64px;

  /* Border radius */
  --rmb-radius-sm:  4px;
  --rmb-radius-md:  5px;
  --rmb-radius-lg:  8px;
  --rmb-radius-xl:  12px;
  --rmb-radius-full: 9999px;

  /* Borders */
  --rmb-border-color:        rgba(0, 0, 0, 0.10);
  --rmb-border-color-strong: rgba(0, 0, 0, 0.20);
  --rmb-border-orange:       rgba(255, 156, 28, 0.40);

  /* Focus */
  --rmb-focus-ring: 0 0 0 3px rgba(255, 156, 28, 0.25);

  /* Layout */
  --rmb-header-height:        64px;
  --rmb-header-border-bottom: 1px solid var(--rmb-border-color);
  --rmb-sidebar-width:        264px;
  --rmb-sidebar-collapsed:    76px;
  --rmb-cadmin-height:        56px;
  --rmb-sidebar-transition:   all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --rmb-content-padding:      28px;
  --rmb-content-padding-sm:   16px;

  /* Transitions */
  --rmb-transition-fast: 150ms ease;
  --rmb-transition-base: 250ms ease;
  --rmb-transition-slow: 350ms ease;

  /* Z-index */
  --rmb-z-sidebar:  100;
  --rmb-z-overlay:  200;
  --rmb-z-drawer:   300;
  --rmb-z-modal:    400;
  --rmb-z-toast:    500;
}

/* ── 3. Base Reset ────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--rmb-font-family);
  font-size: var(--rmb-font-size-base);
  font-weight: var(--rmb-font-weight-light);
  color: var(--rmb-text-primary);
  background-color: var(--rmb-grey-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 4. Keyframes ────────────────────────────────────────────────────────── */

@keyframes rmb-spin {
  to { transform: rotate(360deg); }
}

/* ── Edit mode: stand down the RMB shell so Liferay's page editor is usable ──
 * When a page is being edited (p_l_mode=edit), rmb-portal-config.js adds
 * .rmb-edit-mode to <html> and skips injecting the sidebar/top-bar chrome.
 * These resets undo the layout offsets so the editor + fragments panel are
 * fully clickable. */
html.rmb-edit-mode rmb-sidebar-nav.rmb-global-sidebar,
html.rmb-edit-mode #rmb-sidebar-resize-handle,
html.rmb-edit-mode .rmb-mobile-burger {
  display: none !important;
}
html.rmb-edit-mode #content,
html.rmb-edit-mode .portlet-layout > #content,
html.rmb-edit-mode #banner,
html.rmb-edit-mode #footer {
  margin-left: 0 !important;
}

/* ── 5. Top bar (design.md §3.2) - white, offset right of the fixed sidebar ── */

#banner {
  min-height: 64px !important;
  overflow: visible !important;
  background-color: var(--rmb-white) !important;
  border-bottom: 1px solid var(--rmb-border-color) !important;
  box-shadow: none !important;
  padding: 0 24px !important;
  margin-left: var(--rmb-sidebar-width) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: var(--rmb-z-sidebar) !important;
  transition: margin-left var(--rmb-sidebar-transition);
}

/* Site label (left), injected by rmb-portal-config.js */
#banner .rmb-topbar-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  flex: 0 0 auto;
  min-width: 0;
}
.rmb-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--rmb-text-secondary);
}
.rmb-crumb a { color: var(--rmb-text-secondary); text-decoration: none; }
.rmb-crumb a:hover { color: var(--rmb-text-primary); text-decoration: underline; }
.rmb-page-title {
  font-size: 16px;
  font-weight: var(--rmb-font-weight-bold);
  color: var(--rmb-text-primary);
  line-height: 1.25;
  white-space: nowrap;
}

/* As-at chip + notification bell (right), injected by rmb-portal-config.js */
#banner .rmb-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.rmb-asat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--rmb-text-secondary);
  white-space: nowrap;
}
.rmb-asat svg { flex-shrink: 0; opacity: 0.7; }
.rmb-bell {
  position: relative;
  width: 40px; height: 40px;
  border: none; background: transparent;
  border-radius: var(--rmb-radius-lg);
  display: grid; place-items: center;
  color: var(--rmb-text-secondary);
  cursor: pointer;
  transition: background var(--rmb-transition-fast), color var(--rmb-transition-fast);
}
.rmb-bell:hover, .rmb-bell.is-open { background: var(--rmb-surface-2, #FAF9F7); color: var(--rmb-text-primary); }

/* Unread badge on the bell */
.rmb-bell-badge {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--rmb-orange);
  color: #17130d;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--rmb-surface, #fff);
}

/* ── Notifications panel ── */
.rmb-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--rmb-surface, #fff);
  border: 1px solid var(--rmb-border-color);
  border-radius: var(--rmb-radius-lg);
  box-shadow: 0 16px 40px rgba(10,10,13,0.14), 0 2px 8px rgba(10,10,13,0.06);
  z-index: 1200;
  overflow: hidden;
  animation: rmb-notif-in 160ms ease-out;
}
@keyframes rmb-notif-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.rmb-notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rmb-border-color);
}
.rmb-notif-title { font-size: 14px; font-weight: 700; color: var(--rmb-text-primary); }
.rmb-notif-clear {
  border: none; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--rmb-text-secondary);
  padding: 4px 6px; border-radius: 6px;
  transition: color var(--rmb-transition-fast), background var(--rmb-transition-fast);
}
.rmb-notif-clear:hover { color: var(--rmb-orange); background: var(--rmb-surface-2, #FAF9F7); }
.rmb-notif-clear:disabled { opacity: 0.4; cursor: default; }
.rmb-notif-list { max-height: 360px; overflow-y: auto; }
.rmb-notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rmb-border-color);
  cursor: pointer;
  transition: background var(--rmb-transition-fast);
}
.rmb-notif-item:last-child { border-bottom: none; }
.rmb-notif-item:hover { background: var(--rmb-surface-2, #FAF9F7); }
.rmb-notif-item.is-unread .rmb-notif-item-dot { background: var(--rmb-orange); }
.rmb-notif-item-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--rmb-border-color);
  margin-top: 6px; flex-shrink: 0;
}
.rmb-notif-item-body { flex: 1; min-width: 0; }
.rmb-notif-item-title { font-size: 13px; font-weight: 600; color: var(--rmb-text-primary); margin: 0 0 2px; }
.rmb-notif-item.is-unread .rmb-notif-item-title { font-weight: 700; }
.rmb-notif-item-desc { font-size: 12.5px; color: var(--rmb-text-secondary); margin: 0; line-height: 1.4; }
.rmb-notif-item-time { font-size: 11px; color: var(--rmb-text-secondary); opacity: 0.75; margin-top: 4px; }
.rmb-notif-item-dismiss {
  border: none; background: none; cursor: pointer;
  color: var(--rmb-text-secondary); opacity: 0; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  transition: opacity var(--rmb-transition-fast), background var(--rmb-transition-fast), color var(--rmb-transition-fast);
}
.rmb-notif-item:hover .rmb-notif-item-dismiss { opacity: 1; }
.rmb-notif-item-dismiss:hover { background: var(--rmb-border-color); color: var(--rmb-text-primary); }
.rmb-notif-item.is-job.is-unread .rmb-notif-item-dot { background: #157836; border-color: #157836; }
.rmb-notif-item.is-job.is-failed .rmb-notif-item-dot { background: #C22F34; border-color: #C22F34; }
.rmb-notif-item.is-busy { opacity: .6; pointer-events: none; }
@media (hover: none) { .rmb-notif-item-dismiss { opacity: 1; } }

/* ── Background report download toasts (rmb-portal-config.js showJobToast) ── */
.rmb-job-toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 1300;
  display: grid; gap: 10px; width: min(380px, calc(100vw - 32px));
}
.rmb-job-toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: 12px;
  background: #0A0A0D; color: #F5F4F2;
  box-shadow: 0 8px 8px -4px rgba(10,10,13,.18);
  font-family: var(--rmb-font-family);
  animation: rmb-job-toast-in 220ms cubic-bezier(.22,1,.36,1);
}
@keyframes rmb-job-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.rmb-job-toast-body { flex: 1; min-width: 0; }
.rmb-job-toast-title { margin: 0; font-size: 14px; font-weight: 600; color: #FA9D1E; }
.rmb-job-toast.is-failed .rmb-job-toast-title { color: #F5F4F2; }
.rmb-job-toast-name { margin: 4px 0 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.rmb-job-toast-error { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: #A2A4AA; }
.rmb-job-toast-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.rmb-job-toast-primary {
  min-height: 36px; padding: 0 14px; border: none; border-radius: 8px; cursor: pointer;
  background: #FA9D1E; color: #0A0A0D; font: 600 13px var(--rmb-font-family);
  transition: background 150ms ease, transform 150ms ease;
}
.rmb-job-toast-primary:hover:not(:disabled) { background: #FCB246; }
.rmb-job-toast-primary:active:not(:disabled) { transform: scale(.97); }
.rmb-job-toast-primary:disabled { opacity: .7; cursor: default; }
.rmb-job-toast-link { font-size: 13px; font-weight: 600; color: #F5F4F2 !important; text-decoration: underline; text-underline-offset: 3px; }
.rmb-job-toast-close {
  flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center;
  border: none; border-radius: 6px; background: none; color: #A2A4AA; cursor: pointer;
}
.rmb-job-toast-close:hover { background: #222228; color: #F5F4F2; }
.rmb-job-toast-primary:focus-visible, .rmb-job-toast-link:focus-visible, .rmb-job-toast-close:focus-visible {
  outline: 2px solid #F47920; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .rmb-job-toast { animation: none; } }

/* ── Session expiry reminder (rmb-portal-config.js startSessionReminder) ── */
.rmb-session-reminder {
  position: fixed !important; inset: 0 !important; z-index: 2147483100;
  width: 100% !important; max-width: none !important; margin: 0 !important;
  display: none; place-items: center; padding: 16px;
  background: rgba(10,10,13,.55); backdrop-filter: blur(2px);
  font-family: var(--rmb-font-family);
}
.rmb-session-reminder.is-open { display: grid; }
#sessionToast.rmb-session-card {
  width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  margin: 0; padding: 28px; border: none; border-radius: 8px;
  background: #FFFFFF; color: #0A0A0D; text-align: left;
  box-shadow: 0 12px 24px -8px rgba(10,10,13,.18);
  animation: rmb-job-toast-in 220ms cubic-bezier(.22,1,.36,1);
}
#sessionToast .alert-indicator { color: #F47920; }
#sessionToast .alert-title { font-size: 18px; font-weight: 700; }
#sessionToast .alert-body { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#sessionToast .countdown-timer { font-weight: 700; font-variant-numeric: tabular-nums; }
#sessionToast .rmb-session-primary {
  display: flex; width: fit-content; align-items: center; justify-content: center;
  min-height: 44px; margin-top: 20px; padding: 0 20px; border: none; border-radius: 8px; cursor: pointer;
  background: #FA9D1E; color: #0A0A0D; font: 600 14px var(--rmb-font-family);
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
}
#sessionToast .rmb-session-primary:hover { background: #FCB246; }
#sessionToast .rmb-session-primary:focus-visible, #sessionToast button:focus-visible { outline: 2px solid #F47920; outline-offset: 2px; }
@media (max-width: 480px) {
  #sessionToast .rmb-session-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { #sessionToast.rmb-session-card { animation: none; } }
.rmb-notif-empty {
  padding: 32px 16px; text-align: center;
  font-size: 13px; color: var(--rmb-text-secondary);
}

#banner #heading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rmb-space-4);
}

/* Logo now lives in the sidebar header - hide any banner logo */
#banner .rmb-header-logo,
#banner .custom-logo {
  display: none !important;
}

/* Portfolio selector CE widget - sits beside the title on community pages */
rmb-portfolio-selector {
  flex: 0 1 420px;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 420px;
  container-type: inline-size;
}

/* Profile area on the right; does not grow */
#profile-info-area { flex-shrink: 0; }

/* Hide Liferay's built-in navigation - replaced by sidebar CE widget.
 * Dialect theme does NOT use #navigation - the nav lives inside #banner
 * as .navbar-expand-md (site pages) and .navbar-form (search bar). */
#banner .navbar.navbar-expand-md {
  display: none !important;
}

/* Hide search bar from header - RMB portal uses its own navigation */
#banner .navbar-form {
  display: none !important;
}

/* Hide LiferayDXP logo/title - actual class in Dialect theme is a.logo / .default-logo */
#banner a.logo {
  display: none !important;
}

/* Liferay profile/personal-bar - moved into the sidebar user card (design.md §3.1) */
#banner .navbar-top {
  display: none !important;
}

/* The portal breadcrumb describes the old page hierarchy and competes with the
 * application title. The compact site label above is the sole page context. */
#banner .breadcrumb,
#banner .breadcrumb-horizontal,
#banner nav[aria-label="Breadcrumb"] {
  display: none !important;
}

/* Profile drawer CE: pull out of content flow and pin to the far-right of
 * the 80px header bar so it always appears as a header action icon.
 * Sits above the Liferay admin bar (z-index 1000) but below modals. */
rmb-profile-drawer {
  position: fixed;
  top: var(--rmb-cadmin-bar-height, 48px); /* account for admin bar height */
  right: var(--rmb-space-5, 20px);
  height: var(--rmb-header-height);
  display: flex;
  align-items: center;
  z-index: calc(var(--rmb-z-drawer, 1040) + 1);
}

/* ── 6. Sidebar Layout ────────────────────────────────────────────────────── */

/**
 * When the page body has class .has-sidebar (set by portal_normal.ftl),
 * the main content area is offset to the right by the sidebar width.
 *
 * The sidebar CE widget itself is position: sticky / fixed and sits
 * alongside #content. We use a flex wrapper around sidebar + content.
 */

#wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* ensures top bar + footer span the content column */
  min-height: 100vh;
  padding: 0 !important;
  overflow: visible !important;
}

/* ── Logo injected by globalJS into the left of #banner ─────────────────── */
.rmb-header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  padding: 0 var(--rmb-space-5, 20px);
  text-decoration: none;
  overflow: hidden;
}

/* Defeat any Liferay/Bootstrap img { height: auto !important } rule */
#banner .rmb-header-logo img,
.rmb-header-logo img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ── Global sidebar nav - full-height rail (design.md §3.1) ────────────── */
rmb-sidebar-nav.rmb-global-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--rmb-sidebar-width);
  z-index: calc(var(--rmb-z-sidebar) + 10);
  overflow: hidden;
  /* Transparent host - inner motion.nav owns the background.
   * This prevents the white ghost when the sidebar slides off-screen on mobile. */
  background-color: transparent !important;
  border-right: none;
  transition: width var(--rmb-sidebar-transition);
}

/* When the Liferay admin bar is visible, shift sidebar + top bar below it. */
body.has-control-menu rmb-sidebar-nav.rmb-global-sidebar {
  top: var(--rmb-cadmin-height, 56px);
  height: calc(100vh - var(--rmb-cadmin-height, 56px));
}
body.has-control-menu #banner {
  top: var(--rmb-cadmin-height, 56px) !important;
}
body.rmb-password-update:not(:has(#ControlMenu, .control-menu)) {
  --rmb-cadmin-height: 0px;
}

/* Hide portlet-placed sidebar instances (replaced by the global one) */
rmb-sidebar-nav:not(.rmb-global-sidebar) {
  display: none !important;
}

@media (max-width: 1180px) and (min-width: 768px) {
  #banner {
    min-height: var(--rmb-header-height) !important;
    padding: 0 18px !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  #banner .rmb-topbar-left { flex: 0 1 190px; }
  #banner .rmb-topbar-left .rmb-page-title,
  #banner .rmb-crumb { overflow: hidden; text-overflow: ellipsis; }
  #banner rmb-portfolio-selector { flex: 1 1 220px; max-width: none; }
  #banner .rmb-topbar-right { margin-left: auto; }
  #banner .rmb-topbar-right .rmb-asat { display: none; }
}

/* ── Mobile (≤767px): off-canvas drawer + black app bar (design.md §3.4) ── */
@media (max-width: 767px) {
  rmb-sidebar-nav.rmb-global-sidebar {
    top: 0 !important;
    height: 100vh !important;
    width: min(320px, 86vw) !important;
    z-index: var(--rmb-z-drawer) !important;
    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.22,1,.36,1);
  }

  rmb-sidebar-nav.rmb-global-sidebar.rmb-sidebar-open {
    pointer-events: auto;
    transform: translateX(0);
  }

  #content,
  .portlet-layout > #content {
    margin-left: 0 !important;
    padding: var(--rmb-content-padding-sm) !important;
  }

  #footer {
    margin-left: 0 !important;
  }

  /* Top bar → black mobile app bar. Row 1: [burger] · [RMB logo] · [bell].
     Row 2 (community pages only): full-width portfolio selector. */
  #banner {
    margin-left: 0 !important;
    top: 0 !important;
    min-height: 56px !important;
    background-color: var(--rmb-black) !important;
    border-bottom: none !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: center !important;
    row-gap: 8px !important;
  }
  body.has-control-menu #banner {
    top: 0 !important;
  }
  /* Page title ("Dashboard" / community name) is replaced by the centered
     logo on mobile — hide it so the bar reads burger · logo · bell. */
  #banner .rmb-topbar-left { display: none !important; }
  /* Centered RMB logo (injected by rmb-portal-config.js, hidden ≥768px). */
  #banner .rmb-mobile-logo {
    display: flex !important;
    order: 1;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 40px;
  }
  #banner .rmb-mobile-logo img {
    height: 24px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }
  #banner .rmb-topbar-right { order: 2; margin-left: 0; flex: 0 0 auto; }
  #banner .rmb-topbar-right .rmb-asat { display: none !important; }
  #banner .rmb-bell { color: #fff; }
  #banner .rmb-bell:hover { background: rgba(255,255,255,0.1); }
  #banner rmb-portfolio-selector {
    display: flex !important;
    order: 4;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    color: var(--rmb-text-primary);
  }
  #banner rmb-portfolio-selector .rmb-ps-label,
  #banner rmb-portfolio-selector .rmb-ps-community,
  #banner rmb-portfolio-selector .rmb-ps-status {
    color: rgba(255,255,255,0.72) !important;
  }
  #banner rmb-portfolio-selector .rmb-ps-code {
    color: #ffffff !important;
  }
  #banner rmb-portfolio-selector .rmb-ps-trigger {
    border-color: rgba(255,255,255,0.38) !important;
    color: #ffffff !important;
  }
  #banner rmb-portfolio-selector .rmb-ps-trigger:hover {
    background: rgba(255,255,255,0.10) !important;
  }

  .rmb-mobile-burger {
    display: flex !important;
    order: -1;
    flex-shrink: 0;
    color: #fff;
    border-color: rgba(255,255,255,0.25);
  }
}

/* Desktop/tablet: hide mobile-only app-bar chrome */
@media (min-width: 768px) {
  .rmb-mobile-burger,
  #banner .rmb-mobile-logo {
    display: none !important;
  }
}

/* Resize handle - injected by rmb-portal-config.js */
#rmb-sidebar-resize-handle {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: calc(var(--rmb-z-sidebar) + 10);
  background: transparent;
  transition: background 150ms ease;
}

#rmb-sidebar-resize-handle:hover,
#rmb-sidebar-resize-handle.dragging {
  background: rgba(255, 156, 28, 0.5);
}

body.has-control-menu #rmb-sidebar-resize-handle {
  top: var(--rmb-cadmin-height, 56px);
}

/* Content area - offset right to clear the fixed sidebar.
 * Uses margin-left (rather than padding-left) so widgets inside #content
 * are never inadvertently clipped.
 *
 * Applied universally: home page, community pages (/web/*), group pages (/group/*)
 * and any other signed-in page. The !important ensures Liferay's classic theme
 * overrides do not win. */
#content,
.portlet-layout > #content {
  flex: 1;
  min-width: 0;
  max-width: none !important;
  margin-left: var(--rmb-sidebar-width) !important;
  padding: var(--rmb-content-padding) !important;
  background-color: var(--rmb-grey-light);
  transition: margin-left var(--rmb-sidebar-transition);
}

body.signed-in .container-fluid-max-xl,
body.signed-in #main-content,
body.signed-in .layout-content {
  max-width: none !important;
}

/* Ensure the sidebar host is always block-displayed and not hidden by
 * community-page themes or layout portlets. */
rmb-sidebar-nav.rmb-global-sidebar {
  display: block !important;
  visibility: visible !important;
}

/* ── 7. Development cache-control ──────────────────────────────────────────
 * Liferay aggressively caches static assets in the browser.
 * In development, force a hard reload via:
 *   Chrome → Three dots → More tools → Developer tools → Application tab
 *   → Storage → Clear site data  (or Ctrl+Shift+Delete → Cached images)
 * Alternatively: open DevTools → Network tab → tick "Disable cache" and reload.
 * This CSS file is re-served from Liferay's OSGi servlet every time the
 * CX bundle restarts, but browser HTTP cache may serve a stale copy.
 * The Liferay `?t=<timestamp>` query param on globalCSS URLs rotates on
 * each bundle restart, so a full cache clear + page reload is sufficient. */

/* ── 7. Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  #content {
    padding: var(--rmb-content-padding-sm);
  }
}

/* ── 7.b Hide failing widgets on the home page ───────────────────────────
 * The reporting / content-block widgets render their own shadow DOM, so
 * we cannot pierce in to hide just the error state. Instead we hide the
 * whole host element AND its portlet boundary wrapper on the home page.
 * :has() is supported by all modern browsers (Chrome 105+, FF 121+, Safari 15.4+).
 * Once configured, REMOVE the corresponding selectors from this block. */
body.signed-in rmb-content-block {
  display: none !important;
}

/* Also collapse the Liferay portlet boundary so ghost space disappears */
body.signed-in .portlet-boundary:has(rmb-content-block) {
  display: none !important;
}

/* ── Auto-mounted overview (rmb-portal-config.js §8) ──────────────────────
 * On the home/overview page the dashboard is injected as the first child of
 * #content; hide the default Liferay page body so only the overview shows. */
html.rmb-overview-home #content > .layout-content,
html.rmb-overview-home #content > #main-content {
  display: none !important;
}
rmb-dashboard.rmb-injected-overview {
  display: block;
  width: 100%;
}

/* ── 7.c Dashboard widget grid ────────────────────────────────────────────
 * Give each linkout widget portlet boundary a compact, full-width card style.
 * The custom element already renders a card; these rules control layout in
 * the Liferay portlet grid. */
.portlet-boundary:has(rmb-powerbi-linkout),
.portlet-boundary:has(rmb-research-linkout) {
  width: 100% !important;
}

rmb-powerbi-linkout,
rmb-research-linkout {
  display: block;
  width: 100%;
}

/* ── RMB mobile app-bar chrome (injected by rmb-portal-config.js) ────────── */
.rmb-mobile-logo {
  display: none; /* shown only at mobile breakpoint via media query above */
}
.rmb-mobile-burger {
  display: none; /* shown only at mobile breakpoint via media query above */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease, border-color 160ms ease;
  flex-shrink: 0;
}
.rmb-mobile-burger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--rmb-orange);
}
.rmb-mobile-burger:active {
  background: rgba(255, 156, 28, 0.18);
}
/*
 * shadcn dashboard convention: footer is a slim status bar that lives INSIDE
 * the content column - same background as the page, just a hairline separator.
 * It must clear the fixed sidebar (margin-left) and never extend full-width
 * beneath it (which makes it look disconnected).
 *
 * Height target: ~36px. One line of 11px text with 10px padding.
 */

#footer {
  /* Match content area background - footer is part of the dashboard, not a section */
  background-color: var(--rmb-grey-light);
  /* Clear the fixed sidebar */
  margin-left: var(--rmb-sidebar-width);
  transition: margin-left var(--rmb-sidebar-transition);
  /* Slim single-line height */
  padding: 10px 20px;
  /* Hairline separator only - no heavy visual weight */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  /* Typography */
  font-family: var(--rmb-font-family);
  font-size: 11px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  letter-spacing: 0.2px;
  /* Hidden - the prototype/design.md shell has no page footer */
  display: none !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Suppress the default "Powered by Liferay" link styling */
#footer a {
  color: rgba(0, 0, 0, 0.32);
  text-decoration: none;
  font-size: 11px;
  transition: color 120ms ease;
}

#footer a:hover {
  color: var(--rmb-orange);
  text-decoration: none;
}

/* Hide the default Liferay "Powered by" text - we add our own compact version */
#footer > *:not(.rmb-footer-inner) {
  display: none;
}

/* When no custom inner exists, fall back gracefully */
#footer:not(:has(.rmb-footer-inner)) {
  /* Show default content but constrain it */
  font-size: 11px;
  color: rgba(0, 0, 0, 0.38);
}

/* ── 9. Scrollbar Styling ─────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--rmb-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.40);
}

/* ── 10. Print ─────────────────────────────────────────────────────────────── */

@media print {
  #banner,
  #navigation,
  #footer,
  rmb-sidebar-nav {
    display: none !important;
  }

  #content {
    padding: 0 !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10pt;
  }

  .rmb-content-block img {
    max-width: 100% !important;
  }
}

/* ── 9. Login Page (signed-out) ────────────────────────────────────────────
 * Split layout:
 *   Left  (65%): RMB "THINK" photo panel, rounded on its inner (right) edge,
 *                floating a touch inside an all-white canvas.
 *   Right (35%): White panel - RMB branding + login form.
 *
 * Responsive:
 *   769–1024px  left panel 65% (unchanged, tag/title font scales down)
 *   ≤ 768px     single column; photo becomes a slim top banner
 * ──────────────────────────────────────────────────────────────────────── */

/* Applies only when the user is not authenticated */
body.signed-out {
  background: #fff;
  overflow: hidden;
}

/* Hide the admin control menu and footer on the login page */
body.signed-out #smtq_quickAccessNav,
body.signed-out #footer,
body.signed-out footer {
  display: none !important;
}

/* Override the default body background that shifts the layout */
body.signed-out #content {
  margin-left: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  flex: 1;
}

/* Wrapper becomes a full-viewport flex row on an all-white canvas. */
body.signed-out #wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  background: #fff;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* ── Left panel: real DOM element (injected by rmb-portal-config.js as
   .rmb-login-photo-panel, first child of #wrapper) carrying the photo
   background + dark overlay. Rounded on its inner edge (facing the white
   form panel) so it reads as a floating panel, per
   context-images/split-screen-example.png. Using a real element (not a
   ::before pseudo) means its border-radius/overflow:hidden reliably clips
   the tagline overlay living inside it - a `position:fixed` overlay cannot
   be clipped by an ancestor this way. ── */
body.signed-out .rmb-login-photo-panel {
  position: relative;
  flex: 0 1 65%;
  min-width: 320px;
  margin: 20px 0 20px 20px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,10,13,0.80), rgba(10,10,13,0.88)),
    url('/o/rmb-portal-widgets/rmb-theme/rmb-login-bg.jpg') center/cover no-repeat;
  background-color: #0A0A0D;
}

/* Placeholder with the panel's exact geometry until rmb-portal-config.js inserts the real
   panel, so a reload never paints the form full-width first and then shifts it right. */
body.signed-out #wrapper:not(:has(> .rmb-login-photo-panel))::before {
  content: '';
  flex: 0 1 65%;
  min-width: 320px;
  margin: 20px 0 20px 20px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(10,10,13,0.80), rgba(10,10,13,0.88)),
    url('/o/rmb-portal-widgets/rmb-theme/rmb-login-bg.jpg') center/cover no-repeat;
  background-color: #0A0A0D;
}

/* The form is re-labelled and re-wrapped by script, but it stays VISIBLE the
   whole time.
   It used to start at visibility:hidden and rely on rmb-portal-config.js adding
   .rmb-auth-ready to reveal it, with a 1.5s animation as the only safety net.
   That meant a blank login panel for 1.5s on every load, and a permanently
   blank one whenever the script did not run at all (client extension not
   deployed, a JS error earlier in the file, a CSP block) or whenever the reveal
   animation did not play, as in a headless renderer. Never gate content
   visibility on a script-applied class: a brief glimpse of Liferay's own form
   costs far less than a sign-in page that never appears.
   The ::before placeholder above already holds the panel geometry, so there is
   no layout jump. The fade below is enhancement only. */
@keyframes rmb-auth-fade { from { opacity: 0; } to { opacity: 1; } }
html.rmb-auth-ready body.signed-out #content {
  animation: rmb-auth-fade 160ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  html.rmb-auth-ready body.signed-out #content { animation: none; }
}

/* ── Right panel: plain white login area ── */
body.signed-out #content {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: safe center !important;
  padding: 48px clamp(20px, 4vw, 72px) !important;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  background: #fff !important;
  margin-left: 0 !important;
}

/* When Liferay renders login as a MAXIMIZED portlet (e.g. its default
 * /c/portal/login shown on the guest home, body.page-maximized) it keeps
 * #banner in the flex row and lets #content shrink - opening a white gap
 * between the dark brand rail and the login panel. Hide the banner and force
 * the login panel to fill its half so the split-screen looks identical to the
 * normal (/sign-in page) render. */
body.signed-out #banner {
  display: none !important;
}
body.signed-out #wrapper {
  justify-content: flex-start !important;
}
body.signed-out #content {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Strip all default container width constraints inside the right panel */
body.signed-out .portlet-layout,
body.signed-out .lfr-layout-structure-item-container,
body.signed-out .container-fluid,
body.signed-out .container-fluid-max-xl {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Keep the login card itself constrained to a readable width and left-align it.
   `.rmb-auth-panel` is added by rmb-portal-config.js to whichever container the
   current pre-auth screen uses, so 2FA / OTP and password-reset screens get the
   identical column width as sign-in. */
body.signed-out .login-container,
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel {
  width: 100%;
  max-width: 440px;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

body.signed-out .rmb-mfa-panel {
  max-width: 420px;
}

body:is(.signed-out, .rmb-password-update) .rmb-auth-frame,
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel :is(.sheet, .card, .panel, .panel-body, .sheet-text) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel .sheet-header { margin-bottom: 16px !important; }
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel .sheet-title { display: none !important; }
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel .sheet-header:not(:has(button, a, select, input:not([type='hidden']))) { display: none !important; }
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel form { gap: 16px !important; }
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel form .form-group { margin-bottom: 16px !important; }
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel form .form-group:last-child { margin-bottom: 0 !important; }
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel form fieldset > legend {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel .button-holder {
  margin: 0 !important;
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap;
}
body:is(.signed-out, .rmb-password-update) .button-holder { gap: 12px !important; }
body:is(.signed-out, .rmb-password-update) .button-holder > :is(button, input, a).btn {
  flex: 1 1 120px;
  min-width: 0;
  width: auto !important;
}
body:is(.signed-out, .rmb-password-update) .rmb-auth-panel .button-holder a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #d9d5cd !important;
  height: 52px !important;
  padding: 0 16px !important;
  color: #2a2a2a !important;
}

body.rmb-password-update .rmb-auth-panel {
  max-width: 520px;
  margin: 16px auto !important;
}
body.rmb-password-update .rmb-login-branding-title {
  font-size: 24px;
  font-weight: 600;
}

body.signed-out .rmb-mfa-panel,
body.signed-out .rmb-mfa-panel * {
  font-family: var(--rmb-font-family) !important;
}

body.signed-out .rmb-mfa-panel :is(p, div, span, h1, h2, h3, h4, label, a, button) {
  letter-spacing: 0 !important;
}

body.signed-out .rmb-mfa-frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  min-height: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.signed-out .rmb-mfa-frame .sheet,
body.signed-out .rmb-mfa-frame .card,
body.signed-out .rmb-mfa-frame .panel,
body.signed-out .rmb-mfa-frame .panel-body,
body.signed-out .rmb-mfa-frame .portlet,
body.signed-out .rmb-mfa-frame .portlet-body,
body.signed-out .rmb-mfa-frame .portlet-content,
body.signed-out .rmb-mfa-frame .portlet-content-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the portlet title bar (redundant with injected heading) */
body.signed-out .portlet-titlebar,
body.signed-out .portlet-title-default,
body.signed-out section.portlet > h2,
body.signed-out section.portlet > header,
body.signed-out #portlet_com_liferay_login_web_portlet_LoginPortlet > header,
body.signed-out #portlet_com_liferay_login_web_portlet_LoginPortlet .portlet-header,
body.signed-out .portlet-boundary_com_liferay_login_web_portlet_LoginPortlet_ .portlet-header {
  display: none !important;
}

/* Hide "Create Account" - access is by invitation only.
 * Liferay renders this as the first <li> inside the login-container <menu>.
 * Also covers href-based patterns if Liferay version renders them differently. */
body.signed-out a[href*="create_account"],
body.signed-out a[href*="CreateAccount"],
body.signed-out .lfr-icon-item[href*="create_account"],
body.signed-out .login-container menu > li:first-of-type {
  display: none !important;
}

/* ── Form typography & spacing ──
 * Selectors are deliberately scoped to `body.signed-out form` (not just
 * `.sign-in-form`) so every pre-authentication screen Liferay renders inherits
 * the same styling: sign-in, forgot/reset password, and the 2FA / OTP
 * verification screens (email one-time-pin, Microsoft / Google authenticator).
 * ────────────────────────────────────────────────────────────────────────── */
body.signed-out .control-label,
body.signed-out label {
  color: #2a2a2a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
  padding-left: 2px !important;
}

/* Liferay's own portlet-header row (back arrow + title) doesn't center its
 * columns by default, and the label's margin-bottom (kept below) pushed the
 * text out of line with the arrow - center the row itself and let it own the
 * spacing before the "Verify it's you" heading instead of the label. */
body.signed-out .autofit-row.portlet-header {
  align-items: center !important;
  margin: 0 0 18px !important;
}

body.signed-out .rmb-mfa-step-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #63686d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

body.signed-out .rmb-mfa-panel .rmb-login-branding {
  margin-bottom: 20px !important;
}

body.signed-out .rmb-mfa-panel .rmb-login-branding-title {
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

body.signed-out .rmb-mfa-panel .rmb-login-branding-subtitle {
  color: #4a4f55 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
}

body.signed-out .rmb-mfa-native-prompt {
  color: #4a4f55 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 0 22px !important;
  text-transform: none !important;
}

body:is(.signed-out, .rmb-password-update) .form-group {
  margin-bottom: 18px !important;
}

body:is(.signed-out, .rmb-password-update) form {
  display: grid !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Every direct row inside the form (field group, button row, alerts) shares
   the exact same box-sized full width so inputs and the submit button
   always line up flush with each other. Covers sign-in AND any other
   pre-auth form Liferay renders (forgot/reset password, 2FA / OTP). */
body:is(.signed-out, .rmb-password-update) form .form-group,
body:is(.signed-out, .rmb-password-update) form .button-holder,
body:is(.signed-out, .rmb-password-update) form .form-group-item,
body:is(.signed-out, .rmb-password-update) form .rmb-field-holder,
body:is(.signed-out, .rmb-password-update) form > div,
body:is(.signed-out, .rmb-password-update) form > fieldset {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  float: none !important;
}

/* Liferay wraps the username/password fields in an accordion-style
   `fieldset > #Content.show > .panel-body` chain that the submit button
   (rendered directly under `.input-container`) never passes through. That
   panel adds its own horizontal padding (12px 20px by default), which made
   the fields render ~40px narrower than the button. Strip it so both
   share the exact same box. */
body:is(.signed-out, .rmb-password-update) form fieldset,
body:is(.signed-out, .rmb-password-update) form fieldset > div,
body:is(.signed-out, .rmb-password-update) form .panel-body {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ── Inputs ──
 * `height` + `box-sizing: border-box` + full width are declared identically to
 * the submit button below so the two always render as the exact same box. */
body:is(.signed-out, .rmb-password-update) form input.form-control:not([type='hidden']),
body:is(.signed-out, .rmb-password-update) form input[type='text']:not([type='hidden']),
body:is(.signed-out, .rmb-password-update) form input[type='email'],
body:is(.signed-out, .rmb-password-update) form input[type='tel'],
body:is(.signed-out, .rmb-password-update) form input[type='number'],
body:is(.signed-out, .rmb-password-update) form input[type='password'],
body:is(.signed-out, .rmb-password-update) form select.form-control {
  background: #f9f8f5 !important;
  border: 1px solid #d9d5cd !important;
  border-radius: 10px !important;
  color: #1a1a1a !important;
  height: 52px !important;
  min-height: 52px !important;
  font-size: 15px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  transition: border-color 200ms ease, background 200ms ease,
    box-shadow 200ms ease !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  font-family: var(--rmb-font-family) !important;
  box-shadow: none !important;
}

body:is(.signed-out, .rmb-password-update) form input.form-control:not([type='hidden']):focus,
body:is(.signed-out, .rmb-password-update) form input[type='password']:focus,
body:is(.signed-out, .rmb-password-update) form select.form-control:focus {
  border-color: var(--rmb-orange) !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 156, 28, 0.35) !important;
}

body:is(.signed-out, .rmb-password-update) form input.form-control::placeholder {
  color: #bbb !important;
}

/* Password fields render inside a Bootstrap `.input-group` with a
   show/hide-password addon button. Left unstyled, the addon column steals
   width from the `<input>` itself so the password field renders narrower
   than the plain text inputs and the submit button above/below it. Force
   the whole group to the same 100%/border-box box, let the input flex to
   fill it, and style the addon to match the field instead of default
   Bootstrap white/grey. */
body:is(.signed-out, .rmb-password-update) form .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

body:is(.signed-out, .rmb-password-update) form .input-group input.form-control {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}

body:is(.signed-out, .rmb-password-update) form .input-group-append,
body:is(.signed-out, .rmb-password-update) form .input-group-prepend {
  display: flex !important;
  flex-shrink: 0 !important;
}

body:is(.signed-out, .rmb-password-update) form .input-group-text,
body:is(.signed-out, .rmb-password-update) form .input-group-append .btn,
body:is(.signed-out, .rmb-password-update) form .input-group-prepend .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  background: #f9f8f5 !important;
  border: 1px solid #d9d5cd !important;
  border-left: 0 !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  color: #63686d !important;
  box-shadow: none !important;
}

/* Bootstrap validation-error state on inputs (e.g. "Screen Name" required) -
   keep it in the same rounded/bordered style, just swap to an error tint. */
body:is(.signed-out, .rmb-password-update) form .has-error input.form-control,
body:is(.signed-out, .rmb-password-update) form input.form-control.error {
  background: #fdf3f2 !important;
  border-color: #e0a8a3 !important;
}

/* ── Submit button ──
 * Dimensions mirror the input rule above exactly (52px / 100% / border-box)
 * so the button and the fields render as identically sized boxes. Broad
 * `body.signed-out form` scope covers 2FA / OTP and password-reset screens. */
body:is(.signed-out, .rmb-password-update) .button-holder {
  margin-top: 28px !important;
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
}

body.signed-out .rmb-mfa-panel .button-holder {
  margin-top: 0 !important;
}

body:is(.signed-out, .rmb-password-update) form .btn.btn-primary,
body:is(.signed-out, .rmb-password-update) form button[type='submit'],
body:is(.signed-out, .rmb-password-update) form input[type='submit'] {
  background: var(--rmb-orange) !important;
  border: 1px solid var(--rmb-orange) !important;
  color: #0A0A0D !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.6px !important;
  height: 52px !important;
  min-height: 52px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  transition: background 160ms ease, opacity 160ms ease !important;
  text-transform: uppercase !important;
  font-family: var(--rmb-font-family) !important;
  box-shadow: none !important;
}

body.signed-out .rmb-mfa-panel form .btn.btn-primary,
body.signed-out .rmb-mfa-panel form button[type='submit'],
body.signed-out .rmb-mfa-panel form input[type='submit'] {
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body:is(.signed-out, .rmb-password-update) form .btn.btn-primary:not(:disabled):hover,
body:is(.signed-out, .rmb-password-update) form button[type='submit']:not(:disabled):hover,
body:is(.signed-out, .rmb-password-update) form input[type='submit']:not(:disabled):hover {
  background: #e8880e !important;
  border-color: #e8880e !important;
  box-shadow: none !important;
}

body:is(.signed-out, .rmb-password-update) form .btn.btn-primary:disabled,
body:is(.signed-out, .rmb-password-update) form .btn.btn-primary.disabled,
body:is(.signed-out, .rmb-password-update) form button[type='submit']:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Secondary/cancel buttons on 2FA & reset screens sit under the primary CTA
   and match its box, just in a quiet outline treatment. Excludes the email-OTP
   "Send code" trigger (.rmb-mfa-resend-button), which is styled as a plain
   inline link below - a boxed button there just added a redundant 3rd
   bordered block on top of the instruction text and the input. */
body:is(.signed-out, .rmb-password-update) form .btn.btn-secondary,
body:is(.signed-out, .rmb-password-update) form .btn-outline-secondary,
body:is(.signed-out, .rmb-password-update) form .btn.btn-default {
  background: #fff !important;
  border: 1px solid #d9d5cd !important;
  color: #2a2a2a !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  height: 52px !important;
  min-height: 52px !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: var(--rmb-font-family) !important;
}

body:is(.signed-out, .rmb-password-update) form .btn.btn-secondary:hover,
body:is(.signed-out, .rmb-password-update) form .btn-outline-secondary:hover,
body:is(.signed-out, .rmb-password-update) form .btn.btn-default:hover {
  background: #f9f8f5 !important;
}

/* "Send code" - plain text-style action inline with the instruction copy,
   not its own bordered box (mirrors the quiet "Forgotten your password?"
   link treatment used elsewhere on these screens). */
body.signed-out form .rmb-mfa-resend-button {
  background: transparent !important;
  border: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  display: inline-block !important;
  color: var(--rmb-orange) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.signed-out form .rmb-mfa-resend-button:hover {
  color: #e8880e !important;
}

body.signed-out form .rmb-mfa-resend-button:disabled,
body.signed-out form .rmb-mfa-resend-button[aria-disabled='true'] {
  color: #9a9da2 !important;
  text-decoration: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Instruction / status copy above the field - plain text (like
   .rmb-mfa-native-prompt), not a bordered card, so this screen carries the
   same visual weight as the TOTP screen (which has no boxed instruction). */
body.signed-out .rmb-mfa-instruction,
body.signed-out .rmb-mfa-status {
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  font-family: var(--rmb-font-family) !important;
  text-transform: none !important;
}

body.signed-out .rmb-mfa-instruction {
  color: #4a4f55 !important;
}

body.signed-out .rmb-mfa-status {
  color: #157836 !important;
  font-weight: 600 !important;
}

/* ── Secondary links (Forgot Password / help) ── */
body.signed-out .sign-in-form a,
body.signed-out .sign-in-form .btn-link,
body.signed-out .login-container a,
body.signed-out .login-container .lfr-icon-item,
body.signed-out .login-container button.btn-link,
body.signed-out .rmb-auth-panel a,
body.signed-out .rmb-auth-panel .btn-link,
body.signed-out .rmb-mfa-method-switch {
  color: #c96e00 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 150ms ease, opacity 150ms ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.signed-out .sign-in-form a:hover,
body.signed-out .sign-in-form .btn-link:hover,
body.signed-out .login-container a:hover,
body.signed-out .login-container button.btn-link:hover,
body.signed-out .rmb-auth-panel a:hover,
body.signed-out .rmb-auth-panel .btn-link:hover,
body.signed-out .rmb-mfa-method-switch:hover {
  color: var(--rmb-orange) !important;
  text-decoration: underline !important;
  opacity: 0.95 !important;
}

body.signed-out .login-container .nav.navbar-nav {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

/* ── Alert / error banner ── */
body:is(.signed-out, .rmb-password-update) .alert.alert-danger {
  background: rgba(220, 53, 69, 0.08) !important;
  border: 1px solid rgba(220, 53, 69, 0.3) !important;
  color: #c0392b !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  font-size: 13px !important;
}

/* ── Sign-in security code (rmb-login-security module) ── */
body.signed-out .rmb-captcha { margin: 0 0 20px !important; }
body.signed-out .rmb-captcha-challenge { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
body.signed-out .rmb-captcha-image { display: block; width: 200px; height: 56px; border: 1px solid #E7E5E0; border-radius: 10px; background: #F5F4F2; }
body.signed-out .rmb-captcha .rmb-captcha-refresh { background: none !important; border: 0 !important; padding: 4px 0 !important; color: #c96e00 !important; font: 600 13px var(--rmb-font-family) !important; cursor: pointer; }
body.signed-out .rmb-captcha .rmb-captcha-refresh:hover { color: var(--rmb-orange) !important; text-decoration: underline; }
/* The code is uppercase, but caps plus wide tracking at the 15px shared input
   size reads far larger than the sibling fields. Keep the letterforms easy to
   tell apart without making the field shout. Specificity and element count are
   deliberately above the generic "form input[type='text']" rule above so the
   size here is the one that applies. */
body.signed-out .sign-in-form input.rmb-captcha-input[type="text"] {
  font-size: 15px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
body.signed-out .rmb-captcha-help { margin: 6px 0 0; font-size: 12px; color: #63686D; }
body.signed-out .rmb-captcha-error { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #c0392b; }

/* ── Login field icons + password toggle (design.md §4/§7) ── */
.rmb-field-holder {
  position: relative;
  display: block;
  /* Bulletproof width matching: our JS wraps the input in this holder
     AFTER Liferay renders the form, so it can end up nested one level
     deeper than the .form-group/.button-holder rows above it (and, for the
     password field, as a flex child of a Bootstrap .input-group). Force it
     to always fill 100% of its row with border-box sizing so the input
     never renders narrower than the submit button below it. */
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.rmb-field-holder .rmb-field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #63686D; display: flex; pointer-events: none; z-index: 1;
}
/* If Liferay's own markup nests the holder inside a flex .input-group
   (password field), make it the one flex item that grows to fill the row
   instead of shrinking to its content's intrinsic width. */
body:is(.signed-out, .rmb-password-update) form .input-group > .rmb-field-holder {
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
}
body.signed-out .sign-in-form .rmb-field-holder input.field.form-control { padding-left: 42px !important; }
body.signed-out form .rmb-field-holder:has(.rmb-field-icon) input.form-control { padding-left: 42px !important; }
body.signed-out .sign-in-form .rmb-field-holder.has-toggle input.field.form-control { padding-right: 46px !important; }
.rmb-pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: none; cursor: pointer; color: #63686D;
  border-radius: 6px; padding: 0; z-index: 2;
}
.rmb-pw-toggle:hover { color: #0A0A0D; background: #FAF9F7; }
body:is(.signed-out, .rmb-password-update) .rmb-field-holder :is(.rmb-field-icon, .rmb-pw-toggle) { top: 26px; }

/* New-password screens (emailed reset link / forced change) */
body:is(.signed-out, .rmb-password-update) form .rmb-field-holder input.field.form-control[name$="password1"],
body:is(.signed-out, .rmb-password-update) form .rmb-field-holder input.field.form-control[name$="password2"] { padding-left: 14px !important; padding-right: 46px !important; }
.rmb-pw-strength {
  margin: 4px 0 12px;
  font-family: var(--rmb-font-family); font-size: 12px; color: #63686D;
}
.rmb-pw-strength p { margin: 0 0 6px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.rmb-pw-strength-track { height: 6px; background: #E5E7E9; border-radius: 3px; overflow: hidden; }
.rmb-pw-strength-track span { display: block; height: 100%; width: 0; background: currentColor; }
.rmb-pw-strength[data-strength="weak"] { color: #B42318; }
.rmb-pw-strength[data-strength="medium"] { color: #8B5A00; }
.rmb-pw-strength[data-strength="strong"] { color: #157836; }
.rmb-pw-strength[data-strength="weak"] .rmb-pw-strength-track span { width: 33.333%; }
.rmb-pw-strength[data-strength="medium"] .rmb-pw-strength-track span { width: 66.667%; }
.rmb-pw-strength[data-strength="strong"] .rmb-pw-strength-track span { width: 100%; }
.rmb-pw-rules {
  list-style: none; margin: 4px 0 16px; padding: 0;
  display: grid; gap: 4px;
  font-family: var(--rmb-font-family); font-size: 12px; font-weight: 600; color: #63686D;
}
.rmb-pw-rules li { display: flex; align-items: center; gap: 8px; }
.rmb-pw-rules li::before {
  content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid #CFCCC6;
}
.rmb-pw-rules li.is-met { color: #157836; }
.rmb-pw-rules li.is-met::before { background: #157836; border-color: #157836; }

/* ── Branding block injected by rmb-portal-config.js (right panel) ── */
.rmb-login-branding {
  margin-bottom: 14px;
  text-align: left;
}

/* Logo on the right panel is intentionally removed; logo lives on the left.
   Hide any orphaned img a previous build may have injected. */
.rmb-login-branding img.rmb-login-logo-img {
  display: none !important;
}

.rmb-login-branding-title {
  font-size: 28px;
  font-weight: 600;
  color: #0A0A0D;
  line-height: 1.15;
  margin: 0 0 4px;
  font-family: var(--rmb-font-family);
  letter-spacing: -0.01em;
}

.rmb-login-branding-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: #63686D;
  margin: 0;
  font-family: var(--rmb-font-family);
  letter-spacing: 0.1px;
  white-space: normal;
}

/* ── Left brand-panel content (injected by rmb-portal-config.js) - design.md §4.
   Absolutely positioned to fill its real parent, .rmb-login-photo-panel, so
   it is reliably clipped by that panel's own border-radius/overflow:hidden
   (see split-screen-example.png). ── */
.rmb-login-left-tag {
  position: absolute;
  inset: 0;
  padding: 48px;
  color: #F5F4F2;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.rmb-login-left-top { position: relative; z-index: 1; flex-shrink: 0; }

.rmb-login-left-logo {
  height: 96px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
  margin: 0;
}

.rmb-login-left-mid { position: relative; z-index: 1; display: grid; gap: 16px; min-height: 0; overflow-y: auto; }

.rmb-login-left-tag-quote {
  font-family: 'RMB Sans Display', var(--rmb-font-family);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}

.rmb-login-left-tag-quote em { font-style: normal; color: var(--rmb-orange); }

.rmb-login-left-tag-sub {
  font-size: 14px;
  font-weight: 400;
  color: #A2A4AA;
  max-width: 34ch;
  margin: 0;
  line-height: 1.5;
}

.rmb-login-left-foot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-size: 14px;
  color: #A2A4AA;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.rmb-login-left-foot a { color: #FFFFFF; text-decoration: none; font-weight: 600; }
.rmb-login-left-foot a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.rmb-login-left-foot a:focus-visible { outline: 2px solid var(--rmb-orange); outline-offset: 3px; border-radius: 2px; }

/* ── Responsive: tablet (721px – 1024px) ── */
@media (max-width: 1024px) and (min-width: 721px) {
  .rmb-login-left-tag-quote { font-size: 2rem; }
  .rmb-login-branding-title { font-size: 26px; }
}

/* ── Responsive: mobile (≤ 720px) - stacked compact black brand strip ── */
@media (max-width: 720px) {
  body.signed-out { overflow: auto; }
  body.signed-out #wrapper {
    flex-direction: column !important;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  body.signed-out .rmb-login-photo-panel,
  body.signed-out #wrapper:not(:has(> .rmb-login-photo-panel))::before {
    flex: 0 0 auto; min-width: 0; height: 168px;
    margin: 0; border-radius: 0;
  }
  body.signed-out #content { padding: 28px 20px !important; }
  body.signed-out .login-container { max-width: 100%; }
  .rmb-login-left-tag {
    padding: 20px 24px;
    gap: 10px;
    justify-content: center;
  }
  .rmb-login-left-top { display: none; }
  .rmb-login-left-tag-sub { display: none; }
  .rmb-login-left-foot { font-size: 11px; gap: 8px 12px; }
  .rmb-login-left-tag-quote { font-size: 1.5rem; max-width: none; }
}