/* =======================================================================
   喵莉糍 · Mobile / Tablet Responsive Layer
   Loaded AFTER dashboard-kawaii.css + auth-kawaii.css so we win specificity.
   Covers:
     - Dashboard (body.miaolici-dashboard-skin)
     - Auth pages (login/register/reset/verify)
     - Marketing home (miaolici-mobile-home namespace optional)
   Breakpoints (aligned with Tailwind):
     - ≤1024px  Tablet landscape / portrait    (Vue's `lg:` hidden/shown cutoff)
     - ≤768px   Tablet portrait / large phone   (Vue's `md:` cutoff)
     - ≤640px   Phone                          (Vue's `sm:` cutoff)
     - ≤420px   Small phone
   Design principles:
     - Never nest backdrop-filter (Chromium transparency bug)
     - Never change display of Vue-managed controls on desktop
     - Use max-width only (never min-width) so desktop is unaffected
     - Use `!important` only where kawaii.css uses it (to win)
   ======================================================================= */

/* -----------------------------------------------------------------------
   A. Universal: make viewport scroll work on every page skinned by us.
   ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* =========================================================================
   1. Dashboard · Tablet & below (≤1024px)
   ========================================================================= */
@media (max-width: 1024px) {
  /* 1.1 kill the desktop-only min-width lock */
  body.miaolici-dashboard-skin {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* 1.2 sidebar behaves as an off-canvas drawer.
         Vue already toggles `.-translate-x-full` / `lg:translate-x-0`
         so we only need to lift the sidebar into a fixed layer
         and size it sensibly on small screens. */
  body.miaolici-dashboard-skin aside.sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 60 !important;
    width: 280px !important;
    max-width: 86vw !important;
    overflow-y: auto !important;
    box-shadow:
      22px 0 52px rgba(255, 124, 170, 0.22),
      inset -1px 0 0 rgba(255, 255, 255, 0.9) !important;
    transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1) !important;
  }

  /* 1.3 when Vue collapses it to 72px, keep it narrow */
  body.miaolici-dashboard-skin aside.sidebar.w-\[72px\] {
    width: 72px !important;
    max-width: 72px !important;
  }

  /* 1.4 main canvas takes the full viewport width.
         We target the Vue wrapper with `lg:ml-64` + our explicit margins. */
  body.miaolici-dashboard-skin [class*="lg:ml-64"] {
    margin-left: 0 !important;
  }

  body.miaolici-dashboard-skin main {
    padding: 16px 16px 28px !important;
  }

  /* 1.5 topbar: compact layout, no fixed 820px cap, no forced margins */
  body.miaolici-dashboard-skin header.glass > div {
    padding: 0 12px !important;
    gap: 6px !important;
  }

  body.miaolici-dashboard-skin header.glass .mk-topbar-actions {
    max-width: calc(100vw - 168px) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  /* 1.6 hide the big balance pill text on tablet+ (keep icon) to save space */
  body.miaolici-dashboard-skin header.glass .mk-topbar-balance-pill {
    min-width: 44px !important;
    padding: 0 10px !important;
    gap: 4px !important;
  }

  /* 1.7 usage/dashboard stat grid: 2 across on tablet */
  body.miaolici-dashboard-skin main > .space-y-6 > .grid.grid-cols-2.gap-4.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* 1.8 charts / monitor grids: single column */
  body.miaolici-dashboard-skin .mk-chart-grid,
  body.miaolici-dashboard-skin .mk-market-plan-grid,
  body.miaolici-dashboard-skin .mk-balance-model-grid,
  body.miaolici-dashboard-skin .mk-balance-topup-controls,
  body.miaolici-dashboard-skin .mk-balance-redeem-row,
  body.miaolici-dashboard-skin .mk-balance-market-summary,
  body.miaolici-dashboard-skin .mk-balance-recharge-panel,
  body.miaolici-dashboard-skin .mk-balance-model-panel,
  body.miaolici-dashboard-skin .mk-square-layout,
  body.miaolici-dashboard-skin .mk-square-toolbar,
  body.miaolici-dashboard-skin .mk-square-card-grid,
  body.miaolici-dashboard-skin .mk-market-banner,
  body.miaolici-dashboard-skin .mk-market-toolbar,
  body.miaolici-dashboard-skin .mk-market-form,
  body.miaolici-dashboard-skin .mk-market-modal-head {
    grid-template-columns: 1fr !important;
  }

  /* 1.9 tables: horizontal scroll, preserve layout */
  body.miaolici-dashboard-skin .card.table-scroll-container,
  body.miaolici-dashboard-skin .table-scroll-container,
  body.miaolici-dashboard-skin .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.miaolici-dashboard-skin .table-wrapper > table {
    min-width: 640px;
  }

  /* 1.10 redeem page: full width */
  body.miaolici-dashboard-skin.mk-redeem-page-active .mx-auto.max-w-2xl.space-y-6 {
    max-width: 100% !important;
    padding: 16px 0 32px !important;
  }

  /* 1.11 subscription square / model square */
  body.miaolici-dashboard-skin .mk-square-sidebar {
    position: static !important;
    width: 100% !important;
  }

  body.miaolici-dashboard-skin .mk-square-card-grid,
  body.miaolici-dashboard-skin .mk-market-plan-grid {
    gap: 12px !important;
  }

  /* 1.12 dropdown menus: anchor within viewport */
  body.miaolici-dashboard-skin header.glass .dropdown.right-0,
  body.miaolici-dashboard-skin header.glass .mk-topbar-user-root > .dropdown.right-0 {
    right: 4px !important;
    min-width: 240px !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* 1.13 mobile backdrop — triggered by our JS companion */
  body.miaolici-dashboard-skin .mi-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(46, 22, 50, 0.44);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  body.miaolici-dashboard-skin .mi-mobile-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}

/* =========================================================================
   2. Dashboard · Phone (≤640px)
   ========================================================================= */
@media (max-width: 640px) {
  /* 2.1 stat grid collapses to single column */
  body.miaolici-dashboard-skin main > .space-y-6 > .grid.grid-cols-2.gap-4.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.miaolici-dashboard-skin .mk-stat-card {
    min-height: 120px !important;
    padding: 18px 20px !important;
  }

  /* 2.2 main padding tighter */
  body.miaolici-dashboard-skin main {
    padding: 12px 12px 24px !important;
  }

  /* 2.3 topbar: hide balance pill entirely (user can view via account) */
  body.miaolici-dashboard-skin header.glass .mk-topbar-balance-pill {
    display: none !important;
  }

  /* 2.4 user button: icon-only */
  body.miaolici-dashboard-skin header.glass .mk-topbar-user-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 4px !important;
    gap: 0 !important;
  }

  body.miaolici-dashboard-skin header.glass .mk-topbar-user-text,
  body.miaolici-dashboard-skin header.glass .mk-topbar-user-button .text-sm,
  body.miaolici-dashboard-skin header.glass .mk-topbar-user-button .text-xs {
    display: none !important;
  }

  /* 2.5 topbar control buttons size */
  body.miaolici-dashboard-skin header.glass .mk-topbar-control-button,
  body.miaolici-dashboard-skin header.glass .mk-topbar-control-link {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 6px !important;
  }

  body.miaolici-dashboard-skin header.glass .mk-topbar-actions {
    max-width: calc(100vw - 132px) !important;
    padding: 3px !important;
  }

  /* 2.6 header brand hidden on very small phones to free topbar */
  body.miaolici-dashboard-skin header.glass > div > .flex.items-center.gap-4 {
    gap: 6px !important;
  }

  /* 2.7 cards: rounded corners smaller, padding smaller */
  body.miaolici-dashboard-skin main .card {
    border-radius: 16px !important;
  }

  body.miaolici-dashboard-skin main .card .p-6 {
    padding: 18px !important;
  }

  /* 2.8 feed-page / pages layout */
  body.miaolici-dashboard-skin .mk-feed-page {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  body.miaolici-dashboard-skin .mk-feed-actions {
    justify-content: flex-start;
  }

  body.miaolici-dashboard-skin .mk-feed-actions > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 2.9 tables: tighter rows */
  body.miaolici-dashboard-skin .table-wrapper > table th,
  body.miaolici-dashboard-skin .table-wrapper > table td {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px;
  }

  /* 2.10 pagination wrap */
  body.miaolici-dashboard-skin .pagination {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* 2.11 redeem hero card */
  body.miaolici-dashboard-skin.mk-redeem-page-active .bg-gradient-to-br.from-primary-500.to-primary-600 {
    min-height: 168px !important;
    border-radius: 22px !important;
  }

  body.miaolici-dashboard-skin.mk-redeem-page-active .card .p-6 {
    padding: 18px !important;
  }

  /* 2.12 forms: inputs & buttons full width */
  body.miaolici-dashboard-skin.mk-redeem-page-active .input,
  body.miaolici-dashboard-skin.mk-redeem-page-active input#code {
    min-height: 48px !important;
    border-radius: 14px !important;
  }

  body.miaolici-dashboard-skin.mk-redeem-page-active .btn.btn-primary {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* 2.13 modal / dialog */
  body.miaolici-dashboard-skin .fixed.inset-0 > .max-w-md,
  body.miaolici-dashboard-skin .fixed.inset-0 > .max-w-lg,
  body.miaolici-dashboard-skin .fixed.inset-0 > .max-w-xl,
  body.miaolici-dashboard-skin .fixed.inset-0 > .max-w-2xl {
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
  }

  /* 2.14 hide collapse sidebar button on phone (not useful) */
  body.miaolici-dashboard-skin aside.sidebar button[data-mk-sidebar-title="收起"] {
    display: none !important;
  }
}

/* =========================================================================
   3. Dashboard · Small phone (≤420px)
   ========================================================================= */
@media (max-width: 420px) {
  body.miaolici-dashboard-skin header.glass > div {
    padding: 0 8px !important;
  }

  body.miaolici-dashboard-skin main {
    padding: 10px 10px 20px !important;
  }

  body.miaolici-dashboard-skin main .card .p-6,
  body.miaolici-dashboard-skin main .card .p-4 {
    padding: 14px !important;
  }

  body.miaolici-dashboard-skin header.glass .mk-topbar-actions {
    max-width: calc(100vw - 108px) !important;
  }

  /* ensure the hamburger button is always reachable */
  body.miaolici-dashboard-skin header.glass button.btn-ghost.btn-icon.lg\:hidden {
    min-width: 38px;
    min-height: 38px;
  }

  /* kawaii stat card decorative flowers shrink */
  body.miaolici-dashboard-skin .mk-stat-card::after {
    width: 20px;
    height: 20px;
  }
}

/* =========================================================================
   4. Auth pages · tablet (641px - 1024px)
   auth-kawaii.css already handles ≤640px — we only fill the tablet gap.
   ========================================================================= */
@media (max-width: 1024px) and (min-width: 641px) {
  html
    body
    .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4
    > .relative.z-10.w-full.max-w-md {
    max-width: 460px !important;
  }

  .mk-auth-mascot {
    width: 150px !important;
    opacity: 0.82;
  }
}

/* Auth · phone refinements (augment existing 640px rules) */
@media (max-width: 640px) {
  html
    body
    .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4 {
    padding: 16px !important;
  }

  html
    body
    .relative.flex.min-h-screen.items-center.justify-center.overflow-hidden.p-4
    > .relative.z-10.w-full.max-w-md {
    padding: 0 !important;
  }

  .mk-auth-mascot {
    display: none !important;
  }

  .miaolici-auth-home-link {
    top: 12px !important;
    left: 12px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

/* =========================================================================
   5. Touch/pointer affordances
   ========================================================================= */
@media (hover: none) and (pointer: coarse) {
  /* disable hover-only translate effects that look odd on touch */
  body.miaolici-dashboard-skin header.glass .mk-topbar-control-button:hover,
  body.miaolici-dashboard-skin header.glass .mk-topbar-control-link:hover,
  body.miaolici-dashboard-skin .sidebar-link:hover,
  body.miaolici-dashboard-skin .btn:hover {
    transform: none !important;
  }

  /* bigger tap targets on touch */
  body.miaolici-dashboard-skin .sidebar-link {
    min-height: 44px;
  }

  body.miaolici-dashboard-skin .btn,
  body.miaolici-dashboard-skin .btn-icon {
    min-height: 40px;
  }
}

/* =========================================================================
   6. Landscape phone helper
   ========================================================================= */
@media (max-height: 480px) and (orientation: landscape) {
  body.miaolici-dashboard-skin header.glass > div {
    height: 48px !important;
    min-height: 48px !important;
  }

  body.miaolici-dashboard-skin header.glass .mk-topbar-control-button,
  body.miaolici-dashboard-skin header.glass .mk-topbar-user-button,
  body.miaolici-dashboard-skin header.glass .mk-topbar-balance-pill {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}

/* =========================================================================
   7. Home landing page polish (styles.css already covers 1180/880/560)
   Only patch the auth-home-link at small widths (for consistency).
   ========================================================================= */
@media (max-width: 560px) {
  body:not(.miaolici-dashboard-skin) .miaolici-auth-home-link {
    top: 10px !important;
    left: 10px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}