/* ================================================================ pulpit z kafelkami (dashboard.js)
   Siatka 4 kolumn (kafelek S – 1, M – 2, L – 4), węższy panel – 2 kolumny, telefon – 1. Wolne miejsca wypełniają kolejne kafelki. */
.dash { container-type: inline-size; }
.dash-hero { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-titles { flex: 1 1 280px; min-width: 0; }
.dash-titles h2 { font: 700 34px/1.1 var(--font-display); letter-spacing: -.02em; margin: 0 0 6px; }
.dash-titles p { margin: 0; }
.dash-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-hint { display: none; margin: -4px 0 12px; }
.dash.editing .dash-hint { display: block; }
.dash-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 236px; grid-auto-flow: dense; }
.dash-empty { grid-column: 1 / -1; }

.dtile { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px 12px; grid-column: span 2; }
.dtile::after { content: ""; position: absolute; right: -34px; top: -40px; width: 110px; height: 96px; border-radius: 50%; background: var(--signal); opacity: .1; pointer-events: none; }
.dtile.size-s { grid-column: span 1; }
.dtile.size-l { grid-column: span 4; }
.dash.editing .dtile { border-style: dashed; border-color: color-mix(in srgb, var(--focus) 70%, transparent); cursor: grab; }
.dtile.dragging { opacity: .45; }
.dtile.drop { outline: 2px solid var(--focus); outline-offset: 2px; }
.dtile-head { display: flex; align-items: center; gap: 9px; min-height: 30px; margin-bottom: 8px; position: relative; z-index: 1; }
.dtile-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: var(--text);
  background: color-mix(in srgb, var(--signal) 22%, var(--surface)); }
.dtile-icon .ic { margin: 0; width: 16px; height: 16px; }
.dtile-title { flex: 1; min-width: 0; font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtile-title.link { cursor: pointer; }
.dtile-title.link:hover { text-decoration: underline; text-decoration-color: var(--focus); text-underline-offset: 3px; }
.dash.editing .dtile-title.link { cursor: inherit; text-decoration: none; }
.dtile-badge { flex: none; font: 600 12px/1 var(--font); padding: 5px 9px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.dtile-badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.dtile-badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.dtile-badge.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.dtile-badge.accent { color: var(--signal-ink); background: var(--signal); }
.dash.editing .dtile-badge { display: none; }
.dtile-tools { display: flex; gap: 4px; flex: none; }
.dtool { width: 28px; height: 28px; padding: 0; border-radius: 8px; font-weight: 700; font-size: 15px; line-height: 1; }
.dtool.size { font-size: 12px; }
.dtool.del:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* Wiersze (.drow) wychodzą 8 px na boki pod tło po najechaniu – ciało kafelka ma na to margines wewnętrzny, więc nic nie wystaje
   i nie ma przewijania w poziomie; pionowy pasek przewijania widać dopiero po najechaniu na kafelek */
.dtile-body { flex: 1; min-height: 0; margin: 0 -8px; padding: 0 8px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; position: relative; z-index: 1; }
.dtile:hover .dtile-body, .dtile-body:focus-within { scrollbar-width: thin; }
.dtile-body::-webkit-scrollbar { width: 0; height: 0; }
.dtile:hover .dtile-body::-webkit-scrollbar, .dtile-body:focus-within::-webkit-scrollbar { width: 8px; }
.dash.editing .dtile-body { pointer-events: none; opacity: .75; }
.dtile-msg { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); padding: 8px; }
.dtile-msg.error { color: var(--danger); }
button.dtile-msg { width: 100%; border: 1px dashed var(--border-strong); background: none; }
.dash-cta { font-weight: 600; color: var(--text) !important; }

/* wiersze list (tunele, wiadomości, zespół, terminy, ostatnie) */
.drows { display: flex; flex-direction: column; gap: 2px; }
.drow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; margin: 0 -8px; width: calc(100% + 16px); border: none; border-radius: 10px;
  background: none; color: inherit; text-align: left; font-weight: 400; text-decoration: none !important; cursor: pointer; }
.drow:hover { background: var(--surface-2); }
.drow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.drow-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow-text strong { font-weight: 600; }
.dled { --c: var(--off); flex: none; width: 9px; height: 9px; margin: 0 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.dled.ok { --c: var(--ok); } .dled.warn { --c: var(--warn); animation: led-pulse 1.4s ease-in-out infinite; } .dled.err { --c: var(--danger); }
.dpill { flex: none; font: 600 11.5px/1 var(--font); padding: 4px 8px; border-radius: 99px; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.dpill.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.dpill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.dpill.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent); }
.dpill.accent { color: var(--signal-ink); background: var(--signal); }
.dav { --c: #475569; position: relative; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c); color: #fff; font: 700 12px/1 var(--font); }
.dav.online::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface); }
.dnode { --c: #8e8c86; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: var(--c); font-size: 12px; }
.dnode .ic { margin: 0; width: 15px; height: 15px; }

/* liczby */
.t-stats .dtile-body { display: flex; align-items: center; }
.t-stats .dstats { width: 100%; }
.dstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px; }
.dstat { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; color: inherit; text-decoration: none !important; min-width: 0; }
.dstat > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.dstat:hover { background: var(--surface-2); }
.dstat-value { font: 700 30px/1.1 var(--font-display); letter-spacing: -.02em; }
.dstat.ok .dstat-value { color: var(--ok); } .dstat.warn .dstat-value { color: var(--warn); } .dstat.err .dstat-value { color: var(--danger); }
.dstat.accent .dstat-value { color: var(--text); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 4px; text-underline-offset: 4px; }
.dstats.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.dstat.compact { padding: 2px 4px; }
.dstat.compact .dstat-value { font-size: 20px; }
.dbig { font: 700 34px/1.05 var(--font-display); letter-spacing: -.02em; }
.dbig.accent { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 5px; text-underline-offset: 5px; }
.dbig-link { display: flex; flex-direction: column; gap: 4px; height: 100%; justify-content: center; color: inherit; text-decoration: none !important; }

/* pogoda */
.dweather { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.dweather-now { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dweather-now > div { min-width: 0; }
.dweather-temp { font: 700 40px/1 var(--font-display); letter-spacing: -.03em; }
.dweather-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; margin-top: auto; }
.dweather-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dwicon { width: 34px; height: 34px; flex: none; }
.dwicon.big { width: 76px; height: 76px; }
.w-sun { fill: #fabe28; } .w-ray { stroke: #fabe28; stroke-width: 4; stroke-linecap: round; } .w-moon { fill: #d6dceb; }
.w-cloud { fill: #a0aaba; } .w-rain { stroke: #4696f0; stroke-width: 4; stroke-linecap: round; } .w-snow { fill: #78aae6; }
.w-bolt { fill: #facc15; } .w-fog { stroke: #a0aaba; stroke-width: 4; stroke-linecap: round; }
@media (prefers-color-scheme: dark) { .w-cloud { fill: #c8ccd6; } .w-fog { stroke: #c8ccd6; } .w-snow { fill: #fff; } }
.dtile.size-s .dweather-days { display: none; }
.dtile.size-s .dweather-now { flex-direction: column; align-items: flex-start; gap: 4px; }
.dtile.size-s .dwicon.big { width: 52px; height: 52px; }
.dtile.size-s .dweather-temp { font-size: 30px; }

/* zegar */
.dclock { display: flex; flex-direction: column; height: 100%; gap: 2px; }
.dclock-time { font: 700 46px/1.05 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dclock-time small { font: 500 16px var(--font); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.dclock-date { font-weight: 650; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.dclock-zone { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: auto; border-top: 1px solid var(--border); padding-top: 8px; }

/* czas pracy */
.dwork { display: flex; gap: 16px; height: 100%; color: inherit; text-decoration: none !important; }
.dwork-sum { display: flex; flex-direction: column; gap: 2px; flex: none; }
.dwork-week { font-size: 17px; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.dwork-chart { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; min-width: 0; }
.dwork-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: 11px; color: var(--muted); }
.dwork-col i { width: 100%; max-width: 22px; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--muted) 55%, transparent); }
.dwork-col.future i { background: color-mix(in srgb, var(--muted) 22%, transparent); }
.dwork-col.today i { background: var(--signal); }
.dwork-col.today { color: var(--text); font-weight: 700; }
.dtile.size-s .dwork-chart { display: none; }

/* szybkie akcje, notatka */
.dquick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dquick-btn { display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: inherit; font-weight: 500; text-decoration: none !important; min-width: 0; }
.dquick-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dquick-btn .ic { margin: 0; flex: none; }
.dquick-btn:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.dtile.t-note { background: color-mix(in srgb, #ffe27a 22%, var(--surface)); }
@media (prefers-color-scheme: dark) { .dtile.t-note { background: color-mix(in srgb, var(--signal) 7%, var(--surface)); } }
.dnote { display: block; width: 100%; min-height: 100%; padding: 2px 0; cursor: pointer;
  white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400; font-size: 15px; line-height: 1.5; color: inherit; }
.dnote.empty-note { color: var(--muted); }

/* wybór kafelka i miejscowości */
.dash-picker, .dash-places { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.dash-pick, .dash-place { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; text-align: left; border-radius: 12px; font-weight: 400; }
.dash-pick-text, .dash-place { flex-direction: row; }
.dash-pick-text { display: flex; flex-direction: column; min-width: 0; }
.dash-place { gap: 8px; }
.dash-search { display: flex; gap: 8px; margin-bottom: 10px; }
.dash-search input { flex: 1; }

/* węższy panel – 2 kolumny, telefon – 1 */
@container (max-width: 1000px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtile.size-m { grid-column: span 1; }
  .dtile.size-l { grid-column: span 2; }
}
@container (max-width: 560px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .dtile, .dtile.size-s, .dtile.size-m, .dtile.size-l { grid-column: span 1; min-height: 150px; max-height: 340px; }
  .dash-titles h2 { font-size: 27px; }
  .dash-tools { width: 100%; }
  .dtool { width: 34px; height: 34px; }
  .dwicon.big { width: 60px; height: 60px; }
}

/* Kafelki „Budżety godzin” i „Raport” */
.dbudgets { display: flex; flex-direction: column; gap: 10px; }
.dbudget { display: grid; gap: 4px; color: var(--text); }
.dbudget:hover { text-decoration: none; }
.dbudget-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.dbudget-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbudget-bar { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.dbudget-fill { display: block; height: 100%; border-radius: 999px; background: var(--signal); }
.dbudget-fill.warn { background: var(--warn); }
.dbudget-fill.err { background: var(--danger); }
.dreport { min-width: 0; }
.dash-pick-group { width: 100%; margin: 8px 0 2px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }