/* =========================================================
   NirojSoft Support theme, on top of Radzen "standard"
   Logical properties (inline-start/end) so RTL flips cleanly.
   ========================================================= */

:root {
    /* Brand */
    --ns-blue: #1D4ED8;
    --ns-navy: #0F1E3D;
    --ns-orange: #F97316;
    --ns-orange-strong: #EA580C;
    --ns-page: #F4F6FB;
    --ns-surface: #FFFFFF;
    --ns-border: #E2E8F0;
    --ns-hover: #F1F5F9;
    --ns-muted: #64748B;
    --ns-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
    --ns-shadow-pop: 0 14px 36px rgba(15, 23, 42, 0.14);
    --ns-content-width: 1600px;
    --ns-gutter: 24px;
    --ns-font: "Inter", "Noto Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
    /* Radzen: primary = blue */
    --rz-primary: #1D4ED8;
    --rz-primary-light: #3B82F6;
    --rz-primary-lighter: #DBEAFE;
    --rz-primary-dark: #1E40AF;
    --rz-primary-darker: #1E3A8A;
    --rz-on-primary: #FFFFFF;
    --rz-on-primary-light: #FFFFFF;
    --rz-on-primary-lighter: #1E3A8A;
    /* Radzen: secondary = orange */
    --rz-secondary: #EA580C;
    --rz-secondary-light: #F97316;
    --rz-secondary-lighter: #FFEDD5;
    --rz-secondary-dark: #C2410C;
    --rz-secondary-darker: #9A3412;
    --rz-on-secondary: #FFFFFF;
    --rz-on-secondary-light: #FFFFFF;
    --rz-on-secondary-lighter: #9A3412;
    /* Status colours */
    --rz-info: #0284C7;
    --rz-info-light: #38BDF8;
    --rz-info-lighter: #E0F2FE;
    --rz-info-dark: #0369A1;
    --rz-on-info: #FFFFFF;
    --rz-on-info-lighter: #075985;
    --rz-success: #16A34A;
    --rz-success-light: #4ADE80;
    --rz-success-lighter: #DCFCE7;
    --rz-success-dark: #15803D;
    --rz-on-success: #FFFFFF;
    --rz-on-success-lighter: #166534;
    --rz-warning: #EAB308;
    --rz-warning-light: #FACC15;
    --rz-warning-lighter: #FEF9C3;
    --rz-warning-dark: #CA8A04;
    --rz-on-warning: #422006;
    --rz-on-warning-lighter: #854D0E;
    --rz-danger: #DC2626;
    --rz-danger-light: #F87171;
    --rz-danger-lighter: #FEE2E2;
    --rz-danger-dark: #B91C1C;
    --rz-on-danger: #FFFFFF;
    --rz-on-danger-lighter: #991B1B;
    /* Surfaces and text */
    --rz-base-background-color: #FFFFFF;
    --rz-body-background-color: #F4F6FB;
    --rz-layout-background-color: #F4F6FB;
    --rz-layout-body-background-color: #F4F6FB;
    --rz-text-title-color: #0F172A;
    --rz-text-color: #1E293B;
    --rz-text-secondary-color: #475569;
    --rz-text-tertiary-color: #64748B;
    --rz-text-font-family: var(--ns-font);
    --rz-border-radius: 8px;
    /* Calmer components */
    --rz-grid-header-text-transform: none;
    --rz-badge-text-transform: none;
    --rz-card-border-radius: 12px;
}

    /* ---------- Dark mode ---------- */
    :root[data-theme="dark"] {
        --ns-page: #0B1220;
        --ns-surface: #111A2E;
        --ns-border: #1E293B;
        --ns-hover: rgba(255, 255, 255, 0.06);
        --ns-muted: #94A3B8;
        --ns-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        --ns-shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.5);
        --rz-primary: #3B82F6;
        --rz-primary-light: #60A5FA;
        --rz-primary-lighter: rgba(59, 130, 246, 0.18);
        --rz-primary-dark: #2563EB;
        --rz-on-primary-lighter: #BFDBFE;
        --rz-secondary: #F97316;
        --rz-secondary-light: #FB923C;
        --rz-secondary-lighter: rgba(249, 115, 22, 0.18);
        --rz-on-secondary: #0B1220;
        --rz-on-secondary-lighter: #FED7AA;
        --rz-base-background-color: #111A2E;
        --rz-body-background-color: #0B1220;
        --rz-layout-background-color: #0B1220;
        --rz-layout-body-background-color: #0B1220;
        --rz-text-title-color: #F1F5F9;
        --rz-text-color: #E2E8F0;
        --rz-text-secondary-color: #CBD5E1;
        --rz-text-tertiary-color: #94A3B8;
    }

/* ---------- Base ---------- */
/* Sizes include padding and border everywhere, so a 100%-wide box never spills over its neighbours
   (.ns-page keeps content-box on purpose: its max-width is the content, the gutter comes on top) */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    font-family: var(--ns-font);
    background: var(--ns-page);
    color: var(--rz-text-color);
}

button, input, select, textarea {
    font-family: inherit;
}

.rz-button {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

.ns-shell {
    min-height: 100vh;
}

/* =========================================================
   Top navigation bar
   ========================================================= */
.ns-topbar-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ns-surface);
    border-bottom: 1px solid var(--ns-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Full width: the menu gets the whole top of the window */
.ns-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px var(--ns-gutter);
}

/* Brand */
.ns-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: none;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--rz-text-title-color);
    text-decoration: none;
    white-space: nowrap;
}

.ns-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ns-navy);
    color: var(--ns-orange);
    display: grid;
    place-items: center;
}

    .ns-brand-mark .rzi {
        font-size: 22px;
    }

.ns-brand-accent {
    color: var(--ns-orange-strong);
}

/* Menu */
.ns-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

    .ns-nav > li {
        position: relative;
    }

.ns-nav-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--rz-text-secondary-color);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

    .ns-nav-link .rzi {
        font-size: 20px;
    }

.ns-nav-caret.rzi {
    font-size: 18px;
    margin-inline-start: -0.2rem;
    opacity: 0.7;
}

.ns-nav-link:hover {
    background: var(--ns-hover);
    color: var(--rz-text-title-color);
}

.ns-nav-link.active {
    background: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
}

/* Dropdowns (menu groups and user menu) */
.ns-nav-group, .ns-user, .ns-menu-host {
    position: relative;
}

.ns-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    min-width: 230px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    box-shadow: var(--ns-shadow-pop);
    z-index: 200;
}

    /* Invisible bridge so the menu doesn't close while the mouse moves into it */
    .ns-dropdown::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: -10px;
        height: 10px;
    }

.ns-dropdown-end {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.ns-nav-group:hover > .ns-dropdown,
.ns-nav-group:focus-within > .ns-dropdown,
.ns-user:hover > .ns-dropdown,
.ns-user:focus-within > .ns-dropdown,
.ns-menu-host:hover > .ns-dropdown,
.ns-menu-host:focus-within > .ns-dropdown {
    display: block;
}

.ns-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--rz-text-color);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

    .ns-dropdown-link .rzi {
        font-size: 20px;
        color: var(--rz-text-tertiary-color);
    }

    .ns-dropdown-link:hover {
        background: var(--ns-hover);
    }

    .ns-dropdown-link.active {
        background: var(--rz-primary-lighter);
        color: var(--rz-on-primary-lighter);
    }

        .ns-dropdown-link.active .rzi {
            color: inherit;
        }

.ns-dropdown-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--ns-border);
}

button.ns-dropdown-link {
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: start;
}

.ns-lang-code {
    min-width: 26px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.ns-muted {
    color: var(--rz-text-tertiary-color);
}

/* Right side actions */
.ns-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.ns-btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    background: var(--ns-orange-strong);
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s;
}

    .ns-btn-accent:hover {
        background: #C2410C;
        color: #FFFFFF;
    }

    .ns-btn-accent .rzi {
        font-size: 20px;
    }

.ns-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}

    .ns-icon-btn:hover {
        background: var(--ns-hover);
        color: var(--rz-text-title-color);
    }

    .ns-icon-btn .rzi {
        font-size: 22px;
    }

.ns-bell-dot {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ns-orange);
    border: 2px solid var(--ns-surface);
}

/* User chip */
.ns-user-chip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    background: var(--ns-surface);
    color: var(--rz-text-title-color);
    cursor: pointer;
    text-align: start;
}

    .ns-user-chip:hover {
        background: var(--ns-hover);
    }

.ns-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--rz-primary);
    /*background: var(--ns-navy);*/
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.ns-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.ns-user-name {
    font-size: 0.88rem;
    font-weight: 700;
}

.ns-user-role {
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
}

/* Hamburger (hidden on wide screens) */
.ns-burger {
    display: none;
}

/* =========================================================
   Page content
   ========================================================= */
.ns-page {
    max-width: var(--ns-content-width);
    margin-inline: auto;
    padding: 1.75rem var(--ns-gutter) 2rem;
    box-sizing: content-box;
}

.ns-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-block-end: 1.25rem;
}

.ns-page-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
}

.ns-page-subtitle {
    margin: 0.3rem 0 0;
    color: var(--rz-text-tertiary-color);
    font-size: 0.92rem;
}

.ns-page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Cards and KPIs ---------- */
.ns-card {
    background: var(--rz-base-background-color);
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ns-shadow);
}

.ns-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
    border-block-end: 1px solid var(--ns-border);
}

.ns-card .rz-data-grid {
    border: none;
    border-radius: 0;
}

.ns-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-block-end: 1.5rem;
}

.ns-kpi {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    box-shadow: var(--ns-shadow);
}

.ns-kpi-icon {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 24px;
}

.ns-kpi-label {
    color: var(--rz-text-tertiary-color);
    font-size: 0.85rem;
}

.ns-kpi-value {
    color: var(--rz-text-title-color);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.2;
}

.ns-tone-blue {
    background: #DBEAFE;
    color: #1E40AF;
}

.ns-tone-orange {
    background: #FFEDD5;
    color: #C2410C;
}

.ns-tone-red {
    background: #FEE2E2;
    color: #B91C1C;
}

.ns-tone-green {
    background: #DCFCE7;
    color: #15803D;
}

.ns-tone-slate {
    background: #F1F5F9;
    color: #475569;
}

/* ---------- Badges ---------- */
.ns-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    background: #F1F5F9;
    color: #475569;
}

    .ns-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.ns-priority-critical {
    background: #FEE2E2;
    color: #991B1B;
}

.ns-priority-high {
    background: #FFEDD5;
    color: #9A3412;
}

.ns-priority-normal {
    background: #E0F2FE;
    color: #075985;
}

.ns-priority-low {
    background: #F1F5F9;
    color: #475569;
}

.ns-status-new {
    background: #DCFCE7;
    color: #166534;
}

.ns-status-triage {
    background: #EDE9FE;
    color: #5B21B6;
}

.ns-status-in_progress {
    background: #DBEAFE;
    color: #1E3A8A;
}

.ns-status-waiting_customer {
    background: #FEF9C3;
    color: #854D0E;
}

.ns-status-waiting_development {
    background: #E0E7FF;
    color: #3730A3;
}

.ns-status-resolved {
    background: #CCFBF1;
    color: #115E59;
}

.ns-status-closed {
    background: #F1F5F9;
    color: #475569;
}

.ns-status-cancelled {
    background: #F1F5F9;
    color: #64748B;
}

.ns-task-todo {
    background: #F1F5F9;
    color: #475569;
}

.ns-task-in_progress {
    background: #DBEAFE;
    color: #1E3A8A;
}

.ns-task-blocked {
    background: #FEE2E2;
    color: #991B1B;
}

.ns-task-review {
    background: #E0E7FF;
    color: #3730A3;
}

.ns-task-done {
    background: #DCFCE7;
    color: #166534;
}

.ns-task-cancelled {
    background: #F1F5F9;
    color: #64748B;
}

.ns-ticket-no {
    font-family: Consolas, "Cascadia Mono", monospace;
    color: var(--rz-primary);
    font-weight: 500;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- Customer portal ---------- */
.ns-hero {
    background: var(--ns-navy);
    color: #FFFFFF;
    border-radius: 16px;
    padding: 2rem;
    margin-block-end: 1.5rem;
}

.ns-hero-title {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFFFFF;
}

.ns-hero-text {
    margin: 0 0 1.25rem;
    color: #C7D2FE;
}

.ns-hero-search {
    width: 100%;
    max-width: 560px;
}

.ns-action {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    box-shadow: var(--ns-shadow);
    color: var(--rz-text-color);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

    .ns-action:hover {
        border-color: var(--ns-orange);
        transform: translateY(-1px);
    }

.ns-action-title {
    font-weight: 700;
    color: var(--rz-text-title-color);
}

.ns-action-text {
    font-size: 0.85rem;
    color: var(--rz-text-tertiary-color);
}

/* =========================================================
   Responsive
   ========================================================= */
/* Medium screens: compact user chip and "New ticket" button */
@media (max-width: 1599.98px) {
    .ns-user-meta,
    .ns-user-chip > .ns-nav-caret,
    .ns-btn-accent .ns-btn-text {
        display: none;
    }

    .ns-user-chip {
        padding-block: 4px;
        padding-inline: 4px 10px;
    }

    .ns-btn-accent {
        padding: 0.5rem;
    }
}

/* Small laptops: icons only in the menu */
@media (max-width: 1279.98px) {
    .ns-nav .ns-nav-text,
    .ns-nav .ns-nav-caret,
    .ns-user-meta {
        display: none;
    }

    .ns-nav-link {
        padding: 0.55rem 0.65rem;
    }

    .ns-user-chip {
        padding: 3px;
    }

        .ns-user-chip > .ns-nav-caret {
            display: none;
        }
}

/* Tablets and phones: hamburger + full-width panel */
@media (max-width: 1023.98px) {
    .ns-topbar {
        flex-wrap: wrap;
    }

    .ns-topbar-actions {
        margin-inline-start: auto;
    }

    .ns-burger {
        display: inline-grid;
    }

    .ns-nav {
        display: none;
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 4px 0 0;
        padding-top: 8px;
        border-top: 1px solid var(--ns-border);
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }

    .ns-topbar.is-open .ns-nav {
        display: flex;
    }

    /* Show labels again inside the panel */
    .ns-nav .ns-nav-text {
        display: inline;
    }

    .ns-nav-link {
        padding: 0.65rem 0.75rem;
    }

    /* Groups become labelled sections */
    .ns-nav-group > .ns-nav-link {
        pointer-events: none;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--rz-text-tertiary-color);
        padding-block: 0.75rem 0.25rem;
    }

        .ns-nav-group > .ns-nav-link .rzi {
            display: none;
        }

    .ns-nav .ns-dropdown {
        display: block;
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: none;
    }

        .ns-nav .ns-dropdown::before {
            display: none;
        }

    .ns-nav .ns-dropdown-link {
        padding: 0.65rem 0.75rem;
    }
}

/* Phones */
@media (max-width: 639.98px) {
    :root {
        --ns-gutter: 12px;
    }

    .ns-topbar {
        padding: 6px var(--ns-gutter);
        gap: 6px;
    }

    .ns-brand-text, .ns-btn-text {
        display: none;
    }

    .ns-btn-accent {
        padding: 0.5rem;
    }

    .ns-page {
        padding-top: 1.25rem;
    }

    .ns-page-title {
        font-size: 1.4rem;
    }

    .ns-hero {
        padding: 1.25rem;
    }
}

/* =========================================================
   Sign-in page
   ========================================================= */
.ns-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(380px, 42%) 1fr;
    background: var(--ns-page);
}

.ns-auth-side {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 3rem;
    background: var(--ns-navy);
    color: #E2E8F0;
}

    .ns-auth-side::after {
        content: "";
        position: absolute;
        width: 460px;
        height: 460px;
        inset-inline-end: -160px;
        bottom: -160px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.45), rgba(249, 115, 22, 0) 70%);
        pointer-events: none;
    }

    .ns-auth-side .ns-brand-mark,
    .ns-auth-mobile-brand .ns-brand-mark {
        background: var(--ns-orange);
        color: var(--ns-navy);
    }

.ns-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #FFFFFF;
}

.ns-auth-pitch, .ns-auth-copy {
    position: relative;
    z-index: 1;
}

.ns-auth-headline {
    margin: 0 0 0.75rem;
    max-width: 440px;
    font-size: 2.1rem;
    line-height: 1.25;
    font-weight: 700;
    color: #FFFFFF;
}

.ns-auth-tagline {
    margin: 0 0 1.75rem;
    max-width: 440px;
    color: #C7D2FE;
}

.ns-auth-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

    .ns-auth-features li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .ns-auth-features .rzi {
        width: 38px;
        height: 38px;
        flex: none;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--ns-orange);
        font-size: 20px;
    }

.ns-auth-copy {
    font-size: 0.8rem;
    color: #8FA3CF;
}

.ns-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1.25rem;
}

.ns-auth-lang {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}

    .ns-auth-lang a {
        padding: 0.35rem 0.8rem;
        border-radius: 999px;
        font-size: 0.85rem;
        color: var(--rz-text-secondary-color);
        text-decoration: none;
    }

        .ns-auth-lang a:hover {
            background: var(--ns-hover);
        }

        .ns-auth-lang a.active {
            background: var(--rz-primary-lighter);
            color: var(--rz-on-primary-lighter);
            font-weight: 700;
        }

.ns-auth-mobile-brand {
    display: none;
}

.ns-auth-card {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 18px;
    box-shadow: var(--ns-shadow);
}

.ns-auth-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
}

.ns-auth-subtitle {
    margin: 0.35rem 0 1.5rem;
    color: var(--rz-text-tertiary-color);
}

/* ---------- Plain forms (used where Radzen inputs can't be: sign-in) ---------- */
.ns-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-block-end: 1rem;
}

    .ns-field label {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--rz-text-secondary-color);
    }

.ns-input {
    height: 46px;
    padding: 0 0.9rem;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: var(--ns-surface);
    color: var(--rz-text-color);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .ns-input:focus {
        border-color: var(--rz-primary);
        box-shadow: 0 0 0 3px var(--rz-primary-lighter);
    }

.ns-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.25rem 0 1.25rem;
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}

    .ns-check input {
        width: 18px;
        height: 18px;
        accent-color: var(--rz-primary);
    }

.ns-btn-primary {
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: var(--rz-primary);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
}

    .ns-btn-primary:hover {
        background: var(--rz-primary-dark);
    }

.ns-btn-block {
    width: 100%;
}

.ns-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-block-end: 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

    .ns-alert .rzi {
        font-size: 20px;
    }

.ns-alert-danger {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

.ns-dropdown form {
    margin: 0;
}

/* Empty / access denied */
.ns-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    text-align: center;
}

@media (max-width: 899.98px) {
    .ns-auth {
        grid-template-columns: 1fr;
    }

    .ns-auth-side {
        display: none;
    }

    .ns-auth-mobile-brand {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--rz-text-title-color);
    }

    .ns-auth-card {
        padding: 1.5rem;
    }
}

/* =========================================================
   Admin pages: side list + content
   ========================================================= */
.ns-split {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.ns-side-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    box-shadow: var(--ns-shadow);
    position: sticky;
    top: 92px;
}

.ns-side-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    color: var(--rz-text-color);
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
}

    .ns-side-link .rzi {
        font-size: 20px;
        color: var(--rz-text-tertiary-color);
    }

    .ns-side-link:hover {
        background: var(--ns-hover);
    }

    .ns-side-link.active {
        background: var(--rz-primary-lighter);
        color: var(--rz-on-primary-lighter);
        font-weight: 700;
    }

        .ns-side-link.active .rzi {
            color: inherit;
        }

/* Card header tools (search + add) */
.ns-card-header {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ns-card-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ns-input-sm {
    height: 36px;
    width: 220px;
    font-size: 0.9rem;
}

.ns-count {
    display: inline-block;
    min-width: 22px;
    margin-inline-start: 0.35rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--ns-hover);
    color: var(--rz-text-tertiary-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

/* Grid bits */
.ns-code {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.82rem;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: var(--ns-hover);
    direction: ltr;
    unicode-bidi: isolate;
}

.ns-lock.rzi {
    font-size: 16px;
    margin-inline-start: 0.35rem;
    vertical-align: middle;
    color: var(--rz-text-tertiary-color);
}

.ns-missing {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #B45309;
}

    .ns-missing .rzi {
        font-size: 16px;
    }

.ns-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
}

.ns-badge.ns-on {
    background: #DCFCE7;
    color: #166534;
}

.ns-badge.ns-off {
    background: #F1F5F9;
    color: #64748B;
}

/* Forms inside dialogs */
.ns-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

    .ns-form-grid .rz-form-field {
        width: 100%;
    }

.ns-span-2 {
    grid-column: 1 / -1;
}

.ns-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.ns-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.ns-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
}

.ns-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ns-border);
}

.rz-dialog {
    max-width: calc(100vw - 24px);
}

@media (max-width: 899.98px) {
    .ns-split {
        grid-template-columns: 1fr;
    }

    .ns-side-list {
        position: static;
        display: flex;
        gap: 4px;
        overflow-x: auto;
    }

    .ns-input-sm {
        width: 100%;
    }

    .ns-card-tools {
        width: 100%;
    }
}

@media (max-width: 639.98px) {
    .ns-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Products
   ========================================================= */
.ns-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.ns-product-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    box-shadow: var(--ns-shadow);
    color: var(--rz-text-color);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

    .ns-product-card:hover {
        border-color: var(--rz-primary);
        transform: translateY(-1px);
    }

    .ns-product-card.is-inactive {
        opacity: 0.7;
    }

.ns-product-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ns-product-mark {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--ns-navy);
    color: var(--ns-orange);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ns-product-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

    .ns-product-title .ns-code {
        align-self: flex-start;
    }

.ns-product-name {
    font-weight: 700;
    color: var(--rz-text-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-product-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-block: 1px solid var(--ns-border);
}

    .ns-product-stats div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
    }

    .ns-product-stats b {
        font-size: 1.25rem;
        color: var(--rz-text-title-color);
    }

    .ns-product-stats span {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
    }

.ns-product-foot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

    .ns-product-foot .rzi {
        font-size: 18px;
        color: var(--ns-orange);
    }

/* Back link and RTL-aware arrow */
.ns-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-end: 0.5rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.9rem;
    text-decoration: none;
}

    .ns-back:hover {
        color: var(--rz-primary);
    }

    .ns-back .rzi {
        font-size: 18px;
    }

html[dir="rtl"] .ns-flip {
    transform: scaleX(-1);
}

/* Tabs sit directly on the page */
.ns-tabs.rz-tabview {
    background: transparent;
    border: none;
    box-shadow: none;
}

.ns-tabs .rz-tabview-panels {
    padding: 1rem 0 0;
    background: transparent;
    border: none;
}

.ns-empty-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
}

/* =========================================================
   Lists and detail headers
   ========================================================= */
.ns-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-block-end: 1px solid var(--ns-border);
}

.ns-link {
    color: var(--rz-primary);
    font-weight: 700;
    text-decoration: none;
}

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

.ns-subtext {
    display: block;
    font-size: 0.78rem;
    color: var(--rz-text-tertiary-color);
}

.ns-num {
    direction: ltr;
    unicode-bidi: isolate;
}

.ns-entity-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem;
    margin-block-end: 1.25rem;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    box-shadow: var(--ns-shadow);
}

.ns-entity-info {
    display: flex;
    gap: 1rem;
    flex: 1 1 380px;
    min-width: 0;
}

.ns-entity-mark {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
    font-size: 1.2rem;
    font-weight: 700;
}

.ns-entity-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.ns-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ns-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--ns-hover);
    color: var(--rz-text-secondary-color);
    font-size: 0.85rem;
    text-decoration: none;
}

    .ns-chip .rzi {
        font-size: 16px;
    }

a.ns-chip:hover {
    color: var(--rz-primary);
}

.ns-notes {
    margin: 0;
    white-space: pre-line;
    font-size: 0.9rem;
    color: var(--rz-text-secondary-color);
}

.ns-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(84px, 1fr));
    gap: 0.5rem;
}

    .ns-mini-stats div {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-radius: 10px;
        background: var(--ns-page);
    }

    .ns-mini-stats b {
        font-size: 1.35rem;
        color: var(--rz-text-title-color);
    }

    .ns-mini-stats span {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
        white-space: nowrap;
    }

@media (max-width: 639.98px) {
    .ns-mini-stats {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .ns-toolbar .ns-input-sm {
        width: 100%;
    }
}

/* =========================================================
   SLA, calendars, currencies
   ========================================================= */
.ns-section-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

    .ns-section-bar .ns-hint {
        max-width: 760px;
    }

.ns-policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
}

.ns-policy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 1.25rem 0;
}

/* Simple tables (inside cards and dialogs) */
.ns-table-wrap {
    overflow-x: auto;
}

.ns-card .ns-table-wrap {
    margin-top: 0.5rem;
}

.ns-bordered {
    border: 1px solid var(--ns-border);
    border-radius: 12px;
}

.ns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .ns-table th {
        padding: 0.6rem 1.25rem;
        text-align: start;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--rz-text-tertiary-color);
        border-block-end: 1px solid var(--ns-border);
        white-space: nowrap;
    }

    .ns-table td {
        padding: 0.55rem 1.25rem;
        border-block-end: 1px solid var(--ns-border);
    }

    .ns-table tr:last-child td {
        border-block-end: 0;
    }

/* Hours + minutes input */
.ns-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

    .ns-duration .rz-numeric {
        width: 86px;
    }

    .ns-duration span {
        font-size: 0.8rem;
        color: var(--rz-text-tertiary-color);
    }

/* Week at a glance (calendar cards) */
.ns-week-view {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 1rem 1.25rem 1.25rem;
}

.ns-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.45rem 0.2rem;
    border-radius: 9px;
    background: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
    font-size: 0.72rem;
    text-align: center;
}

    .ns-day b {
        font-size: 0.8rem;
    }

    .ns-day.off {
        background: var(--ns-hover);
        color: var(--rz-text-tertiary-color);
    }

/* Week editor (calendar dialog) */
.ns-week {
    display: grid;
    gap: 0.35rem;
}

.ns-week-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 9px;
    background: var(--ns-page);
}

    .ns-week-row.is-closed {
        opacity: 0.75;
    }

.ns-week-times {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .ns-week-times .ns-input {
        width: 120px;
    }

/* Inline add form (holidays) */
.ns-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
}

    .ns-inline-form .ns-grow {
        flex: 1 1 220px;
    }

.ns-year {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
}

.ns-form-label {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

@media (max-width: 639.98px) {
    .ns-policy-grid {
        grid-template-columns: 1fr;
    }

    .ns-week-view {
        grid-template-columns: repeat(4, 1fr);
    }

    .ns-week-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Contracts
   ========================================================= */
.ns-contract-draft {
    background: #F1F5F9;
    color: #475569;
}

.ns-contract-active {
    background: #DCFCE7;
    color: #166534;
}

.ns-contract-expiring {
    background: #FFEDD5;
    color: #9A3412;
}

.ns-contract-suspended {
    background: #FEF9C3;
    color: #854D0E;
}

.ns-contract-cancelled {
    background: #F1F5F9;
    color: #64748B;
}

.ns-contract-expired {
    background: #FEE2E2;
    color: #991B1B;
}

.ns-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.ns-card-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.ns-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.5rem;
    padding: 1.25rem;
}

.ns-fact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

    .ns-fact > span {
        font-size: 0.78rem;
        color: var(--rz-text-tertiary-color);
    }

    .ns-fact > b {
        font-weight: 600;
        color: var(--rz-text-title-color);
    }

.ns-period {
    padding: 0 1.25rem 1.25rem;
}

.ns-period-label {
    display: flex;
    justify-content: space-between;
    margin-block-end: 0.35rem;
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
}

.ns-indent {
    padding-inline-start: 1.75rem;
    margin-top: 0.5rem;
}

.ns-checklist {
    margin-top: 0.25rem;
}

@media (max-width: 1023.98px) {
    .ns-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Staff
   ========================================================= */
.ns-meter-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ns-meter {
    flex: 1;
    min-width: 60px;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ns-hover);
}

.ns-meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #16A34A;
}

    .ns-meter-fill.mid {
        background: var(--ns-orange);
    }

    .ns-meter-fill.high {
        background: #DC2626;
    }

.ns-meter-text {
    min-width: 44px;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    direction: ltr;
    unicode-bidi: isolate;
}

.ns-badge.ns-warn {
    background: #FFEDD5;
    color: #9A3412;
}

.ns-badge.ns-info {
    background: #DBEAFE;
    color: #1E3A8A;
}

.ns-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-inline-start: 0.4rem;
    vertical-align: middle;
}

.ns-switch-label {
    gap: 0.6rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: var(--ns-surface);
}

/* =========================================================
   Teams
   ========================================================= */
.ns-teams-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0.25rem 0 1.25rem;
}

.ns-teams-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    max-width: 75ch;
    margin: 0;
    font-size: 0.875rem;
    color: var(--rz-text-secondary-color);
}

    .ns-teams-hint .rzi {
        flex: none;
        font-size: 1.1rem;
        color: var(--rz-primary);
    }

.ns-team-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
}

/* ---- Card ---- */
.ns-team-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: 16px;
    background: var(--ns-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.2s, border-color 0.2s;
}

    .ns-team-card:hover {
        border-color: color-mix(in srgb, var(--rz-primary) 35%, var(--ns-border));
        box-shadow: 0 8px 28px rgba(15, 23, 42, 0.09);
    }

    .ns-team-card.is-off {
        opacity: 0.65;
    }

/* ---- Header ---- */
.ns-team-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--ns-border);
}

.ns-team-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

    .ns-team-icon .rzi {
        font-size: 1.4rem;
    }

.ns-team-title {
    flex: 1;
    min-width: 0;
}

    .ns-team-title h3 {
        margin: 0;
        overflow: hidden;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.ns-team-lead {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

    .ns-team-lead .rzi {
        flex: none;
        font-size: 1rem;
        color: var(--ns-orange);
    }

    .ns-team-lead bdi {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.ns-team-tools {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.15rem;
}

/* Quiet icon buttons: grey, blue on hover, red on hover for "danger" */
.ns-team-card .ns-icon-btn:hover:not(:disabled) {
    color: var(--rz-primary) !important;
    background: var(--ns-hover) !important;
}

.ns-team-card .ns-icon-danger:hover:not(:disabled) {
    color: #DC2626 !important;
    background: color-mix(in srgb, #DC2626 10%, transparent) !important;
}

/* ---- Stats strip ---- */
.ns-team-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 1rem 1.25rem 0;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: var(--ns-hover);
}

    .ns-team-stats > div {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        min-width: 0;
        padding: 0.6rem 0.8rem;
    }

        .ns-team-stats > div + div {
            border-inline-start: 1px solid var(--ns-border);
        }

    .ns-team-stats .rzi {
        flex: none;
        font-size: 1.15rem;
        color: var(--rz-primary);
    }

    .ns-team-stats > div:last-child .rzi {
        color: var(--ns-orange);
    }

    .ns-team-stats b {
        font-size: 1.1rem;
        font-weight: 700;
    }

    .ns-team-stats span {
        overflow: hidden;
        font-size: 0.8rem;
        color: var(--rz-text-secondary-color);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.ns-team-empty {
    margin: 0;
    padding: 1.5rem 1.1rem;
    font-size: 0.875rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

/* ---- Members ---- */
.ns-member-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0.6rem 0 0.75rem;
    padding: 0 0.5rem;
    list-style: none;
}

    .ns-member-list li {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.5rem 0.6rem;
        border-radius: 10px;
    }

        .ns-member-list li:hover {
            background: var(--ns-hover);
        }

        .ns-member-list li.is-off {
            opacity: 0.6;
        }

.ns-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--rz-primary);
}

.ns-member-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ns-member-name {
    overflow: hidden;
    font-weight: 600;
    color: var(--rz-text-color);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .ns-member-name:hover {
        color: var(--rz-primary);
        text-decoration: underline;
    }

.ns-member-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
}

.ns-lead-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-weight: 600;
    background: color-mix(in srgb, var(--ns-orange) 16%, transparent);
    color: #C2410C;
}

    .ns-lead-tag .rzi {
        font-size: 0.85rem;
    }

[data-theme="dark"] .ns-lead-tag {
    color: #FDBA74;
}

.ns-presence {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--rz-text-secondary-color);
}

    .ns-presence::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #94A3B8;
    }

    .ns-presence.on::before {
        background: #16A34A;
    }

    .ns-presence.away::before {
        background: var(--ns-orange);
    }

.ns-ticket-pill {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--ns-hover);
    color: var(--rz-text-secondary-color);
    direction: ltr;
}

    .ns-ticket-pill .rzi {
        font-size: 0.95rem;
    }

    .ns-ticket-pill.is-busy {
        background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
        color: var(--rz-primary);
    }

/* Same width for the remove button and the lead's empty slot, so the pills line up */
.ns-team-card .ns-member-action {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0 !important;
}

/* With a mouse: show remove only on the hovered row. Touch screens always show it. */
/*@media (hover: hover) {
    .ns-member-list li .rz-button.ns-member-action {
        opacity: 0;
        transition: opacity 0.15s;
    }
    */

    .ns-member-list li:hover .rz-button.ns-member-action,
    .ns-member-list li:focus-within .rz-button.ns-member-action {
        opacity: 1;
    }
}

/* ---- Footer ---- */
.ns-team-foot {
    flex: none;
    margin-top: auto;
    padding: 0.5rem 0.75rem 0.65rem;
    border-top: 1px solid var(--ns-border);
}

    .ns-team-foot .rz-button {
        width: 100%;
        justify-content: center;
    }

@media (max-width: 640px) {
    .ns-teams-bar .rz-button {
        width: 100%;
    }

    .ns-team-head {
        padding: 0.8rem 0.9rem;
    }

    .ns-team-stats {
        margin: 0.9rem 0.9rem 0;
    }
}

/* Keep "Add members" pinned to the bottom of every card */
.ns-team-grid {
    align-items: stretch;
}

.ns-team-card {
    height: 100%;
}

.ns-member-list,
.ns-team-empty {
    flex: 1 0 auto;
}

.ns-team-foot {
    flex: none;
    margin-top: auto;
    padding: 0.5rem 0.75rem 0.65rem;
    border-top: 1px solid var(--ns-border);
}

/* =========================================================
   Roles & permissions matrix
   ========================================================= */
.ns-roles-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 1rem;
}

.ns-card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ns-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ns-matrix {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
}

    .ns-matrix th,
    .ns-matrix td {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--ns-border);
        text-align: center;
        vertical-align: middle;
    }

    .ns-matrix thead th {
        vertical-align: bottom;
        background: var(--ns-surface);
    }

    .ns-matrix .ns-matrix-perm {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        min-width: 220px;
        text-align: start;
        background: var(--ns-surface);
    }

.ns-matrix-perm span {
    display: block;
    font-weight: 600;
}

.ns-matrix-perm code {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.ns-matrix-role {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 120px;
}

.ns-matrix-role-name {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
}

.ns-matrix th.is-off .ns-matrix-role-name {
    opacity: 0.6;
    text-decoration: line-through;
}

.ns-matrix tbody tr:hover td {
    background: var(--ns-hover);
}

    .ns-matrix td.is-changed,
    .ns-matrix tbody tr:hover td.is-changed {
        background: color-mix(in srgb, var(--ns-orange) 18%, transparent);
    }

.ns-savebar {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ns-orange);
    border-radius: 14px;
    background: var(--ns-surface);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.ns-savebar-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

    .ns-savebar-text .rzi {
        color: var(--ns-orange);
    }

.ns-savebar-actions {
    display: flex;
    gap: 0.5rem;
    margin-inline-start: auto;
}

@media (max-width: 640px) {
    .ns-matrix th, .ns-matrix td {
        padding: 0.5rem;
    }

    .ns-matrix .ns-matrix-perm {
        min-width: 150px;
        max-width: 170px;
    }

    .ns-matrix-role {
        min-width: 92px;
    }

    .ns-savebar-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* =========================================================
   Files: drop zone, upload list, attachment chips
   ========================================================= */
.ns-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.4rem 1rem;
    border: 1.5px dashed color-mix(in srgb, var(--rz-primary) 40%, var(--ns-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--rz-primary) 4%, var(--ns-surface));
    color: var(--rz-text-secondary-color);
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

    .ns-dropzone:hover,
    .ns-dropzone.is-over {
        border-color: var(--rz-primary);
        background: color-mix(in srgb, var(--rz-primary) 9%, var(--ns-surface));
    }

    .ns-dropzone:has(input:focus-visible) {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
    }

    .ns-dropzone.is-disabled {
        opacity: 0.6;
        pointer-events: none;
    }

    .ns-dropzone > .rzi {
        font-size: 2rem;
        color: var(--rz-primary);
    }

.ns-dropzone-title {
    font-weight: 600;
    color: var(--rz-text-color);
}

.ns-dropzone-hint {
    font-size: 0.8rem;
}

/* The real file input covers the whole zone, so click and drop both work */
.ns-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ns-dropzone.is-compact {
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    text-align: start;
}

    .ns-dropzone.is-compact > .rzi {
        font-size: 1.5rem;
    }

.ns-upload-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
}

.ns-upload-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: var(--ns-surface);
}

    .ns-upload-item.is-error {
        border-color: color-mix(in srgb, #DC2626 45%, var(--ns-border));
        background: color-mix(in srgb, #DC2626 5%, var(--ns-surface));
    }

.ns-upload-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.ns-upload-name {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-color);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.ns-upload-name:hover {
    color: var(--rz-primary);
    text-decoration: underline;
}

.ns-upload-meta {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.ns-upload-item.is-error .ns-upload-meta {
    color: #DC2626;
}

.ns-upload-remove:hover {
    color: #DC2626 !important;
    background: color-mix(in srgb, #DC2626 10%, transparent) !important;
}

/* Icon tile, coloured by file kind */
.ns-file-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
}

    .ns-file-icon .rzi {
        font-size: 1.2rem;
    }

    .ns-file-icon.k-pdf {
        background: color-mix(in srgb, #DC2626 12%, transparent);
        color: #DC2626;
    }

    .ns-file-icon.k-img {
        background: color-mix(in srgb, #7C3AED 12%, transparent);
        color: #7C3AED;
    }

    .ns-file-icon.k-sheet {
        background: color-mix(in srgb, #16A34A 12%, transparent);
        color: #16A34A;
    }

    .ns-file-icon.k-slide,
    .ns-file-icon.k-zip {
        background: color-mix(in srgb, var(--ns-orange) 14%, transparent);
        color: var(--ns-orange);
    }

    .ns-file-icon.k-error {
        background: color-mix(in srgb, #DC2626 12%, transparent);
        color: #DC2626;
    }

/* Attachment chip */
.ns-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ns-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: var(--ns-surface);
}

    .ns-file-chip:hover {
        border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--ns-border));
    }

    .ns-file-chip .ns-file-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }

        .ns-file-chip .ns-file-icon .rzi {
            font-size: 1rem;
        }

.ns-file-chip-name {
    max-width: 220px;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rz-text-color);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .ns-file-chip-name:hover {
        color: var(--rz-primary);
        text-decoration: underline;
    }

.ns-file-chip-size {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    direction: ltr;
    unicode-bidi: isolate;
}

.ns-file-chip-dl {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--rz-text-secondary-color);
}

    .ns-file-chip-dl:hover {
        background: var(--ns-hover);
        color: var(--rz-primary);
    }

    .ns-file-chip-dl .rzi {
        font-size: 1.1rem;
    }

@media (max-width: 640px) {
    .ns-file-chip-name {
        max-width: 150px;
    }
}

/* =========================================================
   SLA "Try it"
   ========================================================= */
.ns-sla-try {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .ns-sla-try {
        grid-template-columns: 1fr;
    }
}

.ns-try-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.ns-try-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

    .ns-try-empty .rzi {
        font-size: 2.2rem;
        color: color-mix(in srgb, var(--rz-primary) 55%, transparent);
    }

.ns-due-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.ns-due-tile {
    padding: 0.9rem 1rem;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: var(--ns-hover);
}

.ns-due-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

    .ns-due-head .rzi {
        font-size: 1.1rem;
        color: var(--rz-primary);
    }

.ns-due-tile:last-child .ns-due-head .rzi {
    color: var(--ns-orange);
}

.ns-due-day {
    margin-top: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
}

.ns-due-time {
    font-size: 1.25rem;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}

.ns-due-none {
    margin-top: 0.6rem;
    color: var(--rz-text-secondary-color);
}

.ns-try-subtitle {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
}

.ns-verdicts {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ns-verdicts li {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--ns-border);
        border-radius: 10px;
    }

        .ns-verdicts li > .rzi {
            flex: none;
            font-size: 1.3rem;
        }

        .ns-verdicts li.is-chosen {
            border-color: color-mix(in srgb, #16A34A 45%, var(--ns-border));
            background: color-mix(in srgb, #16A34A 6%, var(--ns-surface));
        }

            .ns-verdicts li.is-chosen > .rzi {
                color: #16A34A;
            }

        .ns-verdicts li.is-fits > .rzi {
            color: var(--rz-primary);
        }

        .ns-verdicts li.is-skipped {
            opacity: 0.75;
        }

            .ns-verdicts li.is-skipped > .rzi {
                color: var(--rz-text-secondary-color);
            }

.ns-verdict-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.ns-verdict-number {
    font-weight: 700;
}

.ns-verdict-reason {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: end;
}

.ns-recalc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
}

    .ns-recalc p {
        margin: 0.2rem 0 0;
        font-size: 0.85rem;
        color: var(--rz-text-secondary-color);
    }
/* =========================================================
   SLA "Try it"
   ========================================================= */
.ns-sla-try {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .ns-sla-try {
        grid-template-columns: 1fr;
    }
}

.ns-try-body {
    padding: 1.1rem 1.25rem 1.25rem;
}

.ns-try-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

    .ns-try-empty .rzi {
        font-size: 2.2rem;
        color: color-mix(in srgb, var(--rz-primary) 55%, transparent);
    }

.ns-due-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.ns-due-tile {
    padding: 0.9rem 1rem;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: var(--ns-hover);
}

.ns-due-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

    .ns-due-head .rzi {
        font-size: 1.1rem;
        color: var(--rz-primary);
    }

.ns-due-tile:last-child .ns-due-head .rzi {
    color: var(--ns-orange);
}

.ns-due-day {
    margin-top: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
}

.ns-due-time {
    font-size: 1.25rem;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}

.ns-due-none {
    margin-top: 0.6rem;
    color: var(--rz-text-secondary-color);
}

.ns-try-subtitle {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
}

.ns-verdicts {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ns-verdicts li {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--ns-border);
        border-radius: 10px;
    }

        .ns-verdicts li > .rzi {
            flex: none;
            font-size: 1.3rem;
        }

        .ns-verdicts li.is-chosen {
            border-color: color-mix(in srgb, #16A34A 45%, var(--ns-border));
            background: color-mix(in srgb, #16A34A 6%, var(--ns-surface));
        }

            .ns-verdicts li.is-chosen > .rzi {
                color: #16A34A;
            }

        .ns-verdicts li.is-fits > .rzi {
            color: var(--rz-primary);
        }

        .ns-verdicts li.is-skipped {
            opacity: 0.75;
        }

            .ns-verdicts li.is-skipped > .rzi {
                color: var(--rz-text-secondary-color);
            }

.ns-verdict-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.ns-verdict-number {
    font-weight: 700;
}

.ns-verdict-reason {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: end;
}

.ns-recalc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
}

.ns-recalc p {
        margin: 0.2rem 0 0;
        font-size: 0.85rem;
        color: var(--rz-text-secondary-color);
}

/* =========================================================
   Auto-assign
   ========================================================= */
.ns-assign {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .ns-assign {
        grid-template-columns: 1fr;
    }
}

.ns-chip.is-good {
    background: color-mix(in srgb, #16A34A 10%, var(--ns-surface));
    color: #15803D;
}

.ns-chip.is-bad {
    background: color-mix(in srgb, #DC2626 10%, var(--ns-surface));
    color: #B91C1C;
}

.ns-assign-rules {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 0.75rem;
    padding-inline-start: 1.2rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

    .ns-assign-rules li::marker {
        font-weight: 700;
        color: var(--rz-primary);
    }

.ns-assign-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .ns-assign-form {
        grid-template-columns: 1fr;
    }
}

.ns-assign-summary {
    margin-bottom: 0.85rem;
}

.ns-rank {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ns-rank li {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--ns-border);
        border-radius: 12px;
        background: var(--ns-surface);
    }

        .ns-rank li.is-chosen {
            border-color: color-mix(in srgb, #16A34A 45%, var(--ns-border));
            background: color-mix(in srgb, #16A34A 6%, var(--ns-surface));
        }

        .ns-rank li.is-skipped {
            opacity: 0.7;
        }

.ns-rank-no {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ns-hover);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
}

.ns-rank li.is-chosen .ns-rank-no {
    background: #16A34A;
    color: #fff;
}

.ns-rank-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ns-rank-name {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ns-rank-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

    .ns-rank-meta span {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        direction: ltr;
        unicode-bidi: isolate;
    }

    .ns-rank-meta .rzi {
        font-size: 0.95rem;
    }

.ns-rank-score {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    width: 150px;
}

    .ns-rank-score .ns-meter {
        flex: 1;
    }

    .ns-rank-score b {
        min-width: 2.6rem;
        text-align: end;
        direction: ltr;
    }

@media (max-width: 640px) {
    .ns-rank li {
        flex-wrap: wrap;
    }

    .ns-rank-score {
        order: 5;
        width: 100%;
    }
}

/* =========================================================
   Ticket inbox
   ========================================================= */
.ns-inbox-updated {
    font-size: 0.78rem;
    color: var(--rz-text-tertiary-color);
}

.ns-inbox {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* ---- Views ---- */
.ns-views {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem;
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    box-shadow: var(--ns-shadow);
}

.ns-view {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--rz-text-color);
    font: inherit;
    font-size: 0.9rem;
    text-align: start;
    cursor: pointer;
}

    .ns-view:hover {
        background: var(--ns-hover);
    }

    .ns-view:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 1px;
    }

    .ns-view .rzi {
        font-size: 1.2rem;
    }

.ns-view-name {
    flex: 1;
}

.ns-view-count {
    min-width: 1.6rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--ns-hover);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    direction: ltr;
}

.ns-view.is-active {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
    font-weight: 600;
}

    .ns-view.is-active .ns-view-count {
        background: var(--rz-primary);
        color: #fff;
    }

.ns-view.is-alert .rzi {
    color: #DC2626;
}

.ns-view.is-alert .ns-view-count {
    background: #DC2626;
    color: #fff;
}

/* ---- Filter bar ---- */
.ns-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.ns-filter-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}

    .ns-filter-search .rzi {
        position: absolute;
        top: 50%;
        inset-inline-start: 0.65rem;
        transform: translateY(-50%);
        font-size: 1.15rem;
        color: var(--rz-text-tertiary-color);
        pointer-events: none;
    }

    .ns-filter-search .ns-input {
        width: 100%;
        height: 40px;
        padding-inline-start: 2.2rem;
    }

.ns-filter-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

    .ns-filter-more .rz-dropdown {
        width: 165px;
    }

.ns-filter-toggle {
    display: none !important;
}

/* ---- List ---- */
.ns-tlist {
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    box-shadow: var(--ns-shadow);
}

.ns-thead,
.ns-trow {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) 120px 200px 170px;
    column-gap: 1rem;
    align-items: center;
}

.ns-thead {
    padding-block: 0.6rem;
    padding-inline: 0 1rem;
    border-bottom: 1px solid var(--ns-border);
    background: var(--ns-hover);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
}

.ns-trow {
    padding-block: 0.8rem;
    padding-inline: 0 1rem;
    border-bottom: 1px solid var(--ns-border);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

    .ns-trow:last-child {
        border-bottom: 0;
    }

    .ns-trow:hover {
        background: var(--ns-hover);
    }

    .ns-trow:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: -2px;
    }

.ns-trow-bar {
    align-self: stretch;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
}

    .ns-trow-bar.p-critical {
        background: #DC2626;
    }

    .ns-trow-bar.p-high {
        background: var(--ns-orange);
    }

    .ns-trow-bar.p-normal {
        background: var(--rz-primary);
    }

    .ns-trow-bar.p-low {
        background: #94A3B8;
    }

.ns-trow-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ns-trow-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ns-trow-no {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rz-primary);
    direction: ltr;
    unicode-bidi: isolate;
}

.ns-trow-title {
    overflow: hidden;
    font-weight: 600;
    color: var(--rz-text-title-color);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ns-trow-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}

    .ns-trow-sub > span {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .ns-trow-sub .rzi {
        font-size: 0.95rem;
    }

.ns-trow-owner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.ns-avatar.ns-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
}

.ns-avatar.is-empty {
    background: var(--ns-hover);
    color: var(--rz-text-tertiary-color);
}

    .ns-avatar.is-empty .rzi {
        font-size: 1rem;
    }

.ns-owner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.25;
}

    .ns-owner-text > * {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ns-owner-text small {
        font-size: 0.72rem;
        color: var(--rz-text-tertiary-color);
    }

.ns-only-mobile {
    display: none !important;
}

/* ---- SLA badge ---- */
.ns-sla {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ns-sla-kind {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--rz-text-tertiary-color);
}

.ns-sla-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

    .ns-sla-pill .rzi {
        font-size: 0.95rem;
    }

.ns-sla-ok {
    background: #DBEAFE;
    color: #1E40AF;
}

.ns-sla-risk {
    background: #FFEDD5;
    color: #9A3412;
}

.ns-sla-late {
    background: #FEE2E2;
    color: #B91C1C;
}

.ns-sla-paused {
    background: #F1F5F9;
    color: #475569;
}

.ns-sla-met {
    background: #DCFCE7;
    color: #166534;
}

.ns-sla-metlate {
    background: #FCE7F3;
    color: #9D174D;
}

.ns-sla-none {
    color: var(--rz-text-tertiary-color);
}

/* ---- Pager ---- */
.ns-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.9rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}

.ns-pager-buttons {
    display: flex;
    gap: 0.4rem;
}

html[dir="rtl"] .ns-flip-icon .rzi {
    transform: scaleX(-1);
}

/* ---- Tablet: views become a swipeable row ---- */
@media (max-width: 1100px) {
    .ns-inbox {
        grid-template-columns: 1fr;
    }

    .ns-views {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding: 0.35rem;
        scrollbar-width: none;
    }

        .ns-views::-webkit-scrollbar {
            display: none;
        }

    .ns-view {
        flex: none;
        width: auto;
        white-space: nowrap;
    }
}

/* ---- Phone: rows become cards, filters fold away ---- */
@media (max-width: 900px) {
    .ns-thead {
        display: none;
    }

    .ns-trow {
        grid-template-columns: 4px minmax(0, 1fr) auto;
        grid-template-areas:
            "bar main main"
            "bar owner sla";
        row-gap: 0.6rem;
        padding-inline-end: 0.9rem;
    }

    .ns-trow-bar {
        grid-area: bar;
    }

    .ns-trow-main {
        grid-area: main;
    }

    .ns-trow-prio {
        display: none;
    }

    .ns-trow-owner {
        grid-area: owner;
    }

    .ns-trow-sla {
        grid-area: sla;
        justify-self: end;
    }

    .ns-trow-title {
        display: -webkit-box;
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .ns-only-mobile {
        display: inline-flex !important;
    }

    .ns-inbox-updated {
        display: none;
    }
}

@media (max-width: 760px) {
    .ns-filter-toggle {
        display: inline-flex !important;
    }

    .ns-filter-more {
        display: none;
        width: 100%;
    }

    .ns-filterbar.is-open .ns-filter-more {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ns-filter-more .rz-dropdown {
        width: 100%;
    }
}

/* =========================================================
   New ticket
   ========================================================= */
.ns-newticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

.ns-newticket-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.ns-newticket-side {
    position: sticky;
    top: 1rem;
}

.ns-step-no {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--rz-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.ns-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ns-field-block {
    margin-top: 1rem;
}

.ns-prio-select {
    flex-wrap: wrap;
}

/* Summary */
.ns-sum-empty {
    margin: 0 0 1rem;
}

.ns-sum-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ns-border);
}

.ns-sum-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
}

    .ns-sum-label .rzi {
        font-size: 1.05rem;
        color: var(--rz-primary);
    }

.ns-sum-text {
    margin: 0;
    font-size: 0.85rem;
}

.ns-sum-warn {
    display: flex;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.8rem;
    color: #9A3412;
}

    .ns-sum-warn .rzi {
        flex: none;
        font-size: 1rem;
    }

.ns-sum-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
}

    .ns-sum-dl dt {
        color: var(--rz-text-secondary-color);
    }

    .ns-sum-dl dd {
        margin: 0;
        font-weight: 600;
    }

.ns-sum-person {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.ns-create-btn {
    width: 100%;
    margin-top: 0.25rem;
}

.ns-cancel {
    display: block;
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
}

/* Created */
.ns-created {
    max-width: 560px;
    margin: 3rem auto;
    padding: 2rem 1.5rem;
    border: 1px solid var(--ns-border);
    border-radius: 16px;
    background: var(--rz-base-background-color);
    box-shadow: var(--ns-shadow);
    text-align: center;
}

.ns-created-icon .rzi {
    font-size: 3.5rem;
    color: #16A34A;
}

.ns-created h2 {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.35rem;
}

.ns-created p {
    margin: 0 0 1.25rem;
    color: var(--rz-text-secondary-color);
}

.ns-created-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

@media (max-width: 1100px) {
    .ns-newticket {
        grid-template-columns: 1fr;
    }

    .ns-newticket-side {
        position: static;
    }
}

@media (max-width: 760px) {
    .ns-grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Ticket workspace
   ========================================================= */
.ns-ws-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ns-ws-head-main { flex: 1; min-width: 0; }
.ns-ws-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ns-ws-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.ns-ws-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rz-text-title-color);
    overflow-wrap: anywhere;
}
.ns-ws-meta { margin-top: 0.6rem; }

.ns-ws {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}
.ns-ws-main { min-width: 0; }
.ns-ws-side { display: flex; flex-direction: column; gap: 1rem; }

/* ---- Conversation ---- */
.ns-thread { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }

.ns-msg { display: flex; align-items: flex-start; gap: 0.75rem; }
.ns-msg.is-customer .ns-avatar { background: var(--ns-orange); }
.ns-msg.is-note .ns-avatar { background: #D97706; }

.ns-msg-card {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    box-shadow: var(--ns-shadow);
}
.ns-msg.is-staff .ns-msg-card { border-color: color-mix(in srgb, var(--rz-primary) 30%, var(--ns-border)); }
.ns-msg.is-staff .ns-msg-head { background: color-mix(in srgb, var(--rz-primary) 6%, var(--rz-base-background-color)); }
.ns-msg.is-note .ns-msg-card {
    border-color: color-mix(in srgb, #F59E0B 45%, var(--ns-border));
    background: color-mix(in srgb, #F59E0B 6%, var(--rz-base-background-color));
}
.ns-msg.is-note .ns-msg-head { background: color-mix(in srgb, #F59E0B 14%, var(--rz-base-background-color)); }

.ns-msg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--ns-border);
    font-size: 0.85rem;
}
.ns-msg-author { font-weight: 700; }
.ns-msg-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--ns-hover);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}
.ns-msg-tag .rzi { font-size: 0.85rem; }
.ns-msg-tag.is-note { background: color-mix(in srgb, #F59E0B 22%, transparent); color: #92400E; }
.ns-msg-tag.is-customer { background: color-mix(in srgb, var(--ns-orange) 16%, transparent); color: #C2410C; }
[data-theme="dark"] .ns-msg-tag.is-note { color: #FCD34D; }
[data-theme="dark"] .ns-msg-tag.is-customer { color: #FDBA74; }
.ns-msg-time { margin-inline-start: auto; font-size: 0.75rem; color: var(--rz-text-tertiary-color); direction: ltr; }
.ns-msg-body { padding: 0.85rem 0.9rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.ns-msg-card .ns-file-chips { padding: 0 0.9rem 0.85rem; }

/* ---- Composer ---- */
.ns-composer {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    box-shadow: var(--ns-shadow);
    transition: border-color 0.15s, background 0.15s;
}
.ns-composer.is-note {
    border-color: color-mix(in srgb, #F59E0B 50%, var(--ns-border));
    background: color-mix(in srgb, #F59E0B 6%, var(--rz-base-background-color));
}

.ns-composer-mode { display: inline-flex; gap: 0.25rem; width: fit-content; padding: 0.2rem; border-radius: 10px; background: var(--ns-hover); }
.ns-composer-mode button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.ns-composer-mode button .rzi { font-size: 1rem; }
.ns-composer-mode button.is-active {
    background: var(--rz-base-background-color);
    color: var(--rz-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.ns-composer.is-note .ns-composer-mode button.is-active { color: #B45309; }

.ns-composer-text {
    width: 100%;
    min-height: 110px;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: var(--ns-surface);
    color: var(--rz-text-color);
    font: inherit;
    line-height: 1.55;
    resize: vertical;
    outline: none;
}
.ns-composer-text:focus { border-color: var(--rz-primary); box-shadow: 0 0 0 3px var(--rz-primary-lighter); }

.ns-composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ns-composer-foot .ns-hint { display: inline-flex; align-items: center; gap: 0.3rem; }
.ns-composer-foot .ns-hint .rzi { font-size: 1rem; }

.ns-closed-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--ns-border);
    border-radius: 12px;
    color: var(--rz-text-secondary-color);
}

/* ---- Timeline ---- */
.ns-timeline { margin: 0; padding: 0; list-style: none; }
.ns-tl-item { position: relative; display: flex; gap: 0.85rem; padding-bottom: 1.1rem; }
.ns-tl-item::before {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 0;
    inset-inline-start: 16px;
    width: 2px;
    background: var(--ns-border);
}
.ns-tl-item:last-child::before { display: none; }
.ns-tl-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rz-primary) 12%, var(--rz-base-background-color));
    color: var(--rz-primary);
}
.ns-tl-dot .rzi { font-size: 1.05rem; }
.ns-tl-dot.ev-status_changed { background: color-mix(in srgb, #7C3AED 12%, var(--rz-base-background-color)); color: #7C3AED; }
.ns-tl-dot.ev-assigned { background: color-mix(in srgb, var(--ns-orange) 14%, var(--rz-base-background-color)); color: var(--ns-orange); }
.ns-tl-dot.ev-sla_paused,
.ns-tl-dot.ev-sla_breached { background: color-mix(in srgb, #DC2626 10%, var(--rz-base-background-color)); color: #DC2626; }

.ns-tl-body { flex: 1; min-width: 0; padding-top: 0.35rem; }
.ns-tl-line { font-size: 0.9rem; }
.ns-tl-actor { font-weight: 700; }
.ns-tl-change { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.85rem; }
.ns-tl-change .rzi { font-size: 1rem; color: var(--rz-text-tertiary-color); }
.ns-tl-old {
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: color-mix(in srgb, #DC2626 8%, transparent);
    color: var(--rz-text-secondary-color);
    text-decoration: line-through;
}
.ns-tl-new { padding: 0.1rem 0.45rem; border-radius: 6px; background: color-mix(in srgb, #16A34A 10%, transparent); font-weight: 600; }
.ns-tl-notes { margin-top: 0.3rem; font-size: 0.8rem; font-style: italic; color: var(--rz-text-secondary-color); }
.ns-tl-time { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--rz-text-tertiary-color); direction: ltr; text-align: start; }

/* ---- Sidebar ---- */
.ns-side-card .ns-card-header { padding: 0.75rem 1rem; font-size: 0.9rem; }
.ns-side-card .ns-card-body { padding: 0.9rem 1rem 1rem; }

.ns-dl { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 0.45rem 0.85rem; margin: 0; font-size: 0.85rem; }
.ns-dl dt { color: var(--rz-text-secondary-color); }
.ns-dl dd { min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.ns-side-person { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }
.ns-side-text { font-size: 0.875rem; line-height: 1.6; white-space: pre-wrap; }
.ns-side-files { display: flex; flex-direction: column; gap: 0.45rem; }
.ns-side-file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ns-side-file .ns-file-chip-name { max-width: 170px; }

.ns-sla-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--ns-border);
    font-size: 0.85rem;
}
.ns-sla-row:last-of-type { border-bottom: 0; }
.ns-sla-row-label { color: var(--rz-text-secondary-color); }

@media (max-width: 1100px) {
    .ns-ws { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ns-ws-title { font-size: 1.3rem; }
    .ns-msg > .ns-avatar { display: none; }
}

/* =========================================================
   Ticket workspace: actions (Step 17B)
   ========================================================= */
.ns-ws-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
}
.ns-ws-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 180px; }
.ns-ws-field .rz-dropdown { width: 100%; }
.ns-ws-field-label { font-size: 0.75rem; font-weight: 600; color: var(--rz-text-secondary-color); }
.ns-ws-field-owner { flex: 1; min-width: 220px; }
.ns-ws-owner { display: flex; align-items: center; gap: 0.6rem; min-height: 38px; }
.ns-ws-owner .ns-owner-text { flex: 1; min-width: 0; }
.ns-ws-bar-end { margin-inline-start: auto; }

/* Sidebar */
.ns-inline-link {
    margin-inline-start: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rz-primary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.ns-inline-link:hover { text-decoration: underline; }
.ns-side-resolution { border-color: color-mix(in srgb, #16A34A 40%, var(--ns-border)); }
.ns-side-resolution .ns-card-header { background: color-mix(in srgb, #16A34A 7%, var(--rz-base-background-color)); }
.ns-side-resolution .ns-card-title .rzi { color: #16A34A; }

/* Assign dialog */
.ns-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ns-suggest-list { max-height: 340px; overflow-y: auto; padding-inline-end: 0.25rem; }

/* Contract dialog: one choice per row */
.ns-pick-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ns-pick {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: var(--ns-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ns-pick:hover { border-color: color-mix(in srgb, var(--rz-primary) 40%, var(--ns-border)); }
.ns-pick.is-selected {
    border-color: var(--rz-primary);
    background: color-mix(in srgb, var(--rz-primary) 6%, var(--ns-surface));
}
.ns-pick.is-disabled { opacity: 0.6; cursor: not-allowed; }
.ns-pick input { flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--rz-primary); }
.ns-pick-text { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ns-pick-text small { color: var(--rz-text-secondary-color); }

/* Details dialog */
.ns-details-grid .ns-field-block { margin-top: 0; }

@media (max-width: 640px) {
    .ns-ws-field { flex: 1 1 100%; min-width: 0; }
    .ns-ws-bar-end { margin-inline-start: 0; }
}

/* =========================================================
   Customer portal: tickets (Step 18A)
   ========================================================= */

/* Toolbar: lists, mine / whole company, search */
.ns-ptoolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ns-pviews {
    display: flex;
    max-width: 100%;
    gap: 0.25rem;
    padding: 0.25rem;
    overflow-x: auto;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: var(--ns-surface);
}
.ns-pview {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font: inherit;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}
.ns-pview:hover { background: var(--ns-hover); }
.ns-pview.is-active {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
    font-weight: 600;
}
.ns-pview.is-active .ns-view-count { background: var(--rz-primary); color: #fff; }
.ns-pview.is-alert .ns-view-count { background: var(--ns-orange); color: #fff; }
.ns-pview:focus-visible,
.ns-seg button:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 1px; }

.ns-ptoolbar-end {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}
.ns-ptoolbar-end .ns-filter-search { flex: 0 1 300px; }

/* Two-button switch */
.ns-seg {
    display: inline-flex;
    padding: 0.2rem;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: var(--ns-surface);
}
.ns-seg button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rz-text-secondary-color);
    font: inherit;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}
.ns-seg button .rzi { font-size: 1rem; }
.ns-seg button.is-active { background: var(--rz-primary); color: #fff; }

/* Ticket cards */
.ns-plist { display: flex; flex-direction: column; gap: 0.6rem; }
.ns-prow {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    padding-block: 0.85rem;
    padding-inline: 0 1rem;
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    background: var(--ns-surface);
    box-shadow: var(--ns-shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s;
}
.ns-prow:hover { border-color: color-mix(in srgb, var(--rz-primary) 40%, var(--ns-border)); }
.ns-prow:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
.ns-prow.needs-you { border-color: color-mix(in srgb, var(--ns-orange) 55%, var(--ns-border)); }
.ns-prow-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ns-prow-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ns-prow-title {
    overflow: hidden;
    font-weight: 600;
    color: var(--rz-text-title-color);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ns-prow-go { color: var(--rz-text-tertiary-color); }
.ns-needs-you {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ns-orange) 15%, transparent);
    color: #C2410C;
    font-size: 0.75rem;
    font-weight: 600;
}
.ns-needs-you .rzi { font-size: 0.9rem; }
[data-theme="dark"] .ns-needs-you { color: #FDBA74; }

/* Section titles, home page list */
.ns-psection-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--rz-text-title-color);
}
.ns-psection-title .rzi { font-size: 1.2rem; color: var(--rz-primary); }
.ns-precent { margin-top: 1.75rem; }
.ns-precent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.ns-precent-head .ns-psection-title { margin: 0; }

/* Banners: what happens next */
.ns-pbanner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
}
.ns-pbanner > .rzi { flex: none; font-size: 1.5rem; }
.ns-pbanner-body { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; min-width: 0; }
.ns-pbanner-title { font-weight: 700; color: var(--rz-text-title-color); }
.ns-pbanner-text { font-size: 0.9rem; color: var(--rz-text-secondary-color); }
.ns-pbanner-text.ns-pre { color: var(--rz-text-color); white-space: pre-wrap; }
.ns-pbanner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.ns-pbanner.is-warn {
    border-color: color-mix(in srgb, #F59E0B 40%, var(--ns-border));
    background: color-mix(in srgb, #F59E0B 10%, var(--ns-surface));
}
.ns-pbanner.is-warn > .rzi { color: #D97706; }
.ns-pbanner.is-success {
    border-color: color-mix(in srgb, #14B8A6 40%, var(--ns-border));
    background: color-mix(in srgb, #14B8A6 9%, var(--ns-surface));
}
.ns-pbanner.is-success > .rzi { color: #0F766E; }
.ns-pbanner.is-muted { border-style: dashed; background: var(--ns-surface); }
.ns-pbanner.is-muted > .rzi { color: var(--rz-text-tertiary-color); }
.ns-pbanner-link { align-items: center; margin-bottom: 1.25rem; transition: border-color 0.15s; }
.ns-pbanner-link:hover { border-color: #F59E0B; }
.ns-pbanner-link > .rzi:last-child { font-size: 1.25rem; color: var(--rz-text-tertiary-color); }

/* Rating */
.ns-prate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
}
.ns-prate-head { display: flex; align-items: center; gap: 0.75rem; }
.ns-prate-title { font-weight: 700; color: var(--rz-text-title-color); }
.ns-prate-word { font-size: 0.85rem; font-weight: 600; color: var(--ns-orange-strong); }
.ns-prate-text {
    width: 100%;
    max-width: 560px;
    min-height: 64px;
    padding: 0.55rem 0.7rem;
    font: inherit;
    resize: vertical;
}
.ns-prate-comment { margin: 0; color: var(--rz-text-secondary-color); white-space: pre-wrap; }
.ns-prate-actions { display: flex; gap: 0.5rem; }
.ns-stars {
    --rz-rating-selected-color: #F59E0B;
    --rz-rating-disabled-color: #F59E0B;
}
.ns-stars-lg { --rz-rating-font-size: 2rem; }

/* Progress: status steps */
.ns-progress { margin: 0; padding: 0; list-style: none; }
.ns-progress-step { position: relative; display: flex; gap: 0.7rem; padding-bottom: 0.85rem; }
.ns-progress-step:last-child { padding-bottom: 0; }
.ns-progress-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 0;
    inset-inline-start: 6px;
    width: 2px;
    background: var(--ns-border);
}
.ns-progress-dot {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.ns-progress-step.is-current .ns-progress-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rz-primary) 22%, transparent);
}
.ns-progress-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}
.ns-progress-step:not(.is-current) .ns-progress-name { font-weight: 500; color: var(--rz-text-secondary-color); }
.ns-progress-time { font-size: 0.75rem; color: var(--rz-text-tertiary-color); }

/* Conversation tag for the support team (portal) */
.ns-msg-tag.is-support {
    background: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

/* Staff sidebar: customer rating */
.ns-side-rating { display: flex; align-items: center; gap: 0.5rem; }
.ns-side-rating-no { font-weight: 700; color: var(--rz-text-title-color); }

/* New ticket (portal) */
.ns-pnew { display: flex; flex-direction: column; gap: 1rem; max-width: 860px; }
.ns-pnew-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }

@media (max-width: 640px) {
    .ns-pviews { flex: 1 1 100%; }
    .ns-ptoolbar-end { flex-basis: 100%; justify-content: stretch; }
    .ns-ptoolbar-end .ns-filter-search { flex: 1 1 100%; min-width: 0; }
    .ns-seg { width: 100%; }
    .ns-seg button { flex: 1; justify-content: center; }
    .ns-prow { column-gap: 0.75rem; padding-inline-end: 0.75rem; }
    .ns-prow-title { white-space: normal; }
    .ns-prow-go { display: none; }
    .ns-pbanner { padding: 0.85rem; }
    .ns-pbanner-actions .rz-button { flex: 1 1 100%; }
    .ns-pnew-actions { flex-direction: column-reverse; align-items: stretch; }
    .ns-precent-head { flex-wrap: wrap; }
}

/* =========================================================
   Customer portal: members, profile, company switcher (Step 18B)
   ========================================================= */

/* Soft badges with an icon */
.ns-badge .rzi { font-size: 0.9rem; }
.ns-badge.ns-tone-blue-soft { background: color-mix(in srgb, var(--rz-primary) 12%, transparent); color: var(--rz-primary); }
.ns-badge.ns-tone-slate-soft { background: var(--ns-hover); color: var(--rz-text-secondary-color); }

/* Visible to screen readers only */
.ns-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Members */
.ns-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}
.ns-member-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.1rem; }
.ns-member-card.is-off { opacity: 0.7; }
.ns-member-card.is-off .ns-avatar { background: #94A3B8; }
.ns-member-head { display: flex; align-items: flex-start; gap: 0.7rem; }
.ns-member-name {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.45rem;
    min-width: 0;
    font-weight: 600;
    color: var(--rz-text-title-color);
}
.ns-member-name small {
    flex-basis: 100%;
    overflow: hidden;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    text-align: start;
    text-overflow: ellipsis;
}
.ns-member-tools { display: flex; flex: none; gap: 0.1rem; margin-top: -0.25rem; }
.ns-member-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ns-member-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 0.6rem;
    margin: 0;
    font-size: 0.85rem;
}
.ns-member-info dt { color: var(--rz-text-tertiary-color); }
.ns-member-info dt .rzi { font-size: 1.05rem; }
.ns-member-info dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.ns-member-note { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; }

/* Profile */
.ns-profile-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
}
.ns-avatar.ns-avatar-lg { width: 64px; height: 64px; font-size: 1.35rem; }
.ns-profile-who { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ns-profile-who h2 { margin: 0; font-size: 1.25rem; color: var(--rz-text-title-color); }
.ns-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
    gap: 1rem;
}
.ns-pw-form { display: flex; flex-direction: column; gap: 0.85rem; }
.ns-pw-field { display: flex; flex-direction: column; gap: 0.3rem; }
.ns-pw-field .ns-input { width: 100%; height: 40px; }

.ns-company-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.ns-company {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
}
.ns-company.is-current {
    border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--ns-border));
    background: color-mix(in srgb, var(--rz-primary) 5%, var(--ns-surface));
}
.ns-company .ns-owner-text { flex: 1; min-width: 0; }
.ns-company form { margin: 0; }

/* Company switcher in the user menu */
.ns-dropdown-label {
    padding: 0.35rem 0.75rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--rz-text-tertiary-color);
    text-transform: uppercase;
}
.ns-dropdown-link.is-current { font-weight: 600; color: var(--rz-primary); cursor: default; }
.ns-dropdown-link.is-current .rzi { color: var(--rz-primary); }
.ns-dropdown form { margin: 0; }

@media (max-width: 640px) {
    .ns-member-grid { grid-template-columns: 1fr; }
    .ns-profile-grid { grid-template-columns: 1fr; }
    .ns-profile-head { padding: 0.9rem; }
    .ns-avatar.ns-avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; }
    .ns-company { flex-wrap: wrap; }
}

/* =========================================================
   Tasks, Kanban board and projects (Step 19)
   ========================================================= */

/* ---- Filter bar extras ---- */
.ns-filterbar .ns-filter-who { width: 175px; }
.ns-filter-check { font-size: 0.85rem; color: var(--rz-text-secondary-color); white-space: nowrap; }
.ns-filterbar .ns-filter-status { width: 190px; }

/* ---- Due date pill ---- */
.ns-due {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
}
.ns-due .rzi { font-size: 0.95rem; }
.ns-due.is-today { color: #B45309; font-weight: 600; }
.ns-due.is-late { color: #DC2626; font-weight: 600; }
.ns-ws-badges .ns-due { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--ns-hover); }

.ns-avatar.ns-avatar-xs { width: 24px; height: 24px; font-size: 0.62rem; }
.ns-avatar.ns-avatar-xs .rzi { font-size: 0.85rem; }

/* ---- Board ---- */
.ns-board-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
}
.ns-board-hint .rzi { font-size: 1rem; }

.ns-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 0.9rem;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
}

.ns-kcol {
    --ns-kcol: #64748B;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 220px;
    padding: 0.7rem;
    border: 1px solid var(--ns-border);
    border-top: 3px solid var(--ns-kcol);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ns-kcol) 5%, var(--ns-page));
    scroll-snap-align: start;
    transition: background 0.15s, border-color 0.15s;
}
.ns-kcol-todo { --ns-kcol: #64748B; }
.ns-kcol-in_progress { --ns-kcol: #1D4ED8; }
.ns-kcol-blocked { --ns-kcol: #DC2626; }
.ns-kcol-review { --ns-kcol: #6366F1; }
.ns-kcol-done { --ns-kcol: #16A34A; }

/* While a card is dragged over a column */
.ns-kcol.rz-can-drop {
    border-color: var(--ns-kcol);
    background: color-mix(in srgb, var(--ns-kcol) 12%, var(--ns-page));
}
.ns-kcol.rz-no-drop { opacity: 0.75; }

.ns-kcol-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0.2rem; }
.ns-kcol-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ns-kcol); }
.ns-kcol-name { flex: 1; font-size: 0.9rem; font-weight: 700; color: var(--rz-text-title-color); }
.ns-kcol-count {
    min-width: 1.6rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ns-kcol) 14%, transparent);
    color: var(--ns-kcol);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    direction: ltr;
}
.ns-kcol-note { padding: 0 0.2rem; font-size: 0.75rem; color: var(--rz-text-tertiary-color); }
.ns-kcol-empty {
    padding: 1.25rem 0.5rem;
    border: 1.5px dashed var(--ns-border);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
    text-align: center;
}

/* Radzen wraps each card in a draggable div */
.ns-board .rz-dropzone-item { padding: 0; border: 0; background: none; box-shadow: none; }
.ns-board .rz-dropzone-item:active { cursor: grabbing; }

/* ---- Card ---- */
.ns-kcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0.75rem 0.65rem;
    padding-inline-start: 0.95rem;
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: var(--rz-base-background-color);
    box-shadow: var(--ns-shadow);
    transition: box-shadow 0.15s, transform 0.15s;
}
.ns-kcard:hover { box-shadow: var(--ns-shadow-pop); }
.ns-kcard.is-late { border-color: color-mix(in srgb, #DC2626 35%, var(--ns-border)); }

.ns-kcard-bar { position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; }
.ns-kcard-bar.p-critical { background: #DC2626; }
.ns-kcard-bar.p-high { background: var(--ns-orange); }
.ns-kcard-bar.p-normal { background: var(--rz-primary); }
.ns-kcard-bar.p-low { background: #94A3B8; }

.ns-kcard-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.ns-kcard-top .ns-trow-no { text-decoration: none; }
.ns-kcard-top .ns-badge { font-size: 0.7rem; padding: 0.05rem 0.5rem; }

.ns-kcard-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rz-text-title-color);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.ns-kcard-title:hover { color: var(--rz-primary); }

.ns-kcard-sub {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
}
.ns-kcard-sub .rzi { flex: none; font-size: 0.95rem; }
.ns-kcard-sub bdi { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ns-kcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; margin-top: 0.15rem; }
.ns-kcard-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--rz-text-tertiary-color);
    white-space: nowrap;
}
.ns-kcard-meta .rzi { font-size: 0.9rem; }
.ns-kcard-meta.ns-due.is-late { color: #DC2626; }
.ns-kcard-meta.ns-due.is-today { color: #B45309; }
.ns-kcard-counts { display: inline-flex; gap: 0.55rem; margin-inline-start: auto; }

/* Touch screens can't drag: a small "move to" list instead */
.ns-kcard-move { display: none; }
@media (hover: none), (max-width: 760px) {
    .ns-board-hint { display: none; }
    .ns-kcard-move {
        display: block;
        width: 100%;
        height: 32px;
        margin-top: 0.2rem;
        padding: 0 0.5rem;
        border: 1px solid var(--ns-border);
        border-radius: 8px;
        background: var(--ns-hover);
        color: var(--rz-text-color);
        font: inherit;
        font-size: 0.8rem;
    }
}

.ns-board-more { margin-top: 0.75rem; font-size: 0.85rem; }

/* ---- Task page ---- */
.ns-task-time { min-width: 140px; }
.ns-task-time-value { display: flex; align-items: center; gap: 0.35rem; min-height: 38px; font-weight: 700; }
.ns-task-time-value small { font-size: 0.8rem; font-weight: 500; color: var(--rz-text-tertiary-color); }

/* Linked tickets / tasks / suggestions in a side card */
.ns-links { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ns-link-item {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
}
.ns-link-main { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ns-link-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ns-link-top .ns-trow-no { text-decoration: none; }
.ns-link-top .ns-badge { font-size: 0.7rem; padding: 0.05rem 0.5rem; }
.ns-link-title {
    overflow: hidden;
    color: var(--rz-text-title-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}
a.ns-link-title:hover { color: var(--rz-primary); }
.ns-link-main small { font-size: 0.75rem; }

.ns-icon-danger-btn.rz-button { flex: none; color: var(--rz-text-tertiary-color) !important; }
.ns-icon-danger-btn.rz-button:hover:not(:disabled) {
    color: #DC2626 !important;
    background: color-mix(in srgb, #DC2626 10%, transparent) !important;
}

/* ---- Projects list ---- */
.ns-project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.ns-project-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ns-project-card:hover { border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--ns-border)); box-shadow: var(--ns-shadow-pop); }
.ns-project-card:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }

.ns-project-top { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ns-project-name {
    margin: 0;
    color: var(--rz-text-title-color);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.ns-project-customer {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
}
.ns-project-customer .rzi { font-size: 1rem; }

.ns-pbar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--ns-hover); }
.ns-pbar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rz-primary), #3B82F6); }
.ns-pbar.ns-pbar-lg { height: 12px; }
html[dir="rtl"] .ns-pbar span { background: linear-gradient(270deg, var(--rz-primary), #3B82F6); }

.ns-project-progress { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: var(--rz-text-secondary-color); }
.ns-project-progress strong { color: var(--rz-text-title-color); }

.ns-project-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-top: auto;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--ns-border);
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}
.ns-project-foot > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ns-project-foot .rzi { font-size: 1rem; }
.ns-project-owner { margin-inline-start: auto; min-width: 0; }
.ns-project-owner bdi { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ns-project-planned { background: #F1F5F9; color: #475569; }
.ns-project-in_progress { background: #DBEAFE; color: #1E3A8A; }
.ns-project-on_hold { background: #FEF9C3; color: #854D0E; }
.ns-project-completed { background: #DCFCE7; color: #166534; }
.ns-project-cancelled { background: #F1F5F9; color: #64748B; }

/* ---- Project page ---- */
.ns-project-kpis {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ns-project-kpi { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1rem 1.25rem; }
.ns-project-notes { margin-bottom: 1.25rem; }

.ns-tlist .ns-trow.ns-project-ticket { grid-template-columns: 4px minmax(0, 1fr) 200px 110px; }
.ns-project-ticket-date { font-size: 0.8rem; white-space: nowrap; }

@media (max-width: 1200px) {
    .ns-project-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ns-project-kpi-wide { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .ns-tlist .ns-trow.ns-project-ticket {
        grid-template-columns: 4px minmax(0, 1fr) auto;
        grid-template-areas:
            "bar main main"
            "bar owner sla";
    }
    .ns-project-ticket-date { grid-area: sla; justify-self: end; }
}

@media (max-width: 760px) {
    .ns-filterbar .ns-filter-who { flex: 1 1 140px; width: auto; }
    .ns-filterbar .ns-filter-status { flex: 1 1 100%; width: auto; }
    .ns-board { grid-auto-columns: 85%; }
    .ns-project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .ns-project-kpis { grid-template-columns: 1fr; }
}

/* =========================================================
   Time tracking (Step 20)
   ========================================================= */

/* ---- Log time form ---- */
.ns-dialog-actions .ns-dialog-actions-start { margin-inline-end: auto; }

.ns-time-target {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ns-border);
    border-radius: 10px;
    background: var(--ns-hover);
}
.ns-time-target .rzi { flex: none; color: var(--rz-primary); }
.ns-time-target-title { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }

.ns-time-duration { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.ns-time-quick { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ns-time-quick button {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    background: var(--ns-surface);
    color: var(--rz-text-secondary-color);
    font: inherit;
    font-size: 0.8rem;
    direction: ltr;
    cursor: pointer;
}
.ns-time-quick button:hover { border-color: var(--rz-primary); color: var(--rz-primary); }
.ns-time-quick button.is-active { border-color: var(--rz-primary); background: var(--rz-primary); color: #fff; }

/* ---- Time card (ticket and task sidebar) ---- */
.ns-time-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.ns-time-sum-value { font-size: 1.35rem; font-weight: 700; color: var(--rz-text-title-color); direction: ltr; unicode-bidi: isolate; }
.ns-time-sum-of { margin-inline-start: 0.3rem; font-size: 0.85rem; color: var(--rz-text-tertiary-color); }
.ns-pbar.is-over span { background: linear-gradient(90deg, var(--ns-orange), #DC2626); }

.ns-time-split {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
}
.ns-time-split > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ns-time-split .rzi { font-size: 1rem; }

.ns-time-list { display: flex; flex-direction: column; margin: 0.75rem 0 0.4rem; padding: 0; list-style: none; }
.ns-time-item { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0; border-top: 1px dashed var(--ns-border); }
.ns-time-item-main { flex: 1; min-width: 0; }
.ns-time-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.85rem; }
.ns-time-item-top strong { direction: ltr; unicode-bidi: isolate; }
.ns-time-item-notes {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--rz-text-secondary-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ns-time-billable { color: #16A34A; font-size: 1rem; }
span.ns-time-billable { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; }
span.ns-time-billable .rzi { font-size: 0.95rem; }

/* ---- Timesheet page ---- */
.ns-time-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ns-time-weeknav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ns-time-weeklabel { min-width: 170px; font-weight: 700; text-align: center; color: var(--rz-text-title-color); }
.ns-time-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ns-time-toolbar .ns-time-person { width: 210px; }

.ns-time-week {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
}
.ns-time-week-totals { display: flex; flex-direction: column; gap: 0.75rem; min-width: 150px; }
.ns-time-week-totals > div { display: flex; flex-direction: column; }
.ns-time-week-totals small { font-size: 0.78rem; color: var(--rz-text-tertiary-color); }
.ns-time-week-who { flex-direction: row !important; align-items: center; gap: 0.5rem; font-weight: 600; }
.ns-time-big { font-size: 1.5rem; font-weight: 700; color: var(--rz-text-title-color); direction: ltr; unicode-bidi: isolate; }

.ns-time-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; }
.ns-time-bar { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; }
.ns-time-bar-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 46px;
    height: 110px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ns-hover);
}
.ns-time-bar-track > span { width: 100%; border-radius: 8px; background: color-mix(in srgb, var(--rz-primary) 75%, transparent); }
.ns-time-bar.is-today .ns-time-bar-track > span { background: var(--ns-orange); }
.ns-time-bar-day { font-size: 0.78rem; font-weight: 600; color: var(--rz-text-secondary-color); }
.ns-time-bar.is-today .ns-time-bar-day { color: var(--ns-orange-strong); }
.ns-time-bar-value { font-size: 0.75rem; color: var(--rz-text-tertiary-color); direction: ltr; white-space: nowrap; }

.ns-time-days { display: flex; flex-direction: column; gap: 1rem; }
.ns-time-day .ns-card-title .ns-badge { margin-inline-start: 0.4rem; }
.ns-time-day-total { font-size: 0.95rem; direction: ltr; unicode-bidi: isolate; }

.ns-time-rows { margin: 0; padding: 0; list-style: none; }
.ns-time-row { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--ns-border); }
.ns-time-row.is-empty { padding-block: 1rem; font-size: 0.85rem; }
.ns-time-row-dur {
    flex: none;
    min-width: 64px;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--rz-primary) 10%, transparent);
    color: var(--rz-primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    direction: ltr;
}
.ns-time-row-main { display: flex; flex: 1; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ns-time-row-top { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ns-time-row-top .ns-trow-no { flex: none; text-decoration: none; }
.ns-time-row-title { overflow: hidden; font-weight: 600; color: var(--rz-text-title-color); white-space: nowrap; text-overflow: ellipsis; }
.ns-time-row-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.85rem;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
}
.ns-time-row-sub > span { display: inline-flex; align-items: center; gap: 0.2rem; }
.ns-time-row-sub .rzi { font-size: 0.95rem; }

/* Team week */
.ns-time-team .ns-table-wrap { margin-top: 0; }
.ns-time-team .ns-table th, .ns-time-team .ns-table td { padding-inline: 0.85rem; }
.ns-time-team .ns-table th.ns-num, .ns-time-team .ns-table td.ns-num { text-align: center; white-space: nowrap; }
.ns-time-team .ns-table th small { display: block; font-weight: 500; }
.ns-time-team .ns-table th.is-today { color: var(--ns-orange-strong); }
.ns-time-team .ns-table tr.is-empty td { color: var(--rz-text-tertiary-color); }
.ns-time-team .ns-table tfoot th { border-block-start: 2px solid var(--ns-border); border-block-end: 0; color: var(--rz-text-title-color); }
.ns-time-person-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rz-text-color);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.ns-time-person-link:hover bdi { color: var(--rz-primary); text-decoration: underline; }

@media (max-width: 760px) {
    .ns-time-week { grid-template-columns: 1fr; }
    .ns-time-week-totals { flex-direction: row; flex-wrap: wrap; gap: 1.5rem; }
    .ns-time-bars { gap: 0.3rem; }
    .ns-time-bar-track { height: 80px; }
    .ns-time-bar-value { font-size: 0.68rem; }
    .ns-time-toolbar, .ns-time-toolbar-end { width: 100%; }
    .ns-time-toolbar .ns-time-person { flex: 1; width: auto; }
    .ns-time-row { padding-inline: 1rem; gap: 0.6rem; }
    .ns-time-row-top { flex-wrap: wrap; }
    .ns-time-row-title { white-space: normal; }
}

/* =========================================================
   Customer suggestions (Step 21)
   ========================================================= */

/* Status badges */
.ns-sugg-new { background: #DCFCE7; color: #166534; }
.ns-sugg-under_review { background: #EDE9FE; color: #5B21B6; }
.ns-sugg-accepted { background: #E0F2FE; color: #075985; }
.ns-sugg-planned { background: #E0E7FF; color: #3730A3; }
.ns-sugg-in_progress { background: #DBEAFE; color: #1E3A8A; }
.ns-sugg-implemented { background: #CCFBF1; color: #115E59; }
.ns-sugg-rejected { background: #FEE2E2; color: #991B1B; }
.ns-sugg-duplicate { background: #F1F5F9; color: #475569; }
.ns-sugg-cancelled { background: #F1F5F9; color: #64748B; }

.ns-trow-bar.p-none { background: color-mix(in srgb, var(--ns-orange) 55%, transparent); }

.ns-sugg-from { margin-bottom: 1rem; }

.ns-sugg-answered {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ns-orange-strong);
}
.ns-sugg-answered .rzi { font-size: 0.95rem; }

/* The idea: today / wanted / why */
.ns-sugg-idea {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
}
.ns-sugg-idea h3 {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ns-sugg-idea p { margin: 0; font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Answer to the customer (staff sidebar) */
.ns-sugg-response { border-color: color-mix(in srgb, var(--ns-orange) 40%, var(--ns-border)); }
.ns-sugg-response .ns-card-header { background: color-mix(in srgb, var(--ns-orange) 7%, var(--rz-base-background-color)); }
.ns-sugg-response .ns-card-title .rzi { color: var(--ns-orange-strong); }
.ns-sugg-response .ns-sum-text { display: flex; align-items: center; gap: 0.35rem; margin: 0.5rem 0 0; }
.ns-sugg-response .ns-subtext { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; }

/* ---- Portal ---- */
.ns-sugg-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.ns-sugg-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--rz-text-tertiary-color);
    text-align: center;
}
.ns-sugg-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    inset-inline-start: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: var(--ns-border);
}
.ns-sugg-steps li.is-done:not(:last-child)::after { background: var(--rz-primary); }
.ns-sugg-step-dot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid var(--ns-border);
    border-radius: 50%;
    background: var(--rz-base-background-color);
    font-size: 0.8rem;
    font-weight: 700;
}
.ns-sugg-step-dot .rzi { font-size: 1rem; }
.ns-sugg-steps li.is-done { color: var(--rz-text-secondary-color); }
.ns-sugg-steps li.is-done .ns-sugg-step-dot { border-color: var(--rz-primary); background: var(--rz-primary); color: #fff; }
.ns-sugg-steps li.is-current { color: var(--rz-text-title-color); font-weight: 700; }
.ns-sugg-steps li.is-current .ns-sugg-step-dot { border-color: var(--ns-orange); color: var(--ns-orange-strong); }

.ns-sugg-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: var(--ns-hover);
}
.ns-sugg-banner > div { display: flex; flex-direction: column; gap: 0.2rem; }
.ns-sugg-banner.is-rejected { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }

.ns-sugg-answer { margin-bottom: 1.25rem; border-color: color-mix(in srgb, var(--rz-primary) 35%, var(--ns-border)); }
.ns-sugg-answer .ns-card-title .rzi { color: var(--rz-primary); }
.ns-sugg-shipped { display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0; font-weight: 600; color: #0F766E; }

.ns-sugg-howto { display: flex; align-items: flex-start; gap: 0.35rem; }
.ns-sugg-howto .rzi { flex: none; font-size: 1rem; }

@media (max-width: 640px) {
    .ns-sugg-steps li { font-size: 0.7rem; }
    .ns-sugg-steps li:not(:last-child)::after { inset-inline-start: calc(50% + 17px); width: calc(100% - 34px); }
}

/* =========================================================
   Knowledge base (Step 22)
   ========================================================= */

/* Badges */
.ns-kb-draft { background: #FEF9C3; color: #854D0E; }
.ns-kb-published { background: #DCFCE7; color: #166534; }
.ns-kb-archived { background: #F1F5F9; color: #64748B; }
.ns-kb-public { background: #E0F2FE; color: #075985; }
.ns-badge .rzi { font-size: 0.9rem; }
.ns-kb-public::before { display: none; }

/* ---- List ---- */
.ns-kb-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ns-kb-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ns-kb-row:hover { border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--ns-border)); box-shadow: var(--ns-shadow-pop); }
.ns-kb-row:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
.ns-kb-row-top { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ns-kb-row-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--rz-text-title-color); overflow-wrap: anywhere; }
.ns-kb-row-excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--rz-text-secondary-color);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---- Reading an article ---- */
.ns-kb-staffbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.ns-kb-staffbar .ns-muted { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.82rem; }
.ns-kb-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: #FEF9C3;
    color: #854D0E;
    font-size: 0.875rem;
}
.ns-kb-note.is-public { background: #E0F2FE; color: #075985; }

.ns-kb-article { max-width: 900px; margin-inline: auto; padding: 1.5rem 2rem 2rem; }
.ns-kb-article-head { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ns-border); }
.ns-kb-article-title { margin: 0.75rem 0 0; font-size: 1.75rem; font-weight: 700; line-height: 1.3; color: var(--rz-text-title-color); overflow-wrap: anywhere; }

/* Article text from the editor */
.ns-kb-body { font-size: 1rem; line-height: 1.8; color: var(--rz-text-color); overflow-wrap: anywhere; }
.ns-kb-body h1, .ns-kb-body h2, .ns-kb-body h3, .ns-kb-body h4 { margin: 1.5em 0 0.5em; line-height: 1.35; color: var(--rz-text-title-color); }
.ns-kb-body h1 { font-size: 1.45rem; }
.ns-kb-body h2 { font-size: 1.25rem; }
.ns-kb-body h3 { font-size: 1.1rem; }
.ns-kb-body p { margin: 0 0 1em; }
.ns-kb-body ul, .ns-kb-body ol { margin: 0 0 1em; padding-inline-start: 1.6em; }
.ns-kb-body li { margin-bottom: 0.35em; }
.ns-kb-body a { color: var(--rz-primary); }
.ns-kb-body img { max-width: 100%; height: auto; margin: 0.5em 0; border: 1px solid var(--ns-border); border-radius: 8px; }
.ns-kb-body blockquote {
    margin: 0 0 1em;
    padding: 0.6em 1em;
    border-inline-start: 4px solid var(--ns-orange);
    border-radius: 6px;
    background: var(--ns-hover);
}
.ns-kb-body code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--ns-hover); font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.9em; }
.ns-kb-body pre { overflow-x: auto; padding: 0.8em 1em; border-radius: 8px; background: var(--ns-hover); direction: ltr; }
.ns-kb-body table { width: 100%; margin: 0 0 1em; border-collapse: collapse; }
.ns-kb-body th, .ns-kb-body td { padding: 0.45em 0.7em; border: 1px solid var(--ns-border); text-align: start; }

/* ---- Editor ---- */
.ns-kb-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.ns-kb-editor-main { display: flex; flex-direction: column; gap: 0.75rem; }
.ns-kb-html.rz-html-editor { min-height: 480px; }
.ns-kb-html .rz-html-editor-content { min-height: 420px; }
.ns-kb-editor-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.ns-kb-editor-side .rz-form-field, .ns-kb-editor-side .rz-dropdown { width: 100%; }
.ns-kb-editor-side .ns-hint { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
.ns-kb-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }

/* ---- "These articles may help" ---- */
.ns-kb-suggest {
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, #16A34A 35%, var(--ns-border));
    border-radius: 12px;
    background: color-mix(in srgb, #16A34A 5%, var(--rz-base-background-color));
}
.ns-kb-suggest-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 700; color: #166534; }
.ns-kb-suggest ul { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.ns-kb-suggest a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
.ns-kb-suggest a:hover { background: var(--ns-hover); }
.ns-kb-suggest-title { font-weight: 600; color: var(--rz-primary); }
.ns-kb-suggest-excerpt { font-size: 0.8rem; color: var(--rz-text-secondary-color); }
.ns-kb-suggest.is-compact { padding: 0.75rem 0.85rem; }
.ns-ws-side .ns-kb-suggest { border-radius: 14px; }

/* ---- Portal help center ---- */
.ns-kb-hero {
    margin-bottom: 1.5rem;
    padding: 2rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--ns-navy), var(--rz-primary));
    color: #fff;
    text-align: center;
}
.ns-kb-hero h1 { margin: 0; font-size: 1.75rem; font-weight: 700; }
.ns-kb-hero p { margin: 0.4rem 0 1.25rem; opacity: 0.85; }
.ns-kb-hero-search { position: relative; max-width: 640px; margin: 0 auto; }
.ns-kb-hero-search .rzi {
    position: absolute;
    top: 50%;
    inset-inline-start: 0.9rem;
    transform: translateY(-50%);
    color: var(--rz-text-tertiary-color);
    pointer-events: none;
}
.ns-kb-hero-search .ns-input { width: 100%; height: 50px; padding-inline-start: 2.75rem; border: 0; border-radius: 12px; font-size: 1rem; box-shadow: var(--ns-shadow-pop); }
.ns-kb-hero-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.9rem; }
.ns-kb-hero-filters .rz-dropdown { width: 200px; }

.ns-kb-still { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 1.5rem; }

.ns-kb-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; max-width: 900px; margin: 1.25rem auto 0; }
.ns-kb-still-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--ns-border);
    border-radius: 12px;
    background: var(--rz-base-background-color);
}
.ns-kb-still-card > .rzi { font-size: 2rem; color: var(--rz-primary); }
.ns-kb-still-card > div { display: flex; flex: 1; flex-direction: column; min-width: 160px; }
.ns-kb-still-card span { font-size: 0.85rem; color: var(--rz-text-secondary-color); }

@media (max-width: 1000px) {
    .ns-kb-editor { grid-template-columns: 1fr; }
    .ns-kb-editor-side { position: static; }
}

@media (max-width: 760px) {
    .ns-kb-article { padding: 1rem; }
    .ns-kb-article-title { font-size: 1.4rem; }
    .ns-kb-hero { padding: 1.5rem 1rem; }
    .ns-kb-hero h1 { font-size: 1.4rem; }
    .ns-kb-hero-filters .rz-dropdown { flex: 1 1 140px; width: auto; }
    .ns-kb-after { grid-template-columns: 1fr; }
}

/* =========================================================
   Notifications (Step 23)
   ========================================================= */
.ns-bell { position: relative; }
.ns-bell .ns-icon-btn { position: relative; }

.ns-bell-count {
    position: absolute;
    top: 3px;
    inset-inline-end: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--ns-surface);
    border-radius: 999px;
    background: var(--ns-orange);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    direction: ltr;
}

.ns-bell-backdrop { position: fixed; inset: 0; z-index: 290; }

.ns-bell-panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-height: min(520px, 75vh);
    overflow: hidden;
    border: 1px solid var(--ns-border);
    border-radius: 14px;
    background: var(--rz-base-background-color);
    box-shadow: var(--ns-shadow-pop);
}
.ns-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ns-border);
}
.ns-bell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}
.ns-bell-empty .rzi { font-size: 2rem; }
.ns-bell-list { flex: 1; margin: 0; padding: 0.3rem; overflow-y: auto; list-style: none; }
.ns-bell-all {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--ns-border);
    color: var(--rz-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.ns-bell-all:hover { background: var(--ns-hover); }

/* One notification */
.ns-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    width: 100%;
    padding: 0.65rem 0.7rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--rz-text-color);
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.ns-note:hover { background: var(--ns-hover); }
.ns-note:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: -2px; }
.ns-note.is-unread { background: color-mix(in srgb, var(--rz-primary) 6%, transparent); }
.ns-note.is-unread:hover { background: color-mix(in srgb, var(--rz-primary) 10%, transparent); }
.ns-note-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; font-size: 18px; }
.ns-note-main { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ns-note-text { font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; }
.ns-note.is-unread .ns-note-text { font-weight: 600; }
.ns-note-time { font-size: 0.75rem; color: var(--rz-text-tertiary-color); }
.ns-note-dot { width: 9px; height: 9px; flex: none; margin-top: 0.4rem; border-radius: 50%; background: var(--rz-primary); }

.ns-note-page { padding: 0.4rem; }
.ns-note-page .ns-bell-list { padding: 0; }
.ns-note-page .ns-note { padding: 0.8rem 0.9rem; }

@media (max-width: 640px) {
    .ns-bell-panel {
        position: fixed;
        top: 70px;
        inset-inline: 8px;
        width: auto;
    }
}

/* =========================================================
   Dashboard and reports (Step 24)
   ========================================================= */
.ns-dash-title { margin: 0.25rem 0 0.75rem; font-size: 1.05rem; font-weight: 700; color: var(--rz-text-title-color); }
.ns-kpi-link { display: block; border-radius: 14px; color: inherit; text-decoration: none; }
.ns-kpi-link .ns-kpi { height: 100%; transition: border-color 0.15s, box-shadow 0.15s; }
.ns-dash-sub {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-tertiary-color);
}
.ns-dash-sub .rzi { font-size: 1rem; }

/* Empty lists on the dashboard stay small */
.ns-dash-cols .ns-empty { gap: 0.5rem; padding: 2rem 1rem; }
.ns-dash-cols .ns-empty .ns-kpi-icon { width: 38px; height: 38px; font-size: 20px; }
.ns-dash-cols .ns-empty-title { font-size: 0.95rem; }
.ns-kpi-link:hover .ns-kpi { border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--ns-border)); box-shadow: var(--ns-shadow-pop); }
.ns-kpi-link:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }

.ns-dash-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ns-dash-wide { grid-column: 1 / -1; }
.ns-card-header .ns-card-more { margin-inline-start: auto; font-size: 0.82rem; font-weight: 600; }

.ns-dash-list { margin: 0; padding: 0; list-style: none; }
.ns-dash-list li + li { border-top: 1px solid var(--ns-border); }
.ns-dash-list a {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 1rem 0.65rem 0;
    color: inherit;
    text-decoration: none;
}
html[dir="rtl"] .ns-dash-list a { padding: 0.65rem 0 0.65rem 1rem; }
.ns-dash-list a:hover { background: var(--ns-hover); }
.ns-dash-list .ns-trow-bar { align-self: stretch; }
.ns-dash-item { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; font-size: 0.8rem; }
.ns-dash-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.ns-dash-item-top .ns-badge { font-size: 0.7rem; padding: 0.05rem 0.5rem; }
.ns-dash-item-title { overflow: hidden; font-size: 0.9rem; font-weight: 600; color: var(--rz-text-title-color); white-space: nowrap; text-overflow: ellipsis; }

/* Charts */
.ns-chart .rz-chart { height: 280px; }

/* Plain horizontal bars: label, bar, value (text stays in text colour) */
.ns-hbars { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.ns-hbars li { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) 3rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.ns-hbar-label { overflow: hidden; color: var(--rz-text-secondary-color); white-space: nowrap; text-overflow: ellipsis; }
.ns-hbar-track { height: 14px; overflow: hidden; border-radius: 4px; background: var(--ns-hover); }
.ns-hbar-fill { display: block; height: 100%; border-start-end-radius: 4px; border-end-end-radius: 4px; }
.ns-hbar-value { font-weight: 700; color: var(--rz-text-title-color); text-align: end; direction: ltr; }

/* Reports */
.ns-report-range { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.ns-report-custom { display: flex; align-items: center; gap: 0.4rem; }
.ns-report-custom .ns-date { width: 150px; }
.ns-report-label { margin-inline-start: auto; font-size: 0.85rem; direction: ltr; }
.ns-report-block { margin-bottom: 1rem; }
.ns-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ns-report-table td.ns-num, .ns-report-table th.ns-num { text-align: end; white-space: nowrap; }
.ns-report-person { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; white-space: nowrap; }
.ns-report-comments { grid-column: span 2; }
.ns-report-quotes { display: flex; flex-direction: column; gap: 0.75rem; max-height: 480px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.ns-report-quotes li { padding-bottom: 0.75rem; border-bottom: 1px dashed var(--ns-border); }
.ns-report-quotes li:last-child { border-bottom: 0; }
.ns-report-quotes p { margin: 0.3rem 0 0; font-size: 0.875rem; line-height: 1.55; white-space: pre-wrap; }
.ns-report-quote-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.ns-report-quote-top .ns-trow-no { text-decoration: none; }

@media (max-width: 1000px) {
    .ns-dash-cols { grid-template-columns: 1fr; }
    .ns-report-comments { grid-column: auto; }
}

@media (max-width: 640px) {
    .ns-chart .rz-chart { height: 220px; }
    .ns-report-label { margin-inline-start: 0; }
    .ns-report-custom { flex-wrap: wrap; }
    .ns-hbars li { grid-template-columns: minmax(70px, 38%) minmax(0, 1fr) 2.5rem; }
}

/* =========================================================
   Dashboard: two tabs, focus tiles, week, team load
   ========================================================= */
.ns-dtabs { display: flex; gap: 0.25rem; margin: -0.25rem 0 1.25rem; border-bottom: 1px solid var(--ns-border); }
.ns-dtabs button { display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: -1px; padding: 0.6rem 1rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--rz-text-secondary-color); font: inherit; font-weight: 600; cursor: pointer; }
.ns-dtabs button .rzi { font-size: 1.15rem; }
.ns-dtabs button:hover { color: var(--rz-text-title-color); }
.ns-dtabs button.is-active { border-bottom-color: var(--rz-primary); color: var(--rz-primary); }
.ns-dtabs button:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.ns-dtabs-count { min-width: 1.35rem; padding: 0 0.4rem; border-radius: 999px; background: #DC2626; color: #fff; font-size: 0.72rem; line-height: 1.35rem; text-align: center; }

/* Top tiles: the first one is the "needs you now" tile and gets more room */
.ns-dtop { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ns-dtop.is-even { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ns-dtile { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; padding: 1rem 1.15rem; border: 1px solid var(--ns-border); border-radius: 14px; background: var(--ns-surface); box-shadow: var(--ns-shadow); color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
a.ns-dtile:hover { border-color: color-mix(in srgb, var(--rz-primary) 45%, var(--ns-border)); box-shadow: var(--ns-shadow-pop); }
a.ns-dtile:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
.ns-dtile-label { display: flex; align-items: center; gap: 0.4rem; color: var(--rz-text-secondary-color); font-size: 0.85rem; font-weight: 600; }
.ns-dtile-label .rzi { font-size: 1.1rem; }
.ns-dtile-value { color: var(--rz-text-title-color); font-size: 1.75rem; font-weight: 700; line-height: 1.15; }
.ns-dtile-sub { color: var(--rz-text-secondary-color); font-size: 0.8rem; }
.ns-dtile.is-small .ns-dtile-value { font-size: 1.4rem; }
.ns-dtile.is-hero { border-color: color-mix(in srgb, var(--ns-orange) 45%, var(--ns-border)); background: color-mix(in srgb, var(--ns-orange) 9%, var(--ns-surface)); }
.ns-dtile.is-hero .ns-dtile-label, .ns-dtile.is-hero .ns-dtile-value, .ns-dtile.is-warn .ns-dtile-value { color: #C2410C; }
.ns-dtile.is-hero .ns-dtile-value { font-size: 2.3rem; }
.ns-dtile.is-calm { border-color: color-mix(in srgb, #16A34A 35%, var(--ns-border)); background: color-mix(in srgb, #16A34A 7%, var(--ns-surface)); }
.ns-dtile.is-calm .ns-dtile-label, .ns-dtile.is-calm .ns-dtile-value { color: #15803D; }
.ns-dtile.is-bad .ns-dtile-value { color: #B91C1C; }
[data-theme="dark"] .ns-dtile.is-hero .ns-dtile-label, [data-theme="dark"] .ns-dtile.is-hero .ns-dtile-value, [data-theme="dark"] .ns-dtile.is-warn .ns-dtile-value { color: #FDBA74; }
[data-theme="dark"] .ns-dtile.is-calm .ns-dtile-label, [data-theme="dark"] .ns-dtile.is-calm .ns-dtile-value { color: #86EFAC; }
[data-theme="dark"] .ns-dtile.is-bad .ns-dtile-value { color: #FCA5A5; }

.ns-dchips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ns-dchip { padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.ns-dchip.is-late { background: color-mix(in srgb, #DC2626 14%, transparent); color: #B91C1C; }
.ns-dchip.is-today { background: color-mix(in srgb, var(--ns-orange) 18%, transparent); color: #C2410C; }
[data-theme="dark"] .ns-dchip.is-late { color: #FCA5A5; }
[data-theme="dark"] .ns-dchip.is-today { color: #FDBA74; }
.ns-dtrend { margin-inline-start: 0.3rem; font-weight: 700; white-space: nowrap; }
.ns-dtrend.is-up { color: #C2410C; }
.ns-dtrend.is-down { color: #15803D; }
.ns-badge.ns-dbadge-free { background: color-mix(in srgb, var(--ns-orange) 16%, transparent); color: #C2410C; }

/* Split bar with legend (status or priority shares) */
.ns-dsplit { display: flex; gap: 2px; height: 8px; margin-top: 0.15rem; overflow: hidden; border-radius: 4px; }
.ns-dsplit-part { min-width: 4px; }
.ns-dlegend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; color: var(--rz-text-secondary-color); font-size: 0.75rem; }
.ns-dlegend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.ns-dlegend i { width: 8px; height: 8px; border-radius: 2px; }
.ns-dlegend b { color: var(--rz-text-title-color); }
:is(.ns-dsplit, .ns-dlegend) :is(.s-new, .s-p-high) { background: var(--ns-orange); }
:is(.ns-dsplit, .ns-dlegend) :is(.s-working, .s-p-normal) { background: var(--rz-primary); }
:is(.ns-dsplit, .ns-dlegend) :is(.s-waiting, .s-todo, .s-p-low, .s-p-none) { background: #94A3B8; }
:is(.ns-dsplit, .ns-dlegend) .s-review { background: #6366F1; }
:is(.ns-dsplit, .ns-dlegend) :is(.s-blocked, .s-p-critical) { background: #DC2626; }

/* Minutes per day (time tile) */
.ns-ddays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 0.15rem; }
.ns-ddays-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.ns-ddays-track { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 30px; }
.ns-ddays-bar { width: 100%; max-width: 16px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--rz-primary) 30%, var(--ns-hover)); }
.ns-ddays-col.is-today .ns-ddays-bar { background: var(--rz-primary); }
.ns-ddays-day { color: var(--rz-text-tertiary-color); font-size: 0.68rem; line-height: 1; }
.ns-ddays-col.is-today .ns-ddays-day { color: var(--rz-primary); font-weight: 700; }

/* Meters (on-time shares, project progress, team load) */
.ns-dmeter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 0.5rem; color: var(--rz-text-secondary-color); font-size: 0.8rem; }
.ns-dmeter b { color: var(--rz-text-title-color); font-size: 1.05rem; direction: ltr; }
.ns-dmeter .ns-dmeter-track { grid-column: 1 / -1; }
.ns-dmeter-track { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--ns-hover); }
.ns-dmeter-fill { display: block; height: 100%; border-radius: 4px; background: var(--rz-primary); }
.ns-dmeter-fill.is-good { background: #16A34A; }
.ns-dmeter-fill.is-warn { background: var(--ns-orange); }
.ns-dmeter-fill.is-bad { background: #DC2626; }
.ns-dstars { display: flex; gap: 1px; color: color-mix(in srgb, var(--rz-text-tertiary-color) 45%, transparent); }
.ns-dstars .rzi { font-size: 1.1rem; }
.ns-dstars .rzi.is-on { color: #F59E0B; }

/* Two columns under the tiles */
.ns-dgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 1rem; margin-bottom: 1rem; }
.ns-dgrid.is-wide-first { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ns-dstack { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ns-dnone { margin: 0.75rem 0 0; color: var(--rz-text-tertiary-color); font-size: 0.85rem; text-align: center; }
.ns-card > .ns-dnone { margin: 0; padding: 1.5rem 1rem; }
.ns-dnews { margin: 0; padding: 0.35rem; list-style: none; }
.ns-dnews .ns-note { width: 100%; }

/* My week */
.ns-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.ns-week-day { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 0; padding: 0.45rem 0.2rem; border: 1px solid var(--ns-border); border-radius: 10px; background: var(--ns-surface); color: inherit; font: inherit; cursor: pointer; }
.ns-week-day:hover { background: var(--ns-hover); }
.ns-week-day:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 1px; }
.ns-week-day.is-today { border-color: var(--rz-primary); }
.ns-week-day.is-selected { border-color: var(--rz-primary); background: color-mix(in srgb, var(--rz-primary) 10%, var(--ns-surface)); box-shadow: inset 0 0 0 1px var(--rz-primary); }
.ns-week-name { max-width: 100%; overflow: hidden; color: var(--rz-text-tertiary-color); font-size: 0.72rem; white-space: nowrap; text-overflow: ellipsis; }
.ns-week-date { color: var(--rz-text-secondary-color); font-size: 0.8rem; }
.ns-week-count { color: var(--rz-text-tertiary-color); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.ns-week-count.has-items { color: var(--rz-primary); }
.ns-week-count.is-late { color: #DC2626; }
.ns-week-list { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.ns-week-list li + li { border-top: 1px solid var(--ns-border); }
.ns-week-list a { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.25rem; border-radius: 6px; color: inherit; font-size: 0.85rem; text-decoration: none; }
.ns-week-list a:hover { background: var(--ns-hover); }
.ns-week-list .rzi { color: var(--rz-text-tertiary-color); font-size: 1rem; }
.ns-week-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ns-week-time { color: var(--rz-text-secondary-color); font-size: 0.78rem; direction: ltr; }
.ns-week-time.is-late { color: #DC2626; font-weight: 600; }

/* Team load and project progress rows */
.ns-dload, .ns-dprojects { margin: 0; padding: 0.35rem 1rem 0.75rem; list-style: none; }
.ns-dload li + li, .ns-dprojects li + li { border-top: 1px dashed var(--ns-border); }
.ns-dload li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 3rem 3rem; align-items: center; gap: 0.75rem; padding: 0.45rem 0; font-size: 0.85rem; }
.ns-dload li.is-away .ns-dload-name bdi { color: var(--rz-text-tertiary-color); }
.ns-dload-name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; }
.ns-dload-name bdi { overflow: hidden; text-overflow: ellipsis; }
.ns-dload-num { font-weight: 700; text-align: end; }
.ns-dload-head { display: grid; grid-template-columns: 3rem 3rem; gap: 0.75rem; color: var(--rz-text-tertiary-color); font-size: 0.72rem; font-weight: 600; text-align: end; }
.ns-dprojects a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) 2.8rem 3.8rem; align-items: center; gap: 0.75rem; padding: 0.5rem 0; color: inherit; font-size: 0.85rem; text-decoration: none; }
.ns-dprojects a:hover .ns-dprojects-name { color: var(--rz-primary); }
.ns-dprojects-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ns-dprojects-pct { font-weight: 700; text-align: end; direction: ltr; }
.ns-dprojects-end { font-size: 0.78rem; text-align: end; }

@media (max-width: 1200px) {
    .ns-dtop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .ns-dgrid, .ns-dgrid.is-wide-first { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .ns-dtop { grid-template-columns: minmax(0, 1fr); }
    .ns-dtabs button { flex: 1; justify-content: center; padding-inline: 0.5rem; }
    .ns-dload li { grid-template-columns: minmax(0, 1fr) 4rem 2.2rem 2.2rem; gap: 0.5rem; }
    .ns-dload-head { grid-template-columns: 2.2rem 2.2rem; gap: 0.5rem; }
    .ns-dprojects a { grid-template-columns: minmax(0, 1fr) 4rem 2.6rem; }
    .ns-dprojects-end { display: none; }
}

/* Dashboard: tighter rows and a shorter chart */
.ns-dash-list a, html[dir="rtl"] .ns-dash-list a { padding-block: 0.55rem; }
.ns-dash-list .ns-dash-item { gap: 0.2rem; }
.ns-dash-list .ns-sla { flex-direction: row; align-items: center; gap: 0.4rem; }
.ns-dash-who { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--rz-text-secondary-color); }
.ns-dash-who .rzi { font-size: 0.95rem; }
.ns-dchart { margin-bottom: 1rem; }
.ns-dchart .ns-chart .rz-chart { height: 220px; }

@media (max-width: 640px) {
    .ns-dash-list .ns-sla { flex-direction: column; align-items: flex-end; gap: 0.1rem; }
}

/* Page titles get focus after each navigation (for screen readers); no box around them */
h1:focus, h1:focus-visible { outline: none; }

/* Dashboard columns end on the same line: cards stretch, the last card of a stack takes the rest */
.ns-dgrid { align-items: stretch; }
.ns-dgrid > .ns-card, .ns-dstack > .ns-card:last-child { display: flex; flex-direction: column; }
.ns-dstack > :last-child { flex: 1 1 auto; }
.ns-dgrid .ns-card > .ns-empty, .ns-dgrid .ns-card > .ns-dnone { flex: 1 1 auto; justify-content: center; }
.ns-dgrid .ns-card > .ns-dnone { display: flex; align-items: center; }
.ns-dgrid .ns-empty { gap: 0.4rem; padding: 1.5rem 1rem; }
.ns-dgrid .ns-empty .ns-kpi-icon { width: 34px; height: 34px; font-size: 18px; }
.ns-dgrid .ns-empty-title { font-size: 0.9rem; }
.ns-dtile.ns-dtile-row { flex-flow: row wrap; align-items: center; column-gap: 0.75rem; }
.ns-dtile.ns-dtile-row .ns-dtile-label { flex: 1 1 auto; }
.ns-dtile.ns-dtile-row .ns-dtile-value { order: 2; font-size: 1.5rem; }
.ns-dtile.ns-dtile-row .ns-dtile-sub { flex-basis: 100%; order: 3; }

/* Portal home dashboard */
.ns-psearch { position: relative; display: flex; align-items: center; width: min(340px, 100%); }
.ns-psearch .rzi { position: absolute; inset-inline-start: 0.65rem; color: var(--rz-text-tertiary-color); font-size: 1.1rem; pointer-events: none; }
.ns-psearch input { width: 100%; padding-inline-start: 2.2rem; }
.ns-dash-when { font-size: 0.75rem; white-space: nowrap; }
.ns-dlinks { margin: 0; padding: 0.35rem; list-style: none; }
.ns-dlinks a { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.65rem; border-radius: 10px; color: inherit; text-decoration: none; }
.ns-dlinks a:hover { background: var(--ns-hover); }
.ns-dlinks a:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: -2px; }
.ns-dlinks .ns-kpi-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 20px; }
.ns-dlinks b { display: block; color: var(--rz-text-title-color); font-size: 0.9rem; }
.ns-dlinks small { display: block; color: var(--rz-text-secondary-color); font-size: 0.78rem; }

@media (max-width: 640px) {
    .ns-psearch { width: 100%; }
}

/* Dashboard, round 3: grouped lists that say why, one-line quiet parts, one "all clear" card */
.ns-dgroup { padding: 0.4rem 1rem; border-block: 1px solid var(--ns-border); background: color-mix(in srgb, var(--ns-hover) 70%, transparent); color: var(--rz-text-secondary-color); font-size: 0.75rem; font-weight: 700; }
.ns-card-header + .ns-dgroup { border-top: 0; }
.ns-dash-meta { overflow: hidden; color: var(--rz-text-secondary-color); font-size: 0.75rem; white-space: nowrap; text-overflow: ellipsis; }
.ns-dwhy { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; max-width: 15rem; text-align: end; }
.ns-dwhy .ns-sla-pill { white-space: nowrap; }
.ns-dwhy-text { color: var(--rz-text-tertiary-color); font-size: 0.72rem; }
.ns-sla-pill.ns-dbadge-free { background: color-mix(in srgb, var(--ns-orange) 16%, transparent); color: #C2410C; }
[data-theme="dark"] .ns-sla-pill.ns-dbadge-free, [data-theme="dark"] .ns-badge.ns-dbadge-free { color: #FDBA74; }
.ns-dmore { display: block; padding: 0.35rem 1rem 0.5rem; font-size: 0.78rem; font-weight: 600; }
.ns-dnext { margin: 0; padding: 0.6rem 1rem 0.8rem; color: var(--rz-text-secondary-color); font-size: 0.82rem; }

.ns-dlines { display: flex; flex-direction: column; }
.ns-dline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; color: inherit; text-decoration: none; }
.ns-dline + .ns-dline { border-top: 1px solid var(--ns-border); }
a.ns-dline:hover { background: var(--ns-hover); }
a.ns-dline:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: -2px; }
.ns-dline-title { display: flex; align-items: center; gap: 0.45rem; color: var(--rz-text-title-color); font-size: 0.88rem; font-weight: 600; }
.ns-dline-title .rzi { color: var(--rz-text-tertiary-color); font-size: 1.1rem; }
.ns-dline-value { color: var(--rz-text-secondary-color); font-size: 0.8rem; text-align: end; }
.ns-dline-value.is-link { color: var(--rz-primary); font-weight: 600; }
.ns-dstack > .ns-dlines:last-child { flex: 0 0 auto; }

.ns-didle { margin: 0; padding: 0.25rem 1rem 0.8rem; color: var(--rz-text-tertiary-color); font-size: 0.78rem; }

.ns-dempty-card { display: flex; align-items: center; justify-content: center; }
.ns-dallclear { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.75rem 1.25rem; text-align: center; }
.ns-dallclear .ns-kpi-icon { width: 40px; height: 40px; font-size: 22px; }
.ns-dallclear h3 { margin: 0.25rem 0 0; color: var(--rz-text-title-color); font-size: 1.05rem; font-weight: 700; }
.ns-dallclear p { margin: 0; color: var(--rz-text-secondary-color); font-size: 0.85rem; }
.ns-dallclear-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.6rem 0 0.2rem; }
.ns-dallclear .ns-dallclear-hint { color: #C2410C; font-size: 0.8rem; }
[data-theme="dark"] .ns-dallclear .ns-dallclear-hint { color: #FDBA74; }

/* A smaller week strip */
.ns-week-day { padding: 0.3rem 0.1rem; }
.ns-week-count { font-size: 0.95rem; }

@media (max-width: 640px) {
    .ns-dwhy { max-width: 9rem; }
    .ns-dline { flex-wrap: wrap; gap: 0.25rem 1rem; }
}

/* Text next to a switch: clicking it flips the switch too */
.ns-switch-text { cursor: pointer; user-select: none; }

/* Reports: the dashboard tiles, four across */
.ns-dtop.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ns-dtile-warn { color: #C2410C; font-weight: 600; }
[data-theme="dark"] .ns-dtile-warn { color: #FDBA74; }

@media (max-width: 1200px) {
    .ns-dtop.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .ns-dtop.is-four { grid-template-columns: minmax(0, 1fr); }
}

/* Tickets: cards layout (same card look as the task board) */
.ns-tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.85rem; }
.ns-tcard { color: inherit; text-decoration: none; }
.ns-tcard:hover .ns-kcard-title { color: var(--rz-primary); }
.ns-tcard:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: 2px; }
.ns-tcard-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.ns-tcard-badges .ns-badge { font-size: 0.7rem; padding: 0.05rem 0.5rem; }
.ns-tcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.6rem; margin-top: auto; padding-top: 0.45rem; border-top: 1px solid var(--ns-border); }
.ns-tcard-owner { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.78rem; color: var(--rz-text-secondary-color); }
.ns-tcard-owner bdi { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 560px) {
    .ns-tcards { grid-template-columns: minmax(0, 1fr); }
}