/**
 * Tools Folio — Layout Patterns
 * Three pluggable layout patterns: split-panel, scroll, editor.
 * Load order: 4th (after tf-components.css)
 * Pick one layout pattern per tool. Never mix patterns.
 */

/* ============================================================
   Pattern A: Split-Panel
   (resume-builder, invoice-builder, future document tools)

   Desktop: [tf-topbar] → [#main: .tf-panel | .tf-resizer | #preview-wrap]
   Mobile:  [tf-topbar] → [#preview-wrap full-width] + [.tf-panel as overlay] + [.tf-mob-toolbar]
   ============================================================ */

/* ── Main container ── */
.tf-layout-split {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}

@media (max-width: 768px) {
  .tf-layout-split { flex-direction: column; overflow: visible; height: auto; }
}

/* ── Panel ── */
.tf-panel {
  width: var(--panel-w); min-width: 260px; flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--surface-4);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .2s var(--ease-standard);
}
.tf-panel.collapsed { width: 0; min-width: 0; overflow: hidden; }

@media (max-width: 768px) {
  .tf-panel {
    position: fixed; left: 0; top: var(--tf-topbar-h);
    width: 100% !important; min-width: 0 !important;
    height: calc(100dvh - var(--tf-topbar-h));
    z-index: var(--z-panel);
    transform: translateX(-100%);
    transition: transform .28s var(--ease-standard);
    box-shadow: 4px 0 32px rgba(0,0,0,.25);
  }
  .tf-panel.collapsed { transform: translateX(-100%) !important; width: 100% !important; }
  .tf-panel:not(.collapsed) { transform: translateX(0); }
}

/* ── Resizer ── */
.tf-resizer {
  width: 5px; flex-shrink: 0; background: var(--surface-4);
  cursor: col-resize; transition: background var(--duration-fast);
  position: relative; z-index: var(--z-resizer);
}
.tf-resizer:hover, .tf-resizer.dragging { background: var(--tf-amber); }
.tf-resizer::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 3px; height: 32px; border-radius: 2px; background: rgba(0,0,0,.1);
}

@media (max-width: 768px) {
  .tf-resizer { display: none; }
}

/* ── Preview ── */
.tf-preview-wrap {
  flex: 1; overflow: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 24px 80px; gap: 16px;
  background: var(--surface-3);
}

@media (max-width: 768px) {
  .tf-preview-wrap {
    flex: none; width: 100%;
    min-height: calc(100dvh - var(--tf-topbar-h));
    padding: 16px 12px calc(80px + env(safe-area-inset-bottom));
  }
}

/* ── Preview Toolbar ── */
.tf-preview-toolbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border-radius: var(--r); padding: 6px 12px;
  box-shadow: var(--shadow-card); flex-shrink: 0; flex-wrap: wrap;
}
.tf-zoom-wrap  { display: flex; align-items: center; gap: 6px; }
.tf-zoom-label { font-size: 12px; color: var(--ink-3); font-weight: 600; min-width: 35px; }
.tf-page-warning {
  font-size: 12px; color: var(--color-warning); background: var(--color-warning-bg);
  border-radius: 6px; padding: 4px 10px; display: none;
}
.tf-page-warning.visible { display: inline-block; }

@media (max-width: 768px) {
  .tf-preview-toolbar { padding: 5px 10px; gap: 6px; }
}

/* ============================================================
   Pattern B: Single-Column Scrollable
   (exif-remover, future content tools)

   Desktop: [tf-topbar] → [#page: overflow-y:auto, centered content]
   Mobile:  Same layout — body stays overflow:hidden; only #page scrolls
   ============================================================ */

.tf-layout-scroll {
  flex: 1; overflow-y: auto; padding: 28px 20px 60px;
}
.tf-layout-scroll-content {
  max-width: var(--content-max-w); margin: 0 auto;
}

@media (max-width: 768px) {
  .tf-layout-scroll { padding: 20px 16px calc(72px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Pattern C: Equal-Split Editor
   (json-toolkit, future editor tools)

   Desktop: [tf-topbar] → [#workspace: #input-panel | .tf-resizer | #output-panel]
   Mobile:  Stacks vertically — input panel fixed height, output panel natural
   ============================================================ */

.tf-layout-editor {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}

@media (max-width: 768px) {
  html, body { height: auto; overflow-y: auto; }
  body { display: block; }
  .tf-layout-editor { display: block; overflow: visible; height: auto; }
  .tf-layout-editor > :first-child { height: 280px; border-bottom: 2px solid var(--surface-4); }
  .tf-layout-editor > :last-child  { height: auto; min-height: 300px; }
}

/* ============================================================
   Mobile Components
   (shared across Pattern A and Pattern C)
   ============================================================ */

/* ── Backdrop behind open panel — mobile only ── */
.tf-mob-overlay {
  display: none; position: fixed; inset: 0;
  z-index: var(--z-mob-overlay);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}
@media (max-width: 768px) {
  .tf-mob-overlay.visible { display: block; pointer-events: auto; }
}

/* ── Fixed bottom action bar ── */
.tf-mob-toolbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: var(--z-mob-toolbar);
  background: var(--surface);
  border-top: 1px solid var(--surface-4);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  gap: 8px; align-items: center;
  box-shadow: 0 -2px 12px rgba(15,23,42,.08);
}

@media (max-width: 768px) {
  .tf-mob-toolbar { display: flex; }
}

.tf-mob-toolbar .tf-btn { flex: 1; justify-content: center; min-height: 44px; }
.tf-mob-toolbar .tf-tb-btn-primary { flex: 1; justify-content: center; min-height: 44px; padding: 0 16px; }

/* ── Mobile settings drawer ── */
.tf-bottom-sheet {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: var(--z-bottom-sheet);
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(15,23,42,.22);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  max-height: 80dvh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s var(--ease-standard);
}
.tf-bottom-sheet.visible { display: block; }
.tf-bottom-sheet.open    { transform: translateY(0); }

.tf-bottom-sheet-handle {
  width: 36px; height: 4px; background: var(--surface-4);
  border-radius: 4px; margin: 0 auto 14px;
}

/* ── Hamburger toggle button ── */
.tf-burger {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 32px; height: 32px; border-radius: 6px; border: none;
  background: transparent; cursor: pointer; flex-shrink: 0; transition: background var(--duration-fast);
}
.tf-burger:hover { background: rgba(255,255,255,.08); }
.tf-burger span {
  display: block; width: 16px; height: 2px;
  background: rgba(255,255,255,.9); border-radius: 2px; transition: .22s var(--ease-standard);
  transform-origin: center;
}
.tf-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tf-burger.open span:nth-child(2) { opacity: 0; width: 0; }
.tf-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .tf-burger { width: 44px; height: 44px; }
}

/* ============================================================
   Toolbar (inside panels)
   ============================================================ */

.tf-toolbar {
  display: flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 12px; flex-shrink: 0;
  background: var(--surface-2); border-bottom: 1px solid var(--surface-4);
}

@media (max-width: 768px) {
  .tf-toolbar {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .tf-toolbar::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Tablet Range Overrides — Split-Panel Tools Only
   ============================================================ */

@media (max-width: 1100px) {
  /* --panel-w already reduced via tf-tokens.css */
  tf-topbar { --tf-product-display: none; }
  .tf-tb-sep { display: none; }
}

@media (max-width: 960px) {
  .tf-topbar-center { display: none; }
}