/**
 * HCDS Operations Center - Component Styles
 * File: assets/css/components.css
 * Version: 1.1
 * Based on: 17_UI_DESIGN_SYSTEM.md
 *
 * Implements all UI components using dark theme design tokens from design-tokens.css.
 * Replace the old light-theme hcds-* variables with proper dark theme tokens.
 */

/* =============================================
   1. TOPNAV & HEADER COMPONENTS (Fase 1)
   ============================================= */

/* Top navigation bar */
.wave-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-6);
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: 64px;
}

.wave-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    text-decoration: none;
}

.wave-logo-svg {
    width: 24px;
    height: 24px;
}

.wave-nav-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.wave-nav-tab {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.wave-nav-tab:hover,
.wave-nav-tab.active {
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
    border-color: var(--color-border);
}

.wave-nav-tab.active {
    color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

/* Topnav Right Section */
.wave-nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Global Search Button */
.hcds-global-search-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-base, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hcds-global-search-btn:hover {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-focus);
    color: var(--color-text-primary);
}

.hcds-global-search-btn .search-label {
    min-width: 60px;
    text-align: left;
}

.shortcut-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

/* Notification Bell Button */
.hcds-notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hcds-notif-btn:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.hcds-notif-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-danger);
    border-radius: 9px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Live Indicator */
.hcds-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
}

.hcds-live-indicator .live-dot {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.wave-nav-time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: 0 var(--space-2);
}

/* =============================================
   2. STATUS BADGE (5.2)
   ============================================= */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.status-badge--critical { background: var(--severity-critical-bg); color: var(--severity-critical); }
.status-badge--high     { background: var(--severity-high-bg);     color: var(--severity-high); }
.status-badge--warning  { background: var(--severity-warning-bg);  color: var(--severity-warning); }
.status-badge--info     { background: var(--severity-info-bg);     color: var(--severity-info); }
.status-badge--success  { background: var(--color-success-bg);     color: var(--color-success); }
.status-badge--neutral  { background: var(--color-neutral-bg);     color: var(--color-neutral); }

.status-badge--small {
    font-size: 10px;
    padding: 2px 8px;
}

/* =============================================
   3. KPI CARD (5.1)
   ============================================= */

.kpi-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    border-color: rgba(0, 212, 184, 0.3);
    box-shadow: var(--shadow-glow);
}

.kpi-card[data-status="warning"]  { border-left: 3px solid var(--color-warning); }
.kpi-card[data-status="critical"] { border-left: 3px solid var(--color-danger); }
.kpi-card[data-status="healthy"]  { border-left: 3px solid var(--color-success); }
.kpi-card[data-status="info"]     { border-left: 3px solid var(--color-info); }
.kpi-card[data-status="neutral"]  { border-left: 3px solid var(--color-neutral); }

.kpi-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-bg-base);
}

.kpi-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.kpi-trend {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 600;
}

.kpi-trend--up   { color: var(--color-danger); }
.kpi-trend--down { color: var(--color-success); }
.kpi-trend--flat { color: var(--color-text-muted); }

.kpi-value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin: var(--space-3) 0;
}

.kpi-sparkline {
    height: 40px;
    margin: var(--space-2) 0;
}

.kpi-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

.kpi-badge--critical { background: var(--severity-critical-bg); color: var(--severity-critical); }
.kpi-badge--high     { background: var(--severity-high-bg);     color: var(--severity-high); }
.kpi-badge--medium   { background: var(--severity-warning-bg);  color: var(--severity-warning); }
.kpi-badge--warning  { background: var(--color-warning-bg);     color: var(--color-warning); }
.kpi-badge--success   { background: var(--color-success-bg);     color: var(--color-success); }

.kpi-footer {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .kpi-grid { grid-template-columns: 1fr; } }

/* =============================================
   4. SLA TIMER (5.3)
   ============================================= */

.sla-timer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sla-timer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sla-timer__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.sla-timer__remaining {
    font-size: var(--text-xs);
    font-weight: 600;
}

.sla-timer__bar {
    background: var(--color-border);
    border-radius: var(--radius-full);
    height: 6px;
    overflow: hidden;
}

.sla-timer__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-normal), background var(--transition-normal);
}

.sla-timer[data-state="on-track"]  .sla-timer__fill { background: var(--sla-on-track); }
.sla-timer[data-state="at-risk"]   .sla-timer__fill { background: var(--sla-at-risk); }
.sla-timer[data-state="breaching"] .sla-timer__fill { background: var(--sla-breaching); }
.sla-timer[data-state="breached"]  .sla-timer__fill { background: var(--sla-breached); }

.sla-timer__status {
    font-size: var(--text-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.sla-timer--compact {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
}

.sla-timer--compact .sla-timer__bar {
    flex: 1;
    height: 6px;
    margin: 0;
}

.sla-timer--compact .sla-timer__remaining {
    min-width: 80px;
    text-align: right;
}

/* =============================================
   5. TIMELINE EVENT (5.4)
   ============================================= */

.timeline-event {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.timeline-event:last-child {
    border-bottom: none;
}

.timeline-event__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: var(--space-1);
}

.timeline-event[data-severity="info"]    .timeline-event__dot { background: var(--color-info); }
.timeline-event[data-severity="warning"] .timeline-event__dot { background: var(--color-warning); }
.timeline-event[data-severity="critical"] .timeline-event__dot { background: var(--color-danger); }
.timeline-event[data-severity="success"]  .timeline-event__dot { background: var(--color-success); }

.timeline-event__content {
    flex: 1;
}

.timeline-event__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.timeline-event__icon {
    font-size: var(--text-sm);
}

.timeline-event__title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.timeline-event__meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.timeline-event__time { font-size: var(--text-xs); color: var(--color-text-muted); }
.timeline-event__system { font-size: var(--text-xs); color: var(--color-text-muted); }
.timeline-event__correlation { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); }

.timeline-event__body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.timeline-event__actions {
    display: flex;
    gap: var(--space-2);
}

/* Timeline filter bar */
.timeline-filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.filter-group {
    display: flex;
    gap: var(--space-1);
}

.btn-filter {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-filter:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.btn-filter.active {
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-brand-primary);
}

.input-select {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-base);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

/* =============================================
   6. HEALTH CARD (5.6)
   ============================================= */

.health-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.health-card:hover {
    background: var(--color-bg-elevated);
    border-color: rgba(0, 212, 184, 0.2);
}

.health-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

.health-card[data-status="healthy"]  .health-card__dot { background: var(--health-healthy); }
.health-card[data-status="degraded"] .health-card__dot { background: var(--health-degraded); }
.health-card[data-status="warning"]  .health-card__dot { background: var(--health-warning); }
.health-card[data-status="critical"] .health-card__dot { background: var(--health-critical); animation: pulse-fast 0.5s infinite; }
.health-card[data-status="unknown"]  .health-card__dot { background: var(--health-unknown); animation: none; }

.health-card__body {
    flex: 1;
}

.health-card__name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.health-card__uptime {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.health-card__metrics {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Traffic light row */
.traffic-light-row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* =============================================
   7. ALERT FEED ITEM (5.7)
   ============================================= */

.alert-feed-section {
    margin: var(--space-6) 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.section-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.alert-feed-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.alert-feed-item {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all var(--transition-fast);
    animation: slideInRight var(--transition-normal) forwards;
}

.alert-feed-item:hover {
    border-color: rgba(0, 212, 184, 0.3);
    box-shadow: var(--shadow-md);
}

.alert-feed-item--critical { border-left-color: var(--severity-critical); background: var(--severity-critical-bg); }
.alert-feed-item--high     { border-left-color: var(--severity-high);     background: var(--severity-high-bg); }
.alert-feed-item--warning  { border-left-color: var(--severity-warning);  background: var(--severity-warning-bg); }
.alert-feed-item--info     { border-left-color: var(--severity-info);     background: var(--severity-info-bg); }

.alert-feed-item__severity {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.alert-feed-item__body {
    margin-bottom: var(--space-3);
}

.alert-feed-item__body strong {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    display: block;
    margin-bottom: var(--space-1);
}

.alert-feed-item__body p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.alert-feed-item__time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.alert-feed-item__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* =============================================
   8. DATA TABLE (5.5)
   ============================================= */

.data-table-wrapper {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.data-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.data-table-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.data-table-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.data-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
}

.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.data-table-row {
    transition: background var(--transition-fast);
}

.data-table-row:hover {
    background: var(--color-bg-elevated);
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    color: var(--color-text-primary);
}

.data-table th.sortable.sorted-asc::after  { content: " ▲"; }
.data-table th.sortable.sorted-desc::after { content: " ▼"; }

.data-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* =============================================
   9. EMPTY / ERROR / LOADING STATES (5.8, 19)
   ============================================= */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    text-align: center;
}

.empty-state__illustration {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    opacity: 0.3;
}

.empty-state__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.empty-state__description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    max-width: 400px;
}

.empty-state__actions {
    display: flex;
    gap: var(--space-2);
}

.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
    text-align: center;
}

.error-state__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
    color: var(--color-danger);
}

.error-state__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-danger);
    margin-bottom: var(--space-2);
}

.error-state__message {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.error-state__retry {
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.error-state__retry:hover {
    background: var(--color-brand-primary-dark);
    box-shadow: var(--shadow-glow);
}

.error-inline {
    padding: var(--space-3);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-border-error);
    border-radius: var(--radius-md);
    color: var(--color-danger);
    font-size: var(--text-sm);
    margin: var(--space-2) 0;
}

.error-inline__title {
    font-weight: 600;
    margin-bottom: var(--space-1);
}

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg,
        var(--color-bg-surface) 25%,
        var(--color-bg-elevated) 50%,
        var(--color-bg-surface) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton--title   { height: 20px; width: 60%; }
.skeleton--text    { height: 14px; width: 100%; }
.skeleton--text--short { height: 14px; width: 40%; }
.skeleton--chart   { height: 120px; width: 100%; }
.skeleton--badge   { height: 20px; width: 80px; }
.skeleton--avatar  { width: 32px; height: 32px; border-radius: 50%; }

.skeleton-table-row {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.skeleton-table-row:last-child { border-bottom: none; }

/* =============================================
   10. LAST UPDATED & LIVE DOT (5.8)
   ============================================= */

.last-updated {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--color-brand-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* =============================================
   11. BUTTONS (5.9)
   ============================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary {
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-brand-primary);
}

.btn-primary:hover {
    background: var(--color-brand-primary-dark);
    box-shadow: var(--shadow-glow);
}

.btn-secondary {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-bg-base);
    color: var(--color-text-primary);
    border-color: var(--color-border-focus);
}

.btn-link {
    background: transparent;
    color: var(--color-text-link);
    border: none;
    padding: var(--space-1) 0;
}

.btn-link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.btn-icon:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border-color: var(--color-border-focus);
}

.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.btn--loading {
    pointer-events: none;
    opacity: 0.6;
}

.btn--loading::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: var(--space-2);
}

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

/* =============================================
   12. TOAST (5.9)
   ============================================= */

.toast {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-toast);
    animation: slideInRight var(--transition-normal) forwards;
}

.toast--success { border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); }
.toast--error   { border-color: var(--color-danger);   background: var(--color-danger-bg);   color: var(--color-danger); }
.toast--warning { border-color: var(--color-warning);   background: var(--color-warning-bg); color: var(--color-warning); }

/* =============================================
   13. MODAL (5.10)
   ============================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-bg-overlay);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal);
}

.modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.modal-overlay:not(.hidden) .modal {
    transform: scale(1);
    opacity: 1;
}

.modal {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    opacity: 0;
    transition: all var(--transition-normal);
}

.modal--search {
    max-width: 600px;
    border-radius: var(--radius-xl);
}

.modal--welcome {
    max-width: 500px;
    text-align: center;
}

.modal--shortcuts {
    max-width: 600px;
    max-height: 80vh;
}

.modal__header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.modal__body {
    padding: var(--space-6);
    overflow-y: auto;
}

.modal__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

.modal .btn-close {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1);
}

.modal .btn-close:hover {
    color: var(--color-text-primary);
}

.hidden {
    display: none !important;
}

/* =============================================
   14. HELP FAB (5.11)
   ============================================= */

.help-fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-sticky);
}

.help-fab__btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-primary);
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-text-inverse);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.help-fab__btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-glow);
}

.help-fab__menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    min-width: 200px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
    z-index: var(--z-dropdown);
}

.help-fab:hover .help-fab__menu,
.help-fab__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.help-fab__menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.help-fab__menu-item:hover {
    background: var(--color-bg-elevated);
}

.help-fab__menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}

/* =============================================
   15. BREADCRUMB (5.12)
   ============================================= */

.breadcrumb {
    margin-bottom: var(--space-4);
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
}

.breadcrumb__item:not(:last-child)::after {
    content: "/";
    margin-left: var(--space-2);
    color: var(--color-text-muted);
}

.breadcrumb__link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--color-text-primary);
}

.breadcrumb__item--active {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* =============================================
   16. PROGRESS BAR (5.13)
   ============================================= */

.progress-bar {
    width: 100%;
    background: var(--color-border);
    border-radius: var(--radius-full);;
    height: 8px;
    overflow: hidden;
    margin: var(--space-2) 0;
}

.progress-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-normal);
}

.progress-bar[data-status="success"]  .progress-bar__fill { background: var(--color-success); }
.progress-bar[data-status="warning"]  .progress-bar__fill { background: var(--color-warning); }
.progress-bar[data-status="danger"]   .progress-bar__fill { background: var(--color-danger); }
.progress-bar[data-status="info"]     .progress-bar__fill { background: var(--color-info); }

/* Health score bar */
.health-score-bar {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.health-score-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.health-score-value {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
}

/* =============================================
   17. CONTENT GRID (5.14)
   ============================================= */

.content-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .content-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 640px) {
    .content-grid { grid-template-columns: 1fr; }
}

/* =============================================
   18. QUICKSTART CHECKLIST (5.15)
   ============================================= */

.quickstart-checklist {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.quickstart__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.quickstart__progress {
    margin-bottom: var(--space-4);
}

.quickstart__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.quickstart__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.quickstart__item:last-child {
    border-bottom: none;
}

.quickstart__item--done .quickstart__item-icon {
    color: var(--color-success);
}

.quickstart__item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
}

/* =============================================
   19. PERMISSION GATE & PII MASKING
   ============================================= */

.permission-gate {
    position: relative;
}

.permission-gate__denied {
    filter: blur(4px);
    pointer-events: none;
}

.permission-gate__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.8);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.permission-gate.locked .permission-gate__overlay {
    opacity: 1;
}

.pii-masked {
    background: var(--color-neutral-bg);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

/* =============================================
   20. PIPELINE VIZ (Fase 4)
   ============================================= */

.pipeline-viz {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.pipeline-stage__count {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.pipeline-stage__label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

.pipeline-stage__arrow {
    font-size: var(--text-xl);
    color: var(--color-text-muted);
}

.pipeline-stage__dropoff {
    font-size: var(--text-xs);
    font-weight: 600;
}

/* =============================================
   21. CUSTOMER CELL & AVATAR
   ============================================= */

.customer-cell {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
}

.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--md { width: 36px; height: 36px; font-size: var(--text-sm); }

/* =============================================
   22. GAUGE CARD
   ============================================= */

.gauge-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}

.gauge-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}

.gauge-thresholds {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

/* =============================================
   23. RESPONSIVE BREAKPOINTS
   ============================================= */

@media (max-width: 640px) {
    .wave-topnav {
        padding: var(--space-2) var(--space-3);
    }

    .wave-nav-tabs {
        display: none;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .alert-feed-container {
        grid-template-columns: 1fr;
    }

    .pipeline-viz {
        gap: var(--space-2);
    }

    .pipeline-stage {
        min-width: 90px;
    }

    .hide-mobile { display: none !important; }
}

@media (min-width: 641px) and (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .show-mobile-only { display: none !important; }
}

@media (max-width: 768px) {
    .hide-tablet { display: none !important; }
    .traffic-light-row {
        flex-direction: column;
        gap: var(--space-2);
    }
    .data-table {
        font-size: var(--text-xs);
    }
    .data-table th,
    .data-table td {
        padding: var(--space-2);
    }
}

@media (max-width: 1024px) {
    .hide-laptop { display: none !important; }
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1280px) {
    .kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1536px) {
    .content-grid {
        max-width: 1440px;
        margin: 0 auto;
    }
}

/* =============================================
   24. TOUCH TARGETS
   ============================================= */

@media (hover: none) and (pointer: coarse) {
    .btn,
    .btn-icon,
    .help-fab__btn,
    .kpi-card,
    .wave-nav-tab {
        min-height: 44px;
        min-width: 44px;
    }

    .data-table-row {
        min-height: 44px;
    }
}

/* =============================================
   25. VISUAL HIERARCHY HELPERS
   ============================================= */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.font-display  { font-family: var(--font-display); }
.font-mono     { font-family: var(--font-mono); }

.text-muted    { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-info      { color: var(--color-info); }
.text-link      { color: var(--color-text-link); }

.bg-surface  { background-color: var(--color-bg-surface); }
.bg-base     { background-color: var(--color-bg-base); }
.bg-elevated { background-color: var(--color-bg-elevated); }

/* =============================================
   26. HCDS SEARCH OVERLAY & MODAL (Fase 1)
   ============================================= */

.hcds-search-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-bg-overlay);
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal);
}

.hcds-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.hcds-search-modal {
    width: 100%;
    max-width: 600px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transform: translateY(-20px);
    transition: transform var(--transition-normal);
}

.hcds-search-overlay.is-open .hcds-search-modal {
    transform: translateY(0);
}

.hcds-search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.hcds-search-input-wrapper svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.hcds-search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    outline: none;
}

.hcds-search-input::placeholder {
    color: var(--color-text-muted);
}

.hcds-search-results {
    max-height: 400px;
    overflow-y: auto;
}

.hcds-search-results-category {
    padding: var(--space-2) var(--space-6) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.hcds-search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.hcds-search-result-item:hover,
.hcds-search-result-item.is-selected {
    background: var(--color-bg-elevated);
}

.hcds-search-result-item .result-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-base);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}

.hcds-search-result-item .result-content {
    flex: 1;
}

.hcds-search-result-item .result-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.hcds-search-result-item .result-meta {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.hcds-search-empty,
.hcds-search-loading {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
}

/* =============================================
   27. HCDS NOTIFICATION PANEL (Fase 1)
   ============================================= */

.hcds-notif-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100%;
    background: var(--color-bg-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform var(--transition-normal);
}

.hcds-notif-panel.is-open {
    transform: translateX(0);
}

.hcds-notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.hcds-notif-panel-header h3 {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.hcds-notif-panel-body {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.hcds-notif-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.hcds-notif-item.is-unread {
    background: var(--color-bg-elevated);
}

.hcds-notif-item .notif-severity {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.hcds-notif-item .notif-content {
    flex: 1;
}

.hcds-notif-item .notif-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.hcds-notif-item .notif-message {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.hcds-notif-item .notif-time {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* =============================================
   28. HCDS SHORTCUTS MODAL (Fase 1)
   ============================================= */

.hcds-shortcuts-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-overlay);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal);
}

.hcds-shortcuts-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.hcds-shortcuts-content {
    width: 100%;
    max-width: 500px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.hcds-shortcuts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.hcds-shortcuts-header h3 {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.hcds-shortcuts-body {
    padding: var(--space-6);
}

.hcds-shortcut-group {
    margin-bottom: var(--space-6);
}

.hcds-shortcut-group:last-child {
    margin-bottom: 0;
}

.hcds-shortcut-group h4 {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.hcds-shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.hcds-shortcut-item span {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.hcds-shortcut-item kbd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-text-primary);
}

/* =============================================
   28. HCDS HELP FAB (Fase 1)
   ============================================= */

.hcds-help-fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-fixed);
}

.hcds-help-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-primary);
    border: none;
    border-radius: 50%;
    color: var(--color-bg-base);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.hcds-help-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(0, 212, 184, 0.25);
}

.hcds-help-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    min-width: 200px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
}

.hcds-help-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hcds-help-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.hcds-help-menu-item:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.hcds-help-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
}

/* =============================================
   29. ONBOARDING TOUR TOOLTIPS
   ============================================= */

.tour-tooltip {
    position: fixed;
    z-index: var(--z-tooltip);
    max-width: 320px;
    pointer-events: none;
}

.tour-tooltip__content {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-xl);
    pointer-events: auto;
}

.tour-tooltip__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.tour-tooltip__text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--space-4);
}

.tour-tooltip__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.tour-tooltip__progress {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.tour-tooltip__actions {
    display: flex;
    gap: var(--space-2);
}

.tour-tooltip__actions .btn-text {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.tour-tooltip__actions .btn-text:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.tour-tooltip__actions .btn-primary {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-bg-primary);
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.tour-tooltip__actions .btn-primary:hover {
    background: var(--color-primary-hover);
}

/* Arrow for tooltip positioning */
.tour-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* Bottom position - arrow at top */
.tour-tooltip[data-position="bottom"]::before {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--color-border);
}

.tour-tooltip[data-position="bottom"] .tour-tooltip__content::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: var(--color-bg-surface);
}

/* Top position - arrow at bottom */
.tour-tooltip[data-position="top"]::before {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--color-border);
}

.tour-tooltip[data-position="top"] .tour-tooltip__content::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: var(--color-bg-surface);
}

/* Right position - arrow at left */
.tour-tooltip[data-position="right"]::before {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--color-border);
}

.tour-tooltip[data-position="right"] .tour-tooltip__content::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: var(--color-bg-surface);
}

/* Left position - arrow at right */
.tour-tooltip[data-position="left"]::before {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--color-border);
}

.tour-tooltip[data-position="left"] .tour-tooltip__content::before {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: var(--color-bg-surface);
}

/* Highlighted element during tour */
.tour-highlight {
    position: relative;
    z-index: var(--z-modal);
    box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 8px var(--color-bg-surface), 0 0 30px rgba(59, 130, 246, 0.4);
    border-radius: var(--radius-md);
    animation: tour-pulse 2s ease-in-out infinite;
}

@keyframes tour-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px var(--color-primary), 0 0 0 8px var(--color-bg-surface), 0 0 30px rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px var(--color-primary), 0 0 0 10px var(--color-bg-surface), 0 0 40px rgba(59, 130, 246, 0.6);
    }
}

/* =============================================
   30. WELCOME MODAL (Onboarding)
   ============================================= */

.hcds-welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: none; /* Hidden by default - shown via .is-open class */
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.hcds-welcome-modal.is-open {
    display: flex;
}

.hcds-welcome-modal.hidden {
    display: none;
}

.hcds-welcome-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-overlay);
    backdrop-filter: blur(4px);
}

.hcds-welcome-content {
    position: relative;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    max-width: 480px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    animation: welcome-slide-up 0.3s ease-out;
}

@keyframes welcome-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hcds-welcome-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.hcds-welcome-header h3 {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.hcds-welcome-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hcds-welcome-close:hover {
    background: var(--color-bg-active);
    color: var(--color-text-primary);
}

.hcds-welcome-body {
    margin-bottom: var(--space-6);
}

.hcds-welcome-greeting {
    text-align: center;
    margin-bottom: var(--space-6);
}

.hcds-welcome-greeting p {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
}

#welcome-role-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.welcome-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.highlight-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.highlight-content {
    flex: 1;
}

.highlight-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.highlight-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.hcds-welcome-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.hcds-welcome-footer .btn-primary,
.hcds-welcome-footer .btn-outline {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hcds-welcome-footer .btn-primary {
    background: var(--color-primary);
    color: var(--color-bg-primary);
    border: none;
}

.hcds-welcome-footer .btn-primary:hover {
    background: var(--color-primary-hover);
}

.hcds-welcome-footer .btn-outline {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.hcds-welcome-footer .btn-outline:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-primary);
}

/* =============================================
   31. HCDS PULSE ANIMATION
   ============================================= */

@keyframes hcds-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* =============================================
   30. HCDS RESPONSIVE
   ============================================= */

/* Medium screens (tablets, laptops) - collapse search bar */
@media (max-width: 1200px) {
    .hcds-global-search-btn .search-label,
    .hcds-global-search-btn .shortcut-badge {
        display: none !important;
    }

    .hcds-global-search-btn {
        padding: var(--space-2);
        width: 36px;
        height: 36px;
        justify-content: center;
    }

    .hcds-live-indicator span:last-child {
        display: none;
    }

    .hcds-search-modal {
        margin: 0 var(--space-4);
        border-radius: var(--radius-lg);
    }

    .hcds-shortcuts-content {
        margin: 0 var(--space-4);
    }

    /* Prevent nav tabs from being pushed */
    .wave-nav-tabs {
        overflow-x: auto;
        flex-shrink: 1;
        min-width: 0;
    }
}

/* Mobile screens */
@media (max-width: 768px) {
    .hcds-global-search-btn .search-label,
    .shortcut-badge {
        display: none;
    }

    .hcds-live-indicator span:last-child {
        display: none;
    }

    .hcds-search-modal {
        margin: 0 var(--space-4);
        border-radius: var(--radius-lg);
    }

    .hcds-shortcuts-content {
        margin: 0 var(--space-4);
    }
}