/* SPF Checker Vue Helper CSS - Targeting Only Search Card */

/* ============================================ */
/* GLOBAL FONT FAMILY - EXCLUDING ICONS */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker {
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

.spf-checker-search-block #vue-spf-checker *:not(.pi):not([class*="p-button-icon"]):not([class*="icon"]) {
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

/* Preserve icon fonts */
.spf-checker-search-block #vue-spf-checker .pi,
.spf-checker-search-block #vue-spf-checker [class*="p-button-icon"],
.spf-checker-search-block #vue-spf-checker [class*="icon"] {
    font-family: 'primeicons' !important;
}

/* ============================================ */
/* SEARCH CARD - "REAL-TIME SPF CHECKER" TITLE */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .p-card-header {
    display: block !important;
    padding: 0 !important;
    margin-left: 20px;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .p-card-header::before {
    content: "Real-Time SPF Checker";
    display: block;
    color: #000;
    font-size: 22px !important;
    padding: 10px;
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
    font-weight: lighter;
    text-transform: none;
}

/* ============================================ */
/* SEARCH CARD CONTAINER */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! {
    border-radius: 6.2rem !important;
    box-shadow: 0px 4px 25px 0px #1538771a !important;
    padding: 3rem 3rem !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .p-card-body {
    padding-top: 0px !important;
}

/* ============================================ */
/* SEARCH CARD - HIDE DESCRIPTION BOX */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:border-slate-200.tw\:rounded-lg {
    display: none !important;
}

/* ============================================ */
/* SEARCH CARD - INPUT & BUTTON LAYOUT */
/* ============================================ */

/* Make search box full width */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:grid.tw\:gap-4.tw\:grid-cols-2 {
    grid-template-columns: 1fr !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:col-span-1 {
    width: 100% !important;
}

/* Input field styling */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! input[type="text"].p-inputtext {
    width: 100% !important;
    height: auto !important;
    border-radius: 28px !important;
    padding: 1.5rem 230px 1.5rem 1.5rem !important;
    border: 1px solid rgba(20, 20, 20, 0.2) !important;
    font-size: 18px !important;
    background: #fff !important;
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

/* Button container */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:flex.tw\:gap-2 {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:h-\[41px\].tw\:mt-10 {
    margin-top: 0 !important;
    height: auto !important;
}

/* ============================================ */
/* SEARCH CARD - CHECK SPF BUTTON */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button {
    background: #4875f4 !important;
    width: 218px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    padding: 1.1rem 16px !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    color: #fff !important;
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button:hover {
    background-color: #3864e0 !important;
}

/* Hide search icon */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button .p-button-icon {
    display: none !important;
}

/* Change button text to "Check SPF" */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button .p-button-label::before {
    content: "Check SPF";
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
    font-size: 18px;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button .p-button-label {
    font-size: 0;
}

/* ============================================ */
/* SEARCH CARD - MISC */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:flex.tw\:flex-col.tw\:gap-2.tw\:grow {
    flex-grow: 1 !important;
    width: 100% !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! label[for="analyzer-domain-lookup"] {
    display: none !important;
}

/* ============================================ */
/* STATUS CARDS - COLOR FIXES */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker .tw\:text-green-600 {
    color: #16a34a !important;
    font-weight: 500 !important;
}

.spf-checker-search-block #vue-spf-checker .tw\:text-orange-500 {
    color: #f97316 !important;
    font-weight: 500 !important;
}

.spf-checker-search-block #vue-spf-checker .tw\:text-red-600 {
    color: #dc2626 !important;
    font-weight: 500 !important;
}

/* ============================================ */
/* SPF RESULTS DETAILS - BORDER COLOR FIX */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker .p-card:not(.tw\:mb-6) {
    border-radius: 4vw !important;
}

/* Force correct border color #e2e8f0 (override Avia's #c2c2c2) */
.spf-checker-search-block #vue-spf-checker .p-panel {
    border-color: #e2e8f0 !important;
}

.spf-checker-search-block #vue-spf-checker .p-panel-header {
    border-color: #e2e8f0 !important;
}

.spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:border-r,
.spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:border-gray-200 {
    border-color: #e2e8f0 !important;
}

.spf-checker-search-block #vue-spf-checker .p-divider {
    background-color: #e2e8f0 !important;
}

.spf-checker-search-block #vue-spf-checker .p-datatable-table th,
.spf-checker-search-block #vue-spf-checker .p-datatable-table td {
    border-color: #e2e8f0 !important;
}

/* Fix tab list border color */
.spf-checker-search-block #vue-spf-checker .p-tablist-tab-list {
    border-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
}

/* ============================================ */
/* SPF RESULTS DETAILS - GRID LAYOUT */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:grid.tw\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
}

/* ============================================ */
/* TAGS DETECTED TABLE - RESPONSIVE */
/* ============================================ */

/* Force word breaking for all table cells */
.spf-checker-search-block #vue-spf-checker .p-datatable-table-container {
    overflow: visible !important;
    width: 100% !important;
}

.spf-checker-search-block #vue-spf-checker .p-datatable-table {
    width: 100% !important;
    table-layout: fixed !important;
}

.spf-checker-search-block #vue-spf-checker .p-datatable-table th,
.spf-checker-search-block #vue-spf-checker .p-datatable-table td {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: auto !important;
}

/* ============================================ */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* ============================================ */

@media (max-width: 1024px) {
    /* Status cards - 2 columns */
    .spf-checker-search-block #vue-spf-checker .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* SPF Results Details - 2 columns */
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Make divider span full width */
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:col-span-3 {
        grid-column: 1 / -1 !important;
    }
    
    /* Lookup Tree - Reduce branch margin */
    .spf-checker-search-block #vue-spf-checker .tw\:ml-10\!.spf-node {
        margin-left: 2.74rem !important;
    }
}

/* ============================================ */
/* RESPONSIVE - MOBILE (max-width: 768px) */
/* ============================================ */

@media (max-width: 768px) {
    /* Status cards - Single column */
    .spf-checker-search-block #vue-spf-checker .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .spf-checker-search-block #vue-spf-checker .tw\:grid.tw\:grid-cols-3 > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* SPF Results Details - Single column */
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Remove right borders, add bottom borders */
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:border-r {
        border-right: none !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:border-r:last-of-type {
        border-bottom: none !important;
    }
    
    /* Font size adjustments */
    .spf-checker-search-block #vue-spf-checker .p-panel-header h4.tw\:font-bold {
        font-size: 20px !important;
    }
    
    .spf-checker-search-block #vue-spf-checker .p-tabpanel h5.tw\:tracking-wide {
        font-size: 16px !important;
    }
    
    /* Tags Detected Table - Mobile optimizations */
    .spf-checker-search-block #vue-spf-checker .p-datatable-header-cell,
    .spf-checker-search-block #vue-spf-checker .p-datatable-table tbody td {
        padding: 0.5rem 0.375rem !important;
        font-size: 13px !important;
    }
}

/* ============================================ */
/* RESPONSIVE - MOBILE (max-width: 720px) */
/* ============================================ */

@media (max-width: 720px) {
    /* Search card input */
    .spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! input[type="text"].p-inputtext {
        padding-right: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Search card button - stack below input */
    .spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button {
        position: static !important;
        width: 100% !important;
        max-width: 313px !important;
        display: block !important;
        margin: 0 auto !important;
        transform: none !important;
    }
    
    .spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:flex.tw\:gap-2 {
        display: block !important;
    }
}

/* ============================================ */
/* RESPONSIVE - SMALL MOBILE (max-width: 480px) */
/* ============================================ */

@media (max-width: 480px) {
    /* Reduce padding on result card body */
    .spf-checker-search-block #vue-spf-checker .p-card-body.tw\:items-center\!.tw\:py-16\!.tw\:px-12\! {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Tags Detected Table - Extra small screens */
    .spf-checker-search-block #vue-spf-checker .p-datatable-table {
        width: 100% !important;
        table-layout: fixed !important;
    }
    
    .spf-checker-search-block #vue-spf-checker .p-datatable-header-cell,
    .spf-checker-search-block #vue-spf-checker .p-datatable-table tbody td {
        padding: 0.375rem 0.25rem !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    
    /* Force equal column widths for better space distribution */
    .spf-checker-search-block #vue-spf-checker .p-datatable-table th,
    .spf-checker-search-block #vue-spf-checker .p-datatable-table td {
        width: 33.333% !important;
        max-width: 33.333% !important;
        min-width: 0 !important;
    }
    
    /* Extra aggressive word breaking */
    .spf-checker-search-block #vue-spf-checker .p-datatable-table th,
    .spf-checker-search-block #vue-spf-checker .p-datatable-table td {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Lookup Tree - Branch title font size */
    .spf-checker-search-block #vue-spf-checker .spf-tree .tw\:font-semibold.tw\:leading-none span {
        font-size: 14px !important;
    }
}

/* ============================================ */
/* COPY BUTTON FUNCTIONALITY */
/* ============================================ */

/* Copy button cursor */
.spf-checker-search-block #vue-spf-checker .pi-clone {
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.spf-checker-search-block #vue-spf-checker .pi-clone:hover {
    color: #4875f4 !important;
}

/* Success checkmark */
.spf-checker-search-block #vue-spf-checker .pi-check {
    color: #10b981 !important;
    transition: color 0.2s ease !important;
}

/* Tooltip positioning */
.spf-checker-search-block #vue-spf-checker .popper {
    position: absolute !important;
    z-index: 9999 !important;
    margin-top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.spf-checker-search-block #vue-spf-checker .popper .tw\:bg-surface-700 {
    background-color: #374151 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
}