/* 
 * Responsive CSS for URL Shortener
 * @package URLShortener
 * @version 1.0.0
 * @author Krujeen
 */

/* Mobile First Approach */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
    /* Container */
    .container {
        padding: 0 0.75rem;
    }

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .hero-content h2 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    /* Header */
    .header-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .nav {
        width: 100%;
        justify-content: center;
    }

    /* URL Form */
    .url-form .form-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .url-form .btn {
        width: 100%;
        justify-content: center;
    }

    .shortener-form {
        padding: 1.5rem;
    }

    /* Result Actions */
    .result-url {
        flex-direction: column;
        gap: 0.75rem;
    }

    .result-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .result-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-card {
        padding: 1.5rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    /* URL Items */
    .url-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .url-link {
        word-break: break-all;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Admin Sidebar - Hide on mobile */
    .admin-layout .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-layout.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0;
    }

    /* Mobile menu button */
    .mobile-menu-btn {
        display: block;
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1001;
        background: #667eea;
        color: white;
        border: none;
        border-radius: 0.5rem;
        padding: 0.75rem;
        cursor: pointer;
    }

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

    .pagination .btn {
        min-width: 2.5rem;
        padding: 0.5rem;
    }

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

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

    /* Action buttons stack on mobile */
    .action-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }

    .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Filters */
    .filters-form {
        flex-direction: column;
        gap: 0.75rem;
    }

    .filter-group {
        width: 100%;
    }

    .filter-input,
    .filter-select {
        width: 100%;
    }

    /* Modal */
    .modal-content {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }

    /* Notification positioning */
    .notification {
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Hero */
    .hero-content h2 {
        font-size: 2.5rem;
    }

    /* URL Form */
    .url-form .form-group {
        flex-direction: column;
        gap: 1rem;
    }

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

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

    /* Admin Layout */
    .admin-main {
        margin-left: 0;
        padding-top: 4rem;
    }

    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-layout.sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .mobile-menu-btn {
        display: block;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Features Grid */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Admin Layout */
    .admin-sidebar {
        width: 200px;
    }

    .admin-main {
        margin-left: 200px;
    }

    .mobile-menu-btn {
        display: none;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 992px) {
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Admin Layout */
    .admin-sidebar {
        width: 250px;
    }

    .admin-main {
        margin-left: 250px;
    }

    .mobile-menu-btn {
        display: none;
    }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}

/* Specific component responsive styles */

/* Dashboard cards on mobile */
@media (max-width: 767.98px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card {
        margin-bottom: 1.5rem;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .card-header .btn {
        width: 100%;
        justify-content: center;
    }
}

/* URL management table on mobile */
@media (max-width: 991.98px) {
    .admin-table th:nth-child(3),
    .admin-table td:nth-child(3),
    .admin-table th:nth-child(5),
    .admin-table td:nth-child(5) {
        display: none;
    }

    .url-cell .url-original {
        display: none;
    }

    .stats-cell {
        font-size: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .admin-table th:nth-child(4),
    .admin-table td:nth-child(4) {
        display: none;
    }

    .short-url-full {
        display: none;
    }

    .date-cell .time-text {
        display: none;
    }
}

/* Form responsive improvements */
@media (max-width: 575.98px) {
    .form-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .advanced-content .form-group {
        margin-bottom: 1rem;
    }
}

/* Charts responsive */
@media (max-width: 767.98px) {
    canvas {
        max-height: 250px !important;
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .admin-sidebar,
    .btn,
    .action-buttons,
    .pagination,
    .filters-section {
        display: none !important;
    }

    .admin-main {
        margin-left: 0 !important;
    }

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

    body {
        background: white !important;
        color: black !important;
    }

    .dashboard-card,
    .shortener-form {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1f2937;
        --bg-secondary: #374151;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --border-color: #4b5563;
    }

    /* Apply dark mode styles if needed */
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }

    .form-input {
        border-width: 2px;
    }

    .card,
    .dashboard-card,
    .shortener-form {
        border: 2px solid #000;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        margin-bottom: 2rem;
    }

    .hero-content h2 {
        font-size: 2rem;
    }

    .main {
        padding: 2rem 0;
    }

    .features {
        margin: 2rem 0;
    }
}