/* ============================================================
     RESET + ZMIENNE
     ============================================================ */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  :root {
    --bg: #f5f4f0;
    --panel: #ffffff;
    --border: #e6e3dc;
    --text: #1f2230;
    --muted: #6b6f7d;
    --accent: #1e3a5f;       /* granat — krzesła zajęte, przyciski */
    --accent-2: #2c5282;
    --chair-empty: #c9d4e2;  /* jasnoniebieskie puste krzesło */
    --chair-empty-bd: #8aa1bd;
    --table-fill: #e8d6b3;   /* ciepły beż — stół */
    --table-bd: #b89968;
    --table-selected: #ff9f1c;
    --danger: #c0392b;
    --shadow: 0 2px 8px rgba(20, 25, 40, 0.06);
    --shadow-lg: 0 8px 24px rgba(20, 25, 40, 0.12);
    --radius: 10px;
  }
  body {
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  input, button, select, textarea {
    font-family: inherit;
  }

  /* ============================================================
     PASEK GÓRNY
     ============================================================ */
  header.topbar {
    height: 56px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    box-shadow: var(--shadow);
    z-index: 10;
  }
  header.topbar h1 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.2px;
  }
  header.topbar .spacer { flex: 1; }

  /* Brand block: logo mark + wordmark + tagline */
  header.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background .15s;
  }
  header.topbar .brand:hover { background: #f7f6f2; }
  header.topbar .brand-mark {
    width: 40px;
    height: 40px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
  }
  header.topbar .brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
  }
  header.topbar .brand-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.2px;
  }
  header.topbar .brand-tag {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: 0.1px;
  }
  .btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s;
  }
  .btn:hover { background: #f7f6f2; }
  .btn:active { transform: translateY(1px); }
  .btn svg {
    display: inline-block;
    vertical-align: -3px;
    margin-right: 5px;
  }
  .btn.primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
  .btn.ghost { background: transparent; }
  .btn.danger { color: var(--danger); border-color: #e6c4be; }
  .btn.danger:hover { background: #fdecea; }

  /* Coffee CTA w topbarze */
  .coffee-cta {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
  }
  .coffee-cta img {
    height: 36px;
    width: auto;
    display: block;
    border-radius: 10px;
    transition: transform .15s, box-shadow .15s;
  }
  .coffee-cta:hover img {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 144, 82, 0.3);
  }

  /* PDF eksport — wybór layoutu i stylu (tile buttons) */
  .pdf-opt-row {
    display: flex;
    gap: 8px;
  }
  .pdf-opt-row-styles { flex-wrap: wrap; }
  .pdf-opt {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: 1.5px solid var(--border);
    background: var(--panel);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .05s;
    font-family: inherit;
  }
  .pdf-opt:hover { border-color: var(--accent); background: #f7f6f2; }
  .pdf-opt.active {
    border-color: var(--accent);
    background: #eef2f8;
  }
  .pdf-opt-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }
  .pdf-opt-sub {
    font-size: 11px;
    color: var(--muted);
  }
  .pdf-opt-mini {
    display: block;
    width: 32px;
    height: 44px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 2px;
    position: relative;
    margin-bottom: 4px;
  }
  .pdf-opt-mini.layout-1::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: var(--accent);
    opacity: 0.2;
    border-radius: 1px;
  }
  .pdf-opt-mini.layout-2::before,
  .pdf-opt-mini.layout-2::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    height: 16px;
    background: var(--accent);
    opacity: 0.2;
    border-radius: 1px;
  }
  .pdf-opt-mini.layout-2::before { top: 4px; }
  .pdf-opt-mini.layout-2::after { bottom: 4px; }
  .pdf-opt-mini.layout-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    padding: 4px;
  }
  .pdf-opt-mini.layout-4::before,
  .pdf-opt-mini.layout-4::after {
    content: '';
    background: var(--accent);
    opacity: 0.2;
    border-radius: 1px;
  }
  .pdf-opt-mini.layout-4 {
    /* uses 4 cells via box-shadow trick below */
  }
  .pdf-opt-mini.layout-4::before {
    box-shadow:
      14px 0 0 var(--accent),
      0 18px 0 var(--accent),
      14px 18px 0 var(--accent);
    width: 10px; height: 14px;
    opacity: 0.2;
  }
  .pdf-opt-mini.layout-4::after { display: none; }

  /* Modal "Postaw kawę" — coffee tiles */
  .donate-modal { max-width: 440px; }
  .donate-modal h3 { text-align: center; font-size: 18px; margin-bottom: 12px; }
  .donate-msg {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    text-align: center;
    margin: 0 0 20px;
  }
  .coffee-tiles {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 16px;
  }
  .coffee-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 14px 10px;
    border-radius: 14px;
    background: #009052;
    color: #fff;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s;
    box-shadow: 0 4px 10px rgba(0, 144, 82, 0.18);
  }
  .coffee-tile:hover {
    transform: translateY(-2px);
    background: #00a35e;
    box-shadow: 0 8px 18px rgba(0, 144, 82, 0.28);
  }
  .coffee-tile img {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
  }
  .coffee-tile span {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
  }

  /* ============================================================
     UKŁAD: SIDEBAR + WORKSPACE
     ============================================================ */
  main.layout {
    flex: 1;
    display: flex;
    min-height: 0;
  }
  aside.sidebar {
    width: 300px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .sidebar h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin: 18px 16px 8px;
    font-weight: 600;
  }
  .sidebar .row { padding: 0 16px; display: flex; gap: 8px; }
  .sidebar input[type="text"], .sidebar input[type="search"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: #fbfaf6;
  }
  .sidebar input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

  /* Search input with leading icon */
  .sidebar .search-wrap {
    position: relative;
    margin: 0 16px 8px;
  }
  .sidebar .search-wrap > svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
  }
  .sidebar .search-wrap input[type="search"] {
    padding-left: 32px;
  }
  /* Search anchored at bottom of sidebar (sticky bottom row) */
  .sidebar .search-wrap.sidebar-bottom {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    flex-shrink: 0;
  }
  .sidebar .search-wrap.sidebar-bottom > svg { left: 26px; }
  .sidebar .search-wrap input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
  }

  /* Sidebar primary button — większy emphasis */
  .sidebar .btn.primary {
    padding: 9px 14px;
    box-shadow: 0 1px 2px rgba(30, 58, 95, 0.15);
  }
  .sidebar .btn svg {
    vertical-align: -3px;
    margin-right: 6px;
  }
  .toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--muted);
  }
  .guest-count {
    margin-left: auto;
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--muted);
  }
  ul.guest-list {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 8px 8px 16px;
    list-style: none;
  }
  ul.guest-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    font-size: 13px;
  }
  ul.guest-list li:hover { background: #f5f4ee; }
  ul.guest-list li.dragging { opacity: 0.4; }
  ul.guest-list li .avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
  }
  ul.guest-list li .name { flex: 1; }
  ul.guest-list li .del {
    opacity: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
  }
  ul.guest-list li:hover .del { opacity: 1; }
  ul.guest-list li .del:hover { color: var(--danger); }
  /* Edit pencil — ZAWSZE widoczny (subtelnie), żeby user wiedział że można edytować.
     Explicit rozmiar żeby flexbox go nie ścisnął, SVG też explicit width. */
  .guest-edit {
    border: none;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s, background .15s;
  }
  .guest-edit svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  /* To samo dla SVG w innych przyciskach — atrybuty SVG presentation
     nie zawsze przechodzą przez DOMParser, więc enforce w CSS. */
  .btn svg, .table-actions button svg {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  .guest-edit:hover { background: #eef2f8; opacity: 1; }
  ul.guest-list li:hover .guest-edit,
  .seated-group-items li:hover .guest-edit { opacity: 0.85; }

  /* Delete X na liście "Goście z miejscem" — taki sam jak w "Bez miejsca" */
  .seated-group-items li .del {
    opacity: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
    transition: opacity .15s, color .15s;
  }
  .seated-group-items li:hover .del { opacity: 0.85; }
  .seated-group-items li .del:hover { color: var(--danger); opacity: 1; }
  .unassigned-zone {
    border: 2px dashed transparent;
    border-radius: 8px;
    transition: border-color .15s, background .15s;
  }
  .unassigned-zone.drag-over {
    border-color: var(--accent);
    background: #eef2f8;
  }
  .empty-hint {
    padding: 24px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
  }
  /* Sekcja "Goście z miejscem" — pogrupowane wg stołu */
  .seated-groups {
    max-height: 35%;
    overflow-y: auto;
    padding: 0 8px 16px;
    border-top: 1px solid var(--border);
  }
  .seated-group {
    margin-top: 6px;
  }
  .seated-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
  }
  .seated-group-header:hover { background: #eef2f8; }
  .seated-group-header .chev {
    display: inline-block;
    transition: transform .15s;
    color: var(--muted);
    font-size: 10px;
  }
  .seated-group.collapsed .chev { transform: rotate(-90deg); }
  .seated-group.collapsed .seated-group-items { display: none; }
  .seated-group-count {
    margin-left: auto;
    background: var(--bg);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
  }
  .seated-group-items {
    list-style: none;
    margin: 0;
    padding: 2px 0 4px 8px;
  }
  .seated-group-items li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
  }
  .seated-group-items li:hover { background: #f5f4ee; }
  .seated-group-items .avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    flex-shrink: 0;
  }

  /* ============================================================
     WORKSPACE / PLANSZA
     ============================================================ */
  section.workspace {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg);
  }
  .canvas {
    position: absolute;
    inset: 0;
    overflow: auto;
    /* delikatna kratka w tle */
    background-image:
      linear-gradient(rgba(30, 58, 95, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30, 58, 95, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
  }
  .canvas-inner {
    position: relative;
    width: 3000px;
    height: 2000px;
    transform-origin: 0 0;
  }

  /* STÓŁ */
  .table {
    position: absolute;
    user-select: none;
  }
  .table-body {
    background: var(--table-fill);
    border: 2px solid var(--table-bd);
    border-radius: 8px;
    box-shadow: var(--shadow);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: box-shadow .15s, outline-color .15s;
    outline: 3px solid transparent;
    outline-offset: 4px;
  }
  .table-body.round { border-radius: 50%; }
  .table.selected .table-body {
    outline-color: var(--table-selected);
    box-shadow: var(--shadow-lg);
  }
  .table-body:active { cursor: grabbing; }
  .table-name,
  .table-name-h {
    font-weight: 600;
    font-size: 13px;
    color: #6b4a1f;
    letter-spacing: 0.5px;
    pointer-events: none;
    text-align: center;
    padding: 4px 8px;
    max-width: 100%;
    word-wrap: break-word;
  }
  .table-actions {
    /* Pozycja musi być POWYŻEJ krzeseł górnej krawędzi.
       Krzesła sięgają y od -42 do -8. Toolbar ~24px wys. → top -70 daje 4px luzu. */
    position: absolute;
    top: -72px;
    right: 0;
    display: none;
    gap: 4px;
    z-index: 10;
  }
  .table.selected .table-actions { display: flex; }
  .table-actions button {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow);
    white-space: nowrap;
  }
  .table-actions button:hover { background: #f7f6f2; }
  .table-actions button.del { color: var(--danger); border-color: #e6c4be; }
  .table-actions button.del:hover { background: #fdecea; }

  /* KRZESŁO */
  .chair {
    position: absolute;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--chair-empty);
    border: 1.5px solid var(--chair-empty-bd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    transition: background .15s, border-color .15s, transform .1s;
    overflow: hidden;
    text-align: center;
    line-height: 1.1;
    padding: 2px;
  }
  .chair.occupied {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    cursor: grab;
  }
  .chair.drag-over {
    transform: scale(1.15);
    border-color: var(--table-selected);
    border-width: 2px;
  }
  .chair-label {
    pointer-events: none;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Tooltip po kliknięciu na krzesło zajęte */
  #chair-tooltip {
    position: fixed;
    display: none;
    background: var(--accent);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 6px 16px rgba(20, 25, 40, 0.22);
    z-index: 200;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -100%);
  }
  /* "Strzałka" wskazująca na krzesło — trójkąt pod tooltipem */
  #chair-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent);
    border-bottom: 0;
  }
  #chair-tooltip .tt-name { font-weight: 600; }
  #chair-tooltip .tt-sub  { font-size: 11px; opacity: 0.75; margin-top: 2px; }

  /* DOLNY PASEK STATYSTYK */
  footer.statusbar {
    height: 36px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 24px;
    font-size: 12px;
    color: var(--muted);
  }
  footer.statusbar strong { color: var(--text); font-weight: 600; }
  footer.statusbar .credit {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
  }
  footer.statusbar .credit a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
  }
  footer.statusbar .credit a:hover { text-decoration: underline; }
  footer.statusbar .credit svg { opacity: 0.85; }

  /* ZOOM (na razie placeholder w prawym dolnym rogu) */
  .zoom-controls {
    position: absolute;
    right: 16px;
    bottom: 52px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 5;
  }
  .zoom-controls button {
    width: 36px; height: 36px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: var(--shadow);
    transition: background .15s;
  }
  .zoom-controls button:hover { background: #f7f6f2; }
  .zoom-controls button:disabled { opacity: .4; cursor: not-allowed; }
  #zoom-pct {
    width: 36px; height: 22px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    user-select: none;
  }

  /* ============================================================
     MODAL
     ============================================================ */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 25, 40, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }
  .modal-backdrop.open { display: flex; }
  .modal {
    background: var(--panel);
    border-radius: 14px;
    padding: 24px;
    min-width: 360px;
    max-width: 90vw;
    box-shadow: var(--shadow-lg);
  }
  .modal h3 { margin: 0 0 16px; font-size: 16px; }
  .modal .field { margin-bottom: 14px; }
  .modal label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 500;
  }
  .modal input[type="text"], .modal input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
  }
  .edge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .shape-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .shape-btn {
    appearance: none;
    border: 2px solid var(--border);
    background: var(--panel);
    border-radius: 10px;
    padding: 14px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    transition: border-color .15s, color .15s, background .15s;
  }
  .shape-btn:hover { border-color: var(--accent); color: var(--text); }
  .shape-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: #f0f4fa;
  }
  .shape-btn svg { display: block; }
  .modal .actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
  }