/* ==========================================================================
   SIAKAD UI — Utilities
   Spacing, display, text, and layout helper classes
   ========================================================================== */

/* ==========================================================================
   SPACING — Margin
   ========================================================================== */

.sui-mt-0 { margin-top: 0 !important; }
.sui-mt-1 { margin-top: 4px !important; }
.sui-mt-2 { margin-top: 8px !important; }
.sui-mt-3 { margin-top: 16px !important; }
.sui-mt-4 { margin-top: 24px !important; }
.sui-mt-5 { margin-top: 32px !important; }

.sui-mb-0 { margin-bottom: 0 !important; }
.sui-mb-1 { margin-bottom: 4px !important; }
.sui-mb-2 { margin-bottom: 8px !important; }
.sui-mb-3 { margin-bottom: 16px !important; }
.sui-mb-4 { margin-bottom: 24px !important; }
.sui-mb-5 { margin-bottom: 32px !important; }

.sui-ml-0 { margin-left: 0 !important; }
.sui-ml-1 { margin-left: 4px !important; }
.sui-ml-2 { margin-left: 8px !important; }
.sui-ml-3 { margin-left: 16px !important; }
.sui-ml-auto { margin-left: auto !important; }

.sui-mr-0 { margin-right: 0 !important; }
.sui-mr-1 { margin-right: 4px !important; }
.sui-mr-2 { margin-right: 8px !important; }
.sui-mr-3 { margin-right: 16px !important; }
.sui-mr-auto { margin-right: auto !important; }

.sui-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.sui-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.sui-my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }

/* ==========================================================================
   SPACING — Padding
   ========================================================================== */

.sui-p-0 { padding: 0 !important; }
.sui-p-1 { padding: 4px !important; }
.sui-p-2 { padding: 8px !important; }
.sui-p-3 { padding: 16px !important; }
.sui-p-4 { padding: 24px !important; }
.sui-p-5 { padding: 32px !important; }

.sui-pt-0 { padding-top: 0 !important; }
.sui-pt-3 { padding-top: 16px !important; }
.sui-pt-4 { padding-top: 24px !important; }

.sui-pb-0 { padding-bottom: 0 !important; }
.sui-pb-3 { padding-bottom: 16px !important; }
.sui-pb-4 { padding-bottom: 24px !important; }

.sui-px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.sui-px-4 { padding-left: 24px !important; padding-right: 24px !important; }

.sui-py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.sui-py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }

/* ==========================================================================
   DISPLAY
   ========================================================================== */

.sui-d-none { display: none !important; }
.sui-d-block { display: block !important; }
.sui-d-inline { display: inline !important; }
.sui-d-inline-block { display: inline-block !important; }
.sui-d-flex { display: flex !important; }
.sui-d-inline-flex { display: inline-flex !important; }

/* ==========================================================================
   FLEXBOX
   ========================================================================== */

.sui-flex-row { flex-direction: row !important; }
.sui-flex-column { flex-direction: column !important; }
.sui-flex-wrap { flex-wrap: wrap !important; }
.sui-flex-nowrap { flex-wrap: nowrap !important; }
.sui-flex-1 { flex: 1 !important; }
.sui-flex-shrink-0 { flex-shrink: 0 !important; }

.sui-align-items-start { align-items: flex-start !important; }
.sui-align-items-center { align-items: center !important; }
.sui-align-items-end { align-items: flex-end !important; }
.sui-align-items-stretch { align-items: stretch !important; }

.sui-justify-start { justify-content: flex-start !important; }
.sui-justify-center { justify-content: center !important; }
.sui-justify-end { justify-content: flex-end !important; }
.sui-justify-between { justify-content: space-between !important; }
.sui-justify-around { justify-content: space-around !important; }

.sui-gap-1 { gap: 4px !important; }
.sui-gap-2 { gap: 8px !important; }
.sui-gap-3 { gap: 16px !important; }
.sui-gap-4 { gap: 24px !important; }

/* ==========================================================================
   TEXT
   ========================================================================== */

.sui-text-primary { color: var(--text-primary) !important; }
.sui-text-secondary { color: var(--text-secondary) !important; }
.sui-text-muted { color: var(--text-muted) !important; }
.sui-text-inverse { color: var(--text-inverse) !important; }
.sui-text-blue { color: var(--primary) !important; }
.sui-text-success { color: var(--success) !important; }
.sui-text-warning { color: var(--warning) !important; }
.sui-text-danger { color: var(--danger) !important; }

.sui-text-xs { font-size: 11px !important; }
.sui-text-sm { font-size: var(--font-size-sm) !important; }
.sui-text-base { font-size: var(--font-size-base) !important; }
.sui-text-lg { font-size: var(--font-size-lg) !important; }
.sui-text-xl { font-size: var(--font-size-xl) !important; }
.sui-text-2xl { font-size: 24px !important; }

.sui-font-normal { font-weight: var(--font-weight-normal) !important; }
.sui-font-medium { font-weight: var(--font-weight-medium) !important; }
.sui-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.sui-font-bold { font-weight: var(--font-weight-bold) !important; }

.sui-text-left { text-align: left !important; }
.sui-text-center { text-align: center !important; }
.sui-text-right { text-align: right !important; }

.sui-text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.sui-text-uppercase { text-transform: uppercase !important; }
.sui-text-lowercase { text-transform: lowercase !important; }
.sui-text-capitalize { text-transform: capitalize !important; }

.sui-leading-tight { line-height: 1.25 !important; }
.sui-leading-normal { line-height: 1.5 !important; }
.sui-leading-relaxed { line-height: 1.75 !important; }

/* ==========================================================================
   BORDERS & RADIUS
   ========================================================================== */

.sui-border { border: 1px solid var(--border-color) !important; }
.sui-border-top { border-top: 1px solid var(--border-color) !important; }
.sui-border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.sui-border-0 { border: none !important; }

.sui-rounded-sm { border-radius: var(--radius-sm) !important; }
.sui-rounded { border-radius: var(--radius-md) !important; }
.sui-rounded-lg { border-radius: var(--radius-lg) !important; }
.sui-rounded-xl { border-radius: var(--radius-xl) !important; }
.sui-rounded-full { border-radius: var(--radius-full) !important; }

/* ==========================================================================
   SHADOWS
   ========================================================================== */

.sui-shadow-none { box-shadow: none !important; }
.sui-shadow-xs { box-shadow: var(--shadow-xs) !important; }
.sui-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.sui-shadow { box-shadow: var(--shadow-md) !important; }
.sui-shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ==========================================================================
   BACKGROUNDS
   ========================================================================== */

.sui-bg-white { background-color: #fff !important; }
.sui-bg-light { background-color: var(--slate-50) !important; }
.sui-bg-gray { background-color: var(--slate-100) !important; }
.sui-bg-primary { background-color: var(--primary) !important; }
.sui-bg-primary-light { background-color: var(--primary-light) !important; }
.sui-bg-success-light { background-color: var(--success-light) !important; }
.sui-bg-warning-light { background-color: var(--warning-light) !important; }
.sui-bg-danger-light { background-color: var(--danger-light) !important; }
.sui-bg-transparent { background-color: transparent !important; }

/* ==========================================================================
   SIZING
   ========================================================================== */

.sui-w-full { width: 100% !important; }
.sui-w-auto { width: auto !important; }
.sui-h-full { height: 100% !important; }
.sui-h-auto { height: auto !important; }
.sui-min-h-0 { min-height: 0 !important; }

/* ==========================================================================
   OVERFLOW
   ========================================================================== */

.sui-overflow-hidden { overflow: hidden !important; }
.sui-overflow-auto { overflow: auto !important; }
.sui-overflow-x-auto { overflow-x: auto !important; }

/* ==========================================================================
   POSITION
   ========================================================================== */

.sui-relative { position: relative !important; }
.sui-absolute { position: absolute !important; }
.sui-fixed { position: fixed !important; }
.sui-sticky { position: sticky !important; }

/* ==========================================================================
   CURSOR
   ========================================================================== */

.sui-cursor-pointer { cursor: pointer !important; }
.sui-cursor-default { cursor: default !important; }

/* ==========================================================================
   TRANSITION
   ========================================================================== */

.sui-transition { transition: all var(--transition-base) !important; }
.sui-transition-fast { transition: all var(--transition-fast) !important; }


/* ==========================================================================
   ADMINDESIGNS COMPATIBILITY LAYER
   Legacy utility classes from AdminDesigns theme.css
   Required by 127+ backend view files
   ========================================================================== */

/* --------------------------------------------------------------------------
   Padding — All-sides
   -------------------------------------------------------------------------- */
.p0  { padding: 0 !important; }
.pn  { padding: 0 !important; }
.p1  { padding: 1px !important; }
.p3  { padding: 3px !important; }
.p5  { padding: 5px !important; }
.p10 { padding: 10px !important; }
.p12 { padding: 12px !important; }
.p15 { padding: 15px !important; }
.p20 { padding: 20px !important; }
.p25 { padding: 25px !important; }
.p30 { padding: 30px !important; }

/* --------------------------------------------------------------------------
   Padding — Directional (top, right, bottom, left)
   -------------------------------------------------------------------------- */
.pt5  { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }

.pr5  { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }

.pb5  { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }

.pl5  { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }

/* --------------------------------------------------------------------------
   Padding — Horizontal (left + right)
   -------------------------------------------------------------------------- */
.ph5  { padding-left: 5px !important; padding-right: 5px !important; }
.ph10 { padding-left: 10px !important; padding-right: 10px !important; }
.ph15 { padding-left: 15px !important; padding-right: 15px !important; }
.ph20 { padding-left: 20px !important; padding-right: 20px !important; }
.ph25 { padding-left: 25px !important; padding-right: 25px !important; }
.ph30 { padding-left: 30px !important; padding-right: 30px !important; }
.ph40 { padding-left: 40px !important; padding-right: 40px !important; }

/* --------------------------------------------------------------------------
   Padding — Vertical (top + bottom)
   -------------------------------------------------------------------------- */
.pv5  { padding-top: 5px !important; padding-bottom: 5px !important; }
.pv10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.pv15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.pv20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.pv25 { padding-top: 25px !important; padding-bottom: 25px !important; }
.pv30 { padding-top: 30px !important; padding-bottom: 30px !important; }

/* --------------------------------------------------------------------------
   Margin — top
   -------------------------------------------------------------------------- */
.mt0  { margin-top: 0 !important; }
.mt5  { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt70 { margin-top: 70px !important; }

/* --------------------------------------------------------------------------
   Margin — right
   -------------------------------------------------------------------------- */
.mr0  { margin-right: 0 !important; }
.mr5  { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }

/* --------------------------------------------------------------------------
   Margin — bottom
   -------------------------------------------------------------------------- */
.mb0  { margin-bottom: 0 !important; }
.mb5  { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }

/* --------------------------------------------------------------------------
   Margin — left
   -------------------------------------------------------------------------- */
.ml0  { margin-left: 0 !important; }
.ml5  { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }

/* --------------------------------------------------------------------------
   Margin — Horizontal (left + right)
   -------------------------------------------------------------------------- */
.mh5  { margin-left: 5px !important; margin-right: 5px !important; }
.mh10 { margin-left: 10px !important; margin-right: 10px !important; }
.mh15 { margin-left: 15px !important; margin-right: 15px !important; }

/* --------------------------------------------------------------------------
   Margin — Vertical (top + bottom)
   -------------------------------------------------------------------------- */
.mv5  { margin-top: 5px !important; margin-bottom: 5px !important; }
.mv10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.mv15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.mv20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.mv25 { margin-top: 25px !important; margin-bottom: 25px !important; }
.mv30 { margin-top: 30px !important; margin-bottom: 30px !important; }

/* --------------------------------------------------------------------------
   Border — Structural
   -------------------------------------------------------------------------- */
.br-n { border: none !important; }
.br-a { border: 1px solid #e2e8f0 !important; }
.br-t { border-top: 1px solid #e2e8f0 !important; }
.br-b { border-bottom: 1px solid #e2e8f0 !important; }
.br-r { border-right: 1px solid #e2e8f0 !important; }
.br-l { border-left: 1px solid #e2e8f0 !important; }

/* --------------------------------------------------------------------------
   Border — Color
   -------------------------------------------------------------------------- */
.br-primary { border-color: var(--primary) !important; }
.br-info    { border-color: var(--info) !important; }
.br-success { border-color: var(--success) !important; }
.br-warning { border-color: var(--warning) !important; }
.br-danger  { border-color: var(--danger) !important; }
.br-grey    { border-color: #d1d5db !important; }
.br-lighter { border-color: #e2e8f0 !important; }
.br-light   { border-color: #e5e7eb !important; }

/* --------------------------------------------------------------------------
   Border — Width
   -------------------------------------------------------------------------- */
.bw1 { border-width: 1px !important; }
.bw2 { border-width: 2px !important; }
.bw3 { border-width: 3px !important; }
.bw4 { border-width: 4px !important; }
.bw5 { border-width: 5px !important; }

/* --------------------------------------------------------------------------
   Vertical Align
   -------------------------------------------------------------------------- */
.va-t { vertical-align: top !important; }
.va-m { vertical-align: middle !important; }
.va-b { vertical-align: bottom !important; }

/* --------------------------------------------------------------------------
   Font Size
   -------------------------------------------------------------------------- */
.fs10 { font-size: 10px !important; }
.fs11 { font-size: 11px !important; }
.fs12 { font-size: 12px !important; }
.fs13 { font-size: 13px !important; }
.fs14 { font-size: 14px !important; }
.fs15 { font-size: 15px !important; }
.fs16 { font-size: 16px !important; }
.fs18 { font-size: 18px !important; }
.fs20 { font-size: 20px !important; }
.fs22 { font-size: 22px !important; }
.fs24 { font-size: 24px !important; }
.fs30 { font-size: 30px !important; }
.fs36 { font-size: 36px !important; }
.fs70 { font-size: 70px !important; }

/* --------------------------------------------------------------------------
   Font Weight
   -------------------------------------------------------------------------- */
.fw-b { font-weight: bold !important; }
.fw-n { font-weight: normal !important; }
.fw-l { font-weight: 300 !important; }
.fw-bold { font-weight: bold !important; }

/* --------------------------------------------------------------------------
   Line Height
   -------------------------------------------------------------------------- */
.lh15 { line-height: 15px !important; }
.lh25 { line-height: 25px !important; }

/* --------------------------------------------------------------------------
   Width / Max Width
   -------------------------------------------------------------------------- */
.w50  { width: 50px !important; }
.w100 { width: 100px !important; }
.w150 { width: 150px !important; }
.w200 { width: 200px !important; }
.w250 { width: 250px !important; }
.w300 { width: 300px !important; }

.mw50  { max-width: 50px !important; }
.mw100 { max-width: 100px !important; }
.mw200 { max-width: 200px !important; }
.mw300 { max-width: 300px !important; }
.mw400 { max-width: 400px !important; }
.mw500 { max-width: 500px !important; }
.mw600 { max-width: 600px !important; }

/* --------------------------------------------------------------------------
   Overflow
   -------------------------------------------------------------------------- */
.of-h { overflow: hidden !important; }
.of-a { overflow: auto !important; }
.ov-h { overflow: hidden !important; }
.ov-a { overflow: auto !important; }

/* --------------------------------------------------------------------------
   Display
   -------------------------------------------------------------------------- */
.ib { display: inline-block !important; }

/* --------------------------------------------------------------------------
   Background Colors — Base layer (AdminDesigns-compatible)
   Uses SiakadUI brand colors from CSS variables
   -------------------------------------------------------------------------- */
.bg-primary { background-color: var(--primary) !important; color: #fff; }
.bg-success { background-color: var(--success) !important; color: #fff; }
.bg-info    { background-color: var(--info) !important; color: #fff; }
.bg-warning { background-color: var(--warning) !important; color: #fff; }
.bg-danger  { background-color: var(--danger) !important; color: #fff; }
.bg-alert   { background-color: var(--alert-purple) !important; color: #fff; }
.bg-system  { background-color: var(--system) !important; color: #fff; }
.bg-dark    { background-color: var(--dark) !important; color: #fff; }
.bg-light   { background-color: #f8fafc !important; color: #475569; }
.bg-white   { background-color: #fff !important; color: #475569; }

/* .light modifier — lighter shade of bg-* */
.bg-primary.light { background-color: #1a9bc7 !important; color: #fff; }
.bg-success.light { background-color: #4ade80 !important; color: #fff; }
.bg-info.light    { background-color: #22d3ee !important; color: #fff; }
.bg-warning.light { background-color: #fbbf24 !important; color: #fff; }
.bg-danger.light  { background-color: #f87171 !important; color: #fff; }
.bg-aqua.light    { background-color: #22d3ee !important; color: #fff; }
.bg-blue.light    { background-color: #1a9bc7 !important; color: #fff; }
.bg-green.light   { background-color: #4ade80 !important; color: #fff; }
.bg-red.light     { background-color: #f87171 !important; color: #fff; }
.bg-yellow.light  { background-color: #fbbf24 !important; color: #fff; }
.bg-purple.light  { background-color: #a992e2 !important; color: #fff; }
.bg-orange.light  { background-color: #fb923c !important; color: #fff; }

/* AdminLTE-compatible bg colors (mapped to SiakadUI palette) */
.bg-aqua    { background-color: var(--info) !important; color: #fff; }
.bg-blue    { background-color: var(--primary) !important; color: #fff; }
.bg-green   { background-color: var(--success) !important; color: #fff; }
.bg-red     { background-color: var(--danger) !important; color: #fff; }
.bg-yellow  { background-color: var(--warning) !important; color: #fff; }
.bg-purple  { background-color: var(--alert-purple) !important; color: #fff; }
.bg-orange  { background-color: #f97316 !important; color: #fff; }

/* --------------------------------------------------------------------------
   Text Colors — Base layer (AdminDesigns-compatible)
   -------------------------------------------------------------------------- */
.text-white   { color: #fff !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-info    { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-muted   { color: #94a3b8 !important; }
.text-alert   { color: var(--alert-purple) !important; }
.text-system  { color: var(--system) !important; }
.text-dark    { color: var(--dark) !important; }

/* AdminLTE-compatible text colors */
.text-blue   { color: var(--primary) !important; }
.text-yellow { color: var(--warning) !important; }