/* ============================================================
   COMPONENT LIBRARY — Full Design System
   Derived from Component Library.svg + Brand Designs PNGs

   Contents:
     1. Cards          — flat / outlined / elevated
     2. Typography      — heading + body text tokens
     3. Shadows         — xs / sm / md / lg / xl
     4. Buttons         — filled / outlined / ghost (navy, error, success)
     5. Form Inputs     — default / hover / focus / error / disabled
     6. Select / Combo  — branded dropdown
     7. Tabs            — horizontal active state
     8. Notifications   — info / primary / success / error / warning
     9. Reference       — Login, Progress Bar (documented only)
   ============================================================ */


/* ═══════════════════════════════════════════════════════════════
   1. CARDS
   ═══════════════════════════════════════════════════════════════ */

.cl-card {
    border-radius: var(--card-radius, 8px);
    padding: 1.5rem;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cl-card--flat {
    background-color: var(--card-flat-bg);
    border: none;
    box-shadow: none;
}

.cl-card--outlined {
    background-color: var(--brand-white, #fff);
    border: 1px solid var(--card-outlined-border);
    box-shadow: none;
}

.cl-card--elevated {
    background-color: var(--brand-white, #fff);
    border: 1px solid var(--card-elevated-border);
    box-shadow: var(--card-elevated-shadow);
}

.cl-card--elevated:hover {
    box-shadow:
        0px 8px 24px rgba(0, 0, 0, 0.08),
        0px 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* ── Secondary Border Start Variant (for WSUA) ─────────────── */

.cl-card--border-start-secondary {
    border-left: 4px solid var(--brand-sky, #CAE5FF);
}


/* ═══════════════════════════════════════════════════════════════
   2. TYPOGRAPHY TOKENS
   ═══════════════════════════════════════════════════════════════ */

.cl-text-heading {
    color: var(--text-heading);
}

.cl-text-body {
    color: var(--text-body);
}


/* ═══════════════════════════════════════════════════════════════
   3. SHADOW ELEVATION SYSTEM  (from Shadows.png)
   5 levels — extra small → extra large
   ═══════════════════════════════════════════════════════════════ */

.cl-shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cl-shadow-sm {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.cl-shadow-md {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cl-shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.cl-shadow-xl {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}


/* ═══════════════════════════════════════════════════════════════
   4. BUTTONS  (from Button.png)
   Variants: filled / outlined / ghost
   Colors:   default (navy) / error (red) / success (green)
   ═══════════════════════════════════════════════════════════════ */

.cl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.cl-btn:focus-visible {
    outline: 2px solid var(--brand-navy, #00315C);
    outline-offset: 2px;
}

/* ── Default (Navy) — Filled ─────────────────────────────────── */

.cl-btn--filled {
    background-color: var(--brand-navy, #00315C);
    color: var(--brand-white, #fff);
    border-color: var(--brand-navy, #00315C);
}

.cl-btn--filled:hover {
    background-color: var(--brand-navy-80, #335A7D);
    border-color: var(--brand-navy-80, #335A7D);
}

/* ── Hover Variant: Secondary (Sky) ───────────────────────── */

.cl-btn--filled.cl-btn--hover-secondary:hover {
    background-color: var(--brand-sky, #CAE5FF);
    border-color: var(--brand-sky, #CAE5FF);
    color: var(--brand-navy, #00315C);
}

/* ── Default (Navy) — Outlined ───────────────────────────────── */

.cl-btn--outlined {
    background-color: transparent;
    color: var(--brand-navy, #00315C);
    border-color: var(--brand-navy, #00315C);
}

.cl-btn--outlined:hover {
    background-color: var(--card-flat-bg);
}

/* ── Default (Navy) — Ghost ──────────────────────────────────── */

.cl-btn--ghost {
    background-color: transparent;
    color: var(--brand-navy, #00315C);
    border-color: transparent;
}

.cl-btn--ghost:hover {
    background-color: var(--card-flat-bg);
}

/* ── Contrast (White) — Filled ───────────────────────────────── */

.cl-btn--white {
    background-color: var(--brand-white, #fff);
    color: var(--brand-navy, #00315C);
    border-color: var(--brand-white, #fff);
}

.cl-btn--white:hover {
    background-color: var(--brand-sky-20);
    border-color: var(--brand-sky-20);
    color: var(--brand-navy, #00315C);
}

/* ── Error (Red) — Filled ────────────────────────────────────── */

.cl-btn--error-filled {
    background-color: #C91432;
    color: #fff;
    border-color: #C91432;
}

.cl-btn--error-filled:hover {
    background-color: #A8102A;
    border-color: #A8102A;
}

/* ── Error (Red) — Outlined ──────────────────────────────────── */

.cl-btn--error-outlined {
    background-color: transparent;
    color: #C91432;
    border-color: #C91432;
}

.cl-btn--error-outlined:hover {
    background-color: rgba(201, 20, 50, 0.06);
}

/* ── Error (Red) — Ghost ─────────────────────────────────────── */

.cl-btn--error-ghost {
    background-color: transparent;
    color: #C91432;
    border-color: transparent;
}

.cl-btn--error-ghost:hover {
    background-color: rgba(201, 20, 50, 0.06);
}

/* ── Success (Green) — Filled ────────────────────────────────── */

.cl-btn--success-filled {
    background-color: #1D6F42;
    color: #fff;
    border-color: #1D6F42;
}

.cl-btn--success-filled:hover {
    background-color: #175A36;
    border-color: #175A36;
}

/* ── Success (Green) — Outlined ──────────────────────────────── */

.cl-btn--success-outlined {
    background-color: transparent;
    color: #1D6F42;
    border-color: #1D6F42;
}

.cl-btn--success-outlined:hover {
    background-color: rgba(29, 111, 66, 0.06);
}

/* ── Success (Green) — Ghost ─────────────────────────────────── */

.cl-btn--success-ghost {
    background-color: transparent;
    color: #1D6F42;
    border-color: transparent;
}

.cl-btn--success-ghost:hover {
    background-color: rgba(29, 111, 66, 0.06);
}

/* ── Button with Icon ────────────────────────────────────────── */

.cl-btn i,
.cl-btn svg {
    font-size: 1em;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   5. FORM INPUTS  (from Input fields.png + Text Field.png)
   States: default / hover / focus / error / disabled
   ═══════════════════════════════════════════════════════════════ */

.cl-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-heading, #192434);
    background-color: transparent;
    border: 1px solid var(--brand-midnight-20, #D2D2D2);
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.cl-input::placeholder {
    color: var(--brand-midnight-40, #A5A5A5);
    opacity: 0.45;
}

.cl-input:hover {
    background-color: transparent;
    border-color: var(--brand-midnight-40, #A5A5A5);
}

.cl-input:focus {
    background-color: transparent;
    border-color: var(--brand-navy, #00315C);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 49, 92, 0.12);
}

.cl-input--error {
    border-color: #C91432;
    background-color: transparent;
}

.cl-input--error:focus {
    border-color: #C91432;
    box-shadow: 0 0 0 3px rgba(201, 20, 50, 0.12);
}

.cl-input:disabled,
.cl-input--disabled {
    background-color: #F8F9FA;
    color: #A5A5A5;
    cursor: not-allowed;
    border-color: transparent;
}

/* ── Input Label ─────────────────────────────────────────────── */

.cl-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-heading, #192434);
}

/* ── Helper / Error Text ─────────────────────────────────────── */

.cl-helper {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--brand-midnight-60, #787878);
}

.cl-helper--error {
    color: #C91432;
}


/* ═══════════════════════════════════════════════════════════════
   6. SELECT / COMBO BOX  (from Combo Box.png)
   ═══════════════════════════════════════════════════════════════ */

.cl-select {
    display: block;
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-heading, #192434);
    background-color: transparent;
    border: 1px solid var(--brand-midnight-20, #D2D2D2);
    border-radius: 6px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300315C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 12px 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cl-select:hover {
    background-color: transparent;
    border-color: var(--brand-midnight-40, #A5A5A5);
}

.cl-select:focus {
    background-color: transparent;
    border-color: var(--brand-navy, #00315C);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 49, 92, 0.12);
}


/* ═══════════════════════════════════════════════════════════════
   7. TABS  (from Tabs.png)
   Horizontal tabs with active underline
   ═══════════════════════════════════════════════════════════════ */

.cl-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--brand-midnight-20, #D2D2D2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.cl-tab {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-midnight-60, #787878);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-bottom: -1px;
}

.cl-tab:hover {
    color: var(--text-heading, #192434);
}

.cl-tab--active {
    color: var(--brand-navy, #00315C);
    border-bottom-color: var(--brand-navy, #00315C);
    font-weight: 600;
}

.cl-tab--disabled {
    color: var(--brand-midnight-20, #D2D2D2);
    cursor: not-allowed;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   8. NOTIFICATIONS / ALERTS  (from Notification.png)
   Semantic: info / primary / success / error / warning
   ═══════════════════════════════════════════════════════════════ */

.cl-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.cl-alert__icon {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.cl-alert__content {
    flex: 1;
}

.cl-alert__title {
    font-weight: 700;
    margin-bottom: 0.125rem;
}

.cl-alert__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Info (Neutral / Gray) ───────────────────────────────────── */

.cl-alert--info {
    background-color: #F3F5F7;
    color: var(--text-heading, #192434);
    border-left: 4px solid var(--brand-midnight-40, #A5A5A5);
}

/* ── Primary (Navy) ──────────────────────────────────────────── */

.cl-alert--primary {
    background-color: var(--brand-navy, #00315C);
    color: var(--brand-white, #fff);
}

/* ── Success (Green) ─────────────────────────────────────────── */

.cl-alert--success {
    background-color: #1D6F42;
    color: #fff;
}

/* ── Error (Red) ─────────────────────────────────────────────── */

.cl-alert--error {
    background-color: #C91432;
    color: #fff;
}

/* ── Warning (Yellow/Amber) ──────────────────────────────────── */

.cl-alert--warning {
    background-color: #F5C518;
    color: var(--text-heading, #192434);
}


/* ═══════════════════════════════════════════════════════════════
   9. REFERENCE — Login & Progress Bar
   These are internal app components (DMS/ELN/CMMS).
   Documented here for design system completeness.
   ═══════════════════════════════════════════════════════════════

   LOGIN COMPONENT  (from Login.png)
   ─────────────────────────────────
   Two variants:
     a) Login Form — simple white card
        • "Log in" heading: bold, ~24px, navy
        • Username input: cl-input with cl-label above
        • Password input: cl-input with eye-icon toggle
        • Submit button: full-width cl-btn--filled (navy)
        • "Forgot password" link: navy text, centered below button
        • Card: white bg, rounded 8px, cl-shadow-md

     b) Login Overlay — navy header + white body
        • Header: --brand-navy bg, company name in white bold
        • Subtitle: --brand-sky text
        • Body: white bg with same form inputs
        • Submit: full-width cl-btn--filled (navy)
        • Card: rounded 12px, cl-shadow-lg

   PROGRESS BAR / TABLE VIEW  (from Progress Bar.png)
   ──────────────────────────────────────────────────
   Table with branded header:
     • Header row: --brand-sky-80 (#D5EAFF) background
     • Header text: navy color, 13px, font-weight 600
     • Body rows: white bg, 14px, alternating subtle gray (#F9FAFB)
     • Borders: 1px solid --brand-midnight-20 (#D2D2D2)
     • Cell padding: 0.625rem 1rem
     • Card wrapper: white bg, rounded 8px, cl-shadow-sm

   ═══════════════════════════════════════════════════════════════ */