.login-card { width: 100%; max-width: 360px; }
.done-row td { opacity: .5; text-decoration: line-through; }
.prio-3 { color: #ff6b6b; font-weight: 600; }
.prio-1 { color: #8a8f98; }
.note-body { white-space: pre-wrap; max-width: 60ch; }
td .btn { padding: .1rem .4rem; }
.overdue-row td { color: #ff6b6b; }
.bell-menu { min-width: 320px; max-width: 92vw; }
.bell-ic { opacity: .8; }
.bell-due { color: #ff6b6b; opacity: 1; }
#tbl-tasks tbody tr, #tbl-notes tbody tr { cursor: pointer; }
body { font-size: .9rem; }
[data-bs-theme=dark] { --bs-body-bg: #0b0b0c; --bs-body-bg-rgb: 11, 11, 12; --bs-tertiary-bg: #161618; --bs-border-color: #2a2a2e; }
.toolbar { overflow-x: auto; }
table.dataTable td, table.dataTable th { padding-top: .25rem; padding-bottom: .25rem; }
.dt-container .row { margin-top: .25rem; }
.nav-pills .nav-link { padding: .25rem .75rem; }

/* pasek narzedzi: szukaj na srodku */
.toolbar { overflow: visible; }
.tb-left { flex: 1 1 0; display: flex; gap: .5rem; align-items: center; min-width: 0; }
.tb-right { flex: 1 1 0; display: flex; justify-content: flex-end; gap: .5rem; }
.toolbar .tbl-search { flex: 0 1 620px; width: 100%; max-width: 620px; min-width: 140px; }
@media (max-width: 820px) {
  .toolbar { flex-wrap: wrap !important; }
  .tb-left, .tb-right { flex: 1 1 auto; }
  .toolbar .tbl-search { order: 3; flex: 1 1 100%; max-width: none; }
}
.view-toggle .btn.active { background: var(--bs-secondary-color); color: var(--bs-body-bg); }

/* kolory */
.tc-red { --tc: #e5484d; } .tc-orange { --tc: #f76808; } .tc-yellow { --tc: #e5b800; } .tc-green { --tc: #30a46c; }
.tc-teal { --tc: #12a594; } .tc-blue { --tc: #3e63dd; } .tc-purple { --tc: #8e4ec6; } .tc-pink { --tc: #d6409f; } .tc-gray { --tc: #7d8590; }
table tbody tr[class*="tc-"] > td:first-child { border-left: 8px solid var(--tc); }
.row-ic { font-size: 1.05rem; }

/* kafelki */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; }
.tile { border: 2px solid color-mix(in srgb, var(--tc, var(--bs-border-color)) 60%, var(--bs-body-bg)); border-left: 8px solid var(--tc, var(--bs-border-color)); border-radius: .5rem;
  padding: .35rem .5rem; cursor: pointer; min-height: 58px; font-size: .85rem; background: color-mix(in srgb, var(--tc, var(--bs-border-color)) 14%, var(--bs-body-bg)); }
.tile:hover { filter: brightness(1.12); }
.tile-head { display: flex; gap: .45rem; align-items: flex-start; }
.tile-ic { font-size: 1.1rem; line-height: 1.1; }
.tile-title { font-weight: 600; flex: 1; word-break: break-word; }
.tile-body { font-size: .76rem; color: var(--bs-secondary-color); margin-top: .3rem; white-space: pre-wrap; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { font-size: .7rem; color: var(--bs-secondary-color); margin-top: .4rem; }
.tile.done { opacity: .55; } .tile.done .tile-title { text-decoration: line-through; }
.tile.overdue .tile-meta { color: #ff6b6b; }

/* wybor ikony i koloru */
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; background: var(--tc, transparent); padding: 0; line-height: 1; }
.sw.sw-none { border: 1px dashed var(--bs-border-color); color: var(--bs-secondary-color); }
.sw.active { border-color: var(--bs-body-color); box-shadow: 0 0 0 2px var(--bs-body-bg) inset; }
.pk-grid { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .5rem; max-width: 100%; }
.pk-i { width: 36px; height: 36px; font-size: 1.2rem; background: transparent; border: 1px solid var(--bs-border-color); border-radius: .35rem; color: var(--bs-body-color); }
.pk-i:hover { background: var(--bs-tertiary-bg); }

/* przeciaganie i kosz */
.drag-h { cursor: grab; color: var(--bs-secondary-color); padding: 0 .35rem; user-select: none; touch-action: none; font-weight: 700; letter-spacing: -2px; }
.tile, .drag-h { -webkit-user-select: none; user-select: none; }
.drag-ghost { opacity: .35; }
.sortable-chosen { cursor: grabbing; }
.trash-drop { display: inline-flex; border-radius: .35rem; }
.trash-drop > .btn { pointer-events: auto; }
body.dragging .trash-drop { outline: 2px dashed #ff6b6b; outline-offset: 2px; animation: trashPulse 1s infinite; }
@keyframes trashPulse { 50% { outline-color: transparent; } }
.toolbar { position: sticky; top: 0; z-index: 20; background: var(--bs-body-bg); padding: .25rem 0; }
.tile { touch-action: manipulation; }
@media (max-width: 576px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-sm { padding: .3rem .55rem; }
  .drag-h { padding: .3rem .5rem; font-size: 1.1rem; }
}

/* kafelek: naglowek (checkbox + ikona) w jednej linii, tekst pod spodem na cala szerokosc */
.tile-head { display: flex; align-items: center; gap: .4rem; min-height: 1.2rem; }
.tile-head .form-check-input { margin: 0; width: .95rem; height: .95rem; }
.tile-ic { font-size: .95rem; line-height: 1; }
.tile-star { font-size: .8rem; color: #e5b800; }
.tile-title { flex: none; width: 100%; font-size: .8rem; font-weight: 600; line-height: 1.25; margin-top: .15rem; }
.tile-body { font-size: .72rem; width: 100%; }