/* Utility CSS Classes for Tattoo Ink Tracker */
/* Generated to replace inline styles */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Margin utilities */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mt-40 { margin-top: 40px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mt-60 { margin-top: 60px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mt-1r { margin-top: 1rem !important; }
.mb-1r { margin-bottom: 1rem !important; }
.mt-2r { margin-top: 2rem !important; }
.mb-2r { margin-bottom: 2rem !important; }

/* Width utilities */
.w-100 { width: 100% !important; }
.mw-400 { max-width: 400px !important; }
.mw-600 { max-width: 600px !important; }
.mw-700 { max-width: 700px !important; }
.mw-1000 { max-width: 1000px !important; }
.mw-1400 { max-width: 1400px !important; }

/* Text alignment */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Flexbox utilities */
.flex-wrap { flex-wrap: wrap !important; }
.flex-center { justify-content: center !important; }
.flex-between { justify-content: space-between !important; }
.align-center { align-items: center !important; }
.gap-10 { gap: 10px !important; }
.gap-20 { gap: 20px !important; }

/* Position utilities */
.position-relative { position: relative !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Component-specific classes */
.scanner-wrapper { position: relative; width: 100%; max-width: 400px; margin: 10px auto; }
.scanner-video { width: 100%; }
.form-max-width { max-width: 600px; margin: auto; }
.settings-form-width { max-width: 700px; margin: auto; }
.table-wrapper-full { width: 100%; overflow-x: auto; }
.session-container { box-sizing: border-box; width: 100%; max-width: 1000px; padding: 0 16px; margin: 0 auto; }
.card-grid-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.card-settings-size { flex: 1 1 280px; max-width: 320px; }