/* SPF Generator Vue Helper CSS */

/* ============================================ */
/* OVERRIDE AVIA/ENFOLD THEME FORM STYLES */
/* ============================================ */

/* Override Enfold's main_color input styles */
#vue-spf-generator.main_color .input-text,
#vue-spf-generator.main_color input[type='text'],
#vue-spf-generator.main_color input[type='input'],
#vue-spf-generator.main_color input[type='password'],
#vue-spf-generator.main_color input[type='email'],
#vue-spf-generator.main_color input[type='number'],
#vue-spf-generator.main_color input[type='url'],
#vue-spf-generator.main_color input[type='tel'],
#vue-spf-generator.main_color input[type='search'],
#vue-spf-generator.main_color textarea,
#vue-spf-generator.main_color select,
#vue-spf-generator .p-inputtext,
#vue-spf-generator input {
    border-color: #cbd5e1 !important;
    /* Default border color */
    background-color: initial !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
}

/* Focus state - Blue border */
#vue-spf-generator .p-inputtext:focus,
#vue-spf-generator input:focus,
#vue-spf-generator textarea:focus,
#vue-spf-generator select:focus {
    border-color: #5d78ff !important;
    /* Focus border color */
    outline: none !important;
}


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

#vue-spf-generator .p-card-content>.tw\:mb-5:first-child {
    display: none !important;
}

#vue-spf-generator span.tw\:text-lg.tw\:font-normal {
    font-size: 1rem !important;
    line-height: 1.5rem;
}

#wrap_all #main .spf-generator-block {
    margin-top: -11rem !important;
}

#wrap_all #main .spf-generator-block .template-page {
    padding-bottom: 0px;
}

#vue-spf-generator {
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

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

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

/* ============================================ */
/* FORM CARD - MINIMAL ADJUSTMENTS */
/* ============================================ */

/* Keep form responsive and clean */
#vue-spf-generator>.p-card.tw\:mb-10 {
    border-radius: 5vw !important;
    box-shadow: 0px 4px 25px 0px #1538771a !important;
}

/* ============================================ */
/* RESULTS CARD - STATUS CARDS */
/* ============================================ */

/* Status card colors */
#vue-spf-generator .tw\:text-green-600 {
    color: #16a34a !important;
    font-weight: 500 !important;
}

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

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

/* ============================================ */
/* RESULTS CARD - BORDER COLOR FIX */
/* ============================================ */

/* Force correct border color #e2e8f0 (override any theme defaults) */
#vue-spf-generator .p-panel {
    border-color: #e2e8f0 !important;
}

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

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

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

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

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

#vue-spf-generator .tw\:flex.tw\:justify-end.tw\:gap-2 {
    gap: 1.3rem !important;
}

/* ============================================ */
/* RESULTS CARD - GRID LAYOUT */
/* ============================================ */

#vue-spf-generator .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 */
#vue-spf-generator .p-datatable-table-container {
    overflow: visible !important;
    width: 100% !important;
}

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

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

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

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

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

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

#top .popper div,
#top .popper span,
#top .popper li {
    color: #fff !important;
}

#vue-spf-generator .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;
}

/* Button container - allow wrapping */
#vue-spf-generator .tw\:flex.tw\:gap-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

/* Buttons - natural sizing */
#vue-spf-generator .tw\:flex.tw\:gap-2 .p-button-outlined {
    flex: 0 1 auto !important;
    /* Allow natural width */
    white-space: nowrap !important;
}

#vue-spf-generator .tw\:ml-10\!.spf-node {
    margin-left: 1.95rem !important;
}

#vue-spf-generator .spf-node>.tw\:py-3.tw\:ml-4 {
    padding-block: 0.4rem !important;
}

#vue-spf-generator .shadow-none.border.tw\:border-gray-200\!.tw\:p-\[17\.5px\]\!.tw\:rounded-2xl {
    border: 1px solid;
}

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

@media (max-width: 1024px) {

    /* Status cards - 2 columns */
    #vue-spf-generator .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* SPF Results Details - 2 columns */
    #vue-spf-generator .p-tabpanel .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Make divider span full width */
    #vue-spf-generator .p-tabpanel .tw\:col-span-3 {
        grid-column: 1 / -1 !important;
    }
}

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

@media (max-width: 768px) {

    /* Status cards - Single column */
    #vue-spf-generator .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    #vue-spf-generator .tw\:grid.tw\:grid-cols-3>div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* SPF Results Details - Single column */
    #vue-spf-generator .p-tabpanel .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Remove right borders, add bottom borders */
    #vue-spf-generator .p-tabpanel .tw\:border-r {
        border-right: none !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    #vue-spf-generator .p-tabpanel .tw\:border-r:last-of-type {
        border-bottom: none !important;
    }

    /* Font size adjustments */
    #vue-spf-generator .p-panel-header h4.tw\:font-bold {
        font-size: 20px !important;
    }

    #vue-spf-generator .p-tabpanel h5.tw\:tracking-wide {
        font-size: 16px !important;
    }

    /* Tags Detected Table - Mobile optimizations */
    #vue-spf-generator .p-datatable-header-cell,
    #vue-spf-generator .p-datatable-table tbody td {
        padding: 0.5rem 0.375rem !important;
        font-size: 13px !important;
    }
}


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

/* Mobile - Make buttons more touch-friendly */
@media (max-width: 680px) {


    /* Make buttons take more space for easier tapping */
    #vue-spf-generator form .tw\:flex.tw\:gap-2 .p-button-outlined {
        flex: 1 1 calc(50% - 0.375rem) !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
}

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

@media (max-width: 480px) {

    #wrap_all #main .spf-generator-block {
        margin-top: -8rem !important;
    }

    /* Reduce padding on result card body */
    #vue-spf-generator .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 */
    #vue-spf-generator .p-datatable-table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #vue-spf-generator .p-datatable-header-cell,
    #vue-spf-generator .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 */
    #vue-spf-generator .p-datatable-table th,
    #vue-spf-generator .p-datatable-table td {
        width: 33.333% !important;
        max-width: 33.333% !important;
        min-width: 0 !important;
    }

    /* Extra aggressive word breaking */
    #vue-spf-generator .p-datatable-table th,
    #vue-spf-generator .p-datatable-table td {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }

    /* Lookup Tree - Branch title font size */
    #vue-spf-generator .spf-tree .tw\:font-semibold.tw\:leading-none span {
        font-size: 14px !important;
    }

    #vue-spf-generator form .tw\:flex.tw\:gap-2 .p-button-outlined {
        flex: 1 1 100% !important;
    }
}