/* ============================================================================
   PLATFORM PLANS — Layout-only rules
   Visual treatment is handled by:
     - Universal classes:  .alzar-card / .alzar-input / .alzar-select / .btn
     - SOG theme:          body.theme-sog ... (css/themes/sog-tactical.css)
   Structural rules mirror css/modules/platform-assemblies.css (same admin-CRUD
   shell), re-scoped under #hqm-plans-root since that file's selectors are
   scoped to #hqm-assemblies-root and don't apply here.
   ============================================================================ */

#hqm-plans-root {
    color: var(--color-text-main);
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
#hqm-plans-root .pa-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

#hqm-plans-root .pa-topbar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

#hqm-plans-root .pa-topbar-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Empty / placeholder text ───────────────────────────────────────────── */
#hqm-plans-root .pa-empty {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    padding: 20px 4px;
}

/* ── Category header above each catalog's card stack ────────────────────── */
#hqm-plans-root .pa-cat-header {
    margin: 18px 0 8px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* ── Plan card list rows ─────────────────────────────────────────────────── */
#hqm-plans-root .pa-asm-card {
    margin-bottom: 12px;
}

#hqm-plans-root .pa-asm-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

#hqm-plans-root .pa-asm-name {
    font-size: 1.05rem;
    font-weight: 700;
}

#hqm-plans-root .pa-asm-meta {
    color: var(--color-text-muted);
    margin-left: 10px;
    font-size: 0.84rem;
}

#hqm-plans-root .pa-asm-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

#hqm-plans-root .pa-asm-actions .btn.danger {
    color: var(--color-danger);
}

/* ── Inactive-plan badge ─────────────────────────────────────────────────── */
#hqm-plans-root .pp-inactive-tag {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-bg-base);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

/* ── Form: New / Edit plan ───────────────────────────────────────────────── */
#hqm-plans-root .pa-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

#hqm-plans-root .pa-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

@media (max-width: 780px) {
    #hqm-plans-root .pa-grid-2,
    #hqm-plans-root .pa-grid-3 {
        grid-template-columns: 1fr;
    }
}

#hqm-plans-root .pa-field {
    display: flex;
    flex-direction: column;
}

#hqm-plans-root .pa-field-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

#hqm-plans-root .alzar-input.readonly {
    opacity: 0.7;
}

#hqm-plans-root .pa-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}