/* ============================
   Spacing - Margin / Padding
============================ */
.m-0         { margin: 0 !important; }
.mt-1        { margin-top: 0.25rem !important; }
.mb-1        { margin-bottom: 0.25rem !important; }
.ml-1        { margin-left: 0.25rem !important; }
.mr-1        { margin-right: 0.25rem !important; }
.mt-2        { margin-top: 0.5rem !important; }
.mb-2        { margin-bottom: 0.5rem !important; }

.p-1         { padding: 0.25rem !important; }
.p-2         { padding: 0.5rem !important; }
.pt-2        { padding-top: 0.5rem !important; }
.pb-2        { padding-bottom: 0.5rem !important; }

/* ============================
   Display / Layout
============================ */
.block       { display: block !important; }
.inline-block{ display: inline-block !important; }
.hidden      { display: none }
.hidden-opacity      { opacity: 0; pointer-events: none; visibility: hidden; }
.hidden-important{ display: none !important; }

.flex        { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.items-center{ align-items: center !important; }
.justify-center { justify-content: center !important; }
.justify-between{ justify-content: space-between !important; }

/* ============================
   Width / Height
============================ */
.w-0         { width: 0 !important; }
.w-1         { width: 0.25rem !important; }
.w-2         { width: 0.5rem !important; }
.w-4         { width: 1rem !important; }
.w-8         { width: 2rem !important; }
.w-1\/2      { width: 50% !important; }
.w-full      { width: 100% !important; }
.max-w-sm    { max-width: 24rem !important; }

.h-0         { height: 0 !important; }
.h-1         { height: 0.25rem !important; }
.h-2         { height: 0.5rem !important; }
.h-4         { height: 1rem !important; }
.h-8         { height: 2rem !important; }
.h-full      { height: 100% !important; }
.h-screen    { height: 100vh !important; }
.min-h-screen{ min-height: 100vh !important; }

/* ============================
   Text / Font
============================ */
.text-sm     { font-size: 0.875rem !important; }
.text-lg     { font-size: 1.125rem !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-bold   { font-weight: bold !important; }

/* ============================
   Background / Border
============================ */
.bg-white    { background-color: #fff !important; }
.bg-gray     { background-color: #f3f4f6 !important; }

.border      { border: 1px solid #ccc !important; }
.rounded     { border-radius: 0.25rem !important; }

/* ============================
   Effects / Utilities
============================ */
.shadow      { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
.transition  { transition: all 0.2s ease-in-out !important; }
.cursor-pointer { cursor: pointer !important; }

/* point evt none */
.pointer-none { pointer-events: none !important; }