/**
 * BreachFeed Mobile Fix - Comprehensive mobile styling for all plugin pages
 * Version 2.15.4
 */

/* Force viewport meta tag behavior */
@viewport {
    width: device-width;
    initial-scale: 1;
}

/* AGGRESSIVE MOBILE RESET - Fix width issues */
@media screen and (max-width: 768px) {
    /* Reset ALL BreachFeed elements to prevent overflow */
    [class*="breachfeed-"],
    [class*="breachfeed-"] * {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }
    
    /* Prevent any element from being wider than viewport */
    .breachfeed-recent-articles,
    .breachfeed-articles-container,
    .breachfeed-article,
    .breachfeed-article-image,
    .breachfeed-article-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Override ALL grid definitions for articles */
    .breachfeed-articles-container,
    .breachfeed-recent-articles .breachfeed-articles-container {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-columns: unset !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure images don't overflow */
    .breachfeed-article img,
    .breachfeed-article-image img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Subscription Manager */
    .breachfeed-subscription-manager {
        width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    
    .breachfeed-subscription-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 5px !important;
    }
    
    .subscription-info {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .subscription-actions {
        width: 100% !important;
        display: flex !important;
        gap: 10px !important;
    }
    
    .subscription-actions button {
        flex: 1 !important;
        padding: 4px 6px !important;
        font-size: 14px !important;
    }
    
    /* User Dashboard */
    .breachfeed-user-dashboard {
        width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    
    .dashboard-section {
        padding: 5px !important;
        margin-bottom: 15px !important;
    }
    
    .subscription-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* Search Form */
    .breachfeed-search {
        width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    
    .search-form {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .search-form input[type="text"] {
        width: 100% !important;
        padding: 5px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .search-form button {
        width: 100% !important;
        padding: 5px !important;
    }
    
    /* Company Profile */
    .breachfeed-company-profile {
        width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    
    .company-header {
        flex-direction: column !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .company-details {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .incident-timeline {
        padding: 5px !important;
    }
    
    .timeline-item {
        padding-left: 20px !important;
    }
    
    /* Article Detail Page */
    .breachfeed-article-detail {
        width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    
    .article-header,
    .article-main-content,
    .article-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
        margin: 0 0 20px 0 !important;
    }
    
    .article-metadata {
        flex-wrap: wrap !important;
        gap: 10px !important;
        font-size: 14px !important;
    }
    
    .severity-badge {
        position: static !important;
        display: inline-block !important;
        margin-bottom: 10px !important;
    }
    
    /* Forms */
    .breachfeed-form,
    .add-subscription-form {
        width: 100% !important;
        padding: 5px !important;
    }
    
    .form-group {
        margin-bottom: 15px !important;
    }
    
    .form-group label {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 14px !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        padding: 5px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        box-sizing: border-box !important;
    }
    
    /* Buttons */
    .button,
    .button-primary,
    .button-secondary,
    [class*="breachfeed-"] button {
        min-height: 44px !important; /* Apple's touch target guidelines */
        padding: 6px 10px !important;
        font-size: 16px !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    /* Tables */
    .breachfeed-table,
    [class*="breachfeed-"] table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .breachfeed-table td,
    .breachfeed-table th {
        padding: 5px !important;
        font-size: 14px !important;
    }
    
    /* Modals/Popups */
    .breachfeed-modal,
    .breachfeed-popup {
        width: 90% !important;
        max-width: 100% !important;
        margin: 5% auto !important;
        padding: 5px !important;
    }
    
    /* Notifications */
    .breachfeed-notification,
    .breachfeed-alert {
        width: calc(100% - 20px) !important;
        margin: 10px !important;
        padding: 5px !important;
        font-size: 14px !important;
    }
    
    /* Tags and Badges */
    .breachfeed-tags,
    .article-tags {
        gap: 5px !important;
    }
    
    .breachfeed-tag,
    .article-tag {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
    
    /* Sidebar on mobile */
    .breachfeed-sidebar,
    .article-sidebar {
        width: 100% !important;
        margin-top: 20px !important;
        padding: 5px !important;
        border-top: 1px solid var(--bf-border) !important;
    }
    
    /* Typography fixes */
    [class*="breachfeed-"] h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    [class*="breachfeed-"] h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    [class*="breachfeed-"] h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    
    [class*="breachfeed-"] p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* Autocomplete dropdown */
    .autocomplete-dropdown {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
    }
}

/* Reset and base mobile styles */
@media screen and (max-width: 768px) {
    /* Force full width on mobile */
    .breachfeed-recent-articles {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Container must be full width with padding - OVERRIDE GRID COMPLETELY */
    .breachfeed-articles-container {
        display: block !important; /* Override grid on mobile */
        grid-template-columns: none !important; /* Remove grid columns */
        grid-template-columns: unset !important;
        grid-auto-flow: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }
    
    /* Override ALL minmax grid definitions */
    body .breachfeed-articles-container {
        grid-template-columns: 1fr !important;
    }
    
    /* Article cards as blocks */
    .breachfeed-article {
        display: block !important;
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin: 0 auto 20px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
    }
    
    /* Image container */
    .breachfeed-article-image {
        width: 100% !important;
        height: 180px !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .breachfeed-article-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    
    /* Content area */
    .breachfeed-article-content {
        padding: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure article cards maintain their styling */
    .breachfeed-article {
        background: var(--bf-background, #2a2a2a) !important;
        border: 1px solid var(--bf-border, #404040) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    /* Title */
    .breachfeed-article-content h4 {
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .breachfeed-article-content h4 a {
        color: #333 !important;
        text-decoration: none !important;
        display: block !important;
    }
    
    /* Meta information */
    .article-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin: 0 0 10px 0 !important;
        font-size: 12px !important;
        color: #666 !important;
    }
    
    .article-meta span {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
    
    .article-meta .dashicons {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important;
    }
    
    /* Description */
    .article-description {
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #555 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .article-description p {
        margin: 0 0 8px 0 !important;
        padding: 0 !important;
    }
    
    /* Tags */
    .article-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin: 0 0 10px 0 !important;
    }
    
    .article-tag {
        display: inline-block !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
        border-radius: 3px !important;
        white-space: nowrap !important;
    }
    
    /* Actions */
    .article-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin: 10px 0 0 0 !important;
        padding: 10px 0 0 0 !important;
        border-top: 1px solid #eee !important;
    }
    
    .article-read-more,
    .article-source-link {
        font-size: 13px !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
    }
    
    /* Severity badge */
    .article-severity-badge {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        padding: 3px 8px !important;
        font-size: 10px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 3px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        z-index: 1 !important;
    }
    
    /* Fix for themes that might interfere */
    .entry-content .breachfeed-recent-articles,
    .site-content .breachfeed-recent-articles,
    .content-area .breachfeed-recent-articles,
    main .breachfeed-recent-articles {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Even smaller screens */
@media screen and (max-width: 480px) {
    .breachfeed-articles-container {
        padding: 5px !important;
    }
    
    .breachfeed-article {
        width: calc(100% - 10px) !important;
        margin-bottom: 15px !important;
    }
    
    .breachfeed-article-image {
        height: 150px !important;
    }
    
    .breachfeed-article-content {
        padding: 5px !important;
    }
    
    .breachfeed-article-content h4 {
        font-size: 15px !important;
    }
    
    .article-description {
        font-size: 13px !important;
    }
}

/* Viewport fixes */
@media screen and (max-width: 768px) {
    /* Ensure no horizontal scroll */
    html, body {
        overflow-x: hidden !important;
    }
    
    /* Reset any theme-specific widths - MORE AGGRESSIVE */
    body .breachfeed-recent-articles,
    body .breachfeed-recent-articles *,
    body .breachfeed-articles-container,
    body .breachfeed-articles-container *,
    body .breachfeed-article,
    body .breachfeed-article *,
    #page .breachfeed-recent-articles,
    #content .breachfeed-recent-articles,
    .site-content .breachfeed-recent-articles,
    .entry-content .breachfeed-recent-articles,
    main .breachfeed-recent-articles {
        max-width: 100% !important;
        min-width: 0 !important;
        width: auto !important;
    }
    
    /* Target common WordPress theme containers */
    .site-main .breachfeed-articles-container,
    .content-area .breachfeed-articles-container,
    .entry-content .breachfeed-articles-container,
    #primary .breachfeed-articles-container,
    #main .breachfeed-articles-container,
    article .breachfeed-articles-container {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force text to wrap */
    .breachfeed-article h1,
    .breachfeed-article h2,
    .breachfeed-article h3,
    .breachfeed-article h4,
    .breachfeed-article h5,
    .breachfeed-article h6,
    .breachfeed-article p,
    .breachfeed-article a,
    .breachfeed-article span,
    .breachfeed-article div {
        word-break: break-word !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        hyphens: auto !important;
    }
}

/* Additional viewport meta tag reminder for WordPress themes */
/* Make sure your theme includes: <meta name="viewport" content="width=device-width, initial-scale=1"> */

/* FINAL NUCLEAR OPTION - Force all containers to viewport width */
@media screen and (max-width: 768px) {
    /* Force root containers to proper width without cutting content */
    #page,
    #content,
    .site,
    .site-content,
    .content-area,
    .site-main,
    main,
    article,
    .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Specific BreachFeed container reset */
    .breachfeed-recent-articles {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Articles container with proper mobile width */
    .breachfeed-articles-container {
        display: flex !important;
        flex-direction: column !important;
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        padding: 0 !important;
        margin: 0 5px !important;
        box-sizing: border-box !important;
    }
    
    /* Individual articles - full width of container */
    .breachfeed-article {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure page content isn't cut off */
    body > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Additional mobile fixes for specific components */
@media screen and (max-width: 768px) {
    /* Fix subscription form layout */
    .breachfeed-subscription-form {
        width: 100% !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .notification-methods,
    .notification-settings {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .notification-methods label,
    .notification-settings label {
        width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    
    /* Article detail page specific */
    .article-container {
        display: block !important;
        padding: 0 !important;
    }
    
    .article-main,
    .article-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
    
    /* Entity blocks */
    .entity-block {
        margin-bottom: 15px !important;
    }
    
    .entity-list {
        display: block !important;
    }
    
    .entity-item {
        display: block !important;
        margin-bottom: 8px !important;
        padding: 8px !important;
    }
    
    /* Loading states */
    .loading,
    .loading-spinner {
        padding: 30px !important;
        font-size: 14px !important;
    }
    
    /* Error messages */
    .error-message,
    .notice {
        margin: 10px !important;
        padding: 5px !important;
        font-size: 14px !important;
    }
    
    /* Popular articles widget */
    .popular-articles-widget {
        padding: 5px !important;
    }
    
    .popular-article-item {
        padding: 10px 0 !important;
        font-size: 14px !important;
    }
    
    /* Tags by category */
    .tags-by-category {
        padding: 5px !important;
    }
    
    .tag-category {
        margin-bottom: 15px !important;
    }
    
    /* Prevent any fixed positioning on mobile */
    [class*="breachfeed-"] {
        position: relative !important;
    }
    
    /* Fix z-index issues */
    .breachfeed-modal,
    .breachfeed-popup,
    .autocomplete-dropdown {
        z-index: 9999 !important;
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    /* Even smaller padding and fonts */
    [class*="breachfeed-"] {
        padding: 8px !important;
    }
    
    [class*="breachfeed-"] h1 {
        font-size: 20px !important;
    }
    
    [class*="breachfeed-"] h2 {
        font-size: 18px !important;
    }
    
    [class*="breachfeed-"] h3 {
        font-size: 16px !important;
    }
    
    [class*="breachfeed-"] p,
    [class*="breachfeed-"] div {
        font-size: 13px !important;
    }
    
    /* Smaller buttons */
    .button,
    button {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
}