/* Header bell with a count of open tasks and the agenda dialog. */
[data-icon=bell]{--icon:url("icons/bell.png")}
.agenda-button{position:relative;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--mint);color:var(--forest);flex:none}
.agenda-button[hidden],.auth-mode .agenda-button{display:none}
.agenda-button .app-icon{width:21px;height:21px}
.agenda-count{position:absolute;top:-5px;right:-6px;min-width:20px;height:20px;padding:0 5px;border:2px solid #fbfcf7;border-radius:10px;background:var(--forest);color:white;font-size:11px;font-weight:700;line-height:16px;text-align:center;font-variant-numeric:tabular-nums}
.agenda-count[hidden]{display:none}
.agenda-button.has-overdue .agenda-count{background:#b5422d}
@media(hover:hover){.agenda-button:hover{background:var(--forest);color:white}}
[data-theme=dark] .agenda-button{background:#2c2e31;border-color:#404348;color:#f1f2f3}
[data-theme=dark] .agenda-count{border-color:#141516;background:#4d6b58}
[data-theme=dark] .agenda-button.has-overdue .agenda-count{background:#b5422d}
@media(hover:hover){[data-theme=dark] .agenda-button:hover{background:#3a3d41;color:#fff}}

.agenda-dialog{width:min(440px,calc(100vw - 24px));max-height:min(640px,calc(100dvh - 120px));margin:88px max(24px,env(safe-area-inset-right,0px)) auto auto;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--cream);color:var(--ink);box-shadow:0 24px 80px #102e3440;overflow:hidden;display:flex;flex-direction:column}
.agenda-dialog:not([open]){display:none}
.agenda-dialog::backdrop{background:#102b2633}
.agenda-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 16px 12px 22px;border-bottom:1px solid var(--line)}
.agenda-head h2{margin:0;font-size:22px;letter-spacing:-.4px}
.agenda-head .eyebrow{margin-bottom:2px}
.agenda-head .icon-button{width:40px;height:40px;min-height:40px;padding:0;font-size:inherit;display:grid;place-items:center;flex:none}
.agenda-body{overflow:auto;overscroll-behavior:contain;padding:6px 12px 14px}
.agenda-day h3{margin:14px 10px 6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.agenda-day.today h3{color:var(--forest)}
.agenda-head h2:focus{outline:none}
.agenda-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border-radius:13px;color:var(--ink);text-decoration:none}
.agenda-item:active{background:var(--mint)}
@media(hover:hover){.agenda-item:hover{background:var(--mint);text-decoration:none}}
.agenda-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--mint);color:var(--forest)}
.agenda-icon .app-icon{width:20px;height:20px}
.agenda-calving .agenda-icon{background:#f5edcf;color:#84652a}
.agenda-pregnancy_check .agenda-icon{background:#e5edf3;color:#36586f}
.agenda-text{display:grid;min-width:0}
.agenda-text strong{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.agenda-text small{color:var(--muted);font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.agenda-date{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.agenda-date.overdue{color:#b5422d}
.agenda-day.past .agenda-item:not(:has(.overdue)){opacity:.75}
.agenda-empty{display:grid;justify-items:center;gap:8px;padding:34px 16px;color:var(--muted);text-align:center}
.agenda-empty .app-icon{width:34px;height:34px;color:var(--green)}
.agenda-empty p{margin:0}
[data-theme=dark] .agenda-dialog{background:var(--surface);border-color:var(--line)}
[data-theme=dark] .agenda-item:active{background:#2c2e31}
@media(hover:hover){[data-theme=dark] .agenda-item:hover{background:#2c2e31}}
[data-theme=dark] .agenda-icon{background:#2c2e31;color:#d3d7dc}
[data-theme=dark] .agenda-calving .agenda-icon{background:#3a3423;color:#e3c98a}
[data-theme=dark] .agenda-pregnancy_check .agenda-icon{background:#24303a;color:#a9c3d6}
[data-theme=dark] .agenda-date.overdue{color:var(--red)}
[data-theme=dark] .agenda-day.today h3{color:#d3d7dc}

@media(max-width:800px){
  .agenda-button{width:38px;height:38px;min-height:38px}
  .agenda-dialog{margin:auto;width:calc(100vw - 24px);max-height:calc(100dvh - 48px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .agenda-item{grid-template-columns:36px minmax(0,1fr);row-gap:2px}
  .agenda-date{grid-column:2;grid-row:2;order:3}
  .agenda-text{grid-row:1}
  .agenda-icon{grid-row:1/span 2;width:36px;height:36px}
}
@media(max-width:380px){.agenda-button{width:36px;height:36px;min-height:36px}.agenda-button .app-icon{width:19px;height:19px}}