/* KasiTrade Responsive Styles */

/* Mobile (default: < 576px) */
@media (max-width: 575.98px) {
    .container { padding-left: 12px; padding-right: 12px; }

    .filter-bar .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .filter-bar .btn-group .btn {
        border-radius: 0;
        margin-bottom: -1px;
    }

    .filter-bar .btn-group .btn:first-child { border-radius: 0.375rem 0.375rem 0 0; }
    .filter-bar .btn-group .btn:last-child { border-radius: 0 0 0.375rem 0.375rem; margin-bottom: 0; }

    .listing-card .card-title { font-size: 1.1rem; }
    .listing-card .h5 { font-size: 1.25rem; }

    .btn { width: 100%; margin-bottom: 0.5rem; }
    .btn:last-child { margin-bottom: 0; }

    .navbar-collapse {
        background: var(--kasitrade-primary);
        padding: 1rem;
        border-radius: 0 0 12px 12px;
    }

    .d-mobile-none { display: none !important; }

    /* Admin sidebar becomes top nav on mobile */
    .admin-sidebar {
        position: relative;
        width: 100%;
        min-height: auto;
    }

    .admin-main { margin-left: 0; }

    .admin-layout { flex-direction: column; }
}

/* Tablet (576px - 991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .container { max-width: 720px; }

    .listings-grid { grid-template-columns: repeat(2, 1fr); }

    .form-row { display: flex; gap: 1rem; }
    .form-row > .form-group { flex: 1; }

    .navbar-expand-lg .navbar-nav { gap: 0.5rem; }

    .admin-sidebar { width: 200px; }
    .admin-main { margin-left: 200px; }
}

/* Desktop (>= 992px) */
@media (min-width: 992px) {
    .container { max-width: 1140px; }

    .listings-grid { grid-template-columns: repeat(4, 1fr); }

    .listing-card:hover { transform: translateY(-8px); }

    .admin-layout { display: grid; grid-template-columns: 250px 1fr; }

    .admin-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .dropdown:hover .dropdown-menu { display: block; }
}

/* Large Desktop (>= 1200px) */
@media (min-width: 1200px) {
    .container { max-width: 1320px; }
    .listings-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Landscape */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar { position: relative; }
    .hero-section { min-height: auto; padding: 2rem 0; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --kasitrade-light: #1a1a1a;
        --kasitrade-dark: #020202;
    }

    body { background-color: #ffffff; color: #000000; }
    .card { background-color: #a4a4a472; border-color: #333; }
    .form-control, .form-select { background-color: #ffffff; border-color: #444; color: #000000; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}