/* Utility classes replacing inline styles for CSP compliance */

/* Display utilities */
.u-display-none { display: none; }
.u-display-block { display: block; }
.u-display-flex { display: flex; }
.u-display-inline-block { display: inline-block; }

/* Positioning */
.u-position-fixed { position: fixed; }
.u-inset-0 { inset: 0; }
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }

/* Colors and backgrounds */
.u-bg-primary { background: #0a2a6e; }
.u-bg-light-blue { background: #e3f2fd; }
.u-bg-white { background: #fff; }
.u-bg-light-gray { background: #f4f6f9; }
.u-bg-very-light-blue { background: #f7fbff; }
.u-bg-dark-blue { background: #1a1f3e; }
.u-bg-darker-blue { background: #101630; }
.u-bg-success-light { background: #dff7e8; }

.u-text-primary { color: #0a2a6e; }
.u-text-light { color: #e0e6f0; }
.u-text-dark { color: #17323c; }
.u-text-muted { color: #5f7580; }
.u-text-gray { color: #999; }
.u-text-dark-gray { color: #444; }
.u-text-light-gray { color: #2b3a4d; }
.u-text-error { color: #b42318; }
.u-text-light-error { color: #ff9ea5; }
.u-text-info { color: #1565c0; }
.u-text-cyan { color: #0a6f80; }
.u-text-dbe9ff { color: #dbe9ff; }
.u-text-opacity-9 { opacity: 0.9; }

/* Spacing */
.u-margin-0 { margin: 0; }
.u-margin-t-0-r-0-b-12-l-0 { margin: 0 0 12px 0; }
.u-margin-t-0-r-0-b-10-l-0 { margin: 0 0 10px 0; }
.u-margin-t-0-r-0-b-14-l-0 { margin: 0 0 14px 0; }
.u-margin-t-0-r-0-b-20-l-0 { margin: 0 0 20px 0; }
.u-margin-t-0-r-0-b-24-l-0 { margin: 0 0 24px 0; }
.u-margin-t-10-r-0-b-0-l-0 { margin: 10px 0 0 0; }
.u-margin-t-5-r-0-b-0-l-0 { margin: 5px 0 0 0; }
.u-margin-t-18-r-0-b-0-l-0 { margin: 18px 0 0 0; }
.u-margin-t-25 { margin-top: 25px; }
.u-margin-t-6 { margin-top: 6px; }
.u-margin-t-8 { margin-top: 8px; }
.u-margin-t-10 { margin-top: 10px; }
.u-margin-t-12-auto-0 { margin: 12px auto 0; }
.u-margin-auto { margin: auto; }
.u-margin-b-10 { margin-bottom: 10px; }
.u-margin-b-16 { margin-bottom: 16px; }

.u-padding-0 { padding: 0; }
.u-padding-30-0 { padding: 30px 0; }
.u-padding-20-30 { padding: 20px 30px; }
.u-padding-30-30-10 { padding: 30px 30px 10px; }
.u-padding-12-14 { padding: 12px 14px; }
.u-padding-18-16 { padding: 18px 16px; }
.u-padding-14-18 { padding: 14px 18px; }
.u-padding-20-30-border-top { padding: 20px 30px; border-top: 1px solid #eee; }

/* Borders and shadows */
.u-border-1-solid-d7e4ea { border: 1px solid #d7e4ea; }
.u-border-1-solid-2d3561 { border: 1px solid #2d3561; }
.u-border-1-solid-d4e7ff { border: 1px solid #d4e7ff; }
.u-border-t-1-solid-eee { border-top: 1px solid #eee; }
.u-border-b-1-solid-eee { border-bottom: 1px solid #eee; }
.u-border-radius-10 { border-radius: 10px; }
.u-border-radius-12 { border-radius: 12px; }
.u-border-radius-8 { border-radius: 8px; }
.u-box-shadow-md { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.u-box-shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* Font sizes */
.u-font-size-9px { font-size: 9px; }
.u-font-size-11px { font-size: 11px; }
.u-font-size-12px { font-size: 12px; }
.u-font-size-13px { font-size: 13px; }
.u-font-size-14px { font-size: 14px; }
.u-font-size-15px { font-size: 15px; }
.u-font-size-16px { font-size: 16px; }
.u-font-size-20px { font-size: 20px; }
.u-font-size-82rem { font-size: .82rem; }
.u-font-size-85rem { font-size: .85rem; }
.u-font-size-88rem { font-size: .88rem; }
.u-font-size-9rem { font-size: .9rem; }
.u-font-size-3rem { font-size: 3rem; }
.u-font-size-1rem { font-size: 1rem; }

/* Font weight */
.u-font-weight-600 { font-weight: 600; }
.u-font-weight-700 { font-weight: 700; }

/* Line height */
.u-line-height-1-5 { line-height: 1.5; }
.u-line-height-1-6 { line-height: 1.6; }

/* Width/Height */
.u-width-36px { width: 36px; }
.u-width-80px { width: 80px; }
.u-width-110px { width: 110px; }
.u-width-260px { width: 260px; }
.u-width-64px { width: 64px; }
.u-width-100pct { width: 100%; }
.u-max-width-180px { max-width: 180px; }
.u-max-width-380px { max-width: 380px; }
.u-max-width-400px { max-width: 400px; }
.u-height-64px { height: 64px; }
.u-min-height-18px { min-height: 18px; }

/* Flexbox */
.u-flex-align-center-justify-center { display: flex; align-items: center; justify-content: center; }
.u-flex-justify-space-between { display: flex; justify-content: space-between; }
.u-flex-justify-flex-end { display: flex; justify-content: flex-end; }

/* Overflow */
.u-overflow-hidden { overflow: hidden; }
.u-whitespace-pre-wrap { white-space: pre-wrap; }
.u-word-break-break-word { word-break: break-word; }
.u-whitespace-pre-wrap-word-break { white-space: pre-wrap; word-break: break-word; }

/* Grid */
.u-grid-column-1-neg-1 { grid-column: 1 / -1; }

/* SVG */
.u-svg-icon { fill: none; stroke: #4fc3f7; stroke-width: 3; stroke-linecap: round; }

/* Cursor */
.u-cursor-pointer { cursor: pointer; }

/* Font family */
.u-font-family-arial { font-family: Arial, sans-serif; }

/* Specific combinations */
.u-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.u-modal-overlay-white { position: fixed; inset: 0; background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; z-index: 10000; }

.u-pwa-hint { display: none; margin-top: 8px; font-size: .82rem; color: #b0c4d8; }
.u-pwa-box { display: none; max-width: 400px; margin: 12px auto 0; padding: 14px 18px; background: #e3f2fd; border-radius: 10px; font-size: .9rem; color: #1565c0; text-align: center; }
.u-pwa-box-btn { display: none; margin-top: 2px; }

/* Email templates */
.u-email-body { margin: 0; padding: 0; background: #f4f6f9; font-family: Arial, sans-serif; }
.u-email-table { background: #f4f6f9; padding: 30px 0; width: 100%; }
.u-email-content { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.08); width: 560px; }
.u-email-header { background: #0a2a6e; padding: 20px 30px; text-align: center; }
.u-email-body-content { padding: 30px 30px 10px; }
.u-email-footer { padding: 20px 30px; border-top: 1px solid #eee; color: #999; font-size: 12px; text-align: center; }
