/* Layout shell (builds on your generator-ui.css variables) */
:root{ --ws-side: 260px; }
.ws-app{ max-width: 1200px; margin: 18px auto 40px; padding: 0 16px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; }

.ws-top{ position: sticky; top: 0; z-index: 10; background: var(--surface, #fff); border:1px solid var(--border,#e7e7e7); border-radius:12px; padding: 12px; box-shadow: 0 3px 18px rgba(0,0,0,.04); margin-bottom: 12px; }
.ws-top-inner{ display:flex; gap:12px; align-items:center; }
.ws-top-dynamic{ flex: 1 1 auto; min-height: 40px; display:flex; align-items:center; gap:12px; }
.ws-top-placeholder{ color:#777; }

.ws-main{ display:grid; grid-template-columns: var(--ws-side) 1fr 240px; gap: 12px; align-items:start; }
.ws-left, .ws-right{ background: var(--surface,#fff); border:1px solid var(--border,#e7e7e7); border-radius:12px; padding: 12px; }
.ws-center{ background: var(--surface,#fff); border:1px solid var(--border,#e7e7e7); border-radius:12px; padding: 12px; }

.ws-section{ margin-bottom: 16px; }
.ws-section h3{ margin: 0 0 8px; font-size: 16px; }
.ws-list{ display:grid; grid-template-columns: 1fr; gap: 8px; }
.ws-tool{ border:1px solid #dedede; background:#fff; padding:10px 12px; border-radius:8px; font-weight:600; cursor:pointer; text-align:left; }
.ws-tool:active{ transform: translateY(1px); }

.ws-thumbs{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
.ws-thumb{ border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; background:#fff; cursor:pointer; display:grid; place-items:center; height:84px; }
.ws-thumb img{ max-width:100%; max-height:100%; display:block; }

.activity-frame{ background:#fff; border:1px solid var(--border,#e7e7e7); border-radius:10px; padding: 12px; }
.canvas-frame{ background:#fff; border-radius:8px; }
#ws-canvas{ width:100%; height:auto; display:block; background:#fff; border-radius:8px; }

.ws-pages-head{ font-weight:700; margin-bottom:8px; }
.ws-pages{ display:grid; gap:10px; max-height: calc(100vh - 220px); overflow:auto; }
.ws-page{ position:relative; border:1px solid #e5e5e5; border-radius:8px; overflow:hidden; background:#fff; }
.ws-page img{ width:100%; height:auto; display:block; }
.ws-page-actions{ position:absolute; inset:auto 6px 6px 6px; display:flex; gap:6px; justify-content:space-between; }
.ws-page-actions .btn{ min-width:auto; padding:6px 8px; font-size:12px; }

.ws-bottom{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.ws-bottom .btn{ min-width:140px; }
.ws-small{ min-width:auto; padding:8px 10px; font-size:13px; }

/* Offscreen generators */
#ws-offscreen{ position: fixed; left: -9999px; top: -9999px; width:1px; height:1px; overflow:hidden; opacity:0; }

/* Dynamic top controls */
.ws-controls label{ font-weight:600; margin-right:6px; }
.ws-controls input[type="number"], .ws-controls input[type="text"], .ws-controls select{ height:34px; border:1px solid #dedede; border-radius:8px; padding:0 10px; }
.ws-controls input[type="color"]{ height:34px; width:48px; border:1px solid #dedede; border-radius:6px; padding:0; }
.ws-controls .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Disabled (login) */
[data-disabled="true"]{ opacity:.5; pointer-events:none; }

/* Keep Fabric's top canvas transparent so we can see the drawing underneath */
#worksheet-app .canvas-container .upper-canvas,
#worksheet-app .canvas-container .lower-canvas,
#worksheet-app canvas {
  background: transparent !important;
}

/* Defensive: kill any pseudo overlays the theme might add */
#worksheet-app .activity-frame::before,
#worksheet-app .canvas-frame::before,
#worksheet-app .canvas-frame::after {
  content: none !important;
  display: none !important;
}

/* Make sure our drawing canvas sits above any stray layers */
#worksheet-app .canvas-container,
#worksheet-app .canvas-container canvas {
  position: relative;
  z-index: 2;
}