/* Datalyst Bid & Proposal Agent — dashboard design system.
   Dark-first, data-dense, calm: this is a tool people check dozens of times a day, not a
   marketing surface — legibility and low visual noise matter more than decoration. */

:root {
    --datalyst-bg: #0b1219;
    --datalyst-surface: #141f2b;
    --datalyst-surface-raised: #1a2733;
    --datalyst-border: #223140;
    --datalyst-text: #e6edf3;
    --datalyst-muted: #8b98a5;
    --datalyst-accent: #3fa9f5;
    --datalyst-accent-dim: rgba(63, 169, 245, 0.14);
    --datalyst-success: #3fbf7f;
    --datalyst-danger: #e5534b;
    --datalyst-warning: #d9a441;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --radius: 10px;
    --radius-sm: 6px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--datalyst-bg);
    background-image: radial-gradient(circle at top left, rgba(63, 169, 245, 0.06), transparent 40%);
    color: var(--datalyst-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
}

h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; margin: 0; }

/* ---- Nav ---------------------------------------------------------------------------------- */

.datalyst-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding: 0.85rem 1.5rem;
    background: rgba(20, 31, 43, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--datalyst-border);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-wrap: wrap;
}

.datalyst-nav-brand {
    font-weight: 700;
    font-size: 0.95rem;
    background: linear-gradient(90deg, var(--datalyst-text), var(--datalyst-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.datalyst-nav ul {
    list-style: none;
    display: flex;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    flex: 1;
}

.datalyst-nav a {
    color: var(--datalyst-muted);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.datalyst-nav a:hover { color: var(--datalyst-text); background: rgba(255, 255, 255, 0.04); }
.datalyst-nav a.is-active { color: var(--datalyst-text); background: var(--datalyst-accent-dim); }

.datalyst-nav-user {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--datalyst-muted);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

.datalyst-nav-user .role-pill {
    background: var(--datalyst-surface-raised);
    border: 1px solid var(--datalyst-border);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.72rem;
    color: var(--datalyst-accent);
}

/* ---- Layout --------------------------------------------------------------------------------- */

main { padding: 1.75rem; max-width: 1400px; margin: 0 auto; }

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.page-subtitle { color: var(--datalyst-muted); font-size: 0.9rem; margin: 0; }

/* ---- Pipeline board ------------------------------------------------------------------------- */

.pipeline-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.pipeline-board::-webkit-scrollbar { height: 8px; }
.pipeline-board::-webkit-scrollbar-thumb { background: var(--datalyst-border); border-radius: 999px; }

.pipeline-column {
    min-width: 270px;
    flex-shrink: 0;
    background: var(--datalyst-surface);
    border: 1px solid var(--datalyst-border);
    border-radius: var(--radius);
    padding: 0.85rem;
}

.pipeline-column h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--datalyst-muted);
    margin-bottom: 0.75rem;
}

.opportunity-card {
    display: block;
    background: var(--datalyst-surface-raised);
    border: 1px solid var(--datalyst-border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.55rem;
    font-size: 0.8rem;
    color: var(--datalyst-text);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.opportunity-card:hover { border-color: var(--datalyst-accent); transform: translateY(-1px); }
.opportunity-card strong { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; }

/* Deadline urgency — used on pipeline cards and Needs You rows alike, not scoped to one container. */
.deadline-soon { color: var(--datalyst-warning); font-weight: 600; }
.deadline-urgent { color: var(--datalyst-danger); font-weight: 700; }

/* ---- Needs You ------------------------------------------------------------------------------ */

.needs-you-section { margin-bottom: 1.5rem; }

.needs-you-section h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--datalyst-muted);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-count {
    background: var(--datalyst-accent-dim);
    color: var(--datalyst-accent);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.needs-you-card {
    background: var(--datalyst-surface);
    border: 1px solid var(--datalyst-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.needs-you-card strong { font-size: 0.9rem; }

/* ---- Buttons -------------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-approve { background: var(--datalyst-success); color: #06210f; }
.btn-decline { background: var(--datalyst-danger); color: #240b09; }
.btn-secondary { background: var(--datalyst-surface-raised); color: var(--datalyst-text); border: 1px solid var(--datalyst-border); }

.action-row { display: flex; gap: 0.5rem; }

/* ---- States ----------------------------------------------------------------------------------- */

.empty-state { color: var(--datalyst-muted); font-size: 0.85rem; }
.error-state { color: var(--datalyst-danger); }

/* ---- Tables --------------------------------------------------------------------------------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--datalyst-surface);
    border: 1px solid var(--datalyst-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.65rem 0.95rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--datalyst-border);
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.data-table th { color: var(--datalyst-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tr.row-gap { background: rgba(229, 83, 75, 0.08); }

/* ---- Status badges -------------------------------------------------------------------------- */

.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-valid, .status-ok, .status-mapped, .status-pass { background: rgba(63, 191, 127, 0.15); color: var(--datalyst-success); }
.status-expiring_soon, .status-degraded, .status-ambiguous { background: rgba(217, 164, 65, 0.15); color: var(--datalyst-warning); }
.status-expired, .status-down, .status-gap, .status-fail { background: rgba(229, 83, 75, 0.15); color: var(--datalyst-danger); }
.status-no_expiry, .status-unknown { background: rgba(63, 169, 245, 0.15); color: var(--datalyst-accent); }

/* ---- Portal health ---------------------------------------------------------------------------- */

.portal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.portal-card {
    background: var(--datalyst-surface);
    border: 1px solid var(--datalyst-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.1rem;
}

.portal-card h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.portal-card p { margin: 0.25rem 0; font-size: 0.85rem; }

/* ---- Analytics ------------------------------------------------------------------------------ */

.analytics section { margin-bottom: 1.75rem; }
.analytics h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--datalyst-muted); margin-bottom: 0.6rem; }

.stat-strip {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-tile {
    background: var(--datalyst-surface);
    border: 1px solid var(--datalyst-border);
    border-radius: var(--radius);
    padding: 0.9rem 1.2rem;
    min-width: 120px;
}

.stat-tile .stat-value { font-size: 1.5rem; font-weight: 700; }
.stat-tile .stat-label { font-size: 0.75rem; color: var(--datalyst-muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- Login ------------------------------------------------------------------------------------- */

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-form {
    background: var(--datalyst-surface);
    border: 1px solid var(--datalyst-border);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius);
    padding: 2.2rem;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-form h1 {
    font-size: 1.15rem;
    margin-bottom: 0.25rem;
    background: linear-gradient(90deg, var(--datalyst-text), var(--datalyst-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--datalyst-muted);
}

.login-form input {
    background: var(--datalyst-bg);
    border: 1px solid var(--datalyst-border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
    color: var(--datalyst-text);
    font-size: 0.9rem;
    transition: border-color 0.15s ease;
}

.login-form input:focus { outline: none; border-color: var(--datalyst-accent); }

.login-form button {
    background: var(--datalyst-accent);
    color: #06131c;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.25rem;
    transition: filter 0.15s ease;
}

.login-form button:hover { filter: brightness(1.08); }

.login-error { color: var(--datalyst-danger); font-size: 0.85rem; margin: 0; }

@media (max-width: 640px) {
    main { padding: 1rem; }
    .datalyst-nav { gap: 0.75rem; }
    .datalyst-nav-user { width: 100%; order: 3; }
}