/* Responsive */
@media (max-width: 768px) {

    #detail-modal .table-header-notes,
    #detail-modal .item-notes-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #detail-modal .table-header-notes {
        display: none;
    }

    #detail-modal .item-notes-row {
        border: 1px solid var(--bs-border-color, #e5e7eb);
        border-radius: 8px;
        margin-bottom: 8px;
    }

    #detail-modal .item-notes::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 8px;
    }
}

/* Responsive */
@media (max-width: 480px) {
    #detail-modal .notes-card-title {
        font: normal normal 600 var(--s-16);
    }

    #detail-modal .notes-card-subtitle {
        font: normal normal 400 var(--s-13);
    }

    #detail-modal .loyalty-tier-badge {
        font-size: var(--s-16);
        padding: var(--px-4) var(--px-14);
    }

    #detail-modal .loyalty-points-value {
        font-size: var(--s-32);
    }

    #detail-modal .loyalty-stat-value,
    #detail-modal .loyalty-referral-stat-value {
        font-size: var(--s-24);
    }

    #detail-modal .loyalty-review-number {
        font-size: var(--s-38);
    }
}

@media (max-width: 639px) {
    #detail-modal .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--px-24);
    }

    #detail-modal .avatar {
        width: var(--px-72);
        height: var(--px-72);
        font: normal normal 600 var(--s-20);
    }

    #detail-modal .user-details h2 {
        font-size: var(--px-20);
    }

    #detail-modal .user-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--px-8);
    }

    #detail-modal .notes-card-header {
        padding: var(--px-12) var(--px-16);
    }

    #detail-modal .notes-card-body {
        padding: var(--px-16);
    }

    #detail-modal .notes-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #detail-modal .notes-btn-primary {
        margin-left: 0;
        width: 100%;
    }

    #detail-modal .notes-tags-grid {
        gap: var(--px-8);
    }

    #detail-modal .notes-tag-btn {
        font: normal normal 500 var(--s-13);
        padding: var(--px-4) var(--px-10);
    }

    #detail-modal ._clients_header {
        padding: 0 var(--px-16);
    }

    #detail-modal .back-button {
        padding: 0;
    }
}

@media (min-width: 640px) {
    #detail-modal .avatar {
        width: var(--px-88);
        height: var(--px-88);
    }

    #detail-modal .history-financial-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .wallet-transactions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .membership-balance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    #detail-modal .profile-body {
        padding: var(--px-12) var(--px-16);
    }

    #detail-modal .profile-body .tab-panel.active.profile {
        gap: var(--px-12);
    }

    #detail-modal .profile-body .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    #detail-modal .profile-body .form-full-width {
        grid-column: 1 / -1;
    }

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

    #detail-modal .beauty-profile-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .safety-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .safety-toggles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .history-financial-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    #detail-modal .history-stats-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    #detail-modal .history-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .wallet-transactions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .membership-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .membership-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    #detail-modal .membership-balance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #detail-modal .loyalty-card-header {
        padding: var(--px-12) var(--px-16);
    }

    #detail-modal .loyalty-card-body {
        padding: var(--px-16);
    }

    #detail-modal .loyalty-overview-header {
        flex-direction: column;
    }

    #detail-modal .loyalty-points-display {
        text-align: left;
        width: 100%;
    }

    #detail-modal .loyalty-stats-row,
    #detail-modal .loyalty-referral-stats {
        /*grid-template-columns: 1fr;*/
        gap: var(--px-12);
    }

    #detail-modal .loyalty-stat-box,
    #detail-modal .loyalty-referral-stat {
        padding: var(--px-12);
        background-color: var(--bs-header-cart);
        border-radius: var(--px-8);
    }

    #detail-modal .loyalty-rewards-grid {
        grid-template-columns: 1fr;
    }

    #detail-modal .loyalty-review-overview {
        flex-direction: column;
    }

    #detail-modal .loyalty-form-grid {
        grid-template-columns: 1fr;
    }

    #detail-modal .loyalty-action-buttons {
        flex-direction: column;
        width: 100%;
    }

    #detail-modal .loyalty-btn {
        width: 100%;
    }

    #detail-modal .loyalty-referral-content {
        flex-direction: column;
        align-items: flex-start;
    }

    #detail-modal .loyalty-referral-actions {
        width: 100%;
    }

    #detail-modal .loyalty-referral-actions .loyalty-btn {
        flex: 1;
    }

    /* new mobile */
    #detail-modal .clients-sidebar {
        max-width: 100%;
    }

    #detail-modal .profile-header {
        padding: var(--px-12) var(--px-12) 0 var(--px-12);
        overflow: hidden;
    }

    #detail-modal .profile-header .header-content {
        flex-direction: row;
    }

    #detail-modal .profile-body {
        padding: var(--px-8);
    }

    #detail-modal .preferences-content {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    #detail-modal .history-container {
        gap: var(--px-12);
    }

    #detail-modal .history-stats-grid {
        gap: var(--px-8);
    }

    #detail-modal .tabs-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        min-width: auto;
    }

    #detail-modal .tabs-container::-webkit-scrollbar {
        display: none;
    }

    #detail-modal .tab-button {
        flex-shrink: 0;
    }
}

@media (min-width: 1024px) {
    #detail-modal .notes-history-card {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1280px) {
    #detail-modal .beauty-profile-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #detail-modal .safety-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}