/* Custom Styles for S/MIME Analysis Tools */

:root {
    --primary-color: #0d6efd;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Sticky Footer */
.footer {
    flex-shrink: 0;
}

/* Footer responsive layout */
@media (max-width: 768px) {
    .footer .col-md-4 {
        text-align: center !important;
        margin-bottom: 0.5rem;
    }
    
    .footer .col-md-4:last-child {
        margin-bottom: 0;
    }
}

/* Main content area should expand */
.container.my-5 {
    flex: 1 0 auto;
}

/* Tool Cards */
.tool-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
    cursor: pointer;
    border: 1px solid #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.tool-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

/* Placeholder Tool Card - Dashed Border with subtle highlight */
.tool-card-placeholder {
    border: 2px dashed #6c757d;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    position: relative;
}

.tool-card-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.03) 0%, rgba(13, 110, 253, 0.08) 100%);
    border-radius: inherit;
    pointer-events: none;
}

.tool-card-placeholder:hover {
    border-color: var(--primary-color);
    border-style: dashed;
    background: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%);
    box-shadow: 0 0.25rem 0.5rem rgba(13, 110, 253, 0.15);
}

.tool-card-placeholder .tool-icon {
    color: #6c757d;
}

.tool-card-placeholder:hover .tool-icon {
    color: var(--primary-color);
}

/* Coming Soon Tool Card - Grayed out and disabled */
.tool-card-coming-soon {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f8f9fa;
    filter: grayscale(0.3);
}

.tool-card-coming-soon:hover {
    transform: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-color: #dee2e6;
}

.tool-card-coming-soon .tool-icon {
    color: #6c757d;
}

.tool-card-coming-soon .card-title {
    color: #6c757d;
}

.tool-card-coming-soon .card-text {
    color: #adb5bd;
}

.tool-card-coming-soon .tag {
    background-color: #e9ecef;
    color: #6c757d;
}

.tool-card-placeholder .card-title {
    color: #495057;
    font-weight: 500;
}

.tool-card-placeholder:hover .card-title {
    color: var(--primary-color);
}

/* Modal Disclaimer Styles */
#disclaimerModal .modal-header {
    border-bottom: 3px solid #664d03;
}

#disclaimerModal .modal-content {
    border: 2px solid #ffc107;
}

#disclaimerModal .alert {
    border-left: 4px solid;
}

#disclaimerModal .alert-info {
    border-left-color: #0dcaf0;
}

#disclaimerModal .alert-warning {
    border-left-color: #ffc107;
}

.tool-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.tool-card.coming-soon .tool-icon {
    color: #6c757d;
}

/* Status Badges */
.status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Tags */
.tag {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Drop Zone - Subtle */
.drop-zone {
    border: 2px dashed #ced4da;
    border-radius: 0.5rem;
    padding: 3rem 2rem;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.2s ease;
    cursor: pointer;
}

.drop-zone:hover {
    border-color: #6c757d;
    background: #e9ecef;
}

.drop-zone.drag-over {
    border-color: var(--primary-color);
    background: #e7f3ff;
    border-style: solid;
}

.drop-zone-content {
    position: relative;
}

.drop-zone-icon {
    font-size: 3rem;
    color: #6c757d;
    display: block;
    transition: color 0.2s ease;
}

.drop-zone:hover .drop-zone-icon {
    color: var(--primary-color);
}

.drop-zone.drag-over .drop-zone-icon {
    color: var(--primary-color);
}

/* Header Analyzer */
.header-textarea {
    font-family: "Courier New", monospace;
    font-size: 0.85rem;
    background-color: #f8f9fa;
}

.header-table td {
    vertical-align: top;
    word-break: break-word;
}

.path-table td {
    white-space: normal;
}

.tls-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px solid transparent;
}

.tls-on {
    color: #0f5132;
    background: #d1e7dd;
    border-color: #badbcc;
}

.tls-off {
    color: #6c757d;
    background: #f8f9fa;
    border-color: #dee2e6;
}

.delay-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px solid transparent;
}

.delay-ok {
    color: #0f5132;
    background: #d1e7dd;
    border-color: #badbcc;
}

.delay-warn {
    color: #664d03;
    background: #fff3cd;
    border-color: #ffecb5;
}

.delay-bad {
    color: #842029;
    background: #f8d7da;
    border-color: #f5c2c7;
}

.summary-table th.summary-key {
    width: 18%;
    white-space: nowrap;
}

.summary-table td.summary-value {
    font-weight: 500;
}

.summary-table td.summary-value-subject {
    color: #0b2239;
    font-weight: 700;
}

.header-table .col-num {
    width: 5%;
    white-space: nowrap;
}

.header-table .col-name {
    width: 18%;
    white-space: nowrap;
}

.header-table .col-value {
    width: 77%;
}

.header-name {
    white-space: nowrap;
}

.header-value {
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.35;
}

.path-from,
.path-by {
    font-weight: 500;
}

.path-proto {
    color: #6c757d;
    font-size: 0.85rem;
}

.path-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 12px;
    border-left: 2px solid #e9ecef;
}

.path-hop {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
    position: relative;
}

.path-hop::before {
    display: none;
}

.path-index {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: right;
    padding-top: 6px;
}

.path-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow-wrap: anywhere;
}

.path-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.path-title {
    font-weight: 600;
    font-size: 0.95rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.path-arrow {
    color: #adb5bd;
    font-weight: 400;
    margin: 0 4px;
}

.path-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.path-sub {
    margin-top: 4px;
    font-size: 0.85rem;
    color: #6c757d;
}

.path-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    margin-right: 6px;
    color: #adb5bd;
}

.path-value {
    color: #495057;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.path-ip {
    color: #6c757d;
    font-weight: 400;
    font-size: 0.85rem;
}

.path-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.path-label-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    font-size: 0.75rem;
    color: #495057;
}

.path-chip-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    font-weight: 600;
    color: #495057;
}

.path-chip-value {
    font-weight: 500;
    color: #212529;
}

@media (max-width: 768px) {
    .path-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Results Display */
.result-section {
    margin-bottom: 2rem;
}

.result-header {
    background-color: #f8f9fa;
    padding: 1rem;
    border-left: 4px solid var(--primary-color);
    margin-bottom: 1rem;
}

.check-item {
    padding: 0.75rem;
    border-left: 3px solid transparent;
    margin-bottom: 0.5rem;
    background-color: #f8f9fa;
}

.check-item.pass {
    border-left-color: var(--success-color);
    background-color: #d1e7dd;
}

.check-item.fail {
    border-left-color: var(--danger-color);
    background-color: #f8d7da;
}

.check-icon {
    font-size: 1.25rem;
    margin-right: 0.5rem;
}

.check-icon.pass {
    color: var(--success-color);
}

.check-icon.fail {
    color: var(--danger-color);
}

/* Code Display */
.code-block {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    overflow-x: auto;
}

/* Summary Badge */
.summary-badge {
    font-size: 1.5rem;
    padding: 1rem 1.5rem;
}

/* Subtle animation for loading */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* More spacing for tool grid */
#toolsContainer .col-12 {
    margin-bottom: 1.5rem;
}

/* ============================================
   RESPONSIVE DESIGN OPTIMIZATIONS
   ============================================ */

/* Mobile: 320px - 575px (xs) */
@media (max-width: 575.98px) {
    /* Navbar & Header */
    .navbar-brand {
        font-size: 1rem !important;
    }
    
    .navbar-brand .bi {
        font-size: 1rem;
    }
    
    /* Container Padding */
    .container.my-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Tool Cards */
    .tool-icon {
        font-size: 2rem;
    }
    
    .tool-card h5 {
        font-size: 0.95rem;
    }
    
    .tool-card .card-body {
        padding: 1rem 0.75rem;
    }
    
    /* Drop Zones */
    .drop-zone {
        padding: 1.5rem 1rem;
    }
    
    .drop-zone-icon {
        font-size: 2rem;
    }
    
    .drop-zone h4 {
        font-size: 1rem;
    }
    
    .drop-zone .btn-lg {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    /* Search Bar & Dropdown */
    .input-group-lg {
        flex-direction: column;
    }
    
    .input-group-lg #dnsTypeDropdown {
        width: 100%;
        border-right: 1px solid #ced4da;
        border-bottom: none;
        border-radius: 0.375rem 0.375rem 0 0;
        margin-bottom: -1px;
    }
    
    .input-group-lg #toolSearch {
        border-radius: 0 0 0.375rem 0.375rem;
    }
    
    #toolSearch::placeholder {
        font-size: 0.875rem;
    }
    
    /* Forms & Inputs */
    .form-label {
        font-size: 0.875rem;
    }
    
    .input-group .btn {
        width: 100%;
        margin-top: 0.5rem;
        border-radius: 0.375rem;
    }
    
    .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
        margin-left: 0;
    }
    
    /* Query Results */
    .query-result-card {
        padding: 1rem;
    }
    
    .query-type-badge {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
    
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    .d-flex.justify-content-between.align-items-center .btn {
        width: 100%;
    }
    
    /* Tables */
    .dns-record-table {
        font-size: 0.75rem;
    }
    
    .dns-record-table th,
    .dns-record-table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }
    
    .header-table th,
    .header-table td {
        font-size: 0.75rem;
        padding: 0.5rem 0.375rem;
    }
    
    .summary-table th,
    .summary-table td {
        font-size: 0.75rem;
        padding: 0.5rem 0.375rem;
    }
    
    /* Path Timeline */
    .path-timeline {
        padding-left: 8px;
        border-left-width: 1px;
    }
    
    .path-hop {
        grid-template-columns: 20px 1fr;
        gap: 8px;
    }
    
    .path-card {
        padding: 8px 10px;
    }
    
    .path-title {
        font-size: 0.85rem;
    }
    
    /* Validation Warnings */
    .validation-warnings .alert {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    .policy-explanation {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* Code Blocks */
    .code-block {
        font-size: 0.75rem;
        padding: 0.75rem;
    }
    
    /* Badges & Tags */
    .tag {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
    
    .badge {
        font-size: 0.7rem;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 0.375rem;
    }
    
    .modal-body {
        padding: 1rem;
        font-size: 0.875rem;
    }
    
    .modal-header {
        padding: 0.75rem 1rem;
    }
    
    .modal-title {
        font-size: 1rem;
    }
    
    /* Footer */
    .footer {
        padding: 1rem 0;
    }
    
    .footer .col-md-4 {
        text-align: center !important;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0;
    }
    
    .footer .col-md-4:last-child {
        margin-bottom: 0;
    }
    
    /* Card Body Padding */
    .card-body {
        padding: 1rem !important;
    }
    
    /* Header Textarea */
    .header-textarea {
        font-size: 0.75rem;
    }
    
    /* Query Result Card Font Sizes */
    .query-result-card h6 {
        font-size: 0.95rem;
    }
    
    .query-result-card p {
        font-size: 0.875rem;
    }
    
    .query-result-card .font-monospace {
        font-size: 1rem;
    }
    
    /* Check Items */
    .check-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .check-icon {
        font-size: 1rem;
    }
    
    /* Summary Badge */
    .summary-badge {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

/* Tablet: 576px - 991px (sm/md) */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* Navbar & Header */
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    /* Container Padding */
    .container.my-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Tool Cards */
    .tool-icon {
        font-size: 2.5rem;
    }
    
    /* Drop Zones */
    .drop-zone {
        padding: 2rem 1.5rem;
    }
    
    .drop-zone-icon {
        font-size: 2.5rem;
    }
    
    /* Search Bar */
    #dnsTypeDropdown {
        min-width: 120px;
    }
    
    /* Query Results */
    .query-result-card {
        padding: 1.5rem;
    }
    
    /* Tables */
    .dns-record-table {
        font-size: 0.9rem;
    }
    
    .dns-record-table th,
    .dns-record-table td {
        padding: 0.625rem 0.5rem;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 1rem;
    }
    
    /* Card Body Padding */
    .card-body {
        padding: 1.5rem !important;
    }
}

/* Desktop: 992px - 1199px (lg) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Container can use default padding */
    /* Most components work well at this size */
}

/* Large Desktop: 1200px+ (xl) */
@media (min-width: 1200px) {
    /* Optimizations for very large screens if needed */
}

/* Common Mobile/Tablet Optimizations (max-width: 991.98px) */
@media (max-width: 991.98px) {
    /* Input Groups - Stack vertically on smaller screens */
    .input-group:not(.input-group-lg) {
        flex-wrap: wrap;
    }
    
    .input-group:not(.input-group-lg) .btn {
        width: 100%;
        margin-top: 0.5rem;
        border-radius: 0.375rem;
    }
    
    /* Two-column layouts become single column */
    .row .col-md-6 {
        margin-bottom: 1rem;
    }
    
    /* Query Results - Stack columns */
    .query-result-card .row .col-md-6 {
        margin-bottom: 1.5rem;
    }
    
    /* IP Lookup Results */
    .ip-lookup-results .row .col-md-6 {
        margin-bottom: 1.5rem;
    }
}

/* Tablet and below: 768px and below */
@media (max-width: 768px) {
    .tool-icon {
        font-size: 2rem;
    }
    
    .tool-card h5 {
        font-size: 1rem;
    }
    
    .query-result-card {
        padding: 1rem;
    }
    
    .dns-record-table {
        font-size: 0.875rem;
    }
    
    .path-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* IP Lookup Results - Compact Design */
.ip-lookup-results .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ip-lookup-results .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1) !important;
}

.ip-lookup-results .card-header {
    font-weight: 600;
    padding: 0.75rem 1rem;
}

.ip-lookup-results .card-body {
    padding: 1rem;
}

.ip-lookup-results dl {
    margin-bottom: 0;
}

.ip-lookup-results dt {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.ip-lookup-results dt:first-child {
    margin-top: 0;
}

.ip-lookup-results dd {
    margin-left: 0;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.ip-lookup-results .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

.ip-lookup-results code {
    font-size: 0.875rem;
    padding: 0.2em 0.4em;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

/* IP Lookup specific styles */
.summary-badge {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
}

/* Ensure check-items match other tools */
.check-item {
    border-left: 4px solid #dee2e6;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0 4px 4px 0;
}

.check-item.pass {
    border-left-color: #28a745;
}

.check-item.fail {
    border-left-color: #dc3545;
}

.check-icon {
    margin-right: 0.5rem;
}

.check-icon.pass {
    color: #28a745;
}

.check-icon.fail {
    color: #dc3545;
}

/* ASN and Abuse Details - Interactive Elements */
.asn-link {
    color: var(--primary-color);
    border-bottom: 1px dashed var(--primary-color);
    padding-bottom: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asn-link:hover {
    color: #0a58ca;
    border-bottom-style: solid;
}

#asnDetails .card, #abuseDetails .card {
    border: 1px solid #dee2e6;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

#asnDetails h6 {
    color: #495057;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.table-borderless th {
    font-weight: 500;
    color: #6c757d;
}

/* Utility Classes for CSP Compliance (replacing inline styles) */
.d-none-init {
    display: none;
}

/* Clickable elements for DNS results (CSP compliant - no inline styles) */
.clickable-ip {
    cursor: pointer;
    color: #0d6efd;
    text-decoration: none;
}

.clickable-ip:hover {
    color: #0a58ca;
    text-decoration: none;
}

.clickable-mx {
    cursor: pointer;
    color: #0d6efd;
    text-decoration: none;
}

.clickable-mx:hover {
    color: #0a58ca;
    text-decoration: none;
}

/* Font size utility class (replacing inline style) */
.fs-125rem {
    font-size: 1.25rem;
}

/* Clickable header (replacing inline style) */
.clickable-header {
    cursor: pointer;
}

/* Validation badge (replacing inline style) */
.validation-badge {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

.h-25px {
    height: 25px;
}

.fs-14px {
    font-size: 14px;
}

.fs-tiny {
    font-size: 0.65rem;
}

.w-100 {
    width: 100%;
}

.border-left-3 {
    border-left: 3px solid transparent;
}

.opacity-0 {
    opacity: 0;
}

.transition-opacity {
    transition: opacity 0.3s ease-out;
}

/* Specific component overrides */
.progress-bar-custom {
    height: 25px;
    font-size: 14px;
    width: 100%;
}

/* Smooth collapse for details */
.collapse {
    transition: height 0.35s ease;
}

/* DNS Type Dropdown */
#dnsTypeDropdown {
    min-width: 140px;
    border-right: none;
}

#dnsTypeDropdown.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

#dnsTypeDropdown.active:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

#dnsTypeMenu {
    max-height: 400px;
    overflow-y: auto;
}

#dnsTypeMenu .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

#dnsTypeMenu .dropdown-item:hover {
    background-color: #f8f9fa;
}

#dnsTypeMenu .dropdown-divider {
    margin: 0.25rem 0;
}

/* Query Results Section */
.query-results-section {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.query-type-badge {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

.dns-record-table {
    margin-top: 1.5rem;
    font-size: 1rem;
}

.dns-record-table th {
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
    font-size: 1rem;
    padding: 0.75rem;
}

.dns-record-table td {
    font-size: 1rem;
    padding: 0.75rem;
    vertical-align: middle;
}

.dns-record-table code {
    background-color: #f8f9fa;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    word-break: break-all;
    font-weight: 500;
}

.query-result-card {
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 2rem;
    margin-top: 1.5rem;
}

.query-result-card h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.query-result-card p {
    margin-bottom: 0.75rem;
    color: #6c757d;
    font-size: 1rem;
}

.query-result-card .font-monospace {
    font-size: 1.25rem;
    color: #0d6efd;
    font-weight: 600;
}

/* Responsive adjustments for query results */
@media (max-width: 768px) {
    .query-result-card {
        padding: 1rem;
    }
    
    .dns-record-table {
        font-size: 0.875rem;
    }
}

/* ASN Tool: Scrollable table containers */
.asn-table-container {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    position: relative;
}

.asn-table-container table {
    margin-bottom: 0;
    width: 100%;
}

.asn-table-container thead.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f8f9fa;
}

/* ASN Tool: Table sorting and search */
.sortable {
    user-select: none;
    position: relative;
}

.sortable:hover {
    background-color: #e9ecef;
}

.sort-icon {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-left: 0.5rem;
}

.sortable:hover .sort-icon {
    opacity: 1;
}

.sort-icon.text-primary {
    opacity: 1;
    color: #0d6efd !important;
}

.table-search-row {
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
}

.table-search-row td {
    padding: 0.5rem;
}

.table-search-row input {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.table-search-row input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* IP address clickable */
.ip-address-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    display: inline-block;
}

.ip-address-clickable:hover {
    background-color: #e7f3ff;
    color: #0d6efd;
    transform: scale(1.05);
}

/* DNS Validation Styles */
.validation-status {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.validation-warnings {
    margin-top: 1.5rem;
}

.validation-warnings .alert {
    border-left: 4px solid;
}

.validation-warnings .alert-danger {
    border-left-color: #dc3545;
}

.validation-warnings .alert-warning {
    border-left-color: #ffc107;
}

.validation-warnings .alert-info {
    border-left-color: #0dcaf0;
}

.validation-error,
.validation-warning {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.validation-error:last-child,
.validation-warning:last-child {
    margin-bottom: 0;
}

.policy-explanation {
    background-color: #e7f3ff;
    border-left: 4px solid #0dcaf0;
    padding: 1rem;
    border-radius: 0.375rem;
    line-height: 1.6;
}

.policy-explanation strong {
    color: #0b5ed7;
    font-weight: 600;
}

/* Validation details lists */
.validation-warnings ul.list-unstyled {
    margin-top: 0.5rem;
}

.validation-warnings ul.list-unstyled li {
    padding: 0.25rem 0;
    border-bottom: 1px solid #e9ecef;
}

.validation-warnings ul.list-unstyled li:last-child {
    border-bottom: none;
}

.validation-warnings ul.list-unstyled li strong {
    color: #495057;
    font-weight: 600;
    margin-right: 0.5rem;
}

.validation-warnings code {
    background-color: #f8f9fa;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

/* ASN Input Group specific adjustments */
.input-group-prepend.d-flex {
    flex: 1 1 auto;
}

.input-group-prepend.d-flex .input-group-text {
    border-right: none;
}

.input-group-prepend.d-flex .form-control {
    border-left: none;
}

@media (max-width: 575.98px) {
    .input-group-prepend.d-flex {
        width: 100% !important;
    }
    
    .input-group-prepend.d-flex .form-control {
        border-left: 1px solid #ced4da;
        border-radius: 0 0.375rem 0.375rem 0;
    }
    
    .input-group-prepend.d-flex .input-group-text {
        border-right: 1px solid #ced4da;
        border-radius: 0.375rem 0 0 0.375rem;
    }
}

/* ============================================
   SPF & DMARC Generator Styles
   ============================================ */

/* Mechanism/Tag Editor Items */
.mechanism-item {
    transition: box-shadow 0.2s ease;
}

.mechanism-item:hover {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.mechanism-item .card-body {
    padding: 1rem;
}

/* Generator Form Styles */
#editorSection .form-label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

#editorSection .form-select,
#editorSection .form-control {
    font-size: 0.875rem;
}

/* Validation Status */
#validationStatus .alert {
    border-left: 4px solid;
}

#validationStatus .alert-success {
    border-left-color: var(--success-color);
}

#validationStatus .alert-danger {
    border-left-color: var(--danger-color);
}

#validationStatus .alert-warning {
    border-left-color: var(--warning-color);
}

/* Generated Record Textarea */
#generatedRecord {
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

/* Copy Button Feedback */
#copyRecordBtn.btn-success {
    animation: pulse 0.5s ease;
}

/* Responsive adjustments for generators */
@media (max-width: 575.98px) {
    .mechanism-item .row > div {
        margin-bottom: 0.5rem;
    }
    
    .mechanism-item .row > div:last-child {
        margin-bottom: 0;
    }
    
    #editorSection .form-label {
        font-size: 0.8rem;
    }
    
    #editorSection .form-select,
    #editorSection .form-control {
        font-size: 0.8rem;
    }
    
    #generatedRecord {
        font-size: 0.75rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .mechanism-item .card-body {
        padding: 0.875rem;
    }
}
/* Wider Tooltips for Validation Details */
.tooltip-inner {
    max-width: 600px; /* Increased from 400px */
    text-align: left;
}

/* Ensure tooltip content wraps nicely but allows preformatted text */
.tooltip-inner pre {
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
}

/* ASN Intelligence: Statistics & Visualizations */
.chart-container {
    position: relative;
    height: 250px;
}

/* Responsive chart container for mobile */
@media (max-width: 991.98px) {
    .chart-container {
        height: 200px;
    }
}

/* Map container styling - using attribute selector for dynamic IDs */
[id^="peeringWorldMapContainer"] {
    height: 250px;
}

/* Fixed map container for IP lookup (replaces inline styles for CSP compatibility) */
.map-container-fixed {
    height: 250px;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

[id$="_map"] {
    height: 400px;
    width: 100%;
    border-radius: 0.375rem;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    [id$="_map"] {
        height: 300px;
    }
}

/* Statistics card styling */
.card.h-100 .card-body {
    display: flex;
    flex-direction: column;
}

.card.h-100 .card-body h3 {
    font-size: 2rem;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .card.h-100 .card-body h3 {
        font-size: 1.5rem;
    }
}