/*
 * nexus-accounts-typography.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Breakpoint-based font scale for the Account area pages (grid, detail,
 * audit history, hierarchy). Scoped to .nx-app:has(.nx-account-area) so it
 * never touches any other area. Font: always Segoe UI. Min: 10px. Sentence
 * case enforced via text-transform overrides.
 *
 * Breakpoints:  ≥1920px | ≥1440px (default) | ≤1280px | ≤1100px | ≤900px | ≤700px
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — change at each breakpoint, use once in rules below
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default: ≥1440px */
.nx-app:has(.nx-account-area) {
    --acct-font-family:   'Segoe UI', 'Segoe UI Variable', system-ui, -apple-system, sans-serif;
    --acct-label:         13px;   /* dt */
    --acct-value:         13px;   /* dd */
    --acct-tab:           14px;   /* pill-tab labels */
    --acct-hero:          24px;   /* page-hero__title */
    --acct-grid-cell:     12px;   /* td */
    --acct-grid-head:     12px;   /* th */
    --acct-footer:        11px;   /* pagination */
    --acct-form-label:    12px;   /* edit-drawer labels */
}

/* ≥1920px */
@media (min-width: 1920px) {
    .nx-app:has(.nx-account-area) {
        --acct-label:      13px;
        --acct-value:      14px;
        --acct-tab:        15px;
        --acct-hero:       26px;
        --acct-grid-cell:  13px;
        --acct-grid-head:  13px;
        --acct-footer:     12px;
        --acct-form-label: 13px;
    }
}

/* ≤1280px */
@media (max-width: 1280px) {
    .nx-app:has(.nx-account-area) {
        --acct-label:      11px;
        --acct-value:      13px;
        --acct-tab:        13px;
        --acct-hero:       20px;
        --acct-grid-cell:  11px;
        --acct-grid-head:  12px;
        --acct-footer:     11px;
        --acct-form-label: 11px;
    }
}

/* ≤1100px */
@media (max-width: 1100px) {
    .nx-app:has(.nx-account-area) {
        --acct-label:      11px;
        --acct-value:      11px;
        --acct-tab:        12px;
        --acct-hero:       18px;
        --acct-grid-cell:  11px;
        --acct-grid-head:  11px;
        --acct-footer:     10px;
        --acct-form-label: 11px;
    }
}

/* ≤900px */
@media (max-width: 900px) {
    .nx-app:has(.nx-account-area) {
        --acct-label:      10px;
        --acct-value:      11px;
        --acct-tab:        11.5px;
        --acct-hero:       16px;
        --acct-grid-cell:  11px;
        --acct-grid-head:  11px;
        --acct-footer:     10px;
        --acct-form-label: 10px;
    }
}

/* ≤700px */
@media (max-width: 700px) {
    .nx-app:has(.nx-account-area) {
        --acct-label:      10px;
        --acct-value:      11px;
        --acct-tab:        11px;
        --acct-hero:       14px;
        --acct-grid-cell:  11px;
        --acct-grid-head:  11px;
        --acct-footer:     10px;
        --acct-form-label: 10px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENT RULES  — each rule uses the custom property above
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base font family ─────────────────────────────────────────────────────── */
.nx-app:has(.nx-account-area) {
    font-family: var(--acct-font-family) !important;
}

/* ── Hero / page title ────────────────────────────────────────────────────── */
.nx-app:has(.nx-account-area) .page-hero__title {
    font-size: var(--acct-hero) !important;
    font-family: var(--acct-font-family) !important;
    text-transform: none !important;       /* never ALL CAPS */
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ── Tab labels (pill strip) ─────────────────────────────────────────────── */
.nx-app:has(.nx-account-area) .nx-pilltabs__item,
.nx-app:has(.nx-account-area) .nx-pilltabs__item span {
    font-size: var(--acct-tab) !important;
    font-family: var(--acct-font-family) !important;
    text-transform: none !important;
    font-weight: 500;
    letter-spacing: 0;
}

/* ── Detail page: field label (dt) ──────────────────────────────────────── */
.nx-app:has(.nx-account-area) .pd-field dt,
.nx-app:has(.nx-account-area) .pd-fields dt {
    font-size: var(--acct-label) !important;
    font-family: var(--acct-font-family) !important;
    font-weight: 600;
    text-transform: none !important;       /* never ALL CAPS, sentence case */
    letter-spacing: 0.01em;
    color: #605e5c;
}

/* ── Detail page: field value (dd) ──────────────────────────────────────── */
.nx-app:has(.nx-account-area) .pd-field dd,
.nx-app:has(.nx-account-area) .pd-fields dd {
    font-size: var(--acct-value) !important;
    font-family: var(--acct-font-family) !important;
    font-weight: 400;
    text-transform: none !important;
    color: #201f1e;
}

/* ── Edit drawer: form label ─────────────────────────────────────────────── */
.nx-app:has(.nx-account-area) .pd-form-label {
    font-size: var(--acct-form-label) !important;
    font-family: var(--acct-font-family) !important;
    font-weight: 600;
    text-transform: none !important;       /* sentence case — never ALL CAPS */
    letter-spacing: 0.01em;
    color: #605e5c;
}

/* ── Edit drawer: input / select / textarea font ────────────────────────── */
.nx-app:has(.nx-account-area) .pd-form-control,
.nx-app:has(.nx-account-area) .pd-drawer input,
.nx-app:has(.nx-account-area) .pd-drawer select,
.nx-app:has(.nx-account-area) .pd-drawer textarea {
    font-size: var(--acct-value) !important;
    font-family: var(--acct-font-family) !important;
}

/* ── Grid: header cells (th) ─────────────────────────────────────────────── */
.nx-app:has(.nx-account-area) .tbl thead th,
.nx-app:has(.nx-account-area) .tbl thead th .col-header-text,
.nx-app:has(.nx-account-area) .tbl thead th .col-header__label {
    font-size: var(--acct-grid-head) !important;
    font-family: var(--acct-font-family) !important;
    text-transform: none !important;       /* sentence case — never ALL CAPS */
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ── Grid: data cells (td) ──────────────────────────────────────────────── */
.nx-app:has(.nx-account-area) .tbl tbody td,
.nx-app:has(.nx-account-area) .tbl tbody td a,
.nx-app:has(.nx-account-area) .tbl tbody td span {
    font-size: var(--acct-grid-cell) !important;
    font-family: var(--acct-font-family) !important;
    text-transform: none !important;
}

/* ── Grid: footer / pagination ───────────────────────────────────────────── */
.nx-app:has(.nx-account-area) .grid-footer,
.nx-app:has(.nx-account-area) .grid-footer *,
.nx-app:has(.nx-account-area) .grid-footer__info,
.nx-app:has(.nx-account-area) .grid-footer__pages button,
.nx-app:has(.nx-account-area) .grid-footer select {
    font-size: var(--acct-footer) !important;
    font-family: var(--acct-font-family) !important;
}

/* ── Hierarchy tree: card text ───────────────────────────────────────────── */
.nx-app:has(.nx-account-area) .aht__tier-label {
    font-size: var(--acct-label) !important;
    font-family: var(--acct-font-family) !important;
    text-transform: none !important;
}
.nx-app:has(.nx-account-area) .aht__account-name {
    font-size: var(--acct-value) !important;
    font-family: var(--acct-font-family) !important;
}
.nx-app:has(.nx-account-area) .aht__breadcrumb-item {
    font-size: var(--acct-label) !important;
    font-family: var(--acct-font-family) !important;
}
.nx-app:has(.nx-account-area) .aht__header-title {
    font-size: calc(var(--acct-hero) * 0.75) !important;
    font-family: var(--acct-font-family) !important;
    text-transform: none !important;
}
.nx-app:has(.nx-account-area) .aht__children-label-text {
    font-size: var(--acct-label) !important;
    font-family: var(--acct-font-family) !important;
    text-transform: none !important;
}

/* ── Polish: consistent body text across panels ──────────────────────────── */
.nx-app:has(.nx-account-area) .pd-panel__title,
.nx-app:has(.nx-account-area) .pd-panel__head h2 {
    font-size: calc(var(--acct-value) + 1px) !important;
    font-family: var(--acct-font-family) !important;
    text-transform: none !important;
    font-weight: 600;
}
.nx-app:has(.nx-account-area) .eq-action {
    font-family: var(--acct-font-family) !important;
    font-size: var(--acct-label) !important;
}
.nx-app:has(.nx-account-area) .page-hero__desc {
    font-family: var(--acct-font-family) !important;
    font-size: var(--acct-value) !important;
    text-transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Microsoft Fluent colorNeutralBackground / colorBrandForeground
   Activates only when nx-app--dark AND nx-account-area are both present.
   ═══════════════════════════════════════════════════════════════════════════ */

.nx-app--dark:has(.nx-account-area) {
    --acct-text-primary:   #E5E5E5;
    --acct-text-secondary: #A0A0A0;
    --acct-text-brand:     #479EF5;
    --acct-surface-raised: #252423;
    --acct-border:         #3B3A39;
}

.nx-app--dark:has(.nx-account-area) .page-hero__title,
.nx-app--dark:has(.nx-account-area) .pd-hero__title { color: #E5E5E5 !important; }

.nx-app--dark:has(.nx-account-area) .nx-pilltabs__item { color: #A0A0A0 !important; background: transparent !important; }
.nx-app--dark:has(.nx-account-area) .nx-pilltabs__item--active { color: #479EF5 !important; background: rgba(71,158,245,0.12) !important; border-color: rgba(71,158,245,0.35) !important; }

.nx-app--dark:has(.nx-account-area) .pd-field dt,
.nx-app--dark:has(.nx-account-area) .pd-fields dt { color: #A0A0A0 !important; }
.nx-app--dark:has(.nx-account-area) .pd-field dd,
.nx-app--dark:has(.nx-account-area) .pd-fields dd { color: #E5E5E5 !important; }

.nx-app--dark:has(.nx-account-area) .pd-form-label { color: #A0A0A0 !important; }
.nx-app--dark:has(.nx-account-area) .pd-form-control,
.nx-app--dark:has(.nx-account-area) .pd-drawer input,
.nx-app--dark:has(.nx-account-area) .pd-drawer select,
.nx-app--dark:has(.nx-account-area) .pd-drawer textarea { background: #2C2B2A !important; color: #E5E5E5 !important; border-color: #3B3A39 !important; }

.nx-app--dark:has(.nx-account-area) .tbl thead th { background: #0B3050 !important; color: #68B8BD !important; border-bottom-color: rgba(71,158,245,0.3) !important; }
.nx-app--dark:has(.nx-account-area) .tbl tbody td,
.nx-app--dark:has(.nx-account-area) .tbl tbody td a,
.nx-app--dark:has(.nx-account-area) .tbl tbody td span { color: #E5E5E5 !important; }
.nx-app--dark:has(.nx-account-area) .tbl tbody tr:nth-child(even) { background: #1F1E1D !important; }
.nx-app--dark:has(.nx-account-area) .tbl tbody tr:hover { background: #2A2927 !important; }

.nx-app--dark:has(.nx-account-area) .grid-footer { color: #A0A0A0 !important; }
.nx-app--dark:has(.nx-account-area) .grid-footer select,
.nx-app--dark:has(.nx-account-area) .grid-footer__pages button { background: #2C2B2A !important; color: #E5E5E5 !important; border-color: #3B3A39 !important; }

.nx-app--dark:has(.nx-account-area) .aht__parent-card,
.nx-app--dark:has(.nx-account-area) .aht__child-card { background: #252423 !important; border-color: #3B3A39 !important; color: #E5E5E5 !important; }
.nx-app--dark:has(.nx-account-area) .aht__tier-label,
.nx-app--dark:has(.nx-account-area) .aht__breadcrumb-item { color: #A0A0A0 !important; }
.nx-app--dark:has(.nx-account-area) .aht__account-name { color: #E5E5E5 !important; }
.nx-app--dark:has(.nx-account-area) .aht__rel-badge { background: rgba(71,158,245,0.15) !important; color: #479EF5 !important; border-color: rgba(71,158,245,0.3) !important; }

.nx-app--dark:has(.nx-account-area) .pd-panel__title,
.nx-app--dark:has(.nx-account-area) .pd-panel__head h2 { color: #E5E5E5 !important; }

.nx-app--dark:has(.nx-account-area) .au-person-role-badge { background: rgba(71,158,245,0.15) !important; color: #479EF5 !important; border-color: rgba(71,158,245,0.3) !important; }
.nx-app--dark:has(.nx-account-area) .au-person-name { color: #479EF5 !important; }
.nx-app--dark:has(.nx-account-area) .au-person-email { color: #A0A0A0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Associated Users search pill + Account Hierarchy tree
   These must be global (not scoped) so .nx-app--dark ancestor selector works.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Users grid: search pill ─────────────────────────────────────────────── */
.nx-app--dark .au-panel-search {
    background: #1F1E1D !important;
    border-color: #3B3A39 !important;
    color: #A0A0A0 !important;
}
.nx-app--dark .au-panel-search__input {
    color: #E5E5E5 !important;
    background: transparent !important;
}
.nx-app--dark .au-panel-search__input::placeholder {
    color: #6e6e6e !important;
}
.nx-app--dark .au-panel-search__icon {
    color: #6e6e6e !important;
}
.nx-app--dark .au-panel-search:focus-within {
    border-color: #479EF5 !important;
    box-shadow: 0 0 0 3px rgba(71,158,245,0.18) !important;
}
.nx-app--dark .au-panel-search--active {
    border-color: #479EF5 !important;
}
.nx-app--dark .au-panel-search__clear {
    color: #A0A0A0 !important;
}
.nx-app--dark .au-panel-search__clear:hover {
    color: #E5E5E5 !important;
}

/* ── Hierarchy: section wrapper ──────────────────────────────────────────── */
.nx-app--dark .aht {
    background: transparent;
}

/* ── Hierarchy: breadcrumb ───────────────────────────────────────────────── */
.nx-app--dark .aht__breadcrumb-item {
    color: #479EF5 !important;
}
.nx-app--dark .aht__breadcrumb-item:hover {
    background: rgba(71,158,245,0.1) !important;
}
.nx-app--dark .aht__breadcrumb-item--plain,
.nx-app--dark .aht__breadcrumb-item--current {
    color: #A0A0A0 !important;
}
.nx-app--dark .aht__breadcrumb-sep {
    color: #4A4A4A !important;
}

/* ── Hierarchy: header ───────────────────────────────────────────────────── */
.nx-app--dark .aht__header-title {
    color: #E5E5E5 !important;
}
.nx-app--dark .aht__count-badge {
    background: rgba(71,158,245,0.25) !important;
    color: #479EF5 !important;
}

/* ── Hierarchy: parent card ──────────────────────────────────────────────── */
.nx-app--dark .aht__parent-card {
    background: linear-gradient(135deg, #0B2340 0%, #1B2A3B 65%) !important;
    border-color: rgba(71,158,245,0.3) !important;
    border-left-color: #479EF5 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.nx-app--dark .aht__parent-card::before {
    background: radial-gradient(ellipse 70% 50% at 95% 10%, rgba(71,158,245,0.1), transparent) !important;
}
.nx-app--dark .aht__parent-card--clickable:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important;
}

/* ── Hierarchy: avatars ──────────────────────────────────────────────────── */
.nx-app--dark .aht__avatar--parent {
    background: linear-gradient(135deg, #0B3050, #1a4a70) !important;
    box-shadow: 0 4px 10px rgba(71,158,245,0.25) !important;
}
.nx-app--dark .aht__avatar--child {
    background: linear-gradient(135deg, #1a1535, #221b4a) !important;
    border-color: rgba(124,58,237,0.3) !important;
    color: #a78bfa !important;
}

/* ── Hierarchy: card body text ───────────────────────────────────────────── */
.nx-app--dark .aht__tier-label {
    color: #479EF5 !important;
}
.nx-app--dark .aht__account-name {
    color: #E5E5E5 !important;
}
.nx-app--dark .aht__rel-badge {
    background: rgba(71,158,245,0.15) !important;
    color: #479EF5 !important;
}
.nx-app--dark .aht__rel-badge--child {
    background: rgba(167,139,250,0.15) !important;
    color: #a78bfa !important;
}
.nx-app--dark .aht__meta-pill {
    background: rgba(71,158,245,0.1) !important;
    border-color: rgba(71,158,245,0.2) !important;
    color: #479EF5 !important;
}
.nx-app--dark .aht__parent-nav-hint {
    background: rgba(71,158,245,0.1) !important;
    color: #479EF5 !important;
}

/* ── Hierarchy: connector + children divider ─────────────────────────────── */
.nx-app--dark .aht__connector-vert {
    background: linear-gradient(to bottom, #479EF5, #2A3A4A) !important;
}
.nx-app--dark .aht__connector-horiz,
.nx-app--dark .aht__children-label-line {
    background: #2A3A4A !important;
}
.nx-app--dark .aht__children-label-text {
    color: #6e6e6e !important;
}

/* ── Hierarchy: collapse button ──────────────────────────────────────────── */
.nx-app--dark .aht__collapse-btn {
    background: #1B2A3B !important;
    border-color: #2A3A4A !important;
    color: #A0A0A0 !important;
}
.nx-app--dark .aht__collapse-btn:hover {
    background: rgba(71,158,245,0.12) !important;
    border-color: rgba(71,158,245,0.35) !important;
    color: #479EF5 !important;
}

/* ── Hierarchy: toolbar (search, sort, export) ───────────────────────────── */
.nx-app--dark .aht__search-input {
    background: #1F1E1D !important;
    border-color: #3B3A39 !important;
    color: #E5E5E5 !important;
}
.nx-app--dark .aht__search-input::placeholder {
    color: #6e6e6e !important;
}
.nx-app--dark .aht__search-input:focus,
.nx-app--dark .aht__search-input:focus-visible {
    border-color: #479EF5 !important;
    box-shadow: 0 0 0 3px rgba(71,158,245,0.18) !important;
}
.nx-app--dark .aht__search-icon,
.nx-app--dark .aht__search-clear {
    color: #6e6e6e !important;
}
.nx-app--dark .aht__search-clear:hover { color: #A0A0A0 !important; }

.nx-app--dark .aht__sort-btn,
.nx-app--dark .aht__export-btn {
    background: #1B2A3B !important;
    border-color: #2A3A4A !important;
    color: #A0A0A0 !important;
}
.nx-app--dark .aht__sort-btn:hover,
.nx-app--dark .aht__export-btn:hover,
.nx-app--dark .aht__sort-btn--active {
    background: rgba(71,158,245,0.12) !important;
    border-color: rgba(71,158,245,0.35) !important;
    color: #479EF5 !important;
}

/* ── Hierarchy: child cards ──────────────────────────────────────────────── */
.nx-app--dark .aht__child-card {
    background: #1B2433 !important;
    border-color: #2A3A4A !important;
    color: #E5E5E5 !important;
}
.nx-app--dark .aht__child-card:hover {
    background: #1F2D42 !important;
    border-color: rgba(71,158,245,0.3) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.nx-app--dark .aht__child-card .aht__account-name {
    color: #E5E5E5 !important;
}
.nx-app--dark .aht__arrow {
    color: #479EF5 !important;
}

/* ── Hierarchy: skeleton shimmer (dark) ──────────────────────────────────── */
.nx-app--dark .aht__skeleton-card {
    background: #1B2A3B !important;
    border-color: #2A3A4A !important;
}
.nx-app--dark .aht__skeleton-avatar,
.nx-app--dark .aht__skeleton-line {
    background: linear-gradient(90deg, #1F2D42 25%, #243344 50%, #1F2D42 75%) !important;
}

/* ── Hierarchy: empty / no-results state ─────────────────────────────────── */
.nx-app--dark .aht__empty,
.nx-app--dark .aht__no-results {
    color: #6e6e6e !important;
}

/* ── Additional dark mode: type filter pills + child card inner ── */
.nx-app--dark .aht__type-pill {
    background: #1B2433 !important;
    border-color: #2A3A4A !important;
    color: #A0A0A0 !important;
}
.nx-app--dark .aht__type-pill:hover {
    background: rgba(3,131,135,0.15) !important;
    border-color: rgba(3,131,135,0.4) !important;
    color: #38B2B8 !important;
}
.nx-app--dark .aht__type-pill--active {
    background: rgba(3,131,135,0.2) !important;
    border-color: #038387 !important;
    color: #38B2B8 !important;
}
.nx-app--dark .aht__type-clear {
    border-color: #3B3A39 !important;
    color: #6e6e6e !important;
}
.nx-app--dark .aht__type-clear:hover {
    background: rgba(161,38,44,0.15) !important;
    border-color: rgba(161,38,44,0.5) !important;
    color: #f47779 !important;
}
.nx-app--dark .aht__results-count {
    color: #6e6e6e !important;
}
/* child card gradient overlay */
.nx-app--dark .aht__child-card::before {
    background: radial-gradient(ellipse 60% 50% at 95% 15%, rgba(167,139,250,0.08), transparent) !important;
}
/* scrollbar in dark mode */
.nx-app--dark .aht__children-scroll {
    scrollbar-color: #4A3B6A #1B2433 !important;
}
.nx-app--dark .aht__children-scroll::-webkit-scrollbar-track {
    background: #1B2433 !important;
}
.nx-app--dark .aht__children-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4A3B6A, #6d28d9) !important;
}