/**
 * xCasaTV UI System — sharper green/black interface layer
 * Loaded after style.css for consistent controls, nav, cards, focus.
 */

/* —— Global focus & selection —— */
:focus-visible {
    outline: 2px solid rgba(57, 255, 20, 0.55);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.btn-glow:focus-visible,
.btn-outline-glow:focus-visible {
    outline-offset: 3px;
}

/* —— Unified form controls —— */
.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.page-content select,
.page-content textarea,
.auth-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.auth-panel select,
.auth-panel textarea,
.form-control,
.site-input,
.shop-toolbar input,
.shop-toolbar select {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(57, 255, 20, 0.16) !important;
    border-radius: 0.5rem !important;
    color: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
.page-content select:focus,
.page-content textarea:focus,
.auth-panel input:focus,
.auth-panel select:focus,
.auth-panel textarea:focus,
.form-control:focus,
.site-input:focus {
    border-color: rgba(57, 255, 20, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.12) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    outline: none !important;
}

.page-content label,
.auth-panel label {
    color: #9aaca0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.page-content ::placeholder,
.auth-panel ::placeholder {
    color: #55665c !important;
}

/* —— Navigation —— */
.site-nav__inner {
    height: 4.25rem;
}

.site-nav__link {
    border-radius: 0.45rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.site-nav__link:hover {
    background: rgba(57, 255, 20, 0.06);
    color: #fff;
}

.site-nav__link--active {
    background: rgba(57, 255, 20, 0.12) !important;
    border: 1px solid rgba(57, 255, 20, 0.22);
}

.site-nav__link--active::after {
    bottom: 0.15rem;
    width: 1.15rem;
    height: 2px;
}

.site-search__input {
    border-radius: 0.5rem !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(57, 255, 20, 0.14) !important;
}

.site-icon-btn,
.site-user-btn {
    border-radius: 0.5rem !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(57, 255, 20, 0.14) !important;
}

.site-icon-btn:hover,
.site-user-btn:hover {
    border-color: rgba(57, 255, 20, 0.4) !important;
    background: rgba(57, 255, 20, 0.08) !important;
    color: var(--primary);
}

.site-dropdown {
    background: rgba(0, 0, 0, 0.94) !important;
    border: 1px solid rgba(57, 255, 20, 0.2) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.65), 0 0 24px rgba(57, 255, 20, 0.08) !important;
    backdrop-filter: blur(24px);
}

.site-dropdown a {
    border-radius: 0.45rem;
    color: #c5d4ca;
}

.site-dropdown a:hover {
    background: rgba(57, 255, 20, 0.1) !important;
    color: #fff;
}

.site-mobile-menu {
    background: rgba(0, 0, 0, 0.97) !important;
    border-left: 1px solid rgba(57, 255, 20, 0.18) !important;
}

.mobile-nav-link {
    border-radius: 0.5rem !important;
    border: 1px solid transparent;
}

.mobile-nav-link:hover,
.mobile-nav-link.bg-primary\/10 {
    border-color: rgba(57, 255, 20, 0.2);
}

/* —— Filter pills —— */
.filter-pills {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(57, 255, 20, 0.14);
    border-radius: 0.65rem;
    padding: 0.4rem;
}

.filter-pill {
    border-radius: 0.45rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.filter-pill:hover {
    color: #fff;
    background: rgba(57, 255, 20, 0.06);
    border-color: rgba(57, 255, 20, 0.18);
}

.filter-pill.is-active,
.filter-pill.active,
.filter-pill--active,
a.filter-pill.bg-primary,
.filter-pill[aria-current="page"] {
    background: rgba(57, 255, 20, 0.14) !important;
    border-color: rgba(57, 255, 20, 0.4) !important;
    color: var(--primary) !important;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.12);
}

/* —— Cards & shop —— */
.shop-card {
    border-radius: 0.65rem !important;
    background: linear-gradient(160deg, #080c0a 0%, #000 100%) !important;
    border: 1px solid rgba(57, 255, 20, 0.14) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35) !important;
}

.shop-card:hover,
.shop-card.glass-card:hover {
    border-color: rgba(57, 255, 20, 0.4) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 28px rgba(57, 255, 20, 0.1) !important;
}

.shop-badge {
    border-radius: 0.35rem !important;
}

.shop-card__category,
.shop-card__delivery {
    border-radius: 0.35rem !important;
    background: rgba(57, 255, 20, 0.06) !important;
    border: 1px solid rgba(57, 255, 20, 0.12);
    color: #8fa894;
}

.shop-toolbar {
    border-radius: 0.65rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(57, 255, 20, 0.14);
}

.glass-card {
    border-radius: var(--radius-lg) !important;
}

.bg-dark-card,
.modern-card {
    background: linear-gradient(160deg, #080c0a 0%, #000 100%) !important;
    border: 1px solid rgba(57, 255, 20, 0.12) !important;
    border-radius: 0.65rem !important;
}

/* —— Page content rhythm —— */
.page-content .glass-card,
.page-content article.glass-card {
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.page-hero {
    border-radius: 0.75rem !important;
}

.page-hero h1 {
    font-family: var(--font-display);
}

.section-heading {
    margin-bottom: 1.35rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(57, 255, 20, 0.1);
}

/* —— Tables —— */
.page-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(57, 255, 20, 0.14);
    border-radius: 0.65rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

.page-content thead th {
    background: rgba(57, 255, 20, 0.08);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(57, 255, 20, 0.16);
    text-align: left;
}

.page-content tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(57, 255, 20, 0.08);
    color: #c5d4ca;
    font-size: 0.875rem;
}

.page-content tbody tr:last-child td {
    border-bottom: 0;
}

.page-content tbody tr:hover td {
    background: rgba(57, 255, 20, 0.04);
}

/* —— Alerts / messages —— */
.page-content .bg-red-500\/10,
.page-content .bg-green-500\/10,
.page-content .bg-amber-500\/10,
.page-content .bg-primary\/10 {
    border-radius: 0.55rem !important;
}

/* Map leftover Tailwind green-500 accents → neon primary */
.page-content .bg-green-500\/10 { background-color: rgba(57, 255, 20, 0.1) !important; }
.page-content .bg-green-500\/15 { background-color: rgba(57, 255, 20, 0.15) !important; }
.page-content .bg-green-500\/20 { background-color: rgba(57, 255, 20, 0.2) !important; }
.page-content .border-green-500\/20 { border-color: rgba(57, 255, 20, 0.2) !important; }
.page-content .border-green-500\/30 { border-color: rgba(57, 255, 20, 0.3) !important; }
.page-content .text-green-400 { color: #39ff14 !important; }

/* —— Buttons density —— */
.btn-glow,
.btn-outline-glow {
    letter-spacing: 0.01em;
}

.btn-outline-glow {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* —— Checkout / cart cards —— */
.checkout-card,
.checkout-summary,
.cart-item,
.checkout-panel,
.cart-panel,
.order-card {
    background: linear-gradient(160deg, #080c0a 0%, #000 100%) !important;
    border: 1px solid rgba(57, 255, 20, 0.16) !important;
    border-radius: 0.65rem !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

/* —— Forum —— */
.forum-thread-row,
.forum-category-card {
    border: 1px solid rgba(57, 255, 20, 0.12);
    border-radius: 0.55rem;
    background: rgba(0, 0, 0, 0.45);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.forum-thread-row:hover,
.forum-category-card:hover {
    border-color: rgba(57, 255, 20, 0.35);
    background: rgba(57, 255, 20, 0.05);
}

/* —— Home stage mobile —— */
@media (max-width: 1023px) {
    .home-stage {
        min-height: auto;
        padding-bottom: 1rem;
    }

    .home-stage__inner {
        padding-top: 1.5rem;
        padding-bottom: 1.75rem;
        gap: 1.75rem;
    }

    .home-stage__cta {
        width: 100%;
    }

    .home-stage__cta .btn-glow,
    .home-stage__cta .btn-outline-glow {
        width: 100%;
    }

    .ux-shell {
        width: 100%;
        padding: 0.25rem 0 1.5rem;
    }

    .ux-panel {
        transform: none !important;
    }

    .ux-float {
        right: 0.35rem;
        bottom: 0.15rem;
        width: 7.25rem;
        padding: 0.6rem;
    }

    .ux-panel__metrics {
        grid-template-columns: 1fr 1fr;
    }

    .ux-panel__metrics .ux-metric:last-child {
        grid-column: 1 / -1;
    }

    .stat-card {
        padding: 1rem 0.85rem 1rem 1rem;
    }

    .stat-card__value {
        font-size: 1.45rem;
    }
}

/* —— Scrollbar (webkit) —— */
.page-content ::-webkit-scrollbar,
.tsv-channels::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.page-content ::-webkit-scrollbar-thumb,
.tsv-channels::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 20, 0.28);
    border-radius: 99px;
}

/* —— Empty state —— */
.modern-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1px dashed rgba(57, 255, 20, 0.22);
    border-radius: 0.65rem;
    background: rgba(0, 0, 0, 0.4);
}

.modern-empty__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid rgba(57, 255, 20, 0.22);
    color: var(--primary);
    font-size: 1.35rem;
}

.modern-empty__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.35rem;
}

.modern-empty__text {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.modern-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.15rem;
    border-radius: 0.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #000;
}

.modern-btn--outline {
    background: transparent;
    border: 1px solid rgba(57, 255, 20, 0.35);
    color: #fff;
}


/* —— Pagination —— */
.page-content nav[aria-label="Pagination"] a,
.page-content .pagination a,
.pagination .page-link {
    border-radius: 0.4rem !important;
    border: 1px solid rgba(57, 255, 20, 0.16) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: #c5d4ca !important;
}

.page-content nav[aria-label="Pagination"] a:hover,
.pagination a:hover {
    border-color: rgba(57, 255, 20, 0.4) !important;
    color: var(--primary) !important;
}

/* —— Product / detail sticky actions —— */
@media (max-width: 767px) {
    .shop-card__footer,
    .product-actions {
        gap: 0.5rem;
    }

    .shop-card__footer .btn-glow,
    .shop-card__footer .btn-outline-glow {
        width: 100%;
    }
}