/* DiabloMU Control — mobile / tablet (loaded LAST so it wins over fm-skin) */

:root {
  --m-pad: 12px;
  --m-radius: 12px;
  --m-topbar-h: 52px;
}

@supports (padding: env(safe-area-inset-top)) {
  .mobile-topbar {
    padding-top: max(0.65rem, env(safe-area-inset-top));
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
  .acp-main {
    padding-bottom: max(48px, calc(28px + env(safe-area-inset-bottom))) !important;
  }
  .ops-login {
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .acp-side.open,
  #acp-nav.open {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .ops-toast {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(12px, env(safe-area-inset-right));
  }
  .gs-con-inputbar {
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
  }
}

body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* —— Phone + small tablet —— */
@media (max-width: 1024px) {
  /* Use slim topbar only — desktop header wastes space / clips pills */
  .acp-top {
    display: none !important;
  }
  .acp-main > .mobile-topbar {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 40;
    align-items: center;
    gap: 0.55rem;
    min-height: var(--m-topbar-h);
    padding: 0.55rem 0.85rem;
    margin: 0 calc(-1 * var(--m-pad, 12px)) 0.75rem;
    width: calc(100% + 2 * var(--m-pad, 12px));
    background: rgba(8, 11, 15, 0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color, #1e2630);
  }
  .mobile-topbar strong {
    font-size: 0.95rem;
    letter-spacing: -0.02em;
  }
  .mobile-topbar .ops-status-pills {
    display: flex !important;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .mobile-topbar .ops-pill {
    padding: 4px 7px !important;
    font-size: 0.62rem !important;
    min-height: 28px;
    line-height: 1;
  }

  .acp-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 100dvh;
  }
  .acp-side,
  #acp-nav {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 88vw) !important;
    height: auto !important;
    z-index: 120 !important;
    transform: translateX(-105%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-primary, #0b1016) !important;
    box-shadow: var(--shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.55));
  }
  body.nav-open #acp-nav.open,
  #acp-nav.open {
    transform: translateX(0);
  }
  .acp-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 110;
  }
  body.nav-open .acp-backdrop {
    display: block !important;
  }

  .acp-main {
    padding: 0 var(--m-pad) 40px !important;
    gap: 14px !important;
    max-width: none !important;
    width: 100%;
    overflow-x: hidden;
  }

  .acp-page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
  }
  .acp-page-head h1 {
    font-size: 1.28rem !important;
    line-height: 1.25;
  }
  .acp-page-head .muted {
    font-size: 0.78rem;
  }
  .acp-quick {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .acp-quick .btn,
  .acp-quick select,
  .acp-quick input {
    flex: 1 1 auto;
    min-height: 40px;
  }

  .acp-nav .nav-link-btn,
  .nav-acc-sum {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.92rem;
  }
  .nav-acc-sum {
    font-size: 0.82rem !important;
  }

  .btn,
  .btn-ghost,
  .btn-light,
  .btn-outline,
  .btn-primary {
    min-height: 40px;
  }
  .btn-xs {
    min-height: 34px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important; /* iOS: no focus zoom */
  }
  .ops-editor,
  .fm-goto input,
  input.mono,
  .gs-con-inputbar input,
  .pl-toolbar input {
    font-size: 15px !important;
  }

  /* Cards / tables */
  .acp-card {
    border-radius: var(--m-radius) !important;
  }
  .acp-card-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.75rem 0.85rem !important;
  }
  .acp-body {
    padding: 0.85rem !important;
  }
  .table-wrap,
  .pl-table-wrap,
  .fm-table-wrap {
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table {
    min-width: 520px;
  }
  .table th,
  .table td,
  .pl-table th,
  .pl-table td {
    padding: 10px 11px !important;
    font-size: 0.82rem !important;
  }

  /* Overview */
  .dash-grid {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 0.85rem !important;
  }
  .dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .dash-metric {
    padding: 0.65rem 0.7rem !important;
  }

  /* ——— Console: full usable height + sticky input ——— */
  #view-console.ops-view.is-active {
    display: flex !important;
    flex-direction: column;
    min-height: calc(100dvh - var(--m-topbar-h) - 12px);
    overflow: visible;
  }
  #view-console > .acp-page-head {
    flex: none;
  }
  .gs-con-layout {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem !important;
    padding: 0 !important;
    flex: 1;
    min-height: 0;
  }
  .gs-con-main {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
    flex: 1 1 auto;
    order: 1;
  }
  .gs-con-out {
    flex: 1 1 auto !important;
    min-height: min(48dvh, 420px) !important;
    max-height: none !important;
    height: min(58dvh, 560px) !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    padding: 0.75rem 0.85rem !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .gs-con-inputbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex: none;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
  }
  .gs-con-inputbar input {
    min-width: 0;
    flex: 1;
  }
  .gs-con-side {
    order: 2;
    max-height: none !important;
    overflow: visible !important;
    flex: none;
  }
  .gs-con-side .acp-card-head h2 {
    font-size: 0.85rem;
  }
  .gs-con-quick,
  .gs-con-reload {
    padding: 0.45rem 0.65rem 0.55rem !important;
  }
  .gs-con-cmds {
    max-height: 220px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem 0.65rem 0.75rem !important;
  }
  .gs-con-cmd {
    padding: 0.5rem 0.55rem !important;
  }
  .gs-con-cmd small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #con-target-seg {
    width: 100%;
  }
  #con-target-seg .pl-seg-btn {
    flex: 1;
    min-height: 40px;
  }

  /* Logs */
  .ops-log {
    height: min(62dvh, 560px) !important;
    min-height: 260px !important;
    font-size: 11.5px !important;
    -webkit-overflow-scrolling: touch;
  }
  .ops-monaco,
  .fm-monaco {
    min-height: 240px !important;
    height: min(48dvh, 400px) !important;
  }

  /* File manager */
  .fm-shell {
    min-height: 0 !important;
  }
  .fm-toolbar {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 0.55rem 0 !important;
  }
  .fm-actions {
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }
  .fm-actions .btn,
  .fm-actions input,
  .fm-actions select {
    min-height: 40px;
  }
  .fm-actions .hide-sm {
    display: none !important;
  }
  .fm-list-head,
  .fm-row {
    grid-template-columns: minmax(0, 1fr) 72px !important;
  }
  .fm-row > *:nth-child(3),
  .fm-row > *:nth-child(4),
  .fm-list-head > *:nth-child(3),
  .fm-list-head > *:nth-child(4) {
    display: none !important;
  }
  .fm-table-wrap {
    max-height: min(55dvh, 480px) !important;
  }
  .fm-modal {
    padding: 0 !important;
  }
  .fm-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* Players / LTP */
  .pl-workspace,
  .pl-workspace-items,
  .ltp-items-layout {
    grid-template-columns: 1fr !important;
  }
  .pl-list-panel {
    min-height: 0 !important;
    max-height: 280px;
  }
  .pl-table-wrap {
    max-height: 240px !important;
  }
  .pl-tabs {
    position: sticky;
    top: var(--m-topbar-h);
    z-index: 6;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0;
    background: linear-gradient(180deg, #080b0f 75%, transparent);
  }
  .pl-tabs .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
  }
  .pl-form-grid {
    grid-template-columns: 1fr !important;
  }
  .pl-seg {
    width: 100%;
  }
  .pl-seg-btn {
    flex: 1;
    min-height: 40px;
  }
  .ltp-char-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .ltp-side {
    min-width: 0 !important;
  }
  .ltp-inv-stage,
  .ltp-wh-stage,
  .ltp-inv-bg,
  .ltp-wh-bg {
    max-width: 100%;
  }
  .ltp-inv-stage,
  .ltp-wh-stage {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .ltp-cat-list {
    max-height: 220px !important;
  }
  .pl-slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    max-height: 240px;
  }

  /* Modals */
  .ops-modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .ops-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    height: auto;
    min-height: 50dvh;
    border-radius: 0 !important;
    overflow: auto;
  }

  /* Misc ops views */
  #view-security .acp-body,
  #alert-form {
    grid-template-columns: 1fr !important;
  }
  .mfa-setup {
    grid-template-columns: 1fr !important;
  }
  .mfa-qr svg {
    width: min(200px, 70vw);
    height: auto;
  }
}

@media (max-width: 720px) {
  :root {
    --m-pad: 10px;
  }

  .dash-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .acp-stats {
    grid-template-columns: 1fr !important;
  }

  .gs-con-out {
    height: min(52dvh, 480px) !important;
    min-height: min(42dvh, 360px) !important;
  }

  .ltp-char-grid {
    grid-template-columns: 1fr !important;
  }

  /* Scale inventory art slightly on narrow phones so both sides fit in scroll */
  .ltp-inv-stage,
  .ltp-wh-stage {
    width: 100%;
  }
  .ltp-inv-bg,
  .ltp-wh-bg {
    transform-origin: top left;
  }
}

@media (max-width: 420px) {
  .acp-badge {
    display: none;
  }
  .mobile-topbar strong {
    font-size: 0.88rem;
  }
  .gs-con-out {
    font-size: 0.68rem !important;
  }
  .ltp-inv-bg {
    transform: scale(0.92);
    margin-bottom: -46px;
  }
  .ltp-wh-bg {
    transform: scale(0.92);
    margin-bottom: -43px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-ghost:hover {
    transform: none;
  }
  .nav-link-btn:active,
  .btn:active,
  .gs-con-cmd:active {
    opacity: 0.88;
  }
}