/*
 * Theme Name:  SupplierHub Improved
 * Description: Custom dashboard theme for the Mooluck / SupplierHub platform.
 *              Modelled on the OpenMineral design system.
 * Version:     54
 * Author:      Mooluck
 *
 * ARCHITECTURE
 * ─────────────────────────────────────────────────────────────────────────────
 * This file is loaded as the WordPress theme stylesheet (style.css).
 * Actual theme CSS is enqueued from assets/css/theme.css. This file
 * contains only the required Theme Name header and the complete styles
 * (kept here for single-file convenience during development).
 *
 * CSS ORGANISATION
 * ─────────────────────────────────────────────────────────────────────────────
 * 1.  Design tokens  (CSS custom properties)
 * 2.  Reset / base
 * 3.  Layout shell  (.layout, .content, .sidebar)
 * 4.  Top bar
 * 5.  Sidebar — rail, toggle, brand
 * 6.  Sidebar — navigation menu (main items)
 * 7.  Sidebar — sub-menu (inline expanded)
 * 8.  Sidebar — collapsed mode + floating panel
 * 9.  Sidebar — bottom contact block
 * 10. Content area
 * 11. Right panel
 * 12. Footer
 * 13. Auth pages  (login, register, password recovery)
 * 14. Profile / account pages
 * 15. Insights page
 * 16. Session timeout overlay
 * 17. Language selector
 * 18. Utilities / helpers
 * ─────────────────────────────────────────────────────────────────────────────
 */

/*
Theme Name: FarmersOrigin Platform
Description: A custom WordPress theme that closely emulates the Open Mineral dashboard layout. It features a dark collapsible sidebar with icons and active highlights, responsive main/right columns, and optional submenus. Designed for SupplierHub.
Author: FarmersOrigin
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: supplierhub-theme-final
*/

/* Import the Inter font family to match the Open Mineral interface */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Root variables to make it easier to adjust colors globally */
:root {
  /* ════════════════════════════════════════════════════════════
   * OpenMineral Design Tokens — extracted from reference screenshots
   * ════════════════════════════════════════════════════════════ */

  /* ── Sidebar ─────────────────────────────────────────────── */
  --sidebar-bg:           #262f3d; /* rail background                                 */
  --sidebar-hover-bg:     #1d2530; /* hover                                           */
  --sidebar-active-bg:    #1d2530; /* active main menu tab                            */
  --sidebar-submenu-bg:   #222a37; /* default submenu item — non-active               */
  --sidebar-text:         #9FA8B5; /* default text & icon — muted gray                */
  --sidebar-icon:         #9FA8B5; /* icon matches text                               */
  --sidebar-active-text:  #ffffff; /* active/hovered text — white                     */
  --sidebar-highlight:    #f3cd96; /* unused — kept for reference                     */
  --toggle-bg:            #2b3750; /* collapse-button circle bg                       */
  --toggle-icon:          #9FA8B5; /* collapse-button arrow colour                    */
  --sidebar-accent:       #5B7CFA; /* unused — no accent lines                        */
  --sidebar-floating-bg:  rgba(43,53,69,0.97); /* floating panel — matches hover tone */

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:           16rem;
  --sidebar-collapsed-width: 72px;

  /* ── Brand / accent colour ──────────────────────────────── */
  /* OpenMineral uses a slightly brighter mid-blue across buttons,
     active tabs, links and checkbox fills */
  --om-blue:        #3d6ff0;  /* primary action / active state colour    */
  --om-blue-hover:  #2d5cd8;  /* darkened on hover                       */
  --om-blue-ring:   rgba(61, 111, 240, 0.18); /* focus ring             */

  /* ── Neutral palette ────────────────────────────────────── */
  --text-primary:   #1a202c;  /* headings, filled inputs                 */
  --text-secondary: #374151;  /* labels, body text                       */
  --text-muted:     #6b7280;  /* helper text, descriptions               */
  --text-placeholder: #9ca3af;

  --border-default: #d1d5db;  /* input/card borders                      */
  --border-light:   #e5e7eb;  /* dividers, table lines                   */
  --bg-subtle:      #f9fafb;  /* readonly input bg, hover tints          */

  /* ── Top bar ─────────────────────────────────────────────── */
  --topbar-border:  #e5e7eb;  /* hairline below top bar                  */

  /* ── Danger / red ───────────────────────────────────────── */
  --red:            #e53e3e;  /* destructive actions, Sign Out            */
  --red-hover-bg:   #fff5f5;

  /* ── Insights layout ────────────────────────────────────── */
  --insights-list-width: 360px;
}

html,
body {
  margin: 0;
  padding: 0;
  /* Prevent any horizontal scrolling */
  overflow-x: hidden;
  /* Use Inter for a modern, clean look similar to Open Mineral */
  font-family: "Inter", sans-serif;
  background: #ffffff;
  /* Reduce the base font size slightly so the entire interface scales down
       when viewed at 100% browser zoom.  This makes the overall UI feel
       less oversized without requiring users to manually zoom out. */
  /* font-size: 14px; */
}

/* Remove default WordPress max-widths and margins */
#page,
.site,
.wp-site-blocks,
main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Layout container wraps sidebar and content */
.layout {
  width: 100%;
  min-height: 100vh;
}

/* Fixed left sidebar */
/*
 * Sidebar container
 *
 * Use flex layout so that the navigation grows to fill available space and
 * the contact box sticks to the bottom of the sidebar. This ensures the
 * “Questions? Anytime!” section appears at the bottom rather than in the
 * middle of the menu list.
 */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;   /* prevents questions-box from escaping sidebar on any page */
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

/* Adjust for admin bar if present */
.admin-bar .sidebar {
  top: 32px;
}

/* Mobile menus css */

.top-bar .left-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mobile-menu-icon span.dashicons.dashicons-menu {
  font-size: 2.5rem;
  display: unset;
  line-height: unset;
}
.mobile-menu-icon button.icon-btn {
  background: none;
  border: none;
  line-height: unset;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: none;
  /* width: 3rem; */
  /* height: 2rem; */
}

/* Mobile menus css ends */

@media (max-width: 782px) {
  .admin-bar .sidebar {
    top: 46px;
  }
}

/* Toggle button at top of sidebar */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--toggle-bg);
  color: var(--toggle-icon);
  border: none;
  cursor: pointer;
  margin-bottom: 16px;
}
.sidebar-toggle .dashicons {
  font-size: 16px;
}
.sidebar-toggle:hover {
  background: #384663;
}

/* Logo text styling */
.sidebar .logo h2 {
  margin: 0;
  font-size: 1.8em;
  color: var(--sidebar-active-text);
}

/* Logo link — no decoration; inherits heading colour */
.sidebar .logo .logo-link,
.sidebar .logo-link {
  text-decoration: none;
  color: inherit;
  display: block;
}



/* .contact-box removed — use .sidebar-bottom instead */

/*
 * Bottom section — Questions widget + contact details
 *
 * Using flex-shrink: 0 ensures this block is never compressed by the
 * growing nav above it.  The margin-top: auto pushes it to the bottom
 * of the flex column (the sidebar).  padding-bottom gives breathing
 * room on all screen sizes.  We never let it exceed the viewport via
 * max-height and clip with overflow hidden so it cannot break out of
 * the sidebar on any page — this was the root cause of the layout bug
 * on non-homepage templates.
 */
.sidebar-bottom {
  margin-top: auto;
  flex-shrink: 0;           /* never compressed; always rendered at its natural height */
  overflow: hidden;         /* clips content — prevents breaking outside sidebar box   */
  width: 100%;
  box-sizing: border-box;
}

/* Dark pill — "Questions? Anytime!" */
.questions-box {
  cursor: pointer;
  margin: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  background-color: #1c2534;   /* slightly darker than sidebar for contrast pill      */
  border-radius: 8px;
  text-align: center;
}

.questions-box p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--sidebar-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Contact details styling */
.contact-details {
  padding: 0.5rem 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow: hidden;            /* belt-and-suspenders: contains long email addresses   */
}

.contact-details a {
  display: block;
  color: var(--sidebar-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-details a:hover {
  color: var(--sidebar-active-text);
}

/* Ensure nav expands to fill available space so contact box stays at bottom */
.sidebar .nav {
  /* Allow the navigation to expand and provide its own vertical scroll.  The
       footer remains pinned at the bottom of the sidebar because of the
       flexbox column layout on the parent.  Horizontal overflow is hidden. */
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/*
 * Sticky top bar for all pages
 *
 * Many templates render a `.top-bar` element that contains the page title
 * and user controls. To ensure this bar remains visible while scrolling
 * vertically, make it sticky at the top of the viewport. We set a high
 * z-index so it stays above the main content and give it a solid
 * background to avoid content peeking through.
 */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #ffffff;
}

/* Right-of-sidebar content wrapper */
.content {
  margin-left: var(--sidebar-width);
  padding: 24px;
  /* Add top padding slightly larger than the top bar height so there is
       comfortable breathing room between the header and the page
       content.  This offset prevents the first chart or heading from
       appearing jammed up against the fixed bar. */
  padding-top: 88px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  /* Smooth animation when sidebar collapses/expands */
  -webkit-transition: margin-left 0.4s ease-in-out, left 0.4s ease-in-out;
  -o-transition: margin-left 0.4s ease-in-out, left 0.4s ease-in-out;
  transition: margin-left 0.4s ease-in-out, left 0.4s ease-in-out;
}

/* On pages with a right-hand panel (.content), allow the top bar to span both
   columns. Otherwise the top bar would be constrained to the first column of
   the grid, which would misalign the action icons. */
/*
 * On pages where the `.top-bar` is rendered as a direct child of `.content` (such as the
 * front page/home template) we need to ensure it behaves like the fixed header found
 * elsewhere in the theme.  Using `position: fixed` here keeps the page title and user
 * controls anchored to the top of the viewport while the main column scrolls underneath.
 * We also shift it to the right by the width of the sidebar (260px) so it aligns with
 * the content area.  When the sidebar collapses to 72px a separate rule further below
 * overrides the left offset to keep everything aligned.  The increased padding
 * heightens the bar slightly per the user's request, and a subtle border defines
 * its separation from the content below.  Finally, we set the same high z‑index
 * used in the default header to ensure this bar stays above other elements.
 */
.content > .top-bar {
  grid-column: 1 / -1;
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  /* z-index: 1000; */
  z-index: 999;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
  margin: 0;
}

/* When there is no secondary column (no right panel), collapse to a single column */
.content.no-right {
  grid-template-columns: 1fr;
}

/* Main content area */
.main-content {
  min-width: 0;
}

/* Optional right sidebar (news/market terms) */
.sidebar-right {
  min-width: 0;
}
.sidebar-right h4 {
  margin: 0 0 8px;
  font-size: 1em;
}
.sidebar-right .box {
  background: #ffffff;
  border: 1px solid #e7ebf0;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Buttons used in various pages */
.btn-blue {
  background: #2f55d4;
  color: #ffffff;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.btn-grey {
  background: #eef2f7;
  color: #222222;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.btn-green {
  background: #16a34a;
  color: #ffffff;
  border: 0;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

/* Responsive: stack columns on small screens */
@media (max-width: 992px) {
  .content {
    grid-template-columns: 1fr;
  }
  .sidebar-right {
    order: 2;
  }
}

/* Collapsed sidebar styles — see full rules further below */

/* ================================================================
 * Sidebar modifications: full-width highlight and collapse controls
 *
 * The styles below override earlier definitions to ensure that
 * navigation rows span the entire sidebar width, with no inner
 * margins or rounded corners, and implement a round collapse
 * toggle button within a brand header. A collapsed state hides
 * labels and contact information, reducing the sidebar to an
 * icons-only rail.
 */

/* Override base sidebar background and padding */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  /* padding: 16px 0; */
}

/* Brand/header row with logo and collapse button */
.brand {
  /*
     * Centre the logo horizontally in the brand bar. Convert the brand
     * container to a relative positioned flex container with centered
     * content. The collapse button is positioned absolutely on the
     * right side so it does not affect the centering of the logo.
     */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.235rem 1.5rem;
}
.brand .logo {
  /* Center the logo horizontally within the brand bar. Use auto margins
       so it occupies available space and stays centred between the
       sidebar edge and the collapse button. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-left: auto;
  margin-right: auto;
}
.brand .logo h2 {
  margin: 0;
  /* Match the larger logo size defined for the sidebar for consistency */
  font-size: 1.8em;
  color: var(--sidebar-active-text);
}
/* .collapse-btn { */
/* Adjust the size and styling of the collapse button to mirror the Open Mineral
       design.  The button is a dark circular pill with a subtle border.  It is
       positioned so that half of it overlaps the sidebar and half sits in the
       content area.  The fixed positioning allows it to remain anchored
       relative to the viewport instead of within the sidebar’s header. */
/* width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--toggle-icon); */
/* Position the collapse toggle within the brand bar.  It sits on the
       right-hand side of the logo header and vertically centres itself
       using a translation.  Removing the fixed positioning allows
       JavaScript handlers to toggle the sidebar class correctly. */
/* position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
} */
.collapse-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: #424a59;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--toggle-icon);
  position: absolute;
  top: 35px;
  right: 16px;
  z-index: 999;
  transform: translateY(-50%);
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.collapse-btn .dashicons {
  /* Increase the icon size to better fit the larger collapse button */
  /* font-size: 20px; */
  /* line-height: 1; */
  font-size: 16px;
  line-height: unset;
  color: white;
}

/* Navigation container grows to fill space */
.nav {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Reset menu row styles: remove inner margins/rounded corners and ensure full width */
.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 1rem 1.5rem;
  text-decoration: none;
  font-size: 1rem;
  color: var(--sidebar-text);
  border-radius: 0;
  height: 3.5rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.sidebar-menu .dashicons {
  font-size: 22px;
  color: var(--sidebar-icon);
}
/* Arrow indicator for items with children */
.menu-item-has-children > a::after {
  content: "\f347";
  font-family: "dashicons";
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--sidebar-icon);
  font-size: 0.8rem;
}
.menu-item-has-children.current-menu-ancestor > a::after {
  transform: rotate(180deg);
  color: var(--sidebar-active-text);
}
/* Submenu item layout — defined in canonical block below */
/* Hover state — lighter than active */
.sidebar-menu a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}
.sidebar-menu a:hover .dashicons {
  color: var(--sidebar-active-text);
}
/* Active/ancestor state — slightly darker than hover */
.sidebar-menu li.current-menu-item > a,
.sidebar-menu li.current-menu-ancestor > a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}
.sidebar-menu li.current-menu-item > a .dashicons,
.sidebar-menu li.current-menu-ancestor > a .dashicons {
  color: var(--sidebar-active-text);
}
/* Submenu hover */
.sidebar-menu .sub-menu li a:hover {
  background: #1d2530;
  color: #ffffff;
  border: none;
}
/* Submenu active */
.sidebar-menu .sub-menu li.current-menu-item > a {
  background: #1d2530 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0;
  margin: 0;
  width: 100%;
}
/* Hide caret on submenu items */
.sidebar-menu .sub-menu li a::after {
  display: none;
}

/* Hide icons on submenu items to match Open Mineral design */
.sidebar-menu .sub-menu .dashicons {
  display: none;
}

/* Rotate caret for active parent items (current page or its ancestor) */
.menu-item-has-children.current-menu-item > a::after {
  transform: rotate(180deg);
  color: #ffffff;
}

/* Hide submenus by default. Display them when their parent is open or
   represents the current page/ancestor. */
.sidebar-menu .sub-menu {
  display: none;
  /* Remove default indent on nested lists so the highlight spans the full sidebar width */
  margin-left: 0;
  padding-left: 0;
}
.sidebar-menu li.open > .sub-menu,
.sidebar-menu li.current-menu-ancestor > .sub-menu,
.sidebar-menu li.current-menu-item > .sub-menu {
  display: block;
}

/* Rotate caret on open parents */
.menu-item-has-children.open > a::after {
  transform: rotate(180deg);
  color: #ffffff;
}

/* Reset the default sub-menu row appearance so child items do not have
   boxed backgrounds or rounded corners. Align the indentation and set
   the font size/weight similar to the Open Mineral design. */
.sidebar-menu .sub-menu li a {
  background: #222A37;
  color: var(--sidebar-text);
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 20px 16px 56px;
  transition: background 0.2s ease, color 0.2s ease;
}
/* border:none is set directly on each rule above — no utility override needed */

/* Support section — contact links colour */
.contact-details p {
  margin: 0 0 4px;
  color: var(--sidebar-text);
  font-size: 0.9em;
  line-height: 1.6;
}

/* Collapsed sidebar: icons-only */
body.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .content {
  margin-left: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .brand .logo h2,
body.sidebar-collapsed .sidebar-bottom,
body.sidebar-collapsed .sidebar-menu .menu-text,
body.sidebar-collapsed .menu-item-has-children > a::after {
  display: none;
}
body.sidebar-collapsed .nav {
  overflow: visible;
}

/* Adjust the top bar alignment when the sidebar is collapsed. In this
   state the sidebar width shrinks to 72px, so the fixed top bar
   should align flush with the content area by shifting its left
   offset accordingly. */
body.sidebar-collapsed .top-bar {
  left: var(--sidebar-collapsed-width);
}
body.sidebar-collapsed .sidebar-menu a {
  justify-content: center;
  padding: 16px 0;
}
body.sidebar-collapsed .sidebar-menu .dashicons {
  margin: 0;
}
body.sidebar-collapsed .collapse-btn .dashicons {
  transform: rotate(180deg);
}

/* When the sidebar is collapsed, shift the toggle button so that it
   remains centred relative to the narrow rail.  The calculation
   subtracts half of the button’s width from the collapsed sidebar
   width so that it overlaps the seam between the sidebar and content. */
/* body.sidebar-collapsed .collapse-btn { */
.collapse-btn.closed {
  /* When the sidebar is collapsed, reposition the toggle to the centre of the rail.
       The button becomes fixed relative to the viewport so it stays centred
       vertically within the collapsed bar.  The left offset uses the collapsed
       sidebar width minus half of the button's width so it overlaps the seam. */
  width: 24px;
  height: 24px;
  position: fixed;
  left: calc(var(--sidebar-collapsed-width) - 15px);
  right: auto;
  transform: translateY(-50%);
}
.collapse-btn.opened {
  position: fixed;
  right: auto;
  transform: translateY(-50%);
  left: 245px;
}

/* Sidebar animation */
.sidebar.animated,
.sidebar.animated .sidebar-content {
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

/* Content smooth animation — merged into main .content rule above */

/*
 * ====================================================================
 * Fly‑out submenus for the collapsed sidebar
 *
 * When the sidebar is collapsed down to a narrow rail of icons, the
 * Open Mineral UI displays child menu items as a pop‑out panel to
 * the right of the rail rather than inline under the icons. The
 * following rules replicate that behaviour: each parent item with
 * children becomes the anchor for an absolutely positioned panel
 * containing its submenu items. The panel appears on hover or when
 * the menu is opened via a click (by toggling the `.open` class).
 */

/* Position the submenu container relative to its parent in collapsed mode */
body.sidebar-collapsed .sidebar-menu .menu-item-has-children {
  position: relative;
}

/* Base styles for the fly‑out panel: hidden by default */
body.sidebar-collapsed .sidebar-menu .menu-item-has-children > .sub-menu {
  display: none;
  position: absolute;
  left: 72px;
  top: 0;
  z-index: 999;
  background: var(--sidebar-floating-bg);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  padding: 4px 0;
  min-width: 220px;
}

/* Arrow on collapsed .sub-menu removed — panel is detached to body via JS; only .sh-floating-submenu::before applies */

/* Show the fly‑out ONLY when .open is set by JS click — no hover */
body.sidebar-collapsed .sidebar-menu .menu-item-has-children.open > .sub-menu {
  display: block;
}

/* Styles for items inside the fly‑out panel */
body.sidebar-collapsed .sidebar-menu .menu-item-has-children > .sub-menu li a {
  display: block;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--sidebar-text);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, color 0.2s ease;
}
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  li:last-child
  > a {
  border-bottom: none;
}
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  li
  a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  li.current-menu-item
  > a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}

/* Hide icons and arrows inside the fly‑out to mimic the reference */
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  .dashicons,
body.sidebar-collapsed
  .sidebar-menu
  .menu-item-has-children
  > .sub-menu
  li
  a::after {
  display: none;
}

/* Collapsed: parent icon hover */
body.sidebar-collapsed .sidebar-menu a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}
body.sidebar-collapsed .sidebar-menu a:hover .dashicons {
  color: var(--sidebar-active-text);
}
/* Collapsed: active/ancestor parent icon */
body.sidebar-collapsed .sidebar-menu li.current-menu-item > a,
body.sidebar-collapsed .sidebar-menu li.current-menu-ancestor > a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}
body.sidebar-collapsed .sidebar-menu li.current-menu-item > a .dashicons,
body.sidebar-collapsed .sidebar-menu li.current-menu-ancestor > a .dashicons {
  color: var(--sidebar-active-text);
}

/* ── Floating submenu panel (collapsed sidebar only) ──────────────────
 * When the sidebar is collapsed, JS detaches the <ul.sub-menu> from
 * inside .sidebar (which has overflow:hidden) and appends it to <body>.
 * JS adds .sh-floating-submenu and sets position:fixed + top/left.
 * These rules style the detached panel.
 * ──────────────────────────────────────────────────────────────────── */
.sh-floating-submenu {
  /* position:fixed and top/left are set by JS */
  width: 220px;
  background: var(--sidebar-floating-bg);
  border-radius: 10px;
  overflow: hidden;      /* clips item backgrounds to rounded corners */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  padding: 0;
  list-style: none;
  margin: 0;
  z-index: 9999;
}

/* Arrow pointer — single border-triangle.
 * Sidebar icon row height: 3.5rem = 56px. Icon centre = 28px from row top.
 * JS sets panel top = rect.top of the <li>, so arrow top offset = 28px - 7px
 * (half arrow height) = 21px → centres the arrow tip on the icon midpoint. */
.sh-floating-submenu::before {
  content: "";
  position: absolute;
  left: -14px;            /* full arrow width to the left of panel edge */
  top: 21px;              /* vertically centred on 56px icon row: 28 - 7 = 21 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 7px 0;
  border-color: transparent rgba(43,53,69,0.97) transparent transparent;
}

/* Item links inside floating panel */
.sh-floating-submenu li a {
  display: block;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 400;
  color: var(--sidebar-text);
  text-decoration: none;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease, color 0.2s ease;
  margin: 0;              /* no offsets that could escape container */
  position: static;       /* no absolute positioning */
}
.sh-floating-submenu li:last-child a {
  border-bottom: none;
}
.sh-floating-submenu li a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}
.sh-floating-submenu li.current-menu-item a {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  margin: 0;              /* stay inside container */
  position: static;
}
/* Hide icons and arrows inside floating panel — text-only like reference */
.sh-floating-submenu .dashicons,
.sh-floating-submenu li a::after {
  display: none !important;
}

/*---------------------------------------------------------------------
 * Footer styles
 *
 * The site footer appears below the main content on every page. It contains
 * a simple copyright notice and is designed to be unobtrusive while still
 * readable. The text is centred and uses a small font size to avoid
 * distracting from the main content. A subtle top border helps separate
 * the footer from the rest of the page.
 */
.site-footer {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-top: 1px solid #e2e2e2;
  color: #606a78;
  font-size: 0.8rem;
  line-height: 1.4;
  /* Align the footer content to the left to mimic the Open Mineral layout */
  text-align: left;
  /* Offset the footer by the width of the fixed sidebar so it aligns with the main content */
  margin-left: var(--sidebar-width);
  padding: 16px 24px;
  margin-top: 4px;
}

.site-footer a {
  /* Use a blue hue similar to the Open Mineral links for legal pages */
  color: #386ed5;
  text-decoration: underline;
}

/* Ensure the legal links in the footer have a small gap above them */
.site-footer .legal-links {
  margin-top: 4px;
}

/*
 * Sidebar scrolling behaviour
 *
 * Allow the entire sidebar (including the logo, navigation and support
 * sections) to scroll as one unit when its contents exceed the viewport
 * height.  This prevents the logo and bottom contact details from being
 * pinned separately and ensures they move together with the rest of the
 * menu.  The horizontal overflow is hidden to avoid unwanted side scrolling.
 */
/* Restore the sidebar to a flex container so that the navigation can grow
   and the footer stays at the bottom.  Horizontal overflow remains hidden. */
.sidebar {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* When the sidebar is collapsed, reduce the offset on the footer accordingly */
body.sidebar-collapsed .site-footer {
  margin-left: var(--sidebar-collapsed-width);
}

/*---------------------------------------------------------------------
 * Legal notice styles
 *
 * Styles for the legal notice section that appears on the front page. This
 * block is kept compact with a smaller font size and muted colour. The
 * margins are adjusted to reduce space above the copyright, emulating
 * the Open Mineral layout. Paragraphs inside reset their bottom margin to
 * maintain consistent spacing.
 */
.legal-notice {
  font-size: 0.8rem;
  color: #606a78;
  margin-top: 8px;
  margin-bottom: 0;
}

.legal-notice p {
  margin-top: 0;
  margin-bottom: 4px;
}

/* Remove default margins on headings inside the top bar */
.top-bar h1 {
  margin: 0;
  font-size: 1.375rem;         /* OM: ~22px page title                    */
  font-weight: 700;            /* OM: bold, not semibold                  */
  color: var(--text-primary);
}

/*
 * Customise scrollbars
 *
 * Reduce the thickness of scrollbars and remove rounded corners from
 * both the track and thumb for a sleeker look.  These rules apply
 * to WebKit browsers (Chrome, Safari) which support the
 * ::-webkit-scrollbar pseudo-elements.  Other browsers will fall
 * back to their default scrollbars.
 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 0;
}
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0;
}

/*
 * Top bar actions and profile menu
 *
 * The top bar includes notification and language icons along with a
 * profile dropdown for account-related links. These styles provide
 * spacing, alignment and interactivity consistent with the Open Mineral
 * dashboard interface. The dropdown opens on click and closes when
 * clicking outside via accompanying JavaScript (see toggle.js).
 */
/*
 * Top bar container styling
 *
 * Combine sticky positioning with a flex layout so that the page title
 * and user controls remain visible at the top of the viewport while
 * scrolling. The position: sticky declaration ensures the bar sticks
 * when the user scrolls past it. A high z-index keeps it above
 * page content. Absolute positioning of the actions is handled via
 * .top-actions to align icons on the far right.
 */
.top-bar {
  /* Fix the top bar to the top of the viewport so it doesn’t scroll
       away when scrolling down the page. The left offset matches the
       sidebar’s width so that the bar aligns flush with the content
       area.  A high z-index ensures it remains above page content. */
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  z-index: 999;
  background: #ffffff;
  display: flex;
  align-items: center;
  /* Increase vertical padding to match the taller header used on the home page.
       This ensures a consistent height across all pages. */
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
  margin: 0;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Position the actions in the absolute top-right corner of the header */
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: #606a78;
}
.icon-btn .dashicons {
  font-size: 20px;
}
/* ── Profile dropdown ── Pixel-matched to OpenMineral reference ─────────────
 *
 * Trigger button
 * • Dark blue-grey background (#3d4a5c) — matches sidebar header tone
 * • White person icon + username + small caret, all white, 14px semi-bold
 * • Tight 6px radius (not fully pill-shaped)
 *
 * Dropdown panel
 * • Pure white, borderless (hairline #f0f0f0 fallback), generous soft shadow
 * • 8px radius, 4px gap below trigger, right-aligned
 * • Top/bottom inner padding 8px; row padding 10px 16px
 *
 * Items
 * • Group 1 (Account/Security/Notifications): icon 16px, #6b7280 grey
 * • Group 2 (Help/Platform tour): NO icon — text only, left-padded to align
 * • Sign Out: NO icon — red text only
 * • Label: var(--text-primary) near-black, 14px, normal weight (400)
 * • 10px gap between icon and label
 * • No dividers within a group
 * • Groups separated by a 1px var(--border-light) rule with 4px v-margin
 * • Hover: var(--bg-subtle) very light tint
 *
 * Sign Out
 * • var(--red) text, hover: var(--red-hover-bg)
 * ────────────────────────────────────────────────────────────────────────── */

.profile-dropdown {
  position: relative;
}

/* ── Trigger button ─────────────────────────────────────────────────────── */
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #3d4a5c;
  color: #ffffff;
  border: none;
  cursor: pointer;
  padding: 6px 10px 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.profile-trigger:hover,
.profile-dropdown.open .profile-trigger {
  background: #2f3a4a;
}

/* Person icon — same size as text line, flush left */
.profile-trigger .dashicons-admin-users {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
  margin-right: 0;
  flex-shrink: 0;
}

/* Caret — smaller than person icon, sits right of username */
.profile-trigger .dashicons-arrow-down {
  font-size: 12px;
  width: 12px;
  height: 12px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
  transition: transform 0.2s ease;
}
.profile-dropdown.open .profile-trigger .dashicons-arrow-down {
  transform: rotate(180deg);
}

/* ── Dropdown panel ─────────────────────────────────────────────────────── */
.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #ffffff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 190px;
  display: none;
  z-index: 1200;
}
.profile-dropdown.open .profile-menu {
  display: block;
}

/* ── List items — no per-row dividers ───────────────────────────────────── */
.profile-menu li {
  margin: 0;
  border-bottom: none;
}
.profile-menu li:last-child {
  border-bottom: none;
}

/* ── Menu separator between groups ──────────────────────────────────────── */
.profile-menu .menu-sep {
  height: 1px;
  background: #e5e7eb; /* OM: lighter separator */
  margin: 8px 0;       /* OM: more spacing */
  pointer-events: none;
}

/* ── Item links ─────────────────────────────────────────────────────────── */
.profile-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.profile-menu li a:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* ── Item icons (group 1 only: Account / Security / Notifications) ──────── */
.profile-menu li a .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
  flex-shrink: 0;
  color: #9ca3af; /* OM: lighter grey, not #6b7280 */
}

/* ── Items without icons — Help / Platform tour / Sign Out ──────────────────
 * These links have no .dashicons span. We offset left padding to align
 * their text with the labels in the icon-ed rows above (16px icon + 10px gap
 * + 16px base = 42px total left padding).
 * Using an explicit .no-icon class for full browser compatibility.          */
.profile-menu li a.no-icon {
  padding-left: 42px;
}

/* ── Sign Out — red text, light-red hover ────────────────────────────────── */
.profile-menu li a.sign-out {
  color: var(--red);
}
.profile-menu li a.sign-out:hover {
  background: var(--red-hover-bg);
  color: var(--red);
}

/* === Insights page specific styles === */
/* Scope these rules by the .insights-content container to avoid interfering with other pages. */
.insights-content .insights-layout {
  display: flex;
  /* Allow columns to stretch and scroll independently */
  flex: 1;
  min-height: 0;
}
.insights-content .insights-list {
  /*
     * Left column containing the list of insights.
     *
     * We explicitly set a height relative to the viewport so that this column
     * can scroll independently from the article.  Without a fixed height the
     * browser will treat the entire page as one scroll container and the
     * list will move in tandem with the article.  The 160px offset roughly
     * accounts for the fixed top bar and padding; adjust this value if the
     * header height changes.  A light background similar to the Open Mineral
     * interface is applied and the border delineates the separation between
     * the list and article.
     */
  width: var(--insights-list-width);
  background: #f5f7fa;
  border-right: 1px solid #e5e7eb;
  /*
     * Pin the list to the viewport below the top bar and let it scroll
     * independently of the article.  The sticky positioning keeps the
     * list anchored under the 88px top padding defined on .content.  The
     * height calculation fills the remaining viewport height so the list
     * extends down to the page footer.  Overflow on the Y axis allows
     * users to scroll through all posts without moving the article.
     */
  /*
     * Instead of relying on sticky positioning—which can be fragile inside nested flex
     * layouts—use a fixed position to pin the insights list under the top bar. The
     * left offset accounts for the sidebar width (260px) and the content padding
     * (24px) so the list aligns perfectly with the content area.  Top is set to
     * the same padding-top used on .content (88px) so the list begins just below
     * the page header.  Height fills the remainder of the viewport so the list
     * extends all the way to the page footer.  Users can scroll within this
     * column independently of the article on the right.
     */
  position: fixed;
  /* left: calc(var(--sidebar-width) + 24px); */
  /* Position the list so that it starts just below the page title.  The
       additional 32px offset (88+32) approximates the height of the
       heading bar itself, aligning the first list item with the bottom
       edge of the “Latest industry insights” title. */
  /* Align the top of the list with the page heading.  A 112px offset
       approximates the combined height of the top bar and the title row. */
  top: 64px;
  /* Stretch the list down to the bottom of the viewport so it fills
       the entire page.  With the top bar height accounted for in the
       padding-top override below, no additional bottom offset is needed. */
  height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.insights-content .insights-list-item {
  /* Each individual row in the list.  We use a white background and a subtle
       border to mimic Open Mineral’s card‑like entries.  Padding and font
       sizes are adjusted for better legibility. */
  display: block;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  text-decoration: none;
  color: #111827;
  background: #ffffff;
}
/* On hover, lightly darken to indicate interactivity */
.insights-content .insights-list-item:hover {
  /* Lightly darken the item when hovered */
  background: #f5f7fa;
}
/* Active/selected post in the list */
.insights-content .insights-list-item.active {
  /* Highlight the selected post with a white background and a left accent bar */
  background: #ffffff;
  box-shadow: inset 4px 0 0 0 #0a66c2;
}
.insights-content .insights-list-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #111827;
}
.insights-content .insights-list-excerpt {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 4px;
}
.insights-content .insights-list-date {
  font-size: 0.75rem;
  color: #9ca3af;
}
.insights-content .insights-detail {
  flex: 1;
  position: relative;
  /* Let the article scroll with the main page instead of within its own container */
  overflow-y: visible;
  padding: 24px 64px 40px 40px;
  background: #ffffff;
  /* Offset the article to the right by the width of the pinned insights list plus
       the default content padding (24px).  This prevents the article from
       overlapping the fixed list. */
  margin-left: calc(var(--insights-list-width) + 24px);
  /* allow the element to shrink when contained in a flex parent so scrolling
       works correctly */
  min-height: 0;
}
.insights-content .insight-share-rail {
  position: absolute;
  left: 0;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.insights-content .insight-share-rail .share-linkedin,
.insights-content .insight-share-rail .share-email {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}
.insights-content .insight-share-rail .share-linkedin {
  background: #0a66c2;
}
.insights-content .insight-share-rail .share-email {
  background: #6b7280;
}
.insights-content .insight-article {
  max-width: 760px;
  /* Provide a modest margin between the article and the list without reserving space for a side rail */
  margin-left: 24px;
}
.insights-content .insight-article-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #111827;
}
.insights-content .insight-article-date {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 16px;
}
.insights-content .insight-article-content p {
  margin-bottom: 1.2em;
  line-height: 1.6;
  font-size: 0.9rem;
  color: #374151;
}
/* Make lists and tables inside content adopt consistent styling */
.insights-content .insight-article-content ul,
.insights-content .insight-article-content ol {
  margin-bottom: 1.2em;
  padding-left: 1.2em;
}

/* Share block appears below the article content similar to Open Mineral. */
.insights-content .insight-share-block {
  margin-top: 32px;
  width: 56px;
  padding: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.insights-content .insight-share-block .share-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
}
.insights-content .insight-share-block a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: #ffffff;
  text-decoration: none;
}
.insights-content .insight-share-block a.linkedin {
  background: #0a66c2;
}
.insights-content .insight-share-block a.email {
  background: #6b7280;
}

/* Additional footer within the insights page detail column */
.insights-content .insights-copyright {
  margin-top: 32px;
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
}
.insights-content .insights-copyright .legal-links {
  margin-top: 4px;
}
.insights-content .insights-copyright a {
  color: #2f55d4;
  text-decoration: none;
}
.insights-content .insights-copyright a:hover {
  text-decoration: underline;
}
.insights-content .insights-copyright .sep {
  margin: 0 6px;
  color: #6b7280;
}

/* Adjust the top padding specifically on the insights page so the list aligns
   directly below the heading.  The default padding-top on .content is 88px;
   we reduce it to 64px here to remove the excess space. */
.insights-content {
  padding-top: 64px;
}

/* On the insights page the main content height should be automatic so that the
   article uses the browser's main scrollbar rather than its own. Override
   any previously defined height on this element. */
.insights-content .main-content {
  height: auto !important;
}

/* Configure the main-content area on the insights page as a flex container so
   the top bar remains fixed and the insights layout fills the remaining space. */
.insights-content .main-content {
  display: flex;
  flex-direction: column;
  /* subtract an approximate height for the top bar to ensure the scroll areas
       fill the viewport. Adjust this value if the top bar height changes. */
  height: calc(100vh - 80px);
}

/* Responsive: stack columns on tablet / mobile screens */
@media (max-width: 63.99rem) {
  .mobile-menu-icon button.icon-btn {
    display: block;
  }
  .collapse-btn {
    display: none !important;
  }

  /* Default: sidebar hidden on mobile via class set by JS */
  body.sidebar-mobile-hidden .sidebar {
    display: none;
  }

  /* Sidebar visible when JS adds open class */
  body.sidebar-mobile-open .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1100;
  }

  /* Fallback: hide sidebar if no JS class set yet (prevents flash) */
  body:not(.sidebar-mobile-open) .sidebar {
    display: none;
  }

  .content {
    margin-left: 0;
  }

  .content > .top-bar {
    left: 0;
  }

  .overlay {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 1050;
    background-color: #000;
    opacity: 0.25;
    display: block;
  }
}


/* =====================================================
   PROFILE PAGES — Account / Security / Notifications
   Matches OpenMineral My Profile layout exactly
   ===================================================== */

/* Outer wrapper — same narrow centred column as OpenMineral */
.profile-wrap {
    max-width: 700px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* ── Tab navigation ─────────────────────────────────── */
.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.profile-tab {
    padding: 0.75rem 0;
    margin-right: 2rem;
    font-size: 0.9375rem;      /* 15px — matches OM exactly               */
    font-weight: 400;          /* OM: tabs are normal weight when inactive */
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.profile-tab:hover {
    color: var(--text-primary);
}

.profile-tab--active {
    color: var(--om-blue);     /* OM blue — #3d6ff0                       */
    font-weight: 500;          /* slightly heavier when active             */
    border-bottom-color: var(--om-blue);
}

/* ── Section blocks ─────────────────────────────────── */
.profile-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-light);
}

.profile-section--borderless {
    border-bottom: none;
}

.profile-section__title {
    font-size: 1.125rem;       /* 18px — matches OM section headings      */
    font-weight: 700;          /* OM: bold (700), not 600                 */
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* ── Form fields ────────────────────────────────────── */
.pf-field {
    margin-bottom: 1.25rem;
}

.pf-label {
    display: block;
    font-size: 0.8125rem;      /* 13px — OM labels are slightly smaller   */
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.pf-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.pf-req {
    color: var(--red);
}

.pf-link {
    font-size: 0.8125rem;      /* 13px — matches OM "Forgot your password?" */
    color: var(--om-blue);
    text-decoration: none;
}

.pf-link:hover {
    text-decoration: underline;
}

.pf-input {
    width: 100%;
    padding: 0.5rem 0.75rem;   /* 8px 12px — matches OM input padding     */
    border: 1px solid var(--border-default);
    border-radius: 4px;
    font-size: 0.875rem;       /* 14px — OM input text size               */
    color: var(--text-primary);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pf-input:focus {
    outline: none;
    border-color: var(--om-blue);
    box-shadow: 0 0 0 3px var(--om-blue-ring);
}

.pf-input--readonly {
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: default;
}

/* ── Company ID field ───────────────────────────────────────────────────────
 * Wrapper rows the input and the "Read only" badge side by side.
 * The input takes all available space; the badge sits flush right.      */
.pf-company-id {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.pf-company-id .pf-input--company-id {
    flex: 1;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    letter-spacing: 0.04em;
    font-size: 0.8125rem;
}
.pf-company-id__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.1875rem 0.5rem;
    background: var(--border-light);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    white-space: nowrap;
    user-select: none;
}

/* Salutation + name row */
.pf-greet-row {
    display: grid;
    grid-template-columns: 70px 1fr 1fr; /* OM: narrower salutation ~65-70px */
    gap: 0.75rem;
}

.pf-select {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}

.pf-select:focus {
    outline: none;
    border-color: var(--om-blue);
    box-shadow: 0 0 0 3px var(--om-blue-ring);
}

.pf-select--full {
    width: 100%;
}

/* Checkbox row */
.pf-field--check {
    margin-top: 0.25rem;
}

.pf-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;       /* 14px                                    */
    color: var(--text-secondary);
    cursor: pointer;
}

.pf-check-label a {
    color: var(--om-blue);
    text-decoration: none;
}

.pf-check-label a:hover {
    text-decoration: underline;
}

/* Checkbox accent colour — OM uses its own blue */
.pf-check-label input[type="checkbox"] {
    accent-color: var(--om-blue);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Save / action buttons ──────────────────────────── */
/* Primary "Save changes" button */
.pf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5625rem 1.5rem;  /* OM: 9px 24px — slightly taller than before */
    background: var(--om-blue);
    color: #fff;
    border: none;
    border-radius: 6px;         /* OM: 6px radius, not 4px                 */
    font-size: 0.875rem;        /* 14px                                    */
    font-weight: 600;           /* OM: semibold on buttons                 */
    cursor: pointer;
    transition: background 0.15s;
}

.pf-btn:hover {
    background: var(--om-blue-hover);
}

/* Outline button — "Download data" style */
.pf-btn--outline {
    background: transparent;
    color: var(--om-blue);      /* OM: outline buttons use the brand blue   */
    border: 1px solid var(--om-blue);
}

.pf-btn--outline:hover {
    background: rgba(61, 111, 240, 0.05);
}

/* Danger outline button — "Delete my account" */
.pf-btn--danger {
    color: var(--red);
    border-color: var(--red);
    background: transparent;
}

.pf-btn--danger:hover {
    background: var(--red-hover-bg);
}

/* KYC / GDPR notes */
.pf-kyc-note,
.pf-gdpr-note {
    margin-top: 1rem;
    font-size: 0.8125rem;      /* 13px                                    */
    color: var(--text-muted);
    line-height: 1.6;
}

/* GDPR section */
.pf-gdpr-text {
    font-size: 0.875rem;       /* 14px                                    */
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.pf-gdpr-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

/* ── Login Activity table ───────────────────────────────────────────────── */
.sh-activity-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
}
.sh-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    min-width: 560px;
}
.sh-activity-table thead th {
    padding: 0.625rem 0.875rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}
.sh-activity-table thead th:first-child { border-radius: 8px 0 0 0; }
.sh-activity-table thead th:last-child  { border-radius: 0 8px 0 0; }
.sh-activity-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}
.sh-activity-table tbody tr:last-child {
    border-bottom: none;
}
.sh-activity-table tbody td {
    padding: 0.625rem 0.875rem;
    color: var(--text-secondary);
    vertical-align: middle;
}
.sh-activity-row--suspicious td {
    background: #fffbeb;
}
.sh-activity-time {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--text-primary);
}
.sh-activity-ip {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Badges used in the activity table */
.sh-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}
.sh-badge--ok {
    background: #dcfce7;
    color: #166534;
}
.sh-badge--fail {
    background: #fee2e2;
    color: #991b1b;
}
.sh-badge--warn {
    background: #fef9c3;
    color: #854d0e;
    margin-left: 0.375rem;
    cursor: default;
}

/* Alerts */
.sh-alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;        /* OM: 6px radius on alerts                */
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.sh-alert--success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.sh-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.sh-alert--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ── Notification settings ──────────────────────────── */

/* Master toggle — pill style */
.notif-master {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.notif-master__label {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

/* iOS-style toggle switch */
.notif-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

.notif-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.notif-toggle__slider {
    position: absolute;
    inset: 0;
    background: var(--border-default);
    border-radius: 999px;
    transition: background 0.2s;
}

.notif-toggle__slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.notif-toggle input:checked + .notif-toggle__slider {
    background: var(--om-blue);   /* OM blue toggle                        */
}

.notif-toggle input:checked + .notif-toggle__slider::before {
    transform: translateX(20px);
}

/* Notification checkbox rows — bordered card style */
.notif-list {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.notif-item {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: var(--bg-subtle);
}

.notif-item__check {
    padding-top: 2px;
    flex-shrink: 0;
}

.notif-item__check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--om-blue);  /* OM blue checkboxes                   */
    cursor: pointer;
}

.notif-item__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.notif-item__desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
    .pf-greet-row {
        grid-template-columns: 65px 1fr;
    }

    .pf-greet-row input:last-child {
        grid-column: 2;
    }

    .profile-tab {
        margin-right: 1rem;
        font-size: 0.875rem;
    }
}

/* ════════════════════════════════════════════════════════════
 * LANGUAGE SELECTOR — Circular Flag Icon (Minimal Design)
 * ════════════════════════════════════════════════════════════
 * Small circular button with UK flag 🇬🇧 centered inside.
 * No text, no arrow. Clean and minimal.
 * Positioned between bell icon and profile dropdown.
 */
.lang-selector {
    position: relative;
    display: inline-block;
}
.lang-btn-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 50%; /* perfect circle */
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.lang-btn-circle:hover,
.lang-selector.open .lang-btn-circle {
    border-color: #9ca3af;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.lang-flag-icon {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    z-index: 1050;
    animation: sh-dropdown-in 0.15s ease;
}
.lang-selector.open .lang-menu {
    display: block;
}
.lang-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}
.lang-option:hover {
    background: var(--bg-subtle);
}
.lang-option.active {
    font-weight: 600;
    color: var(--om-blue);
}

@keyframes sh-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
 * INSIGHTS PAGE FOOTER — ensure copyright is visible
 * ════════════════════════════════════════════════════════════ */
.page-template-page-insights .site-footer {
    margin-left: calc(var(--sidebar-width) + var(--insights-list-width));
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: #fff;
}
.page-template-page-insights .insights-detail {
    padding-bottom: 80px; /* ensure footer is visible below article */
}

/* ════════════════════════════════════════════════════════════
 * SESSION TIMEOUT MODAL
 * ════════════════════════════════════════════════════════════ */
.sh-session-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sh-session-overlay.sh-session-visible {
    display: flex;
}
.sh-session-modal {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    text-align: center;
}
.sh-session-icon {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}
.sh-session-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.sh-session-body {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.sh-session-countdown {
    font-weight: 700;
    color: var(--red);
}
.sh-session-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ACCOUNT UNDER REVIEW PAGE — Enterprise SaaS Styling
 * ═══════════════════════════════════════════════════════════════════════════ */

.pending-page {
    min-height: calc(100vh - 88px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.pending-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    padding: 3rem 2.5rem;
    max-width: 640px;
    width: 100%;
    text-align: center;
    position: relative;
}

/* ── Status Icon ─────────────────────────────────────────────────────────── */
.pending-icon {
    margin: 0 auto 1.5rem;
}

.icon-circle {
    width: 96px;
    height: 96px;
    margin: 0 auto;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(251,191,36,0.3);
    animation: icon-pulse 2s ease-in-out infinite;
}

.icon-shield-clock {
    color: #fff;
}

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(251,191,36,0.3); }
    50% { transform: scale(1.05); box-shadow: 0 12px 32px rgba(251,191,36,0.4); }
}

/* ── Title Section ──────────────────────────────────────────────────────── */
.pending-title {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.pending-subtitle {
    font-size: 16px;
    color: #64748b;
    margin: 0 0 2rem;
    line-height: 1.5;
}

/* ── Status Badge ───────────────────────────────────────────────────────── */
.pending-status {
    margin-bottom: 2rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

/* ── Company ID Section (Enterprise Feature) ────────────────────────────── */
.company-id-section {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #3b82f6;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.company-id-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1e40af;
    margin-bottom: 0.5rem;
}

.company-id-value {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Monaco', 'Consolas', monospace;
    color: #1e3a8a;
    letter-spacing: 0.025em;
    margin-bottom: 0.75rem;
    user-select: all;
}

.company-id-helper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #3730a3;
    margin: 0;
    line-height: 1.4;
}

.company-id-helper svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* ── Information Block ──────────────────────────────────────────────────── */
.pending-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.info-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

.info-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: #059669;
}

.info-item strong {
    color: #1e293b;
    font-weight: 600;
}

/* ── Metadata ───────────────────────────────────────────────────────────── */
.pending-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2rem;
    padding: 12px 16px;
    background: #f1f5f9;
    border-radius: 8px;
}

.meta-icon {
    flex-shrink: 0;
    color: #64748b;
}

.meta-text {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.meta-text strong {
    color: #334155;
    font-weight: 600;
}

/* ── Action Buttons ─────────────────────────────────────────────────────── */
.pending-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-primary,
.btn-secondary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 16px rgba(59,130,246,0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    background: #fff;
    color: #475569;
    border: 1.5px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.btn-ghost {
    background: transparent;
    color: #64748b;
    border: none;
    box-shadow: none;
    padding: 12px 24px;
}

.btn-ghost:hover {
    color: #475569;
    background: #f1f5f9;
}

.btn-icon {
    flex-shrink: 0;
}

/* ── Loading Spinner ────────────────────────────────────────────────────── */
.pending-spinner {
    margin-top: 1.5rem;
    text-align: center;
}

.spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spinner-spin 0.8s linear infinite;
}

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

.pending-spinner p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    animation: success-pop 0.3s ease-out;
}

@keyframes success-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Status Messages ────────────────────────────────────────────────────── */
.pending-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
    padding: 12px 16px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    animation: message-slide-in 0.3s ease-out;
}

.pending-message svg {
    flex-shrink: 0;
}

.pending-message--error {
    background: #fee2e2;
    color: #991b1b;
    border-color: #f87171;
}

@keyframes message-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pending-card {
        padding: 2rem 1.5rem;
    }
    
    .pending-title {
        font-size: 24px;
    }
    
    .icon-circle {
        width: 80px;
        height: 80px;
    }
    
    .icon-shield-clock {
        width: 48px;
        height: 48px;
    }
    
    .company-id-value {
        font-size: 20px;
    }
    
    .pending-actions {
        gap: 10px;
    }
    
    .btn-primary,
    .btn-secondary {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════════════
 * 404 ERROR PAGE — Compact Professional Design
 * ═══════════════════════════════════════════════════════════════════════════ */

.error-404-wrapper {
    min-height: calc(100vh - 88px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.error-404-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

/* ── Large 404 Number ───────────────────────────────────────────────────── */
.error-404-number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.error-digit {
    font-size: 100px;
    font-weight: 800;
    color: #3b82f6;
    line-height: 1;
    animation: error-float 3s ease-in-out infinite;
}

.error-digit:nth-child(1) {
    animation-delay: 0s;
}

.error-digit:nth-child(3) {
    animation-delay: 0.3s;
}

.error-digit-middle {
    font-size: 0;
}

.error-icon {
    color: #ef4444;
    animation: error-spin 4s linear infinite;
}

@keyframes error-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes error-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Title & Subtitle ───────────────────────────────────────────────────── */
.error-404-title {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px;
}

.error-404-subtitle {
    font-size: 16px;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 24px;
}

/* ── Message Box ────────────────────────────────────────────────────────── */
.error-404-message {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 24px;
    text-align: left;
}

.error-404-message p {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 10px;
}

.error-404-message ul {
    margin: 0;
    padding-left: 20px;
}

.error-404-message li {
    font-size: 14px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 6px;
}

.error-404-message li:last-child {
    margin-bottom: 0;
}

/* ── Action Buttons ─────────────────────────────────────────────────────── */
.error-404-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.btn-404-primary,
.btn-404-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-404-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

.btn-404-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59,130,246,0.4);
}

.btn-404-secondary {
    background: #fff;
    color: #475569;
    border: 2px solid #cbd5e1;
}

.btn-404-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    transform: translateY(-1px);
}

/* ── Fun Fact ───────────────────────────────────────────────────────────── */
.error-404-fun-fact {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 18px;
}

.error-404-fun-fact p {
    font-size: 13px;
    color: #78350f;
    margin: 0;
    line-height: 1.6;
}

.error-404-fun-fact strong {
    color: #92400e;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .error-digit {
        font-size: 70px;
    }
    
    .error-icon {
        width: 70px;
        height: 70px;
    }
    
    .error-404-title {
        font-size: 26px;
    }
    
    .error-404-actions {
        flex-direction: column;
    }
    
    .btn-404-primary,
    .btn-404-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ── Site Footer ─────────────────────────────────────────────────────────── */
.site-footer {
    padding: 20px 40px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}
.footer-copyright {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 4px 0;
}
.footer-links {
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-links a {
    font-size: 14px;
    color: #3b82f6;
    text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }
.footer-sep { color: #cbd5e1; font-size: 14px; }


/* ══════════════════════════════════════════════════════════════════════════
   SUB-MENU BEHAVIOR — MATCHES OPENMINERAL EXACTLY
   ══════════════════════════════════════════════════════════════════════════ */


/* ── COLLAPSED SIDEBAR: Tooltip popup on right side ────────────────────── */

/* Hide regular sub-menu when collapsed */
.sidebar-collapsed .sidebar-menu .sub-menu {
    display: none !important;
}

/* Tooltip container */
.sidebar-collapsed .sidebar-menu .menu-item-has-children {
    position: relative;
}

/* Tooltip popup */
.sidebar-collapsed .sidebar-menu .submenu-tooltip {
    position: fixed;
    left: 72px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 220px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* Arrow pointing left to sidebar */
.sidebar-collapsed .sidebar-menu .submenu-tooltip::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 22px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #1e293b;
}

/* Tooltip shown only via JS click — no hover trigger */

/* Tooltip items */
.sidebar-collapsed .submenu-tooltip > div {
    margin: 0;
}

.sidebar-collapsed .submenu-tooltip a {
    display: block;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-collapsed .submenu-tooltip a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.sidebar-collapsed .submenu-tooltip .current-menu-item a {
    color: var(--sidebar-active-text);
    background: var(--sidebar-active-bg);
}

/* ── Utility helpers (replaces inline styles from templates) ──────────────── */
/* Centred muted box — was style="text-align:center;color:#606a78;" */
.box--centered {
  text-align: center;
  color: #606a78;
}

/* Horizontal button row — was style="display:flex;gap:12px;" */
.btn-row {
  display: flex;
  gap: 12px;
}

/* Margin-top spacer — was style="margin-top:16px;" */
.mt-16 {
  margin-top: 16px;
}

/* ── 404 Error Page ──────────────────────────────────────────────────────── */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body.error-404-standalone {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
    }

    .error-404-standalone-wrapper {
        width: 100%;
        max-width: 800px;
    }

    .error-404-standalone-content {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        padding: 60px 80px;
        text-align: center;
    }

    /* Logo Section */
    .error-404-logo {
        margin-bottom: 40px;
    }

    .error-404-logo svg {
        display: block;
        margin: 0 auto 16px;
    }

    .error-404-brand {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0.1em;
        background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Heading */
    .error-404-heading {
        font-size: 32px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 16px;
        line-height: 1.3;
    }

    /* Subheading */
    .error-404-subheading {
        font-size: 16px;
        color: #64748b;
        line-height: 1.6;
        margin-bottom: 32px;
    }

    /* Primary Button */
    .error-404-btn-primary {
        display: inline-block;
        background: linear-gradient(135deg, #5b7ce6 0%, #4f5fd9 100%);
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        padding: 14px 48px;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(91, 124, 230, 0.3);
        margin-bottom: 40px;
    }

    .error-404-btn-primary:hover {
        background: linear-gradient(135deg, #4f5fd9 0%, #4352cc 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(91, 124, 230, 0.4);
    }

    /* Divider */
    .error-404-divider {
        margin: 40px 0;
        position: relative;
        height: 1px;
        background: #e2e8f0;
    }

    .error-404-divider span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #ffffff;
        padding: 0 20px;
        color: #94a3b8;
        font-size: 14px;
    }

    /* Secondary Message */
    .error-404-secondary-message {
        font-size: 16px;
        color: #94a3b8;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    /* Support Text */
    .error-404-support-text {
        font-size: 15px;
        color: #475569;
        margin-bottom: 20px;
    }

    /* Secondary Button */
    .error-404-btn-secondary {
        display: inline-block;
        background: linear-gradient(135deg, #5b7ce6 0%, #4f5fd9 100%);
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        padding: 14px 48px;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(91, 124, 230, 0.3);
    }

    .error-404-btn-secondary:hover {
        background: linear-gradient(135deg, #4f5fd9 0%, #4352cc 100%);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(91, 124, 230, 0.4);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .error-404-standalone-content {
            padding: 40px 32px;
        }

        .error-404-heading {
            font-size: 26px;
        }

        .error-404-subheading,
        .error-404-secondary-message {
            font-size: 15px;
        }

        .error-404-btn-primary,
        .error-404-btn-secondary {
            padding: 12px 32px;
            font-size: 15px;
        }
    }

    @media (max-width: 480px) {
        .error-404-standalone-content {
            padding: 32px 24px;
        }

        .error-404-logo svg {
            width: 160px;
            height: 64px;
        }

        .error-404-brand {
            font-size: 20px;
        }

        .error-404-heading {
            font-size: 22px;
        }

        .error-404-subheading br,
        .error-404-secondary-message br {
            display: none;
        }
    }