/* Admin Panel Responsive Styles */

/* Base Admin Styles */
.admin-page {
    padding: 1rem;
}

/* Grid Responsive Behavior */
.grid {
    display: grid;
    gap: 1.5rem;
}

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

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

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

/* Card Improvements */
.card {
    overflow: visible;
}

/* Table Responsive Wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 600px;
}

/* Form Grid Responsive */
.form-grid {
    display: grid;
    gap: 1rem;
}

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

/* Stats Cards in Analytics */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* Content Grid (Two Column) */
.content-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Tablet Styles (768px and below) */
@media (max-width: 768px) {
    /* Header adjustments */
    .section {
        padding-top: 2rem !important;
    }

    /* Grid columns reduce */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .content-grid-2 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Form grids stack */
    .form-grid-2 {
        grid-template-columns: 1fr;
    }

    /* Headers and titles */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    /* Buttons in flex containers */
    .btn-group,
    [style*="display: flex; gap"] {
        flex-wrap: wrap;
    }

    /* Card content spacing */
    .card {
        padding: 1.25rem;
    }

    /* Table cells */
    table {
        font-size: 0.875rem;
    }

    table th,
    table td {
        padding: 0.75rem !important;
    }

    /* Action buttons in tables */
    .btn-sm {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }

    /* Analytics stat cards */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Header flex items */
    div[style*="display: flex; justify-content: space-between"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    div[style*="display: flex; justify-content: space-between"] > * {
        width: 100%;
    }

    div[style*="display: flex; justify-content: space-between"] .btn {
        width: 100%;
        text-align: center;
    }
}

/* Mobile Styles (480px and below) */
@media (max-width: 480px) {
    /* Container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* All grids become single column */
    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Reduce font sizes */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.125rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    /* Card padding */
    .card {
        padding: 1rem;
    }

    /* Button sizes */
    .btn {
        width: 100%;
        padding: 0.75rem 1rem;
    }

    .btn-sm {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    /* Quick actions */
    div[style*="display: flex; gap: 1rem; flex-wrap: wrap"] {
        flex-direction: column;
    }

    div[style*="display: flex; gap: 1rem; flex-wrap: wrap"] .btn {
        width: 100%;
    }

    /* Form inputs */
    .form-input,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Table actions - stack buttons */
    table td div[style*="display: flex"] {
        flex-direction: column;
        gap: 0.5rem;
    }

    table td .btn {
        width: 100%;
    }

    /* Icon + Text headers */
    div[style*="display: flex; align-items: center; gap: 1rem"] h1 {
        font-size: 1.5rem !important;
    }

    /* Hide icon containers on very small screens to save space */
    div[style*="display: flex; align-items: center; gap: 1rem"] > div[style*="width: 50px"] {
        width: 40px;
        height: 40px;
    }

    div[style*="display: flex; align-items: center; gap: 1rem"] > div[style*="width: 50px"] svg {
        width: 20px;
        height: 20px;
    }

    /* Stats numbers */
    .card p[style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
    }

    /* Analytics charts */
    div[style*="height: 200px"] {
        height: 150px !important;
    }

    /* Most viewed content items */
    div[style*="display: flex; justify-content: space-between; align-items: start"] {
        flex-direction: column;
        align-items: flex-start !important;
    }

    div[style*="flex-shrink: 0; text-align: center; min-width: 60px"] {
        margin-top: 0.5rem;
    }
}

/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }

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

/* Utility Classes for Responsive */
.mobile-hidden {
    display: none;
}

@media (min-width: 769px) {
    .mobile-hidden {
        display: block;
    }
    
    .desktop-hidden {
        display: none;
    }
}

/* Print Styles */
@media print {
    .btn,
    nav,
    .navbar {
        display: none !important;
    }

    .card {
        break-inside: avoid;
    }

    body {
        font-size: 12pt;
    }
}

/* Improved Scrollbar for Tables */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--color-gray-light);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-gray-muted);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* Form Responsive Improvements */
@media (max-width: 768px) {
    /* Multi-column form layouts become single column */
    div[style*="grid-template-columns: 1fr 1fr"] {
        display: block !important;
    }

    div[style*="grid-template-columns: 1fr 1fr"] > * {
        margin-bottom: 1rem;
    }

    /* Filter forms stack */
    form[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column;
    }

    form[style*="grid-template-columns"] .form-group {
        margin-bottom: 1rem;
    }

    form[style*="grid-template-columns"] button {
        width: 100%;
    }
}

/* Dashboard Card Icons Responsive */
@media (max-width: 480px) {
    .card div[style*="width: 40px; height: 40px"] {
        width: 35px;
        height: 35px;
    }

    .card div[style*="width: 40px; height: 40px"] svg {
        width: 20px;
        height: 20px;
    }
}

/* Ensure long URLs or emails don't break layout */
td {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Pagination responsive */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

/* Toast/Alert messages on mobile */
@media (max-width: 480px) {
    div[style*="padding: 1rem; background: #d1fae5"],
    div[style*="padding: 1rem; background: #fee2e2"] {
        font-size: 0.875rem;
        padding: 0.75rem !important;
    }
}