/* ============================================
   Obsidian Aurora — Mobile Responsive v3
   ============================================ */

/* Menu button base (hidden on desktop) */
.mobile-menu-toggle {
  display: none;
}

/* Tablet adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  html body .layout-sidebar,
  html body .el-aside {
    width: 210px !important;
  }

  html body .el-row {
    flex-wrap: wrap !important;
  }

  html body .el-col-12 {
    width: 50% !important;
  }

  html body .grid-cols-3,
  html body .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Phone adjustments */
@media screen and (max-width: 768px) {
  html {
    font-size: 14px !important;
  }

  body {
    overflow-x: hidden !important;
  }

  #app {
    overflow-x: hidden !important;
  }

  /* Sidebar as drawer */
  html body .layout-sidebar,
  html body .el-aside {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 2000 !important;
    width: 280px !important;
    max-width: 82vw !important;
    transform: translateX(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: rgba(7, 10, 18, 0.96) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    border-right: 1px solid var(--oa-border) !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35) !important;
  }

  html body .layout-sidebar.show-mobile,
  html body .el-aside.show-mobile {
    transform: translateX(0) !important;
  }

  /* Overlay */
  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1999;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .mobile-sidebar-overlay.show {
    display: block;
    opacity: 1;
  }

  /* Main content */
  html body .layout-main-content,
  html body .page-content,
  html body main,
  html body .app-main {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 12px !important;
  }

  /* Header */
  html body .layout-header,
  html body .el-header {
    height: 56px !important;
    padding: 0 12px !important;
  }

  /* Menu toggle button */
  .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    cursor: pointer;
    border: 1px solid var(--oa-border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--oa-text-secondary);
    font-size: 20px;
    transition: all 0.2s ease;
  }

  .mobile-menu-toggle:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
    color: var(--oa-text-primary);
  }

  /* Cards */
  html body .art-card,
  html body .el-card {
    width: 100% !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
  }

  html body .art-card-header {
    padding: 14px 16px 12px !important;
  }

  /* Tables horizontal scroll */
  html body .art-table-card,
  html body .el-table {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body .el-table__body-wrapper,
  html body .el-table__header-wrapper {
    overflow-x: auto !important;
    min-width: 620px;
  }

  /* Pagination */
  html body .el-pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    gap: 4px;
  }

  html body .el-pagination .el-pagination__sizes,
  html body .el-pagination .el-pagination__jump {
    display: none !important;
  }

  /* Dialogs */
  html body .el-dialog {
    width: 94vw !important;
    max-width: 94vw !important;
    margin: 4vh auto !important;
    border-radius: 18px !important;
  }

  html body .el-dialog__body {
    padding: 16px !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  html body .el-dialog__header {
    padding: 16px !important;
  }

  html body .el-dialog__footer {
    padding: 12px 16px 16px !important;
  }

  /* Drawers */
  html body .el-drawer {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* Forms */
  html body .el-form-item {
    margin-bottom: 16px !important;
  }

  html body .el-form-item__label {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Grid collapse */
  html body .el-row {
    display: flex !important;
    flex-direction: column !important;
  }

  html body .el-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Tabs scroll */
  html body .el-tabs__nav-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html body .el-tabs__nav {
    white-space: nowrap !important;
  }

  /* Buttons */
  html body .el-button {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  html body .el-button--small {
    padding: 6px 12px !important;
  }

  /* Tailwind grid fix */
  html body .grid-cols-2,
  html body .grid-cols-3,
  html body .grid-cols-4,
  html body .grid-cols-5,
  html body .grid-cols-6 {
    grid-template-columns: 1fr !important;
  }

  /* Search/filter vertical */
  html body [class*="search"],
  html body [class*="filter"] {
    flex-direction: column !important;
    gap: 8px !important;
  }

  html body [class*="search"] .el-input,
  html body [class*="filter"] .el-input,
  html body [class*="search"] .el-select,
  html body [class*="filter"] .el-select {
    width: 100% !important;
  }

  /* Theme toggle adjust */
  .premium-theme-toggle {
    width: 34px;
    height: 34px;
    margin-left: 8px;
  }

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

/* Small phones */
@media screen and (max-width: 375px) {
  html {
    font-size: 12px !important;
  }

  html body .el-dialog {
    width: 96vw !important;
    margin: 2vh auto !important;
  }

  html body .el-button {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  html body .layout-sidebar,
  html body .el-aside {
    width: 260px !important;
  }
}