/* ============================================
   Utility CSS Classes
   Extracted from inline styles for audit compliance
   ============================================ */

/* ----------------------------------------
   Colors
   ---------------------------------------- */
.text-gray-800 { color: #1f2937; }
.text-gray-600 { color: #374151; }
.text-gray-500 { color: #6b7280; }
.text-green-800 { color: #166534; }
.text-red-800 { color: #991b1b; }

/* ----------------------------------------
   Font Sizes
   ---------------------------------------- */
.fs-xs { font-size: 0.65rem; }
.fs-sm { font-size: 0.73rem; }
.fs-0-75 { font-size: 0.75rem; }
.fs-0-8 { font-size: 0.8rem; }
.fs-0-85 { font-size: 0.85rem; }
.fs-1-05 { font-size: 1.05rem; }
.fs-3rem { font-size: 3rem; }

/* ----------------------------------------
   Width Utilities
   ---------------------------------------- */
.w-28 { width: 28px; }
.w-40 { width: 40px; }
.w-60 { width: 60px; }
.w-80 { width: 80px; }
.w-90 { width: 90px; }
.w-100px { width: 100px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.w-160 { width: 160px; }
.w-180 { width: 180px; }
.w-200 { width: 200px; }
.w-10-pct { width: 10%; }
.w-25-pct { width: 25%; }
.w-30-pct { width: 30%; }
.w-35-pct { width: 35%; }
.max-w-120 { max-width: 120px; }
.max-w-400 { max-width: 400px; }

/* ----------------------------------------
   Height Utilities
   ---------------------------------------- */
.h-40 { height: 40px; }
.h-50 { height: 50px; }
.max-h-200 { max-height: 200px; }
.max-h-300 { max-height: 300px; }
.max-h-400 { max-height: 400px; }

/* ----------------------------------------
   Overflow
   ---------------------------------------- */
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ----------------------------------------
   Text Formatting
   ---------------------------------------- */
.text-uppercase { text-transform: uppercase; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.word-break-all { word-break: break-all; }
.word-break-word { word-break: break-word; }
.line-height-1-8 { line-height: 1.8; }

/* ----------------------------------------
   Display & Visibility
   ---------------------------------------- */
.d-none-dynamic { display: none; }

/* ----------------------------------------
   Borders
   ---------------------------------------- */
.border-bottom-black { border-bottom: 1px solid #000; }
.border-radius-6 { border-radius: 6px; }
.border-radius-8 { border-radius: 8px; }
.border-radius-10 { border-radius: 10px; }

/* ----------------------------------------
   Opacity
   ---------------------------------------- */
.opacity-30 { opacity: 0.3; }
.opacity-80 { opacity: 0.8; }

/* ----------------------------------------
   Positioning
   ---------------------------------------- */
.sticky-top-80 { 
    position: sticky;
    top: 80px;
}

.toast-container-fixed {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
}

.toast-container-fixed-60 {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 9999;
}

/* ----------------------------------------
   Backgrounds
   ---------------------------------------- */
.bg-gray-50 { background: #f9fafb; }

/* ----------------------------------------
   Gradients
   ---------------------------------------- */
.gradient-primary {
    background: linear-gradient(135deg, #1a5f7a 0%, #159895 100%);
}

/* ----------------------------------------
   Icons
   ---------------------------------------- */
.icon-dot-small {
    font-size: 0.5rem;
    vertical-align: middle;
}

/* ----------------------------------------
   Email Template Link (white)
   ---------------------------------------- */
.email-link-white {
    color: #ffffff;
}

/* ----------------------------------------
   Form Elements
   ---------------------------------------- */
.form-input-date {
    width: 100px;
}

.form-input-date-lg {
    width: 110px;
}

.form-input-reg {
    width: 100px;
}

/* ----------------------------------------
   Cards
   ---------------------------------------- */
.card-borderless {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
}

/* ----------------------------------------
   Email Preview
   ---------------------------------------- */
.email-preview-container {
    background: #f9fafb;
    padding: 20px;
}

.email-preview-frame {
    background: white;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.email-preview-iframe {
    width: 100%;
    border: none;
    display: block;
}

/* ----------------------------------------
   Signature Line (for print)
   ---------------------------------------- */
.signature-line {
    border-bottom: 1px solid #000;
    width: 200px;
    margin-left: auto;
    height: 40px;
}

.signature-line-tall {
    border-bottom: 1px solid #000;
    width: 200px;
    margin-left: auto;
    height: 50px;
}

/* ----------------------------------------
   Pre/Code blocks
   ---------------------------------------- */
.pre-scrollable {
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
}

.pre-scrollable-lg {
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
}

/* ----------------------------------------
   Print Styles
   ---------------------------------------- */
.print-section {
    padding: 1rem;
}

.print-text-small {
    font-size: 9pt;
    margin-bottom: 15pt;
}

/* ----------------------------------------
   Mobile Cards
   ---------------------------------------- */
@media (max-width: 767px) {
    .mobile-logs {
        display: block !important;
    }
    
    .desktop-logs {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .mobile-logs {
        display: none !important;
    }
    
    .desktop-logs {
        display: block !important;
    }
}