/*
 * Puranode client area (client.puranode.com) — "rack telemetry", same tokens as the
 * storefront (puranode/app/globals.css): dark ground, hairline cards, one amber accent,
 * IBM Plex Sans + Mono, 4px corners.
 *
 * HOW THIS WINS
 * It is injected by nginx just before </body>, so it is the last stylesheet on every
 * page. Underneath it sit PteroCA's own theme, an inline <style> PteroCA generates from
 * its colour settings, and the June 2026 emerald reskin at the end of panel.css — all of
 * them heavy with !important. Everything here is therefore nested under a repeated :root
 * (five extra points of specificity, no extra markup) and marked !important where it
 * overrides one of those. Do not "clean up" the !important: each one is answering one.
 *
 * It must look right in BOTH of PteroCA's colour schemes, because the scheme class is
 * applied by script and a first-time visitor starts in light. console.js pins dark.
 */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600 800; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500 700; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root:root:root:root:root {
  --pn-ground: #0c0e0d;
  --pn-soft: #0f1210;
  --pn-surface: #131614;
  --pn-surface-2: #191d1a;
  --pn-line: #242823;
  --pn-line-2: #353b35;
  --pn-ink: #e9ebe7;
  --pn-ink-2: #cfd3cc;
  --pn-dim: #8e958c;
  --pn-accent: #ff7a1a;
  --pn-accent-hi: #ff9140;
  --pn-ok: #3ecf8e;
  --pn-warn: #f0a92a;
  --pn-danger: #ff6b5e;
  --pn-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pn-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pn-r: 4px;

  color-scheme: dark;
  background: var(--pn-ground) !important;

  /* ------------------------------------------------------------------ tokens
     PteroCA and Bootstrap read these. Set on body (and on anything carrying its own
     data-bs-theme) so they beat the values PteroCA writes for either scheme. */
  body,
  [data-bs-theme] {
    --primary-color: var(--pn-accent) !important;
    --color-primary: var(--pn-accent) !important;
    --secondary-color: var(--pn-accent-hi) !important;
    --link-color: var(--pn-accent) !important;
    --link-hover-color: var(--pn-accent-hi) !important;
    --background-color: var(--pn-ground) !important;
    --body-bg: var(--pn-ground) !important;
    --content-bg: var(--pn-ground) !important;
    --pagination-active-bg: var(--pn-accent) !important;
    --dropdown-toggle-color: var(--pn-dim) !important;

    --bs-body-bg: var(--pn-ground) !important;
    --bs-body-color: var(--pn-ink) !important;
    --bs-body-font-family: var(--pn-sans) !important;
    --bs-emphasis-color: var(--pn-ink) !important;
    --bs-heading-color: var(--pn-ink) !important;
    --bs-secondary-color: var(--pn-dim) !important;
    --bs-tertiary-color: var(--pn-dim) !important;
    --bs-secondary-bg: var(--pn-surface-2) !important;
    --bs-tertiary-bg: var(--pn-surface) !important;
    --bs-border-color: var(--pn-line) !important;
    --bs-border-color-translucent: var(--pn-line) !important;
    --bs-border-radius: var(--pn-r) !important;
    --bs-border-radius-sm: var(--pn-r) !important;
    --bs-border-radius-lg: var(--pn-r) !important;
    --bs-border-radius-xl: var(--pn-r) !important;
    --bs-card-bg: var(--pn-surface) !important;
    --bs-card-cap-bg: var(--pn-surface) !important;
    --bs-card-border-color: var(--pn-line) !important;
    --bs-link-color: var(--pn-accent) !important;
    --bs-link-color-rgb: 255, 122, 26 !important;
    --bs-link-hover-color: var(--pn-accent-hi) !important;
    --bs-link-hover-color-rgb: 255, 145, 64 !important;
    --bs-primary: var(--pn-accent) !important;
    --bs-primary-rgb: 255, 122, 26 !important;
    --bs-success: var(--pn-ok) !important;
    --bs-success-rgb: 62, 207, 142 !important;
    --bs-warning: var(--pn-warn) !important;
    --bs-warning-rgb: 240, 169, 42 !important;
    --bs-danger: var(--pn-danger) !important;
    --bs-danger-rgb: 255, 107, 94 !important;
    --bs-light-rgb: 25, 29, 26 !important;
    --bs-dark-rgb: 233, 235, 231 !important;
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--pn-ink) !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-active-bg: var(--pn-surface-2) !important;
    --bs-table-hover-bg: var(--pn-surface-2) !important;
    --bs-table-border-color: var(--pn-line) !important;
    --bs-dropdown-bg: var(--pn-surface) !important;
    --bs-dropdown-color: var(--pn-ink) !important;
    --bs-dropdown-border-color: var(--pn-line-2) !important;
    --bs-dropdown-link-color: var(--pn-ink-2) !important;
    --bs-dropdown-link-hover-color: var(--pn-ink) !important;
    --bs-dropdown-link-hover-bg: var(--pn-surface-2) !important;
    --bs-dropdown-link-active-bg: var(--pn-surface-2) !important;
    --bs-dropdown-link-active-color: var(--pn-accent) !important;
    --bs-modal-bg: var(--pn-surface) !important;
    --bs-modal-border-color: var(--pn-line-2) !important;

    /* PteroCA's "stripe" greys, in dark order: 900 is the brightest ink. */
    --stripe-gray-50: var(--pn-surface) !important;
    --stripe-gray-100: var(--pn-surface-2) !important;
    --stripe-gray-200: var(--pn-line) !important;
    --stripe-gray-300: var(--pn-line-2) !important;
    --stripe-gray-400: var(--pn-dim) !important;
    --stripe-gray-500: var(--pn-dim) !important;
    --stripe-gray-600: var(--pn-ink-2) !important;
    --stripe-gray-700: var(--pn-ink-2) !important;
    --stripe-gray-800: var(--pn-ink) !important;
    --stripe-gray-900: var(--pn-ink) !important;
    --stripe-blue-50: rgba(255, 122, 26, 0.1) !important;
    --stripe-blue-100: rgba(255, 122, 26, 0.16) !important;
    --stripe-blue-500: var(--pn-accent) !important;
    --stripe-blue-600: var(--pn-accent) !important;
    --stripe-green-50: rgba(62, 207, 142, 0.1) !important;
    --stripe-green-100: rgba(62, 207, 142, 0.16) !important;
    --stripe-green-500: var(--pn-ok) !important;
    --stripe-green-600: var(--pn-ok) !important;
    --stripe-shadow-sm: none !important;
    --stripe-shadow: none !important;
    --stripe-shadow-md: none !important;
    --stripe-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
    --stripe-radius: var(--pn-r) !important;
    --stripe-radius-lg: var(--pn-r) !important;

    --button-bg: var(--pn-accent) !important;
    --button-color: var(--pn-ground) !important;
    --button-border-color: var(--pn-accent) !important;
    --button-hover-bg: var(--pn-accent-hi) !important;
    --button-hover-color: var(--pn-ground) !important;
  }

  /* -------------------------------------------------------------------- base */
  body {
    background: var(--pn-ground) !important;
    color: var(--pn-ink) !important;
    font-family: var(--pn-sans) !important;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0;
  }
  ::selection { background: rgba(255, 122, 26, 0.32); }

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
  .card-title, .fw-bold, .text-dark, .text-body, strong, b {
    color: var(--pn-ink) !important;
  }
  /* Font only on headings: .text-dark and .fw-bold also sit on icon elements, and an
     icon given a text font renders as an empty box. */
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title { font-family: var(--pn-sans) !important; }
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600 !important; letter-spacing: -0.01em; }
  p, li, label, td, th, span, div { font-family: inherit; }
  .text-muted, .text-secondary, small.text-muted, .form-text, .text-body-secondary { color: var(--pn-dim) !important; }
  .text-primary { color: var(--pn-accent) !important; }
  .text-success { color: var(--pn-ok) !important; }
  .text-warning { color: var(--pn-warn) !important; }
  .text-danger { color: var(--pn-danger) !important; }
  .text-white { color: var(--pn-ink) !important; }
  code, kbd, pre, samp, .font-monospace { font-family: var(--pn-mono) !important; }
  code { color: var(--pn-ink-2) !important; background: var(--pn-surface-2) !important; border-radius: var(--pn-r); padding: 0.1em 0.35em; }
  hr { border-color: var(--pn-line) !important; opacity: 1 !important; }

  /* :where() keeps this at the weight of a bare "a", so any class below can restyle a
     link without out-shouting it. PteroCA's own link rule is four :not()s heavy. */
  a:where(:not(.btn):not(.badge):not(.dropdown-item):not(.page-link):not(.menu-item-contents):not(.nav-link)) { color: var(--pn-accent) !important; }
  a:where(:not(.btn):not(.badge):not(.dropdown-item):not(.page-link):not(.menu-item-contents):not(.nav-link)):hover { color: var(--pn-accent-hi) !important; }
  a.text-muted, a.text-muted:not(.btn) { color: var(--pn-dim) !important; }
  a.text-muted:hover { color: var(--pn-ink) !important; }

  .bg-white, .bg-light, .bg-body, .bg-body-tertiary, .bg-body-secondary { background: var(--pn-surface-2) !important; color: var(--pn-ink) !important; }
  .bg-primary { background: var(--pn-accent) !important; color: var(--pn-ground) !important; }
  .bg-primary * { color: var(--pn-ground) !important; }
  .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--pn-line) !important; }
  .rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5 { border-radius: var(--pn-r) !important; }
  .shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

  /* ------------------------------------------------------------------ layout */
  .wrapper, .content-wrapper, .content-wrapper .content, main.content, .main-content, .content, .content-body, .responsive-header {
    background: var(--pn-ground) !important;
    color: var(--pn-ink) !important;
  }
  .content-top, .global-footer { background: var(--pn-ground) !important; border-color: var(--pn-line) !important; }

  .sidebar {
    background: var(--pn-ground) !important;
    border-right: 1px solid var(--pn-line) !important;
    box-shadow: none !important;
  }
  .sidebar .main-header, .sidebar #header-logo, .sidebar .logo { background: transparent !important; border: 0 !important; }
  .sidebar .menu-label, .sidebar .menu-header, .sidebar small, .sidebar [class*="label"]:not(.menu-item-label) {
    color: var(--pn-dim) !important;
    font-family: var(--pn-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
  }
  .sidebar .menu-item, #main-menu .menu .menu-item { background: transparent !important; }
  .sidebar .menu-item-contents, .sidebar a {
    color: var(--pn-dim) !important;
    background: transparent !important;
    border-radius: var(--pn-r) !important;
    font-weight: 500;
  }
  .sidebar .menu-item-contents span, .sidebar .menu-item-contents .menu-item-label,
  .sidebar .menu-item-contents i, .sidebar .menu-item-contents svg, .sidebar .menu-item-contents .icon, .sidebar .menu-icon {
    color: inherit !important;
  }
  .sidebar .menu-item-contents:hover, #main-menu .menu .menu-item:hover > .menu-item-contents { color: var(--pn-ink) !important; background: var(--pn-surface) !important; }
  #main-menu .menu .menu-item:hover { background: transparent !important; }
  .sidebar .menu-item.active > .menu-item-contents, .sidebar .active > .menu-item-contents, .sidebar .menu-item-contents.active {
    color: var(--pn-ink) !important;
    background: var(--pn-surface) !important;
    font-weight: 500;
  }
  #main-menu .menu-item.active .menu-item-label, #main-menu .menu-item.active > .menu-item-contents,
  #main-menu .menu-item.active > .menu-item-contents span { color: var(--pn-ink) !important; }
  #main-menu .menu-item.active > .menu-item-contents i { color: var(--pn-accent) !important; }
  .sidebar .menu-item.active > .menu-item-contents i, .sidebar .active > .menu-item-contents i,
  .sidebar .menu-item.active > .menu-item-contents svg { color: var(--pn-accent) !important; }

  /* The logo files: one is dark-on-light, one is all white. On this ground only the
     standard mark (amber hexagon, light wordmark) is right, everywhere. */
  img[src*="puranode-logo"] { content: url(/pn-console/logo.svg) !important; }

  .main-header, .content-header, .navbar {
    background: var(--pn-ground) !important;
    border-bottom: 1px solid var(--pn-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .main-header a, .main-header span, .main-header i, .main-header svg, .main-header .nav-link, .main-header div { color: var(--pn-ink-2) !important; }
  .navbar-custom-menu { gap: 8px; }
  .navbar-custom-menu:not(:has(.user-menu-wrapper)) > *, .user-menu-wrapper .user-details {
    background: var(--pn-surface) !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: var(--pn-r) !important;
    box-shadow: none !important;
  }
  .user-menu-wrapper .user-details:hover { border-color: var(--pn-line-2) !important; }
  .user-menu-wrapper .user-name { color: var(--pn-ink) !important; font-weight: 500; }
  .navbar-custom-menu:not(:has(.user-menu-wrapper)) a { color: var(--pn-ink) !important; font-family: var(--pn-mono) !important; }
  .navbar-custom-menu:not(:has(.user-menu-wrapper)) a *:not(i) { color: var(--pn-ink) !important; }
  .navbar-custom-menu:not(:has(.user-menu-wrapper)) i,
  .navbar-custom-menu:not(:has(.user-menu-wrapper)) svg { color: var(--pn-dim) !important; }
  .user-avatar-icon-background { color: var(--pn-line-2) !important; }
  .dropdown-settings-button, .dropdown-settings-button i { color: var(--pn-dim) !important; }
  /* Light/dark switch: the console has one scheme. */
  .dropdown-appearance-label, .dropdown-appearance-label ~ li:has([data-ea-color-scheme]), [data-ea-color-scheme] { display: none !important; }

  /* ------------------------------------------------------------------- cards */
  .card, .dashboard-header, .list-group-item, .accordion-item, .modal-content, .offcanvas, .toast, .popover {
    background: var(--pn-surface) !important;
    color: var(--pn-ink) !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: var(--pn-r) !important;
    box-shadow: none !important;
  }
  .card:hover { transform: none !important; box-shadow: none !important; }
  .card:has(.card-img-top):hover { border-color: var(--pn-line-2) !important; transform: none !important; box-shadow: none !important; }
  .card:has(.card-img-top):hover .card-img-top { transform: none !important; }
  /* Category and product art was drawn in emerald. One accent: render it neutral. */
  .card-img-top, .store-category-placeholder, .store-product-placeholder {
    border-radius: 3px 3px 0 0 !important;
    filter: grayscale(1) contrast(1.05) brightness(0.85);
    border-bottom: 1px solid var(--pn-line);
  }
  .store-category-placeholder, .store-product-placeholder { background: var(--pn-surface-2) !important; filter: none; }
  .store-category-icon, .store-product-icon { color: var(--pn-line-2) !important; }
  .card-header, .card-footer, .modal-header, .modal-footer {
    background: transparent !important;
    border-color: var(--pn-line) !important;
    color: var(--pn-ink) !important;
  }
  .card-header h5, .card-header .card-title, .card-header h4, .card-header h6 { font-size: 15px !important; font-weight: 600 !important; }
  .card .card-text, .card p { color: var(--pn-ink-2); }
  .card .text-muted, .card small { color: var(--pn-dim) !important; }
  .content-wrapper h5 .fas, .content-wrapper h5 i, .card-header i { color: var(--pn-dim) !important; }
  .dashboard-header { padding: 20px 24px !important; }
  /* List and edit pages wrap the same header in a padded container, which indented
     their title further than every other page. */
  .dashboard-header > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
  .dashboard-header h1, .dashboard-header h4, .dashboard-header .fw-bold { color: var(--pn-ink) !important; }

  /* Round coloured icon badges become square neutral tiles; colour is for state. */
  .rounded-circle:not(img):not(.user-avatar), .icon-circle, .dashboard-icon, .stat-icon, .feature-icon {
    background: var(--pn-surface-2) !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: var(--pn-r) !important;
    color: var(--pn-dim) !important;
    box-shadow: none !important;
  }
  .rounded-circle:not(img) i, .rounded-circle:not(img) svg, .icon-circle i { color: var(--pn-dim) !important; }
  .rounded-pill { border-radius: var(--pn-r) !important; }

  /* ----------------------------------------------------------------- buttons */
  .btn {
    border-radius: var(--pn-r) !important;
    font-family: var(--pn-sans) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    background-image: none !important;
  }
  .btn.primary, .btn-primary, .btn.btn-primary, .d-grid > .btn.primary, .btn-success, .btn.success,
  .btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):active,
  .btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):focus {
    --button-bg: var(--pn-accent) !important;
    --bs-btn-bg: var(--pn-accent) !important;
    background: var(--pn-accent) !important;
    background-color: var(--pn-accent) !important;
    border: 1px solid var(--pn-accent) !important;
    color: var(--pn-ground) !important;
  }
  .btn.primary *, .btn-primary *, .btn-success *, .btn.primary .fas, .pn-cat-foot .btn.primary .fas { color: var(--pn-ground) !important; }
  .btn.primary:hover, .btn-primary:hover, .btn.btn-primary:hover, .d-grid > .btn.primary:hover, .btn-success:hover,
  .btn-primary:not(:disabled):not(.disabled):not(.btn-link):not(.btn-danger):hover {
    --button-bg: var(--pn-accent-hi) !important;
    background: var(--pn-accent-hi) !important;
    background-color: var(--pn-accent-hi) !important;
    border-color: var(--pn-accent-hi) !important;
    color: var(--pn-ground) !important;
    box-shadow: none !important;
  }
  .btn-secondary, .btn.secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-light, .btn-default, .btn:not([class*="primary"]):not([class*="danger"]):not([class*="success"]):not([class*="warning"]):not(.btn-link):not(.btn-close) {
    background: var(--pn-surface-2) !important;
    border: 1px solid var(--pn-line-2) !important;
    color: var(--pn-ink) !important;
  }
  .btn-secondary:hover, .btn.secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-dark:hover, .btn-default:hover, .btn:not([class*="primary"]):not([class*="danger"]):not([class*="success"]):not([class*="warning"]):not(.btn-link):not(.btn-close):hover {
    background: var(--pn-line) !important;
    border-color: var(--pn-dim) !important;
    color: var(--pn-ink) !important;
  }
  .btn-secondary *, .btn-light *, .btn-outline-secondary *, .btn-outline-primary * { color: inherit !important; }
  .btn-danger, .btn.danger { background: transparent !important; border: 1px solid var(--pn-danger) !important; color: var(--pn-danger) !important; }
  .btn-danger:hover, .btn.danger:hover { background: var(--pn-danger) !important; color: var(--pn-ground) !important; }
  .btn-danger:hover * { color: var(--pn-ground) !important; }
  .btn-warning { background: transparent !important; border: 1px solid var(--pn-warn) !important; color: var(--pn-warn) !important; }
  .btn-link { color: var(--pn-accent) !important; }
  .btn:disabled, .btn.disabled { opacity: 0.45 !important; }
  .btn:focus-visible, a:focus-visible, .form-control:focus-visible { outline: 2px solid var(--pn-accent) !important; outline-offset: 2px; }
  .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

  /* ------------------------------------------------------------------- forms */
  .form-control, .form-select, .input-group-text, textarea, select,
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"],
  .ts-control, .ts-wrapper .ts-control, .ts-dropdown {
    background-color: var(--pn-ground) !important;
    border: 1px solid var(--pn-line-2) !important;
    border-radius: var(--pn-r) !important;
    color: var(--pn-ink) !important;
    box-shadow: none !important;
    font-family: var(--pn-sans) !important;
  }
  .form-control, .form-select { padding: 0.5rem 0.75rem !important; min-height: 38px; }
  /* The list-page search box has its magnifier inside the field. */
  .form-widget:has(.content-search-icon) .form-control, .content-search .form-control, form.form-action-search .form-control { padding-left: 2.25rem !important; }
  .form-control::placeholder, input::placeholder, textarea::placeholder { color: #6b726a !important; opacity: 1; }
  .form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus, .ts-wrapper.focus .ts-control {
    border-color: var(--pn-accent) !important;
    box-shadow: 0 0 0 1px var(--pn-accent) !important;
    outline: 0 !important;
  }
  .form-control:disabled, .form-control[readonly], .form-select:disabled,
  input.form-control:read-only, textarea.form-control:read-only, select.form-select:disabled {
    background-color: var(--pn-surface-2) !important;
    color: var(--pn-dim) !important;
  }
  input:-webkit-autofill, input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--pn-ink) !important;
    box-shadow: 0 0 0 1000px var(--pn-ground) inset !important;
    caret-color: var(--pn-ink);
  }
  .form-label, label, .col-form-label, legend { color: var(--pn-ink-2) !important; font-weight: 500; }
  .input-group-text { background-color: var(--pn-surface-2) !important; color: var(--pn-dim) !important; }
  .form-check-input { background-color: var(--pn-ground) !important; border: 1px solid var(--pn-dim) !important; box-shadow: none !important; }
  .form-check-input:checked { background-color: var(--pn-accent) !important; border-color: var(--pn-accent) !important; }
  .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230c0e0d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important; }
  .form-range::-webkit-slider-thumb { background: var(--pn-accent) !important; }
  .form-range::-webkit-slider-runnable-track { background: var(--pn-line-2) !important; }
  .form-range::-moz-range-thumb { background: var(--pn-accent) !important; }
  .invalid-feedback, .form-error-message { color: var(--pn-danger) !important; }

  /* ------------------------------------------------------------------ tables */
  table, .table { color: var(--pn-ink) !important; border-color: var(--pn-line) !important; }
  .table thead th, table thead th {
    background: transparent !important;
    color: var(--pn-dim) !important;
    font-family: var(--pn-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pn-line-2) !important;
  }
  table tbody tr, .table tbody tr, table.table tbody tr, table tbody tr td, .table tbody tr td {
    background-color: transparent !important;
    color: var(--pn-ink) !important;
    border-color: var(--pn-line) !important;
    box-shadow: none !important;
  }
  .table tbody tr:hover td { background-color: var(--pn-surface-2) !important; }
  .table-responsive, .datagrid, table.datagrid { background: transparent !important; border-color: var(--pn-line) !important; box-shadow: none !important; }

  th a, th a:where(:not(.btn)), thead a, th span { color: var(--pn-dim) !important; font-family: var(--pn-mono) !important; }
  th a:hover, th.sorted a { color: var(--pn-ink) !important; }
  /* A wide table used to push the whole page sideways: the grid tracks had no
     min-width, so the content column grew past the window. Let the table scroll. */
  .wrapper, .main-content, .content-wrapper, .content, .content-body, .main-content > * { min-width: 0 !important; }
  .content-body { overflow-x: auto !important; }
  td, .datagrid td { vertical-align: middle; }
  td .text-muted, td small { color: var(--pn-dim) !important; }

  /* ------------------------------------------------------- badges and alerts */
  .badge {
    border-radius: var(--pn-r) !important;
    font-family: var(--pn-mono) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    background: var(--pn-surface-2) !important;
    border: 1px solid var(--pn-line-2) !important;
    color: var(--pn-ink-2) !important;
  }
  .badge.bg-success, .badge-success, .badge.text-bg-success { color: var(--pn-ok) !important; border-color: rgba(62, 207, 142, 0.4) !important; background: rgba(62, 207, 142, 0.08) !important; }
  .badge.bg-danger, .badge-danger, .badge.text-bg-danger { color: var(--pn-danger) !important; border-color: rgba(255, 107, 94, 0.4) !important; background: rgba(255, 107, 94, 0.08) !important; }
  .badge.bg-warning, .badge-warning, .badge.text-bg-warning { color: var(--pn-warn) !important; border-color: rgba(240, 169, 42, 0.4) !important; background: rgba(240, 169, 42, 0.08) !important; }
  .badge.bg-primary, .badge-primary, .badge.bg-info, .badge.text-bg-primary { color: var(--pn-accent) !important; border-color: rgba(255, 122, 26, 0.4) !important; background: rgba(255, 122, 26, 0.08) !important; }
  .badge * { color: inherit !important; }

  .alert {
    background: var(--pn-surface) !important;
    border: 1px solid var(--pn-line-2) !important;
    border-left: 2px solid var(--pn-dim) !important;
    border-radius: var(--pn-r) !important;
    color: var(--pn-ink) !important;
  }
  .alert * { color: inherit; }
  .alert-success { border-left-color: var(--pn-ok) !important; }
  .alert-danger { border-left-color: var(--pn-danger) !important; }
  .alert-warning { border-left-color: var(--pn-warn) !important; }
  .alert-info, .alert-primary { border-left-color: var(--pn-accent) !important; }
  .alert i, .alert .fas { color: var(--pn-dim) !important; }

  /* --------------------------------------------------- menus, tabs, paging */
  .dropdown-menu {
    background: var(--pn-surface) !important;
    border: 1px solid var(--pn-line-2) !important;
    border-radius: var(--pn-r) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
  }
  .dropdown-item, .dropdown-item * { color: var(--pn-ink-2) !important; }
  .dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { background: var(--pn-surface-2) !important; color: var(--pn-ink) !important; }
  .dropdown-header, .dropdown-user-details .user-label { color: var(--pn-dim) !important; }
  .dropdown-divider { border-color: var(--pn-line) !important; }

  .nav-tabs, .nav-pills { border-color: var(--pn-line) !important; }
  .nav-tabs .nav-link, .nav-pills .nav-link { color: var(--pn-dim) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; }
  .nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { color: var(--pn-ink) !important; }
  .nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: var(--pn-ink) !important; box-shadow: inset 0 -2px 0 var(--pn-accent) !important; }
  .nav-tabs .nav-link *, .nav-pills .nav-link * { color: inherit !important; }

  .page-link { background: var(--pn-surface) !important; border-color: var(--pn-line) !important; color: var(--pn-ink-2) !important; border-radius: var(--pn-r) !important; }
  .page-item.active .page-link { background: var(--pn-accent) !important; border-color: var(--pn-accent) !important; color: var(--pn-ground) !important; }
  .page-item.disabled .page-link { color: var(--pn-dim) !important; opacity: 0.5; }

  .progress { background: var(--pn-line) !important; border-radius: var(--pn-r) !important; height: 6px; }
  .progress-bar { background: var(--pn-accent) !important; }
  .progress-bar.bg-success { background: var(--pn-ok) !important; }
  .progress-bar.bg-danger { background: var(--pn-danger) !important; }
  .progress-bar.bg-warning { background: var(--pn-warn) !important; }

  .modal-backdrop { background: #040504 !important; }
  .list-group-item { border-radius: 0 !important; }

  /* -------------------------------------------- June reskin pieces (.pn-*) */
  .pn-status-pill { background: var(--pn-surface-2) !important; border: 1px solid var(--pn-line) !important; border-radius: var(--pn-r) !important; color: var(--pn-ink-2) !important; font-family: var(--pn-mono) !important; font-weight: 500 !important; font-size: 12px !important; }
  .pn-status-pill .pn-dot { background: var(--pn-ok) !important; box-shadow: none !important; }
  .pn-promo { background: var(--pn-surface) !important; border: 1px solid var(--pn-line) !important; border-radius: var(--pn-r) !important; }
  .pn-promo::before { display: none !important; }
  .pn-term { background: var(--pn-ground) !important; border: 1px solid var(--pn-line) !important; border-radius: var(--pn-r) !important; font-family: var(--pn-mono) !important; }
  .pn-term .pn-dots { display: none !important; }
  .pn-term .cmd { color: var(--pn-accent) !important; }
  .pn-term .ok { color: var(--pn-ok) !important; }
  .pn-term .muted { color: var(--pn-dim) !important; }
  .pn-promo-copy .eb { color: var(--pn-accent) !important; font-family: var(--pn-mono) !important; font-weight: 500 !important; }
  .pn-promo-copy h3 { font-weight: 600 !important; }
  .pn-promo-copy h3 em { color: var(--pn-accent) !important; }
  .pn-promo-copy p { color: var(--pn-dim) !important; }
  .pn-promo-btn { background: var(--pn-accent) !important; color: var(--pn-ground) !important; border-radius: var(--pn-r) !important; font-weight: 500 !important; }
  .pn-promo-btn:hover { background: var(--pn-accent-hi) !important; }
  .pn-cat-tag { background: var(--pn-ground) !important; border: 1px solid var(--pn-line-2) !important; color: var(--pn-ink-2) !important; border-radius: var(--pn-r) !important; backdrop-filter: none !important; font-family: var(--pn-mono) !important; }
  .pn-chip, .pn-mod-tag { background: var(--pn-surface-2) !important; border: 1px solid var(--pn-line) !important; color: var(--pn-ink-2) !important; border-radius: var(--pn-r) !important; font-family: var(--pn-mono) !important; font-weight: 500 !important; }
  .pn-from { color: var(--pn-dim) !important; }
  .pn-from b { color: var(--pn-ink) !important; font-family: var(--pn-mono) !important; font-weight: 500 !important; }
  .pn-from b span { color: var(--pn-dim) !important; }
  .pn-info-card .card-header { background: transparent !important; border-bottom: 1px solid var(--pn-line) !important; }
  .pn-info-card .card-header h5 { color: var(--pn-ink) !important; }
  .pn-spec, .pn-info-note { background: var(--pn-ground) !important; border: 1px solid var(--pn-line) !important; border-radius: var(--pn-r) !important; }
  .pn-spec-val { color: var(--pn-ink) !important; font-family: var(--pn-mono) !important; font-weight: 500 !important; }
  .pn-spec-key { color: var(--pn-dim) !important; font-family: var(--pn-mono) !important; font-weight: 500 !important; }
  .pn-spec p, .pn-step p, .pn-info-note { color: var(--pn-dim) !important; }
  .pn-step-n { background: var(--pn-surface-2) !important; border: 1px solid var(--pn-line-2) !important; border-radius: var(--pn-r) !important; color: var(--pn-accent) !important; font-family: var(--pn-mono) !important; font-weight: 500 !important; }
  .pn-step b, .pn-feat, .pn-info-lead { color: var(--pn-ink) !important; }
  .pn-feat .fas, .pn-info-note .fas { color: var(--pn-accent) !important; }
  #pn-theme-toggle { display: none !important; }

  /* ---------------- cookie notice and "Report an issue" (inline-styled by script) */
  #pn-consent-banner {
    background: var(--pn-surface) !important;
    color: var(--pn-ink-2) !important;
    border: 1px solid var(--pn-line-2) !important;
    border-radius: var(--pn-r) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
    font-family: var(--pn-sans) !important;
    /* It used to sit on top of the Report button in the same corner. */
    right: auto !important;
    left: 16px !important;
  }
  #pn-consent-banner button { border-radius: var(--pn-r) !important; font-family: var(--pn-sans) !important; font-weight: 500 !important; cursor: pointer; }
  #pn-consent-accept { background: var(--pn-accent) !important; color: var(--pn-ground) !important; border: 1px solid var(--pn-accent) !important; }
  #pn-consent-decline { background: var(--pn-surface-2) !important; color: var(--pn-ink) !important; border: 1px solid var(--pn-line-2) !important; }
  button[style*="2147483000"] {
    background: var(--pn-surface) !important;
    color: var(--pn-ink-2) !important;
    border: 1px solid var(--pn-line-2) !important;
    border-radius: var(--pn-r) !important;
    box-shadow: none !important;
    font: 500 13px/1 var(--pn-sans) !important;
    padding: 9px 14px !important;
  }
  button[style*="2147483000"]:hover { color: var(--pn-ink) !important; border-color: var(--pn-dim) !important; }
  div[style*="2147483001"] { background: rgba(4, 5, 4, 0.8) !important; }
  div[style*="2147483001"] > div {
    background: var(--pn-surface) !important;
    color: var(--pn-ink) !important;
    border: 1px solid var(--pn-line-2) !important;
    border-radius: var(--pn-r) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5) !important;
    font-family: var(--pn-sans) !important;
  }
  div[style*="2147483001"] > div * { color: var(--pn-ink-2); font-family: var(--pn-sans) !important; }
  #pnr-send { background: var(--pn-accent) !important; color: var(--pn-ground) !important; border: 1px solid var(--pn-accent) !important; border-radius: var(--pn-r) !important; }
  #pnr-cancel, #pnr-x { background: var(--pn-surface-2) !important; color: var(--pn-ink) !important; border: 1px solid var(--pn-line-2) !important; border-radius: var(--pn-r) !important; }
  #pnr-x { background: transparent !important; border: 0 !important; }
  #pnr-err { color: var(--pn-danger) !important; }

  /* --------------------------------------------- sign in, register, reset */
  body.page-login-split, .page-login-split .wrapper, .page-login-split .content-wrapper,
  .login-split-container, .login-split-right, .login-form-container, .login-form-wrapper {
    background: var(--pn-ground) !important;
    color: var(--pn-ink) !important;
    box-shadow: none !important;
  }
  .login-split-left {
    background: var(--pn-soft) !important;
    background-image: none !important;
    border-right: 1px solid var(--pn-line) !important;
    color: var(--pn-ink) !important;
  }
  .login-split-left::before, .login-split-left::after { display: none !important; }
  .login-brand-title { color: var(--pn-ink) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
  .login-brand-subtitle { color: var(--pn-dim) !important; }
  /* Three stock claims with icons ("Lightning Fast", "Always Reliable"). The storefront
     makes the case; this page only has to let someone in. */
  .login-features { display: none !important; }
  .login-form-wrapper h1, .login-form-wrapper h2, .login-form-wrapper h3, .login-form-wrapper h4 { color: var(--pn-ink) !important; }
  .login-form-wrapper .input-group .btn, .login-form-wrapper .input-group-text { border-color: var(--pn-line-2) !important; }
  .login-form-wrapper .btn { padding: 0.6rem 1rem !important; }

  /* ---------------------------------------------- public store (landing.css) */
  body {
    --bg-body: var(--pn-ground) !important;
    --bg-card: var(--pn-surface) !important;
    --bg-card-hover: var(--pn-surface) !important;
    --text-main: var(--pn-ink) !important;
    --text-muted: var(--pn-dim) !important;
    --primary-hover: var(--pn-accent-hi) !important;
    --accent-gradient: none !important;
    --navbar-bg: var(--pn-ground) !important;
    --border-color: var(--pn-line) !important;
    --card-accent: var(--pn-line) !important;
  }
  .navbar-brand { color: var(--pn-ink) !important; font-weight: 600 !important; }
  .navbar .nav-link { color: var(--pn-dim) !important; }
  .navbar .nav-link:hover { color: var(--pn-ink) !important; }
  .custom-card {
    background: var(--pn-surface) !important;
    background-image: none !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: var(--pn-r) !important;
    box-shadow: none !important;
    transform: none !important;
    --card-accent: transparent !important;
  }
  .custom-card::before { display: none !important; }
  .custom-card:hover { border-color: var(--pn-line-2) !important; box-shadow: none !important; transform: none !important; }
  .card-icon { background: var(--pn-surface-2) !important; border: 1px solid var(--pn-line) !important; border-radius: var(--pn-r) !important; color: var(--pn-dim) !important; }
  .product-price, .custom-card .text-primary, .custom-card .h4, .custom-card .h5.text-primary {
    color: var(--pn-ink) !important;
    font-family: var(--pn-mono) !important;
    font-weight: 500 !important;
  }
  .product-price small { color: var(--pn-dim) !important; }
  .section-title h2, .hero-section h1, .hero h1 { font-weight: 600 !important; letter-spacing: -0.02em; }
  .hero-section, .hero, .cta-section, footer, .footer { background: var(--pn-ground) !important; background-image: none !important; border-color: var(--pn-line) !important; }
  .hero-section::before, .hero-section::after, .hero::before, .hero::after, .hero-bg, .hero-glow { display: none !important; }
  .btn-lg { padding: 0.65rem 1.3rem !important; }
  p { color: var(--pn-ink-2); }
  .lead, p.text-muted, .section-title p { color: var(--pn-dim) !important; }

  /* ------------------------------------------------------------- order panel */
  .product-summary-box, .price-calculation-box, .card .bg-light {
    background: var(--pn-ground) !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: var(--pn-r) !important;
  }
  .product-summary-box .text-success, .product-summary-box strong, .product-summary-box .fw-bold {
    color: var(--pn-ink) !important;
    font-family: var(--pn-mono) !important;
    font-weight: 500 !important;
  }
  /* Section icons came in four colours (orange clock, yellow cog, blue info, green
     receipt). They label a field; they are not a state. */
  label i, .form-label i, h4 i, h5 i, h6 i, .form-text i, small i, .card-header i, legend i,
  label i[class*="text-"], h6 i[class*="text-"], h5 i[class*="text-"], small i[class*="text-"], .form-text i[class*="text-"] {
    color: var(--pn-dim) !important;
  }
  i.fa-2x, i.fa-3x, i.fa-lg, i.fa-xl, i.fa-2xl { color: var(--pn-dim) !important; }
  /* Money is a reading, not a link: ink, in mono. */
  h1.text-primary, h2.text-primary, h3.text-primary, h4.text-primary, h5.text-primary,
  .h1.text-primary, .h2.text-primary, .h3.text-primary, .h4.text-primary, .h5.text-primary,
  .fw-bold.text-primary, .fw-bold.text-success, .display-6, .display-5 {
    color: var(--pn-ink) !important;
    font-family: var(--pn-mono) !important;
    font-weight: 500 !important;
  }

  /* -------------------------------------------------------------- scrollbars */
  * { scrollbar-width: thin; scrollbar-color: var(--pn-line-2) transparent; }
  th i, th svg, th .fas { color: var(--pn-dim) !important; }
}

/* Carried over from the June injection: PteroCA gives buttons a min-width and offsets
   their icons, which breaks icon-only and short buttons. */
:root:root:root:root:root {
  .btn { min-width: 0 !important; justify-content: center !important; }
  .btn > i, .btn > svg { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ------------------------------------------------------------------ phones */
:root:root:root:root:root {
  .user-avatar-icon-background { color: var(--pn-surface-2) !important; }
  .user-avatar-icon-foreground, .user-avatar .fa-user { color: var(--pn-ink-2) !important; }
  /* Decorative icons were tinted blue, green and amber by utility class. Red stays:
     it is the only one that means something. */
  i.text-primary, i.text-info, i.text-success, i.text-warning, i.text-secondary,
  .text-primary > i, .text-info > i, .text-success > i:only-child { color: var(--pn-dim) !important; }

  @media (max-width: 767.98px) {
    /* Page header: icon + title on one line, the action or status pill under it.
       It used to keep everything on one row, squeezing the subtitle to two words a
       line and pushing the store's status pill off the screen. */
    .dashboard-header { padding: 16px !important; }
    .dashboard-header .d-flex.justify-content-between { flex-wrap: wrap !important; row-gap: 12px; }
    .dashboard-header .d-flex.justify-content-between > * { min-width: 0; max-width: 100%; }
    .dashboard-header .d-flex.justify-content-between > :first-child { flex: 1 1 100%; }
    .dashboard-header h1, .dashboard-header .h1, .dashboard-header h4 { font-size: 1.35rem !important; }
    .pn-status-pill { white-space: normal !important; }
    .pn-promo { padding: 18px !important; }
  }
}