/* NIDUS modernization — design system v0.5 ("Fillow" reskin)
   Purple/gradient visual language: rounded pill controls, floating
   shadow-driven cards, Poppins typeface — replaces the earlier flat
   navy/steel BFSI look system-wide. The token architecture (anchor colors +
   color-mix() derivation, everything else keyed off --nm-radius/--nm-shadow)
   is unchanged from v0.4, which is what makes this a palette/shape swap
   rather than a rewrite — see the Material Fillow pilot
   (⚡material-fillow-preview.blade.php) this was extracted from. */

:root {
    /* --nm-navy-900 and --nm-teal-600 are the two anchor colors a user can
       override (menu color / accent color, see settings/appearance) — the
       other shades in each family are derived from the anchor via
       color-mix() so overriding just the anchor recolors the whole family.
       Now pointed at the Fillow palette: navy-900 plays "deepest brand
       shade", teal-600 plays "primary accent" — same roles, new colors. */
    --nm-navy-900: #4a3876;
    --nm-navy-700: color-mix(in srgb, var(--nm-navy-900) 78%, white);
    --nm-navy-500: color-mix(in srgb, var(--nm-navy-900) 55%, white);
    --nm-teal-600: #886cc0;
    /* Fixed topbar height — the app shell, mobile sidebar and Fillow-mode
       main offset all derive from this one value. Fillow's header is 63px. */
    --nm-topbar-h: 64px;
    --nm-teal-500: color-mix(in srgb, var(--nm-teal-600) 82%, white);
    --nm-teal-100: color-mix(in srgb, var(--nm-teal-600) 12%, white);
    /* User-overridable content font scale, see settings/appearance. */
    --nm-font-scale: 1;
    --nm-bg: #f3f0f9;
    --nm-surface: #ffffff;
    --nm-border: #ece7f6;
    --nm-border-width: 1px;
    --nm-text: #2b2140;
    --nm-muted: #8b84a0;
    --nm-red-600: #9c2b30;
    --nm-red-100: #f6e9e9;
    --nm-green-600: #2e6b40;
    --nm-green-100: #e8f1e9;
    --nm-amber-600: #85631a;
    --nm-amber-100: #f6f0e0;
    /* New in the Fillow reskin — same red/green/amber pairing pattern,
       needed so .nm-badge-approved (previously a hardcoded literal) can be
       token-driven like every other status badge. */
    --nm-blue-600: #2560c4;
    --nm-blue-100: #e2ecfc;
    /* The one color from the original NIDUS logotype (public/img/NIDUS_text.png)
       carried into the live wordmark — the dot on the "i", nowhere else. */
    --nm-gold: #f6b000;
    --nm-radius: 14px;
    --nm-radius-sm: 10px;
    --nm-radius-btn: 999px;
    --nm-shadow: 0 8px 24px rgba(74, 56, 118, 0.1);
    --nm-shadow-lg: 0 14px 34px rgba(74, 56, 118, 0.18);
    --nm-font-family: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

    /* Type scale. Every size is rem, so browser zoom and a reader's own
       minimum-font-size setting still work; nothing is locked to pixels.
       Reading text is 1rem (16px), the practical floor for body copy at
       phone reading distance — the interface used to sit at 11-13px, which
       is why it read as cramped. Dense surfaces (tables, chips) use
       --nm-fs-md; only uppercase micro-labels go below that. */
    --nm-fs-2xs: 0.75rem;     /* 12px - uppercase micro-labels, badges */
    --nm-fs-xs: 0.8125rem;    /* 13px - column headers, meta */
    --nm-fs-sm: 0.875rem;     /* 14px - secondary text */
    --nm-fs-md: 0.9375rem;    /* 15px - dense rows, controls */
    --nm-fs-base: 1rem;       /* 16px - body and inputs */
    --nm-fs-lg: 1.125rem;     /* 18px */
    --nm-fs-xl: 1.375rem;     /* 22px */
    --nm-fs-2xl: 1.625rem;    /* 26px */
    /* 1.5 is the WCAG text-spacing floor; 1.55 gives paragraphs room without
       loosening dense rows, which set --nm-line-tight instead. */
    --nm-line: 1.55;
    --nm-line-tight: 1.3;
    /* Native form controls (select dropdowns, date/time pickers, etc.) are
       drawn by the OS/browser chrome, not page CSS — without this, they
       silently follow the visitor's system dark-mode setting regardless of
       this page's own (always-light) theme, which is why a plain dropdown
       could render as a jarring black panel. Set on :root rather than
       .nidus-modern so it applies to every page this stylesheet loads on,
       including the login page which uses its own .nm-login-page wrapper. */
    color-scheme: light;
}

/* Only the modern app-shell layout (layouts/modern.blade.php) gets the
   fixed-topbar/fixed-sidebar/scroll-only-content treatment — login, portal,
   and other pages sharing this stylesheet keep normal body scrolling. */
body.nm-app-shell {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

/* Real dark mode (Fillow's sun/moon toggle) — body.nm-dark re-declares the
   same tokens every component rule already reads, so this one block is the
   whole theme. Palette measured from the live Fillow demo after toggling it
   dark: #161717 ground, #202020 surfaces, muted #89879f, purple anchors
   deliberately unchanged (Fillow keeps them too). Independent of the
   Fillow/classic swap — works with either look. Stamped by the layouts from
   users.color_mode; the topbar toggle flips it client-side and persists it. */
body.nm-dark {
    --nm-bg: #161717;
    --nm-surface: #202020;
    --nm-border: #2e2e33;
    --nm-text: #e6e6ea;
    --nm-muted: #89879f;
    --nm-teal-100: rgba(136, 108, 192, 0.18);
    --nm-blue-100: rgba(37, 96, 196, 0.24);
    --nm-red-100: rgba(156, 43, 48, 0.3);
    --nm-green-100: rgba(46, 107, 64, 0.3);
    --nm-amber-100: rgba(133, 99, 26, 0.3);
    --nm-blue-600: #8fb3ff;
    --nm-red-600: #f08a8a;
    --nm-green-600: #7fd39a;
    --nm-amber-600: #e6c073;
    --nm-sidebar-icon-muted-bg: #2e2e33;
    --nm-sidebar-icon-muted-fg: #b3b3b3;
    --nm-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --nm-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.5);
    /* navy-700/500 are mostly secondary text (table cells, labels, chips);
       as mixes toward white they land at ~4:1 on #202020, so lift them. */
    --nm-navy-700: #c4bde0;
    --nm-navy-500: #a79fcc;
    color-scheme: dark;
}

/* ...except where navy-700/500 is a *background* under white text — those
   keep the deep violet so the lifted token above doesn't wash them out. */
body.nm-dark .nm-chip-active,
body.nm-dark .nm-fab-dashboard,
body.nm-dark .nm-overview-tile-indigo,
body.nm-dark .nm-login-card-accent,
body.nm-dark .nm-btn-primary:hover {
    background: var(--nm-navy-900);
}

body.nm-dark .nm-chip-active {
    border-color: var(--nm-navy-900);
}

body.nm-dark .nm-kpi-tile-approved {
    --nm-tile-bg: var(--nm-navy-900);
    background: var(--nm-tile-bg);
}

/* Headings read var(--nm-navy-900) (deep violet) in light mode — on a
   #202020 surface that's near-invisible, and Fillow's own dark mode turns
   card titles white. Lift them to the light text token here; the navy token
   itself stays put because it's also the topbar/hero gradient end. */
body.nm-dark .nm-page-title,
body.nm-dark .nm-list-hero-title,
body.nm-dark .nm-list-hero-stat-value,
body.nm-dark .nm-detail-card-title,
body.nm-dark .nm-section-title,
body.nm-dark .nm-module-card-title,
body.nm-dark .nm-donut-center-value,
body.nm-dark .nm-kpi-value,
body.nm-dark .nm-sidebar-brand-name {
    color: var(--nm-text);
}

/* The sun/moon toggle shows the icon for the mode you'd switch TO. */
body.nm-dark .nm-icon-moon,
body:not(.nm-dark) .nm-icon-sun {
    display: none;
}

/* This stylesheet had no box-sizing reset anywhere, so any width:100% element
   with its own padding/border (e.g. .nm-search-input) renders wider than its
   flex/grid parent by exactly that padding+border amount — invisible when
   there's slack space around it, but a real overlap onto a sibling (the
   status filter chips, in .nm-toolbar) whenever the parent's width is
   actually constrained, which is every list/search page sharing this partial. */
.nidus-modern, .nidus-modern *, .nidus-modern *::before, .nidus-modern *::after {
    box-sizing: border-box;
}

.nidus-modern {
    font-family: var(--nm-font-family);
    font-size: var(--nm-fs-base);
    line-height: var(--nm-line);
    color: var(--nm-text);
    background: var(--nm-bg);
    padding: 24px;
    border-radius: var(--nm-radius);
    zoom: var(--nm-font-scale);
}

/* The login, portal and monitor layouts render outside .nidus-modern but
   load this stylesheet, so they take the same base size and rhythm. */
body.vp-body,
.nm-login-page,
.nm-shell {
    font-size: var(--nm-fs-base);
    line-height: var(--nm-line);
}

/* Toolbar */
.nm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px 24px;
    margin-bottom: 20px;
}

/* Anchors the card/table view toggle flush right instead of `justify-content:
   space-between` spreading only 3 flex groups (search, filters, toggle) across
   the full toolbar width — that left search+filters crowded together on the
   left with a large dead gap before the toggle on wide screens. */
.nm-toolbar .nm-view-toggle {
    margin-left: auto;
}

.nm-search {
    position: relative;
    flex: 0 1 320px;
    max-width: 420px;
}

.nm-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--nm-muted);
    pointer-events: none;
}

.nm-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    background: var(--nm-surface);
    font-size: 1rem;
    color: var(--nm-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nm-search-input:focus {
    outline: none;
    border-color: var(--nm-teal-500);
    box-shadow: 0 0 0 3px var(--nm-teal-100);
}

.nm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: 999px;
    background: var(--nm-surface);
    color: var(--nm-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nm-chip:hover {
    border-color: var(--nm-teal-500);
    color: var(--nm-navy-700);
}

.nm-chip-active {
    background: var(--nm-navy-700);
    border-color: var(--nm-navy-700);
    color: #fff;
}

.nm-chip-count {
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 999px;
}

.nm-chip-active .nm-chip-count {
    background: rgba(255, 255, 255, 0.22);
}

/* Material entry grid: attributes across the top, one line per material.
   The header stays put while the lines scroll; a line with a problem is
   marked on its left edge; optional columns are set quieter than mandatory. */
.nm-entry-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 8px;
}

.nm-entry-grid-wrap {
    overflow: auto;
    max-height: 60vh;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: 8px;
}

.nm-entry-grid {
    margin: 0;
    min-width: 100%;
}

.nm-entry-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--nm-surface);
    white-space: nowrap;
}

.nm-entry-grid td {
    padding: 4px 6px;
    white-space: nowrap;
}

.nm-entry-grid .nm-input {
    min-width: 150px;
    padding: 6px 8px;
    font-size: 0.9rem;
}

.nm-entry-grid-num {
    width: 36px;
    text-align: center;
    color: var(--nm-muted);
}

.nm-entry-grid-optional {
    color: var(--nm-muted);
    font-weight: 500;
}

.nm-entry-grid-desc {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    color: var(--nm-muted);
}

.nm-entry-grid-problem td {
    box-shadow: inset 3px 0 0 var(--nm-red-600);
}

/* Table */
.nm-table-wrap {
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow);
    overflow-x: auto;
}

.nm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.nm-table thead th {
    text-align: left;
    padding: 12px 16px;
    background: var(--nm-bg);
    color: var(--nm-muted);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
}

.nm-table thead th.nm-sortable {
    cursor: pointer;
    user-select: none;
}

.nm-table thead th.nm-sortable:hover {
    color: var(--nm-navy-700);
}

.nm-sort-arrow {
    margin-left: 4px;
    color: var(--nm-teal-600);
}

.nm-table tbody tr {
    border-bottom: 1px solid var(--nm-border);
}

.nm-table tbody tr:last-child {
    border-bottom: none;
}

.nm-table tbody tr:hover {
    background: var(--nm-teal-100);
}

.nm-table td {
    padding: 12px 16px;
    vertical-align: middle;
}

/* Counts in a column line up on their digits and never wrap mid-number. */
.nm-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.nm-mono {
    font-variant-numeric: tabular-nums;
    color: var(--nm-navy-700);
    font-weight: 600;
}

.nm-desc {
    color: var(--nm-text);
    max-width: 360px;
}

.nm-muted {
    color: var(--nm-muted);
}

.nm-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--nm-muted);
}

/* Status badges */
.nm-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--nm-bg);
    color: var(--nm-navy-700);
}

.nm-badge-request {
    background: var(--nm-teal-100);
    color: var(--nm-teal-600);
}

.nm-badge-approved {
    background: var(--nm-blue-100);
    color: var(--nm-blue-600);
}

.nm-badge-complete,
.nm-badge-released {
    background: var(--nm-green-100);
    color: var(--nm-green-600);
}

.nm-badge-reject {
    background: var(--nm-red-100);
    color: var(--nm-red-600);
}

/* Filter chip color accents */
.nm-chip-request:not(.nm-chip-active) { border-color: var(--nm-teal-500); color: var(--nm-teal-600); }
.nm-chip-approved:not(.nm-chip-active) { border-color: var(--nm-navy-500); color: var(--nm-navy-500); }
.nm-chip-complete:not(.nm-chip-active),
.nm-chip-released:not(.nm-chip-active) { border-color: var(--nm-green-600); color: var(--nm-green-600); }
.nm-chip-reject:not(.nm-chip-active) { border-color: var(--nm-red-600); color: var(--nm-red-600); }

/* Actions */
.nm-actions {
    text-align: right;
}

.nm-btn-link {
    color: var(--nm-teal-600);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9375rem;
}

.nm-btn-link:hover {
    color: var(--nm-navy-700);
    text-decoration: underline;
}

/* Workflow status tracker (View/Review pages) */
.nm-progress-tracker {
    display: flex;
    align-items: center;
    margin: 16px 0 20px;
    flex-wrap: wrap;
}

.nm-progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nm-progress-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nm-bg);
    border: var(--nm-border-width) solid var(--nm-border);
    color: var(--nm-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.nm-progress-step-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
}

.nm-progress-step-done .nm-progress-step-dot {
    background: var(--nm-green-100);
    border-color: var(--nm-green-600);
    color: var(--nm-green-600);
}

.nm-progress-step-done .nm-progress-step-label {
    color: var(--nm-text);
}

.nm-progress-step-current .nm-progress-step-dot {
    background: var(--nm-teal-600);
    border-color: var(--nm-teal-600);
    color: #fff;
}

.nm-progress-step-current .nm-progress-step-label {
    color: var(--nm-navy-700);
}

.nm-progress-step-rejected .nm-progress-step-dot {
    background: var(--nm-red-100);
    border-color: var(--nm-red-600);
    color: var(--nm-red-600);
}

.nm-progress-step-rejected .nm-progress-step-label {
    color: var(--nm-red-600);
}

.nm-progress-connector {
    width: 32px;
    height: 2px;
    background: var(--nm-border);
    margin: 0 8px;
    flex-shrink: 0;
}

.nm-progress-connector-done {
    background: var(--nm-green-600);
}

.nm-progress-connector-rejected {
    background: var(--nm-red-600);
}

@media (max-width: 700px) {
    .nm-progress-tracker {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .nm-progress-connector {
        width: 2px;
        height: 16px;
        margin: 0 0 0 13px;
    }
}

/* Create/Edit form-fill progress */
.nm-form-progress {
    margin-bottom: 16px;
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    padding: 12px 16px;
    box-shadow: var(--nm-shadow);
}

.nm-form-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--nm-bg);
    overflow: hidden;
    margin-bottom: 10px;
}

.nm-form-progress-fill {
    height: 100%;
    background: var(--nm-teal-600);
    border-radius: 999px;
    transition: width 0.25s ease;
}

.nm-form-progress-sections {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.nm-form-progress-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--nm-bg);
    color: var(--nm-muted);
    border: var(--nm-border-width) solid var(--nm-border);
}

.nm-form-progress-chip-done {
    background: var(--nm-green-100);
    color: var(--nm-green-600);
    border-color: var(--nm-green-600);
}

.nm-form-progress-percent {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--nm-navy-700);
}

/* Card/table view toggle */
.nm-view-toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--nm-bg);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    padding: 3px;
    margin-left: auto;
}

.nm-view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: calc(var(--nm-radius) - 3px);
    color: var(--nm-muted);
    cursor: pointer;
}

.nm-view-toggle-btn:hover {
    color: var(--nm-navy-700);
}

.nm-view-toggle-btn-active {
    background: var(--nm-surface);
    color: var(--nm-teal-600);
    box-shadow: var(--nm-shadow);
}

.nm-list-view .nm-list-view-table {
    display: none;
}

.nm-list-view[data-nm-view="table"] .nm-card-grid {
    display: none;
}

.nm-list-view[data-nm-view="table"] .nm-list-view-table {
    display: block;
}

/* Request card grid — replaces plain tables on Material's list pages */
.nm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.nm-request-card {
    /* Surface, radius and shadow come from .nm-card now; what remains here is
       what makes it a request card rather than a card. Positioned because the
       approval queue's select checkbox is absolutely placed inside it; without
       this it anchored to whatever ancestor happened to be positioned. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    margin-bottom: 0;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.nm-request-card:hover {
    border-color: var(--nm-teal-500);
}

.nm-request-card-checkbox {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    accent-color: var(--nm-teal-600);
}

.nm-request-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.nm-request-card-id {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-weight: 700;
    color: var(--nm-navy-700);
    font-size: 0.875rem;
}

.nm-request-card-desc {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nm-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nm-request-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--nm-muted);
    margin-top: auto;
    padding-top: 10px;
    border-top: var(--nm-border-width) solid var(--nm-bg);
}

.nm-request-card-action {
    align-self: flex-end;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nm-teal-600);
    text-decoration: none;
}

/* Pagination */
.nm-pagination {
    margin-top: 16px;
}

.nm-pagination nav {
    font-size: 0.9375rem;
}

/* Header bar for the page shell */
.nm-page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 20px;
}

.nm-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nm-navy-900);
    margin: 0;
}

.nm-page-subtitle {
    font-size: 0.9375rem;
    color: var(--nm-muted);
    margin-top: 4px;
}

/* Fillow-mode hero treatment for EVERY .nm-page-header on the site — not
   just the ones going through partials/fillow-page-header.blade.php via the
   shared layout's @section('heading'). Many pages (every Create/Edit form,
   AI-intake pages, portal registration, the client-monitor dashboard) render
   their own .nm-page-header block directly inside their Livewire component,
   often alongside an action button (Save Draft, etc.) that a markup swap
   would risk breaking — so this reaches every one of them, action buttons
   included, with one CSS rule instead of ~16 individual template edits.
   Classic mode is simply never given the .nm-theme-fillow ancestor class
   (see body class in layouts/modern.blade.php), so it keeps today's plain
   look automatically — no separate classic override needed here. */
.nm-theme-fillow .nm-page-header {
    background: linear-gradient(135deg, var(--nm-teal-500) 0%, var(--nm-teal-600) 45%, var(--nm-navy-900) 100%);
    border-radius: var(--nm-radius);
    padding: 24px 28px;
    box-shadow: var(--nm-shadow-lg);
    align-items: center;
}

.nm-theme-fillow .nm-page-title {
    color: #fff;
}

.nm-theme-fillow .nm-page-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* The action button riding alongside the title (Save Draft, etc.) needs to
   read against the new gradient instead of the plain page background. */
.nm-theme-fillow .nm-page-header .nm-btn-secondary {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.nm-theme-fillow .nm-page-header .nm-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.26);
}

/* Fillow-mode hero page header — replaces .nm-page-header above; only ever
   rendered when ui_theme !== 'classic' (see partials/fillow-page-header.blade.php
   and layouts/modern.blade.php), so it needs no theme-scoping of its own. */
.nm-hero-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, var(--nm-teal-500) 0%, var(--nm-teal-600) 45%, var(--nm-navy-900) 100%);
    border-radius: var(--nm-radius);
    padding: 28px 32px;
    color: #fff;
    box-shadow: var(--nm-shadow-lg);
    margin-bottom: 20px;
}

.nm-hero-header-title {
    font-size: 1.625rem;
    font-weight: 700;
    margin: 0;
}

.nm-hero-header-subtitle {
    font-size: 0.9375rem;
    opacity: 0.85;
    margin-top: 6px;
    max-width: 52ch;
}

.nm-hero-header-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nm-hero-stat-chip {
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--nm-radius-sm);
    padding: 10px 16px;
    text-align: center;
    min-width: 76px;
}

.nm-hero-stat-value {
    display: block;
    font-size: 1.3125rem;
    font-weight: 700;
}

.nm-hero-stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
    margin-top: 2px;
}

/* Fillow-mode list-page hero — same visual language, lighter (no full
   gradient) since it sits above a toolbar+table rather than being the
   page's only header. Same classic-mode gating as .nm-hero-header. */
.nm-list-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--nm-surface);
    border-radius: var(--nm-radius);
    padding: 20px 24px;
    box-shadow: var(--nm-shadow);
    margin-bottom: 20px;
    border-top: 3px solid var(--nm-teal-600);
}

.nm-list-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nm-navy-900);
    margin: 0;
}

.nm-list-hero-subtitle {
    font-size: 0.875rem;
    color: var(--nm-muted);
    margin-top: 4px;
}

.nm-list-hero-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nm-list-hero-stat {
    background: var(--nm-teal-100);
    border-radius: var(--nm-radius-sm);
    padding: 8px 14px;
    text-align: center;
    min-width: 64px;
}

.nm-list-hero-stat-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nm-navy-900);
}

.nm-list-hero-stat-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--nm-muted);
    margin-top: 2px;
}

.nm-shell {
    max-width: 1200px;
    margin: 32px auto;
    padding: 0 24px;
}

.nm-topbar {
    background: var(--nm-navy-900);
    color: #fff;
    padding: 0 24px;
    height: var(--nm-topbar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.nm-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
}

.nm-topbar-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background-image: url("../img/nidus/nidus_logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

/* Recreates the legacy logotype (public/img/NIDUS_text.png) as live text —
   lowercase, bold/rounded, with the gold dot-on-i — rather than a raster
   image, so it stays crisp at any size and readable on both light and dark
   surfaces. */
.nm-wordmark {
    font-family: "Baloo 2", "Gantari", sans-serif;
    font-weight: 800;
    text-transform: none;
}

.nm-wordmark-dot {
    color: var(--nm-gold);
}

.nm-topbar-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
}

/* The same client logo on the sign-in page, in the corner a client's own
   artwork tends to put it -- the sign-in card keeps the NIDUS marks. */
.nm-login-client-logo {
    position: absolute;
    top: 22px;
    right: 26px;
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 5px 11px;
    box-sizing: border-box;
    z-index: 2;
}

@media (max-width: 720px) {
    /* The card fills the screen at this width, so a floating mark would land
       on top of it. */
    .nm-login-client-logo { display: none; }
}

/* The client's own logo, at the right of the top bar beside the account
   details -- alongside the NIDUS mark on the left, never in place of it.
   Client artwork is drawn for a white page and this bar is navy, so it sits
   on its own light chip rather than disappearing into the bar. Width is free
   so a wordmark and a square badge both fit; only the height is pinned. */
.nm-topbar-client-logo {
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 4px 9px;
    box-sizing: border-box;
    display: block;
    flex: none;
}

.nm-profile-menu {
    position: relative;
}

.nm-profile-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: var(--nm-teal-600);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

.nm-profile-icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Same drop-down-beneath-the-trigger pattern as .nm-sidebar-flyout, just
   toggled by a click (top-right corner menu, not hover-friendly on touch)
   instead of hover/focus-within. */
.nm-profile-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow-lg);
    padding: 8px;
    min-width: 160px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.nm-profile-dropdown-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nm-profile-dropdown a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--nm-radius-sm);
    color: var(--nm-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.nm-profile-dropdown a:hover {
    background: var(--nm-bg);
}

/* Mobile off-canvas nav: hidden on desktop, shown under the 900px breakpoint below */
.nm-mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--nm-radius-sm);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #fff;
    font-size: 1.0625rem;
    cursor: pointer;
}

.nm-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 19, 0.55);
    z-index: 65;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* App shell: left icon rail (collapsible) + main content. Topbar is fixed
   (see .nm-topbar), so this row is offset below it and bounded to exactly
   the remaining viewport height — .nm-sidebar and .nm-main each scroll
   independently within that fixed height, rather than the whole page
   scrolling (see body's overflow:hidden below). */
.nm-app {
    display: flex;
    align-items: flex-start;
    height: calc(100vh - var(--nm-topbar-h));
    margin-top: var(--nm-topbar-h);
}

/* Fillow mode: the sidebar runs the full viewport height, from the very top
   — its brand band sits in the topbar's row, exactly like Fillow's
   .nav-header. The topbar stays full-width and fixed; the sidebar simply
   stacks above it (z-index) and covers its left edge, so the collapsed /
   expanded widths need no separate topbar offsets. Only .nm-main is pushed
   down below the bar. Classic mode keeps the sidebar under the topbar. */
.nm-theme-fillow .nm-app {
    height: 100vh;
    margin-top: 0;
}

.nm-theme-fillow .nm-sidebar {
    position: relative;
    z-index: 1001;
}

.nm-theme-fillow .nm-main {
    margin-top: var(--nm-topbar-h);
    height: calc(100% - var(--nm-topbar-h));
}

/* Expanded band = exactly the topbar height (40px logo + 12px top/bottom),
   so the lavender band and the navy bar share one bottom edge. */
.nm-theme-fillow .nm-app.nm-sidebar-expanded .nm-sidebar-brand {
    height: var(--nm-topbar-h);
    box-sizing: border-box;
    padding: 12px 16px;
}

/* Collapsed rail: logo and toggle side by side (they fit in the 76px rail)
   rather than stacked, so the band is the same 64px as the topbar there too. */
.nm-theme-fillow .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-brand {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    height: var(--nm-topbar-h);
    box-sizing: border-box;
    padding: 12px 6px;
}

.nm-sidebar {
    width: 76px;
    flex: 0 0 76px;
    background: var(--nm-surface);
    border-right: var(--nm-border-width) solid var(--nm-border);
    padding: 16px 10px;
    height: 100%;
    overflow-y: auto;
    transition: width 0.18s ease, flex-basis 0.18s ease;
}

/* Fillow-mode sidebar brand band — logo + wordmark + tagline + the collapse
   toggle, replacing the plain circle toggle button classic mode still uses
   alone. Matches the reference's own sidebar header treatment: a light
   lavender band, not the dark topbar's colors. Collapses to just the logo
   mark (toggle beneath it) when the rail itself is collapsed, same as every
   nav label already does. Never rendered in classic mode. */
.nm-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--nm-teal-100);
    margin: -16px -10px 16px;
    padding: 16px 10px;
    /* Stays pinned to the top of the sidebar's own scroll area — with 15+
       modules the nav list genuinely scrolls, and the brand band scrolling
       away with it read as the header just vanishing. */
    position: sticky;
    top: -16px;
    z-index: 10;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-brand {
    flex-direction: row;
    padding: 16px;
}

.nm-sidebar-brand-mark {
    display: block;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-image: url("../img/nidus/nidus_logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-brand-mark {
    width: 40px;
    height: 40px;
}

.nm-sidebar-brand-text {
    display: none;
    flex-direction: column;
    min-width: 0;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-brand-text {
    display: flex;
    flex: 1 1 auto;
}

.nm-sidebar-brand-name {
    font-size: 1.3125rem;
    line-height: 1.1;
}

.nm-sidebar-brand-tagline {
    font-size: 0.75rem;
    color: var(--nm-muted);
    margin-top: 2px;
    white-space: nowrap;
}

.nm-app.nm-sidebar-expanded .nm-sidebar {
    width: 224px;
    flex-basis: 224px;
}

.nm-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    margin: 0 auto;
    border-radius: var(--nm-radius-sm);
    border: var(--nm-border-width) solid var(--nm-border);
    background: var(--nm-surface);
    color: var(--nm-muted);
    cursor: pointer;
    font-size: 0.9375rem;
}

/* Standalone (classic mode, or no JS yet applied): keep the old spacing
   below the button so the nav list doesn't crowd it. Inside the Fillow
   brand band the parent's own flex layout handles spacing instead. */
.nm-sidebar > .nm-sidebar-toggle {
    margin: 0 auto 18px;
}

.nm-app.nm-sidebar-expanded .nm-sidebar > .nm-sidebar-toggle {
    margin: 0 0 18px;
}

.nm-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nm-sidebar-item {
    position: relative;
}

.nm-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--nm-radius-sm);
    color: var(--nm-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-link {
    justify-content: flex-start;
    padding: 8px 10px;
}

.nm-sidebar-link:hover {
    background: var(--nm-bg);
}

/* Fillow's reference nav highlights the active item with a fully-rounded
   pill, not just a tinted rounded-rect — and only the active item's icon
   carries color at all (every other item's icon is a muted neutral glyph);
   see .nm-sidebar-icon below for the "grey unless active" half of that. */
.nm-sidebar-item-active > .nm-sidebar-link {
    background: var(--nm-teal-100);
    color: var(--nm-teal-600);
    border-radius: var(--nm-radius-btn);
    font-weight: 700;
    /* inset shadow, not border-left, so it doesn't shift the row's own
       padding/content — matches the reference's left accent bar on its
       active pill. */
    box-shadow: inset 3px 0 0 var(--nm-teal-600);
}

.nm-sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--nm-teal-600);
}

.nm-sidebar-icon-vendor { background: #4a5578; }
.nm-sidebar-icon-customer { background: #7a5f37; }
.nm-sidebar-icon-service { background: #3a6b4f; }
.nm-sidebar-icon-equipment { background: #35617e; }
.nm-sidebar-icon-location { background: #7a4444; }

/* "Grey unless active" — every module keeps its own distinct color (a real,
   pre-existing wayfinding aid for 15+ modules that Fillow's 5-item demo
   nav has no equivalent need for), but only the ACTIVE module actually
   shows it; every other item's icon reads as a plain muted glyph, matching
   the reference's grey-icons-except-active-item look. !important because
   the per-module color rules above match this same .nm-sidebar-icon element
   at equal specificity — this has to win regardless of source order. */
.nm-sidebar-item:not(.nm-sidebar-item-active) .nm-sidebar-icon {
    background: var(--nm-sidebar-icon-muted-bg, #d9d5ea) !important;
    color: var(--nm-sidebar-icon-muted-fg, #6b6485) !important;
}

.nm-sidebar-link:hover .nm-sidebar-icon {
    background: var(--nm-teal-600) !important;
    color: #fff !important;
}

.nm-sidebar-label-text {
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-label-text {
    display: inline;
}

/* Tooltip shown only while the rail is collapsed */
.nm-sidebar-link[data-label]::after {
    content: attr(data-label);
    position: absolute;
    left: 66px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--nm-navy-900);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 40;
    box-shadow: var(--nm-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.nm-sidebar-link[data-label]:hover::after {
    opacity: 1;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-link[data-label]::after {
    display: none;
}

/* Collapsed rail: every module's flyout exists in the DOM (not just the active
   one) so any module's sub-links are reachable via hover/focus, not just the
   one you're currently on. Drops down BENEATH the icon (like the MotaAdmin
   reference's menu) rather than popping out to the side — anchored to the
   item itself via position:absolute so it overlays the content below instead
   of pushing the next sidebar icon down. */
.nm-sidebar-flyout {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow-lg);
    padding: 8px;
    min-width: 176px;
    z-index: 35;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.nm-sidebar-item:hover .nm-sidebar-flyout,
.nm-sidebar-item:focus-within .nm-sidebar-flyout,
.nm-sidebar-item-open .nm-sidebar-flyout,
.nm-sidebar-item-peek .nm-sidebar-flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Expanded rail: the active module's sub-links stay inline and always visible
   (today's page context), while every other module's sub-links collapse to
   zero height and only expand on hover/focus/click — a real dropdown instead
   of either "always shown" or "never reachable". */
.nm-app.nm-sidebar-expanded .nm-sidebar-flyout {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.18s ease;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-item-active .nm-sidebar-flyout,
.nm-app.nm-sidebar-expanded .nm-sidebar-item-open .nm-sidebar-flyout,
.nm-app.nm-sidebar-expanded .nm-sidebar-item:hover .nm-sidebar-flyout,
.nm-app.nm-sidebar-expanded .nm-sidebar-item:focus-within .nm-sidebar-flyout {
    max-height: 300px;
    padding: 4px 0 0;
}

/* Module name at the top of a collapsed-rail flyout. The rail shows only a
   letter, so without it "All Requests / Create / Approve" does not say which
   module those belong to. Hidden wherever the label is already on screen. */
.nm-sidebar-flyout-title {
    display: none;
}

/* Collapsed rail on desktop: flyouts and tooltips open beside the rail, placed
   in viewport coordinates.
   The rail is overflow-y:auto so a long module list can scroll, and a scroll
   container clips on both axes -- overflow-x computes to auto the moment
   overflow-y is set. A ~194px flyout absolutely positioned inside the ~81px
   rail was therefore cut off at the rail's edge on every module, and modules
   low in the list also ran past the bottom of the window. The rail has to stay
   scrollable, so no absolute positioning can escape it; position:fixed can.
   The coordinates come from --nm-flyout-top / --nm-flyout-left / --nm-tip-*,
   which the sidebar script sets from the item on hover and focus and clamps to
   the window. The expanded rail and the <=900px drawer keep their inline
   sub-links and never match these rules. */
@media (min-width: 901px) {
    .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-flyout {
        position: fixed;
        top: var(--nm-flyout-top, 0);
        left: var(--nm-flyout-left, 0);
        right: auto;
        margin-top: 0;
        min-width: 200px;
        max-width: 280px;
        max-height: var(--nm-flyout-max-h, calc(100vh - 24px));
        overflow-y: auto;
        z-index: 1002;
        transform: translateX(-4px);
    }

    .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-item:hover .nm-sidebar-flyout,
    .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-item:focus-within .nm-sidebar-flyout,
    .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-item-open .nm-sidebar-flyout,
    .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-item-peek .nm-sidebar-flyout {
        transform: translateX(0);
    }

    .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-flyout-title {
        display: block;
        padding: 4px 10px 8px;
        margin-bottom: 4px;
        border-bottom: var(--nm-border-width) solid var(--nm-border);
        color: var(--nm-muted);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* Same clip, same escape, for the plain hover label on modules that have
       no sub-links. */
    .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-link[data-label]::after {
        position: fixed;
        left: var(--nm-tip-left, 0);
        top: var(--nm-tip-top, 0);
        z-index: 1002;
    }

    /* A module with sub-links shows its name as the flyout title instead;
       a tooltip on top of that would sit over the first sub-link. */
    .nm-app:not(.nm-sidebar-expanded) .nm-sidebar-link[data-has-children]::after {
        display: none;
    }
}
/* Chevron indicating a module has sub-links — hidden while the rail is
   collapsed (no room, hover/click already reveals the flyout), shown once
   expanded. Points right at rest and rotates down to point at its now-open
   sub-list, matching the reference nav's convention (its own chevrons point
   right until expanded) rather than the previous down-rotating-to-up. */
.nm-sidebar-chevron {
    display: none;
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.15s ease;
    transform: rotate(-90deg);
}

.nm-app.nm-sidebar-expanded .nm-sidebar-chevron {
    display: inline-block;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-item-active .nm-sidebar-chevron,
.nm-app.nm-sidebar-expanded .nm-sidebar-item-open .nm-sidebar-chevron,
.nm-app.nm-sidebar-expanded .nm-sidebar-item:hover .nm-sidebar-chevron {
    transform: rotate(0deg);
}

.nm-sidebar-sublink {
    display: block;
    padding: 7px 10px;
    border-radius: var(--nm-radius-sm);
    color: var(--nm-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

.nm-sidebar-sublink::before {
    content: "- ";
    opacity: 0.6;
}

.nm-app.nm-sidebar-expanded .nm-sidebar-sublink {
    padding-left: 48px;
}

.nm-sidebar-sublink:hover {
    background: var(--nm-bg);
    color: var(--nm-text);
}

.nm-sidebar-sublink.nm-sidebar-link-active {
    background: var(--nm-teal-100);
    color: var(--nm-teal-600);
}

.nm-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
}

/* Click-to-zoom: any <img class="nm-zoomable-image"> opens an enlarged view
   in this overlay on click (see the shared listener in layouts/modern.blade.php).
   Reused wherever a reference image is shown too small to make out detail
   (Material's noun+modifier combo image, the Template Manager's admin
   upload preview) rather than one-off per screen. */
.nm-zoomable-image {
    cursor: zoom-in;
}

.nm-image-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 15, 0.85);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.nm-image-lightbox.nm-image-lightbox-open {
    display: flex;
}

.nm-image-lightbox img {
    max-width: min(90vw, 720px);
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: var(--nm-shadow-lg);
}

.nm-image-lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    color: #fff;
    font-size: 1.875rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.85;
}

.nm-image-lightbox-close:hover {
    opacity: 1;
}

/* Floating round action buttons */
.nm-fab-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 50;
}

.nm-fab {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.375rem;
    text-decoration: none;
    box-shadow: var(--nm-shadow-lg);
    transition: transform 0.15s ease;
}

.nm-fab:hover {
    transform: translateY(-3px);
}

.nm-fab-dashboard { background: var(--nm-navy-700); }
.nm-fab-create { background: var(--nm-teal-600); }

/* Below 900px the rail becomes a genuine off-canvas drawer instead of a
   squished inline row — opened via the topbar hamburger, closed by tapping
   the backdrop or any nav link. */
@media (max-width: 900px) {
    .nm-mobile-nav-toggle { display: flex; }

    .nm-sidebar-toggle { display: none; }

    .nm-app { display: block; }

    .nm-sidebar {
        position: fixed;
        top: var(--nm-topbar-h);
        bottom: 0;
        left: -280px;
        width: 264px;
        flex: none;
        min-height: 0;
        height: calc(100vh - var(--nm-topbar-h));
        z-index: 70;
        border-right: var(--nm-border-width) solid var(--nm-border);
        box-shadow: var(--nm-shadow-lg);
        overflow-y: auto;
        transition: left 0.22s ease;
    }

    body.nm-mobile-nav-open .nm-sidebar {
        left: 0;
    }

    /* On mobile the sidebar is an off-canvas drawer under the topbar in both
       looks, so undo the Fillow full-height treatment here. */
    .nm-theme-fillow .nm-app {
        height: calc(100vh - var(--nm-topbar-h));
        margin-top: var(--nm-topbar-h);
    }

    .nm-theme-fillow .nm-sidebar {
        position: fixed;
        z-index: 70;
    }

    .nm-theme-fillow .nm-main {
        margin-top: 0;
        height: 100%;
    }

    body.nm-mobile-nav-open .nm-sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* A slide-in drawer always shows full labels/sub-links regardless of the
       desktop rail's own collapsed/expanded toggle state. Touch has no hover,
       so the active module's sub-links are shown outright (not hover-gated);
       tapping any other module toggles its own sub-links open (via
       .nm-sidebar-item-open, same click handler as desktop) instead of
       navigating, since "All Requests" is now a real sub-link itself. */
    .nm-sidebar-toggle { display: none; }
    .nm-sidebar-link { justify-content: flex-start; padding: 8px 10px; }
    .nm-sidebar-label-text { display: inline; }
    .nm-sidebar-link[data-label]::after { display: none; }
    .nm-sidebar-chevron { display: inline-block; }
    .nm-sidebar-flyout {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        background: transparent;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.18s ease;
    }
    .nm-sidebar-item-active .nm-sidebar-flyout,
    .nm-sidebar-item-open .nm-sidebar-flyout {
        max-height: 500px;
        padding: 4px 0 0;
    }
    .nm-sidebar-item-active .nm-sidebar-chevron,
    .nm-sidebar-item-open .nm-sidebar-chevron {
        transform: rotate(180deg);
    }
    .nm-sidebar-sublink { padding-left: 48px; }

    .nm-main { width: 100%; }
}

@media (max-width: 480px) {
    .nm-topbar-meta { display: none; }
    /* The bar is tight enough on a phone that the account controls win. */
    .nm-topbar-client-logo { display: none; }
    .nm-fab-stack { right: 16px; bottom: 16px; }
    .nm-fab { width: 46px; height: 46px; font-size: 1.25rem; }
}

/* Detail view */
.nm-detail {
    font-family: var(--nm-font-family);
    color: var(--nm-text);
}

.nm-detail-header {
    margin-bottom: 24px;
}

.nm-detail-title {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--nm-navy-900);
    margin: 8px 0 4px;
}

.nm-detail-sub {
    font-size: 0.9375rem;
    color: var(--nm-muted);
    margin: 0;
}

.nm-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.nm-detail-card {
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow);
    padding: 16px 20px;
    border-top: 3px solid var(--nm-teal-500);
    overflow-x: auto;
}

.nm-detail-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--nm-navy-700);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nm-detail-card-title::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nm-teal-500);
    flex-shrink: 0;
}

/* Read-only attribute grid: label above value, dense multi-column layout
   that genuinely wraps to new rows as needed (unlike a grid-auto-flow:column
   trick, which only ever grows wider and overflows a narrow card). */
.nm-detail-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    column-gap: 20px;
    row-gap: 12px;
}

.nm-field-view {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.nm-field-view-label {
    color: var(--nm-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nm-field-view-value {
    color: var(--nm-text);
    font-weight: 600;
    font-size: 1rem;
    overflow-wrap: break-word;
}

@media (max-width: 700px) {
    .nm-detail-list {
        grid-template-columns: 1fr;
    }
}

/* Forms (create/edit) — rounded pill segmented control */
.nm-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    background: var(--nm-bg);
    border-radius: 999px;
    margin-bottom: 16px;
}

.nm-tab {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 9px 20px;
    background: transparent;
    color: var(--nm-muted);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nm-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nm-tab-active {
    background: var(--nm-teal-600);
    color: #fff;
}

.nm-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

/* auto-fit/minmax rather than a fixed column count: these grids now live
   inside section cards of very different widths (a full-width tab vs. a
   ~320px panel in .nm-section-grid), so a hard repeat(3, 1fr) either crams
   3 columns into a narrow card or stretches 2 fields into unused 1/3 slots. */
.nm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.nm-grid-3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.nm-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Data-entry grid for the master-data forms.
   .nm-grid-3's 160px minimum suits dense read-only panels and is far too tight
   for capture: a GSTIN is fifteen characters and sits beside a Verify button,
   a vendor name runs to sixty, an address line further still. At 160px the
   value is unreadable while being typed, which on a governed master record is
   how a wrong one gets saved. The minimum here is the width of the longest
   value these fields actually hold, and the browser picks the column count
   from it -- fewer, wider columns on a laptop, more on a large monitor.

   min() guards the minimum against containers narrower than it, which would
   otherwise force a horizontal scrollbar rather than a single column. */
.nm-form-grid {
    display: grid;
    gap: 14px 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    margin-bottom: 12px;
    align-items: start;
}

/* Values that do not fit a single track: names, address lines, free text.
   Dropped back to one track on narrow viewports, where the grid is single
   column and spanning two would overflow it. */
.nm-form-grid > .nm-span-2 { grid-column: span 2; }
.nm-form-grid > .nm-span-full { grid-column: 1 / -1; }

/* Two 260px tracks plus the gap need about 540px; below that the grid is a
   single column and spanning two would push past it. */
@media (max-width: 560px) {
    .nm-form-grid > .nm-span-2 { grid-column: auto; }
}

/* Rows of repeating sub-records -- bank accounts, contacts, withholding lines.
   Their remove button belongs on the same baseline as the inputs beside it,
   not stretched to the height of the tallest cell. */
.nm-form-grid.nm-form-row { align-items: end; }


.nm-label {
    font-size: var(--nm-fs-sm);
    font-weight: 600;
    color: var(--nm-navy-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.nm-required { color: var(--nm-red-600); }

/* Input + inline "Verify" button row (GST/PAN lookup fields).
   Two separate problems, and both have bitten. The input must be allowed to
   shrink or its browser-default intrinsic width pushes past the grid column
   and the button rides over the field beside it. And when the column is too
   narrow to hold a fifteen-character GSTIN and a button side by side, the
   button wraps underneath instead of the pair being crushed: a legible field
   on two lines beats an illegible one on one. */
.nm-inline-verify {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* A basis wide enough for the values these fields hold, so the row breaks
   before the input becomes too small to read what is typed in it. */
.nm-inline-verify .nm-input,
.nm-inline-verify .nm-select {
    flex: 1 1 16ch;
    min-width: 0;
}

.nm-inline-verify .nm-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.nm-input, .nm-select {
    font-family: inherit;
    /* What someone types reads at the same size as body copy. */
    font-size: var(--nm-fs-base);
    padding: 7px 10px;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm);
    background: var(--nm-surface);
    color: var(--nm-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nm-input:hover, .nm-select:hover { border-color: var(--nm-teal-500); }

.nm-input:focus, .nm-select:focus {
    outline: none;
    border-color: var(--nm-teal-500);
    box-shadow: 0 0 0 3px var(--nm-teal-100);
}

.nm-select:disabled, .nm-input:disabled, .nm-input[readonly] { background: var(--nm-bg); color: var(--nm-muted); }
.nm-select:disabled:hover, .nm-input:disabled:hover, .nm-input[readonly]:hover { border-color: var(--nm-border); }

/* Grouped field-section panels — each section (Basic View, MRP View 1, ...)
   renders as its own elevated card rather than a flat divided region, and
   .nm-section-grid arranges them side by side like an MDM attribute dashboard. */
.nm-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.nm-section {
    margin: 0 0 12px;
    padding: 14px 16px;
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-left: 3px solid var(--nm-navy-500);
    border-radius: var(--nm-radius-sm);
    box-shadow: var(--nm-shadow);
}

.nm-section-grid > .nm-section {
    margin-bottom: 0;
}

.nm-section:first-child { margin-top: 0; }

.nm-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--nm-navy-900);
    margin: 0 0 14px;
}

.nm-section-title::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nm-navy-500);
    flex-shrink: 0;
}

.nm-section-subtitle {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
}

/* A section nested inside another (e.g. non-mandatory sub-groups) renders as a
   flatter sub-panel rather than stacking full card chrome inside card chrome. */
.nm-section .nm-section-grid .nm-section,
.nm-section .nm-section {
    background: var(--nm-bg);
    border-color: transparent;
    border-left-color: var(--nm-border);
    box-shadow: none;
    padding: 14px 16px;
}

.nm-collapsible-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 0 0 14px;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--nm-navy-900);
    cursor: pointer;
    text-align: left;
}

.nm-collapsible-chevron {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--nm-muted);
    transition: transform 0.15s ease;
}

.nm-collapsible-chevron-open {
    transform: rotate(90deg);
}

/* ------------------------------------------------------------- accordion
   A list of disclosure panels, for a page with more sections than anyone
   wants to scroll past (System Settings has fourteen). Built on native
   <details>/<summary>, which brings the keyboard and screen-reader
   behaviour of the WAI-ARIA disclosure pattern with no script: the summary
   is focusable, Enter and Space toggle it, and assistive technology
   announces the expanded state. The chevron matches .nm-collapsible-chevron
   above so both patterns read the same way. */
.nm-accordion {
    margin: 0 0 8px;
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-left: 3px solid var(--nm-navy-500);
    border-radius: var(--nm-radius-sm);
    box-shadow: var(--nm-shadow);
}

.nm-accordion-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    min-height: 52px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--nm-navy-900);
    cursor: pointer;
    list-style: none;
    border-radius: inherit;
}

/* Safari and Chrome draw their own triangle; this page supplies a chevron. */
.nm-accordion-summary::-webkit-details-marker { display: none; }
.nm-accordion-summary::marker { content: ''; }

.nm-accordion-summary:hover { background: var(--nm-teal-100); }

.nm-accordion-summary:focus-visible {
    outline: 2px solid var(--nm-navy-500);
    outline-offset: -2px;
}

.nm-accordion-chevron {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--nm-muted);
    transition: transform 0.15s ease;
}

.nm-accordion[open] > .nm-accordion-summary > .nm-accordion-chevron {
    transform: rotate(90deg);
}

.nm-accordion-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* How much of a group is filled in, so an unconfigured section is visible
   without opening it. */
.nm-accordion-status {
    flex-shrink: 0;
    font-size: var(--nm-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--nm-muted);
    background: var(--nm-bg);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: 999px;
    padding: 3px 9px;
}

.nm-accordion-status-empty {
    color: var(--nm-amber-600);
    background: var(--nm-amber-100);
    border-color: transparent;
}

.nm-accordion[open] > .nm-accordion-summary {
    border-bottom: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm) var(--nm-radius-sm) 0 0;
}

.nm-accordion-body { padding: 16px; }

/* Text for screen readers only — a column of checkboxes still needs a header
   that says what ticking one does, without a visible label above them. */
.nm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .nm-accordion-chevron { transition: none; }
}

.nm-attr-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    overflow: hidden;
}

.nm-attr-table th, .nm-attr-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--nm-border);
    font-size: 0.9375rem;
}

.nm-attr-table th {
    color: var(--nm-muted);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--nm-bg);
}

.nm-attr-table tbody tr:hover { background: var(--nm-teal-100); }
.nm-attr-table tbody tr:last-child td { border-bottom: none; }

.nm-btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--nm-radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.nm-btn-primary { background: var(--nm-teal-600); color: #fff; }
.nm-btn-primary:hover { background: var(--nm-navy-700); }

/* Was flat white/border — every secondary action across the app (Verify,
   Add Contact, Add Bank Detail, Remove, ...) looked identical and lifeless.
   A light teal tint keeps it clearly subordinate to .nm-btn-primary while
   still reading as an intentional, branded control rather than a plain
   HTML button. */
.nm-btn-secondary {
    background: var(--nm-teal-100);
    color: var(--nm-teal-600);
    border-color: var(--nm-teal-500);
}
.nm-btn-secondary:hover { background: var(--nm-teal-500); color: #fff; }

.nm-btn-danger { background: var(--nm-red-600); color: #fff; }
.nm-btn-danger:hover { background: color-mix(in srgb, var(--nm-red-600) 85%, black); }

/* Topbar icon buttons (Fillow's bell / theme toggle) — translucent white
   discs on the purple bar, same family as the profile avatar button. */
.nm-topbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
}

.nm-topbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.26);
}

.nm-topbar-bell {
    position: relative;
}

.nm-topbar-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--nm-gold);
    color: #1a1330;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-topbar-bell-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow-lg);
    padding: 8px;
    min-width: 280px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nm-topbar-bell-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--nm-radius-sm);
    color: var(--nm-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.nm-topbar-bell-menu a:hover {
    background: var(--nm-bg);
}

.nm-topbar-bell-menu .nm-muted {
    padding: 8px 10px;
    font-size: 0.9375rem;
}

/* Fillow's dashboard grid — wide / narrow 2×2 stat column / wide, as
   measured from the live demo (541 / 255×2 / 541). The wrapper divs in
   admin/index.blade.php are inert plain blocks in classic mode (nothing
   here is scoped to them), so classic keeps its stacked layout untouched;
   explicit grid-row/column placement means DOM order doesn't matter. */
.nm-theme-fillow .nm-dash-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    gap: 16px;
    align-items: start;
}

.nm-theme-fillow .nm-dash-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.nm-theme-fillow .nm-dash-col > * {
    margin: 0;
}

.nm-theme-fillow .nm-dash-grid .nm-dash-col-left {
    grid-column: 1;
    grid-row: 1;
}

.nm-theme-fillow .nm-dash-grid .nm-dash-stats {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-content: start;
    margin: 0;
}

.nm-theme-fillow .nm-dash-grid .nm-dash-col-right {
    grid-column: 3;
    grid-row: 1;
}

@media (max-width: 1100px) {
    .nm-theme-fillow .nm-dash-grid { grid-template-columns: 1fr 1fr; }
    .nm-theme-fillow .nm-dash-grid .nm-dash-col-right { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 900px) {
    .nm-theme-fillow .nm-dash-grid { grid-template-columns: 1fr; }
    .nm-theme-fillow .nm-dash-grid .nm-dash-stats,
    .nm-theme-fillow .nm-dash-grid .nm-dash-col-left,
    .nm-theme-fillow .nm-dash-grid .nm-dash-col-right { grid-column: 1; grid-row: auto; }
}
.nm-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* A "Verified ✓" button (disabled, but signaling success rather than just
   unavailable) reads as done, not merely greyed-out. */
.nm-btn-secondary:disabled {
    background: var(--nm-green-100);
    color: var(--nm-green-600);
    border-color: var(--nm-green-600);
    opacity: 1;
}

.nm-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: var(--nm-teal-100);
    border: var(--nm-border-width) solid var(--nm-teal-500);
    border-radius: var(--nm-radius-sm);
    font-size: 0.9375rem;
}

.nm-bulk-bar-actions { display: flex; gap: 8px; }

.nm-checkbox-col { width: 32px; text-align: center; }

.nm-reject-options { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 18px; }

.nm-reject-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm);
    cursor: pointer;
}

.nm-reject-option-selected { border-color: var(--nm-teal-500); background: var(--nm-teal-100); }

.nm-reject-option strong { display: block; }
.nm-reject-option p { margin: 2px 0 0; color: var(--nm-muted); font-size: 0.8125rem; }

.nm-field-editable { background: var(--nm-teal-100); }

.nm-alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9375rem;
    margin-bottom: 16px;
}

.nm-alert-danger { background: var(--nm-red-100); color: var(--nm-red-600); }

/* The short description's 40-character note: a tag in a grid line, a line under the classic field. */
.nm-desc-trim {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--nm-amber-100, #fef3c7);
    color: var(--nm-amber-800, #92400e);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.nm-desc-trim-note {
    display: block;
    margin-top: 4px;
    color: var(--nm-amber-800, #92400e);
    font-size: 0.8125rem;
}

/* A review page's header with its decision beside the title: text left, the
   Approve/Release, Reject and Back buttons right, wrapping under the text on
   a narrow screen. */
.nm-detail-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px 24px;
    flex-wrap: wrap;
}

.nm-detail-header-actions .nm-detail-header-text {
    flex: 1 1 320px;
    min-width: 0;
}

.nm-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

@media (max-width: 640px) {
    .nm-detail-actions {
        width: 100%;
    }

    .nm-detail-actions .nm-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* A request card's short description: the catalogue's fixed-order code line. */
.nm-request-card-short {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Advanced search: the material-number set and the requester suggestions. */
.nm-as-set {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.nm-as-set-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.nm-as-set-remove {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.7;
}

.nm-as-set-remove:hover { opacity: 1; }

.nm-as-suggest { position: relative; }

.nm-as-suggest-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm);
    box-shadow: var(--nm-shadow-lg);
}

.nm-as-suggest-list button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--nm-text);
    padding: 8px 12px;
    font: inherit;
    cursor: pointer;
}

.nm-as-suggest-list button:hover,
.nm-as-suggest-list button:focus {
    background: var(--nm-bg);
    outline: none;
}

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

.nm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 36, 56, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.nm-modal {
    background: var(--nm-surface);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow-lg);
    padding: 24px;
    max-width: 640px;
    width: 90%;
    max-height: 80vh;
    overflow: auto;
}

/* Select2 restyle — matches .nm-select/.nm-input rather than select2's default theme */
.select2-container--default .select2-selection--single {
    height: auto;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm);
    background: var(--nm-surface);
    padding: 9px 12px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--nm-teal-500);
    box-shadow: 0 0 0 3px var(--nm-teal-100);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--nm-text);
    padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--nm-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
}

.select2-container--disabled .select2-selection--single {
    background: var(--nm-bg);
    color: var(--nm-muted);
}

.nm-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--nm-surface, #fff);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm);
    box-shadow: var(--nm-shadow-lg);
}

.nm-dropdown-item {
    padding: 8px 12px;
    font-size: 0.9375rem;
    cursor: pointer;
}

.nm-dropdown-item:hover {
    background: var(--nm-bg);
}

.select2-dropdown {
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm);
    box-shadow: var(--nm-shadow-lg);
    font-family: inherit;
    overflow: hidden;
}

.select2-search--dropdown {
    padding: 8px;
}

.select2-search--dropdown .select2-search__field {
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--nm-teal-500);
}

.select2-results__option {
    font-size: 1rem;
    padding: 8px 12px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--nm-teal-600);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--nm-teal-100);
    color: var(--nm-navy-900);
}

/* Login pages — benchmarked against connecticons.in: near-black backdrop,
   a fine particle/dot network texture, bold white headline typography, and
   blue/coral accent pops, with a practical light card for the form itself. */
.nm-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #1a1330;
    font-family: var(--nm-font-family);
    padding: 24px;
}

.nm-login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}

.nm-login-page::after {
    content: none;
}

.nm-login-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 64px;
    max-width: 920px;
    width: 100%;
}

.nm-login-pitch {
    flex: 1 1 360px;
    color: #fff;
}

.nm-login-pitch-mark {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background-image: url("../img/nidus/nidus_logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

.nm-login-pitch h2 {
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
}

.nm-login-pitch p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.6;
    max-width: 380px;
    margin: 0;
}

.nm-login-pitch-accent { color: var(--nm-teal-500); }

@media (max-width: 760px) {
    .nm-login-wrap { flex-direction: column; gap: 28px; }
    .nm-login-pitch { text-align: center; }
    .nm-login-pitch-mark { margin: 0 auto 16px; }
    .nm-login-pitch p { margin: 0 auto; }
}

@media (max-width: 480px) {
    /* Keeps the login page to a single screen-height card on small phones —
       the pitch copy is a nice-to-have on larger screens, not essential here. */
    .nm-login-pitch { display: none; }
    .nm-login-page { padding: 16px; }
    .nm-login-card { padding: 8px 20px 24px; }
    .nm-login-card-accent { margin: 0 -20px 22px; }
}

.nm-login-card-col {
    flex: 0 1 380px;
    width: 100%;
}

.nm-login-card {
    width: 100%;
    background: var(--nm-surface);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow-lg);
    padding: 8px 32px 32px;
    overflow: hidden;
}

.nm-login-card-accent {
    height: 4px;
    margin: 0 -32px 28px;
    background: var(--nm-navy-700);
}

.nm-login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.nm-login-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-image: url("../img/nidus/nidus_logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

.nm-login-brand-name {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: var(--nm-text);
}

.nm-login-title {
    margin: 0 0 4px;
    font-size: 1.375rem;
}

.nm-login-subtitle {
    margin: 0 0 24px;
    color: var(--nm-muted);
    font-size: 0.9375rem;
}

.nm-login-form .nm-field {
    margin-bottom: 16px;
}

.nm-login-actions {
    margin-top: 24px;
}

.nm-login-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--nm-muted);
}

.nm-login-page-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
}

.nm-login-page-footer a { color: rgba(255, 255, 255, 0.75); }

/* Dashboard — colorful KPI tiles + module cards */
.nm-overview-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.nm-overview-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--nm-radius);
    padding: 18px 20px;
    color: #fff;
    isolation: isolate;
}

.nm-overview-tile::after {
    content: none;
}

.nm-overview-tile-teal { background: var(--nm-teal-600); }
.nm-overview-tile-indigo { background: var(--nm-navy-700); }
.nm-overview-tile-amber { background: var(--nm-amber-600); }
.nm-overview-tile-rose { background: var(--nm-red-600); }

.nm-overview-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 14px;
}

.nm-overview-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.nm-overview-label {
    margin-top: 4px;
    font-size: 0.875rem;
    opacity: 0.9;
}

.nm-module-card {
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius);
    padding: 20px 22px 22px;
    margin-bottom: 24px;
}

.nm-module-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.nm-module-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
}

.nm-module-icon-material { background: var(--nm-teal-600); }
.nm-module-icon-vendor { background: #4a5578; }
.nm-module-icon-customer { background: #7a5f37; }

.nm-module-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
}

.nm-module-card-body {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr);
    gap: 20px;
}

@media (max-width: 720px) {
    .nm-module-card-body { grid-template-columns: 1fr; }
}

.nm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
    align-content: start;
}

.nm-kpi-tile {
    border-radius: var(--nm-radius-sm);
    padding: 14px 16px;
    color: #fff;
    background: var(--nm-tile-bg, var(--nm-teal-500));
}

.nm-kpi-tile-request { --nm-tile-bg: var(--nm-teal-600); background: var(--nm-tile-bg); }
.nm-kpi-tile-approved { --nm-tile-bg: var(--nm-navy-500); background: var(--nm-tile-bg); }
.nm-kpi-tile-complete { --nm-tile-bg: var(--nm-green-600); background: var(--nm-tile-bg); }
.nm-kpi-tile-reject { --nm-tile-bg: var(--nm-red-600); background: var(--nm-tile-bg); }

.nm-kpi-value {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
}

.nm-kpi-label {
    margin-top: 4px;
    font-size: 0.8125rem;
    opacity: 0.92;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.nm-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px 0;
}

.nm-donut {
    width: 128px;
    height: 128px;
    border-radius: 999px;
    background: conic-gradient(var(--nm-donut-gradient, var(--nm-border) 0deg 360deg));
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-donut-center {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    background: var(--nm-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nm-donut-center-value { font-size: 1.25rem; font-weight: 700; }
.nm-donut-center-label { font-size: 0.75rem; color: var(--nm-muted); text-transform: uppercase; }

.nm-donut-legend { width: 100%; font-size: 0.8125rem; }

.nm-donut-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}

.nm-donut-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}

/* ==========================================================================
   NIDUS loader — the 4-ring brand mark, each ring pulsing in sequence.
   Built from public/img/nidus/ring-{tl,tr,bl,br}.png (cropped quadrants of
   img/nidus/nidus_logo.png) since no animated-GIF tooling (ImageMagick/
   ffmpeg) is available on this box — a CSS animation of the real mark reads
   crisper at any size and needs no re-encoding to reuse everywhere.
   ========================================================================== */
.nm-loader {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4%;
    width: 40px;
    height: 40px;
}

.nm-loader img {
    width: 100%;
    height: 100%;
    display: block;
    animation: nm-loader-pulse 1.1s ease-in-out infinite;
}

.nm-loader img:nth-child(1) { animation-delay: 0s; }
.nm-loader img:nth-child(2) { animation-delay: 0.12s; }
.nm-loader img:nth-child(3) { animation-delay: 0.24s; }
.nm-loader img:nth-child(4) { animation-delay: 0.36s; }

@keyframes nm-loader-pulse {
    0%, 100% { transform: scale(0.55); opacity: .45; }
    50% { transform: scale(1); opacity: 1; }
}

.nm-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-loader-overlay .nm-loader {
    width: 64px;
    height: 64px;
}

.nm-loader-inline {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
}

/* ==========================================================================
   Request dashboard
   Status tiles, a monthly trend line, per-module status mix, today's work.

   Colour is assigned by job, not by taste, and was validated with the
   dataviz palette checker rather than judged by eye:
     - Modules are categorical series in a fixed order that never repaints
       when a deployment licenses fewer of them: Material purple (the brand
       accent), Vendor orange, Customer aqua. Worst adjacent colour-blind
       separation dE 9.2 light / 9.4 dark, normal vision 25.0 / 23.7. Aqua is
       2.82:1 on white, below 3:1, so the chart always ships visible labels and
       a table view.
     - Workflow stages wear the status scale (warning / good / critical) with
       Approved as a neutral in-progress step, and always sit beside a text
       label, so no stage is identified by colour alone.
   Declared on .nm-app-shell rather than :root so the references to
   --nm-surface resolve against body.nm-dark's overrides in dark mode.
   ========================================================================== */
.nm-app-shell {
    --nm-viz-material: #886cc0;
    --nm-viz-vendor: #eb6834;
    --nm-viz-customer: #1baf7a;
    --nm-viz-warning: #fab219;
    --nm-viz-good: #0ca30c;
    --nm-viz-critical: #d03b3b;
    --nm-viz-progress: var(--nm-navy-500);
    --nm-viz-grid: var(--nm-border);
    --nm-viz-axis: color-mix(in srgb, var(--nm-muted) 45%, var(--nm-surface));
}

body.nm-dark {
    --nm-viz-vendor: #d95926;
    --nm-viz-customer: #199e70;
}

.nm-dash2-series-material { --series: var(--nm-viz-material); }
.nm-dash2-series-vendor { --series: var(--nm-viz-vendor); }
.nm-dash2-series-customer { --series: var(--nm-viz-customer); }

.nm-dash2-tone-pending { --tone: var(--nm-viz-warning); }
.nm-dash2-tone-progress { --tone: var(--nm-viz-progress); }
.nm-dash2-tone-good { --tone: var(--nm-viz-good); }
.nm-dash2-tone-critical { --tone: var(--nm-viz-critical); }

.nm-dash2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nm-dash2-card {
    background: var(--nm-surface);
    border-radius: var(--nm-ui-radius);
    box-shadow: var(--nm-ui-shadow);
    padding: 20px 22px;
    min-width: 0;
}

.nm-dash2-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 14px;
}

.nm-dash2-card-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--nm-text);
    text-wrap: balance;
}

.nm-dash2-caption {
    margin: 4px 0 0;
    font-size: 0.875rem;
    color: var(--nm-muted);
}

.nm-dash2-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nm-teal-600);
    text-decoration: none;
    white-space: nowrap;
}

.nm-dash2-link:hover,
.nm-dash2-link:focus-visible {
    text-decoration: underline;
}

/* Status tiles: a surface card with a tinted chip rather than a saturated
   block -- the figure is the loud part, not the fill behind it. */
.nm-dash2-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.nm-dash2-stat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--nm-surface);
    border-radius: var(--nm-ui-radius);
    box-shadow: var(--nm-ui-shadow);
    padding: 18px 20px;
    min-width: 0;
}

.nm-dash2-stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nm-muted);
}

.nm-dash2-stat-value {
    margin-top: 2px;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--nm-text);
}

.nm-dash2-stat-share {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--nm-muted);
}

.nm-dash2-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .nm-dash2-main { grid-template-columns: minmax(0, 1fr); }
}

.nm-dash2-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--nm-text);
}

.nm-dash2-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* A short stroke, mirroring the mark it keys -- a line, not a box. */
.nm-dash2-linekey {
    display: inline-block;
    flex: 0 0 14px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--series);
}

/* ---- Trend line ---------------------------------------------------------- */

.nm-trend-scroll {
    overflow-x: auto;
}

.nm-trend-plot {
    position: relative;
    min-width: 520px;
    border-radius: 8px;
}

.nm-trend-plot:focus-visible {
    outline: 2px solid var(--nm-teal-600);
    outline-offset: 4px;
}

.nm-trend-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.nm-trend-grid line {
    stroke: var(--nm-viz-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
}

.nm-trend-baseline {
    stroke: var(--nm-viz-axis);
    stroke-width: 1;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
}

.nm-trend-tick {
    fill: var(--nm-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.nm-trend-line {
    fill: none;
    stroke: var(--series);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.nm-trend-area {
    fill: var(--series);
    fill-opacity: 0.1;
    stroke: none;
}

.nm-trend-dot {
    fill: var(--series);
    stroke: var(--nm-surface);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.nm-trend-endlabel {
    fill: var(--nm-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.nm-trend-endvalue {
    fill: var(--nm-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.nm-trend-crosshair {
    stroke: var(--nm-viz-axis);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.nm-trend-focus {
    display: none;
}

.nm-trend-plot.is-active .nm-trend-focus {
    display: inline;
}

.nm-trend-hit {
    fill: transparent;
    cursor: crosshair;
}

.nm-trend-tip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    min-width: 150px;
    padding: 8px 10px;
    background: var(--nm-surface);
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: 10px;
    box-shadow: var(--nm-shadow-lg);
    font-size: 0.8125rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.nm-trend-plot.is-active .nm-trend-tip {
    opacity: 1;
    transform: none;
}

.nm-trend-tip-title {
    margin-bottom: 4px;
    font-size: 0.8125rem;
    color: var(--nm-muted);
}

.nm-trend-tip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.nm-trend-tip-row strong {
    min-width: 2ch;
    color: var(--nm-text);
    font-variant-numeric: tabular-nums;
}

.nm-trend-tip-name {
    color: var(--nm-muted);
}

.nm-trend-empty {
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 20px;
    border-radius: var(--nm-radius-sm);
    background: color-mix(in srgb, var(--nm-bg) 55%, var(--nm-surface));
    color: var(--nm-muted);
    font-size: 0.9375rem;
    text-align: center;
}

.nm-trend-note {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: var(--nm-muted);
}

.nm-trend-tableview {
    margin-top: 10px;
    font-size: 0.875rem;
}

.nm-trend-tableview summary {
    cursor: pointer;
    color: var(--nm-teal-600);
    font-weight: 600;
}

.nm-trend-tableview .nm-table-wrap {
    margin-top: 8px;
}

/* ---- Today --------------------------------------------------------------- */

.nm-dash2-today {
    display: flex;
    flex-direction: column;
}

.nm-dash2-today-total {
    margin-top: 10px;
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--nm-text);
}

.nm-dash2-today-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.nm-dash2-today-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-top: var(--nm-border-width) solid var(--nm-border);
    font-size: 0.9375rem;
}

.nm-dash2-today-name {
    flex: 1 1 auto;
    color: var(--nm-text);
}

.nm-dash2-today-count {
    font-weight: 700;
    color: var(--nm-text);
    font-variant-numeric: tabular-nums;
}

/* ---- Modules --------------------------------------------------------------- */

.nm-dash2-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.nm-dash2-module {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nm-dash2-module-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nm-dash2-module-head .nm-dash2-card-title {
    flex: 1 1 auto;
}

.nm-dash2-key {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--series);
}

.nm-dash2-module-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.nm-dash2-module-total-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nm-text);
}

.nm-dash2-module-total-label {
    font-size: 0.875rem;
    color: var(--nm-muted);
}

/* Part-to-whole across the workflow stages. The 2px surface gap separates
   segments; no stroke is drawn around them. */
.nm-dash2-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.nm-dash2-bar-seg {
    flex-basis: 0;
    min-width: 3px;
    background: var(--tone);
}

.nm-dash2-bar-empty {
    flex: 1 1 auto;
    background: var(--nm-viz-grid);
}

.nm-dash2-module-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    margin: 0;
}

.nm-dash2-module-stats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.875rem;
    min-width: 0;
}

.nm-dash2-module-stats dt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--nm-muted);
    font-weight: 500;
}

.nm-dash2-module-stats dd {
    margin: 0;
    font-weight: 700;
    color: var(--nm-text);
    font-variant-numeric: tabular-nums;
}

.nm-dash2-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tone);
}

/* ==========================================================================
   Already-signed-in warning (one account, one session)
   Shown on the login page's own card, so it inherits that page's chrome.
   ========================================================================== */
.nm-session-list {
    margin: 14px 0 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nm-session-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: var(--nm-border-width) solid var(--nm-border);
    border-radius: var(--nm-radius-sm);
    background: color-mix(in srgb, var(--nm-bg) 55%, var(--nm-surface));
}

.nm-session-device {
    font-weight: 600;
    color: var(--nm-text);
    font-size: 0.9375rem;
}

.nm-session-meta {
    font-size: 0.875rem;
    color: var(--nm-muted);
}

.nm-session-footnote {
    margin-top: 14px;
    font-size: 0.875rem;
    color: var(--nm-muted);
    text-align: center;
}

/* ==========================================================================
   Component set — Fillow's shape language on NIDUS's type scale
   Measured from https://fillow.vercel.app; see docs/fillow-component-spec.md.

   What is ported: geometry (radius .625rem, pill 1.875rem), the tint idiom (a
   12% wash of a colour with that colour as the text), the soft card shadow
   0 .3125rem .3125rem rgba(82,63,105,.05), the icon circle, and the spacing
   rhythm. What is not: the template's type scale, which runs .75–.875rem in
   light greys — this is a data-entry system whose tables are read all day, so
   sizes and contrast stay as they are here.

   Tints are color-mix against --nm-surface rather than the template's baked
   hexes, so every variant follows the surface into dark mode on its own.

   Additive by design: nothing here restyles a class an existing screen already
   uses. Screens adopt these as they are touched.
   ========================================================================== */

.nm-app-shell {
    --nm-ui-primary: #886cc0;
    --nm-ui-secondary: #ffa7d7;
    --nm-ui-success: #09bd3c;
    --nm-ui-danger: #fc2e53;
    --nm-ui-warning: #d68e00;
    --nm-ui-info: #d653c1;
    --nm-ui-dark: #312a2a;
    --nm-ui-light: #c8c8c8;
    --nm-ui-radius: 0.625rem;
    --nm-ui-radius-pill: 1.875rem;
    --nm-ui-shadow: 0 0.3125rem 0.3125rem rgba(82, 63, 105, 0.05);
    --nm-ui-shadow-pop: 0 0 3.125rem rgba(82, 63, 105, 0.15);
}

body.nm-dark {
    /* Lifted for the dark surface; the template leaves primary alone, and so
       does this. Warning is already darkened above for contrast on white. */
    --nm-ui-success: #2ad55c;
    --nm-ui-danger: #ff5c7a;
    --nm-ui-warning: #ffc53d;
    --nm-ui-info: #e678d3;
    --nm-ui-dark: #cfc9c9;
    --nm-ui-shadow: 0 0.3125rem 0.3125rem rgba(0, 0, 0, 0.25);
    --nm-ui-shadow-pop: 0 0 3.125rem rgba(0, 0, 0, 0.45);
}

/* Tone carriers. Every component below paints from --tone, so one class sets
   the colour of a button, badge, alert, list item or progress bar alike. */
.nm-tone-primary { --tone: var(--nm-ui-primary); }
.nm-tone-secondary { --tone: var(--nm-ui-secondary); }
.nm-tone-success { --tone: var(--nm-ui-success); }
.nm-tone-danger { --tone: var(--nm-ui-danger); }
.nm-tone-warning { --tone: var(--nm-ui-warning); }
.nm-tone-info { --tone: var(--nm-ui-info); }
.nm-tone-dark { --tone: var(--nm-ui-dark); }

/* ---- Buttons ------------------------------------------------------------- */

.nm-btn-success, .nm-btn-warning, .nm-btn-info, .nm-btn-dark, .nm-btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.625rem 1rem;
    border-radius: var(--nm-ui-radius);
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

.nm-btn-success { background: var(--nm-ui-success); border-color: var(--nm-ui-success); color: #fff; }
.nm-btn-warning { background: var(--nm-ui-warning); border-color: var(--nm-ui-warning); color: #fff; }
.nm-btn-info { background: var(--nm-ui-info); border-color: var(--nm-ui-info); color: #fff; }
.nm-btn-dark { background: var(--nm-ui-dark); border-color: var(--nm-ui-dark); color: var(--nm-surface); }
.nm-btn-light { background: var(--nm-ui-light); border-color: var(--nm-ui-light); color: #312a2a; }

.nm-btn-success:hover, .nm-btn-warning:hover, .nm-btn-info:hover,
.nm-btn-dark:hover, .nm-btn-light:hover { filter: brightness(0.94); }

/* Outline: the colour on nothing, gaining its own fill on hover. */
.nm-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.625rem 1rem;
    border-radius: var(--nm-ui-radius);
    border: 1px solid var(--tone, var(--nm-ui-primary));
    background: transparent;
    color: var(--tone, var(--nm-ui-primary));
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nm-btn-outline:hover {
    background: var(--tone, var(--nm-ui-primary));
    color: #fff;
}

/* Sizes and shapes, applied alongside any button class. */
.nm-btn-xs { padding: 0.1875rem 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.nm-btn-sm { padding: 0.4375rem 0.75rem; font-size: 0.875rem; }
.nm-btn-lg { padding: 0.75rem 1.25rem; font-size: 1.0625rem; }
.nm-btn-pill { border-radius: var(--nm-ui-radius-pill); }
.nm-btn-square { border-radius: 0; }
.nm-btn-block { display: flex; width: 100%; }

/* ---- Button group -------------------------------------------------------- */

.nm-btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.nm-btn-group > * { border-radius: 0; }
.nm-btn-group > *:first-child { border-top-left-radius: var(--nm-ui-radius); border-bottom-left-radius: var(--nm-ui-radius); }
.nm-btn-group > *:last-child { border-top-right-radius: var(--nm-ui-radius); border-bottom-right-radius: var(--nm-ui-radius); }
/* Pull each neighbour onto the previous border so the seam is one line. */
.nm-btn-group > * + * { margin-left: -1px; }
.nm-btn-group > *:hover, .nm-btn-group > *:focus-visible { position: relative; z-index: 1; }

.nm-btn-group-vertical { display: inline-flex; flex-direction: column; }
.nm-btn-group-vertical > * { border-radius: 0; }
.nm-btn-group-vertical > *:first-child { border-top-left-radius: var(--nm-ui-radius); border-top-right-radius: var(--nm-ui-radius); }
.nm-btn-group-vertical > *:last-child { border-bottom-left-radius: var(--nm-ui-radius); border-bottom-right-radius: var(--nm-ui-radius); }
.nm-btn-group-vertical > * + * { margin-top: -1px; }

/* ---- Badges -------------------------------------------------------------- */

/* The template's default badge is a tint, not a fill: a 12% wash with the
   colour itself as the text. Solid is the exception, for counts on a bar. */
.nm-badge-primary, .nm-badge-success, .nm-badge-danger,
.nm-badge-warning, .nm-badge-info, .nm-badge-dark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.25rem 0.625rem;
    border-radius: var(--nm-ui-radius);
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    background: color-mix(in srgb, var(--tone) 12%, var(--nm-surface));
    color: var(--tone);
}

.nm-badge-primary { --tone: var(--nm-ui-primary); }
.nm-badge-success { --tone: var(--nm-ui-success); }
.nm-badge-danger { --tone: var(--nm-ui-danger); }
.nm-badge-warning { --tone: var(--nm-ui-warning); }
.nm-badge-info { --tone: var(--nm-ui-info); }
.nm-badge-dark { --tone: var(--nm-ui-dark); }

.nm-badge-solid { background: var(--tone); color: #fff; }
.nm-badge-outline { background: transparent; border-color: var(--tone); }
.nm-badge-pill { border-radius: var(--nm-ui-radius-pill); }
.nm-badge-sm { padding: 0.125rem 0.4375rem; font-size: 0.8125rem; }
.nm-badge-lg { padding: 0.3125rem 0.75rem; font-size: 0.875rem; }

/* A count circle, as the template uses on icons. */
.nm-badge-circle {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--tone);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ---- Alerts -------------------------------------------------------------- */

.nm-alert-primary, .nm-alert-success, .nm-alert-warning, .nm-alert-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: var(--nm-ui-radius);
    border: 1px solid color-mix(in srgb, var(--tone) 16%, var(--nm-surface));
    background: color-mix(in srgb, var(--tone) 12%, var(--nm-surface));
    color: color-mix(in srgb, var(--tone) 70%, var(--nm-text));
    font-size: 1rem;
    line-height: 1.5;
}

.nm-alert-primary { --tone: var(--nm-ui-primary); }
.nm-alert-success { --tone: var(--nm-ui-success); }
.nm-alert-warning { --tone: var(--nm-ui-warning); }
.nm-alert-info { --tone: var(--nm-ui-info); }

.nm-alert-solid { background: var(--tone); border-color: var(--tone); color: #fff; }
.nm-alert-outline { background: transparent; border-color: var(--tone); color: var(--tone); }
.nm-alert-rounded { border-radius: var(--nm-ui-radius-pill); }

.nm-alert-icon { flex: 0 0 auto; margin-top: 1px; color: var(--tone); }
.nm-alert-body { flex: 1 1 auto; min-width: 0; }
.nm-alert-title { font-weight: 700; margin-bottom: 2px; }

.nm-alert-close {
    flex: 0 0 auto;
    margin: -0.25rem -0.5rem -0.25rem 0;
    padding: 0.25rem 0.5rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}

.nm-alert-close:hover { opacity: 1; }

/* ---- Cards --------------------------------------------------------------- */

/* No border. Separation is the shadow plus the page behind it, which is what
   makes this theme read the way it does. */
.nm-card {
    background: var(--nm-surface);
    border-radius: var(--nm-ui-radius);
    box-shadow: var(--nm-ui-shadow);
    margin-bottom: 0.9375rem;
    min-width: 0;
}

.nm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0.9375rem 1.25rem;
    border-bottom: 1px solid var(--nm-border);
}

.nm-card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nm-text);
    text-wrap: balance;
}

.nm-card-subtitle { margin: 2px 0 0; font-size: 0.875rem; color: var(--nm-muted); }
.nm-card-body { padding: 1.25rem; }
.nm-card-footer { padding: 0.625rem 1.25rem 1.25rem; }
.nm-card-flush { box-shadow: none; }

/* ---- Accordion ----------------------------------------------------------- */

.nm-accordion-item { margin-bottom: 1.25rem; }

.nm-accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 1rem 1.75rem;
    border: 0;
    border-radius: var(--nm-ui-radius);
    background: var(--tone, var(--nm-ui-primary));
    color: #fff;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--tone, var(--nm-ui-primary)) 20%, transparent);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.nm-accordion-button::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s ease;
}

.nm-accordion-item[open] > .nm-accordion-button::after,
.nm-accordion-button[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.nm-accordion-panel {
    padding: 0.875rem 1.25rem;
    color: var(--nm-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* details/summary needs the marker removed to use the caret above. */
details.nm-accordion-item > summary.nm-accordion-button { list-style: none; }
details.nm-accordion-item > summary.nm-accordion-button::-webkit-details-marker { display: none; }

/* ---- List group ---------------------------------------------------------- */

.nm-list-group {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--nm-ui-radius);
}

.nm-list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 1.5rem;
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    color: var(--nm-text);
    font-size: 1rem;
    text-decoration: none;
}

.nm-list-group-item + .nm-list-group-item { border-top: 0; }
.nm-list-group-item:first-child { border-top-left-radius: var(--nm-ui-radius); border-top-right-radius: var(--nm-ui-radius); }
.nm-list-group-item:last-child { border-bottom-left-radius: var(--nm-ui-radius); border-bottom-right-radius: var(--nm-ui-radius); }

.nm-list-group-item-active {
    background: var(--nm-ui-primary);
    border-color: var(--nm-ui-primary);
    color: #fff;
}

/* The template tints the text only on these, leaving the row white. */
.nm-list-group-item-toned { color: color-mix(in srgb, var(--tone) 65%, var(--nm-text)); }

.nm-list-group-flush .nm-list-group-item { border-left: 0; border-right: 0; border-radius: 0; }
.nm-list-group-flush .nm-list-group-item:first-child { border-top: 0; }
.nm-list-group-flush .nm-list-group-item:last-child { border-bottom: 0; }

a.nm-list-group-item:hover { background: color-mix(in srgb, var(--nm-ui-primary) 6%, var(--nm-surface)); }

/* ---- Modal --------------------------------------------------------------- */

.nm-modal-dialog {
    background: var(--nm-surface);
    border-radius: var(--nm-ui-radius);
    box-shadow: var(--nm-ui-shadow-pop);
    max-width: 520px;
    width: 100%;
    margin: auto;
}

.nm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1rem 1.875rem;
    border-bottom: 1px solid var(--nm-border);
}

.nm-modal-title { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--nm-text); }
.nm-modal-body { padding: 1.875rem; color: var(--nm-text); font-size: 1rem; line-height: 1.6; }

.nm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 1rem 1.875rem;
    border-top: 1px solid var(--nm-border);
}

/* ---- Dropdown ------------------------------------------------------------ */

/* No border; a wide soft shadow does the separating. */
.nm-dropdown-menu {
    min-width: 140px;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    background: var(--nm-surface);
    border-radius: var(--nm-ui-radius);
    box-shadow: var(--nm-ui-shadow-pop);
}

.nm-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.375rem 1rem;
    color: var(--nm-text);
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}

.nm-dropdown-link:hover { background: color-mix(in srgb, var(--nm-ui-primary) 8%, var(--nm-surface)); color: var(--nm-ui-primary); }
.nm-dropdown-heading { padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--nm-muted); }
.nm-dropdown-divider { height: 1px; margin: 0.375rem 0; background: var(--nm-border); }

/* ---- Popover ------------------------------------------------------------- */

.nm-popover {
    max-width: 276px;
    border: 1px solid var(--nm-ui-primary);
    border-radius: 0.5rem;
    background: var(--nm-surface);
    box-shadow: 0 0 1.875rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.nm-popover-header {
    padding: 0.5rem 1rem;
    background: var(--nm-ui-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}

.nm-popover-body { padding: 1rem; color: var(--nm-muted); font-size: 0.875rem; line-height: 1.6; }

/* ---- Progress ------------------------------------------------------------ */

.nm-progress {
    height: 8px;
    border-radius: var(--nm-ui-radius);
    background: color-mix(in srgb, var(--nm-border) 55%, var(--nm-surface));
    overflow: hidden;
}

.nm-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--tone, var(--nm-ui-primary));
    transition: width 0.3s ease;
}

.nm-progress-striped .nm-progress-fill {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.18) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.nm-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 0.875rem; color: var(--nm-muted); }

/* ---- Pagination ---------------------------------------------------------- */

.nm-page-list { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

.nm-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    color: var(--nm-text);
    font-size: 1rem;
    text-decoration: none;
}

.nm-page-list > li + li .nm-page-link { margin-left: -1px; }
.nm-page-list > li:first-child .nm-page-link { border-top-left-radius: var(--nm-ui-radius); border-bottom-left-radius: var(--nm-ui-radius); }
.nm-page-list > li:last-child .nm-page-link { border-top-right-radius: var(--nm-ui-radius); border-bottom-right-radius: var(--nm-ui-radius); }
.nm-page-link:hover { background: color-mix(in srgb, var(--nm-ui-primary) 8%, var(--nm-surface)); }

.nm-page-link-active {
    background: var(--nm-ui-primary);
    border-color: var(--nm-ui-primary);
    color: #fff;
}

.nm-page-link-disabled { color: var(--nm-muted); pointer-events: none; opacity: 0.6; }

/* Livewire pages step with buttons rather than links, so the page changes in
   place instead of reloading. A button brings its own font and cursor. */
button.nm-page-link { font: inherit; font-size: 1rem; cursor: pointer; line-height: inherit; }

.nm-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; }
.nm-pagination-summary { font-size: 0.875rem; color: var(--nm-muted); }

/* Tinted and circular variants, as the template offers. */
.nm-pagination-tinted .nm-page-link {
    margin: 0 3px;
    border-color: transparent;
    border-radius: var(--nm-ui-radius);
    background: color-mix(in srgb, var(--nm-ui-primary) 10%, var(--nm-surface));
    color: var(--nm-ui-primary);
}

.nm-pagination-tinted .nm-page-link-active { background: var(--nm-ui-primary); color: #fff; }
.nm-pagination-circle .nm-page-link { margin: 0 3px; border-radius: 999px; }

/* ---- Nav pills ----------------------------------------------------------- */

.nm-nav-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; }

.nm-nav-pill {
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: var(--nm-ui-radius);
    background: color-mix(in srgb, var(--nm-ui-primary) 10%, var(--nm-surface));
    color: var(--nm-ui-primary);
    font: inherit;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.nm-nav-pill-active { background: var(--nm-ui-primary); color: #fff; }

/* ---- Carousel ------------------------------------------------------------ */

/* CSS-only: the track scroll-snaps, so it works without a slider library —
   the same reasoning that keeps the dashboard chart free of one. */
.nm-carousel { position: relative; }

.nm-carousel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--nm-ui-radius);
}

.nm-carousel-track::-webkit-scrollbar { display: none; }

.nm-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: var(--nm-ui-radius);
    overflow: hidden;
}

.nm-carousel-slide > img { display: block; width: 100%; height: auto; border-radius: var(--nm-ui-radius); }

.nm-carousel-caption {
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

/* Bars, not dots — the template's own indicator shape. */
.nm-carousel-indicators { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }

.nm-carousel-dot {
    width: 30px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: color-mix(in srgb, var(--nm-ui-primary) 25%, var(--nm-surface));
    cursor: pointer;
}

.nm-carousel-dot-active { background: var(--nm-ui-primary); }

/* ---- Widget icon --------------------------------------------------------- */

/* The stat-widget idiom: a circle of the colour at 10% with the glyph in the
   full colour. Used by the dashboard tiles and anywhere a figure needs a face. */
.nm-widget-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tone, var(--nm-ui-primary)) 12%, var(--nm-surface));
    color: color-mix(in srgb, var(--tone, var(--nm-ui-primary)) 75%, var(--nm-text));
}

.nm-widget-icon-lg { width: 4.5rem; height: 4.5rem; }

/* The list toolbars sit in a card of their own; .nm-card carries no padding
   (its body normally does), and .nm-toolbar has none either, so without this
   the search box would touch the card's edge. */
.nm-toolbar-card {
    padding: 16px 18px;
}

.nm-toolbar-card > .nm-toolbar:last-child {
    margin-bottom: 0;
}

/* .nm-card carries no padding of its own (its body normally supplies it).
   A screen converting from .nm-detail-card wants the padding without having to
   wrap its contents in a body element, which on a form full of @field blocks
   would mean moving closing tags around — the exact edit that has broken
   Livewire's single-root rule here before. */
.nm-card-padded {
    padding: 16px 20px;
}

/* Form sections inside a converted card: the card supplies the surface, so the
   section keeps only its left accent and spacing rather than stacking a second
   border and shadow on top of the first. */
.nm-card .nm-section {
    border: 0;
    border-left: 3px solid var(--nm-navy-500);
    border-radius: var(--nm-ui-radius);
    box-shadow: none;
    background: color-mix(in srgb, var(--nm-bg) 45%, var(--nm-surface));
}

/* ---------------------------------------------------------------- phones
   Two things that only matter on a touch screen:

   - Form controls at 1rem. iOS Safari zooms the page when a field smaller
     than 16px takes focus, which leaves the layout scrolled sideways and
     the rest of the form off-screen.
   - Tap targets of at least 44px. Anything smaller is hard to hit
     accurately, and buttons here are sized by padding alone. */
@media (max-width: 768px) {
    .nm-input,
    .nm-select,
    select.nm-input,
    textarea.nm-input,
    .nm-search-input {
        font-size: var(--nm-fs-base);
    }

    .nm-btn,
    .nm-tab,
    .nm-page-link,
    .nm-profile-icon-btn,
    .nm-mobile-nav-toggle {
        min-height: 44px;
    }

    /* Fields are sized by padding alone, which leaves them at 41px here.
       They are tapped as often as the buttons, so they get the same floor. */
    .nm-input,
    .nm-select,
    select.nm-input {
        min-height: 44px;
    }

    .nm-btn-sm {
        min-height: 38px;
    }

    /* Long headings wrap rather than shrink the page. Section and card titles
       are included because a heading like "SAP Gateway connection (Vendor/
       Customer/Material/...)" is one unbroken token to the line breaker, and
       it dragged the whole settings page 161px sideways. */
    .nm-page-title,
    .nm-hero-header-title,
    .nm-list-hero-title,
    .nm-section-title,
    .nm-detail-card-title {
        overflow-wrap: anywhere;
    }

    /* A tab strip (the create-request stepper, list filters) is wider than a
       phone. Two things went wrong at the larger type size: each label wrapped
       to three lines, making 110px-tall pills, and the strip dragged the whole
       content area sideways to reach the last tabs. Keep labels on one line
       and let the strip scroll on its own. */
    .nm-tabs {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nm-tab {
        white-space: nowrap;
    }
}

/* ------------------------------------------------------------- login page
   The login page renders outside .nidus-modern, so it never inherited that
   wrapper's border-box sizing: .nm-login-card is width:100% *plus* 64px of
   padding, which on a 375px phone drew a 407px card with its right edge cut
   off. The phone padding override existed already but sat above the base
   rule in this file, so the cascade discarded it; it is restated here, after
   the rules it overrides. */
.nm-login-page,
.nm-login-page *,
.nm-login-page *::before,
.nm-login-page *::after {
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .nm-login-page {
        padding: 16px;
    }

    .nm-login-card {
        padding: 8px 20px 24px;
    }

    .nm-login-card-accent {
        margin: 0 -20px 22px;
    }
}

/* ---- Saved views (lists, queues, search) ---- */
.nm-saved-views { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; width: 100%; }
.nm-saved-views-select { width: auto; min-width: 200px; max-width: 320px; }
.nm-saved-views-save { display: flex; gap: 6px; align-items: center; }
.nm-saved-views-save .nm-input { width: 210px; }
.nm-saved-views-manage { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--nm-border, #e5e7eb); border-radius: var(--nm-radius-sm, 6px); }
.nm-saved-views-row { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; }
.nm-saved-views-row > span { flex: 1; }
@media (max-width: 640px) {
    .nm-saved-views-select, .nm-saved-views-save .nm-input { width: 100%; max-width: none; }
    .nm-saved-views-save { width: 100%; }
}

/* ---- Keyboard hint under the material entry grid ---- */
.nm-entry-grid-keys { font-size: 0.8125rem; }

/* ---- In-app help ---- */
.nm-help { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 20px; align-items: start; }
.nm-help-toc { position: sticky; top: 16px; padding: 14px 16px; grid-row: 1 / span 12; }
.nm-help-toc ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.9375rem; }
.nm-help-section { grid-column: 2; max-width: 78ch; scroll-margin-top: 16px; }
.nm-help-section h2 { margin: 6px 0 8px; font-size: 1.25rem; }
.nm-help-section li { margin-bottom: 8px; line-height: 1.55; }
.nm-help kbd { font-family: var(--nm-font-mono, ui-monospace, monospace); font-size: 0.8125rem; padding: 1px 6px; border: 1px solid var(--nm-border, #d1d5db); border-bottom-width: 2px; border-radius: 4px; background: var(--nm-surface, #fff); }
.nm-help-section:target h2 { color: var(--nm-accent, #2563eb); }
@media (max-width: 860px) {
    .nm-help { grid-template-columns: 1fr; }
    .nm-help-toc { position: static; }
    .nm-help-section { grid-column: 1; }
}
.nm-help-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; text-decoration: none; color: inherit; border: 1px solid currentColor; opacity: .75; }
.nm-help-link:hover, .nm-help-link:focus-visible { opacity: 1; }

/* ---- Language switch in the profile menu ---- */
.nm-profile-lang { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--nm-border, #e5e7eb); font-size: 0.8125rem; }
.nm-profile-lang > span { opacity: .7; margin-right: 2px; }
.nm-profile-lang button { background: none; border: 1px solid transparent; border-radius: 4px; padding: 2px 6px; cursor: pointer; color: inherit; font: inherit; }
.nm-profile-lang button[aria-current="true"] { border-color: currentColor; font-weight: 600; }
.nm-profile-lang button:focus-visible { outline: 2px solid var(--nm-accent, #2563eb); outline-offset: 1px; }

/* ---- Support assistant (components/⚡support-assistant) ------------------
   A chat app in the NIDUS palette: violet header with the assistant's
   identity, a tinted conversation well, white bubbles for the assistant and
   violet ones for the user, suggestion cards, a typing indicator and a
   rounded composer. Every colour comes from the --nm tokens, so body.nm-dark
   re-themes it; the header's violet is the brand and stays. */
.nma { --nma-accent: var(--nm-teal-600); --nma-deep: var(--nm-navy-900); --nma-online: #2fbf71;
    --nma-well: color-mix(in srgb, var(--nm-bg) 70%, var(--nm-surface));
    display: flex; flex-direction: column; height: clamp(560px, 74vh, 760px); margin-bottom: 20px;
    background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: 22px; box-shadow: var(--nm-shadow-lg); overflow: hidden; }
body.nm-dark .nma { --nma-well: #19191b; }

.nma-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 20px 26px; color: #fff;
    background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--nma-accent) 85%, white) 0%, var(--nma-accent) 38%, var(--nma-deep) 100%); }
.nma-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px; background: var(--nma-well); border-radius: 16px 16px 0 0; }
.nma-avatar { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    color: #fff; background: linear-gradient(135deg, var(--nma-accent), var(--nma-deep)); box-shadow: 0 4px 10px rgba(74, 56, 118, .25); }
.nma-avatar svg { width: 18px; height: 18px; }
.nma-head .nma-avatar { width: 44px; height: 44px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.nma-head .nma-avatar svg { width: 22px; height: 22px; }
.nma-online { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--nma-online); box-shadow: 0 0 0 2px var(--nma-deep); }
.nma-title { flex: 1; min-width: 0; }
.nma-name { font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; }
.nma-status { font-size: .8rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nma-icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
    color: inherit; background: rgba(255, 255, 255, .14); transition: background .15s; }
.nma-icon-btn:hover { background: rgba(255, 255, 255, .26); }
.nma-icon-btn svg { width: 18px; height: 18px; }
.nma-send:focus-visible, .nma-card:focus-visible, .nma-thumb:focus-visible { outline: 2px solid var(--nma-accent); outline-offset: 2px; }
.nma-head .nma-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nma-log { flex: 1; overflow-y: auto; padding: 18px 20px 8px; background: var(--nma-well); display: flex; flex-direction: column; gap: 14px; }
.nma-hello { margin: auto 0; padding: 8px 4px 4px; }
.nma-hello h3 { margin: 0 0 4px; font-size: 1.45rem; font-weight: 600; color: var(--nm-text); text-wrap: balance; }
.nma-hello p { margin: 0 0 16px; color: var(--nm-muted); }
.nma-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nma-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; cursor: pointer; font: inherit; color: var(--nm-text);
    background: var(--nm-surface); border: 1px solid var(--nm-border); border-radius: 16px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.nma-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--nma-accent) 45%, var(--nm-border)); box-shadow: var(--nm-shadow); }
.nma-card-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--nma-accent); background: var(--nm-teal-100); }
.nma-card-icon svg { width: 18px; height: 18px; }
.nma-card-text { display: block; min-width: 0; }
.nma-card-text strong { display: block; font-weight: 600; font-size: .92rem; color: var(--nm-text); }
.nma-card-sub { display: block; font-size: .83rem; color: var(--nm-muted); margin-top: 2px; }

.nma-row { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; }
.nma-row-user { flex-direction: row-reverse; }
.nma-stack { display: flex; flex-direction: column; gap: 4px; max-width: min(72%, 640px); min-width: 0; }
.nma-row-user .nma-stack { align-items: flex-end; }
.nma-bubble { padding: 11px 15px; border-radius: 18px; line-height: 1.55; font-size: .95rem; overflow-wrap: anywhere; }
.nma-bubble-bot { color: var(--nm-text); background: var(--nm-surface); border: 1px solid var(--nm-border); border-bottom-left-radius: 6px; box-shadow: 0 2px 6px rgba(74, 56, 118, .06); }
.nma-bubble-user { color: #fff; white-space: pre-wrap; border-bottom-right-radius: 6px;
    background: linear-gradient(135deg, var(--nma-accent), color-mix(in srgb, var(--nma-accent) 60%, var(--nma-deep))); box-shadow: 0 4px 12px rgba(74, 56, 118, .22); }
.nma-bubble-failed { border-color: color-mix(in srgb, var(--nm-red-600) 45%, var(--nm-border)); background: var(--nm-red-100); }
.nma-bubble p { margin: 0 0 8px; } .nma-bubble p:last-child { margin-bottom: 0; }
.nma-bubble ul, .nma-bubble ol { margin: 4px 0 8px; padding-left: 20px; } .nma-bubble li { margin: 2px 0; }
.nma-bubble a { color: var(--nma-accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
body.nm-dark .nma-bubble a { color: #c3b1ec; }
.nma-bubble code { font-size: .85em; padding: 1px 5px; border-radius: 5px; background: var(--nm-teal-100); }
.nma-time { font-size: .72rem; color: var(--nm-muted); padding: 0 6px; font-variant-numeric: tabular-nums; }

.nma-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.nma-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--nma-accent); opacity: .35; animation: nma-dot 1.2s infinite ease-in-out; }
.nma-typing i:nth-child(2) { animation-delay: .15s; } .nma-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nma-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
.nma-enter { animation: nma-in .22s ease-out both; }
@keyframes nma-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.nma-ticket { padding: 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--nm-surface); border: 1px solid color-mix(in srgb, var(--nma-accent) 35%, var(--nm-border)); }
.nma-ticket h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .98rem; font-weight: 600; color: var(--nm-text); }
.nma-ticket h4 svg { width: 18px; height: 18px; color: var(--nma-accent); }
.nma-ticket p { margin: 0 0 10px; font-size: .85rem; color: var(--nm-muted); }
.nma-ticket .nm-field { margin-bottom: 10px; }
.nma-ticket-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.nma-composer-wrap { padding: 12px 16px 10px; background: var(--nm-surface); border-top: 1px solid var(--nm-border); }
.nma-composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 26px; background: var(--nma-well);
    border: 1px solid var(--nm-border); transition: border-color .15s, box-shadow .15s; }
.nma-composer:focus-within { border-color: var(--nma-accent); box-shadow: 0 0 0 4px var(--nm-teal-100); }
.nma-composer textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--nm-text); font: inherit; font-size: .95rem;
    line-height: 1.45; padding: 9px 0; max-height: 140px; min-height: 22px; }
.nma-composer textarea::placeholder { color: var(--nm-muted); }
.nma-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
    background: linear-gradient(135deg, var(--nma-accent), var(--nma-deep)); box-shadow: 0 4px 12px rgba(74, 56, 118, .3); transition: transform .15s, opacity .15s; }
.nma-send:hover { transform: scale(1.05); } .nma-send:disabled { opacity: .45; cursor: default; transform: none; }
.nma-send svg { width: 18px; height: 18px; }
.nma-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: center; margin-top: 8px; padding: 0 6px; font-size: .78rem; color: var(--nm-muted); }
.nma-link { all: unset; cursor: pointer; font-weight: 500; color: var(--nma-accent); text-decoration: underline; text-underline-offset: 2px; }
.nma-link:focus-visible { outline: 2px solid var(--nma-accent); outline-offset: 2px; border-radius: 2px; }
body.nm-dark .nma-link { color: #c3b1ec; }
.nma-rate { display: inline-flex; align-items: center; gap: 6px; }
.nma-thumb { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--nm-border); background: var(--nm-surface); color: var(--nm-muted); cursor: pointer; }
.nma-thumb svg { width: 14px; height: 14px; }
.nma-thumb[aria-pressed="true"] { color: #fff; background: var(--nma-accent); border-color: var(--nma-accent); }
.nma-error { margin: 8px 6px 0; font-size: .85rem; color: var(--nm-red-600); }

/* The header's Ask pill, beside the ? */
.nm-ask-link { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; text-decoration: none;
    font-size: .8rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--nm-teal-600), var(--nm-navy-900)); box-shadow: 0 3px 10px rgba(74, 56, 118, .25); }
.nm-ask-link:hover { filter: brightness(1.08); }
.nm-ask-link:focus-visible { outline: 2px solid var(--nm-teal-600); outline-offset: 2px; }
.nm-ask-link svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
    .nma { height: calc(100vh - var(--nm-topbar-h) - 40px); border-radius: 16px; }
    .nma-head { padding: 12px 14px 22px; } .nma-log { padding: 14px 12px 6px; } .nma-stack { max-width: 86%; }
    .nma-composer-wrap { padding: 10px; } .nma-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .nma-typing i, .nma-enter { animation: none; } .nma-card, .nma-send { transition: none; }
}

/* ---- Support assistant widget (layouts/modern) ---------------------------
   A round launcher at the bottom right of every page; it opens the chat box
   above it, anchored to the launcher, and turns into a close button. Above
   the sidebar and topbar (1000s), below the loading overlay and modals. On a
   phone the box takes the whole screen. */
.nmw { position: fixed; right: 24px; bottom: 24px; z-index: 1500; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }
.nmw > * { pointer-events: auto; }
.nmw, .nmw * { box-sizing: border-box; }
.nmw { font-family: var(--nm-font-family); font-size: var(--nm-fs-base); line-height: var(--nm-line); color: var(--nm-text); }
.nmw-launcher { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
    background: radial-gradient(120% 120% at 20% 15%, color-mix(in srgb, var(--nm-teal-600) 80%, white) 0%, var(--nm-teal-600) 45%, var(--nm-navy-900) 100%);
    box-shadow: 0 10px 28px rgba(74, 56, 118, .38), 0 2px 6px rgba(74, 56, 118, .25); transition: transform .2s ease, box-shadow .2s ease; }
.nmw-launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 34px rgba(74, 56, 118, .45), 0 2px 6px rgba(74, 56, 118, .25); }
.nmw-launcher:focus-visible { outline: 3px solid color-mix(in srgb, var(--nm-teal-600) 45%, white); outline-offset: 3px; }
.nmw-launcher svg { position: absolute; width: 26px; height: 26px; transition: transform .25s ease, opacity .2s ease; }
.nmw-launcher .nmw-icon-close { width: 22px; height: 22px; opacity: 0; transform: rotate(-90deg) scale(.6); }
.nmw-open .nmw-launcher .nmw-icon-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.nmw-open .nmw-launcher .nmw-icon-close { opacity: 1; transform: none; }
.nmw-launcher::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--nm-teal-600) 45%, transparent); animation: nmw-pulse 2.6s ease-out 1s 2; }
@keyframes nmw-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nm-teal-600) 45%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.nmw-label { position: absolute; right: 70px; bottom: 14px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 500;
    color: var(--nm-text); background: var(--nm-surface); border: 1px solid var(--nm-border); box-shadow: var(--nm-shadow); opacity: 0; transform: translateX(6px); transition: opacity .15s, transform .15s; pointer-events: none; }
.nmw:not(.nmw-open) .nmw-launcher:hover + .nmw-label, .nmw:not(.nmw-open) .nmw-launcher:focus-visible + .nmw-label { opacity: 1; transform: none; }

.nmw-panel { width: 400px; height: min(640px, calc(100vh - 130px)); transform-origin: bottom right; }
.nmw-panel .nma { height: 100%; margin: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(40, 28, 72, .28), 0 4px 14px rgba(40, 28, 72, .12); }
body.nm-dark .nmw-panel .nma { box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px #2e2e33; }
.nmw-panel .nma-head { padding: 14px 14px 24px 16px; gap: 12px; }
.nmw-panel .nma-head .nma-avatar { width: 40px; height: 40px; }
.nmw-panel .nma-icon-btn { width: 32px; height: 32px; }
.nmw-panel .nma-icon-btn svg { width: 16px; height: 16px; }
.nmw-panel .nma-log { padding: 14px 14px 6px; gap: 12px; }
.nmw-panel .nma-stack { max-width: 84%; }
.nmw-panel .nma-bubble { font-size: .9rem; padding: 10px 13px; }
.nmw-panel .nma-hello h3 { font-size: 1.2rem; }
.nmw-panel .nma-hello p { font-size: .88rem; margin-bottom: 12px; }
.nmw-panel .nma-cards { grid-template-columns: 1fr; gap: 8px; }
.nmw-panel .nma-card { padding: 10px 12px; border-radius: 14px; align-items: center; }
.nmw-panel .nma-card-icon { width: 30px; height: 30px; border-radius: 9px; }
.nmw-panel .nma-composer-wrap { padding: 10px 12px 8px; }
.nmw-panel .nma-foot { font-size: .72rem; padding: 0 4px; }
.nma-loading .nma-head .nma-avatar { background: rgba(255, 255, 255, .18); }
.nma-loading .nma-send { opacity: .45; }

.nmw-enter { transition: opacity .18s ease, transform .22s cubic-bezier(.2, .9, .3, 1.2); }
.nmw-enter-start { opacity: 0; transform: translateY(12px) scale(.96); }
.nmw-leave { transition: opacity .12s ease, transform .12s ease; }
.nmw-leave-end { opacity: 0; transform: translateY(8px) scale(.98); }

/* The Support page's pointer to the widget. */
.nma-promo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 16px; border-radius: 18px; color: #fff;
    background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--nm-teal-600) 85%, white) 0%, var(--nm-teal-600) 40%, var(--nm-navy-900) 100%); box-shadow: var(--nm-shadow); }
.nma-promo .nma-avatar { width: 42px; height: 42px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.nma-promo strong { display: block; font-weight: 600; }
.nma-promo span { font-size: .88rem; opacity: .9; }
.nma-promo-text { flex: 1; min-width: 200px; }
.nma-promo button { border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--nm-navy-900); background: #fff; }
.nma-promo button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
    .nmw { right: 16px; bottom: 16px; }
    .nmw-panel { position: fixed; inset: 0; width: auto; height: auto; }
    .nmw-panel .nma { border-radius: 0; border: 0; }
    .nmw-open .nmw-launcher { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nmw-launcher, .nmw-launcher svg, .nmw-enter, .nmw-leave { transition: none; }
    .nmw-launcher::after { animation: none; }
}

/* ---- WhatsApp settings page (components/⚡whatsapp-settings) --------------
   Set-up reads as numbered steps; fields sit in an even two-column grid with
   the label above and a hint below, so every input lines up. Templates show
   as WhatsApp would: a message bubble with Meta's example values marked,
   and the buttons under it. */
.nmwa-kpis { margin-bottom: 16px; }
.nmwa-card { margin-top: 0; padding: 4px 24px 20px; }
.nmwa-step { padding: 20px 0; border-top: 1px solid var(--nm-border); }
.nmwa-step:first-child, form > .nmwa-step:first-child { border-top: 0; }
.nmwa-step-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.nmwa-step-head h4 { margin: 2px 0 2px; font-size: 1rem; font-weight: 600; color: var(--nm-text); }
.nmwa-step-head p { margin: 0; max-width: 78ch; font-size: .875rem; color: var(--nm-muted); line-height: 1.5; }
.nmwa-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .85rem; font-weight: 600;
    color: var(--nm-teal-600); background: var(--nm-teal-100); }
.nmwa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
.nmwa-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nmwa-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nmwa-field .nm-label { margin: 0; }
.nmwa-field .nm-input, .nmwa-field .nm-select { width: 100%; }
.nmwa-hint { font-size: .8rem; line-height: 1.45; color: var(--nm-muted); }
.nmwa-error { font-size: .82rem; color: var(--nm-red-600); }
.nmwa-inline { display: flex; gap: 8px; align-items: stretch; }
.nmwa-inline .nm-input { flex: 1; min-width: 0; }
.nmwa-inline .nm-btn { flex: none; white-space: nowrap; }
.nmwa-advanced { margin-top: 18px; }
.nmwa-advanced summary { cursor: pointer; width: max-content; font-size: .875rem; font-weight: 500; color: var(--nm-teal-600); }
.nmwa-advanced[open] summary { margin-bottom: 14px; }
.nmwa-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--nm-border); }
.nmwa-result { margin: 14px 0 0; }
.nmwa-test { margin-top: 8px; }

.nmwa-bar { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 16px 0; }
.nmwa-bar p { margin: 0; flex: 1 1 420px; font-size: .875rem; color: var(--nm-muted); line-height: 1.5; }
.nmwa-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.nmwa-tpl { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--nm-border); border-radius: 16px; background: var(--nm-surface); }
.nmwa-tpl-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.nmwa-tpl-foot { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.nmwa-tpl-foot .nmwa-hint { flex: 1; }
.nmwa-tpl-foot .nmwa-hint:empty { display: none; }
.nmwa-tpl-name { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; font-weight: 600; color: var(--nm-text); overflow-wrap: anywhere; }
.nmwa-phone { padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--nm-teal-100) 70%, var(--nm-bg)); }
.nmwa-bubble { position: relative; max-width: 420px; padding: 10px 12px 18px; border-radius: 4px 12px 12px 12px; white-space: pre-wrap; font-size: .875rem; line-height: 1.5;
    color: var(--nm-text); background: var(--nm-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.nmwa-footer { display: block; margin-top: 6px; font-size: .75rem; color: var(--nm-muted); }
.nmwa-var { padding: 0 4px; border-radius: 4px; font-weight: 500; color: var(--nm-teal-600); background: var(--nm-teal-100); }
.nmwa-qr { display: grid; gap: 4px; max-width: 420px; margin-top: 4px; }
.nmwa-qr span { padding: 8px; border-radius: 10px; text-align: center; font-size: .85rem; font-weight: 500; color: var(--nm-teal-600); background: var(--nm-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

.nmwa-lead { margin: 16px 0; max-width: 80ch; font-size: .875rem; color: var(--nm-muted); line-height: 1.5; }
.nmwa-empty { margin: 16px 0 4px; padding: 22px; border: 1px dashed var(--nm-border); border-radius: 12px; text-align: center; font-size: .9rem; color: var(--nm-muted); }
.nmwa-subhead { margin: 22px 0 10px; font-size: .9rem; font-weight: 600; color: var(--nm-text); }
.nmwa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nmwa-chip { padding: 5px 12px; border-radius: 999px; font-size: .82rem; color: var(--nm-text); background: var(--nm-teal-100); }

@media (max-width: 900px) { .nmwa-tpls { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .nmwa-card { padding: 4px 16px 16px; }
    .nmwa-grid, .nmwa-grid-3 { grid-template-columns: 1fr; }
}