@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css';

/* /Pages/Live/LiveView.razor.rz.scp.css */
/* ================================================================
   Live View – Scoped Styles
   Layout matches Zoom Levels / Block Outline: surface container
   with inset elevated map pane. All colors reference design tokens.
   ================================================================ */

/* ── Container: main body rounded rectangle ── */
.live-view-container[b-b5y1oms0po] {
    position: fixed;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    background: var(--pg-surface);
    border-radius: var(--radius-xl);
    display: flex;
    gap: 0;
    padding: 6px 6px 6px 0;
    z-index: 0;
}

/* ── Panel (left, directly on surface) ── */
.lv-panel[b-b5y1oms0po] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lv-panel-header[b-b5y1oms0po] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 12px;
    flex-shrink: 0;
}

.lv-panel-header span[b-b5y1oms0po] {
    font-size: 20px;
    font-weight: 600;
    color: var(--pg-text);
    line-height: 1.2;
}

.lv-panel-body[b-b5y1oms0po] {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

/* ── Scrollbar ── */
.lv-panel-body[b-b5y1oms0po]::-webkit-scrollbar,
.lv-list[b-b5y1oms0po]::-webkit-scrollbar {
    width: 4px;
}

.lv-panel-body[b-b5y1oms0po]::-webkit-scrollbar-track,
.lv-list[b-b5y1oms0po]::-webkit-scrollbar-track {
    background: transparent;
}

.lv-panel-body[b-b5y1oms0po]::-webkit-scrollbar-thumb,
.lv-list[b-b5y1oms0po]::-webkit-scrollbar-thumb {
    background: var(--pg-surface-overlay);
    border-radius: 2px;
}

/* ── Sections ── */
.lv-section[b-b5y1oms0po] {
    border-top: 1px solid var(--pg-border);
    padding-top: 4px;
    margin-top: 4px;
}

.lv-section:first-child[b-b5y1oms0po] {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* ── Section toggle ── */
.lv-section-toggle[b-b5y1oms0po] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
    color: inherit;
}

.lv-section-toggle:hover .lv-section-label[b-b5y1oms0po],
.lv-section-toggle:hover .lv-chevron-icon[b-b5y1oms0po] {
    color: var(--pg-text-secondary);
}

.lv-section-toggle:focus-visible[b-b5y1oms0po] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.lv-section-label[b-b5y1oms0po] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

.lv-chevron-icon[b-b5y1oms0po] {
    font-size: 10px;
    color: var(--pg-text-tertiary);
}

.lv-section-content[b-b5y1oms0po] {
    padding: 4px 0 8px;
}

/* ── Workplan Dropdown ── */
.lv-dropdown-wrap[b-b5y1oms0po] {
    position: relative;
}

.lv-dropdown-btn[b-b5y1oms0po] {
    border: 1px solid var(--pg-border);
    padding: 5px 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: var(--pg-text-secondary);
    width: 100%;
}

.lv-dropdown-btn:hover[b-b5y1oms0po] {
    border-color: var(--pg-border-hover);
    color: var(--pg-text);
}

.lv-dropdown-btn:focus-visible[b-b5y1oms0po] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.lv-dropdown-btn span[b-b5y1oms0po] {
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lv-dropdown-btn i[b-b5y1oms0po] {
    font-size: 9px;
    color: var(--pg-text-tertiary);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-out);
}

.lv-dropdown-wrap.open .lv-dropdown-btn i[b-b5y1oms0po] {
    transform: rotate(180deg);
}

.lv-dropdown-menu[b-b5y1oms0po] {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-radius: var(--radius-md);
    background-color: var(--pg-surface);
    border: 1px solid var(--pg-border);
    box-shadow: var(--pg-shadow-hover);
    padding: 6px 0;
    z-index: 1100;
    margin-top: 4px;
    animation: pg-fade-in 0.12s var(--ease-out) both;
    max-height: 300px;
    overflow-y: auto;
}

.lv-dropdown-menu a[b-b5y1oms0po] {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--pg-text);
    text-decoration: none;
    cursor: pointer;
}

.lv-dropdown-menu a:hover[b-b5y1oms0po],
.lv-dropdown-menu a.active[b-b5y1oms0po] {
    background: var(--pg-shimmer-highlight);
}

.lv-wp-name[b-b5y1oms0po] {
    display: block;
    font-weight: 600;
    font-size: 13px;
}

.lv-wp-meta[b-b5y1oms0po] {
    display: block;
    font-size: 11px;
    color: var(--pg-text-secondary);
}

.lv-wp-detail[b-b5y1oms0po] {
    margin-top: 6px;
}

.lv-wp-detail-label[b-b5y1oms0po] {
    font-size: 12px;
    color: var(--pg-text-secondary);
}

/* ── Loading ── */
.lv-loading[b-b5y1oms0po] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--pg-text-secondary);
}

.lv-spinner[b-b5y1oms0po] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.lv-empty[b-b5y1oms0po] {
    font-size: 13px;
    color: var(--pg-text-tertiary);
    padding: 12px 0;
    display: block;
    text-align: center;
}

/* ── Tabs ── */
.lv-tabs[b-b5y1oms0po] {
    display: flex;
    gap: 0;
    margin-bottom: 4px;
}

.lv-tab[b-b5y1oms0po] {
    flex: 1;
    padding: 6px 0;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--duration-fast) var(--ease-out);
}

.lv-tab:hover[b-b5y1oms0po] {
    color: var(--pg-text-secondary);
}

.lv-tab.active[b-b5y1oms0po] {
    color: var(--pg-accent);
    border-bottom-color: var(--pg-accent);
}

.lv-tab:focus-visible[b-b5y1oms0po] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── List ── */
.lv-list[b-b5y1oms0po] {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
}

.lv-list-item[b-b5y1oms0po] {
    padding: 8px 4px;
    border-bottom: 1px solid var(--pg-border);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-out);
}

.lv-list-item:hover[b-b5y1oms0po] {
    background: var(--pg-shimmer-highlight);
}

.lv-list-item.selected[b-b5y1oms0po] {
    background: var(--pg-shimmer-highlight);
    border-left: 3px solid var(--pg-accent);
    padding-left: 5px;
}

.lv-list-item-header[b-b5y1oms0po] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.lv-list-item-name[b-b5y1oms0po] {
    font-weight: 600;
    font-size: 13px;
    color: var(--pg-text);
}

.lv-list-item-meta[b-b5y1oms0po] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 11px;
    color: var(--pg-text-secondary);
    padding-left: 18px;
}

/* ── Progress bar ── */
.lv-progress-wrap[b-b5y1oms0po] {
    padding-left: 18px;
}

.lv-progress-bar[b-b5y1oms0po] {
    height: 4px;
    background: var(--pg-surface-raised);
    border-radius: 2px;
    overflow: hidden;
}

.lv-progress-fill[b-b5y1oms0po] {
    height: 100%;
    background: var(--jungle);
    border-radius: 2px;
    transition: width var(--duration-normal) var(--ease-out);
}

.lv-progress-stats[b-b5y1oms0po] {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 11px;
    color: var(--pg-text-secondary);
}

/* ── Status Dots ── */
.status-dot[b-b5y1oms0po] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-connected[b-b5y1oms0po] {
    background: var(--jungle);
    animation: pg-pulse 2s var(--ease-in-out) infinite;
}

.status-recent[b-b5y1oms0po] {
    background: var(--tangerine);
}

.status-disconnected[b-b5y1oms0po] {
    background: var(--lobster);
}

.status-active[b-b5y1oms0po] {
    background: var(--jungle);
    animation: pg-pulse 2s var(--ease-in-out) infinite;
}

.status-complete[b-b5y1oms0po] {
    background: var(--indigo);
}

.status-approved[b-b5y1oms0po] {
    background: var(--pg-text-tertiary);
}

.status-pending[b-b5y1oms0po] {
    background: var(--pg-border-hover);
}

/* ── Map wrapper (elevated inset pane) ── */
.lv-map-wrapper[b-b5y1oms0po] {
    flex: 1;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--pg-shadow);
}

.live-view-map[b-b5y1oms0po] {
    position: absolute;
    inset: 0;
}

/* ── Detail Panel (floating overlay inside map) ── */
.lv-detail-panel[b-b5y1oms0po] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    left: 12px;
    max-height: 50vh;
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--pg-shadow-hover);
    z-index: 20;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: pg-fade-in 0.2s var(--ease-out) both;
}

/* ── Detail header ── */
.lv-detail-header[b-b5y1oms0po] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--pg-surface-raised);
    min-height: 42px;
    flex-shrink: 0;
    font-size: 13px;
    border-bottom: 1px solid var(--pg-border);
}

.lv-detail-title[b-b5y1oms0po] {
    font-weight: 700;
    font-size: 14px;
    color: var(--pg-accent);
    white-space: nowrap;
}

.lv-detail-meta[b-b5y1oms0po] {
    color: var(--pg-text-secondary);
    font-size: 12px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.lv-detail-actions[b-b5y1oms0po] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.lv-detail-body[b-b5y1oms0po] {
    padding: 4px 12px 10px;
    overflow-y: auto;
    flex: 1;
}

/* ── Icon button ── */
.lv-btn-icon[b-b5y1oms0po] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    padding: 0;
}

.lv-btn-icon:hover[b-b5y1oms0po] {
    background: var(--pg-surface-overlay);
    color: var(--pg-text);
}

.lv-btn-icon:focus-visible[b-b5y1oms0po] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 1px;
}

.lv-btn-icon:active[b-b5y1oms0po] {
    background: var(--pg-shimmer-highlight);
}

/* ── Detail sections ── */
.lv-detail-section[b-b5y1oms0po] {
    padding: 8px 0;
    border-bottom: 1px solid var(--pg-border);
}

.lv-detail-section:last-child[b-b5y1oms0po] {
    border-bottom: none;
}

.lv-detail-row[b-b5y1oms0po] {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.lv-detail-label[b-b5y1oms0po] {
    color: var(--pg-text-secondary);
    font-weight: 500;
    flex-shrink: 0;
    margin-right: 8px;
}

/* ── Detail grid (multi-column) ── */
.lv-detail-grid[b-b5y1oms0po] {
    display: grid;
    gap: 0 16px;
}

.lv-detail-grid-3[b-b5y1oms0po] {
    grid-template-columns: 1fr 1fr 1fr;
}

.lv-detail-grid-4[b-b5y1oms0po] {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.lv-detail-col[b-b5y1oms0po] {
    min-width: 0;
}

.lv-detail-col-header[b-b5y1oms0po] {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--pg-accent);
    padding: 8px 0 4px;
    border-bottom: 2px solid var(--pg-accent);
    margin-bottom: 4px;
}

/* ── Stat rows ── */
.lv-stat-row[b-b5y1oms0po] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 12px;
}

.lv-stat-row.expandable[b-b5y1oms0po] {
    cursor: pointer;
}

.lv-stat-row.expandable:hover[b-b5y1oms0po] {
    background: var(--pg-shimmer-highlight);
    border-radius: var(--radius-sm);
}

.lv-stat-label[b-b5y1oms0po] {
    color: var(--pg-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.lv-stat-value[b-b5y1oms0po] {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.lv-expand-icon[b-b5y1oms0po] {
    font-size: 10px;
    color: var(--pg-text-tertiary);
}

.lv-expand-content[b-b5y1oms0po] {
    padding: 2px 0 4px 12px;
    border-left: 2px solid var(--pg-border);
    margin-left: 4px;
    margin-bottom: 2px;
    font-size: 11px;
}

.lv-expand-row[b-b5y1oms0po] {
    display: flex;
    justify-content: space-between;
    padding: 1px 0;
    color: var(--pg-text-secondary);
}

.lv-expand-label[b-b5y1oms0po] {
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 6px;
}

/* ── Non-Compliance Warning ── */
.lv-nc-warning[b-b5y1oms0po] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 6px 0;
    background: rgba(255, 114, 53, 0.12);
    border: 1px solid rgba(255, 114, 53, 0.4);
    border-radius: var(--radius-md);
    color: var(--tangerine);
    font-weight: 600;
    font-size: 13px;
}

.lv-nc-warning i[b-b5y1oms0po] {
    color: var(--tangerine);
    font-size: 16px;
}

.lv-nc-text[b-b5y1oms0po] {
    color: var(--tangerine);
    font-weight: 600;
}

.lv-nc-icon[b-b5y1oms0po] {
    color: var(--tangerine);
    margin-right: 4px;
}

/* ── Approval ── */
.lv-approval[b-b5y1oms0po] {
    padding: 8px 0;
}

.lv-approval-title[b-b5y1oms0po] {
    font-weight: 600;
    font-size: 14px;
    color: var(--pg-accent);
    margin-bottom: 8px;
}

.lv-approval-actions[b-b5y1oms0po] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
}

.lv-btn-secondary[b-b5y1oms0po] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--pg-text-secondary);
    background: transparent;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.lv-btn-secondary:hover[b-b5y1oms0po] {
    border-color: var(--pg-border-hover);
    color: var(--pg-text);
}

.lv-btn-secondary:focus-visible[b-b5y1oms0po] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.lv-btn-primary[b-b5y1oms0po] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--pg-accent-text);
    background: var(--pg-accent);
    border: 1px solid var(--pg-accent);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.lv-btn-primary:hover[b-b5y1oms0po] {
    opacity: 0.9;
}

.lv-btn-primary:focus-visible[b-b5y1oms0po] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}
/* /Pages/Manage/Features/FeatureMap.razor.rz.scp.css */
/* ── Feature Map Layout (full-bleed behind everything) ── */
.feature-map-container[b-he45e6dd01] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.feature-map[b-he45e6dd01] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* ── Sidebar (floating card) ── */
.feature-sidebar[b-he45e6dd01] {
    position: absolute;
    top: 16px;
    left: calc(275px + 16px);
    bottom: 16px;
    width: 380px;
    background: rgba(245, 240, 244, 0.90);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
}

/* ── Sidebar Header ── */
.sidebar-header[b-he45e6dd01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-height: 52px;
}

.sidebar-header-title[b-he45e6dd01] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 16px;
    color: var(--bs-primary, #924E8C);
}

.sidebar-header-title .btn-link[b-he45e6dd01] {
    color: var(--bs-primary, #924E8C);
    font-size: 18px;
    padding: 0;
    text-decoration: none;
}

.sidebar-header-actions[b-he45e6dd01] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Sidebar Content (scrollable) ── */
.sidebar-content[b-he45e6dd01] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ── Type Picker ── */
.type-picker-content[b-he45e6dd01] {
    max-height: 400px;
    overflow-y: auto;
}

.type-category-header[b-he45e6dd01] {
    padding: 8px 20px 4px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-primary, #924E8C);
    background: rgba(255, 255, 255, 0.4);
}

.type-item[b-he45e6dd01] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.type-item:hover[b-he45e6dd01] {
    background: rgba(255, 255, 255, 0.7);
}

.type-item-name[b-he45e6dd01] {
    font-weight: 500;
    color: #222;
}

/* ── Feature Form ── */
.feature-form[b-he45e6dd01] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.feature-form-header[b-he45e6dd01] {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-primary, #924E8C);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.feature-form-hint[b-he45e6dd01] {
    padding: 12px 20px;
    font-size: 13px;
    color: #555;
    background: rgba(255, 193, 7, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-form-fields[b-he45e6dd01] {
    padding: 12px 20px;
}

.feature-form-fields .form-label[b-he45e6dd01] {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 2px;
}

.feature-form-actions[b-he45e6dd01] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ── Feature Details ── */
.feature-detail-row[b-he45e6dd01] {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
}

.feature-detail-label[b-he45e6dd01] {
    color: #444;
    font-weight: 500;
}

.feature-detail-value[b-he45e6dd01] {
    color: #222;
    font-weight: 600;
    text-align: right;
}

/* ── Feature List ── */
.features-section-header[b-he45e6dd01] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-primary, #924E8C);
}

.feature-category-label[b-he45e6dd01] {
    padding: 6px 20px 2px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    background: rgba(0, 0, 0, 0.02);
}

.feature-item[b-he45e6dd01] {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
}

.feature-item:hover[b-he45e6dd01] {
    background: rgba(255, 255, 255, 0.7);
}

.feature-item.selected[b-he45e6dd01] {
    background: rgba(255, 255, 255, 0.7);
    border-left: 3px solid var(--bs-primary, #924E8C);
}

.feature-item-header[b-he45e6dd01] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.feature-item-name[b-he45e6dd01] {
    font-weight: 700;
    font-size: 15px;
    color: #222;
}

.feature-item-stats[b-he45e6dd01] {
    display: flex;
    gap: 12px;
    color: #555;
    font-size: 13px;
}

/* ── Nav drawer collapse ── */
[b-he45e6dd01] .main.toggle-sec-nav .feature-sidebar,
:global(.main.toggle-sec-nav) .feature-sidebar[b-he45e6dd01] {
    left: calc(40px + 16px);
}
/* /Pages/Manage/Paddocks/PaddockMap.razor.rz.scp.css */
/* ── Paddock Map Layout (full-bleed behind everything) ── */
.paddock-map-container[b-zrq1maldor] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

/* ── Map (full background) ── */
.paddock-map[b-zrq1maldor] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* ── Sidebar (floating card) ── */
.paddock-sidebar[b-zrq1maldor] {
    position: absolute;
    top: 16px;
    left: 16px;
    bottom: 16px;
    width: 380px;
    background: rgba(245, 240, 244, 0.90);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
}

/* ── Sidebar Header ── */
.sidebar-header[b-zrq1maldor] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-height: 52px;
}

.sidebar-header-title[b-zrq1maldor] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 16px;
    color: var(--bs-primary, #924E8C);
}

.sidebar-header-title .btn-link[b-zrq1maldor] {
    color: var(--bs-primary, #924E8C);
    font-size: 18px;
    padding: 0;
    text-decoration: none;
}

.sidebar-header-actions[b-zrq1maldor] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Sidebar Content (scrollable) ── */
.sidebar-content[b-zrq1maldor] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ── Paddock Form (drawing/editing) ── */
.paddock-form[b-zrq1maldor] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.paddock-form-header[b-zrq1maldor] {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-primary, #924E8C);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.paddock-form-hint[b-zrq1maldor] {
    padding: 12px 20px;
    font-size: 13px;
    color: #555;
    background: rgba(255, 193, 7, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.paddock-form-fields[b-zrq1maldor] {
    padding: 12px 20px;
}

.paddock-form-fields .form-label[b-zrq1maldor] {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 2px;
}

.paddock-form-actions[b-zrq1maldor] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ── Paddock Details ── */
.paddock-detail-row[b-zrq1maldor] {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
}

.paddock-detail-label[b-zrq1maldor] {
    color: #444;
    font-weight: 500;
}

.paddock-detail-value[b-zrq1maldor] {
    color: #222;
    font-weight: 600;
    text-align: right;
}

/* ── Paddocks List Section ── */
.paddocks-section-header[b-zrq1maldor] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-primary, #924E8C);
}

/* ── Paddock List Items ── */
.paddock-item[b-zrq1maldor] {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
}

.paddock-item:hover[b-zrq1maldor] {
    background: rgba(255, 255, 255, 0.7);
}

.paddock-item.selected[b-zrq1maldor] {
    background: rgba(255, 255, 255, 0.7);
    border-left: 3px solid var(--bs-primary, #924E8C);
}

.paddock-item-header[b-zrq1maldor] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.paddock-item-name[b-zrq1maldor] {
    font-weight: 700;
    font-size: 15px;
    color: #222;
}

.paddock-item-stats[b-zrq1maldor] {
    display: flex;
    gap: 12px;
    color: #555;
    font-size: 13px;
}

/* Nav collapse no longer needed — content is independent of nav */
/* /Pages/Manage/Vineyards/VineyardMap.razor.rz.scp.css */
/* ── Vineyard Map Layout (full-bleed behind everything) ── */
.vineyard-map-container[b-dgo105wy9u] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

.vineyard-map[b-dgo105wy9u] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* ── Sidebar (floating card) ── */
.vineyard-sidebar[b-dgo105wy9u] {
    position: absolute;
    top: 16px;
    left: calc(275px + 16px);
    bottom: 16px;
    width: 380px;
    background: rgba(245, 240, 244, 0.90);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
}

/* ── Sidebar Header ── */
.sidebar-header[b-dgo105wy9u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-height: 52px;
}

.sidebar-header-title[b-dgo105wy9u] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 16px;
    color: var(--bs-primary, #924E8C);
}

.sidebar-header-actions[b-dgo105wy9u] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Sidebar Content (scrollable) ── */
.sidebar-content[b-dgo105wy9u] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ── Vineyard Selector ── */
.vineyard-selector[b-dgo105wy9u] {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.4);
}

.vineyard-selector .form-select[b-dgo105wy9u] {
    font-weight: 600;
    color: #222;
}

/* ── Section Headers (collapsible) ── */
.section-header[b-dgo105wy9u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-primary, #924E8C);
    cursor: pointer;
    user-select: none;
}

.section-header:hover[b-dgo105wy9u] {
    background: rgba(255, 255, 255, 0.8);
}

.features-section-toggle[b-dgo105wy9u] {
    cursor: default;
}

/* ── Block Items ── */
.block-item[b-dgo105wy9u] {
    padding: 8px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
}

.block-item:hover[b-dgo105wy9u] {
    background: rgba(255, 255, 255, 0.7);
}

.block-item.selected[b-dgo105wy9u] {
    background: rgba(255, 255, 255, 0.7);
    border-left: 3px solid var(--bs-primary, #924E8C);
}

.block-item-header[b-dgo105wy9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.block-item-name[b-dgo105wy9u] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #222;
}

.block-color-dot[b-dgo105wy9u] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.block-item-stats[b-dgo105wy9u] {
    display: flex;
    gap: 10px;
    color: #555;
    font-size: 12px;
}

/* ── Block Detail (expanded) ── */
.block-detail[b-dgo105wy9u] {
    padding: 8px 20px 12px;
    background: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.block-detail-row[b-dgo105wy9u] {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 13px;
}

.block-detail-label[b-dgo105wy9u] {
    color: #666;
    font-weight: 500;
}

.block-detail-value[b-dgo105wy9u] {
    color: #222;
    font-weight: 600;
    text-align: right;
}

.block-detail-actions[b-dgo105wy9u] {
    margin-top: 8px;
}

/* ── Type Picker ── */
.type-picker-content[b-dgo105wy9u] {
    max-height: 400px;
    overflow-y: auto;
}

.type-category-header[b-dgo105wy9u] {
    padding: 8px 20px 4px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-primary, #924E8C);
    background: rgba(255, 255, 255, 0.4);
}

.type-item[b-dgo105wy9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.type-item:hover[b-dgo105wy9u] {
    background: rgba(255, 255, 255, 0.7);
}

.type-item-name[b-dgo105wy9u] {
    font-weight: 500;
    color: #222;
}

/* ── Feature Form ── */
.feature-form[b-dgo105wy9u] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.feature-form-header[b-dgo105wy9u] {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-primary, #924E8C);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.feature-form-hint[b-dgo105wy9u] {
    padding: 12px 20px;
    font-size: 13px;
    color: #555;
    background: rgba(255, 193, 7, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-form-fields[b-dgo105wy9u] {
    padding: 12px 20px;
}

.feature-form-fields .form-label[b-dgo105wy9u] {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 2px;
}

.feature-form-actions[b-dgo105wy9u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ── Feature Details ── */
.feature-detail-row[b-dgo105wy9u] {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
}

.feature-detail-label[b-dgo105wy9u] {
    color: #444;
    font-weight: 500;
}

.feature-detail-value[b-dgo105wy9u] {
    color: #222;
    font-weight: 600;
    text-align: right;
}

/* ── Feature List ── */
.feature-category-label[b-dgo105wy9u] {
    padding: 6px 20px 2px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    background: rgba(0, 0, 0, 0.02);
}

.feature-item[b-dgo105wy9u] {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
}

.feature-item:hover[b-dgo105wy9u] {
    background: rgba(255, 255, 255, 0.7);
}

.feature-item.selected[b-dgo105wy9u] {
    background: rgba(255, 255, 255, 0.7);
    border-left: 3px solid var(--bs-primary, #924E8C);
}

.feature-item-header[b-dgo105wy9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.feature-item-name[b-dgo105wy9u] {
    font-weight: 700;
    font-size: 15px;
    color: #222;
}

.feature-item-stats[b-dgo105wy9u] {
    display: flex;
    gap: 12px;
    color: #555;
    font-size: 13px;
}

/* ── Nav drawer collapse ── */
[b-dgo105wy9u] .main.toggle-sec-nav .vineyard-sidebar,
:global(.main.toggle-sec-nav) .vineyard-sidebar[b-dgo105wy9u] {
    left: calc(40px + 16px);
}
/* /Pages/Maps/BlockSheetDialog.razor.rz.scp.css */
/* ── Backdrop + dialog shell ── */
.block-sheet-backdrop[b-s2nixs2i20] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: block-sheet-fade-in-b-s2nixs2i20 var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

.block-sheet-dialog[b-s2nixs2i20] {
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-xl);
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: block-sheet-rise-b-s2nixs2i20 var(--duration-slow) cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes block-sheet-fade-in-b-s2nixs2i20 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes block-sheet-rise-b-s2nixs2i20 {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.block-sheet-header[b-s2nixs2i20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pg-border);
    flex-shrink: 0;
}

.block-sheet-title[b-s2nixs2i20] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--pg-text);
}

.block-sheet-title > i[b-s2nixs2i20] {
    color: var(--pg-accent);
    font-size: 14px;
}

.block-sheet-subtitle[b-s2nixs2i20] {
    font-size: 14px;
    font-weight: 400;
    color: var(--pg-text-secondary);
}

.block-sheet-close[b-s2nixs2i20] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--pg-text-tertiary);
    cursor: pointer;
    font-size: 13px;
    transition: color var(--duration-fast), background var(--duration-fast),
                transform var(--duration-fast);
}

.block-sheet-close:hover[b-s2nixs2i20] { background: var(--pg-surface-overlay); color: var(--pg-text); }
.block-sheet-close:focus-visible[b-s2nixs2i20] { outline: 2px solid var(--pg-accent); outline-offset: -2px; }
.block-sheet-close:active[b-s2nixs2i20] { transform: scale(0.95); }

/* ── Body ── */
.block-sheet-body[b-s2nixs2i20] {
    padding: 16px 20px;
    overflow: auto;
    flex: 1 1 auto;
}

.block-sheet-loading[b-s2nixs2i20],
.block-sheet-empty[b-s2nixs2i20] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--pg-text-secondary);
    font-size: 13px;
}

.block-sheet-error[b-s2nixs2i20] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(231, 76, 60, 0.08);
    color: #C44545;
    font-size: 13px;
    line-height: 1.4;
}

.block-sheet-error > i[b-s2nixs2i20] { flex-shrink: 0; margin-top: 2px; }

/* ── Banner (spacing context above the table) ── */
.block-sheet-banner[b-s2nixs2i20] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    line-height: 1.5;
}

.block-sheet-banner > i[b-s2nixs2i20] { flex-shrink: 0; margin-top: 2px; }

.block-sheet-banner-warn[b-s2nixs2i20] {
    background: var(--pg-accent-tint-soft);
    color: var(--pg-text-secondary);
    border: 1px solid var(--pg-accent-border);
}

.block-sheet-banner-warn > i[b-s2nixs2i20] { color: var(--pg-accent); }

.block-sheet-banner-muted[b-s2nixs2i20] {
    background: var(--pg-surface-raised);
    color: var(--pg-text-secondary);
}

.block-sheet-banner-muted strong[b-s2nixs2i20] {
    color: var(--pg-text);
    font-weight: 600;
}

/* ── Table ── */
.block-sheet-table-wrapper[b-s2nixs2i20] {
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.block-sheet-table[b-s2nixs2i20] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.block-sheet-table thead[b-s2nixs2i20] {
    background: var(--pg-surface-raised);
    position: sticky;
    top: 0;
    z-index: 1;
}

.block-sheet-table th[b-s2nixs2i20] {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
    text-align: left;
    border-bottom: 1px solid var(--pg-border);
}

.block-sheet-table td[b-s2nixs2i20] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--pg-border);
    color: var(--pg-text);
    vertical-align: middle;
}

.block-sheet-table tbody tr:last-child td[b-s2nixs2i20] { border-bottom: none; }

.block-sheet-table tbody tr.has-override td[b-s2nixs2i20] {
    background: var(--pg-accent-tint-whisper);
}

.block-sheet-table tbody tr.has-error td[b-s2nixs2i20] {
    background: rgba(231, 76, 60, 0.06);
    border-bottom-color: rgba(231, 76, 60, 0.18);
}

.block-sheet-col-row[b-s2nixs2i20] {
    width: 56px;
    color: var(--pg-text-secondary);
    font-variant-numeric: tabular-nums;
}

.block-sheet-col-num[b-s2nixs2i20] {
    width: 110px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.block-sheet-col-input[b-s2nixs2i20] {
    width: 130px;
}

.block-sheet-col-reset[b-s2nixs2i20] {
    width: 36px;
    text-align: right;
}

.block-sheet-est[b-s2nixs2i20] { color: var(--pg-text-secondary); }
.block-sheet-plants[b-s2nixs2i20] { font-weight: 600; }

.block-sheet-input[b-s2nixs2i20] {
    width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.block-sheet-row-reset[b-s2nixs2i20] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--pg-text-tertiary);
    cursor: pointer;
    font-size: 12px;
    transition: color var(--duration-fast), background var(--duration-fast),
                transform var(--duration-fast);
}

.block-sheet-row-reset:hover[b-s2nixs2i20] { background: var(--pg-surface-overlay); color: var(--pg-text); }
.block-sheet-row-reset:focus-visible[b-s2nixs2i20] { outline: 2px solid var(--pg-accent); outline-offset: 1px; }
.block-sheet-row-reset:active[b-s2nixs2i20] { transform: scale(0.92); }

.block-sheet-row-error td[b-s2nixs2i20] {
    padding: 4px 12px 8px;
    color: #C44545;
    font-size: 11px;
    border-bottom: none;
    background: rgba(231, 76, 60, 0.06);
}

/* ── Footer ── */
.block-sheet-footer[b-s2nixs2i20] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--pg-border);
    background: var(--pg-surface);
    flex-shrink: 0;
}

.block-sheet-footer-info[b-s2nixs2i20] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
}

.block-sheet-footer-actions[b-s2nixs2i20] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.block-sheet-save-error[b-s2nixs2i20] {
    color: #C44545;
    font-size: 12px;
    margin-right: 4px;
}
/* /Pages/Maps/DrawingForm.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────
   Drawing / Edit form styles.

   Blazor CSS isolation means Maps.razor.css's rules only match
   elements rendered by Maps.razor — they don't pierce into this
   component. Classes that DrawingForm also uses are duplicated here
   (not a pure copy-paste — the shared ones live in both files on
   purpose so each scope has what it needs).
   ──────────────────────────────────────────────────────────────── */

/* ── Shared (also defined on the Maps side) ── */

.maps-type-category-dot[b-3xrt16wt72] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--maps-dot-color);
}

.maps-geometry-badge[b-3xrt16wt72] {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

.maps-geo-point[b-3xrt16wt72] { color: #4a9eff; background: rgba(74, 158, 255, 0.12); }
.maps-geo-line[b-3xrt16wt72]  { color: #ff9f43; background: rgba(255, 159, 67, 0.12); }
.maps-geo-area[b-3xrt16wt72]  { color: #26de81; background: rgba(38, 222, 129, 0.12); }

/* ── Form shell ── */

.maps-drawing-form[b-3xrt16wt72] { padding-top: 8px; }

.maps-drawing-type-badge[b-3xrt16wt72] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--pg-text);
}

.maps-drawing-hint[b-3xrt16wt72] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--pg-accent);
    font-weight: 500;
    background: var(--pg-accent-tint-soft);
    border: 1px solid var(--pg-accent-border);
    border-radius: var(--radius-sm);
}

.maps-drawing-hint i[b-3xrt16wt72] {
    font-size: 13px;
    margin-top: 1px;
    flex-shrink: 0;
}

.maps-drawing-hint-edit[b-3xrt16wt72] {
    color: var(--pg-text-secondary);
    background: var(--pg-surface-raised);
    border-color: var(--pg-border);
}

.maps-form-optional-note[b-3xrt16wt72] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--pg-text-tertiary);
    font-style: italic;
}

/* ── Redraw button (edit-mode only) ── */

.maps-redraw-btn[b-3xrt16wt72] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--pg-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.maps-redraw-btn:hover[b-3xrt16wt72] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
    background: var(--pg-accent-tint-whisper);
}

.maps-redraw-btn:focus-visible[b-3xrt16wt72] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

/* ── Form fields ── */

.maps-form-field[b-3xrt16wt72] {
    margin-top: 10px;
}

.maps-form-field > label[b-3xrt16wt72] {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--pg-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.maps-form-field-inline[b-3xrt16wt72] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.maps-form-field-inline > label:not(.maps-switch)[b-3xrt16wt72] {
    /* Match the other field labels exactly: 11px uppercase tertiary.
       Keep on one line so label + toggle sit cleanly in the row.
       :not(.maps-switch) because the toggle itself is also a <label>
       direct-child and must NOT get flex:1 — it has its own fixed width. */
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maps-input[b-3xrt16wt72] {
    width: 100%;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: var(--pg-surface);
    color: var(--pg-text);
    outline: none;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    box-sizing: border-box;
}

.maps-input:hover:not(:focus)[b-3xrt16wt72] { border-color: var(--pg-border-hover); }

.maps-input:focus[b-3xrt16wt72] {
    border-color: var(--pg-accent);
    box-shadow: 0 0 0 3px var(--pg-accent-focus-ring);
}

.maps-textarea[b-3xrt16wt72] { resize: vertical; min-height: 44px; }

.maps-form-divider[b-3xrt16wt72] {
    margin-top: 14px;
    padding-top: 2px;
    border-top: 1px solid var(--pg-border);
}

.maps-unit-hint[b-3xrt16wt72] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pg-text-tertiary);
}

/* ── Toggle switch (for boolean attributes) ──
   Track:  22 × 14
   Knob:   10 × 10 (1px inset on all sides)
   Travel: 22 − 10 − 2 = 10px  ← knob lands flush at the far edge when on
*/
.maps-switch[b-3xrt16wt72] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 22px;
    height: 14px;
    cursor: pointer;
}

.maps-switch input[b-3xrt16wt72] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.maps-switch-track[b-3xrt16wt72] {
    position: absolute;
    inset: 0;
    background: var(--pg-surface-overlay);
    border: 1px solid var(--pg-border);
    border-radius: 8px;
    transition: background var(--duration-fast), border-color var(--duration-fast);
    box-sizing: border-box;
}

.maps-switch-track[b-3xrt16wt72]::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
    background: var(--pg-accent-text);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.maps-switch input:checked ~ .maps-switch-track[b-3xrt16wt72] {
    background: var(--pg-accent);
    border-color: var(--pg-accent);
}

.maps-switch input:checked ~ .maps-switch-track[b-3xrt16wt72]::before {
    transform: translateX(10px);
}

.maps-switch input:focus-visible ~ .maps-switch-track[b-3xrt16wt72] {
    box-shadow: 0 0 0 3px var(--pg-accent-focus-ring-strong);
}

/* ── Action buttons (Cancel / Save) ── */

.maps-form-actions[b-3xrt16wt72] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--pg-border);
    justify-content: flex-end;
}

.maps-cancel-btn[b-3xrt16wt72],
.maps-save-btn[b-3xrt16wt72] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--duration-fast), border-color var(--duration-fast),
                color var(--duration-fast), background var(--duration-fast), opacity var(--duration-fast);
}

.maps-cancel-btn:active[b-3xrt16wt72],
.maps-save-btn:active[b-3xrt16wt72] { transform: scale(0.97); }

.maps-cancel-btn:focus-visible[b-3xrt16wt72],
.maps-save-btn:focus-visible[b-3xrt16wt72] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.maps-cancel-btn[b-3xrt16wt72] {
    background: none;
    border: 1px solid var(--pg-border);
    color: var(--pg-text-secondary);
}

.maps-cancel-btn:hover[b-3xrt16wt72] { border-color: var(--pg-border-hover); color: var(--pg-text); }

.maps-save-btn[b-3xrt16wt72] {
    background: var(--pg-accent);
    border: 1px solid var(--pg-accent);
    color: var(--pg-accent-text);
    min-width: 74px;
}

.maps-save-btn:hover:not(:disabled)[b-3xrt16wt72] { opacity: 0.9; }
.maps-save-btn:disabled[b-3xrt16wt72] { opacity: 0.4; cursor: not-allowed; }

/* ── Inline spinner for the Save button ── */

.maps-spinner-sm[b-3xrt16wt72] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--pg-accent-text);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
}
/* /Pages/Maps/Maps.razor.rz.scp.css */
/* ================================================================
   Maps Page – Scoped Styles
   Surface header spans full width. Panel + map sit below it.
   All colors reference design tokens.
   ================================================================ */

/* ── Container (column layout: header on top, content below) ── */
.maps-container[b-fq8ditogdg] {
    position: fixed;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    background: var(--pg-surface);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    z-index: 0;
    outline: none;
}

/* ── Surface Header (full width, same surface color) ── */
.maps-surface-header[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--pg-border);
    flex-shrink: 0;
    min-height: 40px;
}

.maps-header-title[b-fq8ditogdg] {
    font-size: 14px;
    font-weight: 600;
    color: var(--pg-text);
}

.maps-header-actions[b-fq8ditogdg] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* View selector in the page header (Blocks / Fields / Features).
   Sits right after the breadcrumb, visually acts as a continuation. */
.maps-view-switcher[b-fq8ditogdg] {
    margin-left: 12px;
}

.maps-view-switcher .maps-style-pill[b-fq8ditogdg] {
    padding: 4px 12px;
}

.maps-style-switcher[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    padding: 2px;
    gap: 2px;
}

.maps-style-pill[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--pg-text-tertiary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}

.maps-style-pill:hover[b-fq8ditogdg] {
    color: var(--pg-text-secondary);
    background: var(--pg-surface-raised);
}

.maps-style-pill.active[b-fq8ditogdg] {
    color: var(--pg-text);
    background: var(--pg-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.maps-style-pill i[b-fq8ditogdg] {
    font-size: 12px;
}

/* ── Breadcrumb ── */
.maps-breadcrumb[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 1.3;
    padding: 2px 0;
    min-width: 0;
}

.maps-breadcrumb-btn[b-fq8ditogdg] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    padding: 0;
    color: var(--pg-text-secondary);
    font-weight: 500;
    transition: color var(--duration-fast) var(--ease-out);
}

.maps-breadcrumb-btn:hover[b-fq8ditogdg] {
    color: var(--pg-accent);
}

.maps-breadcrumb-btn:focus-visible[b-fq8ditogdg] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.maps-breadcrumb-sep[b-fq8ditogdg] {
    color: var(--pg-text-tertiary);
    margin: 0 6px;
    font-weight: 400;
    flex-shrink: 0;
}

.maps-breadcrumb-current[b-fq8ditogdg] {
    color: var(--pg-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Content area (panel + map, fills remaining space) ── */
.maps-content[b-fq8ditogdg] {
    flex: 1;
    display: flex;
    gap: 0;
    padding: 6px 6px 6px 0;
    min-height: 0;
}

/* ── Panel (left) ──
   The outer panel reserves its right-hand padding so the scrollbar (which
   sits on the right edge of .maps-panel-body) is visually inset from the
   panel boundary — no more scrollbar hugging the edge. */
.maps-panel[b-fq8ditogdg] {
    width: 272px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-right: 6px;
    box-sizing: border-box;
}

.maps-panel-body[b-fq8ditogdg] {
    flex: 1;
    overflow-y: auto;
    padding: 0 4px 12px 12px;
    scrollbar-gutter: stable;
}

.maps-panel-body[b-fq8ditogdg]::-webkit-scrollbar {
    width: 10px;
}

.maps-panel-body[b-fq8ditogdg]::-webkit-scrollbar-track {
    background: transparent;
}

.maps-panel-body[b-fq8ditogdg]::-webkit-scrollbar-thumb {
    background: var(--pg-surface-overlay);
    border-radius: 5px;
    /* 3px transparent padding-border so the thumb sits centred in the 10px track. */
    border: 3px solid transparent;
    background-clip: padding-box;
}

.maps-panel-body[b-fq8ditogdg]::-webkit-scrollbar-thumb:hover {
    background: var(--pg-border-hover);
    background-clip: padding-box;
}

/* ── Section label ── */
.maps-section-label[b-fq8ditogdg] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
    padding: 8px 0 4px;
}

/* ── Loading / Empty ── */
.maps-loading[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--pg-text-secondary);
}

/* Variant for lists that sit below other header content (fields list,
   feature list) so the spinner doesn't crowd the row above it. */
.maps-loading.maps-loading-indented[b-fq8ditogdg] { padding-top: 12px; }

/* Loading-header variant that takes the place of .maps-section-label
   ("VINEYARDS") while either the initial vineyard fetch or the per-vineyard
   stats fetch is in flight. Same visual weight as the section label so the
   header position swaps cleanly between loading and loaded states. */
.maps-loading-header[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

.maps-loading-header .maps-spinner[b-fq8ditogdg] {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}

/* Page-scoped error alert tweaks: tighter gap + smaller text than the
   default .pg-alert when rendered inside the maps sidebar. */
.maps-error-alert[b-fq8ditogdg] {
    margin-bottom: 8px;
    font-size: 12px;
}

.maps-spinner[b-fq8ditogdg] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.maps-empty[b-fq8ditogdg] {
    font-size: 13px;
    color: var(--pg-text-tertiary);
    padding: 12px 0;
    display: block;
    text-align: center;
}

/* ── Landing Page Cards ── */
.maps-landing-cards[b-fq8ditogdg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
}

.maps-landing-card[b-fq8ditogdg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all var(--duration-fast) var(--ease-out);
}

.maps-landing-card:hover[b-fq8ditogdg] {
    border-color: var(--pg-accent);
    background: var(--pg-accent-tint-whisper);
}

.maps-landing-card:active[b-fq8ditogdg] {
    transform: scale(0.98);
}

.maps-landing-card-header[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-text);
}

.maps-landing-card-header i[b-fq8ditogdg] {
    font-size: 15px;
    color: var(--pg-text-secondary);
}

.maps-landing-card-count[b-fq8ditogdg] {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--pg-accent);
}

.maps-landing-card-meta[b-fq8ditogdg] {
    font-size: 11px;
    color: var(--pg-text-secondary);
    padding-left: 23px;
}

/* ── Vineyard List ── */
.maps-vineyard-list[b-fq8ditogdg] {
    display: flex;
    flex-direction: column;
}

.maps-vineyard-item[b-fq8ditogdg] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 8px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--pg-border);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-out);
}

/* Shared hover/.hovered bg for all sidebar list-item classes. `.hovered`
   is set from C# when the map pushes a hover event back to the sidebar;
   `:hover` is the regular mouse-over state — they should look identical. */
.maps-vineyard-item:hover[b-fq8ditogdg],
.maps-vineyard-item.hovered[b-fq8ditogdg],
.maps-feature-item:hover[b-fq8ditogdg],
.maps-feature-item.hovered[b-fq8ditogdg] {
    background: var(--pg-shimmer-highlight);
}

.maps-vineyard-item:active[b-fq8ditogdg] {
    transform: scale(0.97);
}

.maps-vineyard-item:focus-visible[b-fq8ditogdg] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.maps-vineyard-info[b-fq8ditogdg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.maps-vineyard-name[b-fq8ditogdg] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maps-vineyard-meta[b-fq8ditogdg] {
    font-size: 11px;
    color: var(--pg-text-secondary);
    line-height: 1.3;
}

/* ── Vineyard summary card (top of each view's pane) ── */
.maps-vineyard-summary[b-fq8ditogdg] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin: 8px 0;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
}

/* ── Block Detail Card ── */
.maps-block-detail-card[b-fq8ditogdg] {
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.maps-block-detail-row[b-fq8ditogdg] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.maps-block-detail-label[b-fq8ditogdg] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

.maps-block-detail-value[b-fq8ditogdg] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-text);
    text-align: right;
}

.maps-block-dot[b-fq8ditogdg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    background: var(--maps-dot-color);
}

.maps-block-info[b-fq8ditogdg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.maps-block-name[b-fq8ditogdg] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-text);
}

.maps-block-meta[b-fq8ditogdg] {
    font-size: 11px;
    color: var(--pg-text-secondary);
}

/* ── Map wrapper (inside content, under header) ── */
.maps-map-wrapper[b-fq8ditogdg] {
    flex: 1;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--pg-shadow);
}

.maps-page-map[b-fq8ditogdg] {
    position: absolute;
    inset: 0;
}

/* ══════════════════════════════════════════════════════════
   Features integration styles
   ══════════════════════════════════════════════════════════ */

/* ── Add Feature Button ── */
.maps-add-feature-btn[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 0;
    margin-top: 8px;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-md);
    background: none;
    color: var(--pg-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast);
}

.maps-add-feature-btn:hover[b-fq8ditogdg] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
    background: var(--pg-accent-tint-subtle);
}

/* ── Type Picker ── */
.maps-type-picker[b-fq8ditogdg] { padding-top: 4px; }

.maps-type-category[b-fq8ditogdg] { margin-bottom: 2px; }

.maps-type-category-header[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--pg-border);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--pg-text);
    cursor: pointer;
    text-align: left;
}

.maps-type-category-header:hover[b-fq8ditogdg] { background: var(--pg-shimmer-highlight); }

.maps-type-category-dot[b-fq8ditogdg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--maps-dot-color);
}

.maps-type-chevron[b-fq8ditogdg] {
    margin-left: auto;
    font-size: 10px;
    color: var(--pg-text-tertiary);
    transition: transform var(--duration-normal);
}

.maps-type-chevron.open[b-fq8ditogdg] { transform: rotate(180deg); }

.maps-type-item[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 4px 5px 20px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--pg-text-secondary);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast);
}

.maps-type-item:hover[b-fq8ditogdg] {
    background: var(--pg-shimmer-highlight);
    color: var(--pg-text);
}

/* ── Geometry Badges ── */
.maps-geometry-badge[b-fq8ditogdg] {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

.maps-geo-point[b-fq8ditogdg] { color: #4a9eff; background: rgba(74, 158, 255, 0.12); }
.maps-geo-line[b-fq8ditogdg] { color: #ff9f43; background: rgba(255, 159, 67, 0.12); }
.maps-geo-area[b-fq8ditogdg] { color: #26de81; background: rgba(38, 222, 129, 0.12); }

/* ── Drawing Form ── */
.maps-drawing-form[b-fq8ditogdg] { padding-top: 8px; }

.maps-drawing-type-badge[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--pg-text);
}

.maps-drawing-hint[b-fq8ditogdg] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--pg-accent);
    font-weight: 500;
    background: var(--pg-accent-tint-soft);
    border: 1px solid var(--pg-accent-border);
    border-radius: var(--radius-sm);
}

.maps-drawing-hint i[b-fq8ditogdg] {
    font-size: 13px;
    margin-top: 1px;
    flex-shrink: 0;
}

.maps-drawing-hint-edit[b-fq8ditogdg] {
    color: var(--pg-text-secondary);
    background: var(--pg-surface-raised);
    border-color: var(--pg-border);
}

.maps-drawing-hint-list[b-fq8ditogdg] {
    list-style: none;
    margin: 8px 0 0;
    padding: 8px 10px;
    background: var(--pg-accent-tint-soft);
    border: 1px solid var(--pg-accent-border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--pg-accent);
    font-weight: 500;
}

.maps-drawing-hint-list li[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.maps-drawing-hint-list i[b-fq8ditogdg] {
    font-size: 13px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.maps-form-optional-note[b-fq8ditogdg] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--pg-text-tertiary);
    font-style: italic;
}

.maps-redraw-btn[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--pg-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.maps-redraw-btn:hover[b-fq8ditogdg] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
    background: var(--pg-accent-tint-whisper);
}

.maps-redraw-btn:focus-visible[b-fq8ditogdg] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.maps-form-field[b-fq8ditogdg] {
    margin-top: 10px;
}

.maps-form-field > label[b-fq8ditogdg] {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--pg-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.maps-form-field-inline[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.maps-form-field-inline > label[b-fq8ditogdg] {
    /* Match the other field labels exactly: 11px uppercase tertiary.
       Keep on one line so label + toggle sit cleanly in the row. */
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maps-input[b-fq8ditogdg] {
    width: 100%;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: var(--pg-surface);
    color: var(--pg-text);
    outline: none;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    box-sizing: border-box;
}

.maps-input:hover:not(:focus)[b-fq8ditogdg] { border-color: var(--pg-border-hover); }

.maps-input:focus[b-fq8ditogdg] {
    border-color: var(--pg-accent);
    box-shadow: 0 0 0 3px var(--pg-accent-focus-ring);
}

.maps-textarea[b-fq8ditogdg] { resize: vertical; min-height: 44px; }

.maps-form-divider[b-fq8ditogdg] {
    margin-top: 14px;
    padding-top: 2px;
    border-top: 1px solid var(--pg-border);
}

.maps-unit-hint[b-fq8ditogdg] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pg-text-tertiary);
}

/* Toggle switch (for boolean attributes)
   Track:  22 × 14
   Knob:   10 × 10 (1px inset on all sides)
   Travel: 22 − 10 − 2 = 10px  ← knob lands flush at the far edge when on
*/
.maps-switch[b-fq8ditogdg] {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 22px;
    height: 14px;
    cursor: pointer;
}

.maps-switch input[b-fq8ditogdg] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.maps-switch-track[b-fq8ditogdg] {
    position: absolute;
    inset: 0;
    background: var(--pg-surface-overlay);
    border: 1px solid var(--pg-border);
    border-radius: 8px;
    transition: background var(--duration-fast), border-color var(--duration-fast);
    box-sizing: border-box;
}

.maps-switch-track[b-fq8ditogdg]::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
    background: var(--pg-accent-text);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.maps-switch input:checked ~ .maps-switch-track[b-fq8ditogdg] {
    background: var(--pg-accent);
    border-color: var(--pg-accent);
}

.maps-switch input:checked ~ .maps-switch-track[b-fq8ditogdg]::before {
    transform: translateX(10px);
}

.maps-switch input:focus-visible ~ .maps-switch-track[b-fq8ditogdg] {
    box-shadow: 0 0 0 3px var(--pg-accent-focus-ring-strong);
}

.maps-form-actions[b-fq8ditogdg] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--pg-border);
    justify-content: flex-end;
}

.maps-cancel-btn[b-fq8ditogdg],
.maps-save-btn[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform var(--duration-fast), border-color var(--duration-fast),
                color var(--duration-fast), background var(--duration-fast), opacity var(--duration-fast);
}

.maps-cancel-btn:active[b-fq8ditogdg],
.maps-save-btn:active[b-fq8ditogdg] { transform: scale(0.97); }

.maps-cancel-btn:focus-visible[b-fq8ditogdg],
.maps-save-btn:focus-visible[b-fq8ditogdg] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.maps-cancel-btn[b-fq8ditogdg] {
    background: none;
    border: 1px solid var(--pg-border);
    color: var(--pg-text-secondary);
}

.maps-cancel-btn:hover[b-fq8ditogdg] { border-color: var(--pg-border-hover); color: var(--pg-text); }

.maps-save-btn[b-fq8ditogdg] {
    background: var(--pg-accent);
    border: 1px solid var(--pg-accent);
    color: var(--pg-accent-text);
    min-width: 74px;
}

.maps-save-btn:hover:not(:disabled)[b-fq8ditogdg] { opacity: 0.9; }
.maps-save-btn:disabled[b-fq8ditogdg] { opacity: 0.4; cursor: not-allowed; }

.maps-spinner-sm[b-fq8ditogdg] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--pg-accent-text);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
}

/* ── Feature Detail ── */
.maps-feature-detail[b-fq8ditogdg] {
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-top: 8px;
}

.maps-feature-detail-header[b-fq8ditogdg] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.maps-feature-detail-header .maps-type-category-dot[b-fq8ditogdg] { margin-top: 4px; }

.maps-feature-detail-name[b-fq8ditogdg] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-text);
}

.maps-feature-detail-type[b-fq8ditogdg] {
    font-size: 11px;
    color: var(--pg-text-secondary);
}

.maps-capture-hint[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    font-size: 10px;
    color: var(--pg-text-tertiary);
    font-weight: 400;
}

.maps-feature-detail-notes[b-fq8ditogdg] {
    font-size: 12px;
    color: var(--pg-text-secondary);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pg-border);
}

.maps-feature-detail-actions[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--pg-border);
}

.maps-edit-btn[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--pg-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.maps-edit-btn:hover[b-fq8ditogdg] { border-color: var(--pg-accent); color: var(--pg-accent); }

.maps-delete-btn[b-fq8ditogdg] {
    padding: 4px 8px;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    margin-left: auto;
    font-size: 13px;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast);
}

.maps-delete-btn:hover[b-fq8ditogdg] { color: var(--pg-danger); background: var(--pg-danger-bg); }

.maps-delete-confirm[b-fq8ditogdg] {
    margin-left: auto;
    font-size: 11px;
    color: var(--pg-danger);
    display: flex;
    align-items: center;
    gap: 6px;
}

.maps-delete-yes[b-fq8ditogdg],
.maps-delete-no[b-fq8ditogdg] {
    padding: 2px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
}

.maps-delete-yes[b-fq8ditogdg] { background: var(--pg-danger); color: var(--pg-accent-text); }
.maps-delete-yes:hover[b-fq8ditogdg] { background: #c0392b; }
.maps-delete-no[b-fq8ditogdg] { background: var(--pg-surface-overlay); color: var(--pg-text-secondary); }

/* ── Feature Search ── */
.maps-feature-search[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: var(--pg-surface);
    transition: border-color var(--duration-fast);
}

.maps-feature-search:focus-within[b-fq8ditogdg] {
    border-color: var(--pg-accent);
}

.maps-search-icon[b-fq8ditogdg] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    flex-shrink: 0;
}

.maps-search-input[b-fq8ditogdg] {
    flex: 1;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--pg-text);
    outline: none;
    padding: 2px 0;
    min-width: 0;
}

.maps-search-input[b-fq8ditogdg]::placeholder {
    color: var(--pg-text-tertiary);
}

.maps-search-clear[b-fq8ditogdg] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--pg-text-tertiary);
    font-size: 10px;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast);
}

.maps-search-clear:hover[b-fq8ditogdg] {
    color: var(--pg-text);
}

/* ── Category Toggle Button ── */
.maps-category-toggle-btn[b-fq8ditogdg] {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: opacity var(--duration-fast);
}

.maps-category-toggle-btn:hover[b-fq8ditogdg] {
    opacity: 0.7;
}

/* ── Outlined dot (hidden category) ── */
.maps-type-category-dot.outlined[b-fq8ditogdg] {
    background: transparent !important;
    border: 2px solid var(--maps-dot-color);
    box-sizing: border-box;
}

/* ── Hidden category group ── */
.maps-feature-group.category-hidden .maps-feature-group-header[b-fq8ditogdg] {
    opacity: 0.5;
}

/* ── Empty filter state ── */
.maps-empty-filter[b-fq8ditogdg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    font-size: 12px;
    color: var(--pg-text-tertiary);
}

.maps-clear-filters-btn[b-fq8ditogdg] {
    background: none;
    border: none;
    padding: 2px 8px;
    font-family: inherit;
    font-size: 11px;
    color: var(--pg-accent);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast);
}

.maps-clear-filters-btn:hover[b-fq8ditogdg] {
    background: var(--pg-accent-tint-medium);
}

/* ── Feature List ── */
.maps-feature-list[b-fq8ditogdg] { padding-top: 4px; }

.maps-feature-group[b-fq8ditogdg] { margin-bottom: 4px; }

.maps-feature-group-header[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

.maps-feature-group-count[b-fq8ditogdg] {
    margin-left: auto;
    font-size: 10px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    padding: 0 5px;
    border-radius: 8px;
    line-height: 16px;
}

.maps-feature-item[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 4px 5px 8px;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    font-family: inherit;
    font-size: 12px;
    color: var(--pg-text);
    cursor: pointer;
    text-align: left;
    transition: all var(--duration-fast);
}

.maps-feature-item.selected[b-fq8ditogdg] {
    border-left-color: var(--pg-accent);
    background: var(--pg-accent-tint-soft);
}

[b-fq8ditogdg] .maps-feature-icon { font-size: 14px; flex-shrink: 0; color: var(--maps-icon-color); }

/* ── Feature card (wraps item + inline detail) ── */
.maps-feature-card[b-fq8ditogdg] {
    border-left: 2px solid transparent;
    transition: border-color var(--duration-fast);
}

.maps-feature-card.expanded[b-fq8ditogdg] {
    border-left-color: var(--pg-accent);
    background: var(--pg-accent-tint-whisper);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 4px;
}

.maps-feature-card .maps-feature-item[b-fq8ditogdg] {
    border-left: none;
}

.maps-feature-card.expanded .maps-feature-item[b-fq8ditogdg] {
    background: none;
}

/* ── Inline detail (expanded below item) ── */
.maps-feature-inline-detail[b-fq8ditogdg] {
    padding: 4px 8px 8px 28px;
}

.maps-feature-attr-row[b-fq8ditogdg] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 2px 0;
    font-size: 11px;
}

.maps-feature-attr-label[b-fq8ditogdg] {
    color: var(--pg-text-tertiary);
    font-weight: 500;
}

.maps-feature-attr-value[b-fq8ditogdg] {
    color: var(--pg-text);
    font-weight: 500;
    text-align: right;
}

.maps-feature-item-name[b-fq8ditogdg] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Vineyard summary head (name + edit) ── */
.maps-vineyard-summary-head[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.maps-vineyard-edit-btn[b-fq8ditogdg] {
    /* Slightly smaller than the section-header pencil — sits beside the
       vineyard name where vertical rhythm is tighter. */
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.maps-vineyard-defaults strong[b-fq8ditogdg] {
    color: var(--pg-text);
    font-weight: 600;
}

.maps-vineyard-edit[b-fq8ditogdg] {
    margin-top: 4px;
}

/* ── Planting section (inline block detail) ── */
.maps-planting-section[b-fq8ditogdg] {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pg-border);
}

.maps-planting-section-header[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0 4px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pg-text-tertiary);
}

.maps-planting-edit-btn[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--pg-text-tertiary);
    cursor: pointer;
    font-size: 13px;
    transition: color var(--duration-fast), background var(--duration-fast),
                transform var(--duration-fast);
}

.maps-planting-edit-btn:hover[b-fq8ditogdg] {
    background: var(--pg-surface-overlay);
    color: var(--pg-text);
}

.maps-planting-edit-btn:focus-visible[b-fq8ditogdg] {
    outline: 2px solid var(--pg-accent);
    outline-offset: -2px;
}

.maps-planting-edit-btn:active[b-fq8ditogdg] {
    transform: scale(0.95);
}

.maps-planting-empty[b-fq8ditogdg] {
    color: var(--pg-text-tertiary);
    font-style: italic;
    font-weight: 400;
}

/* Source chip — small inline label after the value */
.maps-planting-source[b-fq8ditogdg] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    background: var(--pg-accent-tint-subtle);
    color: var(--pg-text-tertiary);
    vertical-align: 1px;
}

.maps-planting-source-blockoverride[b-fq8ditogdg] {
    background: rgba(82, 80, 158, 0.12);
    color: #52509E;
}

.maps-planting-source-vineyarddefault[b-fq8ditogdg] {
    background: rgba(146, 78, 140, 0.10);
    color: #924E8C;
}

.maps-planting-source-notset[b-fq8ditogdg] {
    background: var(--pg-accent-tint-subtle);
    color: var(--pg-text-tertiary);
}

/* Inline edit form */
.maps-planting-edit[b-fq8ditogdg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0 4px;
    animation: maps-planting-fade-in-b-fq8ditogdg var(--duration-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes maps-planting-fade-in-b-fq8ditogdg {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.maps-planting-edit-field[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--pg-text-secondary);
}

.maps-planting-edit-field > span[b-fq8ditogdg] {
    flex: 0 0 auto;
}

.maps-planting-input[b-fq8ditogdg] {
    flex: 1 1 auto;
    max-width: 110px;
    padding: 4px 8px;
    font-size: 12px;
}

.maps-planting-edit-actions[b-fq8ditogdg] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
}

.maps-planting-hint[b-fq8ditogdg] {
    margin: 0;
    font-size: 10px;
    color: var(--pg-text-tertiary);
}

.maps-planting-error[b-fq8ditogdg] {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: rgba(235, 87, 87, 0.10);
    color: #C44545;
    font-size: 11px;
    line-height: 1.3;
}

/* Block sheet button — disabled until Stage 6 wires it */
.maps-planting-sheet-btn[b-fq8ditogdg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    background: var(--pg-surface);
    color: var(--pg-text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-fast), border-color var(--duration-fast),
                transform var(--duration-fast);
}

.maps-planting-sheet-btn:hover:not(:disabled)[b-fq8ditogdg] {
    background: var(--pg-surface-raised);
    border-color: var(--pg-border-hover);
}

.maps-planting-sheet-btn:focus-visible[b-fq8ditogdg] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 1px;
}

.maps-planting-sheet-btn:active:not(:disabled)[b-fq8ditogdg] {
    transform: scale(0.99);
}

.maps-planting-sheet-btn:disabled[b-fq8ditogdg] {
    opacity: 0.55;
    cursor: not-allowed;
}

.maps-planting-sheet-btn i[b-fq8ditogdg] {
    font-size: 13px;
}

/* ── Per-feature eye toggle (hide / show by default) ── */
.maps-feature-row-wrap[b-fq8ditogdg] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.maps-feature-row-wrap .maps-feature-item[b-fq8ditogdg] {
    flex: 1;
    min-width: 0;
}

.maps-feature-eye[b-fq8ditogdg] {
    flex-shrink: 0;
    width: 28px;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--duration-fast), background var(--duration-fast);
    opacity: 0.55;
}

.maps-feature-eye:hover[b-fq8ditogdg] {
    color: var(--pg-text);
    background: var(--pg-surface-overlay);
    opacity: 1;
}

.maps-feature-eye:focus-visible[b-fq8ditogdg] {
    outline: 2px solid var(--pg-accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* When the feature is hidden-by-default, the eye becomes a stronger
   "this is hidden" indicator. */
.maps-feature-eye.is-hidden[b-fq8ditogdg] {
    color: var(--pg-accent);
    opacity: 1;
}

/* Whole row dims when hidden-by-default — except when revealed by
   selection or hover (handled by .selected/.hovered taking precedence). */
.maps-feature-card.hidden-by-default .maps-feature-item:not(.selected):not(.hovered)
    .maps-feature-item-name[b-fq8ditogdg] {
    color: var(--pg-text-tertiary);
}

/* ── Header "Show hidden features" toggle ── */
.maps-show-hidden-pill[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}

.maps-show-hidden-pill i[b-fq8ditogdg] {
    font-size: 14px;
}

/* ── Drawing Indicator (floats on map) ── */
.maps-drawing-indicator[b-fq8ditogdg] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-lg);
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    backdrop-filter: blur(6px);
}

.maps-drawing-indicator-item[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.maps-drawing-indicator-item + .maps-drawing-indicator-item[b-fq8ditogdg]::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 3px;
    bottom: 3px;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
}

.maps-drawing-indicator-item i[b-fq8ditogdg] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

/* ────────────────────────────────────────────────────────────────────
   Export menu — three-dot affordance on the vineyard summary card and
   per block list item. Pops a small panel with PDF / GeoJSON / CSV
   options. Anchored right so it doesn't drift off-screen on narrow
   panels (the maps panel is ~340px).
   ──────────────────────────────────────────────────────────────────── */

.maps-export-dropdown[b-fq8ditogdg] {
    position: relative;
    flex-shrink: 0;
}

.maps-export-trigger[b-fq8ditogdg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--pg-text-tertiary);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.maps-export-trigger:hover[b-fq8ditogdg],
.maps-export-trigger:focus-visible[b-fq8ditogdg] {
    background: var(--pg-shimmer-highlight);
    color: var(--pg-text);
    border-color: var(--pg-border);
    outline: none;
}

.maps-export-dropdown.is-open .maps-export-trigger[b-fq8ditogdg] {
    background: var(--pg-accent-tint-soft);
    color: var(--pg-accent);
    border-color: var(--pg-accent);
}

.maps-export-trigger:disabled[b-fq8ditogdg] {
    cursor: progress;
    opacity: 0.7;
}

.maps-export-trigger-compact[b-fq8ditogdg] {
    width: 24px;
    height: 24px;
    font-size: 13px;
    margin: 2px 4px 2px 0;
}

.maps-export-trigger i[b-fq8ditogdg] {
    font-size: 14px;
    line-height: 1;
}

.maps-export-spinner[b-fq8ditogdg] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--pg-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: maps-export-spin-b-fq8ditogdg 0.75s linear infinite;
}

@keyframes maps-export-spin-b-fq8ditogdg {
    to { transform: rotate(360deg); }
}

.maps-export-menu[b-fq8ditogdg] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    /* Sized to fit inside the 272px-wide maps panel (which has
       overflow: hidden) without spilling past its left edge. Wider
       than this clips the icon column on the left. Meta text gets
       ellipsised if a future label outgrows the column. */
    width: 230px;
    padding: 6px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.maps-export-menu-label[b-fq8ditogdg] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pg-text-secondary);
    padding: 4px 8px 6px;
}

.maps-export-item[b-fq8ditogdg] {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    color: var(--pg-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast);
}

.maps-export-item:hover[b-fq8ditogdg] {
    background: var(--pg-accent-tint-whisper);
}

.maps-export-item i[b-fq8ditogdg] {
    font-size: 14px;
    color: var(--pg-text-tertiary);
}

.maps-export-item:hover i[b-fq8ditogdg] {
    color: var(--pg-accent);
}

.maps-export-item-label[b-fq8ditogdg] {
    font-size: 13px;
    font-weight: 500;
}

.maps-export-item-meta[b-fq8ditogdg] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-block: the list item used to be a single button. Now it's a row
   of (item button | export dropdown). Keep the item button taking the
   full available width, with the dropdown sitting to its right. */
.maps-feature-item-row[b-fq8ditogdg] {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.maps-feature-item-row .maps-feature-item[b-fq8ditogdg] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Pages/Settings/FeatureTypes.razor.rz.scp.css */
/* ── Feature Types Settings ── */

.fts-container[b-3dpy2gwchc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 24px;
    width: 100%;
    align-items: stretch;
}

/* ── Loading / empty ── */

.fts-loading[b-3dpy2gwchc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
}

.fts-empty-state[b-3dpy2gwchc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
    text-align: center;
}

.fts-spinner[b-3dpy2gwchc] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
}

/* ── Feedback message ── */

.fts-feedback[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 12px;
    max-width: 860px;
}

.fts-feedback.success[b-3dpy2gwchc] {
    color: #26de81;
    background: rgba(38, 222, 129, 0.08);
    border: 1px solid rgba(38, 222, 129, 0.2);
}

.fts-feedback.error[b-3dpy2gwchc] {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

/* ── Category ── */

.fts-category[b-3dpy2gwchc] {
    position: relative;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    transition: opacity var(--duration-fast);
    width: 100%;
}

.fts-category.fts-menu-open[b-3dpy2gwchc] {
    z-index: 50;
}

/* ── Hidden item treatment ── */

.fts-hidden-item[b-3dpy2gwchc] {
    opacity: 0.45;
}

.fts-strikethrough[b-3dpy2gwchc] {
    text-decoration: line-through;
    text-decoration-color: var(--pg-text-tertiary);
}

/* ── Category header ── */

.fts-category-header[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 0 0;
    background: var(--pg-surface-raised);
    transition: background var(--duration-fast);
}

.fts-category-header:hover[b-3dpy2gwchc] {
    background: var(--pg-surface-overlay);
}

.fts-category-toggle[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--pg-text);
    text-align: left;
    justify-content: space-between;
}

.fts-category-name[b-3dpy2gwchc] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-text);
}

.fts-category-count[b-3dpy2gwchc] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    min-width: 18px;
    text-align: center;
}

.fts-chevron[b-3dpy2gwchc] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
    width: 16px;
    text-align: center;
}

/* ── Row layout helpers ── */

.fts-row-left[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fts-row-right[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 16px;
}

/* ── Badges ── */

.fts-badge[b-3dpy2gwchc] {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.fts-badge-custom[b-3dpy2gwchc] {
    color: var(--pg-accent);
    background: rgba(146, 78, 140, 0.1);
}

.fts-badge-hidden[b-3dpy2gwchc] {
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    font-style: italic;
}

/* ── Context menu (⋯ button + dropdown) ── */

.fts-actions[b-3dpy2gwchc] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.fts-more-btn[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: all var(--duration-fast);
    opacity: 0;
}

.fts-category-header:hover .fts-more-btn[b-3dpy2gwchc],
.fts-type-content:hover .fts-more-btn[b-3dpy2gwchc],
.fts-attr-row:hover .fts-more-btn[b-3dpy2gwchc],
.fts-more-btn[class*="fts-menu-open"][b-3dpy2gwchc],
.fts-actions:focus-within .fts-more-btn[b-3dpy2gwchc] {
    opacity: 1;
}

.fts-more-btn:hover[b-3dpy2gwchc] {
    background: var(--pg-surface-overlay);
    color: var(--pg-text);
}

.fts-more-btn-sm[b-3dpy2gwchc] {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

/* Menu backdrop — invisible, catches clicks outside */
.fts-menu-backdrop[b-3dpy2gwchc] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.fts-menu[b-3dpy2gwchc] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 160px;
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px;
    animation: fts-menu-in-b-3dpy2gwchc 0.12s ease-out;
}

@keyframes fts-menu-in-b-3dpy2gwchc {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.fts-menu-item[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    color: var(--pg-text);
    font-size: 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    white-space: nowrap;
    transition: background var(--duration-fast);
}

.fts-menu-item:hover[b-3dpy2gwchc] {
    background: var(--pg-surface-raised);
}

.fts-menu-item i[b-3dpy2gwchc] {
    font-size: 13px;
    width: 16px;
    text-align: center;
    color: var(--pg-text-secondary);
}

.fts-menu-danger[b-3dpy2gwchc] {
    color: #e74c3c;
}

.fts-menu-danger:hover[b-3dpy2gwchc] {
    background: rgba(231, 76, 60, 0.08);
}

.fts-menu-danger i[b-3dpy2gwchc] {
    color: #e74c3c;
}

/* ── Type list ── */

.fts-type-list[b-3dpy2gwchc] {
    padding: 4px 0;
    border-top: 1px solid var(--pg-border);
}

.fts-type-row[b-3dpy2gwchc] {
    display: flex;
    flex-direction: column;
    transition: opacity var(--duration-fast);
}

.fts-type-content[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 0 0;
    transition: background var(--duration-fast);
}

.fts-type-content:hover[b-3dpy2gwchc] {
    background: var(--pg-surface-raised);
}

.fts-type-toggle[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    padding: 7px 14px 7px 38px;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    justify-content: space-between;
}

.fts-chevron-sm[b-3dpy2gwchc] {
    font-size: 10px;
    color: var(--pg-text-tertiary);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

[b-3dpy2gwchc] .fts-type-icon {
    font-size: 14px;
    opacity: 0.7;
    width: 18px;
    text-align: center;
}

.fts-type-name[b-3dpy2gwchc] {
    font-size: 13px;
    color: var(--pg-text);
}

/* ── Geometry badges ── */

.fts-geometry-badge[b-3dpy2gwchc] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--pg-text);
    background: var(--pg-surface-overlay);
}

.fts-geometry-point[b-3dpy2gwchc] { color: #4a9eff; background: rgba(74, 158, 255, 0.12); }
.fts-geometry-line[b-3dpy2gwchc] { color: #ff9f43; background: rgba(255, 159, 67, 0.12); }
.fts-geometry-area[b-3dpy2gwchc] { color: #26de81; background: rgba(38, 222, 129, 0.12); }

/* ── Attribute list ── */

.fts-attr-count[b-3dpy2gwchc] {
    font-size: 10px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.fts-attr-list[b-3dpy2gwchc] {
    padding: 2px 0 4px 0;
    margin-left: 52px;
    border-left: 2px solid var(--pg-border);
}

.fts-attr-row[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 4px 16px;
    font-size: 12px;
    transition: background var(--duration-fast), opacity var(--duration-fast);
}

.fts-attr-row:hover[b-3dpy2gwchc] {
    background: var(--pg-surface-raised);
}

.fts-attr-info[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.fts-attr-name[b-3dpy2gwchc] {
    font-size: 12px;
    color: var(--pg-text);
}

.fts-attr-type[b-3dpy2gwchc] {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
}

.fts-attr-unit[b-3dpy2gwchc] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
}

.fts-attr-options[b-3dpy2gwchc] {
    font-size: 10px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    cursor: help;
}

.fts-attr-required[b-3dpy2gwchc] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #ff9f43;
    background: rgba(255, 159, 67, 0.1);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
}

/* ── Inline add buttons ── */

.fts-add-inline[b-3dpy2gwchc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 14px 4px 16px;
    padding: 4px 12px;
    font-size: 11px;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.fts-add-inline:hover[b-3dpy2gwchc] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
}

/* Add type button sits at the type list level */
.fts-type-list > .fts-add-inline[b-3dpy2gwchc] {
    margin-left: 38px;
}

.fts-add-category-btn[b-3dpy2gwchc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-md);
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    transition: all var(--duration-fast);
    width: 100%;
    justify-content: center;
}

.fts-add-category-btn:hover[b-3dpy2gwchc] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
    background: var(--pg-surface-raised);
}

/* ── Sticky Save Bar ── */

.fts-save-bar[b-3dpy2gwchc] {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 16px;
    background: var(--pg-surface-raised);
    border-bottom: 1px solid var(--pg-border);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.fts-save-bar-text[b-3dpy2gwchc] {
    font-size: 12px;
    color: var(--pg-text-secondary);
    margin-right: auto;
}

.fts-save-btn[b-3dpy2gwchc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    background: var(--pg-accent);
    color: white;
    cursor: pointer;
    transition: opacity var(--duration-fast);
}

.fts-save-btn:hover[b-3dpy2gwchc] {
    opacity: 0.9;
}

.fts-save-btn:disabled[b-3dpy2gwchc] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Modal ── */

.fts-modal-backdrop[b-3dpy2gwchc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.fts-modal[b-3dpy2gwchc] {
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-lg);
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.fts-modal-header[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pg-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--pg-text);
}

.fts-modal-close[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 16px;
    transition: all var(--duration-fast);
}

.fts-modal-close:hover[b-3dpy2gwchc] {
    background: var(--pg-surface-raised);
    color: var(--pg-text);
}

.fts-modal-body[b-3dpy2gwchc] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fts-modal-footer[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--pg-border);
}

/* ── Form controls ── */

.fts-form-row[b-3dpy2gwchc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fts-form-row label[b-3dpy2gwchc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--pg-text-secondary);
}

.fts-input[b-3dpy2gwchc] {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: var(--pg-surface-raised);
    color: var(--pg-text);
    outline: none;
    font-family: inherit;
    transition: border-color var(--duration-fast);
}

.fts-input:focus[b-3dpy2gwchc] {
    border-color: var(--pg-accent);
}

.fts-textarea[b-3dpy2gwchc] {
    resize: vertical;
    min-height: 60px;
    font-size: 12px;
    line-height: 1.4;
}

.fts-btn-secondary[b-3dpy2gwchc] {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    background: var(--pg-surface-raised);
    color: var(--pg-text);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.fts-btn-secondary:hover[b-3dpy2gwchc] {
    border-color: var(--pg-border-hover);
    background: var(--pg-surface-overlay);
}

.fts-btn-primary[b-3dpy2gwchc] {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    background: var(--pg-accent);
    color: white;
    cursor: pointer;
    transition: opacity var(--duration-fast);
}

.fts-btn-primary:hover[b-3dpy2gwchc] {
    opacity: 0.9;
}

.fts-btn-primary:disabled[b-3dpy2gwchc] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Form row inline (checkbox) ── */

.fts-form-row-inline[b-3dpy2gwchc] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.fts-form-row-inline label[b-3dpy2gwchc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pg-text);
    cursor: pointer;
}
/* /Pages/Settings/TroubleSpotTypes.razor.rz.scp.css */
/* ── Trouble Spot Types Settings ── */

.tss-container[b-x2svu7xh0s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 24px;
    width: 100%;
    align-items: stretch;
}

/* ── Loading / empty ── */

.tss-loading[b-x2svu7xh0s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
}

.tss-empty-state[b-x2svu7xh0s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
    text-align: center;
}

.tss-spinner[b-x2svu7xh0s] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
}

/* ── Feedback message ── */

.tss-feedback[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 12px;
    max-width: 860px;
}

.tss-feedback.success[b-x2svu7xh0s] {
    color: #26de81;
    background: rgba(38, 222, 129, 0.08);
    border: 1px solid rgba(38, 222, 129, 0.2);
}

.tss-feedback.error[b-x2svu7xh0s] {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
}

/* ── Category ── */

.tss-category[b-x2svu7xh0s] {
    position: relative;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    transition: opacity var(--duration-fast);
    width: 100%;
}

.tss-category.tss-menu-open[b-x2svu7xh0s] {
    z-index: 50;
}

.tss-hidden-item[b-x2svu7xh0s] {
    opacity: 0.45;
}

.tss-strikethrough[b-x2svu7xh0s] {
    text-decoration: line-through;
    text-decoration-color: var(--pg-text-tertiary);
}

/* ── Category header ── */

.tss-category-header[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 0 0;
    background: var(--pg-surface-raised);
    transition: background var(--duration-fast);
}

.tss-category-header:hover[b-x2svu7xh0s] {
    background: var(--pg-surface-overlay);
}

.tss-category-toggle[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--pg-text);
    text-align: left;
    justify-content: space-between;
}

.tss-category-name[b-x2svu7xh0s] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pg-text);
}

.tss-category-count[b-x2svu7xh0s] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    min-width: 18px;
    text-align: center;
}

.tss-chevron[b-x2svu7xh0s] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
    width: 16px;
    text-align: center;
}

/* ── Colour swatch ── */

.tss-colour-swatch[b-x2svu7xh0s] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Marker shape preview ── */

.tss-marker-shape[b-x2svu7xh0s] {
    width: 18px;
    height: 18px;
    position: relative;
    flex-shrink: 0;
}

[b-x2svu7xh0s] .tss-marker-shape-inner {
    position: absolute;
    inset: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tss-marker-sm[b-x2svu7xh0s] {
    width: 22px;
    height: 22px;
}

[b-x2svu7xh0s] .tss-marker-sm-inner {
    inset: 2.5px;
}

.tss-marker-letter[b-x2svu7xh0s] {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* ── Row layout helpers ── */

.tss-row-left[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tss-row-right[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 16px;
}

/* ── Badges ── */

.tss-badge[b-x2svu7xh0s] {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.tss-badge-custom[b-x2svu7xh0s] {
    color: var(--pg-accent);
    background: rgba(146, 78, 140, 0.1);
}

.tss-badge-hidden[b-x2svu7xh0s] {
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    font-style: italic;
}

/* ── Quick Access star button ── */

.tss-quick-access-btn[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: all var(--duration-fast);
}

.tss-quick-access-btn:hover[b-x2svu7xh0s] {
    color: #f59e0b;
}

.tss-quick-access-btn.active[b-x2svu7xh0s] {
    color: #f59e0b;
}

/* ── Context menu ── */

.tss-actions[b-x2svu7xh0s] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tss-more-btn[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: all var(--duration-fast);
    opacity: 0;
}

.tss-category-header:hover .tss-more-btn[b-x2svu7xh0s],
.tss-type-content:hover .tss-more-btn[b-x2svu7xh0s],
.tss-actions:focus-within .tss-more-btn[b-x2svu7xh0s] {
    opacity: 1;
}

.tss-more-btn:hover[b-x2svu7xh0s] {
    background: var(--pg-surface-overlay);
    color: var(--pg-text);
}

.tss-menu-backdrop[b-x2svu7xh0s] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.tss-menu[b-x2svu7xh0s] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    min-width: 160px;
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 4px;
    animation: tss-menu-in-b-x2svu7xh0s 0.12s ease-out;
}

@keyframes tss-menu-in-b-x2svu7xh0s {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tss-menu-item[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    color: var(--pg-text);
    font-size: 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-align: left;
    white-space: nowrap;
    transition: background var(--duration-fast);
}

.tss-menu-item:hover[b-x2svu7xh0s] {
    background: var(--pg-surface-raised);
}

.tss-menu-item i[b-x2svu7xh0s] {
    font-size: 13px;
    width: 16px;
    text-align: center;
    color: var(--pg-text-secondary);
}

.tss-menu-danger[b-x2svu7xh0s] {
    color: #e74c3c;
}

.tss-menu-danger:hover[b-x2svu7xh0s] {
    background: rgba(231, 76, 60, 0.08);
}

.tss-menu-danger i[b-x2svu7xh0s] {
    color: #e74c3c;
}

/* ── Type list ── */

.tss-type-list[b-x2svu7xh0s] {
    padding: 4px 0;
    border-top: 1px solid var(--pg-border);
}

.tss-type-row[b-x2svu7xh0s] {
    display: flex;
    flex-direction: column;
    transition: opacity var(--duration-fast);
}

.tss-type-content[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 6px 7px 38px;
    transition: background var(--duration-fast);
}

.tss-type-content:hover[b-x2svu7xh0s] {
    background: var(--pg-surface-raised);
}

.tss-type-name[b-x2svu7xh0s] {
    font-size: 13px;
    color: var(--pg-text);
}

/* ── Custom category styling section ── */

.tss-custom-styling[b-x2svu7xh0s] {
    padding: 8px 14px 4px 38px;
    border-top: 1px solid var(--pg-border);
}

.tss-styling-row[b-x2svu7xh0s] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.tss-form-group-inline[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tss-form-group-inline label[b-x2svu7xh0s] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
}

.tss-color-picker[b-x2svu7xh0s] {
    width: 28px;
    height: 24px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    padding: 1px;
    cursor: pointer;
}

.tss-input-sm[b-x2svu7xh0s] {
    max-width: 120px;
    font-size: 12px;
    padding: 4px 8px;
}

/* ── Inline add buttons ── */

.tss-add-inline[b-x2svu7xh0s] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 14px 4px 38px;
    padding: 4px 12px;
    font-size: 11px;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.tss-add-inline:hover[b-x2svu7xh0s] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
}

.tss-add-category-btn[b-x2svu7xh0s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-md);
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    transition: all var(--duration-fast);
    width: 100%;
    justify-content: center;
}

.tss-add-category-btn:hover[b-x2svu7xh0s] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
    background: var(--pg-surface-raised);
}

/* ── Sticky Save Bar ── */

.tss-save-bar[b-x2svu7xh0s] {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 16px;
    background: var(--pg-surface-raised);
    border-bottom: 1px solid var(--pg-border);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tss-save-bar-text[b-x2svu7xh0s] {
    font-size: 12px;
    color: var(--pg-text-secondary);
    margin-right: auto;
}

.tss-save-btn[b-x2svu7xh0s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    background: var(--pg-accent);
    color: white;
    cursor: pointer;
    transition: opacity var(--duration-fast);
}

.tss-save-btn:hover[b-x2svu7xh0s] {
    opacity: 0.9;
}

.tss-save-btn:disabled[b-x2svu7xh0s] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Modal ── */

.tss-modal-backdrop[b-x2svu7xh0s] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.tss-modal[b-x2svu7xh0s] {
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-lg);
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.tss-modal-header[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pg-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--pg-text);
}

.tss-modal-close[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 16px;
    transition: all var(--duration-fast);
}

.tss-modal-close:hover[b-x2svu7xh0s] {
    background: var(--pg-surface-raised);
    color: var(--pg-text);
}

.tss-modal-body[b-x2svu7xh0s] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tss-modal-footer[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--pg-border);
}

/* ── Form controls ── */

.tss-form-row[b-x2svu7xh0s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tss-form-row label[b-x2svu7xh0s] {
    font-size: 12px;
    font-weight: 500;
    color: var(--pg-text-secondary);
}

.tss-input[b-x2svu7xh0s] {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: var(--pg-surface-raised);
    color: var(--pg-text);
    outline: none;
    font-family: inherit;
    transition: border-color var(--duration-fast);
}

.tss-input:focus[b-x2svu7xh0s] {
    border-color: var(--pg-accent);
}

.tss-color-row[b-x2svu7xh0s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tss-btn-secondary[b-x2svu7xh0s] {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    background: var(--pg-surface-raised);
    color: var(--pg-text);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.tss-btn-secondary:hover[b-x2svu7xh0s] {
    border-color: var(--pg-border-hover);
    background: var(--pg-surface-overlay);
}

.tss-btn-primary[b-x2svu7xh0s] {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    background: var(--pg-accent);
    color: white;
    cursor: pointer;
    transition: opacity var(--duration-fast);
}

.tss-btn-primary:hover[b-x2svu7xh0s] {
    opacity: 0.9;
}

.tss-btn-primary:disabled[b-x2svu7xh0s] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Pages/Tools/BlockOutline.razor.rz.scp.css */
/* ================================================================
   Block Outline Validator – Scoped Styles
   Layout matches Zoom Levels: surface container + inset map.
   All colors reference design tokens from design-tokens.css.
   ================================================================ */

/* ── Container: main body rounded rectangle ── */
.block-outline-container[b-zeqq88e43c] {
    position: fixed;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    background: var(--pg-surface);
    border-radius: var(--radius-xl);
    display: flex;
    gap: 0;
    padding: 6px 6px 6px 0;
    z-index: 0;
}

/* ── Panel (left, directly on surface) ── */
.bo-panel[b-zeqq88e43c] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bo-panel-header[b-zeqq88e43c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 12px;
    flex-shrink: 0;
}

.bo-panel-header span[b-zeqq88e43c] {
    font-size: 20px;
    font-weight: 600;
    color: var(--pg-text);
    line-height: 1.2;
}

.bo-panel-body[b-zeqq88e43c] {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

/* ── Scrollbar ── */
.bo-panel-body[b-zeqq88e43c]::-webkit-scrollbar,
.bo-block-list[b-zeqq88e43c]::-webkit-scrollbar {
    width: 4px;
}

.bo-panel-body[b-zeqq88e43c]::-webkit-scrollbar-track,
.bo-block-list[b-zeqq88e43c]::-webkit-scrollbar-track {
    background: transparent;
}

.bo-panel-body[b-zeqq88e43c]::-webkit-scrollbar-thumb,
.bo-block-list[b-zeqq88e43c]::-webkit-scrollbar-thumb {
    background: var(--pg-surface-overlay);
    border-radius: 2px;
}

/* ── Map wrapper (nested rounded rectangle) ── */
.bo-map-wrapper[b-zeqq88e43c] {
    flex: 1;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--pg-shadow);
}

.block-outline-map[b-zeqq88e43c] {
    position: absolute;
    inset: 0;
}

/* ── Sections ── */
.bo-section[b-zeqq88e43c] {
    border-top: 1px solid var(--pg-border);
    padding-top: 4px;
    margin-top: 4px;
}

.bo-section:first-child[b-zeqq88e43c] {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* ── Section toggle ── */
.bo-section-toggle[b-zeqq88e43c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
    color: inherit;
}

.bo-section-toggle:hover .bo-section-label[b-zeqq88e43c],
.bo-section-toggle:hover .bo-chevron-icon[b-zeqq88e43c] {
    color: var(--pg-text-secondary);
}

.bo-section-toggle:focus-visible[b-zeqq88e43c] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.bo-section-label[b-zeqq88e43c] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

.bo-chevron-icon[b-zeqq88e43c] {
    font-size: 10px;
    color: var(--pg-text-tertiary);
}

.bo-section-content[b-zeqq88e43c] {
    padding: 4px 0 8px;
}

/* ── Vineyard Dropdown ── */
.bo-dropdown-wrap[b-zeqq88e43c] {
    position: relative;
}

.bo-dropdown-btn[b-zeqq88e43c] {
    border: 1px solid var(--pg-border);
    padding: 5px 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: var(--pg-text-secondary);
    width: 100%;
}

.bo-dropdown-btn:hover[b-zeqq88e43c] {
    border-color: var(--pg-border-hover);
    color: var(--pg-text);
}

.bo-dropdown-btn:focus-visible[b-zeqq88e43c] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.bo-dropdown-btn span[b-zeqq88e43c] {
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bo-dropdown-btn i[b-zeqq88e43c] {
    font-size: 9px;
    color: var(--pg-text-tertiary);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-out);
}

.bo-dropdown-wrap.open .bo-dropdown-btn i[b-zeqq88e43c] {
    transform: rotate(180deg);
}

.bo-dropdown-menu[b-zeqq88e43c] {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-radius: var(--radius-md);
    background-color: var(--pg-surface);
    border: 1px solid var(--pg-border);
    box-shadow: var(--pg-shadow-hover);
    padding: 6px 0;
    z-index: 1100;
    margin-top: 4px;
    animation: pg-fade-in 0.12s var(--ease-out) both;
    max-height: 300px;
    overflow-y: auto;
}

.bo-dropdown-menu a[b-zeqq88e43c] {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--pg-text);
    text-decoration: none;
    cursor: pointer;
}

.bo-dropdown-menu a:hover[b-zeqq88e43c],
.bo-dropdown-menu a.active[b-zeqq88e43c] {
    background: var(--pg-shimmer-highlight);
}

/* ── Loading ── */
.bo-loading[b-zeqq88e43c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--pg-text-secondary);
}

.bo-spinner[b-zeqq88e43c] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* ── Checkbox ── */
.bo-checkbox[b-zeqq88e43c] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 3px 0;
    font-size: 13px;
    color: var(--pg-text);
}

.bo-checkbox input[type="checkbox"][b-zeqq88e43c] {
    width: 14px;
    height: 14px;
    accent-color: var(--pg-accent);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.bo-check-bold[b-zeqq88e43c] {
    font-weight: 600;
}

/* ── Block list ── */
.bo-block-list[b-zeqq88e43c] {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    background: var(--pg-bg);
    margin-top: 4px;
}

.bo-empty[b-zeqq88e43c] {
    font-size: 13px;
    color: var(--pg-text-tertiary);
    padding: 8px 0;
    display: block;
}

/* ── Labels ── */
.bo-label[b-zeqq88e43c] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
    margin-bottom: 4px;
}

.bo-label-colored[b-zeqq88e43c] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

/* ── Legend ── */
.bo-legend[b-zeqq88e43c] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 4px 0;
}

.bo-legend-item[b-zeqq88e43c] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--pg-text-secondary);
}

.bo-legend-dot[b-zeqq88e43c] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Stat rows ── */
.bo-stat-row[b-zeqq88e43c] {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--pg-border);
    font-size: 12px;
    color: var(--pg-text);
}

.bo-stat-row:last-child[b-zeqq88e43c] {
    border-bottom: none;
}

/* ── Slider ── */
.bo-slider-row[b-zeqq88e43c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
    margin-bottom: 8px;
}

.bo-slider-header[b-zeqq88e43c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bo-slider-label[b-zeqq88e43c] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
}

.bo-slider-btns[b-zeqq88e43c] {
    display: flex;
    gap: 2px;
}

[b-zeqq88e43c] .bo-slider-btns .mud-icon-button {
    padding: 2px;
    width: 24px;
    height: 24px;
}

[b-zeqq88e43c] .bo-slider-btns .mud-icon-button .mud-icon-root {
    font-size: 16px;
}

.bo-slider[b-zeqq88e43c] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--pg-surface-raised);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.bo-slider[b-zeqq88e43c]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pg-accent);
    cursor: pointer;
    border: 2px solid var(--pg-bg);
    box-shadow: var(--pg-shadow);
}

.bo-slider[b-zeqq88e43c]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pg-accent);
    border: 2px solid var(--pg-bg);
    cursor: pointer;
}

/* ── Analyse button ── */
.bo-analyse-btn[b-zeqq88e43c] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    color: var(--pg-text-secondary);
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.bo-analyse-btn:hover[b-zeqq88e43c] {
    border-color: var(--pg-border-hover);
    color: var(--pg-text);
    box-shadow: var(--pg-shadow);
}

.bo-analyse-btn:focus-visible[b-zeqq88e43c] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.bo-analyse-btn:active[b-zeqq88e43c] {
    background: var(--pg-surface-overlay);
}

.bo-analyse-btn:disabled[b-zeqq88e43c] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Analysis overlay ── */
.bo-analysis-overlay[b-zeqq88e43c] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 16px;
    max-width: 90vw;
}

.bo-analysis-header[b-zeqq88e43c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bo-analysis-charts[b-zeqq88e43c] {
    display: flex;
    gap: 16px;
}

.bo-analysis-charts canvas[b-zeqq88e43c] {
    width: 500px;
    height: 300px;
}

/* ── Divider ── */
.bo-divider[b-zeqq88e43c] {
    border: none;
    border-top: 1px solid var(--pg-border);
    margin: 6px 0;
}
/* /Pages/Tools/FeatureTaxonomy.razor.rz.scp.css */
/* ── Feature Taxonomy Editor ── */

.ft-container[b-3ri129jwgi] {
    position: fixed;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
}

/* ── Left Panel ── */

.ft-panel[b-3ri129jwgi] {
    width: 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--pg-border);
    background: var(--pg-surface);
}

.ft-panel-header[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pg-text);
    border-bottom: 1px solid var(--pg-border);
}

.ft-badge[b-3ri129jwgi] {
    font-size: 11px;
    font-weight: 500;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-raised);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.ft-panel-body[b-3ri129jwgi] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.ft-panel-body[b-3ri129jwgi]::-webkit-scrollbar { width: 4px; }
.ft-panel-body[b-3ri129jwgi]::-webkit-scrollbar-track { background: transparent; }
.ft-panel-body[b-3ri129jwgi]::-webkit-scrollbar-thumb { background: var(--pg-surface-overlay); border-radius: 2px; }

.ft-panel-footer[b-3ri129jwgi] {
    padding: 12px 16px;
    border-top: 1px solid var(--pg-border);
}

/* ── Section labels ── */

.ft-section[b-3ri129jwgi] {
    padding: 8px 16px 4px;
}

.ft-section-label[b-3ri129jwgi] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

/* ── Category list ── */

.ft-category-item[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--pg-text);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--duration-fast);
    text-align: left;
}

.ft-category-item:hover[b-3ri129jwgi] {
    background: var(--pg-surface-raised);
}

.ft-category-item.active[b-3ri129jwgi] {
    background: var(--pg-surface-raised);
    color: var(--pg-accent);
    font-weight: 500;
}

.ft-category-name[b-3ri129jwgi] {
    flex: 1;
}

.ft-category-count[b-3ri129jwgi] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

/* ── Loading / empty ── */

.ft-loading[b-3ri129jwgi],
.ft-placeholder[b-3ri129jwgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
}

.ft-empty-state[b-3ri129jwgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
    text-align: center;
}

.ft-spinner[b-3ri129jwgi] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
}

/* ── Main area ── */

.ft-main[b-3ri129jwgi] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.ft-main[b-3ri129jwgi]::-webkit-scrollbar { width: 4px; }
.ft-main[b-3ri129jwgi]::-webkit-scrollbar-track { background: transparent; }
.ft-main[b-3ri129jwgi]::-webkit-scrollbar-thumb { background: var(--pg-surface-overlay); border-radius: 2px; }

.ft-main-header[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.ft-main-header h2[b-3ri129jwgi] {
    font-size: 18px;
    font-weight: 600;
    color: var(--pg-text);
    margin: 0;
}

.ft-header-badge[b-3ri129jwgi] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-raised);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* ── Type cards ── */

.ft-types-list[b-3ri129jwgi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ft-type-card[b-3ri129jwgi] {
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-fast);
}

.ft-type-card.active[b-3ri129jwgi] {
    border-color: var(--pg-accent);
}

.ft-type-header[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--pg-text);
    text-align: left;
    transition: background var(--duration-fast);
}

.ft-type-header:hover[b-3ri129jwgi] {
    background: var(--pg-surface-raised);
}

.ft-type-info[b-3ri129jwgi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ft-type-name[b-3ri129jwgi] {
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-3ri129jwgi] .ft-type-icon {
    font-size: 15px;
    opacity: 0.8;
}

.ft-type-code[b-3ri129jwgi] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    font-family: monospace;
}

.ft-type-badges[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ft-geometry-badge[b-3ri129jwgi] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--pg-text);
    background: var(--pg-surface-overlay);
}

.ft-geometry-point[b-3ri129jwgi] { color: #4a9eff; background: rgba(74, 158, 255, 0.12); }
.ft-geometry-line[b-3ri129jwgi] { color: #ff9f43; background: rgba(255, 159, 67, 0.12); }
.ft-geometry-area[b-3ri129jwgi] { color: #26de81; background: rgba(38, 222, 129, 0.12); }

.ft-attr-count[b-3ri129jwgi] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
}

.ft-disabled-badge[b-3ri129jwgi] {
    font-size: 10px;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.12);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.ft-chevron[b-3ri129jwgi] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
    transition: transform var(--duration-normal);
}

.ft-chevron.open[b-3ri129jwgi] {
    transform: rotate(180deg);
}

/* ── Type detail (expanded) ── */

.ft-type-detail[b-3ri129jwgi] {
    padding: 12px 14px 16px;
    border-top: 1px solid var(--pg-border);
    background: var(--pg-surface-raised);
}

.ft-detail-section[b-3ri129jwgi] {
    margin-bottom: 16px;
}

.ft-detail-section:last-of-type[b-3ri129jwgi] {
    margin-bottom: 12px;
}

.ft-section-header-row[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* ── Form controls ── */

.ft-form-row[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ft-form-row label[b-3ri129jwgi] {
    font-size: 12px;
    color: var(--pg-text-secondary);
    min-width: 90px;
}

.ft-input[b-3ri129jwgi] {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: var(--pg-surface);
    color: var(--pg-text);
    outline: none;
    transition: border-color var(--duration-fast);
}

.ft-input:focus[b-3ri129jwgi] {
    border-color: var(--pg-accent);
}

.ft-input:disabled[b-3ri129jwgi] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ft-input-sm[b-3ri129jwgi] {
    width: 70px;
}

.ft-checkbox[b-3ri129jwgi] {
    accent-color: var(--pg-accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* ── Attributes table ── */

.ft-attr-table[b-3ri129jwgi] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ft-attr-header-row[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

.ft-attr-row[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ft-attr-col-key[b-3ri129jwgi] { flex: 0 0 120px; }
.ft-attr-col-name[b-3ri129jwgi] { flex: 0 0 140px; }
.ft-attr-col-type[b-3ri129jwgi] { flex: 0 0 80px; }
.ft-attr-col-unit[b-3ri129jwgi] { flex: 0 0 70px; }
.ft-attr-col-req[b-3ri129jwgi] { flex: 0 0 30px; text-align: center; }
.ft-attr-col-options[b-3ri129jwgi] { flex: 1; min-width: 100px; }
.ft-attr-col-actions[b-3ri129jwgi] { flex: 0 0 28px; }

.ft-empty-attrs[b-3ri129jwgi] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
    padding: 8px 0;
}

/* ── Buttons ── */

.ft-seed-btn[b-3ri129jwgi],
.ft-save-btn[b-3ri129jwgi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    background: var(--pg-surface-raised);
    color: var(--pg-text);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.ft-seed-btn:hover[b-3ri129jwgi],
.ft-save-btn:hover[b-3ri129jwgi] {
    border-color: var(--pg-border-hover);
    background: var(--pg-surface-overlay);
}

.ft-seed-btn:disabled[b-3ri129jwgi],
.ft-save-btn:disabled[b-3ri129jwgi] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ft-save-btn[b-3ri129jwgi] {
    background: var(--pg-accent);
    color: white;
    border-color: var(--pg-accent);
}

.ft-save-btn:hover[b-3ri129jwgi] {
    opacity: 0.9;
}

.ft-add-btn[b-3ri129jwgi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--pg-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.ft-add-btn:hover[b-3ri129jwgi] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
}

.ft-remove-btn[b-3ri129jwgi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast);
}

.ft-remove-btn:hover[b-3ri129jwgi] {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

/* ── Save row ── */

.ft-save-row[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

.ft-save-message[b-3ri129jwgi] {
    font-size: 12px;
}

.ft-save-message.success[b-3ri129jwgi] {
    color: #26de81;
}

.ft-save-message.error[b-3ri129jwgi] {
    color: #e74c3c;
}

/* ── Properties grid ── */

.ft-props-grid[b-3ri129jwgi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
}

.ft-form-row-check[b-3ri129jwgi] {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ── Map Style Editor ── */

.ft-style-preview-compact[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 60px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-top: 6px;
}

.ft-preview-dot[b-3ri129jwgi] {
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[b-3ri129jwgi] .ft-preview-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.ft-preview-label[b-3ri129jwgi] {
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ft-preview-area-svg[b-3ri129jwgi] {
    width: 100%;
    max-width: 120px;
    height: 60px;
}

.ft-map-preview[b-3ri129jwgi] {
    width: 100%;
    height: 260px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--pg-border);
    margin-top: 6px;
}

.ft-style-controls[b-3ri129jwgi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.ft-controls-grid[b-3ri129jwgi] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 20px;
}

.ft-checks-row[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 2px;
}

.ft-checks-row > label[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pg-text-secondary);
    cursor: pointer;
}

.ft-hint[b-3ri129jwgi] {
    font-size: 10px;
    font-weight: 400;
    color: var(--pg-text-tertiary);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.ft-style-row[b-3ri129jwgi] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ft-style-row > label[b-3ri129jwgi] {
    font-size: 11px;
    font-weight: 500;
    color: var(--pg-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ft-style-row-check[b-3ri129jwgi] {
    flex-direction: row;
    align-items: center;
}

.ft-style-row-check > label[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--pg-text-secondary);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

/* Color swatches */

.ft-color-swatches[b-3ri129jwgi] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ft-swatch[b-3ri129jwgi] {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;
    padding: 0;
}

.ft-swatch:hover[b-3ri129jwgi] {
    transform: scale(1.15);
}

.ft-swatch.active[b-3ri129jwgi] {
    border-color: var(--pg-text);
    box-shadow: 0 0 0 1px var(--pg-surface);
}

/* Segmented control */

.ft-segmented[b-3ri129jwgi] {
    display: inline-flex;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ft-seg[b-3ri129jwgi] {
    padding: 3px 10px;
    font-size: 11px;
    border: none;
    background: none;
    color: var(--pg-text-secondary);
    cursor: pointer;
    transition: all 0.12s;
    text-transform: capitalize;
    white-space: nowrap;
}

.ft-seg:not(:last-child)[b-3ri129jwgi] {
    border-right: 1px solid var(--pg-border);
}

.ft-seg:hover[b-3ri129jwgi] {
    background: var(--pg-surface-raised);
}

.ft-seg.active[b-3ri129jwgi] {
    background: var(--pg-accent);
    color: white;
}

/* Icon input */

.ft-icon-input[b-3ri129jwgi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-3ri129jwgi] .ft-icon-hint {
    font-size: 16px;
    color: var(--pg-text-secondary);
}

[b-3ri129jwgi] .ft-icon-lib-link {
    font-size: 11px;
    font-weight: 400;
    color: var(--pg-text-tertiary);
    text-decoration: none;
    margin-left: 6px;
    opacity: 0.7;
    transition: opacity 0.12s;
}
[b-3ri129jwgi] .ft-icon-lib-link:hover {
    opacity: 1;
    color: var(--pg-accent);
}
[b-3ri129jwgi] .ft-icon-lib-link .bi {
    font-size: 9px;
    margin-right: 2px;
}

.ft-input-narrow[b-3ri129jwgi] {
    max-width: 180px;
}

/* Range slider */

.ft-style-row input[type="range"][b-3ri129jwgi] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 200px;
    height: 4px;
    border-radius: 2px;
    background: var(--pg-border);
    outline: none;
}

.ft-style-row input[type="range"][b-3ri129jwgi]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pg-accent);
    cursor: pointer;
    border: 2px solid var(--pg-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* /Pages/Tools/ReleaseNotes/CreateEditReleaseNote.razor.rz.scp.css */
/* ================================================================
   Create / Edit Release Note – Scoped Styles
   Split-pane: form panel (left) + live markdown preview (right).
   All colors reference design tokens from design-tokens.css.
   ================================================================ */

/* ── Container ── */
.rn-edit-container[b-f3chp45ecu] {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 24px);
    margin: -12px -16px;
    background: var(--pg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--pg-border);
    overflow: hidden;
}

/* ── Form Panel ── */
.rn-panel[b-f3chp45ecu] {
    width: 440px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--pg-border);
    background: var(--pg-surface);
}

.rn-panel-header[b-f3chp45ecu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--pg-border);
    flex-shrink: 0;
}

.rn-panel-header > span[b-f3chp45ecu] {
    font-size: 15px;
    font-weight: 600;
    color: var(--pg-text);
}

.rn-back-btn[b-f3chp45ecu] {
    text-decoration: none;
    font-size: 12px;
    padding: 4px 10px;
}

.rn-panel-body[b-f3chp45ecu] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.rn-panel-body[b-f3chp45ecu]::-webkit-scrollbar { width: 4px; }
.rn-panel-body[b-f3chp45ecu]::-webkit-scrollbar-track { background: transparent; }
.rn-panel-body[b-f3chp45ecu]::-webkit-scrollbar-thumb { background: var(--pg-surface-overlay); border-radius: 2px; }

.rn-panel-footer[b-f3chp45ecu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--pg-border);
    flex-shrink: 0;
    background: var(--pg-surface);
}

/* ── Form helpers ── */
.rn-form-row[b-f3chp45ecu] {
    display: flex;
    gap: 12px;
}

.rn-flex-1[b-f3chp45ecu] { flex: 1; }

.rn-hint[b-f3chp45ecu] {
    font-weight: 400;
    color: var(--pg-text-tertiary);
}

.rn-body-input[b-f3chp45ecu] {
    resize: vertical;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.7;
}

.rn-toggle-row[b-f3chp45ecu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.rn-toggle-label[b-f3chp45ecu] {
    font-size: 13px;
    font-weight: 500;
    color: var(--pg-text);
}

.rn-published-hint[b-f3chp45ecu] {
    font-size: 11px;
    color: var(--jungle);
    font-weight: 500;
}

/* ── Preview Panel ── */
.rn-preview[b-f3chp45ecu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--pg-bg);
    overflow: hidden;
}

.rn-preview-chrome[b-f3chp45ecu] {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--pg-border);
    flex-shrink: 0;
}

.rn-preview-label[b-f3chp45ecu] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--pg-text-tertiary);
}

.rn-preview-scroll[b-f3chp45ecu] {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
}

.rn-preview-scroll[b-f3chp45ecu]::-webkit-scrollbar { width: 4px; }
.rn-preview-scroll[b-f3chp45ecu]::-webkit-scrollbar-track { background: transparent; }
.rn-preview-scroll[b-f3chp45ecu]::-webkit-scrollbar-thumb { background: var(--pg-surface-overlay); border-radius: 2px; }

.rn-preview-card[b-f3chp45ecu] {
    max-width: 600px;
}

/* ── Preview content ── */
.rn-preview-meta[b-f3chp45ecu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.rn-preview-title[b-f3chp45ecu] {
    font-size: 22px;
    font-weight: 700;
    color: var(--pg-text);
    margin: 0 0 18px;
    line-height: 1.25;
    letter-spacing: -0.3px;
}

.rn-preview-placeholder[b-f3chp45ecu] {
    color: var(--pg-text-tertiary);
    font-weight: 400;
    font-size: 14px;
    font-style: italic;
}

.rn-preview-date[b-f3chp45ecu] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
}

/* ── Tags ── */
.rn-tag[b-f3chp45ecu] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.rn-tag-version[b-f3chp45ecu] {
    background: rgba(146,78,140,0.12);
    color: var(--pg-accent);
}

.rn-tag-portal[b-f3chp45ecu] { background: rgba(94,106,210,0.12); color: var(--indigo); }
.rn-tag-app[b-f3chp45ecu]    { background: rgba(78,167,252,0.12); color: var(--horizon); }
.rn-tag-both[b-f3chp45ecu]   { background: var(--pg-surface-raised); color: var(--pg-text-secondary); }

/* ── Markdown body ── */
[b-f3chp45ecu] .rn-markdown h1,
[b-f3chp45ecu] .rn-markdown h2,
[b-f3chp45ecu] .rn-markdown h3,
[b-f3chp45ecu] .rn-markdown h4 {
    color: var(--pg-text);
    margin: 20px 0 8px;
    font-weight: 600;
    line-height: 1.3;
}

[b-f3chp45ecu] .rn-markdown h1 { font-size: 1.35em; }
[b-f3chp45ecu] .rn-markdown h2 { font-size: 1.15em; }
[b-f3chp45ecu] .rn-markdown h3 { font-size: 1.0em; }
[b-f3chp45ecu] .rn-markdown h4 { font-size: 0.95em; color: var(--pg-text-secondary); }

[b-f3chp45ecu] .rn-markdown p {
    margin: 0 0 12px;
    line-height: 1.7;
    color: var(--pg-text-secondary);
    font-size: 13px;
}

[b-f3chp45ecu] .rn-markdown ul,
[b-f3chp45ecu] .rn-markdown ol {
    padding-left: 20px;
    margin: 0 0 12px;
}

[b-f3chp45ecu] .rn-markdown li {
    margin-bottom: 4px;
    line-height: 1.65;
    color: var(--pg-text-secondary);
    font-size: 13px;
}

[b-f3chp45ecu] .rn-markdown li::marker {
    color: var(--pg-accent);
}

[b-f3chp45ecu] .rn-markdown code {
    background: var(--pg-surface-raised);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--pg-text);
}

[b-f3chp45ecu] .rn-markdown pre {
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    overflow-x: auto;
    margin: 0 0 14px;
}

[b-f3chp45ecu] .rn-markdown pre code {
    background: none;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
}

[b-f3chp45ecu] .rn-markdown a {
    color: var(--pg-accent);
    text-decoration: none;
    font-weight: 500;
}

[b-f3chp45ecu] .rn-markdown a:hover {
    text-decoration: underline;
}

[b-f3chp45ecu] .rn-markdown blockquote {
    border-left: 3px solid var(--pg-accent);
    padding: 4px 0 4px 14px;
    margin: 12px 0;
    color: var(--pg-text-tertiary);
}

[b-f3chp45ecu] .rn-markdown blockquote p {
    color: var(--pg-text-tertiary);
}

[b-f3chp45ecu] .rn-markdown img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 8px 0;
}

[b-f3chp45ecu] .rn-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
    font-size: 13px;
}

[b-f3chp45ecu] .rn-markdown th,
[b-f3chp45ecu] .rn-markdown td {
    border: 1px solid var(--pg-border);
    padding: 8px 12px;
    text-align: left;
}

[b-f3chp45ecu] .rn-markdown th {
    background: var(--pg-surface-raised);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

[b-f3chp45ecu] .rn-markdown hr {
    border: none;
    border-top: 1px solid var(--pg-border);
    margin: 20px 0;
}

/* ── Spinner ── */
.rn-spinner[b-f3chp45ecu] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--pg-accent-text);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
    display: inline-block;
}
/* /Pages/Tools/ReleaseNotes/ReleaseNotesList.razor.rz.scp.css */
/* ================================================================
   Release Notes List – Scoped Styles
   Admin table listing all release notes.
   All colors reference design tokens from design-tokens.css.
   ================================================================ */

.rn-list-container[b-73tgzfw1b5] {
    padding: 0;
}

/* ── Header ── */
.rn-list-header[b-73tgzfw1b5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.rn-list-title[b-73tgzfw1b5] {
    font-size: 20px;
    font-weight: 600;
    color: var(--pg-text);
}

.rn-list-badge[b-73tgzfw1b5] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    background: var(--pg-surface-raised);
    color: var(--pg-text-secondary);
    margin-left: 8px;
    vertical-align: middle;
}

.rn-list-actions[b-73tgzfw1b5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Search ── */
.rn-search-wrap[b-73tgzfw1b5] {
    position: relative;
}

.rn-search-icon[b-73tgzfw1b5] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--pg-text-tertiary);
    pointer-events: none;
}

.rn-search-input[b-73tgzfw1b5] {
    padding-left: 32px !important;
    width: 220px;
    font-size: 13px;
}

/* ── Tags ── */
.rn-version-tag[b-73tgzfw1b5] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    background: rgba(146,78,140,0.12);
    color: var(--pg-accent);
    letter-spacing: 0.3px;
}

.rn-platform-tag[b-73tgzfw1b5] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rn-platform-portal[b-73tgzfw1b5] { background: rgba(94,106,210,0.12); color: var(--indigo); }
.rn-platform-app[b-73tgzfw1b5]    { background: rgba(78,167,252,0.12); color: var(--horizon); }
.rn-platform-both[b-73tgzfw1b5]   { background: var(--pg-surface-raised); color: var(--pg-text-secondary); }

.rn-status-tag[b-73tgzfw1b5] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
}

.rn-status-published[b-73tgzfw1b5] {
    background: rgba(38,166,68,0.12);
    color: var(--jungle);
}

.rn-status-draft[b-73tgzfw1b5] {
    background: var(--pg-surface-raised);
    color: var(--pg-text-tertiary);
}

/* ── Row actions ── */
.rn-row-actions[b-73tgzfw1b5] {
    display: flex;
    gap: 2px;
}

/* ── Loading ── */
.rn-loading[b-73tgzfw1b5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
    font-size: 13px;
    color: var(--pg-text-secondary);
}

.rn-spinner[b-73tgzfw1b5] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
    display: inline-block;
}

/* ── Empty state ── */
.rn-empty[b-73tgzfw1b5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
    text-align: center;
}

.rn-empty-icon[b-73tgzfw1b5] {
    font-size: 32px;
    color: var(--pg-text-tertiary);
}
/* /Pages/Tools/TroubleSpotTaxonomy.razor.rz.scp.css */
/* ── Trouble Spot Taxonomy Editor ── */

.tst-container[b-92nqhz9hb6] {
    position: fixed;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
}

/* ── Left Panel ── */

.tst-panel[b-92nqhz9hb6] {
    width: 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--pg-border);
    background: var(--pg-surface);
}

.tst-panel-header[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pg-text);
    border-bottom: 1px solid var(--pg-border);
}

.tst-badge[b-92nqhz9hb6] {
    font-size: 11px;
    font-weight: 500;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-raised);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.tst-panel-body[b-92nqhz9hb6] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.tst-panel-body[b-92nqhz9hb6]::-webkit-scrollbar { width: 4px; }
.tst-panel-body[b-92nqhz9hb6]::-webkit-scrollbar-track { background: transparent; }
.tst-panel-body[b-92nqhz9hb6]::-webkit-scrollbar-thumb { background: var(--pg-surface-overlay); border-radius: 2px; }

.tst-panel-footer[b-92nqhz9hb6] {
    padding: 10px 16px;
    border-top: 1px solid var(--pg-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tst-footer-actions[b-92nqhz9hb6] {
    display: flex;
    gap: 4px;
}

.tst-action-btn[b-92nqhz9hb6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--pg-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.tst-action-btn:hover[b-92nqhz9hb6] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
}

.tst-import-btn[b-92nqhz9hb6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--pg-text-tertiary);
    cursor: pointer;
    transition: all var(--duration-fast);
    width: 100%;
    justify-content: center;
}

.tst-import-btn:hover[b-92nqhz9hb6] {
    border-color: var(--pg-accent);
    color: var(--pg-accent);
}

/* ── Section labels ── */

.tst-section[b-92nqhz9hb6],
.tst-types-section[b-92nqhz9hb6] {
    padding: 8px 0 4px;
}

.tst-section-label[b-92nqhz9hb6] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

.tst-section[b-92nqhz9hb6] {
    padding-left: 16px;
    padding-right: 16px;
}

/* ── Category list ── */

.tst-category-item[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--pg-text);
    font-size: 13px;
    cursor: pointer;
    transition: background var(--duration-fast);
    text-align: left;
}

.tst-category-item:hover[b-92nqhz9hb6] {
    background: var(--pg-surface-raised);
}

.tst-category-item.active[b-92nqhz9hb6] {
    background: var(--pg-surface-raised);
    color: var(--pg-accent);
    font-weight: 500;
}

.tst-category-marker[b-92nqhz9hb6] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tst-category-name[b-92nqhz9hb6] {
    flex: 1;
}

.tst-category-count[b-92nqhz9hb6] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-overlay);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

/* ── Loading / empty ── */

.tst-loading[b-92nqhz9hb6],
.tst-placeholder[b-92nqhz9hb6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
}

.tst-empty-state[b-92nqhz9hb6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
    text-align: center;
}

.tst-spinner[b-92nqhz9hb6] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
}

/* ── Main area ── */

.tst-main[b-92nqhz9hb6] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.tst-main[b-92nqhz9hb6]::-webkit-scrollbar { width: 4px; }
.tst-main[b-92nqhz9hb6]::-webkit-scrollbar-track { background: transparent; }
.tst-main[b-92nqhz9hb6]::-webkit-scrollbar-thumb { background: var(--pg-surface-overlay); border-radius: 2px; }

.tst-main-header[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.tst-main-header h2[b-92nqhz9hb6] {
    font-size: 18px;
    font-weight: 600;
    color: var(--pg-text);
    margin: 0;
}

.tst-header-badge[b-92nqhz9hb6] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
    background: var(--pg-surface-raised);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

/* ── Marker preview (header) ── */

.tst-marker-preview[b-92nqhz9hb6] {
    width: 36px;
    height: 36px;
    position: relative;
    flex-shrink: 0;
}

[b-92nqhz9hb6] .tst-marker-inner {
    position: absolute;
    inset: 2.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tst-marker-letter[b-92nqhz9hb6] {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

/* ── Styling section ── */

.tst-styling-section[b-92nqhz9hb6] {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
}

.tst-styling-row[b-92nqhz9hb6] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.tst-form-group[b-92nqhz9hb6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tst-form-group label[b-92nqhz9hb6] {
    font-size: 11px;
    font-weight: 500;
    color: var(--pg-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tst-color-input[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tst-color-picker[b-92nqhz9hb6] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    padding: 1px;
    cursor: pointer;
    background: none;
}

/* ── Type cards ── */

.tst-types-list[b-92nqhz9hb6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tst-type-card[b-92nqhz9hb6] {
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration-fast);
}

.tst-type-card.active[b-92nqhz9hb6] {
    border-color: var(--pg-accent);
}

.tst-type-header[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--pg-text);
    text-align: left;
    transition: background var(--duration-fast);
}

.tst-type-header:hover[b-92nqhz9hb6] {
    background: var(--pg-surface-raised);
}

.tst-type-info[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tst-type-marker-mini[b-92nqhz9hb6] {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
}

[b-92nqhz9hb6] .tst-mini-marker-inner {
    position: absolute;
    inset: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

.tst-type-name[b-92nqhz9hb6] {
    font-size: 13px;
    font-weight: 500;
    display: block;
}

.tst-type-code[b-92nqhz9hb6] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    font-family: monospace;
    display: block;
}

.tst-type-badges[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tst-disabled-badge[b-92nqhz9hb6] {
    font-size: 10px;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.12);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.tst-chevron[b-92nqhz9hb6] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
    transition: transform var(--duration-normal);
}

.tst-chevron.open[b-92nqhz9hb6] {
    transform: rotate(180deg);
}

/* ── Type detail (expanded) ── */

.tst-type-detail[b-92nqhz9hb6] {
    padding: 12px 14px 16px;
    border-top: 1px solid var(--pg-border);
    background: var(--pg-surface-raised);
}

.tst-detail-section[b-92nqhz9hb6] {
    margin-bottom: 12px;
}

/* ── Form controls ── */

.tst-form-row[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tst-form-row label[b-92nqhz9hb6] {
    font-size: 12px;
    color: var(--pg-text-secondary);
    min-width: 90px;
}

.tst-input[b-92nqhz9hb6] {
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    background: var(--pg-surface);
    color: var(--pg-text);
    outline: none;
    transition: border-color var(--duration-fast);
}

.tst-input:focus[b-92nqhz9hb6] {
    border-color: var(--pg-accent);
}

.tst-input-sm[b-92nqhz9hb6] {
    width: 100px;
}

.tst-input-xs[b-92nqhz9hb6] {
    width: 60px;
}

.tst-checkbox[b-92nqhz9hb6] {
    accent-color: var(--pg-accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* ── Buttons ── */

.tst-seed-btn[b-92nqhz9hb6],
.tst-save-btn[b-92nqhz9hb6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    background: var(--pg-surface-raised);
    color: var(--pg-text);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.tst-seed-btn:hover[b-92nqhz9hb6],
.tst-save-btn:hover[b-92nqhz9hb6] {
    border-color: var(--pg-border-hover);
    background: var(--pg-surface-overlay);
}

.tst-seed-btn:disabled[b-92nqhz9hb6],
.tst-save-btn:disabled[b-92nqhz9hb6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tst-save-btn[b-92nqhz9hb6] {
    background: var(--pg-accent);
    color: white;
    border-color: var(--pg-accent);
}

.tst-save-btn:hover[b-92nqhz9hb6] {
    opacity: 0.9;
}

/* ── Save row ── */

.tst-save-row[b-92nqhz9hb6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

.tst-save-message[b-92nqhz9hb6] {
    font-size: 12px;
}

.tst-save-message.success[b-92nqhz9hb6] {
    color: #26de81;
}

.tst-save-message.error[b-92nqhz9hb6] {
    color: #e74c3c;
}

/* ── Preview section ── */

.tst-preview-section[b-92nqhz9hb6] {
    margin-top: 24px;
    padding: 14px 16px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
}

.tst-preview-grid[b-92nqhz9hb6] {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    justify-content: center;
}

.tst-preview-card[b-92nqhz9hb6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tst-preview-marker-wrap[b-92nqhz9hb6] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--pg-border);
}

.tst-preview-marker[b-92nqhz9hb6] {
    position: relative;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

[b-92nqhz9hb6] .tst-preview-marker-inner {
    position: absolute;
    inset: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tst-preview-label[b-92nqhz9hb6] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    font-weight: 500;
}

/* ── Add / Delete controls ── */

.tst-add-btn[b-92nqhz9hb6] {
    width: 100%;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    color: var(--pg-text-tertiary);
    padding: 6px 8px;
    border: 1px dashed var(--pg-border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tst-add-btn:hover[b-92nqhz9hb6] {
    color: var(--pg-accent);
    border-color: var(--pg-accent);
    background: var(--pg-surface-overlay);
}

.tst-add-form[b-92nqhz9hb6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--pg-surface-overlay);
    border-radius: var(--radius-sm);
    border: 1px solid var(--pg-border);
    margin-top: 4px;
}

.tst-add-form-actions[b-92nqhz9hb6] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.tst-btn-sm[b-92nqhz9hb6] {
    padding: 3px 10px !important;
    font-size: 11px !important;
}

.tst-delete-btn[b-92nqhz9hb6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    color: #DC2626;
    background: transparent;
    border: 1px solid #FCA5A5;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.tst-delete-btn:hover[b-92nqhz9hb6] {
    background: #FEF2F2;
    border-color: #DC2626;
}

.tst-delete-btn:disabled[b-92nqhz9hb6] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Confirmation dialog ── */

.tst-overlay[b-92nqhz9hb6] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.tst-confirm-dialog[b-92nqhz9hb6] {
    background: white;
    padding: 20px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    max-width: 380px;
    width: 100%;
}

.tst-confirm-dialog p[b-92nqhz9hb6] {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--pg-text-primary);
}

.tst-confirm-detail[b-92nqhz9hb6] {
    font-size: 12px !important;
    color: var(--pg-text-secondary) !important;
}

.tst-confirm-actions[b-92nqhz9hb6] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}
/* /Pages/Tools/Varieties.razor.rz.scp.css */
/* ================================================================
   Variety Colours – Scoped Styles
   Mirrors the dev-tool aesthetic of /tools/zoom-levels and
   /tools/troublespot-taxonomy. Tokens come from design-tokens.css.
   ================================================================ */

.vc-container[b-0257qztye6] {
    position: fixed;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    background: var(--pg-surface);
    border-radius: var(--radius-xl);
    display: flex;
    gap: 0;
    padding: 6px 6px 6px 0;
    z-index: 0;
}

/* ── Left panel ── */
.vc-panel[b-0257qztye6] {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vc-panel-header[b-0257qztye6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 12px;
    flex-shrink: 0;
}

.vc-title[b-0257qztye6] {
    font-size: 20px;
    font-weight: 600;
    color: var(--pg-text);
    line-height: 1.2;
}

.vc-badge[b-0257qztye6] {
    font-family: 'Inter', monospace;
    font-size: 13px;
    font-weight: 600;
    background: var(--pg-surface-raised);
    color: var(--pg-text-secondary);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.3px;
}

.vc-panel-body[b-0257qztye6] {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

.vc-panel-body[b-0257qztye6]::-webkit-scrollbar { width: 4px; }
.vc-panel-body[b-0257qztye6]::-webkit-scrollbar-track { background: transparent; }
.vc-panel-body[b-0257qztye6]::-webkit-scrollbar-thumb {
    background: var(--pg-surface-overlay);
    border-radius: 2px;
}

/* ── Sections ── */
.vc-section[b-0257qztye6] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0 4px;
}

.vc-section-label[b-0257qztye6] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pg-text-tertiary);
    font-weight: 500;
}

.vc-section-hint[b-0257qztye6] {
    color: var(--pg-text-tertiary);
    font-size: 12px;
    cursor: help;
    transition: color 0.12s ease;
}

.vc-section-hint:hover[b-0257qztye6] {
    color: var(--pg-text-secondary);
}

/* ── Variety rows ── */
.vc-row[b-0257qztye6] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--pg-text);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.vc-row:hover[b-0257qztye6] {
    background: var(--pg-surface-raised);
}

.vc-row:focus-visible[b-0257qztye6] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.vc-row.active[b-0257qztye6] {
    background: var(--pg-surface-raised);
    border-color: var(--pg-border);
}

.vc-row-swatch[b-0257qztye6] {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.vc-row-swatch-fallback[b-0257qztye6] {
    /* Diagonal hatch to flag "auto" colours */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.18) 0,
        rgba(255, 255, 255, 0.18) 2px,
        transparent 2px,
        transparent 4px
    );
}

.vc-row-name[b-0257qztye6] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vc-row-tag[b-0257qztye6] {
    font-size: 14px;
    color: var(--pg-accent);
    line-height: 1;
}

.vc-row.edited[b-0257qztye6] {
    border-color: var(--pg-accent);
}

/* ── Footer ── */
.vc-panel-footer[b-0257qztye6] {
    border-top: 1px solid var(--pg-border);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.vc-footer-actions[b-0257qztye6] {
    display: flex;
    gap: 6px;
}

.vc-footer-hint[b-0257qztye6] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
    line-height: 1.4;
}

.vc-footer-hint code[b-0257qztye6] {
    font-family: 'Inter', monospace;
    font-size: 10px;
    background: var(--pg-surface-raised);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ── Buttons ── */
.vc-action-btn[b-0257qztye6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--pg-surface-raised);
    color: var(--pg-text);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.vc-action-btn:hover:not(:disabled)[b-0257qztye6] {
    background: var(--pg-surface-overlay);
    border-color: var(--pg-border-strong, var(--pg-border));
}

.vc-action-btn:focus-visible[b-0257qztye6] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.vc-action-btn:disabled[b-0257qztye6] {
    opacity: 0.5;
    cursor: default;
}

.vc-btn-sm[b-0257qztye6] {
    padding: 4px 8px;
    font-size: 11px;
}

.vc-export-btn[b-0257qztye6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--pg-accent);
    color: #fff;
    border: 1px solid var(--pg-accent);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.12s ease;
    flex: 1;
    justify-content: center;
}

.vc-export-btn:hover[b-0257qztye6] {
    filter: brightness(1.08);
}

.vc-export-btn:focus-visible[b-0257qztye6] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.vc-clipboard-msg[b-0257qztye6] {
    font-size: 11px;
    color: var(--pg-text-secondary);
    font-weight: 500;
}

/* ── Loading / states ── */
.vc-loading[b-0257qztye6],
.vc-empty[b-0257qztye6],
.vc-placeholder[b-0257qztye6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--pg-text-secondary);
    font-size: 13px;
    text-align: center;
}

.vc-spinner[b-0257qztye6] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: vc-spin-b-0257qztye6 0.7s linear infinite;
    display: inline-block;
}

@keyframes vc-spin-b-0257qztye6 {
    to { transform: rotate(360deg); }
}

.vc-error[b-0257qztye6] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    background: rgba(235, 87, 87, 0.08);
    color: #EB5757;
    border-radius: var(--radius-md);
    font-size: 13px;
}

.vc-error i[b-0257qztye6] {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Main editor area ── */
.vc-main[b-0257qztye6] {
    flex: 1;
    min-width: 0;
    background: var(--pg-surface-raised);
    border-radius: var(--radius-lg);
    overflow-y: auto;
    padding: 24px;
}

.vc-mt-12[b-0257qztye6] { margin-top: 12px; }

.vc-editor[b-0257qztye6] {
    max-width: 720px;
}

.vc-editor-header[b-0257qztye6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pg-border);
}

.vc-editor-swatch[b-0257qztye6] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.15),
        var(--pg-shadow);
}

.vc-editor-meta h2[b-0257qztye6] {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: var(--pg-text);
}

.vc-editor-sub[b-0257qztye6] {
    font-size: 12px;
    color: var(--pg-text-secondary);
    font-family: 'Inter', monospace;
    letter-spacing: 0.3px;
}

/* ── Palette swatches ── */
.vc-swatches[b-0257qztye6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.vc-swatch[b-0257qztye6] {
    width: 34px;
    height: 34px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.vc-swatch:hover[b-0257qztye6] {
    transform: translateY(-1px);
}

.vc-swatch.active[b-0257qztye6] {
    border-color: var(--pg-text);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.25),
        0 0 0 2px var(--pg-surface);
}

.vc-swatch:focus-visible[b-0257qztye6] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

/* ── Hex inputs ── */
.vc-hex-row[b-0257qztye6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.vc-color-input[b-0257qztye6] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    padding: 2px;
}

.vc-hex-text[b-0257qztye6] {
    font-family: 'Inter', monospace;
    font-size: 13px;
    padding: 6px 10px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    color: var(--pg-text);
    width: 110px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vc-hex-text:focus[b-0257qztye6] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 0;
    border-color: var(--pg-accent);
}

/* ── Preview tiles ── */
.vc-preview-grid[b-0257qztye6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.vc-preview-tile[b-0257qztye6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #1f2937;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%),
        radial-gradient(circle at 30% 30%, rgba(80, 110, 80, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(60, 80, 60, 0.25) 0%, transparent 60%);
    border-radius: var(--radius-md);
}

.vc-preview-tile-label[b-0257qztye6] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.vc-preview-block[b-0257qztye6] {
    width: 80px;
    height: 50px;
    background: var(--block-fill);
    border: 2px solid var(--block-color);
    border-radius: 4px;
}

.vc-preview-row[b-0257qztye6] {
    width: 80px;
    height: 3px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.vc-preview-bubble[b-0257qztye6] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}

/* ── Copy overlay ── */
.vc-overlay[b-0257qztye6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.vc-confirm-dialog[b-0257qztye6] {
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    padding: 20px;
    min-width: 320px;
    max-width: 720px;
    width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.vc-copy-dialog[b-0257qztye6] {
    gap: 12px;
}

.vc-copy-header[b-0257qztye6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vc-copy-header h3[b-0257qztye6] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--pg-text);
}

.vc-copy-hint[b-0257qztye6] {
    margin: 0;
    font-size: 12px;
    color: var(--pg-text-secondary);
}

.vc-copy-hint code[b-0257qztye6] {
    font-family: 'Inter', monospace;
    background: var(--pg-surface-raised);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}

.vc-code-block[b-0257qztye6] {
    flex: 1;
    margin: 0;
    padding: 12px;
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    font-family: 'Inter', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pg-text);
    overflow: auto;
    white-space: pre;
}

.vc-confirm-actions[b-0257qztye6] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* /Pages/Tools/ZoomLevels.razor.rz.scp.css */
/* ================================================================
   Zoom Levels – Scoped Styles
   All colors reference design tokens from design-tokens.css.
   ================================================================ */

/* ── Container: main body rounded rectangle ── */
.zoom-levels-container[b-s9wbqlus2z] {
    position: fixed;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    background: var(--pg-surface);
    border-radius: var(--radius-xl);
    display: flex;
    gap: 0;
    padding: 6px 6px 6px 0;
    z-index: 0;
}

/* Nav collapse no longer needed — content is independent of nav */

/* ── Panel (left, directly on surface) ── */
.zl-panel[b-s9wbqlus2z] {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.zl-panel-header[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 12px;
    flex-shrink: 0;
}

.zl-title[b-s9wbqlus2z] {
    font-size: 20px;
    font-weight: 600;
    color: var(--pg-text);
    margin: 0;
    line-height: 1.2;
}

.zl-zoom-badge[b-s9wbqlus2z] {
    font-family: 'Inter', monospace;
    font-size: 13px;
    font-weight: 600;
    background: var(--pg-surface-raised);
    color: var(--pg-text-secondary);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.3px;
}

.zl-panel-body[b-s9wbqlus2z] {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

/* ── Scrollbar ── */
.zl-panel-body[b-s9wbqlus2z]::-webkit-scrollbar,
.zl-block-list[b-s9wbqlus2z]::-webkit-scrollbar {
    width: 4px;
}

.zl-panel-body[b-s9wbqlus2z]::-webkit-scrollbar-track,
.zl-block-list[b-s9wbqlus2z]::-webkit-scrollbar-track {
    background: transparent;
}

.zl-panel-body[b-s9wbqlus2z]::-webkit-scrollbar-thumb,
.zl-block-list[b-s9wbqlus2z]::-webkit-scrollbar-thumb {
    background: var(--pg-surface-overlay);
    border-radius: 2px;
}

/* ── Sections ── */
.zl-section[b-s9wbqlus2z] {
    border-top: 1px solid var(--pg-border);
    padding-top: 4px;
    margin-top: 4px;
}

.zl-section:first-child[b-s9wbqlus2z] {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.zl-section-toggle[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
    color: inherit;
}

.zl-section-toggle:hover .zl-section-label[b-s9wbqlus2z],
.zl-section-toggle:hover .zl-chevron-icon[b-s9wbqlus2z] {
    color: var(--pg-text-secondary);
}

.zl-section-toggle:focus-visible[b-s9wbqlus2z] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.zl-section-label[b-s9wbqlus2z] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

.zl-chevron-icon[b-s9wbqlus2z] {
    font-size: 10px;
    color: var(--pg-text-tertiary);
}

.zl-section-content[b-s9wbqlus2z] {
    padding: 4px 0 8px;
}

/* ── Form fields ── */
.zl-field[b-s9wbqlus2z] {
    margin-bottom: 8px;
}

.zl-field:last-child[b-s9wbqlus2z] {
    margin-bottom: 0;
}

/* ── Loading ── */
.zl-loading[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--pg-text-secondary);
}

.zl-spinner[b-s9wbqlus2z] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* ── Vineyard Dropdown (matches management group selector) ── */
.zl-dropdown-wrap[b-s9wbqlus2z] {
    position: relative;
}

.zl-dropdown-btn[b-s9wbqlus2z] {
    border: 1px solid var(--pg-border);
    padding: 5px 10px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: var(--pg-text-secondary);
    width: 100%;
}

.zl-dropdown-btn:hover[b-s9wbqlus2z] {
    border-color: var(--pg-border-hover);
    color: var(--pg-text);
}

.zl-dropdown-btn:focus-visible[b-s9wbqlus2z] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.zl-dropdown-btn span[b-s9wbqlus2z] {
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zl-dropdown-btn i[b-s9wbqlus2z] {
    font-size: 9px;
    color: var(--pg-text-tertiary);
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-out);
}

.zl-dropdown-wrap.open .zl-dropdown-btn i[b-s9wbqlus2z] {
    transform: rotate(180deg);
}

.zl-dropdown-menu[b-s9wbqlus2z] {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-radius: var(--radius-md);
    background-color: var(--pg-surface);
    border: 1px solid var(--pg-border);
    box-shadow: var(--pg-shadow-hover);
    padding: 6px 0;
    z-index: 1100;
    margin-top: 4px;
    animation: pg-fade-in 0.12s var(--ease-out) both;
    max-height: 300px;
    overflow-y: auto;
}

.zl-dropdown-menu a[b-s9wbqlus2z] {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--pg-text);
    text-decoration: none;
    cursor: pointer;
}

.zl-dropdown-menu a:hover[b-s9wbqlus2z],
.zl-dropdown-menu a.active[b-s9wbqlus2z] {
    background: var(--pg-shimmer-highlight);
}

/* ── Checkbox ── */
.zl-checkbox[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 3px 0;
}

.zl-checkbox input[type="checkbox"][b-s9wbqlus2z] {
    width: 14px;
    height: 14px;
    accent-color: var(--pg-accent);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.zl-check-text[b-s9wbqlus2z] {
    font-size: 13px;
    color: var(--pg-text);
    line-height: 1.3;
}

.zl-check-bold[b-s9wbqlus2z] {
    font-weight: 600;
}

/* ── Block list ── */
.zl-block-list[b-s9wbqlus2z] {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    background: var(--pg-bg);
    margin-top: 4px;
}

/* ── Vineyard contents summary ── */
.zl-summary[b-s9wbqlus2z] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.zl-summary-item[b-s9wbqlus2z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pg-text-secondary);
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
}

.zl-summary-item i[b-s9wbqlus2z] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
}

.zl-empty[b-s9wbqlus2z] {
    font-size: 13px;
    color: var(--pg-text-tertiary);
    padding: 8px 0;
    display: block;
}

/* ── Warning ── */
.zl-warning[b-s9wbqlus2z] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(240, 191, 0, 0.08);
    border: 1px solid rgba(240, 191, 0, 0.2);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--saffron);
}

.zl-warning i[b-s9wbqlus2z] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Hint ── */
.zl-threshold-hint[b-s9wbqlus2z] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(78, 167, 252, 0.06);
    border: 1px solid rgba(78, 167, 252, 0.15);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--pg-text-tertiary);
}

.zl-threshold-hint i[b-s9wbqlus2z] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--horizon);
}

/* ── Shared input base ── */
.zl-input[b-s9wbqlus2z] {
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: var(--pg-text);
    background: var(--pg-bg);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-sm);
    outline: none;
}

.zl-input:hover[b-s9wbqlus2z] {
    border-color: var(--pg-border-hover);
}

.zl-input:focus[b-s9wbqlus2z] {
    border-color: var(--pg-accent);
    box-shadow: 0 0 0 2px rgba(146, 78, 140, 0.12);
}

/* ── Threshold rows ── */
.zl-threshold-row[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.zl-threshold-label[b-s9wbqlus2z] {
    font-size: 13px;
    color: var(--pg-text);
    flex: 1;
}

.zl-threshold-controls[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.zl-threshold-controls-slider[b-s9wbqlus2z] {
    gap: 8px;
}

.zl-threshold-controls-slider .zl-slider[b-s9wbqlus2z] {
    width: 80px;
}

.zl-threshold-val[b-s9wbqlus2z] {
    font-size: 12px;
    font-family: 'Inter', monospace;
    color: var(--pg-text-tertiary);
    min-width: 24px;
    text-align: right;
}

/* ── Switch-style toggle ── */
.zl-toggle[b-s9wbqlus2z] {
    position: relative;
    width: 36px;
    height: 20px;
    border: none;
    border-radius: 10px;
    background: var(--pg-surface-raised);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.zl-toggle.on[b-s9wbqlus2z] {
    background: var(--pg-accent);
}

.zl-toggle-thumb[b-s9wbqlus2z] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: var(--pg-shadow);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.zl-toggle.on .zl-toggle-thumb[b-s9wbqlus2z] {
    transform: translateX(16px);
}

.zl-toggle:focus-visible[b-s9wbqlus2z] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.zl-threshold-input[b-s9wbqlus2z] {
    width: 68px;
    text-align: center;
    padding: 4px 6px;
}

/* ── Icon button ── */
.zl-btn-icon[b-s9wbqlus2z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--pg-text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
    padding: 0;
}

.zl-btn-icon:hover[b-s9wbqlus2z] {
    background: var(--pg-surface-raised);
    color: var(--pg-text);
}

.zl-btn-icon:focus-visible[b-s9wbqlus2z] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 1px;
}

.zl-btn-icon:active[b-s9wbqlus2z] {
    background: var(--pg-surface-overlay);
}

/* ── Styling groups ── */
.zl-style-group[b-s9wbqlus2z] {
    margin-bottom: 12px;
}

.zl-style-group:last-child[b-s9wbqlus2z] {
    margin-bottom: 0;
}

.zl-style-header[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.zl-style-label[b-s9wbqlus2z] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--pg-text-secondary);
    display: block;
    margin-bottom: 6px;
}

.zl-style-header .zl-style-label[b-s9wbqlus2z] {
    margin-bottom: 0;
}

.zl-style-subrow[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 8px;
    gap: 8px;
}

.zl-style-sublabel[b-s9wbqlus2z] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
}

.zl-style-note[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--pg-text-tertiary);
    padding: 6px 8px;
    background: var(--pg-surface-raised);
    border-radius: var(--radius-sm);
    margin-top: 4px;
}

.zl-style-note i[b-s9wbqlus2z] {
    font-size: 12px;
    color: var(--pg-text-secondary);
    flex-shrink: 0;
}

/* ── Width control ── */
.zl-width-control[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.zl-width-lbl[b-s9wbqlus2z] {
    font-size: 11px;
    color: var(--pg-text-tertiary);
}

.zl-width-input[b-s9wbqlus2z] {
    width: 44px;
    text-align: center;
    padding: 2px 4px;
    font-size: 12px;
}

/* ── Opacity control ── */
.zl-opacity-control[b-s9wbqlus2z] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.zl-slider[b-s9wbqlus2z] {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--pg-surface-raised);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.zl-slider[b-s9wbqlus2z]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pg-accent);
    cursor: pointer;
    border: 2px solid var(--pg-bg);
    box-shadow: var(--pg-shadow);
}

.zl-slider[b-s9wbqlus2z]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pg-accent);
    border: 2px solid var(--pg-bg);
    cursor: pointer;
}

.zl-opacity-val[b-s9wbqlus2z] {
    font-size: 11px;
    font-family: 'Inter', monospace;
    color: var(--pg-text-tertiary);
    min-width: 28px;
    text-align: right;
}

/* ── Swatches ── */
.zl-swatches[b-s9wbqlus2z] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.zl-swatch[b-s9wbqlus2z] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    outline: none;
}

.zl-swatch:hover[b-s9wbqlus2z] {
    transform: scale(1.2);
}

.zl-swatch:focus-visible[b-s9wbqlus2z] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.zl-swatch.active[b-s9wbqlus2z] {
    border-color: var(--pg-text);
    box-shadow: inset 0 0 0 1px var(--pg-bg);
}

/* ── Export ── */
.zl-export[b-s9wbqlus2z] {
    padding-top: 12px;
}

.zl-export-btn[b-s9wbqlus2z] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    color: var(--pg-text-secondary);
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.zl-export-btn:hover[b-s9wbqlus2z] {
    border-color: var(--pg-border-hover);
    color: var(--pg-text);
    box-shadow: var(--pg-shadow);
}

.zl-export-btn:focus-visible[b-s9wbqlus2z] {
    outline: 2px solid var(--pg-accent);
    outline-offset: 2px;
}

.zl-export-btn:active[b-s9wbqlus2z] {
    background: var(--pg-surface-overlay);
}

.zl-clipboard-msg[b-s9wbqlus2z] {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--jungle);
    padding: 6px 0;
    font-weight: 500;
}

/* ── Map wrapper (nested rounded rectangle) ── */
.zl-map-wrapper[b-s9wbqlus2z] {
    flex: 1;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--pg-shadow);
}

.zoom-levels-map[b-s9wbqlus2z] {
    position: absolute;
    inset: 0;
}
/* /Pages/WhatsNew/WhatsNew.razor.rz.scp.css */
/* ================================================================
   What's New – Scoped Styles
   Public-facing release notes timeline.
   All colors reference design tokens from design-tokens.css.
   ================================================================ */

.wn-container[b-jcod78k2em] {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Header ── */
.wn-header[b-jcod78k2em] {
    margin-bottom: 24px;
}

.wn-title[b-jcod78k2em] {
    font-size: 20px;
    font-weight: 600;
    color: var(--pg-text);
}

/* ── Month group ── */
.wn-month-group[b-jcod78k2em] {
    margin-bottom: 24px;
}

.wn-month-label[b-jcod78k2em] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pg-text-tertiary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pg-border);
}

/* ── Note card ── */
.wn-note-card[b-jcod78k2em] {
    margin-bottom: 12px;
}

.wn-note-meta[b-jcod78k2em] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wn-date[b-jcod78k2em] {
    font-size: 12px;
    color: var(--pg-text-tertiary);
}

.wn-note-title[b-jcod78k2em] {
    font-size: 16px;
    font-weight: 600;
    color: var(--pg-text);
    margin: 0 0 12px;
    line-height: 1.3;
}

/* ── Shared tags (duplicated for scoped isolation) ── */
.rn-version-tag[b-jcod78k2em] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    background: rgba(146,78,140,0.12);
    color: var(--pg-accent);
    letter-spacing: 0.3px;
}

.rn-platform-tag[b-jcod78k2em] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rn-platform-portal[b-jcod78k2em] { background: rgba(94,106,210,0.12); color: var(--indigo); }
.rn-platform-app[b-jcod78k2em]    { background: rgba(78,167,252,0.12); color: var(--horizon); }
.rn-platform-both[b-jcod78k2em]   { background: var(--pg-surface-raised); color: var(--pg-text-secondary); }

/* ── Markdown rendered body ── */
[b-jcod78k2em] .rn-markdown-body h1,
[b-jcod78k2em] .rn-markdown-body h2,
[b-jcod78k2em] .rn-markdown-body h3,
[b-jcod78k2em] .rn-markdown-body h4 {
    color: var(--pg-text);
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.3;
}

[b-jcod78k2em] .rn-markdown-body h1 { font-size: 1.4em; }
[b-jcod78k2em] .rn-markdown-body h2 { font-size: 1.2em; }
[b-jcod78k2em] .rn-markdown-body h3 { font-size: 1.05em; }

[b-jcod78k2em] .rn-markdown-body p {
    margin: 0 0 12px;
    line-height: 1.7;
    color: var(--pg-text-secondary);
    font-size: 13px;
}

[b-jcod78k2em] .rn-markdown-body ul,
[b-jcod78k2em] .rn-markdown-body ol {
    padding-left: 20px;
    margin: 0 0 12px;
}

[b-jcod78k2em] .rn-markdown-body li {
    margin-bottom: 4px;
    line-height: 1.6;
    color: var(--pg-text-secondary);
    font-size: 13px;
}

[b-jcod78k2em] .rn-markdown-body code {
    background: var(--pg-surface-raised);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--pg-text);
}

[b-jcod78k2em] .rn-markdown-body pre {
    background: var(--pg-surface-raised);
    border: 1px solid var(--pg-border);
    border-radius: var(--radius-md);
    padding: 14px;
    overflow-x: auto;
    margin: 0 0 12px;
}

[b-jcod78k2em] .rn-markdown-body pre code {
    background: none;
    padding: 0;
}

[b-jcod78k2em] .rn-markdown-body a {
    color: var(--pg-accent);
    text-decoration: none;
}

[b-jcod78k2em] .rn-markdown-body a:hover {
    text-decoration: underline;
}

[b-jcod78k2em] .rn-markdown-body blockquote {
    border-left: 3px solid var(--pg-accent);
    padding-left: 14px;
    margin: 12px 0;
    color: var(--pg-text-tertiary);
    font-style: italic;
}

[b-jcod78k2em] .rn-markdown-body img {
    max-width: 100%;
    border-radius: var(--radius-md);
}

[b-jcod78k2em] .rn-markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 13px;
}

[b-jcod78k2em] .rn-markdown-body th,
[b-jcod78k2em] .rn-markdown-body td {
    border: 1px solid var(--pg-border);
    padding: 8px 12px;
    text-align: left;
}

[b-jcod78k2em] .rn-markdown-body th {
    background: var(--pg-surface-raised);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pg-text-tertiary);
}

/* ── Loading ── */
.wn-loading[b-jcod78k2em] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
    font-size: 13px;
    color: var(--pg-text-secondary);
}

.wn-spinner[b-jcod78k2em] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--pg-border);
    border-top-color: var(--pg-accent);
    border-radius: 50%;
    animation: pg-spin 0.6s linear infinite;
}

/* ── Empty state ── */
.wn-empty[b-jcod78k2em] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    color: var(--pg-text-tertiary);
    font-size: 13px;
    text-align: center;
}

.wn-empty-icon[b-jcod78k2em] {
    font-size: 32px;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-9vrt0tgl3n] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-9vrt0tgl3n] {
    flex: 1;
}

.sidebar[b-9vrt0tgl3n] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-9vrt0tgl3n] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-9vrt0tgl3n]  a, .top-row .btn-link[b-9vrt0tgl3n] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-9vrt0tgl3n] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-9vrt0tgl3n] {
        display: none;
    }

    .top-row.auth[b-9vrt0tgl3n] {
        justify-content: space-between;
    }

    .top-row a[b-9vrt0tgl3n], .top-row .btn-link[b-9vrt0tgl3n] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-9vrt0tgl3n] {
        flex-direction: row;
    }

    .sidebar[b-9vrt0tgl3n] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-9vrt0tgl3n] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-9vrt0tgl3n], article[b-9vrt0tgl3n] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/*.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {*/
        /* Never collapse the sidebar for wide screens */
        /*display: block;
    }
}*/


.main-menu-item[b-l2npuafywa]  a {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    border-radius: 10px;
}

.main-menu-item[b-l2npuafywa]  a.active {
    color: var(--bs-primary);
    background: rgba(255, 255, 255, 0.5);
}

.main-menu-item[b-l2npuafywa]  a:hover {
    color: var(--bs-primary);
    background: rgba(255, 255, 255, 0.5);
}

/* Collapsible Manage Section Styles are in nav-style.css */