/* ======================================================================
   Talpie – Corporate AIO CSS (DesktopJS + TalpieUI + SPA)
   - Subtelny glass (backdrop-blur), ostre krawędzie, systemowe gradienty
   - Spójne dark/light, dostępne kontrasty, focus outline, reduced motion
   - Wspólny wygląd Paneli, TreeView, DataTable, Spinnerów i Błędów
   ====================================================================== */

/* ----------------------- Normalize / Base ----------------------- */
* { box-sizing: border-box; }
html, body, #wrapper { height: 100%; }
html, body {
  margin: 0;
  font: 14px/1.35 system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* domyślnie nie pozwalaj przeciągać/oznaczać UI; content w oknach ma wyjątek */
body, #desktop, .titlebar, .task-btn, .icon { user-select: none; }
.window .content, .window .content * { user-select: none; }

/* ----------------------- Variables ----------------------- */
:root{
  /* Palette – DARK */
  --bg:         #0e1116;
  --panel:      rgba(20, 25, 34, .65);
  --panel-2:    rgba(15, 20, 32, .55);
  --panel-3:    rgba(11, 16, 25, .55);
  --text:       #e7ecf5;
  --muted:      #a9b3c5;
  --border:     rgba(51, 66, 92, .75);
  --border-2:   rgba(87, 120, 168, .95);
  --accent:     #3daee9;
  --accent-2:   #66c1f0;

  /* Radii / Shadows / Layout */
  --radius:     8px;
  --radius-sm:  6px;
  --shadow:     0 10px 28px rgba(0,0,0,.45);
  --shadow-lg:  0 18px 48px rgba(0,0,0,.55);
  --focus:      0 0 0 2px rgba(61,174,233,.45);

  /* Glass controls */
  --glass-blur: 12px;
  --glass-sat:  120%;

  /* Icon layout */
  --icon-width:  96px;
  --icon-pad-y:  10px;
  --icon-pad-x:   6px;

  /* Taskbar */
  --tb-h:       46px;

  /* Icon label chip */
  --label-plate:     rgba(8,12,20,.35);
  --label-plate-brd: rgba(255,255,255,.08);
  --label-plate-hov: rgba(8,12,20,.45);
  --label-plate-act: rgba(61,174,233,.20);
  --label-plate-act-brd: rgba(61,174,233,.40);

  /* Scrollbars (WebKit) */
  --scrollbar-bg: rgba(255,255,255,.06);
  --scrollbar-thumb: rgba(255,255,255,.18);
}

/* ======================= LIGHT THEME ======================= */
:root[data-theme="light"]{
  --bg:         #f3f6fb;
  --panel:      rgba(255,255,255,.65);
  --panel-2:    rgba(246,248,251,.70);
  --panel-3:    rgba(240,243,248,.75);
  --text:       #0f1622;
  --muted:      #516179;
  --border:     rgba(185,196,212,.75);
  --border-2:   rgba(140,185,215,.95);
  --accent:     #2a86c9;
  --accent-2:   #5aa7dc;

  --shadow:    0 10px 28px rgba(10,28,58,.08);
  --shadow-lg: 0 18px 48px rgba(10,28,58,.12);
  --focus:     0 0 0 2px rgba(42,134,201,.30);

  --label-plate:     rgba(255,255,255,.70);
  --label-plate-brd: rgba(0,0,0,.08);
  --label-plate-hov: rgba(255,255,255,.85);
  --label-plate-act: rgba(42,134,201,.18);
  --label-plate-act-brd: rgba(42,134,201,.35);

  --scrollbar-bg: rgba(0,0,0,.05);
  --scrollbar-thumb: rgba(0,0,0,.18);
}

/* ----------------------- Backgrounds ----------------------- */
body{
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #152135 0%, rgba(21,33,53,0) 50%) fixed,
    linear-gradient(180deg,#0d121a 0%, #0b0f17 100%) fixed;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(1200px 600px at 10% -10%, #eaf2fb 0%, rgba(234,242,251,0) 50%) fixed,
    linear-gradient(180deg,#f7fafe 0%, #eef3f9 100%) fixed;
}

/* Selection */
::selection{ background: rgba(61,174,233,.35); color: #fff; }
:root[data-theme="light"] ::selection{ background: rgba(42,134,201,.35); }

/* Scrollbars */
*::-webkit-scrollbar{ width:12px; height:12px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border: 3px solid transparent; border-radius: 10px; background-clip: content-box;
}
*{ scrollbar-color: var(--scrollbar-thumb) transparent; scrollbar-width: thin; }

/* ----------------------- Wallpaper ----------------------- */
#wallpaper{
  position:absolute; inset:0; z-index:0;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  transition: filter .2s ease, opacity .2s ease, background-position .2s ease, background-size .2s ease;
  pointer-events:none;
}

/* ----------------------- Wrapper / Desktop ----------------------- */
#wrapper{ position:relative; overflow:hidden; }
#desktop{
  position:absolute; inset:0 0 var(--tb-h) 0;
  padding:12px; outline:none;
  background: radial-gradient(900px 600px at 100% 120%, rgba(61,174,233,.10), rgba(61,174,233,0) 60%) no-repeat;
}
:root[data-theme="light"] #desktop{
  background: radial-gradient(900px 600px at 100% 120%, rgba(42,134,201,.10), rgba(42,134,201,0) 60%) no-repeat;
}

/* Ghost layer (drag preview) */
#ghostLayer{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.ghost-icon{ opacity:.65; filter:grayscale(.1); transform:translateZ(0); }

/* ----------------------- Ikony ----------------------- */
.icon{
  position:absolute; z-index:1;
  width:var(--icon-width);
  text-align:center;
  padding:var(--icon-pad-y) var(--icon-pad-x);
  border-radius: var(--radius);
  color:var(--text);
  border:1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, opacity .15s ease, border .12s ease, z-index .12s ease;
}
.icon .glyph{
  display:grid; place-items:center;
  width:60px; height:60px; margin:0 auto 6px;
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#161e2b,#121826);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.25);
  font-size:32px;
}

/* PNG/URL glyphs (zgodne z DesktopJS _renderGlyph) */
.icon .glyph img.tp-glyph { width:48px; height:48px; object-fit:contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.window .titlebar .glyph img.tp-glyph { width:18px; height:18px; object-fit:contain; vertical-align:middle; }
.task-btn .mini-glyph img.tp-glyph { width:14px; height:14px; object-fit:contain; vertical-align:middle; }

/* Etykieta ikony */
.icon .label{
  display:inline-block;
  padding:3px 8px;
  border-radius:7px;
  font-weight:600; font-size:12px; letter-spacing:.2px;
  background: var(--label-plate);
  border:1px solid var(--label-plate-brd);
  backdrop-filter: saturate(130%) blur(6px); -webkit-backdrop-filter: saturate(130%) blur(6px);
  max-width: calc(var(--icon-width) - 8px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ikony – stany */
.icon:hover{
  z-index:2; transform: translateY(-2px);
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.icon:hover .label{ background: var(--label-plate-hov); }
.icon.active{
  z-index:3;
  background: linear-gradient(180deg, rgba(61,174,233,.22), rgba(61,174,233,.12));
  border-color: var(--border-2);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(61,174,233,.24) inset;
}
.icon.active .label{
  background: var(--label-plate-act); border-color: var(--label-plate-act-brd);
  white-space: normal; overflow: visible; text-overflow: clip;
}
.icon.dragging{ z-index:4; opacity:.95; transform: scale(.985); }
.icon.hidden{ visibility:hidden; }
.icon:focus-visible{ outline:none; box-shadow: var(--focus); }

/* ----------------------- Okna ----------------------- */
.window{
  position:absolute; display:none; overflow:hidden; z-index:2;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease, border-color .15s ease, opacity .12s ease, transform .12s ease, filter .12s ease, background-color .15s ease;
}
/* Glass */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .window, #taskbar, .ctx{
    -webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
    backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
  }
}
/* Aktywność */
.window:not(.active){ opacity:.92; filter: saturate(.95) brightness(.98); }
.window.active{
  border-color: var(--border-2);
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(61,174,233,.24) inset, 0 1px 0 rgba(255,255,255,.06) inset;
}
.window.active::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Titlebar */
.window .titlebar{
  height:34px; display:flex; align-items:center; gap:10px; padding:0 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(30,40,58,.72), rgba(20,28,44,.60));
  color:var(--text); cursor:grab; user-select:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.window.active .titlebar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(36,52,78,.78), rgba(23,33,50,.7));
  box-shadow: inset 0 -1px 0 rgba(61,174,233,.35);
}
.window .titlebar .glyph{ width:18px; height:18px; border-radius:4px; display:grid; place-items:center; font-size:13px; }
.window .title{ font-weight:700; letter-spacing:.2px; }
.window .controls{ margin-left:auto; display:flex; gap:6px; }

/* Titlebar buttons */
.window .btn{
  width:28px; height:22px; border-radius: var(--radius-sm);
  display:grid; place-items:center; cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.window .btn:hover{
  background: linear-gradient(180deg, rgba(61,174,233,.22), rgba(61,174,233,.06)), rgba(61,174,233,.10);
  border-color: rgba(61,174,233,.45);
}
.window .btn:active{ transform: translateY(1px) scale(.98); }
.window .btn.btn-close:hover{ background: rgba(235,87,87,.18); border-color: rgba(235,87,87,.4); }
.window .btn.btn-min:hover{   background: rgba(255,208,96,.18); border-color: rgba(255,208,96,.4); }
.window .btn.btn-max:hover{   background: rgba(115,225,164,.18); border-color: rgba(115,225,164,.4); }

/* Treść / status */
.window .content{
  position:absolute; inset:34px 0 24px 0;
  background: var(--panel-2);
  overflow:auto;
}
.window .status{
  position:absolute; left:0; right:0; bottom:0; height:24px;
  display:flex; align-items:center; padding:0 10px;
  font-size:12px; color:var(--muted);
  background: var(--panel-3);
  border-top:1px solid rgba(255,255,255,.08);
}

/* Max/Min/Resize */
.window.max{ border-radius: 0; }
.window.minimizing{ opacity:.9; }
.resize-handle{
  position:absolute; width:14px; height:14px; right:6px; bottom:6px;
  opacity:.6; cursor:nwse-resize;
}
.resize-handle::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, transparent 0 50%, rgba(255,255,255,.2) 50% 60%, transparent 60% 100%);
}

/* ----------------------- Taskbar ----------------------- */
#taskbar{
  position:absolute; left:0; right:0; bottom:0; height:var(--tb-h);
  display:flex; align-items:center; gap:10px; padding:6px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), rgba(14, 20, 32, .55);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -6px 18px rgba(0,0,0,.4);
  z-index: 99;
}
:root[data-theme="light"] #taskbar{
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent 40%), rgba(244, 248, 253, .65);
  border-top-color: rgba(0,0,0,.08);
  box-shadow: 0 -6px 18px rgba(10,28,58,.08);
}

/* Show Desktop / Theme toggle */
#show-desktop, #theme-toggle{
  width:32px; height:32px; border-radius: var(--radius); color:var(--text);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer; transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
#show-desktop:hover, #theme-toggle:hover{
  background: rgba(61,174,233,.16);
  border-color: rgba(61,174,233,.45);
}
:root[data-theme="light"] #show-desktop,
:root[data-theme="light"] #theme-toggle{
  background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08);
}
:root[data-theme="light"] #show-desktop:hover,
:root[data-theme="light"] #theme-toggle:hover{
  background: rgba(42,134,201,.12); border-color: rgba(42,134,201,.30);
}
#show-desktop:active, #theme-toggle:active{ transform: translateY(1px) scale(.98); }

/* Task list */
#taskbar-list{
  display:flex; gap:8px; padding:0; margin:0; flex:1 1 auto; overflow-x:auto;
  scrollbar-width: thin;
}
.task-btn{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; min-width:150px; height:32px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  cursor:pointer; white-space:nowrap;
  transition: background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease, opacity .12s ease, filter .12s ease;
  user-select:none;
}
.task-btn .mini-glyph{
  width:18px; height:18px; border-radius:4px; display:grid; place-items:center; font-size:12px;
  background: linear-gradient(180deg,#161e2b,#121826);
  border:1px solid rgba(255,255,255,.07);
}
.task-btn:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.task-btn:active{ transform: translateY(1px) scale(.99); }
.task-btn.active{
  background: linear-gradient(180deg, rgba(61,174,233,.20), rgba(61,174,233,.10));
  border-color: rgba(61,174,233,.50);
  position: relative;
  box-shadow: 0 0 0 1px rgba(61,174,233,.22) inset, 0 1px 0 rgba(255,255,255,.06) inset;
}
.task-btn.active::before{
  content:""; position:absolute; left:8px; right:8px; top:4px; height:2px; border-radius:2px;
  background: var(--accent); box-shadow: 0 0 8px rgba(61,174,233,.7);
}
.task-btn.active::after{
  content:""; position:absolute; left:10px; bottom:6px; width:6px; height:6px; border-radius:50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(61,174,233,.8);
}
.task-btn.minimized{ opacity:.45; filter:saturate(.75); }
.task-btn.dragging{ opacity:.85; transform: scale(.985); box-shadow: 0 8px 20px rgba(0,0,0,.45); }

/* Clock */
#clock{
  min-width: 170px; text-align:right; font-variant-numeric: tabular-nums;
  color: var(--muted); padding: 0 4px;
}

/* ----------------------- Context Menu ----------------------- */
.ctx{
  position:fixed; z-index:9999;
  background: rgba(22, 28, 40, .65);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(61,174,233,.14);
  min-width: 200px; padding:6px; display:none;
  transform-origin: top left; animation: cm-pop .09s ease-out;
}
@keyframes cm-pop{ from { transform: scale(.96); opacity:0 } to { transform: scale(1); opacity:1 } }
.ctx .item{
  display:flex; gap:10px; align-items:center;
  padding:8px 10px; border-radius: var(--radius-sm); cursor:pointer; color:var(--text);
  transition: background .08s ease, box-shadow .08s ease;
}
.ctx .item:hover{ background: rgba(61,174,233,.16); box-shadow: inset 0 0 0 1px rgba(61,174,233,.30); }
.ctx .sep{ height:1px; margin:6px 4px; background: rgba(255,255,255,.10); }
/* Submenu cue */
.ctx .item.has-sub{ position: relative; padding-right: 28px; }
.ctx .item .sub-arrow{ position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: .7; pointer-events: none; }
.ctx .item.has-sub:hover .sub-arrow{ opacity: 1; }
:root[data-theme="light"] .ctx{
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.10);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(42,134,201,.10);
}
:root[data-theme="light"] .ctx .item:hover{
  background: rgba(42,134,201,.12);
  box-shadow: inset 0 0 0 1px rgba(42,134,201,.22);
}
:root[data-theme="light"] .ctx .sep{ background: rgba(0,0,0,.08); }

/* ----------------------- Utilities ----------------------- */
.pad{ padding:12px 14px; }
.hidden{ display:none !important; }
#show-desktop:focus-visible, #theme-toggle:focus-visible,
.task-btn:focus-visible, .window:focus-visible, .icon:focus-visible{
  outline:none; box-shadow: var(--focus);
}

/* Preferencje ruchu */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* ======================= LIGHT THEME – detale ======================= */
:root[data-theme="light"] .icon .glyph{
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 60%),
    linear-gradient(180deg,#f3f7fc,#e9eff7);
  border-color: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
}
:root[data-theme="light"] .window{
  background: var(--panel); border-color: var(--border);
}
:root[data-theme="light"] .window.active{
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(42,134,201,.22) inset; border-color: var(--border-2);
}
:root[data-theme="light"] .window .titlebar{
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 40%),
    linear-gradient(180deg, rgba(246,249,253,.8), rgba(237,243,250,.75));
  border-bottom-color: rgba(0,0,0,.06);
}
:root[data-theme="light"] .window.active .titlebar{
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), transparent 40%),
    linear-gradient(180deg, rgba(238,246,253,.85), rgba(230,242,251,.8));
  box-shadow: inset 0 -1px 0 rgba(42,134,201,.25);
}
:root[data-theme="light"] .window .content{ background: var(--panel-2); }
:root[data-theme="light"] .window .status{ background: var(--panel-3); border-top-color: rgba(0,0,0,.06); }

/* ======================================================================
   TalpieUI – panele, TreeView, DataTable (spójne z DesktopJS)
   ====================================================================== */

/* Panele */
.tp-panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* =================== TREEVIEW =================== */
.tp-tree{
  --row-h: 28px;
  --indent: 0px;
  font-size: 13px; line-height: 1.2;
  padding: 2px; color: var(--text);
}
.tp-tree ul{ list-style:none; margin:0; }
.tp-tree-root{ padding-left: 2px; }
.tp-tree-li{ margin: 2px 0; }
.tp-tree-row{
  display:flex; align-items:center; gap:2px;
  height: var(--row-h); padding: 2px;
  border-radius: var(--radius-sm); border: 1px solid var(--label-plate-brd); outline: none;
  background: var(--label-plate);
}
.tp-tree-row.is-disabled{ opacity:.5; pointer-events:none; }
.tp-tree-row:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.tp-tree-row.is-selected{
  background: linear-gradient(180deg, rgba(61,174,233,.20), rgba(61,174,233,.10));
  border-color: var(--border-2); box-shadow: 0 0 0 1px rgba(61,174,233,.25) inset;
}
.tp-tree-togg{
  width:22px; height:22px; border-radius: 4px;
  padding: 0 !important;
  background: rgba(255,255,255,.04);
  border:0px solid rgba(255,255,255,.10);
  cursor:pointer;
}
.tp-tree-togg::before{ content: '▸'; font-size: 11px; }
.tp-tree-row[aria-expanded="true"] > .tp-tree-togg::before{ content:'▾'; transform:none; }
.tp-tree-togg.empty{ visibility:hidden; display: none; }
.tp-tree-ico{
  width:20px; height:20px; display:grid; place-items:center;
} 
.tp-tree-cb{ margin-right: 2px; }
.tp-tree-lab{
  padding: 2px 6px;
}
/* Loading tick */
.tp-tree-row.is-loading .tp-tree-lab{ position:relative; }
.tp-tree-row.is-loading .tp-tree-lab::after{
  content:""; position:absolute; right:-18px; top:50%; width:12px; height:12px; transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.25); border-top-color: var(--accent); border-radius:50%;
  animation: tp-spin .7s linear infinite;
}
@keyframes tp-spin{ to { transform: translateY(-50%) rotate(1turn); } }


/* =================== DATATABLE =================== */
.tp-table-host{ display:flex; flex-direction:column; min-height:0; height:100%; }
.tp-table{ color: var(--text); display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.tp-table-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 8px 6px;
}
.tp-table-search{
  height:30px; padding: 0 10px; min-width:220px;
  border-radius: var(--radius-sm);
  background: var(--panel-2); border:1px solid var(--border); color: var(--text);
}
.tp-table-ps{ font-size:12px; color:var(--muted); }
.tp-table-psel{
  margin-left:6px; height:30px;
  background: var(--panel-2); color: var(--text);
  border:1px solid var(--border); border-radius: var(--radius-sm);
}
.tp-table-cols{
  height:30px; padding: 0 10px; border-radius: var(--radius-sm);
  background: var(--panel-2); border:1px solid var(--border); color: var(--text);
  cursor:pointer;
}
.tp-table-wrap{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:auto; box-shadow: var(--shadow);
}
.tp-table table{ width:100%; border-collapse:separate; border-spacing:0; }
.tp-table thead th{
  position:sticky; top:0; z-index:1;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), var(--panel);
  color: var(--text); text-align:left; font-weight:700; letter-spacing:.2px;
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08);
  user-select:none;
}
.tp-table thead th.is-sortable{ cursor:pointer; }
.tp-table thead th.is-asc::after{ content:" ▲"; font-size:10px; opacity:.8; }
.tp-table thead th.is-desc::after{ content:" ▼"; font-size:10px; opacity:.8; }
.tp-table tbody td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.tp-table tbody tr:hover{ background: rgba(255,255,255,.04); }
.tp-table tbody tr:focus-visible{ outline:none; box-shadow: inset 0 0 0 2px rgba(61,174,233,.35); }
.tp-table-pager{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding: 8px 6px; color: var(--muted); font-size:12px;
}
.tp-pagebtn{
  min-width:34px; height:28px; border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--text);
  border:1px solid var(--border); cursor:pointer;
}
.tp-pagebtn[disabled]{ opacity:.5; cursor:default; }
.tp-pagebtn.is-active{
  background: linear-gradient(180deg, rgba(61,174,233,.20), rgba(61,174,233,.10));
  border-color: var(--border-2); box-shadow: 0 0 0 1px rgba(61,174,233,.25) inset;
}
.tp-pageinfo{ margin-left:8px; opacity:.8; }

/* Columns menu */
.tp-colmenu{
  position:fixed; z-index:9999;
  min-width: 220px; padding:8px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.tp-colmenu .hdr{ font-weight:700; margin: 2px 2px 8px; color: var(--muted); }
.tp-colmenu ul{ list-style:none; margin:0; padding:0; max-height: 260px; overflow:auto; }
.tp-colmenu li{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 8px; border-radius: var(--radius-sm);
  border:1px solid transparent;
}
.tp-colmenu li:hover{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.tp-colmenu label{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.tp-colmenu .drag{ opacity:.7; cursor:grab; }

/* ======================================================================
   TalpieSPA – swap + spinner + error (spójny wygląd z UI)
   ====================================================================== */

/* Swap transitions */
.tp-swap{ position:relative; }
.tp-swap > .tp-swap-body{ will-change: transform, opacity; }
.tp-swap > .tp-swap-body.tp-out{
  opacity:.0; transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.tp-swap > .tp-swap-body.tp-prein{ opacity:0; transform: translateY(8px); }
.tp-swap > .tp-swap-body.tp-in{
  opacity:1; transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Spinner */
.tp-spinner{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.tp-spinner .tp-spin-core{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.tp-spinner .ring{
  width:36px; height:36px; border-radius:50%;
  border:4px solid rgba(255,255,255,.25); border-top-color: var(--accent);
  animation: tp-rot 1s linear infinite;
}
.tp-spinner .txt{ font-size:.9rem; opacity:.75; color: var(--muted); }
@keyframes tp-rot{ to{ transform: rotate(360deg); } }

/* Error */
.tp-error{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border:1px solid rgba(235,87,87,.35); border-radius:10px;
  background: rgba(235,87,87,.08);
}
.tp-error .ico{ font-size:1.2rem; line-height:1; }
.tp-error .title{ font-weight:600; margin-bottom:2px; }

/* ======================================================================
   Form controls (opcjonalnie – spójny wygląd w oknach/panelach)
   ====================================================================== */
input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"],
select, textarea{
  height:32px; padding: 0 10px;
  background: var(--panel-2); color: var(--text);
  border:1px solid var(--border); border-radius: var(--radius-sm);
}
textarea{ height:auto; padding:8px 10px; line-height:1.4; }
button{
  height:32px; padding: 0 12px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(255,255,255,.04);
  color: var(--text); border:1px solid rgba(255,255,255,.10); cursor:pointer;
}
button:hover{
  background: linear-gradient(180deg, rgba(61,174,233,.22), rgba(61,174,233,.06)), rgba(61,174,233,.10);
  border-color: rgba(61,174,233,.45);
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: none; box-shadow: var(--focus);
}

/* High contrast preferencje */
@media (prefers-contrast: more){
  :root{ --border: rgba(255,255,255,.9); --border-2: #7fd0ff; }
  .task-btn.minimized{ opacity:.6; }
}


/* ==========================================================================
   Logowanie
   ========================================================================== */
  #login-overlay{
    position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
    background:
      radial-gradient(1200px 700px at 10% -10%, rgba(61,174,233,.10), transparent 55%),
      linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
    padding:16px;
  }
  :root[data-theme="light"] #login-overlay{
    background:
      radial-gradient(1200px 700px at 10% -10%, rgba(42,134,201,.08), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,.65), rgba(240,245,252,.85));
  }
  .login-card{
    width:min(480px, 92vw);
    padding:18px 18px 14px;
    border-radius: var(--radius);
    background: var(--panel);
    border:1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: pop .14s ease-out;
  }
  @keyframes pop{ from{ transform:scale(.98); opacity:0 } to{ transform:scale(1); opacity:1 } }
  .login-title{ font-weight:800; font-size:18px; margin:4px 2px 14px; letter-spacing:.2px; }
  .login-sub{ color:var(--muted); margin: -8px 2px 12px; font-size:12px; }
  .row{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
  .row.inline{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:end; }
  .lbl{ font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.2px; }
  .hint{ font-size:11px; color:var(--muted); }
  .err{ margin-top:8px; padding:8px 10px; border-radius:10px; font-size:13px;
        background: rgba(235,87,87,.08); border:1px solid rgba(235,87,87,.35); display:none; }
  .shake{ animation: shake .25s linear; }
  @keyframes shake{ 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(3px)} 50%{transform:translateX(-3px)} }
  .btn-wide{ width:100%; height:36px; font-weight:700; }
  .muted-line{ margin-top:10px; text-align:center; font-size:11px; color:var(--muted); }

  /* Stany walidacji */
input.is-invalid, select.is-invalid, textarea.is-invalid,
.row.has-error input, .row.has-error select, .row.has-error textarea{
  border-color: rgba(235,87,87,.75) !important;
  box-shadow: 0 0 0 2px rgba(235,87,87,.25);
}

.row.has-error .lbl::before{
  content: "⚠️ ";
  vertical-align: middle;
  margin-right: 2px;
  opacity: .9;
}

.field-msg{
  font-size: 11px;
  color: #ffb8b8;
  margin-top: -2px;
  display: none;
}
.row.has-error .field-msg{ display: block; }

/* opcjonalnie „sukces” */
input.is-valid{ border-color: rgba(80,200,120,.7); box-shadow: 0 0 0 2px rgba(80,200,120,.2); }

/* Kolumna checkboxów */
.tp-table thead th.tp-cb,
.tp-table tbody td.tp-cb{
  width: 36px; min-width: 36px; text-align: center;
  padding-left: 8px; padding-right: 8px;
}
.tp-table thead th.tp-cb { position: sticky; left: 0; z-index: 2; }

/* Zaznaczony wiersz */
.tp-table tbody tr.is-selected{
  background: linear-gradient(180deg, rgba(61,174,233,.20), rgba(61,174,233,.10)) !important;
  box-shadow: inset 0 0 0 1px rgba(61,174,233,.25);
}