/*
 * ph- utility layer. Deliberately minimal — sized to what the ph-components
 * and migrated pages actually need, not a full reimplementation of every
 * utility a framework like Bootstrap ships. Extend this file as Phase 7
 * migration surfaces a genuine gap; don't pre-build combinations nothing
 * uses yet.
 *
 * Spacing utilities read the base.css --ph-space-* scale directly, so index
 * N here always means --ph-space-N (e.g. ph-mt-4 = --ph-space-4 = 16px).
 */

/* ---------- Spacing: margin ---------- */
.ph-m-0  { margin: var(--ph-space-0); }
.ph-m-auto { margin: auto; }
.ph-mx-auto { margin-left: auto; margin-right: auto; }

.ph-mt-0 { margin-top: var(--ph-space-0); } .ph-mt-1 { margin-top: var(--ph-space-1); }
.ph-mt-2 { margin-top: var(--ph-space-2); } .ph-mt-3 { margin-top: var(--ph-space-3); }
.ph-mt-4 { margin-top: var(--ph-space-4); } .ph-mt-5 { margin-top: var(--ph-space-5); }
.ph-mt-6 { margin-top: var(--ph-space-6); } .ph-mt-7 { margin-top: var(--ph-space-7); }
.ph-mt-8 { margin-top: var(--ph-space-8); }

.ph-mb-0 { margin-bottom: var(--ph-space-0); } .ph-mb-1 { margin-bottom: var(--ph-space-1); }
.ph-mb-2 { margin-bottom: var(--ph-space-2); } .ph-mb-3 { margin-bottom: var(--ph-space-3); }
.ph-mb-4 { margin-bottom: var(--ph-space-4); } .ph-mb-5 { margin-bottom: var(--ph-space-5); }
.ph-mb-6 { margin-bottom: var(--ph-space-6); } .ph-mb-7 { margin-bottom: var(--ph-space-7); }
.ph-mb-8 { margin-bottom: var(--ph-space-8); }

.ph-ms-0 { margin-left: var(--ph-space-0); } .ph-ms-1 { margin-left: var(--ph-space-1); }
.ph-ms-2 { margin-left: var(--ph-space-2); } .ph-ms-3 { margin-left: var(--ph-space-3); }
.ph-ms-4 { margin-left: var(--ph-space-4); }

.ph-me-0 { margin-right: var(--ph-space-0); } .ph-me-1 { margin-right: var(--ph-space-1); }
.ph-me-2 { margin-right: var(--ph-space-2); } .ph-me-3 { margin-right: var(--ph-space-3); }
.ph-me-4 { margin-right: var(--ph-space-4); }

.ph-mx-1 { margin-left: var(--ph-space-1); margin-right: var(--ph-space-1); }
.ph-mx-2 { margin-left: var(--ph-space-2); margin-right: var(--ph-space-2); }
.ph-mx-3 { margin-left: var(--ph-space-3); margin-right: var(--ph-space-3); }
.ph-mx-4 { margin-left: var(--ph-space-4); margin-right: var(--ph-space-4); }

.ph-my-1 { margin-top: var(--ph-space-1); margin-bottom: var(--ph-space-1); }
.ph-my-2 { margin-top: var(--ph-space-2); margin-bottom: var(--ph-space-2); }
.ph-my-3 { margin-top: var(--ph-space-3); margin-bottom: var(--ph-space-3); }
.ph-my-4 { margin-top: var(--ph-space-4); margin-bottom: var(--ph-space-4); }
.ph-my-6 { margin-top: var(--ph-space-6); margin-bottom: var(--ph-space-6); }

/* ---------- Spacing: padding ---------- */
.ph-p-0  { padding: var(--ph-space-0); } .ph-p-1  { padding: var(--ph-space-1); }
.ph-p-2  { padding: var(--ph-space-2); } .ph-p-3  { padding: var(--ph-space-3); }
.ph-p-4  { padding: var(--ph-space-4); } .ph-p-5  { padding: var(--ph-space-5); }
.ph-p-6  { padding: var(--ph-space-6); } .ph-p-8  { padding: var(--ph-space-8); }

.ph-px-2 { padding-left: var(--ph-space-2); padding-right: var(--ph-space-2); }
.ph-px-3 { padding-left: var(--ph-space-3); padding-right: var(--ph-space-3); }
.ph-px-4 { padding-left: var(--ph-space-4); padding-right: var(--ph-space-4); }
.ph-px-6 { padding-left: var(--ph-space-6); padding-right: var(--ph-space-6); }

.ph-py-1 { padding-top: var(--ph-space-1); padding-bottom: var(--ph-space-1); }
.ph-py-2 { padding-top: var(--ph-space-2); padding-bottom: var(--ph-space-2); }
.ph-py-3 { padding-top: var(--ph-space-3); padding-bottom: var(--ph-space-3); }
.ph-py-4 { padding-top: var(--ph-space-4); padding-bottom: var(--ph-space-4); }
.ph-py-6 { padding-top: var(--ph-space-6); padding-bottom: var(--ph-space-6); }

/* ---------- Text ---------- */
.ph-text-start  { text-align: left; }
.ph-text-center { text-align: center; }
.ph-text-end    { text-align: right; }
.ph-text-white  { color: var(--ph-color-contrast); }
.ph-text-muted  { color: var(--ph-color-text-muted); }
.ph-text-primary { color: var(--ph-color-primary-600); }
.ph-text-danger  { color: var(--ph-color-danger); }
.ph-text-success { color: var(--ph-color-success); }
.ph-text-sm { font-size: var(--ph-fs-sm); }
.ph-text-xs { font-size: var(--ph-fs-xs); }
.ph-fw-medium   { font-weight: var(--ph-fw-medium); }
.ph-fw-semibold { font-weight: var(--ph-fw-semibold); }
.ph-fw-bold     { font-weight: var(--ph-fw-bold); }
.ph-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Flex alignment ---------- */
.ph-flex-row  { flex-direction: row; }
.ph-flex-col  { flex-direction: column; }
.ph-flex-wrap { flex-wrap: wrap; }
.ph-items-start  { align-items: flex-start; }
.ph-items-center { align-items: center; }
.ph-items-end    { align-items: flex-end; }
.ph-justify-start   { justify-content: flex-start; }
.ph-justify-center  { justify-content: center; }
.ph-justify-between { justify-content: space-between; }
.ph-justify-end     { justify-content: flex-end; }

.ph-gap-1 { gap: var(--ph-space-1); } .ph-gap-2 { gap: var(--ph-space-2); }
.ph-gap-3 { gap: var(--ph-space-3); } .ph-gap-4 { gap: var(--ph-space-4); }
.ph-gap-6 { gap: var(--ph-space-6); }

/* ---------- Misc ---------- */
.ph-list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ph-w-100 { width: 100%; }

.ph-rounded-sm { border-radius: var(--ph-radius-sm); }
.ph-rounded-md { border-radius: var(--ph-radius-md); }
.ph-rounded-lg { border-radius: var(--ph-radius-lg); }
.ph-rounded-pill { border-radius: var(--ph-radius-pill); }

.ph-shadow-sm { box-shadow: var(--ph-shadow-sm); }
.ph-shadow-md { box-shadow: var(--ph-shadow-md); }
.ph-shadow-lg { box-shadow: var(--ph-shadow-lg); }