/* ============================================================
   WSPÓLNY widget: edytor marek i szablonów
   (dokładnie ten sam popup w edytorze i na dashboardzie)
   ============================================================ */

/* Zmienne, których nie ma w motywie dashboardu — spójne z motywem ciemnym */
:root {
  --brand-faint: var(--muted, #7a7a7a);
  --brand-line-soft: #26292d;
  --brand-disp: "Sora", sans-serif;
}

/* Overlay modala marek */
#brandOverlay.modal-overlay { align-items: flex-start; padding-top: 10vh; }
#brandOverlay .modal.brand-modal { width: min(740px, calc(100vw - 32px)); max-height: calc(90vh - 32px); }
#brandOverlay .bm-body {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  padding: 16px 20px 8px; flex: 1; min-height: 0; overflow: hidden;
}
#brandOverlay .bm-side { display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--brand-line-soft); padding-right: 14px; overflow-y: auto; min-height: 0; }
#brandOverlay .bm-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 9px 10px; border-radius: 5px; border: 1px solid transparent;
  font-weight: 700; font-size: 12.5px; color: var(--muted); cursor: pointer; transition: .15s; text-align: left; width: 100%; flex: none;
}
#brandOverlay .bm-item:hover { background: var(--panel-2); color: var(--text); }
#brandOverlay .bm-item.on { background: rgba(199,242,68,.07); border-color: rgba(199,242,68,.35); color: var(--text); }
#brandOverlay .bm-item .cnt { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 10px; color: var(--brand-faint); }
#brandOverlay #bmAdd { flex: none; margin-top: 4px; }

#brandOverlay .bm-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
#brandOverlay .bm-tabs button {
  padding: 6px 12px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--muted); transition: .15s; font-family: inherit; cursor: pointer;
}
#brandOverlay .bm-tabs button:hover { color: var(--text); border-color: #39424c; }
#brandOverlay .bm-tabs button.on { color: var(--accent); background: rgba(199,242,68,.08); border-color: transparent; }
#brandOverlay .bm-wrap { min-width: 0; min-height: 0; overflow-y: auto; padding-right: 6px; display: block; }
#brandOverlay .bm-empty { margin: auto; }
#brandOverlay .bm-main { display: flex; flex-direction: column; gap: 13px; }
#brandOverlay .bm-main textarea {
  width: 100%; min-height: 120px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 10px 11px; color: var(--text); resize: vertical; line-height: 1.55; font-family: inherit;
}
#brandOverlay .bm-main textarea:focus { outline: none; border-color: rgba(199,242,68,.5); }
#brandOverlay .bm-main textarea::placeholder { color: var(--brand-faint); }
#brandOverlay .pal-list { display: flex; flex-wrap: wrap; gap: 7px; }
#brandOverlay .pal-item { display: flex; align-items: center; gap: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 4px; }
#brandOverlay .pal-item input[type=color] { width: 32px; height: 25px; padding: 0; border: none; background: none; }
#brandOverlay .pal-x { width: 19px; height: 19px; border-radius: 5px; color: var(--brand-faint); font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; }
#brandOverlay .pal-x:hover { color: var(--danger); background: rgba(255,93,93,.1); }
#brandOverlay .tpl-list { display: flex; flex-direction: column; gap: 6px; }
#brandOverlay .tpl-item { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 7px 8px 7px 10px; }
#brandOverlay .ti-name { flex: 1; font-weight: 700; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#brandOverlay .ti-meta { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 10px; color: var(--brand-faint); flex: none; }
#brandOverlay .tpl-item .btn.ghost.sm { flex: none; }

#brandOverlay .logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
#brandOverlay .logo-tile {
  position: relative; aspect-ratio: 1/1; height: auto; border-radius: 5px; border: 1.5px dashed #333b44;
  background-color: #0c0e10; background-position: center; background-size: contain; background-repeat: no-repeat;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--brand-faint); font-size: 10.5px; font-weight: 700; text-align: center; padding: 0 4px;
}
#brandOverlay .logo-tile:hover { border-color: rgba(199,242,68,.45); color: var(--muted); }
#brandOverlay .logo-tile.has { border-style: solid; border-color: var(--line); }
#brandOverlay .lt-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 9px; font-weight: 600; color: #fff; background: rgba(10,12,14,.55); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#brandOverlay .logo-x { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 5px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center; border: none; cursor: pointer; }
#brandOverlay .logo-tile.has .logo-x { display: flex; }
#brandOverlay .logo-x:hover { background: rgba(255,93,93,.85); }

/* Dziubki palety przy polach koloru (edytor) */
.sw-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #5a5a5a; padding: 0; flex: none; cursor: pointer; transition: .12s; }
.sw-dot:hover { transform: scale(1.18); border-color: var(--accent); }

/* Pomocnicze klasy pól w modalu (spójne z edytorem) */
#brandOverlay .field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--muted); font-weight: 600; }
#brandOverlay .field.row { flex-direction: row; align-items: center; justify-content: space-between; }
#brandOverlay .field.col { flex-direction: column; }
#brandOverlay .field input[type=number], #brandOverlay .field input[type=text], #brandOverlay .field input[type=url], #brandOverlay .field input[type=password], #brandOverlay .field select {
  width: 100%; height: 29px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 0 8px; color: var(--text); transition: border-color .15s; font-family: inherit;
}
#brandOverlay .field input::placeholder { color: var(--muted); }
#brandOverlay .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--panel-2) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); }
#brandOverlay .field input:focus, #brandOverlay .field select:focus { outline: none; border-color: rgba(199,242,68,.5); }
#brandOverlay .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b939c' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; padding-right: 24px; }
#brandOverlay .field textarea { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--text); resize: vertical; font-family: inherit; }
#brandOverlay .field textarea:focus { outline: none; border-color: rgba(199,242,68,.5); }
#brandOverlay .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#brandOverlay .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#brandOverlay .btn.sm { height: 27px; padding: 0 10px; font-size: 11.5px; }
#brandOverlay .hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
#brandOverlay .fi-label { font-size: 11.5px; font-weight: 700; color: var(--muted); padding-left: 12px; margin-bottom: 4px; }
#brandOverlay .ef-row { display: flex; gap: 8px; }
#brandOverlay .fi-col { flex-direction: column; }
#brandOverlay .hidden-input { display: none; }
@media (max-width: 1240px) { #brandOverlay .bm-body { grid-template-columns: 165px 1fr; } }