/* ============================================================
   Project Site - site.css
   Design language borrowed from sagensi.com / pulses.day:
   Sagen blue (#185FA5), serif-italic display accents,
   monospace eyebrow/meta motifs, dot-grid "map" paper.
   Fonts: Inter (UI), Source Serif 4 (display accents),
   IBM Plex Mono (eyebrows, counts, meta).
   ============================================================ */

:root {
    --paper: #F2F5F8;
    --card: #FFFFFF;
    --ink: #16232E;
    --muted: #5D6E7E;
    --line: #D9E2EB;
    --brand: #185FA5;
    --brand-deep: #0F3D6E;
    --brand-tint: #E7F0F9;
    --navy: #122A40;
    --done: #1E7F56;
    --done-tint: #E4F3EC;
    --danger: #B54141;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(18, 42, 64, .06), 0 8px 24px rgba(18, 42, 64, .07);
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Source Serif 4", Georgia, serif;
    --font-mono: "IBM Plex Mono", "Consolas", monospace;
}

/* ---------- Base ---------- */

body {
    font-family: var(--font-ui);
    color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(circle, rgba(24, 95, 165, .09) 1px, transparent 1px);
    background-size: 22px 22px;
}

h1, h2, h3, h4, h5 {
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--ink);
}

a { color: var(--brand); }
a:hover { color: var(--brand-deep); }

/* Serif-italic accent word inside headings, sagensi-style. */
h1 em, .brand em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
}

/* Mono eyebrow label above page titles: "COMPANIES //" */
.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .3rem;
}

.mono, .meta-line {
    font-family: var(--font-mono);
}

.meta-line {
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .02em;
}

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

.navbar.site-nav {
    background-color: var(--navy);
    border-bottom: 3px solid var(--brand);
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.site-nav .navbar-brand {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: .04em;
    color: #E8EFF6;
}

.site-nav .navbar-brand em {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: #FFFFFF;
    margin-left: .15rem;
}

.site-nav .nav-link {
    font-size: .9rem;
    font-weight: 500;
    color: #B9C9D8;
    padding-left: .9rem;
    padding-right: .9rem;
    border-bottom: 2px solid transparent;
}

.site-nav .nav-link:hover { color: #FFFFFF; }

.site-nav .nav-link.active {
    color: #FFFFFF;
    border-bottom-color: var(--brand);
}

.site-nav .navbar-text { color: #8FA5B9; font-family: var(--font-mono); font-size: .78rem; }

.site-nav .btn-outline-light {
    --bs-btn-border-color: rgba(255, 255, 255, .35);
    font-size: .8rem;
}

/* ---------- Cards & tables ---------- */

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background-color: var(--card);
}

.card .card-body { padding: 1.35rem 1.5rem; }

.table thead th {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
    background-color: transparent;
}

.table td { border-color: var(--line); }
.table > :not(caption) > * > * { padding: .7rem .9rem; }

/* ---------- Project list (master panel) ---------- */

.project-list .list-group-item {
    border-color: var(--line);
    padding: .8rem 1rem;
    border-left: 3px solid transparent;
    transition: background-color .12s ease;
}

.project-list .list-group-item:hover { background-color: var(--brand-tint); }

.project-list .list-group-item.active {
    background-color: var(--brand-tint);
    border-left-color: var(--brand);
    color: var(--ink);
}

/* Mono count chip, Pulse-style: 3/7 */
.chip {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 500;
    color: var(--brand-deep);
    background-color: var(--brand-tint);
    border: 1px solid rgba(24, 95, 165, .25);
    border-radius: 999px;
    padding: .1rem .55rem;
    white-space: nowrap;
}

.chip.chip-done {
    color: var(--done);
    background-color: var(--done-tint);
    border-color: rgba(30, 127, 86, .3);
}

.company-tag {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

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

.btn { border-radius: 9px; font-weight: 550; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-deep);
    --bs-btn-hover-border-color: var(--brand-deep);
    --bs-btn-active-bg: var(--brand-deep);
    --bs-btn-active-border-color: var(--brand-deep);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-deep);
    --bs-btn-active-border-color: var(--brand-deep);
}

.btn-outline-success {
    --bs-btn-color: var(--done);
    --bs-btn-border-color: var(--done);
    --bs-btn-hover-bg: var(--done);
    --bs-btn-hover-border-color: var(--done);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
}

/* ---------- Forms ---------- */

.form-control, .form-select {
    border-color: var(--line);
    border-radius: 9px;
    color: var(--ink);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(24, 95, 165, .15);
}

.form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .3rem;
}

.form-text { font-family: var(--font-mono); font-size: .72rem; }

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

.badge.status-done {
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--done);
    background-color: var(--done-tint);
    border: 1px solid rgba(30, 127, 86, .3);
}

.work-cell { white-space: pre-wrap; }

.breadcrumb { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .02em; }
.breadcrumb-item.active { color: var(--muted); }

.alert-warning {
    background-color: #FBF3E2;
    border-color: #ECD9A8;
    color: #6E5615;
    border-radius: 10px;
}

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

.login-wrap { max-width: 400px; margin: 12vh auto 0; }

.login-wrap .card { border-top: 3px solid var(--brand); }

.login-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: .2rem;
}

.login-sub {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--muted);
    margin-bottom: 1.6rem;
}

/* ---------- Empty states ---------- */

.empty-note {
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- Code repo ---------- */

.code-card pre {
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    font-family: var(--font-mono);
    font-size: .82rem;
    line-height: 1.55;
    background-color: #FCFDFE;
    max-height: 72vh;
    overflow: auto;
}

.code-card pre code.hljs { background: transparent; padding: 0; }