/*
 * Shared styles – globala utility-klasser för hela applikationen
 * Importeras i App.razor
 *
 * NOTE: Most UI is handled by MudBlazor components.
 * These utilities complement MudBlazor with design-token-based helpers.
 *
 * CSS-filstruktur:
 *   shared.css       – Globala utilities (denna fil)
 *   data-grid.css    – MudDataGrid, tabeller, chips
 *   modals.css       – Dialoger, modaler, konsoliderade mönster
 *   components.css   – Sidspecifika MudBlazor-komponentöverrides
 */

/* ==========================================================================
   Typography Utilities (matches Figma design tokens)
   ========================================================================== */

/* Body size variants */
.text-lg {
    font-size: var(--body-size-lg);
    line-height: var(--body-lh-lg);
}

.text-md {
    font-size: var(--body-size-md);
    line-height: var(--body-lh-md);
}

.text-sm {
    font-size: var(--body-size-sm);
    line-height: var(--body-lh-sm);
}

.text-xs {
    font-size: var(--body-size-xs);
    line-height: var(--body-lh-xs);
}

/* Font weight variants */
.fw-regular {
    font-weight: var(--font-weight-regular);
}

.fw-semibold {
    font-weight: var(--font-weight-semibold);
}

.fw-bold {
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   Status indicators (shared across components)
   ========================================================================== */

/* Status indicator dot */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot--active {
    background-color: #28a745;
}

.status-dot--ended {
    background-color: #6c757d;
}

.status-dot--upcoming {
    background-color: #ffc107;
}

/* Project status chips */
.project-status-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    font-family: var(--font-family-body);
    font-size: var(--body-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}

.project-status-chip--active {
    background-color: rgba(90, 168, 90, 0.15);
    border: 1px solid rgba(90, 168, 90, 0.3);
    color: #549235;
}

.project-status-chip--ended {
    background-color: rgba(108, 114, 128, 0.12);
    border: 1px solid rgba(108, 114, 128, 0.25);
    color: #6c7280;
}

.project-status-chip--upcoming {
    background-color: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #b8860b;
}

/* ==========================================================================
   Page layout helpers
   ========================================================================== */

/* Page header toolbar (title + actions row) */
.page-header-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.page-header-toolbar .page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Company Staff – empty state card
   ========================================================================== */

.staff-empty-state {
    display: flex;
    justify-content: center;
    margin-top: 64px;
}

.staff-empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px;
    background: var(--surface-bg, #ffffff);
    border: 1px solid var(--border-color, #e6ebeb);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 480px;
    width: 100%;
}

.staff-empty-state-illustration {
    width: 120px;
    height: 88px;
}

.staff-empty-state-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.staff-empty-state-title {
    font-family: var(--font-family-body);
    font-size: var(--body-size-md, 14px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--body-lineheight-md, 20px);
    color: var(--text-heading, #28292e);
}

.staff-empty-state-description {
    font-family: var(--font-family-body);
    font-size: var(--body-size-sm, 12px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--body-lineheight-sm, 12px);
    color: rgba(40, 41, 46, 0.7);
}