/**
 * CSS Utility Classes for CSP Compliance
 * Replacing inline styles to eliminate need for 'unsafe-inline'
 */

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

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

/* Form utilities */
.no-resize { resize: none !important; }

/* Width utilities */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Max-width utilities */
.max-w-20em { max-width: 20em !important; }

/* Height utilities */
.h-auto { height: auto !important; }
.h-100 { height: 100% !important; }

/* Z-index utilities */
.z-high { z-index: 99999; }

/* Float utilities */
.float-left { float: left !important; }
.float-right { float: right !important; }

/* Font size utilities */
.fs-small { font-size: 0.666em !important; }
.fs-14 { font-size: 14px !important; }
.fs-16 { font-size: 16px !important; }
.fs-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }

/* Font weight utilities */
.fw-normal { font-weight: normal !important; }
.fw-bold { font-weight: bold !important; }

/* Color utilities - Momindum brand colors */
.text-brand-dark { color: #090A0B !important; }
.text-brand-gray { color: #393F41 !important; }
.text-green { color: green !important; }
.text-red { color: red !important; }
.text-yellow { color: yellow !important; }

/* Background utilities */
.bg-brand-blue { background: #003594 !important; }
.bg-brand-light-blue { background: #6AB8D4 !important; }
.bg-white { background: #fff !important; }

/* Vertical alignment utilities */
.align-bottom { vertical-align: bottom !important; }
.align-top { vertical-align: top !important; }

/* Flexbox alignment utilities */
.align-self-end { align-self: flex-end !important; }

/* White space utilities */
.no-wrap { white-space: nowrap !important; }
.text-ellipsis {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Margin utilities */
.mt-3 { margin-top: 3px !important; }
.pt-24 { padding-top: 24px !important; }

/* Border utilities */
.border-0 { border: 0 !important; }

/* SVG utilities */
.stroke-0 { stroke-width: 0px !important; }

/* Position utilities */
.position-absolute { position: absolute !important; }

/* Iframe utilities */
.iframe-full {
    width: 100% !important;
    height: 600px !important;
    border: none !important;
    background: #fff !important;
}

/* Email template specific utilities */
.mail-body {
    word-spacing: normal;
}

.mail-container {
    margin: 0px auto;
    max-width: 600px;
}

.mail-table-600 {
    width: 600px;
}

.mail-table-100 {
    width: 100%;
}

.mail-padding-lr {
    padding: 0 20px;
}

.mail-padding-content {
    padding: 24px 20px 0 20px;
}

.mail-logo-width {
    width: 160px;
}

.mail-img-responsive {
    border: 0;
    display: block;
    outline: none;
    text-decoration: none;
    height: auto;
    width: 100%;
    font-size: 16px;
}

.mail-separator {
    border-top: solid 1px #C8CDD0;
    font-size: 1px;
    margin: 0px auto;
    width: 100%;
}

.mail-font-0 {
    font-size: 0px;
}

.mail-direction-ltr {
    direction: ltr;
}

.mail-inline-block-100 {
    font-size: 0px;
    text-align: left;
    direction: ltr;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.mail-border-collapse {
    border-collapse: collapse;
    border-spacing: 0px;
}

.mail-padding-logo {
    padding: 30px 0;
}

/* Specific height utilities for dynamic content */
.chart-bar {
    background: var(--bar-color);
    height: var(--bar-height);
}

/* Tracking pixel utility */
.tracking-pixel {
    border: 0;
}