/* Loopelo Toolbox: layout for the free "Vorlagen" view. Colours are mapped
   onto the Toolbox's own theme tokens (dark by default, light on
   :root[data-theme=light]); the sheet inside editor.css's preview stays white
   paper regardless, because print.css always paints .tpl-page white. */
#templates-workspace, #templates-workspace .tpl-editor {
  --tpl-ui-surface: var(--surface); --tpl-ui-paper: var(--surface-2); --tpl-ui-line: var(--line);
  --tpl-ui-ink: var(--text); --tpl-ui-muted: var(--muted); --tpl-ui-accent: var(--brand); --tpl-ui-danger: var(--danger);
}
.tpl-toolbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px }
.tpl-toolbox-card { display: block; text-align: left; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer }
.tpl-toolbox-card h3 { font-size: 16px; font-weight: 700 }
.tpl-toolbox-card p { margin-top: 6px; font-size: 13.5px; color: var(--muted) }
.tpl-event-picker { display: grid; gap: 5px; max-width: 360px; margin: 0 0 16px; font-weight: 700; font-size: 13.5px; color: var(--muted) }
.tpl-event-picker select { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit }
.tpl-event-picker small { font-weight: 500 }

#templates-workspace .tpl-toolbox-grid {grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));}
#templates-workspace .tpl-toolbox-card {min-width:0;padding:12px;border-radius:20px;}
.tpl-thumb {display:grid;place-items:center;padding:14px;background:var(--surface-2);border-radius:12px;}
.tpl-thumb img {width:100%;height:220px;object-fit:contain;filter:drop-shadow(0 4px 6px #0002);}
.tpl-toolbox-card p {display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.tpl-toolbox-card h3 {overflow-wrap:anywhere;margin:14px 0 0;}
.tpl-card-tags {display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.tpl-search {display:grid;gap:7px;max-width:400px;margin:0 0 20px;color:var(--muted);font-weight:700;}
.tpl-search input {width:100%;min-width:0;min-height:44px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;}
.tpl-groups {display:flex;flex-wrap:nowrap;gap:4px;margin:22px 0;max-width:100%;overflow-x:auto;}
.tpl-groups button {border-radius:999px;flex:none;white-space:nowrap;padding:8px;font-size:.75rem;}
.tpl-groups [aria-pressed="true"] {border-color:var(--text);background:var(--surface-2);color:var(--text);}
.tpl-season {border:1px solid var(--line);background:var(--surface-2);border-radius:20px;padding:18px;}
.tpl-season>div:first-child {display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:18px;}
.tpl-phone-intro {display:none;}
#view-templates h1 .status {font-family:inherit;font-size:.8rem;font-weight:700;vertical-align:middle;}
@media(min-width:1280px){#templates-workspace .tpl-toolbox-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(min-width:1280px){.tpl-groups{gap:3px}.tpl-groups button{padding-inline:4px}}
@media(max-width:767px){.tpl-desktop-intro{display:none}.tpl-phone-intro{display:block}#templates-workspace .tpl-toolbox-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tpl-thumb{padding:8px}.tpl-thumb img{height:150px}.tpl-toolbox-card h3{font-size:.9rem}.tpl-season{padding:12px}}

.tpl-toolbox-editor-head {display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px;}
.tpl-toolbox-editor-head h1 {font-size:clamp(1.4rem,3vw,2rem);margin:12px 0;overflow-wrap:anywhere;}
.tpl-toolbox-editor-head p {color:var(--muted);}
.tpl-toolbox-editor-head [data-back-to-catalogue] {width:auto;padding-left:0;text-align:left;}
.tpl-header-downloads,.tpl-editor-sticky {display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tpl-toolbox-layout {display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:18px;}
.tpl-toolbox-details,.tpl-toolbox-paper {min-width:0;padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--surface);}
.tpl-toolbox-paper {background:var(--surface-2);}
.tpl-toolbox-details .tpl-form {border:0;padding:0;}
#templates-workspace .tpl-editor {display:block;}
#templates-workspace .tpl-preview-col {min-width:0;}
#templates-workspace .tpl-actions {display:none;}
.tpl-logo-origin {display:flex;gap:10px;align-items:center;color:var(--muted);min-width:0;}
.tpl-logo-origin small {flex:1;min-width:0;}
.tpl-logo-origin button {width:auto;flex:none;}
.tpl-logo-avatar {display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:9px;background:var(--surface-2);color:var(--text);font-weight:700;}
.tpl-logo-avatar img {width:100%;height:100%;object-fit:contain;}
.tpl-owned-logo label {position:relative;}
.tpl-owned-logo input[type=file] {position:absolute;width:1px;height:1px;padding:0;border:0;clip-path:inset(50%);}
.tpl-owned-logo label:focus-within .tpl-logo-origin {outline:3px solid var(--focus);outline-offset:3px;}
.tpl-editor-sticky {display:none;}
#template-preview-dialog {width:min(1000px,calc(100vw - 24px));padding:24px;max-height:calc(100dvh - 24px);border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--text);overflow:auto;}
#template-preview-dialog header {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;}
#template-preview-dialog h2 {margin:0;font-size:1.2rem;}
.tpl-full-preview {position:relative;margin:auto;}
.tpl-full-stage {position:absolute;left:0;top:0;transform-origin:top left;}
@media(max-width:1024px){.tpl-toolbox-layout{grid-template-columns:minmax(0,1fr)}.tpl-toolbox-paper{order:1}.tpl-toolbox-details{order:2}.tpl-header-downloads{display:none}.tpl-editor-sticky{display:flex;position:sticky;bottom:calc(var(--toolbox-bottom-height,70px) + env(safe-area-inset-bottom));padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;z-index:5;margin-top:16px}.tpl-editor-sticky button{flex:1;min-width:0}.tpl-toolbox-details,.tpl-toolbox-paper{padding:14px}}

#view-templates:has([data-template-header]) > .page-heading {display:none;}