/* Fixd.fun Mobile Tools Polish v1
   Applies to PDF editor (.editor-toolbar) and Office Suite
   (.writer-toolbar, .sheets-toolbar, .slides-toolbar)
   Theme: blue->purple gradient (#2563eb -> #7c3aed)
*/
:root {
  --fxd-grad: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --fxd-grad-soft: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.08));
  --fxd-primary: #2563eb;
  --fxd-accent: #7c3aed;
  --fxd-radius: 12px;
  --fxd-shadow: 0 4px 16px rgba(37,99,235,.18);
}

/* Smooth fonts on mobile */
html { -webkit-text-size-adjust: 100%; }

/* ------- Toolbars: shared horizontal scrollable pill bar on mobile ------- */
@media (max-width: 820px) {
  .editor-toolbar,
  .writer-toolbar,
  .sheets-toolbar,
  .slides-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px !important;
    gap: 8px !important;
    min-height: 52px;
    background: var(--fxd-grad) !important;
    border-bottom: 0 !important;
    box-shadow: var(--fxd-shadow);
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: calc(8px + env(safe-area-inset-top, 0)) !important;
  }
  /* Hide browser scrollbar but keep scroll */
  .editor-toolbar::-webkit-scrollbar,
  .writer-toolbar::-webkit-scrollbar,
  .sheets-toolbar::-webkit-scrollbar,
  .slides-toolbar::-webkit-scrollbar { display: none; }
  .editor-toolbar, .writer-toolbar, .sheets-toolbar, .slides-toolbar {
    scrollbar-width: none;
  }

  /* Sections: keep on one row, snap on scroll, glassy */
  .editor-toolbar .toolbar-section,
  .writer-toolbar > div,
  .sheets-toolbar > div,
  .slides-toolbar > div {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    scroll-snap-align: start;
    background: rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 4px 6px;
    gap: 4px !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Buttons in toolbar -> circular pills with white icons */
  .editor-toolbar .toolbar-btn,
  .writer-toolbar button,
  .sheets-toolbar button,
  .slides-toolbar button {
    height: 38px !important;
    min-width: 38px !important;
    width: auto !important;
    border-radius: 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    padding: 0 10px !important;
    font-size: .85rem !important;
    font-weight: 600;
    flex: 0 0 auto;
  }
  .editor-toolbar .toolbar-btn:hover,
  .editor-toolbar .toolbar-btn.active,
  .writer-toolbar button:hover,
  .sheets-toolbar button:hover,
  .slides-toolbar button:hover {
    background: rgba(255,255,255,.22) !important;
  }
  .editor-toolbar .toolbar-btn svg,
  .writer-toolbar button svg,
  .sheets-toolbar button svg,
  .slides-toolbar button svg { stroke: #fff !important; }

  /* Selects in toolbars */
  .writer-toolbar select,
  .sheets-toolbar select,
  .slides-toolbar select,
  .editor-toolbar select {
    background: rgba(255,255,255,.92) !important;
    border: 0 !important;
    border-radius: 8px !important;
    height: 36px !important;
    font-size: .82rem !important;
    padding: 0 8px !important;
    color: #111 !important;
  }

  /* Separators */
  .editor-toolbar .toolbar-separator,
  .writer-toolbar hr,
  .sheets-toolbar hr,
  .slides-toolbar hr {
    width: 1px !important;
    height: 24px !important;
    background: rgba(255,255,255,.35) !important;
    border: 0 !important;
    margin: 0 4px !important;
    flex: 0 0 auto;
  }

  /* Brand link (PDF editor) */
  .editor-toolbar .toolbar-brand {
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 6px 12px;
    flex: 0 0 auto;
    font-size: .85rem;
  }

  /* Edge fade hint that toolbar scrolls */
  .editor-toolbar, .writer-toolbar, .sheets-toolbar, .slides-toolbar {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }

  /* Document content area: full width, no awkward gaps */
  .editor-canvas-wrap,
  .writer-canvas,
  .sheets-canvas,
  .slides-canvas,
  .editor-content,
  .doc-content {
    padding: 12px !important;
  }

  /* Side panels: become bottom drawer-style on mobile */
  .editor-sidebar,
  .writer-sidebar,
  .sheets-sidebar,
  .slides-sidebar,
  .properties-panel {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    top: auto !important;
    width: 100% !important;
    max-height: 55vh;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
    z-index: 60;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Hide "long bar" overflow text labels that crowd the bar; keep icons */
  .editor-toolbar .toolbar-btn .btn-label-long,
  .writer-toolbar .btn-label-long,
  .sheets-toolbar .btn-label-long,
  .slides-toolbar .btn-label-long { display: none !important; }
}

/* ------- Phones (<= 480px): denser ------- */
@media (max-width: 480px) {
  .editor-toolbar, .writer-toolbar, .sheets-toolbar, .slides-toolbar {
    padding: 6px 8px !important;
    gap: 6px !important;
    min-height: 48px;
  }
  .editor-toolbar .toolbar-btn,
  .writer-toolbar button,
  .sheets-toolbar button,
  .slides-toolbar button {
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 8px !important;
  }
}

/* ------- Dark theme tweaks ------- */
[data-theme="dark"] .editor-toolbar,
[data-theme="dark"] .writer-toolbar,
[data-theme="dark"] .sheets-toolbar,
[data-theme="dark"] .slides-toolbar {
  background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%) !important;
}

/* ------- Floating action button for mobile (Save) ------- */
@media (max-width: 820px) {
  .mt-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fxd-grad);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 20px rgba(124,58,237,.35);
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }
  .mt-fab:active { transform: scale(.96); }
}

/* =========================================================
   mobile-tools.css v2  (added 2026-05-04)
   Extends coverage to: draft, decks, spread, generic .toolbar,
   modals, page-scroll lockdown, pinch-zoom canvas safety.
   ========================================================= */

/* ---------- Universal small-screen guards ---------- */
@media (max-width: 820px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body { -webkit-tap-highlight-color: rgba(124,58,237,.18); }
  *, *::before, *::after { box-sizing: border-box; }
  /* Anything inside an editor canvas should still allow native pan/pinch */
  .canvas, .canvas-wrap, .pdf-canvas, .pdf-page,
  .stage-wrap, .stage, .grid-wrap, .grid,
  .editor-canvas, .writer-canvas, .sheets-canvas, .slides-canvas {
    touch-action: pan-x pan-y pinch-zoom !important;
  }
  /* Buttons: minimum tappable size */
  button, .btn, [role="button"] { min-height: 40px; }
  /* Make modals fullscreen-ish */
  .modal, .dialog, .popover.show, .menu.open {
    max-width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 14px !important;
  }
}

/* ---------- Draft (office-tools/draft.php) ---------- */
@media (max-width: 820px) {
  .draft-topbar, .draft-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .draft-topbar::-webkit-scrollbar,
  .draft-toolbar::-webkit-scrollbar { display: none; }
  .draft-toolbar button, .draft-topbar button {
    height: 38px !important; min-width: 38px !important;
    padding: 0 10px !important; font-size: .85rem !important;
  }
  .panel {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto !important;
    width: 100% !important; max-height: 60vh;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.12);
    z-index: 60;
  }
  .panel-head { padding: 10px 14px !important; font-size: 1rem !important; }
  .panel-body { padding: 12px 14px !important; }
}

/* ---------- Decks (office-tools/decks.php) ---------- */
@media (max-width: 820px) {
  .tb {
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tb::-webkit-scrollbar { display: none; }
  .tb button, .tb .btn {
    height: 38px !important; min-width: 38px !important;
    padding: 0 10px !important; font-size: .85rem !important;
  }
  .side {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto !important;
    width: 100% !important; max-height: 45vh;
    overflow-y: auto;
    border-top: 1px solid rgba(0,0,0,.08);
    background: #fff; z-index: 55;
    border-radius: 14px 14px 0 0;
    padding: 10px 12px env(safe-area-inset-bottom, 12px) !important;
  }
  .stage-wrap, .stage {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .slide-thumb { width: 96px !important; height: auto !important; flex: 0 0 auto; }
  .present-bar {
    flex-wrap: wrap !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }
}

/* ---------- Spread (office-tools/spread.php) ---------- */
@media (max-width: 820px) {
  .toolbar, .mode-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar::-webkit-scrollbar,
  .mode-bar::-webkit-scrollbar { display: none; }
  .toolbar button, .mode-btn {
    height: 38px !important; min-width: 38px !important;
    padding: 0 10px !important; font-size: .82rem !important;
  }
  .fb { /* formula bar */
    flex-wrap: wrap !important;
    padding: 4px 6px !important;
    gap: 4px !important;
  }
  .fb input, .fb .cellref {
    min-height: 36px !important;
    font-size: 16px !important; /* prevent iOS auto-zoom */
  }
  .grid-wrap, .full-view {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw !important;
  }
  .grid {
    /* allow horizontal scroll inside the wrap rather than overflowing the page */
    min-width: 100%;
  }
  .fv-table { font-size: .85rem !important; }
  .fv-row, .fv-stat-row { padding: 6px 8px !important; }
}

/* ---------- Writer / Sheets / Slides extra polish ---------- */
@media (max-width: 820px) {
  .writer-toolbar-left, .writer-toolbar-right, .writer-toolbar-center,
  .sheets-toolbar-left, .sheets-toolbar-right, .sheets-toolbar-center,
  .slides-toolbar-left, .slides-toolbar-right, .slides-toolbar-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .writer-toolbar-left::-webkit-scrollbar,
  .writer-toolbar-right::-webkit-scrollbar,
  .writer-toolbar-center::-webkit-scrollbar,
  .sheets-toolbar-left::-webkit-scrollbar,
  .sheets-toolbar-right::-webkit-scrollbar,
  .sheets-toolbar-center::-webkit-scrollbar,
  .slides-toolbar-left::-webkit-scrollbar,
  .slides-toolbar-right::-webkit-scrollbar,
  .slides-toolbar-center::-webkit-scrollbar { display: none; }
  /* iOS auto-zoom fix on inputs */
  input[type="text"], input[type="number"], input[type="email"],
  input[type="search"], input[type="url"], textarea, select {
    font-size: 16px !important;
  }
}

/* ---------- PDF Editor (documents/editor.php) extra ---------- */
@media (max-width: 820px) {
  .toolbar-section { gap: 2px !important; padding: 0 4px !important; }
  .toolbar-separator { display: none !important; }
  .editor-toolbar { padding-bottom: 4px !important; }
  /* page thumbnail strip becomes horizontal scroll */
  .pages-list, .thumb-strip {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px;
    max-height: 110px;
  }
  .page-thumb { flex: 0 0 auto; width: 70px !important; height: auto !important; }
}

/* ---------- Landscape phones: shorter toolbars ---------- */
@media (max-width: 820px) and (orientation: landscape) {
  .editor-toolbar, .writer-toolbar, .sheets-toolbar,
  .slides-toolbar, .draft-toolbar, .toolbar, .mode-bar, .tb {
    padding-top: 2px !important; padding-bottom: 2px !important;
  }
  .editor-toolbar .toolbar-btn,
  .writer-toolbar button, .sheets-toolbar button,
  .slides-toolbar button, .toolbar button, .mode-btn,
  .draft-toolbar button, .tb button {
    height: 32px !important; min-width: 32px !important;
  }
}