/**
 * Dashboard Unified - Specific styles
 *
 * Styles for the unified My Account / Dashboard.
 * Supplements Tailwind utility classes with component-specific styles.
 *
 * @package Lovasok_Marketplace
 */

/* ===========================
   Dashboard Layout
   =========================== */
.lovasok-dashboard {
    background: #f8fafc;
    min-height: 100vh;
}

/* WooCommerce default wrapper override - remove default WC styles */
.woocommerce-account .woocommerce {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-account .entry-content {
    padding: 0 !important;
}

/* Remove default WC My Account styles that leak through */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
}

/* ===========================
   Sidebar Scrollbar Hide (mobile)
   =========================== */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ===========================
   Tab transitions
   =========================== */
.lovasok-dashboard [x-show] {
    transition: opacity 0.15s ease-in-out;
}

/* ===========================
   Toast animation
   =========================== */
.lovasok-dashboard .fixed {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ===========================
   Responsive adjustments
   =========================== */
@media (max-width: 1023px) {
    .lovasok-dashboard nav .flex {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .lovasok-dashboard nav .flex::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 639px) {
    .lovasok-dashboard .lovasok-mobile-touch {
        min-height: 44px;
    }

    .lovasok-dashboard input,
    .lovasok-dashboard select,
    .lovasok-dashboard textarea {
        font-size: 16px;
    }
}

/* ===========================
   Card hover effects
   =========================== */
.lovasok-dashboard .hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.lovasok-dashboard .hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ===========================
   Form input focus states
   =========================== */
.lovasok-dashboard input:focus,
.lovasok-dashboard select:focus,
.lovasok-dashboard textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--color-primary, 139, 92, 246), 0.2);
}

/* ===========================
   Quick action card hover
   =========================== */
.lovasok-dashboard a[class*="flex-col"] {
    transition: all 0.2s ease;
}

.lovasok-dashboard a[class*="flex-col"]:hover {
    transform: translateY(-1px);
}

/* ===========================
   Méneskezelő összefoglaló szűrő-kártyák
   GeneratePress a <button>-öket :hover/:focus-kor sötétzöldre festi
   (form_button_background_color). Itt kizárjuk, és halk, kártyához illő
   hover/aktív állapotot adunk. A .is-active a reset blokk UTÁN van, hogy
   fókuszált (kattintott) állapotban is a kiemelés győzzön.
   =========================== */
.lovasok-scard,
.lovasok-scard:hover,
.lovasok-scard:focus,
.lovasok-scard:active,
.lovasok-scard:focus-visible {
    background-color: transparent;
    color: inherit;
    outline: none;
    box-shadow: none;
}

.lovasok-scard:hover { background-color: #f9fafb; }          /* gray-50 */
.lovasok-scard--hf:hover { background-color: #eef2ff; }      /* indigo-50 */
.lovasok-scard--rem:hover { background-color: #fff7ed; }     /* orange-50 */

.lovasok-scard.is-active { background-color: #f9fafb; }      /* gray-50 */
.lovasok-scard--hf.is-active { background-color: #eef2ff; }  /* indigo-50 */

/* ===========================
   GeneratePress zöld gomb-fókusz kizárása (ghost gombokon)
   A GP a <button>-öket :focus alatt sötétzöldre + fehér szövegűre teszi, így
   kattintás után a gomb (pl. „Műveletek") zöldben ragad. Hoveren a Tailwind
   tint már felülírja a GP-t, tehát csak a :focus a gond.
   Csak a világos gombokat érintjük (nincs rajtuk text-white); a színes
   submit gombokat (kék/emerald) és a saját aktív állapotú .lovasok-scard-ot
   kihagyjuk.
   =========================== */
.lovasok-dashboard button:not(.lovasok-scard):not([class*="text-white"]):focus {
    background-color: transparent;
    color: inherit;
}

/* ===========================
   Méneskezelő tábla: a „Műveletek" legördülő ne vágódjon le
   Mobilon kell a vízszintes görgetés (overflow-x-auto), ami viszont függőlegesen
   is elvágja az abszolút pozicionált legördülőt. Asztali nézetben (a tábla elfér)
   engedjük ki az overflow-t, hogy a menü kilóghasson.
   =========================== */
@media (min-width: 1024px) {
    .lovasok-stable-table,
    .lovasok-stable-scroll {
        overflow: visible;
    }
}