/* ============================================================
   DIGITAL LOGBOOK — Shared Styles
   CSS variables and components used across all roles.
   ============================================================ */

:root {
    --color-primary:        #0d6efd;
    --color-primary-dark:   #0a58ca;
    --color-sidebar-dark:   #1e293b;
    --color-sidebar-hover:  #334155;
    --color-sidebar-border: #334155;
    --color-sidebar-text:   #94a3b8;
    --color-background:     #f1f5f9;
    --color-text:           #1e293b;
    --color-text-muted:     #64748b;
    --color-lesson:         #818cf8;
}

body {
    background-color: var(--color-background);
    font-family: 'Instrument Sans', system-ui, Arial, sans-serif;
}

/* ── User avatar (initials circle) ── */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
    color: white;
}

.user-avatar--sm   { width: 34px; height: 34px; font-size: 12px; }
.user-avatar--md   { width: 40px; height: 40px; font-size: 13px; }
.user-avatar--lg   { width: 48px; height: 48px; font-size: 15px; }
.user-avatar--form { width: 36px; height: 36px; font-size: 12px;
                     background: rgba(255,255,255,.2); border-radius: 50%; }

.user-avatar--primary { background-color: var(--color-primary); }
.user-avatar--light   { background-color: #e0e7ff; color: var(--color-primary); }
.user-avatar--muted   { background-color: rgba(108,117,125,.15); color: #6c757d; }
.user-avatar--teal    { background: linear-gradient(135deg, #34d399, #0d9488); }

/* ── IMC brand badge (square) ── */
.brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    background-color: var(--color-primary);
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    font-size: 11px;
    border-radius: 6px;
}

.brand-badge--lg {
    width: 44px;
    height: 44px;
    font-size: 13px;
    border-radius: 8px;
}

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

.status-dot--sm { width: 7px; height: 7px; }
.status-dot--xs { width: 8px; height: 8px; }

/* ── Section label (tiny uppercase heading) ── */
.section-label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-muted);
}

.section-label--lesson { color: var(--color-lesson); }

/* ── Lesson learned accent block ── */
.lesson-block {
    border-left: 3px solid var(--color-lesson) !important;
    padding-left: 0.75rem;
}

/* ── Timeline date column fixed width ── */
.timeline-date {
    width: 76px;
    flex-shrink: 0;
}

/* ── Colour helpers not covered by Bootstrap ── */
.text-returned   { color: #92400e; }
.text-white-soft { color: rgba(255,255,255,.7); }
.text-white-dim  { color: rgba(255,255,255,.6); }