/**
 * ECS Design System - component layer for plain semantic HTML.
 *
 * Companion to tokens.css: link BOTH and unclassed/lightly-classed HTML
 * renders with the elluminate product look. Intended for prototypes,
 * AI-generated mockups, and out-of-repo surfaces that cannot run
 * Angular + DevExtreme.
 *
 * Structure and values transcribed from design.md (the conformance spec)
 * and the product styles in elluminate-ui (base/*, overrides/dx-*).
 * Every value resolves through a var(--*) token, except a handful of
 * deliberately untokenized masthead/toast-only hexes called out inline
 * (see design.md §6.4.2 and §6.16.11).
 *
 * Hand-maintained in design-tokens/components/; copied to dist/css/ and
 * reference/tokens/v1/ by the build.
 *
 * Contents:
 *   1. Base & typography          9. Dropdown menus (light)
 *   2. Utilities                 10. Tooltips
 *   3. Tables                    11. Modals & dialogs
 *   4. Form fields               12. Popup toasts
 *   5. Buttons                   13. Accordion
 *   6. Badges                    14. Risk levels
 *   7. Tabs (light page body)    15. Thinking indicator
 *   8. Toolbars                  16. Side nav & active rail
 *   17. Cards & section headers  18. Masthead (dark top bar + all chrome)
 */

/* ============================== 1. Base ============================== */

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--text);
    background: var(--surface-muted);
}

h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-light); }
h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-regular); }
h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-medium); }
h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-medium); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* ============================== 2. Utilities ============================== */
/* From design.md §4.5 / §6.15 - the ones production HTML actually uses. */

.text-danger, .text-red { color: var(--error); }
.text-success { color: var(--success); }
.text-info { color: var(--blue-500); }
.text-primary { color: var(--blue-600); }
.text-warning { color: var(--data-orange-600); }
.text-gray, .text-muted { color: var(--text-muted); }
.text-white { color: var(--text-inverse); }

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.gap-4 { gap: 24px; }

.border-top { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-left { border-left: 1px solid var(--border); }
.border-right { border-right: 1px solid var(--border); }

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ecs-label { font-size: 10px; color: var(--text-muted); }
.disabled { opacity: 0.5; pointer-events: none; }

/* ============================== 3. Tables ============================== */
/* Contract from base/table.scss; the DX data grid renders the same shape:
   32px gray header row, 22px white body rows, 1px borders, hover highlight,
   NO zebra striping. */

table, .table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
    background: var(--surface);
}

table thead tr, .table thead tr {
    height: var(--row-height-header);
    background-color: var(--surface-muted);
}

table th, .table th {
    font-size: var(--font-size-th);
    font-weight: var(--font-weight-regular);
    text-align: left;
    vertical-align: middle;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
}

table tbody tr, .table tbody tr {
    height: var(--row-height);
}

table td, .table td {
    font-size: var(--font-size-td);
    vertical-align: middle;
    padding: 4px 8px;
    border: 1px solid var(--border);
}

table tbody tr:hover, .table tbody tr:hover {
    background-color: var(--data-blue-200);
}

/* ============================== 4. Form fields ============================== */
/* Contract from base/forms.scss; dx-select-box / dx-texteditor render the
   same chrome: 28px fields, 1px gray border, 4px radius, blue focus. */

input:not([type='radio']):not([type='checkbox']),
select,
textarea {
    box-sizing: border-box;
    height: var(--input-height);
    padding: 4px 9px;
    color: var(--gray-700);
    font-family: var(--font-family);
    font-size: var(--font-size-td);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

textarea {
    height: auto;
    min-height: 54px;
    resize: vertical;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue-600);
}

input::placeholder, textarea::placeholder {
    color: var(--text-placeholder);
}

input:disabled, select:disabled, textarea:disabled {
    opacity: var(--disabled-opacity);
}

input.error, select.error, textarea.error {
    border-color: var(--red-500);
}

/* Native select mimics dx-select-box: no native arrow, light chevron. */
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234B4B4B' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}

input[type='radio'] { height: 16px; }
input[type='radio'], input[type='checkbox'] { accent-color: var(--blue-600); }

label {
    display: block;
    font-size: var(--font-size-body);
    color: var(--gray-700);
    margin-bottom: 4px;
}

.form-group { margin-bottom: 12px; }

/* Required marker (product renders this via the ecs-required directive). */
.ecs-required-asterisk {
    color: var(--error);
    margin-right: 2px;
}

/* ============================== 5. Buttons ============================== */
/* Contract from base/button.scss ("Narrow button on Light UI"). */

button {
    font-family: var(--font-family);
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}

button:disabled { opacity: var(--disabled-opacity); pointer-events: none; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    cursor: pointer;
    border-radius: var(--radius);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-body);
    padding: 0 10px;
    text-decoration: none;
    transition: all 300ms ease;
}

.btn-primary {
    height: var(--button-height-sm);
    min-width: 60px;
    background-image: var(--button-primary-bg);
    color: var(--text-inverse);
}
.btn-primary:hover { background-image: var(--button-primary-bg-hover); }
.btn-primary:active { background-image: var(--button-primary-bg-active); }
.btn-primary:focus {
    outline: 1px solid var(--white);
    box-shadow: 0 0 0 3px var(--blue-600);
    background-image: var(--button-primary-bg-focus);
}

.btn-secondary {
    height: var(--button-height-sm);
    min-width: 60px;
    background: var(--button-secondary-bg);
    border: 1px solid var(--button-secondary-text);
    color: var(--button-secondary-text);
}
.btn-secondary:hover {
    background: var(--button-secondary-bg-hover);
    border-color: var(--button-secondary-text-hover);
    color: var(--button-secondary-text-hover);
}
.btn-secondary:active {
    background: var(--button-secondary-bg-active);
    color: var(--button-secondary-text-active);
}

.btn-danger {
    height: var(--button-height-sm);
    min-width: 60px;
    background-image: var(--gradient-red-100);
    color: var(--text-inverse);
}
.btn-danger:hover { background-image: var(--gradient-red-200); }

.btn-link {
    background: transparent;
    color: var(--blue-600);
    height: auto;
    border-radius: 0;
}
.btn-link:hover { color: var(--link-hover); }

.btn-icon {
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    padding: 6px 4px;
    min-width: 16px;
}
.btn-icon:hover { color: var(--blue-600); }

/* ============================== 6. Badges ============================== */
/* Contract from overrides/bootstrap.scss. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);
    color: var(--text-inverse);
    white-space: nowrap;
}

.badge-primary { background-color: var(--blue-600); }
.badge-secondary { background-color: var(--gray-500); }
.badge-success { background-color: var(--green-500); }
.badge-danger { background-color: var(--red-600); }
.badge-warning { background-color: var(--yellow-300); color: var(--gray-900); }
.badge-info { background-color: var(--blue-100); border-color: var(--blue-300); color: var(--blue-700); }
.badge-light { background-color: var(--gray-200); color: var(--gray-800); }

.badge-outline-primary { background-color: var(--blue-100); border-color: var(--blue-600); color: var(--blue-600); }
.badge-outline-success { background-color: var(--green-100); border-color: var(--green-500); color: var(--green-700); }
.badge-outline-warning { background-color: var(--yellow-100); border-color: var(--yellow-400); color: var(--yellow-700); }
.badge-outline-danger { background-color: var(--red-100); border-color: var(--red-600); color: var(--red-700); }
.badge-outline-secondary { background-color: var(--gray-100); border-color: var(--gray-500); color: var(--gray-700); }

/* Notification badges on masthead actions / toolbars (design.md §6.16.10). */
.toolbar-badge {
    z-index: 9000;
    padding: 5px 10px 4px 10px;
}
.toolbar-badge + .toolbar-badge, .badge-margin { margin-left: 4px; }

/* ============================== 7. Tabs (light page body) ============================== */
/* design.md §6.7 - 43px, 2px orange rail, #f7f7f7 active bg.
   NEVER inside the masthead (use .sub-nav-container-horizontal there). */

.nav-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav-tabs .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 43px;
    padding: 8px 20px;
    font-size: var(--font-size-body);
    color: var(--gray-700);
    border: none;
    border-right: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
}
.nav-tabs .nav-link:hover { color: var(--gray-900); }
.nav-tabs .nav-link.active {
    color: var(--gray-900);
    background: var(--surface-muted);
}
.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--active-rail-width);
    background: var(--active-rail);
}

.tab-content { padding: 20px; background: var(--surface); }

/* ============================== 8. Toolbars ============================== */
/* design.md §6.11. Default choice = .minimal-toolbar (transparent).
   The dark gradient .toolbar is page-level only - NEVER inside a modal. */

.toolbar, .minimal-toolbar, .secondary-toolbar {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 6px 0 10px;
    box-sizing: border-box;
}

.minimal-toolbar { background: transparent; }
.minimal-toolbar-lg { height: 40px; }

.secondary-toolbar {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
}

.toolbar:not(.minimal-toolbar):not(.secondary-toolbar) {
    background: var(--toolbar-bg);
    color: var(--text-inverse);
}
.toolbar:not(.minimal-toolbar):not(.secondary-toolbar) .btn-icon { color: var(--gray-100); }
.toolbar:not(.minimal-toolbar):not(.secondary-toolbar) .btn-icon:hover { color: var(--white); }

.toolbar-title {
    flex: 1;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================== 9. Dropdown menus (light) ============================== */
/* design.md §6.8. Light page-body menus - NEVER inside the masthead
   (use .ecs-dropdown-button + .ecs-dropdown-popover there). */

.dropdown-menu {
    display: block;
    min-width: 180px;
    padding: 4px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-dropdown);
    font-size: var(--font-size-body);
}

.dropdown-header {
    padding: 5px 10px;
    font-size: var(--font-size-h6);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dropdown-item {
    display: block;
    padding: 3px 10px;
    color: var(--gray-900);
    cursor: pointer;
    white-space: nowrap;
}
.dropdown-item:hover { background: var(--surface-muted); color: var(--gray-900); }

.dropdown-divider {
    margin: 3px 0;
    border-top: 1px solid var(--border-subtle);
}

/* ============================== 10. Tooltips ============================== */
/* design.md §6.9 - rendered shape of [ngbTooltip]. For static mockups. */

.tooltip-inner, .ecs-tooltip {
    display: inline-block;
    max-width: 350px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-inverse);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    border-radius: var(--radius);
}

/* ============================== 11. Modals & dialogs ============================== */
/* design.md §6.6 / §4.4. Header is 32px WHITE (never the dark gradient);
   footer actions right-aligned. */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9000;
}

.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8vh;
    z-index: 9001;
}

.modal-content {
    display: flex;
    flex-direction: column;
    width: 600px;               /* .modal-md - the default */
    max-width: calc(100vw - 40px);
    max-height: 84vh;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}
.modal-sm .modal-content { width: 400px; }
.modal-lg .modal-content { width: 800px; }

.modal-header {
    display: flex;
    align-items: center;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
}
.modal-header h4 {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
}
.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
}
.modal-close:hover { color: var(--gray-900); }

.dialog-content {
    flex: 1;
    padding: 20px;
    font-size: var(--font-size-h4);
    line-height: 1.2;
    overflow: auto;
}

.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--gray-200);
}

/* ============================== 12. Popup toasts ============================== */
/* design.md §6.4.2 - the dx-toast shell. For server-returned messages.
   In mockups, place inside .toast-stack (fixed, top-center). */

.toast-stack {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9006;
}

.popup-toast {
    display: flex;
    align-items: flex-start;
    width: 370px;
    max-width: calc(100vw - 40px);
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    /* "Floating glass" gradient - deliberate toast-only treatment (design.md §6.4.2). */
    background: linear-gradient(150deg, #D0D0D0 0%, #FFFFFF 50%, #D6D6D6 75%);
    color: var(--gray-900);
    font-size: var(--font-size-body);
    line-height: 1.4;
}

.popup-toast-icon {
    flex: 0 0 32px;
    font-size: 16px;
    font-style: normal;
}
.popup-toast-icon.is-success { color: var(--green-500); }
.popup-toast-icon.is-info { color: var(--blue-600); }
.popup-toast-icon.is-warning { color: #EC7614; } /* toast-only warning hue ($carrot-orange-F) - do not reuse elsewhere */
.popup-toast-icon.is-error { color: var(--red-500); }

.popup-toast-message { flex: 1; padding: 0 15px 0 0; }
.popup-toast-message strong { font-weight: var(--font-weight-medium); }

.popup-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
}

/* ============================== 13. Accordion ============================== */
/* design.md §6.12 - 32px header on #F6F6F6, chevron disclosure (never +/-).
   Works with native <details>/<summary> for static mockups. */

.accordion details { border-bottom: 1px solid var(--border); background: var(--surface); }
.accordion summary {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    background: var(--surface-muted);
    font-size: var(--font-size-body);
    color: var(--gray-700);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--gray-700);
    border-bottom: 1.5px solid var(--gray-700);
    transform: rotate(-45deg);   /* chevron pointing right */
    transition: transform 200ms ease;
}
.accordion details[open] summary::before {
    transform: rotate(45deg);    /* chevron pointing down */
    border-color: var(--blue-600);
}
.accordion .accordion-body, .accordion details > div {
    min-height: 60px;
    padding: 0 10px 6px 10px;
    font-size: var(--font-size-body);
}

/* Splitter gutter (design.md §6.13). */
.as-split-gutter {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: transparent;
}
.as-split-gutter:hover { background: var(--surface-muted); }

/* ============================== 14. Risk levels ============================== */
/* design.md §2.6 - the canonical scale from base/risk-workflow.scss.
   Never invent new levels or hexes. */

.risk-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-medium);
}
.risk-level-undefined { background: var(--gray-200); color: var(--gray-900); }
.risk-level-low { background: var(--risk-low); color: var(--white); }
.risk-level-high-low { background: var(--risk-high-low); color: var(--white); }
.risk-level-low-medium { background: var(--risk-low-medium); color: var(--black); }
.risk-level-high-medium { background: var(--risk-high-medium); color: var(--black); }
.risk-level-high { background: var(--risk-high); color: var(--white); }
.risk-level-extreme-high { background: var(--risk-extreme-high); color: var(--white); }

/* ============================== 15. Thinking indicator ============================== */
/* design.md §6.14 - Matilda's animated text gradient + breathing dot. */

.thinking-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.thinking-indicator .thinking-circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue-600);
    animation: ecs-thinking-breathe 2.5s ease-in-out infinite;
}
.thinking-indicator .thinking-text {
    font-size: var(--font-size-body);
    background: linear-gradient(90deg, var(--gray-500) 0%, var(--gray-900) 50%, var(--gray-500) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ecs-thinking-sweep 1s linear infinite;
}
@keyframes ecs-thinking-sweep {
    from { background-position: 200% 0; }
    to { background-position: 0 0; }
}
@keyframes ecs-thinking-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.7); opacity: 0.6; }
}

/* ============================== 16. Side nav & active rail ============================== */
/* design.md §F: side navigation = 220px column. Active item = 2px orange
   rail + light blue background (the universal active-item treatment). */

.side-nav {
    width: 220px;
    background: var(--surface);
    border-right: 1px solid var(--border);
}
.side-nav-item {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    font-size: var(--font-size-body);
    color: var(--gray-700);
    border-left: var(--active-rail-width) solid transparent;
    cursor: pointer;
}
.side-nav-item:hover { background: var(--surface-muted); color: var(--gray-900); }
.side-nav-item.active {
    background: var(--blue-100);
    color: var(--blue-700);
    border-left-color: var(--active-rail);
}

/* ============================== 17. Cards & section headers ============================== */
/* design.md §6.10. */

.card, .panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 10px;
}

.rounded-borders {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 10px;
}
.rounded-border {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.stats-bg {
    display: inline-flex;
    flex-direction: column;
    min-width: 90px;
    padding: 4px 10px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.stats-bg .stats-label { font-size: var(--font-size-h6); color: var(--text-muted); }
.stats-bg .stats-value { font-size: var(--font-size-h2); color: var(--gray-900); font-weight: var(--font-weight-medium); }

.section-header {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    background: var(--surface-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.light-blue-section-header, .secondary-header {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    background: var(--blue-100);
    font-size: var(--font-size-h4);
    color: var(--gray-900);
}
.light-blue-section-header h4 { margin: 0; font-size: var(--font-size-h4); }

/* ============================== 18. Masthead ============================== */
/* design.md §6.16: the 50px dark top app bar. Masthead chrome is
   masthead-only - never reuse .nav-tabs, .dropdown-menu, or light
   buttons/pills inside it, and never use these dark styles on a light
   page body.
   Region order: app grid (9-dot) > logo > header label > dropdowns >
   sub-nav tabs > filter pills > search-by > search > trailing toolbar. */

.ecs-masthead {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background: var(--surface-inverse);
    color: var(--text-inverse);
    box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.3);
}

/* --- App grid (9-dot menu trigger) - the LEFTMOST control (§6.16.7) --- */
.ecs-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    margin-left: 10px;
    font-size: 18px;
    color: var(--white);
    background: none;
    border: none;
    cursor: pointer;
}
.ecs-menu-btn:hover { background: var(--blue-800); color: var(--white); }
/* Pure-CSS 9-dot glyph for mockups without an icon font. */
.ecs-menu-btn .grid-glyph {
    display: inline-grid;
    grid-template-columns: repeat(3, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 2px;
}
.ecs-menu-btn .grid-glyph::before { content: none; }
.ecs-menu-btn .grid-glyph span {
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background: var(--white);
}

.ecs-masthead-logo {
    height: 28px;
    margin: 0 10px 0 12px;
}

/* --- Page-context label ("Data Central › Subjects") (§6.16.2) --- */
.ecs-header-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--blue-200);
    margin-right: 15px;
    white-space: nowrap;
}

/* --- Masthead navigation dropdown (study/module selector) (§6.16.3) ---
   NOT the light .dropdown-menu - this fills the bar height. */
.ecs-dropdown-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 0 15px;
    font-size: 14px;
    font-weight: var(--font-weight-light);
    color: var(--blue-200);
    background: transparent;
    border: none;
    border-right: 1px solid var(--blue-700);
    cursor: pointer;
}
.ecs-dropdown-button:first-of-type { border-left: 1px solid var(--blue-700); }
.ecs-dropdown-button:hover {
    background: var(--blue-800);
    color: var(--text-inverse);
}

/* Its popover panel: 300px white list, 34px rows, selected = blue-200 bg
   + 3px orange left bar. Position under the trigger in mockups. */
.ecs-dropdown-popover {
    width: 300px;
    max-height: 680px;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: var(--gray-900);
    padding: 4px 0;
}
.ecs-dropdown-popover-item {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    font-size: var(--font-size-body);
    border-left: 3px solid transparent;
    cursor: pointer;
}
.ecs-dropdown-popover-item:hover { background: var(--surface-muted); }
.ecs-dropdown-popover-item.selected {
    background: var(--blue-200);
    border-left-color: var(--active-rail);
}

/* --- Masthead sub-nav tabs (§6.16.4) - 49px white-on-dark, 3px rail.
   NOT .nav-tabs (those are the 43px light page-body tabs). --- */
.sub-nav-container-horizontal {
    display: flex;
    align-self: stretch;
    align-items: stretch;
}
.sub-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    color: var(--text-inverse);
    cursor: pointer;
}
.sub-nav-item:hover { background: var(--blue-800); }
.sub-nav-item-active { background: var(--blue-800); }
.sub-nav-item-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--active-rail);
}

/* --- Filter pills (§6.16.5) - two-button pill: label + clear (×). --- */
.filter-pill {
    display: inline-flex;
    height: 36px;
    max-width: 320px;
    padding: 2px;
    box-sizing: border-box;
}
.filter-pill button {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    font-size: var(--font-size-body);
    cursor: pointer;
    transition: all 200ms ease;
}
.filter-pill button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.filter-pill button:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.filter-pill button > div { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.filter-pill button > div span:first-child { font-size: 11px; opacity: 0.85; }
.filter-pill button > div span:last-child { font-size: var(--font-size-body); }

/* Dark variant - ONLY inside the masthead. */
.filter-pill-dark button {
    background: var(--blue-800);
    border: 1px solid var(--blue-400);
    color: var(--white);
}
.filter-pill-dark button:hover { background: var(--blue-700); }
.filter-pill-dark button:active { background: var(--blue-600); }

/* Light variant - on light page bodies. */
.filter-pill-light button {
    background: var(--white);
    border: 1px solid var(--gray-400);
    color: var(--gray-900);
}
.filter-pill-light button:hover { background: var(--gray-100); }
.filter-pill-light button:active { background: var(--gray-200); }

/* --- Filter pill overflow "+N" (§6.16.6) --- */
.ecs-pill-overflow-dropdown {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 4px 0 4px 6px;
    border-left: 1px solid var(--blue-700);
}
.ecs-pill-overflow-dropdown-button {
    width: 56px;
    font-size: var(--font-size-body);
    background: transparent;
}
.ecs-pill-overflow-dropdown-button:hover { background: var(--blue-700); }

/* --- Search (Pattern A) + search-by picker (Pattern B) (§6.16.8) --- */
.ecs-masthead-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 10px;
}
.ecs-masthead-search input[type='search'] {
    height: 30px;
    width: 240px;
    padding: 0 30px 0 10px;
    color: var(--text-inverse);
    background: var(--blue-800);
    border: 1px solid var(--blue-700);
    border-radius: var(--radius);
}
.ecs-masthead-search input[type='search']::placeholder {
    color: var(--blue-200);
    opacity: 0.7;
}
.ecs-masthead-search input[type='search']:focus {
    outline: none;
    border-color: var(--blue-400);
}
.ecs-masthead-search i,
.ecs-masthead-search .search-icon {
    position: absolute;
    right: 10px;
    font-size: 12px;
    font-style: normal;
    color: var(--blue-200);
    pointer-events: none;
}

/* Joined picker + input group. */
.ecs-masthead-search-group { display: inline-flex; align-items: center; margin: 0 10px; }
.ecs-masthead-search-group .ecs-masthead-search { margin: 0; }
.ecs-masthead-search-group .ecs-masthead-search input[type='search'] {
    border-radius: 0 var(--radius) var(--radius) 0;
}
.ecs-masthead-search-by-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 30px;
    min-width: 180px;
    padding: 0 10px;
    font-size: var(--font-size-body);
    color: var(--white);
    background: var(--blue-900);
    border: 1px solid var(--blue-700);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    cursor: pointer;
}
.ecs-masthead-search-by-btn:hover { background: var(--blue-800); }
.ecs-masthead-search-by-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Search-by popover: white checkbox rows. */
.ecs-masthead-search-by-popover {
    min-width: 220px;
    padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.search-by-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 14px;
    font-size: var(--font-size-body);
    color: var(--gray-900);
    cursor: pointer;
}
.search-by-option:hover { background: var(--blue-100); }
.search-by-option input[type='checkbox'] { width: 14px; height: 14px; margin: 0; }

/* --- Trailing toolbar (§6.16.9) - right-aligned white icon buttons --- */
.ecs-masthead-toolbar {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding-right: 8px;
}
.btn-icon-for-dark {
    color: var(--gray-100);
}
.btn-icon-for-dark:hover {
    color: var(--text-inverse);
    background: var(--blue-800);
}

/* --- Mega-menu flyout (§6.16.7) - opened by the 9-dot trigger --- */
.ecs-menu-popover {
    display: flex;
    flex-direction: column;
    width: 850px;
    max-width: calc(100vw - 40px);
    height: calc(100vh - 60px);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: var(--gray-900);
    overflow: hidden;
}
.ecs-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    min-height: 50px;
    padding: 0 20px 0 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--gray-400);
}
.ecs-menu-header > * { flex: 1; }
.ecs-menu-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: auto;
}
.ecs-menu-content > :first-child { border-right: 1px solid var(--gray-400); }
.ecs-menu-button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--blue-800);
    cursor: pointer;
}
/* Mega-menu row states - masthead-only hexes (design.md §6.16.11). */
.ecs-menu-button.selected { background: #E0F4FF; }
.ecs-menu-button:hover { background: #CCEDFF; }
.ecs-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    min-height: 50px;
    padding: 0 15px;
    background: var(--surface-inverse);
    color: var(--gray-400);
}
.ecs-menu-footer a { color: var(--gray-400); }
.ecs-menu-footer a:hover { color: var(--white); }

/* ============================== 19. Module-layout components ============================== */
/* Platform-specific layout patterns extracted from elluminate-ui.
   Which module uses which pattern is documented in layouts/*.md — read the
   matching layout doc before using these. */

/* --- 19.1 Config tree nav (Data Central Configuration, Risk Mgmt config) ---
   250px searchable tree pane. Selected item = light blue fill, NO orange
   rail. Rows are compact (22px) like table rows. Nest with .level-2/.level-3. */
.tree-nav {
    display: flex;
    flex-direction: column;
    width: 250px;
    background: var(--surface);
    border-right: 1px solid var(--border-subtle);
}
.tree-nav-header {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tree-nav-header input[type='search'] { width: 100%; box-sizing: border-box; }
.tree-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 0 8px;
    font-size: var(--font-size-td);
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
}
.tree-nav-item:hover { background: var(--gray-100); color: var(--blue-600); }
.tree-nav-item.selected {
    /* $light-pattens-blue-F — the product tree selection fill (dx-treeview) */
    background: #E0F4FF;
    color: var(--black);
}
.tree-nav-item.level-2 { padding-left: 24px; }
.tree-nav-item.level-3 { padding-left: 40px; }
.tree-nav-caret {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1px solid var(--gray-700);
    border-bottom: 1px solid var(--gray-700);
    transform: rotate(-45deg); /* collapsed: points right */
    flex-shrink: 0;
}
.tree-nav-item.expanded .tree-nav-caret { transform: rotate(45deg); } /* points down */
.tree-nav-caret-spacer { display: inline-block; width: 5px; flex-shrink: 0; }

/* --- 19.2 Aside help rail (Data Central Configuration screens) ---
   275px right-hand help panel with titled paragraphs. */
.aside-help {
    width: 275px;
    flex-shrink: 0;
    align-self: flex-start;
    /* #FBFDFF — the product aside-help surface (aside-help.component.scss) */
    background: #FBFDFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--gray-700);
    font-size: var(--font-size-body);
}
.aside-help-title {
    margin: 12px 0 4px;
    font-size: var(--font-size-minor-header);
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
}
.aside-help-title:first-child { margin-top: 0; }
.aside-help p { margin: 0 0 8px; line-height: var(--line-height-tight); }

/* --- 19.3 Tab strip (DevExtreme dx-tabs look) ---
   30px white tabs on a gray strip; selected = gray fill + blue text +
   3px orange bottom rail. Used inside content panels (e.g. DC Config
   Data Review). Distinct from .nav-tabs (43px page-level tabs). */
.tab-strip {
    display: flex;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}
.tab-strip-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 16px;
    background: var(--surface);
    border: none;
    border-right: 1px solid var(--gray-300);
    font-size: var(--font-size-body);
    font-family: var(--font-family);
    color: var(--gray-700);
    cursor: pointer;
}
.tab-strip-item:hover { color: var(--gray-900); }
.tab-strip-item.active {
    background: var(--gray-100);
    color: var(--blue-600);
}
.tab-strip-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--active-rail);
}

/* --- 19.4 Main-list nav buttons (Data Central left panel) ---
   38px icon + label buttons with right-aligned count badges. */
.main-list-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    background: transparent;
    border: none;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--gray-700);
    cursor: pointer;
    text-align: left;
}
.main-list-button:hover { background: var(--gray-100); color: var(--blue-600); }
.main-list-button svg { flex-shrink: 0; }
.main-list-button .main-list-badges {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.main-list-button .badge { min-width: 48px; }

/* --- 19.5 Workspace sheet tabs (Data Central bottom bar) ---
   32px spreadsheet-style sheet tab bar; active tab = light blue fill +
   3px orange bottom rail. */
.workspace-tabs {
    display: flex;
    align-items: center;
    height: 32px;
    background: var(--surface);
    border-top: 1px solid var(--border-strong);
}
.workspace-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 80px;
    height: 100%;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-subtle);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    color: var(--blue-600);
    cursor: pointer;
}
.workspace-tab:hover { background: var(--blue-100); }
.workspace-tab.active { background: var(--blue-100); }
.workspace-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--active-rail);
}

/* --- 19.6 Breadcrumb toolbar title (config page toolbars) ---
   Bold breadcrumb of the selected nav path, used as the .toolbar-title of
   a .minimal-toolbar (e.g. "RBQM > Study > Sites"). */
.toolbar-breadcrumb { font-weight: var(--font-weight-bold); }
.toolbar-breadcrumb .crumb-sep {
    font-weight: var(--font-weight-regular);
    color: var(--text-muted);
    padding: 0 6px;
}