/**
 * Mobile Typography & Spacing Optimization
 * 
 * Goals:
 * - Prevent iOS auto-zoom (16px minimum font size)
 * - Improve readability (line-height 1.5+)
 * - Comfortable spacing (breathing room)
 * - Proper heading hierarchy
 * - Text truncation for long content
 * - White space between sections
 * 
 * Phase: 3.5 - Typography & Spacing
 * Date: December 30, 2025
 */

/* ========================================================================
   MOBILE TYPOGRAPHY (< 768px)
   ======================================================================== */

@media (max-width: 767px) {
    
    /* ====================================================================
       1. BASE TYPOGRAPHY - Prevent iOS zoom
       ==================================================================== */
    
    /* Body text - 16px prevents iOS auto-zoom */
    body {
        font-size: 16px !important;
        line-height: 1.6;
        color: #1f2937;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Paragraphs */
    p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 16px;
        color: #374151;
    }
    
    /* Small text */
    small,
    .text-sm,
    .small {
        font-size: 14px !important;
        line-height: 1.5;
    }
    
    /* Extra small text */
    .text-xs {
        font-size: 12px !important;
        line-height: 1.4;
    }
    
    /* Large text */
    .text-lg {
        font-size: 18px !important;
        line-height: 1.5;
    }
    
    /* ====================================================================
       2. HEADING HIERARCHY - Clear visual structure
       ==================================================================== */
    
    /* H1 - Page title */
    h1, .h1 {
        font-size: 28px !important;
        line-height: 1.3;
        font-weight: 800;
        color: #111827;
        margin-bottom: 20px;
        margin-top: 0;
        letter-spacing: -0.02em;
    }
    
    /* H2 - Section title */
    h2, .h2 {
        font-size: 24px !important;
        line-height: 1.3;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 16px;
        margin-top: 32px;
        letter-spacing: -0.01em;
    }
    
    h2:first-child, .h2:first-child {
        margin-top: 0;
    }
    
    /* H3 - Subsection title */
    h3, .h3 {
        font-size: 20px !important;
        line-height: 1.4;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
        margin-top: 24px;
    }
    
    h3:first-child, .h3:first-child {
        margin-top: 0;
    }
    
    /* H4 - Card/component title */
    h4, .h4 {
        font-size: 18px !important;
        line-height: 1.4;
        font-weight: 600;
        color: #374151;
        margin-bottom: 10px;
        margin-top: 20px;
    }
    
    /* H5 - Small component title */
    h5, .h5 {
        font-size: 16px !important;
        line-height: 1.5;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
        margin-top: 16px;
    }
    
    /* H6 - Label/caption */
    h6, .h6 {
        font-size: 14px !important;
        line-height: 1.5;
        font-weight: 600;
        color: #6b7280;
        margin-bottom: 6px;
        margin-top: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    /* ====================================================================
       3. SPACING - Breathing room
       ==================================================================== */
    
    /* Section spacing */
    section,
    .section {
        padding: 24px 0;
    }
    
    /* Card spacing */
    .card {
        margin-bottom: 20px;
    }
    
    .card-body {
        padding: 20px;
    }
    
    .card-header,
    .card-footer {
        padding: 16px 20px;
    }
    
    /* Container padding */
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Row/column spacing */
    .row {
        margin-left: -12px;
        margin-right: -12px;
    }
    
    .row > * {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* Margin utilities - larger on mobile */
    .mb-1 { margin-bottom: 8px !important; }
    .mb-2 { margin-bottom: 12px !important; }
    .mb-3 { margin-bottom: 20px !important; }
    .mb-4 { margin-bottom: 28px !important; }
    .mb-5 { margin-bottom: 36px !important; }
    
    .mt-1 { margin-top: 8px !important; }
    .mt-2 { margin-top: 12px !important; }
    .mt-3 { margin-top: 20px !important; }
    .mt-4 { margin-top: 28px !important; }
    .mt-5 { margin-top: 36px !important; }
    
    .py-1 { padding-top: 8px !important; padding-bottom: 8px !important; }
    .py-2 { padding-top: 12px !important; padding-bottom: 12px !important; }
    .py-3 { padding-top: 20px !important; padding-bottom: 20px !important; }
    .py-4 { padding-top: 28px !important; padding-bottom: 28px !important; }
    .py-5 { padding-top: 36px !important; padding-bottom: 36px !important; }
    
    .px-1 { padding-left: 8px !important; padding-right: 8px !important; }
    .px-2 { padding-left: 12px !important; padding-right: 12px !important; }
    .px-3 { padding-left: 20px !important; padding-right: 20px !important; }
    .px-4 { padding-left: 28px !important; padding-right: 28px !important; }
    .px-5 { padding-left: 36px !important; padding-right: 36px !important; }
    
    /* ====================================================================
       4. TEXT TRUNCATION - Prevent layout breaking
       ==================================================================== */
    
    /* Single-line truncation */
    .text-truncate,
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Multi-line truncation (2 lines) */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Multi-line truncation (3 lines) */
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* ====================================================================
       5. LISTS - Better spacing
       ==================================================================== */
    
    /* Unordered/ordered lists */
    ul, ol {
        padding-left: 24px;
        margin-bottom: 20px;
    }
    
    li {
        margin-bottom: 10px;
        line-height: 1.6;
    }
    
    li:last-child {
        margin-bottom: 0;
    }
    
    /* List groups */
    .list-group {
        margin-bottom: 20px;
    }
    
    .list-group-item {
        padding: 16px;
        font-size: 15px;
        line-height: 1.5;
    }
    
    /* ====================================================================
       6. LINKS - Clear and tappable
       ==================================================================== */
    
    a {
        color: #2563eb;
        text-decoration: none;
        font-weight: 500;
    }
    
    a:hover,
    a:active {
        color: #1d4ed8;
        text-decoration: underline;
    }
    
    /* Link with icon */
    a i {
        margin-right: 6px;
        font-size: 0.9em;
    }
    
    /* ====================================================================
       7. BLOCKQUOTES - Better visual
       ==================================================================== */
    
    blockquote {
        border-left: 4px solid #2563eb;
        padding: 16px 20px;
        margin: 24px 0;
        background: #f3f4f6;
        border-radius: 0 8px 8px 0;
        font-style: italic;
        color: #4b5563;
    }
    
    blockquote p {
        margin-bottom: 8px;
    }
    
    blockquote p:last-child {
        margin-bottom: 0;
    }
    
    blockquote cite {
        display: block;
        margin-top: 12px;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        color: #6b7280;
    }
    
    /* ====================================================================
       8. CODE BLOCKS - Readable
       ==================================================================== */
    
    code {
        font-family: 'Courier New', Courier, monospace;
        font-size: 14px;
        padding: 2px 6px;
        background: #f3f4f6;
        border-radius: 4px;
        color: #dc2626;
    }
    
    pre {
        padding: 16px;
        background: #1f2937;
        color: #f9fafb;
        border-radius: 8px;
        overflow-x: auto;
        margin: 20px 0;
        font-size: 14px;
        line-height: 1.6;
    }
    
    pre code {
        background: transparent;
        padding: 0;
        color: #f9fafb;
    }
    
    /* ====================================================================
       9. TABLES - Typography
       ==================================================================== */
    
    .table {
        font-size: 14px;
    }
    
    .table th {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
    }
    
    .table td {
        font-size: 14px;
        color: #374151;
        line-height: 1.5;
    }
    
    /* ====================================================================
       10. BADGES & LABELS
       ==================================================================== */
    
    .badge {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: 600;
        letter-spacing: 0.3px;
        line-height: 1.4;
    }
    
    .badge-lg {
        font-size: 14px;
        padding: 6px 14px;
    }
    
    /* Labels */
    label {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #374151;
        display: block;
    }
    
    /* ====================================================================
       11. ALERTS - Clear messaging
       ==================================================================== */
    
    .alert {
        padding: 16px 20px;
        margin-bottom: 20px;
        border-radius: 10px;
        font-size: 15px;
        line-height: 1.6;
    }
    
    .alert-heading {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 8px;
    }
    
    /* ====================================================================
       12. BREADCRUMBS - Compact on mobile
       ==================================================================== */
    
    .breadcrumb {
        font-size: 13px;
        padding: 10px 0;
        margin-bottom: 16px;
    }
    
    .breadcrumb-item {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 6px;
    }
    
    /* ====================================================================
       13. TABS - Larger text
       ==================================================================== */
    
    .nav-tabs .nav-link {
        font-size: 15px;
        font-weight: 600;
        padding: 14px 20px;
    }
    
    .nav-pills .nav-link {
        font-size: 15px;
        font-weight: 500;
        padding: 12px 18px;
    }
    
    /* ====================================================================
       14. TOOLTIPS & POPOVERS - Readable
       ==================================================================== */
    
    .tooltip-inner {
        font-size: 14px;
        padding: 8px 12px;
        max-width: 280px;
        text-align: left;
        line-height: 1.5;
    }
    
    .popover-header {
        font-size: 16px;
        font-weight: 700;
        padding: 12px 16px;
    }
    
    .popover-body {
        font-size: 14px;
        padding: 12px 16px;
        line-height: 1.6;
    }
    
    /* ====================================================================
       15. HORIZON CRM SPECIFIC
       ==================================================================== */
    
    /* Dashboard headings */
    .dashboard-title {
        font-size: 26px;
        font-weight: 800;
        color: #111827;
        margin-bottom: 8px;
    }
    
    .dashboard-subtitle {
        font-size: 15px;
        color: #6b7280;
        margin-bottom: 24px;
    }
    
    /* Page headers */
    .page-header {
        margin-bottom: 28px;
        padding-bottom: 20px;
        border-bottom: 2px solid #e5e7eb;
    }
    
    .page-header h1 {
        margin-bottom: 6px;
    }
    
    .page-header p {
        font-size: 15px;
        color: #6b7280;
        margin-bottom: 0;
    }
    
    /* Section dividers */
    .section-divider {
        height: 1px;
        background: #e5e7eb;
        margin: 32px 0;
    }
    
    /* Stat cards */
    .stat-card .stat-value {
        font-size: 32px;
        font-weight: 800;
        line-height: 1.2;
        color: #111827;
    }
    
    .stat-card .stat-label {
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
        margin-top: 6px;
    }
    
    .stat-card .stat-change {
        font-size: 14px;
        font-weight: 600;
        margin-top: 8px;
    }
    
    /* Info cards */
    .info-card-label {
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }
    
    .info-card-value {
        font-size: 17px;
        font-weight: 700;
        color: #1f2937;
    }
    
    /* Timeline items */
    .timeline-item .timeline-time {
        font-size: 13px;
        color: #6b7280;
        font-weight: 500;
    }
    
    .timeline-item .timeline-title {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin: 4px 0;
    }
    
    .timeline-item .timeline-description {
        font-size: 14px;
        color: #4b5563;
        line-height: 1.5;
    }
    
    /* ====================================================================
       16. WORD BREAKING - Prevent overflow
       ==================================================================== */
    
    /* Break long words */
    .break-words,
    .email-address,
    .url {
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* No wrap */
    .nowrap,
    .whitespace-nowrap {
        white-space: nowrap;
    }
    
    /* ====================================================================
       17. TEXT ALIGNMENT - Mobile overrides
       ==================================================================== */
    
    /* Center-align on mobile */
    .text-mobile-center {
        text-align: center !important;
    }
    
    /* Left-align on mobile */
    .text-mobile-left {
        text-align: left !important;
    }
    
    /* ====================================================================
       18. ACCESSIBILITY - High contrast
       ==================================================================== */
    
    /* Focus visible */
    a:focus-visible,
    button:focus-visible {
        outline: 3px solid #2563eb;
        outline-offset: 2px;
    }
    
    /* Selection color */
    ::selection {
        background-color: #bfdbfe;
        color: #1e40af;
    }
    
    ::-moz-selection {
        background-color: #bfdbfe;
        color: #1e40af;
    }
}

/* ========================================================================
   TABLET TYPOGRAPHY (768px - 991px)
   ======================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    
    body {
        font-size: 15px;
    }
    
    h1, .h1 { font-size: 26px !important; }
    h2, .h2 { font-size: 22px !important; }
    h3, .h3 { font-size: 19px !important; }
    h4, .h4 { font-size: 17px !important; }
    h5, .h5 { font-size: 15px !important; }
    
    .container,
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ========================================================================
   PRINT STYLES
   ======================================================================== */

@media print {
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    
    h1 { font-size: 20pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 16pt; }
    h4 { font-size: 14pt; }
    h5 { font-size: 12pt; }
    h6 { font-size: 11pt; }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    /* Show URLs after links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }
}