/* ================== Programs UI — Jourva (light) ==========================
   Scope: features under /programs (cards, panels, tables, toolbars)
   Depends on dashboard.css variables: --db-accent-a/b, --db-stroke, --db-ink, etc.
   Mirrors visual language from Catalog UI for cohesion.
   ======================================================================= */

/* ---------- Tokens / surfaces ---------- */
:root {
    --prg-surface: linear-gradient(180deg,#ffffff,#fbfdff);
    --prg-sheen: radial-gradient(600px 260px at 110% -10%, rgba(48,214,203,.12), transparent 60%), radial-gradient(560px 220px at -10% 0%, rgba(18,180,173,.10), transparent 60%);
    --prg-ring: rgba(18,180,173,.18);
}

/* ---------- Page ---------- */
.prg-section-title {
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--db-ink-2);
    margin: 1rem 0 .5rem;
}

.prg-subtle {
    color: var(--db-ink-2);
}

/* ---------- Cards ---------- */
.prg-card {
    border: 1px solid var(--db-stroke);
    border-radius: 16px;
    background: var(--prg-surface);
    box-shadow: var(--db-shadow);
    overflow: clip;
    position: relative;
}

    .prg-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: var(--prg-sheen);
    }

.prg-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem .25rem;
}

.prg-card__title {
    margin: 0;
    font-weight: 800;
    letter-spacing: .01em;
}

.prg-card__body {
    padding: .5rem 1rem 1rem;
}

.prg-card__footer {
    padding: .5rem 1rem 1rem;
    display: flex;
    gap: .5rem;
}

.prg-table-card .table {
    margin-bottom: 0;
}

/* ---------- Toolbar / Filters ---------- */
.prg-toolbar {
    border: 1px solid var(--db-stroke);
    border-radius: 14px;
    padding: .6rem;
    box-shadow: var(--db-shadow);
    background: #fff;
    margin: .25rem 0 .75rem;
}

.prg-toolbar--tight {
    padding: .5rem .6rem;
}

.prg-filter-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .75rem;
}

@media (max-width: 992px) {
    .prg-filter-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 576px) {
    .prg-filter-grid {
        grid-template-columns: 1fr;
    }
}

/* Don’t accidentally zero out heights */
.prg-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}


.prg-field--inline {
    align-self: end;
}

.prg-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--db-ink);
}

/* Ensure inputs/selects are visible and sized */
.prg-input,
.prg-select {
    display: block;
    width: 100%;
    min-height: 38px;
    padding: .5rem .75rem;
    border: 1px solid var(--db-stroke, #d0d7de);
    border-radius: 10px;
    background: #fff; /* not transparent */
    color: var(--db-ink, #0b1220);
}

.prg-help {
    color: var(--db-ink-2);
    font-size: .8rem;
}

/* ---------- Buttons ---------- */
.btn-inv {
    border: 1px solid var(--db-stroke);
    background: #fff;
    color: var(--db-ink);
    font-weight: 600;
    border-radius: 10px;
    padding: .45rem .75rem;
    font-size: .9rem;
    transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}

    .btn-inv:hover {
        background: #f8fafc;
        transform: translateY(-1px);
        box-shadow: 0 0 0 .2rem var(--prg-ring);
    }

.btn-inv--primary {
    background: linear-gradient(90deg, rgba(18,180,173,.08), rgba(48,214,203,.12));
    border-color: rgba(18,180,173,.35);
}

.btn-inv--secondary {
    border-style: dashed;
}

.btn-inv--danger {
    background: linear-gradient(90deg, rgba(239,68,68,.10), rgba(244,114,114,.10));
    border-color: rgba(239,68,68,.35);
}

/* ---------- Badges ---------- */
.prg-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--db-stroke);
    background: #fff;
    font-weight: 700;
    font-size: .75rem;
}

.prg-badge--status.neutral {
    color: #334155;
}

.prg-badge--status.info {
    color: #0ea5a3;
    border-color: rgba(14,165,163,.35);
    background: linear-gradient(180deg,rgba(14,165,163,.08),rgba(48,214,203,.08));
}

.prg-badge--status.warning {
    color: #b45309;
    border-color: rgba(180,83,9,.35);
    background: linear-gradient(180deg,rgba(245,158,11,.10),rgba(253,230,138,.08));
}

.prg-badge--status.primary {
    color: #0f766e;
    border-color: rgba(15,118,110,.35);
    background: linear-gradient(180deg,rgba(13,148,136,.10),rgba(45,212,191,.08));
}

.prg-badge--status.success {
    color: #065f46;
    border-color: rgba(5,150,105,.35);
    background: linear-gradient(180deg,rgba(16,185,129,.10),rgba(48,214,203,.08));
}

.prg-badge--status.muted {
    color: #64748b;
    background: #f8fafc;
}

.prg-badge--role.core {
    color: #0f766e;
}

.prg-badge--role.optional {
    color: #334155;
}

.prg-badge--role.support {
    color: #6b7280;
}

/* ---------- Capacity chip ---------- */
.prg-capchip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .5rem;
    border-radius: 9px;
    border: 1px solid var(--db-stroke);
    background: #fff;
    font-weight: 800;
}

    .prg-capchip.ok {
        background: linear-gradient(180deg, rgba(18,180,173,.12), rgba(48,214,203,.12));
    }

    .prg-capchip.mid {
        background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(253,230,138,.10));
    }

    .prg-capchip.low {
        background: linear-gradient(180deg, rgba(239,68,68,.10), rgba(248,113,113,.10));
    }

    .prg-capchip.zero {
        background: #f8fafc;
        color: #64748b;
    }

/* ---------- Lists & timeline ---------- */
.prg-list {
    list-style: none;
    padding-left: 0;
    margin: .5rem 0 1rem;
    display: grid;
    gap: .4rem;
}

.prg-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .35rem .5rem;
    border: 1px dashed rgba(2,6,23,.08);
    border-radius: 10px;
    background: #fff;
}

.prg-dot {
    color: var(--db-ink-2);
}

.prg-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.prg-timeline__item {
    position: relative;
    padding-left: 1rem;
}

    .prg-timeline__item::before {
        content: "";
        position: absolute;
        left: .3rem;
        top: .4rem;
        width: .35rem;
        height: .35rem;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--db-accent-a), var(--db-accent-b));
    }

.prg-timeline__time {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .85rem;
    color: var(--db-ink-2);
}

.prg-timeline__body {
}

/* ---------- Table ---------- */
.prg-table thead th {
    font-weight: 700;
    font-size: .85rem;
    color: var(--db-ink);
    border-bottom: 1px solid var(--db-stroke);
}

.prg-table td {
    vertical-align: middle;
}

.prg-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Quick pills ---------- */
.prg-quick-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ---------- Meta grid ---------- */
.prg-meta__grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .5rem;
}

.prg-meta__label {
    display: block;
    font-size: .78rem;
    color: var(--db-ink-2);
}

.prg-meta__value {
    font-weight: 700;
}

/* ---------- Detail header ---------- */
.prg-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: .75rem;
}

.prg-title {
    margin: 0;
    font-weight: 800;
    letter-spacing: .01em;
}

.prg-detail-header__right {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* ---------- Actions ---------- */
.prg-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

    .prg-actions.align-end {
        align-items: end;
        justify-content: flex-end;
    }

/* ---------- Alerts ---------- */
.prg-alert {
    border-radius: 10px;
}

/* ---------- Modals ---------- */
.prg-modal-dialog {
    max-width: 720px;
}

.prg-modal {
    border-radius: 16px;
    overflow: hidden;
}

.prg-modal__header {
    border-bottom: 1px solid var(--db-stroke);
}

.prg-modal__title {
    font-weight: 800;
}

.prg-modal__body {
    background: var(--prg-surface);
}

.prg-modal__footer {
    border-top: 1px solid var(--db-stroke);
}

/* ---------- Empty ---------- */
.prg-empty {
    text-align: center;
    color: var(--db-ink-2);
    padding: 1.2rem 0;
}

    .prg-empty img {
        display: block;
        margin: .25rem auto .5rem;
    }

/* ---------- Grids ---------- */
.prg-grid {
    display: grid;
    gap: .75rem;
}

.prg-grid--2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

@media (max-width: 576px) {
    .prg-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* ---------- Utility ---------- */
.prg-text {
    margin: 0;
}
/* Make plaintext look like text (not disappear) */
.form-control-plaintext.prg-input {
    padding: .25rem 0;
    border: 0;
    background: transparent;
    color: var(--db-ink, #0b1220);
}