/* Larder V4 workflow components. New cross-workspace UI belongs here instead of late cascade overrides. */

.notification-button {
  position: relative;
  gap: 7px;
}

.notification-button strong,
.staff-update-button b {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  padding-inline: 5px;
  color: #fff;
  background: var(--danger);
  font-size: 10px;
  font-weight: 900;
}

.notification-button.has-unread {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
}

.notification-backdrop {
  z-index: 2200;
  place-items: start end;
  padding: 74px 18px 18px;
}

.notification-center {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(560px, calc(100vw - 36px));
  max-height: calc(100dvh - 92px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 0;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(15, 28, 21, .24);
}

.notification-center-header,
.notification-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--line);
}

.notification-center-header h2 { margin: 2px 0 3px; }
.notification-center-header p { margin: 0; }
.notification-toolbar { justify-content: flex-end; padding-block: 9px; background: var(--subtle); }
.notification-list { display: grid; align-content: start; gap: 0; min-height: 0; overflow: auto; }

.notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 15px 18px;
  background: var(--paper);
}

.notification-row.is-unread { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.notification-row.is-high { border-left-color: var(--danger); }
.notification-row > div:first-child { display: grid; gap: 3px; min-width: 0; }
.notification-row span { color: var(--accent-dark); font-size: 10px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.notification-row strong { font-size: 14px; }
.notification-row p, .notification-row small { margin: 0; color: var(--muted); }
.notification-actions { display: grid; gap: 6px; min-width: 96px; }
.notification-empty { padding: 34px 20px; color: var(--muted); text-align: center; }

.people-directory-panel .user-admin-layout { grid-template-columns: minmax(420px, .95fr) minmax(360px, 1.05fr); align-items: start; }
.employee-profile-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: var(--paper); }
.employee-profile-section legend { padding-inline: 6px; color: var(--accent-dark); font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.employee-profile-section .field-wide { grid-column: 1 / -1; }
.employee-access-section { background: var(--subtle); }
.employee-access-section:has(:disabled) { opacity: .82; }
.user-account-form { align-content: start; }
.user-account-card > div:first-child { display: grid; gap: 3px; min-width: 0; }
.user-account-card > div:first-child > span { color: var(--accent-dark); font-weight: 750; }

#schedule.view.is-visible { display: grid; gap: 14px; width: 100%; max-width: none; }
#schedule > .schedule-panel { width: 100%; margin: 0; }
.operations-schedule-host { min-width: 0; }
#staff #schedule.is-operations-embedded { margin-top: 14px; }
.schedule-controls { display: grid; grid-template-columns: minmax(155px, .8fr) minmax(150px, .7fr) minmax(145px, .65fr) auto; align-items: end; gap: 10px; margin-bottom: 12px; }
.schedule-controls > label { min-width: 0; }
.schedule-controls > button { min-height: 40px; }
.schedule-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.schedule-summary > article { display: grid; gap: 3px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; background: var(--subtle); }
.schedule-summary > article span { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.schedule-summary > article strong { font-size: 20px; }
.schedule-summary > article small { color: var(--muted); }
.schedule-timeoff-grid { display: grid; grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
.time-off-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--subtle); }
.time-off-form .field-wide, .time-off-form > button { grid-column: 1 / -1; }
.schedule-availability-warnings { display: grid; gap: 6px; margin: 10px 0 0; }
.schedule-availability-warnings article { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); gap: 10px; border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 10px; background: var(--subtle); }
.schedule-availability-warnings article.is-bad { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--paper)); }
.schedule-availability-warnings span { color: var(--muted); }

.month-lock-notice { margin: 6px 0 0; border-radius: 7px; padding: 6px 8px; color: #7f2f2a; background: color-mix(in srgb, var(--danger) 10%, var(--paper)); font-size: 11px; font-weight: 750; }
.release-version-mismatch #buildVersionChip { max-width: 420px; white-space: normal; }
.offsite-backup-status { display: grid; gap: 2px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; padding: 11px 13px; background: var(--subtle); }
.offsite-backup-status.is-configured { border-left-color: var(--accent); }
.offsite-backup-status span { color: var(--muted); }

.operations-status-grid { grid-template-columns: repeat(6, minmax(130px, 1fr)); }
.operations-station-board { display: grid; gap: 9px; border-top: 1px solid var(--line); padding-top: 12px; }
.operations-station-board > div:last-child { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.operations-station-board > div:last-child button { display: grid; gap: 3px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 10px; color: var(--ink); background: var(--paper); text-align: left; }
.operations-station-board span, .operations-station-board small { color: var(--muted); }
.operations-station-board strong { font-size: 20px; }

.staff-mobile-user { display: flex; align-items: center; }
.staff-mobile-user > div { display: grid; justify-items: end; }
.staff-update-button { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted); background: var(--subtle); font-size: 11px; font-weight: 800; }
.staff-update-button.has-unread { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 9%, var(--paper)); }
.staff-notification-list { display: grid; gap: 8px; }
.staff-notification-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 10px; padding: 11px; background: var(--paper); }
.staff-notification-list article.is-unread { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.staff-notification-list article.is-high { border-left-color: var(--danger); }
.staff-notification-list article > div { display: grid; gap: 3px; }
.staff-notification-list span { color: var(--accent-dark); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.staff-notification-list p { margin: 0; color: var(--muted); }

@media (min-width: 1181px) and (max-width: 1500px) {
  body .sidebar {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" "navigation navigation" !important;
    row-gap: 8px !important;
  }
  body .brand { grid-area: brand; }
  body .tabs.simple-tabs, body .tabs { grid-area: navigation; justify-content: center; width: 100%; }
  body .shell-actions { grid-area: actions; }
}

@media (max-width: 1180px) {
  .people-directory-panel .user-admin-layout { grid-template-columns: 1fr; }
  .operations-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operations-station-board > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .notification-backdrop { place-items: stretch; padding: 0; }
  .notification-center { width: 100vw; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .notification-row { grid-template-columns: 1fr; }
  .notification-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employee-profile-section { grid-template-columns: 1fr; }
  .employee-profile-section .field-wide { grid-column: auto; }
  .schedule-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule-timeoff-grid { grid-template-columns: 1fr; }
  .schedule-availability-warnings article { grid-template-columns: 1fr; }
  .operations-status-grid, .operations-station-board > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-mobile-header { align-items: flex-start; }
  .staff-mobile-user { align-items: flex-end; flex-direction: column-reverse; gap: 4px; }
  .staff-update-button { min-height: 28px; padding-block: 3px; }
}

@media (max-width: 460px) {
  .schedule-controls { grid-template-columns: 1fr; }
  .time-off-form { grid-template-columns: 1fr; }
  .time-off-form .field-wide, .time-off-form > button { grid-column: auto; }
  .operations-status-grid, .operations-station-board > div:last-child { grid-template-columns: 1fr; }
  .staff-notification-list article { grid-template-columns: 1fr; }
}