/* Parallax Tools — NetSuite-inspired UI.
 *
 * Layout vocabulary (new shell):
 *   .nx-shell, .nx-header, .nx-brand, .nx-search, .nx-userbar
 *   .nx-menubar, .nx-menu, .nx-menu-trigger, .nx-dropdown, .nx-dropdown-item
 *   .nx-section-label (uppercase divider inside dropdowns)
 *   .nx-page, .nx-page-head, .nx-actions
 *
 * Inner page components keep the legacy .ps-* names from the previous
 * PIA skin so existing eta templates don't need rewrites. They are
 * restyled here to match NetSuite forms (gray section bars, uppercase
 * olive labels, blue primary buttons).
 */

/* =========================================================
 * Design tokens — calibrated from NetSuite reference shots.
 * ========================================================= */
:root {
    --nx-bg: #F7F8FA;
    --nx-card: #FFFFFF;
    --nx-border: #DDE2E7;
    --nx-border-strong: #C3C9D0;
    --nx-divider: #E5E9EE;

    --nx-text: #212529;
    --nx-text-muted: #5C6470;
    --nx-text-subtle: #8C95A0;
    --nx-label: #7A6900; /* the distinctive olive used for ALLCAPS form labels */
    --nx-label-soft: #8E7D1A;

    --nx-primary: #1976D2;          /* Submit-button blue */
    --nx-primary-hover: #1565C0;
    --nx-primary-active: #0D47A1;
    --nx-primary-soft: #E3F0FB;
    --nx-link: #1976D2;

    --nx-header-bg: #FFFFFF;
    --nx-header-fg: #212529;
    --nx-header-border: #DDE2E7;

    --nx-menubar-bg: #3F6A9C;       /* steel blue background bar */
    --nx-menubar-fg: #FFFFFF;
    --nx-menubar-hover-bg: #2F578A;
    --nx-menubar-active-bg: #26466C; /* darker tab when its dropdown is open */

    --nx-dropdown-bg: #FFFFFF;
    --nx-dropdown-fg: #333333;
    --nx-dropdown-hover-bg: #EBEDEF;
    --nx-dropdown-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);

    --nx-section-bar-bg: #DDE3EA;   /* the full-width "NetSuite Configuration" bars */
    --nx-section-bar-fg: #212529;

    --nx-alert-warn-bg: #FFF8E1;
    --nx-alert-warn-bd: #E8D8A0;
    --nx-alert-warn-icon: #C9930A;
    --nx-alert-info-bg: #E3F0FB;
    --nx-alert-info-bd: #B6D4F0;
    --nx-alert-ok-bg: #E8F5E9;
    --nx-alert-ok-bd: #B7DDB9;
    --nx-alert-err-bg: #FDECEC;
    --nx-alert-err-bd: #F3B5B5;

    --nx-success: #2E7D32;
    --nx-error: #C62828;
    --nx-warning: #B26A00;
    --nx-info: #1565C0;

    --nx-radius-sm: 3px;
    --nx-radius: 4px;
    --nx-radius-lg: 6px;
    --nx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --nx-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);

    --nx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Arial, sans-serif;
    --nx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* =========================================================
 * Reset / globals
 * ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--nx-bg);
    font-family: var(--nx-font);
    color: var(--nx-text);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--nx-link); text-decoration: none; }
a:hover { color: var(--nx-primary-hover); text-decoration: underline; }

/* =========================================================
 * App shell
 * ========================================================= */
.nx-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--nx-bg);
}

/* ---------- Global header (white) ---------- */
.nx-header {
    background: var(--nx-header-bg);
    color: var(--nx-header-fg);
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 20px;
    border-bottom: 1px solid var(--nx-header-border);
    flex-shrink: 0;
}
.nx-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--nx-text);
    flex-shrink: 0;
}
.nx-brand:hover { text-decoration: none; color: var(--nx-text); }
.nx-brand-mark {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.nx-brand-sep {
    width: 1px;
    height: 28px;
    background: var(--nx-divider);
    margin: 0 4px;
}
.nx-brand-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--nx-text);
    line-height: 1.1;
    letter-spacing: -0.005em;
}
.nx-brand-text small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--nx-text-muted);
    margin-top: 2px;
    letter-spacing: 0;
}

.nx-search {
    flex: 1;
    max-width: 640px;
    position: relative;
    margin: 0 auto;
}
.nx-search input {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--nx-border-strong);
    color: var(--nx-text);
    padding: 7px 14px 7px 34px;
    border-radius: var(--nx-radius);
    font-family: var(--nx-font);
    font-size: 13px;
    height: 36px;
    transition: border-color .15s, box-shadow .15s;
}
.nx-search input::placeholder { color: var(--nx-text-subtle); }
.nx-search input:focus {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}
.nx-search::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px; height: 14px;
    transform: translateY(-50%);
    background: no-repeat center / contain
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3-3'/></svg>");
}

.nx-userbar {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: var(--nx-text);
    flex-shrink: 0;
}
.nx-userbar a {
    color: var(--nx-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nx-userbar a:hover { color: var(--nx-primary); text-decoration: none; }
/* User menu (avatar + identity, click/hover for dropdown) */
.nx-user-menu {
    position: relative;
    padding-left: 18px;
    border-left: 1px solid var(--nx-divider);
}
.nx-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 6px 8px;
    border-radius: var(--nx-radius);
    cursor: pointer;
    color: var(--nx-text);
    font-family: var(--nx-font);
}
.nx-user-trigger:hover { background: #F3F4F6; }
.nx-user-menu:hover .nx-user-trigger,
.nx-user-menu:focus-within .nx-user-trigger { background: #F3F4F6; }

.nx-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--nx-primary);
    color: #FFF;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nx-avatar-lg { width: 42px; height: 42px; font-size: 16px; }
.nx-id-meta { line-height: 1.2; text-align: left; }
.nx-id-name { font-weight: 600; font-size: 13px; color: var(--nx-text); display: block; }
.nx-id-role { font-size: 11px; color: var(--nx-text-muted); display: block; }
.nx-user-chevron { font-size: 10px; color: var(--nx-text-muted); margin-left: 2px; }

/* User dropdown panel — same hover-reveal pattern as menu cascades */
.nx-user-dropdown {
    right: 0;
    left: auto;
    min-width: 260px;
}
.nx-user-menu:hover > .nx-user-dropdown,
.nx-user-menu:focus-within > .nx-user-dropdown { display: block; }
.nx-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nx-divider);
}
.nx-user-card .nx-id-name { font-size: 14px; }
.nx-user-card .nx-id-role { font-size: 12px; }
.nx-dropdown-sep {
    height: 1px;
    background: var(--nx-divider);
    margin: 4px 0;
}

/* =========================================================
 * Shortcuts dropdown (the star badge → cascaded list)
 * ========================================================= */
.nx-shortcuts-dropdown { min-width: 280px; max-width: 360px; padding-top: 4px; }
.nx-shortcuts-toggle {
    color: var(--nx-dropdown-fg);
    font-weight: 500;
}
.nx-dropdown-empty {
    padding: 10px 16px 12px;
    font-size: 12.5px;
    color: var(--nx-text-muted);
    font-style: italic;
}
.nx-shortcut-row {
    padding-right: 8px;
}
.nx-shortcut-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nx-shortcut-remove {
    background: transparent;
    border: 0;
    color: var(--nx-text-subtle);
    width: 22px; height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: opacity .12s, background .12s, color .12s;
    flex-shrink: 0;
}
.nx-shortcut-row:hover .nx-shortcut-remove { opacity: 1; }
.nx-shortcut-remove:hover {
    background: #F3F4F6;
    color: var(--nx-error);
}

/* =========================================================
 * Recent (clock icon) dropdown
 * ========================================================= */
.nx-recent-dropdown { min-width: 320px; max-width: 420px; }
.nx-recent-row { padding: 8px 14px; gap: 10px; }
.nx-recent-icon {
    width: 18px;
    height: 18px;
    color: var(--nx-text-muted);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nx-recent-icon svg { width: 18px; height: 18px; display: block; }
.nx-recent-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--nx-text);
}
.nx-recent-type {
    color: var(--nx-text-muted);
    font-weight: 400;
    font-size: 12.5px;
}
.nx-recent-row::after {
    content: '\203A';
    margin-left: auto;
    color: var(--nx-text-muted);
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    flex-shrink: 0;
}

/* =========================================================
 * Global search dropdown — matches NetSuite's pattern:
 * Global Search Results + Current Page Results, grouped,
 * with bolded match highlighting.
 * ========================================================= */
.nx-search { position: relative; }
.nx-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--nx-card);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-dropdown-shadow);
    max-height: 540px;
    overflow-y: auto;
    z-index: 200;
    display: none;
}
.nx-search-dropdown.open { display: block; }

.nx-search-group { padding: 4px 0 8px; }
.nx-search-group + .nx-search-group {
    border-top: 1px solid var(--nx-divider);
    padding-top: 8px;
}
.nx-search-group-head {
    padding: 8px 18px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nx-text);
    background: #F4F6F8;
    border-bottom: 1px solid var(--nx-divider);
    display: flex;
    align-items: center;
    gap: 6px;
}
.nx-search-group-head::before {
    content: '▾';
    font-size: 10px;
    color: var(--nx-text-muted);
}

.nx-search-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 18px;
    color: var(--nx-text);
    font-size: 13.5px;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    white-space: normal;
}
.nx-search-item:hover {
    background: var(--nx-dropdown-hover-bg);
    color: var(--nx-text);
    text-decoration: none;
}
.nx-search-type {
    color: var(--nx-text-muted);
    font-weight: 400;
    font-size: 13px;
    flex-shrink: 0;
}
.nx-search-label { color: var(--nx-text); }
.nx-search-label strong { color: var(--nx-text); font-weight: 700; }

.nx-search-empty {
    padding: 14px 18px;
    color: var(--nx-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* =========================================================
 * Menubar — steel-blue strip below the white header
 * ========================================================= */
.nx-menubar {
    background: var(--nx-menubar-bg);
    color: var(--nx-menubar-fg);
    height: 44px;
    display: flex;
    align-items: stretch;
    padding: 0 16px;
    position: relative;
    z-index: 40;
    flex-shrink: 0;
}
.nx-menubar-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    margin-right: 4px;
}
.nx-menubar-icons .nx-icon-btn {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nx-menubar-fg);
    border-radius: 4px;
    text-decoration: none;
    opacity: 1;
}
.nx-menubar-icons .nx-icon-btn:hover { background: var(--nx-menubar-hover-bg); text-decoration: none; }
.nx-menubar-icons .nx-icon-btn.active { background: var(--nx-menubar-active-bg); }

/* Star icon inside a menu wrapper: nx-menu fills the menubar height so
 * the dropdown drops from the bottom of the menubar instead of from
 * the icon. Also highlight the trigger while the dropdown is open. */
.nx-menubar-icons .nx-menu { align-items: center; height: 100%; }
.nx-menubar-icons .nx-menu:hover > .nx-icon-btn,
.nx-menubar-icons .nx-menu:focus-within > .nx-icon-btn {
    background: var(--nx-menubar-active-bg);
}

/* ---------- Top-level menu (hover-activated) ---------- */
.nx-menu {
    position: relative;
    display: flex;
}
.nx-menu-trigger {
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    color: var(--nx-menubar-fg);
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: 0;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}
.nx-menu-trigger:hover { background: var(--nx-menubar-hover-bg); color: var(--nx-menubar-fg); text-decoration: none; }
.nx-menu:hover > .nx-menu-trigger,
.nx-menu:focus-within > .nx-menu-trigger {
    background: var(--nx-menubar-active-bg);
    color: var(--nx-menubar-fg);
}
.nx-menu-trigger[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}
.nx-menu-trigger[aria-disabled="true"]:hover { background: transparent; }

/* ---------- Dropdown panels (cascading) ---------- */
.nx-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--nx-dropdown-bg);
    color: var(--nx-dropdown-fg);
    box-shadow: var(--nx-dropdown-shadow);
    min-width: 220px;
    padding: 4px 0;
    display: none;
    z-index: 100;
}
.nx-menu:hover > .nx-dropdown,
.nx-menu:focus-within > .nx-dropdown { display: block; }
.nx-menu[aria-disabled="true"]:hover > .nx-dropdown { display: none; }

.nx-dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 9px 18px;
    color: var(--nx-dropdown-fg);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    gap: 12px;
}
.nx-dropdown-item:hover,
.nx-dropdown-item.is-open {
    background: var(--nx-dropdown-hover-bg);
    color: var(--nx-dropdown-fg);
    text-decoration: none;
}
.nx-dropdown-item.has-children::after {
    content: '\203A'; /* › Single right-pointing angle bracket */
    margin-left: auto;
    color: var(--nx-text-muted);
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    flex-shrink: 0;
}

/* ---------- Cascading flyout (submenu on hover of an item) ---------- */
.nx-dropdown .nx-dropdown {
    top: -6px; /* align with the parent item top padding */
    left: 100%;
}
.nx-dropdown .nx-cascade {
    position: relative;
}
.nx-cascade > .nx-dropdown { display: none; }
.nx-cascade:hover > .nx-dropdown,
.nx-cascade:focus-within > .nx-dropdown { display: block; }
/* keep the parent item highlighted while its child is open */
.nx-cascade:hover > .nx-dropdown-item { background: var(--nx-dropdown-hover-bg); }

/* Uppercase section divider inside a dropdown column */
.nx-section-label {
    padding: 10px 18px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--nx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 1px solid var(--nx-divider);
    margin-top: 4px;
}
.nx-dropdown > .nx-section-label:first-child {
    border-top: 0;
    margin-top: 0;
}

/* =========================================================
 * Page container + page header
 * ========================================================= */
.nx-page {
    padding: 18px 24px 32px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
}
.nx-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 18px;
}
.nx-page-head h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    color: var(--nx-text);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.nx-page-head h1 .nx-page-icon {
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nx-text-muted);
    flex-shrink: 0;
}
.nx-actions {
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: var(--nx-text);
}
.nx-actions a, .nx-actions span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--nx-text);
}
.nx-actions a::after {
    content: '▾';
    font-size: 10px;
    color: var(--nx-text-muted);
}

/* Secondary breadcrumb (small, between header and page title) */
.nx-crumb {
    font-size: 12px;
    color: var(--nx-text-muted);
    margin-bottom: 4px;
}
.nx-crumb a { color: var(--nx-text-muted); }
.nx-crumb a:hover { color: var(--nx-primary); text-decoration: none; }
.nx-crumb .sep { color: var(--nx-text-subtle); margin: 0 4px; }
.nx-crumb .current { color: var(--nx-text); font-weight: 500; }

/* =========================================================
 * Alerts (NetSuite-style)
 * ========================================================= */
.nx-alert {
    display: flex;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--nx-alert-warn-bd);
    background: var(--nx-alert-warn-bg);
    border-radius: var(--nx-radius);
    margin-bottom: 18px;
    align-items: flex-start;
}
.nx-alert::before {
    content: '!';
    flex-shrink: 0;
    width: 24px; height: 24px;
    background: var(--nx-alert-warn-icon);
    color: #FFF;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.nx-alert-title { font-weight: 700; margin-bottom: 4px; color: var(--nx-text); }
.nx-alert-body { color: var(--nx-text); font-size: 13px; line-height: 1.5; }
.nx-alert.info { background: var(--nx-alert-info-bg); border-color: var(--nx-alert-info-bd); }
.nx-alert.info::before { background: var(--nx-info); content: 'i'; font-style: italic; }
.nx-alert.ok { background: var(--nx-alert-ok-bg); border-color: var(--nx-alert-ok-bd); }
.nx-alert.ok::before { background: var(--nx-success); content: '✓'; }
.nx-alert.err { background: var(--nx-alert-err-bg); border-color: var(--nx-alert-err-bd); }
.nx-alert.err::before { background: var(--nx-error); }

/* =========================================================
 * Footer
 * ========================================================= */
.nx-footer {
    padding: 18px 24px;
    text-align: center;
    color: var(--nx-text-subtle);
    font-size: 12px;
    border-top: 1px solid var(--nx-divider);
    background: var(--nx-card);
}

/* =========================================================
 * Dashboard portlets (top-level home page)
 * ========================================================= */
.nx-dashboard { display: flex; flex-direction: column; gap: 16px; }
.nx-dashboard-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}
@media (max-width: 880px) {
    .nx-dashboard-row { grid-template-columns: 1fr; }
}
.nx-portlet {
    background: var(--nx-card);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-sm);
    overflow: hidden;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}
.nx-portlet-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--nx-divider);
    background: var(--nx-card);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.nx-portlet-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--nx-text);
}
.nx-portlet-link {
    font-size: 12px;
    color: var(--nx-link);
}
.nx-portlet-body { padding: 14px 16px; flex: 1; }
.nx-portlet-empty {
    color: var(--nx-text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    text-align: center;
}
.nx-shortcut-list { list-style: none; margin: 0; padding: 0; }
.nx-shortcut-list li {
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-bottom: 1px solid var(--nx-divider);
}
.nx-shortcut-list li:last-child { border-bottom: 0; }
.nx-shortcut-list a { color: var(--nx-link); font-size: 13.5px; font-weight: 500; }
.nx-shortcut-list .nx-shortcut-desc { font-size: 12px; color: var(--nx-text-muted); }

/* Categorized quick-links inside a portlet — the alternative to the
 * launchpad card grid that repeated category labels. */
.nx-ql-group { margin-bottom: 14px; }
.nx-ql-group:last-child { margin-bottom: 0; }
.nx-ql-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--nx-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--nx-divider);
}
.nx-ql-link {
    display: block;
    padding: 4px 0;
    color: var(--nx-link);
    font-size: 13.5px;
}
.nx-ql-link:hover { color: var(--nx-primary-hover); text-decoration: underline; }

/* Quick action card grid (used in the Quick Actions portlet) */
.nx-quickaction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.nx-quickaction {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    background: var(--nx-card);
    color: var(--nx-text);
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s;
}
.nx-quickaction:hover {
    border-color: var(--nx-primary);
    box-shadow: var(--nx-shadow-sm);
    color: var(--nx-text);
    text-decoration: none;
}
.nx-quickaction-title { font-size: 13.5px; font-weight: 600; color: var(--nx-primary); }
.nx-quickaction-desc { font-size: 12px; color: var(--nx-text-muted); line-height: 1.4; }

/* =========================================================
 * Home hub / launchpad cards
 * ========================================================= */
.nx-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 8px;
}
.nx-hub-card {
    background: var(--nx-card);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: var(--nx-text);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.nx-hub-card:hover {
    border-color: var(--nx-primary);
    box-shadow: var(--nx-shadow);
    color: var(--nx-text);
    text-decoration: none;
}
.nx-hub-card .nx-hub-cat {
    font-size: 11px;
    font-weight: 600;
    color: var(--nx-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nx-hub-card .nx-hub-title { font-size: 15px; font-weight: 600; color: var(--nx-text); }
.nx-hub-card .nx-hub-desc { font-size: 13px; color: var(--nx-text-muted); }

/* =========================================================
 * Legacy .ps-* class shim — these names are still used by all
 * eta templates. Re-skinned here for the NetSuite look.
 * ========================================================= */

/* Outer page chrome (the old PIA frame is now invisible) */
.ps-frame {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--nx-text);
    font-family: var(--nx-font);
    font-size: 14px;
    overflow: visible;
}

/* Legacy title-bar / breadcrumb / page-title are replaced by the
 * global header chrome. Hide them. */
.ps-title-bar { display: none; }
.ps-breadcrumb { display: none; }
.ps-page-title { display: none; }

/* Inner-page tabs (sub-navigation, e.g. Schedules / Recurrences / Calendars) */
.ps-tabs {
    background: transparent;
    border-bottom: 1px solid var(--nx-border);
    display: flex;
    gap: 4px;
    padding: 0 4px;
    margin-bottom: 16px;
}
.ps-tab,
a.ps-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--nx-text-muted);
    cursor: pointer;
    border-radius: 0;
    text-decoration: none;
    margin-bottom: -1px;
    font-weight: 500;
}
a.ps-tab:hover { color: var(--nx-primary); text-decoration: none; }
.ps-tab.active {
    background: transparent;
    color: var(--nx-primary);
    border-bottom-color: var(--nx-primary);
    font-weight: 600;
    margin-bottom: -1px;
}

.ps-content { background: transparent; padding: 0; }

/* Section header bars + panels ----------------------------------- */
.ps-section-header {
    background: var(--nx-section-bar-bg);
    padding: 5px 12px;
    color: var(--nx-section-bar-fg);
    font-size: 12.5px;
    font-weight: 700;
    border: 0;
    border-radius: 2px 2px 0 0;
    margin-top: 14px;
}
.ps-section-header:first-child { margin-top: 0; }
.ps-panel {
    background: var(--nx-card);
    border: 1px solid var(--nx-border);
    border-radius: 0 0 2px 2px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: var(--nx-shadow-sm);
}
/* When a panel directly follows a section-header, snap them together */
.ps-section-header + .ps-panel { margin-top: 0; }
/* Standalone panels (no header above) get the full rounding */
.ps-panel:not(.ps-section-header + .ps-panel) { border-radius: var(--nx-radius); }

/* Forms ---------------------------------------------------------- */
.ps-form-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px;
    padding: 3px 0;
    align-items: center;
}
.ps-form-row > * { justify-self: start; }
.ps-form-row > .ps-input,
.ps-form-row > .ps-textarea,
.ps-form-row > .ps-select { justify-self: stretch; max-width: 520px; }

/* Horizontal filter strip used at the top of list/grid pages.
 * Each .nx-filter-field is a label+input pair sitting inline. */
.nx-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    align-items: flex-end;
    padding: 4px 0 2px;
}
.nx-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.nx-filter-field > label {
    font-size: 11px;
    font-weight: 600;
    color: var(--nx-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.nx-filter-field > .ps-input,
.nx-filter-field > .ps-select { min-width: 120px; width: 100%; }
.nx-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.ps-form-label {
    color: var(--nx-label);
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ps-form-label::after { content: none; }

.ps-input, .ps-select {
    border: 1px solid var(--nx-border-strong);
    background: var(--nx-card);
    padding: 4px 8px;
    font-family: var(--nx-font);
    font-size: 12.5px;
    color: var(--nx-text);
    height: 26px;
    border-radius: 2px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.ps-input:focus, .ps-select:focus, .ps-textarea:focus {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}
.ps-input:disabled, .ps-input.disabled {
    background: #F3F4F6;
    color: var(--nx-text-muted);
}
.ps-input.readonly, .ps-input[readonly] {
    background: #F0F2F5;
    border-color: var(--nx-border);
    color: var(--nx-text-muted);
}
.ps-textarea {
    border: 1px solid var(--nx-border-strong);
    background: var(--nx-card);
    padding: 5px 8px;
    font-family: var(--nx-font-mono);
    font-size: 12px;
    color: var(--nx-text);
    border-radius: 2px;
    width: 100%;
    max-width: 520px;
    line-height: 1.4;
}

/* Buttons -------------------------------------------------------- */
.ps-btn {
    background: var(--nx-primary);
    border: 1px solid var(--nx-primary);
    color: #FFF;
    padding: 5px 14px;
    font-family: var(--nx-font);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    height: 28px;
    transition: background .12s, border-color .12s, box-shadow .12s;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.ps-btn:hover {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #FFF;
    text-decoration: none;
}
.ps-btn:active {
    background: var(--nx-primary-active);
    border-color: var(--nx-primary-active);
}
.ps-btn:disabled {
    background: #E5E7EB;
    border-color: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
    box-shadow: none;
}
/* Secondary look for href-based ps-btn anchors that are essentially nav.
 * NetSuite usually shows secondary actions as plain text links next to
 * the primary, but the existing templates put them in the same .ps-btn,
 * so render them as outlined buttons. */
a.ps-btn[href]:not(.ps-btn-primary) {
    background: var(--nx-card);
    color: var(--nx-text);
    border-color: var(--nx-border-strong);
    box-shadow: none;
}
a.ps-btn[href]:not(.ps-btn-primary):hover {
    background: #F3F4F6;
    color: var(--nx-text);
    border-color: var(--nx-border-strong);
    text-decoration: none;
}

/* Links ---------------------------------------------------------- */
.ps-link { color: var(--nx-link); text-decoration: none; cursor: pointer; }
.ps-link:hover { color: var(--nx-primary-hover); text-decoration: underline; }

/* Tables — NetSuite-style: compact rows, subtle stripe, warm hover */
.ps-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 12.5px;
    background: var(--nx-card);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    overflow: hidden;
    line-height: 1.35;
}
.ps-table th {
    background: #EEF2F6;
    color: var(--nx-text-muted);
    font-weight: 600;
    text-align: left;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--nx-border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ps-table td {
    background: var(--nx-card);
    padding: 4px 10px;
    border: 0;
    border-bottom: 1px solid var(--nx-divider);
    vertical-align: middle;
    color: var(--nx-text);
}
.ps-table tr:last-child td { border-bottom: 0; }
.ps-table tr.alt td { background: #FAFBFD; }
.ps-table tbody tr:hover td { background: #FFF7DC; }
.ps-table tbody tr:hover.alt td { background: #FFF1C2; }

.ps-required::before { content: '* '; color: var(--nx-error); font-weight: 700; }

/* Grid toolbar (above tables) ------------------------------------ */
.ps-grid-toolbar {
    background: transparent;
    padding: 4px 0 8px 0;
    border: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--nx-text-muted);
}
.ps-grid-toolbar > span:first-child {
    color: var(--nx-text);
    font-weight: 600;
    font-size: 13px;
}
/* A .ps-btn sitting in the toolbar (e.g. + New …) renders smaller
 * than the table cells so it doesn't dominate. */
.ps-grid-toolbar .ps-btn {
    height: 24px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}

/* Export badges (CSV / Excel / PDF / Print) — auto-injected into
 * any .ps-grid-toolbar by /static/list-actions.js. */
.nx-export {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
}
.nx-export-btn {
    width: 24px; height: 24px;
    border: 1px solid var(--nx-border);
    background: var(--nx-card);
    border-radius: 3px;
    color: var(--nx-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color .12s, color .12s, background .12s;
    text-decoration: none;
}
.nx-export-btn:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary);
    background: var(--nx-primary-soft);
    text-decoration: none;
}
.nx-export-btn svg { width: 14px; height: 14px; display: block; }
.nx-export-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.ps-search-results {
    border: 1px solid var(--nx-border);
    background: var(--nx-card);
    border-radius: var(--nx-radius);
}

/* Status pills --------------------------------------------------- */
.ps-status-success, .ps-status-error, .ps-status-running, .ps-status-queued {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.02em;
}
.ps-status-success { background: #DCFCE7; color: #166534; }
.ps-status-error   { background: #FEE2E2; color: #991B1B; }
.ps-status-running { background: #DBEAFE; color: #1E40AF; }
.ps-status-queued  { background: #F3F4F6; color: var(--nx-text-muted); }