/**
 * Ohio School Insights — Production CSS
 * WordPress theme-proof with high specificity
 */

/* =========================================
   Custom Properties (scoped)
   ========================================= */
#osi-app {
    --osi-blue-900: #1a202c;
    --osi-blue-800: #1a365d;
    --osi-blue-700: #2c5282;
    --osi-blue-600: #2b6cb0;
    --osi-blue-500: #3182ce;
    --osi-blue-400: #4299e1;
    --osi-blue-100: #ebf8ff;
    --osi-red-600: #c53030;
    --osi-red-500: #e53e3e;
    --osi-red-100: #fff5f5;
    --osi-green-600: #2f855a;
    --osi-green-500: #38a169;
    --osi-amber-500: #d69e2e;
    --osi-gray-50: #f7fafc;
    --osi-gray-100: #edf2f7;
    --osi-gray-200: #e2e8f0;
    --osi-gray-300: #cbd5e0;
    --osi-gray-500: #718096;
    --osi-gray-700: #4a5568;
    --osi-gray-800: #2d3748;
    --osi-white: #ffffff;
    --osi-radius: 10px;
    --osi-radius-sm: 6px;
    --osi-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
    --osi-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .04);
    --osi-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, .1), 0 4px 10px -5px rgba(0, 0, 0, .04);
    --osi-transition: .2s ease;
}

/* =========================================
   App Container — Reset everything inside
   ========================================= */
#osi-app {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #2d3748 !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
    position: relative !important;
}

#osi-app *,
#osi-app *::before,
#osi-app *::after {
    box-sizing: border-box !important;
}

/* =========================================
   Hero
   ========================================= */
#osi-app .osi-hero {
    text-align: center !important;
    padding: 40px 20px 28px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

#osi-app .osi-hero-title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #1a365d !important;
    letter-spacing: -.02em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    border: none !important;
    background: none !important;
}

#osi-app .osi-hero-subtitle {
    margin: 0 auto 6px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #718096 !important;
    max-width: 560px !important;
    line-height: 1.5 !important;
}

#osi-app .osi-hero-year {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3182ce !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}

/* =========================================
   Search Section
   ========================================= */
#osi-app .osi-search-section {
    position: relative !important;
    max-width: 720px !important;
    margin: 0 auto 32px !important;
    padding: 0 !important;
    z-index: 100 !important;
}

#osi-app .osi-search-form {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

#osi-app .osi-search-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .04) !important;
    overflow: hidden !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}

#osi-app .osi-search-wrapper.osi-focused,
#osi-app .osi-search-wrapper:focus-within {
    border-color: #3182ce !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .1), 0 0 0 4px rgba(66, 153, 225, .15) !important;
}

#osi-app .osi-search-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin-left: 20px !important;
    color: #cbd5e0 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

#osi-app .osi-search-input {
    flex: 1 1 auto !important;
    padding: 16px 14px !important;
    font-size: 17px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #2d3748 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    line-height: normal !important;
    float: none !important;
    display: block !important;
}

#osi-app .osi-search-input::placeholder {
    color: #cbd5e0 !important;
}

#osi-app .osi-search-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#osi-app .osi-search-btn {
    padding: 12px 28px !important;
    margin: 4px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2b6cb0, #2c5282) !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: background .2s ease, transform .1s !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    line-height: 1.4 !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#osi-app .osi-search-btn:hover {
    background: linear-gradient(135deg, #2c5282, #1a365d) !important;
    transform: translateY(-1px) !important;
}

#osi-app .osi-search-btn:active {
    transform: translateY(0) !important;
}

/* =========================================
   Dropdown
   ========================================= */
#osi-app .osi-dropdown {
    display: none;
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .1), 0 4px 10px -5px rgba(0, 0, 0, .04) !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    z-index: 200 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#osi-app .osi-dd-group {
    padding: 8px 18px 5px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: #718096 !important;
    background: #f7fafc !important;
    border-bottom: 1px solid #edf2f7 !important;
    margin: 0 !important;
}

#osi-app .osi-dd-item {
    padding: 12px 18px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #edf2f7 !important;
    transition: background .12s !important;
    display: block !important;
    margin: 0 !important;
    background: #ffffff !important;
    text-decoration: none !important;
}

#osi-app .osi-dd-item:last-child {
    border-bottom: none !important;
}

#osi-app .osi-dd-item:hover,
#osi-app .osi-dd-item.osi-dd-active {
    background: #ebf8ff !important;
}

#osi-app .osi-dd-name {
    display: block !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #1a365d !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
}

#osi-app .osi-dd-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #718096 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#osi-app .osi-dd-badge {
    display: inline-block !important;
    padding: 1px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 10px !important;
    letter-spacing: .03em !important;
    margin: 0 !important;
}

#osi-app .osi-badge-district {
    background: #ebf8ff !important;
    color: #2c5282 !important;
}

#osi-app .osi-badge-charter {
    background: #fff5f5 !important;
    color: #c53030 !important;
}

#osi-app .osi-dd-empty {
    padding: 20px !important;
    text-align: center !important;
    color: #718096 !important;
    font-style: italic !important;
    font-size: 14px !important;
}

/* =========================================
   Results
   ========================================= */
#osi-app .osi-results {
    margin: 0 !important;
    padding: 0 !important;
}

/* Cards */
#osi-app .osi-card {
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -1px rgba(0, 0, 0, .04) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    border: none !important;
    padding: 0 !important;
}

#osi-app .osi-card-header {
    padding: 20px 24px 16px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

#osi-app .osi-card-header h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2d3748 !important;
    line-height: 1.3 !important;
    border: none !important;
    background: none !important;
}

#osi-app .osi-card-body {
    padding: 0 24px 20px !important;
    margin: 0 !important;
}

/* School Card */
#osi-app .osi-school-card {
    border-top: 4px solid #2b6cb0 !important;
    animation: osiFadeSlide .35s ease !important;
}

#osi-app .osi-school-card.osi-charter {
    border-top-color: #e53e3e !important;
}

@keyframes osiFadeSlide {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#osi-app .osi-school-name {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #1a365d !important;
    line-height: 1.2 !important;
    border: none !important;
}

#osi-app .osi-charter .osi-school-name {
    color: #c53030 !important;
}

#osi-app .osi-type-pill {
    display: inline-block !important;
    padding: 4px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    margin: 0 !important;
    border: none !important;
    line-height: 1.4 !important;
}

#osi-app .osi-district-pill {
    background: #2b6cb0 !important;
}

#osi-app .osi-charter-pill {
    background: #e53e3e !important;
}

#osi-app .osi-school-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 28px !important;
}

#osi-app .osi-meta {
    font-size: 14px !important;
    color: #2d3748 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#osi-app .osi-meta strong {
    color: #718096 !important;
    font-weight: 600 !important;
    margin-right: 6px !important;
}

#osi-app .osi-online-pill {
    display: inline-block !important;
    background: #ebf8ff !important;
    border: 1px solid #90cdf4 !important;
    color: #2b6cb0 !important;
    padding: 2px 12px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Sub Title for ratings */
#osi-app .osi-sub-title {
    margin: 8px 0 10px !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #718096 !important;
    border: none !important;
    background: none !important;
}

#osi-app .osi-ratings-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 24px !important;
}

#osi-app .osi-rating-item {
    font-size: 14px !important;
}

#osi-app .osi-rating-label {
    color: #718096 !important;
    margin-right: 6px !important;
}

/* =========================================
   Stats Row
   ========================================= */
#osi-app .osi-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    animation: osiFadeSlide .4s ease .1s both !important;
}

#osi-app .osi-stat-card {
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .07) !important;
    padding: 24px !important;
    text-align: center !important;
    margin: 0 !important;
    border: none !important;
}

#osi-app .osi-stat-highlight {
    background: linear-gradient(135deg, #2c5282, #1a365d) !important;
    color: #ffffff !important;
}

#osi-app .osi-stat-val {
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
    color: #2d3748 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#osi-app .osi-stat-highlight .osi-stat-val {
    color: #ffffff !important;
}

#osi-app .osi-stat-lbl {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
    color: #4a5568 !important;
    padding: 0 !important;
}

#osi-app .osi-stat-highlight .osi-stat-lbl {
    color: rgba(255, 255, 255, .9) !important;
}

#osi-app .osi-stat-sub {
    font-size: 12px !important;
    color: #718096 !important;
    margin-top: 2px !important;
    padding: 0 !important;
}

#osi-app .osi-stat-highlight .osi-stat-sub {
    color: rgba(255, 255, 255, .6) !important;
}

/* =========================================
   Table
   ========================================= */
#osi-app .osi-table-card {
    animation: osiFadeSlide .45s ease .2s both !important;
}

#osi-app .osi-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
}

#osi-app .osi-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#osi-app .osi-table th {
    padding: 10px 14px !important;
    text-align: left !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: #718096 !important;
    background: #f7fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    white-space: nowrap !important;
}

#osi-app .osi-table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid #edf2f7 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    background: transparent !important;
}

#osi-app .osi-table tbody tr:hover {
    background: #f7fafc !important;
}

#osi-app .osi-r {
    text-align: right !important;
}

#osi-app .osi-name-col {
    font-weight: 600 !important;
    color: #2c5282 !important;
    min-width: 180px !important;
}

#osi-app .osi-money-cell {
    font-weight: 700 !important;
    color: #2f855a !important;
}

#osi-app .osi-tag-online {
    display: inline-block !important;
    background: #ebf8ff !important;
    color: #2b6cb0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: 8px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    border: none !important;
}

#osi-app .osi-empty-msg {
    text-align: center !important;
    padding: 32px 20px !important;
    color: #718096 !important;
    font-size: 15px !important;
}

/* =========================================
   Stars & Ratings
   ========================================= */
#osi-app .osi-stars {
    color: #d69e2e !important;
    font-size: 15px !important;
    letter-spacing: 1px !important;
}

#osi-app .osi-na {
    color: #cbd5e0 !important;
    font-size: 12px !important;
    font-style: italic !important;
}

/* =========================================
   Map Section
   ========================================= */
#osi-app .osi-map-section {
    margin: 40px 0 24px !important;
    padding: 0 !important;
}

#osi-app .osi-section-title {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a365d !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

#osi-app .osi-section-desc {
    text-align: center !important;
    font-size: 14px !important;
    color: #718096 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

#osi-app .osi-ohio-map {
    width: 100% !important;
    height: 500px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .07) !important;
    background: #f7fafc !important;
    border: 1px solid #e2e8f0 !important;
    position: relative !important;
    z-index: 1 !important;
}

#osi-app .osi-map-legend {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #718096 !important;
    padding: 0 !important;
}

#osi-app .osi-legend-gradient {
    width: 200px !important;
    height: 12px !important;
    border-radius: 6px !important;
    background: linear-gradient(to right, #edf2f7, #bee3f8, #90cdf4, #63b3ed, #4299e1, #3182ce, #2b6cb0, #2c5282, #1a365d) !important;
    border: none !important;
}

#osi-app .osi-legend-label {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   Attribution
   ========================================= */
#osi-app .osi-attribution {
    text-align: center !important;
    padding: 16px 20px !important;
    margin: 24px 0 16px !important;
    background: #f7fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #718096 !important;
}

#osi-app .osi-attribution-label {
    font-weight: 700 !important;
    margin-right: 8px !important;
}

#osi-app .osi-attribution a {
    color: #2b6cb0 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted #4299e1 !important;
    transition: color .2s, border-color .2s !important;
}

#osi-app .osi-attribution a:hover {
    color: #1a365d !important;
    border-bottom-style: solid !important;
}

#osi-app .osi-sep {
    color: #cbd5e0 !important;
    margin: 0 2px !important;
}

/* =========================================
   Loading / Error
   ========================================= */
#osi-app .osi-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 48px 20px !important;
    color: #718096 !important;
    font-size: 16px !important;
}

#osi-app .osi-spinner {
    width: 28px !important;
    height: 28px !important;
    border: 3px solid #e2e8f0 !important;
    border-top-color: #3182ce !important;
    border-radius: 50% !important;
    animation: osiSpin .7s linear infinite !important;
    display: inline-block !important;
}

@keyframes osiSpin {
    to {
        transform: rotate(360deg);
    }
}

#osi-app .osi-error-box {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #e53e3e !important;
    font-size: 16px !important;
    background: #fff5f5 !important;
    border-radius: 10px !important;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 640px) {
    #osi-app .osi-hero {
        padding: 24px 12px 20px !important;
    }

    #osi-app .osi-hero-title {
        font-size: 24px !important;
    }

    #osi-app .osi-hero-subtitle {
        font-size: 14px !important;
    }

    #osi-app .osi-search-wrapper {
        border-radius: 10px !important;
        flex-wrap: wrap !important;
    }

    #osi-app .osi-search-input {
        font-size: 15px !important;
        padding: 14px 10px !important;
    }

    #osi-app .osi-search-btn {
        padding: 10px 18px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    #osi-app .osi-search-icon {
        margin-left: 14px !important;
    }

    #osi-app .osi-card-header {
        padding: 16px 16px 12px !important;
    }

    #osi-app .osi-card-body {
        padding: 0 16px 16px !important;
    }

    #osi-app .osi-school-name {
        font-size: 20px !important;
    }

    #osi-app .osi-stats-row {
        grid-template-columns: 1fr !important;
    }

    #osi-app .osi-stat-val {
        font-size: 24px !important;
    }

    #osi-app .osi-ohio-map {
        height: 350px !important;
    }

    #osi-app .osi-table {
        font-size: 13px !important;
    }

    #osi-app .osi-table th,
    #osi-app .osi-table td {
        padding: 8px 10px !important;
    }
}