/*
 * ScanLink admin theme
 *
 * Light theme: green header (topbar) only. Sidebar uses default Filament colours.
 * Dark theme: topbar/sidebar banners untouched — primary accent + logo only.
 *
 * IMPORTANT: Never force white text/icons onto dropdown panels — that makes the
 * user-menu theme switcher (and any other panel actions) invisible.
 */

:root {
    --scanlink-green: #008c00;
    --scanlink-green-hover: #007000;
    --scanlink-green-soft: rgb(0 140 0 / 0.07);
    --scanlink-green-muted: rgb(0 140 0 / 0.12);
    --scanlink-green-ring: rgb(0 140 0 / 0.22);
    --scanlink-green-shadow: rgb(0 140 0 / 0.14);
    --scanlink-menu-text: rgb(31 41 55);
    --scanlink-menu-text-muted: rgb(107 114 128);
    --scanlink-menu-text-hover: var(--scanlink-green-hover);
    --scanlink-menu-icon-accent: var(--scanlink-green);
    --scanlink-menu-tray-bg: var(--scanlink-green-soft);
    --scanlink-menu-item-hover-bg: var(--scanlink-green-soft);
    --scanlink-menu-signout-hover-bg: rgb(243 244 246);
    --scanlink-menu-switcher-idle: rgb(156 163 175);
    --scanlink-menu-switcher-hover-bg: rgb(255 255 255 / 0.65);
    --scanlink-menu-switcher-hover-text: rgb(107 114 128);
    --scanlink-menu-switcher-active-bg: var(--scanlink-green-muted);
    --scanlink-menu-switcher-active-text: var(--scanlink-green);
}

.dark {
    --scanlink-green-soft: rgb(0 140 0 / 0.12);
    --scanlink-green-muted: rgb(0 140 0 / 0.24);
    --scanlink-green-ring: rgb(74 222 128 / 0.35);
    --scanlink-green-shadow: rgb(0 140 0 / 0.28);
    --scanlink-menu-text: rgb(243 244 246);
    --scanlink-menu-text-muted: rgb(156 163 175);
    --scanlink-menu-text-hover: rgb(134 239 172);
    --scanlink-menu-icon-accent: rgb(74 222 128);
    --scanlink-menu-tray-bg: rgb(0 140 0 / 0.18);
    --scanlink-menu-item-hover-bg: rgb(0 140 0 / 0.16);
    --scanlink-menu-signout-hover-bg: rgb(255 255 255 / 0.06);
    --scanlink-menu-switcher-idle: rgb(156 163 175);
    --scanlink-menu-switcher-hover-bg: rgb(255 255 255 / 0.08);
    --scanlink-menu-switcher-hover-text: rgb(209 213 219);
    --scanlink-menu-switcher-active-bg: rgb(0 140 0 / 0.38);
    --scanlink-menu-switcher-active-text: rgb(134 239 172);
}

/* ---------------------------------------------------------------------------
 * LIGHT THEME ONLY — green header / topbar chrome
 * ------------------------------------------------------------------------- */
html:not(.dark) .fi-topbar {
    background-color: var(--scanlink-green) !important;
}

html:not(.dark) .fi-topbar nav,
html:not(.dark) .fi-topbar > div {
    background-color: var(--scanlink-green) !important;
    --tw-ring-color: transparent;
}

/*
 * White contrast ONLY on the green bar itself — not menus/panels.
 * Do NOT target .fi-theme-switcher-btn here (it lives in the user dropdown).
 */
html:not(.dark) .fi-topbar .fi-topbar-item-label,
html:not(.dark) .fi-topbar .fi-topbar-item > a {
    color: #ffffff !important;
}

html:not(.dark) .fi-topbar .fi-topbar-actions .fi-icon-btn,
html:not(.dark) .fi-topbar .fi-topbar-actions .fi-icon-btn svg,
html:not(.dark) .fi-topbar .fi-global-search-results-ctn + .fi-icon-btn,
html:not(.dark) .fi-topbar .fi-icon-btn.fi-topbar-database-notifications-btn,
html:not(.dark) .fi-topbar .fi-icon-btn.fi-topbar-database-notifications-btn svg,
html:not(.dark) .fi-topbar .fi-theme-switcher-ctn > .fi-icon-btn,
html:not(.dark) .fi-topbar .fi-theme-switcher-ctn > .fi-icon-btn svg {
    color: #ffffff !important;
}

html:not(.dark) .fi-topbar .fi-topbar-actions .fi-icon-btn:hover,
html:not(.dark) .fi-topbar .fi-icon-btn.fi-topbar-database-notifications-btn:hover {
    background-color: rgb(255 255 255 / 0.15) !important;
}

/* Topbar breathing room — the search / bell / avatar row was cramped (vertically
   against the top and horizontally against the right edge). Force generous padding
   on all sides and vertically centre the row. Applies in both light and dark. */
.fi-topbar {
    min-height: 4rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    padding-inline: 1.5rem !important;
    align-items: center !important;
}

.fi-topbar .fi-topbar-end {
    column-gap: 0.75rem !important;
    align-items: center !important;
}

/* Keep the avatar / user-menu trigger from sitting flush against the right edge. */
.fi-topbar .fi-topbar-end > :last-child {
    margin-right: 0.25rem !important;
}

/* ---------------------------------------------------------------------------
 * Dropdown panels — always keep labels/icons visible (never inherit topbar white)
 * Covers user menu, theme switcher, and any future topbar dropdowns.
 * ------------------------------------------------------------------------- */
html:not(.dark) .fi-dropdown-panel .fi-dropdown-list-item,
html:not(.dark) .fi-dropdown-panel .fi-dropdown-list-item-label,
html:not(.dark) .fi-dropdown-panel .fi-dropdown-header,
html:not(.dark) .fi-dropdown-panel a {
    color: rgb(55 65 81) !important; /* gray-700 */
}

html:not(.dark) .fi-dropdown-panel .fi-icon,
html:not(.dark) .fi-dropdown-panel .fi-dropdown-list-item .fi-icon,
html:not(.dark) .fi-dropdown-panel svg {
    color: rgb(107 114 128) !important; /* gray-500 */
}

/* Theme switcher (Light / Dark / System) — readable on white panel */
html:not(.dark) .fi-theme-switcher .fi-theme-switcher-btn,
html:not(.dark) .fi-theme-switcher .fi-theme-switcher-btn svg {
    color: rgb(156 163 175) !important; /* gray-400 */
}

html:not(.dark) .fi-theme-switcher .fi-theme-switcher-btn.fi-active,
html:not(.dark) .fi-theme-switcher .fi-theme-switcher-btn.fi-active svg {
    color: var(--scanlink-green) !important;
}

html:not(.dark) .fi-theme-switcher .fi-theme-switcher-btn:hover {
    background-color: rgb(249 250 251) !important;
    color: rgb(107 114 128) !important;
}

html:not(.dark) .fi-theme-switcher .fi-theme-switcher-btn:hover svg {
    color: rgb(107 114 128) !important;
}

/* ---------------------------------------------------------------------------
 * User menu dropdown — brand green accent; readable in light + dark
 * ------------------------------------------------------------------------- */
.fi-user-menu .fi-dropdown-panel {
    overflow: hidden;
    border-color: var(--scanlink-green-ring) !important;
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.06),
        0 12px 28px -4px var(--scanlink-green-shadow) !important;
}

.dark .fi-user-menu .fi-dropdown-panel {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.45),
        0 12px 28px -4px var(--scanlink-green-shadow) !important;
}

.fi-user-menu .fi-dropdown-panel::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--scanlink-green-hover),
        var(--scanlink-green),
        rgb(0 160 0)
    );
}

.dark .fi-user-menu .fi-dropdown-panel::before {
    background: linear-gradient(
        90deg,
        rgb(0 100 0),
        rgb(74 222 128),
        rgb(0 140 0)
    );
}

/* Profile — primary action */
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item {
    margin: 0.25rem 0.375rem 0;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item,
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item-label {
    color: var(--scanlink-menu-text) !important;
}

.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item .fi-icon,
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item svg {
    color: var(--scanlink-menu-icon-accent) !important;
}

.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item:hover,
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item:focus-visible {
    background-color: var(--scanlink-menu-item-hover-bg) !important;
}

.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item:hover,
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):first-child .fi-dropdown-list-item:hover .fi-dropdown-list-item-label {
    color: var(--scanlink-menu-text-hover) !important;
}

/* Theme switcher tray */
.fi-user-menu .fi-dropdown-list:has(.fi-theme-switcher) {
    margin: 0.375rem 0.5rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: var(--scanlink-menu-tray-bg);
}

.fi-user-menu .fi-theme-switcher {
    gap: 0.125rem;
}

.fi-user-menu .fi-theme-switcher .fi-theme-switcher-btn {
    border-radius: 0.5rem !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fi-user-menu .fi-theme-switcher .fi-theme-switcher-btn,
.fi-user-menu .fi-theme-switcher .fi-theme-switcher-btn svg {
    color: var(--scanlink-menu-switcher-idle) !important;
}

.fi-user-menu .fi-theme-switcher .fi-theme-switcher-btn:hover,
.fi-user-menu .fi-theme-switcher .fi-theme-switcher-btn:hover svg {
    background-color: var(--scanlink-menu-switcher-hover-bg) !important;
    color: var(--scanlink-menu-switcher-hover-text) !important;
}

.fi-user-menu .fi-theme-switcher .fi-theme-switcher-btn.fi-active,
.fi-user-menu .fi-theme-switcher .fi-theme-switcher-btn.fi-active svg {
    background-color: var(--scanlink-menu-switcher-active-bg) !important;
    color: var(--scanlink-menu-switcher-active-text) !important;
    box-shadow: inset 0 0 0 1px var(--scanlink-green-ring);
}

/* Sign out — neutral in both themes */
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item {
    margin: 0 0.375rem 0.25rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item,
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item-label {
    color: var(--scanlink-menu-text-muted) !important;
}

.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item .fi-icon,
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item svg {
    color: var(--scanlink-menu-text-muted) !important;
}

.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item:hover {
    background-color: var(--scanlink-menu-signout-hover-bg) !important;
}

.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item:hover,
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item:hover .fi-dropdown-list-item-label,
.fi-user-menu .fi-dropdown-list:not(:has(.fi-theme-switcher)):last-child .fi-dropdown-list-item:hover svg {
    color: var(--scanlink-menu-text) !important;
}

/* Avatar trigger — light topbar ring */
html:not(.dark) .fi-topbar .fi-user-menu-trigger {
    border-radius: 9999px;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.92);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

html:not(.dark) .fi-topbar .fi-user-menu-trigger:hover {
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgb(255 255 255 / 0.35);
}

html:not(.dark) .fi-topbar .fi-user-menu-trigger[aria-expanded='true'] {
    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 4px rgb(255 255 255 / 0.5);
}

/* Avatar trigger — dark topbar ring */
.dark .fi-topbar .fi-user-menu-trigger {
    border-radius: 9999px;
    box-shadow: 0 0 0 2px rgb(74 222 128 / 0.45);
    transition: box-shadow 0.15s ease;
}

.dark .fi-topbar .fi-user-menu-trigger:hover,
.dark .fi-topbar .fi-user-menu-trigger[aria-expanded='true'] {
    box-shadow:
        0 0 0 2px rgb(134 239 172 / 0.75),
        0 0 0 4px rgb(0 140 0 / 0.28);
}

/* ---------------------------------------------------------------------------
 * BOTH THEMES — ScanLink logo
 * White pill keeps the full-colour logo readable on green (light) and dark banners.
 * ------------------------------------------------------------------------- */
.fi-logo {
    height: 2.75rem !important;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}

.fi-topbar .fi-logo,
.fi-simple-layout .fi-logo {
    background: #ffffff;
    border-radius: 0.375rem;
    padding: 0.25rem 0.55rem;
    box-sizing: content-box;
}

/* Single-logo rule: Filament renders the brand logo in BOTH the topbar and the
 * sidebar header, so when the sidebar is open two identical logos appear. Keep
 * the logo only in the green topbar banner (legacy parity) and hide the sidebar
 * header entirely — its collapse button is already relocated to the topbar. This
 * is theme-agnostic so exactly one logo shows in light and dark mode. */
.fi-sidebar-header,
.fi-sidebar-header-ctn {
    display: none !important;
}

/* Login / simple pages: reinforce brand green accents */
html:not(.dark) .fi-simple-main .fi-btn-primary,
html:not(.dark) .fi-simple-layout .fi-btn-color-primary {
    --tw-ring-color: var(--scanlink-green);
}

/* ---------------------------------------------------------------------------
 * Buttons — Filament v5 uses .fi-color-* + CSS vars (--bg / --text).
 * Shade auto-pick can make primary a light green with dark text; force brand.
 * ------------------------------------------------------------------------- */
.fi-btn.fi-color-primary:not(.fi-outlined),
.fi-btn.fi-color-success:not(.fi-outlined),
.fi-btn.fi-color-danger:not(.fi-outlined),
.fi-btn.fi-color-warning:not(.fi-outlined),
.fi-btn.fi-color-info:not(.fi-outlined),
.fi-ac-btn-action.fi-color-primary:not(.fi-outlined),
.fi-ac-btn-action.fi-color-success:not(.fi-outlined),
.fi-ac-btn-action.fi-color-danger:not(.fi-outlined),
.fi-ac-btn-action.fi-color-warning:not(.fi-outlined),
.fi-header-actions .fi-btn.fi-color-primary,
.fi-page-header-actions .fi-btn.fi-color-primary,
button.fi-btn[type="submit"]:not(.fi-outlined):not(.fi-color-gray) {
    --bg: #008c00 !important;
    --text: #ffffff !important;
    --hover-bg: #007000 !important;
    --hover-text: #ffffff !important;
    --dark-bg: #008c00 !important;
    --dark-text: #ffffff !important;
    --dark-hover-bg: #007000 !important;
    --dark-hover-text: #ffffff !important;
    background: #008c00 !important;
    background-color: #008c00 !important;
    color: #ffffff !important;
    border-color: #008c00 !important;
}

/* Label text + icons inside primary CTAs (Create / Save / Delete) */
.fi-btn.fi-color-primary:not(.fi-outlined) *,
.fi-header-actions .fi-btn.fi-color-primary *,
.fi-page-header-actions .fi-btn.fi-color-primary * {
    color: #ffffff !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.fi-color-success:not(.fi-outlined):hover,
.fi-btn.fi-color-danger:not(.fi-outlined):hover,
.fi-btn.fi-color-warning:not(.fi-outlined):hover,
.fi-btn.fi-color-info:not(.fi-outlined):hover,
.fi-ac-btn-action.fi-color-primary:not(.fi-outlined):hover,
button.fi-btn[type="submit"]:not(.fi-outlined):not(.fi-color-gray):hover {
    background-color: #007000 !important;
    color: #ffffff !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon,
.fi-btn.fi-color-success:not(.fi-outlined) > .fi-icon,
.fi-btn.fi-color-danger:not(.fi-outlined) > .fi-icon,
.fi-btn.fi-color-warning:not(.fi-outlined) > .fi-icon,
.fi-btn.fi-color-info:not(.fi-outlined) > .fi-icon,
.fi-ac-btn-action.fi-color-primary:not(.fi-outlined) > .fi-icon,
.fi-btn.fi-color-primary:not(.fi-outlined) svg,
.fi-btn.fi-color-success:not(.fi-outlined) svg {
    color: #ffffff !important;
}

/* Outlined primary still uses brand green for ring/text */
.fi-btn.fi-outlined.fi-color-primary {
    color: var(--scanlink-green) !important;
    --tw-ring-color: var(--scanlink-green);
}

/* ---------------------------------------------------------------------------
 * BOTH THEMES — Dashboard tile grid
 * ------------------------------------------------------------------------- */
.scanlink-dashboard-grid,
.scanlink-home-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .scanlink-dashboard-grid,
    .scanlink-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .scanlink-dashboard-grid,
    .scanlink-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.scanlink-dashboard-tile,
.scanlink-home-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid rgb(3 7 18 / 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scanlink-dashboard-tile:hover,
.scanlink-home-tile:hover {
    border-color: var(--scanlink-green);
    box-shadow: 0 2px 6px 0 rgb(0 140 0 / 0.25);
}

.dark .scanlink-dashboard-tile,
.dark .scanlink-home-tile {
    background-color: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
}

.scanlink-dashboard-tile-icon,
.scanlink-home-tile-icon {
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    color: var(--scanlink-green);
}

.scanlink-dashboard-tile-label,
.scanlink-home-tile-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .scanlink-dashboard-tile-label,
.dark .scanlink-home-tile-label {
    color: rgb(243 244 246);
}

/* Portal / admin sidebar: keep labels fully readable */
.fi-sidebar {
    display: flex;
    flex-direction: column;
}

.fi-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(156 163 175 / 0.55);
    border-radius: 999px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(107 114 128 / 0.75);
}

.fi-sidebar-item-label,
.fi-sidebar-group-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: rgb(107 114 128);
}

.dark .fi-sidebar-group-btn .fi-icon,
.dark .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: rgb(156 163 175);
}

.fi-panel-portal .fi-sidebar.fi-sidebar-open,
.fi-panel-admin .fi-sidebar.fi-sidebar-open {
    min-width: 14rem;
}

/* Sidebar sign out — pinned to bottom, native nav item look */
.scanlink-sidebar-sign-out {
    flex-shrink: 0;
    margin-top: auto;
    padding: 0.75rem 0.75rem 0.875rem;
    border-top: 1px solid rgb(3 7 18 / 0.06);
}

.dark .scanlink-sidebar-sign-out {
    border-top-color: rgb(255 255 255 / 0.06);
}

.scanlink-sidebar-sign-out .fi-sidebar-nav-groups {
    margin: 0;
    gap: 0;
}

.scanlink-sidebar-sign-out .fi-sidebar-group {
    margin: 0;
}

.scanlink-sidebar-sign-out .fi-sidebar-group-items {
    margin: 0;
    gap: 0;
}

.scanlink-sidebar-sign-out .fi-sidebar-item {
    margin: 0;
}

.scanlink-sidebar-sign-out .fi-sidebar-item-btn {
    margin: 0;
}

.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .scanlink-sidebar-sign-out,
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .scanlink-sidebar-sign-out {
    padding: 0.75rem 0.375rem 0.875rem;
}

/* Collapse / expand control — hamburger in topbar (AdminLTE-style), not sidebar header */
.fi-sidebar-header .fi-sidebar-collapse-btn,
.fi-sidebar-header .fi-icon-btn.fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar-header .fi-icon-btn.fi-sidebar-close-collapse-sidebar-btn {
    display: none !important;
}

.fi-topbar {
    gap: 0.75rem;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 4rem;
    height: 4rem;
    max-height: 4rem;
    overflow: visible;
    padding-inline: 1rem;
    box-sizing: border-box;
}

/* Do NOT force width:100% on topbar children — that stacks logo / search / avatar. */
.fi-topbar > .fi-topbar-start,
.fi-topbar > .fi-topbar-end {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none;
    min-width: 0;
}

.fi-topbar-start {
    gap: 0.75rem;
    flex: 0 0 auto;
}

.fi-topbar-end {
    gap: 0.5rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-inline-start: auto !important;
}

.fi-topbar > .fi-topbar-open-sidebar-btn,
.fi-topbar > .fi-topbar-close-sidebar-btn {
    flex: 0 0 auto;
}

.fi-topbar .fi-logo-ctn,
.fi-topbar .fi-logo {
    flex-shrink: 0;
}

.fi-topbar .fi-global-search-ctn,
.fi-topbar [data-global-search-input] {
    flex: 1 1 16rem;
    max-width: 22rem;
    min-width: 10rem;
}

.fi-topbar .fi-global-search-field {
    width: 100%;
}

.fi-topbar .fi-topbar-actions,
.fi-topbar .fi-user-menu {
    flex-shrink: 0;
}

.fi-topbar .fi-user-menu-trigger {
    margin-inline-start: 0.25rem;
}

.fi-topbar-collapse-sidebar-btn-ctn {
    display: flex !important;
    align-items: center;
    margin-inline-end: 0.25rem;
    flex: 0 0 auto;
}

/* Collapse / expand control — clear icon on green topbar */
html:not(.dark) .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn,
html:not(.dark) .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn svg {
    color: #ffffff !important;
}

/* Mobile hamburger (open/close overlay sidebar) — white so it reads on the green (light)
   and near-black (dark) topbar banner; Filament's default grey vanishes on the green. */
.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-open-sidebar-btn svg,
.fi-topbar .fi-topbar-close-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn svg {
    color: #ffffff !important;
}

html:not(.dark) .fi-topbar-collapse-sidebar-btn-ctn .fi-icon-btn:hover {
    background-color: rgb(255 255 255 / 0.15) !important;
}

/* Collapsed sidebar — compact icon rail (less padding) */
.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open),
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) {
    width: var(--collapsed-sidebar-width) !important;
    min-width: var(--collapsed-sidebar-width) !important;
    max-width: var(--collapsed-sidebar-width) !important;
}

.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav,
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
    padding: 0.75rem 0.375rem;
    gap: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Mobile topbar — below Filament's `lg` sidebar breakpoint the sidebar becomes
 * an overlay with its own hamburger, so the relocated desktop collapse button
 * (forced display:flex above) shows as a SECOND hamburger. And the forced-width
 * global search (min-width:10rem) can't shrink, so it overlaps the logo on phones.
 * ------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
    /* Only the mobile hamburger should remain. */
    .fi-topbar-collapse-sidebar-btn-ctn { display: none !important; }
    .fi-topbar { padding-inline: 0.75rem !important; }
    /* Let the search shrink into the space between logo and actions (no overlap). */
    .fi-topbar .fi-global-search-ctn,
    .fi-topbar [data-global-search-input] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 640px) {
    /* Phones: hide the topbar search entirely (navigation lives in the sidebar) so
       the logo, hamburger, bell and avatar always fit on one clean row. */
    .fi-topbar .fi-global-search-ctn,
    .fi-topbar [data-global-search-input] { display: none !important; }
    .fi-topbar { min-height: 3.5rem !important; padding-inline: 0.6rem !important; }
    .fi-logo { max-width: 8.5rem !important; height: 2.25rem !important; }
    .fi-topbar-start { gap: 0.4rem; }
    .fi-topbar-end { gap: 0.35rem; }
}

.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups,
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
    margin-inline: 0;
    gap: 0.25rem;
}

.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn,
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn,
.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn,
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn {
    padding: 0.5rem;
    justify-content: center;
}

.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn,
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn {
    padding: 0.375rem;
    justify-content: center;
}

.fi-body.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header,
.fi-body.fi-body-has-sidebar-fully-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
    padding-inline: 0.25rem;
}

/* Code pricing: keep save buttons under each pricing column (no footer divider) */
.fi-page-code-pricing .fi-section-footer {
    border-top: none;
    padding-top: 0;
}

.fi-page-code-pricing .fi-section-footer .fi-sc-actions {
    margin-top: 0.75rem;
}

/* ---------------------------------------------------------------------------
 * Modals — closed shells must never steal the first click (SPA / Alpine race)
 * ------------------------------------------------------------------------- */
.fi-modal:not(.fi-modal-open) {
    pointer-events: none !important;
}

.fi-modal.fi-modal-open {
    pointer-events: auto !important;
}

[x-cloak] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Portal Master Code List — legacy black type tabs + expiry legend
 * ------------------------------------------------------------------------- */
/* Hide Filament's default tab strip when legacy toolbar is present */
.fi-main:has(.sl-mastercode-toolbar) .fi-tabs,
.fi-page:has(.sl-mastercode-toolbar) .fi-tabs,
.fi-resource-profiles .fi-tabs,
.fi-resource-list-records .fi-ta-tabs,
.fi-page-profiles .fi-tabs {
    display: none !important;
}

.sl-mastercode-heading {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

.sl-mastercode-heading:hover {
    color: var(--scanlink-green);
    text-decoration: underline;
}

.sl-mastercode-toolbar {
    width: 100%;
    margin: 0 0 0.75rem;
    font-family: Arial, Helvetica, sans-serif;
}

.sl-user-guide {
    float: right;
    margin: 0 10px 8px 0;
    color: #333;
    font-size: 13px;
    line-height: 30px;
}

.sl-user-guide a {
    display: inline-block;
    vertical-align: middle;
}

.sl-user-guide img {
    vertical-align: middle;
}

.sl-subnav-wrap {
    clear: both;
    overflow: hidden;
    border-bottom: none;
    padding: 0;
    margin: 0 0 8px;
}

.sl-sub-navigation {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    float: none;
    max-width: 100%;
}

.sl-sub-navigation li {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 3px 0 8px;
    border-left: 1px solid #4c4c4c;
    float: left;
    position: relative;
    white-space: nowrap;
    background: #45484d;
    background: linear-gradient(to bottom, #45484d 0%, #000000 100%);
}

.sl-sub-navigation li.first {
    border-left: none;
}

.sl-sub-navigation li a {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    padding-right: 2px;
}

.sl-sub-navigation li a:hover {
    color: #bababa;
}

/* Selected template tab — match Add a New Code green CTA */
.sl-sub-navigation li.is-active,
.sl-sub-navigation li:has(> a.active) {
    background: linear-gradient(to bottom, #008901 0%, #007a01 100%);
    border-left-color: #006201;
}

.sl-sub-navigation li a.active,
.sl-sub-navigation li.is-active a {
    color: #fff !important;
}

.sl-preview-icon-link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1;
}

.sl-preview-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.sl-preview-tip {
    display: none;
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: #003e00;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    white-space: nowrap;
    z-index: 20;
    border-radius: 2px;
}

.sl-sub-navigation li:hover .sl-preview-tip {
    display: block;
}

.sl-colorcode-define {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 4px 0;
    float: none;
    font-size: 12px;
    color: #333;
}

.sl-mainbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 0;
    vertical-align: middle;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 10px;
    font: inherit;
    color: inherit;
    line-height: 1.2;
    cursor: default;
    box-sizing: border-box;
}

.sl-mainbox--filterable {
    cursor: pointer;
}

.sl-mainbox--filterable:hover {
    border-color: #999;
    background: rgba(0, 0, 0, 0.04);
}

.sl-mainbox--filterable.is-active {
    border-color: #006201;
    background: rgba(0, 137, 1, 0.12);
}

.sl-mainbox:disabled {
    cursor: default;
    opacity: 1;
}

.sl-expiry-filter-clear {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    padding: 6px 12px;
    border: 1px solid #006201;
    border-radius: 6px;
    background: #fff;
    color: #006201;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
}

.sl-expiry-filter-clear:hover {
    background: #e8f8e8;
}

.sl-colorcodebox {
    min-height: 18px;
    height: 18px;
    width: 18px;
    float: none;
    margin-right: 0;
    border: 1px solid #ccc;
    flex-shrink: 0;
    box-sizing: border-box;
}

.sl-colorbox-text {
    float: none;
    padding-top: 0;
    white-space: nowrap;
}

.sl-colorcodebox.sl-red {
    background-color: #F5BFB8 !important;
}

.sl-colorcodebox.sl-orange {
    background-color: #FBC085 !important;
}

.sl-colorcodebox.sl-green {
    background-color: #c9ffc9 !important;
}

/* Table row expiry colours (legacy mastercode) */
.fi-ta-row.sl-row-expired,
tr.sl-row-expired {
    background-color: #F5BFB8 !important;
}

.fi-ta-row.sl-row-expiring,
tr.sl-row-expiring {
    background-color: #FBC085 !important;
}

.fi-ta-row.sl-row-active,
tr.sl-row-active {
    background-color: #c9ffc9 !important;
}

/* ---------------------------------------------------------------------------
 * Portal profile create/edit — legacy two-column template editor
 * ------------------------------------------------------------------------- */
.fi-page:has(.sl-profile-editor) {
    --sl-editor-max: 1160px;
}

/* Soften Filament page chrome around the legacy editor */
.fi-page:has(.sl-profile-editor) .fi-header-heading {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #555755 !important;
}

.fi-page:has(.sl-profile-editor) .fi-page-main-ctn,
.fi-page:has(.sl-profile-editor) .fi-page-content {
    font-family: Arial, Helvetica, sans-serif !important;
}

.sl-profile-editor {
    width: 100%;
    max-width: var(--sl-editor-max, 1160px);
    margin: 0 auto;
    overflow: hidden;
}

.sl-add-form-left {
    float: left;
    width: min(100%, 500px);
    padding-right: 12px;
}

.sl-add-form-right {
    float: right;
    width: min(100%, 450px);
    margin: 12px 0 0;
}

.sl-legacy-preview-sidebar .iphone-preview {
    width: 340px;
    height: 1001px;
    padding: 133px 36px 55px 32px;
    background: url('/images/iphone.png') no-repeat left top;
    float: left;
    box-sizing: content-box;
}

.sl-legacy-preview-sidebar .iphone-preview-container {
    width: 320px;
    height: 882px;
    overflow: auto;
    background: #fff;
}

.sl-iphone-placeholder {
    padding: 2rem 1rem;
    text-align: center;
    color: #666;
    font-size: 13px;
}

.sl-qr-block.form-view1 {
    clear: both;
    margin: 10px auto 0;
    width: 87%;
    max-width: 400px;
    overflow: visible;
}

.sl-qr-block .sl-qr-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.sl-qr-block .sl-qr-image {
    flex: 0 0 175px;
    width: 175px;
    height: 175px;
    object-fit: contain;
    object-position: top left;
    background: #fff;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

.sl-qr-block .clear {
    clear: both;
}

.sl-qr-download-row {
    clear: both;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 12px 0;
    width: 100%;
}

.sl-qr-url-block {
    clear: both;
    margin: 12px 0 16px;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

.qr-url-div {
    word-break: break-all;
    background: #fff;
    border: 1px solid #cccccc;
    border-radius: 7px;
    padding: 7px 5px;
    margin-top: 4px;
    font-size: 13px;
    box-sizing: border-box;
}

/* Tiny Url above Scanlink Url — keep the two boxes from butting together. */
.sl-qr-url-row + .sl-qr-url-row {
    margin-top: 10px;
}

.sl-legacy-preview-sidebar .form-builder-box,
.sl-legacy-preview-sidebar .form-builder-box.sl-form-builder-panel {
    clear: both !important;
    margin: 12px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 6px 6px 0 0 !important;
    border: 1px solid #cccccc !important;
    /* No inset shadow — it draws a second ring under DOWNLOAD ("box under box"). */
    box-shadow: none !important;
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.sl-legacy-preview-sidebar .form-builder-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
    font-size: 18px !important;
    color: #009401 !important;
    line-height: 34px !important;
    font-weight: normal !important;
    padding: 0 !important;
    margin: 0 0 6px !important;
    border-bottom: 0 !important;
}

.sl-legacy-preview-sidebar .form-builder-title .activate-for-profile {
    float: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

.sl-legacy-preview-sidebar .existing-item {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    height: auto !important;
    min-height: 0 !important;
}

.sl-legacy-preview-sidebar .existing-item > span {
    display: inline !important;
    max-width: none !important;
}

.sl-legacy-preview-sidebar .existing-item label {
    line-height: 1.35 !important;
}

.sl-legacy-preview-sidebar .existing-item--format {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    margin: 4px 0 12px !important;
    height: auto !important;
    min-height: 0 !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
}

.sl-legacy-preview-sidebar .existing-item--format .existing-item__label {
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sl-legacy-preview-sidebar .existing-item--format .existing-item__options {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sl-legacy-preview-sidebar .existing-item--format .existing-item__option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Form Builder format box — all placements (sidebar + survey left column) */
.sl-form-builder-panel.form-builder-box .existing-item--format,
.form-builder-box.sl-form-builder-panel .existing-item--format,
.sl-survey-form-builder .existing-item--format {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    margin: 6px 0 12px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

.sl-form-builder-panel.form-builder-box .existing-item--format .existing-item__label,
.sl-survey-form-builder .existing-item--format .existing-item__label {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
}

.sl-form-builder-panel.form-builder-box .existing-item--format .existing-item__options,
.sl-survey-form-builder .existing-item--format .existing-item__options {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sl-form-builder-panel.form-builder-box .existing-item--format .existing-item__option,
.sl-survey-form-builder .existing-item--format .existing-item__option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sl-legacy-preview-sidebar .footer-rouded,
.sl-legacy-preview-sidebar .sl-fb-expand-footer {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px !important;
    background-color: #cccccc !important;
    border: 0 !important;
    border-radius: 0 0 8px 8px !important;
    text-align: right !important;
    display: block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #5f5f5f !important;
    line-height: 25px !important;
}

.sl-legacy-preview-sidebar .sl-fb-expand-footer span.expand-reduce,
.sl-legacy-preview-sidebar .footer-rouded span.expand-reduce {
    cursor: pointer !important;
    margin-right: 4px !important;
    vertical-align: middle !important;
}

.sl-legacy-preview-sidebar .sl-fb-expand-footer img.expand-reduce,
.sl-legacy-preview-sidebar .footer-rouded img.expand-reduce {
    cursor: pointer !important;
    width: 25px !important;
    height: auto !important;
    vertical-align: middle !important;
}

.sl-legacy-preview-sidebar #iframe_frm_builder {
    display: block !important;
    width: 100% !important;
    min-height: 1114px !important;
    border: 0 !important;
    background: #fff !important;
}

.sl-open-form-builder {
    display: inline-block;
    background: linear-gradient(to bottom, #008901 0%, #007a01 100%);
    color: #fff !important;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none !important;
    border-radius: 6px;
    padding: 8px 12px;
}

.sl-legacy-preview-sidebar .existing-item label[for="add_existing"] {
    color: #555755 !important;
    font-weight: normal !important;
    cursor: pointer !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Form Builder purchase success — legacy colorbox "Thank you for your order" */
.sl-fb-order-success-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10060 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 12px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    box-sizing: border-box !important;
}

.sl-fb-order-success-dialog {
    width: min(520px, 92vw) !important;
    min-height: 220px !important;
    padding: 24px 20px 28px !important;
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.sl-fb-order-success-body {
    margin: 0 !important;
    padding-top: 36px !important;
    color: #555755 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.sl-fb-order-success-body .nearly-done-title {
    color: #006201 !important;
    font-size: 25px !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
}

.sl-fb-order-success-ok,
.sl-fb-order-success-dialog .green-btn {
    display: inline-block !important;
    margin-top: 8px !important;
    min-width: 88px !important;
    padding: 8px 22px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #008901 !important;
    background-image: linear-gradient(to bottom, #008901 0%, #007a01 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    line-height: 1.3 !important;
}

/* Legacy "Use an existing form" modal (colorbox replacement) */
.sl-existing-form-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    background: rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

.sl-existing-form-dialog {
    position: relative;
    width: min(770px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.sl-existing-form-close {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #f5f5f5;
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.sl-existing-form-progress,
.sl-existing-form-status {
    margin: 0 0 12px;
    padding: 8px 10px;
    color: #555;
    font-size: 13px;
}

.sl-existing-form-progress img {
    vertical-align: middle;
    margin-right: 6px;
}

.sl-existing-form-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid #d0d0d0;
    margin: 8px 0 0;
}

.sl-existing-form-tab {
    border: 0;
    border-radius: 4px 4px 0 0;
    padding: 8px 12px;
    background: #888;
    color: #fff !important;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.sl-existing-form-tab.is-active {
    background: #008901;
}

.sl-existing-form-tabpanel {
    padding: 12px 4px 8px;
    min-height: 160px;
}

.sl-existing-form-empty {
    margin: 16px 0;
    color: #666;
    font-size: 14px;
}

.sl-existing-form-select {
    border: 0;
    border-radius: 4px;
    padding: 6px 14px;
    background: linear-gradient(to bottom, #008901 0%, #007a01 100%);
    color: #fff !important;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

.sl-existing-form-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    float: right !important;
    width: auto !important;
}

.sl-existing-form-link {
    border: 0;
    background: transparent;
    color: #008901;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.sl-existing-form-link--danger {
    color: #a00;
}

.sl-existing-form-back {
    border: 0;
    background: transparent;
    color: #008901;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin: 8px 0;
}

.sl-existing-form-preview h2 {
    margin: 8px 0 16px;
    font-size: 18px;
    color: #333;
}

.sl-existing-form-preview-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    color: #555;
    font-size: 14px;
}

.sl-legacy-preview-sidebar #iframe_container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.sl-legacy-preview-sidebar #iframe_frm_builder {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: #fff !important;
    overflow-x: hidden !important;
}

/* Filament sections → legacy SectionTitleBox look.
 * Filament v4 nests <section class="fi-section"> INSIDE <div class="fi-sc-section">.
 * Border only the outer wrapper — bordering both creates the "box under box" double ring. */
.fi-page:has(.sl-profile-editor) .fi-sc-section,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .SectionTitleBox,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-section-box {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: visible !important;
}

.fi-page:has(.sl-profile-editor) .fi-sc-section > .fi-section,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-sc-section .fi-section {
    margin: 0 !important;
    padding: 8px 12px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.fi-page:has(.sl-profile-editor) .fi-section-header-heading,
.fi-page:has(.sl-profile-editor) .fi-sc-section-header-heading {
    font-size: 18px !important;
    color: #009401 !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin: 0 0 4px !important;
}

/* Legacy orange ? help icon + Video Tutorial hover tooltip */
.fi-page:has(.sl-profile-editor) .sl-help-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 0;
}

.fi-page:has(.sl-profile-editor) .help-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: text-bottom;
}

.fi-page:has(.sl-profile-editor) .help-div {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    z-index: 60;
    padding: 9px 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    background: #1f2937;
    white-space: nowrap;
    box-sizing: border-box;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, .35), 0 4px 10px -4px rgba(15, 23, 42, .25);
}

.fi-page:has(.sl-profile-editor) .sl-help-wrap:hover .help-div,
.fi-page:has(.sl-profile-editor) .sl-help-wrap:focus-within .help-div {
    display: block;
    animation: slHelpTipIn .18s ease-out;
}

@keyframes slHelpTipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.fi-page:has(.sl-profile-editor) .help-div a,
.fi-page:has(.sl-profile-editor) .help-div a.sl-help-video {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color .15s ease;
}

.fi-page:has(.sl-profile-editor) .help-div a:hover,
.fi-page:has(.sl-profile-editor) .help-div a.sl-help-video:hover {
    color: #fdba74 !important;
}

/* Modern CSS caret replaces the legacy tooltip-arrow.png */
.fi-page:has(.sl-profile-editor) .help-div::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #1f2937;
}

.fi-page:has(.sl-profile-editor) .help-div .arrow-bg { display: none !important; }

/* Let the Form Builder help tooltip escape its card instead of being clipped */
.fi-page:has(.sl-profile-editor) .form-builder-box,
.fi-page:has(.sl-profile-editor) .sl-form-builder-panel,
.fi-page:has(.sl-profile-editor) .form-builder-title,
.fi-page:has(.sl-profile-editor) .fi-section:has(.form-builder-box),
.fi-page:has(.sl-profile-editor) .fi-section-content-ctn:has(.form-builder-box),
.fi-page:has(.sl-profile-editor) .fi-section-content:has(.form-builder-box),
.fi-page:has(.sl-profile-editor) .fi-fieldset:has(.form-builder-box) {
    overflow: visible !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-section-header,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-section-header-text-ctn {
    overflow: visible !important;
}

/* Share icons — small preview sprites (not full 88px glossy tiles) */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .shareNav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    text-align: left;
    clear: both;
    margin: 6px 0 4px;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .shareNav a {
    width: 36px;
    height: 36px;
    text-indent: -99999px;
    margin: 0;
    display: inline-block;
    overflow: hidden;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 36px 36px !important;
    border-radius: 6px;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .shareNav a.shareFB {
    background-image: url('/images/facebook-icon.jpg');
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .shareNav a.shareTWT {
    background-image: url('/images/twitter-icon.jpg');
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .shareNav a.shareEML {
    background-image: url('/images/email-grn-icon.jpg');
}

/* Hide auto labels that duplicate section titles (e.g. Code Profile Name). */
.fi-page:has(.sl-profile-editor) .fi-fo-field-wrp-label:has(+ * input[id$="code_profile_name"]),
.fi-page:has(.sl-profile-editor) label.fi-fo-field-wrp-label:empty,
.fi-page:has(.sl-profile-editor) .fi-fo-placeholder-label {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Left form column — pin-perfect legacy .form-view / .text-fi (NOT form builder,
 * NOT select/dropboxes)
 * ------------------------------------------------------------------------- */
.fi-page:has(.sl-profile-editor) .sl-add-form-left {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    color: #555755 !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-field-wrp-label,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-field-wrp-label span,
.fi-page:has(.sl-profile-editor) .sl-add-form-left label.fi-fo-field-wrp-label,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fieldset-label,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-checkbox-list-option-label,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-radio-list-option-label {
    display: block !important;
    font-weight: normal !important;
    color: #727171 !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 0 6px !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-field-wrp-hint,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-field-wrp-helper-text,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .hint-info,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .set-activation-period {
    font-size: 10px !important;
    color: #c85000 !important;
    font-weight: normal !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Strip Filament input wrapper chrome — apply legacy inset field look */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-input-wrp:not(:has(select)):not(:has(.fi-select-input)) {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    outline: 0 !important;
    min-height: 36px !important;
    max-width: 456px !important;
    width: 100% !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-input-wrp:not(:has(select)):not(:has(.fi-select-input)):focus-within {
    border-color: #009401 !important;
    box-shadow: 0 0 0 1px rgba(0, 148, 1, .25) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* Date pickers — same themed wrapper as text inputs (non-native calendar). */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker.fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-input-wrp.fi-fo-date-time-picker {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    min-height: 36px !important;
    max-width: 456px !important;
    width: 100% !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker input.fi-input,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker .fi-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #555755 !important;
    min-height: 36px !important;
    padding: 7px 12px !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker .fi-input-wrp-suffix,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker .fi-icon-btn {
    color: #008901 !important;
}

/* Activation Clear — ScanLink green outline (not basic gray Filament). */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-clear-activation-btn.fi-btn,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-ac .sl-clear-activation-btn,
.fi-page:has(.sl-profile-editor) .sl-add-form-left button.sl-clear-activation-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 72px !important;
    max-width: none !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 4px 0 0 !important;
    padding: 0 14px !important;
    border: 1px solid #008901 !important;
    border-radius: 6px !important;
    background: #fff !important;
    background-image: none !important;
    color: #008901 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-clear-activation-btn.fi-btn:hover,
.fi-page:has(.sl-profile-editor) .sl-add-form-left button.sl-clear-activation-btn:hover {
    background: #008901 !important;
    color: #fff !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-clear-activation-btn.fi-btn *,
.fi-page:has(.sl-profile-editor) .sl-add-form-left button.sl-clear-activation-btn * {
    color: inherit !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-input:not(select):not(.fi-select-input),
.fi-page:has(.sl-profile-editor) .sl-add-form-left input.fi-input:not([type='checkbox']):not([type='radio']):not([type='file']),
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-textarea,
.fi-page:has(.sl-profile-editor) .sl-add-form-left textarea.fi-textarea {
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    color: #555755 !important;
    padding: 7px 12px !important;
    min-height: 36px !important;
    line-height: 22px !important;
    width: 100% !important;
    max-width: 456px !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-textarea,
.fi-page:has(.sl-profile-editor) .sl-add-form-left textarea.fi-textarea {
    min-height: 64px !important;
    height: auto !important;
    resize: none !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
}

/* Half-width CONTACT / TELEPHONE / weblink pairs */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-grid:has(> .fi-grid-col) > .fi-grid-col {
    min-width: 0;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-field-wrp[style*='--cols-lg: calc(6'] .fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sm\:fi-grid-col-span-6 .fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-add-form-left [class*='col-span-6'] .fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-grid-col[style*='span 6'] .fi-input-wrp {
    max-width: 206px !important;
}

/* Code Profile Name + activation dates — same right edge (fill grid, no 206px half-width cap). */
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-section-content,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-sc-section-content,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-section-content-ctn,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-sc-section-content-ctn {
    max-width: 456px !important;
    width: 100% !important;
}

.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-fo-date-time-picker.fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-input-wrp.fi-fo-date-time-picker,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-fo-field-wrp[style*='--cols-lg: calc(6'] .fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .sm\:fi-grid-col-span-6 .fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section [class*='col-span-6'] .fi-input-wrp,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-grid-col[style*='span 6'] .fi-input-wrp {
    max-width: 100% !important;
    width: 100% !important;
}

.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-fo-field-wrp,
.fi-page:has(.sl-profile-editor) .sl-code-profile-name-section .fi-grid-col {
    min-width: 0 !important;
}

/* Flatten Filament repeater / file upload cards to legacy list feel */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-repeater-item,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-repeater-item,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-file-upload,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-rich-editor {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 6px 0 !important;
    margin: 0 0 12px !important;
    border-radius: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-repeater-header,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-repeater-item-header {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 8px !important;
}

/* ===== Contacts manager (modal add/edit + list) — all plant/location/product/procedure ===== */
.fi-page:has(.sl-profile-editor) .sl-contacts-title {
    margin: 10px 0 2px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.3 !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-subtitle {
    margin: 0 0 10px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    line-height: 1.35 !important;
}

.fi-page:has(.sl-profile-editor) .sl-contacts-repeater.fi-fo-repeater,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-contacts-repeater {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide inline field bodies — editing is modal-only. */
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-content,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-sc-component:has(.fi-input),
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-field-wrp,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-section-content,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater [x-bind\:class*='isCollapsed'] .fi-fo-repeater-item-content,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-collapsed .fi-fo-repeater-item-content {
    display: none !important;
}

/* Contact row card */
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-contacts-repeater .fi-fo-repeater-item {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
    overflow: hidden !important;
}

.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-contacts-repeater .fi-fo-repeater-item-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    background: #fafafa !important;
    border: 0 !important;
    cursor: default !important;
}

/* Collapse chevron is already disabled in PHP (not collapsible).
   Do NOT hide gray icon buttons here — that also hides Edit. */
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header-collapsible-actions,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header-collapse-action,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header-expand-action {
    display: none !important;
}

/* Ensure edit + delete icon buttons stay visible side by side with clear gap. */
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header-end-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header-end-actions > li {
    display: inline-flex !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header-end-actions > li:first-child {
    margin-left: 0 !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-fo-repeater-item-actions,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-ac {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-fo-repeater-item-label,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header h4,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-fo-repeater-item-header-label {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-icon-btn,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header button.fi-icon-btn {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    min-width: 32px !important;
    margin: 0 4px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    background-image: none !important;
    color: #4b5563 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header-end-actions > li:first-child .fi-icon-btn {
    margin-left: 0 !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header-end-actions > li:last-child .fi-icon-btn {
    margin-right: 0 !important;
}

/* Clickable document titles in the list (open file in new tab). */
.fi-page:has(.sl-profile-editor) .sl-documents-repeater a.sl-doc-title-link {
    color: #008901 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
}
.fi-page:has(.sl-profile-editor) .sl-documents-repeater a.sl-doc-title-link:hover {
    color: #006201 !important;
    border-bottom-color: #008901;
}
.fi-page:has(.sl-profile-editor) .sl-documents-repeater .sl-doc-title-text {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

/* Clickable video titles in the list (open YouTube in new tab). */
.fi-page:has(.sl-profile-editor) .sl-videos-repeater a.sl-video-title-link {
    color: #008901 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
}
.fi-page:has(.sl-profile-editor) .sl-videos-repeater a.sl-video-title-link:hover {
    color: #006201 !important;
    border-bottom-color: #008901;
}
.fi-page:has(.sl-profile-editor) .sl-videos-repeater .sl-video-title-text {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-icon-btn.fi-color-primary,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-icon-btn.fi-color-primary:hover {
    border-color: #86efac !important;
    color: #008901 !important;
    background: #f0fdf4 !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-icon-btn:hover {
    border-color: #008901 !important;
    color: #008901 !important;
    background: #f0fdf4 !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-icon-btn.fi-color-danger,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-item-header .fi-icon-btn.fi-color-danger:hover {
    border-color: #fecaca !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
}

/* Add contact / Add more CTA — bottom-right of each repeater section */
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater > .fi-fo-repeater-actions,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-add,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-contacts-repeater .fi-btn.fi-color-primary:not([type='submit']) {
    margin-top: 4px !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-repeater-add,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-repeater-actions,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-add,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater > .fi-fo-repeater-actions,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-add,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater > .fi-fo-repeater-actions {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    text-align: right !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-contacts-repeater .fi-btn.fi-color-primary:not([type='submit']),
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-actions .fi-btn.fi-color-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 128px !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 4px 0 0 !important;
    padding: 0 16px !important;
    border: 1px solid #006201 !important;
    border-radius: 6px !important;
    background: #008901 !important;
    background-image: linear-gradient(to bottom, #008901 0%, #007a01 100%) !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-contacts-repeater .fi-btn.fi-color-primary:not([type='submit']):hover,
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-fo-repeater-actions .fi-btn.fi-color-primary:hover {
    background: #00a001 !important;
    background-image: linear-gradient(to bottom, #00a001 0%, #008901 100%) !important;
    color: #fff !important;
}
.fi-page:has(.sl-profile-editor) .sl-contacts-repeater .fi-btn.fi-color-primary * {
    color: #fff !important;
}

/* Plain inline repeaters (Additional User Access, Recipients Email, Document Upload):
   green + plus "Add / Add Another" button, matching the contacts/pictures repeaters.
   Needed because the generic left-form rule below forces every button white. */
.fi-page:has(.sl-profile-editor) .sl-green-add-repeater .fi-fo-repeater-add,
.fi-page:has(.sl-profile-editor) .sl-green-add-repeater > .fi-fo-repeater-actions {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    text-align: right !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-green-add-repeater .fi-btn.fi-color-primary:not([type='submit']),
.fi-page:has(.sl-profile-editor) .sl-green-add-repeater .fi-fo-repeater-actions .fi-btn.fi-color-primary,
.fi-page:has(.sl-profile-editor) .sl-green-add-repeater .fi-fo-repeater-add .fi-btn.fi-color-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 128px !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 4px 0 0 !important;
    padding: 0 16px !important;
    border: 1px solid #006201 !important;
    border-radius: 6px !important;
    background: #008901 !important;
    background-image: linear-gradient(to bottom, #008901 0%, #007a01 100%) !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
}
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-green-add-repeater .fi-btn.fi-color-primary:not([type='submit']):hover,
.fi-page:has(.sl-profile-editor) .sl-green-add-repeater .fi-fo-repeater-actions .fi-btn.fi-color-primary:hover,
.fi-page:has(.sl-profile-editor) .sl-green-add-repeater .fi-fo-repeater-add .fi-btn.fi-color-primary:hover {
    background: #00a001 !important;
    background-image: linear-gradient(to bottom, #00a001 0%, #008901 100%) !important;
    color: #fff !important;
}
.fi-page:has(.sl-profile-editor) .sl-green-add-repeater .fi-btn.fi-color-primary * {
    color: #fff !important;
}

/* Modal form polish */
.fi-modal-window:has(.fi-fo-field) .fi-modal-header-heading {
    font-family: Arial, Helvetica, sans-serif;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-btn:not(.fi-color-danger):not([type='submit']),
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-ac-btn-action:not(.fi-color-danger):not([type='submit']) {
    background: #fff !important;
    background-image: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%) !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 6px !important;
    color: #555755 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-transform: none !important;
    box-shadow: none !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    line-height: 1.25 !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-btn.fi-color-danger,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-icon-btn.fi-color-danger {
    color: #b00000 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Centered Save-only CTA at bottom of left form (Cancel removed). */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-form-actions,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-form-actions .fi-ac {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 456px !important;
    margin: 10px 0 16px !important;
    padding: 0 !important;
    text-align: center !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-form-actions .fi-btn {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    padding: 8px 18px !important;
    height: auto !important;
    min-height: 36px !important;
    line-height: 1.2 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-transform: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-form-actions .fi-btn.fi-color-primary,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-form-actions button[type='submit'],
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-btn[type='submit'] {
    min-width: 132px !important;
    color: #fff !important;
    border: 0 !important;
    background: #008901 !important;
    background-image: linear-gradient(to bottom, #008901 0%, #007a01 100%) !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-form-actions .fi-btn.fi-color-primary *,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-form-actions button[type='submit'] *,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-btn[type='submit'] * {
    color: #fff !important;
}

/* Compact radios / checkboxes spacing (keep native controls; no Uniform dropboxes) */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-checkbox,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-radio {
    margin: 4px 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-field-wrp {
    margin-bottom: 8px !important;
    gap: 0.25rem !important;
}

/* Soften section header chrome (no Filament divider bars) */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-section-header,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-sc-section-header {
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 4px !important;
    margin: 0 0 2px !important;
    box-shadow: none !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-section-content,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-sc-section-content {
    padding: 2px 0 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-section-content-ctn,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-sc-section-content-ctn {
    gap: 0.45rem !important;
}

/* Filament draws a border-top on the content container when a section has a
 * header — a stray divider line that sits right on top of the first input.
 * Remove it so each section is one clean card, no extra lines (theme standard). */
.fi-page:has(.sl-profile-editor) .fi-section-content-ctn,
.fi-page:has(.sl-profile-editor) .fi-sc-section-content-ctn,
.fi-page:has(.sl-profile-editor) .fi-section-has-header > .fi-section-content-ctn {
    border-top: 0 !important;
    border: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-grid {
    row-gap: 0.5rem !important;
    column-gap: 0.75rem !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-section-content .fi-fo-field-wrp:last-child,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-sc-section-content .fi-fo-field-wrp:last-child {
    margin-bottom: 4px !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-section-content .fi-btn,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-section-content .fi-ac {
    margin-top: 6px !important;
    margin-bottom: 2px !important;
}

/* File upload / dropzone — compact. Previously padded for "breathing room",
 * which left dead space above/below the image preview and stretched the form.
 * Trim padding/margins to only what the dropzone needs. */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-file-upload,
.fi-page:has(.sl-profile-editor) .sl-add-form-left [class*='file-upload'] {
    margin-top: 2px !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .filepond--root {
    margin: 2px 0 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .filepond--panel-root,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-file-upload-input-ctn {
    min-height: 0 !important;
    padding: 4px !important;
}

/* FilePond credits strip is pure chrome — it adds a dead line under the preview. */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .filepond--credits {
    display: none !important;
}

/* Logo upload — image-only thumbnail + remove.
 * Empty state: normal full-width dropzone.
 * With a file: shrink FilePond to the image box only (no full-width bar /
 * filename gutter that creates empty space left/right of the logo). */
.fi-page:has(.sl-profile-editor) .sl-logo-section > .fi-section,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-logo-section .fi-section {
    padding: 10px 12px 12px !important;
}

.fi-page:has(.sl-profile-editor) .sl-logo-section .fi-section-header-heading {
    margin-bottom: 6px !important;
}

.fi-page:has(.sl-profile-editor) .sl-logo-section .fi-fo-field-label,
.fi-page:has(.sl-profile-editor) .sl-logo-section .fi-fo-field-wrp-label,
.fi-page:has(.sl-profile-editor) .sl-logo-section label.fi-fo-field-wrp-label,
.fi-page:has(.sl-profile-editor) .sl-logo-section .fi-fo-field-label-ctn {
    margin: 0 0 8px !important;
    line-height: 1.35 !important;
    color: #6b7280 !important;
}

.sl-logo-upload,
.sl-add-form-left .sl-logo-upload.fi-fo-file-upload {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.sl-logo-upload .fi-fo-file-upload-input-ctn {
    margin: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.sl-logo-upload .filepond--root {
    margin: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.sl-logo-upload .filepond--drop-label,
.sl-logo-upload .filepond--drop-label label {
    min-height: 48px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #6b7280 !important;
}

/* Uploaded: image tile only (~76×76, +5% vs prior 72) + × — clip FilePond's
 * leftover bottom chrome (empty gray under the image after file-info is hidden). */
.sl-logo-upload .filepond--root:has(.filepond--item) {
    width: 76px !important;
    max-width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    overflow: hidden !important;
    border-radius: 8px;
}

.sl-logo-upload .filepond--root:has(.filepond--item) .filepond--panel-root {
    background-color: #f3f4f6;
}

.sl-logo-upload .filepond--root:has(.filepond--item) .filepond--image-preview-wrapper,
.sl-logo-upload .filepond--root:has(.filepond--item) .filepond--image-preview {
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    background-color: #f3f4f6 !important;
}

.sl-logo-upload .filepond--image-preview {
    background-color: #f3f4f6 !important;
}

/* Filename / size / status — hide so they don't reserve bottom/side space */
.sl-logo-upload .filepond--root:has(.filepond--item) .filepond--file-info,
.sl-logo-upload .filepond--root:has(.filepond--item) .filepond--file-status {
    display: none !important;
}

.sl-logo-upload .filepond--action-remove-item {
    width: 22px !important;
    height: 22px !important;
    box-shadow: none !important;
    background-color: #fff !important;
    color: #6b7280 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
}

.sl-logo-upload .filepond--action-remove-item:hover,
.sl-logo-upload .filepond--action-remove-item:focus-visible {
    color: #b91c1c !important;
    border-color: #fecaca !important;
    background-color: #fef2f2 !important;
    outline: none;
}

/* Remove (x) button sits top-RIGHT on every upload preview. FilePond defaults it to the
   left, which put it over the top-left corner of picture previews while the logo uploads
   showed it on the right — the same control in two different places. */
.sl-logo-upload .filepond--action-remove-item,
.fi-page:has(.sl-profile-editor) .fi-fo-file-upload .filepond--action-remove-item {
    left: auto !important;
    right: 0.5em !important;
}

/* ===== Pictures repeater — compact rows (less padding, shorter preview) ===== */
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater.fi-fo-repeater,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-pictures-repeater {
    margin: 0 !important;
    padding: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-item,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-pictures-repeater .fi-fo-repeater-item {
    margin: 0 0 8px !important;
    padding: 6px 0 8px !important;
    border: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-item:last-of-type {
    border-bottom: 0 !important;
    margin-bottom: 4px !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-item-header,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-pictures-repeater .fi-fo-repeater-item-header {
    min-height: 0 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-item-content {
    margin: 0 !important;
    padding: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-field-wrp,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-sc-component {
    margin: 0 0 6px !important;
    padding: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-field-wrp:last-child,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-sc-component:last-child {
    margin-bottom: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-field-wrp-label,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-field-label,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater label.fi-fo-field-wrp-label {
    margin: 0 0 3px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-file-upload,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-pictures-repeater .fi-fo-file-upload {
    margin: 0 !important;
    padding: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--root {
    margin: 0 !important;
    min-height: 0 !important;
    font-size: 12px !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--panel-root,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-file-upload-input-ctn {
    min-height: 0 !important;
    padding: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--drop-label,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--drop-label label {
    min-height: 48px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--item {
    margin: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--list.filepond--list {
    left: 0 !important;
    right: 0 !important;
}

/* Keep image preview short — avoid tall black empty bands around small images. */
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--image-preview-wrapper,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--image-preview {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--file-info,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--file-status {
    font-size: 11px !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-input-wrp {
    margin-top: 0 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater > .fi-fo-repeater-actions,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-add {
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

/* Upload picture / Add more — same green CTA as Add contact */
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-actions .fi-btn,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-pictures-repeater .fi-fo-repeater-add .fi-btn,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-pictures-repeater .fi-btn.fi-color-primary:not([type='submit']) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 128px !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 4px 0 0 !important;
    padding: 0 16px !important;
    border: 1px solid #006201 !important;
    border-radius: 6px !important;
    background: #008901 !important;
    background-image: linear-gradient(to bottom, #008901 0%, #007a01 100%) !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
}
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-actions .fi-btn:hover,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-pictures-repeater .fi-fo-repeater-add .fi-btn:hover {
    background: #00a001 !important;
    background-image: linear-gradient(to bottom, #00a001 0%, #008901 100%) !important;
    color: #fff !important;
}
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-actions .fi-btn *,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .fi-fo-repeater-add .fi-btn * {
    color: #fff !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-rich-editor,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .ck-editor,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .ck.ck-editor {
    margin-top: 6px !important;
}

.fi-page:has(.sl-profile-editor) .sl-add-form-left .ck-editor__editable,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .ck-content {
    min-height: 120px !important;
    padding: 10px 12px !important;
}

/* QR download column — match legacy green/gray btn pair (same size/spacing). */
.sl-qr-block .sl-qr-actions {
    flex: 0 0 180px;
    width: 180px;
    margin: 0;
    padding: 0;
    float: none;
}

.sl-legacy-preview-sidebar .sl-qr-download-select {
    display: block;
    width: 100%;
    height: 36px;
    margin: 0 0 10px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    color: #555755;
    box-sizing: border-box;
    appearance: auto;
    box-shadow: none;
}
.sl-legacy-preview-sidebar .sl-qr-download-select:focus {
    border-color: #009401;
    outline: 0;
    box-shadow: 0 0 0 1px rgba(0, 148, 1, .25);
}

.button-section .gray-btn,
.sl-legacy-preview-sidebar .gray-btn,
.sl-legacy-preview-sidebar .green-btn,
.sl-legacy-preview-sidebar .sl-qr-download-btn {
    display: block;
    width: 100%;
    height: 42px;
    line-height: 40px;
    padding: 0 12px;
    margin: 0 0 10px;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.sl-legacy-preview-sidebar .green-btn,
.sl-legacy-preview-sidebar .sl-qr-download-btn {
    background: #008901 !important;
    background-image: linear-gradient(to bottom, #008901 0%, #007a01 100%) !important;
    color: #fff !important;
    border: 1px solid #006201 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
.sl-legacy-preview-sidebar .green-btn:hover,
.sl-legacy-preview-sidebar .sl-qr-download-btn:hover {
    background: #00a001 !important;
    background-image: linear-gradient(to bottom, #00a001 0%, #008901 100%) !important;
}

/* Kill any leftover bottom border under QR actions before Form Builder. */
.sl-qr-block.form-view1,
.sl-legacy-preview-sidebar .sl-qr-block {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.sl-legacy-preview-sidebar .sl-qr-block + .form-builder-box,
.sl-legacy-preview-sidebar .sl-qr-block + .sl-form-builder-panel {
    margin-top: 14px !important;
    border-top: 1px solid #cccccc !important;
}

.button-section .gray-btn,
.sl-legacy-preview-sidebar .gray-btn {
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 100%);
    color: #484747 !important;
    border: 1px solid #cfcfcf;
}

.sl-legacy-preview-sidebar .sl-qr-actions .green-btn:last-child,
.sl-legacy-preview-sidebar .sl-qr-actions .gray-btn:last-child,
.sl-legacy-preview-sidebar .sl-qr-actions .sl-qr-download-btn:last-child {
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .sl-add-form-left,
    .sl-add-form-right {
        float: none;
        width: 100%;
        padding-right: 0;
    }

    .sl-legacy-preview-sidebar .iphone-preview {
        margin: 0 auto;
        float: none;
    }
}

/* Hidden until opened — never block sidebar/table clicks while closed */
.sl-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.sl-preview-overlay.sl-preview-overlay--open {
    display: flex !important;
}

.sl-preview-modal {
    position: relative;
    background: #fff;
    max-width: 920px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.sl-preview-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

.sl-preview-heading {
    font-size: 18px;
    font-weight: bold;
    color: #008c00;
    margin: 0 0 0.75rem;
    padding-right: 1.5rem;
}

.sl-preview-desc {
    font-size: 13px;
    color: #444;
    margin: 0 0 1rem;
    line-height: 1.45;
}

.sl-preview-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ── ScanLink themed alert dialog ───────────────────────────────── */
.sl-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sl-alert-dialog {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid #2a2a2a;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.sl-alert-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #333;
    color: #fff;
    padding: 10px 14px;
    border-bottom: 3px solid #008901;
}
.sl-alert-dialog__brand {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sl-alert-dialog__close {
    border: 0;
    background: transparent;
    color: #ccc;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.sl-alert-dialog__close:hover {
    color: #fff;
}
.sl-alert-dialog__body {
    padding: 28px 24px 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    text-align: center;
    font-weight: 500;
}
.sl-alert-dialog__foot {
    display: flex;
    justify-content: center;
    padding: 0 24px 22px;
}
.sl-alert-dialog__ok {
    display: inline-block;
    min-width: 110px;
    background: linear-gradient(to bottom, #008901 0%, #007a01 100%);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    border: 1px solid #006201;
    border-radius: 6px;
    padding: 10px 28px;
    cursor: pointer;
    letter-spacing: 0.04em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.sl-alert-dialog__ok:hover {
    background: linear-gradient(to bottom, #00a001 0%, #008901 100%);
}

@media (max-width: 1100px) {
    .sl-mastercode-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .sl-action-bar {
        justify-content: flex-start;
    }

    .sl-sub-navigation {
        float: none;
    }
}

.sl-mastercode-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0 0 0.75rem;
    padding: 0.35rem 0 0.65rem;
    border-bottom: 1px solid #e5ebe5;
}

.sl-action-bar {
    clear: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    margin-left: auto;
}

/* Admin Global Settings — legacy single-table form */
.fi-page:has(.sl-gs) .fi-header-heading:empty {
    display: none !important;
}

.fi-page:has(.sl-gs) .fi-header:not(:has(.fi-header-heading:not(:empty))) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.fi-page:has(.sl-fslog) .fi-header:not(:has(.sl-mastercode-heading)):not(:has(.fi-header-heading:not(:empty))),
.fi-page:has(.sl-vlog) .fi-header:not(:has(.sl-mastercode-heading)):not(:has(.fi-header-heading:not(:empty))),
.fi-page:has(.sl-sa) .fi-header:not(:has(.sl-mastercode-heading)):not(:has(.fi-header-heading:not(:empty))),
.fi-page:has(.sl-ol) .fi-header:not(:has(.sl-mastercode-heading)):not(:has(.fi-header-heading:not(:empty))) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fi-page:has(.sl-fslog) .fi-header-heading:empty,
.fi-page:has(.sl-vlog) .fi-header-heading:empty,
.fi-page:has(.sl-sa) .fi-header-heading:empty,
.fi-page:has(.sl-ol) .fi-header-heading:empty {
    display: none !important;
}

.fi-page:has(.sl-fslog) .fi-page-content,
.fi-page:has(.sl-fslog) .fi-page-main-ctn,
.fi-page:has(.sl-vlog) .fi-page-content,
.fi-page:has(.sl-vlog) .fi-page-main-ctn,
.fi-page:has(.sl-sa) .fi-page-content,
.fi-page:has(.sl-sa) .fi-page-main-ctn,
.fi-page:has(.sl-ol) .fi-page-content,
.fi-page:has(.sl-ol) .fi-page-main-ctn {
    max-width: none !important;
    width: 100% !important;
}

.fi-page:has(.sl-fslog) .sl-mastercode-toolbar,
.fi-page:has(.sl-vlog) .sl-mastercode-toolbar,
.fi-page:has(.sl-sa) .sl-mastercode-toolbar,
.fi-page:has(.sl-ol) .sl-mastercode-toolbar {
    margin-bottom: 1rem;
}

/* Compact Filament page header under the legacy toolbar (no duplicate CTA row). */
.fi-page:has(.sl-mastercode-toolbar) > .fi-header,
.fi-page:has(.sl-mastercode-toolbar) .fi-header:has(.sl-mastercode-heading) {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    gap: 0.35rem !important;
}

.fi-page:has(.sl-mastercode-toolbar) .fi-header-heading {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
}

.fi-page:has(.sl-mastercode-toolbar) .fi-header-actions:empty,
.fi-page:has(.sl-mastercode-toolbar) .fi-ac:empty {
    display: none !important;
}

.sl-analytics-btn {
    background-image: url('/images/multiple_code_analytic_btn.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: transparent !important;
    width: 142px;
    height: 44px;
    padding: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
}

.sl-add-code-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #008901 0%, #007a01 100%);
    color: #fff !important;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1px solid #006201;
    border-radius: 6px;
    padding: 0.55rem 1.1rem;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.sl-add-code-btn:hover {
    background: linear-gradient(to bottom, #00a001 0%, #008901 100%);
    color: #fff !important;
}

/* Header action buttons — match legacy green CTAs */
.fi-resource-profiles .fi-header-actions .fi-btn,
.fi-page:has(.sl-mastercode-toolbar) .fi-header-actions .fi-ac-btn-action {
    background: linear-gradient(to bottom, #008901 0%, #007a01 100%) !important;
    color: #fff !important;
    border: 1px solid #006201 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px !important;
}

/* Master Code List row tools — compact, vertically centered */
.fi-page:has(.sl-mastercode-toolbar) .fi-ta-actions,
.fi-resource-profiles .fi-ta-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    min-height: 28px !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.fi-page:has(.sl-mastercode-toolbar) .fi-ta-actions .fi-ac-icon-btn-action,
.fi-page:has(.sl-mastercode-toolbar) .fi-ta-actions .fi-icon-btn,
.fi-resource-profiles .fi-ta-actions .fi-icon-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #333 !important;
}

.fi-page:has(.sl-mastercode-toolbar) .fi-ta-actions .fi-icon-btn svg,
.fi-resource-profiles .fi-ta-actions .fi-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
}

.fi-resource-profiles .fi-ta-actions .fi-icon-btn {
    color: #444;
}

/* === FORCE legacy profile editor: form left + iPhone right (v23) === */

/* Let the page content use full width like old scanlink-container */
.fi-page:has(.sl-profile-editor) .fi-page-content,
.fi-page:has(.sl-profile-editor) .fi-page-main,
.fi-page:has(.sl-profile-editor) .fi-main,
.fi-resource-profiles:has(.sl-profile-editor) .fi-page-content {
    max-width: none !important;
    width: 100% !important;
}

.fi-page:has(.sl-profile-editor) .fi-page-content {
    display: block !important;
}

.sl-profile-editor {
    width: 970px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    display: block !important;
    clear: both !important;
    /* CSS grid is more reliable than floats against Filament wrappers */
    display: grid !important;
    grid-template-columns: 500px 450px !important;
    grid-template-areas: "form preview" !important;
    column-gap: 20px !important;
    align-items: start !important;
}

/* VOC / Exhibit / Misc CKEditor toolbars/dropdowns must not be clipped */
.sl-profile-editor--voc,
.sl-profile-editor--exhibit,
.sl-profile-editor--misc {
    overflow: visible !important;
}

.sl-profile-editor .add-form-left,
.sl-profile-editor .sl-add-form-left {
    grid-area: form !important;
    float: none !important;
    width: 500px !important;
    max-width: 500px !important;
    padding-right: 0 !important;
    display: block !important;
}

.sl-profile-editor .add-form-right,
.sl-profile-editor .sl-add-form-right {
    grid-area: preview !important;
    float: none !important;
    width: 450px !important;
    max-width: 450px !important;
    margin: 12px 0 0 !important;
    display: block !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Kill Filament's top-level 2-col section masonry — stack SectionTitleBox cards */
.sl-add-form-left > form > .fi-sc.fi-grid,
.sl-add-form-left > .fi-sc.fi-grid,
.sl-add-form-left .fi-sc:not(.fi-section-content):not(.fi-sc-section) > .fi-sc.fi-grid,
.sl-profile-editor .sl-add-form-left .fi-sc.fi-grid:not(.fi-section-content) {
    --cols-default: minmax(0, 1fr) !important;
    --cols-lg: minmax(0, 1fr) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
}

/* Each section card spans full left column */
.sl-add-form-left > .fi-sc > .fi-grid-col,
.sl-add-form-left form > .fi-sc > .fi-grid-col,
.sl-add-form-left .fi-sc.fi-grid:not(.fi-section-content) > .fi-grid-col {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.sl-legacy-preview-sidebar .iphone-preview {
    width: 340px !important;
    height: 1001px !important;
    padding: 133px 36px 55px 32px !important;
    background: url('/images/iphone.png') no-repeat left top !important;
    float: left !important;
    box-sizing: content-box !important;
    display: block !important;
}

.sl-legacy-preview-sidebar .iphone-preview-container {
    width: 320px !important;
    height: 882px !important;
    overflow: auto !important;
    background: #fff !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sl-legacy-preview-sidebar .iphone-preview-container::-webkit-scrollbar {
    display: none;
}

/* Nested section: outer .fi-sc-section keeps the card border; inner .fi-section is flat. */
.fi-page:has(.sl-profile-editor) .fi-sc-section,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .SectionTitleBox,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .sl-section-box {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
}

.fi-page:has(.sl-profile-editor) .fi-sc-section > .fi-section,
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-sc-section .fi-section {
    margin: 0 !important;
    padding: 8px 12px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
}

.fi-page:has(.sl-profile-editor) .fi-section-header-heading,
.fi-page:has(.sl-profile-editor) .fi-sc-section-header-heading {
    font-size: 18px !important;
    color: #009401 !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Inputs — superseded by .sl-add-form-left legacy .text-fi block above.
 * Keep a light fallback for any field outside left column (rare). */
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-input:not(select):not(.fi-select-input),
.fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-textarea {
    background: transparent !important;
}

@media (max-width: 1100px) {
    .sl-profile-editor {
        display: block !important;
        width: 100% !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }

    .sl-profile-editor .add-form-left,
    .sl-profile-editor .sl-add-form-left,
    .sl-profile-editor .add-form-right,
    .sl-profile-editor .sl-add-form-right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-area: auto !important;
    }
}

/* ---------------------------------------------------------------------------
 * Portal Edit Profile (legacy profile/index layout)
 * ------------------------------------------------------------------------- */
.sl-edit-account {
    max-width: 980px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sl-edit-account__profile,
.sl-edit-account__col,
.sl-edit-account__users {
    width: 100%;
}

.sl-edit-account__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

.sl-edit-account__row--single {
    grid-template-columns: minmax(0, 470px);
}

.sl-edit-account__col {
    display: flex;
    min-width: 0;
}

.sl-edit-account__form {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
}

.sl-edit-account__form > .fi-sc,
.sl-edit-account__form > .fi-section,
.sl-edit-account__form > .fi-sc-section {
    flex: 1 1 auto;
}

.sl-edit-account .fi-section,
.sl-edit-account .fi-sc-section {
    margin: 0 !important;
    height: 100%;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.06) !important;
    background: #fff !important;
}

.sl-edit-account .fi-section-header-heading,
.sl-edit-account .fi-sc-section-header-heading {
    color: #006201 !important;
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
}

.sl-edit-account .fi-section-content,
.sl-edit-account .fi-sc-section-content {
    padding-bottom: 0.75rem !important;
}

.sl-edit-account__actions {
    margin-top: 0.75rem;
    padding: 0 0.15rem;
}

/* Filament puts the ring on .fi-input-wrp — do NOT also border the inner input
   (that creates the broken-corner / double-border look). */
.sl-edit-account .fi-input-wrp {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    --tw-ring-inset: /*!*/;
    --tw-ring-offset-width: 0px !important;
    --tw-ring-offset-color: transparent !important;
    --tw-ring-color: transparent !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    outline: none !important;
}

.sl-edit-account .fi-input-wrp:focus-within {
    border-color: #008c00 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.sl-edit-account .fi-input,
.sl-edit-account .fi-textarea,
.sl-edit-account input[type='text'],
.sl-edit-account input[type='email'],
.sl-edit-account input[type='password'],
.sl-edit-account input[type='number'] {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Manage User — tighter header, no empty toolbar gap */
.sl-edit-account__users .fi-ta-header {
    gap: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.sl-edit-account__users .fi-ta-header-heading {
    color: #006201 !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.sl-edit-account__users .fi-ta-header-toolbar:empty,
.sl-edit-account__users .fi-ta-actions:empty {
    display: none !important;
}

.sl-edit-account__users .fi-ta-ctn {
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    background: #fff !important;
    overflow: hidden;
}

.sl-edit-account__users .fi-ta-table th {
    background: #f8f8f8 !important;
    font-size: 13px !important;
}

.sl-edit-account__users .fi-ta-table th,
.sl-edit-account__users .fi-ta-table td {
    border-right: 1px solid #e5ebe5 !important;
    border-bottom: 1px solid #e5ebe5 !important;
    padding: 10px 12px !important;
}

@media (max-width: 900px) {
    .sl-edit-account__row {
        grid-template-columns: 1fr;
    }
}

/* Manage User — legacy edit.png tool icon */
.sl-manage-user-edit-icon {
    display: inline-block;
    vertical-align: middle;
}

/* Edit User modal — match legacy colorbox layout */
.sl-edit-user-modal .fi-modal-header-heading {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #333 !important;
}

.sl-edit-user-modal .fi-modal-content {
    max-height: min(70vh, 620px);
    overflow-y: auto;
}

.sl-edit-user-modal .fi-fo-field-wrp {
    gap: 0.35rem !important;
}

.sl-edit-user-modal .fi-input-wrp {
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    max-width: 235px;
}

.sl-edit-user-modal .fi-btn[type='submit'],
.sl-edit-user-modal .fi-modal-footer .fi-btn:not(.fi-color-gray) {
    background-color: #008c00 !important;
    border-color: #008c00 !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    padding-inline: 1.25rem !important;
}

.sl-edit-user-perms {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    align-items: end;
}

.sl-edit-user-perms .fi-fo-field-wrp {
    align-items: center !important;
}

.sl-edit-user-perms .fi-checkbox-input {
    margin-top: 0.35rem;
}

.sl-edit-user-perm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 42px;
}

.sl-edit-user-perm img {
    display: block;
    max-height: 36px;
    width: auto;
}

.sl-edit-user-profiles {
    margin-top: 0.75rem;
    width: 100%;
}

.sl-edit-user-profiles[data-disabled='1'] {
    opacity: 0.65;
    pointer-events: none;
}

.sl-edit-user-profiles__heading {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #222;
}

.sl-edit-user-profiles__table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5ebe5;
}

.sl-edit-user-profiles__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.sl-edit-user-profiles__table th {
    background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 100%);
    border-right: 1px solid #e5ebe5;
    border-bottom: 1px solid #e5ebe5;
    padding: 12px 5px;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.sl-edit-user-profiles__table td {
    border-right: 1px solid #e5ebe5;
    border-bottom: 1px solid #e5ebe5;
    padding: 10px 5px;
    vertical-align: middle;
}

.sl-edit-user-profiles__col-no {
    width: 10%;
    text-align: center !important;
}

.sl-edit-user-profiles__col-name {
    width: 55%;
}

.sl-edit-user-profiles__col-expiry,
.sl-edit-user-profiles__col-select {
    width: 20%;
    text-align: center !important;
}

.sl-edit-user-profiles__expiry,
.sl-edit-user-profiles__select {
    text-align: center;
}

.sl-edit-user-profiles__select-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    cursor: pointer;
}

.sl-edit-user-profiles__blocked {
    margin-right: 4px;
    vertical-align: middle;
}

.sl-edit-user-profiles__row--green {
    background-color: #c9ffc9 !important;
}

.sl-edit-user-profiles__row--orange {
    background-color: #fbc085 !important;
}

.sl-edit-user-profiles__row--red {
    background-color: #f5bfb8 !important;
}

.sl-edit-user-profiles__empty {
    text-align: center;
    color: #666;
    padding: 1rem !important;
}

/* Portal Contact us — page content only (do not reshape .fi-main / SPA chrome) */
.fi-page:has(.sl-portal-contact) > .fi-header,
.fi-page:has(.sl-portal-contact) .fi-header:not(:has(.fi-btn)) {
    display: none !important;
}

.fi-page:has(.sl-portal-contact) .fi-page-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem 0 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    max-width: 100%;
}

.sl-portal-contact {
    width: 100%;
    max-width: 820px;
    margin: 0;
    padding: 1.15rem 1.35rem 1.25rem;
    overflow: visible;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    box-sizing: border-box;
}

.sl-portal-contact__title {
    margin: 0 0 0.85rem;
    color: #333;
    font-size: 1.35rem;
    font-weight: 700;
    font-family: Verdana, Arial, sans-serif;
    line-height: 1.3;
}

.sl-portal-contact__flash {
    margin: 0 0 0.75rem;
}

.sl-portal-contact__error {
    color: #f00;
    font-size: 12px;
}

.sl-portal-contact__ok {
    color: #35d10a;
    font-size: 12px;
}

.sl-portal-contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 290px);
    gap: 1.5rem 2rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
}

.sl-portal-contact__form {
    width: 420px;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.sl-portal-contact__fields {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sl-portal-contact__fields li {
    margin: 0 0 10px;
    padding: 0;
}

.sl-portal-contact__fields label .required {
    color: #e53935;
    font-weight: inherit;
    font-size: 1em;
    line-height: inherit;
    vertical-align: baseline;
    margin-left: 3px;
}

.sl-portal-contact__fields label {
    display: block;
    font-weight: normal;
    color: #727171;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    margin-bottom: 4px;
}

.sl-portal-contact__input {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 5px 10px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: inset 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
    outline: 0;
}

.sl-portal-contact__textarea {
    height: 72px;
    line-height: 1.35;
    resize: vertical;
    min-height: 50px;
}

.sl-portal-contact__captcha {
    display: block;
    margin: 4px 0 8px;
    border: 1px solid #ddd;
}

.sl-portal-contact__send {
    display: inline-block;
    margin-top: 4px;
    min-width: 90px;
    height: 36px;
    line-height: 36px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #006201;
    border-radius: 6px;
    cursor: pointer;
    background: linear-gradient(to bottom, #008901 0%, #007a01 100%);
}

.sl-portal-contact__send:disabled {
    opacity: 0.7;
    cursor: wait;
}

.sl-portal-contact__box {
    width: 290px;
    max-width: 100%;
    margin: 2.1rem 0 0;
    padding: 38px 20px 20px;
    color: #727171;
    border: 1px solid #ececec;
    border-radius: 6px;
    position: relative;
    background: #fff;
    box-sizing: border-box;
}

.sl-portal-contact__box-title {
    width: calc(100% + 8px);
    max-width: 280px;
    text-align: center;
    height: 60px;
    color: #5a5a5a;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    background: #f4f4f4;
    border-radius: 6px;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.sl-portal-contact__box-title img {
    vertical-align: middle;
    max-height: 30px;
    width: auto;
}

.sl-portal-contact__box-section {
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid #ececec;
    font-size: 13px;
    line-height: 1.45;
}

.sl-portal-contact__box-section--last {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sl-portal-contact__tel {
    display: block;
    padding: 8px 0 8px 58px;
    min-height: 28px;
    background: url('../../images/tel-icon.png') no-repeat 6px top;
    color: #222;
    font-size: 16px;
    font-weight: normal;
}

.sl-portal-contact__address {
    display: block;
    padding: 8px 0 0 58px;
    min-height: 48px;
    background: url('../../images/email-icon.png') no-repeat 6px top;
    color: #555;
    font-size: 12px;
    line-height: 1.45;
    font-weight: normal;
}

.sl-portal-contact__address strong {
    font-size: 14px;
    color: #5a5a5a;
}

@media (max-width: 900px) {
    .sl-portal-contact {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sl-portal-contact__layout {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 2.25rem;
    }

    .sl-portal-contact__form,
    .sl-portal-contact__box {
        width: 100%;
        max-width: 100%;
    }

    .sl-portal-contact__box {
        margin-top: 2.25rem;
    }
}

/* ===== URL Link (code) editor — match legacy code/index.php ===== */
.sl-profile-editor--code .sl-add-form-left .sl-code-url-form .fi-section-header,
.sl-profile-editor--code .sl-add-form-left .sl-code-url-form .fi-sc-section-header {
    display: none !important;
}

.sl-profile-editor--code .SectionTitleCode {
    color: #000;
    font-size: 18px;
    line-height: 34px;
    font-weight: 700;
    margin: 0 0 8px;
}

.sl-profile-editor--code .codelabel {
    position: relative;
    display: inline-block;
    padding-right: 22px;
    line-height: 22px;
    min-height: 22px;
    cursor: help;
}

.sl-profile-editor--code .codelabel::after {
    content: '?';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4caf50;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.sl-profile-editor--code .sl-code-dc-fields,
.sl-profile-editor--code .sl-code-dc-fields.fi-sc-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 14px !important;
    margin: 0 0 6px !important;
    max-width: none !important;
}

.sl-profile-editor--code .sl-code-dc-fields > div,
.sl-profile-editor--code .sl-code-dc-fields .fi-fo-field {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
}

.sl-profile-editor--code .sl-code-dc-compulsory {
    display: block !important;
    margin: 0 0 4px !important;
    width: auto !important;
}

.sl-profile-editor--code .sl-code-dc-compulsory .fi-fo-field-label,
.sl-profile-editor--code .sl-code-dc-fields .fi-fo-field-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

.sl-profile-editor--code .sl-code-dc-compulsory .fi-checkbox-input,
.sl-profile-editor--code .sl-code-dc-fields .fi-checkbox-input {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    opacity: 1 !important;
    position: static !important;
}

.sl-profile-editor--code .sl-code-colour-type-row {
    align-items: end !important;
    margin-top: 0 !important;
    gap: 16px !important;
}

.sl-profile-editor--code .sl-code-type-radios .fi-fo-radio,
.sl-profile-editor--code .sl-code-type-radios .fi-radio-list,
.sl-profile-editor--code .sl-code-type-radios .fi-fo-radio-options {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
}

/* Compact centered Save — must beat full-width plant/location CTA (higher :has specificity). */
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-form-actions,
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-form-actions .fi-ac,
.sl-profile-editor--code .sl-add-form-left .fi-form-actions,
.sl-profile-editor--code .sl-add-form-left .fi-form-actions .fi-ac {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: none !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-form-actions .fi-btn,
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-form-actions .fi-btn.fi-color-primary,
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-form-actions button[type='submit'],
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-btn[type='submit'],
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-btn.fi-color-primary,
.sl-profile-editor--code .sl-add-form-left .fi-form-actions .fi-btn,
.sl-profile-editor--code .sl-add-form-left .fi-form-actions button[type='submit'] {
    display: inline-flex !important;
    width: auto !important;
    min-width: 110px !important;
    max-width: 140px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 7px 22px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    flex: 0 0 auto !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
}

.sl-profile-editor--code .add-form-right-code,
.sl-profile-editor--code .sl-add-form-right {
    margin-top: 0 !important;
}

/* ---- Flatten URL Link section: kill Filament/legacy inner dark ring (create + edit) ----
   Theme rules `.fi-page:has(.sl-profile-editor) .fi-section` paint border + inset shadow.
   Match/beat that specificity so edit never keeps a nested box inside .sl-add-form-left. */
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-section,
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-sc-section,
.sl-profile-editor--code .sl-add-form-left .fi-section,
.sl-profile-editor--code .sl-add-form-left .fi-sc-section,
.sl-profile-editor--code .sl-add-form-left .sl-code-url-form,
.sl-profile-editor--code .sl-add-form-left .SectionTitleBox,
.sl-profile-editor--code .sl-add-form-left .SectionTitleBoxCode {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-section-content,
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-sc-section-content,
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-section-content-ctn,
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-sc-section-content-ctn,
.sl-profile-editor--code .sl-add-form-left .fi-section-content,
.sl-profile-editor--code .sl-add-form-left .fi-sc-section-content {
    gap: 4px !important;
    row-gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-fo-field-wrp,
.fi-page:has(.sl-profile-editor--code) .sl-add-form-left .fi-fo-field,
.sl-profile-editor--code .sl-add-form-left .fi-fo-field-wrp {
    margin: 0 0 2px !important;
    gap: 2px !important;
}

/* Inputs use the full column width (was a stray 220px cap that left half the row empty). */
.sl-profile-editor--code .sl-add-form-left input.codeTextApplication,
.sl-profile-editor--code .sl-add-form-left .codeTextApplication,
.sl-profile-editor--code .sl-add-form-left .fi-input-wrp {
    max-width: 100% !important;
}

/* Colour + code-type on one tidy row instead of two tall stacked blocks. */
.sl-profile-editor--code .sl-code-colour-type-row {
    margin-top: 4px !important;
    gap: 18px !important;
}

/* ===== Survey editor — match legacy survey/index.php ===== */
.sl-profile-editor--survey {
    grid-template-columns: 460px 450px !important;
}

.sl-profile-editor--survey .sl-add-form-left,
.sl-profile-editor--survey .sl-add-form-left--survey {
    width: 460px !important;
    max-width: 460px !important;
}

.sl-profile-editor--survey .sl-add-form-left .fi-form-actions {
    /* Survey uses the custom SAVE under Form Builder — hide Filament Cancel/Save row. */
    display: none !important;
}

.sl-profile-editor--survey .sl-survey-form-builder {
    width: 100%;
    max-width: 458px;
    margin-top: 8px;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
}

/* Legacy survey: the "Expand Window" bar is a footer attached to the builder
   (footer-rouded, ~440px). Width-match it to the builder and sit it flush so it
   reads as one card instead of a loose full-width banner. */
.sl-profile-editor--survey .sl-fb-expand-footer {
    width: 458px;
    max-width: 100%;
    box-sizing: border-box;
    /* Stay flush under the builder card. */
    margin: 0 !important;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background-color: #cccccc;
    padding: 10px;
    text-align: right;
}

/* Hide Filament "system" theme option (monitor icon) — light/dark only. */
.fi-theme-switcher .fi-theme-switcher-btn[aria-label="System"],
.fi-theme-switcher .fi-theme-switcher-btn:nth-child(3) {
    display: none !important;
}

/* ── Code Balance (legacy /profile/codeBalance listing-table) ───── */
.fi-page:has(.sl-cb) .fi-page-main,
.fi-page:has(.sl-cb) .fi-main,
.fi-page:has(.sl-cb) .fi-page-content { max-width: none !important; }
.sl-cb { font-family: Arial, Helvetica, sans-serif; color: #222; width: 100%; }
.sl-cb__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 14px; }
.sl-cb__title { margin: 0 0 10px; font-size: 28px; font-weight: 700; color: #111; line-height: 1.2; }
.sl-cb__balance { color: #008601; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-cb__balance-num { display: inline-block; border: 1px solid #bbb; min-width: 36px; padding: 2px 10px; text-align: center; font-size: 18px; font-weight: 700; color: #111; background: #fff; line-height: 1.4; }
.sl-cb__header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sl-cb__legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.sl-cb__legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #333; }
.sl-cb__swatch { display: inline-block; width: 18px; height: 14px; border: 1px solid #999; }
.sl-cb__swatch--expired { background: #F5BFB8; }
.sl-cb__swatch--expiring { background: #FBC085; }
.sl-cb__swatch--active { background: #c9ffc9; }
.sl-cb__actions { display: flex; gap: 10px; }
.sl-cb__btn { display: inline-block; background: linear-gradient(to bottom, #008901 0%, #007a01 100%); color: #fff !important; font-weight: 700; font-size: 13px; text-transform: uppercase; text-decoration: none !important; border: 1px solid #006201; border-radius: 3px; padding: 9px 18px; line-height: 1.2; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.sl-cb__btn:hover { background: linear-gradient(to bottom, #00a001 0%, #008901 100%); }
.sl-cb__btn--search { padding: 6px 16px; font-size: 12px; height: 32px; }
.sl-cb__search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 14px; font-size: 14px; }
.sl-cb__search input { border: 1px solid #aaa; border-radius: 2px; padding: 5px 8px; min-width: 140px; height: 30px; font-size: 14px; background: #fff; }
.sl-cb__link-clear { background: none; border: 0; color: #0000ff; text-decoration: underline; cursor: pointer; font-size: 13px; padding: 0; }
.sl-cb__table-wrap { overflow-x: auto; width: 100%; background: #fff; }
.sl-cb table.listing-table.sl-cb__table { width: 100%; border-collapse: collapse; border-left: 1px solid #e5ebe5; border-top: 1px solid #e5ebe5; font-size: 13px; background: #fff; }
.sl-cb table.listing-table.sl-cb__table th,
.sl-cb table.listing-table.sl-cb__table td { border-right: 1px solid #e5ebe5; border-bottom: 1px solid #e5ebe5; padding: 10px 5px; vertical-align: middle; }
.sl-cb table.listing-table.sl-cb__table th { background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 100%); font-size: 13px; font-weight: 700; color: #222; padding: 12px 5px; text-align: center; }
.sl-cb table.listing-table.sl-cb__table th.sl-cb__col-create { text-align: left; padding-left: 10px; }
.sl-cb__col-code { width: 80px; text-align: center !important; white-space: nowrap; }
.sl-cb__col-expiry { width: 130px; text-align: center !important; white-space: nowrap; }
.sl-cb__col-renew { width: 110px; text-align: center !important; white-space: nowrap; }
.sl-cb__col-create { min-width: 420px; }
.sl-cb__check input[type='checkbox'] { width: 15px; height: 15px; cursor: pointer; margin: 0 auto; display: inline-block; }
.sl-cb table.listing-table tr.sl-row-expired > td { background-color: #F5BFB8 !important; }
.sl-cb table.listing-table tr.sl-row-expiring > td { background-color: #FBC085 !important; }
.sl-cb table.listing-table tr.sl-row-active > td { background-color: #c9ffc9 !important; }
.sl-cb__templates {
    display: flex;
    /* Keep every profile-type on ONE line — the .sl-cb__table-wrap container scrolls
       horizontally instead of the labels wrapping onto a second row. */
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px 22px;
    width: 100%;
}
.sl-cb__templates a {
    display: inline-block;
    color: #008601 !important;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none !important;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    padding: 0 2px;
}
.sl-cb__templates a:hover { text-decoration: underline !important; }
.sl-cb__empty { text-align: center !important; padding: 24px 12px !important; color: #666; background: #fff !important; }
.sl-cb__pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.sl-cb__pager select { border: 1px solid #aaa; padding: 2px 6px; min-width: 48px; background: #fff; }
.sl-cb__pager-arrow { border: 0; background: transparent; padding: 0 4px; cursor: pointer; font-size: 14px; color: #333; }
.sl-cb__pager-arrow:disabled { opacity: 0.35; cursor: default; }
.sl-cb__footnote { margin-top: 18px; font-size: 13px; color: #333; line-height: 1.45; }
.sl-cb__footnote a { color: #008601; font-weight: 700; margin-left: 6px; }
@media (max-width: 900px) {
  .sl-cb__header-right { align-items: flex-start; width: 100%; }
  .sl-cb__legend, .sl-cb__actions { justify-content: flex-start; }
}

/* ===========================================================================
 * DARK MODE ONLY — portal / shared ScanLink surfaces
 * Light-mode rules above are untouched. Tokens match dashboard tiles:
 *   surface: rgb(17 24 39) | nested: rgb(31 41 55) | border: rgb(255 255 255 / 0.1)
 *   text: rgb(243 244 246) | muted: rgb(156 163 175)
 * =========================================================================== */

/* --- Edit Account / Manage User --- */
.dark .sl-edit-account .fi-section,
.dark .sl-edit-account .fi-sc-section {
    background: rgb(17 24 39) !important;
    border-color: rgb(255 255 255 / 0.1) !important;
    box-shadow: none !important;
}

.dark .sl-edit-account .fi-section-header-heading,
.dark .sl-edit-account .fi-sc-section-header-heading,
.dark .sl-edit-account__users .fi-ta-header-heading {
    color: rgb(134 239 172) !important;
}

.dark .sl-edit-account .fi-input-wrp {
    background-color: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
}

.dark .sl-edit-account .fi-input-wrp:focus-within {
    border-color: rgb(74 222 128) !important;
}

.dark .sl-edit-account .fi-input,
.dark .sl-edit-account .fi-textarea,
.dark .sl-edit-account input[type='text'],
.dark .sl-edit-account input[type='email'],
.dark .sl-edit-account input[type='password'],
.dark .sl-edit-account input[type='number'],
.dark .sl-edit-account .fi-fo-field-wrp-label,
.dark .sl-edit-account .fi-fo-field-wrp-label span,
.dark .sl-edit-account label {
    color: rgb(243 244 246) !important;
}

.dark .sl-edit-account .fi-input::placeholder,
.dark .sl-edit-account .fi-textarea::placeholder,
.dark .sl-edit-account input::placeholder {
    color: rgb(156 163 175) !important;
}

.dark .sl-edit-account__users .fi-ta-ctn {
    background: rgb(17 24 39) !important;
    border-color: rgb(255 255 255 / 0.1) !important;
}

.dark .sl-edit-account__users .fi-ta-table th {
    background: rgb(31 41 55) !important;
    color: rgb(243 244 246) !important;
}

.dark .sl-edit-account__users .fi-ta-table th,
.dark .sl-edit-account__users .fi-ta-table td {
    border-color: rgb(55 65 81) !important;
    color: rgb(229 231 235) !important;
}

.dark .sl-edit-user-modal .fi-modal-header-heading {
    color: rgb(243 244 246) !important;
}

.dark .sl-edit-user-modal .fi-input-wrp {
    background-color: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
}

/* --- Profile create/edit sections + left form --- */
.dark .fi-page:has(.sl-profile-editor) .fi-sc-section,
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .SectionTitleBox {
    border-color: rgb(255 255 255 / 0.12) !important;
    background: #1f2937 !important;
    box-shadow: none !important;
}

.dark .fi-page:has(.sl-profile-editor) .fi-sc-section > .fi-section {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.dark .fi-page:has(.sl-profile-editor) .fi-section-header-heading,
.dark .fi-page:has(.sl-profile-editor) .fi-sc-section-header-heading {
    color: rgb(134 239 172) !important;
}

.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left {
    color: rgb(209 213 219) !important;
}

.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-field-wrp-label,
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-field-wrp-label span,
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left label.fi-fo-field-wrp-label,
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fieldset-label {
    color: rgb(209 213 219) !important;
}

.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-input-wrp:not(:has(select)):not(:has(.fi-select-input)) {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    box-shadow: none !important;
}

/* Date pickers keep a light-mode white bg in dark mode because the light rule
 * (.fi-fo-date-time-picker.fi-input-wrp) out-specifies the generic dark rule
 * above. Mirror that selector here so date fields match the other dark inputs. */
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker.fi-input-wrp,
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-input-wrp.fi-fo-date-time-picker {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    box-shadow: none !important;
}

.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker input.fi-input,
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker .fi-input {
    color: rgb(243 244 246) !important;
}

.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker .fi-input-wrp-suffix,
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-fo-date-time-picker .fi-icon-btn {
    color: rgb(134 239 172) !important;
}

.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-input:not(select):not(.fi-select-input),
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left input.fi-input:not([type='checkbox']):not([type='radio']):not([type='file']),
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-textarea,
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left textarea.fi-textarea {
    color: rgb(243 244 246) !important;
}

.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-btn:not(.fi-color-danger):not([type='submit']),
.dark .fi-page:has(.sl-profile-editor) .sl-add-form-left .fi-ac-btn-action:not(.fi-color-danger):not([type='submit']) {
    background: rgb(55 65 81) !important;
    background-image: none !important;
    border-color: rgb(75 85 99) !important;
    color: rgb(243 244 246) !important;
}

.dark .fi-page:has(.sl-profile-editor) .fi-header-heading {
    color: rgb(243 244 246) !important;
}

.dark .fi-page:has(.sl-profile-editor) .fi-page-main-ctn,
.dark .fi-page:has(.sl-profile-editor) .fi-page-content {
    color: rgb(209 213 219) !important;
}

/* --- Description / rich-text (CKEditor) — dark chrome + editing surface --- */
.dark .fi-page:has(.sl-profile-editor) .cke,
.dark .fi-page:has(.sl-profile-editor) .cke_chrome,
.dark .fi-page:has(.sl-profile-editor) .cke_inner {
    border-color: rgb(75 85 99) !important;
    background: #1f2937 !important;
}

.dark .fi-page:has(.sl-profile-editor) .cke_top,
.dark .fi-page:has(.sl-profile-editor) .cke_bottom,
.dark .fi-page:has(.sl-profile-editor) .cke_toolbar,
.dark .fi-page:has(.sl-profile-editor) .cke_toolgroup {
    background: #1f2937 !important;
    border-color: rgb(75 85 99) !important;
    box-shadow: none !important;
}

.dark .fi-page:has(.sl-profile-editor) .cke_contents,
.dark .fi-page:has(.sl-profile-editor) .cke_wysiwyg_frame,
.dark .fi-page:has(.sl-profile-editor) .cke_wysiwyg_div,
.dark .fi-page:has(.sl-profile-editor) .cke_editable {
    background: #111827 !important;
    color: rgb(229 231 235) !important;
}

.dark .fi-page:has(.sl-profile-editor) .cke_button__label,
.dark .fi-page:has(.sl-profile-editor) .cke_combo_text,
.dark .fi-page:has(.sl-profile-editor) .cke_combo_open,
.dark .fi-page:has(.sl-profile-editor) .cke_button_icon,
.dark .fi-page:has(.sl-profile-editor) .cke_toolbar .cke_button {
    color: rgb(209 213 219) !important;
}

.dark .fi-page:has(.sl-profile-editor) .cke_combo_button {
    background: #374151 !important;
    border-color: rgb(75 85 99) !important;
}

/* --- Form Builder outer chrome --- */
.dark .sl-legacy-preview-sidebar .form-builder-box,
.dark .sl-legacy-preview-sidebar .form-builder-box.sl-form-builder-panel,
.dark .sl-form-builder-panel,
.dark .form-builder-box.sl-form-builder-panel {
    background: rgb(17 24 39) !important;
    border-color: rgb(255 255 255 / 0.1) !important;
    box-shadow: none !important;
    color: rgb(209 213 219) !important;
}

.dark .sl-legacy-preview-sidebar .form-builder-title,
.dark .sl-form-builder-panel .form-builder-title {
    color: rgb(134 239 172) !important;
    border-color: rgb(55 65 81) !important;
}

.dark .sl-form-builder-panel .existing-item,
.dark .sl-form-builder-panel .existing-item label,
.dark .sl-form-builder-panel .activate-for-profile,
.dark .sl-form-builder-panel .activate-for-profile label {
    color: rgb(209 213 219) !important;
}

.dark .sl-form-builder-panel .existing-item--format {
    background: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
}

.dark .sl-form-builder-panel .existing-item__label,
.dark .sl-legacy-preview-sidebar .existing-item--format .existing-item__label {
    color: rgb(243 244 246) !important;
}

.dark .sl-form-builder-panel .sl-fb-iframe-placeholder,
.dark .sl-form-builder-panel .sl-fb-locked-placeholder {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    color: rgb(156 163 175) !important;
}

.dark .sl-form-builder-panel .sl-form-builder-purchase-note {
    background: rgb(66 32 6) !important;
    border-color: rgb(146 64 14) !important;
    color: rgb(253 230 138) !important;
}

.dark .sl-form-builder-panel .sl-form-builder-lock-copy {
    color: rgb(156 163 175) !important;
}

.dark .sl-fb-expand-footer,
.dark .sl-fb-expand-footer.footer-rouded,
.dark .sl-legacy-preview-sidebar .footer-rouded,
.dark .sl-legacy-preview-sidebar .sl-fb-expand-footer {
    background-color: rgb(55 65 81) !important;
    color: rgb(229 231 235) !important;
}

.dark .sl-fb-order-success-dialog {
    background: rgb(17 24 39) !important;
    color: rgb(229 231 235) !important;
}

.dark .sl-fb-order-success-body {
    color: rgb(209 213 219) !important;
}

.dark .sl-existing-form-dialog {
    background: rgb(17 24 39) !important;
    color: rgb(229 231 235) !important;
}

/* Preview sidebar surfaces (keep iPhone device chrome as-is) */
.dark .sl-legacy-preview-sidebar .code_preview_qr,
.dark .sl-legacy-preview-sidebar--code .code_preview_qr {
    background: rgb(17 24 39) !important;
    border-color: rgb(55 65 81) !important;
}

.dark .sl-legacy-preview-sidebar--code .sl-code-preview-empty {
    color: rgb(156 163 175) !important;
}

.dark .sl-legacy-preview-sidebar--code .sl-qr-download-select {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    color: rgb(243 244 246) !important;
}

/* --- Code Balance --- */
.dark .sl-cb {
    color: rgb(229 231 235) !important;
}

.dark .sl-cb__title {
    color: rgb(243 244 246) !important;
}

.dark .sl-cb__balance-num,
.dark .sl-cb__search input,
.dark .sl-cb__table-wrap,
.dark .sl-cb table.listing-table.sl-cb__table,
.dark .sl-cb__empty,
.dark .sl-cb__pager select {
    background: rgb(17 24 39) !important;
    border-color: rgb(55 65 81) !important;
    color: rgb(229 231 235) !important;
}

.dark .sl-cb__pager-arrow,
.dark .sl-cb__footnote {
    color: rgb(209 213 219) !important;
}

.dark .sl-cb table.listing-table.sl-cb__table th {
    background: rgb(31 41 55) !important;
    color: rgb(243 244 246) !important;
}

.dark .sl-cb table.listing-table.sl-cb__table td {
    border-color: rgb(55 65 81) !important;
    color: rgb(209 213 219) !important;
}

/* --- Custom portal page panels (blade inline styles overridden only in dark) --- */
.dark .sl-vlog,
.dark .sl-ol,
.dark .sl-fslog,
.dark .sl-ca,
.dark .sl-sa,
.dark .sl-fsview {
    color: rgb(229 231 235) !important;
}

.dark .sl-vlog__panel,
.dark .sl-ol__panel,
.dark .sl-fslog__panel,
.dark .sl-ca__panel,
.dark .sl-sa__panel,
.dark .sl-fsview,
.dark .sl-card,
.dark .fb-card,
.dark .sl-fbp__card {
    background: rgb(17 24 39) !important;
    border-color: rgb(255 255 255 / 0.1) !important;
    color: rgb(229 231 235) !important;
    box-shadow: none !important;
}

.dark .sl-vlog__title,
.dark .sl-ol__crumb,
.dark .sl-fslog__title,
.dark .sl-ca__title,
.dark .sl-sa__title {
    color: rgb(243 244 246) !important;
}

.dark .sl-vlog table,
.dark .sl-vlog table.listing-table,
.dark .sl-fslog table,
.dark .sl-fslog table.listing-table,
.dark .sl-ca table,
.dark .sl-ol table {
    background: rgb(17 24 39) !important;
    color: rgb(229 231 235) !important;
}

.dark .sl-vlog table th,
.dark .sl-fslog table th,
.dark .sl-ca table th,
.dark .sl-ol table th {
    background: rgb(31 41 55) !important;
    color: rgb(243 244 246) !important;
    border-color: rgb(55 65 81) !important;
}

.dark .sl-vlog table td,
.dark .sl-fslog table td,
.dark .sl-ca table td,
.dark .sl-ol table td {
    border-color: rgb(55 65 81) !important;
    color: rgb(209 213 219) !important;
}

.dark .sl-vlog input,
.dark .sl-vlog select,
.dark .sl-fslog input,
.dark .sl-fslog select,
.dark .sl-ca input,
.dark .sl-ca select,
.dark .sl-ol input,
.dark .sl-ol select,
.dark .sl-sa input,
.dark .sl-sa select {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    color: rgb(243 244 246) !important;
}

.dark .sl-ol__btn--ghost {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    color: rgb(243 244 246) !important;
}

.dark .sl-sa__box-count,
.dark .sl-sa .ui-widget-content {
    background: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
    color: rgb(229 231 235) !important;
}

.dark .sl-sa .ddchart-x-axis-label {
    color: rgb(209 213 219) !important;
}

.dark .sl-ca__modal,
.dark .sl-help-video-window {
    background: rgb(17 24 39) !important;
    color: rgb(229 231 235) !important;
}

/* Participant list */
.dark .sl-plist,
.dark .sl-plist__table-wrap {
    background: rgb(17 24 39) !important;
    color: rgb(229 231 235) !important;
}

.dark .sl-plist__input,
.dark .sl-plist input[type='text'],
.dark .sl-plist input[type='email'],
.dark .sl-plist select,
.dark .sl-plist textarea {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    color: rgb(243 244 246) !important;
}

.dark .sl-plist table th {
    background: rgb(31 41 55) !important;
    color: rgb(243 244 246) !important;
}

.dark .sl-plist table td {
    background: rgb(17 24 39) !important;
    border-color: rgb(55 65 81) !important;
    color: rgb(209 213 219) !important;
}

/* Purchase / register / FB embed helpers */
.dark .sl-fbp,
.dark .sl-fbp__card,
.dark .content-register,
.dark .sl-reg,
.dark .sl-reg .content-register,
.dark .sl-reg-modal {
    background: rgb(17 24 39) !important;
    color: rgb(229 231 235) !important;
    border-color: rgb(255 255 255 / 0.1) !important;
}

.dark .sl-reg input,
.dark .sl-reg select,
.dark .sl-reg textarea,
.dark .sl-reg .text-fi,
.dark .sl-reg .reg-reseller-code,
.dark .fb-input,
.dark .fb-textarea,
.dark .fb-canvas {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    color: rgb(243 244 246) !important;
    box-shadow: none !important;
}

.dark .sl-reg .sl-reg-field > label:not(.error),
.dark .sl-reg .sl-reg-reseller-label,
.dark .sl-reg h3.page-title {
    color: rgb(209 213 219) !important;
}

.dark .sl-reg h3.page-title {
    color: rgb(134 239 172) !important;
}

.dark .sl-reg-error-banner {
    background: rgb(69 10 10) !important;
    border-color: rgb(153 27 27) !important;
    color: rgb(254 202 202) !important;
}

.dark .fb-preview-phone {
    background: rgb(17 24 39) !important;
}

.dark .sl-fbp__card {
    background: rgb(17 24 39) !important;
    border-color: rgb(255 255 255 / 0.1) !important;
    box-shadow: none !important;
}

.dark .sl-fbp__title {
    color: rgb(243 244 246) !important;
}

.dark .sl-fbp__subtitle,
.dark .sl-fbp__hint {
    color: rgb(156 163 175) !important;
}

.dark .sl-fbp__section {
    color: rgb(134 239 172) !important;
    border-color: rgb(55 65 81) !important;
}

.dark .sl-fbp__label {
    color: rgb(209 213 219) !important;
}

.dark .sl-fbp__control {
    background: rgb(31 41 55) !important;
    border-color: rgb(75 85 99) !important;
    color: rgb(243 244 246) !important;
}

.dark .sl-fbp__control::placeholder {
    color: rgb(156 163 175) !important;
}

/* Mastercode toolbar + tabs readability */
.dark .sl-mastercode-toolbar,
.dark .sl-mastercode-toolbar a,
.dark .sl-mastercode-toolbar span {
    color: rgb(209 213 219) !important;
}

.dark .fi-panel-portal .fi-tabs-item,
.dark .fi-panel-portal .fi-tabs-item-label {
    color: rgb(209 213 219) !important;
}

.dark .fi-panel-portal .fi-wi-stats-overview-stat,
.dark .fi-panel-portal .fi-section-content-ctn {
    color: rgb(229 231 235);
}

/* ===========================================================================
 * ADMIN DARK MODE — custom admin views that hardcode light colours. Standard
 * Filament resources are already theme-aware; only these two custom areas break.
 * =========================================================================== */

/* --- Global Settings page (.sl-gs) — was a full white card island in dark --- */
html.dark .sl-gs { color: rgb(229 231 235); }
html.dark .sl-gs__title { color: rgb(251 146 60); }
html.dark .sl-gs__title-icon { border-left-color: rgb(156 163 175); }
html.dark .sl-gs__box {
    background: rgb(17 24 39);
    border-color: rgb(255 255 255 / 0.1);
}
html.dark .sl-gs__required-bar {
    background: rgb(31 41 55);
    color: rgb(229 231 235);
}
html.dark .sl-gs__label { color: rgb(209 213 219); }
html.dark .sl-gs__field input,
html.dark .sl-gs__field select,
html.dark .sl-gs__field textarea {
    background: rgb(31 41 55);
    border-color: rgb(75 85 99);
    color: rgb(243 244 246);
}
html.dark .sl-gs__btn {
    background: rgb(55 65 81);
    background-image: none;
    border-color: rgb(75 85 99);
    color: rgb(243 244 246);
}

/* --- Reseller Code History header + owner card (inside dark fi-section) --- */
html.dark .sl-rch-avatar {
    background: rgb(0 140 0 / 0.18) !important;
    color: rgb(74 222 128) !important;
}
html.dark .sl-rch-name { color: rgb(243 244 246) !important; }
html.dark .sl-rch-muted { color: rgb(156 163 175) !important; }
html.dark .sl-rch-pill--active {
    background: rgb(20 83 45 / 0.5) !important;
    color: rgb(134 239 172) !important;
}
html.dark .sl-rch-pill--inactive {
    background: rgb(127 29 29 / 0.5) !important;
    color: rgb(252 165 165) !important;
}

/* ============================================================================
 * URL Link (code) editor — professional 2-column CARD layout
 * Form card (left ~68%) + QR/Download card (right ~30%), 24px padding, gap.
 * Double-class specificity beats the base .sl-profile-editor grid rules.
 * ========================================================================== */
.sl-profile-editor.sl-profile-editor--code {
    width: 100% !important;
    max-width: 1060px !important;
    overflow: visible !important;
}

/* Both columns are white cards with equal 24px padding. */
.sl-profile-editor.sl-profile-editor--code .sl-add-form-left,
.sl-profile-editor.sl-profile-editor--code .sl-add-form-right {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

@media (min-width: 960px) {
    .sl-profile-editor.sl-profile-editor--code {
        grid-template-columns: minmax(0, 1fr) 320px !important;
        grid-template-areas: "form preview" !important;
        column-gap: 32px !important;
        align-items: start !important;
    }
    .sl-profile-editor.sl-profile-editor--code .sl-add-form-left {
        width: auto !important;
        max-width: none !important;
    }
    .sl-profile-editor.sl-profile-editor--code .sl-add-form-right {
        width: 320px !important;
        max-width: 320px !important;
    }
}

/* Form fields fill the card. */
.sl-profile-editor.sl-profile-editor--code .sl-add-form-left .fi-input-wrp,
.sl-profile-editor.sl-profile-editor--code .sl-add-form-left .fi-fo-field-wrp {
    max-width: 100% !important;
}

/* QR card: centre the preview + controls, tidy spacing. */
.sl-profile-editor.sl-profile-editor--code .sl-add-form-right .sl-qr-block,
.sl-profile-editor.sl-profile-editor--code .sl-add-form-right .code_preview_qr {
    text-align: center !important;
}
.sl-profile-editor.sl-profile-editor--code .sl-add-form-right .sl-qr-image {
    max-width: 100% !important;
    height: auto !important;
}

/* ============================================================================
   DARK-MODE COMPATIBILITY LAYER (ScanLink legacy-styled content)
   ----------------------------------------------------------------------------
   The legacy portal/admin pages were authored light-only (their own page <style>
   blocks hardcode white backgrounds + dark text). When Filament renders a panel
   in dark mode (admin theme switcher, or the OS prefers-color-scheme in the
   portal), that content must stay readable. These rules:
     - use `html.dark` (higher specificity) + !important to win over the
       page-scoped <style> blocks that come later in the source order;
     - are scoped to `.fi-main` so they never touch Filament's own dark-aware
       chrome (topbar/sidebar/components);
     - set container backgrounds + a base light text colour so children inherit
       readable text, while brand-green / explicitly-coloured elements keep their
       own colour (buttons, badges, dots, links).
   ============================================================================ */
html.dark {
    --sl-dk-surface: #1f2937;   /* gray-800 */
    --sl-dk-surface-2: #111827; /* gray-900 */
    --sl-dk-text: #e5e7eb;      /* gray-200 */
    --sl-dk-muted: #9ca3af;     /* gray-400 */
    --sl-dk-border: #374151;    /* gray-700 */
}

/* Panels / cards / sections / boxes -> dark surface + light text */
html.dark .fi-main .legacy-purchase-page,
html.dark .fi-main .contentpart,
html.dark .fi-main .my-qr-codes,
html.dark .fi-main .sl-sa__panel,
html.dark .fi-main .sl-plist__section,
html.dark .fi-main .sl-portal-contact__box,
html.dark .fi-main .sl-portal-contact__box-section,
html.dark .fi-main .sl-edit-account__form,
html.dark .fi-main .sl-existing-form-tabpanel,
html.dark .fi-main .sl-os__row,
html.dark .fi-main .subscription-ordersummary,
html.dark .fi-main .SectionTitleBox-orderSummary,
html.dark .fi-main .sl-fbp__field,
html.dark .fi-main .sl-fbp__control,
html.dark .fi-main .content-register {
    background-color: var(--sl-dk-surface) !important;
    color: var(--sl-dk-text) !important;
    border-color: var(--sl-dk-border) !important;
}

/* Base light text for the legacy content roots (children inherit; coloured
   elements keep their own colour). Overrides hardcoded color:#333 etc. */
html.dark .fi-main .sl-sa,
html.dark .fi-main .legacy-purchase-page,
html.dark .fi-main .contentpart,
html.dark .fi-main .my-qr-codes,
html.dark .fi-main .sl-plist,
html.dark .fi-main .sl-vlog,
html.dark .fi-main .sl-fslog,
html.dark .fi-main .sl-ca,
html.dark .fi-main .sl-ol,
html.dark .fi-main .sl-fbp,
html.dark .fi-main .sl-edit-account__form,
html.dark .fi-main .sl-portal-contact__box {
    color: var(--sl-dk-text) !important;
}

/* Legacy listing tables */
html.dark .fi-main .listing-table,
html.dark .fi-main table.listing-table {
    background-color: var(--sl-dk-surface) !important;
    color: var(--sl-dk-text) !important;
    border-color: var(--sl-dk-border) !important;
}
html.dark .fi-main .listing-table th,
html.dark .fi-main .listing-table td {
    color: var(--sl-dk-text) !important;
    border-color: var(--sl-dk-border) !important;
    background-color: transparent !important;
}
html.dark .fi-main .listing-table thead th {
    background-color: var(--sl-dk-surface-2) !important;
}
html.dark .fi-main .listing-table tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Form controls inside legacy content */
html.dark .fi-main .sl-sa input,
html.dark .fi-main .sl-sa select,
html.dark .fi-main .sl-sa textarea,
html.dark .fi-main .legacy-purchase-page input,
html.dark .fi-main .legacy-purchase-page select,
html.dark .fi-main .legacy-purchase-page textarea,
html.dark .fi-main .sl-reg-field,
html.dark .fi-main .sl-plist__input,
html.dark .fi-main .sl-portal-contact__input,
html.dark .fi-main .sl-existing-form-select,
html.dark .fi-main .sl-qr-download-select {
    background-color: var(--sl-dk-surface-2) !important;
    color: var(--sl-dk-text) !important;
    border-color: var(--sl-dk-border) !important;
}
html.dark .fi-main .sl-sa input::placeholder,
html.dark .fi-main .legacy-purchase-page input::placeholder,
html.dark .fi-main .sl-reg-field::placeholder {
    color: var(--sl-dk-muted) !important;
}

/* Muted / helper text stays muted but readable */
html.dark .fi-main .sl-ca__hint,
html.dark .fi-main .sl-rch-muted,
html.dark .fi-main .sl-os__desc,
html.dark .fi-main .sl-sa__empty,
html.dark .fi-main .sl-vlog__empty,
html.dark .fi-main .sl-fslog__empty {
    color: var(--sl-dk-muted) !important;
}

/* Map detail popups already render on Leaflet/Google's white bubble — force dark
   text there so they stay readable regardless of theme. */
html.dark .sl-sa__popup,
html.dark .sl-sa__popup-row,
html.dark .sl-sa__popup-row span { color: #222 !important; }

/* ==========================================================================
   Use-an-existing-form: modern modal (sl-efm-*) + applied-form chips
   ========================================================================== */
.sl-efm-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 14px;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
}
.sl-efm-dialog {
    position: relative;
    width: min(680px, 100%);
    max-height: 88vh;
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.sl-efm-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #eef0f2;
}
.sl-efm-title { margin: 0; font-size: 17px; font-weight: 700; color: #111827; line-height: 1.25; }
.sl-efm-subtitle { margin: 4px 0 0; font-size: 12.5px; color: #6b7280; line-height: 1.4; }
.sl-efm-close {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid #e5e7eb; background: #f9fafb; color: #4b5563; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.sl-efm-close:hover { background: #f3f4f6; color: #111827; border-color: #d1d5db; }

.sl-efm-banner {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 22px 0; padding: 9px 12px;
    background: #ecfdf5; color: #065f46;
    border: 1px solid #a7f3d0; border-radius: 10px;
    font-size: 12.5px;
}
.sl-efm-banner--busy { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.sl-efm-spinner {
    width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid #bfdbfe; border-top-color: #1e40af;
    animation: sl-efm-spin .7s linear infinite;
}
@keyframes sl-efm-spin { to { transform: rotate(360deg); } }

.sl-efm-tabs {
    display: flex; gap: 4px;
    margin: 16px 22px 0; padding: 4px;
    background: #f3f4f6; border-radius: 12px;
}
.sl-efm-tab {
    flex: 1; border: 0; border-radius: 9px;
    padding: 9px 8px; background: transparent;
    color: #4b5563; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}
.sl-efm-tab:hover { color: #111827; }
.sl-efm-tab.is-active { background: #fff; color: #008C00; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.sl-efm-body { padding: 12px 22px 22px; overflow-y: auto; }

.sl-efm-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; margin-top: 10px;
    background: #fff; border: 1px solid #eceef0; border-radius: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.sl-efm-row:first-child { margin-top: 4px; }
.sl-efm-row:hover { border-color: #d1fae0; box-shadow: 0 2px 10px rgba(0,140,0,.06); }
.sl-efm-row-no {
    flex: 0 0 auto; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f3f4f6; color: #6b7280; border-radius: 8px; font-size: 12px; font-weight: 700;
}
.sl-efm-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-efm-row-title { font-size: 13.5px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-efm-row-meta { font-size: 11.5px; color: #9ca3af; }
.sl-efm-row-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.sl-efm-select {
    flex: 0 0 auto; border: 0; border-radius: 9px;
    padding: 8px 18px; cursor: pointer;
    background: #008C00; color: #fff !important; font-size: 12.5px; font-weight: 700;
    transition: background .15s, transform .05s;
}
.sl-efm-select:hover { background: #00a000; }
.sl-efm-select:active { transform: translateY(1px); }
.sl-efm-select:disabled { opacity: .6; cursor: default; }
.sl-efm-select--full { width: 100%; margin-top: 6px; padding: 11px; }

.sl-efm-link {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    color: #008C00; font-size: 12.5px; font-weight: 600;
}
.sl-efm-link:hover { text-decoration: underline; }
.sl-efm-link--danger { color: #dc2626; }

.sl-efm-empty { margin: 20px 0; color: #9ca3af; font-size: 13px; text-align: center; }

.sl-efm-back {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: transparent; padding: 0; margin-bottom: 12px; cursor: pointer;
    color: #008C00; font-size: 13px; font-weight: 600;
}
.sl-efm-preview-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #111827; }
.sl-efm-preview-title span { color: #008C00; }
.sl-efm-preview-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #f0f1f3; font-size: 13px; color: #374151;
}
.sl-efm-badge {
    flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
    background: #f3f4f6; color: #6b7280; font-size: 11px; font-weight: 600;
}

.sl-efm-login { max-width: 340px; margin: 6px auto 0; }
.sl-efm-login-hint { margin: 0 0 12px; font-size: 12.5px; color: #6b7280; }
.sl-efm-field { display: block; margin-bottom: 12px; }
.sl-efm-field span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: #374151; }
.sl-efm-field input {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1.5px solid #e5e7eb; border-radius: 10px; font: inherit; color: #111827; background: #fff;
}
.sl-efm-field input:focus { outline: none; border-color: #008C00; box-shadow: 0 0 0 3px rgba(0,140,0,.14); }

/* Applied-form chips (below "Use an existing form") */
.sl-applied-forms { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.sl-applied-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 11px; border-radius: 999px;
    background: rgba(0,140,0,.10); border: 1px solid rgba(0,140,0,.28);
    color: #056f01; font-size: 12px; font-weight: 600;
}
.sl-applied-chip__remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: 0; border-radius: 50%;
    background: rgba(0,140,0,.18); color: #056f01; font-size: 14px; line-height: 1; cursor: pointer;
    transition: background .15s, color .15s;
}
.sl-applied-chip__remove:hover { background: #dc2626; color: #fff; }

/* ==========================================================================
   Themed confirm/alert dialog (window.slConfirm / slAlert) — replaces native
   window.confirm()/alert() and Livewire wire:confirm across the portal.
   ========================================================================== */
.sl-dialog-overlay {
    position: fixed;
    inset: 0;
    /* Above participant-list modal (100000), form-builder modal (10050), flatpickr (100001). */
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
}
.sl-dialog-overlay[hidden] { display: none !important; }
.sl-dialog {
    width: min(400px, 100%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    padding: 22px 22px 18px;
    box-sizing: border-box;
    animation: sl-dialog-in 0.14s ease-out;
}
@keyframes sl-dialog-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.sl-dialog-msg {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #1f2937;
    font-family: Arial, Helvetica, sans-serif;
}
.sl-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.sl-dialog-btn {
    border: 0;
    border-radius: 9px;
    padding: 9px 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    transition: background 0.15s;
}
.sl-dialog-btn--ghost { background: #f3f4f6; color: #374151; }
.sl-dialog-btn--ghost:hover { background: #e5e7eb; }
.sl-dialog-btn--primary { background: #008C00; color: #fff; }
.sl-dialog-btn--primary:hover { background: #00a000; }

/* ---------------------------------------------------------------------------
 * Mobile profile editors (final override) — the base editor stacks below 1100px,
 * but per-variant rules (survey/code/etc.) re-declare fixed 2-column px grids
 * AFTER that media query, so they'd overflow on phones. This block is last in the
 * file, so it wins: every variant stacks form-over-preview and fills the width.
 * ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .sl-profile-editor,
    .sl-profile-editor--survey,
    .sl-profile-editor--code,
    .sl-profile-editor--voc,
    .sl-profile-editor--exhibit,
    .sl-profile-editor--misc {
        display: block !important;
        width: 100% !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
    }

    .sl-profile-editor .add-form-left,
    .sl-profile-editor .sl-add-form-left,
    .sl-profile-editor .sl-add-form-left--survey,
    .sl-profile-editor .add-form-right,
    .sl-profile-editor .sl-add-form-right {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-area: auto !important;
    }

    .sl-survey-form-builder,
    .sl-profile-editor--survey .sl-survey-form-builder { max-width: 100% !important; }
}

/* ===== Pictures: uploaded preview shows the IMAGE TILE only (like the Logo preview) —
   no full-width black panel around it. Applies to Pictures / Pictures #2 / VOC pictures. ===== */
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--root:has(.filepond--item) {
    width: 128px !important;
    max-width: 128px !important;
    min-width: 128px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    overflow: hidden !important;
    border-radius: 8px;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--root:has(.filepond--item) .filepond--panel-root {
    background-color: #f3f4f6 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--root:has(.filepond--item) .filepond--image-preview-wrapper,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--root:has(.filepond--item) .filepond--image-preview {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    background-color: #f3f4f6 !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--root:has(.filepond--item) .filepond--file-info,
.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--root:has(.filepond--item) .filepond--file-status {
    display: none !important;
}

.fi-page:has(.sl-profile-editor) .sl-pictures-repeater .filepond--action-remove-item {
    width: 22px !important;
    height: 22px !important;
    box-shadow: none !important;
    background-color: #fff !important;
    color: #6b7280 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 999px !important;
}

/* Safety net: never show FilePond's dark letterbox behind image previews anywhere
   in the profile editor. */
.fi-page:has(.sl-profile-editor) .filepond--image-preview,
.fi-page:has(.sl-profile-editor) .filepond--image-preview-overlay-idle {
    background-color: #f3f4f6 !important;
    color: #f3f4f6 !important;
}