/* ================================================
   DAILY DASHBOARD STYLING (mobile-optimized PWA)
   ================================================
   Status colours, day-card and dog-row structure
   are inherited from 11-week_dashboard.css.
   This file adds the toolbar, nav buttons and
   mobile scaling overrides.
   ================================================ */

/* ── Navigation toolbar ───────────────────────── */

.daily-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

/* Match weekly dashboard secondary button style */
.daily-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--brand-green);
  border-radius: 6px;
  background-color: var(--brand-green-light);
  color: #111;
  font-weight: 500;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s;
  font-family: inherit;
  line-height: 1.3;
}
.daily-nav-btn:hover {
  background-color: var(--brand-green-light-hover);
  color: #111;
}

/* "Heute" when viewing today → primary (solid green), matches weekly's primary button.
   Must also override a:visited { color: var(--brand-green) } from 01-base.css
   which would otherwise render the text invisible against the dark background. */
.daily-nav-btn--active,
.daily-nav-btn--active:visited {
  background-color: var(--brand-green);
  color: #fff;
  border-color: var(--brand-green);
}
.daily-nav-btn--active:hover {
  background-color: var(--brand-green-hover);
  color: #fff;
}

/* ── PWA header ───────────────────────────────── */

/* The logout button stays visible in standalone PWA mode too: the kennel
   phone is a shared device, so whoever is on duty must be able to hand it
   over and log out next to their name. */

/* ── Date picker ──────────────────────────────── */

.daily-date-picker { margin: 0; }
.daily-date-picker input[type="date"] {
  min-height: 44px;
  height: 44px;
  font-size: .9rem;
  font-family: inherit;
  padding: 0 0.5rem;
  border: 1px solid var(--brand-green);
  border-radius: 6px;
  background-color: var(--brand-green-light);
  color: #111;
  box-sizing: border-box;
  vertical-align: middle;
  line-height: 1;
  /* Remove native chrome that breaks layout on iOS */
  -webkit-appearance: none;
  appearance: none;
}

/* ── Card spacing ─────────────────────────────── */

.daily-view { margin-bottom: 0.75rem; }

/* Clear gap above overnight / meetings cards */
.daily-card-gap { margin-top: 2rem !important; }

/* ── Legend ───────────────────────────────────── */

.daily-legend {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

/* ── Action buttons ───────────────────────────────
   Reuse action-btn colour classes from
   11-week_dashboard.css; only override the size.
   ─────────────────────────────────────────────── */

.daily-row-actions {
  flex:           0 0 auto;
  align-self:     stretch;        /* fill the full tile height */
  display:        grid;
  grid-template-columns: 35px 35px 35px;  /* fixed slots: attend | absent | move */
  gap:            0.35rem;
  align-items:    center;         /* centre buttons vertically */
  align-content:  center;         /* centre the row within the stretched height */
}
/* form[display:contents] makes buttons direct grid children */
.daily-row-actions form { display: contents; }

/* 70px → 50% → 35px */
.daily-view .action-btn {
  width:      35px;
  height:     35px;
  min-width:  35px;
  min-height: 35px;
  font-size:  1rem;
}

/* ── Dog row: horizontal layout ───────────────────
   Override the weekly dashboard's column layout.
   Left: info stack (dog name + customer name).
   Right: action buttons spanning the full height.
   ─────────────────────────────────────────────── */

.daily-view .dog-row {
  flex-direction: row;
  align-items:    stretch;   /* buttons fill full tile height */
  padding:        0.5rem 0.6rem;
  margin-bottom:  0.5rem;
  gap:            0.5rem;
}

/* Info column: dog name line + customer name stacked */
.daily-row-info {
  flex:           1 1 auto;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            0.1rem;
}

/* dog-name must be inline so the sibling
   .daily-source-inline flows on the same line,
   and so text-decoration: line-through on
   cancelled rows does NOT paint through the
   source span (which lives outside the <a>). */
.daily-view .dog-name {
  display:     inline;
  font-size:   1.2rem;
  white-space: normal;
  word-break:  break-word;
}

.daily-view .customer-name {
  font-size: 0.9rem;
}

/* Inline source suffix — muted, smaller, never crossed out */
.daily-source-inline {
  font-size:   0.8em;
  font-weight: 400;
  color:       #6c757d;
  white-space: nowrap;
}
.dog-name-trial + .daily-source-inline {
  color: #b8794a;
}

/* Pull-to-refresh indicator (PWA standalone only — see daily_dashboard.html).
   Native pull-to-refresh is disabled in display-mode: standalone, so we draw
   our own spinner that follows the finger and triggers a reload on release. */
.ptr {
  position:       fixed;
  top:            -48px;
  left:           50%;
  transform:      translate(-50%, 0);
  width:          36px;
  height:         36px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  background:     #fff;
  border-radius:  50%;
  box-shadow:     0 2px 8px rgba(0, 0, 0, 0.15);
  opacity:        0;
  pointer-events: none;
  z-index:        2000;
  transition:     opacity 0.15s ease;
}
.ptr--visible {
  opacity: 1;
}
.ptr__spinner {
  width:         18px;
  height:        18px;
  border:        2px solid var(--brand-green-light);
  border-top-color: var(--brand-green);
  border-radius: 50%;
  transition:    transform 0.15s ease;
}
/* Past the threshold: hint that releasing now will refresh. */
.ptr--ready .ptr__spinner {
  transform: rotate(180deg);
}
/* Released past threshold: spin while the page reloads. */
.ptr--loading .ptr__spinner {
  animation: ptr-spin 0.6s linear infinite;
}
@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}