/* Custom Styles for Local AI Search */
/* ============================================================
   1. GLOBAL THEME & BASE STYLES
   ============================================================ */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents awkward side-scrolling */
}

body { 
    background-color: #f8f9fa; 
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; 
    color: #2d3436;
}

.card { 
    border: none; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    border-radius: 12px; 
}

/* GOOGLE ANALYTICS UI THEME */
:root {
    --ga-blue: #1a73e8;
    --ga-border: #dadce0;
}

body { background: #f1f3f4 !important; } /* GA Off-White background */

.card {
    border-radius: 8px !important;
    border: 1px solid var(--ga-border) !important;
    box-shadow: none !important; /* Flat UI look */
}

h6 {
    letter-spacing: 0.8px;
    color: #5f6368;
    font-weight: 500 !important;
}

.bg-primary { background-color: var(--ga-blue) !important; }

/* Styles for the Sources table to match GA's list view */
.ga-list-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

#map {
    height: 400px;
    background: #fff;
    border-radius: 8px;
}

/* Custom Primary Indigo Theme */
.text-primary { color: #4f46e5 !important; }
.btn-primary { background-color: #4f46e5; border-color: #4f46e5; }
.btn-primary:hover { background-color: #4338ca; border-color: #4338ca; }
.bg-primary { background-color: #4f46e5 !important; }

/* AI Box (Search Results) */
.ai-box { 
    background: #f0f4ff; 
    border-left: 5px solid #4f46e5; 
    padding: 20px; 
    border-radius: 12px; 
}

/* Semantic Search result cards */
.result-card {
    transition: background 0.2s ease;
    padding: 8px;
    width: 100% !important;
    overflow-x: hidden;
}

.result-card:hover {
    background: rgba(79, 70, 229, 0.02); /* Slight tint on hover */
}

.result-card a.truncate-url {
    word-break: break-all !important;  /* Splits "http://really-long-university-url..." */
    overflow-wrap: break-word !important;
    white-space: normal !important;     /* Allows it to take multiple lines */
    max-width: 100% !important;
    display: block !important;
}

.result-card h6 {
    word-break: break-word;
    overflow-wrap: break-word;
    margin-right: 5px;
    flex-shrink: 1; /* Allows the title to get smaller for the badge */
}

.flex-grow-1 {
    min-width: 0; /* CRITICAL for Flexbox: allows container to shrink below content size */
}

.snippet-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   2. AUDIT TABLE HEADER STYLES (Desktop)
   ============================================================ */
.thead-custom th {
    background-color: #4f46e5 !important;
    color: white !important;
    vertical-align: middle !important;
    text-align: center;
    padding: 15px 8px !important;
    font-size: 0.85rem;
    white-space: nowrap;
}

.info-handle {
    cursor: help;
    font-size: 1.1rem;
    display: inline-flex !important; /* Force layout */
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9); /* Header icons are light */
    text-decoration: none !important; /* Removes the dots */
    font-style: normal;
    margin-top: 5px;
    transition: transform 0.2s;
    line-height: 1;
}

.info-handle:hover {
    opacity: 1;
    color: white;
    transform: scale(1.1);
}

/* Hide mobile handles on desktop */
.m-icon { display: none; }

/* Ensure Tooltips don't show the dots underneath the icon */
[data-bs-toggle="tooltip"] {
    text-decoration: none !important; 
    border: none !important;
}

/* Ensure the status overlays sit on top of the browser error pages */
.preview-window {
    width: 100%;
    height: 350px;           /* Slightly taller for better view */
    overflow: hidden;         /* This 'clips' the 1440px width into the modal */
    position: relative;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    display: flex;
    justify-content: center;
}

#previewStatusArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f9fa; /* Matches the modal background */
    z-index: 5; /* This pushes our message above the iframe */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#pagePreview {
    /* 1. Force the physical 'viewport' of the frame to be large desktop size */
    width: 1440px !important; 
    height: 1200px !important; 
    
    /* 2. Scale down significantly to fit inside a standard modal */
    /* Calculation: 1440px * 0.33 = ~475px (Modal Width) */
    transform: scale(0.33); 
    
    /* 3. Keep anchor at the top middle */
    transform-origin: top center; 
    
    /* 4. Disable any mobile styles the site might try to guess */
    border: none;
    background: white;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    flex-shrink: 0;
}

#progBar {
    transition: width 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
    background-image: linear-gradient(
        45deg, 
        rgba(255,255,255,.15) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255,255,255,.15) 50%, 
        rgba(255,255,255,.15) 75%, 
        transparent 75%, 
        transparent
    );
}

/* Ensure progress area handles transitions cleanly */
#progCont {
    transition: opacity 0.5s ease-in-out;
}

.flex-shrink-0.ms-3 {
    display: flex;
    align-items: flex-start;
}

/* Styling for Search Result Thumbnails */
.result-thumb {
    width: 100px;          /* Width of the image box */
    height: 100px;          /* Height of the image box */
    object-fit: cover;     /* Crops to fit neatly without stretching */
    background-color: #eee;
    transition: opacity 0.3s ease;
}

/* Ensure url link wraps or truncates instead of pushing out the box */
.truncate-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
    display: inline-block;
}

.animate-fade-in {
    animation: fadeIn 0.4s ease forwards;
}

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

/* Ensure the button grid looks professional */
.row.g-2 .btn-outline-secondary, 
.row.g-2 .btn-outline-dark, 
.row.g-2 .btn-outline-info {
    border-width: 1.5px;
    background-color: white !important; /* Forces the clean card look */
    transition: all 0.3s ease;
}

.row.g-2 .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* 1. Base style for the button "Tiles" */
.report-grid-btn {
    border-width: 1.5px !important;
    background-color: #ffffff !important; /* Force white background */
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* 2. Fix the SEO Button Text on Hover */
.btn-outline-secondary.report-grid-btn:hover {
    background-color: #f8f9fa !important; /* Very faint grey */
    color: #6c757d !important;          /* KEEP grey text */
    border-color: #6c757d !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

/* 3. Fix the ADA Button Text on Hover */
.btn-outline-dark.report-grid-btn:hover {
    background-color: #f8f9fa !important; /* Very faint grey */
    color: #212529 !important;           /* KEEP dark text */
    border-color: #212529 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

/* 4. Fix the Analytics Button Text on Hover */
.btn-outline-info.report-grid-btn:hover {
    background-color: #eefbff !important; /* Very faint blue */
    color: #0dcaf0 !important;           /* KEEP blue text */
    border-color: #0dcaf0 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

/* Ensure icons/spans inside inherit the parent's color */
.report-grid-btn span {
    color: inherit !important;
}

/* Ensure the emoji/icon also doesn't disappear */
.btn:hover span {
    color: inherit;
}

/* Card hover shadow polish */
.row.g-2 .btn:hover {
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.letter-spacing-1 {
    letter-spacing: 0.5px;
}

/* ============================================================
   4. ANALYTICS: DYNAMIC FOCUS GRID (Charts & Map)
   ============================================================ */
.analytics-grid {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.expandable-card {
    border: 1px solid rgba(0,0,0,0.08) !important;
    background: white;
    cursor: pointer;
    min-height: 180px;
    position: relative;
    transition: all 0.3s ease;
}

.expandable-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px);
    border-color: #4f46e5 !important;
}

.expand-icon {
    position: absolute;
    top: 12px;
    right: 15px;
    color: #4f46e5;
    font-weight: bold;
    font-size: 1.2rem;
    opacity: 0.5;
}

.expandable-card:hover .expand-icon { opacity: 1; }

.expandable-card.enlarged {
    box-shadow: 0 15px 35px rgba(79, 70, 229, 0.15);
    border-color: #4f46e5 !important;
    cursor: default;
}

/* Heat Map Dimensions */
#map {
    height: 450px !important;
    width: 100% !important;
    z-index: 1;
}

/* Circular Badges on Map */
.map-hit-badge {
    background-color: #4f46e5;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 1000 !important;
}

#previewImage {
    transition: transform 0.2s;
    background-color: #f1f3f5;
}

/* Simulate the real result hover in preview */
#sampleCardPreview:hover #previewImage {
    transform: scale(1.05);
}

.form-control-color {
    padding: 0 !important;
    border: 1px solid #ced4da;
    background: none;
    overflow: hidden;
}

.form-control-color::-webkit-color-swatch {
    border: none;
    padding: 0;
}

/* --- ANALYTICS UI TWEAKS --- */

/* Fixes the stretching issue on the top row */
#container-sparkline, #container-total, #container-accuracy {
    max-height: 180px; /* Forces a consistent height for the metric cards */
}

/* Ensure the chart inside the sparkline doesn't force growth */
#sparklineChart {
    max-height: 80px !important;
}

/* Ensure text inside the small cards stays centered vertically */
.metrics-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.ga-sources-container {
    max-height: 250px;
    overflow-y: auto;
}

/* Optional: style for a 'Current Value' label on the trend line */
.spark-val {
    font-size: 0.8rem;
    font-weight: bold;
    color: #1a73e8;
}

/* ============================================================
   3. MOBILE AUDIT CARDS (991.98px and below)
   ============================================================ */
@media (max-width: 991.98px) {
    /* 1. Transform table row into a card container */
    #seoTableBody tr, #adaTableBody tr {
        display: block;
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 16px;
        margin-bottom: 1.5rem;
        padding: 1.25rem;
        box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    }

    /* 2. Cell layout: Label + Icon (Left) ... Value (Right) */
    #seoTableBody td, #adaTableBody td {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        border: none !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #f1f3f5 !important;
        text-align: left;
    }

    /* Inject the label from the data-label attribute */
    #seoTableBody td::before, #adaTableBody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #6c757d;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Pushes ONLY the data value to the far right */
    /* This selects the element coming AFTER the injected m-icon */
    #seoTableBody td > a, 
    #seoTableBody td > span, 
    #seoTableBody td > div,
    #adaTableBody td > span, 
    #adaTableBody td > a {
        margin-left: auto !important;
        text-align: right;
    }

    /* Alignment for the URL link on the right */
    #seoTableBody td:first-child a, 
    #adaTableBody td:first-child a {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 3. SPECIFIC FIX: CENTERED AI BUTTON (NO LABEL) */
    #seoTableBody td:last-child, 
    #adaTableBody td:last-child {
        justify-content: center !important; 
        border-bottom: none !important;
        padding-top: 15px !important;
    }

    /* Hide the text label and the icon for the AI row only */
    #seoTableBody td:last-child::before, 
    #adaTableBody td:last-child::before,
    #seoTableBody td:last-child .m-icon, 
    #adaTableBody td:last-child .m-icon {
        display: none !important;
    }

    /* Make the button fill most of the card width on small screens */
    #seoTableBody td:last-child button, 
    #adaTableBody td:last-child button {
        width: 100%;
        max-width: 280px;
        margin-left: 0 !important; /* Reset the margin-auto applied to other values */
    }
}

@media (max-width: 991px) {
    /* Reduce image size for medium tablets */
    .result-thumb {
        width: 100px !important;
        height: 70px !important;
    }
}

@media (max-width: 767px) {
    .container-md {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Ensure the card takes up full available space minus small gutters */
    .card {
        width: 100%;
        border-radius: 15px !important;
    }

    /* Make buttons slightly taller for easier thumb-tapping */
    .btn {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* Force inputs to not zoom in on iPhone when clicked */
    input[type="url"], input[type="number"] {
        font-size: 16px !important; 
    }
}

@media (max-width: 600px) { #map { height: 320px !important; } }

/* ============================================================
   5. MODAL & AI CONTENT FORMATTING
   ============================================================ */
.modal-content { border-radius: 20px; overflow: hidden; border: none; }

#adaAdviceBody pre, #seoAdviceBody pre {
    background-color: #212529 !important;
    color: #f8f9fa !important;
    padding: 1rem;
    border-radius: 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    margin-top: 10px;
    border-left: 5px solid #4f46e5;
}

/* Force Wrap long URLs in AI box */
#aiModalUrl {
    word-break: break-all;
    font-size: 0.75rem;
}

/* Custom Scrollbar for Pre/Code */
pre::-webkit-scrollbar { height: 6px; }
pre::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 10px; }

/* Fixes tooltip layering inside Responsive tables */
.table-responsive { overflow: visible !important; }

/* Admin Progress Bar styles */
.progress-bar-animated {
    transition: width 0.6s ease;
}

/* ADMIN PANEL MOBILE REFINEMENTS */

@media (max-width: 576px) {
    /* Tighten vertical spacing on small phones */
    .container.py-3 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .card.p-3 {
        padding: 1rem !important; /* Smaller card inner padding */
    }

    /* Shrink title to avoid wrapping */
    h2.fw-bold {
        font-size: 1.4rem;
    }

    /* Make status text and progress clearer */
    #statusMsg {
        width: 100%;
        margin-bottom: 5px;
    }
    
    #percentText {
        font-size: 0.9rem;
    }

    /* Adjust Reports Grid icons */
    .report-grid span.fs-4 {
        font-size: 1.2rem !important;
    }
    
    .report-grid .small {
        font-size: 0.75rem;
    }

    /* On small phones, hide thumbnails to keep the focus on text */
    .thumbnail-container {
        display: none;
    }

    .flex-shrink-0 {
        display: none !important; 
    }

    .flex-shrink-0.ms-3 {
        display: none !important;
    }
    
    .result-card {
        padding: 5px 0;
    }

    .result-card h6 {
        font-size: 1rem;
    }
    
    .snippet-text {
        -webkit-line-clamp: 4; /* Show slightly more text since image is gone */
    }

    .preview-window {
        height: 200px;
    }
    #pagePreview {
        /* Even smaller zoom for tiny phone screens */
        transform: scale(0.28); 
    }
}

@media (max-width: 480px) {
    .ms-3.flex-shrink-0 {
        display: none !important;
    }
}