/**
 * NorthStar SwitchBoard — Enterprise Component Library
 *
 * Purpose-built enterprise-grade UI component styles.
 * Depends on: assets/design-tokens.css
 *
 * Components:
 *   .ns-table       — data tables with sticky headers
 *   .ns-badge       — status badges with dot indicators
 *   .ns-sidebar     — collapsible navigation sidebar
 *   .ns-metric-card — KPI / dashboard metric cards
 *   .ns-btn         — refined button variants
 *   .ns-input       — form input styles
 *   .ns-card        — general card component
 *
 * @package NorthStarSwitchBoard
 * @since   Phase 1 Enterprise
 */

/* ============================================================
   NS-TABLE — Data table with sticky headers
   ============================================================ */
.ns-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ns-text-sm);
    color: var(--ns-text-primary);
    background: var(--ns-bg-surface);
}

.ns-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ns-bg-sunken);
}

.ns-table th {
    padding: var(--ns-space-3) var(--ns-space-4);
    font-size: var(--ns-text-xs);
    font-weight: var(--ns-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ns-text-tertiary);
    border-bottom: 1px solid var(--ns-border);
    white-space: nowrap;
}

.ns-table td {
    padding: var(--ns-space-3) var(--ns-space-4);
    border-bottom: 1px solid var(--ns-border);
    vertical-align: middle;
    transition: background var(--ns-duration-fast) var(--ns-ease);
}

.ns-table tbody tr:hover td {
    background: var(--ns-bg-hover);
}

.ns-table tbody tr.selected td {
    background: var(--ns-bg-selected);
}

.ns-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   NS-BADGE — Status badges with dot indicators
   ============================================================ */
.ns-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ns-space-1);
    padding: 2px var(--ns-space-2);
    border-radius: var(--ns-radius-full);
    font-size: var(--ns-text-xs);
    font-weight: var(--ns-font-medium);
    border: 1px solid transparent;
    line-height: var(--ns-leading-tight);
    white-space: nowrap;
}

.ns-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ns-badge--success {
    background: var(--ns-success-bg);
    color: var(--ns-success-text);
    border-color: var(--ns-success-border);
}
.ns-badge--success .ns-badge__dot {
    background: var(--ns-success-solid);
}

.ns-badge--warning {
    background: var(--ns-warning-bg);
    color: var(--ns-warning-text);
    border-color: var(--ns-warning-border);
}
.ns-badge--warning .ns-badge__dot {
    background: var(--ns-warning-solid);
}

.ns-badge--danger {
    background: var(--ns-danger-bg);
    color: var(--ns-danger-text);
    border-color: var(--ns-danger-border);
}
.ns-badge--danger .ns-badge__dot {
    background: var(--ns-danger-solid);
    animation: ns-dot-pulse 1.4s ease-in-out infinite;
}

.ns-badge--info {
    background: var(--ns-info-bg);
    color: var(--ns-info-text);
    border-color: var(--ns-info-border);
}
.ns-badge--info .ns-badge__dot {
    background: var(--ns-info-solid);
}

.ns-badge--neutral {
    background: var(--ns-bg-sunken);
    color: var(--ns-text-secondary);
    border-color: var(--ns-border);
}
.ns-badge--neutral .ns-badge__dot {
    background: var(--ns-text-tertiary);
}

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

/* ============================================================
   NS-SIDEBAR — Collapsible navigation sidebar
   ============================================================ */
.ns-sidebar {
    display: flex;
    flex-direction: column;
    width: 240px;
    min-height: 100vh;
    background: var(--ns-sidebar-bg);
    border-right: 1px solid var(--ns-sidebar-border);
    transition: width var(--ns-duration-normal) var(--ns-ease);
    overflow: hidden;
}

.ns-sidebar--collapsed {
    width: 60px;
}

.ns-sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--ns-space-3);
    padding: var(--ns-space-5) var(--ns-space-4);
    color: var(--ns-sidebar-text-active);
    font-size: var(--ns-text-base);
    font-weight: var(--ns-font-semibold);
    white-space: nowrap;
    overflow: hidden;
    border-bottom: 1px solid var(--ns-sidebar-border);
}

.ns-sidebar__nav {
    flex: 1;
    padding: var(--ns-space-3) var(--ns-space-2);
    overflow-y: auto;
}

.ns-sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: var(--ns-space-3);
    padding: var(--ns-space-2) var(--ns-space-3);
    border-radius: var(--ns-radius-md);
    color: var(--ns-sidebar-text);
    font-size: var(--ns-text-sm);
    font-weight: var(--ns-font-medium);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background var(--ns-duration-fast) var(--ns-ease),
                color var(--ns-duration-fast) var(--ns-ease);
    margin-bottom: var(--ns-space-1);
}

.ns-sidebar__nav-item:hover {
    background: var(--ns-sidebar-bg-hover);
    color: var(--ns-sidebar-text-active);
}

.ns-sidebar__nav-item.active {
    background: var(--ns-sidebar-bg-active);
    color: var(--ns-sidebar-text-active);
}

.ns-sidebar__nav-item .ns-sidebar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ns-sidebar-icon);
    transition: color var(--ns-duration-fast) var(--ns-ease);
}

.ns-sidebar__nav-item:hover .ns-sidebar__icon,
.ns-sidebar__nav-item.active .ns-sidebar__icon {
    color: var(--ns-sidebar-icon-active);
}

/* ============================================================
   NS-METRIC-CARD — Dashboard KPI cards
   ============================================================ */
.ns-metric-card {
    background: var(--ns-bg-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
    padding: var(--ns-space-5);
    box-shadow: var(--ns-shadow-xs);
}

.ns-metric-card__label {
    font-size: var(--ns-text-xs);
    font-weight: var(--ns-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ns-text-tertiary);
    margin-bottom: var(--ns-space-2);
}

.ns-metric-card__value {
    font-size: var(--ns-text-2xl);
    font-weight: var(--ns-font-bold);
    color: var(--ns-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: var(--ns-leading-tight);
}

.ns-metric-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--ns-text-xs);
    font-weight: var(--ns-font-medium);
    margin-top: var(--ns-space-2);
}

.ns-metric-card__trend--up {
    color: var(--ns-success-text);
}

.ns-metric-card__trend--down {
    color: var(--ns-danger-text);
}

/* ============================================================
   NS-BTN — Refined button styles
   ============================================================ */
.ns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ns-space-2);
    padding: var(--ns-space-2) var(--ns-space-4);
    border-radius: var(--ns-radius-md);
    font-size: var(--ns-text-sm);
    font-weight: var(--ns-font-medium);
    line-height: var(--ns-leading-tight);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--ns-duration-fast) var(--ns-ease),
                color var(--ns-duration-fast) var(--ns-ease),
                border-color var(--ns-duration-fast) var(--ns-ease),
                box-shadow var(--ns-duration-fast) var(--ns-ease),
                transform var(--ns-duration-fast) var(--ns-ease);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.ns-btn:focus-visible {
    outline: none;
    box-shadow: var(--ns-shadow-ring);
}

.ns-btn:active {
    transform: translateY(1px);
}

.ns-btn--primary {
    background: var(--ns-brand-600);
    color: #ffffff;
    border-color: var(--ns-brand-600);
}
.ns-btn--primary:hover {
    background: var(--ns-brand-700);
    border-color: var(--ns-brand-700);
}

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

.ns-btn--ghost {
    background: transparent;
    color: var(--ns-text-secondary);
    border-color: transparent;
}
.ns-btn--ghost:hover {
    background: var(--ns-bg-hover);
    color: var(--ns-text-primary);
}

.ns-btn--danger {
    background: var(--ns-danger-solid);
    color: #ffffff;
    border-color: var(--ns-danger-solid);
}
.ns-btn--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.ns-btn:disabled,
.ns-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   NS-INPUT — Form input styles
   ============================================================ */
.ns-input {
    display: block;
    width: 100%;
    padding: var(--ns-space-2) var(--ns-space-3);
    background: var(--ns-bg-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-md);
    font-size: var(--ns-text-sm);
    font-family: var(--ns-font-sans);
    color: var(--ns-text-primary);
    line-height: var(--ns-leading-normal);
    transition: border-color var(--ns-duration-fast) var(--ns-ease),
                box-shadow var(--ns-duration-fast) var(--ns-ease);
    appearance: none;
    -webkit-appearance: none;
}

.ns-input::placeholder {
    color: var(--ns-text-tertiary);
}

.ns-input:focus {
    outline: none;
    border-color: var(--ns-border-focus);
    box-shadow: var(--ns-shadow-ring);
}

.ns-input:disabled {
    background: var(--ns-bg-sunken);
    color: var(--ns-text-disabled);
    cursor: not-allowed;
}

.ns-input--error {
    border-color: var(--ns-danger-solid);
}
.ns-input--error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* ============================================================
   NS-CARD — General card component
   ============================================================ */
.ns-card {
    background: var(--ns-bg-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-xs);
    overflow: hidden;
}

.ns-card__header {
    padding: var(--ns-space-4) var(--ns-space-5);
    border-bottom: 1px solid var(--ns-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ns-space-3);
}

.ns-card__body {
    padding: var(--ns-space-5);
}

.ns-card__footer {
    padding: var(--ns-space-4) var(--ns-space-5);
    border-top: 1px solid var(--ns-border);
    background: var(--ns-bg-sunken);
    display: flex;
    align-items: center;
    gap: var(--ns-space-3);
}

/* ============================================================
   NS-PREVIEW-BANNER — Preview as Agent mode banner
   ============================================================ */
.ns-preview-banner {
    position: sticky;
    top: 0;
    z-index: 1070;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ns-preview-banner a { color: #fff; text-decoration: underline; }
body.preview-mode .ns-btn:not(.ns-preview-exit) {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}