/* Date field with a calendar that opens on click and shows week numbers.
 *
 * Replaces <input type="date"> where the native control is not enough. Two reasons it exists:
 * the native picker only opens from its own small indicator icon -- which in a narrow cell is
 * easy to miss entirely -- and no browser can show week numbers in it at all.
 *
 * The panel is appended to <body>, not to the field, so an ancestor with overflow:hidden (every
 * table cell and modal in this project) cannot clip it. That is why its position is set in JS.
 */

.app-datefield { position: relative; display: inline-flex; align-items: center; width: 100%; }

.app-datefield__input { width: 100%; padding-inline-end: 1.9rem; }
/* The whole field opens the calendar, so the text cursor would be a lie. */
.app-datefield__input { cursor: pointer; }

.app-datefield__btn {
  position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; padding: 0;
  background: transparent; border: 0; border-radius: var(--app-radius-sm, 2px);
  color: var(--app-text-muted, #6b7a8a); cursor: pointer;
}
.app-datefield__btn:hover { background: var(--app-surface-muted, #f0f2f5); color: var(--app-text, #1f2933); }
.app-datefield__btn svg { width: 15px; height: 15px; display: block; }

/* ---- the panel ---------------------------------------------------------------------------- */

.app-datefield-panel {
  position: absolute;
  /* Above the modal layer (--z-modal, 1300), because this field is used inside dialogs and a
     calendar rendered behind the dialog that opened it reads as a picker that does not work --
     which is the bug this whole component was written to fix. */
  z-index: calc(var(--z-modal, 1300) + 20);
  background: var(--app-surface, #ffffff);
  border: 1px solid var(--app-border, #bcc3cd);
  border-radius: var(--app-radius-md, 4px);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14);
  padding: 8px; min-width: 17.5rem; font-size: 12px;
}

/* Which end of the pair you are filling. Without this the two calendars are identical and the
   only clue is which field you clicked, which is exactly the thing you forget once the panel is
   covering the field. */
.app-datefield-panel__range {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: -2px -2px 7px; padding: 5px 6px;
  background: var(--app-surface-muted, #f0f2f5);
  border-radius: var(--app-radius-sm, 2px);
  font-size: 11px; color: var(--app-text-muted, #6b7a8a);
}
.app-datefield-panel__end { padding: 1px 5px; border-radius: var(--app-radius-sm, 2px); white-space: nowrap; }
.app-datefield-panel__end b { font-weight: 700; color: var(--app-text, #1f2933); }
.app-datefield-panel__end i { font-style: normal; opacity: .7; }
.app-datefield-panel__end.is-editing {
  background: var(--app-primary, #005c9e); color: #fff;
}
.app-datefield-panel__end.is-editing b,
.app-datefield-panel__end.is-editing i { color: #fff; }
.app-datefield-panel__arrow { opacity: .6; }

.app-datefield-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px;
}
.app-datefield-panel__title { font-weight: 700; color: var(--app-text, #1f2933); }
.app-datefield-panel__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; padding: 0;
  background: transparent; border: 1px solid var(--app-border, #bcc3cd);
  border-radius: var(--app-radius-sm, 2px); cursor: pointer; color: var(--app-text, #1f2933);
  line-height: 1;
}
.app-datefield-panel__nav:hover { background: var(--app-surface-muted, #f0f2f5); }
.app-datefield-panel__nav[disabled] { opacity: .4; cursor: default; }

.app-datefield-panel__grid {
  display: grid; grid-template-columns: 2.1rem repeat(7, 1fr); gap: 2px;
}

.app-datefield-panel__dow,
.app-datefield-panel__wklabel {
  font-size: 10px; font-weight: 700; text-align: center; padding: 3px 0;
  color: var(--app-text-muted, #6b7a8a);
}
/* The week column is separated so nobody reads a week number as a day. */
.app-datefield-panel__wklabel,
.app-datefield-panel__wk { border-inline-end: 1px solid var(--app-border, #bcc3cd); }

.app-datefield-panel__wk {
  font-size: 10px; font-weight: 600; text-align: center; padding: 4px 0;
  color: var(--app-text-muted, #6b7a8a);
  background: transparent; border-block: 0; border-inline-start: 0;
  border-radius: var(--app-radius-sm, 2px) 0 0 var(--app-radius-sm, 2px); cursor: pointer;
}
.app-datefield-panel__wk:hover:not([disabled]) { background: var(--app-primary-soft, #e6f0f8); color: var(--app-primary, #005c9e); }
.app-datefield-panel__wk[disabled] { opacity: .35; cursor: default; }

.app-datefield-panel__day {
  padding: 5px 0; text-align: center; border: 1px solid transparent;
  border-radius: var(--app-radius-sm, 2px); background: transparent;
  color: var(--app-text, #1f2933); cursor: pointer; font-size: 12px; line-height: 1.2;
}
.app-datefield-panel__day:hover:not([disabled]) { background: var(--app-surface-muted, #f0f2f5); }
.app-datefield-panel__day.is-outside { color: var(--app-text-muted, #6b7a8a); opacity: .55; }
.app-datefield-panel__day.is-today { border-color: var(--app-primary, #005c9e); font-weight: 700; }
.app-datefield-panel__day.is-selected {
  background: var(--app-primary, #005c9e); border-color: var(--app-primary, #005c9e);
  color: #fff; font-weight: 700;
}
/* Days between the two ends of a range, so a from/to pair reads as a span rather than two dots. */
.app-datefield-panel__day.is-inrange { background: var(--app-primary-soft, #e6f0f8); }
.app-datefield-panel__day[disabled] { opacity: .3; cursor: default; background: transparent; }

.app-datefield-panel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--app-border, #bcc3cd);
}
.app-datefield-panel__hint { font-size: 10px; color: var(--app-text-muted, #6b7a8a); }
.app-datefield-panel__link {
  background: transparent; border: 0; padding: 2px 4px; cursor: pointer; font-size: 11px;
  color: var(--app-primary, #005c9e); border-radius: var(--app-radius-sm, 2px);
}
.app-datefield-panel__link:hover { background: var(--app-surface-muted, #f0f2f5); }