/* =========================================================
   GLOBAL RESPONSIVE SYSTEM
   ========================================================= */

/* ===== ANIMATIONS ===== */
@keyframes notificationSlide {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes modalAppear {
    from { opacity: 0; transform: translateY(-50px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== LARGE SCREENS ===== */
@media (max-width: 1400px) {
    .quick-stats {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {

    .container {
        max-width: 100%;
        padding: var(--ca-spacing-lg);
    }

    header {
        gap: var(--ca-spacing-md);
    }

    .main-nav > ul {
        flex-wrap: wrap;
        gap: var(--ca-spacing-md);
    }

    .quick-stats {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .stat-card {
        min-height: auto;
        padding: var(--ca-spacing-xl);
    }

    .stat-card p {
        font-size: 3rem;
    }

    .banners-table th,
    .banners-table td {
        padding: var(--ca-spacing-md);
    }

    .form-container,
    .banner-form {
        max-width: 100%;
    }
}

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

    .container {
        padding: var(--ca-spacing-md);
    }

    header {
        flex-direction: column;
        gap: var(--ca-spacing-md);
        padding: var(--ca-spacing-lg);
        text-align: center;
    }

    header h1 {
        max-width: 100%;
        font-size: 1.8rem;
    }

    .user-menu {
        flex-direction: column;
        width: 100%;
    }

    .page-header,
    .page-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ca-spacing-sm);
        text-align: center;
    }

    .page-title {
        font-size: 1.75rem;
    }

    .btn,
    .btn-sm {
        width: 100%;
        justify-content: center;
    }

    .nav-list {
        flex-direction: column;
        gap: var(--ca-spacing-xs);
    }

    .nav-link {
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: var(--ca-spacing-md);
        text-align: center;
    }

    .dashboard {
        padding: var(--ca-spacing-lg);
    }

    .quick-stats {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: var(--ca-spacing-lg);
    }

    .stat-card h3 {
        font-size: 0.9rem;
    }

    .stat-card p {
        font-size: 2rem;
    }

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

    .banners-table {
        display: block;
        min-width: 700px;
        overflow-x: auto;
    }

    .banners-table th,
    .banners-table td {
        padding: var(--ca-spacing-md);
        white-space: nowrap;
    }

    .current-image-card,
    .file-preview-card {
        flex-direction: column;
        text-align: center;
        gap: var(--ca-spacing-md);
    }

    .file-upload-design {
        padding: var(--ca-spacing-lg);
    }

    .modal-content {
        width: 95%;
        margin: 8% auto;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer button {
        width: 100%;
    }

    .actions-cell {
        flex-direction: column;
        gap: var(--ca-spacing-xs);
    }

    .actions-cell .btn {
        width: 100%;
        min-width: auto;
    }

    .form-container,
    .banner-form,
    .auth-container {
        padding: var(--ca-spacing-lg);
    }

    .form-group {
        margin-bottom: var(--ca-spacing-lg);
    }
}

/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {

    body {
        font-size: 14px;
    }

    .container {
        padding: var(--ca-spacing-sm);
    }

    .page-title {
        font-size: 1.5rem;
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }

    .banners-table th,
    .banners-table td {
        padding: var(--ca-spacing-sm);
        font-size: 13px;
    }

    .table-image {
        width: 44px;
        height: 44px;
    }

    .stat-card {
        padding: var(--ca-spacing-md);
    }

    .stat-card p {
        font-size: 1.8rem;
    }

    .form-control {
        padding: var(--ca-spacing-sm) var(--ca-spacing-md);
    }
}

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

    .btn,
    .main-nav,
    .actions-cell,
    .page-actions,
    .modal {
        display: none !important;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    .banners-table {
        box-shadow: none;
        border: 1px solid var(--ca-color-gray-400);
    }

    table {
        font-size: 12px;
    }
}