/* ============================================================
   CMMS Foundry — Component Styles v1.0
   Styles for all foundation components.

   All colors use design tokens (tokens.css).
   No hardcoded values.
   ========================================================= */

/* ── Page Shell ────────────────────────────────── */
.cmms-page {
    display: flex;
    flex-direction: column;
    gap: var(--cmms-space-2xl);
    padding: var(--cmms-space-2xl) var(--cmms-space-3xl);
    min-height: calc(100vh - 57px); /* header offset */
}

.cmms-page__content {
    flex: 1;
}

/* ── Page Header ───────────────────────────────── */
.cmms-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cmms-space-lg);
    flex-wrap: wrap;
}

.cmms-page-header__left {
    flex: 1;
    min-width: 0;
}

.cmms-page-header__title {
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-lg);
    font-weight: var(--cmms-font-semibold);
    color: var(--cmms-text-primary);
    margin: 0;
    line-height: 1.4;
}

.cmms-page-header__description {
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-base);
    color: var(--cmms-text-secondary);
    margin: var(--cmms-space-xs) 0 0;
    line-height: 1.5;
}

.cmms-page-header__actions {
    display: flex;
    gap: var(--cmms-space-sm);
    flex-shrink: 0;
    align-items: center;
}

/* ── KPI Card ──────────────────────────────────── */
.cmms-kpi-card {
    background: var(--cmms-surface);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-md);
    padding: var(--cmms-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--cmms-space-sm);
    min-width: 180px;
    transition: box-shadow var(--cmms-transition-fast);
}

.cmms-kpi-card:hover {
    box-shadow: var(--cmms-shadow-md);
}

.cmms-kpi-card__header {
    display: flex;
    align-items: center;
    gap: var(--cmms-space-sm);
}

.cmms-kpi-card__icon {
    width: 24px;
    height: 24px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cmms-radius-sm);
    flex-shrink: 0;
}

.cmms-kpi-card__icon--success { color: var(--cmms-success); background: var(--cmms-success-light); }
.cmms-kpi-card__icon--warning { color: var(--cmms-warning); background: var(--cmms-warning-light); }
.cmms-kpi-card__icon--danger  { color: var(--cmms-danger);  background: var(--cmms-danger-light);  }
.cmms-kpi-card__icon--info    { color: var(--cmms-info);    background: var(--cmms-info-light);    }
.cmms-kpi-card__icon--neutral { color: var(--cmms-text-secondary); background: var(--cmms-surface-alt); }

.cmms-kpi-card__label {
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-xs);
    font-weight: var(--cmms-font-medium);
    color: var(--cmms-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cmms-kpi-card__value {
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-xl);
    font-weight: var(--cmms-font-bold);
    color: var(--cmms-text-primary);
    line-height: 1.2;
}

.cmms-kpi-card__trend {
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-xs);
    font-weight: var(--cmms-font-medium);
    display: flex;
    align-items: center;
    gap: 4px;
}

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

/* ── Status Badge ──────────────────────────────── */
.cmms-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--cmms-radius-sm);
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-xs);
    font-weight: var(--cmms-font-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.cmms-badge--success  { background: var(--cmms-success-light); color: var(--cmms-success); }
.cmms-badge--warning  { background: var(--cmms-warning-light); color: var(--cmms-warning); }
.cmms-badge--danger   { background: var(--cmms-danger-light);  color: var(--cmms-danger);  }
.cmms-badge--info     { background: var(--cmms-info-light);    color: var(--cmms-info);    }
.cmms-badge--secondary{ background: var(--cmms-surface-alt);   color: var(--cmms-text-secondary); }

.cmms-badge--sm { padding: 1px 6px; font-size: 0.625rem; }
.cmms-badge--lg { padding: 4px 12px; font-size: var(--cmms-font-sm); }

/* ── Empty State ───────────────────────────────── */
.cmms-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--cmms-space-4xl) var(--cmms-space-2xl);
    text-align: center;
    min-height: 240px;
}

.cmms-empty-state__icon {
    font-size: 3rem;
    color: var(--cmms-text-muted);
    margin-bottom: var(--cmms-space-lg);
    opacity: 0.5;
}

.cmms-empty-state__title {
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-md);
    font-weight: var(--cmms-font-semibold);
    color: var(--cmms-text-primary);
    margin: 0 0 var(--cmms-space-sm);
}

.cmms-empty-state__description {
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-base);
    color: var(--cmms-text-secondary);
    margin: 0 0 var(--cmms-space-xl);
    max-width: 400px;
}

.cmms-empty-state__action {
    margin-top: var(--cmms-space-sm);
}

/* ── Skeleton Loading ──────────────────────────── */
.cmms-skeleton {
    background: linear-gradient(
        90deg,
        var(--cmms-surface) 25%,
        var(--cmms-surface-alt) 50%,
        var(--cmms-surface) 75%
    );
    background-size: 200% 100%;
    animation: cmms-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--cmms-radius-sm);
}

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

/* Skeleton — Card */
.cmms-skeleton--card {
    width: 100%;
    min-height: 120px;
    border-radius: var(--cmms-radius-md);
    border: 1px solid var(--cmms-border);
    padding: var(--cmms-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--cmms-space-sm);
}

.cmms-skeleton--card .cmms-skeleton__line {
    height: 14px;
    border-radius: var(--cmms-radius-sm);
    background: inherit;
    background-size: inherit;
    animation: inherit;
}

.cmms-skeleton--card .cmms-skeleton__line--title { width: 60%; }
.cmms-skeleton--card .cmms-skeleton__line--value { width: 40%; height: 24px; margin-top: 8px; }

/* Skeleton — Table */
.cmms-skeleton--table {
    width: 100%;
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-md);
    overflow: hidden;
}

.cmms-skeleton--table .cmms-skeleton__row {
    display: flex;
    gap: var(--cmms-space-xl);
    padding: var(--cmms-space-md) var(--cmms-space-lg);
    border-bottom: 1px solid var(--cmms-border-light);
}

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

.cmms-skeleton--table .cmms-skeleton__cell {
    height: 14px;
    border-radius: var(--cmms-radius-sm);
    flex: 1;
    min-width: 40px;
}

/* Skeleton — Form */
.cmms-skeleton--form {
    padding: var(--cmms-space-xl);
    border: 1px solid var(--cmms-border);
    border-radius: var(--cmms-radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--cmms-space-lg);
}

.cmms-skeleton--form .cmms-skeleton__field {
    display: flex;
    flex-direction: column;
    gap: var(--cmms-space-xs);
}

.cmms-skeleton--form .cmms-skeleton__label {
    height: 12px;
    width: 80px;
    border-radius: var(--cmms-radius-sm);
}

.cmms-skeleton--form .cmms-skeleton__input {
    height: 38px;
    border-radius: var(--cmms-radius-sm);
}

/* ── Breadcrumb ────────────────────────────────── */
.cmms-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--cmms-space-sm);
    font-family: var(--cmms-font-primary);
    font-size: var(--cmms-font-sm);
    color: var(--cmms-text-muted);
    list-style: none;
    padding: 0;
    margin: 0;
}

.cmms-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--cmms-space-sm);
}

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

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

.cmms-breadcrumb__separator {
    color: var(--cmms-border);
    user-select: none;
}

.cmms-breadcrumb__current {
    color: var(--cmms-text-primary);
    font-weight: var(--cmms-font-medium);
}

/* ── Focus Ring (accessibility) ────────────────── */
.cmms-focus-ring:focus-visible {
    outline: 2px solid var(--cmms-border-focus);
    outline-offset: 2px;
    border-radius: var(--cmms-radius-sm);
}

/* ============================================================
   Phase 3 — Enterprise Components
   ========================================================= */

/* ── Table ─────────────────────────────────────── */
.cmms-table-wrapper { background: var(--cmms-surface); border-radius: var(--cmms-radius-md); border: 1px solid var(--cmms-border); }
.cmms-table { margin-bottom: 0; }
.cmms-table th { font-size: var(--cmms-font-sm); font-weight: var(--cmms-font-semibold); color: var(--cmms-text-primary); white-space: nowrap; }
.cmms-table td { font-size: var(--cmms-font-sm); color: var(--cmms-text-secondary); vertical-align: middle; }
.cmms-table tr:hover { background: var(--cmms-surface-hover); }
.cmms-table__sortable { cursor: pointer; user-select: none; }
.cmms-table__sortable:hover { color: var(--cmms-primary); }

/* ── Filter Bar ────────────────────────────────── */
.cmms-filter-bar { padding: var(--cmms-space-lg); background: var(--cmms-surface); border-radius: var(--cmms-radius-md); border: 1px solid var(--cmms-border); }

/* ── Action Bar ────────────────────────────────── */
.cmms-action-bar { background: var(--cmms-surface); border-radius: var(--cmms-radius-md); padding: var(--cmms-space-sm) var(--cmms-space-lg); }

/* ── Modal ─────────────────────────────────────── */
.cmms-modal-overlay { position: fixed; inset: 0; z-index: var(--cmms-z-modal); display: flex; align-items: center; justify-content: center; background: var(--cmms-overlay); }
.cmms-modal-container { background: var(--cmms-surface); border-radius: var(--cmms-radius-lg); box-shadow: var(--cmms-shadow-xl); width: 90%; max-width: 560px; max-height: 85vh; display: flex; flex-direction: column; }
.cmms-modal-container.modal-lg { max-width: 800px; }
.cmms-modal-container.modal-xl { max-width: 1140px; }
.cmms-modal-container.modal-sm { max-width: 400px; }
.cmms-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--cmms-space-xl) var(--cmms-space-2xl); border-bottom: 1px solid var(--cmms-border); }
.cmms-modal-title { font-size: var(--cmms-font-lg); font-weight: var(--cmms-font-semibold); color: var(--cmms-text-primary); margin: 0; }
.cmms-modal-close { background: none; border: none; font-size: 1.25rem; color: var(--cmms-text-muted); cursor: pointer; padding: 4px; border-radius: var(--cmms-radius-sm); }
.cmms-modal-close:hover { color: var(--cmms-text-primary); background: var(--cmms-surface-alt); }
.cmms-modal-body { padding: var(--cmms-space-2xl); overflow-y: auto; flex: 1; }
.cmms-modal-footer { display: flex; justify-content: flex-end; gap: var(--cmms-space-sm); padding: var(--cmms-space-lg) var(--cmms-space-2xl); border-top: 1px solid var(--cmms-border); }

/* ── Drawer ────────────────────────────────────── */
.cmms-drawer-overlay { position: fixed; inset: 0; z-index: var(--cmms-z-modal); background: var(--cmms-overlay); }
.cmms-drawer { position: fixed; top: 0; bottom: 0; background: var(--cmms-surface); box-shadow: var(--cmms-shadow-xl); display: flex; flex-direction: column; overflow-y: auto; }
.cmms-drawer--right { right: 0; }
.cmms-drawer--left { left: 0; }
.cmms-drawer--sm { width: 320px; }
.cmms-drawer--md { width: 480px; }
.cmms-drawer--lg { width: 640px; }
.cmms-drawer--xl { width: 800px; }
.cmms-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--cmms-space-xl); border-bottom: 1px solid var(--cmms-border); flex-shrink: 0; }
.cmms-drawer-title { font-size: var(--cmms-font-lg); font-weight: var(--cmms-font-semibold); margin: 0; }
.cmms-drawer-close { background: none; border: none; font-size: 1.25rem; color: var(--cmms-text-muted); cursor: pointer; }
.cmms-drawer-close:hover { color: var(--cmms-text-primary); }
.cmms-drawer-body { padding: var(--cmms-space-xl); flex: 1; overflow-y: auto; }
.cmms-drawer-footer { padding: var(--cmms-space-lg) var(--cmms-space-xl); border-top: 1px solid var(--cmms-border); flex-shrink: 0; }

/* ── Timeline ──────────────────────────────────── */
.cmms-timeline { position: relative; padding-left: 32px; }
.cmms-timeline::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--cmms-border); }
.cmms-timeline__item { position: relative; padding-bottom: var(--cmms-space-xl); }
.cmms-timeline__item:last-child { padding-bottom: 0; }
.cmms-timeline__dot { position: absolute; left: -17px; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #fff; z-index: 1; }
.cmms-timeline__dot--success { background: var(--cmms-success); }
.cmms-timeline__dot--warning { background: var(--cmms-warning); }
.cmms-timeline__dot--danger { background: var(--cmms-danger); }
.cmms-timeline__dot--info { background: var(--cmms-info); }
.cmms-timeline__dot--secondary { background: var(--cmms-secondary); }
.cmms-timeline__content { background: var(--cmms-surface); border-radius: var(--cmms-radius-md); padding: var(--cmms-space-md) var(--cmms-space-lg); border: 1px solid var(--cmms-border); }
.cmms-timeline__title { font-size: var(--cmms-font-sm); font-weight: var(--cmms-font-semibold); color: var(--cmms-text-primary); }
.cmms-timeline__description { font-size: var(--cmms-font-sm); color: var(--cmms-text-secondary); margin-top: 2px; }
.cmms-timeline__time { font-size: var(--cmms-font-xs); color: var(--cmms-text-muted); margin-top: 4px; }

/* ── Chart Card ────────────────────────────────── */
.cmms-chart-card { min-height: 200px; }
.cmms-chart-card canvas { max-height: 400px; }

/* ── Global Search ─────────────────────────────── */
.cmms-search-overlay { position: fixed; inset: 0; z-index: var(--cmms-z-modal); background: var(--cmms-overlay); display: flex; justify-content: center; padding-top: 10vh; }
.cmms-search-panel { background: var(--cmms-surface); border-radius: var(--cmms-radius-lg); box-shadow: var(--cmms-shadow-xl); width: 90%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.cmms-search-input-wrapper { display: flex; align-items: center; padding: var(--cmms-space-lg) var(--cmms-space-xl); border-bottom: 1px solid var(--cmms-border); gap: var(--cmms-space-sm); }
.cmms-search-icon { font-size: 1.25rem; color: var(--cmms-text-muted); flex-shrink: 0; }
.cmms-search-input { flex: 1; border: none; outline: none; font-size: var(--cmms-font-lg); color: var(--cmms-text-primary); background: transparent; }
.cmms-search-input::placeholder { color: var(--cmms-text-muted); }
.cmms-search-kbd { background: var(--cmms-surface-alt); border: 1px solid var(--cmms-border); border-radius: var(--cmms-radius-sm); padding: 2px 8px; font-size: var(--cmms-font-xs); color: var(--cmms-text-muted); flex-shrink: 0; }
.cmms-search-results { overflow-y: auto; max-height: 50vh; }
.cmms-search-result-item { display: flex; align-items: center; gap: var(--cmms-space-md); width: 100%; padding: var(--cmms-space-md) var(--cmms-space-xl); border: none; border-bottom: 1px solid var(--cmms-border-light); background: none; cursor: pointer; text-align: left; transition: background var(--cmms-transition-fast); }
.cmms-search-result-item:hover { background: var(--cmms-surface-hover); }
.cmms-search-result-icon { font-size: 1.25rem; color: var(--cmms-primary); flex-shrink: 0; width: 32px; text-align: center; }
.cmms-search-result-text { flex: 1; min-width: 0; }
.cmms-search-result-title { font-size: var(--cmms-font-sm); font-weight: var(--cmms-font-medium); color: var(--cmms-text-primary); }
.cmms-search-result-meta { font-size: var(--cmms-font-xs); color: var(--cmms-text-muted); margin-top: 2px; }

/* ── Notification Center ──────────────────────── */
.cmms-notification-dropdown { overflow: hidden; }
.cmms-notification-item { cursor: pointer; transition: background var(--cmms-transition-fast); }
.cmms-notification-item:hover { background: var(--cmms-surface-hover); }