/* ===================== KUKALA — RESPONSIVE ===================== */

/* ===================== MOBILE: ≤ 480px ===================== */
@media (max-width: 480px) {
    nav {
        padding: 0 16px;
        height: 56px;
    }

    .nav-logo {
        font-size: 22px;
    }

    .nav-btn {
        font-size: 9px;
        padding: 6px 10px;
    }

    #signin-nav-btn,
    #join-nav-btn {
        display: none;
    }

    .search-bar-wrap {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }

    .search-input-wrap {
        max-width: 100%;
    }

    .sort-select {
        width: 100%;
    }

    .cat-nav-wrap {
        top: 56px;
    }

    .cat-pill {
        padding: 12px 12px;
        font-size: 9px;
    }

    .refresh-badge {
        display: flex;
        border-left: none;
        padding-left: 0;
        margin-top: 4px;
        justify-content: center;
    }

    .art-grid {
        columns: 2;
        gap: 8px;
        column-gap: 8px;
    }

    .grid-section {
        padding: 16px 12px 60px;
    }

    .profile-tab-content {
        padding: 0 12px;
    }

    .grid-title {
        font-size: 24px;
    }

    .grid-meta {
        font-size: 10px;
    }

    .inner-page {
        padding: 70px 16px 40px;
    }

    .ip-title {
        font-size: clamp(36px, 10vw, 56px);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .float-toolbar {
        bottom: 16px;
        padding: 4px 8px;
    }

    .ftool-btn {
        font-size: 9px;
        padding: 6px 10px;
    }

    .modal {
        padding: 24px;
        margin: 8px;
        max-width: calc(100vw - 16px);
    }

    .modal-title {
        font-size: 28px;
    }

    .art-detail-modal {
        grid-template-columns: 1fr;
        height: auto;
        max-height: 90vh;
    }

    .adm-img-side {
        height: 240px;
        border-radius: 8px 8px 0 0;
    }

    .adm-info-side {
        border-radius: 0 0 8px 8px;
        padding: 20px;
    }

    .adm-price {
        font-size: 32px;
    }

    .payment-methods {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .pm-chip {
        padding: 8px 4px;
        font-size: 8px;
    }

    .cta-title {
        font-size: clamp(36px, 12vw, 60px);
    }

    .cta-sub {
        font-size: 12px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Dashboard mobile */
    .dash-layout {
        flex-direction: column;
    }

    .dash-sidebar {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        padding: 0;
        z-index: 950;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-top: 2px solid var(--ember);
        scrollbar-width: none;
    }

    .dash-sidebar::-webkit-scrollbar {
        display: none;
    }

    .dash-avatar,
    .dash-name,
    .dash-role,
    .sidebar-label {
        display: none;
    }

    .sidebar-section {
        display: contents;
    }

    .sidebar-item {
        flex-direction: column;
        gap: 4px;
        padding: 10px 12px;
        white-space: nowrap;
        font-size: 8px;
        min-width: fit-content;
        justify-content: center;
        text-align: center;
    }

    .sidebar-item span:not(.si-icon) {
        display: block;
        font-size: 7px;
    }

    .sidebar-item .si-icon {
        font-size: 16px;
        width: auto;
    }

    .si-badge {
        margin-left: 0;
        position: absolute;
        top: 4px;
        right: 4px;
    }

    .dash-main {
        padding: 16px 12px 80px;
    }

    .dash-heading {
        font-size: 32px;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .kpi {
        padding: 14px;
    }

    .kpi-value {
        font-size: 28px;
    }

    .chart-grid {
        grid-template-columns: 1fr;
    }

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

    .form-row {
        grid-template-columns: 1fr;
    }

    .msg-layout {
        flex-direction: column;
        height: auto;
    }

    .msg-list {
        width: 100%;
        height: 200px;
    }

    .msg-chat {
        height: 350px;
    }

    .withdraw-card,
    .wallet-card {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .withdraw-amount,
    .wallet-balance {
        font-size: 40px;
    }

    .table-wrap {
        overflow-x: auto;
    }

    table {
        min-width: 600px;
    }

    .page-nav-dots {
        display: none;
    }

    .blog-list {
        grid-template-columns: 1fr;
    }

    .side-menu {
        width: 100%;
        right: -100%;
    }

    .side-menu.open {
        right: 0;
    }

    .dash-sidebar-toggle {
        display: none;
    }
}

/* ===================== TABLET: 481px — 768px ===================== */
@media (min-width: 481px) and (max-width: 768px) {
    .art-grid {
        columns: 3;
    }

    .inner-page {
        padding: 80px 24px 40px;
    }

    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .dash-sidebar {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        padding: 0;
        z-index: 950;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-top: 2px solid var(--ember);
        scrollbar-width: none;
    }

    .dash-sidebar::-webkit-scrollbar {
        display: none;
    }

    .dash-avatar,
    .dash-name,
    .dash-role,
    .sidebar-label {
        display: none;
    }

    .sidebar-section {
        display: contents;
    }

    .sidebar-item {
        flex-direction: column;
        gap: 4px;
        padding: 10px 14px;
        white-space: nowrap;
        font-size: 9px;
        justify-content: center;
        text-align: center;
    }

    .sidebar-item .si-icon {
        font-size: 16px;
        width: auto;
    }

    .dash-main {
        padding: 24px 20px 80px;
    }

    .chart-grid {
        grid-template-columns: 1fr;
    }

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

    .msg-layout {
        flex-direction: column;
        height: auto;
    }

    .msg-list {
        width: 100%;
        height: 200px;
    }

    .art-detail-modal {
        grid-template-columns: 1fr;
    }

    .adm-img-side {
        height: 300px;
        border-radius: 8px 8px 0 0;
    }

    .adm-info-side {
        border-radius: 0 0 8px 8px;
    }
}

/* ===================== SMALL DESKTOP: 769px — 1100px ===================== */
@media (min-width: 769px) and (max-width: 1100px) {
    .art-grid {
        columns: 4;
    }

    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===================== WIDESCREEN: 1440px+ ===================== */
@media (min-width: 1440px) {
    .art-grid {
        columns: 6;
    }

    .kpi-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-section {
        padding: 24px 40px 60px;
    }
}

/* ===================== PRINT ===================== */
@media print {

    nav,
    .float-toolbar,
    .side-menu,
    .side-menu-overlay,
    .toast,
    .page-nav-dots,
    .dash-sidebar {
        display: none !important;
    }

    .page {
        display: block !important;
    }

    .inner-page {
        display: block !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}