/* Foy Detail Page - Mobile Specific Design */
/* This file contains aggressive mobile overrides for foy-detail.html */

@media (max-width: 768px) {
    
    /* ============================================
       PAGE HEADER - COMPLETELY VERTICAL
       ============================================ */
    
    .page-header {
        padding: 1rem 0.75rem !important;
    }
    
    .page-header .page-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .page-header > div {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .page-header .flex {
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
    }
    
    .page-header .flex > div:first-child {
        width: 100% !important;
    }
    
    .page-header .flex > div:last-child {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-top: 0 !important;
    }
    
    /* All header buttons - full width */
    .page-header button,
    .page-header a,
    .page-header .btn-outline,
    .page-header .btn-secondary,
    .page-header .btn-primary,
    .page-header .btn-success,
    .page-header .btn-warning {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-bottom: 0.5rem !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    .page-header h5 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .page-header p {
        font-size: 0.8125rem !important;
        word-wrap: break-word !important;
    }
    
    /* ============================================
       PAGE CONTENT CONTAINER
       ============================================ */
    
    .page-content {
        padding: 0.75rem !important;
    }
    
    .page-content .page-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* ============================================
       CARDS - FULL WIDTH
       ============================================ */
    
    .card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .card-header {
        padding: 1rem 0.75rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* ============================================
       ATTACHMENTS CARD - SPECIAL MOBILE DESIGN
       ============================================ */
    
    /* Card header - vertical layout */
    .card-header h2.card-title.flex.items-center.justify-between {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    .card-header h2.card-title.flex.items-center.justify-between > span {
        width: 100% !important;
        display: block !important;
    }
    
    .card-header h2.card-title.flex.items-center.justify-between button {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-top: 0.5rem !important;
        box-sizing: border-box !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* Attachment items container */
    .card-body .space-y-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    /* Each attachment item - COMPLETELY VERTICAL - AGGRESSIVE OVERRIDE */
    .card-body .space-y-3 > div[ng-repeat],
    .card-body div[ng-repeat="attachment in"],
    .card-body div[ng-repeat*="attachment"],
    .card-body > div > div[ng-repeat],
    div[ng-repeat="attachment in $ctrl.foy.attachments"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0 !important;
        margin-bottom: 1rem !important;
        box-sizing: border-box !important;
        background-color: #f9fafb !important;
        border-radius: 0.5rem !important;
        gap: 0.75rem !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Remove ALL horizontal flex layouts from attachment items */
    .card-body div[ng-repeat*="attachment"].flex.items-center.space-x-3,
    div[ng-repeat="attachment in"].flex.items-center.space-x-3,
    .flex.items-center.space-x-3[ng-repeat*="attachment"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force remove all space-x classes that create horizontal spacing */
    .card-body div[ng-repeat*="attachment"][class*="space-x"] {
        gap: 0.75rem !important;
    }
    
    /* File icon - centered on top */
    .card-body div[ng-repeat*="attachment"] > .flex-shrink-0,
    .card-body div[ng-repeat*="attachment"] > div:first-child,
    div[ng-repeat="attachment in"] > .flex-shrink-0,
    div[ng-repeat="attachment in"] > div:first-child {
        align-self: center !important;
        margin: 0 auto 0.75rem auto !important;
        width: auto !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* File info section - full width */
    .card-body div[ng-repeat*="attachment"] > .flex-1,
    .card-body div[ng-repeat*="attachment"] > div.flex-1,
    div[ng-repeat="attachment in"] > .flex-1,
    div[ng-repeat="attachment in"] > div.flex-1 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        margin-bottom: 0.75rem !important;
        order: 2 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
    
    /* File name - no truncation on mobile */
    .card-body div[ng-repeat*="attachment"] p.truncate,
    .card-body div[ng-repeat*="attachment"] .truncate {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word !important;
        width: 100% !important;
    }
    
    /* File metadata - wrap properly */
    .card-body div[ng-repeat*="attachment"] .flex.items-center.space-x-3 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    /* Action buttons container - compact, left aligned */
    .card-body div[ng-repeat*="attachment"] > .flex.items-center.space-x-2,
    .card-body div[ng-repeat*="attachment"] > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 0.375rem !important;
        margin: 0 !important;
        margin-top: 0.5rem !important;
        order: 3 !important;
    }
    
    /* Individual action buttons - smaller and compact, icon-only */
    .card-body div[ng-repeat*="attachment"] button,
    .card-body div[ng-repeat*="attachment"] .btn-outline,
    .card-body div[ng-repeat*="attachment"] .btn-danger,
    .card-body div[ng-repeat*="attachment"] a.btn {
        flex: 0 0 auto !important;
        min-width: 32px !important;
        max-width: 32px !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 0.375rem !important;
    }
    
    /* Download, Preview, Delete buttons - icon only, compact */
    .card-body div[ng-repeat*="attachment"] button.btn-outline.btn-sm,
    .card-body div[ng-repeat*="attachment"] button.btn-danger.btn-sm {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
    }
    
    /* Button icons - smaller */
    .card-body div[ng-repeat*="attachment"] button i,
    .card-body div[ng-repeat*="attachment"] button.btn-sm i {
        font-size: 0.875rem !important;
        margin: 0 !important;
    }
    
    /* Badge styling - make them wrap */
    .card-body .badge,
    .card-body .badge-sm {
        display: inline-block !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        margin: 0.25rem 0 !important;
    }
    
    /* Description text - full width */
    .card-body div[ng-repeat*="attachment"] p.text-xs {
        width: 100% !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    /* ============================================
       GRIDS - SINGLE COLUMN
       ============================================ */
    
    .grid,
    [class*="grid-cols"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* ============================================
       INFO CARDS - VERTICAL
       ============================================ */
    
    .grid[class*="md:grid-cols-2"],
    .grid[class*="lg:grid-cols-2"],
    .grid[class*="lg:grid-cols-3"],
    .grid[class*="xl:grid-cols-3"] {
        grid-template-columns: 1fr !important;
    }
    
    /* ============================================
       DEBUG TEXT - HIDE ON MOBILE
       ============================================ */
    
    .text-xs.text-gray-500:contains("Debug:") {
        display: none !important;
    }
    
    /* ============================================
       GENERAL OVERFLOW FIXES
       ============================================ */
    
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .page-layout {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    body {
        overflow-x: hidden !important;
    }
    
    /* ============================================
       TEXT OVERFLOW FIXES
       ============================================ */
    
    .truncate {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word !important;
    }
    
    /* ============================================
       SPACING FIXES
       ============================================ */
    
    .space-y-3 > * + *,
    .space-y-4 > * + *,
    .space-y-6 > * + * {
        margin-top: 0.75rem !important;
    }
}

/* Very small screens - Additional adjustments */
@media (max-width: 480px) {
    
    .page-header {
        padding: 0.75rem 0.5rem !important;
    }
    
    .card-header {
        padding: 0.75rem 0.5rem !important;
    }
    
    .card-body {
        padding: 0.5rem !important;
    }
    
    .card-body div[ng-repeat*="attachment"] {
        padding: 0.75rem !important;
    }
    
    .card-body div[ng-repeat*="attachment"] button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        font-size: 0.75rem !important;
        padding: 0 !important;
    }
}