:root{ --bg:#f4f6f9; --card:#fff; --primary:#1a4fb3; --primary2:#2c6bed; --border:#d7dce8; --text:#1b2742; --muted:#6b7c9b; --danger:#c0392b; --group:#eef3ff; --group2:#fff7d6; }
*{box-sizing:border-box}html,body{margin:0;font-family:"Segoe UI",Inter,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:16px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.brand{display:flex; align-items:center; gap:12px}
.brand h1{margin:0;font-size:20px;letter-spacing:.2px} .subtitle{font-size:12px;color:var(--muted)}
.herb{width:42px; height:50px; flex-shrink:0; object-fit:contain; display:block}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.auth{display:flex;align-items:center;gap:6px} .auth input{padding:7px 10px;border:1px solid var(--border);font-size:14px}
.btn{padding:8px 14px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:14px;line-height:1}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)} .btn.primary:hover{background:var(--primary2)}
.btn.secondary{background:#eef2ff} .btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.small{padding:5px 10px;font-size:13px}
.btn.large{padding:12px 20px;font-size:16px;font-weight:600}
.btn:disabled{opacity:.45; cursor:not-allowed; background:#e9ecf3; color:#8a94ad; border-color:#d7dce8}
.status{font-size:12px;min-width:90px} .muted{color:var(--muted)}
.dirty{font-size:12px; color:#b77900; background:#fff3cd; border:1px solid #ffe69c; padding:3px 7px; font-weight:600}
.tabs{display:flex;gap:6px;padding:8px 14px;background:#eef2ff;border-bottom:1px solid var(--border)}
.tab{padding:7px 12px;border:1px solid transparent;background:transparent;cursor:pointer;font-size:14px}
.tab.active{background:var(--card);border-color:var(--border);font-weight:600}
.tabPane{display:none;padding:12px} .tabPane.active{display:block}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.search{padding:7px 10px;border:1px solid var(--border);min-width:180px;font-size:14px}
.search.big{padding:12px 16px;font-size:18px;min-width:420px;flex:1}
.check{font-size:13px;display:flex;align-items:center;gap:4px} .hint{font-size:12px;color:var(--muted)} .counter{font-size:13px;font-weight:600;margin-left:auto}
.tree{display:flex;flex-direction:column;gap:8px}
.dept{border:1px solid var(--border);overflow:hidden;background:var(--card)}
.deptHead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;background:var(--group);user-select:none}
.deptHead.standalone{background:var(--group2)}
.deptTitle{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.deptTitle h3{margin:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deptMeta{font-size:12px;color:var(--muted);white-space:nowrap}
.deptTitleActions{display:flex;align-items:center;gap:6px}
.deptActions{display:flex;gap:4px;flex-shrink:0}
.dept.collapsed .deptBody{display:none}
.dept.dragging{opacity:.5}
.dept.dropTarget{outline:2px solid var(--primary); background:#e8efff}
.dragHandleDept{cursor:grab; user-select:none; padding:0 4px; color:var(--muted); font-weight:bold}
.dragHandleDept:active{cursor:grabbing}
.deptBody{padding:0}
.compactTable{width:100%;border-collapse:collapse;font-size:13px}
.compactTable th{background:#f7f8fb;border-bottom:1px solid var(--border);padding:5px 7px;text-align:left;font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.compactTable td{padding:5px 7px;border-bottom:1px solid #eef0f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.compactTable td.phone{white-space:nowrap}
.compactTable tr:hover td{background:#fafbff}
.compactTable tr.dragging{opacity:.5}
.compactTable tr.dropTarget td{outline:2px dashed var(--primary); background:#e8efff}
.rowActions{display:flex;gap:3px}
.rowActions .btn{padding:3px 7px;font-size:12px}
.rowActions .btn:disabled{opacity:.4}
.dragHandle{cursor:grab; user-select:none; padding:0 4px; color:var(--muted)}
.dragHandle:active{cursor:grabbing}
.empty{padding:10px;font-size:13px;color:var(--muted);font-style:italic;text-align:center}
/* preview */
.previewTopbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.previewControls{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.sidebar{position:fixed;top:0;right:-420px;width:400px;height:100vh;background:var(--card);border-left:1px solid var(--border);z-index:40;transition:right .25s ease;overflow:auto;padding:14px}
.sidebar.open{right:0}
.sidebar h3{margin:0 0 8px 0;font-size:14px}
.sidebar .cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px; font-size:13px}
.sidebar .cols label{display:flex;align-items:center;gap:4px}
.card{background:var(--card);border:1px solid var(--border);padding:10px}
.card h3{margin:0 0 6px 0;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px; font-size:13px}
.cols label{display:flex;align-items:center;gap:4px}
.radio{display:flex;gap:10px;font-size:13px;flex-wrap:wrap}
.exportActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.tableWrapper{overflow:auto;background:var(--card);border:1px solid var(--border)}
.groupedTable{width:100%;border-collapse:collapse;font-size:var(--table-font-size,13px)}
.fontControls{display:flex; gap:4px; align-items:center; margin-left:6px}
.fontControls .btn{padding:4px 8px; font-weight:600; min-width:32px}
.fontControls span{font-size:12px; color:var(--muted); white-space:nowrap}
.groupedTable th{background:#1a4fb3;color:#fff;padding:6px 7px;text-align:left;white-space:nowrap;font-weight:600;position:sticky;top:0;z-index:1}
.groupedTable td{padding:5px 7px;border-bottom:1px solid #e8ecf3;white-space:nowrap}
.groupedTable td.phone{white-space:nowrap}
.groupHeader td{background:rgb(26,79,179);font-weight:700;color:white;padding:7px;border-top:2px solid rgb(21,64,145);font-size:calc(var(--table-font-size,13px) + 2px)}
.groupHeader.standalone td{background:rgb(26,79,179);color:white}
.groupedTable tr.dataRow:nth-child(even) td{background:#fcfdff}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.modalCard{background:var(--card);padding:14px;min-width:420px;max-width:560px;width:92%;max-height:92vh;overflow:auto;max-width:420px}
.modalCard h2{margin:0 0 10px 0;font-size:16px}
.modalCard label{display:block;font-size:13px;margin:7px 0 3px 0;font-weight:600}
.modalCard input,.modalCard textarea,.modalCard select{width:100%;padding:7px 10px;border:1px solid var(--border);font-size:14px}
.modalCard textarea{min-height:52px;resize:vertical}
.modalCard .checkRow{display:flex;align-items:center;gap:8px;margin:10px 0 0 0;font-weight:400;font-size:13px;cursor:pointer}
.modalCard .checkRow input[type="checkbox"]{width:16px;height:16px;margin:0;flex-shrink:0;accent-color:var(--primary)}
.modalCard .checkRow span{line-height:1.2}
.modalActions{display:flex;justify-content:flex-end;gap:6px;margin-top:12px}
.footer{padding:8px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);background:var(--card)}
.hidden{display:none !important}
.authGate{position:fixed;inset:0;background:rgba(245,247,251,.92);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.authGate.hidden{display:none !important}
.authGateCard{background:var(--card);border:1px solid var(--border);padding:22px;min-width:360px;max-width:420px;width:100%;text-align:left}
.authGateCard h2{margin:0 0 6px 0;font-size:18px}
#printTablesContainer{display:none}
.printHeader{display:none; text-align:left; margin-bottom:18px; padding:10px 0 10px 0; border-bottom:2px solid var(--primary)}
.printHeader h1{margin:0; font-size:18px}
.printHeader .printDate{font-size:11px; color:var(--muted); margin-top:4px}
.printFooter{display:none; position:fixed; bottom:5mm; right:10mm; font-size:8pt; color:#6b7c9b; text-align:right; font-family:"Segoe UI", Roboto, sans-serif}
@media print{
  .printFooter{display:block !important}
  .printFooter::after{content:"Strona " counter(page) " z " counter(pages)}
}
.sortable{cursor:pointer; user-select:none}
.sortable:hover{background:#dde6ff !important}
th.sorted-asc::after{content:" ▲"; font-size:10px}
th.sorted-desc::after{content:" ▼"; font-size:10px}
.datetime{text-align:right; font-size:12px; line-height:1.25; min-width:160px; color:var(--muted)}
.datetime #dateDisplay{font-weight:600; color:var(--text); font-size:13px; text-transform:capitalize}
.datetime #timeDisplay{font-family:ui-monospace, "Consolas", monospace; font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:0.3px}
.emailLink{color:var(--primary); text-decoration:none}
.emailLink:hover{text-decoration:underline}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:35;display:none}
.overlay.show{display:block}
.appVersion{position:fixed;bottom:6px;right:10px;font-size:11px;color:#4a5a7a;background:rgba(255,255,255,.92);border:1px solid #d7dce8;padding:3px 8px;z-index:60;pointer-events:none;letter-spacing:.2px}
@media print{
  .topbar,.tabs,.previewControls,.toolbar,.footer,.sidebar,.overlay,.authGate,.previewTopbar,#exportBar,.card,.hint,.counter{display:none !important}
  body{padding:0 !important; background:#fff !important}
  main{padding:0 !important}
  .tabPane{display:block !important} #tab-edit{display:none !important}
  .printHeader{display:block !important; visibility:visible !important}
  .tableWrapper{display:none !important}
  #printTablesContainer{display:block !important; visibility:visible !important}
  #printTablesContainer *{visibility:visible !important}
  @page{size:A4 landscape; margin:10mm 10mm 18mm 10mm}
  .groupedTable{border-collapse:collapse !important}
  .groupedTable th{border:0.6pt solid #94a3b8 !important; background:#e2e8f0 !important; color:#1e293b !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .groupedTable td{border:0.4pt solid #cbd5e1 !important; padding:4px 5px !important}
  .groupedTable td.phone{white-space:nowrap !important}
  .groupHeader td{border-top:1.2pt solid rgb(21,64,145) !important; border-bottom:0.6pt solid #1a4fb3 !important; background:rgb(26,79,179) !important; color:white !important; font-size:calc(var(--table-font-size,13px) + 2px) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .dept-table{break-inside:auto; page-break-inside:auto; break-before:auto; page-break-before:auto; margin-bottom:14mm; width:100%; border-collapse:collapse}
  #printTablesContainer .dept-table{margin-bottom:16mm}
  #printTablesContainer .dept-table:last-child{margin-bottom:0}
  .dept-table:last-child{margin-bottom:0}
  #printTablesContainer{display:none}
  #printTablesContainer.printVisible{display:block !important}
  .emailLink{color:inherit !important; text-decoration:none !important; pointer-events:none}
}
@media (max-width:900px){ .previewControls{flex-direction:column} .topbar{flex-direction:column;align-items:flex-start} .search.big{min-width:240px} }