/* ============================================
   APP.CSS - MAIN CSS ENTRY POINT (UPDATED)
   Import all CSS files for Vite bundling
   ✅ Added mobile fixes
   ============================================ */

/* ===== BASE STYLES ===== */
@import './base/reset.css';
@import './base/variables.css';
@import './base/utilities.css';
@import './base/ui-improvements.css';
@import './base/mobile-improvements.css'; /* ✅ NEW */

/* ===== COMPONENTS ===== */
@import './components/navbar.css';
@import './components/footer.css';  
@import './components/buttons.css';
@import './components/alerts.css';
@import './components/dropdown.css';
 /* ✅ UPDATED - Replace old mobile-menu.css */
@import './components/branding.css';
@import './components/instagram-social-shares.css';

/* ===== SHARED STYLES ===== */
@import './shared/animations.css';
@import './shared/responsive.css';
@import './shared/themes.css';

/* ===== PAGE STYLES ===== */
@import './pages/home/home.css';
@import './pages/ads/myads.css';
@import './pages/legal.css';
@import './pages/developers.css';
@import './auth.css';
@import './create.css';
@import './show.css';

/* ===== GLOBAL STYLES FOR ALL PAGES ===== */
/* Styles yang apply ke semua halaman */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--color-bg-page, #f9fafb);
    color: var(--color-text-primary, #111827);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: var(--color-primary, #2563eb);
    color: white;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition, all 0.3s ease);
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-light, #f3f4f6);
}

::-webkit-scrollbar-thumb {
    background: var(--color-text-muted, #9ca3af);
    border-radius: var(--radius-lg, 0.75rem);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary, #6b7280);
}

/* Container Utilities */
.container {
    width: 100%;
    max-width: var(--container-max-width, 1280px);
    margin: 0 auto;
    padding: 0 var(--space-4, 1rem);
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Display Utilities */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-grid {
    display: grid !important;
}

/* Spacing Utilities */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: var(--space-1, 0.25rem) !important; }
.mt-2 { margin-top: var(--space-2, 0.5rem) !important; }
.mt-3 { margin-top: var(--space-3, 0.75rem) !important; }
.mt-4 { margin-top: var(--space-4, 1rem) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2, 0.5rem) !important; }
.mb-3 { margin-bottom: var(--space-3, 0.75rem) !important; }
.mb-4 { margin-bottom: var(--space-4, 1rem) !important; }

.p-0 { padding: 0 !important; }
.p-2 { padding: var(--space-2, 0.5rem) !important; }
.p-3 { padding: var(--space-3, 0.75rem) !important; }
.p-4 { padding: var(--space-4, 1rem) !important; }

/* Focus Styles */
*:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

button:focus,
a:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 2px;
}

/* Disable focus outline for mouse users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Loading State */
.loading {
    pointer-events: none;
    opacity: 0.6;
    cursor: wait;
}

/* Disabled State */
[disabled],
.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Card Base Styles */
.card {
    background: var(--color-bg-card, #ffffff);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.1));
    overflow: hidden;
    transition: var(--transition, all 0.3s ease);
}

.card:hover {
    box-shadow: var(--shadow-card-hover, 0 10px 15px rgba(0,0,0,0.1));
}

/* ===== MOBILE-SPECIFIC OVERRIDES ===== */
/* These load last to ensure they override any conflicting styles */
@media (max-width: 767px) {
  
  /* Ensure mobile fixes take priority */
  :root {
    --mobile-mode: true;
  }
  
  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
  
  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }
  
  .mobile-only.flex {
    display: flex !important;
  }
  
  .mobile-only.grid {
    display: grid !important;
  }
  
  /* Mobile container padding */
  .container {
    padding: 0 var(--space-3, 0.75rem);
  }
  
  /* Mobile typography */
  body {
    font-size: 0.9375rem; /* 15px */
  }
  
  /* Touch-friendly interactive elements */
  button,
  a[role="button"],
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-only {
    display: block !important;
  }
  
  .hide-on-tablet {
    display: none !important;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .hide-on-desktop {
    display: none !important;
  }
}

/* ===== NAVBAR FIX - Override Bootstrap Conflicts ===== */
/* IMPORTANT: Override Bootstrap yang bisa hide button */

/* Force show all buttons KECUALI menu toggle */
.navbar .btn-post,
.navbar .btn-auth,
.navbar .user-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
}

/* Nav actions container */
.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Navbar links */
.navbar .nav-link,
.navbar a {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Dropdown menu fix */
.navbar .dropdown-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.navbar .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ===== RESPONSIVE BEHAVIOR ===== */

/* MOBILE (< 992px) */
@media (max-width: 991px) {
    /* Menu toggle - VISIBLE on mobile/tablet */
    .menu-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* User menu - HIDDEN on mobile/tablet */
    .user-menu {
        display: none !important;
    }
    
    /* Mobile menu overlay - Can be shown */
    .mobile-menu-overlay {
        display: flex !important;
    }
    
    .mobile-menu-backdrop {
        display: block !important;
    }
}

/* DESKTOP (>= 992px) */
@media (min-width: 992px) {
    /* Menu toggle - HIDDEN on desktop */
    .menu-toggle {
        display: none !important;
    }
    
    /* User menu - VISIBLE on desktop */
    .user-menu {
        display: flex !important;
        position: relative !important;
    }
    
    .user-trigger {
        display: inline-flex !important;
    }
    
    /* Mobile menu overlay - HIDDEN on desktop */
    .mobile-menu-overlay {
        display: none !important;
    }
    
    .mobile-menu-backdrop {
        display: none !important;
    }
}

/* Ensure navbar items are visible on all breakpoints */
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: flex !important;
        visibility: visible !important;
    }
    
    .navbar .navbar-nav .nav-item {
        display: flex !important;
        visibility: visible !important;
    }
}

/* Bootstrap collapse override */
@media (max-width: 767px) {
    .navbar .navbar-collapse {
        display: none;
    }
    
    .navbar .navbar-collapse.show {
        display: block !important;
        visibility: visible !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
  body {
    background: white;
    color: black;
  }
  
  .no-print {
    display: none !important;
  }
  
  a {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

/* ===== END OF APP.CSS ===== */