.app-card {
    box-shadow: var(--shadow-base);
    border-radius: var(--radius-md);
}

.stat-card-row {
    font-size: 13px;
}

.apps-table td[data-label="App"] > div,
.promoting-table td[data-label="App"] > div,
.messaging-table td[data-label="Campaign"] > div:not(.small) {
    font-weight: var(--font-weight-normal);
}

/* Info Section */
.app-icon-wrapper {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 1/1;
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-icon-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-icon-preview.no-image {
    width: 32% !important;
    max-width: 80px !important;
    height: auto !important;
    object-fit: contain;
}

.app-icon-preview.edit-mode {
    opacity: 0.5;
}

.info-content {
    font-size: var(--font-size-sm);
}

.info-label {
    width: 140px;
    flex-shrink: 0;
}

.info-content {
    word-break: break-word;
}

.trend-icon {
    width: var(--spacing-sm);
}

/* Add App Modal */
.image-preview-wrapper {
    width: 125px;
    height: 125px;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--color-gray-100);
}

.app-image-input {
    display: none;
}

.btn-choose-file {
    width: 125px;
}

.store-radio-option {
    cursor: pointer;
}

.store-radio-label {
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.store-icon-app-store {
    width: 18px;
    pointer-events: none;
    margin-bottom: 3px;
}

.store-icon-google-play {
    width: 14px;
    pointer-events: none;
}

.store-label {
    display: inline;
}

.app-store-icon,
.store-icon,
.store-icon-lg {
    max-width: 18px !important;
    margin-bottom: 3px !important;
}

.info-content .store-icon {
    margin-left: -3px !important;
}

.google-play-icon,
.store-icon-google,
.store-icon-sm {
    max-width: 14px !important;
    margin-bottom: 0px !important;
}

.table-cell-store .google-play-icon,
.table-cell-store .store-icon-google {
    margin-left: 2px;
    padding-left: 0.2px;
}

.edit-btn-group {
    gap: 12px;
}

.choose-file-btn {
    max-width: 250px;
    border-radius: 8px;
}

/* Installed Users Section */
.stat-small-card h6 {
    font-size: var(--font-size-sm) !important;
}

.stat-small-card h4 {
    font-size: var(--font-size-lg) !important;
}

.installed-users-hr {
    border-color: var(--color-gray-150);
    opacity: 1;
}

.installed-users-table {
    border-bottom: 1px solid var(--color-gray-150);
}

.installed-users-table td {
    padding: var(--spacing-md) !important;
}

.store-warning-text {
    font-size: var(--font-size-sm);
}

.settings-form-group {
    max-width: 300px;
}

.promoting-apps-table {
    max-height: 415px;
    overflow-y: auto;
}

.promoting-apps-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-white);
}

.checkbox-column {
    width: 40px;
}

.table-scroll-container {
    max-height: 358px;
    overflow-y: auto;
}

.table-scroll-container thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}

@media (max-width: 768px) {
    .apps-table td[data-label="App"] > div,
    .promoting-table td[data-label="App"] > div,
    .messaging-table td[data-label="Campaign"] > div:not(.small) {
        font-weight: var(--font-weight-semibold);
    }

    .info-label {
        width: 125px;
    }

    .apps-table td[data-label="App"] {
        grid-column: span 2;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-dark);
        padding-right: 80px;
        margin-bottom: 4px;
    }

    .apps-table td[data-label="App"] .mobile-label {
        display: none;
    }

    .messaging-scroll-container {
        max-height: 480px;
    }

    .promoting-scroll-container {
        max-height: 650px;
    }

    .settings-form-group {
        max-width: 100% !important;
    }

    .app-card .card-body .d-flex.justify-content-between:has(.card-title) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px;
    }

    .app-card
        .card-body
        .d-flex.justify-content-between:has(.card-title)
        .btn-primary,
    .app-card
        .card-body
        .d-flex.justify-content-between:has(.card-title)
        .edit-btn-group {
        width: 100%;
    }

    .store-selection-wrapper {
        flex-wrap: nowrap !important;
        gap: 24px !important;
    }

    .store-selection-wrapper .form-check {
        margin: 0 !important;
    }

    .edit-btn-group {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px;
    }

    .edit-btn-group .btn {
        flex: 1;
    }

    .app-card .custom-table tbody tr {
        position: relative !important;
        box-shadow: none !important;
        border: 1px solid var(--color-gray-200) !important;
    }

    .messaging-table td[data-label="Campaign"],
    .custom-table td[data-label="App"] {
        grid-column: span 2 !important;
        font-size: var(--font-size-sm);
        padding-right: 90px !important;
        margin-bottom: 8px;
    }

    .messaging-table td[data-label="Campaign"] .mobile-label {
        display: none !important;
    }

    .messaging-table td[data-label="Created"],
    .messaging-table td[data-label="Last Sent"],
    .messaging-table td[data-label="Total Sents"],
    .custom-table td[data-label="installs"],
    .custom-table td[data-label="impressions"],
    .custom-table td[data-label="clicks"],
    .custom-table td[data-label="skips"],
    .custom-table td[data-label="Cross-promoted on"] {
        grid-column: span 1;
    }

    .custom-table td[data-label="App"] {
        grid-column: span 2 !important;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        margin-bottom: 8px;
        padding-right: 90px !important;
        max-width: none !important;
        white-space: normal !important;
    }

    .custom-table td[data-label="Store"],
    .custom-table td[data-label="Cross-promoted on"] {
        grid-column: span 1 !important;
        margin-bottom: 12px;
    }

    .custom-table td[data-label="App"] .mobile-label,
    .custom-table td[data-label="Action"] .mobile-label {
        display: none !important;
    }

    .custom-table td[data-label="Action"] {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        flex-direction: row !important;
        width: auto !important;
        z-index: 10;
        margin: 0 !important;
    }

    .app-card .custom-table td[data-label="Action"] {
        top: 10px !important;
    }

    .messaging-table td[data-label="Campaign"] div,
    .messaging-table td[data-label="Campaign"] span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
    }

    .custom-table tbody tr.table-empty-row {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        text-align: center;
        padding: 20px !important;
        border: 1px solid var(--color-gray-200) !important;
        background: var(--color-white) !important;
        border-radius: var(--radius-md);
        margin: 0 0 16px 0 !important;
    }

    .custom-table tbody tr.table-empty-row td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        color: var(--color-gray-550);
        background: transparent !important;
    }

    .installed-users-table .table-empty-row {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        text-align: center !important;
    }

    .installed-users-table .table-empty-row td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    .stat-small-card .card-body .d-flex.justify-content-between {
        flex-direction: row !important;
        align-items: center !important;
    }

    .app-icon-wrapper {
        max-width: 100% !important;
    }

    .app-icon-preview.no-image {
        width: 120px !important;
        max-width: 120px !important;
    }

    .choose-file-btn {
        max-width: 100% !important;
    }

    #info-edit .info-content .row {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 16px !important;
    }

    #info-edit .info-label {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    #info-edit .info-content .col {
        width: 100% !important;
    }

    #info-edit .info-content .col.d-flex.align-items-center {
        flex-wrap: wrap;
        gap: 12px;
    }

    .promoting-apps-table {
        border: none !important;
    }

    .promoting-apps-table .custom-table {
        background: transparent !important;
    }

    .modal-container .custom-table td[data-label="Select"] {
        position: absolute !important;
        top: 18px !important;
        left: 16px !important;
        width: auto !important;
        z-index: 10;
        padding: 0 !important;
    }

    .modal-container .custom-table td[data-label="Select"] .form-check {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    .modal-container .custom-table td[data-label="Select"] .form-check-input {
        margin: 0 !important;
    }

    .modal-container .custom-table td[data-label="Select"] .mobile-label,
    .modal-container .custom-table td[data-label="App"] .mobile-label {
        display: none !important;
    }

    .modal-container .custom-table td[data-label="App"] {
        padding-left: 36px !important;
        margin-bottom: 12px;
        font-size: var(--font-size-sm);
        width: 100% !important;
        max-width: none !important;
        grid-column: span 2 !important;
        white-space: normal !important;
    }

    .modal-container .custom-table td[data-label="App"] > div {
        font-weight: var(--font-weight-semibold) !important;
    }
}
@media (max-width: 480px) {
    .store-label {
        display: block !important;
    }
}