/**
 * MIGESTI OS -- Mobile Responsive Styles
 * Phase 73 -- Progressive Web App + Full Mobile Responsive
 *
 * Mobile-first responsive styles for field worker use.
 * Breakpoints: 768px (tablet), 480px (phone)
 * Safe-area-inset for notched devices.
 *
 * Architect: Matthew F. Inglima
 * CONFIDENTIAL -- All Rights Reserved
 */

/* ══════════════════════════════════════════════════════════
   BASE MOBILE ELEMENTS (always active)
   ══════════════════════════════════════════════════════════ */

/* ── Mobile bottom navigation ──────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--nav-bg);
  border-top: 1px solid var(--border-subtle);
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-muted);
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
  text-decoration: none;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}

.mobile-nav-item span:first-child {
  font-size: 20px;
}

.mobile-nav-item.active {
  color: var(--accent-cyan, #00d4ff);
}

.mobile-nav-item:active {
  color: #00d4ff;
  transform: scale(0.95);
}

/* ── Mobile Drawer ─────────────────────────────────────── */
.mobile-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mobile-drawer-backdrop.open {
  display: block;
  opacity: 1;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  z-index: 1101;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.mobile-drawer.open {
  transform: translateX(0);
}

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-drawer__logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-cyan);
}

.mobile-drawer__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-drawer__section {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mobile-drawer__section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 4px 16px;
}

.mobile-drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  min-height: 44px;
  transition: background 0.15s;
}

.mobile-drawer__link:active {
  background: rgba(0,212,255,0.08);
}

.mobile-drawer__link.active {
  color: var(--accent-cyan);
  background: rgba(0,212,255,0.06);
}

.mobile-drawer__link-icon {
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
}

/* ── Workspace Picker Sheet ────────────────────────────── */
.mobile-ws-sheet {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-radius: 16px 16px 0 0;
  z-index: 1102;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.mobile-ws-sheet.open {
  display: block;
  transform: translateY(0);
}

.mobile-ws-sheet__handle {
  width: 40px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 2px;
  margin: 0 auto 12px;
}

.mobile-ws-sheet__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.mobile-ws-sheet__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mobile-ws-sheet__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  min-height: 44px;
}

.mobile-ws-sheet__item:active {
  background: rgba(0,212,255,0.1);
  border-color: rgba(0,212,255,0.3);
}

.mobile-ws-sheet__item-icon {
  font-size: 22px;
}

/* ── PWA install banner ────────────────────────────────── */
#pwa-install-banner {
  display: none;
  position: fixed;
  bottom: 70px;
  left: 12px;
  right: 12px;
  background: var(--nav-bg);
  border: 1px solid var(--accent-cyan);
  border-radius: 10px;
  padding: 12px 16px;
  z-index: 999;
  justify-content: space-between;
  align-items: center;
  color: var(--text-primary);
  font-size: 14px;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

#pwa-install-banner.visible {
  display: flex;
}

#pwa-install-btn {
  background: var(--accent-cyan);
  color: var(--bg-primary);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

#pwa-install-btn:active {
  opacity: 0.8;
}

#pwa-dismiss-btn,
#pwa-install-banner button:last-child {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  min-height: 44px;
  min-width: 44px;
  flex-shrink: 0;
}

/* ── Offline indicator ─────────────────────────────────── */
#offline-indicator {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #b71c1c;
  color: white;
  text-align: center;
  padding: 6px;
  padding-top: calc(6px + env(safe-area-inset-top, 0));
  font-size: 13px;
  z-index: 9999;
}

#offline-indicator.visible {
  display: block;
}

/* ══════════════════════════════════════════════════════════
   TABLET BREAKPOINT (≤768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout ────────────────────────────────────────────── */
  .mig-sidebar,
  .sidebar {
    display: none !important;
  }

  .mobile-nav {
    display: flex;
  }

  .mig-main,
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0));
  }

  /* ── Topbar ──────────────────────────────────────────── */
  .mig-topbar__search {
    display: none;
  }

  .mig-topbar {
    padding: 0 12px;
  }

  /* ── Dashboard Grid ──────────────────────────────────── */
  .mig-grid--dashboard {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .mig-card--compact {
    padding: 12px;
  }

  /* ── EOMI Chat Panel ─────────────────────────────────── */
  .mig-chat-panel {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    top: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    z-index: 1050;
  }

  .eomi-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 1050;
    bottom: 60px !important;
  }

  /* ── Crystal Panels ──────────────────────────────────── */
  .crystal-panel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 400px;
    max-height: 70vh;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .crystal-panel__header {
    cursor: default !important;
  }

  .crystal-panel__resize {
    display: none !important;
  }

  .crystal-panel__body {
    min-height: 200px;
    max-height: 50vh;
  }

  /* ── Crystal Vaults ──────────────────────────────────── */
  .vault-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
  }

  .vault-cube {
    width: 100px;
    height: 100px;
  }

  .vault-expanded {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    z-index: 1060;
  }

  .vault-fullscreen {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Code Workspace ──────────────────────────────────── */
  .code-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: 40px 1fr 180px !important;
  }

  .code-file-tree {
    display: none;
  }

  .code-file-tree.mobile-show {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100%;
    max-width: 280px;
    background: var(--nav-bg);
    border-right: 1px solid rgba(0,212,255,0.15);
  }

  .code-eomi-panel {
    display: none;
  }

  .code-eomi-panel.mobile-show {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    width: 100%;
    max-width: 320px;
    background: var(--nav-bg);
    border-left: 1px solid rgba(0,212,255,0.15);
  }

  .code-workspace.fullscreen {
    grid-template-columns: 1fr !important;
  }

  /* ── Touch-friendly targets ──────────────────────────── */
  button, .btn, .nav-item, .mig-nav__link {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── Tables ──────────────────────────────────────────── */
  .est-bom__table-wrap td,
  .est-bom__table-wrap th,
  .bom-table td,
  .bom-table th {
    padding: 12px 8px;
    font-size: 14px;
  }

  /* ── Execution trace ─────────────────────────────────── */
  .est-trace {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    max-height: 40vh;
    overflow-y: auto;
  }

  /* ── Federation panel ────────────────────────────────── */
  .federation-panel,
  #federation-panel-container {
    padding: 8px;
  }

  .federation-votes-grid {
    flex-direction: column;
    gap: 8px;
  }

  /* ── Assembly rules ──────────────────────────────────── */
  .ar-panel {
    margin: 4px !important;
  }

  /* ── Prevent iOS zoom on input focus ─────────────────── */
  input[type="number"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
    min-height: 44px;
  }

  /* ── Modals ──────────────────────────────────────────── */
  .mig-modal__dialog,
  .vault-modal,
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 85vh;
    overflow-y: auto;
  }

  /* ── Settings / Forms ────────────────────────────────── */
  .mig-settings__grid {
    grid-template-columns: 1fr !important;
  }

  .mig-form__row {
    flex-direction: column;
    gap: 8px;
  }

  /* ── Notifications panel ─────────────────────────────── */
  .notif-panel {
    width: 100% !important;
    right: 0 !important;
    border-radius: 0 !important;
  }

  /* ── Toast positioning above mobile nav ──────────────── */
  #pwa-toast {
    bottom: 80px !important;
  }

  /* ── Crystal tool tray scrollable ────────────────────── */
  .crystal-tool-tray {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Command palette full width ──────────────────────── */
  .cmd-palette {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    left: 12px !important;
    right: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PHONE BREAKPOINT (≤480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Typography ──────────────────────────────────────── */
  body {
    font-size: 14px;
  }

  .mig-content {
    padding: 8px !important;
  }

  /* ── Dashboard Grid → single column ──────────────────── */
  .mig-grid--dashboard {
    grid-template-columns: 1fr !important;
  }

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

  /* ── Crystal Panels ──────────────────────────────────── */
  .crystal-panel {
    min-height: 350px;
    border-radius: 8px;
  }

  .crystal-panel__textarea {
    font-size: 16px;
  }

  /* ── Crystal Vaults → 2 columns ──────────────────────── */
  .vault-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .vault-cube {
    width: 100%;
    height: 90px;
  }

  .vault-cube__name {
    font-size: 11px;
  }

  .vault-fullscreen {
    grid-template-columns: 1fr !important;
  }

  /* ── Estimating Workspace ────────────────────────────── */
  .est-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
  }

  .est-sidebar {
    display: none !important;
  }

  .est-bottom {
    flex-direction: column;
  }

  .est-bom {
    width: 100% !important;
  }

  .est-chat {
    width: 100% !important;
    height: 200px !important;
  }

  .est-bom__table-wrap td,
  .est-bom__table-wrap th {
    padding: 8px 4px;
    font-size: 12px;
  }

  .est-setup__form-row {
    flex-direction: column;
    gap: 8px;
  }

  /* ── EOMI panel adjustments ──────────────────────────── */
  .eomi-panel {
    bottom: 0 !important;
  }

  .eomi-panel__messages {
    padding: 8px;
  }

  /* ── Code Workspace ──────────────────────────────────── */
  .code-workspace {
    grid-template-rows: 40px 1fr 120px !important;
  }

  .code-toolbar select {
    max-width: 90px;
  }

  .code-toolbar__title {
    font-size: 11px;
  }

  /* ── Buttons ─────────────────────────────────────────── */
  .mig-btn,
  .btn,
  button:not(.crystal-panel__header-btn):not(.crystal-tool-tray__btn):not(.mobile-nav-item) {
    min-height: 44px;
    font-size: 14px;
  }

  /* ── PWA Banner above mobile nav ─────────────────────── */
  #pwa-install-banner {
    bottom: calc(65px + env(safe-area-inset-bottom, 0));
    left: 8px;
    right: 8px;
    font-size: 13px;
  }

  /* ── Vault modal full screen on phone ────────────────── */
  .vault-modal {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* ── Drawer wider on phone ───────────────────────────── */
  .mobile-drawer {
    width: 100%;
    max-width: 100vw;
  }

  /* ── Workspace sheet → 2 cols ────────────────────────── */
  .mobile-ws-sheet__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ══════════════════════════════════════════════════════════ */
[data-theme="sunrise"] .mobile-nav {
  background: #6BB8D4;
  border-top-color: rgba(232,160,32,0.3);
}

[data-theme="sunrise"] .mobile-nav-item {
  color: #191970;
}

[data-theme="sunrise"] .mobile-nav-item.active {
  color: #E8A020;
}

[data-theme="sunrise"] .mobile-drawer {
  background: #F5F0E8;
  border-right-color: rgba(232,160,32,0.3);
}

[data-theme="sunrise"] .mobile-drawer__header {
  border-bottom-color: rgba(232,160,32,0.2);
}

[data-theme="sunrise"] .mobile-drawer__logo {
  color: #E8A020;
}

[data-theme="sunrise"] .mobile-drawer__link {
  color: #191970;
}

[data-theme="sunrise"] .mobile-drawer__link.active {
  color: #E8A020;
  background: rgba(232,160,32,0.1);
}

[data-theme="sunrise"] .mobile-drawer-backdrop {
  background: rgba(25,25,112,0.3);
}

[data-theme="sunrise"] .mobile-ws-sheet {
  background: #F5F0E8;
  border-top-color: rgba(232,160,32,0.3);
}

[data-theme="sunrise"] .mobile-ws-sheet__item {
  background: #EDE8DC;
  border-color: rgba(232,160,32,0.25);
  color: #191970;
}

[data-theme="sunrise"] #pwa-install-banner {
  background: #F5F0E8;
  border-color: #E8A020;
  color: #191970;
}

[data-theme="sunrise"] #pwa-install-btn {
  background: #E8A020;
  color: #191970;
}

[data-theme="sunrise"] #offline-indicator {
  background: #C62828;
}

/* ══════════════════════════════════════════════════════════
   STANDALONE (installed PWA) ADJUSTMENTS
   ══════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  .mig-topbar {
    padding-top: env(safe-area-inset-top, 0);
  }

  #offline-indicator {
    padding-top: calc(6px + env(safe-area-inset-top, 0));
  }
}

/* ══════════════════════════════════════════════════════════
   LANDSCAPE PHONE
   ══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-nav {
    height: 44px;
  }

  .mobile-nav-item span:first-child {
    font-size: 16px;
  }

  .mobile-nav-item {
    font-size: 9px;
  }

  body {
    padding-bottom: 44px;
  }

  .eomi-panel {
    bottom: 44px !important;
  }
}