/* ============================================
   Responsive CSS - Media Queries
   Enhanced with Tailwind utilities support
   ============================================
   NOTE: Main content margin/width is handled by unified-layout.css
   This file only adjusts padding and component-specific styles
   ============================================ */

/* Desktop Large - Enhanced with responsive spacing */
@media (min-width: 1025px) {
    .actions-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--gap-lg) !important;
    }

    /* Use responsive spacing variables */
    .main-content,
    .main-content-section {
        padding: 0 !important;
    }
}

/* Tablet - Enhanced with responsive spacing */
/* NOTE: Main content margin/width is handled by unified-layout.css for consistency */
@media (max-width: 1024px) {
    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-md);
    }

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

    /* Main content margin/width handled by unified-layout.css */
    /* Only adjust padding here */
    .main-content {
        padding: 0 !important;
    }

    .main-content-section {
        padding: 10px !important;
        overflow-x: hidden !important;
    }

    .sidebar {
        width: 70px;
    }

    /* CRITICAL FIX: Hide brand text on tablet (sidebar is 70px) */
    .sidebar .brand-text {
        display: none !important;
    }

    .sidebar .brand-container {
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .action-btn {
        padding: 12px;
        min-height: 90px;
    }

    .action-btn i {
        font-size: 1.2rem;
    }
}

/* Mobile - Enhanced with responsive spacing and Tailwind support */
@media (max-width: 768px) {

    /* Mobile Menu Toggle - HANDLED BY UNIFIED-LAYOUT.CSS */
    /* Old styles removed to prevent conflicts */

    /* Off-Canvas Sidebar */
    .sidebar {
        position: fixed;
        top: 0;
        inset-inline-end: -320px;
        /* Start off-screen (RTL) */
        width: 300px;
        /* Slightly narrower for mobile */
        height: 100vh;
        z-index: 1200;
        /* Topmost */
        transition: inset-inline-end 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        /* No shadow when hidden */
        transform: none !important;
        /* Reset transforms */
        display: flex !important;
        flex-direction: column;
        background: var(--bg-sidebar);
        visibility: hidden;
        /* Hide checks */
        overflow-y: auto;
        /* Enable vertical scrolling */
        overflow-x: hidden;
        padding-bottom: 80px;
        /* Space for bottom content */
    }

    /* LTR override for sidebar */
    [dir="ltr"] .sidebar {
        inset-inline-start: -320px;
        inset-inline-end: auto;
        transition: inset-inline-start 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Ensure nav items don't overflow horizontally */
    .sidebar .nav-item,
    .sidebar .nav-group {
        width: 100%;
        box-sizing: border-box;
    }

    /* Active State (Class added to BODY or Sidebar) */
    .sidebar.mobile-active {
        inset-inline-end: 0;
        visibility: visible;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    }

    /* LTR override for active sidebar */
    [dir="ltr"] .sidebar.mobile-active {
        inset-inline-start: 0;
        inset-inline-end: auto;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);
    }

    /* Overlay */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1150;
        /* Between content and sidebar */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Reset Mobile Icons Mode */
    .sidebar.mobile-icons {
        width: 300px;
        /* Force full width on mobile when active */
        transform: none;
    }

    /* Main content margin/width handled by unified-layout.css */
    /* Only adjust padding and spacing here */
    .main-content {
        padding: var(--spacing-md) !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Main content sections margin/width handled by unified-layout.css */
    /* Only adjust padding and positioning here */
    .main-content-section,
    .main-content-section.active,
    #competitorsSection.active,
    #settingsSection.active,
    #keywordsSection.active,
    #keyword_researchSection.active,
    #backlink_analysisSection.active,
    #analyticsSection.active,
    #integrationsSection.active,
    #thin_content_fixerSection.active,
    #internal_linkingSection.active,
    #competitor_gapSection.active {
        padding: 10px !important;
        overflow-x: hidden !important;
        z-index: 1000 !important;
    }

    .header {
        flex-direction: column;
        gap: 15px;
        padding: 15px 20px;
    }

    /* Site controls styles are in dashboard.html - do not override */

    /* Only make select full width if it's not inside site-controls */
    select:not(.site-select):not(#siteSelect) {
        min-width: 100%;
        width: 100%;
    }

    .grid-stats,
    .actions-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
    }

    .pilot-btn {
        font-size: 0.95rem;
        padding: 12px 16px;
    }

    .action-btn {
        padding: 14px;
        min-height: 100px;
    }

    .action-btn i {
        font-size: 1.4rem;
    }

    .action-btn h4 {
        font-size: 0.9rem;
    }

    .action-btn p {
        font-size: 0.7rem;
    }

    .stat-card {
        padding: 18px;
    }

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

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

    table {
        min-width: 600px;
    }
}

/* Mobile Small - Enhanced with responsive spacing */
@media (max-width: 480px) {
    .pilot-btn-container {
        flex-direction: column;
        gap: var(--gap-xs);
    }

    /* Main content margin/width handled by unified-layout.css */
    /* Only adjust padding here */
    .main-content {
        padding: var(--spacing-sm) !important;
    }

    .main-content-section {
        padding: var(--spacing-sm) !important;
    }

    .header {
        padding: 12px 15px;
    }

    .header-title h2 {
        font-size: 1.2rem;
    }

    .header-title p {
        font-size: 0.8rem;
    }

    .pilot-btn {
        font-size: 0.85rem;
        padding: 10px 14px;
    }

    .action-btn {
        padding: 12px;
        min-height: 90px;
    }

    .action-btn i {
        font-size: 1.2rem;
    }

    .action-btn h4 {
        font-size: 0.85rem;
    }

    .action-btn p {
        font-size: 0.65rem;
    }

    .stat-card {
        padding: 15px;
    }

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

    .nav-item {
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    .nav-item i {
        font-size: 1rem;
        width: 20px;
    }

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

    table {
        font-size: 0.85rem;
    }
}

/* Hide nav-item-menu on desktop */
@media (min-width: 769px) {
    .nav-item-menu {
        display: none !important;
    }
}

/* ============================================
   Responsive Styles for New Features
   ============================================ */

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .new-feature-container {
        padding: 15px;
    }

    .new-feature-card {
        padding: 20px;
        border-radius: 12px;
    }

    .feature-section-title {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }

    .feature-section-title i {
        font-size: 1.2rem;
    }

    .responsive-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .metric-card {
        padding: 15px;
    }

    .metric-card-value {
        font-size: 1.8rem;
    }

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

    .new-feature-button {
        padding: 12px;
        font-size: 0.95rem;
    }

    .feature-form-group {
        margin-bottom: 20px;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .new-feature-container {
        padding: 25px;
    }

    .new-feature-card {
        padding: 25px;
    }

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

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

    .metric-card-value {
        font-size: 1.9rem;
    }

    .stat-value {
        font-size: 2.2rem;
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
    .new-feature-container {
        padding: 30px;
    }

    .responsive-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

    .new-feature-card:hover {
        transform: translateY(-5px);
    }

    .metric-card:hover {
        transform: translateY(-5px);
    }
}