/* ============================================================
   GLOBAL ARABIC FONT — Cairo (simple) + heavy 900 weight
   Applied to ALL pages: utilities.css is loaded by every layout
   (app / apphome / app_auth / apphome1 / apphome-gold ...).
   Safely skips icon glyphs, the script logo (.navbar-brand) and
   the barcode font so barcodes & icons keep working.
   To change weight, edit the 900 values below. To change the
   font, replace "Cairo" (and the @import URL) everywhere here.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
    --bs-font-sans-serif: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
    --bs-body-font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
    --bs-body-font-weight: 900 !important;
}

/* Font family on every element except icon fonts, the script logo and barcodes */
body,
body *:not(i):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class^="fa-"]):not([class*=" fa-"]):not(.material-icons):not(.ui-icon):not(.navbar-brand):not([style*="barcodefont"]) {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* Heavy 900 weight everywhere except icon fonts and barcodes */
body,
body *:not(i):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not([class^="fa-"]):not([class*=" fa-"]):not(.material-icons):not(.ui-icon):not([style*="barcodefont"]) {
    font-weight: 900 !important;
}

/**
 * Utility Classes for GoldApp
 * Common utility classes to replace inline styles throughout the application
 */

/* ====================
   WIDTH UTILITIES
   ==================== */

/* Viewport Width (vw) utilities */
.w-4vw { width: 4vw !important; }
.w-5vw { width: 5vw !important; }
.w-6vw { width: 6vw !important; }
.w-7vw { width: 7vw !important; }
.w-8vw { width: 8vw !important; }
.w-13vw { width: 13vw !important; }
.w-14vw { width: 14vw !important; }
.w-40vw { width: 40vw !important; }

/* Percentage widths */
.w-15 { width: 15% !important; }
.w-25 { width: 25% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-100 { width: 100% !important; }

/* Fixed pixel widths */
.w-16px { width: 16px !important; }
.w-18px { width: 18px !important; }
.w-24px { width: 24px !important; }
.w-70px { width: 70px !important; }
.w-311px { width: 311px !important; }
.w-327px { width: 327px !important; }
.w-335px { width: 335px !important; }
.w-343px { width: 343px !important; }
.w-375px { width: 375px !important; }

/* Auto width */
.w-auto { width: auto !important; }

/* ====================
   MARGIN UTILITIES
   ==================== */

/* All sides margins */
.m-0 { margin: 0 !important; }
.m-4px { margin: 4px !important; }
.m-8px { margin: 8px !important; }

/* Vertical margins (top/bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-8px { margin-top: 8px !important; margin-bottom: 8px !important; }

/* Horizontal margins (left/right) */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-4px { margin-left: 4px !important; margin-right: 4px !important; }
.mx-8px { margin-left: 8px !important; margin-right: 8px !important; }

/* Individual side margins */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-32px { margin-bottom: 32px !important; }
.ml-8px { margin-left: 8px !important; }
.mr-8px { margin-right: 8px !important; }
.mr-16px { margin-right: 16px !important; }
.mr-32px { margin-right: 32px !important; }
.mr-48px { margin-right: 48px !important; }

/* Combined margins - Common patterns */
.m-8-0 { margin: 8px 0 !important; } /* margin: 8px 0 */
.m-0-8 { margin: 0 8px !important; } /* margin: 0 8px */
.m-0-4 { margin: 0 4px !important; } /* margin: 0 4px */
.m-0-4-0-0 { margin: 0 4px 0 0 !important; } /* margin: 0 4px 0 0 */
.m-0-8-0-0 { margin: 0 8px 0 0 !important; } /* margin: 0 8px 0 0 */
.m-0-8-8-0 { margin: 0 8px 8px 0 !important; } /* margin: 0 8px 8px 0 */
.m-0-16-0-0 { margin: 0 16px 0 0 !important; } /* margin: 0 16px 0 0 */

/* ====================
   PADDING UTILITIES
   ==================== */

.p-0 { padding: 0 !important; }
.p-4px { padding: 4px !important; }
.p-8px { padding: 8px !important; }
.p-16px { padding: 16px !important; }

/* Vertical padding */
.py-8px { padding-top: 8px !important; padding-bottom: 8px !important; }

/* Horizontal padding */
.px-8px { padding-left: 8px !important; padding-right: 8px !important; }
.px-16px { padding-left: 16px !important; padding-right: 16px !important; }

/* ====================
   BORDER RADIUS
   ==================== */

.rounded-2px { border-radius: 2px !important; }
.rounded-6px { border-radius: 6px !important; }
.rounded-10px { border-radius: 10px !important; }
.rounded-12px { border-radius: 12px !important; }
.rounded-20px { border-radius: 20px !important; }
.rounded-30px { border-radius: 30px !important; }
.rounded-40px { border-radius: 40px !important; }
.rounded-55px { border-radius: 55px !important; }
.rounded-100px { border-radius: 100px !important; }
.rounded-full { border-radius: 9999px !important; }

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

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

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

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; align-items: center;}
.d-flex { display: flex !important; }

/* ====================
   FLEX UTILITIES
   ==================== */

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

/* ====================
   BACKGROUND COLORS
   ==================== */

.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: #ffffff !important; }
.bg-red { background-color: red !important; }
.bg-gray-light { background-color: #f1f1f1 !important; }

/* ====================
   FORM UTILITIES
   ==================== */

/* Form groups - Common form layout patterns */
.form-group-inline {
    text-align: right;
    margin: 8px 0;
}

.form-row-inline {
    display: inline-flex;
    align-items: center;
}

/* Form labels - Common label widths */
.label-6vw {
    width: 6vw;
    display: inline-block;
    text-align: right;
    margin-right: 8px;
}

.label-8vw {
    width: 8vw;
    display: inline-block;
    text-align: right;
    margin-right: 8px;
}

/* Form inputs - Common input widths */
.input-4vw {
    width: 4vw !important;
}

.input-5vw {
    width: 5vw !important;
}

.input-6vw {
    width: 6vw !important;
}

.input-7vw {
    width: 7vw !important;
}

.input-8vw {
    width: 8vw !important;
}

.input-13vw {
    width: 13vw !important;
}

.input-14vw {
    width: 14vw !important;
}

.input-40vw {
    width: 40vw !important;
}

/* ====================
   BORDERS
   ==================== */

.border-none { border: none !important; }
.border-0 { border: 0 !important; }

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

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

/* ====================
   VISIBILITY
   ==================== */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }

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

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

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

.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }