/* ============================================================
   Security App - Utility Classes
   File: public/assets/css/utilities.css

   PURPOSE
   ------------------------------------------------------------
   Small reusable helper classes for spacing, alignment,
   visibility, width, color, and text utilities.
   ============================================================ */

/* ============================================================
   DISPLAY / FLEX
   ============================================================ */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.align-center { align-items: center !important; }
.align-start { align-items: flex-start !important; }

/* ============================================================
   GAP
   ============================================================ */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }

/* ============================================================
   MARGIN
   ============================================================ */
.m-0 { margin: 0 !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }

.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }

/* ============================================================
   PADDING
   ============================================================ */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.5rem !important; }

/* ============================================================
   WIDTH / TEXT / POSITION
   ============================================================ */
.w-100 { width: 100% !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.text-muted { color: var(--color-text-soft) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: #9a6700 !important; }

.fw-normal { font-weight: 400 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

.small { font-size: 0.875rem !important; }
.tiny { font-size: 0.78rem !important; }

/* ============================================================
   SURFACE HELPERS
   ============================================================ */
.bg-white {
    background: #fff !important;
}

.bg-soft {
    background: var(--color-surface-soft) !important;
}

.border {
    border: 1px solid var(--color-border) !important;
}

.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.rounded-md {
    border-radius: var(--radius-md) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}