/* Archives office layout. Every rule is confined to the manager Archives page. */
/* The archive panel owns the exports, so the generic tour toolbar is redundant here. */
#managerApp:has(#archives.active) .topbar .actions > :is(.desktop-only, #newTourButton) { display: none; }
#managerApp #archives {
  --ma-ink: #263e65;
  --ma-muted: #647d9e;
  --ma-line: #e3ecf9;
  --ma-gradient: linear-gradient(120deg, #40baff, #5c70f7);
  min-width: 0;
  max-width: 100%;
  color: var(--ma-ink);
  font-size: 17px;
  line-height: 1.5;
}

#managerApp #archives .ma-heading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 0 22px;
}
#managerApp #archives .ma-heading :is(h2, h3) {
  margin: 0;
  color: #1e3355;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.4px;
}
#managerApp #archives .ma-heading p {
  margin: 6px 0 0;
  color: var(--ma-muted);
  font-size: 17px;
}
#managerApp #archives #archiveToday {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #607ca3;
  font-size: 17px;
  line-height: 1.5;
}
#managerApp #archives svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

#managerApp #archives .ma-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 26px;
}
#managerApp #archives .ma-stat {
  position: relative;
  min-width: 0;
  min-height: 174px;
  padding: 20px 22px;
  border: 1px solid #daeafa;
  border-radius: 18px;
  background: #edf6ff;
  box-shadow: 0 5px 20px rgba(52, 102, 178, .04);
}
#managerApp #archives .ma-stat.is-blue { background: linear-gradient(125deg, #eaf4ff, #f3f8ff); border-color: #dceafa; }
#managerApp #archives .ma-stat.is-red { background: linear-gradient(125deg, #ffecef, #fff4f5); border-color: #f7dfe5; }
#managerApp #archives .ma-stat.is-green { background: linear-gradient(125deg, #e5f8ee, #f1fbf6); border-color: #d9f0e3; }
#managerApp #archives .ma-stat.is-purple { background: linear-gradient(125deg, #efeaff, #f8f4ff); border-color: #e7dff9; }
#managerApp #archives .ma-stat-icon {
  position: absolute;
  top: 20px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: #287cd9;
  background: #d9ebff;
}
#managerApp #archives .ma-stat-icon svg { width: 22px; height: 22px; }
#managerApp #archives .is-red .ma-stat-icon { color: #db5269; background: #ffdae1; }
#managerApp #archives .is-green .ma-stat-icon { color: #199a68; background: #cff0df; }
#managerApp #archives .is-purple .ma-stat-icon { color: #8558cf; background: #e4d8fb; }
#managerApp #archives .ma-stat-label {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-left: 57px;
  color: #425f86;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#managerApp #archives .ma-stat-value {
  display: block;
  margin: 14px 0 4px;
  color: #243b61;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.6px;
  font-variant-numeric: tabular-nums;
}
#managerApp #archives .ma-stat-note {
  display: block;
  color: #607b9f;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#managerApp #archives .ma-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px 24px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--ma-line);
}
#managerApp #archives .ma-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  max-width: 100%;
  margin: 0 0 -1px;
  padding: 12px 8px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #637c9d;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  box-shadow: none;
  transition: color .15s, background .15s, border-color .15s;
}
#managerApp #archives .ma-tab:hover { color: #287ee3; background: #edf5ff; }
#managerApp #archives .ma-tab-count { border-radius: 999px; background: #e5eefb; color: #4c75a5; padding: 2px 8px; font-size: 15px; }
#managerApp #archives .ma-tab.active .ma-tab-count { background: #d7eaff; color: #1676dc; }
#managerApp #archives .ma-tab:is(.active, [aria-selected="true"]) {
  color: #267bea;
  border-bottom-color: #4b91ff;
  background: #f1f7ff;
}

#managerApp #archives .ma-panel.card {
  min-width: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ma-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 26px rgba(52, 102, 178, .045);
}
#managerApp #archives .ma-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  padding: 22px;
  border-bottom: 1px solid var(--ma-line);
}
#managerApp #archives .ma-filters .field {
  min-width: 0;
  margin: 0;
  gap: 7px;
}
#managerApp #archives .ma-filters label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 170px;
  color: #627b9e;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
#managerApp #archives .ma-filters .ma-search { flex: 2 1 260px; }
#managerApp #archives .ma-filters .ma-filter-date { flex-basis: 155px; }
#managerApp #archives .ma-filters .ma-filter-status { flex-basis: 210px; }
#managerApp #archives #archiveFilterError { margin: 0; padding: 12px 22px; color: #bf3448; font-size: 16px; }
#managerApp #archives #archiveFilterError:empty { display: none; }
#managerApp #archives .ma-archive-note { margin: 0; padding: 0 22px 22px; color: var(--ma-muted); font-size: 15px; line-height: 1.5; }
#managerApp #archives .ma-filters :is(input, select) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid #deE8f7;
  border-radius: 11px;
  background: #fff;
  color: #3b567b;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color-scheme: light;
}
#managerApp #archives .ma-filters input::placeholder { color: #7288a6; opacity: 1; }
#managerApp #archives .ma-search { position: relative; }
#managerApp #archives .ma-search-input { position: relative; min-width: 0; }
#managerApp #archives .ma-search:has(svg) input { padding-left: 44px; }
#managerApp #archives .ma-search > svg {
  position: absolute;
  left: 14px;
  bottom: 14px;
  color: #7891b3;
  pointer-events: none;
}
#managerApp #archives .ma-search-input > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7891b3;
  pointer-events: none;
}
#managerApp #archives .ma-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  flex: 1 1 100%;
}
#managerApp #archives .ma-filter-actions .btn {
  min-height: 48px;
  padding: 11px 15px;
  font-size: 16px;
  line-height: 1.4;
  white-space: normal;
}
#managerApp #archives .ma-filter-actions .btn.primary {
  background: var(--ma-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(74, 137, 255, .16);
}

#managerApp #archives .ma-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #c5d8f0 #f5f8fc;
}
#managerApp #archives .ma-table {
  width: 100%;
  min-width: 900px;
  margin: 0;
  border-collapse: collapse;
  color: #425d82;
  font-size: 17px;
  line-height: 1.5;
}
#managerApp #archives .ma-table th {
  padding: 16px 18px;
  border-bottom: 1px solid var(--ma-line);
  background: #f3f7fd;
  color: #58749b;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}
#managerApp #archives .ma-table td {
  padding: 17px 18px;
  border-bottom: 1px solid #edf2fa;
  font-size: 17px;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
#managerApp #archives .ma-table th:first-child,
#managerApp #archives .ma-table td:first-child { padding-left: 22px; }
#managerApp #archives .ma-table th:last-child,
#managerApp #archives .ma-table td:last-child { padding-right: 22px; text-align: right; }
#managerApp #archives .ma-table tbody tr:last-child td { border-bottom: 0; }
#managerApp #archives .ma-table tbody tr:hover { background: #f8fbff; }
#managerApp #archives .ma-row-index { color: #7489a7; font-size: 15px; font-variant-numeric: tabular-nums; }
#managerApp #archives .ma-table td:has(.ma-name) { min-width: 170px; white-space: normal; }
#managerApp #archives .ma-name {
  display: block;
  max-width: 300px;
  color: #304d76;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#managerApp #archives .ma-secondary {
  display: block;
  margin-top: 3px;
  color: #6b82a2;
  font-size: 15px;
  line-height: 1.45;
}
#managerApp #archives :is(.ma-type, .ma-status) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #edf3fb;
  color: #526e94;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
#managerApp #archives .ma-type.is-evening { color: #596ec0; background: #edf0ff; }
#managerApp #archives .ma-type.is-weekend { color: #8661b7; background: #f1eafa; }
#managerApp #archives .ma-status:is(.is-done, .is-resolved) { color: #21865e; background: #e5f6ed; }
#managerApp #archives .ma-status.is-pending { color: #a47524; background: #fff4df; }
#managerApp #archives .ma-status.is-cancelled { color: #c65263; background: #ffedf0; }
#managerApp #archives .ma-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: currentColor;
}
#managerApp #archives .ma-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #dce8f8;
  border-radius: 10px;
  background: #fff;
  color: #337ad0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color .15s, background .15s;
}
#managerApp #archives .ma-view:hover { background: #edf5ff; border-color: #bed8f9; }
#managerApp #archives .ma-empty {
  padding: 44px 24px;
  color: #607a9e;
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  white-space: normal;
}
#managerApp #archives .ma-table td.ma-empty { padding: 44px 24px; text-align: center; }

#managerApp #archives .ma-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 18px 22px;
  border-top: 1px solid var(--ma-line);
}
#managerApp #archives .ma-pagination-info {
  color: #6b81a1;
  font-size: 15px;
  line-height: 1.5;
}
#managerApp #archives .ma-page-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
#managerApp #archives .ma-page-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #dfe8f7;
  border-radius: 10px;
  background: #fff;
  color: #627ca2;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: none;
  transition: border-color .15s, background .15s;
}
#managerApp #archives .ma-page-buttons button:hover:not(:disabled) { border-color: #b9d5fb; background: #f0f6ff; }
#managerApp #archives .ma-page-buttons button:is(.active, [aria-current="page"]) {
  border-color: transparent;
  background: var(--ma-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(74, 137, 255, .16);
}
#managerApp #archives .ma-page-buttons button:disabled { background: #f7f9fc; color: #8294ad; cursor: default; }
#managerApp #archives .ma-page-buttons > span { color: #6b81a1; font-size: 16px; padding: 0 3px; }
#managerApp #archives :is(button, input, select, a):focus-visible { outline: 3px solid #8acbff; outline-offset: 3px; }

@media (max-width: 1320px) {
  #managerApp #archives .ma-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #managerApp #archives .ma-search { grid-column: 1 / -1; }
  #managerApp #archives .ma-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  #managerApp #archives .ma-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #managerApp #archives .ma-heading { align-items: flex-start; margin-bottom: 18px; }
  #managerApp #archives .ma-heading :is(h2, h3) { font-size: 26px; }
  #managerApp #archives .ma-summary { gap: 12px; margin-bottom: 20px; }
  #managerApp #archives .ma-stat { min-height: 174px; padding: 18px; }
  #managerApp #archives .ma-stat-icon { top: 18px; left: 18px; }
  #managerApp #archives .ma-stat-label { padding-left: 54px; }
  #managerApp #archives .ma-stat-value { font-size: 34px; }
  #managerApp #archives .ma-tabs { gap: 4px 10px; margin-bottom: 18px; }
  #managerApp #archives .ma-tab { flex: 1 1 170px; padding-right: 12px; padding-left: 12px; }
  #managerApp #archives .ma-filters { gap: 14px; padding: 18px; }
  #managerApp #archives .ma-filters :is(label, .ma-search, .ma-filter-date, .ma-filter-status) { flex: 1 1 100%; }
  #managerApp #archives .ma-filter-actions { justify-content: stretch; }
  #managerApp #archives .ma-filter-actions .btn { flex: 1 1 auto; }
  #managerApp #archives .ma-pagination { padding: 18px; align-items: flex-start; }
  #managerApp #archives .ma-pagination-info { flex-basis: 100%; }
  #managerApp #archives .ma-page-buttons { width: 100%; }
}
@media (max-width: 479px) {
  #managerApp #archives .ma-summary { grid-template-columns: minmax(0, 1fr); }
  #managerApp #archives .ma-stat { min-height: 166px; }
  #managerApp #archives .ma-tabs { gap: 4px 6px; }
  #managerApp #archives .ma-tab { flex-basis: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #managerApp #archives :is(.ma-tab, .ma-view, .ma-page-buttons button) { transition: none; }
}
@media print {
  #managerApp #archives { color: #20334f; }
  #managerApp #archives .ma-heading { margin-bottom: 16px; }
  #managerApp #archives .ma-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  #managerApp #archives .ma-stat { min-height: 0; padding: 12px; border-color: #d5deea; background: #fff; box-shadow: none; break-inside: avoid; }
  #managerApp #archives .ma-stat-icon { display: none; }
  #managerApp #archives .ma-stat-label { min-height: 0; padding-left: 0; font-size: 15px; }
  #managerApp #archives .ma-stat-value { font-size: 28px; margin-top: 10px; }
  #managerApp #archives :is(.ma-tabs, .ma-filters, .ma-pagination, .ma-view) { display: none !important; }
  #managerApp #archives .ma-panel.card { border-color: #d5deea; border-radius: 0; overflow: visible; box-shadow: none; }
  #managerApp #archives .ma-table-wrap { max-width: none; overflow: visible; }
  #managerApp #archives .ma-table { width: 100%; min-width: 0; }
  #managerApp #archives .ma-table thead { display: table-header-group; }
  #managerApp #archives .ma-table tr { break-inside: avoid; }
  #managerApp #archives .ma-table :is(th, td) { padding: 9px 7px; white-space: normal; overflow-wrap: anywhere; }
  #managerApp #archives .ma-table :is(th, td):first-child { padding-left: 9px; }
  #managerApp #archives .ma-table :is(th, td):last-child { padding-right: 9px; }
  #managerApp #archives .ma-table td:has(.ma-name) { min-width: 0; }
  #managerApp #archives :is(.ma-type, .ma-status) { white-space: normal; padding: 4px 6px; }
}

/* Daily call archives: every tour shares the same day section. */
#managerApp #archives .ma-call-day td { background: #edf5ff; padding: 17px 22px; border-top: 1px solid #dce8f8; }
#managerApp #archives .ma-call-day-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; }
#managerApp #archives .ma-call-day-heading h3 { margin: 0; color: #284e7b; font-size: 19px; line-height: 1.5; text-transform: capitalize; }
#managerApp #archives .ma-call-day-heading > span { color: #526f96; font-size: 16px; line-height: 1.5; }
@media print {
  #managerApp #archives .ma-call-day { break-after: avoid; }
  #managerApp #archives .ma-call-day td { background: #f2f5fa; padding: 12px 9px; }
  #managerApp #archives .ma-call-day-heading h3 { font-size: 17px; }
}