/* DNS Tools CSS - DNS Checker & DNS Lookup */
/* Shared styles for DNS-related tools */

/* DNS Results - CONSISTENT Text Size, Font, and Style */
.dns-results {
    margin-top: 2rem;
    width: 100%;
    max-width: 100%;
}

/* Desktop Results - Table Layout with CONSISTENT Typography */
.desktop-results {
    display: block;
    width: 100%;
    max-width: 100%;
}

.results-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
    /* Remove any horizontal scrolling */
    overflow-x: visible;
}

.results-table table {
    width: 100%;
    border-collapse: collapse;
    /* Use fixed table layout for consistent column widths */
    table-layout: fixed;
    max-width: 100%;
    /* CONSISTENT font family for entire table */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* CONSISTENT Desktop Column Headers - Same Text Size and Style */
.results-table th {
    background-color: #2563eb;
    color: white;
    font-weight: 600;
    padding: 1rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #1d4ed8;
    /* CONSISTENT font size for all headers */
    font-size: 0.9rem;
    line-height: 1.2;
    vertical-align: middle;
    /* CONSISTENT font family */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Ensure text wraps in headers if needed */
    word-wrap: break-word;
    white-space: normal;
}

/* IMPROVED Column Widths - INCREASED IP Address Column */
.col-server {
    width: 18%; /* Reduced from 20% */
}

.col-ip {
    width: 22%; /* INCREASED from 18% - More space for IP addresses */
}

.col-time {
    width: 13%; /* Reduced from 15% */
}

.col-records {
    width: 30%; /* Reduced from 32% */
}

.col-status {
    width: 17%; /* Increased from 15% */
}

/* CONSISTENT Desktop Table Data Cells - Same Text Size and Style */
.results-table td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
    /* CONSISTENT font size for all data cells */
    font-size: 0.9rem;
    line-height: 1.4;
    /* CONSISTENT font family for all data cells */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* CONSISTENT text color */
    color: #374151;
    /* Critical: Enable text wrapping */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    /* Enable hyphenation for better text breaking */
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

.results-table tr:hover {
    background-color: #f8fafc;
}

.results-table tr:last-child td {
    border-bottom: none;
}

/* Desktop Column-Specific Styling - CONSISTENT with overall table style */
.col-server {
    font-weight: 600;
    color: #1f2937;
    background-color: #f9fafb;
    /* SAME font family as other cells */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* SAME font size as other cells */
    font-size: 0.9rem;
}

.col-ip {
    /* Use monospace for IP addresses but SAME size and CLEAN styling */
    font-family: 'Courier New', monospace;
    color: #374151;
    text-align: center;
    font-size: 0.9rem;
    /* CLEAN styling - just better spacing */
    letter-spacing: 0.3px;
    font-weight: 500;
}

.col-time {
    /* Use monospace for time but SAME size */
    font-family: 'Courier New', monospace;
    color: #374151;
    text-align: center;
    font-size: 0.9rem;
}

.col-records {
    /* Use monospace for records but SAME size */
    font-family: 'Courier New', monospace;
    color: #374151;
    line-height: 1.5;
    font-size: 0.9rem;
    /* Ensure long records wrap properly */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    /* Allow breaking at any character for very long strings */
    word-break: break-all;
}

.col-status {
    text-align: center;
    /* SAME font family and size as other cells */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
}

/* Mobile Results - Card Layout with CONSISTENT styling */
.mobile-results {
    display: none;
    gap: 1rem;
    width: 100%;
}

.result-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 1rem;
    width: 100%;
    /* CONSISTENT font family for mobile cards */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.card-header {
    background: #2563eb;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.server-name {
    font-weight: 600;
    /* CONSISTENT font size */
    font-size: 0.9rem;
    /* CONSISTENT font family */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.card-body {
    padding: 1rem;
}

.result-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.result-row:last-child {
    margin-bottom: 0;
}

.result-row .label {
    font-weight: 600;
    color: #374151;
    /* CONSISTENT font size */
    font-size: 0.9rem;
    /* CONSISTENT font family */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.result-row .value {
    /* Use monospace for technical data but CONSISTENT size */
    font-family: 'Courier New', monospace;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    /* Allow breaking at any character for very long strings */
    word-break: break-all;
    overflow-wrap: break-word;
}

/* Status Icons - CONSISTENT Design */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* CONSISTENT font family for icons */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-icon.success {
    background-color: #10b981;
    border: 2px solid #059669;
}

.status-icon.error {
    background-color: #ef4444;
    border: 2px solid #dc2626;
}

.status-icon.warning {
    background-color: #f59e0b;
    border: 2px solid #d97706;
}

/* Record Types Grid - Consistent with DNS Lookup */
.record-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.record-type {
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #2563eb;
}

/* DNS Lookup Specific Styles */
.record-section {
    margin-bottom: 2rem;
}

.record-section h4 {
    color: #2563eb;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .desktop-results {
        display: none;
    }
    
    .mobile-results {
        display: block;
    }
    
    .status-icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    /* CONSISTENT mobile font sizes */
    .server-name {
        font-size: 0.85rem;
    }
    
    .result-row .label {
        font-size: 0.85rem;
    }
    
    .result-row .value {
        font-size: 0.85rem;
    }
    
    .record-types {
        grid-template-columns: 1fr;
    }
}

/* Tablet adjustments for better column spacing */
@media (max-width: 1024px) and (min-width: 769px) {
    .results-table th,
    .results-table td {
        padding: 0.875rem 0.5rem;
        /* CONSISTENT font size on tablet */
        font-size: 0.85rem;
    }
    
    /* Tablet column widths - adjusted for better IP address space */
    .col-server {
        width: 16%;
    }
    
    .col-ip {
        width: 24%; /* Even more space on tablet */
    }
    
    .col-time {
        width: 12%;
    }
    
    .col-records {
        width: 32%;
    }
    
    .col-status {
        width: 16%;
    }
}

@media (max-width: 480px) {
    .result-card {
        margin-bottom: 0.75rem;
    }
    
    .card-header {
        padding: 0.75rem;
    }
    
    .server-name {
        font-size: 0.8rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .result-row .label {
        font-size: 0.8rem;
    }
    
    .result-row .value {
        font-size: 0.8rem;
        padding: 0.4rem;
    }
    
    .status-icon {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
}

/* Large screens - optimize for readability with INCREASED IP space */
@media (min-width: 1200px) {
    .col-server {
        width: 16%;
    }
    
    .col-ip {
        width: 24%; /* MAXIMUM space for IP addresses on large screens */
    }
    
    .col-time {
        width: 12%;
    }
    
    .col-records {
        width: 32%;
    }
    
    .col-status {
        width: 16%;
    }
}

/* Medium screens - balanced distribution with INCREASED IP space */
@media (max-width: 1199px) and (min-width: 769px) {
    .col-server {
        width: 18%;
    }
    
    .col-ip {
        width: 22%; /* INCREASED IP address column */
    }
    
    .col-time {
        width: 13%;
    }
    
    .col-records {
        width: 30%;
    }
    
    .col-status {
        width: 17%;
    }
}

/* Hover Effects */
.result-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.results-table tr:hover .status-icon {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Better hover effects for desktop table */
.results-table tbody tr:hover {
    background-color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.results-table tbody tr:hover .status-icon {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* Ensure table headers are sticky on scroll for better UX */
.results-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #2563eb;
}

/* Ensure no horizontal overflow */
.dns-results,
.desktop-results,
.mobile-results,
.results-table,
.result-card {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Critical: Prevent any horizontal overflow */
.results-table,
.results-table table,
.results-table th,
.results-table td {
    max-width: 100%;
    box-sizing: border-box;
    /* Ensure no content can exceed container width */
    overflow: hidden;
}

/* Additional mobile-specific text wrapping improvements */
@media (max-width: 600px) {
    .results-table table {
        /* Force table to respect container width */
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    
    .results-table td {
        /* Maximum text wrapping for very long strings */
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        /* Reduce line height for better space utilization */
        line-height: 1.3 !important;
        /* Enable all hyphenation methods */
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -moz-hyphens: auto !important;
        -ms-hyphens: auto !important;
    }
}

/* Ensure no element can cause horizontal scrolling */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Additional safety measures for text overflow */
.results-table td {
    /* Ensure text never overflows */
    text-overflow: ellipsis;
    /* But still allow wrapping */
    white-space: normal;
    overflow: hidden;
    /* Re-enable wrapping */
    white-space: normal;
    overflow: visible;
}

/* FINAL CONSISTENCY CHECK - Ensure ALL text uses same base styling */
.results-table,
.results-table * {
    /* Base font family for consistency */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Override only for technical data that needs monospace */
.col-ip,
.col-time,
.col-records,
.result-row .value {
    font-family: 'Courier New', monospace !important;
}

/* Ensure ALL text sizes are consistent */
.results-table th,
.results-table td,
.server-name,
.result-row .label,
.result-row .value {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Mobile adjustments maintain consistency */
@media (max-width: 768px) {
    .results-table th,
    .results-table td,
    .server-name,
    .result-row .label,
    .result-row .value {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .results-table th,
    .results-table td,
    .server-name,
    .result-row .label,
    .result-row .value {
        font-size: 0.8rem;
    }
}