/* Karty, listy, oś dnia. Godziny zawsze monospace, żeby kolumna się nie chwiała. */

.dat-card {
    display: flex;
    flex-direction: column;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
}

.dat-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--card-padding);
    border-bottom: var(--border-width) solid var(--color-border);
}

.dat-card__title { font-size: var(--text-subtitle-size); font-weight: var(--text-title-weight); }
.dat-card__subtitle { font-size: var(--text-overline-size); color: var(--color-text-secondary); }
.dat-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-padding); }
.dat-card__foot { display: flex; gap: var(--space-2); padding: var(--card-padding); border-top: var(--border-width) solid var(--color-border); background: var(--color-surface-sunken); }

.dat-card--plain { border: 0; background: transparent; }

.dat-card--clickable { cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out); }
.dat-card--clickable:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }

.dat-card--stat { gap: var(--space-1); padding: var(--card-padding); }
.dat-card__stat-label { font-size: var(--text-overline-size); font-weight: var(--text-overline-weight); letter-spacing: var(--text-overline-tracking); text-transform: uppercase; color: var(--color-text-muted); }
.dat-card__stat-value { font-size: var(--text-display-size); line-height: var(--text-display-lh); font-weight: var(--text-display-weight); letter-spacing: var(--text-display-tracking); }
.dat-card__stat-hint { font-size: var(--text-overline-size); color: var(--color-text-secondary); }

.dat-list { display: flex; flex-direction: column; }
.dat-list__item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-height); padding: var(--space-2) var(--card-padding); border-bottom: var(--border-width) solid var(--color-border); }
.dat-list__item:last-child { border-bottom: 0; }
.dat-list__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dat-list__title { font-size: var(--text-small-size); font-weight: var(--text-title-weight); }
.dat-list__meta { font-size: var(--text-overline-size); color: var(--color-text-muted); }

.dat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent-soft-fg);
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
}

.dat-avatar--xs { width: var(--avatar-xs); height: var(--avatar-xs); }
.dat-avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); }
.dat-avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); }

.dat-timeline { display: flex; flex-direction: column; }

/* Nagłówek dnia przykleja się pod paskiem górnym — przy długiej liście inaczej
   gubi się, o którym dniu się czyta. */
.dat-timeline__day {
    position: sticky;
    top: var(--topbar-height);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--card-padding);
    background: var(--color-surface-sunken);
    border-bottom: var(--border-width) solid var(--color-border);
}

.dat-timeline__date { font-size: var(--text-small-size); font-weight: var(--text-title-weight); }
.dat-timeline__dayname { font-size: var(--text-overline-size); font-weight: var(--text-overline-weight); letter-spacing: var(--text-overline-tracking); text-transform: uppercase; color: var(--color-text-muted); }

.dat-timeline__event { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-height); padding: var(--space-3) var(--card-padding); border-bottom: var(--border-width) solid var(--color-border); }
.dat-timeline__time { flex: none; width: var(--time-column-width); font-family: var(--font-mono); font-size: var(--text-overline-size); color: var(--color-text-secondary); }
.dat-timeline__time--allday { font-family: var(--font-sans); }
.dat-timeline__title { flex: 1; min-width: 0; font-size: var(--text-small-size); font-weight: var(--text-subtitle-weight); }
/* Nazwa kalendarza to tekst, kolor to pasek -- jedna rzecz nie robi za dwie,
   inaczej kolor jest podany dwa razy, a tekst wylewa się z 3px paska. */
.dat-timeline__meta { font-size: var(--text-overline-size); color: var(--color-text-muted); white-space: nowrap; }
.dat-timeline__cal { flex: none; width: var(--cal-bar-width); height: var(--cal-bar-height); border-radius: var(--cal-bar-radius); background: var(--dat-cal); }


/* Widok kafelkowy osi wydarzen: to samo, co lista, ale kazde wydarzenie dostaje
   wlasna kartke. Latwiej ogarnac wzrokiem caly tydzien naraz, trudniej porownac
   godziny -- stad wybor po stronie uzytkownika, a nie narzucona jedna forma. */
.dat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-min-width), 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: var(--card-padding);
    list-style: none;
}

.dat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    padding-left: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--card-radius);
    background: var(--color-surface);
    overflow: hidden;
}

/* Kolor kalendarza jako pasek przy krawedzi, nie tlo kartki -- ta sama zasada
   co na osi: barwa kalendarza nigdy nie niesie tekstu. */
.dat-tile__cal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--cal-bar-width);
    background: var(--dat-cal);
}

.dat-tile__when { display: flex; align-items: baseline; gap: var(--space-2); }
.dat-tile__date { font-size: var(--text-small-size); font-weight: var(--text-title-weight); }

.dat-tile__dayname {
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
    letter-spacing: var(--text-overline-tracking);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.dat-tile__time { font-family: var(--font-mono); font-size: var(--text-overline-size); color: var(--color-text-secondary); }
.dat-tile__title { font-size: var(--text-small-size); font-weight: var(--text-subtitle-weight); }
.dat-tile__meta { font-size: var(--text-overline-size); color: var(--color-text-muted); }

/* Ponizej 860px naglowek karty przestaje byc rzedem: akcje obok tytulu sciskaly
   imie i opis do jednoliterowych kolumn. Ten sam zabieg co przy naglowku strony. */
@media (max-width: 860px) {
    .dat-card__head { flex-direction: column; align-items: stretch; }
    .dat-card__head .dat-member__actions { margin-left: 0; }
}