/* ============================================================
   Teymensel Support — Responsive CSS
   Mobile-First Breakpoints
   ============================================================ */

/* ============================================================
   BASE (320px+) — Mobile First
   ============================================================ */

/* Sidebar is hidden by default on mobile */
.app-sidebar {
  transform: translateX(-100%);
  z-index: 300;
}

.app-sidebar.mobile-open {
  transform: translateX(0);
  box-shadow: 4px 0 60px rgba(0,0,0,0.9);
}

.app-content {
  margin-left: 0 !important;
}

/* Mobile overlay when sidebar is open */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 299;
  backdrop-filter: blur(4px);
}

.sidebar-overlay.active { display: block; }

/* Mobile adjustments */
.app-main {
  padding: var(--space-4);
}

.hero-section {
  padding: var(--space-6) var(--space-5);
}

.auth-card {
  padding: var(--space-8) var(--space-5);
}

.grid-2, .grid-3, .grid-4 {
  grid-template-columns: 1fr;
}

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

.page-title {
  font-size: 22px;
}

.stat-card-value {
  font-size: 26px;
}

/* Hide text labels in sidebar when collapsed on mobile */
.sidebar-collapsed .sidebar-logo-text,
.sidebar-collapsed .sidebar-item-text,
.sidebar-collapsed .sidebar-section-label,
.sidebar-collapsed .sidebar-item-badge {
  opacity: 0;
  width: 0;
}

/* Command palette mobile */
.command-palette {
  max-width: calc(100vw - 32px);
  margin: 0 var(--space-4);
}

.command-overlay {
  padding-top: 8vh;
}

/* Chat mobile */
.chat-wrapper,
.ai-chat-wrapper {
  height: calc(100vh - var(--topbar-height) - 32px);
}

/* Table mobile */
.table-wrapper {
  border-radius: var(--radius-lg);
}

/* Hide some columns on mobile */
.hide-mobile { display: none !important; }

/* Status mobile */
.uptime-bar .uptime-segment:nth-child(n+61) { display: none; }

/* ============================================================
   SM (480px+)
   ============================================================ */
@media (min-width: 480px) {
  .app-main {
    padding: var(--space-5);
  }
  
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
  
  .hero-section {
    padding: var(--space-8) var(--space-6);
  }
}

/* ============================================================
   MD (768px+) — Tablet
   ============================================================ */
@media (min-width: 768px) {
  /* Show sidebar */
  .app-sidebar {
    transform: translateX(0);
    width: var(--sidebar-collapsed);
  }

  .app-content {
    margin-left: var(--sidebar-collapsed) !important;
  }

  /* Sidebar section labels hidden when collapsed */
  .app-sidebar .sidebar-section-label,
  .app-sidebar .sidebar-item-text,
  .app-sidebar .sidebar-item-badge,
  .app-sidebar .sidebar-logo-text,
  .app-sidebar .sidebar-user-info {
    opacity: 0;
    overflow: hidden;
    max-width: 0;
  }

  .app-sidebar:hover {
    width: var(--sidebar-width);
    box-shadow: 4px 0 40px rgba(0,0,0,0.6);
  }

  .app-sidebar:hover .sidebar-section-label,
  .app-sidebar:hover .sidebar-item-text,
  .app-sidebar:hover .sidebar-item-badge,
  .app-sidebar:hover .sidebar-logo-text,
  .app-sidebar:hover .sidebar-user-info {
    opacity: 1;
    max-width: 200px;
  }

  .app-main {
    padding: var(--space-6);
  }

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

  .hide-mobile { display: initial !important; }

  .topbar-search {
    max-width: 320px;
  }

  .auth-card {
    padding: var(--space-10);
  }
}

/* ============================================================
   LG (1024px+) — Laptop
   ============================================================ */
@media (min-width: 1024px) {
  /* Pinned expanded sidebar */
  .app-sidebar {
    width: var(--sidebar-width);
  }

  .app-sidebar .sidebar-section-label,
  .app-sidebar .sidebar-item-text,
  .app-sidebar .sidebar-item-badge,
  .app-sidebar .sidebar-logo-text,
  .app-sidebar .sidebar-user-info {
    opacity: 1;
    max-width: 200px;
  }

  .app-content {
    margin-left: var(--sidebar-width) !important;
  }

  /* Collapsed state */
  .sidebar-collapsed .app-sidebar {
    width: var(--sidebar-collapsed);
  }

  .sidebar-collapsed .app-sidebar .sidebar-section-label,
  .sidebar-collapsed .app-sidebar .sidebar-item-text,
  .sidebar-collapsed .app-sidebar .sidebar-item-badge,
  .sidebar-collapsed .app-sidebar .sidebar-logo-text,
  .sidebar-collapsed .app-sidebar .sidebar-user-info {
    opacity: 0;
    max-width: 0;
  }

  .sidebar-collapsed .app-content {
    margin-left: var(--sidebar-collapsed) !important;
  }

  .app-main {
    padding: var(--space-6) var(--space-8);
  }

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

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

  .hero-section {
    padding: var(--space-10) var(--space-12);
  }

  .topbar-search {
    max-width: 440px;
  }
}

/* ============================================================
   XL (1280px+)
   ============================================================ */
@media (min-width: 1280px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .app-main {
    padding: var(--space-8) var(--space-10);
  }

  .topbar-search {
    max-width: 480px;
  }
}

/* ============================================================
   2XL (1440px+) — Full Desktop
   ============================================================ */
@media (min-width: 1440px) {
  .hero-section {
    padding: var(--space-12) var(--space-16);
  }

  .hero-title {
    font-size: 40px;
  }

  .page-title {
    font-size: 30px;
  }
}

/* ============================================================
   3XL (1920px+) — Ultrawide
   ============================================================ */
@media (min-width: 1920px) {
  :root {
    --content-max-width: 1600px;
  }

  .app-main {
    padding: var(--space-10) var(--space-16);
  }
}

/* ============================================================
   4K (2560px+)
   ============================================================ */
@media (min-width: 2560px) {
  :root {
    font-size: 18px;
    --content-max-width: 1920px;
  }
}

/* ============================================================
   LANDSCAPE MOBILE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .auth-card {
    padding: var(--space-6) var(--space-8);
  }

  .hero-section {
    padding: var(--space-5) var(--space-6);
  }

  .auth-blob { display: none; }
}

/* ============================================================
   FOLDABLE DEVICES
   ============================================================ */
@media (min-width: 560px) and (max-width: 720px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .app-sidebar,
  .app-topbar,
  .toast-container,
  .command-overlay,
  #particles-canvas,
  .aurora-bg {
    display: none !important;
  }

  .app-content {
    margin-left: 0 !important;
  }

  .app-main {
    padding: 0 !important;
  }

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

  .card {
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
}