/* ============================================================
   Runway Platform — Base Styles
   Design inspiration: Clean, generous whitespace, minimal chrome
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────────────────── */
.orat-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.orat-sidebar {
    width: var(--sidebar-width);
    background: var(--color-sidebar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
}

.orat-logo {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.logo-mark {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.orat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.orat-header {
    height: var(--header-height);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    flex-shrink: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.orat-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
}

/* Hamburger toggle — hidden on desktop, shown via media query */
.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    padding: 6px;
    border-radius: var(--radius);
    flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--color-gray-100); }

/* Sidebar backdrop — hidden on desktop, shown via media query */
.sidebar-backdrop {
    display: none;
}

/* ── Navigation ─────────────────────────────────────────────── */
.nav-menu {
    padding: 10px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.nav-section { padding: 4px 0; }

.nav-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding: 12px 20px 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 9px 20px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 400;
    transition: background 0.1s, color 0.1s;
    border-left: 3px solid transparent;
    line-height: 1.3;
}

.nav-item:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.9);
}

.nav-item.active {
    background: rgba(0,137,220,0.12);
    color: var(--color-white);
    border-left-color: var(--color-blue);
    font-weight: 500;
}

.nav-item--sub {
    padding-left: 32px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.45);
}

.nav-item--sub:hover { color: rgba(255,255,255,0.8); }

.nav-section--bottom {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 8px;
}

/* ── Accordion Nav ────────────────────────────────────────── */
.nav-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px 8px;
    background: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    color: inherit;
}

.nav-accordion-header .nav-section-label {
    padding: 0;
}

.nav-accordion-header:hover {
    background: rgba(255,255,255,0.07);
}

.nav-accordion-chevron {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.nav-accordion--open .nav-accordion-chevron {
    transform: rotate(90deg);
}

.nav-accordion-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
    background: rgba(255,255,255,0.03);
}

.nav-accordion--open .nav-accordion-items {
    max-height: 400px;
}

/* Suppress double border for first accordion inside bottom section */
.nav-section--bottom .nav-accordion:first-child .nav-accordion-header {
    border-top: none;
}

/* Quick Log: desktop hidden, mobile visible */
.nav-item--mobile-only {
    display: none;
}

.nav-badge {
    background: var(--color-blue);
    color: white;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.4rem;
    line-height: 1.4;
    display: inline-block;
}

/* ── Header elements ────────────────────────────────────────── */
.project-name {
    font-size: 13px;
    color: var(--color-text-sub);
}

.project-name.muted {
    font-style: italic;
}

.project-selector-select {
    font-size: 13px;
    font-family: inherit;
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    padding: 4px 28px 4px 10px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    min-width: 160px;
    max-width: 260px;
}

.project-selector-select:focus {
    outline: none;
    border-color: var(--color-blue);
}

.user-name {
    font-size: 13px;
    color: var(--color-text);
    margin-right: 16px;
}

.sign-out-link {
    font-size: 13px;
    color: var(--color-blue);
    text-decoration: none;
}

.sign-out-link:hover { text-decoration: underline; }

/* ── Page structure ─────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.page-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.3px;
}

.page-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-subtitle {
    font-size: 13px;
    color: var(--color-text-sub);
    margin: 0 0 16px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border: none;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    font-family: var(--font);
    white-space: nowrap;
}

.btn-primary   { background: var(--color-blue);  color: var(--color-white); }
.btn-primary:hover { background: var(--color-blue-dark); }

.btn-secondary {
    background: var(--color-white);
    color: var(--color-text);
    border: 1px solid var(--color-gray-300);
}
.btn-secondary:hover { background: var(--color-gray-50); }

.btn-danger    { background: var(--color-red); color: var(--color-white); }
.btn-danger:hover { filter: brightness(0.9); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-link {
    background: none;
    border: none;
    color: var(--color-blue);
    padding: 0;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font);
}

/* ── Form controls ──────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-sub);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-label .required { color: var(--color-red); margin-left: 2px; }

.form-control, .filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font);
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus, .filter-select:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0,137,220,0.12);
}

.form-error { font-size: 12px; color: var(--color-red); margin-top: 4px; }

.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.filter-bar .filter-select { width: auto; min-width: 160px; }

/* ── Data table (plain HTML tables) ────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--color-gray-200);
}

.data-table th {
    background: var(--color-gray-50);
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-sub);
    border-bottom: 1px solid var(--color-gray-200);
    white-space: nowrap;
}

.data-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
    color: var(--color-text);
}

.data-row { cursor: pointer; user-select: none; }
.data-row:hover td { background: var(--color-gray-50); }
.data-row:last-child td { border-bottom: none; }

.col-title { font-weight: 500; }
.col-date  { color: var(--color-text-sub); white-space: nowrap; font-size: 13px; }

.table-summary {
    font-size: 12px;
    color: var(--color-text-sub);
    margin-top: 10px;
    padding: 0 2px;
}

/* ── Status badges ──────────────────────────────────────────── */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge--open         { background: #DBEAFE; color: #1D4ED8; }
.status-badge--inreview     { background: #FEF3C7; color: #92400E; }
.status-badge--approved     { background: #D1FAE5; color: #065F46; }
.status-badge--validated    { background: #D1FAE5; color: #065F46; }
.status-badge--tested       { background: #D1FAE5; color: #065F46; }
.status-badge--live         { background: #A7F3D0; color: #064E3B; }
.status-badge--promoted     { background: #EDE9FE; color: #5B21B6; }
.status-badge--mitigated    { background: #D1FAE5; color: #065F46; }
.status-badge--accepted     { background: var(--color-gray-100); color: #374151; }
.status-badge--closed       { background: var(--color-gray-100); color: var(--color-gray-400); }
.status-badge--inprogress          { background: #FEF3C7; color: #92400E; }
.status-badge--pendingverification { background: #FEF3C7; color: #92400E; }
.status-badge--scheduled    { background: #DBEAFE; color: #1D4ED8; }
.status-badge--cancelled    { background: #FEE2E2; color: #991B1B; }
.status-badge--complete     { background: #D1FAE5; color: #065F46; }
.status-badge--planned      { background: var(--color-gray-100); color: #374151; }
.status-badge--notstarted   { background: var(--color-gray-100); color: var(--color-gray-400); }
.status-badge--blocked      { background: #FEE2E2; color: #991B1B; }
.status-badge--critical     { background: #FEE4E2; color: #B42318; }
.status-badge--high         { background: #FEF0C7; color: #B45309; }
.status-badge--medium       { background: #D1E9FF; color: #1D4ED8; }
.status-badge--low          { background: var(--color-gray-100); color: var(--color-text-sub); }
.status-badge--pass             { background: #D1FAE5; color: #065F46; }
.status-badge--fail             { background: #FEE4E2; color: #B42318; }
.status-badge--not-evaluated    { background: var(--color-gray-100); color: var(--color-text-sub); }
.status-badge--conditional-pass { background: #FEF3C7; color: #92400E; }
.status-badge--major            { background: #FEF0C7; color: #92400E; }
.status-badge--minor            { background: #FEF9C3; color: #713F12; }
.status-badge--observation      { background: #DBEAFE; color: #1D4ED8; }

/* ── Score badges ───────────────────────────────────────────── */
.score-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.score-critical { background: var(--color-critical); color: #B42318; }
.score-high     { background: var(--color-high);     color: #B45309; }
.score-medium   { background: var(--color-medium);   color: #1D4ED8; }
.score-low      { background: var(--color-low);      color: var(--color-text-sub); }
.score-detail   { font-size: 12px; color: var(--color-text-sub); margin-left: 4px; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background: var(--color-white);
    border-radius: var(--radius);
    border: 1px solid var(--color-gray-200);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.card-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-sub);
    margin: 0 0 14px;
}

/* ── Loading / Empty ────────────────────────────────────────── */
.loading-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 48px;
    justify-content: center;
    color: var(--color-text-sub);
}

.loading-spinner--inline { padding: 8px; }

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-blue);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
    text-align: center;
    padding: 64px 20px;
    color: var(--color-text-sub);
}

.empty-state p { margin: 0; font-size: 14px; }

/* ── Alerts ─────────────────────────────────────────────────── */
.error-banner {
    background: var(--color-critical);
    border: 1px solid #FECDCA;
    border-radius: var(--radius);
    padding: 12px 16px;
    color: #7A271A;
}

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    border-left: 3px solid;
    font-size: 14px;
}

.alert-warning { background: var(--color-high);     border-color: var(--color-amber); color: #7A4504; }
.alert-info    { background: var(--color-medium);   border-color: var(--color-blue);  color: #1D4ED8; }
.alert-success { background: #D1FAE5;               border-color: var(--color-green); color: #065F46; }
.alert-danger  { background: var(--color-critical); border-color: var(--color-red);   color: #7A271A; }

/* ── RAG indicators ─────────────────────────────────────────── */
.rag { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.rag-red    { background: var(--color-red); }
.rag-amber  { background: var(--color-amber); }
.rag-green  { background: var(--color-green); }
.rag-blue   { background: var(--color-blue); }
.rag-gray   { background: var(--color-gray-300); }

/* ── Radzen DataGrid overrides ──────────────────────────────── */
.rz-data-grid {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--color-gray-200);
    overflow: hidden;
    font-family: var(--font);
}

.rz-grid-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: var(--font);
}

.rz-data-grid .rz-grid-table thead th,
.rz-data-grid .rz-column-header {
    background: var(--color-gray-50);
    color: var(--color-text-sub);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-gray-200);
    white-space: nowrap;
}

.rz-data-grid .rz-grid-table tbody td,
.rz-data-grid .rz-data-row td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: middle;
    color: var(--color-text);
}

.rz-data-grid .rz-data-row:last-child td { border-bottom: none; }

.rz-data-grid .rz-data-row:hover td { background: var(--color-gray-50); }

.rz-data-grid .rz-data-row.rz-state-focused td,
.rz-data-grid .rz-datatable-edit td {
    background: #EFF8FF;
    border-left: 2px solid var(--color-blue);
}

.rz-data-grid .rz-sortable-column:hover { background: var(--color-gray-50); cursor: pointer; }
.rz-data-grid .rz-sorted-ascending-icon,
.rz-data-grid .rz-sorted-descending-icon { color: var(--color-blue); }

.rz-data-grid .rz-column-filter-row td {
    padding: 6px 12px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
}

.rz-data-grid .rz-textbox,
.rz-data-grid input[type="text"],
.rz-data-grid .rz-dropdown {
    font-size: 13px;
    font-family: var(--font);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    color: var(--color-text);
    background: var(--color-white);
    width: 100%;
}

.rz-data-grid .rz-textbox:focus,
.rz-data-grid input[type="text"]:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0,137,220,0.1);
}

.rz-data-grid .rz-column-filter-menu-button {
    color: var(--color-gray-400);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}

.rz-data-grid .rz-column-filter-menu-button:hover,
.rz-data-grid .rz-column-filter-menu-button.rz-state-active {
    color: var(--color-blue);
    background: rgba(0,137,220,0.08);
}

.rz-data-grid .rz-paginator {
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
    padding: 8px 16px;
    font-size: 13px;
    color: var(--color-text-sub);
    font-family: var(--font);
}

.rz-data-grid .rz-paginator .rz-paginator-element {
    border-radius: 100px;
    padding: 3px 9px;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--color-text-sub);
}

.rz-data-grid .rz-paginator .rz-state-highlight {
    background: var(--color-blue);
    color: var(--color-white);
    border-color: var(--color-blue);
}

/* Clickable rows — pointer + no text-selection cursor bleed-through on cell content.
   CssClass="clickable-rows" renders as a raw HTML attribute in Radzen v10 (not a CSS class),
   so we target .rz-data-grid directly. All grids in this app have RowClick handlers.
   !important required to override Radzen cursor:auto on cells. */
.rz-data-grid .rz-data-row,
.rz-data-grid .rz-data-row td,
.rz-data-grid .rz-data-row td * { cursor: pointer !important; }
.rz-data-grid .rz-data-row { user-select: none; }

/* Clickable mobile cards */
.clickable-card {
    cursor: pointer;
    user-select: none;
    transition: background 0.1s ease, border-color 0.15s ease;
}
.clickable-card:hover { border-color: var(--color-gray-300); }
.clickable-card:active { background: var(--color-gray-50); }

/* Clickable stat card modifier */
.stat-card--clickable { cursor: pointer; }

/* Grid action buttons */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-text-sub);
    line-height: 1;
    font-family: var(--font);
}

.btn-icon:hover        { color: var(--color-blue);  background: rgba(0,137,220,0.08); }
.btn-icon.save:hover   { color: var(--color-green); background: rgba(18,183,106,0.08); }
.btn-icon.cancel:hover { color: var(--color-red);   background: rgba(217,45,32,0.08); }

/* ── Blade panel ────────────────────────────────────────────── */
.blade-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    z-index: 200;
}

.blade {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 680px;
    background: var(--color-white);
    border-left: 1px solid var(--color-gray-200);
    box-shadow: -6px 0 24px rgba(0,0,0,0.08);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    pointer-events: none;
}

.blade--open { transform: translateX(0); pointer-events: auto; }
.blade--on-top { z-index: 221; }
.blade-backdrop--on-top { z-index: 220; }

.blade-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-gray-200);
    flex-shrink: 0;
    gap: 12px;
}

.blade-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.blade-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Blade entity type pill ───────────────────────────────────────── */
.blade-entity-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}
.blade-entity-pill--issue        { background: var(--color-high);     color: #92400e; }
.blade-entity-pill--risk         { background: var(--color-critical);  color: #9b1c1c; }
.blade-entity-pill--equipment    { background: var(--color-medium);    color: #1e40af; }
.blade-entity-pill--contact      { background: #e0e7ff;                color: #3730a3; }
.blade-entity-pill--checklist    { background: var(--color-checklist-accent-tint); color: var(--color-blue); }
.blade-entity-pill--stakeholder  { background: #f0fdf4;                color: #166534; }
.blade-entity-pill--specification { background: #faf5ff;               color: #6d28d9; }
.blade-entity-pill--training     { background: #f5f3ff;                color: #5b21b6; }
.blade-entity-pill--activity     { background: var(--color-gray-100);  color: var(--color-navy); }
.blade-entity-pill--subproject   { background: #ecfdf5;                color: #065f46; }
.blade-entity-pill--milestone    { background: var(--color-gray-100);  color: var(--color-gray-600); }
.blade-entity-pill--task         { background: #eef2ff;                color: #3730a3; }

.blade-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-text-sub);
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    font-family: var(--font);
}

.blade-close:hover { color: var(--color-text); background: var(--color-gray-100); }

/* Desktop: show X, hide back arrow */
.blade-close-back { display: none; }
.blade-close-x    { display: inline; }

.blade-body { flex: 1; overflow-y: auto; padding: 24px; }

.blade-footer {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--color-gray-200);
    flex-shrink: 0;
}

.blade-score-row    { display: flex; align-items: center; gap: 8px; }
.blade-score-input  { display: flex; align-items: center; gap: 6px; }
.blade-score-label  { font-size: 12px; font-weight: 600; color: var(--color-text-sub); width: 12px; }
.blade-score-sep    { font-size: 16px; color: var(--color-gray-300); }

/* ── Linked counterpart banner ──────────────────────────────── */
.counterpart-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Break out of blade-body's 24px padding to run full-width,
       then add 20px below to breathe before the tab strip */
    margin: -24px -24px 20px;
    padding: 9px 24px;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    cursor: pointer;
    font-size: 13px;
    flex-wrap: wrap;
}
.counterpart-banner:hover { background: var(--color-gray-100); }
.counterpart-banner__type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-sub);
    flex-shrink: 0;
}
.counterpart-banner__title {
    font-weight: 500;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.counterpart-banner__owner {
    color: var(--color-text-sub);
    font-size: 12px;
    flex-shrink: 0;
}
.counterpart-banner__arrow {
    display: flex;
    align-items: center;
    color: var(--color-text-sub);
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0;   /* hides any stale compiled text content */
    opacity: 0.5;
    transition: opacity 0.15s, transform 0.15s;
}
.counterpart-banner__arrow::before {
    content: "›";
    font-size: 20px;
    line-height: 1;
}
.counterpart-banner:hover .counterpart-banner__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ── Risk disposition picker ────────────────────────────────── */
.risk-disposition-picker {
    margin: 12px 0;
    padding: 12px;
    background: #FEF9C3;
    border: 1px solid #FDE68A;
    border-radius: 6px;
}
.risk-disposition-picker__label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #713F12;
}
.risk-disposition-picker__options { display: flex; flex-direction: column; gap: 4px; }
.risk-disposition-picker__option { font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.risk-disposition-picker__note { margin-top: 8px; }
.risk-disposition-picker__note textarea { width: 100%; font-size: 13px; }

/* ── Risk Matrix ────────────────────────────────────────────── */
.risk-matrix               { display: inline-block; }
.risk-matrix-grid          { display: grid; grid-template-columns: 32px repeat(5, 1fr); grid-template-rows: repeat(5, 1fr) 32px; gap: 3px; }
.risk-matrix-cell          { width: 52px; height: 44px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: white; }
.risk-matrix-cell.empty            { background: transparent; }
.risk-matrix-cell.low              { background: #12B76A; }
.risk-matrix-cell.medium           { background: #DC6803; }
.risk-matrix-cell.high             { background: #F79009; }
.risk-matrix-cell.critical         { background: #D92D20; }
.risk-matrix-cell.low-faded        { background: rgba(18,183,106,0.22); }
.risk-matrix-cell.medium-faded     { background: rgba(220,104,3,0.22); }
.risk-matrix-cell.high-faded       { background: rgba(247,144,9,0.22); }
.risk-matrix-cell.critical-faded   { background: rgba(217,45,32,0.22); }
.risk-matrix-axis-label    { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--color-text-sub); }
.risk-matrix-axis-title    { font-size: 11px; font-weight: 600; color: var(--color-text-sub); text-align: center; margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.risk-matrix-y-title       { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-size: 11px; font-weight: 600; color: var(--color-text-sub); letter-spacing: 0.05em; text-transform: uppercase; margin-right: 4px; }
.risk-matrix-wrapper       { display: flex; align-items: center; gap: 0; }

/* ── Facility Map ────────────────────────────────────────────── */
.facility-map-container    { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.facility-map-svg-wrap     { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius); padding: 16px; }
.facility-map-svg          { width: 100%; height: auto; display: block; }

.zone-polygon              { stroke: var(--color-white); stroke-width: 0.8; opacity: 0.45; transition: opacity 0.15s, filter 0.15s; cursor: pointer; }
.zone-polygon:hover        { opacity: 0.7; filter: brightness(1.1); }
.zone-polygon.zone-parent  { opacity: 0.12; stroke-dasharray: 1.5 1; stroke-width: 0.6; }
.zone-polygon.zone-parent:hover { opacity: 0.25; }
.zone-red                  { fill: #D92D20; }
.zone-amber                { fill: #DC6803; }
.zone-green                { fill: #12B76A; }
.zone-grey                 { fill: #D1D5DB; }

.zone-label                { font-size: 4.5px; font-weight: 700; fill: white; pointer-events: none; font-family: var(--font); paint-order: stroke fill; stroke: rgba(0,0,0,0.5); stroke-width: 0.8px; }
.zone-sublabel             { font-size: 3px; font-weight: 500; fill: rgba(255,255,255,0.95); pointer-events: none; font-family: var(--font); paint-order: stroke fill; stroke: rgba(0,0,0,0.4); stroke-width: 0.6px; }

.facility-map-legend       { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius); padding: 20px; }
.facility-map-legend h3    { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-sub); margin: 0 0 10px; }
.legend-item               { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--color-text-sub); margin-bottom: 8px; line-height: 1.4; }
.legend-swatch             { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; margin-top: 1px; }
.legend-red                { background: #D92D20; }
.legend-amber              { background: #DC6803; }
.legend-green              { background: #12B76A; }
.legend-grey               { background: #D1D5DB; }
.legend-zone-row           { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; border-radius: 4px; transition: color 0.1s; }
.legend-zone-row:hover     { color: var(--color-blue); }
.legend-zone-child         { padding-left: 20px; font-size: 12px; }
.legend-divider            { border: none; border-top: 1px solid var(--color-gray-100); margin: 12px 0; }
.stakeholder-section       { margin-top: 16px; }
.stakeholder-entry         { padding: 10px 0; border-bottom: 1px solid var(--color-gray-100); }
.stakeholder-entry:last-child { border-bottom: none; }
.stakeholder-name          { font-size: 13px; font-weight: 600; color: var(--color-text); }
.stakeholder-type-badge    { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 100px; background: var(--color-gray-100); color: var(--color-text-sub); vertical-align: middle; margin-left: 6px; }
.stakeholder-rel           { font-size: 11px; color: var(--color-text-sub); margin-bottom: 6px; }
.contact-row               { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--color-text-sub); padding: 3px 0; }
.contact-name              { font-weight: 500; color: var(--color-text); min-width: 120px; }
.contact-role-pill         { font-size: 10px; padding: 1px 6px; border-radius: 100px; background: var(--color-blue-light, #EBF5FF); color: var(--color-blue); margin-right: 3px; }
.contact-primary-star      { color: var(--color-amber, #DC6803); font-size: 11px; }

/* ── Facility Map toolbar ────────────────────────────────────────── */
.map-toolbar               { display: flex; align-items: center; gap: 8px; padding: 0 0 10px; }
.map-toolbar-group         { display: flex; align-items: center; gap: 2px; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: 6px; padding: 2px 4px; }
.map-toolbar-btn           { padding: 4px 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--color-gray-200); border-radius: 5px; background: var(--color-white); color: var(--color-text); cursor: pointer; transition: background 0.1s; line-height: 1; }
.map-toolbar-btn:hover:not(:disabled) { background: var(--color-gray-100); }
.map-toolbar-btn:disabled  { opacity: 0.4; cursor: default; }
.map-toolbar-btn-active          { background: var(--color-blue) !important; color: white !important; border-color: var(--color-blue) !important; }
.map-zoom-level            { font-size: 12px; font-weight: 600; color: var(--color-text-sub); min-width: 38px; text-align: center; }
/* ── Pan mode ────────────────────────────────────────────────────── */
.can-pan                   { cursor: grab; }
.can-pan .zone-polygon     { cursor: pointer; }
.panning, .panning *       { cursor: grabbing !important; }
/* ── Draw mode ───────────────────────────────────────────────────── */
.edit-mode-active          { cursor: crosshair !important; }
.edit-mode-active .zone-polygon { cursor: pointer; pointer-events: auto; }
.edit-mode-active .zone-polygon:hover { opacity: 0.65; }
.draw-preview              { fill: rgba(37,99,235,0.15); stroke: #2563EB; stroke-width: 0.8; stroke-dasharray: 3 2; pointer-events: none; }
.drawn-shape-confirm       { fill: rgba(37,99,235,0.25); stroke: #2563EB; stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
/* ── Space picker sidebar ────────────────────────────────────────── */
.space-picker-header       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.space-picker-filter       { width: 100%; padding: 6px 10px; border: 1px solid var(--color-gray-300); border-radius: 6px; font-size: 13px; margin-bottom: 8px; box-sizing: border-box; }
.space-picker-filter:focus { outline: none; border-color: var(--color-blue); }
.space-picker-item         { padding: 7px 6px; border-radius: 5px; font-size: 13px; transition: background 0.1s; }
.space-picker-item.can-assign { cursor: pointer; }
.space-picker-item.can-assign:hover { background: var(--color-gray-50); }
.space-picker-item.no-shape { opacity: 0.45; cursor: default; }
.space-picker-item-code    { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-text-sub); margin-bottom: 1px; }
.space-picker-empty        { font-size: 12px; color: var(--color-text-sub); padding: 8px 0; text-align: center; }
.space-picker-hint         { font-size: 11px; color: var(--color-blue); padding: 5px 0 8px; text-align: center; border-bottom: 1px solid var(--color-gray-100); margin-bottom: 8px; }
.drawn-shape-badge         { display: inline-block; background: var(--color-blue); color: white; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 100px; margin-bottom: 6px; }
.space-picker-discard      { font-size: 12px; color: var(--color-text-sub); text-decoration: underline; cursor: pointer; }

.zone-detail-item          { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--color-gray-100); font-size: 13px; }
.zone-detail-item:last-child { border-bottom: none; }
.zone-detail-title         { flex: 1; color: var(--color-text); }
.zone-score-badge          { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 100px; color: white; flex-shrink: 0; }
.zone-score-low            { background: #12B76A; }
.zone-score-medium         { background: #DC6803; }
.zone-score-high           { background: #F79009; }
.zone-score-critical       { background: #D92D20; }

/* ── Blazor error UI ────────────────────────────────────────── */
#blazor-error-ui {
    background: var(--color-critical);
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0,0,0,0.12);
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: var(--font);
    font-size: 13px;
    color: #7A271A;
}

#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ── Milestone Timeline ──────────────────────────────────────── */
.milestone-timeline         { width: 100%; height: auto; display: block; }
.milestone-marker           { cursor: pointer; transition: opacity 0.15s; }
.milestone-marker:hover     { opacity: 0.75; }
.row-highlighted            { background: rgba(37, 99, 235, 0.08) !important; }

/* ── Access Denied page ──────────────────────────────────────── */
.access-denied {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 24px;
    text-align: center;
    gap: 16px;
}

.access-denied__icon {
    width: 64px;
    height: 64px;
    color: #DC2626;
    opacity: 0.8;
}

.access-denied__icon svg { width: 100%; height: 100%; }

.access-denied__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin: 0;
}

.access-denied__message {
    font-size: 15px;
    color: var(--text-secondary, #6B7280);
    max-width: 380px;
    line-height: 1.6;
    margin: 0;
}

.access-denied__actions {
    margin-top: 8px;
}

/* ============================================================
   Responsive — Mobile ≤768px
   ============================================================ */
@media (max-width: 768px) {

    /* ── Sidebar: slide off-canvas, toggled by .sidebar--open ── */
    .orat-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }
    .orat-sidebar.sidebar--open {
        transform: translateX(0);
    }

    /* ── Sidebar backdrop overlay ─────────────────────────────── */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 299;
    }

    /* ── Hamburger: visible on mobile ────────────────────────── */
    .hamburger-btn {
        display: flex;
    }

    /* ── Header: tighter padding, hide username text ─────────── */
    .orat-header {
        padding: 0 12px;
        gap: 8px;
    }
    .user-name {
        display: none;
    }

    /* ── Content: reduce padding ─────────────────────────────── */
    .orat-content {
        padding: 16px 12px;
    }

    /* ── Page headers: wrap buttons below title ──────────────── */
    .page-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ── Blade: full-width on mobile, back arrow instead of X ── */
    .blade {
        width: 100%;
    }
    .blade-title {
        max-width: calc(100vw - 80px);
    }
    .blade-close-x    { display: none; }
    .blade-close-back { display: inline; font-size: 20px; line-height: 1; }
    .blade-header {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 12px;
    }

    /* ── Dashboard: hero section wraps ───────────────────────── */
    .dash-hero {
        flex-wrap: wrap;
        gap: 10px;
    }
    .dash-filter {
        flex: 1 1 auto;
    }

    /* ── Dashboard: stat cards single column ─────────────────── */
    .dash-stat-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* ── Dashboard: chart grids collapse to single column ─────── */
    .dash-chart-grid {
        grid-template-columns: 1fr;
    }

    /* ── Dashboard: card padding reduction ───────────────────── */
    .dash-card {
        padding: 14px 12px;
    }

    /* ── Radzen DataGrid: horizontal scroll on narrow screens ─── */
    .rz-data-grid-table-container,
    .rz-datatable-scrollable-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Section heading row: wrap action button below heading ── */
    .section-heading-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ── Header actions: wrap buttons on small screens ──────── */
    .header-actions {
        flex-wrap: wrap;
    }

    /* ── Show mobile-only nav items ──────────────────────────── */
    .nav-item--mobile-only {
        display: flex;
    }
}

/* ── Section headings (used in form panels and blade Details tabs) ── */
.section-heading {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-blue);
    border-left: 3px solid var(--color-blue);
    background: rgba(0, 137, 220, 0.04);
    padding: 0.25rem 0.6rem;
    border-radius: 0 4px 4px 0;
    margin-bottom: 0.875rem;
    margin-top: 1.5rem;
}
.section-heading:first-child { margin-top: 0; }

/* ── Assignment chips (shared: IssueList, RiskList, ProcedureDetail) ── */
.assignment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.assignment-add-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.assignment-add-row .form-control,
.assignment-add-row .form-control-sm {
    flex: 1;
    min-width: 0;
}

/* Issue/Risk blade chip style */
.assignment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--color-text);
}
.assignment-chip--group {
    background: #DBEAFE;
    border-color: #BFDBFE;
    color: #1D4ED8;
}
.assignment-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-400);
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
}
.assignment-chip-remove:hover { color: var(--color-red); }

/* Procedure detail chip style */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: var(--color-gray-100);
    border-radius: 4px;
    font-size: 0.85rem;
}
.chip--group { background: #DBEAFE; color: #1D4ED8; }
.chip--light { background: rgba(255, 255, 255, 0.2); color: white; }
.chip--sm { padding: 0.2rem 0.5rem; font-size: 0.78rem; }
.chip--xs { padding: 0.1rem 0.4rem; font-size: 0.72rem; }
.chip--internal { background: #DCFCE7; color: #15803D; font-size: 0.72rem; padding: 0.1rem 0.4rem; }
.chip--contact  { background: #EDE9FE; color: #6D28D9; font-size: 0.72rem; padding: 0.1rem 0.4rem; }
.chip--walk-in  { background: #FEF3C7; color: #92400E; font-size: 0.72rem; padding: 0.1rem 0.4rem; }
.chip__remove {
    cursor: pointer;
    color: var(--color-gray-400);
    margin-left: 0.2rem;
    background: none;
    border: none;
    padding: 0;
}

/* ── Include-disabled toggle (binary visibility filter on list views) ─────────
   Visually paired with .si-fa-chip so users learn one chip language. */
.toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 11px var(--font);
    color: var(--color-text-sub);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 2px 9px;
    line-height: 1.5;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.toggle-pill:hover:not(:disabled) {
    background: var(--color-gray-200);
    color: var(--color-navy);
    border-color: var(--color-gray-300);
}
.toggle-pill:disabled { cursor: default; opacity: .5; }

.toggle-pill__count {
    background: var(--color-gray-200);
    color: var(--color-text-sub);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.toggle-pill--on {
    background: var(--color-navy);
    color: #fff;
    border-color: var(--color-navy);
}
.toggle-pill--on:hover { background: var(--color-navy); }
.toggle-pill--on .toggle-pill__count {
    background: #fff;
    color: var(--color-navy);
}

/* ── Space-type cards (shared — used by SpaceTypes & FunctionalAreas pages) ── */
.space-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.space-type-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.space-type-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.space-type-card__name {
    font-size: 15px;
    font-weight: 600;
}

.space-type-card__description {
    font-size: 13px;
    color: var(--color-text-sub);
}

.space-type-card__fa-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Card delete button ─────────────────────────────────────── */
.btn-icon--delete {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.btn-icon--delete:hover {
    color: #dc2626;
    background: #FEF2F2;
}

/* ── Modal (shared across all dialogs/wizards) ──────────────── */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
}
.modal {
    background: var(--color-white);
    border-radius: 8px;
    width: 480px;
    max-width: 95vw;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 0;
}
.modal-header h2 { margin: 0; font-size: 18px; color: var(--color-navy); }
.modal-body  { padding: 20px 24px; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 0 24px 20px;
}

/* ── Detail page layout ─────────────────────────────────────── */
.detail-page {
    /* full-width — consistent with list pages */
}
.detail-page__header {
    margin-bottom: 1.5rem;
}
.detail-page__header .btn-link {
    font-size: 0.85rem;
    color: var(--color-blue);
    margin-bottom: 0.5rem;
    display: inline-block;
}
.detail-page__title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.detail-page__title-row h1 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}
.detail-page__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Header variant: back link on left, action buttons on right */
.detail-page__header--actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.detail-page__header--actions .btn-link {
    font-size: 0.875rem;
    color: var(--color-blue);
}
.detail-page__header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.detail-page__saved {
    font-size: 0.875rem;
    color: var(--color-green);
    font-weight: 500;
}

/* Stepper wrapper card — shared by Procedures and Trials */
.detail-page__stepper-wrap {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 1rem 1.5rem 0.75rem;
    margin-bottom: 1rem;
}

/* Tab bar — shared by Procedures and Trials */
.detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}
.detail-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.detail-tab--active {
    color: var(--color-blue);
    border-bottom-color: var(--color-blue);
}
.detail-tab-badge {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.75rem;
}

/* Form card — shared white card for tab content sections */
.detail-form-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 1rem;
}
@media (max-width: 768px) {
    .detail-form-card { padding: 1rem; }
}

/* ── Section card ───────────────────────────────────────────── */
.section-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

/* ── Section heading row (heading + action button side by side) ── */
.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.section-heading-row .section-heading {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Details list (dl grid for key/value pairs) ─────────────── */
.details-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}
.details-list dt {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-sub);
    padding-top: 0.1rem;
}
.details-list dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text);
}

/* ── Materials section (link + copy button) ─────────────────── */
.materials-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-100);
    font-size: 0.9rem;
}

/* ── Type badge ─────────────────────────────────────────────── */
.badge--type {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--color-gray-100);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-sub);
    white-space: nowrap;
}

.badge--system {
    font-size: 11px;
    font-weight: 500;
    background: var(--color-blue-50, #eff6ff);
    color: var(--color-blue, #3b82f6);
    border-radius: 6px;
    padding: 2px 8px;
}

/* ── Inline empty state ──────────────────────────────────────── */
.empty-state-inline {
    color: var(--color-text-sub);
    font-size: 0.9rem;
    margin: 0;
}

/* ── Outcome / observation notes ────────────────────────────── */
.outcome-notes {
    font-size: 0.9rem;
    color: var(--color-text-sub);
    white-space: pre-wrap;
    margin: 0.5rem 0 0;
}

/* ── Entity avatar (read-only display) ──────────────────────── */
.entity-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-primary, #2563eb);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.entity-avatar--circle {
    border-radius: 50%;
}

.entity-avatar--rounded {
    border-radius: 20%;
}

.entity-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.entity-avatar__fallback {
    letter-spacing: 0.03em;
}

/* ── Image upload widget ─────────────────────────────────────── */
.image-upload {
    position: relative;
    display: inline-block;
}

.image-upload__preview {
    cursor: pointer;
}

.image-upload__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.15s;
    border-radius: inherit;
}

.image-upload__preview:hover .image-upload__overlay {
    opacity: 1;
}

.image-upload__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s;
}

.image-upload__action:hover {
    background: rgba(255, 255, 255, 0.35);
}

.image-upload__spinner {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.image-upload__error {
    font-size: 12px;
    color: #dc2626;
    margin: 4px 0 0;
    max-width: 140px;
}

/* ── Header actions (detail page section actions) ───────────── */
.header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ── DateSlider ──────────────────────────────────────────────────── */
.date-slider              { padding: 16px 20px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius); margin-bottom: 16px; }
.date-slider-header       { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.date-slider-label        { font-size: 13px; font-weight: 600; color: var(--color-text); }
.date-slider-historical   { color: var(--color-amber); }
.date-slider-projected    { color: var(--color-blue); }
.date-slider-controls     { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.date-slider-date-input   { font-size: 12px; padding: 2px 7px; border: 1px solid var(--color-gray-300); border-radius: var(--radius); background: var(--color-white); color: var(--color-text); width: 138px; }
.date-slider-date-input:focus { outline: none; border-color: var(--color-blue); }
.date-slider-today-btn    { font-size: 12px; padding: 3px 10px; border: 1px solid var(--color-gray-300); border-radius: var(--radius); background: var(--color-white); cursor: pointer; color: var(--color-text); white-space: nowrap; }
.date-slider-today-btn:hover:not(:disabled) { background: var(--color-gray-100); }
.date-slider-today-btn.is-active { background: var(--color-blue); color: white; border-color: var(--color-blue); cursor: default; opacity: 1; }
.date-slider-input        { width: 100%; cursor: pointer; accent-color: var(--color-blue); }
.date-slider-range        { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-sub); margin-top: 4px; }

/* ── Projection Banner ───────────────────────────────────────────── */
.projection-banner        { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 16px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius); font-size: 13px; color: #1e40af; }
.projection-banner-icon   { font-size: 16px; }

/* ── Dependency Graph ──────────────────────────────────────────────── */
.dep-graph-wrap           { margin-top: 8px; border: 1px solid var(--color-gray-200); border-radius: var(--radius); padding: 12px; overflow: hidden; }
.dep-graph-svg            { display: block; }
.dep-graph-svg.can-pan    { cursor: grab; }
.dep-graph-node           { cursor: default; }
.dep-graph-node--clickable { cursor: pointer; }
.dep-graph-node--clickable:hover rect,
.dep-graph-node--clickable:hover circle,
.dep-graph-node--clickable:hover polygon { filter: brightness(1.15); }

/* ================================================
   FileUpload component
   ================================================ */
.file-upload { display: flex; flex-direction: column; gap: 0.5rem; }
.file-upload__zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px dashed var(--color-gray-300); border-radius: 8px; padding: 2rem;
    cursor: pointer; transition: border-color 0.15s; position: relative; text-align: center;
}
.file-upload__zone:hover,
.file-upload--dragging .file-upload__zone { border-color: var(--color-blue); }
.file-upload__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-upload__icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.file-upload__label { font-weight: 500; }
.file-upload__browse { color: var(--color-blue); text-decoration: underline; }
.file-upload__hint { font-size: 0.75rem; color: var(--color-text-sub); }
.file-upload__result {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    background: #f0faf4; border-radius: 6px; font-size: 0.875rem;
}
.file-upload__file-name { flex: 1; color: var(--color-green); font-weight: 500; }
.file-upload__error { font-size: 0.875rem; color: var(--color-red); margin: 0; }
.file-upload__progress { display: flex; align-items: center; font-size: 0.875rem; color: var(--color-text-sub); }

/* ── SpaceTypeSuggestionBlade ────────────────────────────────────── */
.suggestion-blade { display: flex; flex-direction: column; height: 100%; }
.suggestion-blade__loading { display: flex; align-items: center; gap: 0.5rem; padding: 2rem; }
.suggestion-blade__toolbar { padding: 0.75rem 1rem; border-bottom: 1px solid #dee2e6; }
.suggestion-blade__list { flex: 1; overflow-y: auto; }
.suggestion-blade__row { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid #dee2e6; align-items: flex-start; }
.suggestion-blade__row--existing { opacity: 0.65; background: #f8f9fa; }
.suggestion-blade__checkbox { padding-top: 0.125rem; }
.suggestion-blade__info { flex: 1; }
.suggestion-blade__name { font-weight: 500; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.suggestion-blade__desc { font-size: 0.875rem; color: #6c757d; margin-top: 0.25rem; }
.suggestion-blade__rationale { font-size: 0.875rem; color: #6c757d; margin-top: 0.25rem; }
.suggestion-blade__fas { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.25rem; }
.suggestion-blade__footer { padding: 1rem; border-top: 1px solid #dee2e6; }
.badge-pill { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; }
.badge-muted { background: #e9ecef; color: #6c757d; }
.badge-info { background: #d1ecf1; color: #0c5460; }
.badge-new { background: #cfe2ff; color: #084298; }
.suggestion-blade__browse-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.65rem 1rem; background: #f8f9fa; border: none; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; font-size: 0.875rem; font-weight: 500; color: var(--color-text-sub, #6c757d); cursor: pointer; text-align: left; }
.suggestion-blade__browse-toggle:hover { background: #f0f1f3; color: var(--color-text, #212529); }
.suggestion-blade__browse-count { margin-left: auto; font-size: 0.75rem; font-weight: 400; color: #adb5bd; }
.suggestion-blade__browse-chevron { flex-shrink: 0; transition: transform 0.15s ease; }
.suggestion-blade__browse-chevron--open { transform: rotate(180deg); }
.suggestion-blade__category { padding: 0.4rem 1rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #adb5bd; background: #fdfdfd; border-bottom: 1px solid #f0f0f0; }

/* ── Two-phase ConOps processing indicator (inside .suggestion-blade__loading) ── */
.suggestion-blade__loading--phased { flex-direction: column; align-items: flex-start; gap: 0; padding: 1.75rem 1.5rem; }
.conops-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.conops-step { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; transition: color 0.2s ease; }
.conops-step__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: var(--color-gray-300); transition: background 0.2s ease; position: relative; }
.conops-step__label { color: var(--color-gray-500); }
.conops-step--waiting .conops-step__dot { background: var(--color-gray-300); }
.conops-step--waiting .conops-step__label { color: var(--color-gray-400); }
.conops-step--active .conops-step__dot { background: var(--color-blue); animation: conops-pulse 1.5s ease-in-out infinite; }
.conops-step--active .conops-step__label { color: var(--color-text); font-weight: 500; }
.conops-step--done .conops-step__dot { background: var(--color-green); }
.conops-step--done .conops-step__dot::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2.5 5.2L4 6.7L7.5 3.2' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center/10px 10px no-repeat; }
.conops-step--done .conops-step__label { color: var(--color-gray-500); }
.conops-steps__sub { margin: 14px 0 0; font-size: 0.8125rem; color: var(--color-gray-500); min-height: 1.2em; }

@keyframes conops-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.88); }
}

@media (prefers-reduced-motion: reduce) {
    .conops-step--active .conops-step__dot { animation: none; }
}


/* ── Assistant context bar (breadcrumb trail back to Project Assistant) ── */
.assistant-context-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 9px 14px;
    background: linear-gradient(to right, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
    border-radius: 8px;
    border-left: 2.5px solid rgba(37, 99, 235, 0.28);
}

.assistant-context-bar__back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    background: rgba(37, 99, 235, 0.09);
    padding: 4px 11px 4px 8px;
    border-radius: 20px;
    transition: background 0.15s, transform 0.15s;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.assistant-context-bar__back:hover {
    background: rgba(37, 99, 235, 0.16);
    color: #1d4ed8;
    transform: translateX(-2px);
    text-decoration: none;
}

.assistant-context-bar__back svg {
    transition: transform 0.15s;
    flex-shrink: 0;
}

.assistant-context-bar__back:hover svg {
    transform: translateX(-2px);
}

.assistant-context-bar__sep {
    color: var(--color-gray-300);
    font-size: 13px;
    user-select: none;
}

.assistant-context-bar__current {
    font-size: 12px;
    color: var(--color-gray-500);
    font-weight: 500;
}

/* ── PeoplePicker ─────────────────────────────────────────────────────────── */
.people-picker { position: relative; }

.people-picker-input-wrap { position: relative; }

.people-picker-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    pointer-events: none;
    transition: color 0.15s ease;
}

.people-picker-input-wrap:focus-within .people-picker-search-icon {
    color: var(--color-blue);
}

.people-picker-input {
    width: 100%;
    padding: 9px 30px 9px 34px;
    border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font);
    box-sizing: border-box;
    background: var(--color-white);
    color: var(--color-text);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.people-picker-input::placeholder {
    color: var(--color-gray-400);
}

.people-picker-input:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(0, 137, 220, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.people-picker-input.open {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-color: var(--color-blue);
    border-bottom-color: var(--color-gray-200);
    box-shadow: 0 0 0 3px rgba(0, 137, 220, 0.12);
}

@keyframes pp-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.people-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1.5px solid var(--color-blue);
    border-top: 1px solid var(--color-gray-200);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--color-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 200;
    max-height: 280px;
    overflow-y: auto;
    animation: pp-dropdown-in 0.14s ease;
}

.people-picker-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-gray-100);
    position: relative;
    transition: background 0.1s ease;
}

.people-picker-result::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-blue);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.people-picker-result:last-of-type { border-bottom: none; }

.people-picker-result:hover,
.people-picker-result.active {
    background: #f0f7fd;
}

.people-picker-result:hover::before,
.people-picker-result.active::before {
    opacity: 1;
}

.people-picker-result--selected {
    opacity: 0.45;
    pointer-events: none;
}

.people-picker-result-meta { flex: 1; min-width: 0; }

.people-picker-result-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.people-picker-result-sub {
    font-size: 11px;
    color: var(--color-text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.people-picker-type-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.people-picker-type-badge--user    { color: var(--color-blue-dark); background: #dbeeff; }
.people-picker-type-badge--group   { color: #1d4ed8; background: #dbeafe; }
.people-picker-type-badge--contact { color: #065f46; background: #d1fae5; }

.people-picker-footer {
    padding: 7px 14px;
    background: var(--color-gray-50);
    font-size: 11px;
    color: var(--color-gray-400);
    text-align: center;
    border-top: 1px solid var(--color-gray-100);
    letter-spacing: 0.02em;
}

.people-picker-no-results {
    padding: 16px 14px;
    font-size: 13px;
    color: var(--color-text-sub);
    text-align: center;
}

.people-picker-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    cursor: default;
    line-height: 0;
    display: flex;
    align-items: center;
}

.people-picker-hint:hover { color: var(--color-blue); }

.people-picker-hint-tooltip {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    width: 240px;
    background: var(--color-gray-900, #1a1a2e);
    color: #fff;
    font-size: 11.5px;
    line-height: 1.6;
    padding: 9px 12px;
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    white-space: pre-line;
    z-index: 200;
    pointer-events: none;
}

.people-picker-hint-tooltip::before {
    content: '';
    position: absolute;
    right: 4px;
    bottom: -5px;
    border: 5px solid transparent;
    border-top-color: var(--color-gray-900, #1a1a2e);
    border-bottom: none;
}

.people-picker-hint:hover .people-picker-hint-tooltip { display: block; }

/* ── Blade section header (heading + inline action button) ─── */
.blade-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.blade-section-header .section-heading {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Attendee picker row (PeoplePicker + Add button) ─────────── */
.attendee-picker-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.attendee-picker-row .people-picker {
    flex: 1;
    min-width: 0;
}