/* Styles for the My day screen and the reminder pop-up (P5-18). Every class here starts with "md-" or
   belongs to the pop-up, so nothing collides with the queue screens in views.css. They use the colours
   and sizes of /styles.css and add no inline styles anywhere (the strict CSP). */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.md-view { max-width: 64rem; }
.md-view textarea,
.md-view select,
.reminder-popup select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: .25rem;
  padding: .55rem .65rem;
  border: 1px solid #aeb8c3;
  border-radius: .4rem;
  background: #fff;
  color: inherit;
  font: inherit;
}
.md-view textarea { min-height: 5.5rem; resize: vertical; }
.md-view select:focus-visible,
.md-view textarea:focus-visible,
.reminder-popup select:focus-visible,
.md-view [tabindex]:focus-visible { outline: 3px solid #e0a62b; outline-offset: 3px; }
.md-view h1:focus,
.md-view h2:focus { outline: none; }

/* A button that is waiting for the server stays focusable (see busyGuard in ui-kit.js). */
button[aria-disabled="true"] { opacity: .6; cursor: default; }

.md-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .25rem 1rem;
  margin-bottom: .75rem;
}
.md-heading > .heading-with-info,
.md-heading > p { grid-column: 1; margin: 0; }
.md-heading > button { grid-column: 2; grid-row: 1 / span 2; }

.md-section { margin: 1.5rem 0; }
.md-section > .heading-with-info h2 { margin: 0; }
.md-section > p { margin: .35rem 0 0; }

.md-list,
.reminder-list,
.review-list {
  display: grid;
  gap: .6rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}
.review-list { gap: .25rem; }
.review-summary { margin: .5rem 0; font-weight: 600; }

.md-row,
.reminder-card {
  padding: .85rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .6rem;
}
.md-row.is-overdue { border-left: 6px solid var(--danger); }
.md-title,
.reminder-subject { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.md-title { font-weight: 700; }
.reminder-note { margin: .3rem 0 0; overflow-wrap: anywhere; }
.md-main p + p { margin-top: .3rem; }
.md-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 0; }
.md-badge {
  display: inline-block;
  padding: .1rem .6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.md-badge-overdue { color: var(--danger); background: var(--danger-bg); }
.md-badge-urgent { color: #7a4a00; background: #fff3d6; }
.md-badge-waiting { color: #274c77; background: #e6eef8; }
.md-badge-review { color: var(--accent); background: #e5f1f5; }

.md-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .6rem;
}
.md-view .button-link.secondary,
.reminder-popup .button-link.secondary { background: #fff; color: var(--accent); }
.snooze-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.snooze-group select { width: auto; margin: 0; }
.inline-label { display: inline; margin: 0; font-weight: 600; }

.md-form {
  margin-top: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #f8fafb;
}
.md-form label { margin: .6rem 0; }
.md-form-title { margin: 0; font-weight: 700; }
.md-check { display: flex; align-items: center; gap: .6rem; }
.md-check input[type="checkbox"] {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  min-height: 1.4rem;
  margin: 0;
}

.md-empty {
  margin: 1.5rem 0;
  padding: 2rem 1rem;
  background: var(--panel);
  border: 1px dashed #aeb8c3;
  border-radius: .6rem;
  text-align: center;
}
.md-empty h2 { margin-top: 0; }

/* The pop-up for a due reminder: fixed at the top right, never covering the whole page. */
.reminder-popup {
  position: fixed;
  z-index: 50;
  top: 1rem;
  right: 1rem;
  width: min(27rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgb(20 35 47 / 28%);
}
.popup-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.popup-head h2 { margin: 0; font-size: 1.1rem; }
.popup-head button { min-height: 44px; }
.reminder-popup .reminder-list { margin-top: .75rem; }
.reminder-popup .msg { margin-bottom: 0; }

@media (max-width: 700px) {
  .md-heading { grid-template-columns: 1fr; }
  .md-heading > button { grid-column: 1; grid-row: auto; justify-self: start; }
  .reminder-popup { top: .5rem; right: .5rem; left: .5rem; width: auto; }
}