/** * Azora Design System * Centralized design tokens and components for consistent styling across the platform * Version: 2.12.0 * Last Updated: 2026-08-20 * Source of truth for --azora-* tokens. Legacy --az-* aliases live in this file. * Visual reference for components: Deal Rooms (+ Pipeline). * * TEXT HIERARCHY (v2.6.3) — white + grey/bluish throughout: * White (#FFFFFF) → important info + hover / selected / active * Elevated (#E8ECF5) → near-important body (names, panel titles soft, control text) * Soft (#C8D0E0) → default interactive labels (idle tabs, filter text) * Muted (#8E9AAF) → secondary info (table cells, idle segmented tabs) * Label (#6B7A94) → column heads, counts, meta, form labels * Do not invent parallel text hexes in feature CSS — use --azora-text-* / component tokens. * * Data tables (v2.7.0): FULL SPEC in DATA TABLES + ACCORDION TABLE sections + --azora-table-* tokens. * Canonical accordion: .az-accordion-table* (new UI must use this API) * Table body/actions: .az-data-table* / .az-table-action* / .az-data-table-pager* * Consumers: .azs-table, .azora-umbr-act-table, Members / Structure tables. * Separator: ONE inset line under column headings only — body rows have NO separators. * Implement ONLY from tokens + DATA TABLES rules — never invent parallel hexes/spacings. * Standalone filter toolbar (v2.6.2): transparent pill search + selects * (NOT the accordion-drawer filters). Reference: Distribution → Networks, * Umbrella → Circles. See FILTER TOOLBAR — .az-filter-toolbar. * Expand tree (v2.6.2): stacked expandable nodes with nested member tables. * Reference: Distribution → Networks, Umbrella → Circles. * See EXPAND TREE — .az-expand-tree-panel / .az-expand-tree. * Structure / Members table (v2.6.8): Network Management accordion filter tables. * See STRUCTURE TABLE — .az-nm-structure-tree-panel / .az-nm-members-panel / * .az-nm-structure-table / .az-nm-members-table. * Settings UI (v2.10): generic settings/configuration surfaces. * Canonical: .az-settings / .az-settings-section / .az-settings-row / .az-settings-form. * Visual reference: Deal Room → Agreement Workspace → Settings. * Historical Deal Room/Umbrella markup may still use .azora-drm-settings-tab. * Relationship Diagram (v2.11 / v2.12): static HTML/CSS hierarchy for network/relationship views. * Canonical: .az-relationship-diagram / .az-relationship-node / .az-relationship-connector. * Entity modifiers: --member / --umbrella / --circle / --partner-network. * Do not introduce canvas/graph libraries for new relationship visualisations. * Forms: opportunity/proposal submit (.az-form--wizard) + edit submission (.az-form--edit) * + Network Management owner invite (.azora-nm-invite-form.az-form--wizard) * (see FORMS below). * Tabs (v2.8 — 3 levels, Network workspace = visual reference): * 1) Primary (.az-tabs) — outlined pills (Overview | Network | Management) * 2) Secondary (.az-tabs--secondary / --segmented) — full-width track * 3) Tertiary (.az-tabs--tertiary / --underline) — text + white underline * Buttons (v2.8): .az-btn* — Deal Room workspace header (Go Live / Edit Room) * is the visual reference. Icon-only actions stay .az-table-action / .az-icon-btn. * KPI / stat strip (v2.6.7): connected equal-width metric cells in one bordered * shell (Pipeline home / Network Management / Deal Rooms agreement hero). * Canonical: .az-kpi-strip (+ .azora-drm-agreement-kpis--strip aliases). * Not the loose .az-stat-grid / .az-card flex cards. * Checkboxes (v2.6.3): dark checked (#111), not brand blue — .az-checkbox / .azora-checkbox. * Sidebar / dashboard shell: see SIDE MENU & DASHBOARD SHELL below. */ /* ============================================================================ DESIGN TOKENS - Colors ============================================================================ */ :root { /* Background Colors ? black canvas throughout (no navy page shells). */ --azora-bg-primary: #000000; --azora-bg-secondary: #0a0a0a; --azora-bg-tertiary: #121212; --azora-bg-card: #0d0d0d; --azora-bg-card-item: #141414; --azora-bg-card-hover: #1a1a1a; --azora-bg-input: #0a0a0a; /* Content panels (Updates / Timeline cards) ? deeper than --azora-bg-card for contrast on black */ --azora-bg-content: #050505; --azora-bg-content-hover: #111111; /* * Text Colors — platform hierarchy (v2.6.3) * White = important + hover/selected/active. Grey-bluish = secondary layers. */ --azora-text-primary: #FFFFFF; /* important · hover · selected · active */ --azora-text-secondary: #E8ECF5; /* elevated body / near-important */ --azora-text-body-soft: #C8D0E0; /* default interactive / soft body */ --azora-text-subtle: #C8D4E8; /* brand-adjacent soft (tags, accents) */ --azora-text-muted: #8E9AAF; /* secondary info (cells, idle controls) */ --azora-text-label: #6B7A94; /* heads · counts · meta · form labels */ --azora-text-disabled: #6B7280; --azora-text-title-elevated: #E5EAFF; /* rare lift (legacy title wash) */ --azora-text-ghost: #3A4B63; --azora-text-slate: #4A5568; /* placeholders */ /* Semantic aliases (prefer these in new CSS) */ --azora-text-important: var(--azora-text-primary); --azora-text-elevated: var(--azora-text-secondary); --azora-text-interactive: var(--azora-text-body-soft); --azora-text-secondary-info: var(--azora-text-muted); --azora-text-meta: var(--azora-text-label); --azora-text-hover: var(--azora-text-primary); --azora-text-selected: var(--azora-text-primary); --azora-text-active: var(--azora-text-primary); /* Brand / accent ? neutral grey (legacy electric blue retired) */ --azora-primary: #C8D4E8; --azora-danger: #FF3B30; --azora-warning: #F59E0B; --azora-success: #34C759; --azora-info: #3B82F6; /* Tag Colors */ --azora-tag-primary-bg: rgba(255, 255, 255, 0.06); --azora-tag-primary-text: #C8D4E8; --azora-tag-success-bg: rgba(34, 197, 94, 0.12); --azora-tag-success-text: #6EE7B7; --azora-tag-warning-bg: rgba(251, 191, 36, 0.12); --azora-tag-warning-text: #FCD34D; --azora-tag-danger-bg: rgba(255, 59, 48, 0.12); --azora-tag-danger-text: #FF9F9F; --azora-tag-purple-bg: rgba(139, 92, 246, 0.12); --azora-tag-purple-text: #C4B5FD; --azora-tag-gray-bg: rgba(107, 114, 128, 0.12); --azora-tag-gray-text: #D1D5DB; /* Status Tag Colors */ --azora-status-draft-bg: rgba(45, 55, 72, 0.15); --azora-status-draft-text: #8E9AAF; --azora-status-staging-bg: rgba(251, 191, 36, 0.12); --azora-status-staging-text: #FCD34D; --azora-status-live-bg: rgba(34, 197, 94, 0.12); --azora-status-live-text: #6EE7B7; --azora-status-archived-bg: rgba(107, 114, 128, 0.12); --azora-status-archived-text: #D1D5DB; /* Dashboard Surface Tokens (shared by My Submissions / Deal Inbox / My Network) */ --azora-dashboard-surface-gradient: #000000; --azora-dashboard-surface-border: rgba(255, 255, 255, 0.09); --azora-dashboard-strip-bg: rgba(255, 255, 255, 0.05); --azora-dashboard-strip-border: rgba(255, 255, 255, 0.09); --azora-dashboard-strip-text: var(--azora-text-subtle); /* Dashboard / filter chips — same white hierarchy as workspace tabs (no blue active) */ --azora-dashboard-tab-active-text: var(--azora-text-primary); --azora-dashboard-tab-active-bg: rgba(255, 255, 255, 0.06); --azora-dashboard-tab-active-border: rgba(255, 255, 255, 0.42); --azora-dashboard-tab-hover-text: var(--azora-text-primary); --azora-dashboard-tab-hover-bg: rgba(255, 255, 255, 0.05); --azora-dashboard-tab-hover-border: rgba(255, 255, 255, 0.28); --azora-dashboard-tab-muted-text: var(--azora-text-muted); --azora-dashboard-table-head-bg: var(--azora-surface-head); --azora-dashboard-table-head-border: rgba(255, 255, 255, 0.09); /* * Shell / bulk / accordion head ? match Deal Rooms page top headers (KPI strip). * On black DRM canvas use the same wash as --azora-drm-section-surface. * Fallback hex is the opaque equivalent on black. */ --azora-surface-head: rgba(255, 255, 255, 0.05); --azora-surface-head-solid: #0d0d0d; --azora-surface-head-border: rgba(255, 255, 255, 0.09); --azora-dashboard-accent-border-strong: rgba(107,143,214,0.5); --azora-dashboard-accent-bg-soft: rgba(107,143,214,0.08); --azora-dashboard-accent-border-soft: rgba(107,143,214,0.2); --azora-dashboard-accent-bg-mid: rgba(107,143,214,0.3); /* Dashboard shell ? clearance below fixed WP + site headers (canonical) */ --azora-wp-admin-bar-height: 0px; --azora-site-header-band-height: 88px; --azora-dashboard-top-gap: 1.5rem; --azora-site-header-offset: 0px; /* runtime: assets/js/azora.js */ --azora-dashboard-shell-inset-top: max( calc(var(--azora-wp-admin-bar-height) + var(--azora-site-header-band-height) + var(--azora-dashboard-top-gap)), calc(var(--azora-site-header-offset) + var(--azora-dashboard-top-gap)) ); /* Surfaces & borders (forms, tables) */ --azora-surface-input: rgba(255, 255, 255, 0.04); --azora-surface-select-option: #0a0a0a; --azora-surface-control-dark: rgba(0, 0, 0, 0.9); --azora-surface-row-hover: var(--azora-bg-content-hover); --azora-surface-glass-05: rgba(255, 255, 255, 0.05); --azora-surface-glass-06: rgba(255, 255, 255, 0.06); --azora-surface-glass-08: rgba(255, 255, 255, 0.08); --azora-surface-mute-20: rgba(142, 154, 175, 0.2); --azora-surface-danger-wash: #3a1a1a; --azora-border-input: #253141; --azora-border: var(--azora-border-input); --azora-border-muted: #2A3A4A; --azora-border-control: #3A4B63; /* Legacy navy row border ? prefer --azora-table-sep for new tables */ --azora-border-table-row: rgba(30, 40, 57, 0.7); --azora-border-ghost: rgba(30, 40, 57, 0.8); /* * DATA TABLE TOKENS (v2.6.10) — complete implementation contract * ============================================================ * Canonical visual: Deal Inbox / People accordion filter tables. * Classes: .az-data-table* · .az-data-table-panel* · .az-table-action* * Consumers: .azs-table · .azora-umbr-act-table · .az-nm-*-table * Do NOT invent parallel hexes, paddings, or icon sizes in feature CSS. * Full rules + markup: search "DATA TABLES — canonical" in this file. * * QUICK MAP * --------- * Canvas / hover ........ --azora-table-body-bg / --azora-table-row-hover * ONE header separator .. --azora-table-sep + --azora-table-inset + --azora-table-head-sep-w * Cell padding .......... --azora-table-cell-pad-y / --azora-table-cell-pad-x (= 16 / 20) * Column heads .......... --azora-table-head-* (#6B7A94, 0.78rem, 500, no uppercase) * Secondary cells ....... --azora-table-cell-* (#8E9AAF, 400) * Primary title text .... --azora-table-title-* (#E8ECF5 → #FFFFFF hover; weight 600) * Meta under title ...... --azora-table-meta-* (#6B7A94, 0.72rem) * Action circles ........ --azora-table-action-* (32px circle, 15px glyph, neutral border) * Column widths ......... --azora-table-col-* + .az-table-col--* (semantic sizing under table-layout:fixed) * Pagination ............ --azora-table-page-* (default 25 / page; .az-data-table-pager) */ /* --- Canvas --- */ --azora-table-body-bg: var(--azora-bg-content); /* #050505 — header + body (never #141414 rows) */ --azora-table-row-hover: var(--azora-bg-content-hover); /* #111111 — row hover / selected wash */ /* --- Inset separators (thead + body rows) --- */ --azora-table-sep: rgba(255, 255, 255, 0.08); /* line colour */ --azora-table-inset: 20px; /* L/R inset — line must NOT touch panel edges */ --azora-table-head-sep-w: 1px; /* same weight as body-row separators */ --azora-table-row-sep-w: 1px; /* body-row weight (same language, slightly lighter) */ /* --- Typography --- */ --azora-table-font-size: 0.875rem; /* table base (14px) */ --azora-table-head-size: 0.78rem; /* column heading labels */ --azora-table-head-weight: 500; --azora-table-head-color: var(--azora-text-label); /* #6B7A94 — never uppercase / letter-spacing */ --azora-table-cell-color: var(--azora-text-muted); /* #8E9AAF — secondary body cells */ --azora-table-cell-weight: 400; --azora-table-title-color: var(--azora-text-secondary); /* #E8ECF5 — primary row title (light grey / white) */ --azora-table-title-hover: var(--azora-text-primary); /* #FFFFFF — hover / selected row title */ --azora-table-title-selected: var(--azora-text-primary); /* #FFFFFF */ --azora-table-title-weight: 600; --azora-table-title-line-height: 1.35; --azora-table-meta-color: var(--azora-text-label); /* #6B7A94 — ID / category under title */ --azora-table-meta-size: 0.72rem; /* --- Spacing (equal outer inset on first + last columns) --- */ --azora-table-cell-pad-y: 16px; /* body cell vertical */ --azora-table-cell-pad-x: 20px; /* body + head horizontal (= outer inset) */ --azora-table-head-pad-y: 16px; /* head top */ --azora-table-head-pad-y-bottom: 14px; /* head bottom (slightly tighter above sep) */ /* --- Column model (bounded semantic presets on tracked tables) --- */ --azora-table-col-title-width: 30%; /* legacy .azs-col-title share (umbr / 5-col) */ --azora-table-col-title-width-compact: 42%; /* 5-column compact tables (e.g. Active Opps) */ --azora-table-col-date-width: 8rem; /* legacy .azs-col-date preferred */ --azora-table-col-date-min: 7.25rem; --azora-table-col-date-width-stack: 8.75rem; /* absolute + relative date stack */ --azora-table-col-num-width: 5.5rem; /* legacy .az-data-table__num */ --azora-table-col-actions-width: 6.5rem; /* legacy pin */ --azora-table-col-actions-pad-left: 8px; /* tighter before icon; right stays cell-pad-x */ --azora-table-col-control-width: 2.75rem; /* legacy checkbox pin */ --azora-table-col-compact-width: 6rem; /* legacy compact preferred */ --azora-table-col-compact-min: 5.5rem; --azora-table-col-content-width: 15rem; --azora-table-col-content-min: 12rem; --azora-table-col-content-width-narrow: 10rem; --azora-table-col-flex-width: 18%; /* legacy untracked tables only */ --azora-table-col-flex-min: 11rem; --azora-table-col-flex-wide-min: 14rem; --azora-table-col-select-min: 2.75rem; --azora-table-col-select-max: 3rem; --azora-table-col-primary-min: 14rem; --azora-table-col-primary-max: 22rem; --azora-table-col-primary-wide-max: 26rem; --azora-table-col-secondary-min: 11rem; --azora-table-col-secondary-max: 24rem; --azora-table-col-secondary-wide-max: 28rem; --azora-table-col-meta-min: 7.25rem; --azora-table-col-meta-max: 12rem; --azora-table-col-status-min: 12rem; --azora-table-col-status-max: 13rem; --azora-table-col-compact-max: 6.5rem; --azora-table-col-actions-min: 6.5rem; --azora-table-col-actions-max: 7.25rem; --azora-table-col-gap-min: 0.5rem; --azora-table-col-gap-max: 0.75rem; --azora-table-col-gap: clamp(0.5rem, 0.65vw, 0.75rem); --azora-table-wide-min: 100rem; --azora-table-track-select: minmax(2.75rem, 3rem); --azora-table-track-primary: minmax(14rem, 22rem); --azora-table-track-secondary: minmax(11rem, 24rem); --azora-table-track-primary-wide: minmax(22rem, 26rem); --azora-table-track-secondary-wide: minmax(24rem, 28rem); --azora-table-track-meta: minmax(7.25rem, 12rem); --azora-table-track-status: minmax(12rem, 13rem); --azora-table-track-compact: minmax(5.5rem, 6.5rem); --azora-table-track-actions: minmax(6.5rem, 7.25rem); --azora-table-track-control: var(--azora-table-track-select); --azora-table-track-flex-wide: var(--azora-table-track-primary); --azora-table-track-flex: var(--azora-table-track-secondary); --azora-table-track-content: var(--azora-table-track-status); --azora-table-track-date: var(--azora-table-track-meta); /* --- Row action icons (circle; colour the GLYPH only) --- */ --azora-table-action-size: 32px; /* circle diameter (= filter toggle) */ --azora-table-action-icon: 15px; /* SVG inside circle */ --azora-table-action-border-w: 1.5px; --azora-table-action-border: rgba(255, 255, 255, 0.14); /* always neutral — never tint border */ --azora-table-action-border-hover: rgba(255, 255, 255, 0.28); --azora-table-action-bg-hover: rgba(255, 255, 255, 0.04); --azora-table-action-gap: 0.4rem; /* gap between multiple action circles */ --azora-table-action-view: #3B84F2; /* eye / Open / View — glyph only */ --azora-table-action-view-hover: #4DA3FF; --azora-table-action-success: #22C55E; /* propose / edit / positive — glyph only */ --azora-table-action-success-hover: #4ADE80; --azora-table-action-danger: #EF4444; /* pass / delete / destructive — glyph only */ --azora-table-action-danger-hover: #F87171; --azora-table-action-neutral: var(--azora-text-muted); /* #8E9AAF idle */ --azora-table-action-neutral-hover: var(--azora-text-primary); /* #FFFFFF */ --azora-table-action-favorite-active: #F472B6; /* favorite pressed */ /* --- Accordion filter drawer controls --- */ --azora-table-filter-ctrl-bg: #0A0A0A; /* accordion grey */ --azora-table-filter-ctrl-bg-hover: #111111; --azora-table-filter-menu-hover: rgba(255, 255, 255, 0.08); /* custom select hover (NOT OS blue) */ --azora-table-filter-height: 2rem; --azora-table-filter-font: 0.78rem; --azora-table-filter-radius: 999px; --azora-table-filter-border: rgba(255, 255, 255, 0.14); --azora-table-filter-text: var(--azora-text-body-soft); /* #C8D0E0 */ --azora-table-filter-text-hover: var(--azora-text-primary); /* --- Status pills (table rows) --- */ --azora-table-status-pill-pad-y: 0.28rem; --azora-table-status-pill-pad-x: 0.75rem; --azora-table-status-pill-radius: 999px; --azora-table-status-pill-font: 0.73rem; --azora-table-status-pill-weight: 500; /* Tone text (legacy solid accents kept for non-pill consumers) */ --azora-table-status-success: #34D399; --azora-table-status-warning: #FBBF24; --azora-table-status-info: #60A5FA; --azora-table-status-danger: #F87171; --azora-table-status-muted: var(--azora-text-label); /* Tone pill fill + label */ --azora-table-status-success-bg: var(--azora-tag-success-bg); --azora-table-status-success-text: var(--azora-tag-success-text); --azora-table-status-warning-bg: var(--azora-tag-warning-bg); --azora-table-status-warning-text: var(--azora-tag-warning-text); --azora-table-status-info-bg: rgba(96, 165, 250, 0.12); --azora-table-status-info-text: #93C5FD; --azora-table-status-danger-bg: var(--azora-tag-danger-bg); --azora-table-status-danger-text: var(--azora-tag-danger-text); --azora-table-status-muted-bg: var(--azora-tag-gray-bg); --azora-table-status-muted-text: var(--azora-tag-gray-text); /* --- Accordion / panel chrome --- */ --azora-table-panel-radius: 10px; --azora-table-panel-border: rgba(255, 255, 255, 0.09); --azora-table-title-panel-size: var(--azora-workspace-title-size, 1.1rem); /* same as workspace name */ --azora-table-title-panel-weight: 600; --azora-table-title-panel-color: var(--azora-text-primary); /* #FFFFFF important */ --azora-table-title-row-leading: 1.25rem; /* shared title/count/separator band */ --azora-table-count-color: var(--azora-text-label); /* #6B7A94 */ --azora-table-summary-pad: 0.9rem 1.5rem; --azora-table-title-sep: rgba(255, 255, 255, 0.14); /* vertical | between title and count */ /* --- Pagination (required on list / accordion data tables) --- */ --azora-table-page-size: 25; /* default rows per page (timeline may use 50) */ --azora-table-page-pad-y: 0.75rem; --azora-table-page-pad-x: var(--azora-table-cell-pad-x); /* 20px — align with cell inset */ --azora-table-page-gap: 0.65rem; --azora-table-page-meta-color: var(--azora-text-muted); /* #8E9AAF */ --azora-table-page-meta-size: var(--azora-table-filter-font); /* 0.78rem */ /* * FORM TOKENS (v2.6) * Wizard submit: Opportunity + Proposal submission forms. * Edit form: Edit Submission (label|value rows inside section accordions). */ --azora-form-field-gap: 0.95rem; --azora-form-label-gap: 0.4rem; --azora-form-col-gap: 1rem; --azora-form-control-radius: 6px; --azora-form-control-border-w: 1.5px; --azora-form-control-border: rgba(255, 255, 255, 0.14); --azora-form-control-border-hover: rgba(255, 255, 255, 0.22); --azora-form-control-border-focus: rgba(255, 255, 255, 0.28); --azora-form-control-bg: transparent; --azora-form-control-bg-hover: var(--azora-bg-content-hover); /* #111111 */ --azora-form-control-text: var(--azora-text-secondary); --azora-form-control-placeholder: var(--azora-text-slate); --azora-form-control-pad-y: 0.65rem; --azora-form-control-pad-x: 0.85rem; --azora-form-control-font: 0.875rem; --azora-form-label-color: var(--azora-text-label); --azora-form-label-size: 0.8rem; --azora-form-label-weight: 500; --azora-form-help-color: var(--azora-text-muted); --azora-form-help-size: 0.78rem; --azora-form-btn-min-height: 2rem; --azora-form-btn-pad: 0.55rem 1.15rem; --azora-form-btn-font: 0.84rem; --azora-form-btn-radius: 6px; --azora-form-btn-bg: rgba(255, 255, 255, 0.05); --azora-form-btn-bg-hover: rgba(255, 255, 255, 0.08); --azora-form-btn-border: rgba(255, 255, 255, 0.2); --azora-form-btn-border-hover: rgba(255, 255, 255, 0.28); --azora-form-btn-text: var(--azora-text-secondary); --azora-form-btn-text-hover: var(--azora-text-primary); /* Edit / detail form (inline controls in label|value rows) */ --azora-form-edit-label-size: 0.68rem; --azora-form-edit-label-weight: 600; --azora-form-edit-label-tracking: 0.06em; --azora-form-edit-label-color: var(--azora-text-label); --azora-form-edit-row-pad: 16px 20px; --azora-form-edit-row-sep: rgba(255, 255, 255, 0.08); --azora-form-edit-label-col: 42%; --azora-form-edit-value-col: 58%; --azora-form-edit-control-bg: rgba(255, 255, 255, 0.03); --azora-form-edit-control-bg-hover: rgba(255, 255, 255, 0.045); --azora-form-edit-control-bg-focus: rgba(255, 255, 255, 0.05); --azora-form-edit-control-border: rgba(255, 255, 255, 0.1); --azora-form-edit-control-border-hover: rgba(255, 255, 255, 0.18); --azora-form-edit-control-border-focus: rgba(255, 255, 255, 0.28); --azora-form-edit-control-border-w: 1px; --azora-form-edit-control-text: var(--azora-text-body-soft); --azora-form-edit-control-text-focus: var(--azora-text-primary); --azora-form-edit-control-pad: 0.4rem 0.65rem; --azora-form-edit-control-min-h: 2rem; --azora-form-edit-section-radius: 10px; --azora-form-edit-section-border: rgba(255, 255, 255, 0.09); --azora-form-edit-toggle-bg: rgba(255, 255, 255, 0.04); --azora-form-edit-toggle-bg-hover: rgba(255, 255, 255, 0.05); /* * TAB TOKENS (3 levels) — Network workspace = visual source of truth (v2.8) * 1) Primary (.az-tabs) — Overview | Network | Management | Governance | Activity * 2) Secondary (.az-tabs--secondary / --segmented) — Placement | Umbrellas | … * 3) Tertiary (.az-tabs--tertiary / --underline) — Add members | Remove | Move | History * Aliases --segmented / --underline remain for existing Network / Pipeline markup. */ /* 1 — Primary (Distribution workspace live height) */ --azora-tab-primary-min-height: 2.375rem; /* ~38px — matches Pipeline button tabs */ --azora-tab-primary-pad-y: 0.65rem; --azora-tab-primary-pad-x: 1.1rem; --azora-tab-primary-font: 0.85rem; --azora-tab-primary-weight: 500; --azora-tab-primary-weight-active: 600; --azora-tab-primary-radius: 6px; --azora-tab-primary-gap: 0.55rem; /* tablist gap */ --azora-tab-primary-item-gap: 0.4rem; /* label ↔ count */ --azora-tab-primary-border: rgba(255, 255, 255, 0.14); --azora-tab-primary-border-hover: rgba(255, 255, 255, 0.28); --azora-tab-primary-border-active: rgba(255, 255, 255, 0.42); --azora-tab-primary-bg: transparent; --azora-tab-primary-bg-hover: rgba(255, 255, 255, 0.03); --azora-tab-primary-bg-active: rgba(255, 255, 255, 0.06); --azora-tab-primary-color: var(--azora-text-body-soft); --azora-tab-primary-color-hover: var(--azora-text-primary); --azora-tab-primary-color-active: var(--azora-text-primary); /* Primary count badge */ --azora-tab-count-size: 1.1rem; --azora-tab-count-font: 0.62rem; --azora-tab-count-weight: 700; --azora-tab-count-pad-x: 0.38rem; --azora-tab-count-bg: rgba(255, 255, 255, 0.08); --azora-tab-count-color: var(--azora-text-muted); --azora-tab-count-bg-active: rgba(255, 255, 255, 0.12); --azora-tab-count-color-active: var(--azora-text-secondary); /* 2 — Segmented (Distribute | Recipients live height) */ --azora-tab-segmented-pad: 6px; --azora-tab-segmented-gap: 6px; --azora-tab-segmented-radius: 10px; --azora-tab-segmented-item-radius: 8px; --azora-tab-segmented-item-pad: 0.65rem 1rem; --azora-tab-segmented-item-gap: 6px; --azora-tab-segmented-font: 0.82rem; --azora-tab-segmented-weight: 600; --azora-tab-segmented-min-height: 2.375rem; --azora-tab-segmented-bg: rgba(255, 255, 255, 0.03); --azora-tab-segmented-border: rgba(255, 255, 255, 0.08); --azora-tab-segmented-border-w: 1px; --azora-tab-segmented-color: var(--azora-text-muted); --azora-tab-segmented-color-hover: var(--azora-text-primary); --azora-tab-segmented-color-active: var(--azora-text-primary); --azora-tab-segmented-bg-hover: rgba(255, 255, 255, 0.04); --azora-tab-segmented-active-bg: var(--azora-bg-content-hover, #111111); --azora-tab-segmented-count-size: 1.2rem; --azora-tab-segmented-count-font: 0.65rem; --azora-tab-segmented-count-weight: 700; --azora-tab-segmented-count-pad-x: 0.35rem; --azora-tab-segmented-count-bg: rgba(255, 255, 255, 0.08); --azora-tab-segmented-count-color: var(--azora-text-body-soft); --azora-tab-segmented-count-bg-active: rgba(255, 255, 255, 0.1); --azora-tab-segmented-count-color-active: var(--azora-text-primary); /* 3 — Underline (All Members | Networks live height) */ --azora-tab-underline-gap: 0.15rem; --azora-tab-underline-font: 0.85rem; --azora-tab-underline-pad: 0.5rem 0.85rem 0.65rem; --azora-tab-underline-weight: 500; --azora-tab-underline-weight-active: 600; --azora-tab-underline-line-height: 1.2; --azora-tab-underline-letter-spacing: 0.01em; --azora-tab-underline-color: var(--azora-text-label); --azora-tab-underline-color-hover: var(--azora-text-body-soft); --azora-tab-underline-color-active: var(--azora-text-primary); --azora-tab-underline-rail: rgba(255, 255, 255, 0.08); --azora-tab-underline-rail-w: 1px; --azora-tab-underline-active: rgba(255, 255, 255, 0.85); --azora-tab-underline-border-w: 2px; --azora-tab-underline-focus: rgba(255, 255, 255, 0.28); /* * BUTTON TOKENS (v2.8) — Deal Room workspace header is the visual reference. * Classes: .az-btn / .az-btn-primary / .az-btn-secondary / .az-btn-ghost / * .az-btn-danger / .az-btn-compact * Icon-only remains .az-table-action / .az-icon-btn (not this component). */ --azora-btn-min-h: 2rem; --azora-btn-pad-x: 1rem; --azora-btn-font: 0.8rem; --azora-btn-weight: 500; --azora-btn-weight-emphasis: 600; --azora-btn-radius: var(--azora-radius-sm, 6px); --azora-btn-gap: 0.4rem; --azora-btn-line-height: 1.2; --azora-btn-color: var(--azora-text-secondary, #E8ECF5); --azora-btn-color-hover: var(--azora-text-primary, #FFFFFF); --azora-btn-color-muted: var(--azora-text-muted, #8E9AAF); --azora-btn-bg: rgba(255, 255, 255, 0.05); --azora-btn-bg-hover: rgba(255, 255, 255, 0.08); --azora-btn-bg-ghost: rgba(255, 255, 255, 0.04); --azora-btn-bg-ghost-hover: rgba(255, 255, 255, 0.07); --azora-btn-border: rgba(255, 255, 255, 0.12); --azora-btn-border-hover: rgba(255, 255, 255, 0.28); --azora-btn-border-w: 1px; --azora-btn-focus: rgba(255, 255, 255, 0.28); --azora-btn-disabled-opacity: 0.45; --azora-btn-compact-min-h: 1.5rem; --azora-btn-compact-pad-x: 0.65rem; --azora-btn-compact-font: 0.7rem; --azora-btn-danger-bg: rgba(244, 63, 94, 0.12); --azora-btn-danger-fg: #ef5350; --azora-btn-danger-bg-hover: rgba(244, 63, 94, 0.18); --azora-btn-success-bg: rgba(34, 197, 94, 0.12); --azora-btn-success-fg: #34d399; --azora-btn-success-bg-hover: rgba(34, 197, 94, 0.18); --azora-action-group-gap: 0.45rem; /* * WORKSPACE HEADER (v2.9) — Network / Deal Room workspace chrome. * Breadcrumb + title + meta + actions + compact summary. */ --azora-workspace-title-size: 1.1rem; --azora-workspace-title-weight: 700; --azora-workspace-title-lh: 1.3; --azora-crumb-size: 0.75rem; --azora-crumb-weight: 500; --azora-crumb-color: var(--azora-text-muted, #8E9AAF); --azora-crumb-color-hover: var(--azora-text-primary, #FFFFFF); --azora-crumb-color-current: var(--azora-text-muted, #8E9AAF); --azora-crumb-gap: 0.35rem; --azora-workspace-stat-label: var(--azora-text-label, #6B7A94); --azora-workspace-stat-value: var(--azora-text-secondary, #E8ECF5); /* Deal Room `.azdrm-view-header--hero` padding / gap */ --azora-workspace-header-pad-top: 1.2rem; --azora-workspace-header-pad-x: 1.4rem; --azora-workspace-header-pad-bottom: 1.25rem; --azora-workspace-header-gap: 0.65rem; --azora-settings-radius: var(--azora-radius-lg, 10px); --azora-settings-pad-x: 1.5rem; --azora-settings-summary-pad-y: 0.8rem; --azora-settings-bg: var(--azora-table-body-bg, #050505); --azora-settings-header-open-bg: var(--azora-surface-head, rgba(255, 255, 255, 0.05)); --azora-settings-title-size: var(--azora-workspace-title-size, 1.1rem); --azora-settings-title-weight: var(--azora-table-title-panel-weight, 600); --azora-settings-meta-size: 0.76rem; --azora-settings-label-col: 13rem; --azora-settings-form-max: 28rem; --azora-settings-form-wide-max: 40rem; --azora-rel-node-bg: var(--azora-table-body-bg, #050505); --azora-rel-node-bg-current: var(--azora-table-row-hover, #111111); --azora-rel-node-border: var(--azora-border-input, #253141); --azora-rel-node-border-current: var(--azora-surface-head-border, rgba(30, 40, 57, 0.9)); --azora-rel-node-radius: var(--azora-radius-md, 8px); --azora-rel-node-pad: 0.55rem 0.7rem; --azora-rel-node-min-h: 2.75rem; --azora-rel-node-gap: 0.5rem; --azora-rel-connector: var(--azora-text-label, #6B7A94); --azora-rel-connector-w: 1px; --azora-rel-stem: 1.1rem; --azora-rel-level-gap: 0.35rem 0.85rem; /* * KPI / STAT STRIP (v2.6.7) * Connected equal-width metric cells in one bordered shell. * Reference: Pipeline home, Network Management home, Deal Rooms agreement hero. * Canonical class: .az-kpi-strip * Aliases: .azora-drm-agreement-kpis--strip, .azp-pipeline-kpis, .azora-nm-home-kpis * Override columns: --azora-kpi-strip-cols (default 4; NM home = 5). * Prefer auto columns: add .az-kpi-strip--auto (Pipeline variable card counts). */ --azora-drm-section-surface: var(--azora-surface-head, rgba(255, 255, 255, 0.05)); --azora-drm-section-border: var(--azora-surface-head-border, rgba(255, 255, 255, 0.09)); --azora-drm-section-divider: rgba(255, 255, 255, 0.09); --azora-drm-line-w: 1.5px; /* Settings stack (Agreement Settings / Umbrella Management) */ --azora-drm-settings-label-col: 13rem; --azora-drm-settings-col-gap: 1.25rem; --azora-drm-settings-row-pad-x: 1.5rem; --azora-drm-settings-value-inset: calc(14px + 1.5px); --azora-drm-rect-radius: 6px; --azora-kpi-strip-cols: 4; --azora-kpi-strip-bg: var(--azora-drm-section-surface); --azora-kpi-strip-border: var(--azora-drm-section-border); --azora-kpi-strip-radius: var(--azora-radius-lg, 10px); --azora-kpi-strip-cell-pad: 0.8rem 1rem 0.85rem; --azora-kpi-strip-cell-gap: 0.35rem; --azora-kpi-strip-divider: var(--azora-drm-section-border); --azora-kpi-strip-title-size: 0.65rem; --azora-kpi-strip-title-weight: 600; --azora-kpi-strip-title-tracking: 0.08em; --azora-kpi-strip-title-color: var(--azora-text-label); --azora-kpi-strip-value-size: 1.65rem; --azora-kpi-strip-value-weight: 600; --azora-kpi-strip-value-color: var(--azora-text-secondary); --azora-kpi-strip-progress-h: 3px; --azora-kpi-strip-progress-track: rgba(255, 255, 255, 0.08); --azora-kpi-strip-fill-awaiting: #F59E0B; --azora-kpi-strip-fill-approved: #22C55E; --azora-kpi-strip-fill-distributed: #4DA3FF; --azora-kpi-strip-fill-deal-room: #34D399; --azora-kpi-strip-fill-signed: #22C55E; --azora-kpi-strip-fill-pending: #F59E0B; --azora-kpi-strip-fill-assigned: rgba(142, 154, 175, 0.55); /* * STANDALONE FILTER TOOLBAR (v2.6.2) * Transparent pill search + native selects — surface-level filters above a * list/tree. Distinct from accordion-drawer filters (.az-data-table-filter-drawer). * Reference: Pipeline Distribution → Networks, Umbrella → Circles. */ --azora-filter-toolbar-gap: 0.45rem; --azora-filter-toolbar-control-h: 2rem; --azora-filter-toolbar-line-height: normal; --azora-filter-toolbar-pad-y: 0; --azora-filter-toolbar-font: 0.78rem; --azora-filter-toolbar-weight: 500; --azora-filter-toolbar-radius: 999px; --azora-filter-toolbar-border: rgba(255, 255, 255, 0.14); --azora-filter-toolbar-border-hover: rgba(255, 255, 255, 0.28); --azora-filter-toolbar-border-focus: rgba(255, 255, 255, 0.35); --azora-filter-toolbar-color: var(--azora-text-body-soft); --azora-filter-toolbar-color-hover: var(--azora-text-primary); --azora-filter-toolbar-placeholder: var(--azora-filter-toolbar-color); /* same as dropdown text */ --azora-filter-toolbar-select-bg: var(--azora-bg-card, #0d0d0d); --azora-filter-toolbar-select-bg-hover: var(--azora-bg-card-hover, #1a1a1a); --azora-filter-toolbar-option-hover: rgba(255, 255, 255, 0.08); /* in-page menu hover (NOT OS blue) */ --azora-filter-toolbar-search-max: 16rem; --azora-filter-toolbar-search-min: 10rem; --azora-filter-toolbar-select-min: 10.5rem; --azora-filter-toolbar-select-max: 17rem; --azora-filter-toolbar-focus-ring: rgba(255, 255, 255, 0.08); /* * EXPAND TREE (v2.6.2) * Stacked
nodes (network / circle / umbrella) with nested tables. * Reference: Pipeline Distribution → Networks, Umbrella → Circles. * Not a picker — no required checkboxes / send tray (consumers may add those). */ --azora-expand-tree-pad-x: 1.25rem; --azora-expand-tree-inset: var(--azora-table-inset, 20px); --azora-expand-tree-border: var(--azora-drm-section-border, rgba(255, 255, 255, 0.09)); --azora-expand-tree-divider: var(--azora-drm-section-divider, rgba(255, 255, 255, 0.09)); --azora-expand-tree-radius: 10px; --azora-expand-tree-summary-pad-y: 0.9rem; --azora-expand-tree-title-size: 0.95rem; --azora-expand-tree-title-color: var(--azora-text-secondary); --azora-expand-tree-title-open: var(--azora-text-primary); --azora-expand-tree-meta-size: 0.8rem; --azora-expand-tree-meta-color: var(--azora-text-label); --azora-expand-tree-body-bg: var(--azora-bg-content, #050505); --azora-expand-tree-summary-open-bg: var(--azora-surface-head, rgba(255, 255, 255, 0.05)); /* * CHECKBOX (v2.6.3) — dark checked, not brand blue. * Classes: .az-checkbox / .azora-checkbox */ --azora-checkbox-size: 16px; --azora-checkbox-radius: 4px; --azora-checkbox-border: rgba(255, 255, 255, 0.18); --azora-checkbox-border-hover: rgba(255, 255, 255, 0.28); --azora-checkbox-border-checked: rgba(255, 255, 255, 0.42); --azora-checkbox-bg: rgba(0, 0, 0, 0.55); --azora-checkbox-bg-checked: #111111; --azora-checkbox-mark: #FFFFFF; --azora-checkbox-focus: rgba(255, 255, 255, 0.28); /* * HERO / PAGE HEADER (v2.6.3) * Welcome strip, workspace hero, KPI header titles. */ --azora-hero-title-color: var(--azora-text-primary); --azora-hero-title-size: 1.35rem; --azora-hero-title-weight: 600; --azora-hero-subtitle-color: var(--azora-text-muted); --azora-hero-subtitle-size: 0.875rem; --azora-hero-meta-color: var(--azora-text-label); --azora-hero-meta-size: 0.78rem; /* Icons — idle muted → white on hover (semantic glyphs may override) */ --azora-icon-default: var(--azora-text-muted); --azora-icon-hover: var(--azora-text-primary); --azora-icon-active: var(--azora-text-primary); --azora-border-slate-30: rgba(148, 163, 184, 0.3); --azora-on-accent: #ffffff; --azora-on-success-badge: #000000; --azora-focus-ring-brand: rgba(107, 143, 214, 0.2); /* Workspace primary/danger (MDC-style) */ --azora-ui-success-bg: rgba(76, 175, 80, 0.15); --azora-ui-success-fg: #66bb6a; --azora-ui-success-border: rgba(76, 175, 80, 0.3); --azora-ui-success-bg-hover: rgba(76, 175, 80, 0.28); --azora-ui-danger-bg: rgba(244, 67, 54, 0.12); --azora-ui-danger-fg: #ef5350; --azora-ui-danger-border: rgba(244, 67, 54, 0.25); --azora-ui-danger-bg-hover: rgba(244, 67, 54, 0.24); /* Toolbar icon accents */ --azora-icon-delete: #f44336; --azora-icon-withdraw: #ff9800; --azora-icon-warn: #ffb300; --azora-icon-info: #4fc3f7; --azora-icon-restore: #4caf50; /* Status badge tints (submission chips) */ --azora-badge-tint-shared-bg: rgba(213, 167, 255, 0.2); --azora-badge-tint-shared-fg: #d5a7ff; --azora-badge-tint-intro-bg: rgba(255, 214, 167, 0.2); --azora-badge-tint-intro-fg: #ffd6a7; --azora-badge-tint-dealroom-bg: rgba(167, 255, 233, 0.2); --azora-badge-tint-dealroom-fg: #a7ffe9; --azora-badge-tint-edits-bg: rgba(255, 218, 122, 0.2); --azora-badge-tint-edits-fg: #ffda7a; --azora-badge-tint-pending-del-bg: rgba(255, 194, 167, 0.2); --azora-badge-tint-pending-del-fg: #ffc2a7; /* Semantic (Apple-style warning / sensitive docs) */ --azora-semantic-apple-orange: #ff9500; /* Hairline borders on dark panels (steppers, inputs, gates) */ --azora-border-on-dark-mid: rgba(255, 255, 255, 0.12); --azora-border-on-dark-strong: rgba(255, 255, 255, 0.14); /* Inline / banner outlines (cool / warn / error) */ --azora-banner-border-info: rgba(107, 143, 214, 0.22); --azora-banner-border-warn: rgba(251, 191, 36, 0.35); --azora-banner-border-error: rgba(239, 83, 80, 0.4); /* Button hovers (legacy hex tuned to brand) */ --azora-button-danger-hover: #e02e24; --azora-button-success-hover: #2db04a; /* Spacing Scale */ --azora-spacing-xs: 0.25rem; --azora-spacing-sm: 0.5rem; --azora-spacing-md: 1rem; --azora-spacing-lg: 1.5rem; --azora-spacing-xl: 2rem; --azora-spacing-2xl: 3rem; /* * Layout rhythm (semantic aliases ? prefer these over raw scale tokens) * * --azora-section-gap (1.5rem) / --azora-workspace-gap-lg * Between major workspace sections: header → tabs → panels → tables, * sub-tabs → content, empty-state → CTA, note list items, etc. * Same measure as Deal Room `.azora-drm-view-stack` (`--azora-drm-profile-space-4`). * * --azora-workspace-gap-md (1.15rem) * Denser within-section stacks (`--azora-drm-profile-space-3`). * * --azora-workspace-gap-sm (0.75rem) * Tight related clusters (`--azora-drm-profile-space-2`). * * --azora-field-action-gap (0.5rem) * Between a form field and its paired action control in a compose stack * (e.g. note textarea → Add note, comment box → send, search → filter). * Keeps the control visually attached to the field; section-gap still * separates that compose group from the list/results below. */ --azora-section-gap: var(--azora-spacing-lg); --azora-workspace-gap-lg: var(--azora-section-gap); --azora-workspace-gap-md: var(--azora-drm-profile-space-3, 1.15rem); --azora-workspace-gap-sm: var(--azora-drm-profile-space-2, 0.75rem); --azora-field-action-gap: var(--azora-spacing-sm); /* Deal Rooms / Pipeline profile stacks */ --azora-drm-profile-space-2: 0.75rem; --azora-drm-profile-space-3: 1.15rem; /* denser within-section stacks */ --azora-drm-profile-space-4: var(--azora-section-gap); /* major section rhythm */ /* Border Radius */ --azora-radius-2xs: 2px; --azora-radius-xxs: 3px; --azora-radius-xs: 4px; --azora-radius-xs-plus: 5px; --azora-radius-sm: 6px; --azora-radius-md: 8px; --azora-radius-lg: 10px; --azora-radius-xl: 14px; --azora-radius-full: 999px; /* Typography Scale */ --azora-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --azora-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; --azora-font-size-xs: 0.72rem; --azora-font-size-sm: 0.8rem; --azora-font-size-base: 0.875rem; --azora-font-size-md: 0.9375rem; --azora-font-size-lg: 1rem; --azora-font-size-xl: 1.125rem; --azora-font-size-2xl: 1.5rem; --azora-font-size-3xl: 2rem; /* Font Weights */ --azora-font-weight-normal: 400; --azora-font-weight-medium: 500; --azora-font-weight-semibold: 600; --azora-font-weight-bold: 700; /* Transitions */ --azora-transition-fast: 0.12s ease; --azora-transition-base: 0.2s ease; --azora-transition-slow: 0.3s ease; /* Elevation (submission workspace / tab cards) */ --azora-shadow-elevated: 0 3px 14px rgba(0, 0, 0, 0.28); --azora-shadow-panel-deep: 0 4px 20px rgba(0, 0, 0, 0.3); /* ======================================================================== SIDE MENU & DASHBOARD SHELL - canonical tokens (member MCC parity) Sampled from live admin MCC topnav + member Deal Inbox shell. Consume these everywhere; do not hardcode sidebar rem/hex in features. ======================================================================== */ /* --- Shell gutters (left of menu | menu-content | content-right edge) --- */ --azora-shell-gutter: 0.625rem; /* half of former 1.25rem left inset */ --azora-shell-gutter-mobile: 0.5rem; --azora-shell-pad-bottom: 1rem; --azora-shell-pad-bottom-mobile: 0.75rem; --azora-shell-layout-gap: var(--azora-shell-gutter); /* flex gap menu <-> content */ --azora-shell-layout-gap-admin: var(--azora-shell-gutter); /* same gutters on admin MCC */ --azora-shell-layout-align: flex-start; /* tops of menu + content level */ --azora-shell-min-height: calc( 100vh - var(--azora-dashboard-shell-inset-top, 1rem) - 1rem ); /* --- Sidebar widths / positioning --- */ --azora-sidebar-width: 210px; /* open accordion column */ --azora-sidebar-width-rem: 13.125rem; /* 210/16 - rem form of open width */ --azora-sidebar-rail-width: 3.75rem; /* collapsed icon-only rail (60px) */ --azora-sidebar-flex-shrink: 0; --azora-sidebar-align-self: flex-start; --azora-sidebar-radius: var(--azora-radius-xl); /* 14px */ --azora-sidebar-border-width: 1.5px; --azora-sidebar-border: rgba(255, 255, 255, 0.08); --azora-sidebar-bg: transparent; /* sits on black canvas */ --azora-sidebar-open-fill: #0A0A0A; /* open accordion header fill */ --azora-sidebar-item-active-bg: #171717; /* active leaf item */ --azora-sidebar-item-hover-bg: rgba(255, 255, 255, 0.06); --azora-sidebar-item-hover-border: rgba(255, 255, 255, 0.1); --azora-sidebar-divider: rgba(255, 255, 255, 0.09); /* --- Sidebar text (same white hierarchy) --- */ --azora-sidebar-text: var(--azora-text-muted); /* inactive items */ --azora-sidebar-text-hover: var(--azora-text-primary); --azora-sidebar-text-active: var(--azora-text-primary); --azora-sidebar-label: var(--azora-text-label); /* group labels + Menu toolbar */ --azora-sidebar-label-open: var(--azora-text-muted); /* group label when accordion open */ --azora-sidebar-arrow: var(--azora-text-ghost); --azora-sidebar-arrow-open: var(--azora-text-muted); /* --- Sidebar typography (item rem scale) --- */ --azora-sidebar-font: var(--azora-font-family); --azora-sidebar-item-size: 0.82rem; /* leaf nav label */ --azora-sidebar-item-weight: var(--azora-font-weight-normal); /* 400 */ --azora-sidebar-item-weight-active: var(--azora-font-weight-semibold); /* 600 */ --azora-sidebar-label-size: 0.72rem; /* group + toolbar label (= xs) */ --azora-sidebar-label-weight: var(--azora-font-weight-medium); /* 500 */ --azora-sidebar-label-tracking: 0.01em; --azora-sidebar-toolbar-tracking: 0.02em; --azora-sidebar-line-height: 1.2; --azora-sidebar-arrow-size: 0.7rem; /* Named rem aliases (same values - use either form) */ --azora-sidebar-rem-item: var(--azora-sidebar-item-size); /* 0.82rem */ --azora-sidebar-rem-label: var(--azora-sidebar-label-size); /* 0.72rem */ --azora-sidebar-rem-arrow: var(--azora-sidebar-arrow-size); /* 0.70rem */ --azora-sidebar-rem-icon: var(--azora-sidebar-icon-size); /* 1.15rem */ --azora-sidebar-rem-icon-svg: var(--azora-sidebar-icon-svg); /* 1.05rem */ --azora-sidebar-rem-item-pad-y: var(--azora-sidebar-item-pad-y); /* 0.55rem */ --azora-sidebar-rem-item-pad-x: var(--azora-sidebar-item-pad-x); /* 0.65rem */ --azora-sidebar-rem-gutter: var(--azora-shell-gutter); /* 0.625rem */ --azora-sidebar-rem-rail: var(--azora-sidebar-rail-width); /* 3.75rem */ /* --- Sidebar spacing / hit targets (item rem pads) --- */ --azora-sidebar-menu-pad-y: 0.55rem; --azora-sidebar-menu-pad-x: 0.5rem; --azora-sidebar-menu-pad-bottom: 0.7rem; --azora-sidebar-item-pad-y: 0.55rem; --azora-sidebar-item-pad-x: 0.65rem; --azora-sidebar-item-radius: var(--azora-radius-lg); /* 10px */ --azora-sidebar-item-gap-y: 0.12rem; /* vertical rhythm between items */ --azora-sidebar-header-gap: 0.3rem; /* label <-> chevron inside group header */ --azora-sidebar-group-gap: 0.3rem; /* between accordion groups */ --azora-sidebar-group-items-gap-top: 0.2rem; --azora-sidebar-group-items-max-height: 600px; /* open accordion reveal */ --azora-sidebar-icon-size: 1.15rem; --azora-sidebar-icon-svg: 1.05rem; --azora-sidebar-icon-gap: 0.55rem; /* icon -> label when expanded */ --azora-sidebar-toolbar-pad-y: 0.55rem; --azora-sidebar-toolbar-pad-x: 0.5rem; --azora-sidebar-toolbar-pad-bottom: 0.4rem; --azora-sidebar-collapse-size: 1.75rem; --azora-sidebar-collapse-radius: var(--azora-radius-sm); /* 6px */ --azora-sidebar-collapse-border: rgba(255, 255, 255, 0.12); --azora-sidebar-collapse-border-hover: rgba(255, 255, 255, 0.28); --azora-sidebar-rail-item-pad-y: 0.6rem; --azora-sidebar-rail-item-pad-x: 0.35rem; --azora-sidebar-rail-menu-pad-y: 0.4rem; --azora-sidebar-rail-menu-pad-x: var(--azora-sidebar-rail-item-pad-x); --azora-sidebar-rail-menu-pad-bottom: 0.55rem; --azora-sidebar-rail-item-gap-y: 0.1rem; --azora-sidebar-transition: 0.22s ease; /* --- Content column positioning (beside menu) --- * Content is fluid: flex:1 1 0%, width:auto, min-width:0, max-width:none. * Horizontal page gutters live on the layout wrap (--azora-shell-gutter), * NOT as extra left/right padding on the content surface. * padding-top stays 0 so content top lines up with the menu top. */ --azora-shell-content-flex: 1 1 0%; --azora-shell-content-width: auto; --azora-shell-content-min-width: 0; --azora-shell-content-max-width: none; --azora-shell-content-align-self: flex-start; --azora-shell-content-position: relative; --azora-shell-content-pad-top: 0; /* flush with sidebar top */ --azora-shell-content-pad-right: 0; /* horizontal gutters live on wrap */ --azora-shell-content-pad-bottom: 2rem; /* = --azora-spacing-xl */ --azora-shell-content-pad-left: 0; --azora-shell-content-scroll-margin-top: 0; /* Admin MCC content ? same flush top as member (horizontal gutters on wrap) */ --azora-shell-content-pad-top-admin: 0; --azora-shell-content-pad-right-admin: 0; --azora-shell-content-pad-bottom-admin: 2rem; --azora-shell-content-pad-left-admin: 0; /* Inner page stack (hero -> tabs -> panels) inside content column */ --azora-shell-content-stack-gap: var(--azora-section-gap); /* 1.5rem */ --azora-shell-content-stack-gap-dense: var(--azora-drm-profile-space-3); /* 1.15rem */ /* Flush page containers (Deal Inbox etc.) - kill theme/page card padding */ --azora-shell-page-pad: 0; --azora-shell-page-pad-legacy: var(--azora-spacing-xl); /* 2rem old .azora-wrap */ /* --- Sticky / scroll behaviour --- * Menu + content share one flex row (align-items: flex-start). * Shell padding-top = --azora-dashboard-shell-inset-top (clears fixed site header). * Sidebar position:sticky; top = same inset - sticks under header while content scrolls. * Never pull content up with negative margin (invades header band). */ --azora-sidebar-sticky-top: var(--azora-dashboard-shell-inset-top); --azora-sidebar-z: 20; --azora-sidebar-max-height: calc( 100vh - var(--azora-dashboard-shell-inset-top, 1rem) - 1rem ); /* --- Profile card (footer of member sidebar) --- */ --azora-sidebar-profile-pad-y: 0.65rem; --azora-sidebar-profile-pad-x: var(--azora-sidebar-item-pad-x); --azora-sidebar-profile-pad-x-rail: var(--azora-sidebar-rail-item-pad-x); --azora-sidebar-profile-gap: 0.55rem; --azora-sidebar-profile-avatar-size: 2rem; --azora-sidebar-profile-avatar-bg: #3B84F2; --azora-sidebar-profile-name: var(--azora-text-secondary); --azora-sidebar-profile-name-size: 0.82rem; --azora-sidebar-profile-role: var(--azora-text-muted); --azora-sidebar-profile-role-size: 0.72rem; --azora-sidebar-profile-chevron: #4A6B9A; } /* ============================================================================ BASE COMPONENTS - Cards ============================================================================ */ .azora-deal-rooms-stat-card { background: var(--azora-bg-card); border: none; border-radius: var(--azora-radius-lg); padding: var(--azora-spacing-lg) var(--azora-spacing-xl); font-family: var(--azora-font-family); } .azora-deal-rooms-section-light { background: var(--azora-bg-card); border: none; border-radius: var(--azora-radius-lg); padding: var(--azora-spacing-lg); font-family: var(--azora-font-family); } .azora-deal-rooms-view-header { background: var(--azora-bg-card); border: none; border-radius: var(--azora-radius-lg); padding: var(--azora-spacing-xl); margin-bottom: var(--azora-spacing-lg); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--azora-spacing-lg); font-family: var(--azora-font-family); } .azora-card-item { background: var(--azora-bg-card-item); border: none; border-radius: var(--azora-radius-md); padding: var(--azora-spacing-md) var(--azora-spacing-lg); transition: background var(--azora-transition-base); } .azora-card-item:hover { background: var(--azora-bg-card-hover); } /* ============================================================================ BUTTONS ============================================================================ */ .azora-deal-rooms-btn { padding: 8px 16px; border: none; background: var(--azora-bg-tertiary); color: var(--azora-text-secondary); border-radius: var(--azora-radius-md); font-size: var(--azora-font-size-base); font-weight: var(--azora-font-weight-medium); font-family: var(--azora-font-family); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all var(--azora-transition-fast); white-space: nowrap; line-height: 1.4; } .azora-deal-rooms-btn:hover { background: var(--azora-bg-card-hover); color: var(--azora-text-primary); } .azora-deal-rooms-btn:active, .azora-deal-rooms-btn:focus { outline: none; box-shadow: 0 0 0 2px var(--azora-surface-glass-08); color: var(--azora-text-secondary); } .azora-deal-rooms-btn-primary { background: rgba(255, 255, 255, 0.05); color: var(--azora-text-subtle); border: 1px solid rgba(255, 255, 255, 0.12); } .azora-deal-rooms-btn-primary:hover { background: rgba(255, 255, 255, 0.08); color: var(--azora-text-secondary); } .azora-deal-rooms-btn-primary:active, .azora-deal-rooms-btn-primary:focus { filter: brightness(0.95); color: var(--azora-text-primary); } /* Tab Buttons */ .azora-tab-btn { padding: 7px 14px; background: transparent; color: var(--azora-text-muted); border: 1px solid transparent; border-radius: var(--azora-radius-md); font-size: var(--azora-font-size-base); font-weight: var(--azora-font-weight-medium); font-family: var(--azora-font-family); cursor: pointer; transition: all var(--azora-transition-fast); margin-right: 4px; margin-bottom: 4px; } .azora-tab-btn:not(.azora-tab-active):hover { color: var(--azora-dashboard-tab-hover-text); background: var(--azora-dashboard-tab-hover-bg); border-color: var(--azora-dashboard-tab-hover-border); } .azora-tab-btn.azora-tab-active { color: var(--azora-dashboard-tab-active-text) !important; background: var(--azora-dashboard-tab-active-bg) !important; border: 1px solid var(--azora-dashboard-tab-active-border) !important; font-weight: 600 !important; } .azora-tab-btn:not(.azora-tab-active):visited, .azora-tab-btn:not(.azora-tab-active):active, .azora-tab-btn:not(.azora-tab-active):focus { color: var(--azora-text-muted); } /* Filter Buttons */ .azora-deal-rooms-filter-btn { padding: 7px 14px; background: var(--azora-bg-input); color: var(--azora-text-secondary); border: none; border-radius: var(--azora-radius-md); font-size: var(--azora-font-size-base); font-weight: var(--azora-font-weight-medium); font-family: var(--azora-font-family); text-decoration: none; display: inline-flex; align-items: center; transition: all var(--azora-transition-fast); } .azora-deal-rooms-filter-btn:hover { background: var(--azora-bg-card-hover); color: var(--azora-text-primary); } .azora-deal-rooms-filter-btn.active { background: var(--azora-dashboard-tab-active-bg); color: var(--azora-dashboard-tab-active-text); border: 1px solid var(--azora-dashboard-tab-active-border); } .azora-deal-rooms-filter-btn.active:visited, .azora-deal-rooms-filter-btn.active:active, .azora-deal-rooms-filter-btn.active:focus { color: var(--azora-text-primary); } .azora-deal-rooms-filter-btn:not(.active):visited, .azora-deal-rooms-filter-btn:not(.active):active, .azora-deal-rooms-filter-btn:not(.active):focus { color: var(--azora-text-secondary); } /* ============================================================================ TAGS ============================================================================ */ .azora-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--azora-radius-sm); font-size: var(--azora-font-size-xs); font-weight: var(--azora-font-weight-semibold); font-family: var(--azora-font-family); border: none; line-height: 1.5; } .azora-tag-primary { background: var(--azora-tag-primary-bg); color: var(--azora-tag-primary-text); } .azora-tag-success { background: var(--azora-tag-success-bg); color: var(--azora-tag-success-text); } .azora-tag-warning { background: var(--azora-tag-warning-bg); color: var(--azora-tag-warning-text); } .azora-tag-danger { background: var(--azora-tag-danger-bg); color: var(--azora-tag-danger-text); } .azora-tag-purple { background: var(--azora-tag-purple-bg); color: var(--azora-tag-purple-text); } .azora-tag-gray { background: var(--azora-tag-gray-bg); color: var(--azora-tag-gray-text); } /* Status Tags */ .azora-deal-rooms-status, .azora-deal-rooms-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--azora-radius-sm); font-size: var(--azora-font-size-xs); font-weight: var(--azora-font-weight-semibold); font-family: var(--azora-font-family); text-transform: uppercase; letter-spacing: 0.04em; border: none; line-height: 1.5; } .azora-deal-rooms-status.draft, .azora-deal-rooms-status-badge.azora-deal-rooms-status-draft { background: var(--azora-status-draft-bg); color: var(--azora-status-draft-text); } .azora-deal-rooms-status.staging, .azora-deal-rooms-status-badge.azora-deal-rooms-status-staging { background: var(--azora-status-staging-bg); color: var(--azora-status-staging-text); } .azora-deal-rooms-status.live, .azora-deal-rooms-status-badge.azora-deal-rooms-status-live { background: var(--azora-status-live-bg); color: var(--azora-status-live-text); } .azora-deal-rooms-status.archived, .azora-deal-rooms-status-badge.azora-deal-rooms-status-archived { background: var(--azora-status-archived-bg); color: var(--azora-status-archived-text); } /* ============================================================================ TYPOGRAPHY ============================================================================ */ .azora-deal-rooms-view-title { font-size: var(--azora-font-size-2xl); font-weight: var(--azora-font-weight-semibold); color: var(--azora-text-primary); margin: 0 0 var(--azora-spacing-sm) 0; font-family: var(--azora-font-family); letter-spacing: -0.02em; line-height: 1.2; } .azora-deal-rooms-stat-label { font-size: var(--azora-font-size-xs); font-weight: var(--azora-font-weight-semibold); color: var(--azora-text-muted); margin-bottom: 10px; display: block; font-family: var(--azora-font-family); text-transform: uppercase; letter-spacing: 0.04em; } .azora-deal-rooms-stat-value { font-size: var(--azora-font-size-3xl); font-weight: var(--azora-font-weight-bold); color: var(--azora-text-primary); font-family: var(--azora-font-family); letter-spacing: -0.02em; line-height: 1.1; } .azora-deal-rooms-meta-label { color: var(--azora-text-muted); font-size: var(--azora-font-size-sm); font-weight: var(--azora-font-weight-medium); font-family: var(--azora-font-family); } .azora-deal-rooms-meta-value { color: var(--azora-text-secondary); font-weight: var(--azora-font-weight-medium); font-family: var(--azora-font-family); } /* Section Headings */ .azora-section-title { font-size: var(--azora-font-size-lg); font-weight: var(--azora-font-weight-semibold); color: var(--azora-text-primary); margin: 0 0 var(--azora-spacing-md) 0; font-family: var(--azora-font-family); letter-spacing: -0.01em; } .azora-section-subtitle { font-size: var(--azora-font-size-xs); font-weight: var(--azora-font-weight-semibold); color: var(--azora-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--azora-font-family); } /* ============================================================================ FORM ELEMENTS ============================================================================ */ .azora-deal-rooms-form-input, .azora-deal-rooms-form-select, .azora-deal-rooms-form-textarea { width: 100%; padding: 10px 14px; background: var(--azora-bg-input); border: none; border-radius: var(--azora-radius-md); color: var(--azora-text-secondary); font-size: var(--azora-font-size-base); font-family: var(--azora-font-family); transition: box-shadow var(--azora-transition-fast); outline: none; } .azora-deal-rooms-form-input::placeholder, .azora-deal-rooms-form-textarea::placeholder { color: var(--azora-text-disabled); } .azora-deal-rooms-form-input:focus, .azora-deal-rooms-form-select:focus, .azora-deal-rooms-form-textarea:focus { box-shadow: 0 0 0 2px var(--azora-surface-glass-08), inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .azora-deal-rooms-form-label { display: block; color: var(--azora-text-secondary); font-size: var(--azora-font-size-sm); font-weight: var(--azora-font-weight-medium); margin-bottom: 6px; font-family: var(--azora-font-family); } /* ============================================================================ TABLES (legacy .azora-table) Prefer .az-data-table / .az-data-table--panel / .az-data-table--accordion ? see DATA TABLES section at end of this file. ============================================================================ */ .azora-table { width: 100%; border-collapse: collapse; font-family: var(--azora-font-family); font-size: var(--azora-table-font-size); } .azora-table thead { background: var(--azora-table-body-bg); } .azora-table th { color: var(--azora-table-head-color); font-size: var(--azora-table-head-size); font-weight: var(--azora-table-head-weight); text-transform: none; letter-spacing: 0; padding: var(--azora-table-head-pad-y) var(--azora-table-cell-pad-x) var(--azora-table-head-pad-y-bottom); text-align: left; background: transparent; border-bottom: none; } .azora-table td { color: var(--azora-table-cell-color); font-size: inherit; font-weight: var(--azora-table-cell-weight); padding: var(--azora-table-cell-pad-y) var(--azora-table-cell-pad-x); background: transparent; border-bottom: none; } .azora-table tbody tr { background: var(--azora-table-body-bg); transition: background var(--azora-transition-fast); } .azora-table tbody tr:hover { background: var(--azora-table-row-hover); } /* ============================================================================ SPACING UTILITIES ============================================================================ */ .azora-spacing-xs { margin: var(--azora-spacing-xs); } .azora-spacing-sm { margin: var(--azora-spacing-sm); } .azora-spacing-md { margin: var(--azora-spacing-md); } .azora-spacing-lg { margin: var(--azora-spacing-lg); } .azora-spacing-xl { margin: var(--azora-spacing-xl); } .azora-spacing-2xl { margin: var(--azora-spacing-2xl); } /* Section stack — major blocks (header / tabs / panels / lists). * WORKSPACE STACK (v2.9) — Deal Room .azora-drm-view-stack rhythm (1.5rem). */ .az-section-stack, .az-workspace-stack { display: flex; flex-direction: column; gap: var(--azora-workspace-gap-lg, var(--azora-section-gap, 1.5rem)); min-width: 0; } .az-workspace-stack > * { margin-top: 0; margin-bottom: 0; } .az-workspace-stack--dense { gap: var(--azora-workspace-gap-md, var(--azora-drm-profile-space-3, 1.15rem)); } /* Title + lede cluster inside a workspace stack. Parent gap still owns * heading → tabs / heading → section; this keeps title and lede tight. */ .az-workspace-heading { display: flex; flex-direction: column; gap: var(--azora-workspace-gap-sm, var(--azora-drm-profile-space-2, 0.75rem)); min-width: 0; } .az-workspace-heading > * { margin-top: 0; margin-bottom: 0; } /* * Field?action stack ? compose pattern: input/textarea + related button. * Use inside a section; keep section-gap between this group and content below. */ .az-field-action-stack { display: flex; flex-direction: column; gap: var(--azora-field-action-gap, 0.5rem); margin: 0; min-width: 0; } /* ============================================================================ TYPOGRAPHY UTILITIES ============================================================================ */ .azora-text-xs { font-size: var(--azora-font-size-xs); } .azora-text-sm { font-size: var(--azora-font-size-sm); } .azora-text-base { font-size: var(--azora-font-size-base); } .azora-text-md { font-size: var(--azora-font-size-md); } .azora-text-lg { font-size: var(--azora-font-size-lg); } .azora-text-xl { font-size: var(--azora-font-size-xl); } .azora-text-2xl { font-size: var(--azora-font-size-2xl); } .azora-text-3xl { font-size: var(--azora-font-size-3xl); } .azora-font-normal { font-weight: var(--azora-font-weight-normal); } .azora-font-medium { font-weight: var(--azora-font-weight-medium); } .azora-font-semibold { font-weight: var(--azora-font-weight-semibold); } .azora-font-bold { font-weight: var(--azora-font-weight-bold); } /* Text colour utilities (v2.6.3 hierarchy) */ .azora-text-important, .az-text-important { color: var(--azora-text-primary) !important; } .azora-text-elevated, .az-text-elevated { color: var(--azora-text-secondary) !important; } .azora-text-interactive, .az-text-interactive { color: var(--azora-text-body-soft) !important; } .azora-text-secondary-info, .az-text-secondary-info { color: var(--azora-text-muted) !important; } .azora-text-meta, .az-text-meta { color: var(--azora-text-label) !important; } /* ============================================================================ HOVER EFFECTS ============================================================================ */ .azora-hover-effect { transition: background var(--azora-transition-fast); } .azora-hover-effect:hover { background: var(--azora-bg-card-hover); } /* ============================================================================ RESPONSIVE DESIGN ============================================================================ */ @media (max-width: 1200px) { .azora-deal-rooms-stats { grid-template-columns: 1fr; } } @media (max-width: 768px) { .azora-deal-rooms-view-header { flex-direction: column; gap: var(--azora-spacing-md); } .azora-deal-rooms-view-actions { width: 100%; justify-content: flex-start; } } /* Logged-in WP admin bar ? feeds --azora-dashboard-shell-inset-top */ body.admin-bar { --azora-wp-admin-bar-height: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --azora-wp-admin-bar-height: 46px; } } /* ============================================================================ Legacy .az-* primitives (formerly ui-components ? keep until markup uses azora-drm-*) ============================================================================ */ :root { --az-bg: var(--azora-bg-primary, #000000); --az-panel: var(--azora-surface-head, rgba(255, 255, 255, 0.05)); --az-card-stat-bg: var(--azora-dashboard-accent-bg-soft, rgba(107, 143, 214, 0.08)); --az-card-stat-border: var(--azora-dashboard-accent-border-soft, rgba(107, 143, 214, 0.2)); --az-card: var(--azora-bg-card, #0d0d0d); --az-card-border: var(--azora-dashboard-surface-border, #1E2839); --az-card-inset: var(--azora-bg-card, #0d0d0d); --az-content: var(--azora-bg-content, #050505); --az-content-hover: var(--azora-bg-content-hover, #111111); --az-accent: var(--azora-text-subtle, #C8D4E8); --az-accent-lite: var(--azora-text-secondary, #E8ECF5); --az-accent-soft: var(--azora-surface-glass-08, rgba(255, 255, 255, 0.08)); --az-accent-glow: rgba(255, 255, 255, 0.12); --az-green: var(--azora-success, #34C759); --az-green-bg: var(--azora-tag-success-bg, rgba(34,199,89,0.12)); --az-amber: var(--azora-warning, #F59E0B); --az-amber-bg: var(--azora-tag-warning-bg, rgba(251,191,36,0.12)); --az-red: var(--azora-danger, #FF3B30); --az-red-bg: var(--azora-tag-danger-bg, rgba(255,59,48,0.12)); --az-blue: var(--azora-info, #3B82F6); --az-blue-bg: rgba(59,130,246,0.12); /* Legacy aliases — map onto text hierarchy (white = important/hover) */ --az-text: var(--azora-text-primary); /* important / hover / selected */ --az-text-soft: var(--azora-text-secondary); /* elevated default */ --az-text-idle: var(--azora-text-body-soft); /* idle interactive */ --az-muted: var(--azora-text-muted); --az-ghost: var(--azora-text-ghost); --az-r-sm: var(--azora-radius-sm, 6px); --az-r-md: var(--azora-radius-md, 8px); --az-r-lg: var(--azora-radius-lg, 10px); --az-r-xl: var(--azora-radius-xl, 14px); --az-font: var(--azora-font-family, 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); --az-ease: var(--azora-transition-fast, 0.12s ease); } .az-workspace-shell { background: var(--azora-bg-primary, #000000); border: 1px solid var(--azora-dashboard-surface-border, rgba(255, 255, 255, 0.09)); border-radius: var(--az-r-lg); box-shadow: none; position: relative; overflow: hidden; width: 100%; } .az-workspace-shell::before { display: none; } .az-workspace-shell-strip { padding: 0.55rem 0.9rem; background: var(--azora-surface-head, rgba(255, 255, 255, 0.05)); border-bottom: 1px solid var(--azora-surface-head-border, rgba(255, 255, 255, 0.09)); } .az-workspace-shell-strip span { color: var(--az-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .az-workspace-shell-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; position: relative; z-index: 1; } /* Vertical stack ? gap only applies when display:flex is set. */ .az-ui-stack { display: flex; flex-direction: column; gap: var(--azora-workspace-gap-lg, var(--azora-section-gap, var(--azora-drm-profile-space-4, 1.5rem))); min-width: 0; } .az-stat-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* * ============================================================================ * KPI / STAT STRIP (v2.6.7) — Pipeline home = canonical reference * ============================================================================ * * Connected equal-width metric cells in one bordered shell (not loose .az-card * tiles). Use for admin home heroes: Pipeline, Network Management, Deal Rooms. * * Markup: *
*
*
*

Label

*
*
*
12
*
* *
*
* * Columns: set --azora-kpi-strip-cols (default 4). Network Management uses 5 * via .azora-nm-home-kpis. Variable Pipeline counts: add .az-kpi-strip--auto. */ .az-kpi-strip, .az-stat-grid.azora-drm-agreement-kpis--strip, .azora-drm-agreement-kpis.azora-drm-agreement-kpis--strip, .azp-pipeline-kpis.azora-drm-agreement-kpis--strip { display: grid !important; grid-template-columns: repeat(var(--azora-kpi-strip-cols, 4), minmax(0, 1fr)); gap: 0; width: 100%; margin: 0; padding: 0; position: relative; z-index: 2; box-sizing: border-box; background: var(--azora-kpi-strip-bg); border: 1px solid var(--azora-kpi-strip-border); border-radius: var(--azora-kpi-strip-radius); overflow: hidden; flex-wrap: nowrap !important; } .az-kpi-strip--auto, .azp-pipeline-kpis.azora-drm-agreement-kpis--strip:not(.azora-nm-home-kpis) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .azora-nm-home-kpis.azora-drm-agreement-kpis--strip, .az-kpi-strip.azora-nm-home-kpis, .az-kpi-strip--cols-5 { --azora-kpi-strip-cols: 5; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .az-kpi-strip--cols-3 { --azora-kpi-strip-cols: 3; } .az-kpi-strip--cols-4 { --azora-kpi-strip-cols: 4; } .az-kpi-strip--cols-6 { --azora-kpi-strip-cols: 6; } .az-kpi-strip > .azora-drm-kpi-card, .az-kpi-strip > .az-card.az-card-stat, .az-stat-grid.azora-drm-agreement-kpis--strip > .azora-drm-kpi-card, .az-stat-grid.azora-drm-agreement-kpis--strip > .az-card.az-card-stat, .azora-drm-agreement-kpis--strip > .azora-drm-kpi-card, .azora-drm-agreement-kpis--strip > .az-card.az-card-stat, .azp-pipeline-kpis.azora-drm-agreement-kpis--strip > .azora-drm-kpi-card, .azp-pipeline-kpis.azora-drm-agreement-kpis--strip > .az-card.az-card-stat { display: flex; flex-direction: column; gap: var(--azora-kpi-strip-cell-gap); min-width: 0; width: 100%; max-width: none; flex: none; background: transparent !important; border: none !important; border-left: 1px solid var(--azora-kpi-strip-divider) !important; border-radius: 0 !important; padding: var(--azora-kpi-strip-cell-pad); box-shadow: none !important; transition: none; } .az-kpi-strip > .azora-drm-kpi-card:first-child, .az-kpi-strip > .az-card.az-card-stat:first-child, .az-stat-grid.azora-drm-agreement-kpis--strip > .azora-drm-kpi-card:first-child, .az-stat-grid.azora-drm-agreement-kpis--strip > .az-card.az-card-stat:first-child, .azora-drm-agreement-kpis--strip > .azora-drm-kpi-card:first-child, .azora-drm-agreement-kpis--strip > .az-card.az-card-stat:first-child { border-left: none !important; } .az-kpi-strip > .azora-drm-kpi-card:hover, .az-kpi-strip > .az-card.az-card-stat:hover, .azora-drm-agreement-kpis--strip > .azora-drm-kpi-card:hover, .azora-drm-agreement-kpis--strip > .az-card.az-card-stat:hover { background: transparent !important; border-color: var(--azora-kpi-strip-divider) !important; box-shadow: none !important; } .az-kpi-strip .azora-drm-kpi-card__icon, .az-kpi-strip .azora-drm-kpi-card__pill, .az-kpi-strip .azora-drm-kpi-card__context, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__icon, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__pill, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__context { display: none !important; } .az-kpi-strip .azora-drm-kpi-card__head, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__head { display: block; } .az-kpi-strip .azora-drm-kpi-card__title, .az-kpi-strip .az-card-title, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__title, .azora-drm-agreement-kpis--strip .az-card-title { margin: 0 !important; font-size: var(--azora-kpi-strip-title-size) !important; font-weight: var(--azora-kpi-strip-title-weight) !important; letter-spacing: var(--azora-kpi-strip-title-tracking) !important; text-transform: uppercase !important; color: var(--azora-kpi-strip-title-color) !important; line-height: 1.3 !important; white-space: normal; word-break: break-word; } .az-kpi-strip .azora-drm-kpi-card__value-row, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__value-row { display: block; margin: 0; } .az-kpi-strip .azora-drm-kpi-card__value, .az-kpi-strip .az-card-value, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__value, .azora-drm-agreement-kpis--strip .az-card-value { display: inline-flex !important; align-items: flex-start !important; margin: 0 !important; margin-bottom: 0 !important; font-size: var(--azora-kpi-strip-value-size) !important; font-weight: var(--azora-kpi-strip-value-weight) !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; color: var(--azora-kpi-strip-value-color) !important; } .az-kpi-strip .azora-drm-kpi-card__value-suffix, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__value-suffix { font-size: 0.5em !important; font-weight: 600 !important; line-height: 1 !important; color: var(--azora-text-muted) !important; margin-top: 0.12em !important; margin-left: 0.04em !important; letter-spacing: 0 !important; } .az-kpi-strip .azora-drm-kpi-card__progress, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress { width: 100%; height: var(--azora-kpi-strip-progress-h); margin-top: 0.15rem; border-radius: 999px; background: var(--azora-kpi-strip-progress-track); overflow: hidden; } .az-kpi-strip .azora-drm-kpi-card__progress-fill, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress-fill { height: 100%; border-radius: inherit; } .az-kpi-strip .azora-drm-kpi-card__progress-fill--awaiting, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress-fill--awaiting { background: var(--azora-kpi-strip-fill-awaiting); } .az-kpi-strip .azora-drm-kpi-card__progress-fill--approved, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress-fill--approved { background: var(--azora-kpi-strip-fill-approved); } .az-kpi-strip .azora-drm-kpi-card__progress-fill--distributed, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress-fill--distributed { background: var(--azora-kpi-strip-fill-distributed); } .az-kpi-strip .azora-drm-kpi-card__progress-fill--deal-room, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress-fill--deal-room { background: var(--azora-kpi-strip-fill-deal-room); } .az-kpi-strip .azora-drm-kpi-card__progress-fill--signed, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress-fill--signed { background: var(--azora-kpi-strip-fill-signed); } .az-kpi-strip .azora-drm-kpi-card__progress-fill--pending, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress-fill--pending { background: var(--azora-kpi-strip-fill-pending); } .az-kpi-strip .azora-drm-kpi-card__progress-fill--assigned, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__progress-fill--assigned { background: var(--azora-kpi-strip-fill-assigned); } .az-kpi-strip .azora-drm-agreements-stat--total .azora-drm-kpi-card__progress, .az-kpi-strip .azora-drm-agreements-stat--complete .azora-drm-kpi-card__progress, .azora-drm-agreement-kpis--strip .azora-drm-agreements-stat--total .azora-drm-kpi-card__progress, .azora-drm-agreement-kpis--strip .azora-drm-agreements-stat--complete .azora-drm-kpi-card__progress, .azora-drm-agreement-kpis--strip .azora-drm-agreements-stat--assigned .azora-drm-kpi-card__progress { display: none !important; } @media (max-width: 960px) { .az-kpi-strip, .az-stat-grid.azora-drm-agreement-kpis--strip, .azora-drm-agreement-kpis.azora-drm-agreement-kpis--strip, .azp-pipeline-kpis.azora-drm-agreement-kpis--strip, .azora-nm-home-kpis.azora-drm-agreement-kpis--strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .az-kpi-strip > .azora-drm-kpi-card:nth-child(odd), .az-kpi-strip > .az-card.az-card-stat:nth-child(odd), .azora-drm-agreement-kpis--strip > .azora-drm-kpi-card:nth-child(odd), .azora-drm-agreement-kpis--strip > .az-card.az-card-stat:nth-child(odd) { border-left: none !important; } .az-kpi-strip > .azora-drm-kpi-card:nth-child(n+3), .az-kpi-strip > .az-card.az-card-stat:nth-child(n+3), .azora-drm-agreement-kpis--strip > .azora-drm-kpi-card:nth-child(n+3), .azora-drm-agreement-kpis--strip > .az-card.az-card-stat:nth-child(n+3) { border-top: 1px solid var(--azora-kpi-strip-divider) !important; } .az-kpi-strip > .azora-drm-kpi-card:nth-child(even), .az-kpi-strip > .az-card.az-card-stat:nth-child(even), .azora-drm-agreement-kpis--strip > .azora-drm-kpi-card:nth-child(even), .azora-drm-agreement-kpis--strip > .az-card.az-card-stat:nth-child(even) { border-left: 1px solid var(--azora-kpi-strip-divider) !important; } } @media (max-width: 520px) { .az-kpi-strip, .az-stat-grid.azora-drm-agreement-kpis--strip, .azora-drm-agreement-kpis.azora-drm-agreement-kpis--strip, .azp-pipeline-kpis.azora-drm-agreement-kpis--strip, .azora-nm-home-kpis.azora-drm-agreement-kpis--strip { grid-template-columns: 1fr !important; } .az-kpi-strip > .azora-drm-kpi-card, .az-kpi-strip > .az-card.az-card-stat, .azora-drm-agreement-kpis--strip > .azora-drm-kpi-card, .azora-drm-agreement-kpis--strip > .az-card.az-card-stat { border-left: none !important; border-top: 1px solid var(--azora-kpi-strip-divider) !important; padding: 0.65rem 0.85rem 0.7rem; } .az-kpi-strip > .azora-drm-kpi-card:first-child, .az-kpi-strip > .az-card.az-card-stat:first-child, .azora-drm-agreement-kpis--strip > .azora-drm-kpi-card:first-child, .azora-drm-agreement-kpis--strip > .az-card.az-card-stat:first-child { border-top: none !important; } .az-kpi-strip .azora-drm-kpi-card__value, .azora-drm-agreement-kpis--strip .azora-drm-kpi-card__value { font-size: 1.35rem !important; } } .az-button-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; } .az-utility-row { display: inline-flex; align-items: center; gap: 0.4rem; } .az-icon-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--az-r-sm); border: 0; background: transparent; color: var(--azora-icon-default, var(--az-muted)); cursor: pointer; transition: all var(--az-ease); } .az-icon-btn:hover { background: var(--az-accent-soft); color: var(--azora-icon-hover, var(--az-text)); } .az-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--azora-btn-gap); box-sizing: border-box; min-height: var(--azora-btn-min-h); height: var(--azora-btn-min-h); padding: 0 var(--azora-btn-pad-x); border: var(--azora-btn-border-w) solid transparent; border-radius: var(--azora-btn-radius); background: transparent; color: var(--azora-btn-color-muted); font-family: var(--azora-font-family, inherit); font-size: var(--azora-btn-font); font-weight: var(--azora-btn-weight); line-height: var(--azora-btn-line-height); text-decoration: none; white-space: nowrap; cursor: pointer; appearance: none; -webkit-appearance: none; box-shadow: none; margin: 0; min-width: 0; width: auto; max-width: none; overflow: visible; text-transform: none; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } button.az-btn, input.az-btn, #azora-dashboard button.az-btn, .azora-wrap button.az-btn, .azora-master-control-v2 button.az-btn { min-height: var(--azora-btn-min-h); height: var(--azora-btn-min-h); min-width: 0; padding: 0 var(--azora-btn-pad-x); font-family: var(--azora-font-family, inherit); font-size: var(--azora-btn-font); font-weight: var(--azora-btn-weight); line-height: var(--azora-btn-line-height); } a.az-btn, a.az-btn:link, a.az-btn:visited, a.az-btn:hover, a.az-btn:focus, a.az-btn:active, a.az-btn:visited:hover { text-decoration: none; } a.az-btn, a.az-btn:link, a.az-btn:visited { color: var(--azora-btn-color); } .az-btn:hover, a.az-btn:hover, a.az-btn:visited:hover { filter: none; color: var(--azora-btn-color-hover); text-decoration: none; } .az-btn:focus-visible, a.az-btn:focus-visible { outline: 1px solid var(--azora-btn-focus); outline-offset: 2px; } .az-btn-primary { background: var(--azora-btn-bg); color: var(--azora-btn-color); border-color: var(--azora-btn-border); font-weight: var(--azora-btn-weight-emphasis); } a.az-btn-primary, a.az-btn-primary:link, a.az-btn-primary:visited { color: var(--azora-btn-color); text-decoration: none; } .az-btn-primary:hover, a.az-btn-primary:hover, a.az-btn-primary:visited:hover { background: var(--azora-btn-bg-hover); color: var(--azora-btn-color-hover); border-color: var(--azora-btn-border-hover); transform: none; text-decoration: none; } .az-btn-secondary { background: var(--azora-btn-bg); color: var(--azora-btn-color); border-color: var(--azora-btn-border); } a.az-btn-secondary, a.az-btn-secondary:link, a.az-btn-secondary:visited { color: var(--azora-btn-color); text-decoration: none; } .az-btn-secondary:hover, a.az-btn-secondary:hover, a.az-btn-secondary:visited:hover { background: var(--azora-btn-bg-hover); color: var(--azora-btn-color-hover); border-color: var(--azora-btn-border-hover); text-decoration: none; } .az-btn-ghost { background: var(--azora-btn-bg-ghost); color: var(--azora-btn-color-muted); } a.az-btn-ghost, a.az-btn-ghost:link, a.az-btn-ghost:visited { color: var(--azora-btn-color-muted); text-decoration: none; } .az-btn-ghost:hover, a.az-btn-ghost:hover, a.az-btn-ghost:visited:hover { background: var(--azora-btn-bg-ghost-hover); color: var(--azora-btn-color-hover); text-decoration: none; } .az-btn-tertiary { background: transparent; color: var(--azora-btn-color-muted); } .az-btn-tertiary:hover { color: var(--azora-btn-color-hover); } .az-btn-outline { background: var(--azora-btn-bg); color: var(--azora-btn-color); border-color: var(--azora-btn-border); } .az-btn-outline:hover { background: var(--azora-btn-bg-hover); color: var(--azora-btn-color-hover); border-color: var(--azora-btn-border-hover); } .az-btn-danger { background: var(--azora-btn-danger-bg); color: var(--azora-btn-danger-fg); } a.az-btn-danger, a.az-btn-danger:link, a.az-btn-danger:visited { color: var(--azora-btn-danger-fg); text-decoration: none; } .az-btn-danger:hover, a.az-btn-danger:hover, a.az-btn-danger:visited:hover { background: var(--azora-btn-danger-bg-hover); color: var(--azora-btn-danger-fg); text-decoration: none; } .az-btn-success { background: var(--azora-btn-success-bg); color: var(--azora-btn-success-fg); } a.az-btn-success, a.az-btn-success:link, a.az-btn-success:visited { color: var(--azora-btn-success-fg); text-decoration: none; } .az-btn-success:hover, a.az-btn-success:hover, a.az-btn-success:visited:hover { background: var(--azora-btn-success-bg-hover); color: var(--azora-btn-success-fg); text-decoration: none; } .az-btn-small { min-height: var(--azora-btn-compact-min-h); height: var(--azora-btn-compact-min-h); font-size: var(--azora-btn-compact-font); padding: 0 var(--azora-btn-compact-pad-x); } .az-btn-compact { min-height: var(--azora-btn-compact-min-h); height: var(--azora-btn-compact-min-h); padding: 0 var(--azora-btn-compact-pad-x); } .az-btn-link { text-decoration: underline; text-underline-offset: 2px; background: transparent !important; } .az-btn:disabled, .az-btn[aria-disabled="true"], .az-btn.is-loading, .az-btn.is-disabled { opacity: var(--azora-btn-disabled-opacity); pointer-events: none; cursor: not-allowed; } /* * ACTION GROUP (v2.8) — horizontal cluster of canonical buttons. * Owns flex, alignment, gap, wrapping. Does not own button colours. * Markup:
*/ .az-action-group { display: flex; align-items: center; gap: var(--azora-action-group-gap); flex-wrap: nowrap; min-width: 0; } .az-action-group--wrap { flex-wrap: wrap; } .az-action-group--end { justify-content: flex-end; } .az-action-group > form { display: inline-flex; align-items: center; margin: 0; } .az-action-group > .az-btn, .az-action-group > form > .az-btn { flex: 0 0 auto; } @media (max-width: 700px) { .az-action-group--end { justify-content: flex-start; } } /* * WORKSPACE HEADER (v2.9) * Markup: *
*
* *
…
*
*
*
…title/meta…
*
*
…stats…
*
*/ .az-workspace-header { display: flex; flex-direction: column; gap: var(--azora-workspace-header-gap, 0.65rem); padding: var(--azora-workspace-header-pad-top, 1.2rem) var(--azora-workspace-header-pad-x, 1.4rem) var(--azora-workspace-header-pad-bottom, 1.25rem); border: 1px solid var(--azora-surface-head-border, rgba(30, 40, 57, 0.9)); border-radius: 12px; background: var(--azora-bg-secondary, #0a0a0a); min-width: 0; } .az-workspace-header__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--azora-workspace-gap-sm, 0.75rem); flex-wrap: wrap; min-width: 0; } .az-workspace-breadcrumbs { min-width: 0; } .az-workspace-breadcrumbs__list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--azora-crumb-gap); margin: 0; padding: 0; list-style: none; } .az-workspace-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--azora-crumb-gap); min-width: 0; } .az-workspace-breadcrumbs__sep { color: var(--azora-crumb-color); font-size: var(--azora-crumb-size); font-weight: var(--azora-crumb-weight); line-height: 1; } a.az-workspace-breadcrumbs__link, a.az-workspace-breadcrumbs__link:link, a.az-workspace-breadcrumbs__link:visited { color: var(--azora-crumb-color); font-size: var(--azora-crumb-size); font-weight: var(--azora-crumb-weight); line-height: 1.2; text-decoration: none; background: transparent; border: 0; padding: 0; box-shadow: none; } a.az-workspace-breadcrumbs__link:hover, a.az-workspace-breadcrumbs__link:focus, a.az-workspace-breadcrumbs__link:visited:hover { color: var(--azora-crumb-color-hover); text-decoration: none; } a.az-workspace-breadcrumbs__link:focus-visible { outline: 1px solid var(--azora-btn-focus, rgba(255, 255, 255, 0.28)); outline-offset: 2px; } .az-workspace-breadcrumbs__current { color: var(--azora-crumb-color-current); font-size: var(--azora-crumb-size); font-weight: var(--azora-crumb-weight); line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .az-workspace-header__main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; min-width: 0; } .az-workspace-header__identity { min-width: 0; flex: 1 1 12rem; } .az-workspace-header__title { margin: 0; padding: 0; border: 0; background: transparent; color: var(--azora-text-primary, #FFFFFF); font-size: var(--azora-workspace-title-size); font-weight: var(--azora-workspace-title-weight); line-height: var(--azora-workspace-title-lh); letter-spacing: 0; } .az-workspace-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; color: var(--azora-text-muted, #8E9AAF); font-size: 0.78rem; line-height: 1.3; } .az-workspace-header__meta-sep { color: var(--azora-text-label, #6B7A94); } .az-workspace-header__actions { flex: 0 1 auto; max-width: 100%; } .az-workspace-header__summary { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; min-width: 0; margin: 0; padding-top: var(--azora-workspace-gap-sm, 0.75rem); border-top: 1px solid var(--azora-drm-section-divider, rgba(255, 255, 255, 0.09)); } .az-workspace-header__stat { min-width: 0; } .az-workspace-header__stat-label { color: var(--azora-workspace-stat-label); font-size: 0.72rem; font-weight: 500; line-height: 1.2; } .az-workspace-header__stat-value { margin-top: 0.3rem; color: var(--azora-workspace-stat-value); font-size: 0.84rem; line-height: 1.3; min-width: 0; } @media (max-width: 700px) { .az-workspace-header__nav, .az-workspace-header__main { flex-direction: column; align-items: stretch; } .az-workspace-header__actions { width: 100%; } } /* * SETTINGS UI (v2.10) * Canonical reference: Deal Room → Agreement Workspace → Settings * (Configuration / Assignment scope / Record / Lifecycle). * * Header collapsed: --azora-settings-bg (body dark grey). * Header expanded: --azora-settings-header-open-bg (light grey wash). * Do not require Deal Room feature classes. New settings surfaces use these. * *
*
* …title | meta… chevron *
*

…

*
…
*
…
*
*
*
…
*
*/ .az-settings { display: flex; flex-direction: column; min-width: 0; } .az-settings-section { display: block; margin: 0; min-width: 0; background: var(--azora-settings-bg, var(--azora-table-body-bg, #050505)); border: 1px solid var(--azora-drm-section-border, rgba(255, 255, 255, 0.09)); border-radius: var(--azora-settings-radius, 10px); overflow: hidden; } .az-settings-section[open] { overflow: visible; position: relative; z-index: 4; } .az-settings .az-custom-select.is-open { z-index: 5; } .az-settings > .az-settings-section:not(.az-settings-section--danger) { border-radius: 0; border-bottom-width: 0; } .az-settings > .az-settings-section:not(.az-settings-section--danger):first-child { border-top-left-radius: var(--azora-settings-radius, 10px); border-top-right-radius: var(--azora-settings-radius, 10px); } .az-settings > .az-settings-section:not(.az-settings-section--danger):last-child, .az-settings > .az-settings-section:not(.az-settings-section--danger):has(+ .az-settings-section--danger) { border-bottom-width: 1px; border-bottom-left-radius: var(--azora-settings-radius, 10px); border-bottom-right-radius: var(--azora-settings-radius, 10px); } .az-settings > .az-settings-section:only-child { border-radius: var(--azora-settings-radius, 10px); border-bottom-width: 1px; } .az-settings-section--danger { border-color: rgba(255, 107, 107, 0.18); } .az-settings > .az-settings-section--danger { margin-top: var(--azora-workspace-gap-sm, 0.75rem); border-radius: var(--azora-settings-radius, 10px); border-bottom-width: 1px; } .az-settings-section__summary, .az-settings-section__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: var(--azora-settings-summary-pad-y, 0.8rem) var(--azora-settings-pad-x, 1.5rem); background: var(--azora-settings-bg, var(--azora-table-body-bg, #050505)); list-style: none; cursor: pointer; user-select: none; min-width: 0; } .az-settings-section__header { cursor: default; border-bottom: 1px solid var(--azora-drm-section-divider, rgba(255, 255, 255, 0.09)); } .az-settings-section--danger > .az-settings-section__header { border-bottom-color: rgba(255, 107, 107, 0.12); } .az-settings-section__summary::-webkit-details-marker, .az-settings-section__summary::marker { display: none; content: none; } .az-settings-section__summary:hover { background: var(--azora-settings-header-open-bg, var(--azora-surface-head, rgba(255, 255, 255, 0.05))); } .az-settings-section[open] > .az-settings-section__summary, .az-settings-section__header { background: var(--azora-settings-header-open-bg, var(--azora-surface-head, rgba(255, 255, 255, 0.05))); } .az-settings-section[open] > .az-settings-section__summary:hover { background: rgba(255, 255, 255, 0.08); } .az-settings-section__main { flex: 1 1 auto; min-width: 0; } .az-settings-section__title-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; flex-wrap: nowrap; min-width: 0; } h3.az-settings-section__title, .az-settings-section__title { display: inline-flex; align-items: center; margin: 0; padding: 0; border: 0; background: transparent; font-size: var(--azora-settings-title-size, 1.1rem); font-weight: var(--azora-settings-title-weight, 600); line-height: var(--azora-table-title-row-leading, 1.25rem); letter-spacing: -0.01em; text-transform: none; color: var(--azora-table-title-panel-color, var(--azora-text-primary, #FFFFFF)); min-width: 0; } .az-settings-section__sep { width: 1px; height: 0.85rem; background: rgba(255, 255, 255, 0.1); flex-shrink: 0; } .az-settings-section__meta { margin: 0; padding: 0; color: var(--azora-text-label, #6B7A94); font-size: var(--azora-settings-meta-size, 0.76rem); font-weight: 400; line-height: 1.2; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .az-settings-section__actions { display: inline-flex; align-items: center; gap: 0.65rem; flex-shrink: 0; } .az-settings-section__chevron { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: #5A6A82; transition: transform 0.2s ease, color 0.15s ease; } .az-settings-section[open] > .az-settings-section__summary .az-settings-section__chevron { transform: rotate(180deg); color: var(--azora-text-muted, #8E9AAF); } .az-settings-section__summary:hover .az-settings-section__chevron { color: #A8B4C8; } .az-settings-section__body { margin: 0; padding: var(--azora-workspace-gap-sm, 0.75rem) var(--azora-settings-pad-x, 1.5rem) 1.15rem; min-width: 0; background: transparent; } .az-settings-section[open] > .az-settings-section__body { border-top: 1px solid var(--azora-drm-section-divider, rgba(255, 255, 255, 0.1)); } p.az-settings-help, .az-settings-help { margin: 0 0 var(--azora-workspace-gap-md, 1.15rem); max-width: 40rem; font-size: var(--azora-form-help-size, 0.78rem); line-height: 1.55; color: var(--azora-text-label, #6B7A94); overflow-wrap: anywhere; } .az-settings-row .az-settings-help { margin: 0; } .az-settings-rows { display: grid; grid-template-columns: var(--azora-settings-label-col, 13rem) minmax(0, 1fr); margin: 0 calc(-1 * var(--azora-settings-pad-x, 1.5rem)); padding: 0; border-top: 1px solid var(--azora-drm-section-divider, rgba(255, 255, 255, 0.1)); } .az-settings-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 1.25rem; row-gap: 0.15rem; align-items: center; margin: 0; padding: 0.75rem var(--azora-settings-pad-x, 1.5rem); min-width: 0; min-height: 2.75rem; } @supports not (grid-template-columns: subgrid) { .az-settings-rows { display: flex; flex-direction: column; } .az-settings-row { grid-column: auto; grid-template-columns: var(--azora-settings-label-col, 13rem) minmax(0, 1fr); } } .az-settings-row:not(:last-child) { border-bottom: 1px solid var(--azora-drm-section-divider, rgba(255, 255, 255, 0.1)); } .az-settings-row:hover { background: rgba(255, 255, 255, 0.05); } .az-settings--no-row-hover .az-settings-row:hover { background: transparent; } .az-settings-row:has(textarea) { align-items: start; } .az-settings-row:has(textarea) .az-settings-row__label { padding-top: 0.85rem; } .az-settings-row:has(textarea):hover { background: transparent; } .az-settings-row__value .az-status-pill { white-space: normal; overflow-wrap: anywhere; } .az-settings-row__value textarea, .az-settings-row__value select.az-filter-select { position: relative; z-index: 1; } .az-settings-row__label { grid-column: 1; margin: 0; padding: 0.35rem 0; font-size: 0.78rem; font-weight: 500; color: var(--azora-text-label, #6B7A94); line-height: 1.35; } .az-settings-row__value { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0.35rem 0; font-size: 0.88rem; font-weight: 500; color: var(--azora-text-secondary, #E8ECF5); line-height: 1.35; overflow-wrap: anywhere; min-width: 0; } .az-settings-row__hint { grid-column: 2; margin: 0; font-size: 0.76rem; color: var(--azora-text-label, #6B7A94); line-height: 1.35; } .az-settings-row__action { margin-left: auto; flex-shrink: 0; } .az-settings-row__value:has(> .az-settings-row__action) { flex-wrap: nowrap; align-items: center; } .az-settings-row__value:has(> .az-settings-row__action) > :not(.az-settings-row__action) { flex: 1 1 auto; min-width: 0; } .az-settings-rows--entries { --azora-settings-label-col: 16.5rem; } .az-settings-rows--entries .az-settings-row { align-items: center; } .az-settings-rows--entries .az-settings-row__label { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; white-space: nowrap; } .az-settings-section__body:has(> .az-settings-rows:first-child), .az-settings-section__body:has(> form:first-child > .az-settings-rows), .az-settings-section__body:has(> .az-settings-form:first-child > .az-settings-rows) { padding-top: 0; } .az-settings-section__body > .az-settings-rows:first-child, .az-settings-section__body > form:first-child > .az-settings-rows:first-of-type, .az-settings-section__body > .az-settings-form:first-child > .az-settings-rows:first-of-type { border-top: 0; } .az-settings-section__body > .az-settings-rows:first-child + :not(.az-settings-rows) { margin-top: var(--azora-workspace-gap-sm, 0.75rem); } .az-settings-section__body:has(> .az-settings-rows:only-child), .az-settings-section__body:has(> form:only-child > .az-settings-rows), .az-settings-section__body:has(> .az-settings-form:only-child > .az-settings-rows) { padding: 0; } .az-settings-section__body:has(> .az-settings-rows:only-child) > .az-settings-rows, .az-settings-section__body > form:only-child > .az-settings-rows, .az-settings-section__body > .az-settings-form:only-child > .az-settings-rows { margin-left: 0; margin-right: 0; border-top: 0; } .az-settings-section[open] > .az-settings-section__body:has(> .az-settings-rows:only-child) > .az-settings-rows > .az-settings-row:last-child, .az-settings-section[open] > .az-settings-section__body > form:only-child > .az-settings-rows > .az-settings-row:last-child, .az-settings-section[open] > .az-settings-section__body > .az-settings-form:only-child > .az-settings-rows > .az-settings-row:last-child { border-bottom-left-radius: var(--azora-settings-radius, 10px); border-bottom-right-radius: var(--azora-settings-radius, 10px); } form.az-settings-row { width: 100%; } .az-settings-row__value select.az-filter-select, .az-settings-row__value input.az-filter-search, .az-settings-row__value textarea { border-radius: var(--azora-radius-sm, 6px); } .az-settings-row__value textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; } .az-settings-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--azora-workspace-gap-sm, 0.75rem); margin: 0; max-width: var(--azora-settings-form-max, 28rem); min-width: 0; } .az-settings-form > input[type="hidden"] { display: none; } .az-settings-form--wide { max-width: var(--azora-settings-form-wide-max, 40rem); } .az-settings-form--full { max-width: none; width: 100%; } .az-settings-form > .az-settings-field, .az-settings-form textarea, .az-settings-form .az-file-upload { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .az-settings-form textarea { resize: vertical; } .az-settings-form .az-action-group { width: auto; max-width: 100%; } .az-settings-form .az-action-group .az-settings-field { width: auto; } .az-settings-form .az-btn { width: auto; align-self: flex-start; } .az-settings-form + .az-settings-form, .az-settings-form + .az-action-group { margin-top: var(--azora-workspace-gap-md, 1.15rem); padding-top: var(--azora-workspace-gap-md, 1.15rem); border-top: 1px solid var(--azora-drm-section-divider, rgba(255, 255, 255, 0.1)); } .az-settings-form + .az-settings-rows { margin-top: var(--azora-workspace-gap-sm, 0.75rem); margin-left: 0; margin-right: 0; } .az-settings-form + .az-settings-rows > .az-settings-row { padding-left: 0; padding-right: 0; } label.az-settings-field, .az-settings-field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; min-width: 0; font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; color: inherit; } .az-settings-field__label { margin: 0; font-size: 0.78rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--azora-text-label, #6B7A94); line-height: 1.35; } .az-settings-form select.az-filter-select, .az-settings-form input.az-filter-search { width: 100%; max-width: 100%; min-width: 0; border-radius: var(--azora-radius-sm, 6px); } .az-settings-form .az-custom-select, .az-settings-field .az-custom-select { display: block; width: 100%; max-width: 100%; min-width: 0; align-self: stretch; flex: 1 1 auto; } .az-settings-form .az-custom-select__trigger, .az-settings-field .az-custom-select__trigger { width: 100%; max-width: 100%; min-width: 0; } .az-settings-form .az-custom-select__menu, .az-settings-field .az-custom-select__menu { width: 100%; max-width: 100%; } /* * FILE UPLOAD * Hidden native input + drop zone + queued files with remove. * Use in Settings forms. Do not expose the browser file chrome. * *
* *
* *

…

*
* *
*/ .az-file-upload { display: flex; flex-direction: column; align-items: stretch; gap: 0.65rem; width: 100%; min-width: 0; } .az-file-upload__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .az-file-upload__drop { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; border: 1px dashed var(--azora-drm-section-border, rgba(255, 255, 255, 0.14)); border-radius: var(--azora-radius-sm, 6px); background: var(--azora-bg-tertiary, #121212); cursor: pointer; } .az-file-upload__drop.is-dragover { border-color: var(--azora-filter-toolbar-border-hover, rgba(255, 255, 255, 0.28)); background: var(--azora-bg-card, #0d0d0d); } .az-file-upload__hint { margin: 0; font-size: var(--azora-form-help-size, 0.78rem); line-height: 1.45; color: var(--azora-text-label, #6B7A94); } .az-file-upload__queue { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; margin: 0; padding: 0; list-style: none; } .az-file-upload__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; width: 100%; box-sizing: border-box; margin: 0; padding: 0.65rem 0.45rem 0.65rem 0.75rem; border: 1px solid var(--azora-drm-section-border, rgba(255, 255, 255, 0.09)); border-radius: var(--azora-radius-sm, 6px); background: var(--azora-settings-bg, var(--azora-table-body-bg, #050505)); min-width: 0; } .az-file-upload__category { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 100%; min-width: 0; } .az-file-upload__category-template { display: none; } .az-file-upload__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .az-file-upload__size { flex: 0 0 auto; font-size: var(--azora-form-help-size, 0.78rem); color: var(--azora-text-label, #6B7A94); } .az-file-upload__remove.az-btn { flex: 0 0 auto; min-width: 2rem; padding-left: 0.45rem; padding-right: 0.45rem; line-height: 1; } .az-settings-field__hint { margin: 0; font-size: var(--azora-form-help-size, 0.78rem); line-height: 1.45; color: var(--azora-text-label, #6B7A94); } @media (max-width: 700px) { .az-settings-section__summary, .az-settings-section__header { flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; } .az-settings-section__meta { white-space: normal; } .az-settings-rows, .az-settings-row { grid-template-columns: 1fr; } .az-settings-row__label, .az-settings-row__value, .az-settings-row__hint { grid-column: 1; } .az-settings-row__value select.az-filter-select, .az-settings-row__value input.az-filter-search { width: 100%; max-width: none; flex: 1 1 100%; } .az-settings-row__action { margin-left: 0; } .az-settings-row__value:has(> .az-settings-row__action) { flex-wrap: wrap; } .az-settings-rows--entries .az-settings-row__label { white-space: normal; } .az-settings-form { max-width: none; } } /* * RELATIONSHIP DIAGRAM (v2.11) * Static HTML/CSS hierarchy. Interactive nodes, not a zoomable canvas. * Do not add wheel/pinch zoom, pan, physics, or movable nodes. * *
*
*
    …
* *
…node…
* *
    …
*
*
…
*
*/ .az-relationship-diagram { display: flex; flex-direction: column; gap: var(--azora-workspace-gap-sm, 0.75rem); min-width: 0; max-width: 100%; } .az-relationship-diagram__viewport { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; overflow: visible; } .az-relationship-diagram__spine { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; } .az-relationship-diagram__rel-label { display: none; color: var(--azora-text-label, #6B7A94); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; } .az-relationship-diagram__branch > .az-relationship-diagram__rel-label { position: absolute; top: 0.05rem; left: calc(50% + 0.45rem); z-index: 1; } .az-relationship-diagram__branch:hover > .az-relationship-diagram__rel-label, .az-relationship-diagram__branch:focus-within > .az-relationship-diagram__rel-label, .az-relationship-diagram__spine:hover > .az-relationship-diagram__rel-label, .az-relationship-diagram__spine:focus-within > .az-relationship-diagram__rel-label { display: block; } .az-relationship-diagram__branch > .az-relationship-diagram__level { width: 100%; } .az-relationship-diagram__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .az-relationship-diagram__root { display: flex; justify-content: center; min-width: 0; } .az-relationship-diagram__level { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--azora-rel-level-gap, 0.35rem 0.85rem); margin: 0; padding: 0; list-style: none; width: 100%; min-width: 0; } .az-relationship-diagram__branch { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: var(--azora-rel-stem, 1.1rem) 0 0; min-width: 0; } .az-relationship-diagram__level--parents > .az-relationship-diagram__branch { padding-top: 0; padding-bottom: 0; } .az-relationship-connector { display: block; pointer-events: none; } .az-relationship-connector--stem { width: var(--azora-rel-connector-w, 1px); height: var(--azora-rel-stem, 1.1rem); flex-shrink: 0; background: var(--azora-rel-connector, #6B7A94); opacity: 0.55; } .az-relationship-diagram__level--children > .az-relationship-diagram__branch > .az-relationship-connector, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch > .az-relationship-connector { position: absolute; top: 0; left: 50%; width: var(--azora-rel-connector-w, 1px); height: var(--azora-rel-stem, 1.1rem); background: var(--azora-rel-connector, #6B7A94); opacity: 0.55; transform: translateX(-50%); } .az-relationship-diagram__level--children > .az-relationship-diagram__branch::before, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch::before { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: var(--azora-rel-connector-w, 1px); background: var(--azora-rel-connector, #6B7A94); opacity: 0.55; pointer-events: none; } .az-relationship-diagram__level--children > .az-relationship-diagram__branch::after, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch::after { content: ""; position: absolute; top: 0; left: 50%; width: 50%; height: var(--azora-rel-connector-w, 1px); background: var(--azora-rel-connector, #6B7A94); opacity: 0.55; pointer-events: none; } .az-relationship-diagram__level--children > .az-relationship-diagram__branch:first-child::before, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch:first-child::before, .az-relationship-diagram__level--children > .az-relationship-diagram__branch:last-child::after, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch:last-child::after { display: none; } .az-relationship-diagram__level--children > .az-relationship-diagram__branch:only-child::before, .az-relationship-diagram__level--children > .az-relationship-diagram__branch:only-child::after, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch:only-child::before, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch:only-child::after { display: none; } .az-relationship-node { display: flex; align-items: center; gap: var(--azora-rel-node-gap, 0.5rem); box-sizing: border-box; min-width: 10.5rem; max-width: 14.5rem; min-height: var(--azora-rel-node-min-h, 2.75rem); padding: var(--azora-rel-node-pad, 0.55rem 0.7rem); background: var(--azora-rel-node-bg, #050505); border: 1px solid var(--azora-rel-node-border, #253141); border-radius: var(--azora-rel-node-radius, 8px); color: var(--azora-text-secondary, #E8ECF5); text-decoration: none; text-align: left; line-height: 1.25; } .az-relationship-node--member { border-radius: var(--azora-rel-node-radius, 8px); } .az-relationship-node--umbrella { flex-direction: row; align-items: flex-start; justify-content: flex-start; min-width: 12.5rem; max-width: 16.5rem; padding: 0.7rem 0.85rem 0.55rem; text-align: left; border-radius: 2.15rem 2.15rem 8px 8px; } .az-relationship-node--umbrella .az-relationship-node__body, .az-relationship-node--circle .az-relationship-node__body, .az-relationship-node--partner-network .az-relationship-node__body, .az-relationship-node--group .az-relationship-node__body { align-items: flex-start; text-align: left; } .az-relationship-node--circle { align-items: flex-start; justify-content: flex-start; min-width: 8.75rem; max-width: 13.5rem; padding: 0.65rem 0.95rem; text-align: left; border-radius: 999px; } .az-relationship-node--partner-network, .az-relationship-node--group { min-width: 13.5rem; max-width: 18.5rem; padding: 0.65rem 0.95rem; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--azora-rel-node-border, #253141); } a.az-relationship-node, a.az-relationship-node:link, a.az-relationship-node:visited, a.az-relationship-node:hover, a.az-relationship-node:focus, a.az-relationship-node:active { color: var(--azora-text-secondary, #E8ECF5); text-decoration: none; } a.az-relationship-node:hover, a.az-relationship-node:focus-visible { background: var(--azora-bg-card-hover, #1a1a1a); color: var(--azora-text-primary, #FFFFFF); } .az-relationship-node.is-current { background: var(--azora-rel-node-bg-current, #111111); border-color: var(--azora-rel-node-border-current, rgba(30, 40, 57, 0.9)); box-shadow: inset 0 0 0 1px var(--azora-rel-node-border-current, rgba(30, 40, 57, 0.9)); } .az-relationship-node:focus-visible { outline: 2px solid var(--azora-text-secondary, #E8ECF5); outline-offset: 2px; } .az-relationship-node__identity { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: var(--azora-surface-head, rgba(255, 255, 255, 0.05)); color: var(--azora-text-muted, #8E9AAF); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; } .az-relationship-node__identity .az-relationship-node__icon { width: 0.95rem; height: 0.95rem; margin-top: 0; color: inherit; } .az-relationship-node__mark { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: inherit; } .az-relationship-node__icon { display: block; flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.18rem; color: var(--azora-text-muted, #8E9AAF); } .az-relationship-node__body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1 1 auto; } .az-relationship-node__title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--azora-text-secondary, #E8ECF5); font-size: 0.84rem; font-weight: 600; } a.az-relationship-node:hover .az-relationship-node__title, .az-relationship-node.is-current .az-relationship-node__title { color: var(--azora-text-primary, #FFFFFF); } .az-relationship-node__meta { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--azora-text-muted, #8E9AAF); font-size: 0.72rem; font-weight: 400; } .az-relationship-node__extra { display: none; min-width: 0; overflow: hidden; color: var(--azora-text-label, #6B7A94); font-size: 0.7rem; font-weight: 400; white-space: normal; } .az-relationship-node:hover .az-relationship-node__extra, .az-relationship-node:focus-visible .az-relationship-node__extra { display: block; } .az-relationship-node__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.22rem; margin-top: 0.18rem; max-width: 100%; } .az-relationship-node__tags .az-status-pill { max-width: 100%; } .az-relationship-node__badge { flex-shrink: 0; } .az-relationship-node--more { min-width: 8.5rem; max-width: 11rem; cursor: pointer; list-style: none; background: transparent; } .az-relationship-diagram__disclose { display: flex; flex-direction: column; align-items: center; min-width: 0; } .az-relationship-diagram__disclose > summary { list-style: none; } .az-relationship-diagram__disclose > summary::-webkit-details-marker { display: none; } .az-relationship-diagram__less-label { display: none; } .az-relationship-diagram__disclose[open] > summary .az-relationship-diagram__more-label { display: none; } .az-relationship-diagram__disclose[open] > summary .az-relationship-diagram__less-label { display: block; } .az-relationship-diagram__level--overflow { margin-top: 0.65rem; } .az-relationship-diagram__empty { max-width: 28rem; margin: 0 auto; padding: 1.1rem 1.25rem; text-align: center; background: var(--azora-rel-node-bg, #050505); border: 1px solid var(--azora-rel-node-border, #253141); border-radius: var(--azora-rel-node-radius, 8px); box-shadow: none; } .az-relationship-diagram__empty h4 { margin: 0 0 0.3rem; color: var(--azora-text-body-soft, #C8D0E0); font-size: 0.9rem; font-weight: 600; } .az-relationship-diagram__empty p { margin: 0; color: var(--azora-text-muted, #8E9AAF); font-size: 0.8rem; line-height: 1.45; } @media (max-width: 960px) { .az-relationship-diagram__level--children > .az-relationship-diagram__branch::before, .az-relationship-diagram__level--children > .az-relationship-diagram__branch::after, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch::before, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch::after { display: none; } } @media (max-width: 700px) { .az-relationship-diagram__viewport { align-items: stretch; } .az-relationship-diagram__root { justify-content: flex-start; } .az-relationship-connector--stem { margin-left: 0.85rem; align-self: flex-start; } .az-relationship-diagram__level, .az-relationship-diagram__level--overflow { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: auto; margin-left: 0.85rem; padding-left: 0.85rem; border-left: var(--azora-rel-connector-w, 1px) solid var(--azora-rel-connector, #6B7A94); gap: 0.45rem; } .az-relationship-diagram__level--parents { margin-left: 0; padding-left: 0; border-left: 0; } .az-relationship-diagram__branch, .az-relationship-diagram__level--parents > .az-relationship-diagram__branch { align-items: stretch; padding: 0; } .az-relationship-diagram__level--children > .az-relationship-diagram__branch > .az-relationship-connector, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch > .az-relationship-connector { top: 1.35rem; left: -0.85rem; width: 0.85rem; height: var(--azora-rel-connector-w, 1px); transform: none; } .az-relationship-diagram__level--children > .az-relationship-diagram__branch::before, .az-relationship-diagram__level--children > .az-relationship-diagram__branch::after, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch::before, .az-relationship-diagram__level--overflow > .az-relationship-diagram__branch::after { display: none; } .az-relationship-diagram__spine { align-items: stretch; } .az-relationship-node { width: 100%; max-width: none; min-width: 0; } .az-relationship-node--umbrella, .az-relationship-node--circle, .az-relationship-node--partner-network, .az-relationship-node--group { width: 100%; max-width: none; } .az-relationship-node__title, .az-relationship-node__meta { white-space: normal; } .az-relationship-node__extra { display: block; } .az-relationship-diagram__branch > .az-relationship-diagram__rel-label { left: 0.15rem; transform: none; } .az-relationship-diagram__disclose { align-items: stretch; width: 100%; } .az-relationship-diagram__level--overflow { margin-top: 0.45rem; margin-left: 0; } } .az-card { background: var(--az-card); border: 1px solid var(--az-card-border); border-radius: var(--az-r-md); padding: 0.9rem; min-width: 200px; flex: 1 1 200px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transition: box-shadow var(--az-ease), border-color var(--az-ease); } .az-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); border-color: rgba(107, 143, 214, 0.38); } .az-card-title { margin: 0 0 0.35rem; color: var(--azora-text-label, var(--az-muted)); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .az-card-body { color: var(--azora-text-muted, var(--az-muted)); font-size: 0.8rem; line-height: 1.5; } .az-card-value { font-size: 1.75rem; color: var(--azora-text-primary); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.25rem; } .az-card-stat:hover { border-color: rgba(107, 143, 214, 0.38); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } .az-card-warning { background: var(--az-card); border-color: rgba(245,158,11,0.35); } .az-card-feature { background: var(--az-card); border-color: rgba(255, 255, 255, 0.12); } .az-card-empty { background: var(--az-card); } .az-trend { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.69rem; font-weight: 700; padding: 0.13rem 0.45rem; border-radius: 20px; line-height: 1; } .az-trend-up { color: #6EE7B7; background: var(--az-green-bg); } .az-trend-down { color: #FF9F9F; background: var(--az-red-bg); } .az-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .az-section-header-main { flex: 1; min-width: 0; } .az-section-title { margin: 0; color: var(--azora-text-primary); font-size: 1.1rem; font-weight: 700; } .az-section-subtitle { margin: 0.3rem 0 0; color: var(--az-muted); font-size: 0.8rem; } .az-section-actions { display: flex; gap: 0.4rem; align-items: center; } .az-panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; border-radius: var(--az-r-md); background: rgba(0, 0, 0,0.55); border: 1px solid #1E2839; padding: 0.75rem 0.9rem; } .az-panel-header strong { color: var(--az-text-soft); font-size: 0.85rem; } .az-panel-header p { margin: 0.2rem 0 0; color: var(--az-muted); font-size: 0.75rem; } .az-profile-card { display: flex; align-items: center; gap: 0.65rem; border-radius: var(--az-r-md); background: var(--az-card); padding: 0.55rem 0.75rem; } .az-profile-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--az-accent-soft); color: var(--az-accent-lite); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; } .az-profile-copy { min-width: 0; flex: 1; } .az-profile-name { color: var(--azora-text-secondary); font-size: 0.82rem; font-weight: 600; } .az-profile-role { color: var(--azora-text-muted); font-size: 0.72rem; } .az-badge { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 20px; padding: 0.2rem 0.6rem; font-size: 0.67rem; font-weight: 700; line-height: 1; white-space: nowrap; letter-spacing: 0.02em; } .az-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .az-badge-active, .az-badge-approved, .az-badge-live { background: var(--az-green-bg); color: #6EE7B7; } .az-badge-pending, .az-badge-staging { background: var(--az-amber-bg); color: #FCD34D; } .az-badge-restricted, .az-badge-rejected { background: var(--az-red-bg); color: #FF9F9F; } .az-badge-suspended, .az-badge-archived { background: rgba(107,114,128,0.12); color: #D1D5DB; } .az-badge-draft { background: rgba(45,55,72,0.2); color: #8E9AAF; } /* * ============================================================================ * TABS — 3 levels (v2.8) — Network workspace = visual source of truth * ============================================================================ * * 1) PRIMARY (.az-tabs / .az-tabs--pills) * Reference: Partner Network — Overview | Network | Management | Governance | Activity * Also: Member 360 — Overview | Network | Activity | … * Markup: * * 2) SECONDARY (.az-tabs--secondary) alias: .az-tabs--segmented * Reference: Network Management — Placement | Umbrellas | Circles | … * Markup: