/**
 * DISPOX Blocks - Reusable UI Components
 *
 * Requires: dispox-tokens.css loaded first
 *
 * Components:
 *   - .dx-block (card container)
 *   - .dx-metric (metric display)
 *   - .dx-table (data table)
 *   - .dx-badge (status badge)
 *   - .dx-btn (button)
 */

/* ============================================
   BLOCK (Card Container)
   ============================================ */

.dx-block {
    background: var(--dx-surface);
    border-radius: var(--dx-radius-md);
    box-shadow: var(--dx-shadow-md);
    overflow: hidden;
}

.dx-block__header {
    padding: var(--dx-space-2) var(--dx-space-4);
    background: var(--dx-bg);
    border-bottom: 1px solid var(--dx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
}

.dx-block__title {
    font-size: var(--dx-text-sm);
    font-weight: var(--dx-font-semibold);
    color: var(--dx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

.dx-block__badge {
    font-size: var(--dx-text-xs);
    color: var(--dx-text-muted);
    background: var(--dx-surface-dim);
    padding: 2px 8px;
    border-radius: var(--dx-radius-sm);
}

.dx-block__content {
    padding: var(--dx-space-4);
}

.dx-block__footer {
    padding: var(--dx-space-2) var(--dx-space-4);
    background: var(--dx-bg);
    border-top: 1px solid var(--dx-border);
}

/* Block variants */
.dx-block--compact .dx-block__content {
    padding: var(--dx-space-2);
}

.dx-block--flat {
    box-shadow: none;
    border: 1px solid var(--dx-border);
}

/* ============================================
   METRIC (KPI Display)
   ============================================ */

.dx-metric {
    text-align: center;
    padding: var(--dx-space-4);
}

.dx-metric__value {
    font-size: var(--dx-text-2xl);
    font-weight: var(--dx-font-bold);
    color: var(--dx-text);
    line-height: 1.2;
}

.dx-metric__label {
    font-size: var(--dx-text-xs);
    color: var(--dx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--dx-space-1);
}

.dx-metric__trend {
    font-size: var(--dx-text-sm);
    margin-top: var(--dx-space-1);
}

.dx-metric__trend--up { color: var(--dx-success); }
.dx-metric__trend--down { color: var(--dx-error); }
.dx-metric__trend--neutral { color: var(--dx-text-muted); }

/* Metric with performance color */
.dx-metric--high .dx-metric__value { color: var(--dx-success); }
.dx-metric--medium .dx-metric__value { color: var(--dx-warning); }
.dx-metric--low .dx-metric__value { color: var(--dx-error); }

/* Inline metrics row */
.dx-metrics-row {
    display: flex;
    gap: var(--dx-space-4);
}

.dx-metrics-row .dx-metric {
    flex: 1;
    background: var(--dx-bg);
    border-radius: var(--dx-radius-sm);
}

/* ============================================
   TABLE (Data Table)
   ============================================ */

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

.dx-table th,
.dx-table td {
    padding: var(--dx-space-2) var(--dx-space-3);
    text-align: left;
    border-bottom: 1px solid var(--dx-border);
}

.dx-table th {
    background: var(--dx-bg);
    font-weight: var(--dx-font-semibold);
    color: var(--dx-text-muted);
    text-transform: uppercase;
    font-size: var(--dx-text-xs);
    letter-spacing: 0.03em;
    position: sticky;
    top: 0;
    z-index: var(--dx-z-sticky);
}

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

.dx-table td.dx-table__numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Table status cells */
.dx-table td.dx-status--high { color: var(--dx-success); }
.dx-table td.dx-status--medium { color: var(--dx-warning); }
.dx-table td.dx-status--low { color: var(--dx-error); }

/* Compact table */
.dx-table--compact th,
.dx-table--compact td {
    padding: var(--dx-space-1) var(--dx-space-2);
}

/* ============================================
   BADGE (Status/Label)
   ============================================ */

.dx-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--dx-text-xs);
    font-weight: var(--dx-font-medium);
    border-radius: var(--dx-radius-sm);
    background: var(--dx-bg);
    color: var(--dx-text-muted);
}

.dx-badge--success {
    background: rgba(76, 175, 80, 0.15);
    color: var(--dx-success);
}

.dx-badge--warning {
    background: rgba(255, 152, 0, 0.15);
    color: var(--dx-warning);
}

.dx-badge--error {
    background: rgba(204, 0, 0, 0.15);
    color: var(--dx-error);
}

.dx-badge--info {
    background: rgba(127, 181, 225, 0.15);
    color: var(--dx-accent);
}

.dx-badge--accent {
    background: var(--dx-accent);
    color: white;
}

/* ============================================
   BUTTON
   ============================================ */

.dx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dx-space-2);
    padding: var(--dx-space-2) var(--dx-space-4);
    font-size: var(--dx-text-sm);
    font-weight: var(--dx-font-medium);
    border: none;
    border-radius: var(--dx-radius-sm);
    cursor: pointer;
    transition: var(--dx-transition-fast);
    background: var(--dx-accent);
    color: white;
}

.dx-btn:hover {
    background: var(--dx-accent-hover);
}

.dx-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(71, 151, 172, 0.3);
}

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

/* Button variants */
.dx-btn--secondary {
    background: var(--dx-bg);
    color: var(--dx-text);
    border: 1px solid var(--dx-border);
}

.dx-btn--secondary:hover {
    background: var(--dx-surface-dim);
}

.dx-btn--ghost {
    background: transparent;
    color: var(--dx-accent);
}

.dx-btn--ghost:hover {
    background: rgba(71, 151, 172, 0.1);
}

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

.dx-btn--lg {
    padding: var(--dx-space-3) var(--dx-space-6);
    font-size: var(--dx-text-base);
}

/* ============================================
   DOMAIN SECTION
   ============================================ */

.dx-domain {
    margin-bottom: var(--dx-space-6);
}

.dx-domain__header {
    display: flex;
    align-items: center;
    gap: var(--dx-space-3);
    padding-bottom: var(--dx-space-2);
    border-bottom: 2px solid var(--dx-accent);
    margin-bottom: var(--dx-space-4);
}

.dx-domain__title {
    font-size: var(--dx-text-base);
    font-weight: var(--dx-font-semibold);
    color: var(--dx-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.dx-domain__content {
    display: grid;
    gap: var(--dx-space-4);
}

/* Grid layouts for domain content */
.dx-domain__content--2col {
    grid-template-columns: repeat(2, 1fr);
}

.dx-domain__content--3col {
    grid-template-columns: repeat(3, 1fr);
}

.dx-domain__content--4col {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .dx-domain__content--2col,
    .dx-domain__content--3col,
    .dx-domain__content--4col {
        grid-template-columns: 1fr;
    }
}